:root {
  --bg: #07111f;
  --panel: rgba(12, 26, 45, 0.82);
  --line: rgba(132, 205, 255, 0.22);
  --text: #eef7ff;
  --muted: #9bb1c7;
  --cyan: #28d6ff;
  --green: #7ef0b0;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 14% 8%, rgba(40, 214, 255, 0.16), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(126, 240, 176, 0.12), transparent 28%),
    linear-gradient(135deg, #07111f 0%, #0b1728 52%, #0c1020 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(rgba(40, 214, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: gridDrift 18s linear infinite;
}

.math-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.34;
}

.math-sky span {
  position: absolute;
  left: var(--x);
  top: -42px;
  color: rgba(221, 244, 255, .32);
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 900;
  animation: mathFloat var(--d) linear infinite;
  animation-delay: calc(var(--i) * -1.2s);
  text-shadow: 0 0 18px rgba(40, 214, 255, .18);
}

.shell,
.site-footer,
.toast {
  position: relative;
  z-index: 1;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; min-width: 0; }
button, .primary, .secondary { cursor: pointer; }

.card-encounter-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 10, 20, .72);
  backdrop-filter: blur(12px);
  animation: cardLayerIn .24s ease-out both;
}

.card-encounter-modal {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(280px, 420px);
  gap: 26px;
  align-items: center;
  width: min(760px, 100%);
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(154, 240, 179, .38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 12%, rgba(127, 221, 255, .18), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(255, 209, 102, .15), transparent 30%),
    rgba(12, 26, 45, .96);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .46), 0 0 44px rgba(127, 221, 255, .16);
}

.card-encounter-modal::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(127, 221, 255, .18);
  pointer-events: none;
}

.card-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.card-encounter-art,
.card-encounter-copy {
  position: relative;
  z-index: 1;
}

.thought-card-svg {
  display: block;
  width: min(260px, 100%);
  margin-inline: auto;
  filter: drop-shadow(0 24px 36px rgba(0, 0, 0, .38));
  animation: cardFloat 3.4s ease-in-out infinite;
}

.thought-card-image {
  display: block;
  width: min(280px, 100%);
  margin-inline: auto;
  border-radius: 14px;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .42)) drop-shadow(0 0 18px rgba(127, 221, 255, .2));
  animation: cardFloat 3.4s ease-in-out infinite;
}

.thought-card-svg .card-shell {
  fill: rgba(7, 17, 31, .95);
  stroke: rgba(127, 221, 255, .38);
  stroke-width: 2;
}

.thought-card-svg .card-inner {
  fill: rgba(255, 255, 255, .045);
  stroke: rgba(221, 244, 255, .16);
}

.thought-card-svg .hero-glow {
  opacity: .92;
}

.thought-card-svg .card-no,
.thought-card-svg .card-rarity,
.thought-card-svg .card-title,
.thought-card-svg .card-ability {
  fill: #eef7ff;
  font-family: "Microsoft YaHei", sans-serif;
  font-weight: 900;
}

.thought-card-svg .card-no { font-size: 15px; text-anchor: start; }
.thought-card-svg .card-rarity { font-size: 14px; text-anchor: middle; fill: #9af0b3; letter-spacing: 1px; }
.thought-card-svg .card-title { font-size: 20px; text-anchor: middle; }
.thought-card-svg .card-ability { font-size: 14px; text-anchor: middle; fill: #aac0d8; }
.thought-card-svg .tech-grid {
  fill: none;
  stroke: rgba(127, 221, 255, .14);
  stroke-width: 1;
}
.thought-card-svg .card-theme-large .icon-grid,
.collection-card-icon .icon-grid {
  fill: none;
  stroke: rgba(127, 221, 255, .11);
  stroke-width: .8;
}
.thought-card-svg .card-theme-large .icon-panel,
.collection-card-icon .icon-panel {
  fill: rgba(255, 255, 255, .035);
  stroke: rgba(154, 240, 179, .66);
  stroke-width: 2.4;
}
.thought-card-svg .card-theme-large .icon-line,
.collection-card-icon .icon-line {
  fill: none;
  stroke: #8bdfff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(127, 221, 255, .18));
}
.thought-card-svg .card-theme-large .icon-line.thin,
.collection-card-icon .icon-line.thin {
  stroke-width: 2.4;
  opacity: .72;
}
.thought-card-svg .card-theme-large .icon-line.accent,
.collection-card-icon .icon-line.accent {
  stroke: #9af0b3;
}
.thought-card-svg .card-theme-large .icon-node,
.collection-card-icon .icon-node {
  fill: #07111f;
  stroke: #9af0b3;
  stroke-width: 3.4;
}
.thought-card-svg .card-theme-large .icon-node.accent,
.collection-card-icon .icon-node.accent {
  stroke: #8bdfff;
}
.thought-card-svg .card-theme-large .icon-dot,
.collection-card-icon .icon-dot {
  fill: #8bdfff;
}
.thought-card-svg .card-theme-large .icon-dot.accent,
.collection-card-icon .icon-dot.accent {
  fill: #f8df88;
}
.thought-card-svg .orbit,
.thought-card-svg .signal-ring,
.thought-card-svg .core-mark,
.thought-card-svg .data-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.thought-card-svg .orbit {
  stroke: rgba(154, 240, 179, .46);
  stroke-width: 2;
}
.thought-card-svg .signal-ring {
  stroke: rgba(127, 221, 255, .52);
  stroke-width: 3;
  stroke-dasharray: 10 12;
  animation: cardTrace 3.8s linear infinite;
}
.thought-card-svg .core-mark {
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(127, 221, 255, .28));
}
.thought-card-svg .core-node {
  fill: #07111f;
  stroke: #9af0b3;
  stroke-width: 4;
}
.thought-card-svg .data-line {
  stroke: rgba(127, 221, 255, .45);
  stroke-width: 3;
}
.thought-card-svg .data-line.short {
  stroke: rgba(154, 240, 179, .38);
}
.thought-card-svg .spark {
  fill: #ffd166;
  animation: sparklePulse 1.8s ease-in-out infinite;
}
.thought-card-svg .spark.cool {
  fill: #7fddff;
  animation-delay: .4s;
}

.collection-card-icon .card-unique-mark,
.thought-card-svg .card-unique-mark {
  opacity: .78;
}

.collection-card-icon .unique-line,
.thought-card-svg .unique-line {
  stroke-dasharray: 3 4;
}

.collection-card-icon .unique-dot,
.collection-card-icon .unique-node,
.thought-card-svg .unique-dot,
.thought-card-svg .unique-node {
  filter: drop-shadow(0 0 5px rgba(154, 240, 179, .45));
}

.collection-card-icon .icon-signature,
.thought-card-svg .icon-signature {
  fill: rgba(226, 237, 249, .72);
  font-size: 8px;
  font-weight: 900;
  text-anchor: end;
  letter-spacing: .4px;
}

.thought-card-svg .icon-signature {
  font-size: 7px;
}

.thought-card-svg.rarity-rare .card-shell {
  stroke: rgba(154, 240, 179, .58);
}
.thought-card-svg.rarity-epic .card-shell {
  stroke: rgba(200, 167, 255, .62);
}
.thought-card-svg.rarity-legend .card-shell {
  stroke: rgba(255, 209, 102, .72);
}
.thought-card-svg.rarity-epic .orbit,
.thought-card-svg.rarity-epic .core-node {
  stroke: #c8a7ff;
}
.thought-card-svg.rarity-legend .orbit,
.thought-card-svg.rarity-legend .core-node {
  stroke: #ffd166;
}
.thought-card-svg.rarity-epic .card-rarity {
  fill: #c8a7ff;
}
.thought-card-svg.rarity-legend .card-rarity {
  fill: #ffd166;
}

@keyframes cardTrace {
  to {
    stroke-dashoffset: -44;
  }
}

.card-encounter-copy h3 {
  margin: 8px 0 12px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.card-encounter-copy p {
  color: var(--muted);
  line-height: 1.7;
}

.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.card-meta-row span {
  padding: 8px 14px;
  color: var(--green);
  border: 1px solid rgba(154, 240, 179, .32);
  border-radius: 999px;
  background: rgba(154, 240, 179, .08);
  font-weight: 900;
}

.card-encounter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.card-encounter-layer.collected .thought-card-svg {
  animation: cardCollect .9s ease-in both;
}

.shell { width: min(1440px, 100%); margin: 0 auto; }

.topbar {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(300px, 1fr) auto auto auto;
  align-items: center;
  gap: 14px;
  margin: 10px clamp(12px, 3vw, 34px) 0;
  padding: 10px clamp(12px, 2.4vw, 24px);
  background:
    linear-gradient(135deg, rgba(127, 221, 255, 0.075), rgba(154, 240, 179, 0.035)),
    rgba(7, 17, 31, 0.9);
  border: 1px solid rgba(132, 205, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(20px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}

.brand-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  flex: 0 0 62px;
  overflow: visible;
  color: transparent;
  font-weight: 900;
  font-size: 20px;
  text-indent: -999px;
  background: url("/assets/logo-icon-transparent.png") center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.brand-mark::before {
  content: none;
}

.brand-mark::after {
  content: none;
}

.brand strong, .brand small { display: block; }
.brand strong {
  line-height: 1.1;
  white-space: nowrap;
  font-size: 22px;
  letter-spacing: 0;
}
.brand small {
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 4px;
  border: 1px solid rgba(132, 205, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.nav a, .user-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  text-decoration: none;
  font-weight: 900;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav a:hover,
.nav a.active {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.user-pill {
  color: var(--green);
  white-space: nowrap;
  justify-self: end;
  min-width: 82px;
  width: max-content;
  padding-inline: 12px;
  border-color: rgba(154, 240, 179, 0.22);
  background: rgba(154, 240, 179, 0.07);
  align-self: center;
  min-height: 44px;
}
.user-pill:hover {
  border-color: rgba(154, 240, 179, 0.45);
  background: rgba(154, 240, 179, 0.12);
}
.user-pill a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}
.user-pill small { display: block; color: var(--muted); font-size: 11px; line-height: 1.1; }

.section-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.page-motion {
  position: relative;
  min-height: 142px;
  margin: 18px 0 22px;
  overflow: hidden;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 22% 46%, rgba(127, 221, 255, .08), transparent 30%),
    linear-gradient(135deg, rgba(127, 221, 255, .045), rgba(154, 240, 179, .028)),
    rgba(255, 255, 255, .022);
  box-shadow: inset 0 0 48px rgba(40, 214, 255, .035), 0 18px 48px rgba(0, 0, 0, .12);
}

.page-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(127, 221, 255, .09), transparent);
  transform: translateX(-120%);
  animation: motionSweep 8s ease-in-out infinite;
}

.page-motion svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 142px;
}

.page-motion-home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 156px;
  padding: 18px;
}

.page-motion-home .motion-home-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(430px, 100%);
}

.page-motion-home .motion-home-eval {
  width: min(760px, 100%);
}

.page-motion-home .study-visual {
  justify-self: auto;
  width: min(360px, 96%);
  min-height: 124px;
}

.page-motion-home .score-strip {
  justify-self: auto;
  width: min(360px, 96%);
  height: 112px;
  padding: 6px 10px 0;
}

.page-motion-home .ability-mini,
.page-motion-home .ai-bubbles,
.page-motion-home .eval-path-visual {
  justify-self: auto;
  width: min(340px, 96%);
  padding: 16px;
}

.page-motion-home .eval-path-visual {
  width: 100%;
}

.page-motion-home .ai-bubbles {
  grid-template-columns: 86px 1fr;
}

.page-motion-home .ai-question-visual {
  width: 76px;
  height: 94px;
}

.eval-path-visual {
  display: grid;
  grid-template-columns: 122px minmax(72px, 1fr) 122px minmax(72px, 1fr) 122px;
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background:
    linear-gradient(rgba(132, 205, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 205, 255, .07) 1px, transparent 1px),
    rgba(7, 18, 33, .36);
  background-size: 28px 28px;
}

.eval-path-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.eval-path-node i {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  color: #06111f;
  font-style: normal;
  font-weight: 950;
  border-radius: 999px;
  background: rgba(221, 244, 255, .24);
  border: 2px solid rgba(154, 240, 179, .72);
}

.eval-path-node.active i {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 22px rgba(154, 240, 179, .24);
}

.eval-path-node strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}

.eval-path-node span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.eval-path-visual b {
  display: block;
  height: 3px;
  margin-top: 23px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(127, 221, 255, .88), rgba(154, 240, 179, .72));
  box-shadow: 0 0 18px rgba(127, 221, 255, .12);
}

.test-taking-workspace .page-motion {
  min-height: 72px;
  margin: 10px 0 14px;
  opacity: .72;
}

.test-taking-workspace .page-motion svg {
  height: 72px;
}

.page-motion path,
.page-motion rect,
.page-motion circle,
.page-motion polygon,
.page-motion line {
  fill: none;
  stroke: rgba(221, 244, 255, .7);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-motion rect,
.page-motion circle {
  fill: rgba(255, 255, 255, .035);
}

.motion-grid-line {
  stroke: rgba(127, 221, 255, .12) !important;
  stroke-width: 1 !important;
}

.motion-path,
.motion-question-path {
  stroke: var(--cyan) !important;
  stroke-dasharray: 10 14;
  animation: dashFlow 4s linear infinite;
}

.motion-dot {
  fill: var(--green) !important;
  stroke: rgba(154, 240, 179, .5) !important;
  animation: pulseDot 2.2s ease-in-out infinite;
}

.motion-dot.dot-two { animation-delay: .35s; }
.motion-dot.dot-three { animation-delay: .7s; }

.motion-book,
.motion-film,
.motion-comic,
.motion-card-stack,
.motion-ai-chip,
.motion-radar,
.motion-lock,
.motion-search {
  filter: drop-shadow(0 0 14px rgba(127, 221, 255, .16));
  transform-origin: center;
  animation: softBob 4.2s ease-in-out infinite;
}

.motion-film { animation-delay: .4s; }
.motion-comic { animation-delay: .8s; }
.motion-ai-chip { animation-duration: 3.6s; }

.motion-film path,
.motion-check,
.motion-key path,
.motion-search path {
  stroke: var(--green) !important;
}

.motion-check {
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  animation: drawCheck 2.8s ease-in-out infinite;
}

.motion-answer-flow rect {
  fill: rgba(127, 221, 255, .08);
  animation: answerTile 2.6s ease-in-out infinite;
}

.motion-answer-flow rect:nth-child(2) { animation-delay: .2s; }
.motion-answer-flow rect:nth-child(3) { animation-delay: .4s; }

.motion-gauge path:first-child {
  stroke: rgba(154, 240, 179, .65);
}

.motion-needle {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: needleMove 3.6s ease-in-out infinite;
}

.motion-radar-fill {
  fill: rgba(154, 240, 179, .18) !important;
  stroke: var(--green) !important;
  animation: radarPulse 2.8s ease-in-out infinite;
}

.motion-bars rect {
  fill: rgba(154, 240, 179, .08);
  stroke: rgba(154, 240, 179, .72);
  animation: barGrow 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

.motion-bars rect:nth-child(2) { animation-delay: .12s; }
.motion-bars rect:nth-child(3) { animation-delay: .24s; }
.motion-bars rect:nth-child(4) { animation-delay: .36s; }
.motion-bars rect:nth-child(5) { animation-delay: .48s; }

.motion-think-lines path,
.motion-data path {
  stroke: var(--green) !important;
  stroke-dasharray: 120;
  animation: lineFlash 3s ease-in-out infinite;
}

.motion-data rect {
  animation: dataCard 3.4s ease-in-out infinite;
}

.motion-data rect:nth-child(2) { animation-delay: .15s; }
.motion-data rect:nth-child(3) { animation-delay: .3s; }
.motion-data rect:nth-child(4) { animation-delay: .45s; }

.cartoon-motion {
  overflow: visible;
}

.tech-motion {
  overflow: visible;
}

.tech-grid line {
  stroke: rgba(127, 221, 255, .075) !important;
  stroke-width: 1 !important;
}

.tech-grid-clean line {
  stroke: rgba(127, 221, 255, .07) !important;
  stroke-width: .85 !important;
}

.tech-radar-glow {
  fill: url(#motionGlow) !important;
  opacity: .18;
  stroke: none !important;
  animation: pulseDot 3.4s ease-in-out infinite;
}

.tech-radar {
  cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(127, 221, 255, .18));
}

.tech-radar circle,
.tech-radar path {
  fill: rgba(127, 221, 255, .025) !important;
  stroke: rgba(127, 221, 255, .32) !important;
  stroke-width: 2 !important;
}

.tech-flow {
  fill: none !important;
  stroke: url(#motionTechGrad) !important;
  stroke-width: 2.5 !important;
  stroke-dasharray: 7 12;
  animation: dashFlow 7s linear infinite;
  filter: drop-shadow(0 0 10px rgba(127, 221, 255, .16));
}

.tech-flow-clean {
  stroke-width: 1.65 !important;
  stroke-dasharray: 8 14;
  opacity: .72;
  filter: drop-shadow(0 0 6px rgba(127, 221, 255, .12));
}

.tech-flow-secondary {
  opacity: .55;
  stroke-width: 2 !important;
}

.tech-panel rect {
  fill: rgba(8, 22, 40, .66) !important;
  stroke: rgba(127, 221, 255, .34) !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .18));
}

.tech-panel-line {
  stroke: rgba(127, 221, 255, .22) !important;
  stroke-width: 1.5 !important;
}

.tech-title,
.tech-line,
.tech-node text,
.tech-symbol,
.motion-interaction-hint {
  stroke: none !important;
  font-family: inherit;
  font-weight: 950;
}

.tech-title {
  fill: var(--text) !important;
  font-size: 21px;
}

.tech-line {
  fill: rgba(221, 244, 255, .68) !important;
  font-size: 13px;
  font-weight: 800;
}

.tech-prop rect,
.tech-prop circle,
.tech-prop path {
  stroke: rgba(154, 240, 179, .62) !important;
  stroke-width: 3 !important;
}

.tech-prop-simple rect,
.tech-prop-simple circle,
.tech-prop-simple path {
  stroke-width: 1.85 !important;
  opacity: .94;
}

.tech-prop rect,
.tech-prop circle {
  fill: rgba(127, 221, 255, .045) !important;
}

.tech-check {
  stroke: var(--green) !important;
  stroke-dasharray: 74;
  stroke-dashoffset: 74;
  animation: drawCheck 2.8s ease-in-out infinite;
}

.tech-symbol {
  fill: var(--green) !important;
  font-size: 42px;
  text-anchor: middle;
}

.tech-symbol.small {
  fill: #07111f !important;
  font-size: 18px;
}

.tech-live-dot {
  fill: var(--green) !important;
  stroke: rgba(154, 240, 179, .8) !important;
  animation: pulseDot 1.8s ease-in-out infinite;
}

.tech-node {
  cursor: pointer;
  filter: drop-shadow(0 0 12px rgba(154, 240, 179, .22));
  animation: softBob 3.8s ease-in-out infinite;
}

.tech-node.node-b { animation-delay: .25s; }
.tech-node.node-c { animation-delay: .5s; }

.tech-node circle {
  fill: rgba(154, 240, 179, .75) !important;
  stroke: rgba(221, 244, 255, .55) !important;
  stroke-width: 2 !important;
}

.tech-node circle {
  stroke-width: 1.4 !important;
}

.tech-node text {
  fill: var(--green) !important;
  font-size: 13px;
  text-anchor: middle;
}

.tech-metric {
  cursor: pointer;
  animation: softBob 4.6s ease-in-out infinite;
}

.tech-metric.metric-2 { animation-delay: .18s; }
.tech-metric.metric-3 { animation-delay: .36s; }

.tech-metric rect {
  fill: rgba(8, 22, 40, .56) !important;
  stroke: rgba(127, 221, 255, .25) !important;
  stroke-width: 1.5 !important;
}

.tech-metric circle {
  fill: rgba(154, 240, 179, .82) !important;
  stroke: rgba(221, 244, 255, .4) !important;
  stroke-width: 1.5 !important;
}

.tech-metric text {
  fill: rgba(221, 244, 255, .78) !important;
  stroke: none !important;
  font-size: 12px;
  font-weight: 900;
}

.tech-orb circle {
  fill: rgba(154, 240, 179, .72) !important;
  stroke: rgba(221, 244, 255, .7) !important;
  stroke-width: 2.5 !important;
}

.page-motion.motion-solved .tech-panel rect {
  stroke: rgba(154, 240, 179, .95) !important;
  filter: drop-shadow(0 0 16px rgba(154, 240, 179, .28));
}

.page-motion [data-motion-action],
.motion-drag-orb {
  pointer-events: auto;
  cursor: pointer;
}

.motion-run-track {
  fill: none !important;
  stroke: rgba(127, 221, 255, .22) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 8 12;
  animation: dashFlow 5s linear infinite;
}

.cartoon-runner {
  pointer-events: auto;
  transform-box: view-box;
  transform-origin: center;
  animation: runnerTravel 8.5s linear infinite;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .26));
}

.page-motion.motion-sprint .cartoon-runner {
  animation-duration: 2.4s;
}

.runner-shadow {
  fill: rgba(0, 0, 0, .25) !important;
  stroke: none !important;
}

.runner-face {
  fill: #ffd7aa !important;
  stroke: rgba(255, 208, 154, .9) !important;
}

.runner-hair {
  fill: #26364d !important;
  stroke: #26364d !important;
}

.runner-eye {
  fill: #081320 !important;
  stroke: none !important;
}

.runner-smile,
.runner-arm,
.runner-leg {
  fill: none !important;
  stroke: #dff2ff !important;
  stroke-width: 5 !important;
  stroke-linecap: round !important;
}

.runner-body {
  fill: #ffd166 !important;
  stroke: rgba(255, 209, 102, .8) !important;
}

.runner-leg,
.runner-arm {
  transform-box: fill-box;
  transform-origin: center top;
  animation: runnerLimb 420ms ease-in-out infinite alternate;
}

.runner-leg.leg-back,
.runner-arm.arm-front {
  animation-direction: alternate-reverse;
}

.cartoon-soft-dots circle {
  fill: rgba(255, 209, 102, .22) !important;
  stroke: none !important;
  animation: pulseDot 2.8s ease-in-out infinite;
}

.cartoon-soft-dots circle:nth-child(2) {
  animation-delay: .3s;
}

.cartoon-soft-dots circle:nth-child(3) {
  animation-delay: .6s;
}

.cartoon-soft-dots circle:nth-child(4) {
  animation-delay: .9s;
}

.cartoon-board rect,
.cartoon-bubble path {
  fill: rgba(9, 23, 41, .76) !important;
  stroke: rgba(127, 221, 255, .34) !important;
}

.cartoon-board {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .16));
  animation: softBob 4.4s ease-in-out infinite;
}

.motion-label {
  fill: var(--text);
  stroke: none;
  font-family: inherit;
  font-weight: 950;
}

.motion-title {
  font-size: 24px;
}

.motion-line {
  fill: rgba(221, 244, 255, .68);
  font-size: 15px;
  font-weight: 800;
}

.cartoon-bubble {
  animation: bubbleFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(127, 221, 255, .16));
}

.cartoon-bubble text {
  fill: var(--green);
  stroke: none;
  font-size: 18px;
  font-weight: 950;
  text-anchor: middle;
  dominant-baseline: middle;
}

.cartoon-student,
.cartoon-teacher {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.cartoon-student {
  animation: studentNod 4.2s ease-in-out infinite;
}

.cartoon-teacher {
  animation: teacherBob 4s ease-in-out infinite;
}

.cartoon-shadow {
  fill: rgba(0, 0, 0, .22) !important;
  stroke: none !important;
}

.cartoon-face {
  fill: #ffd7aa !important;
  stroke: rgba(255, 208, 154, .9) !important;
}

.cartoon-hair {
  fill: #314866 !important;
  stroke: #314866 !important;
}

.cartoon-eye,
.teacher-eye {
  fill: #081320 !important;
  stroke: none !important;
}

.cartoon-smile,
.teacher-smile {
  fill: none !important;
  stroke: #081320 !important;
  stroke-width: 3 !important;
}

.cartoon-shirt {
  fill: #ffb36d !important;
  stroke: rgba(255, 210, 150, .72) !important;
}

.cartoon-book {
  fill: rgba(127, 221, 255, .18) !important;
  stroke: rgba(127, 221, 255, .68) !important;
}

.student-arm,
.teacher-arm,
.teacher-antenna {
  fill: none !important;
  stroke: rgba(221, 244, 255, .82) !important;
  stroke-width: 6 !important;
}

.wave-arm {
  transform-box: fill-box;
  transform-origin: right bottom;
  animation: waveHand 2.8s ease-in-out infinite;
}

.teacher-body {
  fill: #8ff0bd !important;
  stroke: rgba(154, 240, 179, .78) !important;
}

.teacher-head {
  fill: rgba(127, 221, 255, .88) !important;
  stroke: rgba(221, 244, 255, .82) !important;
}

.teacher-antenna-dot {
  fill: #ffd166 !important;
  stroke: rgba(255, 209, 102, .72) !important;
}

.cartoon-prop rect,
.cartoon-prop circle {
  fill: rgba(127, 221, 255, .1) !important;
  stroke: rgba(154, 240, 179, .74) !important;
}

.cartoon-prop path {
  fill: none !important;
  stroke: rgba(221, 244, 255, .82) !important;
}

.prop-badge path {
  fill: #ffd166 !important;
  stroke: rgba(255, 209, 102, .88) !important;
}

.motion-big-mark,
.motion-small-mark {
  fill: var(--green);
  stroke: none;
  text-anchor: middle;
  font-weight: 950;
}

.motion-big-mark {
  font-size: 44px;
}

.motion-small-mark {
  fill: #081320;
  font-size: 20px;
}

.cartoon-sparkles .motion-dot {
  animation-duration: 1.8s;
}

.motion-click-star {
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 0 16px rgba(255, 209, 102, .34));
}

.motion-click-star path {
  fill: #ffd166 !important;
  stroke: rgba(255, 236, 181, .84) !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: starWiggle 2.6s ease-in-out infinite;
}

.motion-click-star text,
.motion-drag-orb text,
.motion-interaction-hint {
  fill: rgba(221, 244, 255, .74);
  stroke: none;
  font-size: 12px;
  font-weight: 900;
  text-anchor: middle;
}

.motion-drag-orb {
  cursor: grab;
  filter: drop-shadow(0 0 18px rgba(154, 240, 179, .36));
}

.page-motion.is-dragging .motion-drag-orb {
  cursor: grabbing;
}

.motion-drag-orb circle {
  fill: rgba(154, 240, 179, .9) !important;
  stroke: rgba(221, 244, 255, .86) !important;
  animation: orbBeat 1.5s ease-in-out infinite;
}

.motion-drag-orb path {
  fill: none !important;
  stroke: #07111f !important;
  stroke-width: 4 !important;
}

.motion-interaction-hint {
  fill: rgba(154, 240, 179, .72);
  font-size: 13px;
  opacity: .9;
  animation: hintBlink 3.8s ease-in-out infinite;
}

.motion-burst-dot {
  fill: #ffd166 !important;
  stroke: rgba(255, 255, 255, .62) !important;
  stroke-width: 1 !important;
  transform-box: fill-box;
  transform-origin: center;
  animation: burstDot .86s ease-out forwards;
}

.page-motion.motion-cheer .cartoon-student {
  animation: studentJump .7s ease-in-out 1;
}

.page-motion.motion-cheer .cartoon-teacher {
  animation: teacherCheer .7s ease-in-out 1;
}

.page-motion.motion-solved .cartoon-board rect {
  stroke: rgba(154, 240, 179, .95) !important;
  filter: drop-shadow(0 0 16px rgba(154, 240, 179, .28));
}

.mode-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.mode-switch button {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.mode-switch button.active {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #07101d;
}

.global-search {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 720px;
}

.search-box {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 4px 6px;
  color: var(--muted);
  border: 1px solid rgba(132, 205, 255, 0.2);
  border-radius: 15px;
  background: rgba(3, 12, 25, 0.58);
  box-shadow: inset 0 0 24px rgba(40, 214, 255, 0.04);
}

.search-segment {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-width: 148px;
  padding: 3px;
  border: 1px solid rgba(40, 214, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.search-segment button {
  min-height: 34px;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}

.search-segment button::after {
  display: none;
}

.search-segment button.active {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.search-input-wrap {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
}

.search-box input {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 38px;
  padding: 0 6px;
  color: var(--text);
  border: 0;
  background: transparent;
  outline: 0;
}

.search-placeholder-ticker {
  position: absolute;
  top: 50%;
  left: 6px;
  z-index: 0;
  white-space: nowrap;
  color: rgba(238, 247, 255, 0.46);
  pointer-events: none;
  transform: translateY(-50%);
  animation: searchHintDrift 8s ease-in-out infinite;
}

.search-input-wrap.has-value .search-placeholder-ticker,
.search-input-wrap:focus-within .search-placeholder-ticker {
  opacity: 0;
}

.search-submit {
  position: relative;
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border-radius: 12px;
}

.search-icon {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border: 2px solid #06111f;
  border-radius: 50%;
}

.search-icon::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -5px;
  width: 9px;
  height: 2px;
  background: #06111f;
  border-radius: 999px;
  transform: rotate(45deg);
}

.section-note {
  margin: 8px 0 0;
  color: var(--muted);
}

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

.search-result-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.search-result-card:hover {
  transform: translateY(-1px);
  border-color: rgba(40, 214, 255, 0.22);
  background: rgba(255, 255, 255, 0.055);
}

.search-result-card h3 {
  margin: 0;
}

.search-result-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.search-result-card small {
  color: var(--muted);
  line-height: 1.5;
}

.home-main, .page-main { padding: 0 clamp(18px, 5vw, 64px) 48px; }

.hero {
  min-height: calc(100vh - 82px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.hero-copy {
  animation: riseIn 700ms ease both;
}

.simple-hero { padding: clamp(44px, 8vw, 96px) 0; }

body[data-page="home"] .hero {
  min-height: auto;
}

body[data-page="home"] .simple-hero {
  padding: clamp(38px, 5.6vw, 78px) 0 clamp(24px, 3.4vw, 42px);
}

body[data-page="home"] .hero {
  grid-template-columns: minmax(520px, 1.05fr) minmax(520px, .95fr);
  gap: clamp(36px, 5vw, 78px);
}

body[data-page="home"] .hero-copy h1 {
  margin: 12px 0 20px;
  font-size: clamp(64px, 6.4vw, 112px);
  line-height: .96;
  white-space: nowrap;
}

body[data-page="home"] .lead {
  max-width: 760px;
  font-size: clamp(20px, 1.65vw, 28px);
  color: #d7e6f4;
}

.hero-copy h1 {
  margin: 10px 0 18px;
  font-size: clamp(52px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: 0;
}

.hero-title-ai {
  display: inline-block;
  margin-right: .16em;
  color: #78e7ff;
  text-shadow: 0 0 20px rgba(120, 231, 255, 0.38), 0 0 42px rgba(142, 240, 200, 0.2);
}

.lead {
  max-width: 720px;
  color: #c8d7e6;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.7;
}

.typewriter {
  min-height: 3.4em;
}

.type-cursor {
  display: inline-block;
  width: 2px;
  height: 1.12em;
  margin-left: 4px;
  vertical-align: -0.14em;
  background: var(--green);
  box-shadow: 0 0 12px rgba(126, 240, 176, 0.76);
  animation: cursorBlink 820ms steps(2, start) infinite;
}

.math-widget {
  position: relative;
  margin: 12px 0 4px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(40, 214, 255, 0.22);
  border-radius: 8px;
  background: rgba(12, 26, 45, 0.62);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
  animation: riseIn 720ms ease 160ms both;
}

.math-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(40, 214, 255, 0.08) 42%, rgba(126, 240, 176, 0.1) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: cardSweepSoft 6s ease-in-out infinite;
}

.math-widget-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.math-widget-head span {
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.math-widget-head strong {
  color: #dff4ff;
  font-weight: 700;
}

#mathCanvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  min-height: 190px;
  touch-action: none;
}

.math-grid-bg {
  opacity: 0.85;
}

.math-axis {
  fill: none;
  stroke: rgba(223, 244, 255, 0.24);
  stroke-width: 1.6;
}

.math-curve {
  fill: none;
  stroke: url(#curveGlow);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-dasharray: 7 12;
  opacity: 0.88;
  filter: drop-shadow(0 0 5px rgba(40, 214, 255, 0.22));
  animation: dashFlow 7s linear infinite;
}

.math-runner {
  fill: var(--green);
  filter: drop-shadow(0 0 8px rgba(126, 240, 176, 0.82));
}

.math-triangle {
  fill: rgba(40, 214, 255, 0.045);
  stroke: rgba(126, 240, 176, 0.18);
  stroke-width: 1;
}

.math-line {
  stroke: rgba(126, 240, 176, 0.54);
  stroke-width: 1.35;
  stroke-dasharray: 4 8;
  animation: dashFlow 6s linear infinite;
}

.math-point {
  cursor: grab;
  user-select: none;
}

.math-point circle {
  fill: #07111f;
  stroke: var(--green);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px rgba(126, 240, 176, 0.54));
  transition: transform 160ms ease, stroke 160ms ease;
}

.math-point:hover circle {
  stroke: var(--cyan);
  transform: scale(1.12);
}

.math-point text {
  fill: #dff4ff;
  font-size: 15px;
  font-weight: 900;
}

.math-point.dragging {
  cursor: grabbing;
}

.math-point.dragging circle {
  stroke: var(--cyan);
  transform: scale(1.18);
}

.eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-url {
  color: rgba(234, 247, 255, .74);
  font-size: clamp(16px, 1.7vw, 22px);
  text-transform: none;
  text-shadow: 0 0 18px rgba(127, 221, 255, .18);
}

.hero-actions, .ask-actions, .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.primary, .secondary, button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  color: #06111f;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.primary::after, .secondary::after, button::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -46%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  transition: left 420ms ease;
}

.primary:hover, .secondary:hover, button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(40, 214, 255, 0.16);
}

.primary:hover::after, .secondary:hover::after, button:hover::after {
  left: 112%;
}

.secondary, .secondary-button {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}

.home-side {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(100%, 720px);
  justify-self: center;
  animation: riseIn 800ms ease 90ms both;
}

.site-matrix {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) 1.28fr;
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  margin: 0 0 46px;
  padding: clamp(20px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid rgba(127, 221, 255, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 16% 10%, rgba(126, 240, 176, 0.12), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(120, 231, 255, 0.1), transparent 28%),
    rgba(15, 32, 52, 0.72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  animation: riseIn 720ms ease 220ms both;
}

.site-matrix::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(127, 221, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 221, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.2));
}

.site-matrix::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 26px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(126, 240, 176, 0.16);
  border-radius: 50%;
  background: conic-gradient(from 140deg, rgba(120, 231, 255, 0.28), transparent 42%, rgba(126, 240, 176, 0.2), transparent 74%);
  filter: blur(0.2px);
  opacity: 0.42;
  animation: slowSpin 18s linear infinite;
}

.matrix-heading,
.matrix-grid {
  position: relative;
  z-index: 1;
}

.matrix-heading {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(0px, 2vw, 18px);
}

.matrix-heading h2 {
  margin: 10px 0 14px;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
}

.matrix-heading p:not(.eyebrow) {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

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

.matrix-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(127, 221, 255, 0.16);
  border-radius: 10px;
  background: rgba(7, 17, 31, 0.62);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.matrix-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(110deg, transparent, rgba(127, 221, 255, 0.1), rgba(126, 240, 176, 0.08), transparent);
  transform: translateX(-80%);
  transition: opacity 180ms ease, transform 420ms ease;
}

.matrix-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 240, 176, 0.42);
  background: rgba(14, 34, 56, 0.9);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

.matrix-card:hover::before {
  opacity: 1;
  transform: translateX(80%);
}

.matrix-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  color: #07111f;
  font-size: 20px;
  font-weight: 900;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 22px rgba(126, 240, 176, 0.22);
}

.matrix-symbol svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #06111f;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.matrix-info {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.matrix-info strong {
  font-size: 18px;
  line-height: 1.2;
}

.matrix-info small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-card em {
  position: relative;
  z-index: 1;
  padding: 6px 9px;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  border: 1px solid rgba(126, 240, 176, 0.2);
  border-radius: 999px;
  background: rgba(126, 240, 176, 0.07);
  white-space: nowrap;
}

.matrix-primary {
  border-color: rgba(120, 231, 255, 0.34);
  background: linear-gradient(135deg, rgba(120, 231, 255, 0.11), rgba(126, 240, 176, 0.07));
}

.matrix-primary .matrix-symbol {
  border-radius: 16px;
}

.matrix-current {
  border-color: rgba(255, 209, 102, 0.48);
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.12), rgba(126, 240, 176, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.08), 0 20px 42px rgba(255, 209, 102, 0.08);
}

.matrix-current .matrix-symbol {
  background: linear-gradient(135deg, #ffd166, var(--green));
}

.matrix-current em {
  color: #ffe29a;
  border-color: rgba(255, 209, 102, 0.34);
  background: rgba(255, 209, 102, 0.08);
}

.matrix-ai .matrix-symbol { background: linear-gradient(135deg, #78e7ff, #9af0b3); }
.matrix-math .matrix-symbol { background: linear-gradient(135deg, #ffd166, #9af0b3); }
.matrix-physics .matrix-symbol { background: linear-gradient(135deg, #78e7ff, #b8a7ff); }
.matrix-chemistry .matrix-symbol { background: linear-gradient(135deg, #8ef0c8, #ffdf7e); }
.matrix-chinese .matrix-symbol { background: linear-gradient(135deg, #ffb86b, #9af0b3); }
.matrix-english .matrix-symbol { background: linear-gradient(135deg, #8dd7ff, #ffd6e8); }
.matrix-history .matrix-symbol { background: linear-gradient(135deg, #d9b37a, #8ef0c8); }
.matrix-puzzle .matrix-symbol { background: linear-gradient(135deg, #b8a7ff, #8ef0c8); }

.matrix-physics:hover,
.matrix-chemistry:hover,
.matrix-chinese:hover,
.matrix-english:hover,
.matrix-history:hover,
.matrix-puzzle:hover {
  border-color: rgba(127, 221, 255, 0.36);
}

.portal-grid {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

.portal-card, .workspace, .ask-card, .ai-answer, .report {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.portal-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 0.95fr) minmax(220px, 0.72fr);
  gap: 18px;
  align-items: center;
  padding: 24px 26px;
  min-height: 204px;
  overflow: hidden;
  animation: cardIn 620ms ease both;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.portal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 20% 20%, rgba(40, 214, 255, 0.18), transparent 32%);
  transition: opacity 180ms ease;
}

.portal-card::after {
  content: "";
  position: absolute;
  left: -46%;
  top: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(126, 240, 176, 0.12), transparent);
  transform: skewX(-16deg);
  animation: cardSweep 5.5s ease-in-out infinite;
}

.portal-card:nth-child(2) { animation-delay: 80ms; }
.portal-card:nth-child(3) { animation-delay: 160ms; }

.portal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(40, 214, 255, 0.52);
  background: rgba(16, 39, 64, 0.92);
}
.portal-card:hover::before { opacity: 1; }
.portal-card > * { position: relative; z-index: 1; }
.portal-main {
  display: flex;
  align-items: center;
  gap: 14px;
  align-content: center;
}

.portal-main div {
  display: block;
  min-width: 0;
}

.portal-glyph {
  color: var(--green);
  font-size: 54px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 0 24px rgba(126, 240, 176, 0.28);
  animation: glyphFloat 4.2s ease-in-out infinite;
}
.portal-card strong {
  display: block;
  font-size: clamp(24px, 1.7vw, 32px);
  line-height: 1.12;
  white-space: nowrap;
}
.portal-card small, .chapter-card p, .report p, .wrong-item p, .scan-box small { color: var(--muted); line-height: 1.6; }

.study-visual {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 230px;
  max-width: 100%;
  min-height: 106px;
  overflow: hidden;
  border: 1px solid rgba(40, 214, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(rgba(40, 214, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 255, 0.08) 1px, transparent 1px),
    rgba(255, 255, 255, 0.035);
  background-size: 22px 22px;
}

.study-visual::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 56px;
  height: 2px;
  background: linear-gradient(90deg, rgba(40, 214, 255, 0.18), var(--cyan), var(--green), rgba(126, 240, 176, 0.18));
  background-size: 180% 100%;
  animation: lineFlow 2.6s linear infinite;
}

.study-book {
  position: absolute;
  left: 20px;
  bottom: 18px;
  width: 58px;
  height: 44px;
  border: 2px solid rgba(126, 240, 176, 0.72);
  border-radius: 4px 4px 8px 8px;
  box-shadow: 0 0 18px rgba(126, 240, 176, 0.18);
}

.study-book::before,
.study-book::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(126, 240, 176, 0.48);
}

.study-book::before { left: 50%; }
.study-book::after {
  left: 10px;
  width: 14px;
  height: 2px;
  bottom: auto;
  box-shadow: 0 9px 0 rgba(126, 240, 176, 0.48), 27px 0 0 rgba(126, 240, 176, 0.48), 27px 9px 0 rgba(126, 240, 176, 0.48);
}

.study-screen {
  position: absolute;
  right: 24px;
  top: 18px;
  width: 86px;
  height: 54px;
  border: 1px solid rgba(40, 214, 255, 0.36);
  border-radius: 8px;
  background: rgba(7, 17, 31, 0.42);
  box-shadow: inset 0 0 18px rgba(40, 214, 255, 0.1);
}

.study-screen::before {
  content: "";
  position: absolute;
  left: 31px;
  top: 15px;
  width: 0;
  height: 0;
  border-left: 18px solid var(--green);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  filter: drop-shadow(0 0 8px rgba(126, 240, 176, 0.52));
}

.study-screen i {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(40, 214, 255, 0.5);
}

.study-node {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(40, 214, 255, 0.72);
  animation: pulseDot 2.5s ease-in-out infinite;
}

.study-node.node-a { left: 96px; top: 52px; }
.study-node.node-b { left: 132px; top: 52px; animation-delay: 260ms; }
.study-node.node-c { left: 168px; top: 52px; background: var(--green); animation-delay: 520ms; }

.portal-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  justify-self: stretch;
  align-self: center;
  padding: 12px;
  border: 1px solid rgba(40, 214, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.portal-flow b {
  color: #dff4ff;
  font-size: 12px;
  font-weight: 800;
}

.portal-flow i {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(40, 214, 255, 0.15), var(--cyan), rgba(126, 240, 176, 0.2));
  background-size: 180% 100%;
  animation: lineFlow 2.4s linear infinite;
}

.portal-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-tags em {
  padding: 6px 9px;
  color: var(--green);
  font-size: 12px;
  font-style: normal;
  border: 1px solid rgba(126, 240, 176, 0.2);
  border-radius: 999px;
  background: rgba(126, 240, 176, 0.08);
}

.score-strip {
  justify-self: end;
  width: 230px;
  max-width: 100%;
  height: 86px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 9px;
}

.score-strip span {
  height: var(--h);
  min-height: 14px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--green), var(--cyan));
  box-shadow: 0 0 18px rgba(40, 214, 255, 0.18);
  animation: barPulse 1.8s ease-in-out infinite;
}

.score-strip span:nth-child(2) { animation-delay: 120ms; }
.score-strip span:nth-child(3) { animation-delay: 240ms; }
.score-strip span:nth-child(4) { animation-delay: 360ms; }
.score-strip span:nth-child(5) { animation-delay: 480ms; }

.ai-bubbles {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 10px;
  justify-self: end;
  align-self: center;
  width: 230px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid rgba(40, 214, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.ai-question-visual {
  grid-row: 1 / span 2;
  position: relative;
  width: 68px;
  height: 84px;
  align-self: center;
  border: 1px solid rgba(126, 240, 176, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(rgba(40, 214, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 255, 0.11) 1px, transparent 1px),
    rgba(7, 17, 31, 0.42);
  background-size: 17px 17px;
  box-shadow: inset 0 0 18px rgba(40, 214, 255, 0.08);
  overflow: hidden;
}

.ai-question-visual::before {
  content: "?";
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--green);
  font-size: 38px;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(126, 240, 176, 0.56);
  transform: translate(-50%, -53%);
}

.ai-question-visual::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 15px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(40, 214, 255, 0.9);
  animation: askScan 2.8s ease-in-out infinite;
}

.ai-lens {
  position: absolute;
  right: 8px;
  bottom: 9px;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(223, 244, 255, 0.72);
  border-radius: 50%;
}

.ai-lens::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -4px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(223, 244, 255, 0.72);
  transform: rotate(45deg);
}

.ai-pulse-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(40, 214, 255, 0.78);
  animation: pulseDot 2.4s ease-in-out infinite;
}

.ai-pulse-dot.dot-a {
  left: 11px;
  top: 11px;
}

.ai-pulse-dot.dot-b {
  right: 12px;
  top: 39px;
  background: var(--green);
  animation-delay: 420ms;
}

.ai-bubbles p {
  width: fit-content;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  margin: 0;
  padding: 8px 11px;
  color: #dff4ff;
  font-size: 13px;
  border: 1px solid rgba(40, 214, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  animation: bubbleFloat 2.7s ease-in-out infinite;
}

.ai-bubbles p:nth-child(2) {
  justify-self: start;
  animation-delay: 180ms;
}

.ai-bubbles p:nth-child(3) { animation-delay: 360ms; }

.ability-mini {
  display: grid;
  gap: 10px;
  justify-self: end;
  align-self: center;
  width: 230px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid rgba(40, 214, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.ability-mini p {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #dff4ff;
  font-size: 12px;
}

.ability-mini i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ability-mini i::before {
  content: "";
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  animation: lineFlow 2.4s linear infinite;
}

.workspace {
  margin-top: 28px;
  padding: clamp(18px, 3vw, 28px);
  animation: riseIn 520ms ease both;
}

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

.section-head h1, .section-head h2 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3vw, 40px);
  animation: titleRise 620ms ease both;
}

.section-subline {
  margin: 10px 0 0;
  color: rgba(200, 215, 230, 0.78);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.65;
}

.learn-subline,
.test-subline,
.eval-subline,
.ask-subline {
  width: fit-content;
  max-width: 100%;
  color: #cfe8f7;
  font-weight: 800;
  background: linear-gradient(90deg, #cfe8f7 0%, var(--green) 38%, var(--cyan) 56%, #cfe8f7 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sublineGlow 4.8s ease-in-out infinite, titleRise 620ms ease 120ms both;
}

.selector-panel, .login-strip {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(150px, 210px) minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}

.learning-profile-chip {
  align-self: end;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid rgba(157, 239, 190, 0.42);
  border-radius: 8px;
  color: var(--green);
  background: rgba(157, 239, 190, 0.09);
  font-weight: 900;
  white-space: nowrap;
}

.learn-location-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(157, 239, 190, 0.32);
  border-radius: 8px;
  background: linear-gradient(120deg, rgba(157, 239, 190, 0.12), rgba(112, 211, 255, 0.05));
}

.learn-location-panel > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.learn-location-kicker {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.learn-location-panel strong {
  color: var(--green);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.learn-directory-toggle {
  flex: 0 0 auto;
  min-width: 126px;
}

.learn-directory-panel {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(132, 224, 255, 0.24);
  border-radius: 8px;
  background: rgba(11, 24, 40, 0.82);
}

.learn-directory-controls {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(150px, 210px);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.learn-hidden-select {
  display: none;
}

.learn-directory-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
}

.learn-directory-head strong {
  color: var(--green);
}

.learn-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  max-height: min(58vh, 560px);
  overflow: auto;
  padding-right: 4px;
}

.learn-directory-node {
  min-height: 84px;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-areas:
    "index title"
    "index meta";
  gap: 5px 10px;
  align-items: center;
  text-align: left;
  padding: 14px;
  border: 1px solid rgba(132, 224, 255, 0.18);
  border-radius: 8px;
  background: rgba(23, 38, 58, 0.86);
  color: var(--text);
  cursor: pointer;
}

.learn-directory-node span {
  grid-area: index;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(132, 224, 255, 0.16);
  color: var(--cyan);
  font-weight: 900;
}

.learn-directory-node strong {
  grid-area: title;
  font-size: 18px;
  line-height: 1.2;
}

.learn-directory-node small {
  grid-area: meta;
  color: var(--muted);
}

.learn-directory-node:hover,
.learn-directory-node.active {
  border-color: rgba(157, 239, 190, 0.62);
  background: linear-gradient(120deg, rgba(157, 239, 190, 0.14), rgba(112, 211, 255, 0.08));
}

.learn-directory-node.active span {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #06111d;
}

.learn-catalog-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(132, 224, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 84% 10%, rgba(154, 240, 179, 0.08), transparent 34%),
    rgba(12, 24, 40, 0.72);
}

.learn-catalog-controls[hidden] {
  display: none !important;
}

.learn-catalog-controls > div:first-child {
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(46%, 560px);
  display: flex;
  align-items: center;
  gap: 14px;
}

.learn-catalog-controls strong {
  color: var(--green);
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.15;
  white-space: nowrap;
}

.learn-catalog-selects {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

.learn-switcher {
  flex: 1 1 620px;
  min-width: 0;
  max-width: 840px;
  display: grid;
  grid-template-columns: auto minmax(320px, 1fr);
  align-items: center;
  gap: 12px;
}

.learn-switcher-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.learn-catalog-home {
  padding: 0;
  border: 0;
  background: transparent;
}

.focused-course-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.focused-course-topbar span {
  color: var(--muted);
  font-weight: 800;
}

.focused-course-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  color: rgba(132, 229, 255, .95);
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 900;
}

.focused-course-back:hover {
  color: var(--green);
}

.learning-course-back {
  position: static;
  z-index: 1;
  flex: 0 0 auto;
}

.practice-catalog-controls {
  margin-bottom: 18px;
}

.practice-catalog-controls .learn-catalog-selects {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.chapter-quick-actions {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 16px;
}

.chapter-quick-actions .section-actions {
  margin: 0;
}

.chapter-quick-actions .section-actions a {
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
}

.basic-selector-panel {
  grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) auto;
}

.nw-selector-panel {
  grid-template-columns: minmax(180px, 260px) auto minmax(0, 1fr);
}

.account-login {
  grid-template-columns: 1fr 180px auto 180px auto;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

input, select, textarea {
  width: 100%;
  color: var(--text);
  background: #081524;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

input, select { min-height: 44px; padding: 0 12px; }
textarea { min-height: 220px; padding: 14px; resize: vertical; }

.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.visual-select {
  position: relative;
  width: 100%;
  color: var(--text);
}

.visual-select-button {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  padding: 0 42px 0 12px;
  color: var(--text);
  background: #081524;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.visual-select-button::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-68%) rotate(45deg);
}

.visual-select-button::after {
  display: none;
}

.visual-select-menu {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 360px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(132, 205, 255, 0.34);
  border-radius: 8px;
  background: #07111f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.visual-select-option {
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  padding: 8px 11px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transform-origin: left center;
}

.visual-select-option::after {
  display: none;
}

.visual-select-option:hover,
.visual-select-option:focus {
  z-index: 1;
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  transform: scale(1.08);
  font-weight: 900;
}

.visual-select-option.active {
  color: #eef7ff;
  background: rgba(40, 214, 255, 0.22);
}

.detail-panel { min-height: 220px; }

.chapter-card, .question-card, .wrong-item {
  padding: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.selected-card h2, .chapter-card h3, .question-card h3, .report h3 { margin: 0 0 10px; }

.question-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.question-title-row h3 {
  min-width: 0;
}

.question-score-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(250, 210, 116, .32);
  border-radius: 999px;
  color: #f7df9d;
  background: rgba(250, 210, 116, .08);
  font-size: 13px;
  font-weight: 900;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.tag {
  padding: 6px 9px;
  color: var(--green);
  background: rgba(126, 240, 176, 0.08);
  border: 1px solid rgba(126, 240, 176, 0.22);
  border-radius: 999px;
  font-size: 12px;
}

.test-area {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  gap: 18px;
}

.test-list, .test-paper { display: grid; gap: 14px; align-content: start; }

body[data-page="wrong-retry"] .test-area {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="wrong-retry"] .test-list {
  display: none;
}

body[data-page="wrong-retry"] .test-paper,
body[data-page="wrong-retry"] .report {
  width: 100%;
}

.test-button {
  display: block;
  color: var(--text);
  text-align: left;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
}

.test-button.active {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.question-options {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.option-label input { width: auto; min-height: auto; }

.empty-state {
  padding: 30px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.report, .ask-card, .ai-answer { padding: 18px; }

.paper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.timer-badge {
  min-width: 116px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(127, 221, 255, .08);
  color: var(--muted);
  text-align: center;
}

.timer-badge strong {
  display: block;
  color: var(--green);
  font-size: 24px;
}

.result-scene {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(127, 221, 255, .38);
  background: linear-gradient(135deg, rgba(127, 221, 255, .12), rgba(154, 240, 179, .12));
  margin-bottom: 16px;
}

.result-scene h3,
.result-scene p,
.result-scene a {
  position: relative;
  z-index: 1;
}

.result-orbit {
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(154, 240, 179, .5);
  border-radius: 50%;
  animation: resultOrbit 5s linear infinite;
}

.result-scene.perfect {
  box-shadow: 0 0 42px rgba(154, 240, 179, .22);
}

.result-scene.retry {
  background: linear-gradient(135deg, rgba(255, 137, 137, .12), rgba(127, 221, 255, .08));
}

.perfect-celebration-layer {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, rgba(154, 240, 179, .22), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(127, 221, 255, .2), transparent 26%),
    rgba(4, 12, 27, .82);
  backdrop-filter: blur(14px);
}

.perfect-celebration-card {
  position: relative;
  width: min(680px, 100%);
  padding: clamp(28px, 5vw, 48px);
  border-radius: 18px;
  border: 1px solid rgba(154, 240, 179, .48);
  background:
    linear-gradient(145deg, rgba(15, 35, 58, .96), rgba(23, 45, 67, .92)),
    repeating-linear-gradient(90deg, rgba(127, 221, 255, .06) 0 1px, transparent 1px 48px);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45), 0 0 80px rgba(154, 240, 179, .16);
  text-align: center;
  animation: perfectCardIn .42s ease-out both;
}

.perfect-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
}

.perfect-kicker {
  margin: 14px 0 6px;
  color: var(--green);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .08em;
}

.perfect-celebration-card h2 {
  margin: 0 0 12px;
  font-size: clamp(40px, 7vw, 76px);
}

.perfect-celebration-card p {
  margin-inline: auto;
  max-width: 520px;
  color: var(--muted);
}

.perfect-score-line {
  display: inline-grid;
  gap: 2px;
  margin: 18px auto 24px;
  padding: 14px 24px;
  border: 1px solid rgba(127, 221, 255, .35);
  border-radius: 999px;
  background: rgba(127, 221, 255, .1);
}

.perfect-score-line strong {
  color: var(--green);
  font-size: 28px;
}

.perfect-score-line span {
  color: var(--muted);
}

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

.perfect-actions button,
.perfect-actions a {
  width: auto;
  min-width: 126px;
  text-align: center;
}

.perfect-trophy {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 0 auto;
  animation: perfectFloat 2.8s ease-in-out infinite;
}

.perfect-trophy::before,
.perfect-trophy::after {
  content: "";
  position: absolute;
  top: 23px;
  width: 32px;
  height: 34px;
  border: 8px solid rgba(127, 221, 255, .72);
  border-radius: 50%;
}

.perfect-trophy::before { left: 0; }
.perfect-trophy::after { right: 0; }

.perfect-trophy-cup {
  position: absolute;
  left: 22px;
  top: 10px;
  width: 64px;
  height: 70px;
  border-radius: 18px 18px 28px 28px;
  background: linear-gradient(135deg, #7fddff, #9af0b3 62%, #ffe27a);
  box-shadow: 0 0 36px rgba(154, 240, 179, .32);
}

.perfect-trophy-cup::before {
  content: "A+";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #061224;
  font-size: 24px;
  font-weight: 950;
}

.perfect-trophy-base {
  position: absolute;
  left: 28px;
  bottom: 8px;
  width: 52px;
  height: 16px;
  border-radius: 999px;
  background: rgba(154, 240, 179, .9);
}

.perfect-confetti span {
  position: absolute;
  left: var(--x);
  top: -12vh;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7fddff, #9af0b3);
  animation: perfectConfetti var(--duration) linear var(--delay) infinite;
}

.perfect-confetti span:nth-child(3n) {
  background: #ffe27a;
}

.perfect-confetti span:nth-child(4n) {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #9af0b3;
}

.recharge-panel,
.login-panel {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

.login-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.password-strength {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-weight: 800;
}

.password-strength i {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8d8d 0 35%, rgba(255,255,255,.1) 35%);
}

.password-strength[data-level="ok"] i {
  background: linear-gradient(90deg, var(--cyan) 0 68%, rgba(255,255,255,.1) 68%);
}

.password-strength[data-level="strong"] i {
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.password-strength[data-level="ok"] strong,
.password-strength[data-level="strong"] strong {
  color: var(--green);
}

.consent-line {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
}

.consent-line input {
  width: auto;
  min-width: 18px;
  margin-top: 3px;
}

.inline-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.inline-field button {
  min-height: 48px;
  white-space: nowrap;
}

.reset-methods {
  display: inline-flex;
  gap: 8px;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.reset-methods button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.reset-methods button.active {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #07111f;
}

.form-tip,
.wechat-login-note,
.guardian-pay-notice,
.minor-payment-notice,
.guardian-bound-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.wechat-login-button {
  min-height: 54px;
  border: 1px solid rgba(154, 240, 179, .35);
  border-radius: 10px;
  background: rgba(154, 240, 179, .08);
  color: var(--green);
  font-weight: 900;
}

.wechat-login-note {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px dashed rgba(154, 240, 179, .32);
  border-radius: 12px;
}

.wechat-qr-placeholder {
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(154, 240, 179, .28) 2px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(rgba(154, 240, 179, .28) 2px, transparent 2px) 0 0 / 18px 18px,
    rgba(6, 17, 31, .72);
  color: var(--green);
  font-size: 14px;
  font-weight: 950;
}

.login-workspace {
  max-width: 760px;
}

.login-workspace .section-head {
  margin-bottom: 18px;
}

.login-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 640px);
  margin-bottom: 0;
  padding: 5px;
  gap: 4px;
}

.login-mode-switch button {
  min-height: 52px;
  padding: 0 12px;
  border-radius: 8px;
}

.login-panel {
  width: min(100%, 640px);
  max-width: none;
  gap: 16px;
  padding: 24px 28px;
  border-radius: 8px;
}

.login-panel label:not(.consent-line) {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
}

.login-panel input,
.login-panel select {
  min-height: 54px;
}

.password-strength {
  grid-template-columns: 86px minmax(0, 1fr) auto;
  min-height: 34px;
  gap: 12px;
}

.password-strength i {
  min-width: 0;
}

.password-strength strong {
  min-width: 96px;
  text-align: right;
}

#registerFields,
#resetFields,
#phoneResetBox,
#wechatResetBox {
  display: grid;
  gap: 14px;
}

#registerFields[hidden],
#resetFields[hidden],
#phoneResetBox[hidden],
#wechatResetBox[hidden] {
  display: none;
}

.inline-field {
  grid-template-columns: minmax(0, 1fr) 140px;
}

.inline-field button {
  width: 100%;
  padding-inline: 12px;
}

.consent-line {
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  border-radius: 8px;
}

.consent-line input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.login-panel > button[type="submit"] {
  margin-top: 2px;
}

@media (max-width: 560px) {
  .login-workspace {
    padding: 14px;
  }

  .login-mode-switch {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .login-mode-switch button {
    min-height: 46px;
  }

  .login-panel {
    width: 100%;
    padding: 18px 16px;
  }

  .password-strength {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .password-strength strong {
    min-width: 0;
    text-align: left;
  }

  .inline-field {
    grid-template-columns: 1fr;
  }

  .consent-line {
    align-items: flex-start;
  }
}

.form-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 137, 137, .42);
  border-radius: 10px;
  background: rgba(255, 137, 137, .1);
  color: #ffc0c0;
  font-weight: 800;
}

.recharge-panel {
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 18px;
}

.profile-card,
.ability-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.profile-card h2 {
  margin: 0 0 8px;
}

.site-footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 26px 18px 34px;
  color: var(--muted);
  font-size: 13px;
}

.site-footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--green);
}

.site-footer-qrcodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 14px;
  width: min(760px, 100%);
  justify-content: center;
}

.site-footer-qrcode {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 10px;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.site-footer-qrcode img {
  width: 84px;
  height: 84px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  object-fit: contain;
}

.site-footer-qrcode span {
  color: var(--text);
  font-weight: 800;
}

.site-footer-qrcode small {
  color: var(--muted);
  line-height: 1.35;
}

.site-page-content {
  display: grid;
  gap: 14px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.75;
}

.site-page-content p,
.site-page-content h2,
.site-page-content h3 {
  margin: 0;
}

.site-page-content a {
  color: var(--green);
  font-weight: 800;
}

.site-page-content img {
  max-width: min(100%, 880px);
  border-radius: 8px;
  border: 1px solid rgba(132, 205, 255, .24);
  background: rgba(255,255,255,.04);
}

.site-page-content h2 {
  margin: 10px 0 2px;
  color: #17283d;
  font-size: clamp(25px, 2.4vw, 36px);
  line-height: 1.18;
  letter-spacing: 0;
}

.site-page-content .guide-hero,
.site-page-content .guide-callout,
.site-page-content .guide-card,
.site-page-content .guide-use-card,
.site-page-content .guide-flow-node,
.site-page-content .guide-ai-card,
.site-page-content .guide-checklist li,
.site-page-content .guide-two-col > div {
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 32px rgba(39, 78, 108, .055);
}

.site-page-content .guide-hero,
.site-page-content .guide-callout {
  padding: clamp(18px, 2.4vw, 30px);
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
  background-size: 44px 44px, 44px 44px, auto;
}

.site-page-content .guide-hero {
  display: grid;
  gap: 18px;
}

.site-page-content .guide-parent-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: center;
  min-height: 250px;
  overflow: hidden;
  border-color: rgba(62, 132, 205, .20);
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 54%, #eefaf7 100%);
  background-size: 40px 40px, 40px 40px, auto;
}

.site-page-content .guide-parent-hero::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(47, 128, 237, .10);
  border-radius: 8px;
  pointer-events: none;
}

.site-page-content .guide-parent-hero h2 {
  max-width: 820px;
  margin: 0 0 12px;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.08;
}

.site-page-content .guide-hero p {
  max-width: 980px;
  margin: 0;
  color: #4f657a;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.78;
}

.site-page-content .guide-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.site-page-content .guide-hero-points span,
.site-page-content .guide-signal-grid span {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 12px 14px;
  color: #60748a;
  border: 1px solid rgba(106, 143, 174, .14);
  border-radius: 8px;
  background: rgba(247, 251, 255, .82);
}

.site-page-content .guide-signal-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.site-page-content .guide-signal-grid span {
  min-height: 78px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(239, 250, 247, .82));
  box-shadow: inset 4px 0 0 rgba(47, 191, 154, .48);
}

.site-page-content .guide-hero-points b,
.site-page-content .guide-signal-grid b {
  color: #1d2d42;
  font-size: 18px;
}

.site-page-content .guide-flow-advanced {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 22px 26px;
  align-items: stretch;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(47, 128, 237, .16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, rgba(47, 128, 237, .09), transparent 28%),
    radial-gradient(circle at 90% 100%, rgba(47, 191, 154, .10), transparent 30%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247, 252, 255, .98));
  background-size: auto, auto, 42px 42px, 42px 42px, auto;
  box-shadow: 0 18px 42px rgba(39, 78, 108, .06);
}

.site-page-content .guide-flow-node {
  --guide-accent: #2f80ed;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 176px;
  padding: 22px;
  overflow: visible;
  border-color: color-mix(in srgb, var(--guide-accent) 22%, transparent);
  background:
    linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--guide-accent) 6%, #ffffff) 145%);
}

.site-page-content .guide-flow-node::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid var(--guide-accent);
  border-radius: 8px;
  pointer-events: none;
}

.site-page-content .guide-flow-one { --guide-accent: #2f80ed; }
.site-page-content .guide-flow-two { --guide-accent: #20a7c9; }
.site-page-content .guide-flow-three { --guide-accent: #2fbf9a; }
.site-page-content .guide-flow-four { --guide-accent: #4aa3df; }
.site-page-content .guide-flow-five { --guide-accent: #3d78d8; }
.site-page-content .guide-flow-six { --guide-accent: #3db58f; }

.site-page-content .guide-flow-num {
  width: fit-content;
  min-width: 46px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #ffffff;
  border-radius: 999px;
  background: var(--guide-accent);
  font-size: 13px;
  font-weight: 950;
}

.site-page-content .guide-flow-node b,
.site-page-content .guide-card h3,
.site-page-content .guide-use-card h3,
.site-page-content .guide-ai-card b,
.site-page-content .guide-two-col h3,
.site-page-content .guide-callout h2,
.site-page-content .guide-callout h3 {
  margin: 0;
  color: #1d2d42;
}

.site-page-content .guide-flow-node b {
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.16;
}

.site-page-content .guide-flow-node p,
.site-page-content .guide-card p,
.site-page-content .guide-use-card p,
.site-page-content .guide-ai-card p,
.site-page-content .guide-two-col p,
.site-page-content .guide-checklist span,
.site-page-content .guide-callout p {
  margin: 0;
  color: #53687d;
  line-height: 1.68;
}

.site-page-content .guide-loop-note {
  border-color: rgba(47, 191, 154, .20);
  background: linear-gradient(135deg, rgba(242, 252, 248, .96), rgba(247, 251, 255, .98));
}

.site-page-content .guide-card-grid,
.site-page-content .guide-use-grid,
.site-page-content .guide-ai-grid,
.site-page-content .guide-two-col {
  display: grid;
  gap: 14px;
}

.site-page-content .guide-card-grid,
.site-page-content .guide-use-grid,
.site-page-content .guide-ai-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-page-content .guide-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-page-content .guide-card,
.site-page-content .guide-use-card,
.site-page-content .guide-ai-card,
.site-page-content .guide-two-col > div {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.site-page-content .guide-card h3,
.site-page-content .guide-use-card h3,
.site-page-content .guide-ai-card b,
.site-page-content .guide-two-col h3 {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
}

.site-page-content .guide-ai-card {
  position: relative;
  min-height: 160px;
  padding: 22px;
  border-color: rgba(47, 128, 237, .18);
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(242, 249, 255, .96));
  background-size: 34px 34px, 34px 34px, auto;
}

.site-page-content .guide-ai-card::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f80ed, #2fbf9a);
}

.site-page-content .guide-use-card {
  --guide-accent: #2f80ed;
  --guide-soft: rgba(47, 128, 237, .08);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, var(--guide-soft) 180%);
}

.site-page-content .guide-use-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--guide-accent);
}

.site-page-content .guide-use-card > span {
  width: fit-content;
  min-width: 40px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--guide-accent);
  border: 1px solid color-mix(in srgb, var(--guide-accent) 28%, transparent);
  border-radius: 999px;
  background: #ffffff;
  font-size: 13px;
  font-weight: 950;
}

.site-page-content .guide-tone-home { --guide-accent: #2f80ed; --guide-soft: rgba(47, 128, 237, .07); }
.site-page-content .guide-tone-learn { --guide-accent: #20a7c9; --guide-soft: rgba(32, 167, 201, .07); }
.site-page-content .guide-tone-practice { --guide-accent: #2fbf9a; --guide-soft: rgba(47, 191, 154, .08); }
.site-page-content .guide-tone-evaluate { --guide-accent: #4aa3df; --guide-soft: rgba(74, 163, 223, .07); }
.site-page-content .guide-tone-ai { --guide-accent: #3d78d8; --guide-soft: rgba(61, 120, 216, .07); }
.site-page-content .guide-tone-account { --guide-accent: #3db58f; --guide-soft: rgba(61, 181, 143, .08); }

.site-page-content .guide-checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-page-content .guide-checklist li {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px 18px;
}

.site-page-content .guide-checklist b {
  color: var(--site-green-strong);
}

.site-page-content .guide-bottom-link {
  text-align: center;
}

.site-page-content .guide-bottom-link a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: #247a68;
  border: 1px solid rgba(47, 191, 154, .24);
  border-radius: 999px;
  background: rgba(235, 250, 245, .86);
  text-decoration: none;
}

@media (max-width: 980px) {
  .site-page-content .guide-flow-advanced,
  .site-page-content .guide-card-grid,
  .site-page-content .guide-use-grid,
  .site-page-content .guide-ai-grid,
  .site-page-content .guide-parent-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .site-page-content .guide-hero-points,
  .site-page-content .guide-flow-advanced,
  .site-page-content .guide-card-grid,
  .site-page-content .guide-use-grid,
  .site-page-content .guide-ai-grid,
  .site-page-content .guide-parent-hero,
  .site-page-content .guide-two-col,
  .site-page-content .guide-checklist li {
    grid-template-columns: 1fr;
  }

  .site-page-content .guide-flow-node {
    min-height: auto;
  }

  .site-page-content .guide-parent-hero h2 {
    font-size: 28px;
    line-height: 1.16;
  }
}

.matrix-letter {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 950;
}

.matrix-qr {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.9);
}

.site-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(circle at 50% 42%, rgba(83, 184, 154, .12), transparent 36%),
    rgba(20, 35, 51, .36);
  backdrop-filter: blur(7px);
  animation: popupFadeIn .18s ease both;
}

.site-popup-card {
  width: min(560px, 100%);
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid rgba(106, 143, 174, .18);
  border-radius: 8px;
  background:
    linear-gradient(rgba(64, 154, 210, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 154, 210, .055) 1px, transparent 1px),
    radial-gradient(circle at 84% 12%, rgba(83, 184, 154, .16), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .96)),
    #ffffff;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  box-shadow: 0 28px 80px rgba(23, 45, 70, .20), inset 0 1px 0 rgba(255,255,255,.85);
  overflow: hidden;
  animation: popupCardIn .22s ease both;
}

.site-popup-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  opacity: .9;
}

.site-popup-card::after {
  content: "";
  position: absolute;
  right: -56px;
  bottom: -72px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 128, 237, .12), transparent 68%);
  pointer-events: none;
}

.site-popup-card > * {
  position: relative;
  z-index: 1;
}

.site-popup-eyebrow {
  width: fit-content;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid rgba(83, 184, 154, .20);
  border-radius: 999px;
  background: rgba(237, 253, 248, .82);
  color: #2d9b80;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

.site-popup-card h3 {
  margin: 0;
  max-width: 100%;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.18;
  color: var(--text);
}

.site-popup-content {
  color: #5f7286;
  line-height: 1.7;
  padding: 14px 16px;
  border: 1px solid rgba(106, 143, 174, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
  font-size: clamp(15px, 1.8vw, 17px);
}

.site-popup-content p {
  margin: 0 0 10px;
}

.site-popup-content a {
  color: var(--green);
  font-weight: 800;
}

.site-popup-content img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(132, 205, 255, .24);
}

.site-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(106, 143, 174, .18);
  background: rgba(248, 252, 255, .76);
  color: #6f8398;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: none;
}

.site-popup-close:hover {
  color: #263f55;
  background: rgba(238, 248, 252, .92);
}

.site-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.site-popup-actions .secondary,
.site-popup-actions .primary {
  min-width: 112px;
  min-height: 42px;
  padding: 0 18px;
  text-align: center;
  border-radius: 8px;
}

.site-popup-actions .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2d8976;
  border: 1px solid rgba(47, 191, 154, .22);
  background: rgba(244, 255, 250, .82);
  font-weight: 850;
}

.site-popup-actions .primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 12px 26px rgba(47, 128, 237, .18);
}

@keyframes popupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes popupCardIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.site-admin-list {
  display: grid;
  gap: 14px;
}

.site-admin-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(132, 205, 255, .22);
  border-radius: 8px;
  background: rgba(17, 31, 50, .56);
}

.site-admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.site-admin-card-head strong,
.admin-mini-label {
  color: var(--green);
  font-weight: 900;
}

.site-page-editor textarea,
.site-popup-editor textarea {
  min-height: 140px;
}

.site-rich-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.site-rich-toolbar button {
  width: auto;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--text);
}

.site-rich-toolbar button:hover {
  border-color: rgba(154, 240, 179, .55);
  color: var(--green);
}

.site-rich-editor {
  min-height: 280px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .24);
  border-radius: 8px;
  background: rgba(6, 16, 30, .62);
  color: var(--text);
  line-height: 1.7;
  outline: none;
}

.site-rich-editor:focus {
  border-color: rgba(127, 221, 255, .52);
  box-shadow: 0 0 0 3px rgba(127, 221, 255, .08);
}

.site-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(174,187,208,.72);
}

.site-rich-editor img {
  display: block;
  max-width: min(100%, 760px);
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid rgba(132, 205, 255, .24);
}

.site-rich-editor a {
  color: var(--green);
  font-weight: 800;
}

.site-page-check-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.site-upload-cell {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}

.site-qr-preview {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(132, 205, 255, .3);
  background: rgba(255,255,255,.88);
}

.thought-card-admin-row .admin-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.thought-card-admin-status {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(154, 240, 184, .28);
  background: rgba(154, 240, 184, .08);
}

.thought-card-admin-status.warn {
  border-color: rgba(255, 220, 128, .36);
  background: rgba(255, 220, 128, .08);
}

.thought-card-admin-status strong {
  color: var(--green);
  font-weight: 900;
}

.thought-card-admin-status.warn strong {
  color: #ffe58d;
}

.thought-card-admin-status span {
  color: var(--muted);
  line-height: 1.55;
}

.thought-card-admin-preview {
  width: 92px;
  height: 122px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(132, 205, 255, .3);
  background: rgba(6, 17, 31, .5);
}

.about-page {
  max-width: 820px;
  margin-inline: auto;
}

.admin-form {
  display: grid;
  gap: 16px;
}

.admin-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.compact-selector-panel {
  align-items: center;
}

.selector-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
}

.selector-copy strong {
  color: var(--text);
  font-size: 18px;
}

.selector-copy span {
  line-height: 1.55;
}

.admin-inline-check {
  align-self: end;
  min-height: 56px;
  border-radius: 8px;
  color: var(--text);
}

.admin-form textarea {
  min-height: 300px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
}

.visual-question-editor {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.visual-question-editor h3 {
  margin: 0;
}

.visual-question-editor textarea {
  min-height: 110px;
  font-family: inherit;
  font-size: 16px;
}

.hidden {
  display: none !important;
}

.stem-composer {
  position: relative;
  display: grid;
}

#questionImageInput,
.admin-form input[type="file"] {
  display: none;
}

.file-plus-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 118px;
  height: 44px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
}

.file-plus-button span {
  font-size: 24px;
  line-height: 1;
}

.hidden-upload-label {
  display: none !important;
}

.question-resource-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.question-resource-upload-row textarea,
.question-resource-upload-row input {
  width: 100%;
  min-width: 0;
}

.question-resource-upload-button {
  align-self: start;
  min-width: 136px;
  min-height: 54px;
  white-space: nowrap;
}

.admin-comic-order-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}

.admin-comic-order-preview figure {
  position: relative;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.admin-comic-order-preview span {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 8px;
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  color: #06111f;
  font-size: 13px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.admin-comic-order-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(7, 17, 31, .7);
}

.comic-preview-empty {
  padding: 12px 14px;
  color: var(--muted);
  border: 1px dashed rgba(132, 205, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .025);
}

@media (max-width: 720px) {
  .question-resource-upload-row {
    grid-template-columns: 1fr;
  }

  .question-resource-upload-button {
    width: 100%;
  }
}

.comic-workspace {
  overflow: hidden;
}

.comic-reader {
  display: grid;
  gap: 16px;
}

.comic-reader-layout,
.course-inline-comic-book {
  display: grid;
  grid-template-columns: clamp(92px, 10vw, 128px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
  width: 100%;
  background: transparent;
}

.comic-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.comic-thumb-strip {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: min(74vh, 760px);
  overflow: auto;
  padding: 4px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 240, 179, .42) transparent;
}

.comic-thumb {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 4px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(5, 13, 25, .22);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}

.comic-thumb:hover,
.comic-thumb.active {
  border-color: rgba(154, 240, 179, .72);
  background: rgba(154, 240, 179, .08);
}

.comic-thumb span {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 7px;
  color: #06111f;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-size: 13px;
  font-weight: 950;
}

.comic-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.comic-book {
  position: relative;
  width: 100%;
  min-height: min(70vh, 420px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: left center;
  perspective: 1200px;
  touch-action: pan-y;
  cursor: pointer;
  overflow: visible;
}

.comic-book.turning {
  animation: pageTurn 280ms ease both;
}

.comic-book::after,
.comic-book-page::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  top: 0;
  width: clamp(46px, 8vw, 92px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.16) 42%, rgba(0,0,0,.26) 72%, transparent 73%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  filter: drop-shadow(-8px 8px 10px rgba(0,0,0,.22));
  transform-origin: 100% 0;
}

.comic-book.curl-next::after,
.comic-book-page.curl-next::after {
  animation: comicCornerCurlNext .42s ease both;
}

.comic-book.curl-prev::after,
.comic-book-page.curl-prev::after {
  left: 0;
  right: auto;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform-origin: 0 0;
  animation: comicCornerCurlPrev .42s ease both;
}

.comic-book img {
  max-width: 100%;
  max-height: min(78vh, 920px);
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.video-player {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(13, 28, 48, .72);
}

.video-player video {
  width: 100%;
  max-height: min(70vh, 720px);
  display: block;
  border-radius: 8px;
  background: #050b14;
}

.video-player p {
  margin: 0;
  color: var(--muted);
}

.experiment-player {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(13, 28, 48, .72);
}

.experiment-player iframe {
  width: 100%;
  min-height: min(72vh, 760px);
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 8px;
  background: #050b14;
}

.experiment-player p {
  margin: 0;
  color: var(--muted);
}

.wrong-analysis-list {
  display: grid;
  gap: 12px;
}

.wrong-analysis-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(127, 221, 255, 0.22);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.wrong-analysis-card h4,
.wrong-analysis-card p {
  margin: 0;
}

.wrong-stem {
  color: var(--text);
  font-weight: 800;
}

.question-rich-view {
  display: grid;
  gap: 12px;
}

.question-rich-view.large-stem .wrong-stem {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.45;
}

.question-rich-view img,
.question-image-preview {
  max-width: min(100%, 720px);
  max-height: 420px;
  object-fit: contain;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 8px;
  background: rgba(7, 16, 30, .42);
}

.question-option-view-list {
  display: grid;
  gap: 8px;
}

.question-option-view {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 8px;
  background: rgba(7, 16, 30, .34);
  color: var(--text);
}

.question-option-view span {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 900;
}

.question-option-view strong {
  min-width: 0;
  font-weight: 800;
}

.report-downloads .download-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.report-downloads small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
}

@keyframes pageTurn {
  0% { transform: rotateY(0deg) translateX(0); filter: brightness(1); }
  48% { transform: rotateY(-12deg) translateX(-4px); filter: brightness(.9); }
  100% { transform: rotateY(0deg) translateX(0); filter: brightness(1); }
}

@keyframes comicCornerCurlNext {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  30% { opacity: .95; transform: scale(.92) rotate(-8deg); }
  72% { opacity: .8; transform: scale(1.08) rotate(-14deg); }
  100% { opacity: 0; transform: scale(.2) rotate(-22deg); }
}

@keyframes comicCornerCurlPrev {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  30% { opacity: .95; transform: scale(.92) rotate(8deg); }
  72% { opacity: .8; transform: scale(1.08) rotate(14deg); }
  100% { opacity: 0; transform: scale(.2) rotate(22deg); }
}

.stem-editor {
  min-height: 180px;
  padding: 14px 60px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6, 14, 28, .55);
  color: var(--text);
  line-height: 1.8;
  outline: none;
}

.nw-meta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 14px;
  background: rgba(6, 14, 28, .28);
}

.nw-translation-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.nw-translation-editor {
  min-height: 150px;
  padding-right: 14px;
}

.nw-time-field {
  display: grid;
  align-content: start;
  gap: 10px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.stem-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.stem-editor math {
  font-size: 1.18em;
  vertical-align: middle;
}

.difficulty-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.difficulty-radio-group > strong {
  width: 100%;
  color: var(--text);
}

.difficulty-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
}

.difficulty-radio-group input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--green);
}

.choice-answer-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
}

.choice-answer-picker > strong {
  width: 100%;
  color: var(--text);
}

.choice-answer-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-weight: 800;
}

.choice-answer-picker input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  accent-color: var(--green);
}

.inline-editor-image,
.stem-editor img {
  display: inline-block;
  max-width: min(100%, 520px);
  max-height: 320px;
  margin: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  vertical-align: middle;
}

.formula-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  margin: 0 4px;
  padding: 2px 4px;
  color: #eef7ff;
  vertical-align: middle;
  border-radius: 6px;
  background: rgba(126, 240, 176, 0.1);
  box-shadow: inset 0 0 0 1px rgba(126, 240, 176, 0.24);
  user-select: all;
}

.formula-fraction {
  display: inline-grid;
  grid-template-rows: 1fr 1fr;
  min-width: 34px;
  line-height: 1.05;
  text-align: center;
}

.formula-fraction::before {
  content: attr(data-top);
  padding: 0 5px 2px;
  border-bottom: 2px solid currentColor;
}

.formula-fraction::after {
  content: attr(data-bottom);
  padding: 2px 5px 0;
}

.formula-sqrt::before {
  content: "\221A";
  padding-right: 2px;
  font-size: 1.18em;
}

.formula-sqrt::after {
  content: attr(data-root);
  padding: 0 5px 2px;
  border-top: 2px solid currentColor;
}

.formula-power::before {
  content: attr(data-base);
}

.formula-power::after {
  content: attr(data-exp);
  align-self: flex-start;
  padding-left: 1px;
  font-size: 0.68em;
  line-height: 1;
}

.student-answer-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.student-answer-box > span {
  color: var(--muted);
  font-weight: 700;
}

.formula-toggle-button {
  justify-self: start;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(127, 221, 255, .08);
  border: 1px solid var(--line);
}

.formula-toggle-button.active {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.student-math-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-math-toolbar[hidden] {
  display: none;
}

.student-math-toolbar button {
  min-height: 34px;
  padding: 8px 12px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}

.formula-builder {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(40, 214, 255, 0.32);
  border-radius: 8px;
  background: rgba(13, 32, 54, 0.88);
}

.formula-builder[hidden] {
  display: none;
}

.formula-builder-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
}

.formula-builder-fields label {
  display: grid;
  gap: 6px;
}

.formula-builder-fields input {
  min-height: 40px;
  padding: 8px 10px;
}

.formula-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 14, 28, 0.62);
  font-size: 20px;
}

.formula-builder-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.formula-builder-actions button {
  min-height: 38px;
  padding: 9px 14px;
}

.student-answer-editor {
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 14, 28, .55);
  color: var(--text);
  line-height: 1.8;
  outline: none;
}

.student-answer-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.student-answer-editor math {
  font-size: 1.18em;
  vertical-align: middle;
}

.stem-plus {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
}

.ability-picker {
  display: grid;
  gap: 10px;
}

.ability-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ability-check-grid label,
.answer-check,
.toggle-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  line-height: 1;
}

.ability-check-grid input,
.answer-check input,
.toggle-line input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  accent-color: var(--green);
}

.option-list {
  display: grid;
  gap: 10px;
}

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

.visual-payment-list {
  display: grid;
  gap: 10px;
}

.admin-config-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(9, 21, 38, .54);
}

.admin-config-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--text);
  font-weight: 900;
}

.admin-config-group summary span {
  font-size: 19px;
}

.admin-config-group summary small {
  color: var(--muted);
  font-weight: 700;
  text-align: right;
}

.admin-config-group[open] summary {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(132, 205, 255, .16);
}

.payment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.payment-row.membership-row {
  grid-template-columns: minmax(160px, 1.1fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(220px, 1.5fr) auto;
}

.membership-config-title {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.payment-head {
  align-items: center;
  color: var(--muted);
  font-weight: 800;
  background: rgba(40, 214, 255, 0.06);
}

.payment-row label {
  display: grid;
  gap: 6px;
}

.payment-row label span {
  color: var(--muted);
  font-size: 13px;
}

.admin-json-config {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-json-config span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-json-config textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  resize: vertical;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
}

.membership-board {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.membership-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.membership-payment-row {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 2.1fr);
  gap: 14px;
  align-items: stretch;
}

.membership-board .parent-recharge-controls {
  align-self: stretch;
  padding: 12px;
  border: 1px solid rgba(127, 221, 255, .16);
  border-radius: 10px;
  background: rgba(5, 13, 25, .22);
}

.membership-board .parent-recharge-controls .guardian-pay-notice {
  margin-top: 2px;
}

.membership-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(154, 240, 179, .22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 88% 16%, rgba(154, 240, 179, .12), transparent 34%),
    rgba(8, 20, 36, .58);
}

.membership-card strong {
  font-size: 20px;
}

.membership-card p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.membership-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.membership-price span {
  color: var(--green);
  font-size: 28px;
  font-weight: 900;
}

.membership-price small,
.report-item small {
  color: var(--muted);
}

.download-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 6px;
}

.download-button {
  min-height: 42px;
}

.code-generator {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.code-result {
  display: grid;
  gap: 10px;
}

.code-result textarea {
  min-height: 140px;
  font-family: Consolas, "Courier New", monospace;
}

.code-summary,
.code-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  align-items: center;
}

.code-summary {
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 800;
}

.code-table {
  display: grid;
  gap: 8px;
}

.code-row {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.code-row strong {
  font-family: Consolas, "Courier New", monospace;
  color: var(--green);
}

.code-row.used {
  opacity: 0.62;
}

.question-options-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.question-image-drop {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 120px;
  padding: 18px;
  border: 1px dashed rgba(127, 221, 255, .5);
  border-radius: 12px;
  text-align: center;
  color: var(--muted);
  background: rgba(127, 221, 255, .04);
  cursor: pointer;
}

.question-image-drop strong {
  color: var(--text);
  font-size: 22px;
}

.question-image-drop input {
  display: none;
}

.question-image-drop.drag-active {
  border-color: var(--green);
  box-shadow: 0 0 24px rgba(154, 240, 179, .16);
}

.admin-question-list {
  display: grid;
  gap: 10px;
}

.admin-question-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.admin-question-item img,
.question-image {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(127, 221, 255, .25);
}

.admin-question-item img {
  width: 64px;
  height: 52px;
  object-fit: cover;
}

.question-index {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(154, 240, 179, .12);
  color: var(--green);
  font-weight: 900;
}

.admin-question-item small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.question-manage-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.math-symbol-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}

.math-symbol-toolbar button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 800;
}

.json-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.json-details summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 800;
}

.question-image {
  display: block;
  max-height: 260px;
  margin: 12px 0;
}

.admin-tabs {
  position: sticky;
  top: 98px;
  z-index: 9;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 18px;
  padding: 10px;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(7, 17, 31, .88), rgba(13, 30, 51, .8)),
    rgba(7, 17, 31, .86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
}

.admin-tabs button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.admin-tabs button.active {
  color: #07101d;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.admin-quick-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 18px;
  align-items: center;
  margin: 18px 0 8px;
  padding: 18px;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(127, 221, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 184, .045)),
    rgba(255, 255, 255, .035);
}

.admin-quick-panel h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.4vw, 34px);
}

.admin-quick-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-quick-actions button {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid rgba(132, 205, 255, .24);
  background: rgba(255, 255, 255, .055);
  color: var(--text);
  text-align: left;
}

.admin-quick-actions button:hover {
  border-color: rgba(154, 240, 184, .46);
  background: rgba(127, 221, 255, .1);
  color: #eef8ff;
}

.admin-launch-check {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px;
  border: 1px solid rgba(154, 240, 184, .26);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(154, 240, 184, .09), rgba(127, 221, 255, .045)),
    rgba(10, 24, 42, .68);
}

.admin-launch-check h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.2vw, 32px);
}

.admin-launch-check p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-launch-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.admin-launch-check-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(154, 240, 184, .26);
  border-radius: 8px;
  background: rgba(154, 240, 184, .06);
}

.admin-launch-check-item.warn {
  border-color: rgba(255, 220, 128, .34);
  background: rgba(255, 220, 128, .07);
}

.admin-launch-check-item strong {
  color: var(--green);
  font-size: 13px;
}

.admin-launch-check-item.warn strong {
  color: #ffe58d;
}

.admin-launch-check-item span {
  color: var(--text);
  font-weight: 900;
}

.admin-launch-check-item small {
  color: var(--muted);
  line-height: 1.45;
}

.manager-layout {
  display: grid;
  gap: 18px;
}

.manager-layout.two-column {
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1fr);
  align-items: start;
}

.management-list {
  display: grid;
  gap: 12px;
}

.manager-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 24, 42, 0.72);
}

.manager-card strong {
  display: block;
  color: var(--text);
  line-height: 1.45;
}

.manager-card small,
.form-note {
  display: block;
  color: var(--muted);
  line-height: 1.6;
}

.manager-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.question-bank-card strong {
  max-height: 4.4em;
  overflow: hidden;
}

.support-admin-layout {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 0.95fr);
}

.support-admin-toolbar {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.support-ticket-card {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.support-ticket-card:hover {
  border-color: rgba(151, 239, 180, 0.55);
  transform: translateY(-1px);
}

.support-ticket-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.support-status {
  align-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  color: var(--bg);
  background: linear-gradient(135deg, var(--cyan), var(--green));
  white-space: nowrap;
}

.support-replied {
  color: var(--green);
  background: rgba(151, 239, 180, 0.14);
}

.support-closed {
  color: var(--muted);
  background: rgba(151, 166, 187, 0.15);
}

.support-ticket-detail {
  min-height: 220px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(8, 18, 32, 0.54);
}

.support-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.support-detail-head strong {
  color: var(--text);
  font-size: 20px;
}

.support-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.support-meta div {
  padding: 10px;
  border: 1px solid rgba(116, 204, 255, 0.14);
  border-radius: 8px;
}

.support-meta dt {
  color: var(--green);
  font-weight: 900;
}

.support-meta dd {
  margin: 4px 0 0;
  word-break: break-all;
}

.support-replies {
  display: grid;
  gap: 10px;
}

.support-replies div {
  padding: 12px;
  border-radius: 8px;
  background: rgba(151, 239, 180, 0.08);
}

.support-replies b,
.support-replies small {
  display: block;
}

.support-widget {
  position: fixed;
  left: 22px;
  right: auto;
  bottom: 22px;
  z-index: 80;
}

.support-launcher {
  width: 64px;
  min-width: 64px;
  height: 64px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  color: #9ff3d2;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 14px rgba(126, 240, 176, .28));
  overflow: visible;
}

.support-launcher::after {
  content: none;
}

.support-launcher:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
  color: #b3ffd9;
}

.support-launcher svg {
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support-panel {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 72px;
  width: min(420px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 110px));
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(12, 25, 43, 0.96);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.support-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.support-panel-head strong {
  display: block;
  color: var(--text);
  font-size: 20px;
}

.support-panel-head span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.support-close {
  padding: 8px 10px;
  font-size: 13px;
}

.support-faq-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.support-faq-item {
  border: 1px solid rgba(116, 204, 255, 0.15);
  border-radius: 8px;
  background: rgba(7, 17, 31, 0.72);
}

.support-faq-item summary {
  cursor: pointer;
  padding: 11px 12px;
  color: var(--text);
  font-weight: 850;
}

.support-faq-item summary span {
  margin-right: 8px;
  color: var(--green);
}

.support-faq-item p {
  margin: 0;
  padding: 0 12px 12px;
  color: var(--muted);
  line-height: 1.7;
}

.support-form {
  display: grid;
  gap: 10px;
}

.support-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.support-form textarea {
  min-height: 110px;
}

@media (max-width: 720px) {
  .support-widget {
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .support-launcher {
    width: 56px;
    min-width: 56px;
    height: 56px;
  }

  .support-launcher svg {
    width: 48px;
    height: 48px;
  }

  .support-panel {
    bottom: 64px;
    width: calc(100vw - 24px);
  }
}

.compact-stem-editor {
  min-height: 150px;
  margin-bottom: 14px;
}

.tree-grade {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 24, 42, 0.46);
  overflow: hidden;
}

.tree-grade summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--green);
  font-weight: 900;
  list-style-position: inside;
  border-bottom: 1px solid rgba(116, 204, 255, 0.14);
}

.tree-grade-title {
  padding: 14px 16px;
  color: var(--green);
  font-weight: 900;
  border-bottom: 1px solid rgba(116, 204, 255, 0.14);
}

.tree-items {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.question-type-node {
  background: rgba(255, 255, 255, 0.035);
}

.manager-actions button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.student-detail-panel {
  margin-top: 18px;
}

.student-detail-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 24, 42, 0.62);
}

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

.student-admin-tools {
  display: grid;
  grid-template-columns: minmax(220px, .5fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(154, 240, 184, .2);
  border-radius: 8px;
  background: rgba(154, 240, 184, .045);
}

.student-admin-tools h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.student-admin-tools p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.student-admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.student-admin-tool-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

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

.student-detail-grid section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.student-detail-grid h3 {
  margin: 0;
  font-size: 18px;
}

.detail-row {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(116, 204, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.detail-row strong {
  color: var(--text);
  line-height: 1.4;
}

.detail-row span {
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}

.admin-session {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-session span {
  color: var(--muted);
  font-weight: 800;
}

.admin-permission-picker {
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-pane {
  display: none;
  scroll-margin-top: 180px;
}

.admin-pane.active {
  display: grid;
  gap: 20px;
}

.admin-form,
.compact-admin-form {
  scroll-margin-top: 180px;
}

.compact-admin-form {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.admin-table {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.admin-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(127, 221, 255, .15);
}

.admin-table th {
  color: var(--green);
  background: rgba(255,255,255,.04);
}

@keyframes resultOrbit {
  from { transform: rotate(0deg) scale(.9); }
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes perfectCardIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes perfectFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes perfectConfetti {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  100% {
    transform: translate3d(24px, 120vh, 0) rotate(560deg);
    opacity: 0;
  }
}

.report-item { padding: 12px 0; border-top: 1px solid var(--line); }

.link-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.reinforce-tier-list {
  display: grid;
  gap: 14px;
}

.reinforce-tier {
  display: grid;
  gap: 8px;
}

.reinforce-tier-title,
.wrong-status-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 240, 182, .32);
  background: rgba(148, 240, 182, .1);
  color: var(--mint);
  font-weight: 800;
}

.reinforce-tier-title {
  padding: 6px 12px;
  font-size: 14px;
}

.wrong-status-chip {
  margin: 8px 0 12px;
  padding: 7px 12px;
  font-size: 15px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--muted);
  flex-wrap: wrap;
}

.pagination button {
  width: auto;
  min-width: 92px;
  padding: 10px 16px;
  font-size: 16px;
}

.pagination button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.link-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.link-card:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 240, 182, .65);
  background: rgba(128, 230, 255, .08);
}

.link-card span,
.link-card small {
  color: var(--muted);
  line-height: 1.5;
}

.detail-card {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.large-stem {
  padding: 18px;
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 8px;
  background: rgba(5, 14, 28, .45);
  font-size: 24px;
  line-height: 1.7;
}

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

.answer-grid > div {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.answer-grid span {
  color: var(--muted);
}

.question-image-preview {
  max-width: min(100%, 640px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

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

.test-type-block {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.test-type-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.test-type-head h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.15;
}

.test-type-head p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.test-entry-grid-primary {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.test-entry-card {
  display: block;
  min-height: 132px;
  padding: 22px 86px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 12%, rgba(127, 221, 255, .09), transparent 22%),
    rgba(255,255,255,.038);
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.test-entry-card strong {
  display: block;
  max-width: calc(100% - 8px);
  font-size: clamp(23px, 1.9vw, 29px);
  line-height: 1.18;
  letter-spacing: 0;
}

@supports (-webkit-line-clamp: 2) {
  .test-entry-card strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.test-entry-card p {
  max-width: calc(100% - 8px);
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.test-entry-card span {
  display: none;
}

.test-entry-card span::before {
  content: none;
}

.test-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(154, 240, 179, .42);
  background:
    radial-gradient(circle at 92% 12%, rgba(154, 240, 179, .14), transparent 24%),
    rgba(255,255,255,.052);
}

.test-entry-card,
.learn-list-card,
.test-list-card,
.search-result-card,
.link-card {
  position: relative;
  overflow: hidden;
}

.test-entry-card::before,
.learn-list-card::before,
.test-list-card::before,
.search-result-card::before,
.link-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(127, 221, 255, .12), transparent);
  transform: translateX(-110%);
  transition: opacity .18s ease;
}

.test-entry-card:hover::before,
.learn-list-card:hover::before,
.test-list-card:hover::before,
.search-result-card:hover::before,
.link-card:hover::before {
  opacity: 1;
  animation: cardSweepSoft 1.4s ease;
}

.test-entry-card::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 18px;
  width: 58px;
  height: 58px;
  opacity: .38;
  border: 1px solid rgba(154, 240, 179, .4);
  border-radius: 12px;
  background:
    linear-gradient(var(--green), var(--green)) 15px 24px / 30px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 15px 34px / 30px 3px no-repeat,
    linear-gradient(var(--green), var(--green)) 15px 44px / 24px 3px no-repeat,
    linear-gradient(90deg, rgba(126, 240, 176, .7), rgba(127, 221, 255, .25)) 12px 16px / 4px 36px no-repeat;
  transform: rotate(8deg);
  animation: toolTilt 4s ease-in-out infinite;
}

.test-entry-card:nth-child(2)::after {
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(126, 240, 176, .7), rgba(40, 214, 255, .2), transparent 72%),
    rgba(255,255,255,.035);
}

.test-entry-card:nth-child(3)::after {
  border-radius: 18px;
  background:
    radial-gradient(circle at 24px 58px, var(--cyan) 0 5px, transparent 6px),
    radial-gradient(circle at 42px 32px, var(--green) 0 5px, transparent 6px),
    radial-gradient(circle at 62px 48px, var(--cyan) 0 5px, transparent 6px),
    linear-gradient(32deg, transparent 20px, rgba(127, 221, 255, .75) 21px 24px, transparent 25px),
    linear-gradient(-28deg, transparent 32px, rgba(154, 240, 179, .65) 33px 36px, transparent 37px);
  clip-path: none;
}

.test-entry-card:nth-child(4)::after {
  background:
    linear-gradient(var(--cyan), var(--cyan)) 16px 20px / 48px 3px no-repeat,
    linear-gradient(var(--green), var(--green)) 16px 40px / 48px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 16px 60px / 48px 3px no-repeat;
}

.test-entry-card:nth-child(5)::after {
  background:
    linear-gradient(var(--green), var(--green)) 20px 24px / 12px 3px no-repeat,
    linear-gradient(135deg, transparent 26px, var(--cyan) 27px 30px, transparent 31px),
    linear-gradient(var(--cyan), var(--cyan)) 38px 25px / 26px 3px no-repeat,
    linear-gradient(var(--green), var(--green)) 20px 42px / 12px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 38px 43px / 30px 3px no-repeat,
    linear-gradient(var(--green), var(--green)) 20px 60px / 12px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 38px 61px / 22px 3px no-repeat;
}

.test-entry-card[data-entry-art="nw"]::after {
  content: "";
  border-radius: 16px;
  background:
    linear-gradient(90deg, transparent 8px, rgba(127, 221, 255, .85) 9px 12px, transparent 13px) 10px 14px / 52px 38px no-repeat,
    linear-gradient(0deg, transparent 17px, rgba(255, 233, 143, .82) 18px 21px, transparent 22px) 12px 12px / 48px 42px no-repeat,
    radial-gradient(circle at 26px 26px, rgba(154, 240, 179, .95) 0 5px, transparent 6px),
    radial-gradient(circle at 46px 42px, rgba(127, 221, 255, .95) 0 5px, transparent 6px),
    radial-gradient(circle at 58px 22px, rgba(255, 233, 143, .95) 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(127, 221, 255, .15), rgba(154, 240, 179, .08));
  box-shadow: inset 0 0 0 1px rgba(127, 221, 255, .18);
  transform: rotate(-5deg);
}

.test-entry-card[data-entry-art="compose"]::after {
  content: "";
  border-radius: 18px;
  background:
    linear-gradient(var(--green), var(--green)) 18px 22px / 46px 3px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 18px 38px / 34px 3px no-repeat,
    linear-gradient(rgba(255, 233, 143, .9), rgba(255, 233, 143, .9)) 18px 54px / 42px 3px no-repeat,
    radial-gradient(circle at 62px 20px, rgba(154, 240, 179, .9) 0 6px, transparent 7px),
    linear-gradient(145deg, rgba(127, 221, 255, .16), rgba(154, 240, 179, .08));
  box-shadow: inset 0 0 0 1px rgba(154, 240, 179, .18);
  transform: rotate(6deg);
}

.ask-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.ask-card {
  container-type: inline-size;
  display: grid;
  gap: 14px;
  align-content: start;
  align-items: start;
}

.ask-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 230px) minmax(104px, 116px);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.ask-control-row.simplified-ask-controls {
  grid-template-columns: minmax(188px, 260px) minmax(112px, max-content);
  justify-content: space-between;
}

.ask-audio-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(154, 240, 179, .92);
  box-shadow: none;
  cursor: pointer;
  transition: color .16s ease;
}

.ask-audio-toggle:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
  color: var(--cyan);
}

.ask-audio-toggle svg {
  width: 28px;
  height: 28px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.ask-audio-toggle svg path {
  fill: currentColor;
}

.ask-audio-toggle svg .speaker-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ask-audio-toggle.active {
  color: rgba(154, 240, 179, .98);
  background: transparent;
  border-color: transparent;
}

.ask-audio-toggle.active::after {
  content: none;
}

.ask-audio-toggle:not(.active)::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: #ffb1b1;
  box-shadow: 0 0 0 1px rgba(6, 17, 31, .38);
  transform: rotate(-38deg);
  transform-origin: center;
  z-index: 2;
}

.ask-audio-toggle.inline {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

.guide-audio-toggle {
  position: absolute;
  top: 2px;
  right: 0;
}

.speaker-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(154, 240, 179, .22);
  border-radius: 999px;
  background: rgba(154, 240, 179, .08);
  color: rgba(154, 240, 179, .92);
  cursor: pointer;
}

.speaker-icon.speaking {
  color: #06111f;
  border-color: rgba(154, 240, 179, .62);
  background: linear-gradient(135deg, var(--green), var(--cyan));
  box-shadow: 0 0 0 5px rgba(154, 240, 179, .08);
}

.speaker-icon svg {
  width: 23px;
  height: 23px;
  overflow: visible;
}

.speaker-icon svg path {
  fill: currentColor;
}

.speaker-icon svg .speaker-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ask-mode-choice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.ask-style-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 260px);
  min-width: 0;
  min-height: 52px;
  padding: 5px 7px 5px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.ask-style-select::after {
  content: none;
}

.ask-style-select span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.ask-style-select select {
  min-height: 38px;
  width: 78px;
  min-width: 78px;
  padding: 0 24px 0 10px;
  border: 0;
  border-radius: 999px;
  color: #06111f;
  background: linear-gradient(135deg, rgba(127, 221, 255, .86), rgba(154, 240, 179, .86)) !important;
  font-size: 15px;
  font-weight: 900;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  white-space: nowrap;
}

.ask-style-select select:focus {
  box-shadow: none;
}

.ask-style-select option {
  color: #06111f;
  background: #eef7fb;
}

.ask-style-select .visual-select {
  flex: 0 0 78px;
  width: 78px;
}

.ask-style-select .visual-select-button {
  min-height: 38px;
  padding: 0 24px 0 10px;
  color: #06111f;
  background: linear-gradient(135deg, rgba(127, 221, 255, .86), rgba(154, 240, 179, .86));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.ask-style-select .visual-select-button::before {
  right: 12px;
  width: 8px;
  height: 8px;
  border-color: rgba(6, 17, 31, .72);
}

.ask-style-select .visual-select-menu {
  left: auto;
  right: 0;
  min-width: 104px;
  background: #dff8f2;
  border-color: rgba(154, 240, 179, .58);
  box-shadow: 0 18px 34px rgba(6, 17, 31, .28);
}

.ask-style-select .visual-select-option {
  color: #06111f;
  font-weight: 900;
}

.ask-style-select .visual-select-option:hover,
.ask-style-select .visual-select-option:focus,
.ask-style-select .visual-select-option.active {
  color: #06111f;
  background: rgba(127, 221, 255, .32);
}

.ask-mode-choice button {
  min-width: 0;
  min-height: 46px;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
}

.ask-mode-choice button.active {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.ask-new-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: auto;
  min-width: 0;
  min-height: 52px;
  border-radius: 999px;
  padding: 10px 20px;
  white-space: nowrap;
}

.ask-new-button[hidden] {
  display: none;
}

.ask-progress-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.ask-context-summary {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 10px;
  background: rgba(154, 240, 179, .08);
  color: var(--muted);
  line-height: 1.55;
}

.ask-context-summary strong {
  color: var(--green);
  font-weight: 900;
}

.ask-context-summary span,
.ask-context-summary small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .ask-control-row {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  }

  .ask-control-row.simplified-ask-controls {
    grid-template-columns: minmax(188px, 260px) minmax(112px, max-content);
    justify-content: space-between;
  }

  .ask-mode-choice {
    grid-column: 1 / -1;
  }

  .ask-new-button {
    min-height: 54px;
  }
}

@container (max-width: 760px) {
  .ask-control-row {
    grid-template-columns: minmax(0, 1fr) minmax(176px, 210px);
    align-items: stretch;
  }

  .ask-control-row.simplified-ask-controls {
    grid-template-columns: minmax(188px, 260px) minmax(112px, max-content);
    justify-content: space-between;
  }

  .ask-mode-choice {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  .ask-mode-choice button {
    font-size: 14px;
    padding-inline: 4px;
  }

  .ask-style-select,
  .ask-new-button {
    min-height: 52px;
  }
}

@container (max-width: 430px) {
  .ask-control-row.simplified-ask-controls {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .ask-style-select {
    width: 100%;
  }

  .ask-new-button {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 1420px) and (orientation: landscape) {
  body[data-page="ask"] .ask-control-row {
    grid-template-columns: minmax(0, 1fr) minmax(176px, 210px);
    align-items: stretch;
  }

  body[data-page="ask"] .ask-control-row.simplified-ask-controls {
    grid-template-columns: minmax(188px, 260px) minmax(112px, max-content);
    justify-content: space-between;
  }

  body[data-page="ask"] .ask-mode-choice {
    grid-column: 1 / -1;
    min-height: 54px;
  }

  body[data-page="ask"] .ask-mode-choice button {
    font-size: 14px;
    padding-inline: 4px;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  body[data-page="learn"],
  body[data-page="practice"],
  body[data-page="test-hub"],
  body[data-page="test"],
  body[data-page="compose-test"],
  body[data-page="evaluation"],
  body[data-page="ask"],
  body[data-page="wrong"],
  body[data-page="wrong-retry"],
  body[data-page="report"],
  body[data-page="groups"],
  body[data-page="comic"],
  body[data-page="experiment"],
  body[data-page="video"] {
    overflow: hidden;
  }

  body[data-page="learn"]::before,
  body[data-page="practice"]::before,
  body[data-page="test-hub"]::before,
  body[data-page="test"]::before,
  body[data-page="compose-test"]::before,
  body[data-page="evaluation"]::before,
  body[data-page="ask"]::before,
  body[data-page="wrong"]::before,
  body[data-page="wrong-retry"]::before,
  body[data-page="report"]::before,
  body[data-page="groups"]::before,
  body[data-page="comic"]::before,
  body[data-page="experiment"]::before,
  body[data-page="video"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
      radial-gradient(circle at 30% 24%, rgba(127, 221, 255, .16), transparent 32%),
      radial-gradient(circle at 74% 66%, rgba(154, 240, 179, .14), transparent 34%),
      rgba(7, 17, 31, .96);
    backdrop-filter: blur(14px);
  }

  body[data-page="learn"]::after,
  body[data-page="practice"]::after,
  body[data-page="test-hub"]::after,
  body[data-page="test"]::after,
  body[data-page="compose-test"]::after,
  body[data-page="evaluation"]::after,
  body[data-page="ask"]::after,
  body[data-page="wrong"]::after,
  body[data-page="wrong-retry"]::after,
  body[data-page="report"]::after,
  body[data-page="groups"]::after,
  body[data-page="comic"]::after,
  body[data-page="experiment"]::after,
  body[data-page="video"]::after {
    content: "建议横屏使用\a请将平板或手机旋转为横屏，学习、练习和问 AI 会更完整。";
    white-space: pre-line;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999;
    width: min(82vw, 420px);
    padding: 28px 24px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(127, 221, 255, .36);
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(127, 221, 255, .12), rgba(154, 240, 179, .08)),
      rgba(18, 32, 51, .96);
    color: var(--text);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .08);
    text-align: center;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 900;
    pointer-events: auto;
  }
}

.ask-composer {
  position: relative;
  width: 100%;
}

.ask-composer textarea {
  width: 100%;
  min-height: 250px;
  padding-right: 148px;
  padding-bottom: 62px;
}

.composer-tools {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 9px;
  align-items: center;
}

.icon-button {
  position: relative;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(127, 221, 255, .32);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .16), transparent 30%),
    linear-gradient(145deg, rgba(127, 221, 255, .13), rgba(154, 240, 179, .08));
  color: #b8ffe0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    0 8px 18px rgba(6, 17, 31, .28);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.icon-button:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 10px 22px rgba(127, 221, 255, .12),
    0 0 16px rgba(154, 240, 179, .14);
}

.icon-button:active {
  transform: translateY(0);
}

.image-add-icon::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 19px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.image-add-icon::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 24px;
  width: 11px;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 48%, currentColor 50% 58%, transparent 60%),
    linear-gradient(45deg, transparent 38%, currentColor 40% 50%, transparent 52%);
}

.image-add-icon {
  color: #b8ffe0;
  background:
    linear-gradient(currentColor, currentColor) 28px 10px / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 32px 6px / 2px 10px no-repeat,
    radial-gradient(circle at 18px 18px, currentColor 0 1.7px, transparent 2.2px),
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .16), transparent 30%),
    linear-gradient(145deg, rgba(127, 221, 255, .13), rgba(154, 240, 179, .08));
}

.image-add-icon:focus-visible,
.voice-icon:focus-visible,
.send-icon:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.image-add-icon::before,
.image-add-icon::after {
  box-sizing: border-box;
  z-index: 1;
}

.voice-icon::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 10px;
  width: 11px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 10px;
  box-sizing: border-box;
}

.voice-icon::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 23px;
  width: 19px;
  height: 13px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-sizing: border-box;
  box-shadow: 9px 11px 0 -8px currentColor;
}

.voice-icon.listening {
  color: #06111f;
  border-color: rgba(154, 240, 179, .72);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.32), transparent 42%),
    linear-gradient(135deg, var(--green), var(--cyan));
  animation: voicePulse 1s ease-in-out infinite;
}

.voice-icon.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.send-icon {
  color: #06111f;
  border-color: rgba(154, 240, 179, .72);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .34), transparent 32%),
    linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow:
    0 10px 22px rgba(127, 221, 255, .14),
    0 0 16px rgba(154, 240, 179, .14);
}

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(154, 240, 179, .20), 0 14px 30px rgba(127, 221, 255, .14); }
  50% { box-shadow: 0 0 0 8px rgba(154, 240, 179, .08), 0 16px 34px rgba(127, 221, 255, .20); }
}

.send-icon::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  width: 21px;
  height: 21px;
  background: currentColor;
  clip-path: polygon(2% 42%, 96% 4%, 60% 94%, 45% 58%);
  transform: rotate(-8deg);
}

.send-icon::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 22px;
  width: 15px;
  height: 2px;
  background: var(--green);
  transform: rotate(-31deg);
}

.ai-answer {
  min-height: 280px;
  white-space: pre-wrap;
  color: #dceeff;
}

.ai-guide-panel {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  white-space: normal;
  overflow: auto;
  padding-bottom: 0;
}

.ai-guide-panel:has(.ai-guide-empty) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-guide-empty {
  display: grid;
  place-content: center;
  gap: 12px;
  width: 100%;
  min-height: 420px;
  text-align: center;
  color: var(--muted);
}

.ai-guide-empty::before {
  content: "";
  justify-self: center;
  width: min(210px, 72vw);
  height: 146px;
  border: 0;
  border-radius: 0;
  background:
    url("/assets/illustrations/ai-teacher-class.svg?v=20260528-brain-guide") center / contain no-repeat;
  filter: drop-shadow(0 16px 28px rgba(127, 221, 255, .16));
  animation: softBob 3.8s ease-in-out infinite;
}

.ai-guide-empty h2,
.ai-guide-header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 40px);
}

.ai-guide-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding-right: 56px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(127, 221, 255, .18);
}

.ai-guide-header span {
  color: var(--green);
  font-weight: 800;
  white-space: nowrap;
}

.ai-guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ai-guide-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 240, 179, .28);
  border-radius: 999px;
  color: var(--green);
  background: rgba(154, 240, 179, .06);
  font-size: 13px;
  font-weight: 900;
}

.ai-guide-section,
.ai-guide-detail {
  padding: 14px 16px;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.ai-guide-section strong,
.ai-guide-detail summary {
  display: block;
  color: var(--green);
  font-weight: 900;
  cursor: pointer;
}

.ai-guide-section p,
.ai-guide-detail p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.75;
}

.ai-guide-section ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.think-card {
  border-color: rgba(154, 240, 179, .34);
  background: rgba(154, 240, 179, .055);
}

.follow-card {
  background: linear-gradient(135deg, rgba(127, 221, 255, .06), rgba(154, 240, 179, .05));
}

.ai-step-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ai-step {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(6, 17, 31, .36);
}

.ai-step b {
  color: var(--text);
}

.ai-step p {
  margin: 6px 0 0;
}

.scan-box {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  text-align: center;
  border: 1px dashed rgba(40, 214, 255, 0.6);
  border-radius: 8px;
  background:
    linear-gradient(rgba(40, 214, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 255, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  isolation: isolate;
}

.scan-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, transparent, rgba(40, 214, 255, 0.11), transparent);
  animation: panelPulse 3.8s ease-in-out infinite;
}

.scan-box strong {
  font-size: 24px;
  line-height: 1.15;
}

.home-scan {
  width: 100%;
  max-width: none;
  min-height: 190px;
  margin-inline: auto;
  border-style: solid;
  border-color: rgba(127, 221, 255, .24);
  background:
    radial-gradient(circle at 50% 35%, rgba(126, 240, 176, .12), transparent 28%),
    linear-gradient(rgba(40, 214, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 214, 255, 0.055) 1px, transparent 1px),
    rgba(12, 26, 45, .68);
  box-shadow: 0 20px 64px rgba(0, 0, 0, .24);
}

.home-scan strong {
  font-size: clamp(30px, 2.6vw, 44px);
}

.home-scan small {
  font-size: clamp(15px, 1vw, 18px);
}

.compact-scan { min-height: 180px; }
.scan-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.scan-box.drag-active {
  border-color: var(--green);
  box-shadow: 0 0 30px rgba(154, 240, 179, .18);
}

.paste-preview {
  display: grid;
  width: 100%;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}

.paste-preview:has(.image-selection-board) {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.image-selection-board {
  position: relative;
  width: 100%;
  max-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(127, 221, 255, .34);
  border-radius: 8px;
  background: rgba(4, 12, 24, .68);
  touch-action: none;
  cursor: crosshair;
}

.image-selection-board img {
  width: 100%;
  max-height: 420px;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.selection-rect {
  position: absolute;
  border: 2px solid var(--green);
  background: rgba(154, 240, 179, .16);
  box-shadow: 0 0 22px rgba(154, 240, 179, .28), inset 0 0 18px rgba(40, 214, 255, .14);
  pointer-events: none;
}

.selection-copy {
  display: grid;
  gap: 8px;
}

.mini-button {
  width: max-content;
  min-height: 36px;
  padding: 8px 14px;
  font-size: 15px;
}

.paste-preview img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(127, 221, 255, .28);
}

.file-preview-icon {
  width: 96px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(127, 221, 255, .28);
  background: rgba(127, 221, 255, .08);
  color: var(--green);
  font-weight: 900;
  font-size: 28px;
}

.paste-preview strong {
  display: block;
  color: var(--text);
}

.paste-preview span {
  color: var(--muted);
  font-size: 13px;
}

.admin-vision-note {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed rgba(90, 191, 174, .42);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(90, 191, 174, .08);
}

.admin-vision-note strong {
  flex: 0 0 auto;
  color: var(--green-strong);
}

.admin-vision-note span {
  line-height: 1.55;
}

.ask-context-preview {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(127, 221, 255, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(127, 221, 255, .1), rgba(154, 240, 179, .07));
}

.ask-context-preview .ask-context-summary {
  padding: 0;
  border: 0;
  background: transparent;
}

.ask-context-preview strong {
  color: var(--green);
  font-weight: 900;
}

.ask-context-preview span,
.ask-context-preview small {
  color: var(--muted);
}

.ask-context-preview small {
  line-height: 1.6;
}

.ask-current-question {
  display: grid;
  gap: 12px;
}

.ask-current-question p {
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.6;
}

.ask-current-question ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ask-current-question li {
  padding: 10px 12px;
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: var(--muted);
  font-weight: 800;
}

.ask-current-question small {
  color: var(--muted);
  line-height: 1.6;
}

.ai-teacher-reply {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(154, 240, 179, .26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(127, 221, 255, .12), transparent 34%),
    linear-gradient(135deg, rgba(154, 240, 179, .1), rgba(127, 221, 255, .045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px rgba(0, 0, 0, .16);
}

.ai-teacher-mark {
  width: max-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(154, 240, 179, .14);
  color: var(--green);
  font-weight: 900;
  font-size: 16px;
}

.ai-teacher-reply p {
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 780;
  line-height: 1.65;
}

.ai-reply-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
}

.listen-button {
  border-color: rgba(154, 240, 179, .34);
  color: var(--green);
}

@media (max-width: 760px) {
  .ai-guide-panel:has(.ai-guide-empty) {
    display: grid;
  }

  .ai-guide-empty {
    min-height: 300px;
  }

  .ai-teacher-reply {
    padding: 18px;
    border-radius: 14px;
  }

  .ai-teacher-reply p {
    font-size: 17px;
    line-height: 1.65;
  }
}

.mapping-field {
  display: block;
}

.mapping-field small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.mapping-checklist {
  max-height: 260px;
  overflow: auto;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(7, 17, 31, 0.45);
}

.mapping-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px) minmax(150px, 180px) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.mapping-picker-toolbar label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.mapping-picker-toolbar input,
.mapping-picker-toolbar select {
  min-height: 42px;
}

.mapping-count {
  align-self: center;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(154, 246, 183, 0.12);
  color: var(--mint);
  font-weight: 800;
}

.mapping-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 10px;
}

.mapping-selected.empty {
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.mapping-selected button {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(154, 246, 183, 0.12);
  border-color: rgba(154, 246, 183, 0.3);
  color: var(--mint);
}

.mapping-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.mapping-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(154, 246, 183, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.mapping-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

@media (max-width: 760px) {
  .mapping-checklist {
    max-height: 220px;
  }

  .mapping-picker-toolbar,
  .mapping-result-list {
    grid-template-columns: 1fr;
  }

  .mapping-count {
    width: fit-content;
  }
}

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 35px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 22px var(--cyan);
  animation: scan 3s linear infinite;
}

@keyframes mathFloat {
  0% { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  12% { opacity: .78; }
  72% { opacity: .36; }
  100% { transform: translateY(110vh) rotate(24deg); opacity: 0; }
}

@keyframes markBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .05),
      0 0 26px rgba(40, 214, 255, .24),
      0 16px 34px rgba(0, 0, 0, .3),
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 -18px 34px rgba(7, 17, 31, .35);
    transform: translateY(0);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .08),
      0 0 38px rgba(126, 240, 176, .34),
      0 18px 38px rgba(0, 0, 0, .34),
      inset 0 1px 0 rgba(255, 255, 255, .2),
      inset 0 -18px 34px rgba(7, 17, 31, .35);
    transform: translateY(-1px);
  }
}

@keyframes logoSheen {
  0%, 48% { transform: translateX(-125%); opacity: 0; }
  56% { opacity: .9; }
  72%, 100% { transform: translateX(125%); opacity: 0; }
}

@keyframes logoOrbitDot {
  from { transform: rotate(0deg) translateX(35px) rotate(0deg); opacity: .35; }
  18% { opacity: .95; }
  58% { opacity: .55; }
  to { transform: rotate(360deg) translateX(35px) rotate(-360deg); opacity: .35; }
}

@keyframes titleRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glyphFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes motionSweep {
  0%, 42% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: 1; }
  76%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes softBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes drawCheck {
  0%, 18% { stroke-dashoffset: 74; }
  48%, 82% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 74; }
}

@keyframes answerTile {
  0%, 100% { transform: translateY(0); opacity: .62; }
  45% { transform: translateY(-8px); opacity: 1; }
}

@keyframes needleMove {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(22deg); }
}

@keyframes radarPulse {
  0%, 100% { opacity: .62; transform: scale(.98); transform-origin: center; }
  50% { opacity: 1; transform: scale(1.03); transform-origin: center; }
}

@keyframes barGrow {
  0%, 100% { transform: scaleY(.72); opacity: .68; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes lineFlash {
  0%, 100% { stroke-dashoffset: 120; opacity: .58; }
  50% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes dataCard {
  0%, 100% { transform: translateY(0); opacity: .72; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes toolTilt {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(-4deg) scale(1.04); }
}

@keyframes scan {
  0% { transform: translateY(0); }
  50% { transform: translateY(130px); }
  100% { transform: translateY(0); }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

@keyframes panelPulse {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.72; }
}

@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cursorBlink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@keyframes searchHintDrift {
  0%, 20% { transform: translateY(-50%) translateX(0); }
  55%, 75% { transform: translateY(-50%) translateX(-42px); }
  100% { transform: translateY(-50%) translateX(0); }
}

@keyframes dashFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -52; }
}

@keyframes cardSweepSoft {
  0%, 42% { transform: translateX(-120%); opacity: 0; }
  56% { opacity: 1; }
  76%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes cardSweep {
  0%, 38% { left: -46%; opacity: 0; }
  52% { opacity: 1; }
  76%, 100% { left: 112%; opacity: 0; }
}

@keyframes lineFlow {
  from { background-position: 0 0; }
  to { background-position: 180% 0; }
}

@keyframes sublineGlow {
  0%, 100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 0 rgba(126, 240, 176, 0));
  }
  50% {
    background-position: 100% 50%;
    filter: drop-shadow(0 0 14px rgba(126, 240, 176, 0.22));
  }
}

@keyframes barPulse {
  0%, 100% { transform: scaleY(0.86); opacity: 0.78; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes askScan {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(48px); opacity: 1; }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(0.82); opacity: 0.42; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes studentNod {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-1.5deg); }
}

@keyframes teacherBob {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-5px); }
}

@keyframes waveHand {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(-9deg); }
}

@keyframes runnerTravel {
  0% { transform: translate(-72px, 0) scaleX(1); opacity: 0; }
  8% { opacity: 1; }
  46% { transform: translate(360px, -12px) scaleX(1); }
  52% { transform: translate(398px, -20px) scaleX(1); }
  58% { transform: translate(438px, -10px) scaleX(1); }
  92% { opacity: 1; }
  100% { transform: translate(820px, 0) scaleX(1); opacity: 0; }
}

@keyframes runnerLimb {
  from { transform: rotate(-12deg); }
  to { transform: rotate(16deg); }
}

@keyframes starWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  40% { transform: rotate(-8deg) scale(1.06); }
  70% { transform: rotate(7deg) scale(.98); }
}

@keyframes orbBeat {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.08); }
}

@keyframes hintBlink {
  0%, 100% { opacity: .42; }
  45% { opacity: .92; }
}

@keyframes burstDot {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

@keyframes studentJump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-12px) rotate(-3deg); }
  65% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes teacherCheer {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  38% { transform: translateY(-8px) rotate(3deg); }
  70% { transform: translateY(-4px) rotate(-3deg); }
}

@keyframes badgeGlow {
  0%, 100% { transform: translateY(0); box-shadow: 0 14px 34px rgba(0, 0, 0, .16); }
  50% { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(127, 221, 255, .16); }
}

@keyframes badgeShine {
  0%, 42% { transform: translateX(-120%) rotate(18deg); opacity: 0; }
  55% { opacity: 1; }
  78%, 100% { transform: translateX(120%) rotate(18deg); opacity: 0; }
}

@keyframes titleBreath {
  0%, 100% { opacity: .12; transform: translateY(0); }
  50% { opacity: .2; transform: translateY(-4px); }
}

@keyframes cardLayerIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes sparklePulse {
  0%, 100% { transform: scale(.82); opacity: .65; }
  50% { transform: scale(1.24); opacity: 1; }
}

@keyframes cardCollect {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-18px) scale(1.06); opacity: 1; }
  100% { transform: translateY(-36px) scale(.88); opacity: 0; }
}

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

.evaluation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.evaluation-dashboard {
  display: grid;
  gap: 18px;
}

.student-next-panel {
  background:
    radial-gradient(circle at 88% 12%, rgba(154, 240, 179, .11), transparent 30%),
    linear-gradient(135deg, rgba(17, 31, 50, .92), rgba(22, 38, 55, .82));
}

.student-task-list {
  display: grid;
  gap: 12px;
}

.student-task-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1.1fr) minmax(0, 1.35fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .42);
}

.student-task-row:hover {
  border-color: rgba(154, 240, 179, .48);
  transform: translateY(-1px);
}

.student-task-row span {
  color: var(--green);
  font-weight: 950;
}

.student-task-row strong {
  font-size: 20px;
}

.student-task-row small,
.student-task-row em {
  color: var(--muted);
  line-height: 1.5;
}

.student-task-row em {
  justify-self: end;
  font-style: normal;
  white-space: nowrap;
}

.student-ai-suggestion {
  background: linear-gradient(135deg, rgba(154, 240, 179, .08), rgba(127, 221, 255, .055));
}

.student-ai-summary {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(154, 240, 179, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .42);
}

.student-ai-summary strong {
  color: var(--text);
  line-height: 1.7;
}

.evaluation-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(154, 240, 179, .26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 12%, rgba(154, 240, 179, .16), transparent 34%),
    linear-gradient(135deg, rgba(17, 31, 50, .95), rgba(28, 49, 58, .82));
}

.evaluation-route-card h2 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 4vw, 46px);
}

.evaluation-route-card p {
  margin: 0;
  color: var(--muted);
}

.evaluation-scope-note {
  margin-top: 8px !important;
  color: rgba(154, 240, 179, .86) !important;
  font-size: 15px;
  line-height: 1.55;
}

.evaluation-record-note {
  margin: 8px 0 12px !important;
}

.route-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  max-width: 520px;
}

.route-chip-list span,
.route-chip-list a,
.parent-route-strip span,
.parent-route-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(154, 240, 179, .25);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(6, 17, 31, .34);
  text-decoration: none;
  font-weight: 800;
}

.route-chip-list b {
  margin-left: 6px;
  color: var(--green);
}

.route-chip-list a,
.parent-route-strip a {
  color: var(--green);
}

.evaluation-profile-card,
.diagnosis-card,
.record-panel,
.profile-panel,
.ability-list {
  padding: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.evaluation-profile-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.evaluation-profile-card h2 {
  margin: 4px 0 8px;
  font-size: clamp(30px, 4vw, 48px);
}

.evaluation-profile-card p {
  color: var(--muted);
}

.compact-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.evaluation-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.evaluation-metric {
  display: block;
  min-height: 126px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(255, 255, 255, .035));
}

.evaluation-metric.priority-metric {
  border-color: rgba(154, 240, 179, .46);
  background:
    radial-gradient(circle at 85% 18%, rgba(154, 240, 179, .14), transparent 34%),
    linear-gradient(135deg, rgba(127, 221, 255, .14), rgba(154, 240, 179, .08));
}

.evaluation-metric span,
.evaluation-metric small {
  display: block;
  color: var(--muted);
}

.evaluation-metric strong {
  display: block;
  margin: 12px 0 8px;
  color: var(--text);
  font-size: clamp(34px, 5vw, 54px);
  line-height: .95;
}

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

.evaluation-secondary-section {
  margin-top: 2px;
}

.evaluation-fold {
  border: 0;
  padding: 0;
  margin: 0;
}

.evaluation-fold > summary {
  display: none;
}

.trend-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(127, 221, 255, .2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 8%, rgba(127, 221, 255, .12), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(154, 240, 179, .035));
}

.trend-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 8%, rgba(255, 255, 255, .055), transparent 28%);
  opacity: .65;
}

.trend-card > * {
  position: relative;
  z-index: 1;
}

.trend-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.trend-card h3 {
  margin: 0 0 6px;
  font-size: 24px;
}

.trend-card p,
.trend-card small {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.trend-card-head strong {
  flex: 0 0 auto;
  min-width: 70px;
  padding: 8px 10px;
  text-align: center;
  color: #06111f;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 22px rgba(127, 221, 255, .16);
}

.trend-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 8px;
}

.trend-grid-lines line {
  stroke: rgba(127, 221, 255, .14);
  stroke-width: 1;
}

.trend-labels text {
  fill: rgba(221, 244, 255, .55);
  font-size: 12px;
  font-weight: 700;
}

.trend-bar {
  fill: #83e6d0;
  filter: drop-shadow(0 8px 12px rgba(127, 221, 255, .14));
  opacity: .92;
}

.trend-line {
  fill: none;
  stroke: #9af0b3;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 12px rgba(154, 240, 179, .18));
}

.trend-dot {
  fill: #7fddff;
  stroke: #dff8ff;
  stroke-width: 2;
}

.trend-empty {
  fill: rgba(221, 244, 255, .58);
  font-size: 16px;
  font-weight: 900;
}

.diagnosis-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.diagnosis-heading h3 {
  margin: 4px 0 0;
  font-size: 28px;
}

.diagnosis-heading span,
.ai-evaluation-meta,
.muted-text {
  color: var(--muted);
}

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

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

.diagnosis-grid > div {
  min-height: 160px;
  padding: 16px;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 8px;
  background: rgba(9, 18, 33, .42);
}

.diagnosis-grid h4 {
  margin: 0 0 12px;
}

.clean-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.ranked-list {
  display: grid;
  gap: 12px;
}

.ranked-row {
  display: grid;
  gap: 8px;
}

.ranked-row > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ranked-row small {
  color: var(--muted);
}

.ranked-row i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.ranked-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.ability-mastery-list .ranked-row,
.ability-report-bars .ai-report-bar-row {
  padding: 12px;
  border: 1px solid rgba(127, 221, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.ability-mastery-list .ranked-row em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.ability-status-weak i b,
.ability-status-weak .ai-report-bar-row b {
  background: linear-gradient(90deg, #ff8f8f, #f4df82);
}

.ability-status-improving i b,
.ability-status-improving .ai-report-bar-row b {
  background: linear-gradient(90deg, #f4df82, var(--green));
}

.ability-status-stable i b,
.ability-status-stable .ai-report-bar-row b {
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.ai-diagnosis {
  background: linear-gradient(135deg, rgba(154, 240, 179, .08), rgba(127, 221, 255, .055));
}

.compact-primary {
  min-width: 158px;
}

.ai-evaluation-text {
  display: grid;
  gap: 12px;
}

.ai-evaluation-block,
.ai-evaluation-empty {
  padding: 14px 16px;
  border: 1px solid rgba(154, 240, 179, .2);
  border-radius: 8px;
  background: rgba(6, 17, 31, .42);
  color: var(--muted);
  line-height: 1.75;
}

.ai-evaluation-block strong {
  display: block;
  margin-bottom: 6px;
  color: var(--green);
  font-size: 17px;
}

.ai-evaluation-block p {
  margin: 0;
}

.ai-report-shell {
  display: grid;
  gap: 16px;
}

.ai-report-toolbar,
.ai-parent-summary,
.ai-report-section {
  padding: 16px;
  border: 1px solid rgba(154, 240, 179, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .38);
}

.ai-report-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.ai-report-toolbar strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 20px;
}

.ai-report-toolbar span,
.ai-report-section small {
  color: var(--muted);
  line-height: 1.6;
}

.ai-parent-summary {
  background:
    radial-gradient(circle at 10% 0%, rgba(127, 221, 255, .12), transparent 30%),
    rgba(6, 17, 31, .46);
}

.ai-parent-summary h4,
.ai-report-section h4 {
  margin: 0 0 10px;
  color: var(--green);
  font-size: 20px;
}

.ai-parent-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

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

.ai-report-metric {
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(127, 221, 255, .075), rgba(154, 240, 179, .04));
}

.ai-report-metric span,
.ai-report-metric small {
  display: block;
  color: var(--muted);
}

.ai-report-metric strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 10px 0;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.ai-report-metric em {
  color: var(--muted);
  font-size: 16px;
  font-style: normal;
}

.ai-report-chart-grid,
.ai-report-two-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ai-report-card-list,
.ai-report-bars,
.ai-action-plan {
  display: grid;
  gap: 12px;
}

.ai-report-card-list article,
.ai-action-plan article {
  padding: 14px;
  border: 1px solid rgba(127, 221, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.ai-report-card-list article > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.ai-report-card-list strong,
.ai-action-plan strong {
  color: var(--text);
}

.ai-report-card-list span {
  padding: 5px 10px;
  color: #06111f;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-weight: 900;
}

.ai-report-card-list p,
.ai-action-plan p {
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.7;
}

.ai-report-bar-row {
  display: grid;
  gap: 8px;
}

.ai-report-bar-row > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ai-report-bar-row strong {
  color: var(--text);
}

.ai-report-bar-row span {
  color: var(--muted);
}

.ai-report-bar-row i {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.ai-report-bar-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 18px rgba(127, 221, 255, .18);
}

.ai-report-section .ai-evaluation-text {
  margin-top: 4px;
}

.ai-comment-section {
  border-color: rgba(154, 240, 184, .28);
  background:
    linear-gradient(135deg, rgba(154, 240, 184, .08), rgba(127, 221, 255, .04)),
    rgba(255, 255, 255, .04);
}

.ai-comment-section h4 {
  color: var(--green);
}

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

.evaluation-records .reinforce-panel {
  grid-column: 1 / -1;
}

.record-panel {
  padding: 18px;
  border-top: 1px solid var(--line);
}

.record-panel > strong,
.record-panel-head > strong {
  font-size: 22px;
}

.record-panel > strong {
  display: block;
  margin-bottom: 8px;
}

.record-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.compact-link-btn {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 15px;
  white-space: nowrap;
}

.full-span {
  grid-column: 1 / -1;
}

.profile-panel h3 {
  margin: 0 0 10px;
  font-size: 28px;
}

.profile-panel p {
  color: var(--muted);
  line-height: 1.7;
}

.ability-list {
  display: grid;
  gap: 14px;
}

.ability-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 48px;
  gap: 10px;
  align-items: center;
}

.ability-row strong,
.ability-row small {
  display: block;
}

.ability-row small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.ability-row span {
  color: var(--green);
  font-weight: 900;
  text-align: right;
}

.ability-row i {
  grid-column: 1 / -1;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.ability-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 18px rgba(40, 214, 255, 0.22);
}

.metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric span { color: var(--muted); }
.metric strong { font-size: 34px; }

.metric-link {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.metric-link:hover {
  border-color: rgba(127, 221, 255, .5);
  background: rgba(127, 221, 255, .08);
}

.admin-dashboard {
  display: grid;
  gap: 16px;
}

.admin-collapse-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.admin-collapse-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.admin-collapse-panel > summary::-webkit-details-marker {
  display: none;
}

.admin-collapse-panel > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid rgba(127, 221, 255, .28);
  border-radius: 50%;
  color: var(--green);
  font-weight: 900;
}

.admin-collapse-panel[open] > summary::after {
  content: "-";
}

.admin-collapse-panel > summary span {
  font-weight: 900;
}

.admin-collapse-panel > summary small {
  margin-left: auto;
  color: var(--muted);
}

.admin-collapse-panel[open] {
  padding-bottom: 16px;
}

.admin-collapse-panel > .admin-kpi-grid,
.admin-collapse-panel > .admin-maintenance-strip,
.admin-collapse-panel > .admin-insight-list,
.admin-collapse-panel > .admin-ops-grid,
.admin-collapse-panel > .empty-state {
  margin-inline: 16px;
}

.admin-collapse-panel > .admin-maintenance-strip,
.admin-collapse-panel > .admin-insight-list,
.admin-collapse-panel > .admin-ops-grid,
.admin-collapse-panel > .empty-state {
  margin-top: 12px;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.admin-metric-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 118px;
  padding: 16px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 184, .035)),
    rgba(255, 255, 255, .045);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-metric-card span,
.admin-metric-card small {
  color: var(--muted);
}

.admin-metric-card strong {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.admin-maintenance-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 184, .04));
}

.admin-maintenance-strip div {
  display: grid;
  gap: 4px;
}

.admin-maintenance-strip span {
  color: var(--muted);
}

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

.admin-insight-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.admin-insight-card.admin-collapse-panel {
  padding: 0;
}

.admin-insight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-insight-head h3 {
  margin: 0;
  font-size: 22px;
}

.admin-insight-head span {
  color: var(--muted);
}

.admin-insight-list {
  display: grid;
  gap: 8px;
}

.admin-insight-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
  background: rgba(10, 24, 42, .68);
  border: 1px solid rgba(127, 221, 255, .18);
  border-radius: 8px;
}

.admin-insight-row b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  border-radius: 999px;
}

.admin-insight-row strong,
.admin-insight-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-insight-row small {
  margin-top: 3px;
  color: var(--muted);
}

.admin-insight-row em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.admin-ops-panel {
  margin-top: 2px;
}

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

.admin-ops-grid > section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(127, 221, 255, .16);
  border-radius: 8px;
  background: rgba(10, 24, 42, .48);
}

.admin-ops-wide {
  grid-column: 1 / -1;
}

.compact-title {
  margin-bottom: 0;
}

.compact-title h3 {
  margin: 0;
  font-size: 18px;
}

.compact-title p {
  margin: 4px 0 0;
  color: var(--muted);
}

.admin-mini-list {
  display: grid;
  gap: 8px;
}

.admin-mini-row {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(127, 221, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.admin-mini-row.passive {
  pointer-events: none;
}

.admin-mini-row strong,
.admin-mini-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-mini-row small {
  color: var(--muted);
}

.admin-quality-summary {
  padding: 10px 12px;
  color: var(--green);
  font-weight: 900;
  border: 1px solid rgba(154, 240, 179, .22);
  border-radius: 8px;
  background: rgba(154, 240, 179, .06);
}

.backup-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.backup-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.backup-row .secondary-button {
  min-width: 72px;
  padding: 8px 12px;
}

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

.admin-export-grid .secondary-button {
  min-height: 42px;
}

.admin-ledger-table {
  display: grid;
  gap: 8px;
}

.admin-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(127, 221, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.admin-ledger-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-ledger-row small {
  color: var(--muted);
}

.admin-ledger-row b {
  font-size: 20px;
}

.admin-ledger-row.income b {
  color: var(--green);
}

.admin-ledger-row.consume b {
  color: #ffb4b4;
}

.account-home {
  display: grid;
  gap: 18px;
}

.account-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 24%, rgba(154, 240, 179, .18), transparent 26%),
    linear-gradient(135deg, rgba(127, 221, 255, .09), rgba(255, 255, 255, .035));
}

.account-hero-card::before {
  content: "AI STUDY";
  position: absolute;
  right: 34%;
  bottom: 18px;
  color: rgba(154, 240, 179, .12);
  font-size: 42px;
  font-weight: 900;
  animation: titleBreath 4.6s ease-in-out infinite;
  pointer-events: none;
}

.account-hero-main {
  position: relative;
  z-index: 1;
}

.account-hero-main h2 {
  margin: 6px 0 10px;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1;
}

.account-hero-main p {
  color: var(--muted);
}

.nickname-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  max-width: 560px;
  margin-top: 14px;
}

.nickname-form label {
  display: grid;
  gap: 6px;
  min-width: min(320px, 100%);
  color: var(--muted);
}

.nickname-form input {
  min-height: 46px;
}

.nickname-form .secondary-button {
  min-height: 46px;
  padding-inline: 18px;
}

.guardian-bound-note {
  margin-top: 10px;
  font-size: 14px;
}

.account-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.account-energy-card {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(127, 221, 255, .28);
  border-radius: 8px;
  background: rgba(6, 17, 31, .5);
}

.energy-ring {
  display: grid;
  place-items: center;
  width: 132px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(7, 17, 31, .98) 0 58%, transparent 59%),
    conic-gradient(var(--green) var(--energy), rgba(255, 255, 255, .1) 0);
  box-shadow: 0 0 36px rgba(127, 221, 255, .18);
}

.energy-ring span {
  color: var(--text);
  font-size: 44px;
  font-weight: 950;
}

.account-energy-card strong {
  font-size: 20px;
}

.account-energy-card small {
  color: var(--muted);
  text-align: center;
}

.account-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.account-stat-strip > div,
.account-stat-strip > a {
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.account-stat-strip span,
.account-stat-strip small {
  display: block;
  color: var(--muted);
}

.account-stat-strip strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

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

.mission-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.mission-card.active {
  background: linear-gradient(135deg, rgba(127, 221, 255, .14), rgba(154, 240, 179, .08));
}

.mission-card i {
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  color: #06111f;
  font-style: normal;
  font-weight: 950;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 24px rgba(127, 221, 255, .18);
}

.mission-card strong,
.mission-card span {
  display: block;
}

.mission-card span {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.45;
}

.mission-card-content {
  color: inherit;
  text-decoration: none;
}

.mission-card > a {
  color: var(--green);
  font-weight: 900;
}

.mission-card-note {
  color: var(--muted);
  font-weight: 850;
}

.account-group-board {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 86% 16%, rgba(127, 221, 255, .13), transparent 30%),
    linear-gradient(135deg, rgba(127, 221, 255, .07), rgba(154, 240, 179, .035)),
    rgba(255, 255, 255, .04);
}

.account-group-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1fr);
  gap: 14px;
}

.account-group-main,
.account-group-mini,
.account-group-metrics > div,
.account-group-empty-content {
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(6, 17, 31, .42);
}

.account-group-main {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.account-group-main span,
.account-group-main p,
.account-group-invite small,
.account-group-metrics span,
.account-group-metrics small,
.account-group-mini p {
  color: var(--muted);
}

.account-group-main h4 {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
}

.account-group-main p {
  margin: 0;
  line-height: 1.65;
}

.account-group-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px dashed rgba(154, 240, 179, .28);
  border-radius: 8px;
  background: rgba(154, 240, 179, .055);
}

.account-group-invite strong {
  color: var(--green);
  letter-spacing: .04em;
}

.account-group-invite .secondary-button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 14px;
}

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

.account-group-metrics > div {
  min-height: 116px;
  padding: 15px;
}

.account-group-metrics strong {
  display: block;
  margin: 8px 0 5px;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1;
}

.account-group-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.account-group-mini {
  padding: 16px;
}

.account-group-mini > strong {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}

.account-group-member-list,
.account-group-pk-list {
  display: grid;
  gap: 8px;
}

.account-group-member-list span,
.account-group-pk-list span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(132, 205, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.account-group-pk-list span {
  grid-template-columns: minmax(0, 1fr) auto;
}

.account-group-member-list b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #07111f;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.account-group-member-list em,
.account-group-pk-list em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.account-group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.account-group-empty-content {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
}

.account-group-empty-content strong {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
}

.account-group-empty-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.team-orbit-icon {
  position: relative;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(127, 221, 255, .28);
  border-radius: 24px;
  background:
    radial-gradient(circle at 55% 45%, rgba(154, 240, 179, .24), transparent 26px),
    rgba(7, 17, 31, .52);
}

.team-orbit-icon::before,
.team-orbit-icon::after,
.team-orbit-icon span,
.team-orbit-icon i {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.team-orbit-icon::before {
  inset: 18px;
  border: 2px solid rgba(154, 240, 179, .68);
}

.team-orbit-icon::after {
  left: 18px;
  right: 18px;
  top: 37px;
  height: 3px;
  background: rgba(127, 221, 255, .7);
}

.team-orbit-icon span {
  width: 10px;
  height: 10px;
  left: 14px;
  top: 18px;
  background: var(--cyan);
  box-shadow: 34px 28px 0 var(--green);
}

.team-orbit-icon i {
  width: 24px;
  height: 24px;
  right: 10px;
  bottom: 9px;
  border: 2px solid rgba(221, 244, 255, .7);
}

.badge-board,
.collection-board,
.account-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.mini-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.mini-section-head h3 {
  margin: 4px 0 0;
  font-size: 24px;
}

.mini-section-head a {
  color: var(--green);
  font-weight: 900;
}

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

.badge-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 226px;
  padding: 14px 12px 16px;
  overflow: hidden;
  text-align: center;
  color: var(--text);
  border: 1px solid rgba(154, 240, 179, .28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 10%, rgba(127, 221, 255, .13), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(154, 240, 179, .035)),
    rgba(255, 255, 255, .035);
  animation: badgeGlow 5.2s ease-in-out infinite;
  appearance: none;
  cursor: pointer;
  line-height: 1.2;
}

.badge-card:hover,
.badge-card:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .25), 0 0 24px rgba(154, 240, 179, .1);
}

.badge-card::before {
  content: "";
  position: absolute;
  inset: -20% auto -20% -45%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  animation: badgeShine 6s ease-in-out infinite;
}

.badge-card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px rgba(154, 240, 179, .8);
}

.badge-count {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  min-width: 42px;
  padding: 6px 10px;
  color: #07111f;
  font-style: normal;
  font-weight: 950;
  font-size: 14px;
  line-height: 1;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd166, var(--green));
  box-shadow: 0 0 18px rgba(255, 209, 102, .22);
}

.badge-picture {
  position: relative;
  z-index: 1;
  width: min(172px, 92%);
  margin: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 48%, rgba(127, 221, 255, .11), transparent 62%);
}

.badge-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 60%;
  transition: transform .28s ease, filter .28s ease, opacity .28s ease;
}

.badge-card:hover .badge-picture img {
  transform: translateY(-4px) scale(1.035);
}

.badge-card > strong,
.badge-card > small {
  position: relative;
  z-index: 1;
}

.badge-illustration {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  aspect-ratio: 1;
  color: #06111f;
  border-radius: 24px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .7), transparent 16px),
    linear-gradient(135deg, #7fddff, #9af0b3 62%, #ffd166);
  box-shadow: inset 0 -8px 18px rgba(5, 14, 28, .18), 0 14px 32px rgba(127, 221, 255, .18);
  transform: rotate(-4deg);
}

.badge-illustration::before,
.badge-illustration::after {
  content: "";
  position: absolute;
  background: rgba(6, 17, 31, .82);
}

.badge-illustration::before {
  top: 22px;
  left: 21px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 25px 0 0 rgba(6, 17, 31, .82);
}

.badge-illustration::after {
  left: 28px;
  bottom: 18px;
  width: 20px;
  height: 4px;
  border-radius: 999px;
}

.badge-illustration span {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 950;
}

.badge-energy {
  transform: rotate(3deg);
}

.badge-score {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .72), transparent 16px),
    linear-gradient(135deg, #ffd166, #9af0b3 62%, #7fddff);
}

.badge-retry,
.badge-think {
  border-radius: 50%;
}

.badge-streak {
  transform: rotate(0deg);
}

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

.badge-card.locked {
  opacity: .74;
  filter: none;
  animation: none;
}

.badge-card.locked .badge-picture img {
  opacity: .84;
  filter: none;
}

.badge-card.locked::before {
  display: none;
}

.badge-card.locked::after {
  background: rgba(221, 244, 255, .28);
  box-shadow: none;
}

.badge-card.locked .badge-count {
  color: rgba(221, 244, 255, .72);
  background: rgba(221, 244, 255, .1);
  box-shadow: none;
}

.badge-card.unlocked {
  border-color: rgba(255, 209, 102, .42);
}

.badge-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 245;
  display: grid;
  place-items: center;
  padding: 22px;
}

.badge-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, .72);
  backdrop-filter: blur(8px);
}

.badge-preview-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 270px) minmax(220px, 380px);
  gap: 24px;
  align-items: center;
  max-width: min(760px, 94vw);
  padding: 24px;
  border: 1px solid rgba(154, 240, 179, .34);
  border-radius: 12px;
  color: var(--text);
  background:
    radial-gradient(circle at 26% 24%, rgba(127, 221, 255, .18), transparent 38%),
    radial-gradient(circle at 78% 78%, rgba(255, 209, 102, .13), transparent 34%),
    linear-gradient(135deg, rgba(17, 31, 50, .98), rgba(8, 17, 30, .98));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .52), 0 0 42px rgba(154, 240, 179, .12);
  animation: cardPreviewIn .22s ease-out;
  overflow: hidden;
}

.badge-preview-panel.unlocked {
  border-color: rgba(255, 226, 122, .52);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .52),
    0 0 34px rgba(127, 221, 255, .22),
    0 0 62px rgba(255, 209, 102, .18);
}

.badge-preview-panel.unlocked::before,
.badge-preview-panel.unlocked::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.badge-preview-panel.unlocked::before {
  inset: -45%;
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, .9) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 22%, rgba(154, 240, 179, .85) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 68%, rgba(127, 221, 255, .9) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 76%, rgba(255, 226, 122, .85) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(127, 221, 255, .14), transparent 36%);
  opacity: .65;
  animation: badgeSparkleDrift 4.2s linear infinite;
}

.badge-preview-panel.unlocked::after {
  inset: -30% auto -30% -38%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), rgba(255, 226, 122, .22), transparent);
  transform: rotate(18deg);
  animation: badgePreviewSweep 2.8s ease-in-out infinite;
}

.badge-preview-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--green);
  font-size: 32px;
  line-height: 1;
  background: transparent;
  box-shadow: none;
}

.badge-preview-close::after {
  display: none;
}

.badge-preview-close:hover,
.badge-preview-close:focus-visible {
  transform: none;
  color: #c7ffd7;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.badge-preview-panel figure {
  display: grid;
  place-items: center;
  margin: 0;
}

.badge-preview-panel img {
  position: relative;
  z-index: 1;
  width: min(260px, 62vw);
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .42));
}

.badge-preview-panel.unlocked img {
  animation: badgeUnlockedGlow 2.4s ease-in-out infinite;
  filter:
    drop-shadow(0 22px 34px rgba(0, 0, 0, .42))
    drop-shadow(0 0 18px rgba(127, 221, 255, .5))
    drop-shadow(0 0 28px rgba(255, 226, 122, .28));
}

.badge-preview-panel span {
  color: var(--green);
  font-weight: 950;
}

.badge-preview-panel h3 {
  margin: 8px 0 10px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
}

.badge-preview-panel p,
.badge-preview-panel small {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.badge-preview-panel small {
  margin-top: 10px;
  color: rgba(221, 244, 255, .92);
}

.badge-preview-action {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 0 18px;
  border-radius: 999px;
  color: #07111f;
  font-weight: 950;
  text-decoration: none;
  background: linear-gradient(135deg, #7fddff, #9af0b3);
}

@keyframes badgeUnlockedGlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 22px 34px rgba(0, 0, 0, .42))
      drop-shadow(0 0 16px rgba(127, 221, 255, .42))
      drop-shadow(0 0 22px rgba(255, 226, 122, .24));
  }
  50% {
    transform: translateY(-5px) scale(1.035);
    filter:
      drop-shadow(0 28px 38px rgba(0, 0, 0, .5))
      drop-shadow(0 0 26px rgba(127, 221, 255, .7))
      drop-shadow(0 0 42px rgba(255, 226, 122, .42));
  }
}

@keyframes badgeSparkleDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: .45;
  }
  50% {
    opacity: .9;
  }
  100% {
    transform: translate3d(5%, -4%, 0) rotate(16deg);
    opacity: .45;
  }
}

@keyframes badgePreviewSweep {
  0%, 42% {
    transform: translateX(0) rotate(18deg);
    opacity: 0;
  }
  58% {
    opacity: .9;
  }
  100% {
    transform: translateX(420%) rotate(18deg);
    opacity: 0;
  }
}

.collection-board {
  position: relative;
  overflow: hidden;
}

.collection-board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 209, 102, .12), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(127, 221, 255, .12), transparent 26%);
}

.collection-board > * {
  position: relative;
  z-index: 1;
}

.collection-mini-grid {
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 4px 2px 8px;
}

.collection-mini-grid.collapsed {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 286px;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 240, 179, .45) rgba(255, 255, 255, .06);
}

.collection-mini-grid.collapsed::-webkit-scrollbar {
  height: 8px;
}

.collection-mini-grid.collapsed::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.collection-mini-grid.collapsed::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(127, 221, 255, .65), rgba(154, 240, 179, .72));
}

.collection-mini-grid.expanded {
  flex-wrap: wrap;
}

.collection-mini-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, auto) auto auto;
  align-content: start;
  justify-items: center;
  flex: 0 0 clamp(190px, 17vw, 220px);
  min-height: 268px;
  padding: 14px 12px;
  overflow: hidden;
  text-align: center;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 8px;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 20%, rgba(127, 221, 255, .24), transparent 45%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 179, .045)),
    rgba(7, 17, 31, .46);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 42px rgba(0,0,0,.22);
  cursor: pointer;
  appearance: none;
  line-height: 1.25;
  white-space: normal;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.collection-mini-card::after,
.collection-mini-card::before {
  pointer-events: none;
}

.collection-mini-card:hover,
.collection-mini-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(154, 240, 179, .55);
  background:
    radial-gradient(circle at 50% 20%, rgba(154, 240, 179, .24), transparent 48%),
    linear-gradient(135deg, rgba(127, 221, 255, .11), rgba(154, 240, 179, .07)),
    rgba(7, 17, 31, .62);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 22px 54px rgba(0,0,0,.34), 0 0 28px rgba(127, 221, 255, .12);
  outline: none;
}

.collection-mini-card::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: 22px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 240, 179, .2), transparent 68%);
  opacity: .7;
}

.collection-mini-card::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -55%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: rotate(18deg);
  animation: badgeShine 6.8s ease-in-out infinite;
}

.collection-mini-card.rarity-rare::after {
  background: radial-gradient(circle, rgba(154, 240, 179, .24), transparent 68%);
}

.collection-mini-card.rarity-epic::after {
  background: radial-gradient(circle, rgba(200, 167, 255, .22), transparent 68%);
}

.collection-mini-card.rarity-legend::after {
  background: radial-gradient(circle, rgba(255, 209, 102, .24), transparent 68%);
}

.collection-card-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  z-index: 1;
  width: 88px;
  height: 88px;
  transform: translateY(-50%);
  opacity: .9;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25));
}

.collection-card-image {
  position: relative;
  z-index: 1;
  display: block;
  align-self: end;
  width: min(126px, 82%);
  aspect-ratio: 3 / 4;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .32)) drop-shadow(0 0 12px rgba(127, 221, 255, .18));
  transform-origin: 50% 72%;
  transition: transform .24s ease, filter .24s ease;
}

.collection-mini-card:hover .collection-card-image {
  transform: translateY(-5px) scale(1.035);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .34)) drop-shadow(0 0 18px rgba(154, 240, 179, .25));
}

.collection-mini-card.rarity-rare {
  border-color: rgba(154, 240, 179, .44);
}

.collection-mini-card.rarity-rare .collection-card-image {
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .32)) drop-shadow(0 0 16px rgba(154, 240, 179, .26));
}

.collection-mini-card.rarity-rare .collection-card-icon .icon-panel,
.collection-mini-card.rarity-rare .collection-card-icon .icon-node {
  stroke: #9af0b3;
}

.collection-mini-card.rarity-epic .collection-card-icon .icon-panel,
.collection-mini-card.rarity-epic .collection-card-icon .icon-node {
  stroke: #c8a7ff;
}

.collection-mini-card.rarity-legend .collection-card-icon .icon-panel,
.collection-mini-card.rarity-legend .collection-card-icon .icon-node {
  stroke: #ffd166;
}

.collection-mini-card span,
.collection-mini-card strong,
.collection-mini-card small {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.collection-mini-card span {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
}

.collection-mini-card strong {
  margin: 6px 0 4px;
  font-size: 16px;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.collection-mini-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 18px;
  border: 1px solid rgba(154, 240, 179, .36);
  border-radius: 999px;
  color: #07111f;
  font-weight: 950;
  background: linear-gradient(135deg, #7fddff, #9af0b3);
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
}

.thought-card-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  padding: 22px;
}

.thought-card-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, .76);
  backdrop-filter: blur(8px);
}

.thought-card-preview-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(220px, 360px);
  gap: 22px;
  align-items: center;
  max-width: min(760px, 94vw);
  width: fit-content;
  padding: 24px;
  border: 1px solid rgba(127, 221, 255, .42);
  border-radius: 12px;
  background:
    radial-gradient(circle at 28% 18%, rgba(127, 221, 255, .22), transparent 42%),
    radial-gradient(circle at 72% 82%, rgba(154, 240, 179, .18), transparent 40%),
    linear-gradient(135deg, rgba(17, 31, 50, .98), rgba(8, 17, 30, .98));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .52), 0 0 42px rgba(127, 221, 255, .14);
  animation: cardPreviewIn .22s ease-out;
}

.thought-card-preview-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 9px;
  pointer-events: none;
}

.thought-card-preview-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  color: var(--green);
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  background: transparent;
  cursor: pointer;
  box-shadow: none;
}

.thought-card-preview-close::after {
  display: none;
}

.thought-card-preview-close:hover,
.thought-card-preview-close:focus-visible {
  transform: none;
  color: #c7ffd7;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.thought-card-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
}

.thought-card-preview-stage::after {
  content: "";
  position: absolute;
  inset: 10% 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 221, 255, .2), transparent 64%);
  filter: blur(4px);
  animation: thoughtCardGlowBurst .82s ease-out both;
}

.thought-card-preview-stage img {
  width: min(300px, 74vw);
  max-height: min(70vh, 430px);
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .42)) drop-shadow(0 0 22px rgba(127, 221, 255, .22));
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  animation: thoughtCardRevealSpin .86s cubic-bezier(.16, .95, .2, 1.12) both;
}

.thought-card-preview-info h3 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
}

.thought-card-preview-info p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

@keyframes cardPreviewIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes thoughtCardRevealSpin {
  0% {
    opacity: 0;
    transform: perspective(980px) translateY(28px) rotateY(-170deg) rotateZ(-5deg) scale(.74);
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .28)) drop-shadow(0 0 4px rgba(127, 221, 255, .12));
  }
  34% {
    opacity: 1;
    transform: perspective(980px) translateY(-18px) rotateY(32deg) rotateZ(3deg) scale(1.12);
    filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .48)) drop-shadow(0 0 34px rgba(127, 221, 255, .45));
  }
  62% {
    transform: perspective(980px) translateY(4px) rotateY(-12deg) rotateZ(-1.5deg) scale(.98);
  }
  82% {
    transform: perspective(980px) translateY(-4px) rotateY(5deg) rotateZ(.7deg) scale(1.025);
  }
  100% {
    opacity: 1;
    transform: perspective(980px) translateY(0) rotateY(0) rotateZ(0) scale(1);
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .42)) drop-shadow(0 0 22px rgba(127, 221, 255, .22));
  }
}

@keyframes thoughtCardGlowBurst {
  0% { opacity: 0; transform: scale(.55); filter: blur(2px); }
  36% { opacity: 1; transform: scale(1.18); filter: blur(2px); }
  100% { opacity: .72; transform: scale(1); filter: blur(4px); }
}

body:not([data-page="admin"]) .collection-mini-grid {
  display: flex;
}

.account-content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.parent-dashboard {
  display: grid;
  gap: 18px;
}

.parent-hero-card,
.parent-panel,
.parent-stat-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(17, 31, 50, .95), rgba(29, 45, 63, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.parent-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.parent-hero-card h2 {
  margin: 4px 0 8px;
  font-size: clamp(34px, 4vw, 58px);
}

.parent-hero-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.parent-privacy-note {
  margin-top: 8px !important;
  font-size: 15px;
}

.parent-route-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 0;
}

.parent-route-strip strong {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--green);
  background: rgba(154, 240, 179, .12);
  border: 1px solid rgba(154, 240, 179, .3);
}

.parent-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.parent-hero-actions a,
.parent-panel-head a {
  text-decoration: none;
}

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

.parent-stat-card {
  display: block;
  min-height: 126px;
  padding: 18px;
}

.parent-stat-card span,
.parent-stat-card small {
  display: block;
  color: var(--muted);
}

.parent-stat-card strong {
  display: block;
  margin: 8px 0 3px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.parent-stat-card.accent strong {
  color: var(--green);
}

.parent-stat-card.warning strong {
  color: #ffd36a;
}

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

.parent-focus-grid,
.parent-review-grid,
.parent-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.parent-priority-panel {
  grid-column: 1 / -1;
}

.parent-review-grid .parent-panel {
  min-width: 0;
}

.parent-panel {
  padding: 18px;
}

.parent-collapsible-panel {
  overflow: hidden;
}

.parent-collapsible-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -18px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.parent-collapsible-panel > summary::-webkit-details-marker {
  display: none;
}

.parent-collapsible-panel > summary::after {
  content: "+ 展开";
  flex: 0 0 auto;
  min-width: 72px;
  padding: 8px 12px;
  border: 1px solid rgba(154, 240, 179, .35);
  border-radius: 999px;
  text-align: center;
  background: rgba(154, 240, 179, .08);
  color: var(--green);
  font-weight: 900;
}

.parent-collapsible-panel[open] > summary {
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(132, 205, 255, .12);
}

.parent-collapsible-panel[open] > summary::after {
  content: "- 收起";
}

.parent-collapsible-panel summary button {
  margin-left: auto;
}

.parent-collapsible-body {
  display: grid;
  gap: 12px;
}

.parent-diagnosis-summary-text {
  margin-left: auto;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
}

.parent-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.parent-panel-head strong {
  font-size: 22px;
}

.parent-panel-head a,
.parent-panel-head span {
  color: var(--green);
  font-weight: 800;
}

.parent-list,
.parent-reminders,
.parent-ledger,
.parent-ability-list {
  display: grid;
  gap: 10px;
}

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

.parent-mini-label {
  display: block;
  margin: 0 0 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
}

.parent-panel-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(132, 205, 255, .12);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.parent-list-item {
  display: grid;
  gap: 5px;
  padding: 13px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 8px;
  background: rgba(5, 13, 25, .26);
}

.parent-list-item span,
.parent-list-item small,
.muted-text {
  color: var(--muted);
}

.parent-list-item strong,
.parent-list-item span,
.parent-list-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-ability-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 80px;
  gap: 12px;
  align-items: center;
}

.parent-ability-row i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.parent-ability-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.parent-ability-row em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
}

.parent-point-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.parent-payment-panel {
  grid-column: auto;
}

.parent-recharge-controls {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.parent-recharge-controls .recharge-panel {
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.parent-recharge-controls .recharge-panel button {
  min-width: 112px;
  min-height: 54px;
  white-space: nowrap;
}

.parent-payment-panel .guardian-pay-notice {
  font-size: 13px;
}

.parent-point-summary span,
.parent-reminder,
.parent-ledger-row {
  padding: 10px 12px;
  border: 1px solid rgba(132, 205, 255, .14);
  border-radius: 8px;
  background: rgba(5, 13, 25, .24);
}

.parent-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.parent-ledger-row small {
  color: var(--muted);
}

.parent-ledger-row .positive {
  color: var(--green);
}

.parent-ledger-row .negative {
  color: #8fdfff;
}

.parent-reminder {
  display: grid;
  gap: 5px;
}

.parent-reminder span {
  color: var(--muted);
}

.parent-reminder.important,
.parent-reminder.action {
  border-color: rgba(148, 236, 177, .32);
}

.parent-reminder.warning,
.parent-reminder.payment {
  border-color: rgba(255, 211, 106, .35);
}

.parent-referral-panel {
  padding: 0;
  background:
    radial-gradient(circle at 86% 10%, rgba(154, 240, 179, .13), transparent 30%),
    linear-gradient(135deg, rgba(17, 31, 50, .96), rgba(29, 45, 63, .9));
}

.parent-referral-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 18px;
  align-items: stretch;
}

.parent-referral-copy {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.75;
}

.parent-referral-code {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 8px;
  background: rgba(5, 13, 25, .28);
}

.parent-referral-code span {
  color: var(--muted);
}

.parent-referral-code strong {
  letter-spacing: .08em;
  color: var(--green);
}

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

.parent-referral-stats span {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(132, 205, 255, .14);
  border-radius: 8px;
  background: rgba(5, 13, 25, .24);
  color: var(--muted);
}

.parent-referral-stats b {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.parent-referral-records {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.parent-diagnosis-panel {
  border-color: rgba(105, 125, 255, .36);
  background:
    radial-gradient(circle at 92% 0%, rgba(105, 125, 255, .14), transparent 30%),
    linear-gradient(135deg, rgba(239, 243, 255, .96), rgba(248, 251, 255, .92));
}

.parent-diagnosis-panel[open] {
  box-shadow: 0 22px 54px rgba(57, 82, 173, .14);
}

.parent-diagnosis-panel[open] .parent-collapsible-body {
  margin: 0 -4px;
  padding: 16px;
  border: 1px solid rgba(105, 125, 255, .22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 8% 0%, rgba(105, 125, 255, .10), transparent 32%),
    radial-gradient(circle at 92% 14%, rgba(88, 198, 255, .10), transparent 28%),
    rgba(245, 248, 255, .88);
}

.parent-diagnosis-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(154, 240, 179, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.parent-diagnosis-toolbar div {
  display: grid;
  gap: 3px;
}

.parent-diagnosis-toolbar strong {
  font-size: 18px;
}

.parent-diagnosis-toolbar span {
  color: var(--muted);
}

.parent-diagnosis-meta {
  margin: 0 0 10px;
  color: var(--muted);
}

.parent-diagnosis-text {
  line-height: 1.75;
  color: var(--muted);
}

.parent-report-view {
  display: grid;
  gap: 14px;
}

.parent-report-view .ai-report-shell {
  gap: 14px;
}

body[data-page="parent"] .ai-generated-parent-panel > summary strong::before {
  content: "AI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  margin-right: 8px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #6b7cff, #33b8d9);
  font-size: 13px;
  font-weight: 900;
}

body[data-page="parent"] .parent-report-view .ai-report-shell {
  padding: 14px;
  border: 1px solid rgba(105, 125, 255, .26);
  border-radius: 12px;
  background:
    linear-gradient(rgba(105, 125, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 125, 255, .045) 1px, transparent 1px),
    linear-gradient(135deg, #f7f8ff 0%, #ffffff 48%, #f1fbff 100%);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: 0 16px 34px rgba(57, 82, 173, .10);
}

body[data-page="parent"] .parent-report-view .ai-report-toolbar,
body[data-page="parent"] .parent-report-view .ai-parent-summary,
body[data-page="parent"] .parent-report-view .ai-report-section,
body[data-page="parent"] .parent-report-view .ai-report-metric,
body[data-page="parent"] .parent-report-view .ai-report-card-list article,
body[data-page="parent"] .parent-report-view .ai-report-bar-row {
  color: var(--text);
  border-color: rgba(105, 125, 255, .18);
  background: rgba(255, 255, 255, .82);
}

body[data-page="parent"] .parent-report-view .ai-parent-summary,
body[data-page="parent"] .parent-report-view .ai-report-section.ai-comment-section {
  border-color: rgba(47, 191, 154, .24);
  background: rgba(238, 251, 247, .86);
}

body[data-page="parent"] .parent-report-view .ai-parent-summary h4,
body[data-page="parent"] .parent-report-view .ai-report-section h4,
body[data-page="parent"] .parent-report-view .ai-report-toolbar strong {
  color: #30408f;
}

body[data-page="parent"] .parent-payment-panel .membership-board {
  margin-top: 0 !important;
}

.activity-list {
  display: grid;
  gap: 10px;
}

.activity-list a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 17, 31, .38);
}

.activity-list span {
  color: var(--green);
  font-weight: 900;
}

.activity-list small {
  color: var(--muted);
}

.admin-search-line {
  display: grid;
  gap: 8px;
  margin: 18px 0 12px;
}

.admin-list-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(12, 28, 48, .56);
}

.admin-list-filters label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
}

.admin-list-filters select {
  min-height: 44px;
}

.list-toolbar {
  margin: 18px 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.list-toolbar label,
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.sort-segment {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 999px;
  background: rgba(8, 21, 36, .68);
}

.sort-segment button {
  min-height: 30px;
  padding: 0 12px;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
}

.sort-segment button.active {
  color: #07101d;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.sort-segment button::after {
  display: none;
}

.list-toolbar .visual-select {
  width: 124px;
}

.list-toolbar .visual-select-button {
  min-height: 36px;
  padding-left: 11px;
  padding-right: 32px;
  border-color: rgba(132, 205, 255, .22);
  background: rgba(8, 21, 36, .7);
}

.inline-check {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
}

.inline-check input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.list-toolbar select,
.compose-grid select,
.compose-grid input {
  min-width: 150px;
}

.test-list-section {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

body[data-test-kind="chapter"] .section-head {
  align-items: end;
}

body[data-test-kind="chapter"] .section-head h1 {
  font-size: clamp(42px, 5.2vw, 68px);
}

body[data-test-kind="chapter"] .section-head .eyebrow {
  color: var(--green);
}

body[data-test-kind="chapter"] .selector-panel {
  grid-template-columns: minmax(150px, 220px) minmax(220px, 1fr) minmax(170px, 220px);
  align-items: end;
}

body[data-test-kind="chapter"] .selector-panel label:nth-of-type(2) {
  min-width: 0;
}

body[data-test-kind="chapter"] #findTestsBtn {
  min-height: 52px;
}

.test-list-section .list-toolbar {
  margin: 0;
  justify-content: flex-end;
}

.test-list-section .list-toolbar > span {
  margin-right: auto;
  color: var(--text);
  font-weight: 900;
  font-size: 18px;
}

.test-list-section.is-empty .list-toolbar {
  margin-bottom: -4px;
}

.test-list-section.is-empty .list-toolbar .sort-segment,
.test-list-section.is-empty .list-toolbar .inline-check {
  display: none;
}

.test-recommend-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid rgba(154, 240, 179, .2);
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 10%, rgba(154, 240, 179, .08), transparent 28%),
    linear-gradient(135deg, rgba(127, 221, 255, .045), rgba(154, 240, 179, .035)),
    rgba(7, 18, 33, .42);
}

.test-recommend-head.compact {
  align-items: center;
  padding: 14px 16px;
}

.test-recommend-head h3 {
  margin: 4px 0 8px;
  font-size: clamp(24px, 3vw, 34px);
}

.test-recommend-head.compact h3 {
  margin: 0;
  font-size: 21px;
}

.test-recommend-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.test-recommend-head.compact p {
  margin-top: 3px;
  line-height: 1.35;
}

.test-recommend-head > span {
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #06111f;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  font-weight: 950;
}

.test-recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.test-recommend-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 0;
}

.test-hub-recommend-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.test-recommend-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  min-height: 118px;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .07), rgba(255, 255, 255, .03)),
    rgba(8, 19, 34, .52);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.test-recommend-card:hover {
  transform: translateY(-2px);
  border-color: rgba(154, 240, 179, .44);
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .11), rgba(154, 240, 179, .07)),
    rgba(8, 19, 34, .62);
}

.test-recommend-card.free {
  border-color: rgba(154, 240, 179, .36);
  box-shadow: inset 0 1px 0 rgba(154, 240, 179, .08);
}

.test-recommend-card span {
  width: fit-content;
  padding: 5px 9px;
  color: var(--green);
  border: 1px solid rgba(154, 240, 179, .25);
  border-radius: 999px;
  background: rgba(154, 240, 179, .07);
  font-size: 12px;
  font-weight: 950;
}

.test-recommend-card strong {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.22;
}

.test-recommend-card small {
  color: var(--muted);
  line-height: 1.55;
}

.chapter-fallback-note {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(47, 191, 154, .22);
  border-radius: 8px;
  color: #2f6f61;
  background: linear-gradient(90deg, rgba(232, 255, 246, .98), rgba(240, 253, 250, .94));
}

.chapter-practice-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 138px;
  padding: 26px 18px;
  text-align: center;
  border-style: solid;
  border-color: rgba(47, 191, 154, .26);
  background:
    radial-gradient(circle at 50% 8%, rgba(47, 191, 154, .13), transparent 34%),
    linear-gradient(135deg, rgba(244, 255, 249, .92), rgba(255, 255, 255, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 10px 24px rgba(39, 78, 108, .06);
}

.chapter-practice-empty strong {
  color: #1f3144;
  font-size: clamp(22px, 2.5vw, 30px);
}

.chapter-practice-empty span {
  color: #60758a;
  line-height: 1.55;
}

.chapter-practice-empty .primary-link-button {
  margin-top: 4px;
}

.test-study-bridge {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid rgba(132, 205, 255, .22);
  border-radius: 12px;
  background:
    radial-gradient(circle at 78% 18%, rgba(148, 236, 181, .12), transparent 28%),
    linear-gradient(135deg, rgba(127, 221, 255, .065), rgba(255, 255, 255, .025)),
    rgba(255, 255, 255, .026);
}

.test-study-bridge--compact {
  gap: 12px;
  padding: 16px 18px;
  border-color: rgba(154, 240, 179, .18);
  background:
    linear-gradient(135deg, rgba(154, 240, 179, .055), rgba(127, 221, 255, .035)),
    rgba(255, 255, 255, .02);
}

.test-study-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .75fr);
  gap: 18px;
  align-items: center;
}

.test-study-bridge--compact .test-study-main {
  grid-template-columns: minmax(0, 1fr) auto;
}

.test-study-copy {
  display: grid;
  gap: 10px;
}

.test-study-copy h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
}

.test-study-bridge--compact .test-study-copy {
  gap: 4px;
}

.test-study-bridge--compact .test-study-copy h2 {
  font-size: clamp(18px, 1.8vw, 24px);
}

.test-study-bridge--compact .learn-card-unit {
  font-size: 13px;
  opacity: .82;
}

.test-study-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.75;
}

.test-study-bridge--compact .test-study-copy p {
  line-height: 1.5;
}

.test-study-action {
  white-space: nowrap;
}

.test-study-map {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(90px, 1fr) 24px minmax(90px, 1fr) 24px;
  grid-template-rows: auto auto;
  gap: 12px 8px;
  align-items: center;
  justify-items: center;
  min-height: 112px;
  padding: 24px 30px 20px;
  overflow: hidden;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background:
    linear-gradient(rgba(132, 205, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 205, 255, .07) 1px, transparent 1px),
    rgba(7, 18, 33, .36);
  background-size: 28px 28px;
}

.test-study-map::after {
  content: "";
  position: absolute;
  inset: auto -8% 12px 8%;
  height: 2px;
  opacity: .75;
  background: linear-gradient(90deg, transparent, rgba(127, 221, 255, .8), rgba(148, 236, 181, .75), transparent);
  animation: scanLine 3.8s ease-in-out infinite;
}

.test-study-map strong {
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

.test-study-map .map-dot,
.test-study-map .map-line {
  grid-row: 1;
}

.test-study-map .map-line {
  width: 100%;
}

.test-study-map strong:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
}

.test-study-map strong:nth-of-type(2) {
  grid-column: 3;
  grid-row: 2;
}

.test-study-map strong:nth-of-type(3) {
  grid-column: 5;
  grid-row: 2;
}

.test-study-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

@keyframes scanLine {
  0%, 100% {
    transform: translateX(-8%);
    opacity: .35;
  }
  50% {
    transform: translateX(8%);
    opacity: .85;
  }
}

.test-card-list {
  display: grid;
  gap: 12px;
}

.test-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(120deg, rgba(127, 221, 255, .075), transparent 42%),
    rgba(255, 255, 255, .045);
}

.test-list-card.practice-status-new {
  border-color: rgba(127, 221, 255, .26);
}

.test-list-card.practice-status-retry {
  border-color: rgba(250, 210, 116, .34);
}

.test-list-card.practice-status-mastered {
  border-color: rgba(154, 240, 179, .32);
}

.test-list-card.completed {
  background:
    linear-gradient(120deg, rgba(154, 240, 179, .08), transparent 44%),
    rgba(255, 255, 255, .04);
}

.test-entry-meta,
.test-entry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 13px;
}

.test-entry-meta {
  margin-bottom: 6px;
}

.practice-status-pill {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 8px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 999px;
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  background: rgba(154, 240, 179, .075);
}

.practice-status-retry .practice-status-pill {
  border-color: rgba(250, 210, 116, .28);
  color: #f7df9d;
  background: rgba(250, 210, 116, .075);
}

.practice-status-new .practice-status-pill {
  border-color: rgba(127, 221, 255, .24);
  color: #a6e8ff;
  background: rgba(127, 221, 255, .07);
}

.high-score-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(250, 210, 116, .3);
  border-radius: 999px;
  color: #f7df9d;
  background: rgba(250, 210, 116, .08);
}

.high-score-badge span {
  display: inline-grid;
  min-width: 34px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  color: #071321;
  font-size: 12px;
  font-weight: 950;
  background: linear-gradient(135deg, #f5cf67, #9af0b3);
}

.high-score-badge strong {
  overflow-wrap: anywhere;
}

.high-score-badge.empty {
  border-color: rgba(132, 205, 255, .18);
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
}

.paper-high-score {
  margin-top: 12px;
}

.report-high-score {
  margin: 8px 0 14px;
}

.test-list-card h3 {
  margin: 8px 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
}

.test-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.primary-link-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 8px;
  color: #06111f;
  font-weight: 900;
  text-decoration: none;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.compose-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 10px;
  background: rgba(154, 240, 179, .06);
  color: var(--muted);
}

.compose-hint strong {
  color: var(--green);
}

.compose-challenge-panel {
  margin-top: 18px;
}

.challenge-share-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(250, 210, 116, .28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(250, 210, 116, .11), rgba(127, 221, 255, .055)),
    rgba(255, 255, 255, .035);
}

.challenge-share-card h3,
.challenge-share-card p {
  margin: 0;
}

.mini-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.challenge-share-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.test-taking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.test-taking-workspace .test-paper {
  min-width: 0;
}

.test-taking-workspace .section-head {
  align-items: flex-start;
}

.test-taking-workspace .section-head .eyebrow {
  display: none;
}

.test-taking-workspace .section-head h1 {
  font-size: clamp(32px, 4vw, 54px);
}

.test-taking-workspace .section-actions .secondary {
  padding: 10px 14px;
  color: #b9d8ef;
  font-size: 16px;
  background: rgba(255, 255, 255, .045);
}

.test-paper-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .055), rgba(154, 240, 179, .035)),
    rgba(8, 18, 32, .44);
}

.test-paper-title-block {
  min-width: 0;
}

.test-paper-title-block p {
  margin: 0 0 6px;
  color: var(--muted);
  font-weight: 700;
}

.test-paper-title-block h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
}

.test-paper-title-block .high-score-badge {
  margin-top: 10px;
}

.question-card.test-question-card {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .045), rgba(154, 240, 179, .025)),
    rgba(255, 255, 255, .035);
  border-color: rgba(151, 198, 225, .22);
  box-shadow: 0 18px 36px rgba(2, 11, 22, .18);
}

.test-question-card .question-title-row h3 {
  color: var(--text);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.55;
}

.test-question-card .question-score-badge {
  color: #f5e692;
  background: rgba(250, 210, 116, .10);
  border-color: rgba(250, 210, 116, .28);
}

.test-question-card .question-image {
  max-width: 100%;
  background: #fff;
  border-radius: 8px;
}

.question-hint-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 10px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 999px;
  background: rgba(154, 240, 179, .08);
}

.test-question-card .question-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.test-question-card .option-label {
  min-height: 48px;
  color: var(--text);
  background: rgba(8, 18, 32, .52);
  border-color: rgba(151, 198, 225, .22);
}

.test-question-card .option-label:hover {
  border-color: rgba(127, 221, 255, .55);
  box-shadow: 0 0 0 3px rgba(113, 210, 240, .12);
}

.test-question-card .student-answer-box,
.test-question-card .student-answer-editor {
  color: var(--text);
  background: rgba(8, 18, 32, .55);
  border-color: rgba(151, 198, 225, .22);
}

.test-question-progress {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 900;
}

.test-question-progress i {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(151, 198, 225, .16);
}

.test-question-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72d4f4, #9aecbc);
}

.test-taking-workspace .motion-bars,
.test-taking-workspace .page-motion,
.test-taking-workspace .paper-visual,
.test-taking-workspace .practice-visual,
.test-taking-workspace .test-paper-visual {
  display: none !important;
}

.test-submit-bar {
  position: sticky;
  right: 0;
  bottom: 16px;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(8, 18, 32, 0), rgba(8, 18, 32, .86));
  backdrop-filter: blur(10px);
}

.test-submit-bar button {
  min-width: 160px;
}

@media (max-width: 900px) {
  .test-paper-compact-head {
    align-items: flex-start;
  }

  .test-question-card .question-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .test-taking-workspace .section-head {
    gap: 12px;
  }

  .test-taking-workspace .section-actions {
    width: 100%;
  }

  .test-taking-workspace .section-actions .secondary {
    width: 100%;
    text-align: center;
  }

  .test-paper-compact-head {
    flex-direction: column;
  }

  .test-paper-compact-head .timer-badge {
    width: 100%;
  }

  .test-question-progress {
    grid-template-columns: 1fr;
  }

  .test-submit-bar {
    justify-content: stretch;
    padding: 10px 0 0;
    background: rgba(8, 18, 32, .86);
  }

  .test-submit-bar button {
    width: 100%;
  }
}

.test-report-panel {
  position: static;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.ppt-answer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(127, 221, 255, .22);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .07), rgba(154, 240, 179, .035)),
    rgba(255, 255, 255, .035);
}

.ppt-viewer-card,
.ppt-answer-note {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 17, 31, .55);
}

.ppt-viewer-card {
  padding: 14px;
}

.ppt-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ppt-frame {
  display: block;
  width: 100%;
  min-height: 460px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #07111f;
}

.ppt-frame iframe {
  width: 100%;
  min-height: 460px;
  border: 0;
}

.ppt-answer-note {
  padding: 16px;
  color: var(--muted);
}

.ppt-answer-note strong {
  color: var(--green);
  font-size: 18px;
}

.nw-paper-head {
  align-items: center;
}

.nw-player {
  border: 1px solid rgba(125, 213, 255, .22);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(24, 39, 58, .96), rgba(12, 23, 37, .96));
  padding: 18px;
  overflow: hidden;
}

.nw-progress-track,
.nw-time-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.nw-progress-track span,
.nw-time-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #72d4f4, #9aecbc);
  transition: width 240ms ease;
}

.nw-question-slide {
  margin-top: 18px;
  animation: nwSlideIn 360ms cubic-bezier(.22, 1, .36, 1);
}

.nw-question-slide.slide-prev {
  animation-name: nwSlideInPrev;
}

.nw-question-top,
.nw-time-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.nw-time-row {
  margin: 18px 0;
}

.nw-time-row .nw-time-track {
  flex: 1;
}

.nw-time-row strong {
  min-width: 54px;
  color: #9aecbc;
  text-align: right;
}

.wrong-translation {
  color: #9aecbc;
  border-left: 3px solid rgba(154, 236, 188, .7);
  padding-left: 10px;
}

@keyframes nwSlideIn {
  from { opacity: 0; transform: translateX(44px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes nwSlideInPrev {
  from { opacity: 0; transform: translateX(-44px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.compose-panel {
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .06), rgba(148, 236, 181, .025)),
    rgba(13, 28, 48, .72);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}

.learn-list-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 88px;
  padding: 18px 20px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .075), rgba(148, 236, 181, .035)),
    rgba(13, 28, 48, .72);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.learn-list-card:hover {
  transform: translateY(-2px);
  border-color: rgba(137, 231, 190, .45);
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .12), rgba(148, 236, 181, .07)),
    rgba(13, 28, 48, .88);
}

.learn-card-main {
  display: grid;
  gap: 6px;
}

.learn-card-main strong {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
}

.learn-card-main small,
.learn-card-unit {
  color: var(--muted);
}

.learn-card-main p {
  margin: 0;
  max-width: 860px;
  color: var(--muted);
  line-height: 1.65;
}

.learning-content {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(127, 221, 255, .045);
}

.learning-content strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
}

.learning-content p {
  margin: 0;
  line-height: 1.75;
}

.learning-course-admin {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.course-unit-admin-grid,
.course-unit-admin-card,
.learning-course-flow,
.learning-course-units {
  display: grid;
  gap: 16px;
}

.course-unit-admin-card {
  padding: 16px;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 10px;
  background: rgba(7, 18, 33, .38);
}

.course-unit-admin-card h4 {
  margin: 0;
  font-size: 22px;
}

.course-unit-admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.learning-course-editor {
  min-height: 96px;
}

.learning-course-flow {
  padding: 22px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 10%, rgba(154, 240, 179, .11), transparent 32%),
    rgba(7, 18, 33, .36);
}

.admin-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(3, 10, 20, .72);
  backdrop-filter: blur(12px);
}

.admin-preview-card {
  width: min(980px, 100%);
  max-height: min(88vh, 980px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(132, 205, 255, .26);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 8%, rgba(154, 240, 179, .12), transparent 30%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(148, 236, 181, .035)),
    #101c2e;
  box-shadow: 0 28px 88px rgba(0, 0, 0, .42);
  overflow: hidden;
}

.admin-preview-card.wide {
  width: min(1380px, 100%);
}

.admin-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(132, 205, 255, .16);
  background: rgba(255, 255, 255, .035);
}

.admin-preview-head h2 {
  margin: 2px 0 0;
  font-size: clamp(24px, 2.4vw, 34px);
}

.admin-preview-body {
  min-height: 0;
  padding: 22px;
  overflow: auto;
}

.admin-preview-meta,
.admin-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-preview-meta span,
.admin-preview-badges span {
  padding: 7px 11px;
  border: 1px solid rgba(154, 240, 179, .28);
  border-radius: 999px;
  color: var(--green);
  background: rgba(154, 240, 179, .08);
  font-weight: 800;
}

.admin-preview-learning {
  display: grid;
  gap: 18px;
}

.admin-preview-steps button {
  cursor: default;
}

.admin-preview-resource-viewer {
  margin-top: 12px;
}

.admin-preview-frame-box {
  --animation-height: 420px;
}

.admin-preview-practice {
  margin-top: -2px;
}

.admin-preview-answer-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.admin-preview-answer-box small {
  color: var(--green);
  font-weight: 800;
}

.admin-preview-test-paper {
  display: grid;
  gap: 14px;
}

.admin-preview-question .question-options,
.admin-preview-question .student-answer-box {
  margin-top: 14px;
}

.admin-preview-answer {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(7, 18, 33, .38);
}

.admin-preview-answer summary {
  color: var(--green);
  font-weight: 900;
  cursor: pointer;
}

.admin-preview-answer p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.admin-preview-answer strong {
  color: var(--text);
}

.learning-course-flow.animation-active {
  background:
    radial-gradient(circle at 82% 10%, rgba(154, 240, 179, .08), transparent 32%),
    rgba(23, 34, 54, .96);
}

.learning-course-flow.animation-active .learning-course-steps {
  display: none;
}

.learning-course-flow.animation-active .learning-course-route-drawer .learning-course-steps {
  display: grid;
}

.learning-course-head,
.learning-test-nudge,
.course-practice-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}

.learning-course-head {
  position: relative;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 4px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(132, 229, 255, .13), transparent 36%) left bottom / 100% 1px no-repeat;
}

.learning-course-title-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.learning-course-head h3,
.learning-method-summary h3 {
  margin: 0;
  font-size: clamp(24px, 2.25vw, 34px);
  line-height: 1.12;
  white-space: normal;
}

.learning-course-title-meta {
  color: rgba(154, 240, 179, .82);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.learning-course-head p,
.learning-course-intro p,
.learning-test-nudge p,
.course-unit-title p,
.course-scaffold-step p,
.course-scaffold-step small {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

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

.learning-course-now {
  --step-a: var(--cyan);
  --step-b: var(--green);
  --step-rgb: 132, 229, 255;
  border: 1px solid rgba(var(--step-rgb), .32);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 50%, rgba(var(--step-rgb), .15), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  overflow: hidden;
}

.learning-course-now.step-intro {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 131, 229, 255;
}

.learning-course-now.step-example {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-now.step-practice {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-now.step-summary {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-now.step-test {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-now summary small {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.course-now-main,
.course-now-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.course-now-main {
  flex: 0 1 300px;
  max-width: 46%;
}

.course-now-station {
  display: inline-block;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid rgba(var(--step-rgb), .22);
  border-radius: 999px;
  color: var(--step-b);
  background: rgba(var(--step-rgb), .075);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-now-main strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-now-progress {
  position: relative;
  flex: 1 1 260px;
  min-width: 160px;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(132,229,255,.1), rgba(154,240,179,.06)),
    rgba(4, 13, 26, .46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 8px 18px rgba(255, 255, 255, .035),
    0 10px 22px rgba(0, 0, 0, .14);
}

.course-now-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(90deg, #83e5ff, #9af0b8);
  box-shadow: 0 0 18px rgba(var(--step-rgb), .34);
  min-width: 0;
}

.course-now-meta {
  margin-left: auto;
  flex: 0 0 auto;
}

.learning-course-route-drawer {
  width: 100%;
}

.learning-course-route-drawer summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 46px;
  padding: 10px 14px;
  color: var(--green);
  cursor: pointer;
  list-style: none;
  font-weight: 950;
}

.learning-course-route-drawer summary::-webkit-details-marker {
  display: none;
}

.learning-course-route-drawer summary::after {
  content: "+";
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.learning-course-route-drawer[open] summary::after {
  content: "-";
}

.learning-course-route-drawer summary em {
  color: rgba(154, 240, 179, .84);
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.learning-course-route-drawer[open] {
  padding-bottom: 12px;
  background:
    radial-gradient(circle at 10% 0%, rgba(154, 240, 179, .08), transparent 35%),
    rgba(255,255,255,.03);
}

.learning-course-steps.compact-route {
  padding: 2px 12px 4px;
  gap: 8px;
}

.learning-course-steps button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 900;
  background: rgba(255,255,255,.035);
  text-align: left;
  cursor: not-allowed;
  --step-a: var(--cyan);
  --step-b: var(--green);
  --step-rgb: 132, 229, 255;
}

.learning-course-steps button.step-intro {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 131, 229, 255;
}

.learning-course-steps button.step-example {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-steps button.step-practice {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-steps button.step-summary {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-steps button.step-test {
  --step-a: #83e5ff;
  --step-b: #9af0b8;
  --step-rgb: 132, 229, 255;
}

.learning-course-steps button.done {
  border-color: rgba(var(--step-rgb), .5);
  color: var(--step-a);
  cursor: pointer;
  background:
    radial-gradient(circle at 18% 50%, rgba(var(--step-rgb), .13), transparent 34%),
    rgba(255, 255, 255, .045);
}

.learning-course-steps button.active,
.learning-course-steps button.progress {
  border-color: rgba(var(--step-rgb), .68);
  box-shadow: 0 0 0 1px rgba(var(--step-rgb), .18) inset, 0 0 22px rgba(var(--step-rgb), .12);
}

.learning-course-steps button.progress:not(.active) {
  color: var(--text);
  cursor: pointer;
  background:
    radial-gradient(circle at 18% 50%, rgba(var(--step-rgb), .14), transparent 32%),
    rgba(255, 255, 255, .05);
}

.learning-course-steps button.locked {
  opacity: .55;
}

.learning-course-steps button.locked b,
.learning-course-steps button:disabled b {
  color: rgba(226, 237, 249, .58);
  background: rgba(132, 205, 255, .18);
}

.learning-course-steps button.done b,
.learning-course-steps button.active b,
.learning-course-steps button.progress b {
  color: #06111f;
  background: linear-gradient(135deg, var(--step-a), var(--step-b));
}

.learning-course-steps button.just-completed {
  animation: courseStepCelebrate 900ms ease-out both;
}

.learning-course-steps button.just-completed b {
  animation: courseStepBadgePop 900ms ease-out both;
}

.learning-course-steps button.just-completed span::after {
  content: " 已完成";
  margin-left: 8px;
  color: var(--step-a);
  font-size: .78em;
  font-weight: 950;
  opacity: 0;
  animation: courseStepTextCheer 900ms ease-out both;
}

.learning-course-steps button:disabled {
  pointer-events: none;
}

.course-achievement-feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(78, 190, 154, .34);
  border-radius: 10px;
  color: #176f5b;
  background:
    radial-gradient(circle at 8% 50%, rgba(114, 216, 188, .2), transparent 34%),
    linear-gradient(135deg, rgba(236, 252, 246, .96), rgba(247, 252, 255, .9));
  animation: courseAchievementSlide 720ms ease-out both;
}

.course-achievement-feedback.reward-pop {
  position: relative;
  overflow: hidden;
  border-color: rgba(78, 190, 154, .42);
  box-shadow: 0 14px 30px rgba(63, 150, 132, .1), inset 0 0 18px rgba(132, 229, 255, .06);
}

.course-achievement-feedback.reward-pop::after {
  content: "";
  position: absolute;
  inset: -80% -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
  transform: translateX(-65%);
  animation: courseRewardSweep 1100ms ease-out both;
  pointer-events: none;
}

.course-achievement-feedback span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  flex: 0 0 auto;
}

.course-achievement-feedback svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-achievement-feedback strong {
  font-size: 15px;
  line-height: 1.45;
  position: relative;
  z-index: 1;
  font-weight: 900;
}

.learning-course-steps b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #06111f;
  background: linear-gradient(135deg, var(--step-a), var(--step-b));
}

.learning-course-steps b svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes courseStepCelebrate {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(127, 221, 255, 0);
  }
  34% {
    transform: translateY(-2px) scale(1.025);
    box-shadow: 0 0 0 1px rgba(132, 229, 255, .28) inset, 0 0 26px rgba(154, 240, 179, .28);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(132, 229, 255, .12) inset;
  }
}

@keyframes courseStepBadgePop {
  0% { transform: scale(.88); }
  38% { transform: scale(1.18); }
  64% { transform: scale(.98); }
  100% { transform: scale(1); }
}

@keyframes courseStepTextCheer {
  0% {
    opacity: 0;
    transform: translateX(-4px);
  }
  28%, 72% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(4px);
  }
}

@keyframes courseAchievementSlide {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes courseRewardSweep {
  0% {
    transform: translateX(-65%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    transform: translateX(65%);
    opacity: 0;
  }
}

.learning-course-intro,
.learning-method-summary,
.learning-course-unit,
.course-practice-box,
.course-scaffold {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 12%, rgba(132, 229, 255, .055), transparent 30%),
    rgba(255, 255, 255, .028);
}

.learning-course-stage {
  display: grid;
  gap: 14px;
}

.course-progress-pill {
  padding: 8px 12px;
  border: 1px solid rgba(154, 240, 179, .28);
  border-radius: 999px;
  color: var(--green);
  font-weight: 950;
  background: rgba(154, 240, 179, .07);
}

.course-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.learning-course-back {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(132, 229, 255, .86);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
}

.learning-course-back::before {
  content: "←";
  margin-right: 6px;
}

.learning-course-back:hover {
  color: var(--green);
  background: transparent;
}

.course-restart-button {
  min-height: 42px;
  padding: 0 16px;
}

.course-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.course-step-actions button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #06111f;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.learning-course-intro {
  grid-template-columns: 1fr;
  align-items: center;
}

.learning-course-intro.has-inline-animation {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.learning-course-intro-card .course-unit-title {
  max-width: 980px;
}

.compact-course-map {
  padding-top: 0;
}

.compact-course-map .intro-resource-viewer {
  margin-top: 0;
}

.intro-resource-viewer {
  margin-top: 4px;
}

.course-animation-box {
  position: relative;
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.course-inline-frame {
  display: block;
  width: 100%;
  height: var(--animation-height, clamp(240px, 28vw, 360px));
  border: 0;
  background: transparent;
}

.learning-course-intro button {
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  color: #06111f;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.course-unit-title span,
.course-scaffold-step span {
  color: var(--green);
  font-weight: 950;
}

.course-unit-title h3 {
  margin: 6px 0;
  font-size: clamp(22px, 2.35vw, 30px);
}

.course-example-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(132, 205, 255, .14);
  border-radius: 8px;
  background: rgba(7, 18, 33, .34);
}

.course-preparing-box {
  display: grid;
  place-items: center;
  min-height: clamp(180px, 24vw, 320px);
  padding: 28px;
  border: 1px dashed rgba(132, 205, 255, .22);
  border-radius: 10px;
  color: var(--muted);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  background: rgba(7, 18, 33, .28);
}

.course-resource-viewer {
  display: grid;
  gap: 12px;
}

.course-resource-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-resource-tabs,
.course-resource-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.course-resource-ask {
  flex: 0 0 auto;
  margin: 0;
}

.course-resource-ask .secondary,
.course-resource-ask .primary,
.course-resource-ask button,
.course-resource-ask a {
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.course-resource-tabs button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(132, 205, 255, .22);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  background: rgba(7, 18, 33, .38);
}

.course-resource-tabs button.active {
  color: #06111f;
  border-color: rgba(154, 240, 179, .58);
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.course-resource-pane {
  display: none;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
}

.course-resource-pane.active {
  display: block;
}

.course-inline-comic-book {
  display: grid;
  grid-template-columns: clamp(92px, 10vw, 128px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.comic-next-step-button {
  grid-column: 2;
  justify-self: end;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  color: #06111f;
  font-weight: 950;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 16px 34px rgba(127, 221, 255, .14);
}

.comic-book-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(260px, 52vw, 720px);
  perspective: 1400px;
  touch-action: pan-y;
}

.comic-book-page {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1100px);
  min-height: clamp(240px, 48vw, 640px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: left center;
}

.comic-book-page.turn-next {
  animation: comicPageTurnNext .36s ease both;
}

.comic-book-page.turn-prev {
  animation: comicPageTurnPrev .36s ease both;
}

.comic-book-page img,
.course-inline-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 0;
}

.comic-page-hit {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 38%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.comic-page-hit::after {
  content: none !important;
  display: none !important;
}

.comic-page-hit:hover {
  transform: none;
  box-shadow: none;
}

.comic-page-hit:disabled {
  cursor: default;
}

.comic-page-prev {
  left: 0;
}

.comic-page-next {
  right: 0;
}

@media (max-width: 900px) {
  .comic-reader-layout,
  .course-inline-comic-book {
    grid-template-columns: 1fr;
  }

  .comic-next-step-button {
    grid-column: 1;
    justify-self: stretch;
  }

  .comic-thumb-strip {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(86px, 1fr);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .comic-thumb {
    min-width: 86px;
  }

  .comic-book,
  .comic-book-stage {
    min-height: clamp(320px, 88vw, 720px);
  }
}

@media (max-width: 560px) {
  .comic-reader {
    gap: 12px;
  }

  .comic-thumb-strip {
    grid-auto-columns: 76px;
  }

  .comic-thumb {
    min-width: 76px;
    padding: 3px;
  }

  .comic-thumb span {
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
  }

  .comic-book img,
  .comic-book-page img {
    max-height: 76vh;
  }

}

@keyframes comicPageTurnNext {
  0% { transform: rotateY(0); }
  48% { transform: rotateY(-10deg) translateX(-4px); filter: brightness(.86); }
  100% { transform: rotateY(0); filter: brightness(1); }
}

@keyframes comicPageTurnPrev {
  0% { transform: rotateY(0); }
  48% { transform: rotateY(10deg) translateX(4px); filter: brightness(.86); }
  100% { transform: rotateY(0); filter: brightness(1); }
}

.course-practice-answer {
  display: grid;
  gap: 10px;
  width: min(100%, 620px);
}

.course-practice-answer .student-answer-editor {
  min-height: 48px;
}

.inline-feedback-button {
  margin-left: 10px;
  min-height: 36px;
  padding: 0 12px;
}

.course-resource-admin,
.course-resource-panel,
.course-scaffold-admin {
  display: grid;
  gap: 12px;
}

.course-resource-panel[hidden] {
  display: none;
}

.course-resource-panel {
  padding: 14px;
  border: 1px solid rgba(132, 205, 255, .16);
  border-radius: 8px;
  background: rgba(7, 18, 33, .28);
}

.course-resource-panel-head,
.course-scaffold-admin-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.course-resource-panel-head {
  justify-content: space-between;
  align-items: center;
}

.course-scaffold-admin-row label {
  flex: 1 1 240px;
}

.compact-course-toolbar {
  margin-bottom: -8px;
}

.course-example-box img,
.course-practice-stem img {
  max-width: min(100%, 560px);
  border-radius: 8px;
}

.course-practice-head {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}

.course-practice-head strong {
  color: var(--text);
}

.course-practice-stem {
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 850;
  line-height: 1.75;
}

.course-practice-options,
.course-practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.course-practice-options button,
.course-practice-options input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(132, 205, 255, .22);
  border-radius: 8px;
  color: var(--text);
  background: rgba(7, 18, 33, .46);
  font-size: 18px;
  font-weight: 900;
}

.course-practice-options button.selected {
  color: #06111f;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.course-practice-feedback {
  color: var(--muted);
  line-height: 1.6;
}

.course-practice-feedback.right {
  color: var(--green);
  font-weight: 900;
}

.course-scaffold-step {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(154, 240, 179, .16);
  border-radius: 8px;
  background: rgba(154, 240, 179, .05);
}

.course-scaffold-step em {
  display: inline-flex;
  margin: 0 8px 8px 0;
  padding: 6px 10px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 999px;
  font-style: normal;
}

.learn-home-panel {
  display: grid;
  gap: 18px;
  min-height: auto;
  padding: 22px;
  text-align: left;
  border: 1px solid rgba(132, 205, 255, .2);
  background:
    radial-gradient(circle at 24% 12%, rgba(127, 221, 255, .14), transparent 28%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(148, 236, 181, .035)),
    rgba(13, 28, 48, .72);
}

.learn-home-dashboard {
  display: grid;
  gap: 18px;
}

.learn-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
  grid-template-areas:
    "copy map"
    "status status";
  gap: 14px 24px;
  align-items: center;
}

.learn-home-copy {
  grid-area: copy;
  display: grid;
  gap: 8px;
}

.learn-home-copy h2 {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.18;
}

.learn-home-copy p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.65;
}

.learn-home-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.learn-home-actions .primary-link-button {
  text-align: center;
}

.learn-home-map {
  grid-area: map;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 7px 8px;
  align-items: center;
  min-height: 70px;
  align-self: end;
  padding: 10px 18px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background:
    linear-gradient(rgba(132, 205, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 205, 255, .07) 1px, transparent 1px),
    rgba(255, 255, 255, .025);
  background-size: 28px 28px;
}

.learn-home-status-row {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.learn-home-status-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 9px 13px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}

.learn-home-status-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.learn-home-status-card strong {
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.learn-home-status-card.clickable:hover {
  border-color: rgba(154, 240, 179, .42);
  background: rgba(154, 240, 179, .07);
}

.map-dot {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(148, 236, 181, .85);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(148, 236, 181, .32);
}

.map-dot.active {
  background: linear-gradient(135deg, #ffe98c, #baf0a3);
  border-color: rgba(255, 233, 140, .92);
  box-shadow: 0 0 18px rgba(255, 211, 106, .3);
}

.map-dot:nth-of-type(3) {
  border-color: rgba(127, 221, 255, .9);
  box-shadow: 0 0 16px rgba(127, 221, 255, .22);
}

.map-dot:nth-of-type(5) {
  border-color: rgba(154, 240, 179, .9);
  box-shadow: 0 0 16px rgba(154, 240, 179, .22);
}

.map-line {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(127, 221, 255, .85), rgba(148, 236, 181, .75));
}

.learn-home-map strong {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.learn-home-map strong:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
}

.learn-home-map strong:nth-of-type(2) {
  grid-column: 3;
  grid-row: 2;
}

.learn-home-map strong:nth-of-type(3) {
  grid-column: 5;
  grid-row: 2;
}

.learn-grade-suggestion {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 8px;
  background: rgba(154, 240, 179, .06);
}

.learn-grade-suggestion div:first-child {
  display: grid;
  gap: 6px;
}

.learn-grade-suggestion span {
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.learn-home-section-head span {
  color: rgba(191, 211, 229, .74);
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.learn-grade-suggestion strong {
  color: var(--text);
  font-size: 18px;
}

.learn-grade-suggestion p {
  margin: 0;
  color: var(--muted);
}

.learn-grade-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.learn-home-section {
  display: grid;
  gap: 14px;
}

.learn-home-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.learn-home-section-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  font-size: clamp(22px, 2.3vw, 30px);
}

.learn-path-spark {
  position: relative;
  width: 52px;
  height: 12px;
  display: inline-block;
  background: linear-gradient(90deg, rgba(127, 221, 255, .9), rgba(127, 221, 255, .62)) 50% 50% / 16px 6px no-repeat;
  animation: learnPathSpark 2.1s ease-in-out infinite .35s;
}

.learn-path-spark::before,
.learn-path-spark::after,
.learn-path-spark {
  border-radius: 999px;
}

.learn-path-spark::before,
.learn-path-spark::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 14px;
  height: 6px;
  background: rgba(127, 221, 255, .46);
  box-shadow: 0 0 10px rgba(127, 221, 255, .14);
  animation: learnPathSpark 2.1s ease-in-out infinite;
}

.learn-path-spark::before {
  left: 0;
  background: rgba(255, 211, 106, .9);
  animation-delay: 0s;
}

.learn-path-spark::after {
  right: 0;
  background: rgba(154, 240, 179, .86);
  animation-delay: .7s;
}

@keyframes learnPathSpark {
  0% {
    opacity: .42;
    transform: translateY(0);
  }
  45% {
    opacity: 1;
    transform: translateY(-1px);
  }
  100% {
    opacity: .42;
    transform: translateY(0);
  }
}

.learn-home-section-head p {
  margin: 0;
  color: var(--muted);
}

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

.learn-map-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 14px;
  align-items: center;
  min-height: 104px;
  padding: 18px 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(127, 221, 255, .28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 8%, rgba(127, 221, 255, .12), transparent 34%),
    rgba(127, 221, 255, .04);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.learn-map-card:hover {
  transform: translateY(-2px);
  border-color: rgba(127, 221, 255, .38);
  background: rgba(127, 221, 255, .055);
}

.learn-map-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #061421;
  border-radius: 999px;
  background: linear-gradient(135deg, #7fddff, #b7f2df);
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
}

.learn-map-card strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  min-height: 0;
  padding-right: 82px;
  font-size: clamp(18px, 1.35vw, 22px);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.learn-map-card small {
  position: absolute;
  right: 14px;
  top: 14px;
  display: inline-flex;
  min-height: 0;
  max-width: calc(100% - 110px);
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(190, 235, 255, .9);
  background: rgba(127, 221, 255, .09);
  border: 1px solid rgba(127, 221, 255, .18);
  line-height: 1;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.learn-map-card.done small::before {
  content: "✓";
  margin-right: 4px;
  font-weight: 900;
}

.learn-map-card.active {
  border-color: rgba(127, 221, 255, .48);
  background:
    radial-gradient(circle at 13% 12%, rgba(127, 221, 255, .18), transparent 38%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 179, .04)),
    rgba(127, 221, 255, .045);
}

.learn-map-card.active span {
  background: linear-gradient(135deg, #8fe9ff, #b7f2df);
}

.learn-map-card.active small {
  color: #d8fbff;
  background: rgba(127, 221, 255, .13);
  border-color: rgba(127, 221, 255, .28);
}

.learn-map-card.current {
  border-color: rgba(255, 211, 106, .62);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 211, 106, .2), transparent 40%),
    linear-gradient(135deg, rgba(255, 211, 106, .12), rgba(154, 240, 179, .055)),
    rgba(255, 255, 255, .038);
  box-shadow: inset 0 0 34px rgba(255, 211, 106, .08);
}

.learn-map-card.current span {
  background: linear-gradient(135deg, #ffe98c, #baf0a3);
}

.learn-map-card.current small {
  color: #09131d;
  background: linear-gradient(135deg, #ffe98c, #baf0a3);
  border-color: rgba(255, 233, 140, .38);
}

.learn-map-card.review {
  border-color: rgba(255, 211, 106, .26);
  background: rgba(255, 211, 106, .045);
}

.learn-map-card.done {
  border-color: rgba(154, 240, 179, .42);
  background:
    radial-gradient(circle at 12% 8%, rgba(154, 240, 179, .16), transparent 36%),
    rgba(154, 240, 179, .06);
}

.learn-map-card.done span {
  background: linear-gradient(135deg, #9af0b3, #74d6ff);
}

.learn-map-card.done span::before {
  content: "✓";
  font-size: 22px;
  line-height: 1;
}

.learn-map-card.done span {
  font-size: 0;
}

.learn-map-card.done small {
  color: rgba(202, 255, 220, .94);
  background: rgba(154, 240, 179, .1);
  border-color: rgba(154, 240, 179, .22);
}

.learn-map-card.locked {
  opacity: .58;
}

.learn-map-card.locked span {
  background: rgba(132, 205, 255, .22);
  color: var(--muted);
}

.learn-map-card.compact {
  min-height: 70px;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.learn-map-card.compact span {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.learn-map-card.compact strong {
  display: block;
  overflow: visible;
  min-height: 0;
  padding-right: 0;
  font-size: 16px;
  line-height: 1.35;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.learn-map-card.compact small {
  position: static;
  max-width: none;
  padding: 4px 9px;
  font-size: 12px;
  justify-self: end;
  white-space: nowrap;
}

.learn-all-map {
  margin-top: 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color .18s ease, background .18s ease, padding .18s ease;
}

.learn-all-map[open] {
  padding: 10px;
  border-color: rgba(132, 205, 255, .18);
  background:
    radial-gradient(circle at 92% 12%, rgba(127, 221, 255, .09), transparent 28%),
    rgba(255, 255, 255, .025);
}

.learn-all-map summary {
  cursor: pointer;
  padding: 4px 2px;
  color: rgba(154, 240, 179, .86);
  font-weight: 800;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.learn-all-map summary::-webkit-details-marker {
  display: none;
}

.learn-all-map summary::before {
  content: "";
  display: none;
}

.learn-all-map summary::after {
  content: "+";
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(139, 232, 197, 0.08);
  border: 1px solid rgba(139, 232, 197, 0.22);
  color: rgba(154, 240, 179, .88);
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

.learn-all-map[open] summary::after {
  content: "-";
}

.learn-map-grid-compact {
  max-height: min(52vh, 500px);
  margin-top: 10px;
  padding: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  overflow: auto;
  border-top: 1px solid rgba(132, 205, 255, .14);
  scrollbar-color: rgba(154, 240, 179, .45) rgba(255, 255, 255, .06);
  scrollbar-width: thin;
}

body:not([data-page="admin"]) .learn-map-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.learn-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.learn-mini-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.learn-mini-card:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 236, 181, .45);
  background: rgba(148, 236, 181, .06);
}

.learn-mini-card span {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
}

.learn-mini-card strong {
  font-size: 18px;
  line-height: 1.35;
}

.learn-mini-card small {
  color: var(--muted);
}

.learning-path-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(127, 221, 255, .06), rgba(148, 236, 181, .035)),
    rgba(13, 28, 48, .66);
}

.learning-path-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.learning-path-head h3 {
  margin: 6px 0;
  font-size: clamp(22px, 2.3vw, 30px);
}

.learning-path-head p {
  margin: 0;
  color: var(--muted);
}

.learning-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.learning-resource-grid a,
.learning-resource-grid button {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 16px;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  border: 1px solid rgba(132, 205, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.learning-resource-grid span {
  color: var(--muted);
  font-size: 14px;
}

.compact-learn-card {
  min-height: 76px;
}

.slim-empty {
  min-height: auto;
  padding: 18px;
}

.learn-card-unit {
  font-size: 13px;
}

.learn-card-tags {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.learn-card-tags span {
  padding: 7px 10px;
  color: var(--green);
  border: 1px solid rgba(148, 236, 181, .26);
  border-radius: 999px;
  background: rgba(148, 236, 181, .07);
  font-size: 13px;
}

.compose-panel h3,
.compose-panel p {
  margin-top: 0;
}

.compose-panel h3 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2vw, 28px);
}

.compose-panel p {
  max-width: 760px;
  color: var(--muted);
}

.compose-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.6fr) minmax(120px, 0.42fr) auto;
  gap: 14px;
  align-items: end;
  margin-top: 16px;
}

.compose-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  max-height: 340px;
  overflow: auto;
  margin-top: 18px;
  padding-right: 6px;
}

.compose-chapters label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .028);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.compose-chapters label:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 236, 181, .42);
  background: rgba(148, 236, 181, .055);
}

.compose-chapters input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.compose-chapters span {
  color: var(--text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.media-preview {
  margin: 10px 0 20px;
}

.media-preview video {
  width: min(520px, 100%);
  max-height: 300px;
  display: block;
  border: 1px solid rgba(132, 205, 255, .24);
  border-radius: 8px;
  background: #07111f;
}

.comic-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin: 10px 0 20px;
}

.comic-preview-grid figure {
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.comic-preview-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.comic-preview-grid figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.admin-list-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.icon-card {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(154, 240, 179, .28);
  border-radius: 8px;
  color: var(--green);
  background: rgba(154, 240, 179, .055);
}

.groups-panel {
  display: grid;
  gap: 18px;
}

.group-card,
.group-hero,
.group-stat-grid > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.group-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(240px, .8fr));
  gap: 16px;
}

.group-card {
  padding: 20px;
}

.group-card h2,
.group-card h3 {
  margin: 0 0 12px;
}

.group-card p {
  color: var(--muted);
  line-height: 1.7;
}

.group-welcome {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 209, 102, .16), transparent 28%),
    linear-gradient(135deg, rgba(127, 221, 255, .1), rgba(154, 240, 179, .06)),
    rgba(255, 255, 255, .04);
}

.group-welcome::after {
  content: "PK";
  position: absolute;
  right: 22px;
  bottom: 10px;
  color: rgba(154, 240, 179, .1);
  font-size: 96px;
  font-weight: 950;
  line-height: 1;
  animation: titleBreath 4s ease-in-out infinite;
}

.group-rule-grid {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.group-rule-grid span {
  width: fit-content;
  padding: 9px 12px;
  color: var(--green);
  border: 1px solid rgba(154, 240, 179, .25);
  border-radius: 999px;
  background: rgba(154, 240, 179, .07);
  font-weight: 900;
}

.group-form {
  display: grid;
  gap: 14px;
}

.group-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  gap: 24px;
  align-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, rgba(127, 221, 255, .18), transparent 30%),
    linear-gradient(135deg, rgba(127, 221, 255, .08), rgba(154, 240, 179, .045));
}

.group-hero h2 {
  margin: 4px 0 10px;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.05;
}

.group-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.group-invite {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  padding: 10px;
  border: 1px dashed rgba(127, 221, 255, .32);
  border-radius: 8px;
  background: rgba(7, 17, 31, .42);
}

.group-invite span {
  color: var(--muted);
}

.group-invite strong {
  color: var(--green);
  letter-spacing: .04em;
}

.group-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.group-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.group-stat-grid > div {
  min-height: 124px;
  padding: 18px;
}

.group-stat-grid span,
.group-stat-grid small {
  display: block;
  color: var(--muted);
}

.group-stat-grid strong {
  display: block;
  margin: 10px 0 4px;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.group-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
  gap: 18px;
  align-items: start;
}

.group-member-grid,
.group-challenge-list,
.group-leader-list {
  display: grid;
  gap: 12px;
}

.group-member-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .36);
}

.group-member-card > b {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  color: #06111f;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
}

.group-member-card strong,
.group-member-card small {
  display: block;
}

.group-member-card small {
  margin-top: 4px;
  color: var(--muted);
}

.group-member-card ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.group-member-card li {
  min-height: 62px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .032);
  border: 1px solid rgba(132, 205, 255, .08);
}

.group-member-card li span,
.group-member-card li strong {
  display: block;
}

.group-member-card li span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.group-member-card li strong {
  margin-top: 4px;
  color: var(--green);
  font-size: 20px;
  line-height: 1.15;
}

.member-profile-trigger {
  min-height: 40px;
  padding: 0 14px;
  white-space: nowrap;
}

.member-profile-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 16, .72);
  backdrop-filter: blur(14px);
}

.member-profile-panel {
  position: relative;
  width: min(760px, 100%);
  padding: 28px;
  border: 1px solid rgba(132, 205, 255, .24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 14%, rgba(146, 236, 183, .12), transparent 30%),
    linear-gradient(145deg, rgba(25, 42, 62, .98), rgba(8, 19, 34, .98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

.member-profile-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(132, 205, 255, .25);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

.member-profile-head {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

.member-avatar {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 18px;
  color: #06111f;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: 0 0 36px rgba(120, 220, 236, .25);
}

.member-profile-head h3 {
  margin: 4px 0 6px;
  font-size: 34px;
}

.member-profile-head p:last-child {
  margin: 0;
  color: var(--muted);
}

.member-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.member-profile-stats div,
.member-profile-grid section {
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .42);
}

.member-profile-stats div {
  padding: 14px;
}

.member-profile-stats span {
  color: var(--muted);
}

.member-profile-stats strong {
  display: block;
  margin-top: 6px;
  color: var(--green);
  font-size: 26px;
}

.member-profile-grid {
  display: grid;
  gap: 12px;
}

.member-profile-grid section {
  padding: 16px;
}

.member-profile-grid strong {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
}

.member-profile-grid p {
  margin: 0;
  color: var(--muted);
}

.member-weak-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.member-weak-tags span {
  padding: 7px 12px;
  border: 1px solid rgba(146, 236, 183, .28);
  border-radius: 999px;
  color: var(--green);
  background: rgba(146, 236, 183, .08);
}

.member-encourage {
  background: linear-gradient(135deg, rgba(112, 207, 235, .1), rgba(146, 236, 183, .08)) !important;
}

.member-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.pk-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: 16px;
}

.pk-card {
  padding: 16px;
  border: 1px solid rgba(132, 205, 255, .2);
  border-radius: 8px;
  background: rgba(6, 17, 31, .38);
}

.pk-card-head,
.pk-versus,
.pk-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pk-card-head small {
  color: var(--muted);
}

.pk-versus {
  margin: 14px 0;
  color: var(--text);
  font-weight: 900;
}

.pk-versus b {
  color: var(--green);
}

.pk-score-row {
  margin-top: 9px;
}

.pk-score-row span {
  width: 46px;
  color: var(--green);
  font-weight: 950;
}

.pk-score-row i {
  flex: 1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.pk-score-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.pk-score-row.rival em {
  background: linear-gradient(90deg, #ffd166, var(--green));
}

.pk-card p {
  margin: 12px 0 0;
  color: var(--muted);
}

.group-leader-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(132, 205, 255, .18);
  border-radius: 8px;
  background: rgba(6, 17, 31, .36);
}

.group-leader-row.current {
  border-color: rgba(154, 240, 179, .48);
  background: linear-gradient(135deg, rgba(154, 240, 179, .12), rgba(127, 221, 255, .06));
}

.group-leader-row > b {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  color: #06111f;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd166, var(--green));
  box-shadow: 0 0 22px rgba(255, 209, 102, .18);
}

.group-leader-row strong,
.group-leader-row small {
  display: block;
}

.group-leader-row small {
  margin-top: 4px;
  color: var(--muted);
}

.group-leader-row > span {
  color: var(--green);
  font-size: 20px;
  font-weight: 950;
}

@keyframes routePulse {
  0%, 100% {
    stroke-dashoffset: 0;
    opacity: .72;
  }
  50% {
    stroke-dashoffset: -18;
    opacity: 1;
  }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes sparkFloat {
  0%, 100% {
    transform: translateY(0);
    opacity: .55;
  }
  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 120;
  width: max-content;
  max-width: min(460px, calc(100vw - 36px));
  padding: 16px 22px;
  color: var(--text);
  text-align: center;
  background: rgba(16, 36, 61, .96);
  border: 1px solid rgba(132, 205, 255, .38);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  pointer-events: none;
  animation: toastCenterIn .18s ease-out both;
}

@keyframes toastCenterIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.learning-feedback-mount {
  margin-top: 12px;
}

.learning-feedback-widget {
  border: 1px solid rgba(132, 229, 255, 0.14);
  background: rgba(12, 25, 42, 0.38);
  border-radius: 14px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.learning-feedback-widget.learning-feedback-collapsed {
  padding: 0;
  overflow: hidden;
}

.learning-feedback-widget.learning-feedback-lite {
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.learning-feedback-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 36px;
  padding: 0;
  color: rgba(154, 240, 179, .82);
  cursor: pointer;
  list-style: none;
}

.learning-feedback-summary::-webkit-details-marker {
  display: none;
}

.learning-feedback-summary::after {
  content: "+";
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: rgba(154, 240, 179, .82);
  background: transparent;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
}

.learning-feedback-widget[open] .learning-feedback-summary::after {
  content: "-";
}

.learning-feedback-summary strong {
  color: rgba(154, 240, 179, .84);
  font-weight: 850;
}

.learning-feedback-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.learning-feedback-summary .learning-feedback-actions {
  margin-left: auto;
}

.learning-feedback-summary .learning-feedback-open-label {
  color: rgba(154, 240, 179, .7);
  font-size: 13px;
  font-weight: 850;
}

.learning-feedback-widget.learning-feedback-collapsed .learning-feedback-head,
.learning-feedback-widget.learning-feedback-collapsed .learning-feedback-actions,
.learning-feedback-widget.learning-feedback-collapsed textarea,
.learning-feedback-widget.learning-feedback-collapsed .learning-feedback-foot {
  margin: 0 18px;
}

.learning-feedback-widget.learning-feedback-collapsed[open] {
  padding-bottom: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(154, 240, 179, .055), transparent 34%),
    rgba(12, 25, 42, .5);
}

.learning-feedback-widget.learning-feedback-lite .learning-feedback-head,
.learning-feedback-widget.learning-feedback-lite textarea,
.learning-feedback-widget.learning-feedback-lite .learning-feedback-foot {
  margin: 0;
}

.learning-feedback-widget.learning-feedback-lite[open] {
  padding: 10px 0 0;
  background: transparent;
}

.learning-feedback-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.learning-feedback-head strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
}

.learning-feedback-head span,
.learning-feedback-status,
.admin-feedback-card span,
.admin-feedback-row p,
.admin-feedback-row small,
.admin-feedback-meta {
  color: var(--muted);
}

.learning-feedback-sources,
.learning-feedback-actions,
.learning-feedback-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.learning-feedback-source,
.learning-feedback-thumb {
  border: 1px solid rgba(143, 219, 255, 0.26);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
  cursor: pointer;
}

.learning-feedback-source {
  color: rgba(238, 246, 255, 0.78);
}

.learning-feedback-thumb span {
  margin-right: 6px;
}

.learning-feedback-source.active,
.learning-feedback-thumb.active {
  background: rgba(20, 45, 68, 0.96);
  color: #eef8ff;
  border-color: rgba(154, 240, 179, 0.78);
  box-shadow: inset 0 0 0 1px rgba(154, 240, 179, 0.18), 0 10px 24px rgba(0, 0, 0, 0.16);
}

.learning-feedback-source.active {
  color: #9af0b3;
}

.learning-feedback-widget textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
}

.learning-feedback-foot {
  justify-content: space-between;
}

.learning-feedback-admin-summary {
  margin: 18px 0;
}

.admin-feedback-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.admin-feedback-card,
.admin-feedback-row {
  border: 1px solid rgba(143, 219, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 14px;
  padding: 16px;
}

.admin-feedback-card.needs-work,
.admin-feedback-row.down {
  border-color: rgba(255, 208, 112, 0.36);
}

.admin-feedback-card strong {
  display: block;
  margin: 8px 0;
}

.admin-feedback-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.admin-feedback-row.up {
  border-color: rgba(148, 236, 181, 0.24);
}

.admin-feedback-meta {
  display: grid;
  gap: 6px;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .selector-panel {
    grid-template-columns: 1fr;
  }

  body[data-test-kind="chapter"] .section-head {
    align-items: flex-start;
  }

  body[data-test-kind="chapter"] .section-head h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  body[data-test-kind="chapter"] .selector-panel {
    grid-template-columns: 1fr;
  }

  body[data-test-kind="chapter"] .section-actions a:not(#pageBackLink):not(#contextLearnLink) {
    display: none;
  }

  body[data-test-kind="chapter"] .test-recommend-head.compact {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-test-kind="chapter"] .test-list-card {
    grid-template-columns: 1fr;
  }

  body[data-test-kind="chapter"] .test-entry-actions {
    justify-content: flex-start;
  }

  .practice-catalog-controls .learn-catalog-selects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .learning-feedback-summary {
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
  }

  .learning-feedback-summary strong {
    flex: 1 1 auto;
  }

  .learning-feedback-summary .learning-feedback-actions {
    margin-left: 0;
    order: 3;
    flex: 1 1 100%;
  }

  .learning-feedback-summary .learning-feedback-thumb {
    padding: 6px 9px;
    font-size: 13px;
  }

  .learning-profile-chip {
    justify-content: flex-start;
    white-space: normal;
  }

  .learn-location-panel {
    display: grid;
    padding: 14px;
  }

  .learn-directory-toggle {
    width: 100%;
  }

  .learn-directory-controls,
  .learn-directory-grid {
    grid-template-columns: 1fr;
  }

  .learn-directory-head {
    display: grid;
  }

  .learn-directory-panel {
    padding: 14px;
  }

  .learn-catalog-controls,
  .focused-course-topbar {
    display: grid;
  }

  .learn-catalog-controls > div:first-child {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .learn-switcher {
    width: 100%;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .learn-switcher-label {
    width: fit-content;
  }

  .learn-catalog-selects {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .course-animation-box {
    position: relative;
  }

  body[data-page="learn"] {
    overflow-x: hidden;
  }

  body[data-page="learn"] .learning-course-flow,
  body[data-page="learn"] .learning-feedback-widget {
    padding: 14px;
    max-width: calc(100vw - 64px);
  }

  body[data-page="learn"] .learning-course-flow > *,
  body[data-page="learn"] .learning-course-stage > *,
  body[data-page="learn"] .course-practice-box > * {
    min-width: 0;
    max-width: 100%;
  }

  body[data-page="learn"] .learning-course-intro,
  body[data-page="learn"] .learning-method-summary,
  body[data-page="learn"] .learning-course-unit,
  body[data-page="learn"] .course-practice-box,
  body[data-page="learn"] .course-scaffold {
    padding: 14px;
  }

  .course-animation-box::before {
    content: "横屏体验更好";
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(154, 240, 179, .3);
    border-radius: 999px;
    background: rgba(7, 18, 33, .72);
    color: var(--green);
    font-size: 12px;
    font-weight: 900;
    pointer-events: none;
  }

  .learning-course-steps {
    grid-template-columns: 1fr;
  }

  .learning-course-now summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .course-now-main,
  .course-now-meta,
  .course-now-progress {
    flex: 1 1 100%;
  }

  .course-now-main {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .course-now-meta {
    margin-left: 0;
    justify-content: space-between;
  }

  .learning-course-route-drawer {
    min-width: 0;
  }

  .learning-course-route-drawer summary {
    justify-content: space-between;
  }

  .learning-course-route-drawer summary em {
    display: inline;
    font-size: 13px;
  }

  .course-resource-toolbar {
    display: grid;
    justify-content: stretch;
  }

  .course-resource-tabs {
    gap: 8px;
  }

  .course-resource-tabs button,
  .course-resource-ask .secondary,
  .course-resource-ask .primary,
  .course-resource-ask button,
  .course-resource-ask a {
    min-height: 38px;
    padding: 0 12px;
  }

  .course-resource-ask {
    justify-self: start;
  }

  .course-practice-head {
    display: grid;
  }

  .test-type-head,
  .test-recommend-head {
    display: grid;
    align-items: start;
  }

  .test-type-head h2 {
    font-size: 24px;
  }

  .test-entry-card {
    min-height: 0;
    padding: 20px;
    padding-right: 96px;
  }

  .test-entry-card strong {
    font-size: 24px;
  }

  .learning-feedback-head,
  .learning-feedback-foot,
  .admin-feedback-row {
    display: grid;
  }

  .admin-feedback-meta {
    text-align: left;
  }
}

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

@media (max-width: 980px) {
  .hero, .test-area, .ask-grid, .selector-panel, .account-login, .recharge-panel, .test-entry-grid, .test-entry-grid-primary, .test-taking-layout, .site-matrix {
    grid-template-columns: 1fr;
  }

  .admin-tabs {
    top: 84px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 8px;
  }

  .admin-tabs button {
    flex: 0 0 auto;
  }

  .admin-quick-panel {
    grid-template-columns: 1fr;
  }

  .admin-quick-actions {
    grid-template-columns: 1fr;
  }

  .test-study-main {
    grid-template-columns: 1fr;
  }

  .learning-course-head,
  .learning-test-nudge,
  .learning-course-intro {
    display: grid;
  }

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

  .ppt-answer-layout {
    grid-template-columns: 1fr;
  }

  .answer-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
    align-items: start;
  }

  body[data-page="home"] .hero {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(48px, 12vw, 72px);
    white-space: normal;
  }

  .site-matrix {
    margin-top: 0;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-grid, .wrong-book {
    grid-template-columns: 1fr;
  }

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

  .admin-insight-grid {
    grid-template-columns: 1fr;
  }

  .admin-ops-grid {
    grid-template-columns: 1fr;
  }

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

  .admin-list-filters {
    grid-template-columns: 1fr;
  }

  .evaluation-grid {
    grid-template-columns: 1fr;
  }

  .evaluation-profile-card,
  .evaluation-route-card,
  .record-columns,
  .trend-board,
  .student-task-row,
  .ai-report-chart-grid,
  .ai-report-two-columns {
    grid-template-columns: 1fr;
  }

  .account-hero-card,
  .parent-hero-card,
  .parent-grid,
  .parent-focus-grid,
  .parent-review-grid,
  .parent-secondary-grid,
  .parent-split-list,
  .account-content-grid,
  .account-group-layout,
  .account-group-detail-grid,
  .account-group-empty-content,
  .group-setup-grid,
  .group-hero,
  .group-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .account-stat-strip,
  .parent-stat-grid,
  .parent-referral-main,
  .mission-board,
  .account-group-metrics,
  .group-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .card-encounter-modal {
    grid-template-columns: 1fr;
  }

  .diagnosis-heading {
    flex-direction: column;
  }

  .evaluation-profile-card {
    align-items: flex-start;
  }

  .route-chip-list,
  .parent-route-strip {
    justify-content: flex-start;
  }

  .student-task-row em {
    justify-self: start;
    white-space: normal;
  }

  .evaluation-metric-grid,
  .diagnosis-grid,
  .ai-report-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    top: 0;
    grid-template-columns: 1fr;
    align-items: flex-start;
    margin: 8px 10px 0;
    border-radius: 14px;
  }

  .global-search {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }

  .section-actions {
    justify-content: flex-start;
  }

  .mode-switch {
    width: 100%;
  }

  .mode-switch button {
    flex: 1;
  }

  .admin-row {
    grid-template-columns: 1fr;
  }

  .nw-meta-panel {
    grid-template-columns: 1fr;
  }

  .question-options-row,
  .admin-question-item {
    grid-template-columns: 1fr;
  }

  .group-member-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .group-member-card ul,
  .member-profile-trigger {
    grid-column: 1 / -1;
  }

  .member-profile-trigger {
    width: 100%;
  }

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

@media (max-width: 620px) {
  .matrix-grid {
    grid-template-columns: 1fr;
  }

  .matrix-primary {
    grid-column: span 1;
  }

  .matrix-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .matrix-card em {
    grid-column: 2;
    justify-self: start;
  }

  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .list-toolbar {
    justify-content: flex-start;
  }

  .test-list-section {
    padding: 16px;
  }

  .test-list-section .list-toolbar {
    justify-content: flex-start;
  }

  .test-list-section .list-toolbar > span {
    width: 100%;
    margin-right: 0;
  }

  .test-list-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .test-entry-card {
    min-height: 110px;
    padding: 16px 78px 16px 16px;
  }

  .test-entry-card strong {
    font-size: 22px;
  }

  .test-entry-card p {
    margin-top: 8px;
    font-size: 14px;
  }

  .test-entry-card::after {
    width: 46px;
    height: 46px;
    right: 16px;
    top: 14px;
  }

  .test-entry-card span {
    right: 16px;
    bottom: 14px;
    width: 30px;
    height: 30px;
  }

  .page-motion {
    min-height: 112px;
    margin: 12px 0 16px;
  }

  .page-motion svg {
    height: 112px;
  }

  .page-motion-home .eval-path-visual {
    width: 100%;
    padding: 12px;
  }

  .eval-path-visual {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .eval-path-visual b {
    width: 3px;
    height: 16px;
    margin-top: 0;
    justify-self: center;
    background: linear-gradient(180deg, rgba(127, 221, 255, .88), rgba(154, 240, 179, .72));
  }

  .test-entry-actions {
    justify-content: flex-start;
  }

  .learn-list-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .learn-home-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "map"
      "status";
  }

  .learn-home-map {
    min-height: 92px;
  }

  .learn-home-status-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .learn-card-tags {
    justify-content: flex-start;
  }

  .compose-panel {
    padding: 18px;
  }

  .compose-grid {
    grid-template-columns: 1fr;
  }

  .compose-chapters {
    grid-template-columns: 1fr;
    max-height: 420px;
  }

  .challenge-share-card {
    grid-template-columns: 1fr;
  }

  .challenge-share-actions {
    justify-content: flex-start;
  }

  .home-main, .page-main {
    padding-inline: 14px;
  }

  .topbar {
    gap: 14px;
    padding: 14px;
  }

  .brand-mark {
    width: 40px;
    height: 40px;
  }

  .nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .search-box {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 8px;
  }

  .search-page-form {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 12px;
  }

  .search-box input {
    min-height: 36px;
  }

  .search-segment {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 6px;
  }

  .search-input-wrap {
    min-width: 0;
  }

  .search-submit {
    margin-left: 8px;
  }

  .search-result-grid {
    grid-template-columns: 1fr;
  }

  .nav a {
    width: 100%;
    padding: 10px 8px;
    text-align: center;
  }

  .user-pill {
    width: 100%;
    justify-self: stretch;
  }

  .simple-hero {
    padding: 36px 0 28px;
  }

  .hero-copy h1 {
    font-size: 42px;
  }

  body[data-page="home"] .hero-copy h1::after {
    left: 1.34em;
    top: -0.09em;
    width: 0.3em;
    height: 0.16em;
  }

  .lead {
    font-size: 17px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .math-widget {
    padding: 12px;
  }

  .math-widget-head {
    flex-direction: column;
  }

  .hero-actions .primary,
  .hero-actions .secondary,
  .selector-panel button,
  .account-login button,
  .ask-actions button,
  .card-actions .primary,
  .card-actions .secondary,
  .card-actions button {
    width: 100%;
  }

  .ask-control-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .ask-mode-choice,
  .ask-style-select,
  .ask-new-button {
    width: 100%;
  }

  .ask-mode-choice {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 999px;
    min-height: 52px;
  }

  .ask-style-select {
    justify-content: space-between;
    width: min(100%, 260px);
  }

  body[data-page="ask"] .ask-control-row.simplified-ask-controls {
    grid-template-columns: minmax(188px, 260px) minmax(112px, max-content);
    justify-content: space-between;
  }

  .ai-guide-header {
    flex-direction: column;
  }

  .portal-card,
  .workspace {
    padding: 16px;
  }

  .evaluation-metric-grid,
  .diagnosis-grid,
  .trend-board,
  .ai-report-overview,
  .ai-report-chart-grid,
  .ai-report-two-columns {
    grid-template-columns: 1fr;
  }

  .account-stat-strip,
  .parent-stat-grid,
  .parent-referral-main,
  .parent-referral-stats,
  .parent-grid,
  .parent-focus-grid,
  .parent-review-grid,
  .parent-secondary-grid,
  .parent-split-list,
  .mission-board,
  .account-group-metrics,
  .account-group-detail-grid,
  .account-group-empty-content,
  .badge-grid,
  .group-stat-grid,
  .group-member-card ul,
  .member-profile-stats {
    grid-template-columns: 1fr;
  }

  .member-profile-panel {
    padding: 22px 16px;
  }

  .member-profile-head {
    align-items: flex-start;
  }

  .member-profile-head h3 {
    font-size: 26px;
  }

  .group-card,
  .group-hero {
    padding: 16px;
  }

  .group-setup-grid,
  .group-dashboard-grid {
    gap: 14px;
  }

  .group-invite,
  .group-hero-actions,
  .pk-form,
  .ai-report-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .group-leader-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .group-leader-row > span {
    grid-column: 2;
  }

  .card-encounter-layer {
    padding: 14px;
  }

  .card-encounter-modal {
    padding: 18px;
  }

  .card-encounter-art {
    display: none;
  }

  .account-hero-card {
    padding: 16px;
  }

  .parent-hero-card,
  .parent-panel {
    padding: 16px;
  }

  .parent-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .parent-ability-row,
  .parent-ledger-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .account-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mission-card,
  .activity-list a {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .diagnosis-card,
  .evaluation-profile-card,
  .record-panel {
    padding: 16px;
  }

  .compact-actions {
    justify-content: flex-start;
  }

  .portal-card {
    grid-template-columns: 1fr;
    min-height: 190px;
  }

  .study-visual,
  .score-strip,
  .ability-mini,
  .ai-bubbles {
    justify-self: stretch;
    width: 100%;
  }

  .portal-card strong {
    font-size: 20px;
  }

  .portal-glyph {
    font-size: 48px;
  }

  .portal-flow {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .portal-flow i {
    width: 100%;
  }

  .workspace {
    margin-top: 18px;
  }

  .test-area {
    gap: 14px;
  }

  .paper-head,
  .recharge-panel {
    display: grid;
    grid-template-columns: 1fr;
  }

  .timer-badge {
    width: 100%;
  }

  .site-footer {
    justify-items: stretch;
  }

  .site-footer-links {
    justify-content: flex-start;
  }

  .question-card,
  .wrong-item,
  .report,
  .ask-card,
  .ai-answer {
    padding: 14px;
  }

  .scan-box {
    min-height: 160px;
  }

  .scan-box strong {
    font-size: 20px;
  }

  .ask-composer textarea {
    min-height: 220px;
    padding-right: 92px;
  }

  .image-selection-board,
  .image-selection-board img {
    max-height: 360px;
  }

  .formula-builder-fields {
    grid-template-columns: 1fr;
  }

  .formula-preview {
    width: 100%;
  }

  .payment-row,
  .payment-head,
  .code-summary,
  .code-row {
    grid-template-columns: 1fr;
  }

  .manager-layout.two-column,
  .manager-card,
  .compact-metrics,
  .student-detail-grid,
  .student-admin-tools,
  .student-admin-tool-grid,
  .admin-launch-check {
    grid-template-columns: 1fr;
  }

  .admin-config-group summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-config-group summary small {
    text-align: left;
  }

  .manager-actions {
    justify-content: flex-start;
  }
}

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

.home-plan-section {
  margin: 18px auto 0;
  max-width: 1160px;
  padding: 0 20px;
}

.math-widget.home-plan-widget {
  display: flex;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(16px, 2.3vw, 24px);
}

.home-plan-main {
  display: block;
}

.home-plan-shell {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  color: #eef8fb;
}

.home-plan-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(12px, 1.8vw, 18px);
}

.home-plan-head .eyebrow {
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.25;
}

.home-plan-head h2 {
  margin: 0;
  font-size: clamp(24px, 3.1vw, 36px);
  line-height: 1.1;
}

.home-plan-head p {
  display: none;
  margin: 0;
  color: #b9cde1;
  grid-column: 1 / -1;
}

.home-map-progress {
  position: relative;
  display: block;
  align-items: center;
  margin-bottom: 16px;
  color: #a9bfd5;
  font-size: 13px;
}

.home-map-progress strong {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  color: #9af0b3;
  font-size: 16px;
  line-height: 1;
}

.home-map-progress i {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(128, 220, 232, .24);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.home-map-progress i::before {
  content: "";
  display: block;
  width: var(--map-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9af0b3, #7fddff);
  box-shadow: 0 0 18px rgba(154,240,179,.36);
}

.home-plan-map {
  position: relative;
  display: block;
  min-height: clamp(360px, 44vw, 520px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(128, 220, 232, .24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 18, 32, .16), rgba(6, 18, 32, .56)),
    url("/assets/illustrations/treasure-map-home-clean.png") center / cover no-repeat,
    linear-gradient(145deg, rgba(12, 29, 49, .94), rgba(7, 18, 32, .86));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 52px rgba(0,0,0,.24);
}

.home-plan-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 18, 32, .3), transparent 24%, transparent 72%, rgba(6, 18, 32, .34));
  pointer-events: none;
}

.home-map-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-map-lines path {
  fill: none;
  stroke: rgba(255, 241, 174, 0);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 4 4;
  filter: drop-shadow(0 0 4px rgba(255, 212, 107, .14));
}

.home-map-lines path.is-complete {
  stroke: rgba(255, 241, 174, .95);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 7px rgba(255, 212, 107, .48));
}

.home-map-node {
  position: absolute;
  z-index: 2;
  width: clamp(118px, 15vw, 164px);
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(255, 241, 174, .46);
  border-radius: 999px;
  background: rgba(7, 18, 30, .74);
  backdrop-filter: blur(5px);
  color: #f4fbff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.24);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.home-map-node:nth-of-type(1) {
  left: 6%;
  top: 58%;
}

.home-map-node:nth-of-type(2) {
  left: 31%;
  top: 23%;
}

.home-map-node:nth-of-type(3) {
  left: 56%;
  top: 54%;
}

.home-map-node:nth-of-type(4) {
  right: 6%;
  top: 28%;
}

.home-map-node:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 241, 174, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 22px 42px rgba(0,0,0,.3), 0 0 28px rgba(255, 212, 107, .18);
}

.home-map-node.is-complete {
  border-color: rgba(154,240,179,.58);
  background: linear-gradient(145deg, rgba(22, 58, 55, .78), rgba(9, 27, 38, .76));
}

.home-map-node.is-current {
  border-color: rgba(127,221,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(127,221,255,.16), 0 0 26px rgba(127,221,255,.18);
}

.home-map-node.is-locked {
  opacity: .78;
}

.home-map-node summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 1px 8px;
  align-items: center;
  min-height: 56px;
  padding: 7px 11px 7px 8px;
  cursor: pointer;
  list-style: none;
}

.home-map-node summary::-webkit-details-marker {
  display: none;
}

.home-map-node[open] {
  z-index: 5;
  border-color: rgba(255, 241, 174, .86);
  border-radius: 999px;
}

.home-map-pin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 241, 174, .68);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 174, .24), rgba(154, 240, 179, .08));
  color: #fff1ae;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255, 212, 107, .2);
}

.home-map-node.is-current .home-map-pin {
  position: relative;
  border-color: rgba(127,221,255,.9);
  background: radial-gradient(circle, #9af0b3 0 38%, #10243c 40% 100%);
  color: transparent;
  box-shadow: 0 0 0 4px rgba(127,221,255,.16), 0 0 20px rgba(127,221,255,.42);
}

.home-map-node.is-current .home-map-pin::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(127,221,255,.72);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

.home-map-node.victory .home-map-pin {
  position: relative;
  border-color: rgba(255, 118, 118, .85);
  background: rgba(255, 74, 74, .18);
  color: transparent;
  box-shadow: 0 0 18px rgba(255, 74, 74, .24);
}

.home-map-node.victory .home-map-pin::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 7px;
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: #ffd6d6;
}

.home-map-node.victory .home-map-pin::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 7px;
  width: 14px;
  height: 10px;
  border-radius: 2px 7px 7px 2px;
  background: #ff3f3f;
  box-shadow: 0 0 10px rgba(255, 74, 74, .36);
}

.home-map-node.victory.is-complete .home-map-pin {
  background: rgba(255, 74, 74, .28);
}

.home-map-node small {
  color: #93f0c1;
  font-size: 13px;
  font-weight: 800;
}

.home-map-node summary strong {
  color: #f4fbff;
  font-size: clamp(18px, 1.65vw, 24px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.home-map-node summary em {
  grid-column: 2;
  color: #b9cde1;
  font-style: normal;
  font-size: 12px;
  line-height: 1.35;
}

.home-map-popover {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: min(270px, 76vw);
  max-height: 210px;
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255, 241, 174, .48);
  border-radius: 8px;
  background: rgba(7, 18, 32, .94);
  box-shadow: 0 20px 42px rgba(0,0,0,.34), 0 0 24px rgba(255, 212, 107, .12);
  transform: translateX(-50%);
}

.home-map-node.review .home-map-popover,
.home-map-node.test .home-map-popover {
  top: auto;
  bottom: calc(100% + 10px);
}

.home-map-node.review .home-map-popover {
  left: 0;
  transform: none;
}

.home-map-node.victory .home-map-popover {
  left: auto;
  right: 0;
  transform: none;
}

.home-map-popover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(255, 241, 174, .48);
  border-top: 1px solid rgba(255, 241, 174, .48);
  background: rgba(7, 18, 32, .94);
  transform: translateX(-50%) rotate(45deg);
}

.home-map-node.review .home-map-popover::before,
.home-map-node.test .home-map-popover::before {
  top: auto;
  bottom: -7px;
  transform: translateX(-50%) rotate(225deg);
}

.home-map-node.review .home-map-popover::before {
  left: 32px;
}

.home-map-node.victory .home-map-popover::before {
  left: auto;
  right: 42px;
}

.home-map-popover small {
  display: block;
  color: #93f0c1;
  font-size: 13px;
  font-weight: 800;
}

.home-map-popover p {
  margin: 6px 0 8px;
  color: #d8e7f2;
  font-size: 13px;
  line-height: 1.45;
}

.home-map-popover b {
  display: block;
  color: #fff1ae;
  font-size: 12px;
  font-weight: 800;
}

.home-map-popover a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #9af0b3;
  color: #0a1a2c;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.home-map-popover .task-course-reminder {
  display: grid;
  margin: 8px 0;
  padding: 8px;
}

.home-map-finish {
  position: absolute;
  right: 7%;
  top: 28%;
  z-index: 3;
  min-width: 72px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 241, 174, .56);
  border-radius: 999px;
  color: #fff1ae;
  background: rgba(9,21,36,.76);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 0 18px rgba(255, 212, 107, .18);
}

.home-map-finish.is-complete {
  color: #0b1b2c;
  border-color: rgba(154,240,179,.8);
  background: #9af0b3;
}

.home-plan-summary {
  color: #a9bfd5;
}

.task-course-reminder {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(154, 240, 179, .2);
  border-radius: 8px;
  color: #bfe6d2;
  background: rgba(154, 240, 179, .055);
  font-style: normal;
  line-height: 1.45;
}

.task-course-reminder span {
  color: #cceadd;
  font-size: 13px;
  font-weight: 700;
}

.task-course-reminder strong {
  color: #f4fbff;
  font-size: inherit;
}

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

.home-plan-summary span,
.home-plan-summary a {
  display: block;
  color: #a9bfd5;
  text-decoration: none;
  border: 1px solid rgba(128, 220, 232, 0.22);
  border-radius: 8px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}

.clickable-stat {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.clickable-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(154, 240, 179, .5);
  box-shadow: 0 14px 28px rgba(127, 221, 255, .12);
}

.home-plan-summary strong {
  color: #fff;
}

.home-plan-summary.guest-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-plan-summary.guest-summary a {
  text-align: center;
  color: #9af0b3;
  font-weight: 900;
}

.guest-home-map .home-plan-head h2 {
  font-size: clamp(22px, 3vw, 32px);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .math-widget.home-plan-widget {
    min-height: 0;
  }

  .home-plan-main {
    display: block;
  }

  .home-plan-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-plan-summary.guest-summary {
    grid-template-columns: 1fr;
  }

  .guest-home-map .home-plan-head h2 {
    font-size: clamp(18px, 5vw, 24px);
  }

  .home-plan-map {
    min-height: 780px;
    padding: 16px;
    background-position: center;
  }

  .home-map-node {
    width: calc(100% - 32px);
    min-height: 0;
  }

  .home-map-node:nth-of-type(1) {
    left: 16px;
    top: 48px;
  }

  .home-map-node:nth-of-type(2) {
    left: 16px;
    top: 220px;
  }

  .home-map-node:nth-of-type(3) {
    left: 16px;
    right: auto;
    top: 392px;
  }

  .home-map-node:nth-of-type(4) {
    left: 16px;
    right: auto;
    top: 564px;
  }

  .home-map-lines {
    display: none;
  }

  .home-map-node::after {
    content: "";
    position: absolute;
    left: 32px;
    top: 100%;
    width: 4px;
    height: 70px;
    border-radius: 999px;
    background: rgba(255, 241, 174, .18);
  }

  .home-map-node.is-complete::after {
    background: rgba(255, 241, 174, .9);
    box-shadow: 0 0 12px rgba(255, 212, 107, .45);
  }

  .home-map-node:nth-of-type(4)::after {
    display: none;
  }

  .home-map-popover {
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    width: auto;
    transform: none;
  }
}

/* Frontend device adaptation: tablet-first, then compact/mobile. */
body:not([data-page="admin"]) img,
body:not([data-page="admin"]) video,
body:not([data-page="admin"]) canvas,
body:not([data-page="admin"]) svg {
  max-width: 100%;
}

body:not([data-page="admin"]) .wrong-stem,
body:not([data-page="admin"]) .large-stem,
body:not([data-page="admin"]) .learning-content,
body:not([data-page="admin"]) .ai-answer,
body:not([data-page="admin"]) .report,
body:not([data-page="admin"]) .question-card,
body:not([data-page="admin"]) .chapter-card {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  body:not([data-page="admin"]) .test-taking-layout,
  body:not([data-page="admin"]) .ask-grid,
  body:not([data-page="admin"]) .group-setup-grid,
  body:not([data-page="admin"]) .group-dashboard-grid,
  body:not([data-page="admin"]) .account-group-layout {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .test-report-panel {
    position: static;
  }

  body:not([data-page="admin"]) .parent-stat-grid,
  body:not([data-page="admin"]) .group-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .parent-grid,
  body:not([data-page="admin"]) .parent-focus-grid,
  body:not([data-page="admin"]) .parent-review-grid,
  body:not([data-page="admin"]) .parent-secondary-grid,
  body:not([data-page="admin"]) .account-content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .evaluation-metric-grid,
  body:not([data-page="admin"]) .ai-report-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .diagnosis-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .page-motion {
    min-height: 126px;
  }

  body:not([data-page="admin"]) .page-motion-home {
    min-height: 132px;
    padding: 14px;
  }

  body:not([data-page="admin"]) .page-motion-home .motion-home-eval {
    width: min(680px, 100%);
  }

  body:not([data-page="admin"]) .eval-path-visual {
    grid-template-columns: 112px minmax(46px, .65fr) 112px minmax(46px, .65fr) 112px;
    gap: 10px;
  }

  body:not([data-page="admin"]) .learn-home-hero,
  body:not([data-page="admin"]) .test-study-main {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not([data-page="admin"]) .learn-grade-suggestion,
  body:not([data-page="admin"]) .learn-home-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  body:not([data-page="admin"]) .learn-grade-actions {
    justify-content: flex-start;
  }

  body:not([data-page="admin"]) .learning-path-head,
  body:not([data-page="admin"]) .section-head,
  body:not([data-page="admin"]) .ppt-viewer-head {
    flex-wrap: wrap;
  }

  body:not([data-page="admin"]) .ppt-frame,
  body:not([data-page="admin"]) .ppt-frame iframe {
    min-height: clamp(320px, 48vh, 460px);
  }

  body:not([data-page="admin"]) .experiment-player iframe {
    min-height: clamp(360px, 62vh, 680px);
  }

  body:not([data-page="admin"]) .collection-mini-card {
    flex-basis: clamp(178px, 26vw, 212px);
  }
}

@media (max-width: 900px) {
  body:not([data-page="admin"]) .home-main,
  body:not([data-page="admin"]) .page-main {
    padding-inline: clamp(12px, 3vw, 22px);
  }

  body:not([data-page="admin"]) .section-actions,
  body:not([data-page="admin"]) .card-actions,
  body:not([data-page="admin"]) .parent-hero-actions,
  body:not([data-page="admin"]) .group-hero-actions,
  body:not([data-page="admin"]) .challenge-share-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    width: 100%;
    justify-content: stretch;
  }

  body:not([data-page="admin"]) .section-actions > *,
  body:not([data-page="admin"]) .card-actions > *,
  body:not([data-page="admin"]) .parent-hero-actions > *,
  body:not([data-page="admin"]) .group-hero-actions > *,
  body:not([data-page="admin"]) .challenge-share-actions > * {
    width: 100%;
  }

  body:not([data-page="admin"]) .parent-stat-grid,
  body:not([data-page="admin"]) .account-stat-strip,
  body:not([data-page="admin"]) .group-stat-grid,
  body:not([data-page="admin"]) .badge-grid,
  body:not([data-page="admin"]) .mission-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .parent-focus-grid,
  body:not([data-page="admin"]) .parent-review-grid,
  body:not([data-page="admin"]) .parent-secondary-grid,
  body:not([data-page="admin"]) .parent-split-list {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .collection-mini-card {
    flex-basis: min(48vw, 196px);
  }

  .thought-card-preview-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(430px, 94vw);
    max-height: 92vh;
    overflow: auto;
    padding: 18px;
  }

  .thought-card-preview-stage {
    min-height: 260px;
  }

  .thought-card-preview-info {
    text-align: center;
  }

  .badge-preview-panel {
    grid-template-columns: 1fr;
    width: min(430px, 94vw);
    max-height: 92vh;
    overflow: auto;
    text-align: center;
  }

  .badge-preview-action {
    margin-inline: auto;
  }

  body:not([data-page="admin"]) .parent-grid,
  body:not([data-page="admin"]) .record-columns,
  body:not([data-page="admin"]) .trend-board,
  body:not([data-page="admin"]) .ai-report-chart-grid,
  body:not([data-page="admin"]) .ai-report-two-columns,
  body:not([data-page="admin"]) .account-content-grid,
  body:not([data-page="admin"]) .group-hero,
  body:not([data-page="admin"]) .ppt-answer-layout {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .diagnosis-focus-grid,
  body:not([data-page="admin"]) .diagnosis-grid {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .student-task-row {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .test-recommend-head {
    display: grid;
  }

  body:not([data-page="admin"]) .student-task-row em {
    justify-self: start;
    white-space: normal;
  }

  body:not([data-page="admin"]) .learning-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .eval-path-visual {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  body:not([data-page="admin"]) .eval-path-visual b {
    width: 3px;
    height: 16px;
    margin-top: 0;
    justify-self: center;
    background: linear-gradient(180deg, rgba(127, 221, 255, .88), rgba(154, 240, 179, .72));
  }

  body:not([data-page="admin"]) .page-motion-home .eval-path-visual {
    width: min(420px, 100%);
  }

  body:not([data-page="admin"]) .test-study-map,
  body:not([data-page="admin"]) .learn-home-map {
    min-height: 108px;
  }

  body:not([data-page="admin"]) .learn-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .ask-composer textarea {
    min-height: 180px;
  }

  body:not([data-page="admin"]) .image-selection-board,
  body:not([data-page="admin"]) .image-selection-board img {
    max-height: 320px;
  }
}

@media (max-width: 760px) {
  body:not([data-page="admin"]) .evaluation-fold {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    overflow: hidden;
  }

  body:not([data-page="admin"]) .evaluation-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 16px;
    color: var(--green);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
  }

  body:not([data-page="admin"]) .evaluation-fold > summary::-webkit-details-marker {
    display: none;
  }

  body:not([data-page="admin"]) .evaluation-fold > summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(154, 240, 179, .34);
    border-radius: 999px;
    background: rgba(154, 240, 179, .08);
  }

  body:not([data-page="admin"]) .evaluation-fold[open] > summary::after {
    content: "-";
  }

  body:not([data-page="admin"]) .evaluation-fold > .trend-board,
  body:not([data-page="admin"]) .evaluation-fold > .record-columns,
  body:not([data-page="admin"]) .evaluation-fold > .diagnosis-card {
    padding: 12px;
    border-top: 1px solid var(--line);
  }

  body:not([data-page="admin"]) .evaluation-route-card {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .evaluation-route-card h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  body:not([data-page="admin"]) .route-chip-list {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  body:not([data-page="admin"]) .learning-resource-grid,
  body:not([data-page="admin"]) .evaluation-metric-grid,
  body:not([data-page="admin"]) .ai-report-overview,
  body:not([data-page="admin"]) .parent-stat-grid,
  body:not([data-page="admin"]) .account-stat-strip,
  body:not([data-page="admin"]) .group-stat-grid,
  body:not([data-page="admin"]) .badge-grid,
  body:not([data-page="admin"]) .mission-board {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .collection-mini-card {
    flex-basis: min(72vw, 188px);
    min-height: 258px;
  }

  body:not([data-page="admin"]) .collection-card-image {
    width: min(118px, 82%);
  }

  .thought-card-preview-layer {
    padding: 12px;
  }

  .thought-card-preview-stage img {
    width: min(260px, 78vw);
  }

  .badge-preview-layer {
    padding: 12px;
  }

  .badge-preview-panel {
    padding: 18px;
  }

  body:not([data-page="admin"]) .section-actions,
  body:not([data-page="admin"]) .card-actions,
  body:not([data-page="admin"]) .learning-feedback-actions,
  body:not([data-page="admin"]) .learning-feedback-sources {
    display: grid;
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .learning-feedback-summary .learning-feedback-actions {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
  }

  body:not([data-page="admin"]) .learn-map-grid {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .learn-home-section > .learn-map-grid:not(.learn-map-grid-compact) .learn-map-card:nth-child(n+3) {
    display: none;
  }

  body:not([data-page="admin"]) .learn-grade-actions > * {
    width: 100%;
  }

  body:not([data-page="admin"]) .page-motion-home {
    min-height: auto;
  }

  body:not([data-page="admin"]) .eval-path-node strong,
  body:not([data-page="admin"]) .eval-path-node span,
  body:not([data-page="admin"]) .group-member-card li span {
    white-space: normal;
  }

  body:not([data-page="admin"]) .ppt-frame,
  body:not([data-page="admin"]) .ppt-frame iframe {
    min-height: 300px;
  }

  body:not([data-page="admin"]) .experiment-player iframe {
    min-height: 360px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  body:not([data-page="admin"]) .topbar {
    position: static;
  }

  body:not([data-page="admin"]) .page-motion {
    min-height: 88px;
    margin: 10px 0 12px;
  }

  body:not([data-page="admin"]) .page-motion-home {
    min-height: 92px;
    padding: 10px;
  }

  body:not([data-page="admin"]) .section-head h1,
  body:not([data-page="admin"]) .section-head h2 {
    font-size: clamp(34px, 6vw, 54px);
  }

  body:not([data-page="admin"]) .ask-composer textarea {
    min-height: 130px;
  }

  body:not([data-page="admin"]) .image-selection-board,
  body:not([data-page="admin"]) .image-selection-board img {
    max-height: 240px;
  }

  body:not([data-page="admin"]) .ppt-frame,
  body:not([data-page="admin"]) .ppt-frame iframe,
  body:not([data-page="admin"]) .experiment-player iframe {
    min-height: 280px;
  }
}

/* App/webview readiness: safe areas, touch targets and dense learning flows. */
@supports (padding: max(0px)) {
  body:not([data-page="admin"]) .shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (hover: none) and (pointer: coarse) {
  body:not([data-page="admin"]) a,
  body:not([data-page="admin"]) button,
  body:not([data-page="admin"]) .primary-link-button,
  body:not([data-page="admin"]) .secondary {
    min-height: 44px;
  }

  body:not([data-page="admin"]) input,
  body:not([data-page="admin"]) select,
  body:not([data-page="admin"]) textarea,
  body:not([data-page="admin"]) .student-answer-editor {
    font-size: 16px;
  }
}

@media (max-width: 1180px) {
  body:not([data-page="admin"]) .test-entry-actions,
  body:not([data-page="admin"]) .challenge-share-actions {
    justify-content: flex-start;
  }

  body:not([data-page="admin"]) .student-math-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  }

  body:not([data-page="admin"]) .student-math-toolbar button,
  body:not([data-page="admin"]) .formula-builder-actions button {
    width: 100%;
  }

  body:not([data-page="admin"]) .parent-report-view .ai-report-shell {
    max-height: none;
  }

  body:not([data-page="admin"]) .parent-diagnosis-panel {
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  body:not([data-page="admin"]) .test-taking-workspace .card-actions,
  body:not([data-page="admin"]) .nw-actions {
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 12;
    padding: 10px;
    border: 1px solid rgba(132, 205, 255, .2);
    border-radius: 10px;
    background: rgba(9, 20, 35, .94);
    backdrop-filter: blur(12px);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .22);
  }

  body:not([data-page="admin"]) .formula-builder-fields {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .formula-preview {
    width: 100%;
  }

  body:not([data-page="admin"]) .student-answer-editor {
    min-height: 72px;
  }

  body:not([data-page="admin"]) .ask-grid .scan-box {
    min-height: 170px;
  }

  body:not([data-page="admin"]) .paste-preview {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .paste-preview > img,
  body:not([data-page="admin"]) .file-preview-icon {
    width: 100%;
    height: auto;
    max-height: 180px;
  }

  body:not([data-page="admin"]) .parent-report-view .trend-card,
  body:not([data-page="admin"]) .ai-report-section,
  body:not([data-page="admin"]) .ai-parent-summary,
  body:not([data-page="admin"]) .ai-report-toolbar {
    padding: 14px;
  }
}

@media (max-width: 620px) {
  body:not([data-page="admin"]) .test-taking-workspace .card-actions,
  body:not([data-page="admin"]) .nw-actions {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .student-math-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not([data-page="admin"]) .test-study-map,
  body:not([data-page="admin"]) .learn-home-map {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  body:not([data-page="admin"]) .test-study-map .map-line,
  body:not([data-page="admin"]) .learn-home-map .map-line {
    width: 3px;
    height: 18px;
  }

  body:not([data-page="admin"]) .test-study-map strong,
  body:not([data-page="admin"]) .learn-home-map strong {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body:not([data-page="admin"]) .test-study-map .map-dot,
  body:not([data-page="admin"]) .test-study-map .map-line,
  body:not([data-page="admin"]) .learn-home-map .map-dot,
  body:not([data-page="admin"]) .learn-home-map .map-line {
    grid-row: auto;
  }

body:not([data-page="admin"]) .ask-composer textarea {
    min-height: 150px;
    padding-right: 76px;
  }

  body:not([data-page="admin"]) .parent-report-view .ai-report-metric {
    min-height: 0;
  }
}

.course-animation-box::before {
  content: none !important;
  display: none !important;
}

.study-companion {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 80;
  display: grid;
  grid-template-columns: 156px minmax(230px, 300px);
  align-items: end;
  gap: 10px;
  color: #f4fbff;
  pointer-events: none;
}

.companion-bubble {
  position: relative;
  display: block;
  width: 156px;
  height: 184px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  touch-action: none;
  filter: none;
  user-select: none;
  pointer-events: auto;
}

.companion-bubble::before,
.companion-bubble::after {
  content: none !important;
  display: none !important;
}

.companion-bubble:hover,
.companion-bubble:focus,
.companion-bubble:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.study-companion.dragging .companion-bubble {
  cursor: grabbing;
}

.study-companion.dragging .companion-head {
  cursor: grabbing;
}

.companion-bubble img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.study-companion.motion-pack .companion-bubble img {
  animation: companion-breathe 3.6s ease-in-out infinite;
  transform-origin: 50% 92%;
}

.study-companion.motion-pack:not(.dragging) .companion-bubble:hover img {
  animation: companion-cheer 0.72s ease-in-out;
}

.companion-sticker {
  position: absolute;
  z-index: 2;
  right: 2px;
  top: 16px;
  max-width: 82px;
  padding: 5px 8px;
  border: 1px solid rgba(161, 244, 196, 0.72);
  border-radius: 999px;
  background: rgba(8, 18, 32, 0.88);
  color: #a1f4c4;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
  pointer-events: none;
}

.companion-sticker.pop {
  animation: companion-sticker-pop 0.64s ease-out;
}

.companion-bubble-tip {
  position: absolute;
  z-index: 3;
  right: 104px;
  bottom: 72px;
  width: auto;
  min-width: 214px;
  max-width: min(308px, 72vw);
  display: grid;
  gap: 8px;
  padding: 11px 12px 10px;
  border: 1px solid rgba(116, 211, 192, .36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0%, rgba(125, 226, 205, .16), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 253, 249, .96));
  background-size: auto;
  color: #1f3146;
  box-shadow: 0 14px 30px rgba(31, 49, 70, .12), 0 1px 0 rgba(255, 255, 255, .9) inset;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.42;
  pointer-events: auto;
  cursor: default;
  backdrop-filter: blur(10px);
}

.companion-bubble-tip::before {
  display: none;
}

.companion-bubble-tip::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 20px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(116, 211, 192, .36);
  border-bottom: 1px solid rgba(116, 211, 192, .36);
  background: rgba(241, 253, 249, .98);
  transform: rotate(-45deg);
}

.companion-bubble-tip[hidden] {
  display: none !important;
}

.companion-tip-close {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 1px solid rgba(116, 211, 192, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: #7f94a5;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.companion-bubble-tip [data-companion-tip-text] {
  display: block;
  padding: 0 22px 0 0;
  overflow: hidden;
  color: #22354a;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.companion-tip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.companion-tip-actions a,
.companion-tip-actions button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(70, 184, 164, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #167d6d;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.companion-tip-actions button:first-child,
.companion-tip-actions a:first-child {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(65, 133, 225, .94), rgba(73, 185, 166, .94));
  color: #fff;
}

.companion-tip-actions button:hover,
.companion-tip-actions a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(31, 49, 70, .1);
}

.companion-target-highlight {
  position: relative;
  z-index: 2;
  animation: companion-target-pulse 1.2s ease-in-out 2;
}

@keyframes companion-target-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(70, 184, 164, 0);
  }
  45% {
    box-shadow: 0 0 0 8px rgba(70, 184, 164, .2), 0 16px 42px rgba(70, 184, 164, .18);
  }
}

@keyframes companion-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.025); }
}

@keyframes companion-cheer {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  34% { transform: translateY(-8px) rotate(-2deg) scale(1.04); }
  68% { transform: translateY(-2px) rotate(2deg) scale(1.02); }
}

@keyframes companion-sticker-pop {
  0% { transform: translateY(8px) scale(.84); opacity: 0; }
  42% { transform: translateY(-4px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.companion-panel {
  border: 1px solid rgba(128, 220, 232, .3);
  border-radius: 8px;
  background: rgba(7, 18, 32, .92);
  box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 24px rgba(127,221,255,.12);
  backdrop-filter: blur(12px);
  overflow: hidden;
  pointer-events: auto;
}

.companion-head {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(128,220,232,.18);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.companion-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.companion-head img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.companion-head strong {
  display: block;
  font-size: 16px;
}

.companion-head small {
  color: #9af0b3;
  font-size: 12px;
}

.companion-head button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #9af0b3;
  cursor: pointer;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

.companion-head button[data-companion-voice-toggle] {
  width: 28px;
  border: 1px solid rgba(154, 240, 179, .22);
  border-radius: 999px;
  background: rgba(154, 240, 179, .08);
  color: #8ea9bf;
  font-size: 12px;
}

.companion-head button[data-companion-voice-toggle].active {
  color: #9af0b3;
  background: rgba(154, 240, 179, .15);
}

.companion-head button:hover,
.companion-head button:focus {
  color: #b9ffd0;
  background: transparent;
  outline: 0;
  box-shadow: none;
}

.companion-panel p {
  margin: 0;
  padding: 11px 12px 8px;
  color: #d8e7f2;
  font-size: 13px;
  line-height: 1.45;
}

.companion-focus-card {
  display: grid;
  gap: 8px;
  margin: 0 10px 10px;
  padding: 10px;
  border: 1px solid rgba(154, 240, 179, .26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(154, 240, 179, .14), rgba(128, 220, 232, .08)),
    rgba(255, 255, 255, .04);
}

.companion-focus-card strong {
  display: block;
  margin-bottom: 5px;
  color: #9af0b3;
  font-size: 13px;
}

.companion-panel .companion-focus-card p {
  margin: 0;
  padding: 0;
  color: #d8e7f2;
  font-size: 12px;
  line-height: 1.5;
}

.companion-focus-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.companion-focus-actions a,
.companion-focus-actions button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(154, 240, 179, .24);
  border-radius: 999px;
  background: rgba(154, 240, 179, .14);
  color: #9af0b3;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.companion-focus-actions button {
  width: 28px;
  padding: 0;
  background: transparent;
}

.companion-task-list {
  display: grid;
  gap: 7px;
  padding: 0 10px 10px;
}

.companion-task {
  display: grid;
  grid-template-columns: 26px 44px 1fr;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(128,220,232,.18);
  border-radius: 8px;
  color: #d8e7f2;
  text-decoration: none;
  background: rgba(255,255,255,.045);
}

.companion-task span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(154,240,179,.14);
  color: #9af0b3;
  font-weight: 900;
}

.companion-task strong {
  font-size: 13px;
}

.companion-task em {
  color: #a9bfd5;
  font-size: 12px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.companion-task.done span {
  background: #9af0b3;
  color: #071523;
}

.companion-control {
  display: grid;
  gap: 7px;
  margin: 0 10px 10px;
  padding: 9px;
  border: 1px solid rgba(154,240,179,.18);
  border-radius: 9px;
  background:
    radial-gradient(circle at 88% 18%, rgba(154,240,179,.12), transparent 38%),
    rgba(154,240,179,.055);
}

.companion-control-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.companion-control-stats a,
.companion-control-stats span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(5, 16, 29, .48);
  color: #9af0b3;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.companion-control-stats a span {
  display: contents;
}

.companion-panel .companion-control p {
  margin: 0;
  padding: 0;
  color: #c8d8e7;
  font-size: 12px;
  line-height: 1.45;
}

.companion-actions {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
}

.companion-actions a {
  flex: 1;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(154,240,179,.16);
  color: #9af0b3;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.companion-actions a::after {
  content: "→";
  margin-left: 5px;
  font-size: 13px;
}

.companion-chat {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

.companion-chat-log {
  display: grid;
  gap: 7px;
  max-height: 150px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(128,220,232,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.companion-chat-message {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  color: #d8e7f2;
  background: rgba(255,255,255,.07);
  font-size: 12px;
  line-height: 1.45;
}

.companion-chat-message > span {
  display: block;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}

.companion-chat-message.student {
  display: block;
  width: fit-content;
  max-width: 86%;
  padding: 7px 9px;
  justify-self: end;
  color: #071523;
  background: #9af0b3;
}

.companion-chat-form button,
.companion-login-nudge a,
.companion-chat-action-row a {
  border: 0;
  border-radius: 999px;
  background: rgba(154,240,179,.16);
  color: #9af0b3;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.learning-feedback-summary .learning-feedback-thumb {
  padding: 6px 11px;
  color: rgba(238, 246, 255, .78);
  background: rgba(255, 255, 255, .03);
}

.companion-chat-form {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 42px;
  gap: 7px;
  align-items: center;
}

.companion-chat-form input {
  min-width: 0;
  height: 38px;
  border-radius: 999px;
  font-size: 12px;
}

.companion-chat-form button {
  min-height: 34px;
}

.companion-chat-form .companion-chat-voice {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.companion-chat-form .companion-chat-voice::before {
  left: 12px;
  top: 8px;
  width: 9px;
  height: 15px;
}

.companion-chat-form .companion-chat-voice::after {
  left: 8px;
  top: 19px;
  width: 17px;
  height: 11px;
}

.companion-chat-form .companion-chat-send {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(154,240,179,.16);
  color: #9af0b3;
  box-shadow: none;
  font-size: 0;
}

.companion-chat-form .companion-chat-send:hover,
.companion-chat-form .companion-chat-send:focus {
  background: rgba(154, 240, 179, .08);
  box-shadow: none;
}

.companion-chat-form .companion-chat-send::before {
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(-8deg);
  clip-path: polygon(0 42%, 100% 0, 62% 100%, 48% 58%);
}

.companion-chat-form .companion-chat-send::after {
  content: none;
}

.companion-speaker {
  position: static;
  width: 22px;
  min-width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: rgba(154, 240, 179, .88);
}

.companion-speaker svg {
  width: 17px;
  height: 17px;
}

.companion-speaker.speaking {
  color: #071523;
  background: #9af0b3;
  box-shadow: 0 0 0 4px rgba(154, 240, 179, .08);
}

.companion-chat small {
  color: #8ea9bf;
  font-size: 11px;
}

.companion-login-nudge {
  display: grid;
  gap: 8px;
  color: #a9bfd5;
  font-size: 12px;
  line-height: 1.5;
}

.companion-login-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.companion-login-nudge a {
  display: inline-flex;
  flex: 1 1 92px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.companion-chat-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.companion-chat-action-row a {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
}

.study-companion.minimized {
  grid-template-columns: 128px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
}

.study-companion.minimized .companion-panel {
  display: none;
}

.study-companion.minimized .companion-bubble {
  width: 128px;
  height: 150px;
}

.study-companion:not(.minimized) .companion-bubble-tip,
.study-companion.dragging .companion-bubble-tip {
  display: none;
}

@media (min-width: 721px) and (max-width: 1024px) {
  .study-companion {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    grid-template-columns: 136px minmax(220px, 280px);
    gap: 8px;
  }

  .companion-bubble {
    width: 136px;
    height: 160px;
  }
}

@media (max-width: 720px) {
  .study-companion {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: 104px minmax(0, calc(100vw - 130px));
    gap: 6px;
  }

  .companion-bubble {
    width: 104px;
    height: 122px;
  }

  .study-companion.minimized {
    grid-template-columns: 104px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .study-companion.minimized .companion-bubble {
    width: 104px;
    height: 122px;
  }

  .companion-panel {
    max-height: 58vh;
    overflow: auto;
  }

  .companion-head {
    grid-template-columns: 36px 1fr auto;
  }

  .companion-head img {
    width: 36px;
    height: 36px;
  }

  .companion-bubble-tip {
    right: 74px;
    bottom: 72px;
    width: min(190px, calc(100vw - 128px));
    padding: 8px 10px;
    font-size: 12px;
  }
}

.companion-teacher-config {
  gap: 12px;
}

.companion-teacher-head,
.companion-teacher-row {
  grid-template-columns: 110px minmax(220px, 1.4fr) minmax(180px, 0.8fr) 90px;
  align-items: stretch;
}

.companion-teacher-row figure {
  margin: 0;
  min-height: 150px;
  border: 1px solid rgba(142, 169, 191, 0.22);
  border-radius: 8px;
  background: rgba(8, 18, 32, 0.42);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.companion-teacher-row figure img {
  width: 92px;
  height: 136px;
  object-fit: contain;
}

.companion-teacher-fields {
  display: grid;
  gap: 8px;
}

.companion-teacher-fields label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.companion-teacher-fields label span {
  color: #9eb4c8;
  font-size: 13px;
}

.companion-teacher-fields input,
.companion-teacher-fields select {
  min-width: 0;
}

.companion-shop-board {
  border: 1px solid rgba(123, 217, 242, 0.24);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 26px);
  background: rgba(10, 23, 40, 0.72);
}

.companion-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.companion-shop-current {
  border: 1px solid rgba(161, 244, 196, 0.42);
  border-radius: 8px;
  padding: clamp(14px, 2.4vw, 18px);
  background: rgba(16, 31, 51, 0.82);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.76fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}

.companion-current-main {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-width: 0;
}

.companion-shop-current figure {
  margin: 0;
  height: 220px;
  display: grid;
  place-items: center;
}

.companion-shop-current figure img {
  max-width: 166px;
  max-height: 214px;
  object-fit: contain;
}

.companion-shop-current strong,
.companion-shop-current small,
.companion-shop-current p {
  display: block;
}

.companion-shop-current small,
.companion-shop-current p {
  color: #a9bfd5;
}

.companion-shop-current p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
}

.companion-shop-toggle {
  min-height: 40px;
  padding: 8px 16px;
  white-space: nowrap;
}

.companion-current-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.companion-current-actions .companion-shop-toggle {
  width: auto;
  min-width: 132px;
  font-size: 14px;
}

.companion-current-side {
  display: grid;
  gap: 12px;
}

.companion-perk-grid {
  display: grid;
  gap: 10px;
}

.companion-perk-card {
  border: 1px solid rgba(123, 217, 242, 0.16);
  border-radius: 8px;
  padding: 11px;
  background: rgba(8, 18, 32, 0.5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.companion-perk-card strong,
.companion-perk-card span {
  display: block;
}

.companion-perk-card strong {
  font-size: 14px;
}

.companion-perk-card span {
  color: #a9bfd5;
  font-size: 12px;
  line-height: 1.42;
  margin-top: 2px;
}

.companion-perk-card button {
  min-width: 104px;
  min-height: 42px;
  white-space: nowrap;
}

.companion-growth-panel {
  margin-top: 12px;
  border: 1px solid rgba(123, 217, 242, 0.18);
  border-radius: 8px;
  background: rgba(8, 18, 32, 0.58);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
}

.companion-growth-panel strong,
.companion-growth-panel span {
  display: block;
}

.companion-growth-panel span {
  color: #a9bfd5;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 2px;
}

.companion-growth-panel button {
  min-width: 128px;
  white-space: nowrap;
}

.companion-shop-card {
  border: 1px solid rgba(142, 169, 191, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: rgba(16, 31, 51, 0.78);
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: center;
}

.companion-shop-card.selected {
  border-color: rgba(161, 244, 196, 0.62);
  box-shadow: 0 0 0 1px rgba(161, 244, 196, 0.14);
}

.companion-shop-card figure {
  margin: 0;
  height: 116px;
  display: grid;
  place-items: center;
}

.companion-shop-card figure img {
  max-width: 78px;
  max-height: 112px;
  object-fit: contain;
}

.companion-shop-card strong,
.companion-shop-card small,
.companion-shop-card p {
  display: block;
}

.companion-shop-card small,
.companion-shop-card p {
  color: #a9bfd5;
}

.companion-shop-card p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.companion-shop-card footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.companion-shop-card footer span {
  color: #a1f4c4;
  font-weight: 800;
}

.companion-shop-card footer button {
  min-width: 92px;
}

@media (max-width: 900px) {
  .companion-teacher-head {
    display: none;
  }

  .companion-shop-current {
    grid-template-columns: 1fr;
  }

  .companion-current-main {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  .companion-growth-panel {
    grid-template-columns: 1fr;
  }

  .companion-growth-panel button {
    width: 100%;
  }

  .companion-teacher-row {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .companion-teacher-row .compact,
  .companion-teacher-row button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .membership-payment-row {
    grid-template-columns: 1fr;
  }

  .parent-diagnosis-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .parent-diagnosis-toolbar button {
    width: 100%;
  }

  .parent-recharge-controls .recharge-panel {
    grid-template-columns: 1fr;
  }

  .parent-recharge-controls .recharge-panel button {
    width: 100%;
  }

  .companion-teacher-row,
  .companion-shop-current,
  .companion-shop-card {
    grid-template-columns: 1fr;
  }

  .companion-current-main,
  .companion-perk-card {
    grid-template-columns: 1fr;
  }

  .companion-shop-current figure {
    height: 180px;
  }

  .companion-shop-current figure img {
    max-width: 138px;
    max-height: 176px;
  }

  .companion-current-main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .companion-current-actions {
    justify-content: center;
  }

  .companion-perk-card button {
    width: 100%;
  }

  .companion-teacher-fields label {
    grid-template-columns: 1fr;
  }
}

.handwrite-widget {
  position: fixed;
  inset: 0;
  z-index: 880;
  pointer-events: none;
}

.handwrite-canvas {
  position: fixed;
  inset: 0;
  z-index: 890;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.handwrite-widget.active .handwrite-canvas {
  opacity: 1;
  pointer-events: auto;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23a7f3d0' stroke='%2307111f' stroke-width='1.3' d='M4.2 20.1l1.5-5.4L16.2 4.2a2.2 2.2 0 0 1 3.1 0l.5.5a2.2 2.2 0 0 1 0 3.1L9.3 18.3l-5.1 1.8Z'/%3E%3Cpath fill='%2307111f' d='m7 15.2 1.8 1.8-2.4.7.6-2.5Z'/%3E%3C/svg%3E") 3 21, auto;
}

.handwrite-widget.color-menu-open .handwrite-canvas {
  pointer-events: none;
}

body.handwrite-color-menu-open .study-companion {
  pointer-events: none;
}

body.handwrite-active .handwrite-canvas {
  top: var(--handwrite-canvas-top, 0px);
  height: calc(100vh - var(--handwrite-canvas-top, 0px));
}

.handwrite-widget.active .handwrite-canvas.erasing {
  cursor: cell;
}

.handwrite-fab {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(150px, calc(env(safe-area-inset-bottom) + 128px));
  z-index: 902;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(167, 243, 208, 0.58);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(124, 222, 255, 0.92), rgba(161, 244, 196, 0.92));
  box-shadow: 0 14px 32px rgba(50, 220, 190, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #061221;
  font-size: 16px;
  font-weight: 900;
  pointer-events: auto;
}

.handwrite-fab svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.handwrite-ink {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.35;
}

.handwrite-fab::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 20;
  width: max-content;
  max-width: 160px;
  padding: 7px 10px;
  border: 1px solid rgba(167, 243, 208, 0.42);
  border-radius: 10px;
  background: rgba(8, 18, 32, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: #a7f3d0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.handwrite-fab:hover::after,
.handwrite-fab:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.handwrite-widget.active .handwrite-fab,
.handwrite-fab.active {
  background: rgba(8, 18, 32, 0.82);
  color: #a7f3d0;
}

.topbar > .handwrite-fab {
  position: relative;
  inset: auto;
  z-index: auto;
  justify-self: end;
  width: 45px;
  min-width: 45px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  box-shadow: none;
  color: #06111f;
}

.topbar > .handwrite-fab svg {
  width: 20px;
  height: 20px;
}

.topbar > .handwrite-fab.active {
  background: linear-gradient(135deg, var(--cyan), var(--green));
  color: #06111f;
  outline: 2px solid rgba(167, 243, 208, 0.48);
  outline-offset: 2px;
}

.topbar > .handwrite-fab::after {
  top: calc(100% + 10px);
  bottom: auto;
}

.topbar > .handwrite-fab span {
  display: none;
}

.handwrite-toolbar {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 68px));
  z-index: 903;
  display: none;
  align-items: center;
  gap: 8px;
  max-width: min(760px, calc(100vw - 36px));
  padding: 10px;
  border: 1px solid rgba(132, 168, 205, 0.38);
  border-radius: 18px;
  background: rgba(8, 18, 32, 0.88);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.handwrite-widget.active .handwrite-toolbar,
.handwrite-toolbar.active {
  display: flex;
}

.handwrite-toolbar button,
.handwrite-size {
  min-height: 38px;
  border: 1px solid rgba(132, 168, 205, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf4ff;
  font-size: 14px;
  font-weight: 800;
}

.handwrite-toolbar button {
  padding: 8px 12px;
}

.handwrite-toolbar button.active {
  border-color: rgba(167, 243, 208, 0.72);
  background: rgba(167, 243, 208, 0.2);
  color: #a7f3d0;
}

.handwrite-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  white-space: nowrap;
}

.handwrite-size input {
  width: 88px;
  accent-color: #a7f3d0;
}

.handwrite-color-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(132, 168, 205, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf4ff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.handwrite-color-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 30px 0 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.handwrite-color-current::before {
  right: 11px;
}

.handwrite-color-current i,
.handwrite-color-menu i {
  display: block;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: var(--active-pen-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--active-pen-color) 58%, transparent);
}

.handwrite-color-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1502;
  display: grid;
  gap: 7px;
  width: 126px;
  padding: 10px;
  border: 1px solid rgba(132, 205, 255, 0.28);
  border-radius: 14px;
  background: #0b1626;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.handwrite-color-menu[hidden] {
  display: none;
}

.handwrite-color-menu button {
  min-height: 28px !important;
  justify-content: center;
  padding: 4px 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.035);
}

.handwrite-color-menu button:hover,
.handwrite-color-menu button:focus,
.handwrite-color-menu button.active {
  border-color: rgba(167, 243, 208, 0.62);
  background: rgba(167, 243, 208, 0.12);
}

.handwrite-color-menu i {
  width: 78px;
  background: var(--pen-color);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pen-color) 52%, transparent);
}

.handwrite-color-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px 8px 34px;
  border: 1px solid rgba(132, 168, 205, 0.34);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf4ff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.handwrite-color-select::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: var(--active-pen-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--active-pen-color) 58%, transparent);
}

.handwrite-color-select select {
  position: static !important;
  width: 78px !important;
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(8, 21, 36, 0.42);
  color: inherit;
  font: inherit;
  opacity: 1 !important;
  pointer-events: auto !important;
  outline: 0;
}

.handwrite-color-select select:focus {
  box-shadow: 0 0 0 2px rgba(167, 243, 208, 0.28);
}

.handwrite-color-select select option {
  color: #07111f;
  background: #eef7ff;
}

.handwrite-color-select .visual-select {
  width: 78px;
  min-width: 78px;
}

.handwrite-color-select .visual-select-button {
  min-height: 26px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(8, 21, 36, 0.42);
  color: #eaf4ff;
  box-shadow: none;
  font-size: 13px;
  font-weight: 850;
}

.handwrite-color-select .visual-select-button::before {
  right: 10px;
  width: 7px;
  height: 7px;
  border-color: rgba(234, 244, 255, 0.72);
}

.handwrite-color-select .visual-select-menu {
  left: auto;
  right: 0;
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: normal;
  border-color: rgba(132, 205, 255, 0.28);
  background: #0b1626;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.handwrite-color-select .visual-select-option {
  display: flex;
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  color: #eaf4ff;
  transform: none;
  white-space: nowrap;
}

.handwrite-color-select .visual-select-option.active,
.handwrite-color-select .visual-select-option:hover,
.handwrite-color-select .visual-select-option:focus {
  background: rgba(167, 243, 208, 0.16);
  color: #baf7cf;
  transform: none;
}

body.handwrite-active {
  overflow: hidden;
  padding-right: var(--handwrite-scrollbar-width, 0px);
}

body.handwrite-active .topbar .nav {
  display: none;
}

body.handwrite-active .topbar {
  z-index: 1500;
  grid-template-columns: minmax(190px, auto) minmax(260px, 430px) auto auto;
}

body.handwrite-active .topbar .user-pill {
  display: none;
}

.topbar > .handwrite-toolbar {
  position: relative;
  inset: auto;
  z-index: 1501;
  justify-self: end;
  gap: 6px;
  max-width: none;
  padding: 3px 4px;
  border-color: rgba(132, 205, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  backdrop-filter: none;
}

.topbar > .handwrite-toolbar button,
.topbar > .handwrite-toolbar .handwrite-size,
.topbar > .handwrite-toolbar .handwrite-color-picker,
.topbar > .handwrite-toolbar .handwrite-color-select {
  min-height: 32px;
  border-radius: 10px;
  font-size: 13px;
}

.topbar > .handwrite-toolbar button {
  padding: 0 10px;
}

.topbar > .handwrite-toolbar .handwrite-size {
  gap: 6px;
  padding: 0 8px;
}

.topbar > .handwrite-toolbar .handwrite-color-select {
  gap: 5px;
  padding: 0 8px 0 30px;
}

.topbar > .handwrite-toolbar .handwrite-color-current {
  min-height: 32px;
  padding: 0 26px 0 10px !important;
}

.topbar > .handwrite-toolbar .handwrite-color-current i {
  width: 42px;
  height: 4px;
}

.topbar > .handwrite-toolbar .handwrite-color-menu {
  width: 116px;
  padding: 8px;
}

.topbar > .handwrite-toolbar .handwrite-color-menu i {
  width: 70px;
}

.topbar > .handwrite-toolbar .handwrite-size input {
  width: 88px;
  height: 16px;
  min-height: 0;
  padding: 0;
}

.topbar > .handwrite-toolbar .handwrite-color-select select {
  width: 72px !important;
  height: 24px !important;
  min-height: 24px !important;
}

.topbar > .handwrite-toolbar .handwrite-color-select .visual-select {
  width: 72px;
  min-width: 72px;
}

.topbar > .handwrite-toolbar .handwrite-color-select .visual-select-button {
  min-height: 24px;
  padding-right: 22px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .handwrite-fab,
  .topbar > .handwrite-fab {
    position: fixed;
    right: 12px;
    bottom: max(106px, calc(env(safe-area-inset-bottom) + 92px));
    width: 54px;
    min-width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 12px;
    border-radius: 18px;
  }

  .handwrite-fab span {
    display: none;
  }

  .handwrite-toolbar {
    position: fixed;
    right: 10px;
    left: 10px;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    overflow-x: auto;
    justify-content: flex-start;
    border-radius: 16px;
  }

  .handwrite-toolbar button,
  .handwrite-size,
  .handwrite-color-picker,
  .handwrite-color-select {
    flex: 0 0 auto;
  }
}

@media (max-width: 1180px) {
  body:not([data-page="admin"]) .test-study-bridge--compact .test-study-main,
  body:not([data-page="admin"]) .test-list-card {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .test-entry-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body:not([data-page="admin"]) .test-study-bridge--compact {
    padding: 14px;
  }

  body:not([data-page="admin"]) .test-study-grid {
    grid-template-columns: 1fr;
  }

  body:not([data-page="admin"]) .test-list-card {
    padding: 16px;
  }

  body:not([data-page="admin"]) .test-entry-actions > * {
    width: 100%;
  }

  body:not([data-page="admin"]) .practice-status-pill {
    font-size: 12px;
    padding: 4px 9px;
  }
}

/* Light education theme.
   Keep the existing layout and status semantics while moving the site from a
   dark cockpit look to a white-first learning surface for math images. */
:root {
  --bg: #f5fbff;
  --panel: rgba(255, 255, 255, 0.94);
  --panel-strong: #ffffff;
  --panel-soft: #eef8ff;
  --line: rgba(35, 111, 143, 0.18);
  --line-strong: rgba(20, 155, 168, 0.34);
  --text: #13283a;
  --muted: #607487;
  --cyan: #18bfd0;
  --green: #25c989;
  --mint: #25c989;
  --blue: #2f7fe7;
  --amber: #f5a623;
  --red: #e85656;
  --shadow: 0 18px 44px rgba(31, 89, 124, 0.13);
  --soft-shadow: 0 10px 28px rgba(31, 89, 124, 0.1);
  --tech-grid: rgba(24, 191, 208, 0.09);
  --surface-gradient: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,249,255,.94));
}

html {
  background: #f5fbff;
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(71, 200, 218, 0.18), transparent 28%),
    radial-gradient(circle at 90% 6%, rgba(99, 216, 160, 0.14), transparent 26%),
    linear-gradient(180deg, #fbfdff 0%, #f4fbff 46%, #eef8ff 100%);
}

body::before {
  opacity: .72;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px);
}

.math-sky {
  opacity: .18;
}

.math-sky span {
  color: rgba(39, 105, 141, .28);
  text-shadow: 0 8px 20px rgba(24, 191, 208, .12);
}

.topbar {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236, 249, 255, .92)),
    rgba(255, 255, 255, .9);
  border-color: rgba(31, 116, 150, .15);
  box-shadow: 0 16px 40px rgba(31, 89, 124, .12), inset 0 1px 0 rgba(255,255,255,.86);
}

.brand,
.brand strong,
.section-head h1,
.section-head h2,
.hero-copy h1,
.portal-card strong,
.chapter-card h3,
.question-card h3,
.report h3,
.workspace h2,
.workspace h3,
.admin-quick-panel h2,
.admin-launch-check h2,
.home-plan-head h2,
.home-plan-shell,
.evaluation-route-card h2,
.parent-hero h1,
.account-hero-card h1,
.group-hero h2,
.test-entry-card strong,
.learn-mini-card strong,
.manager-card strong,
.detail-row strong,
.admin-table td,
.student-task-row strong,
.learning-path-head h3 {
  color: var(--text);
}

.brand small,
.lead,
.section-head p,
.hero-copy p,
.portal-card small,
.chapter-card p,
.report p,
.wrong-item p,
.scan-box small,
.home-plan-head p,
.home-map-progress,
.home-plan-summary,
.home-plan-summary span,
.home-plan-summary a,
.home-map-node summary em,
.home-map-popover p,
.admin-session span,
.admin-quick-panel p,
.admin-launch-check p,
.manager-card small,
.form-note,
.detail-row span,
.support-ticket-card span,
.admin-feedback-row p,
.admin-feedback-row small,
.learning-feedback-status,
.learning-feedback-head span,
.parent-stat-card span,
.parent-stat-card small,
.trend-card p,
.trend-card small,
.ai-report-card-list p,
.ai-report-card-list span {
  color: var(--muted);
}

.nav,
.search-box,
.mode-switch,
.search-segment,
.login-mode-switch,
.reset-methods,
.admin-tabs {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(31, 116, 150, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.nav a,
.user-pill,
.search-box input,
.search-box button,
.mode-switch button,
.search-segment button,
.login-mode-switch button,
.reset-methods button,
.admin-tabs button {
  color: #526a7d;
}

.nav a:hover,
.nav a.active,
.search-box button,
.mode-switch button.active,
.search-segment button.active,
.login-mode-switch button.active,
.reset-methods button.active,
.admin-tabs button.active,
.test-button.active,
.primary,
button.primary,
.primary-link-button,
.secondary-button.primary,
.home-map-popover a,
.home-map-finish.is-complete,
.companion-task.done span,
.companion-chat-message.student {
  color: #073046;
  background: linear-gradient(135deg, #47d6e4, #6ee2a9);
  border-color: rgba(24, 191, 208, .28);
  box-shadow: 0 10px 22px rgba(28, 188, 171, .18);
}

.user-pill,
.secondary,
.secondary-button,
.learn-card-tags span,
.tag,
.portal-tags em,
.route-chip-list span,
.practice-status-pill,
.wrong-status-chip,
.reinforce-tier-title,
.learning-feedback-summary .learning-feedback-open-label,
.learn-all-map summary,
.learn-mini-card span,
.json-details summary,
.tree-grade summary,
.tree-grade-title {
  color: #12865f;
  background: rgba(37, 201, 137, .09);
  border-color: rgba(37, 201, 137, .22);
}

.portal-card,
.workspace,
.ask-card,
.ai-answer,
.report,
.chapter-card,
.question-card,
.wrong-item,
.login-panel,
.recharge-panel,
.profile-card,
.detail-card,
.link-card,
.manager-card,
.admin-question-item,
.student-detail-card,
.compact-admin-form,
.group-card,
.group-hero,
.group-stat-grid > div,
.evaluation-profile-card,
.evaluation-route-card,
.diagnosis-card,
.trend-card,
.parent-stat-card,
.account-hero-card,
.account-energy-card,
.mission-card,
.badge-card,
.collection-mini-card,
.admin-collapse-panel,
.admin-metric-card,
.admin-insight-card,
.admin-ops-grid > section,
.admin-mini-row,
.admin-ledger-row,
.admin-feedback-card,
.admin-feedback-row,
.learning-feedback-widget,
.learning-path-panel,
.learn-mini-card,
.learning-resource-grid a,
.learning-resource-grid button,
.compose-chapters label,
.comic-preview-grid figure,
.tree-grade,
.support-ticket-detail,
.support-panel,
.support-faq-item,
.test-entry-card,
.test-list-card,
.learn-list-card,
.search-result-card,
.test-paper,
.selected-card,
.test-study-bridge,
.learn-home-section,
.learn-home-hero,
.learn-grade-suggestion,
.course-scaffold,
.learning-course-flow,
.learning-course-intro,
.learning-method-summary,
.learning-course-unit,
.course-practice-box,
.course-animation-box,
.course-resource-panel,
.course-now-main,
.learning-course-now,
.evaluation-fold {
  background: var(--surface-gradient);
  border-color: var(--line);
  box-shadow: var(--soft-shadow);
  color: var(--text);
}

.portal-card:hover,
.test-entry-card:hover,
.learn-list-card:hover,
.test-list-card:hover,
.search-result-card:hover,
.link-card:hover,
.learn-mini-card:hover,
.compose-chapters label:hover,
.support-ticket-card:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(232, 250, 252, .96));
  border-color: var(--line-strong);
  box-shadow: 0 18px 38px rgba(31, 132, 150, .14);
}

.site-matrix,
.page-motion,
.eval-path-visual,
.study-visual,
.portal-flow,
.ai-bubbles,
.learning-path-panel,
.admin-quick-panel,
.admin-launch-check,
.group-welcome,
.group-hero,
.result-scene,
.learn-all-map[open],
.learning-feedback-widget.learning-feedback-collapsed[open],
.student-admin-tools,
.parent-diagnosis-panel,
.ai-report-shell,
.test-study-map,
.learn-home-map {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(232, 249, 255, .92));
  background-size: 28px 28px, 28px 28px, auto;
  border-color: rgba(24, 191, 208, .18);
  box-shadow: var(--soft-shadow);
  color: var(--text);
}

.hero-title-ai,
.gradient-text,
.portal-glyph,
.timer-badge strong,
.home-map-progress strong,
.learn-mini-card span,
.support-meta dt,
.admin-table th,
.admin-launch-check-item strong,
.admin-feedback-row.up strong,
.learning-feedback-source.active,
.learning-feedback-thumb.active,
.companion-head small,
.companion-head button,
.companion-speaker,
.companion-chat small {
  color: #0d9fb0;
}

.matrix-current,
.question-score-badge,
.admin-launch-check-item.warn,
.admin-feedback-card.needs-work,
.admin-feedback-row.down,
.parent-stat-card.warning,
.parent-reminder.warning {
  color: #8a5b00;
  border-color: rgba(245, 166, 35, .34);
  background: linear-gradient(135deg, rgba(255, 246, 214, .96), rgba(255, 250, 235, .92));
  box-shadow: 0 12px 28px rgba(245, 166, 35, .1);
}

.matrix-current em,
.question-score-badge,
.admin-launch-check-item.warn strong,
.home-map-popover b {
  color: #9a6400;
  background: rgba(245, 166, 35, .1);
  border-color: rgba(245, 166, 35, .24);
}

.form-error,
.wrong-analysis-card,
.result-scene.retry,
.error-state,
.danger,
.wrong-translation {
  color: #9b2f2f;
  border-color: rgba(232, 86, 86, .28);
  background: linear-gradient(135deg, rgba(255, 244, 244, .96), rgba(255, 249, 249, .92));
}

.password-strength i {
  background: linear-gradient(90deg, #e85656 0 35%, rgba(30, 84, 120, .12) 35%);
}

.password-strength[data-level="ok"] i {
  background: linear-gradient(90deg, #18bfd0 0 68%, rgba(30, 84, 120, .12) 68%);
}

.password-strength[data-level="strong"] i,
.home-map-progress i::before,
.score-strip span,
.perfect-trophy-cup,
.matrix-ai .matrix-symbol,
.matrix-current .matrix-symbol {
  background: linear-gradient(135deg, #47d6e4, #6ee2a9);
}

input,
select,
textarea,
.student-answer-editor,
.visual-select-button,
.admin-json-config textarea,
.ask-composer textarea {
  color: var(--text);
  background: rgba(255,255,255,.94);
  border-color: rgba(31, 116, 150, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

input::placeholder,
textarea::placeholder {
  color: #8aa0b3;
}

.option-label,
.test-button,
.visual-select-option,
.learning-feedback-source,
.learning-feedback-thumb,
.group-member-card,
.group-member-card li,
.detail-row,
.support-meta div,
.support-replies div,
.admin-table th,
.admin-table td,
.admin-list-filters label,
.admin-search-line,
.admin-config-group summary,
.admin-json-config,
.admin-row {
  color: var(--text);
  background: rgba(255,255,255,.72);
  border-color: rgba(31, 116, 150, .14);
}

.visual-select-option.active,
.learning-feedback-source.active,
.learning-feedback-thumb.active,
.comic-thumb.active,
.formula-toggle-button.active,
.ask-audio-toggle.active,
.ask-mode-choice button.active,
.ask-style-select .visual-select-option.active {
  color: #073046;
  background: rgba(71, 214, 228, .18);
  border-color: rgba(24, 191, 208, .38);
}

.admin-table th {
  background: #edf9fc;
  color: #0d7584;
}

.admin-table td {
  border-bottom-color: rgba(31, 116, 150, .12);
}

.admin-tabs {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(18px);
}

.admin-launch-check-item,
.admin-insight-row,
.admin-maintenance-strip div,
.admin-quick-actions button {
  background: rgba(255,255,255,.72);
  border-color: rgba(31, 116, 150, .15);
  color: var(--text);
}

.admin-quick-actions button:hover {
  color: var(--text);
  background: rgba(232, 250, 252, .96);
}

.home-plan-map {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.38)),
    url("/assets/illustrations/treasure-map-home-clean.png") center / cover no-repeat,
    #f4fbff;
  border-color: rgba(38, 142, 154, .22);
  box-shadow: 0 18px 42px rgba(79, 120, 86, .14);
}

.home-plan-map::before {
  background: linear-gradient(90deg, rgba(255,255,255,.46), transparent 25%, transparent 74%, rgba(255,255,255,.42));
}

.home-map-node {
  color: var(--text);
  border-color: rgba(187, 141, 52, .28);
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 24px rgba(120, 91, 36, .16);
}

.home-map-node:hover {
  border-color: rgba(245, 166, 35, .48);
  box-shadow: 0 18px 34px rgba(120, 91, 36, .18);
}

.home-map-node.is-complete {
  border-color: rgba(37, 201, 137, .42);
  background: rgba(235, 255, 247, .9);
}

.home-map-node.is-current {
  border-color: rgba(24, 191, 208, .58);
  background: rgba(232, 250, 252, .94);
}

.home-map-node.is-locked {
  opacity: .82;
  background: rgba(248, 250, 252, .86);
  border-color: rgba(120, 140, 160, .22);
}

.home-map-node small,
.home-map-popover small {
  color: #12865f;
}

.home-map-node summary strong,
.home-map-popover strong,
.home-plan-summary strong,
.task-course-reminder strong {
  color: var(--text);
}

.home-map-pin {
  color: #9a6400;
  border-color: rgba(245, 166, 35, .42);
  background: radial-gradient(circle, rgba(255, 245, 207, .98), rgba(255, 255, 255, .9));
  box-shadow: 0 8px 18px rgba(245, 166, 35, .16);
}

.home-map-node.is-current .home-map-pin {
  background: radial-gradient(circle, #6ee2a9 0 38%, #e6fbff 40% 100%);
  border-color: rgba(24, 191, 208, .72);
}

.home-map-node.victory .home-map-pin {
  border-color: rgba(232, 86, 86, .62);
  background: rgba(255, 237, 237, .94);
}

.home-map-popover {
  background: rgba(255,255,255,.96);
  border-color: rgba(245, 166, 35, .3);
  box-shadow: 0 18px 34px rgba(120, 91, 36, .14);
}

.home-map-popover::before {
  background: rgba(255,255,255,.96);
  border-color: rgba(245, 166, 35, .3);
}

.task-course-reminder {
  color: #23664f;
  background: rgba(37, 201, 137, .08);
  border-color: rgba(37, 201, 137, .18);
}

.task-course-reminder span {
  color: #4f7464;
}

.page-motion path,
.page-motion rect,
.page-motion circle,
.page-motion polygon,
.page-motion line {
  stroke: rgba(32, 104, 139, .62);
}

.page-motion rect,
.page-motion circle,
.thought-card-svg .card-inner,
.thought-card-svg .card-theme-large .icon-panel,
.collection-card-icon .icon-panel {
  fill: rgba(255, 255, 255, .72);
}

.thought-card-svg .card-shell {
  fill: #ffffff;
  stroke: rgba(24, 191, 208, .4);
}

.thought-card-svg .card-no,
.thought-card-svg .card-title,
.thought-card-svg .card-ability {
  fill: var(--text);
}

.thought-card-svg .card-rarity {
  fill: #12865f;
}

.study-screen,
.ai-question-visual {
  background: rgba(255,255,255,.78);
  fill: #ffffff;
}

.study-companion {
  color: var(--text);
}

.companion-panel,
.member-profile-panel,
.card-encounter-modal,
.perfect-celebration-card,
.admin-preview-card,
.topbar > .handwrite-toolbar,
.support-panel {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(235, 249, 255, .96));
  border-color: rgba(31, 116, 150, .18);
  box-shadow: 0 18px 42px rgba(31, 89, 124, .16);
}

.card-encounter-layer,
.member-profile-modal,
.perfect-celebration-layer,
.admin-preview-layer {
  background: rgba(226, 242, 250, .72);
}

.companion-sticker {
  color: #12865f;
  background: rgba(255,255,255,.94);
  border-color: rgba(37, 201, 137, .34);
  box-shadow: 0 10px 24px rgba(31, 89, 124, .12);
}

.companion-head {
  border-bottom-color: rgba(31, 116, 150, .12);
}

.companion-panel p,
.companion-panel .companion-control p,
.companion-chat-message,
.companion-login-nudge,
.learning-feedback-summary .learning-feedback-thumb {
  color: var(--text);
}

.companion-task,
.companion-chat-log,
.companion-chat-message,
.companion-control,
.companion-control-stats a,
.companion-control-stats span,
.companion-actions a,
.companion-chat-form button,
.companion-login-nudge a,
.companion-chat-action-row a,
.companion-chat-form .companion-chat-send {
  color: #12865f;
  background: rgba(37, 201, 137, .09);
  border-color: rgba(37, 201, 137, .18);
}

.companion-task em {
  color: var(--muted);
}

.support-launcher {
  color: #10a381;
  filter: drop-shadow(0 8px 18px rgba(16, 163, 129, .2));
}

.support-launcher:hover {
  color: #0d8f75;
}

.sticky-actions,
body:not([data-page="admin"]) .test-taking-workspace .card-actions,
body:not([data-page="admin"]) .nw-actions {
  background: rgba(255,255,255,.92);
  border-color: rgba(31, 116, 150, .16);
  box-shadow: 0 -10px 28px rgba(31, 89, 124, .12);
}

.badge-card.locked,
.learning-course-steps button.locked,
.learn-map-card.locked {
  color: #7c8c99;
  background: rgba(248, 250, 252, .88);
  border-color: rgba(120, 140, 160, .18);
}

.badge-card.unlocked,
.mission-card.active,
.admin-feedback-row.up,
.support-replied {
  color: #12865f;
  background: linear-gradient(135deg, rgba(235, 255, 247, .96), rgba(255,255,255,.94));
  border-color: rgba(37, 201, 137, .24);
}

.support-closed {
  color: #647789;
  background: rgba(120, 140, 160, .1);
}

.report-high-score,
.perfect-kicker,
.perfect-score-line strong,
.group-member-card li strong {
  color: #12865f;
}

.site-footer,
.site-footer a {
  color: #5f7688;
}

@media (max-width: 720px) {
  .topbar {
    background: rgba(255,255,255,.94);
  }

  .study-companion:not(.minimized) {
    color: var(--text);
  }

  .companion-panel {
    background: rgba(255,255,255,.96);
  }
}

/* Home-specific light surfaces that keep the map/AI framework but remove old
   dark translucent blocks. */
.math-widget,
.math-widget.home-plan-widget,
.scan-box,
.scan-box.home-scan,
.matrix-card,
.matrix-primary,
.matrix-current,
.home-plan-summary span,
.home-plan-summary a {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236, 249, 255, .9));
  border-color: rgba(31, 116, 150, .18);
  box-shadow: var(--soft-shadow);
}

.math-widget::before,
.scan-box::before,
.matrix-card::before {
  background: linear-gradient(110deg, transparent 0%, rgba(24, 191, 208, .08) 42%, rgba(37, 201, 137, .1) 52%, transparent 64%);
}

.math-widget-head strong,
.matrix-info strong,
.scan-box h2,
.scan-box h3,
.scan-box strong,
.home-plan-summary strong {
  color: var(--text);
}

.math-widget-head,
.matrix-info small,
.scan-box small,
.home-plan-summary span,
.home-plan-summary a {
  color: var(--muted);
}

.math-axis {
  stroke: rgba(32, 104, 139, .22);
}

.math-point circle {
  fill: #ffffff;
  stroke: var(--green);
}

.math-point text {
  fill: var(--text);
}

.matrix-card:hover {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(226, 250, 250, .96));
  border-color: rgba(37, 201, 137, .32);
  box-shadow: 0 16px 32px rgba(31, 132, 150, .14);
}

.matrix-current {
  background:
    linear-gradient(135deg, rgba(255, 248, 224, .98), rgba(237, 255, 247, .94));
  border-color: rgba(245, 166, 35, .34);
}

.matrix-current em {
  color: #9a6400;
  background: rgba(245, 166, 35, .1);
  border-color: rgba(245, 166, 35, .24);
}

.scan-box.home-scan {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(236, 249, 255, .9));
  background-size: 28px 28px, 28px 28px, auto;
}

.home-plan-widget .home-plan-map {
  filter: saturate(.98) brightness(1.05);
}

/* Learning, evaluation and parent pages: keep status colors, lighten containers. */
.learn-catalog-controls,
.practice-catalog-controls,
.learn-home-panel,
.learn-catalog-home,
.detail-panel,
.student-task-row,
.student-ai-summary,
.diagnosis-focus-grid > div,
.parent-reminder,
.parent-recharge-controls,
.parent-list-item,
.parent-review-list,
.parent-focus-list,
.parent-secondary-list,
.parent-diagnosis-toolbar,
.parent-report-view,
.parent-diagnosis-panel,
.parent-recharge-controls .recharge-panel {
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(237, 249, 255, .93));
  border-color: rgba(31, 116, 150, .17);
  box-shadow: var(--soft-shadow);
}

.learn-catalog-controls h1,
.practice-catalog-controls h1,
.learn-catalog-controls strong,
.practice-catalog-controls strong,
.student-task-row strong,
.student-ai-summary strong,
.diagnosis-focus-grid strong,
.parent-list-item strong,
.parent-reminder strong,
.parent-recharge-controls strong {
  color: var(--text);
}

.learn-catalog-controls .eyebrow,
.practice-catalog-controls .eyebrow,
.student-task-row em,
.parent-list-item small,
.parent-reminder p,
.parent-recharge-controls p,
.diagnosis-focus-grid span {
  color: var(--muted);
}

.student-task-row.review,
.student-task-row.learn,
.student-task-row.test,
.parent-list-item {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(242, 252, 253, .94));
}

.student-task-row:hover,
.parent-list-item:hover {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(229, 250, 248, .96));
}

.student-ai-summary,
.diagnosis-focus-grid > div {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(239,249,255,.94));
  background-size: 28px 28px, 28px 28px, auto;
}

.parent-reminder.ok,
.parent-reminder.privacy {
  background: linear-gradient(135deg, rgba(235, 255, 247, .96), rgba(255,255,255,.94));
  border-color: rgba(37, 201, 137, .22);
}

.learn-catalog-selects select,
.learn-switcher select,
.practice-catalog-controls select {
  background: #ffffff;
  color: var(--text);
  border-color: rgba(31, 116, 150, .22);
}

.parent-recharge-controls,
.parent-ledger-row,
.parent-referral-code,
.parent-referral-stats > div,
.parent-referral-panel,
.parent-membership-panel {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,249,255,.94)) !important;
  border-color: rgba(31, 116, 150, .17) !important;
  box-shadow: var(--soft-shadow);
}

.parent-ledger-row small,
.parent-referral-code small,
.parent-referral-stats span,
.parent-membership-panel p {
  color: var(--muted);
}

/* Parent report and membership modules still used their own dark panels. These
   are presentation-only overrides; semantic success/warn/error colors above stay intact. */
.parent-referral-stats span,
.ai-report-toolbar,
.ai-parent-summary,
.ai-report-section,
.ai-evaluation-block,
.membership-card {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(238,250,255,.94)) !important;
  border-color: rgba(31, 116, 150, .18) !important;
  box-shadow: var(--soft-shadow);
}

.ai-report-toolbar {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,249,255,.94)) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

.ai-parent-summary,
.ai-report-section.ai-comment-section {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,255,248,.92)) !important;
}

.ai-report-toolbar strong,
.ai-parent-summary strong,
.ai-report-section h4,
.ai-report-section strong,
.ai-evaluation-block strong,
.membership-card strong,
.parent-referral-stats b {
  color: var(--text) !important;
}

.ai-report-toolbar span,
.ai-parent-summary p,
.ai-report-section p,
.ai-report-section small,
.ai-report-section span,
.ai-report-card-list p,
.ai-report-card-list span,
.ai-evaluation-block p,
.membership-card p,
.membership-card small,
.parent-referral-stats span {
  color: var(--muted) !important;
}

.ai-report-card-list article,
.ai-report-bar-row,
.ai-report-metric {
  color: var(--text) !important;
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(31, 116, 150, .15) !important;
}

.membership-card.featured {
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(229, 252, 247, .96)) !important;
  border-color: rgba(37, 201, 137, .28) !important;
}

/* Practice recommendations and parent dashboard final light pass. */
.test-recommend-head,
.test-recommend-card,
.parent-hero-card,
.parent-panel,
.parent-stat-card,
.parent-point-summary span,
.activity-list a {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,249,255,.94)) !important;
  border-color: rgba(31, 116, 150, .18) !important;
  box-shadow: var(--soft-shadow);
}

.test-recommend-head {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(231, 253, 247, .94)) !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

.test-recommend-card:hover,
.parent-panel:hover {
  border-color: rgba(37, 201, 137, .28) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(228,252,247,.96)) !important;
}

.test-recommend-card.free,
.parent-stat-card.accent {
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(232,255,247,.95)) !important;
  border-color: rgba(37, 201, 137, .26) !important;
}

.parent-stat-card.warning {
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(255,248,224,.95)) !important;
  border-color: rgba(245, 166, 35, .26) !important;
}

.parent-hero-card {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(232,250,255,.95)) !important;
  background-size: 30px 30px, 30px 30px, auto !important;
}

.parent-hero-card h2,
.parent-panel-head strong,
.parent-stat-card strong,
.parent-list-item strong,
.activity-list strong,
.test-recommend-head h3,
.test-recommend-card strong {
  color: var(--text) !important;
}

.parent-hero-card p,
.parent-stat-card span,
.parent-stat-card small,
.parent-panel-foot,
.parent-point-summary span,
.activity-list small,
.test-recommend-head p,
.test-recommend-card small {
  color: var(--muted) !important;
}

.parent-collapsible-panel[open] > summary {
  border-bottom-color: rgba(31, 116, 150, .14) !important;
}

.parent-ability-row i {
  background: rgba(31, 116, 150, .12) !important;
}

.parent-ledger-row .negative {
  color: #0b86a6 !important;
}

/* Natural light education refinement.
   This pass keeps the white-first direction but replaces the bleached neon feel
   with calmer study-blue, mint and warm reminder tones. */
:root {
  --bg: #f7fbff;
  --panel: rgba(255, 255, 255, 0.96);
  --panel-strong: #ffffff;
  --panel-soft: #f1f7fc;
  --line: rgba(106, 143, 174, 0.22);
  --line-strong: rgba(47, 128, 237, 0.34);
  --text: #1d2f43;
  --muted: #64798d;
  --cyan: #2f9fd3;
  --green: #48bd8f;
  --mint: #48bd8f;
  --blue: #2f80ed;
  --amber: #f2b84b;
  --red: #e8655d;
  --shadow: 0 18px 42px rgba(42, 89, 122, 0.11);
  --soft-shadow: 0 8px 22px rgba(42, 89, 122, 0.08);
  --tech-grid: rgba(47, 128, 237, 0.055);
  --surface-gradient: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
}

html {
  background: var(--bg);
}

body {
  color: var(--text);
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(180deg, #fbfdff 0%, #f7fbff 48%, #eef7fd 100%);
  background-size: 34px 34px, 34px 34px, auto;
}

body::before {
  opacity: .12;
  background:
    linear-gradient(120deg, transparent 0 40%, rgba(47, 128, 237, .08) 49%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent);
}

.math-sky {
  opacity: .08;
}

.math-sky span {
  color: rgba(45, 89, 122, .2);
  text-shadow: none;
}

.topbar {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(106, 143, 174, .2);
  box-shadow: 0 14px 34px rgba(42, 89, 122, .1);
}

.nav,
.search-box,
.mode-switch,
.search-segment,
.login-mode-switch,
.reset-methods,
.admin-tabs,
.sort-segment,
.ask-mode-choice,
.ask-style-select {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(106, 143, 174, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.nav a,
.user-pill,
.search-box input,
.search-box button,
.mode-switch button,
.search-segment button,
.login-mode-switch button,
.reset-methods button,
.admin-tabs button,
.sort-segment button,
.ask-mode-choice button {
  color: #526a80;
}

.nav a:hover,
.nav a.active,
.search-box button,
.mode-switch button.active,
.search-segment button.active,
.login-mode-switch button.active,
.reset-methods button.active,
.admin-tabs button.active,
.test-button.active,
.primary,
button.primary,
.primary-link-button,
.secondary-button.primary,
.home-map-popover a,
.home-map-finish.is-complete,
.companion-task.done span,
.companion-chat-message.student,
.ask-mode-choice button.active,
.ask-style-select select,
.ask-style-select .visual-select-button {
  color: #ffffff;
  background: linear-gradient(135deg, #2f80ed, #48bd8f) !important;
  border-color: rgba(47, 128, 237, .24);
  box-shadow: 0 10px 22px rgba(47, 128, 237, .16);
}

.user-pill,
.secondary,
.secondary-button,
.learn-card-tags span,
.tag,
.portal-tags em,
.route-chip-list span,
.practice-status-pill,
.wrong-status-chip,
.reinforce-tier-title,
.learning-feedback-summary .learning-feedback-open-label,
.learn-all-map summary,
.learn-mini-card span,
.json-details summary,
.tree-grade summary,
.tree-grade-title,
.test-recommend-card span {
  color: #21775f;
  background: rgba(72, 189, 143, .1);
  border-color: rgba(72, 189, 143, .22);
}

.portal-card,
.workspace,
.ask-card,
.ai-answer,
.report,
.chapter-card,
.question-card,
.wrong-item,
.login-panel,
.recharge-panel,
.profile-card,
.detail-card,
.link-card,
.manager-card,
.admin-question-item,
.student-detail-card,
.compact-admin-form,
.group-card,
.group-hero,
.group-stat-grid > div,
.evaluation-profile-card,
.evaluation-route-card,
.diagnosis-card,
.trend-card,
.parent-stat-card,
.account-hero-card,
.account-energy-card,
.mission-card,
.badge-card,
.collection-mini-card,
.admin-collapse-panel,
.admin-metric-card,
.admin-insight-card,
.admin-ops-grid > section,
.admin-mini-row,
.admin-ledger-row,
.admin-feedback-card,
.admin-feedback-row,
.learning-feedback-widget,
.learning-path-panel,
.learn-mini-card,
.learning-resource-grid a,
.learning-resource-grid button,
.compose-chapters label,
.comic-preview-grid figure,
.tree-grade,
.support-ticket-detail,
.support-panel,
.support-faq-item,
.test-entry-card,
.test-list-card,
.learn-list-card,
.search-result-card,
.test-paper,
.selected-card,
.test-study-bridge,
.learn-home-section,
.learn-home-hero,
.learn-grade-suggestion,
.course-scaffold,
.learning-course-flow,
.learning-course-intro,
.learning-method-summary,
.learning-course-unit,
.course-practice-box,
.course-animation-box,
.course-resource-panel,
.course-now-main,
.learning-course-now,
.evaluation-fold,
.math-widget,
.scan-box,
.matrix-card,
.learn-catalog-controls,
.practice-catalog-controls,
.learn-home-panel,
.learn-catalog-home,
.detail-panel,
.student-task-row,
.student-ai-summary,
.diagnosis-focus-grid > div,
.parent-reminder,
.parent-recharge-controls,
.parent-list-item,
.parent-review-list,
.parent-focus-list,
.parent-secondary-list,
.parent-diagnosis-toolbar,
.parent-report-view,
.parent-diagnosis-panel,
.parent-recharge-controls .recharge-panel,
.parent-recharge-controls,
.parent-ledger-row,
.parent-referral-code,
.parent-referral-panel,
.parent-membership-panel,
.ai-report-toolbar,
.ai-parent-summary,
.ai-report-section,
.ai-evaluation-block,
.membership-card,
.test-recommend-head,
.test-recommend-card,
.parent-hero-card,
.parent-panel,
.parent-point-summary span,
.activity-list a {
  color: var(--text) !important;
  background: var(--surface-gradient) !important;
  border-color: var(--line) !important;
  box-shadow: var(--soft-shadow);
}

.portal-card:hover,
.test-entry-card:hover,
.learn-list-card:hover,
.test-list-card:hover,
.search-result-card:hover,
.link-card:hover,
.learn-mini-card:hover,
.compose-chapters label:hover,
.support-ticket-card:hover,
.test-recommend-card:hover,
.parent-panel:hover,
.student-task-row:hover,
.parent-list-item:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f1f9ff 100%) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 14px 30px rgba(47, 128, 237, .12);
}

.site-matrix,
.page-motion,
.eval-path-visual,
.study-visual,
.portal-flow,
.ai-bubbles,
.admin-quick-panel,
.admin-launch-check,
.group-welcome,
.result-scene,
.learn-all-map[open],
.learning-feedback-widget.learning-feedback-collapsed[open],
.student-admin-tools,
.ai-report-shell,
.test-study-map,
.learn-home-map,
.scan-box.home-scan,
.student-ai-summary,
.test-recommend-head,
.parent-hero-card,
.ai-report-toolbar {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f3f9fe 100%) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: rgba(106, 143, 174, .2) !important;
  box-shadow: var(--soft-shadow);
}

.hero-title-ai,
.gradient-text,
.portal-glyph,
.timer-badge strong,
.home-map-progress strong,
.support-meta dt,
.admin-table th,
.admin-launch-check-item strong,
.admin-feedback-row.up strong,
.learning-feedback-source.active,
.learning-feedback-thumb.active,
.companion-head small,
.companion-head button,
.companion-speaker,
.companion-chat small,
.parent-panel-head a,
.parent-panel-head span {
  color: #2f80ed;
}

.matrix-current,
.question-score-badge,
.admin-launch-check-item.warn,
.admin-feedback-card.needs-work,
.admin-feedback-row.down,
.parent-stat-card.warning,
.parent-reminder.warning,
.parent-reminder.payment {
  color: #7d560b !important;
  border-color: rgba(242, 184, 75, .34) !important;
  background: linear-gradient(135deg, #fff9ea 0%, #ffffff 100%) !important;
  box-shadow: 0 10px 22px rgba(242, 184, 75, .1);
}

.form-error,
.wrong-analysis-card,
.result-scene.retry,
.error-state,
.danger,
.wrong-translation {
  color: #9b3833 !important;
  border-color: rgba(232, 101, 93, .28) !important;
  background: linear-gradient(135deg, #fff3f2 0%, #ffffff 100%) !important;
}

.badge-card.unlocked,
.mission-card.active,
.admin-feedback-row.up,
.support-replied,
.parent-reminder.ok,
.parent-reminder.privacy,
.test-recommend-card.free,
.parent-stat-card.accent,
.membership-card.featured,
.ai-parent-summary,
.ai-report-section.ai-comment-section {
  color: #21775f !important;
  background: linear-gradient(135deg, #f0fff8 0%, #ffffff 100%) !important;
  border-color: rgba(72, 189, 143, .25) !important;
}

input,
select,
textarea,
.student-answer-editor,
.visual-select-button,
.admin-json-config textarea,
.ask-composer textarea {
  color: var(--text);
  background: #ffffff;
  border-color: rgba(106, 143, 174, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}

input:focus,
select:focus,
textarea:focus,
.visual-select-button:focus {
  border-color: rgba(47, 128, 237, .44);
  box-shadow: 0 0 0 4px rgba(47, 128, 237, .1);
}

.home-plan-map {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.32)),
    url("/assets/illustrations/treasure-map-home-clean.png") center / cover no-repeat,
    #f7fbff;
  border-color: rgba(154, 178, 131, .28);
  box-shadow: 0 14px 32px rgba(112, 130, 80, .12);
}

.home-plan-map::before {
  background: linear-gradient(90deg, rgba(255,255,255,.34), transparent 22%, transparent 78%, rgba(255,255,255,.32));
}

.home-map-node {
  color: var(--text);
  border-color: rgba(188, 151, 66, .28);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 20px rgba(120, 91, 36, .13);
}

.home-map-node.is-current {
  border-color: rgba(47, 128, 237, .46);
  background: rgba(239, 247, 255, .94);
}

.home-map-node.is-complete {
  border-color: rgba(72, 189, 143, .38);
  background: rgba(240, 255, 248, .92);
}

.home-map-pin {
  color: #7d560b;
  border-color: rgba(242, 184, 75, .4);
  background: radial-gradient(circle, #fff4cf 0%, #ffffff 72%);
  box-shadow: 0 7px 16px rgba(242, 184, 75, .14);
}

.home-map-node.is-current .home-map-pin {
  background: radial-gradient(circle, #78c2ff 0 38%, #ffffff 40% 100%);
  border-color: rgba(47, 128, 237, .58);
}

.companion-panel,
.member-profile-panel,
.card-encounter-modal,
.perfect-celebration-card,
.admin-preview-card,
.topbar > .handwrite-toolbar,
.support-panel {
  color: var(--text);
  background: linear-gradient(135deg, #ffffff 0%, #f6fbff 100%);
  border-color: var(--line);
  box-shadow: 0 16px 34px rgba(42, 89, 122, .13);
}

.companion-task,
.companion-chat-log,
.companion-chat-message,
.companion-control,
.companion-control-stats a,
.companion-control-stats span,
.companion-actions a,
.companion-chat-form button,
.companion-login-nudge a,
.companion-chat-action-row a,
.companion-chat-form .companion-chat-send {
  color: #21775f;
  background: rgba(72, 189, 143, .1);
  border-color: rgba(72, 189, 143, .2);
}

.admin-table th {
  color: #2f6f9b;
  background: #f0f7fc;
}

.site-footer,
.site-footer a {
  color: #6f8294;
}

@media (max-width: 720px) {
  .topbar,
  .companion-panel {
    background: rgba(255,255,255,.95);
  }
}

/* Natural light refinement, pass 2: remove the all-over grid and let content
   breathe. Keep only quiet structured surfaces where they help orientation. */
:root {
  --bg: #f6fbff;
  --panel-soft: #f3f8fc;
  --line: rgba(113, 148, 178, 0.2);
  --line-strong: rgba(47, 128, 237, 0.28);
  --shadow: 0 16px 38px rgba(39, 78, 108, 0.1);
  --soft-shadow: 0 7px 18px rgba(39, 78, 108, 0.075);
  --tech-grid: rgba(47, 128, 237, 0.032);
  --surface-gradient: linear-gradient(135deg, #ffffff 0%, #f8fbfe 100%);
}

body {
  background: linear-gradient(180deg, #fbfdff 0%, #f6fbff 52%, #eef7fd 100%);
  background-size: auto;
}

body::before {
  opacity: .055;
  background: linear-gradient(120deg, transparent 0 44%, rgba(47, 128, 237, .08) 50%, transparent 58%);
}

.topbar {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(39, 78, 108, .09);
}

.site-matrix,
.page-motion,
.eval-path-visual,
.study-visual,
.portal-flow,
.ai-bubbles,
.admin-quick-panel,
.admin-launch-check,
.group-welcome,
.result-scene,
.learn-all-map[open],
.learning-feedback-widget.learning-feedback-collapsed[open],
.student-admin-tools,
.ai-report-shell,
.test-study-map,
.learn-home-map,
.scan-box.home-scan,
.student-ai-summary,
.test-recommend-head,
.parent-hero-card,
.ai-report-toolbar {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

.workspace,
.home-plan-shell,
.parent-dashboard,
.admin-shell,
.shell,
.page-main,
.home-main {
  background-color: transparent;
}

.portal-card,
.workspace,
.ask-card,
.ai-answer,
.report,
.chapter-card,
.question-card,
.wrong-item,
.login-panel,
.recharge-panel,
.profile-card,
.detail-card,
.link-card,
.manager-card,
.admin-question-item,
.student-detail-card,
.compact-admin-form,
.group-card,
.evaluation-profile-card,
.evaluation-route-card,
.diagnosis-card,
.trend-card,
.parent-stat-card,
.account-hero-card,
.account-energy-card,
.mission-card,
.badge-card,
.collection-mini-card,
.admin-collapse-panel,
.admin-metric-card,
.admin-insight-card,
.admin-ops-grid > section,
.admin-mini-row,
.admin-ledger-row,
.admin-feedback-card,
.admin-feedback-row,
.learning-feedback-widget,
.learn-mini-card,
.learning-resource-grid a,
.learning-resource-grid button,
.compose-chapters label,
.comic-preview-grid figure,
.tree-grade,
.support-ticket-detail,
.support-panel,
.support-faq-item,
.test-entry-card,
.test-list-card,
.learn-list-card,
.search-result-card,
.test-paper,
.selected-card,
.test-study-bridge,
.learn-home-section,
.learn-home-hero,
.learn-grade-suggestion,
.course-scaffold,
.learning-course-flow,
.learning-course-intro,
.learning-method-summary,
.learning-course-unit,
.course-practice-box,
.course-animation-box,
.course-resource-panel,
.course-now-main,
.learning-course-now,
.evaluation-fold,
.parent-panel,
.membership-card {
  box-shadow: var(--soft-shadow);
}

.nav a:hover,
.nav a.active,
.search-box button,
.mode-switch button.active,
.search-segment button.active,
.login-mode-switch button.active,
.reset-methods button.active,
.admin-tabs button.active,
.test-button.active,
.primary,
button.primary,
.primary-link-button,
.secondary-button.primary,
.home-map-popover a,
.home-map-finish.is-complete,
.companion-task.done span,
.companion-chat-message.student,
.ask-mode-choice button.active,
.ask-style-select select,
.ask-style-select .visual-select-button {
  background: linear-gradient(135deg, #2f80ed, #3fb39d) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .14);
}

.search-box button {
  border-radius: 14px;
}

.home-plan-map {
  box-shadow: 0 12px 28px rgba(112, 130, 80, .1);
}

.companion-panel {
  box-shadow: 0 14px 30px rgba(39, 78, 108, .12);
}

@media (max-width: 720px) {
  .study-companion:not(.minimized) {
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, min(232px, calc(100vw - 36px)));
    align-items: end;
  }

  .study-companion:not(.minimized) .companion-bubble {
    position: absolute;
    left: -36px;
    bottom: 8px;
    width: 62px;
    height: 74px;
    z-index: 2;
  }

  .study-companion:not(.minimized) .companion-panel {
    max-height: 116px;
    width: min(232px, calc(100vw - 36px));
    overflow: auto;
  }

  .study-companion:not(.minimized) .companion-head {
    grid-template-columns: 30px 1fr 24px;
    padding: 8px;
  }

  .study-companion:not(.minimized) .companion-head img {
    width: 30px;
    height: 30px;
  }

  .study-companion:not(.minimized) .companion-panel p {
    padding: 8px 10px 6px;
  }

  .study-companion:not(.minimized) .companion-task-list,
  .study-companion:not(.minimized) .companion-chat,
  .study-companion:not(.minimized) .companion-actions {
    padding-inline: 8px;
  }
}

/* Commercial visual QA pass.
   Clear state distinction, readable micro labels and production-grade toolbar contrast. */
:root {
  --action-blue: #2f80ed;
  --action-blue-deep: #2567c8;
  --action-mint: #35b79d;
  --ink-strong: #182a3f;
  --ink-soft: #5f7488;
  --chip-bg: #effaf6;
  --chip-line: rgba(53, 183, 157, .32);
}

.search-segment,
.mode-switch,
.login-mode-switch,
.reset-methods,
.admin-tabs {
  gap: 4px;
  padding: 5px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(115, 149, 178, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(39, 78, 108, .06);
}

.search-box .search-segment button,
.search-segment button,
.mode-switch button,
.login-mode-switch button,
.reset-methods button,
.admin-tabs button {
  color: #526a80 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  white-space: nowrap;
}

.search-box .search-segment button:hover,
.search-segment button:hover,
.mode-switch button:hover,
.login-mode-switch button:hover,
.reset-methods button:hover,
.admin-tabs button:hover {
  color: var(--action-blue-deep) !important;
  background: #f3f8fe !important;
  border-color: rgba(47, 128, 237, .18) !important;
}

.search-box .search-segment button.active,
.search-segment button.active,
.mode-switch button.active,
.login-mode-switch button.active,
.reset-methods button.active,
.admin-tabs button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--action-blue), var(--action-mint)) !important;
  border-color: rgba(47, 128, 237, .22) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .2) !important;
}

.search-box .search-segment button.active {
  outline: 1px solid rgba(47, 128, 237, .34);
  outline-offset: 2px;
  box-shadow: 0 9px 18px rgba(47, 128, 237, .2), 0 0 0 4px rgba(47, 128, 237, .08) !important;
}

.search-placeholder-ticker {
  color: rgba(82, 106, 128, .74) !important;
  font-weight: 800;
}

.search-box input {
  color: var(--ink-strong) !important;
}

.learn-map-card small,
.learn-map-card.compact small,
.learn-card-tags span,
.route-chip-list span,
.route-chip-list a,
.practice-status-pill,
.test-recommend-card span,
.home-map-node small,
.parent-route-strip strong,
.companion-task span,
.companion-control-stats a,
.companion-control-stats span,
.learning-feedback-summary .learning-feedback-thumb {
  color: #19715e !important;
  background: var(--chip-bg) !important;
  border-color: var(--chip-line) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font-weight: 900 !important;
  opacity: 1 !important;
}

.learn-map-card small,
.learn-map-card.compact small,
.practice-status-pill {
  min-height: 28px;
  padding: 5px 11px;
  border-radius: 999px;
  text-shadow: none;
}

.learn-map-card.locked small,
.learn-map-card.locked span,
.badge-card.locked,
.learning-course-steps button.locked {
  color: #7a8b9a !important;
  background: #f2f6f9 !important;
  border-color: rgba(115, 149, 178, .22) !important;
}

.learn-map-card.current small,
.learn-map-card.active small,
.learn-map-card.done small,
.practice-status-new .practice-status-pill,
.practice-status-retry .practice-status-pill {
  color: #155f52 !important;
  background: #e9f9f4 !important;
  border-color: rgba(53, 183, 157, .36) !important;
}

.handwrite-toolbar,
.topbar > .handwrite-toolbar {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(115, 149, 178, .28) !important;
  box-shadow: 0 14px 34px rgba(39, 78, 108, .16) !important;
}

.handwrite-toolbar button,
.topbar > .handwrite-toolbar button,
.handwrite-size,
.topbar > .handwrite-toolbar .handwrite-size,
.handwrite-color-picker,
.topbar > .handwrite-toolbar .handwrite-color-picker,
.handwrite-color-select,
.topbar > .handwrite-toolbar .handwrite-color-select,
.handwrite-color-current,
.topbar > .handwrite-toolbar .handwrite-color-current {
  color: var(--ink-strong) !important;
  background: #ffffff !important;
  border-color: rgba(115, 149, 178, .28) !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.handwrite-toolbar button:hover,
.topbar > .handwrite-toolbar button:hover,
.handwrite-color-current:hover,
.topbar > .handwrite-toolbar .handwrite-color-current:hover {
  color: var(--action-blue-deep) !important;
  background: #f3f8fe !important;
  border-color: rgba(47, 128, 237, .28) !important;
}

.handwrite-toolbar button.active,
.topbar > .handwrite-toolbar button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--action-blue), var(--action-mint)) !important;
  border-color: rgba(47, 128, 237, .24) !important;
  box-shadow: 0 8px 16px rgba(47, 128, 237, .18) !important;
}

.handwrite-size input,
.topbar > .handwrite-toolbar .handwrite-size input {
  accent-color: var(--action-mint);
  opacity: 1 !important;
}

.handwrite-color-current span,
.topbar > .handwrite-toolbar .handwrite-color-current span {
  color: var(--ink-strong) !important;
  opacity: 1 !important;
}

.handwrite-color-current i,
.topbar > .handwrite-toolbar .handwrite-color-current i {
  opacity: 1 !important;
  background: var(--active-pen-color, var(--action-mint)) !important;
}

.handwrite-color-menu {
  background: #ffffff !important;
  border-color: rgba(115, 149, 178, .26) !important;
  box-shadow: 0 16px 30px rgba(39, 78, 108, .16) !important;
}

.toast {
  color: var(--ink-strong) !important;
  background: rgba(255, 255, 255, .97) !important;
  border-color: rgba(47, 128, 237, .24) !important;
  box-shadow: 0 18px 44px rgba(39, 78, 108, .18), inset 0 1px 0 rgba(255,255,255,.9) !important;
  font-weight: 900;
}

@media (min-width: 761px) {
  body.handwrite-active .topbar {
    gap: 8px;
    grid-template-columns: minmax(170px, auto) minmax(220px, 320px) auto auto;
  }

  body.handwrite-active .topbar .global-search {
    max-width: 320px;
  }

  body.handwrite-active .topbar .search-box {
    grid-template-columns: auto 0 auto;
    gap: 5px;
  }

  body.handwrite-active .topbar .search-input-wrap {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
  }

  body.handwrite-active .topbar > .handwrite-toolbar {
    gap: 4px;
  }

  body.handwrite-active .topbar > .handwrite-toolbar button {
    padding-inline: 8px;
  }

  body.handwrite-active .topbar > .handwrite-toolbar .handwrite-size input {
    width: 62px;
  }
}

/* Homepage and learning-directory polish.
   Keep the light theme, but restore contrast in decorative learning diagrams
   and remove double-card nesting from the learning directory intro. */
body[data-page="home"] .typewriter,
body[data-page="home"] .hero-copy p {
  color: #536a80 !important;
  font-weight: 800;
  text-shadow: none !important;
}

body[data-page="home"] .portal-card {
  grid-template-columns: minmax(210px, 1fr) minmax(270px, .88fr);
}

body[data-page="home"] .portal-card .portal-main {
  min-width: 0;
}

body[data-page="home"] .study-visual,
body[data-page="home"] .ability-mini,
body[data-page="home"] .ai-bubbles {
  color: var(--ink-strong) !important;
  border-color: rgba(115, 149, 178, .26) !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(246, 251, 255, .96)) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .08) !important;
}

body[data-page="home"] .ability-mini p,
body[data-page="home"] .ai-bubbles p {
  color: #536a80 !important;
  font-weight: 900;
}

body[data-page="home"] .learn-card .study-visual::before {
  background: linear-gradient(90deg, rgba(63, 151, 198, .26), #3f9ac7, #53b98e, rgba(83, 185, 142, .26)) !important;
}

body[data-page="home"] .learn-card .study-book {
  border-color: rgba(82, 196, 139, .74) !important;
  box-shadow: 0 0 14px rgba(82, 196, 139, .18) !important;
}

body[data-page="home"] .learn-card .study-book::before,
body[data-page="home"] .learn-card .study-book::after {
  background: rgba(82, 178, 146, .66) !important;
  box-shadow: 0 9px 0 rgba(82, 178, 146, .66), 27px 0 0 rgba(82, 178, 146, .66), 27px 9px 0 rgba(82, 178, 146, .66) !important;
}

body[data-page="home"] .learn-card .study-screen {
  border-color: rgba(72, 166, 211, .50) !important;
  background: linear-gradient(135deg, rgba(248, 253, 255, .96), rgba(233, 248, 253, .96)) !important;
  box-shadow: inset 0 0 16px rgba(63, 154, 199, .10) !important;
}

body[data-page="home"] .learn-card .study-screen::before {
  border-left-color: #57b989 !important;
  filter: drop-shadow(0 0 6px rgba(72, 168, 129, .28)) !important;
}

body[data-page="home"] .learn-card .study-screen i {
  background: rgba(66, 166, 211, .48) !important;
}

body[data-page="home"] .learn-card .study-node {
  background: #4aa0ca !important;
  box-shadow: 0 0 10px rgba(74, 160, 202, .40) !important;
}

body[data-page="home"] .learn-card .study-node.node-c {
  background: #5bb68d !important;
  box-shadow: 0 0 10px rgba(91, 182, 141, .38) !important;
}

body[data-page="home"] .ability-mini {
  width: min(360px, 96%);
  min-width: 260px;
}

body[data-page="home"] .ability-mini p {
  grid-template-columns: 86px minmax(112px, 1fr);
  gap: 12px;
  font-size: 14px;
}

body[data-page="home"] .ai-bubbles {
  width: min(360px, 96%);
  min-width: 260px;
  grid-template-columns: 88px minmax(132px, 1fr);
  gap: 14px;
}

body[data-page="home"] .ai-question-visual {
  width: 78px;
  height: 98px;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff, #f4fbff) !important;
  background-size: 20px 20px, 20px 20px, auto !important;
}

body[data-page="home"] .ai-question-visual::before {
  color: #35a986;
  text-shadow: none;
}

body[data-page="home"] .ai-lens {
  border-color: rgba(47, 128, 237, .22);
}

body[data-page="home"] .ai-lens::after {
  background: rgba(47, 128, 237, .22);
}

body[data-page="home"] .ai-bubbles p {
  min-width: 92px;
  padding-inline: 12px;
  color: #536a80 !important;
  background: #ffffff !important;
  border-color: rgba(47, 128, 237, .18) !important;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body[data-page="home"],
  body[data-page="learn"] {
    overflow-x: hidden;
  }

  body[data-page="home"] .math-sky,
  body[data-page="home"] .simple-hero,
  body[data-page="home"] .home-main {
    overflow-x: clip;
  }

  body[data-page="home"] .portal-card {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .ability-mini,
  body[data-page="home"] .ai-bubbles {
    min-width: 0;
    width: 100%;
  }

  body[data-page="learn"] .learn-catalog-home,
  body[data-page="learn"] .learn-catalog-home .learn-home-dashboard,
  body[data-page="learn"] .learn-catalog-home .learn-home-hero,
  body[data-page="learn"] .learn-catalog-home .learn-home-section,
  body[data-page="learn"] .learn-map-grid,
  body[data-page="learn"] .learn-all-map {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="learn"] .learn-catalog-home .learn-home-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "map"
      "status";
  }
}

body[data-page="learn"] .learn-catalog-home {
  gap: 22px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learn-catalog-home .learn-home-dashboard {
  gap: 22px;
}

body[data-page="learn"] .learn-catalog-home .learn-home-hero,
body[data-page="learn"] .learn-catalog-home .learn-home-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learn-catalog-home .learn-home-hero {
  padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 560px);
  gap: 18px 28px;
}

body[data-page="learn"] .learn-catalog-home .learn-home-section {
  padding: 0;
}

body[data-page="learn"] .learn-home-section-head span {
  color: #7890a6 !important;
}

body[data-page="learn"] .learn-map-grid {
  gap: 16px;
}

body[data-page="learn"] .learn-all-map {
  background: rgba(233, 249, 244, .7);
}

body[data-page="learn"] .learn-all-map summary {
  min-height: 42px;
  padding: 8px 10px;
  color: #286f5f !important;
  background: rgba(233, 249, 244, .72);
  border-radius: 0;
}

@media (max-width: 760px) {
  body[data-page="learn"] .learn-catalog-home,
  body[data-page="learn"] .learn-catalog-home .learn-home-dashboard,
  body[data-page="learn"] .learn-catalog-home .learn-home-hero,
  body[data-page="learn"] .learn-catalog-home .learn-home-section,
  body[data-page="learn"] .learn-map-grid,
  body[data-page="learn"] .learn-all-map {
    width: 100%;
    max-width: 100%;
  }

  body[data-page="learn"] .learn-catalog-home .learn-home-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "map"
      "status";
  }
}

/* Commercial homepage palette polish.
   Use blue for primary actions, green for learning/completion states,
   and warm yellow only for the current/recommended learning step. */
:root {
  --brand-blue: #2f80ed;
  --brand-blue-strong: #2467d6;
  --brand-blue-soft: #eaf3ff;
  --education-green: #2fbf9a;
  --education-green-strong: #16876e;
  --education-green-soft: #eaf9f4;
  --learning-yellow: #f6c84c;
  --learning-yellow-soft: #fff7dc;
  --commercial-line: rgba(92, 123, 150, .28);
  --commercial-line-strong: rgba(75, 106, 133, .36);
  --commercial-shadow: 0 16px 36px rgba(39, 78, 108, .12);
  --commercial-shadow-soft: 0 10px 24px rgba(39, 78, 108, .08);
}

body {
  background: linear-gradient(180deg, #fbfdff 0%, #f5fbff 48%, #eef7fc 100%);
}

.topbar {
  border-color: rgba(92, 123, 150, .2);
  box-shadow: 0 16px 34px rgba(39, 78, 108, .12);
}

.portal-card,
.workspace,
.ask-card,
.ai-answer,
.report,
.chapter-card,
.question-card,
.wrong-item,
.login-panel,
.recharge-panel,
.profile-card,
.detail-card,
.link-card,
.manager-card,
.student-detail-card,
.evaluation-profile-card,
.evaluation-route-card,
.diagnosis-card,
.trend-card,
.parent-stat-card,
.account-hero-card,
.account-energy-card,
.mission-card,
.badge-card,
.collection-mini-card,
.test-entry-card,
.test-list-card,
.learn-list-card,
.search-result-card,
.test-paper,
.selected-card,
.learn-home-section,
.learn-home-hero,
.evaluation-fold,
.parent-panel,
.membership-card {
  border-color: var(--commercial-line);
  box-shadow: var(--commercial-shadow-soft);
}

body[data-page="home"] .portal-card,
body[data-page="home"] .math-widget,
body[data-page="home"] .scan-box.home-scan {
  border-color: var(--commercial-line-strong) !important;
  box-shadow: var(--commercial-shadow) !important;
}

.nav a:hover,
.nav a.active,
.search-box button,
.mode-switch button.active,
.search-segment button.active,
.login-mode-switch button.active,
.reset-methods button.active,
.admin-tabs button.active,
.test-button.active,
.primary,
button.primary,
.primary-link-button,
.secondary-button.primary,
.home-map-popover a,
.ask-mode-choice button.active,
.ask-style-select select,
.ask-style-select .visual-select-button {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-strong)) !important;
  border-color: rgba(47, 128, 237, .32) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .2) !important;
}

.user-pill,
.secondary,
.secondary-button,
.learn-card-tags span,
.tag,
.portal-tags em,
.route-chip-list span,
.practice-status-pill,
.wrong-status-chip,
.reinforce-tier-title,
.learning-feedback-summary .learning-feedback-open-label,
.learn-all-map summary,
.learn-mini-card span,
.json-details summary,
.tree-grade summary,
.tree-grade-title {
  color: var(--education-green-strong) !important;
  background: var(--education-green-soft) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

.companion-task.done span,
.companion-chat-message.student,
.home-map-node.is-complete .home-map-pin,
.home-map-finish.is-complete,
.learn-map-card.done span {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--education-green), var(--education-green-strong)) !important;
  border-color: rgba(47, 191, 154, .32) !important;
}

.home-map-node.is-current .home-map-pin,
.learn-map-card.current span,
.learn-map-card.current small,
.matrix-current .matrix-symbol {
  color: #1d2f43 !important;
  background: linear-gradient(135deg, var(--learning-yellow-soft), var(--learning-yellow)) !important;
  border-color: rgba(246, 200, 76, .45) !important;
}

.home-map-node.is-current .home-map-popover,
.learn-map-card.current,
.test-recommend-card.free {
  border-color: rgba(246, 200, 76, .58) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(246, 200, 76, .18), transparent 34%),
    linear-gradient(135deg, #fffdf5, #f8fcff) !important;
}

.study-companion {
  right: clamp(16px, 2.4vw, 28px);
  bottom: calc(16px + env(safe-area-inset-bottom));
}

.study-companion.minimized {
  grid-template-columns: 86px;
  right: clamp(16px, 2.4vw, 28px);
  bottom: calc(16px + env(safe-area-inset-bottom));
}

.study-companion.minimized .companion-bubble {
  width: 86px;
  height: 102px;
  filter: drop-shadow(0 12px 22px rgba(39, 78, 108, .18));
}

.study-companion.minimized .companion-panel {
  display: none !important;
}

@media (max-width: 720px) {
  .study-companion.minimized {
    grid-template-columns: 70px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .study-companion.minimized .companion-bubble {
    width: 70px;
    height: 84px;
  }
}

/* Commercial homepage first-screen polish.
   Trust markers are static navigation aids; map logic remains intact. */

body[data-page="home"] .hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

body[data-page="home"] .hero-trust-list span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(47, 191, 154, .22);
  border-radius: 999px;
  color: var(--education-green-strong);
  background: rgba(234, 249, 244, .82);
  font-size: 13px;
  font-weight: 900;
}

body[data-page="home"] .math-widget.home-plan-widget {
  border-color: rgba(47, 128, 237, .18) !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247, 251, 255, .96)) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

body[data-page="home"] .home-plan-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(47, 128, 237, .12);
}

body[data-page="home"] .home-plan-head::before {
  content: none;
  display: none;
}

body[data-page="home"] .home-plan-map {
  border-color: rgba(47, 128, 237, .24);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    0 14px 30px rgba(39, 78, 108, .14);
}

body[data-page="home"] .home-plan-map::before {
  background:
    linear-gradient(180deg, rgba(47, 128, 237, .12), transparent 34%),
    linear-gradient(90deg, rgba(8, 31, 54, .26), transparent 24%, transparent 74%, rgba(8, 31, 54, .22));
}

body[data-page="home"] .home-map-node {
  border-color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .72);
  color: var(--ink-strong);
  box-shadow: 0 10px 24px rgba(39, 78, 108, .12);
}

body[data-page="home"] .home-map-node summary strong {
  color: var(--ink-strong);
}

body[data-page="home"] .home-map-node summary em {
  color: #607588;
}

body[data-page="home"] .home-map-node small {
  color: var(--education-green-strong);
}

body[data-page="home"] .home-map-popover {
  border-color: rgba(47, 128, 237, .24);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 38px rgba(39, 78, 108, .16);
}

body[data-page="home"] .home-map-popover::before {
  border-color: rgba(47, 128, 237, .24);
  background: rgba(255, 255, 255, .97);
}

body[data-page="home"] .home-map-popover p {
  color: #51687b;
}

body[data-page="home"] .home-map-popover b {
  color: #7c5b10;
}

@media (max-width: 780px) {
  body[data-page="home"] .simple-hero {
    padding-top: 22px;
  }

  body[data-page="home"] .hero-copy h1 {
    margin-bottom: 12px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: 1;
  }

  body[data-page="home"] .lead {
    min-height: 2.2em;
    font-size: 19px;
    line-height: 1.4;
  }

  body[data-page="home"] .typewriter {
    min-height: 2.2em;
  }

  body[data-page="home"] .hero-trust-list {
    margin-bottom: 14px;
  }

  body[data-page="home"] .hero-trust-list span {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 10px;
  }

  body[data-page="home"] .math-widget.home-plan-widget {
    margin-top: 14px;
    padding: 14px;
  }

  body[data-page="home"] .guest-home-map .home-plan-head h2,
  body[data-page="home"] .home-plan-head h2 {
    font-size: clamp(19px, 5.2vw, 24px);
    white-space: normal;
  }

  body[data-page="home"] .home-map-progress {
    margin-bottom: 12px;
  }

  body[data-page="home"] .home-plan-map {
    min-height: 390px;
    padding: 12px;
    background-position: center;
  }

  body[data-page="home"] .home-map-node {
    width: min(154px, 46%);
  }

  body[data-page="home"] .home-map-node:nth-of-type(1) {
    left: 5%;
    top: 57%;
  }

  body[data-page="home"] .home-map-node:nth-of-type(2) {
    left: 27%;
    top: 18%;
  }

  body[data-page="home"] .home-map-node:nth-of-type(3) {
    left: auto;
    right: 6%;
    top: 54%;
  }

  body[data-page="home"] .home-map-node:nth-of-type(4) {
    left: auto;
    right: 6%;
    top: 22%;
  }

  body[data-page="home"] .home-map-node::after {
    display: none;
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 54px;
    padding: 7px 9px;
  }

  body[data-page="home"] .home-map-pin {
    width: 30px;
    height: 30px;
    font-size: 17px;
  }

  body[data-page="home"] .home-map-node summary strong {
    font-size: 18px;
  }

  body[data-page="home"] .home-map-node summary em {
    font-size: 11px;
  }

  body[data-page="home"] .home-map-lines {
    display: block;
  }

  body[data-page="home"] .home-map-popover {
    left: 50%;
    right: auto;
    top: calc(100% + 8px);
    bottom: auto;
    width: min(270px, calc(100vw - 48px));
    transform: translateX(-50%);
  }

  body[data-page="home"] .home-map-node.review .home-map-popover,
  body[data-page="home"] .home-map-node.test .home-map-popover {
    top: auto;
    bottom: calc(100% + 8px);
  }

  body[data-page="home"] .home-map-popover::before {
    display: none;
  }

  body[data-page="home"] .home-plan-summary.guest-summary {
    grid-template-columns: 1fr 1fr;
  }

  body[data-page="home"] .home-side {
    margin-top: 12px;
  }
}

/* Homepage brand/title and AI scan entrance polish.
   Visual-only overrides: links, upload input and map rendering logic stay unchanged. */
body[data-page="home"] .hero-copy h1 {
  margin: 10px 0 14px;
  font-size: clamp(58px, 5.8vw, 98px);
  line-height: .98;
}

body[data-page="home"] .typewriter {
  min-height: 1.8em;
}

body[data-page="home"] .lead {
  margin-bottom: 0;
}

body[data-page="home"] .hero-trust-list {
  margin-bottom: 16px;
}

body[data-page="home"] .scan-box.home-scan {
  min-height: 182px;
  padding: 30px 28px;
  border-color: rgba(47, 128, 237, .25) !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(47, 128, 237, .12), transparent 26%),
    radial-gradient(circle at 82% 68%, rgba(47, 191, 154, .16), transparent 28%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(239, 250, 255, .95)) !important;
  background-size: auto, auto, 34px 34px, 34px 34px, auto !important;
}

body[data-page="home"] .scan-box.home-scan::before {
  content: "";
  position: absolute;
  inset: 16px 22px;
  z-index: 0;
  border: 1px solid rgba(47, 128, 237, .15);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent, rgba(47, 128, 237, .16), transparent) 0 38% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(47, 191, 154, .2), transparent) 0 62% / 100% 1px no-repeat;
  box-shadow: inset 0 0 32px rgba(47, 128, 237, .08);
  animation: aiScanFrame 3.8s ease-in-out infinite;
  pointer-events: none;
}

body[data-page="home"] .scan-box.home-scan::after {
  content: "";
  position: absolute;
  left: 23%;
  top: 47%;
  z-index: 1;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #2f80ed;
  box-shadow:
    118px -32px 0 rgba(47, 191, 154, .82),
    250px 24px 0 rgba(47, 128, 237, .64);
  animation: aiNodePulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

body[data-page="home"] .scan-box.home-scan .scan-line {
  left: 9%;
  right: auto;
  top: 50%;
  z-index: 1;
  width: 82%;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(47, 128, 237, .16), rgba(40, 214, 255, .9), rgba(47, 191, 154, .55), transparent);
  box-shadow:
    0 0 22px rgba(40, 214, 255, .42),
    0 -18px 42px rgba(47, 128, 237, .14),
    0 18px 42px rgba(47, 191, 154, .12);
  animation: aiScanBeam 3.2s ease-in-out infinite;
}

body[data-page="home"] .scan-box.home-scan .scan-line::before,
body[data-page="home"] .scan-box.home-scan .scan-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(47, 128, 237, .42), transparent);
}

body[data-page="home"] .scan-box.home-scan .scan-line::before {
  left: 6%;
  transform: translateY(-18px);
}

body[data-page="home"] .scan-box.home-scan .scan-line::after {
  right: 5%;
  transform: translateY(18px);
}

body[data-page="home"] .scan-box.home-scan strong,
body[data-page="home"] .scan-box.home-scan small {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .scan-box.home-scan input {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 4;
}

@keyframes aiScanBeam {
  0%, 100% {
    opacity: .58;
    transform: translateX(-5%) scaleX(.74);
  }
  45% {
    opacity: 1;
    transform: translateX(5%) scaleX(1);
  }
  70% {
    opacity: .82;
    transform: translateX(0) scaleX(.9);
  }
}

@keyframes aiScanFrame {
  0%, 100% {
    opacity: .58;
    transform: scale(.985);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes aiNodePulse {
  0%, 100% {
    opacity: .5;
    transform: scale(.9);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.16);
    filter: drop-shadow(0 0 12px rgba(47, 191, 154, .55));
  }
}

@media (max-width: 780px) {
  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(40px, 10.8vw, 48px);
    line-height: 1.06;
  }

  body[data-page="home"] .typewriter {
    min-height: 1.65em;
  }

  body[data-page="home"] .scan-box.home-scan {
    min-height: 158px;
    padding: 24px 18px;
  }

  body[data-page="home"] .scan-box.home-scan::after {
    left: 18%;
    box-shadow:
      86px -26px 0 rgba(47, 191, 154, .82),
      190px 22px 0 rgba(47, 128, 237, .64);
  }
}

/* Compact the homepage map title block without touching map data or task links. */
body[data-page="home"] .home-plan-head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

body[data-page="home"] .home-plan-head::before {
  flex: 0 0 auto;
  min-height: 22px;
  padding-inline: 9px;
  font-size: 11px;
  transform: translateY(-2px);
}

body[data-page="home"] .home-plan-head .eyebrow {
  flex: 0 0 auto;
  margin: 0;
  color: #63b989;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1;
  white-space: nowrap;
}

body[data-page="home"] .home-plan-head h2 {
  flex: 1 1 220px;
  min-width: 0;
  font-size: clamp(24px, 1.85vw, 28px);
  line-height: 1;
  white-space: nowrap;
}

body[data-page="home"] .guest-home-map .home-plan-head h2 {
  flex-basis: 100%;
  white-space: normal;
}

@media (max-width: 780px) {
  body[data-page="home"] .home-plan-head {
    gap: 7px 8px;
    margin-bottom: 9px;
  }

  body[data-page="home"] .home-plan-head::before {
    min-height: 24px;
  }

  body[data-page="home"] .home-plan-head .eyebrow {
    font-size: clamp(15px, 4.3vw, 18px);
  }

  body[data-page="home"] .home-plan-head h2 {
    flex-basis: 100%;
    font-size: clamp(22px, 6.2vw, 26px);
    white-space: normal;
  }
}

/* Make the AI upload entrance match the portal cards below it. */
body[data-page="home"] .home-ai-card {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(250px, 1fr);
  gap: 16px 22px;
  align-items: center;
  width: 100%;
  min-height: 204px;
  padding: 22px 26px;
  overflow: hidden;
  text-align: left;
  border: 1px solid var(--commercial-line-strong) !important;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247, 251, 255, .96)) !important;
  box-shadow: var(--commercial-shadow) !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body[data-page="home"] .scan-box.home-scan.home-ai-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247, 251, 255, .96)) !important;
  background-size: auto !important;
}

body[data-page="home"] .home-ai-card:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 128, 237, .28) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(239, 250, 255, .97)) !important;
}

body[data-page="home"] .home-ai-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 23% 25%, rgba(47, 128, 237, .1), transparent 32%),
    radial-gradient(circle at 76% 58%, rgba(47, 191, 154, .1), transparent 28%);
  opacity: .72;
  pointer-events: none;
}

body[data-page="home"] .home-ai-card::after {
  content: "";
  position: absolute;
  left: -46%;
  top: 0;
  z-index: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(47, 191, 154, .12), transparent);
  transform: skewX(-16deg);
  animation: cardSweep 5.5s ease-in-out infinite;
  pointer-events: none;
}

body[data-page="home"] .home-ai-card > * {
  position: relative;
  z-index: 1;
}

body[data-page="home"] .home-ai-copy {
  display: grid;
  min-width: 0;
  gap: 10px;
}

body[data-page="home"] .home-ai-card strong {
  color: var(--ink-strong);
  font-size: clamp(24px, 1.7vw, 32px);
  line-height: 1.12;
  white-space: nowrap;
}

body[data-page="home"] .home-ai-card small {
  max-width: 310px;
  color: #536a80 !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

body[data-page="home"] .home-ai-visual {
  position: relative;
  justify-self: end;
  align-self: center;
  width: min(100%, 292px);
  max-width: 100%;
  min-height: 126px;
  overflow: hidden;
  border: 1px solid rgba(93, 169, 222, .28);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 48%, rgba(47, 191, 154, .12), transparent 36%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(240, 250, 255, .96));
  background-size: auto, 30px 30px, 30px 30px, auto;
  box-shadow:
    inset 0 0 34px rgba(47, 128, 237, .08),
    0 12px 26px rgba(39, 78, 108, .1);
}

body[data-page="home"] .home-ai-visual::before,
body[data-page="home"] .home-ai-visual::after {
  content: "";
  position: absolute;
  inset: 18px 22px;
  border-radius: 8px;
  pointer-events: none;
}

body[data-page="home"] .home-ai-visual::before {
  border: 1px solid rgba(47, 128, 237, .16);
  box-shadow:
    inset 0 0 22px rgba(47, 191, 154, .08),
    0 0 22px rgba(47, 128, 237, .06);
}

body[data-page="home"] .home-ai-visual::after {
  background:
    linear-gradient(90deg, rgba(76, 149, 219, .2), transparent 24%) 12% 18% / 46% 2px no-repeat,
    linear-gradient(90deg, rgba(84, 159, 229, .18), transparent 30%) 12% 40% / 58% 2px no-repeat,
    linear-gradient(90deg, rgba(76, 149, 219, .16), transparent 28%) 12% 62% / 38% 2px no-repeat,
    radial-gradient(circle at 78% 35%, rgba(52, 152, 255, .22) 0 4px, transparent 5px),
    radial-gradient(circle at 86% 64%, rgba(0, 211, 255, .18) 0 4px, transparent 5px);
  opacity: .84;
}

body[data-page="home"] .home-ai-paper {
  position: absolute;
  left: 25px;
  top: 18px;
  right: 25px;
  bottom: 18px;
  width: auto;
  height: auto;
  border: 1px solid rgba(47, 191, 154, .36);
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(78, 137, 196, .24), transparent 20%) 18px 22px / 52% 2px no-repeat,
    linear-gradient(90deg, rgba(72, 146, 216, .18), transparent 30%) 18px 48px / 68% 2px no-repeat,
    linear-gradient(90deg, rgba(78, 137, 196, .2), transparent 28%) 18px 74px / 44% 2px no-repeat,
    radial-gradient(circle at 78% 32%, rgba(52, 152, 255, .18) 0 6px, transparent 7px),
    radial-gradient(circle at 86% 68%, rgba(0, 211, 255, .13) 0 6px, transparent 7px),
    rgba(255,255,255,.78);
  box-shadow:
    inset 0 0 24px rgba(52, 152, 255, .07),
    0 0 22px rgba(47, 128, 237, .08);
}

body[data-page="home"] .home-ai-paper::before,
body[data-page="home"] .home-ai-paper::after {
  content: "";
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(56, 158, 248, .42), transparent);
  opacity: .7;
}

body[data-page="home"] .home-ai-paper::before {
  left: 16px;
  right: 18px;
    top: 50%;
  box-shadow:
    0 -24px 0 rgba(56, 158, 248, .13),
    0 24px 0 rgba(76, 149, 219, .12);
}

body[data-page="home"] .home-ai-paper::after {
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent, rgba(76, 149, 219, .18), transparent);
}

body[data-page="home"] .home-ai-card .home-ai-visual .scan-line {
  left: 25px;
  right: 25px;
  top: 20px;
  z-index: 3;
  width: auto;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(62, 159, 255, .82) 17%, rgba(235, 250, 255, .98) 47%, rgba(0, 205, 255, .94) 54%, rgba(52, 152, 255, .88) 83%, transparent 100%);
  box-shadow:
    0 0 10px rgba(52, 152, 255, .72),
    0 0 26px rgba(0, 205, 255, .46),
    0 13px 34px rgba(52, 152, 255, .18),
    0 -13px 34px rgba(0, 205, 255, .14);
  animation: homeAiLaserScan 2.45s ease-in-out infinite;
}

body[data-page="home"] .home-ai-card .home-ai-visual .scan-line::before,
body[data-page="home"] .home-ai-card .home-ai-visual .scan-line::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(62, 159, 255, .48), rgba(235, 250, 255, .72), rgba(0, 205, 255, .32), transparent);
  box-shadow: 0 0 10px rgba(52, 152, 255, .34);
  display: block;
}

body[data-page="home"] .home-ai-card .home-ai-visual .scan-line::before {
  top: -9px;
}

body[data-page="home"] .home-ai-card .home-ai-visual .scan-line::after {
  bottom: -10px;
}

body[data-page="home"] .home-ai-card input {
  position: absolute;
  inset: -1px;
  z-index: 5;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  opacity: 0;
  cursor: pointer;
}

body[data-page="home"] .scan-box.home-scan.home-ai-card input {
  z-index: 5;
}

@media (max-width: 760px) {
  body[data-page="home"] .home-ai-card {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px;
  }

  body[data-page="home"] .home-ai-card strong {
    white-space: normal;
  }

  body[data-page="home"] .home-ai-visual {
    justify-self: stretch;
    width: 100%;
  }
}

@keyframes homeAiLaserScan {
  0%, 100% {
    transform: translateY(8px) scaleX(.9);
    opacity: .72;
  }

  44% {
    transform: translateY(84px) scaleX(1);
    opacity: 1;
  }

  58% {
    transform: translateY(84px) scaleX(1);
    opacity: .88;
  }
}

/* Minimal upload prompt card: single scanning line, centered copy, no extra scene. */
body[data-page="home"] .scan-box.home-scan.home-ai-card {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: clamp(168px, 15vw, 212px);
  padding: 42px 34px 34px;
  overflow: hidden;
  text-align: center;
  border: 1px dashed rgba(91, 154, 213, .28) !important;
  border-radius: 10px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.98) 0%, rgba(249, 253, 255, .98) 44%, rgba(239, 248, 255, .94) 50%, rgba(255,255,255,.98) 58%, rgba(248, 252, 255, .98) 100%) !important;
  box-shadow: 0 14px 34px rgba(39, 78, 108, .08) !important;
}

body[data-page="home"] .scan-box.home-scan.home-ai-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  z-index: 1;
  height: 3px;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(91, 154, 213, .16), #5aa8df 18%, #2f80ed 48%, #79d5ff 56%, #5aa8df 82%, rgba(91, 154, 213, .16));
  box-shadow:
    0 0 12px rgba(47, 128, 237, .28),
    0 8px 28px rgba(90, 168, 223, .13);
  opacity: .95;
  animation: homeUploadScanLine 2.8s ease-in-out infinite;
  pointer-events: none;
}

body[data-page="home"] .scan-box.home-scan.home-ai-card::after {
  content: none;
  display: none;
}

body[data-page="home"] .home-ai-card .home-ai-copy {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: 560px;
  gap: 0;
  justify-items: center;
  text-align: center;
}

body[data-page="home"] .home-ai-card strong {
  color: var(--ink-strong);
  font-size: clamp(28px, 2.05vw, 40px);
  line-height: 1.08;
  white-space: normal;
}

body[data-page="home"] .home-ai-card small {
  max-width: none;
  color: #66788d !important;
  font-size: clamp(15px, 1vw, 19px);
  font-weight: 650;
  line-height: 1.55;
}

@keyframes homeUploadScanLine {
  0%, 100% {
    transform: translateY(0);
    opacity: .58;
  }

  12% {
    opacity: .95;
  }

  48% {
    transform: translateY(clamp(112px, 10vw, 154px));
    opacity: 1;
  }

  64% {
    transform: translateY(clamp(112px, 10vw, 154px));
    opacity: .72;
  }
}

body[data-page="home"] .home-ai-visual {
  display: none;
}

body[data-page="home"] .search-submit,
body[data-page="home"] .search-box .search-submit,
body[data-page="home"] .search-segment button.active {
  color: #ffffff !important;
  border-color: rgba(47, 128, 237, .34) !important;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-strong)) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .18) !important;
}

/* Desktop/PAD homepage composition.
   Keeps map station order, links, popovers and status classes intact; only reshapes presentation. */
body[data-page="home"] .simple-hero {
  padding: clamp(18px, 2.4vw, 34px) 0 clamp(22px, 2.6vw, 34px);
}

body[data-page="home"] .hero {
  align-items: start;
  grid-template-columns: minmax(500px, 1.05fr) minmax(500px, .95fr);
  gap: clamp(28px, 4vw, 56px);
}

body[data-page="home"] .hero-copy h1 {
  margin: 8px 0 8px;
  font-size: clamp(58px, 5.3vw, 86px);
}

body[data-page="home"] .hero-url {
  margin-bottom: 0;
}

body[data-page="home"] .hero-trust-list {
  margin-bottom: 12px;
}

body[data-page="home"] .math-widget.home-plan-widget {
  margin-top: 6px;
  padding: 16px;
}

body[data-page="home"] .home-plan-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

body[data-page="home"] .guest-home-map .home-plan-head h2,
body[data-page="home"] .home-plan-head h2 {
  font-size: clamp(22px, 1.7vw, 26px);
}

body[data-page="home"] .home-map-progress {
  margin-bottom: 10px;
}

body[data-page="home"] .home-map-progress strong {
  bottom: calc(100% + 6px);
  color: var(--brand-blue-strong);
  font-size: 14px;
}

body[data-page="home"] .home-map-progress i {
  height: 6px;
  border-color: rgba(47, 128, 237, .16);
  background: rgba(47, 128, 237, .05);
}

body[data-page="home"] .home-map-progress i::before {
  background: linear-gradient(90deg, var(--brand-blue), var(--education-green));
  box-shadow: none;
}

body[data-page="home"] .home-plan-map {
  min-height: clamp(300px, 27vw, 350px);
  padding: 22px;
  border-color: rgba(47, 128, 237, .18);
  background:
    radial-gradient(circle at 16% 24%, rgba(47, 128, 237, .09), transparent 26%),
    radial-gradient(circle at 84% 78%, rgba(47, 191, 154, .1), transparent 28%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244, 251, 255, .96)) !important;
  background-size: auto, auto, 36px 36px, 36px 36px, auto !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 12px 24px rgba(39, 78, 108, .1);
}

body[data-page="home"] .home-plan-map::before {
  inset: 28% 8% auto;
  height: 36%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(47, 128, 237, .16), rgba(47, 191, 154, .24), rgba(47, 128, 237, .12));
  opacity: .75;
}

body[data-page="home"] .home-map-lines {
  display: block;
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(47, 128, 237, .32);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  filter: none;
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke: rgba(47, 191, 154, .82);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px rgba(47, 191, 154, .18));
}

body[data-page="home"] .home-map-node {
  width: clamp(116px, 10vw, 142px);
  border: 1px solid rgba(47, 128, 237, .2);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  color: var(--ink-strong);
  box-shadow: 0 10px 22px rgba(39, 78, 108, .12);
}

body[data-page="home"] .home-map-node:nth-of-type(1) {
  left: 5%;
  top: 53%;
}

body[data-page="home"] .home-map-node:nth-of-type(2) {
  left: 29%;
  top: 20%;
}

body[data-page="home"] .home-map-node:nth-of-type(3) {
  left: 54%;
  top: 53%;
}

body[data-page="home"] .home-map-node:nth-of-type(4) {
  right: 5%;
  top: 20%;
}

body[data-page="home"] .home-map-node:hover {
  transform: translateY(-3px);
  border-color: rgba(47, 128, 237, .34);
  box-shadow: 0 16px 30px rgba(39, 78, 108, .16);
}

body[data-page="home"] .home-map-node.is-current {
  border-color: rgba(255, 200, 84, .7);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255, 250, 229, .9));
}

body[data-page="home"] .home-map-node.is-complete {
  border-color: rgba(47, 191, 154, .38);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(233, 249, 244, .9));
}

body[data-page="home"] .home-map-node summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 58px;
  padding: 8px 10px;
  gap: 2px 9px;
}

body[data-page="home"] .home-map-pin {
  width: 34px;
  height: 34px;
  font-size: 18px;
}

body[data-page="home"] .home-map-node summary strong {
  align-self: end;
  font-size: 18px;
}

body[data-page="home"] .home-map-node summary em {
  align-self: start;
  font-size: 11px;
}

body[data-page="home"] .home-map-node .home-map-popover {
  width: min(300px, 42vw);
}

body[data-page="home"] .home-plan-summary {
  margin-top: 10px;
  gap: 8px;
}

body[data-page="home"] .home-plan-summary span,
body[data-page="home"] .home-plan-summary a {
  min-height: 38px;
  padding: 8px 12px;
}

body[data-page="home"] .home-side {
  gap: 16px;
}

body[data-page="home"] .home-ai-card,
body[data-page="home"] .portal-card {
  min-height: 190px;
}

body[data-page="home"] .home-ai-card {
  grid-template-columns: 1fr;
  padding: 22px 26px;
  border: 1px solid var(--commercial-line-strong) !important;
  border-radius: 8px;
  box-shadow: var(--commercial-shadow) !important;
}

body[data-page="home"] .scan-box.home-scan.home-ai-card {
  min-height: 200px;
  height: 200px;
  padding: 22px 26px;
  border: 1px solid var(--commercial-line-strong) !important;
  border-radius: 8px;
  box-shadow: var(--commercial-shadow) !important;
}

body[data-page="home"] .portal-card {
  padding: 22px 26px;
}

body[data-page="home"] .portal-card.ask-card-entry {
  display: none !important;
}

@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .home-main {
    padding-left: clamp(18px, 3.8vw, 42px);
    padding-right: clamp(74px, 8vw, 92px);
  }

  body[data-page="home"] .hero {
    grid-template-columns: minmax(430px, 1fr) minmax(390px, .9fr);
    gap: clamp(20px, 3vw, 34px);
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(52px, 6vw, 68px);
  }

  body[data-page="home"] .portal-card,
  body[data-page="home"] .home-ai-card {
    min-height: 176px;
    padding: 18px;
  }

  body[data-page="home"] .portal-card {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 150px);
    gap: 12px;
    overflow: hidden;
  }

  body[data-page="home"] .home-ai-card {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .scan-box.home-scan.home-ai-card {
    min-height: 176px;
    height: 176px;
    padding: 18px;
  }

  body[data-page="home"] .portal-card strong,
  body[data-page="home"] .home-ai-card strong {
    font-size: clamp(22px, 2.2vw, 26px);
  }

  body[data-page="home"] .study-visual,
  body[data-page="home"] .score-strip,
  body[data-page="home"] .ability-mini,
  body[data-page="home"] .ai-bubbles,
  body[data-page="home"] .home-ai-visual {
    justify-self: end;
    width: clamp(118px, 14vw, 150px);
    min-width: 0 !important;
    max-width: 100%;
  }

  body[data-page="home"] .ability-mini p {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    font-size: 12px;
  }

  body[data-page="home"] .portal-tags {
    gap: 5px;
  }

  body[data-page="home"] .portal-tags em {
    padding: 5px 8px;
    font-size: 11px;
  }

  body[data-page="home"] .study-companion.minimized {
    grid-template-columns: 56px;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  body[data-page="home"] .study-companion.minimized .companion-bubble {
    width: 56px;
    height: 66px;
    opacity: .92;
  }

  body[data-page="home"] .home-plan-map {
    min-height: 300px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .study-companion.minimized {
    grid-template-columns: 62px;
  }

  body[data-page="home"] .study-companion.minimized .companion-bubble {
    width: 62px;
    height: 74px;
    opacity: .92;
  }
}

@media (max-width: 980px) {
  body[data-page="home"] .simple-hero {
    padding-top: 18px;
  }

  body[data-page="home"] .hero {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .topbar {
    grid-template-columns: minmax(170px, auto) minmax(300px, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 10px 22px 0;
    padding: 10px 14px;
    border-radius: 16px;
  }

  body[data-page="home"] .brand-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    border-radius: 16px;
  }

  body[data-page="home"] .brand strong {
    font-size: 21px;
  }

  body[data-page="home"] .global-search {
    width: 100%;
    max-width: none;
  }

  body[data-page="home"] .nav {
    grid-column: 2;
    width: auto;
    justify-self: start;
    display: flex;
  }

  body[data-page="home"] .nav a {
    width: auto;
    min-width: 44px;
    padding-inline: 10px;
  }

  body[data-page="home"] .user-pill {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: max-content;
    min-width: 82px;
    justify-self: end;
  }

  body[data-page="home"] .hero {
    padding-top: 16px;
  }

  body[data-page="home"] .hero-copy h1 {
    font-size: clamp(54px, 8vw, 68px);
  }

body[data-page="home"] .math-widget.home-plan-widget {
    max-width: none;
  }

body[data-page="home"] .home-side {
    width: min(100%, 720px);
    justify-self: center;
  }
}

/* Breathing room between the oversized homepage title and the exploration map. */
body[data-page="home"] .hero-copy h1 {
  margin-bottom: clamp(24px, 2.2vw, 34px);
  font-size: clamp(54px, 4.95vw, 80px);
}

body[data-page="home"] .math-widget.home-plan-widget {
  margin-top: 0;
}

body[data-page="home"] .home-plan-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
}

body[data-page="home"] .home-plan-head .eyebrow {
  color: rgba(86, 173, 124, .9);
  font-size: clamp(14px, .95vw, 16px);
  font-weight: 850;
  line-height: 1.1;
}

body[data-page="home"] .guest-home-map .home-plan-head h2,
body[data-page="home"] .home-plan-head h2 {
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: 0;
}

body[data-page="home"] .home-plan-summary .clickable-stat {
  border-color: rgba(47, 191, 154, .36);
  background:
    linear-gradient(135deg, rgba(238, 252, 246, .94), rgba(247, 253, 255, .9));
  color: rgba(31, 119, 95, .96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

body[data-page="home"] .home-plan-summary .clickable-stat:hover {
  border-color: rgba(47, 191, 154, .52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 8px 18px rgba(47, 191, 154, .12);
}

@media (min-width: 761px) and (max-width: 1180px) {
  body[data-page="home"] .hero-copy h1 {
    margin-bottom: clamp(22px, 3vw, 30px);
    font-size: clamp(50px, 6.4vw, 66px);
  }
}

/* Homepage mission-map polish.
   Visual-only overrides: station order, status classes, links and popover logic stay in app.js. */
body[data-page="home"] .home-plan-map {
  isolation: isolate;
  min-height: clamp(310px, 28vw, 380px);
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(47, 128, 237, .22);
  border-radius: 18px;
  background:
    radial-gradient(circle at 13% 69%, rgba(255, 210, 88, .22) 0 9%, transparent 10%),
    radial-gradient(circle at 36% 31%, rgba(47, 128, 237, .14) 0 11%, transparent 12%),
    radial-gradient(circle at 64% 67%, rgba(47, 191, 154, .15) 0 11%, transparent 12%),
    radial-gradient(circle at 86% 31%, rgba(255, 118, 118, .16) 0 10%, transparent 11%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(243, 250, 255, .98) 46%, rgba(240, 253, 249, .96)) !important;
  background-size: auto, auto, auto, auto, 40px 40px, 40px 40px, auto !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -30px 70px rgba(47, 128, 237, .045),
    0 18px 40px rgba(39, 78, 108, .12);
  overflow: visible;
}

body[data-page="home"] .home-plan-map::before {
  inset: 28% 7% auto;
  z-index: 0;
  height: 38%;
  border: 1px solid rgba(47, 191, 154, .12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .18), rgba(47, 128, 237, .08)),
    radial-gradient(circle at 35% 50%, rgba(255,255,255,.72), transparent 30%);
  filter: blur(.2px);
  opacity: .92;
}

body[data-page="home"] .home-plan-map::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 0;
  border-radius: 14px;
  background:
    radial-gradient(circle at 17% 72%, rgba(255, 210, 88, .18) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 35%, rgba(47, 128, 237, .16) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 69%, rgba(47, 191, 154, .16) 0 2px, transparent 3px),
    radial-gradient(circle at 87% 35%, rgba(255, 118, 118, .16) 0 2px, transparent 3px);
  pointer-events: none;
}

body[data-page="home"] .home-map-lines {
  inset: 4px 0 0;
  z-index: 1;
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(47, 128, 237, .36);
  stroke-width: 2.4;
  stroke-dasharray: 8 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(47, 128, 237, .2));
  animation: homeMapRouteFlow 2.8s linear infinite;
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke: rgba(47, 191, 154, .88);
  stroke-width: 2.8;
  stroke-dasharray: 1 0;
  filter: drop-shadow(0 0 8px rgba(47, 191, 154, .26));
  animation: none;
}

body[data-page="home"] .home-map-node {
  z-index: 3;
  width: clamp(146px, 13vw, 178px);
  border: 1px solid rgba(47, 128, 237, .18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247, 252, 255, .9));
  color: var(--ink-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 14px 28px rgba(39, 78, 108, .14);
  transform-origin: center;
}

body[data-page="home"] .home-map-node::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(47, 128, 237, .14), transparent 68%);
  opacity: 0;
  transition: opacity .2s ease;
}

body[data-page="home"] .home-map-node::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 34px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47, 128, 237, .16), rgba(47, 191, 154, .48));
  opacity: .75;
}

body[data-page="home"] .home-map-node:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(47, 128, 237, .36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 34px rgba(39, 78, 108, .18),
    0 0 0 5px rgba(47, 128, 237, .06);
}

body[data-page="home"] .home-map-node:hover::before {
  opacity: 1;
}

body[data-page="home"] .home-map-node:nth-of-type(1) {
  left: 5%;
  top: 54%;
}

body[data-page="home"] .home-map-node:nth-of-type(2) {
  left: 28%;
  top: 20%;
}

body[data-page="home"] .home-map-node:nth-of-type(3) {
  left: 52%;
  top: 55%;
}

body[data-page="home"] .home-map-node:nth-of-type(4) {
  right: 5%;
  top: 20%;
}

body[data-page="home"] .home-map-node summary {
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 76px;
  padding: 12px 14px 12px 12px;
  gap: 3px 12px;
}

body[data-page="home"] .home-map-pin {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 200, 84, .58);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.85), transparent 30%),
    linear-gradient(145deg, #fff4bf, #ffd86f);
  color: #9b7415;
  font-size: 20px;
  box-shadow: 0 8px 16px rgba(255, 200, 84, .2);
}

body[data-page="home"] .home-map-node summary strong {
  align-self: end;
  color: var(--ink-strong);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 950;
  letter-spacing: 0;
}

body[data-page="home"] .home-map-node summary em {
  align-self: start;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 800;
}

body[data-page="home"] .home-map-node.is-current {
  border-color: rgba(255, 200, 84, .78);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255, 250, 232, .94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px rgba(255, 185, 56, .2),
    0 0 0 5px rgba(255, 210, 88, .13);
  animation: homeMapCurrentPulse 2.2s ease-in-out infinite;
}

body[data-page="home"] .home-map-node.is-current::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 210, 88, .25), transparent 70%);
}

body[data-page="home"] .home-map-node.is-current::after {
  background: linear-gradient(90deg, #ffd86f, #65d6b8);
}

body[data-page="home"] .home-map-node.is-current .home-map-pin {
  border-color: rgba(127, 221, 255, .75);
  background:
    radial-gradient(circle at 50% 45%, #fff6c9 0 34%, transparent 35%),
    linear-gradient(145deg, #7fddff, #65d6b8);
  color: #0e3558;
  box-shadow:
    0 0 0 6px rgba(127, 221, 255, .18),
    0 10px 20px rgba(47, 128, 237, .2);
}

body[data-page="home"] .home-map-node.is-current .home-map-pin::before {
  display: none;
}

body[data-page="home"] .home-map-node.is-complete {
  border-color: rgba(47, 191, 154, .45);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(233, 250, 244, .94));
}

body[data-page="home"] .home-map-node.is-complete::after {
  background: linear-gradient(90deg, rgba(47, 191, 154, .24), rgba(47, 191, 154, .74));
}

body[data-page="home"] .home-map-node.is-complete .home-map-pin {
  border-color: rgba(47, 191, 154, .55);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(145deg, #bdf3df, #65d6b8);
  color: #176b56;
}

body[data-page="home"] .home-map-node.is-locked {
  opacity: .95;
  border-color: rgba(47, 128, 237, .14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(248, 252, 255, .86));
}

body[data-page="home"] .home-map-node.is-locked .home-map-pin {
  border-color: rgba(47, 128, 237, .22);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.88), transparent 30%),
    linear-gradient(145deg, #edf7ff, #d8edff);
  color: #56708b;
}

body[data-page="home"] .home-map-node.victory {
  border-color: rgba(255, 118, 118, .36);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255, 244, 244, .93));
}

body[data-page="home"] .home-map-node.victory::after {
  background: linear-gradient(90deg, rgba(255, 118, 118, .28), rgba(255, 200, 84, .7));
}

body[data-page="home"] .home-map-node.victory .home-map-pin {
  border-color: rgba(255, 118, 118, .52);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.86), transparent 30%),
    linear-gradient(145deg, #ffe2a7, #ff8f8f);
  color: transparent;
}

body[data-page="home"] .home-map-node.victory .home-map-pin::before {
  left: 17px;
  top: 10px;
  height: 23px;
  background: #fff7e6;
}

body[data-page="home"] .home-map-node.victory .home-map-pin::after {
  left: 19px;
  top: 10px;
  width: 18px;
  height: 13px;
  background: #ff6464;
}

body[data-page="home"] .home-map-popover {
  border-color: rgba(47, 128, 237, .18);
  background: rgba(255,255,255,.98);
  color: var(--ink);
  box-shadow: 0 22px 46px rgba(39, 78, 108, .18);
}

body[data-page="home"] .home-map-popover::before {
  border-color: rgba(47, 128, 237, .18);
  background: rgba(255,255,255,.98);
}

body[data-page="home"] .home-map-popover small {
  color: var(--brand-blue-strong);
}

body[data-page="home"] .home-map-popover p {
  color: var(--ink-muted);
}

body[data-page="home"] .home-map-popover b {
  color: #946b12;
}

body[data-page="home"] .home-map-popover a {
  background: linear-gradient(135deg, var(--brand-blue), var(--education-green));
  color: #fff;
}

body[data-page="home"] .home-map-node.review .home-map-popover,
body[data-page="home"] .home-map-node.test .home-map-popover {
  top: calc(100% + 10px);
  bottom: auto;
}

body[data-page="home"] .home-map-node.review .home-map-popover::before,
body[data-page="home"] .home-map-node.test .home-map-popover::before {
  top: -7px;
  bottom: auto;
  transform: translateX(-50%) rotate(45deg);
}

body[data-page="home"] .home-map-node.review .home-map-popover::before {
  left: 32px;
}

body[data-page="home"] .guest-home-map .home-map-node:first-of-type {
  opacity: 1;
  border-color: rgba(255, 200, 84, .78);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255, 251, 233, .94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 34px rgba(255, 185, 56, .18),
    0 0 0 5px rgba(255, 210, 88, .12);
}

body[data-page="home"] .guest-home-map .home-map-node:first-of-type::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(255, 210, 88, .25), transparent 70%);
}

body[data-page="home"] .guest-home-map .home-map-node:first-of-type::after {
  background: linear-gradient(90deg, #ffd86f, #65d6b8);
}

body[data-page="home"] .guest-home-map .home-map-node:first-of-type .home-map-pin {
  border-color: rgba(127, 221, 255, .75);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(145deg, #fff4bf, #7fddff);
  color: #0e3558;
  box-shadow:
    0 0 0 6px rgba(255, 210, 88, .14),
    0 10px 20px rgba(47, 128, 237, .18);
}

body[data-page="home"] .home-plan-summary a {
  border-color: rgba(47, 191, 154, .28);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(237, 255, 249, .9));
  color: #128266;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px rgba(47, 191, 154, .08);
}

body[data-page="home"] .home-plan-summary a:hover {
  border-color: rgba(47, 191, 154, .46);
  background: linear-gradient(135deg, #f7fffc, #e4fff6);
  color: #0b7259;
  transform: translateY(-1px);
}

@keyframes homeMapRouteFlow {
  to {
    stroke-dashoffset: -34;
  }
}

@keyframes homeMapCurrentPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 18px 36px rgba(255, 185, 56, .18),
      0 0 0 4px rgba(255, 210, 88, .12);
  }

  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 22px 42px rgba(255, 185, 56, .24),
      0 0 0 8px rgba(255, 210, 88, .16);
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .home-plan-map {
    min-height: 322px;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(134px, 13vw, 158px);
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 70px;
    padding: 10px;
  }

  body[data-page="home"] .home-map-pin {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .home-plan-map {
    min-height: 320px;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(130px, 18vw, 158px);
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .home-map-node {
    width: 128px;
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 62px;
    padding: 9px;
  }

  body[data-page="home"] .home-map-pin {
    width: 36px;
    height: 36px;
  }
}

/* Homepage exploration-map scene upgrade.
   Replaces the previous card-route feeling with a real illustrated map layer,
   while preserving the existing station DOM, classes, links and popover behavior. */
body[data-page="home"] .home-plan-map {
  min-height: clamp(370px, 31vw, 430px);
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid rgba(95, 172, 224, .32);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02)),
    url("/assets/illustrations/home-mission-map-scene.svg") center / cover no-repeat,
    linear-gradient(135deg, #f9fcff, #eefaf6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -24px 64px rgba(47, 128, 237, .045),
    0 22px 48px rgba(39, 78, 108, .14);
}

body[data-page="home"] .home-plan-map::before {
  inset: 18px;
  z-index: 0;
  height: auto;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.36), transparent 16%),
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 58%);
  opacity: .55;
  filter: none;
}

body[data-page="home"] .home-plan-map::after {
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.48), transparent 14%, transparent 84%, rgba(255,255,255,.38)),
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 20%, transparent 86%, rgba(255,255,255,.28));
  pointer-events: none;
}

body[data-page="home"] .home-map-lines {
  inset: 0;
  z-index: 2;
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(36, 134, 229, .5);
  stroke-width: 3.2;
  stroke-dasharray: 14 13;
  filter:
    drop-shadow(0 0 7px rgba(47, 128, 237, .34))
    drop-shadow(0 5px 8px rgba(39, 78, 108, .1));
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke: rgba(41, 180, 139, .95);
  stroke-width: 3.6;
}

body[data-page="home"] .home-map-node {
  width: clamp(138px, 11.6vw, 166px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.82);
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(246, 252, 255, .66));
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 28px rgba(39, 78, 108, .14),
    0 5px 0 rgba(78, 145, 188, .06);
}

body[data-page="home"] .home-map-node::before {
  inset: -16px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 50%, rgba(127, 221, 255, .24), transparent 56%),
    radial-gradient(circle at 50% 80%, rgba(255, 210, 88, .16), transparent 60%);
}

body[data-page="home"] .home-map-node::after {
  right: 16px;
  top: 16px;
  width: 38px;
  height: 7px;
  background: linear-gradient(90deg, rgba(127, 221, 255, .28), rgba(47, 191, 154, .68));
}

body[data-page="home"] .home-map-node:nth-of-type(1) {
  left: 7%;
  top: 57%;
}

body[data-page="home"] .home-map-node:nth-of-type(2) {
  left: 31%;
  top: 18%;
}

body[data-page="home"] .home-map-node:nth-of-type(3) {
  left: 54%;
  top: 58%;
}

body[data-page="home"] .home-map-node:nth-of-type(4) {
  right: 6%;
  top: 17%;
}

body[data-page="home"] .home-map-node summary {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 86px;
  padding: 13px 15px 13px 13px;
  gap: 3px 13px;
}

body[data-page="home"] .home-map-pin {
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.92), transparent 30%),
    linear-gradient(145deg, #fff1a8, #ffd161);
  color: #826016;
  box-shadow:
    0 10px 18px rgba(255, 185, 56, .22),
    inset 0 -4px 9px rgba(179, 119, 0, .08);
}

body[data-page="home"] .home-map-node summary strong {
  color: #17243a;
  font-size: clamp(25px, 2.1vw, 34px);
  line-height: 1.05;
}

body[data-page="home"] .home-map-node summary em {
  color: #344a64;
  font-size: 14px;
  font-weight: 950;
}

body[data-page="home"] .home-map-node.is-current,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type {
  border-color: rgba(255, 211, 111, .9);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255, 252, 232, .84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 20px 34px rgba(255, 185, 56, .22),
    0 0 0 6px rgba(255, 211, 111, .16);
}

body[data-page="home"] .home-map-node.is-current .home-map-pin,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type .home-map-pin {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.94), transparent 30%),
    linear-gradient(145deg, #fff0a8, #79dcff 54%, #65d6b8);
  color: #153d5a;
}

body[data-page="home"] .home-map-node.is-complete {
  border-color: rgba(92, 216, 179, .7);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(229, 250, 243, .8));
}

body[data-page="home"] .home-map-node.is-complete .home-map-pin {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.94), transparent 30%),
    linear-gradient(145deg, #c9f6e8, #59d1ac);
  color: #126851;
}

body[data-page="home"] .home-map-node.is-locked {
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(246, 252, 255, .66));
}

body[data-page="home"] .home-map-node.victory {
  border-color: rgba(255, 154, 154, .72);
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255, 238, 239, .82));
}

body[data-page="home"] .home-map-node.victory .home-map-pin {
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.9), transparent 30%),
    linear-gradient(145deg, #ffe5a3, #ff8585);
}

body[data-page="home"] .home-map-node:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 25px 38px rgba(39, 78, 108, .18),
    0 0 0 7px rgba(127, 221, 255, .12);
}

@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .home-plan-map {
    min-height: 350px;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(126px, 12vw, 148px);
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 76px;
    padding: 11px;
  }

  body[data-page="home"] .home-map-pin {
    width: 42px;
    height: 42px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .home-plan-map {
    min-height: 350px;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(132px, 17vw, 158px);
  }
}

/* Calm compact mission map.
   The map should carry the scene; station labels stay compact and readable. */
body[data-page="home"] .home-plan-map {
  min-height: clamp(330px, 28vw, 380px);
  padding: clamp(22px, 2.1vw, 30px);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.08)),
    url("/assets/illustrations/home-mission-map-scene.svg") center 54% / 108% auto no-repeat,
    linear-gradient(135deg, #f9fcff, #eefaf6) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -20px 54px rgba(47, 128, 237, .04),
    0 18px 38px rgba(39, 78, 108, .12);
}

body[data-page="home"] .home-plan-map::before {
  inset: 20px;
  border-radius: 17px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), transparent 20%, transparent 82%, rgba(255,255,255,.28));
  opacity: .55;
}

body[data-page="home"] .home-plan-map::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 28%, transparent 86%, rgba(255,255,255,.22));
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(47, 128, 237, .38);
  stroke-width: 2.4;
  stroke-dasharray: 10 12;
  filter: drop-shadow(0 0 5px rgba(47, 128, 237, .18));
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke-width: 2.8;
}

body[data-page="home"] .home-map-lines {
  display: block;
  opacity: .98;
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(90, 176, 239, .74);
  stroke-width: 3.6;
  stroke-dasharray: 0;
  filter: drop-shadow(0 5px 8px rgba(64, 130, 180, .12));
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke: rgba(47, 191, 154, .9);
  stroke-width: 3.8;
}

body[data-page="home"] .home-map-node {
  width: clamp(112px, 9.6vw, 132px);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 22px rgba(39, 78, 108, .12);
}

body[data-page="home"] .home-map-node::before {
  inset: -10px;
  border-radius: 22px;
  opacity: .65;
}

body[data-page="home"] .home-map-node::after {
  right: 12px;
  top: 12px;
  width: 26px;
  height: 5px;
  opacity: .65;
}

body[data-page="home"] .home-map-node:nth-of-type(1) {
  left: 3%;
  top: 60%;
}

body[data-page="home"] .home-map-node:nth-of-type(2) {
  left: 28%;
  top: 25%;
}

body[data-page="home"] .home-map-node:nth-of-type(3) {
  left: 52%;
  top: 55%;
}

body[data-page="home"] .home-map-node:nth-of-type(4) {
  right: 3%;
  top: 29%;
}

body[data-page="home"] .home-map-node summary {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 60px;
  padding: 9px 11px 9px 9px;
  gap: 1px 9px;
}

body[data-page="home"] .home-map-pin {
  width: 36px;
  height: 36px;
  font-size: 17px;
}

body[data-page="home"] .home-map-node summary strong {
  font-size: clamp(19px, 1.45vw, 24px);
  line-height: 1.08;
}

body[data-page="home"] .home-map-node summary em {
  font-size: 12px;
  font-weight: 850;
}

body[data-page="home"] .home-map-node.is-current,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 24px rgba(255, 185, 56, .16),
    0 0 0 4px rgba(255, 211, 111, .13);
}

body[data-page="home"] .home-map-node:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 18px 28px rgba(39, 78, 108, .15),
    0 0 0 5px rgba(127, 221, 255, .1);
}

body[data-page="home"] .home-map-node.victory .home-map-pin::before {
  left: 13px;
  top: 8px;
  height: 18px;
}

body[data-page="home"] .home-map-node.victory .home-map-pin::after {
  left: 15px;
  top: 8px;
  width: 14px;
  height: 10px;
}

@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .home-plan-map {
    min-height: 310px;
    background-size: 114% auto !important;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(106px, 10vw, 124px);
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 56px;
    padding: 8px;
  }

  body[data-page="home"] .home-map-pin {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  body[data-page="home"] .home-map-node summary strong {
    font-size: 19px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .home-plan-map {
    min-height: 320px;
    background-size: 106% auto !important;
  }

  body[data-page="home"] .home-map-node {
    width: clamp(112px, 15vw, 132px);
  }
}

/* Premium artwork map.
   Uses the provided finished map image as the scene; task nodes are compact overlays on its four platforms. */
body[data-page="home"] .home-plan-map {
  aspect-ratio: 1774 / 887;
  min-height: 0;
  padding: 0;
  border-color: rgba(156, 211, 244, .42);
  border-radius: 22px;
  background: linear-gradient(180deg, #fbfeff 0%, #f4fbff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 40px rgba(39, 78, 108, .12);
}

body[data-page="home"] .home-plan-map::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: url("/assets/illustrations/home-mission-map-premium.png") center center / 100% 100% no-repeat;
  filter: saturate(1.14) contrast(1.05);
  opacity: .99;
  pointer-events: none;
  z-index: 0;
}

body[data-page="home"] .home-plan-map::after {
  content: "";
  position: absolute;
  inset: 1px;
  display: block;
  border-radius: 21px;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.42), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 42%);
  pointer-events: none;
  z-index: 1;
}

body[data-page="home"] .home-plan-head::before {
  content: none;
  display: none;
}

body[data-page="home"] .home-map-bird-flight {
  position: absolute;
  left: -9%;
  top: 23%;
  width: clamp(28px, 3.8vw, 42px);
  aspect-ratio: 120 / 92;
  pointer-events: auto;
  z-index: 3;
  animation: homeMapBirdCross 13.5s linear infinite;
}

body[data-page="home"] .home-map-bird {
  display: block;
  width: clamp(28px, 3.8vw, 42px);
  aspect-ratio: 120 / 92;
  padding: 0;
  border: 0;
  background: url("/assets/illustrations/home-map-bird.svg") center / contain no-repeat;
  filter: drop-shadow(0 7px 10px rgba(67, 125, 164, .14));
  opacity: .92;
  transform-origin: 50% 70%;
  cursor: pointer;
  animation: homeMapBirdFloat 1.8s ease-in-out infinite;
}

body[data-page="home"] .home-map-bird:focus-visible {
  outline: 2px solid rgba(45, 126, 226, .55);
  outline-offset: 4px;
  border-radius: 999px;
}

body[data-page="home"] .home-map-bird-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(146, 212, 238, .58);
  box-shadow: 0 10px 22px rgba(50, 100, 130, .13);
  color: rgba(31, 53, 82, .9);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px) scale(.94);
  transition: opacity .18s ease, transform .18s ease;
}

body[data-page="home"] .home-map-bird-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.92);
  border-right: 1px solid rgba(146, 212, 238, .58);
  border-bottom: 1px solid rgba(146, 212, 238, .58);
  transform: translateX(-50%) rotate(45deg);
}

body[data-page="home"] .home-map-bird-flight.is-talking .home-map-bird-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-right .home-map-bird-bubble {
  left: calc(100% + 8px);
  bottom: 52%;
  transform: translate(0, 50%) scale(.94);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-right.is-talking .home-map-bird-bubble {
  transform: translate(0, 50%) scale(1);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-right .home-map-bird-bubble::after {
  left: -5px;
  bottom: 16px;
  transform: rotate(135deg);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-left .home-map-bird-bubble {
  right: calc(100% + 8px);
  left: auto;
  bottom: 52%;
  transform: translate(0, 50%) scale(.94);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-left.is-talking .home-map-bird-bubble {
  transform: translate(0, 50%) scale(1);
}

body[data-page="home"] .home-map-bird-flight.is-bubble-left .home-map-bird-bubble::after {
  right: -5px;
  left: auto;
  bottom: 16px;
  transform: rotate(-45deg);
}

body[data-page="home"] .home-map-water {
  position: absolute;
  left: 58%;
  top: 63%;
  width: 39%;
  height: 29%;
  pointer-events: none;
  z-index: 2;
  opacity: .88;
  overflow: hidden;
  background: radial-gradient(ellipse at 72% 74%, rgba(81, 209, 235, .16), transparent 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  animation: homeMapWaterSway 6.6s ease-in-out infinite;
}

body[data-page="home"] .home-map-water::before,
body[data-page="home"] .home-map-water::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  height: 56%;
  border-radius: 50%;
  border-top: 2px solid rgba(55, 194, 224, .26);
  border-bottom: 1px solid rgba(255,255,255,.42);
  transform: rotate(3deg);
}

body[data-page="home"] .home-map-water::before {
  top: 18%;
  box-shadow:
    0 7px 0 -5px rgba(255,255,255,.48),
    0 12px 0 -10px rgba(69, 202, 231, .24);
  animation: homeMapWaterRippleA 5.4s ease-in-out infinite;
}

body[data-page="home"] .home-map-water::after {
  top: 38%;
  left: 16%;
  right: 8%;
  opacity: .72;
  transform: rotate(-2deg);
  border-top-color: rgba(82, 207, 232, .2);
  animation: homeMapWaterRippleB 6.2s ease-in-out infinite;
}

body[data-page="home"] .home-map-lines {
  display: none;
  inset: 0;
  z-index: 2;
  opacity: .9;
  mix-blend-mode: normal;
}

body[data-page="home"] .home-map-lines path {
  stroke: rgba(112, 179, 232, .16);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-dasharray: 2.8 3.2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 4px rgba(69, 126, 168, .08));
}

body[data-page="home"] .home-map-lines path.is-complete {
  stroke: rgba(30, 172, 137, .58);
  stroke-width: 1.5;
  stroke-dasharray: 0;
  filter: drop-shadow(0 0 5px rgba(46, 196, 159, .24));
}

body[data-page="home"] .home-map-node {
  width: clamp(52px, 4.8vw, 64px);
  border-radius: 999px;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  translate: -50% -50%;
  z-index: 3;
  box-shadow: none;
}

body[data-page="home"] .home-map-node::before {
  display: none;
}

body[data-page="home"] .home-map-node::after {
  display: none;
}

body[data-page="home"] .home-map-node:nth-of-type(1) {
  left: 15.2%;
  top: 75.8%;
}

body[data-page="home"] .home-map-node:nth-of-type(2) {
  left: 37.4%;
  top: 50.7%;
}

body[data-page="home"] .home-map-node:nth-of-type(3) {
  left: 71.2%;
  top: 53.2%;
}

body[data-page="home"] .home-map-node:nth-of-type(4) {
  left: 88.5%;
  top: 31.7%;
  right: auto;
}

body[data-page="home"] .home-map-node summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 28px;
  padding: 2px 3px;
  gap: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  place-items: center;
  position: relative;
  text-align: center;
}

body[data-page="home"] .home-map-node:not(.victory) summary::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(54px, 5.4vw, 76px);
  height: clamp(30px, 3.2vw, 42px);
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(74, 151, 238, .16), rgba(74, 151, 238, 0) 70%);
  transform: translate(-50%, -50%) scale(.88);
  opacity: 0;
  pointer-events: none;
}

body[data-page="home"] .home-map-pin {
  display: none;
}

body[data-page="home"] .home-map-node summary strong {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  color: rgba(33, 53, 80, .88);
  position: relative;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 5px rgba(255,255,255,.72);
}

body[data-page="home"] .home-map-node summary strong::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(74, 142, 232, .78), rgba(44, 191, 154, .82));
  box-shadow: 0 0 10px rgba(60, 177, 197, .22);
  transform: translateX(-50%);
  transition: width .2s ease, opacity .2s ease;
  opacity: 0;
}

body[data-page="home"] .home-map-node summary em {
  display: none;
}

body[data-page="home"] .home-map-node.is-current,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type {
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .home-map-node.is-current summary,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type summary {
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .home-map-node.is-complete:not(.victory) summary strong {
  color: rgba(22, 133, 109, .92);
}

body[data-page="home"] .home-map-node.is-current:not(.victory) summary strong,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type summary strong {
  color: rgba(24, 96, 176, .96);
  text-shadow:
    0 1px 0 rgba(255,255,255,.98),
    0 0 9px rgba(105, 195, 232, .36);
}

body[data-page="home"] .home-map-node.is-current:not(.victory) summary::before,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type summary::before {
  opacity: 1;
  animation: homeMapCurrentHalo 2.2s ease-in-out infinite;
}

body[data-page="home"] .home-map-node.is-current:not(.victory) summary strong::after,
body[data-page="home"] .guest-home-map .home-map-node:first-of-type summary strong::after {
  width: 120%;
  opacity: 1;
  animation: homeMapCurrentUnderline 1.9s ease-in-out infinite;
}

body[data-page="home"] .home-map-node.victory {
  width: clamp(42px, 4vw, 54px);
  background: transparent;
}

body[data-page="home"] .home-map-node.victory summary {
  background: transparent;
  min-height: clamp(34px, 3.2vw, 42px);
  padding: 0;
  position: relative;
  overflow: visible;
}

body[data-page="home"] .home-map-node.victory summary::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: clamp(19px, 1.9vw, 25px);
  height: 6px;
  border-radius: 50%;
  background: rgba(211, 105, 86, .18);
  filter: blur(1px);
  transform: translateX(-50%);
  animation: homeVictoryTokenShadow 2.2s ease-in-out infinite;
}

body[data-page="home"] .home-map-node.victory summary::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: clamp(24px, 2.35vw, 31px);
  height: clamp(22px, 2.15vw, 28px);
  border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.62) 0 11%, transparent 23%),
    linear-gradient(145deg, #ff8a86 0%, #f05155 48%, #d93642 100%);
  clip-path: polygon(50% 0, 82% 10%, 96% 40%, 78% 74%, 50% 100%, 22% 74%, 4% 40%, 18% 10%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 6px 12px rgba(217, 64, 70, .2);
  transform: translateX(-50%);
  transform-origin: 50% 70%;
  animation: homeVictoryTokenPulse 2.2s ease-in-out infinite;
}

body[data-page="home"] .home-map-node.victory summary strong {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-page="home"] .home-map-node:hover {
  transform: translateY(-4px) scale(1.015);
}

@keyframes homeVictoryTokenShadow {
  0%, 100% {
    transform: translateX(-50%) scaleX(1);
    opacity: .9;
  }

  50% {
    transform: translateX(-50%) scaleX(.76);
    opacity: .58;
  }
}

@keyframes homeVictoryTokenPulse {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1) rotate(-2deg);
  }

  50% {
    transform: translateX(-50%) translateY(-3px) scale(1.06) rotate(3deg);
  }
}

@keyframes homeMapWaterSway {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(5px, -1px, 0);
  }
}

@keyframes homeMapWaterRippleA {
  0%, 100% {
    transform: translateX(-4px) rotate(3deg) scaleX(.96);
    opacity: .62;
  }

  50% {
    transform: translateX(10px) rotate(2deg) scaleX(1.05);
    opacity: .92;
  }
}

@keyframes homeMapWaterRippleB {
  0%, 100% {
    transform: translateX(6px) rotate(-2deg) scaleX(1.04);
    opacity: .46;
  }

  50% {
    transform: translateX(-8px) rotate(-1deg) scaleX(.96);
    opacity: .78;
  }
}

@keyframes homeMapCurrentUnderline {
  0%, 100% {
    transform: translateX(-50%) scaleX(.82);
    opacity: .56;
  }

  50% {
    transform: translateX(-50%) scaleX(1.08);
    opacity: .95;
  }
}

@keyframes homeMapCurrentHalo {
  0%, 100% {
    transform: translate(-50%, -50%) scale(.86);
    opacity: .38;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: .78;
  }
}

@keyframes homeMapBirdFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-.5deg) scale(1);
  }

  50% {
    transform: translate3d(0, -4px, 0) rotate(.5deg) scale(1.03);
  }
}

@keyframes homeMapBirdCross {
  0% {
    left: -9%;
    top: 31%;
    opacity: 0;
    transform: rotate(-2deg) scale(.92);
  }

  7% {
    opacity: .94;
  }

  25% {
    left: 18%;
    top: 24%;
    transform: rotate(-1deg) scale(1);
  }

  50% {
    left: 48%;
    top: 30%;
    transform: rotate(1.5deg) scale(1.02);
  }

  75% {
    left: 78%;
    top: 23%;
    transform: rotate(-.5deg) scale(.98);
  }

  94% {
    opacity: .94;
  }

  100% {
    left: 106%;
    top: 30%;
    opacity: 0;
    transform: rotate(2deg) scale(.92);
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  body[data-page="home"] .home-plan-map {
    min-height: 0;
  }

  body[data-page="home"] .home-map-node {
    width: 54px;
  }

  body[data-page="home"] .home-map-node.victory {
    width: 46px;
  }

  body[data-page="home"] .home-map-node summary {
    grid-template-columns: minmax(0, 1fr);
    min-height: 26px;
    padding: 2px 3px;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  body[data-page="home"] .home-plan-map {
    min-height: 0;
  }

  body[data-page="home"] .home-map-node {
    width: 58px;
  }

  body[data-page="home"] .home-map-node.victory {
    width: 50px;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body[data-page="home"] .home-main {
    padding-right: clamp(128px, 10vw, 150px);
  }

  body[data-page="home"] .hero {
    grid-template-columns: minmax(520px, 1fr) minmax(470px, .92fr);
  }
}

/* Sitewide palette alignment.
   Extend the homepage commercial light theme to every page while preserving
   semantic state colors for current, complete, locked, wrong and warning UI. */
:root {
  --bg: #f5fbff;
  --panel: rgba(255, 255, 255, .96);
  --panel-strong: #ffffff;
  --panel-soft: #f2f8fd;
  --line: rgba(96, 129, 156, .22);
  --line-strong: rgba(47, 128, 237, .28);
  --text: #1d2f43;
  --muted: #5f7488;
  --cyan: #2fb7dc;
  --green: #2fbf9a;
  --blue: #2f80ed;
  --amber: #f6c84c;
  --red: #e8655d;
  --shadow: 0 16px 36px rgba(39, 78, 108, .12);
  --soft-shadow: 0 8px 22px rgba(39, 78, 108, .08);
  --tech-grid: rgba(47, 128, 237, .035);
  --surface-gradient: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  --site-blue: #2f80ed;
  --site-blue-strong: #2467d6;
  --site-blue-soft: #eaf3ff;
  --site-green: #2fbf9a;
  --site-green-strong: #16876e;
  --site-green-soft: #eaf9f4;
  --site-yellow: #f6c84c;
  --site-yellow-soft: #fff7dc;
  --site-red: #e8655d;
  --site-red-soft: #fff3f2;
}

body:not([data-page="home"]) {
  color: var(--text);
  background:
    radial-gradient(circle at 11% 7%, rgba(47, 128, 237, .11), transparent 28%),
    radial-gradient(circle at 91% 10%, rgba(47, 191, 154, .10), transparent 27%),
    linear-gradient(180deg, #fbfdff 0%, #f5fbff 48%, #eef7fc 100%) !important;
}

body:not([data-page="home"])::before {
  opacity: .075;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

body:not([data-page="home"]) .math-sky {
  opacity: .16;
}

body:not([data-page="home"]) .math-sky span {
  color: rgba(47, 128, 237, .24);
  text-shadow: 0 8px 20px rgba(47, 128, 237, .11);
}

body:not([data-page="home"]) .topbar {
  color: var(--text);
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(92, 123, 150, .20) !important;
  box-shadow: 0 16px 34px rgba(39, 78, 108, .12), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body:not([data-page="home"]) .brand,
body:not([data-page="home"]) .brand strong,
body:not([data-page="home"]) .section-head h1,
body:not([data-page="home"]) .section-head h2,
body:not([data-page="home"]) .workspace h1,
body:not([data-page="home"]) .workspace h2,
body:not([data-page="home"]) .workspace h3,
body:not([data-page="home"]) .portal-card strong,
body:not([data-page="home"]) .chapter-card h3,
body:not([data-page="home"]) .question-card h3,
body:not([data-page="home"]) .test-entry-card strong,
body:not([data-page="home"]) .learn-list-card strong,
body:not([data-page="home"]) .learn-map-card strong,
body:not([data-page="home"]) .report h3,
body:not([data-page="home"]) .manager-card strong,
body:not([data-page="home"]) .admin-panel-title h3,
body:not([data-page="home"]) .parent-panel-head strong {
  color: var(--text) !important;
}

body:not([data-page="home"]) .brand small,
body:not([data-page="home"]) .section-head p,
body:not([data-page="home"]) .lead,
body:not([data-page="home"]) p,
body:not([data-page="home"]) small,
body:not([data-page="home"]) .form-note,
body:not([data-page="home"]) .detail-row span,
body:not([data-page="home"]) .report p,
body:not([data-page="home"]) .chapter-card p,
body:not([data-page="home"]) .question-card p,
body:not([data-page="home"]) .test-entry-card p,
body:not([data-page="home"]) .learn-list-card p,
body:not([data-page="home"]) .parent-stat-card span,
body:not([data-page="home"]) .parent-stat-card small,
body:not([data-page="home"]) .admin-session span {
  color: var(--muted);
}

body:not([data-page="home"]) .nav,
body:not([data-page="home"]) .search-box,
body:not([data-page="home"]) .mode-switch,
body:not([data-page="home"]) .search-segment,
body:not([data-page="home"]) .login-mode-switch,
body:not([data-page="home"]) .reset-methods,
body:not([data-page="home"]) .admin-tabs,
body:not([data-page="home"]) .sort-segment,
body:not([data-page="home"]) .ask-mode-choice {
  background: rgba(255, 255, 255, .86) !important;
  border-color: rgba(115, 149, 178, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px rgba(39, 78, 108, .06) !important;
}

body:not([data-page="home"]) .nav a,
body:not([data-page="home"]) .search-box input,
body:not([data-page="home"]) .search-box button,
body:not([data-page="home"]) .mode-switch button,
body:not([data-page="home"]) .search-segment button,
body:not([data-page="home"]) .login-mode-switch button,
body:not([data-page="home"]) .reset-methods button,
body:not([data-page="home"]) .admin-tabs button,
body:not([data-page="home"]) .sort-segment button,
body:not([data-page="home"]) .ask-mode-choice button {
  color: #526a80 !important;
}

body:not([data-page="home"]) .workspace,
body:not([data-page="home"]) .math-widget,
body:not([data-page="home"]) .scan-box,
body:not([data-page="home"]) .portal-card,
body:not([data-page="home"]) .ask-card,
body:not([data-page="home"]) .ai-answer,
body:not([data-page="home"]) .report,
body:not([data-page="home"]) .chapter-card,
body:not([data-page="home"]) .question-card,
body:not([data-page="home"]) .wrong-item,
body:not([data-page="home"]) .login-panel,
body:not([data-page="home"]) .recharge-panel,
body:not([data-page="home"]) .profile-card,
body:not([data-page="home"]) .detail-card,
body:not([data-page="home"]) .link-card,
body:not([data-page="home"]) .manager-card,
body:not([data-page="home"]) .admin-pane,
body:not([data-page="home"]) .admin-question-item,
body:not([data-page="home"]) .student-detail-card,
body:not([data-page="home"]) .compact-admin-form,
body:not([data-page="home"]) .group-card,
body:not([data-page="home"]) .group-hero,
body:not([data-page="home"]) .group-stat-grid > div,
body:not([data-page="home"]) .evaluation-profile-card,
body:not([data-page="home"]) .evaluation-route-card,
body:not([data-page="home"]) .diagnosis-card,
body:not([data-page="home"]) .trend-card,
body:not([data-page="home"]) .parent-stat-card,
body:not([data-page="home"]) .account-hero-card,
body:not([data-page="home"]) .account-energy-card,
body:not([data-page="home"]) .mission-card,
body:not([data-page="home"]) .badge-card,
body:not([data-page="home"]) .collection-mini-card,
body:not([data-page="home"]) .admin-collapse-panel,
body:not([data-page="home"]) .admin-metric-card,
body:not([data-page="home"]) .admin-insight-card,
body:not([data-page="home"]) .admin-ops-grid > section,
body:not([data-page="home"]) .admin-mini-row,
body:not([data-page="home"]) .admin-ledger-row,
body:not([data-page="home"]) .admin-feedback-card,
body:not([data-page="home"]) .admin-feedback-row,
body:not([data-page="home"]) .learning-feedback-widget,
body:not([data-page="home"]) .learning-path-panel,
body:not([data-page="home"]) .learn-mini-card,
body:not([data-page="home"]) .learning-resource-grid a,
body:not([data-page="home"]) .learning-resource-grid button,
body:not([data-page="home"]) .compose-chapters label,
body:not([data-page="home"]) .comic-preview-grid figure,
body:not([data-page="home"]) .tree-grade,
body:not([data-page="home"]) .support-ticket-detail,
body:not([data-page="home"]) .support-panel,
body:not([data-page="home"]) .support-faq-item,
body:not([data-page="home"]) .test-entry-card,
body:not([data-page="home"]) .test-list-card,
body:not([data-page="home"]) .learn-list-card,
body:not([data-page="home"]) .learn-map-card,
body:not([data-page="home"]) .search-result-card,
body:not([data-page="home"]) .test-paper,
body:not([data-page="home"]) .selected-card,
body:not([data-page="home"]) .test-study-bridge,
body:not([data-page="home"]) .learn-home-section,
body:not([data-page="home"]) .learn-home-hero,
body:not([data-page="home"]) .learn-grade-suggestion,
body:not([data-page="home"]) .course-scaffold,
body:not([data-page="home"]) .learning-course-flow,
body:not([data-page="home"]) .learning-course-intro,
body:not([data-page="home"]) .learning-method-summary,
body:not([data-page="home"]) .learning-course-unit,
body:not([data-page="home"]) .course-practice-box,
body:not([data-page="home"]) .course-animation-box,
body:not([data-page="home"]) .course-resource-panel,
body:not([data-page="home"]) .course-now-main,
body:not([data-page="home"]) .learning-course-now,
body:not([data-page="home"]) .evaluation-fold,
body:not([data-page="home"]) .learn-catalog-controls,
body:not([data-page="home"]) .practice-catalog-controls,
body:not([data-page="home"]) .learn-home-panel,
body:not([data-page="home"]) .learn-catalog-home,
body:not([data-page="home"]) .detail-panel,
body:not([data-page="home"]) .student-task-row,
body:not([data-page="home"]) .student-ai-summary,
body:not([data-page="home"]) .diagnosis-focus-grid > div,
body:not([data-page="home"]) .parent-reminder,
body:not([data-page="home"]) .parent-recharge-controls,
body:not([data-page="home"]) .parent-list-item,
body:not([data-page="home"]) .parent-review-list,
body:not([data-page="home"]) .parent-focus-list,
body:not([data-page="home"]) .parent-diagnosis-toolbar,
body:not([data-page="home"]) .parent-report-view,
body:not([data-page="home"]) .parent-diagnosis-panel,
body:not([data-page="home"]) .parent-ledger-row,
body:not([data-page="home"]) .parent-referral-code,
body:not([data-page="home"]) .parent-referral-panel,
body:not([data-page="home"]) .parent-membership-panel,
body:not([data-page="home"]) .ai-report-toolbar,
body:not([data-page="home"]) .ai-parent-summary,
body:not([data-page="home"]) .ai-report-section,
body:not([data-page="home"]) .ai-evaluation-block,
body:not([data-page="home"]) .membership-card,
body:not([data-page="home"]) .test-recommend-head,
body:not([data-page="home"]) .test-recommend-card,
body:not([data-page="home"]) .parent-hero-card,
body:not([data-page="home"]) .parent-panel,
body:not([data-page="home"]) .parent-point-summary span,
body:not([data-page="home"]) .activity-list a,
body:not([data-page="home"]) .site-page-shell {
  color: var(--text) !important;
  background: var(--surface-gradient) !important;
  border-color: var(--line) !important;
  box-shadow: var(--soft-shadow);
}

body:not([data-page="home"]) .page-motion,
body:not([data-page="home"]) .eval-path-visual,
body:not([data-page="home"]) .study-visual,
body:not([data-page="home"]) .portal-flow,
body:not([data-page="home"]) .ai-bubbles,
body:not([data-page="home"]) .admin-quick-panel,
body:not([data-page="home"]) .admin-launch-check,
body:not([data-page="home"]) .group-welcome,
body:not([data-page="home"]) .result-scene,
body:not([data-page="home"]) .learn-all-map[open],
body:not([data-page="home"]) .learning-feedback-widget.learning-feedback-collapsed[open],
body:not([data-page="home"]) .student-admin-tools,
body:not([data-page="home"]) .ai-report-shell,
body:not([data-page="home"]) .test-study-map,
body:not([data-page="home"]) .learn-home-map,
body:not([data-page="home"]) .student-ai-summary,
body:not([data-page="home"]) .test-recommend-head,
body:not([data-page="home"]) .parent-hero-card,
body:not([data-page="home"]) .ai-report-toolbar,
body:not([data-page="home"]) .ask-drop-zone,
body:not([data-page="home"]) .upload-zone {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
  border-color: rgba(106, 143, 174, .20) !important;
  box-shadow: var(--soft-shadow);
}

body:not([data-page="home"]) input,
body:not([data-page="home"]) select,
body:not([data-page="home"]) textarea,
body:not([data-page="home"]) .student-answer-editor,
body:not([data-page="home"]) .visual-select-button,
body:not([data-page="home"]) .admin-json-config textarea,
body:not([data-page="home"]) .ask-composer textarea {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

body:not([data-page="home"]) input::placeholder,
body:not([data-page="home"]) textarea::placeholder {
  color: #8aa0b3 !important;
}

body:not([data-page="home"]) input:focus,
body:not([data-page="home"]) select:focus,
body:not([data-page="home"]) textarea:focus,
body:not([data-page="home"]) .visual-select-button:focus {
  border-color: rgba(47, 128, 237, .44) !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, .10) !important;
}

body:not([data-page="home"]) .portal-card:hover,
body:not([data-page="home"]) .test-entry-card:hover,
body:not([data-page="home"]) .learn-list-card:hover,
body:not([data-page="home"]) .learn-map-card:hover,
body:not([data-page="home"]) .test-list-card:hover,
body:not([data-page="home"]) .search-result-card:hover,
body:not([data-page="home"]) .link-card:hover,
body:not([data-page="home"]) .learn-mini-card:hover,
body:not([data-page="home"]) .compose-chapters label:hover,
body:not([data-page="home"]) .support-ticket-card:hover,
body:not([data-page="home"]) .parent-panel:hover,
body:not([data-page="home"]) .student-task-row:hover,
body:not([data-page="home"]) .parent-list-item:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f1f9ff 100%) !important;
  border-color: var(--line-strong) !important;
  box-shadow: 0 14px 30px rgba(47, 128, 237, .12);
}

body:not([data-page="home"]) .nav a:hover,
body:not([data-page="home"]) .nav a.active,
body:not([data-page="home"]) .search-box button,
body:not([data-page="home"]) .mode-switch button.active,
body:not([data-page="home"]) .search-segment button.active,
body:not([data-page="home"]) .login-mode-switch button.active,
body:not([data-page="home"]) .reset-methods button.active,
body:not([data-page="home"]) .admin-tabs button.active,
body:not([data-page="home"]) .sort-segment button.active,
body:not([data-page="home"]) .ask-mode-choice button.active,
body:not([data-page="home"]) .test-button.active,
body:not([data-page="home"]) .primary,
body:not([data-page="home"]) button.primary,
body:not([data-page="home"]) .primary-link-button,
body:not([data-page="home"]) .secondary-button.primary,
body:not([data-page="home"]) .login-panel button[type="submit"],
body:not([data-page="home"]) .admin-form button[type="submit"],
body:not([data-page="home"]) .ask-composer button[type="submit"],
body:not([data-page="home"]) .test-paper button[type="submit"],
body:not([data-page="home"]) .wrong-retry-actions button[type="submit"],
body:not([data-page="home"]) .search-page-form button[type="submit"],
body:not([data-page="home"]) .ask-style-select select,
body:not([data-page="home"]) .ask-style-select .visual-select-button {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-blue-strong)) !important;
  border-color: rgba(47, 128, 237, .32) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .20) !important;
}

body:not([data-page="home"]) .secondary,
body:not([data-page="home"]) .secondary-button,
body:not([data-page="home"]) .user-pill,
body:not([data-page="home"]) .learn-card-tags span,
body:not([data-page="home"]) .tag,
body:not([data-page="home"]) .portal-tags em,
body:not([data-page="home"]) .route-chip-list span,
body:not([data-page="home"]) .route-chip-list a,
body:not([data-page="home"]) .practice-status-pill,
body:not([data-page="home"]) .wrong-status-chip,
body:not([data-page="home"]) .reinforce-tier-title,
body:not([data-page="home"]) .learning-feedback-summary .learning-feedback-open-label,
body:not([data-page="home"]) .learn-all-map summary,
body:not([data-page="home"]) .learn-mini-card span,
body:not([data-page="home"]) .json-details summary,
body:not([data-page="home"]) .tree-grade summary,
body:not([data-page="home"]) .tree-grade-title,
body:not([data-page="home"]) .test-recommend-card span,
body:not([data-page="home"]) .companion-control-stats a,
body:not([data-page="home"]) .companion-control-stats span {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

body:not([data-page="home"]) .learn-map-card.current,
body:not([data-page="home"]) .learn-map-card.active,
body:not([data-page="home"]) .test-recommend-card.free,
body:not([data-page="home"]) .matrix-current,
body:not([data-page="home"]) .question-score-badge,
body:not([data-page="home"]) .admin-launch-check-item.warn,
body:not([data-page="home"]) .admin-feedback-card.needs-work,
body:not([data-page="home"]) .admin-feedback-row.down,
body:not([data-page="home"]) .parent-stat-card.warning,
body:not([data-page="home"]) .parent-reminder.warning,
body:not([data-page="home"]) .parent-reminder.payment {
  color: #7d560b !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(246, 200, 76, .18), transparent 36%),
    linear-gradient(135deg, var(--site-yellow-soft) 0%, #ffffff 100%) !important;
  border-color: rgba(246, 200, 76, .48) !important;
  box-shadow: 0 12px 26px rgba(246, 200, 76, .12) !important;
}

body:not([data-page="home"]) .learn-map-card.current span,
body:not([data-page="home"]) .learn-map-card.current small,
body:not([data-page="home"]) .learn-map-card.active span,
body:not([data-page="home"]) .learn-map-card.active small,
body:not([data-page="home"]) .matrix-current .matrix-symbol {
  color: #1d2f43 !important;
  background: linear-gradient(135deg, var(--site-yellow-soft), var(--site-yellow)) !important;
  border-color: rgba(246, 200, 76, .45) !important;
}

body:not([data-page="home"]) .learn-map-card.done,
body:not([data-page="home"]) .test-list-card.completed,
body:not([data-page="home"]) .badge-card.unlocked,
body:not([data-page="home"]) .mission-card.active,
body:not([data-page="home"]) .admin-feedback-row.up,
body:not([data-page="home"]) .support-replied,
body:not([data-page="home"]) .parent-reminder.ok,
body:not([data-page="home"]) .parent-reminder.privacy,
body:not([data-page="home"]) .parent-stat-card.accent,
body:not([data-page="home"]) .membership-card.featured,
body:not([data-page="home"]) .ai-parent-summary,
body:not([data-page="home"]) .ai-report-section.ai-comment-section {
  color: var(--site-green-strong) !important;
  background: linear-gradient(135deg, #f0fff8 0%, #ffffff 100%) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

body:not([data-page="home"]) .learn-map-card.done span,
body:not([data-page="home"]) .learning-course-steps button.done,
body:not([data-page="home"]) .companion-task.done span,
body:not([data-page="home"]) .companion-chat-message.student {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-green), var(--site-green-strong)) !important;
  border-color: rgba(47, 191, 154, .32) !important;
}

body:not([data-page="home"]) .learn-map-card.locked,
body:not([data-page="home"]) .badge-card.locked,
body:not([data-page="home"]) .learning-course-steps button.locked {
  color: #7a8b9a !important;
  background: #f2f6f9 !important;
  border-color: rgba(115, 149, 178, .22) !important;
  box-shadow: none;
}

body:not([data-page="home"]) .learn-map-card.locked span,
body:not([data-page="home"]) .learn-map-card.locked small,
body:not([data-page="home"]) .learning-course-steps button.locked b {
  color: #7a8b9a !important;
  background: rgba(255, 255, 255, .68) !important;
  border-color: rgba(115, 149, 178, .18) !important;
}

body:not([data-page="home"]) .form-error,
body:not([data-page="home"]) .wrong-analysis-card,
body:not([data-page="home"]) .result-scene.retry,
body:not([data-page="home"]) .error-state,
body:not([data-page="home"]) .danger,
body:not([data-page="home"]) .wrong-translation {
  color: #9b3833 !important;
  background: linear-gradient(135deg, var(--site-red-soft) 0%, #ffffff 100%) !important;
  border-color: rgba(232, 101, 93, .28) !important;
}

body:not([data-page="home"]) .admin-table th {
  color: #2f6f9b !important;
  background: #f0f7fc !important;
  border-color: rgba(106, 143, 174, .18) !important;
}

body:not([data-page="home"]) .admin-table td,
body:not([data-page="home"]) .option-label,
body:not([data-page="home"]) .test-button,
body:not([data-page="home"]) .visual-select-option,
body:not([data-page="home"]) .learning-feedback-source,
body:not([data-page="home"]) .learning-feedback-thumb,
body:not([data-page="home"]) .group-member-card,
body:not([data-page="home"]) .detail-row,
body:not([data-page="home"]) .support-meta div,
body:not([data-page="home"]) .support-replies div,
body:not([data-page="home"]) .admin-list-filters label,
body:not([data-page="home"]) .admin-search-line,
body:not([data-page="home"]) .admin-config-group summary,
body:not([data-page="home"]) .admin-json-config,
body:not([data-page="home"]) .admin-row {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(106, 143, 174, .18) !important;
}

body:not([data-page="home"]) .site-footer,
body:not([data-page="home"]) .site-footer a {
  color: #6f8294 !important;
}

/* Learn page task map polish: keep task state colors meaningful while removing
   the extra fill behind the all-tasks drawer. */
body[data-page="learn"] .learn-all-map,
body[data-page="learn"] .learn-all-map[open] {
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learn-all-map summary {
  min-height: 34px;
  padding: 4px 0 !important;
  color: var(--site-green-strong) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learn-all-map summary::after {
  color: #2fbf9a;
  background: rgba(47, 191, 154, .08);
  border-color: rgba(47, 191, 154, .18);
}

body[data-page="learn"] .learn-home-map .map-dot {
  width: 18px;
  height: 18px;
  border: 0 !important;
  background: linear-gradient(135deg, #5fb2f2, #7bd8f4);
  box-shadow:
    0 0 0 4px rgba(95, 178, 242, .14),
    0 8px 18px rgba(47, 128, 237, .16);
}

body[data-page="learn"] .learn-home-map .map-dot.active {
  background: linear-gradient(135deg, #ffd86a, #f5b94e);
  box-shadow:
    0 0 0 4px rgba(255, 216, 106, .24),
    0 8px 18px rgba(246, 184, 74, .20);
}

body[data-page="learn"] .learn-home-map .map-dot:nth-of-type(3) {
  background: linear-gradient(135deg, #4fb6ee, #2f80ed);
  box-shadow:
    0 0 0 4px rgba(47, 128, 237, .16),
    0 8px 18px rgba(47, 128, 237, .18);
}

body[data-page="learn"] .learn-home-map .map-dot:nth-of-type(5) {
  background: linear-gradient(135deg, #60d9b0, #2fbf9a);
  box-shadow:
    0 0 0 4px rgba(47, 191, 154, .16),
    0 8px 18px rgba(47, 191, 154, .18);
}

/* Non-home selection controls: light, consistent, and distinct from primary
   action buttons. Homepage keeps its own navigation styling. */
body:not([data-page="home"]) .mode-switch,
body:not([data-page="home"]) .search-segment,
body:not([data-page="home"]) .login-mode-switch,
body:not([data-page="home"]) .reset-methods,
body:not([data-page="home"]) .admin-tabs,
body:not([data-page="home"]) .sort-segment,
body:not([data-page="home"]) .ask-mode-choice,
body:not([data-page="home"]) .course-resource-tabs {
  gap: 5px !important;
  padding: 5px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .92)) !important;
  border: 1px solid rgba(106, 143, 174, .24) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 20px rgba(39, 78, 108, .06) !important;
}

body:not([data-page="home"]) .mode-switch button,
body:not([data-page="home"]) .search-box .search-segment button,
body:not([data-page="home"]) .search-segment button,
body:not([data-page="home"]) .login-mode-switch button,
body:not([data-page="home"]) .reset-methods button,
body:not([data-page="home"]) .admin-tabs button,
body:not([data-page="home"]) .sort-segment button,
body:not([data-page="home"]) .ask-mode-choice button,
body:not([data-page="home"]) .course-resource-tabs button,
body:not([data-page="home"]) .test-button,
body:not([data-page="home"]) .formula-toggle-button,
body:not([data-page="home"]) .course-practice-options button {
  color: #486174 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

body:not([data-page="home"]) .mode-switch button:hover,
body:not([data-page="home"]) .search-box .search-segment button:hover,
body:not([data-page="home"]) .search-segment button:hover,
body:not([data-page="home"]) .login-mode-switch button:hover,
body:not([data-page="home"]) .reset-methods button:hover,
body:not([data-page="home"]) .admin-tabs button:hover,
body:not([data-page="home"]) .sort-segment button:hover,
body:not([data-page="home"]) .ask-mode-choice button:hover,
body:not([data-page="home"]) .course-resource-tabs button:hover,
body:not([data-page="home"]) .test-button:hover,
body:not([data-page="home"]) .formula-toggle-button:hover,
body:not([data-page="home"]) .course-practice-options button:hover {
  color: var(--site-blue-strong) !important;
  background: #eef6ff !important;
  border-color: rgba(47, 128, 237, .18) !important;
}

body:not([data-page="home"]) .mode-switch button.active,
body:not([data-page="home"]) .search-box .search-segment button.active,
body:not([data-page="home"]) .search-segment button.active,
body:not([data-page="home"]) .login-mode-switch button.active,
body:not([data-page="home"]) .reset-methods button.active,
body:not([data-page="home"]) .admin-tabs button.active,
body:not([data-page="home"]) .sort-segment button.active,
body:not([data-page="home"]) .ask-mode-choice button.active,
body:not([data-page="home"]) .course-resource-tabs button.active,
body:not([data-page="home"]) .test-button.active,
body:not([data-page="home"]) .formula-toggle-button.active,
body:not([data-page="home"]) .course-practice-options button.selected {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .18) !important;
}

body[data-page="learn"] .course-practice-options button {
  color: #23425a !important;
  background: linear-gradient(135deg, #f7fbff, #eef8f5) !important;
  border: 1px solid rgba(47, 128, 237, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8) !important;
  cursor: pointer;
}

body[data-page="learn"] .course-practice-options button:hover {
  color: #2369c9 !important;
  background: linear-gradient(135deg, #edf6ff, #e9fbf4) !important;
  border-color: rgba(47, 128, 237, .34) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .12) !important;
}

body[data-page="learn"] .course-practice-options button.selected {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .45) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .22) !important;
}

body:not([data-page="home"]) select,
body:not([data-page="home"]) .visual-select-button {
  min-height: 46px;
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  border: 1px solid rgba(106, 143, 174, .28) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 8px 18px rgba(39, 78, 108, .05) !important;
  outline: none !important;
}

body:not([data-page="home"]) select:not([multiple]) {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #5f7488 50%),
    linear-gradient(135deg, #5f7488 50%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 14px) 50%,
    0 0 !important;
  background-size: 8px 8px, 8px 8px, 100% 100% !important;
  background-repeat: no-repeat !important;
}

body:not([data-page="home"]) select:focus,
body:not([data-page="home"]) .visual-select-button:focus,
body:not([data-page="home"]) .visual-select.open .visual-select-button {
  border-color: rgba(47, 128, 237, .48) !important;
  box-shadow:
    0 0 0 4px rgba(47, 128, 237, .10),
    0 12px 26px rgba(47, 128, 237, .10) !important;
}

body:not([data-page="home"]) select option {
  color: var(--text);
  background: #ffffff;
}

body:not([data-page="home"]) select option:checked {
  color: #12314c;
  background: #eaf4ff;
}

body:not([data-page="home"]) .visual-select-menu {
  padding: 7px !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .26) !important;
  box-shadow: 0 18px 42px rgba(39, 78, 108, .16) !important;
}

body:not([data-page="home"]) .visual-select-option {
  color: #486174 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

body:not([data-page="home"]) .visual-select-option:hover,
body:not([data-page="home"]) .visual-select-option:focus {
  color: var(--site-blue-strong) !important;
  background: #eef6ff !important;
  border-color: rgba(47, 128, 237, .16) !important;
  transform: none !important;
}

body:not([data-page="home"]) .visual-select-option.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .26) !important;
}

body:not([data-page="home"]) .ask-style-select select,
body:not([data-page="home"]) .ask-style-select .visual-select-button {
  color: var(--text) !important;
  background:
    linear-gradient(45deg, transparent 50%, #5f7488 50%),
    linear-gradient(135deg, #5f7488 50%, transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 14px) 50%,
    0 0 !important;
  background-size: 8px 8px, 8px 8px, 100% 100% !important;
  background-repeat: no-repeat !important;
  border-color: rgba(106, 143, 174, .28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 8px 18px rgba(39, 78, 108, .05) !important;
}

/* Homepage search segment alignment: match the selection style used elsewhere
   while keeping the actual search submit button as a primary action. */
body[data-page="home"] .search-box .search-segment {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 250, 255, .92)) !important;
  border-color: rgba(106, 143, 174, .24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 8px 20px rgba(39, 78, 108, .06) !important;
}

body[data-page="home"] .search-box .search-segment button {
  color: #486174 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .search-box .search-segment button:hover {
  color: var(--site-blue-strong) !important;
  background: #eef6ff !important;
  border-color: rgba(47, 128, 237, .18) !important;
}

body[data-page="home"] .search-box .search-segment button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .18) !important;
}

/* Topbar blue-green unification. Keep semantic learning-card colors elsewhere,
   but make the global header controls read as one coherent system. */
.topbar .search-submit,
.topbar .handwrite-fab,
.topbar .nav a.active,
.topbar .nav a:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .18) !important;
}

.topbar .handwrite-fab svg,
.topbar .search-submit .search-icon {
  color: currentColor;
}

.topbar .user-pill {
  color: var(--site-green-strong) !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .12)) !important;
  border-color: rgba(47, 191, 154, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(47, 191, 154, .08) !important;
}

.topbar .user-pill:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .16) !important;
}

body .topbar .search-submit,
body .topbar .search-box .search-submit,
body .topbar > .handwrite-fab,
body .topbar .nav a.active,
body .topbar .nav a:hover,
body .topbar .user-pill {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .18) !important;
}

body[data-page="home"] .topbar .search-submit,
body[data-page="home"] .topbar .search-box .search-submit,
body[data-page="home"] .topbar > .handwrite-fab,
body[data-page="home"] .topbar .nav a.active,
body[data-page="home"] .topbar .nav a:hover,
body[data-page="home"] .topbar .user-pill {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .18) !important;
}

/* Ask page blue-green polish. */
body[data-page="ask"] .workspace {
  background:
    radial-gradient(circle at 88% 18%, rgba(47, 191, 154, .08), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(47, 128, 237, .06), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
  border-color: rgba(106, 143, 174, .18) !important;
}

body[data-page="ask"] .section-head {
  align-items: end;
}

body[data-page="ask"] .section-head .eyebrow {
  color: var(--site-blue-strong);
  letter-spacing: .02em;
}

body[data-page="ask"] .section-head h1 {
  color: var(--text);
}

body[data-page="ask"] .ask-subline {
  color: #18876e !important;
  opacity: .92;
}

body[data-page="ask"] .section-head p.ask-subline {
  color: #18876e !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  animation: titleRise 620ms ease 120ms both;
  opacity: .96;
}

body[data-page="ask"] .section-actions .secondary {
  color: var(--site-green-strong) !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .06), rgba(47, 191, 154, .10)) !important;
  border-color: rgba(47, 191, 154, .26) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(47, 191, 154, .06) !important;
}

body[data-page="ask"] .section-actions .secondary:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .30) !important;
}

body[data-page="ask"] .ask-card,
body[data-page="ask"] .ai-guide-panel {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: 0 16px 36px rgba(39, 78, 108, .08) !important;
}

body[data-page="ask"] .scan-box.compact-scan {
  min-height: 196px;
  border-style: dashed;
  border-color: rgba(47, 128, 237, .22) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(47, 191, 154, .07), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(244, 251, 255, .94)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.86), 0 12px 28px rgba(47, 128, 237, .06) !important;
}

body[data-page="ask"] .scan-box.compact-scan::before {
  background: linear-gradient(110deg, transparent 0%, rgba(47, 128, 237, .06) 44%, rgba(47, 191, 154, .08) 54%, transparent 66%);
}

body[data-page="ask"] .scan-box.compact-scan strong,
body[data-page="ask"] .scan-box.compact-scan small {
  position: relative;
  z-index: 1;
}

body[data-page="ask"] .scan-box.compact-scan strong {
  color: var(--text);
  font-size: clamp(23px, 1.8vw, 30px);
}

body[data-page="ask"] .scan-box.compact-scan small {
  max-width: 720px;
  color: #657b90 !important;
  font-weight: 650;
}

body[data-page="ask"] .scan-box.compact-scan .scan-line {
  left: 0;
  right: 0;
  top: 34px;
  height: 3px;
  opacity: .74;
  background:
    linear-gradient(90deg, transparent 0%, rgba(47, 128, 237, .18) 18%, rgba(47, 128, 237, .92) 43%, rgba(47, 191, 154, .92) 58%, rgba(47, 191, 154, .18) 82%, transparent 100%);
  box-shadow:
    0 0 18px rgba(47, 128, 237, .22),
    0 0 30px rgba(47, 191, 154, .18);
  animation: askPageLaserScan 3.2s ease-in-out infinite;
}

body[data-page="ask"] .ask-style-select {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(39, 78, 108, .05) !important;
}

body[data-page="ask"] .ask-style-select span {
  color: #526a80 !important;
}

body[data-page="ask"] .ask-composer textarea {
  color: var(--text) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(249, 253, 255, .96)) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(39, 78, 108, .045) !important;
}

body[data-page="ask"] .ask-composer textarea::placeholder {
  color: #8ba0b3 !important;
}

body[data-page="ask"] .composer-tools .icon-button {
  color: var(--site-blue-strong);
  border-color: rgba(47, 128, 237, .18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .72), transparent 34%),
    linear-gradient(135deg, #ffffff, #eef8ff) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .12) !important;
}

body[data-page="ask"] .composer-tools .icon-button:hover {
  color: #ffffff;
  border-color: rgba(47, 128, 237, .28);
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="ask"] .composer-tools .send-icon {
  color: #ffffff;
  border-color: rgba(47, 128, 237, .28);
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .18) !important;
}

body[data-page="ask"] .send-icon::after {
  background: rgba(255, 255, 255, .86);
}

/* Ask page control alignment reset. */
body[data-page="ask"] .section-head > div > .eyebrow {
  display: none !important;
}

body[data-page="ask"] .ask-style-select {
  gap: 18px;
  align-items: center;
  width: 260px;
  min-height: 58px;
  padding: 5px 7px 5px 18px;
}

body[data-page="ask"] .ask-style-select .visual-select {
  flex: 0 0 92px;
  width: 92px;
}

body[data-page="ask"] .ask-style-select select.native-select-hidden {
  position: absolute !important;
  inset: auto 7px 5px auto !important;
  width: 92px !important;
  height: 46px !important;
  min-height: 46px !important;
  opacity: 0 !important;
}

body[data-page="ask"] .ask-style-select .visual-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 46px;
  padding: 0 30px 0 14px;
  color: var(--text) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  border-color: rgba(106, 143, 174, .28) !important;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(39, 78, 108, .05) !important;
}

body[data-page="ask"] .ask-style-select .visual-select-button::before {
  right: 14px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid #526a80;
  border-bottom: 2px solid #526a80;
  transform: translateY(-60%) rotate(45deg);
}

body[data-page="ask"] .ask-style-select .visual-select-button::after {
  content: none !important;
  display: none !important;
}

body[data-page="ask"] .composer-tools {
  right: 14px;
  bottom: 14px;
  gap: 9px;
}

body[data-page="ask"] .composer-tools .icon-button {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  overflow: hidden;
}

body[data-page="ask"] .composer-tools .icon-button::before,
body[data-page="ask"] .composer-tools .icon-button::after {
  box-sizing: border-box;
  pointer-events: none;
}

body[data-page="ask"] .composer-tools .image-add-icon::before {
  left: 11px;
  top: 13px;
  width: 20px;
  height: 15px;
  border-width: 2px;
  border-color: currentColor;
  border-radius: 4px;
}

body[data-page="ask"] .composer-tools .image-add-icon::after {
  left: 15px;
  top: 23px;
  width: 12px;
  height: 7px;
  background:
    linear-gradient(135deg, transparent 46%, currentColor 48% 58%, transparent 60%),
    linear-gradient(45deg, transparent 36%, currentColor 38% 50%, transparent 52%);
  transform: none;
}

body[data-page="ask"] .composer-tools .voice-icon::before {
  left: 16px;
  top: 9px;
  width: 11px;
  height: 20px;
  border-width: 2px;
  border-color: currentColor;
  border-radius: 10px;
}

body[data-page="ask"] .composer-tools .voice-icon::after {
  left: 12px;
  top: 22px;
  width: 19px;
  height: 13px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: none;
  box-shadow: 9px 11px 0 -8px currentColor;
  transform: none;
}

body[data-page="ask"] .composer-tools .send-icon::before {
  left: 11px;
  top: 11px;
  width: 22px;
  height: 22px;
  background: currentColor;
  clip-path: polygon(3% 43%, 96% 4%, 60% 94%, 45% 58%);
  transform: rotate(-9deg);
}

body[data-page="ask"] .composer-tools .send-icon::after {
  left: 16px;
  top: 22px;
  width: 14px;
  height: 2px;
  background: rgba(255, 255, 255, .86);
  border: 0;
  transform: rotate(-30deg);
}

/* Ask page control proportion and icon polish. */
body[data-page="ask"] .workspace {
  padding-top: 20px !important;
}

body[data-page="ask"] .section-head h1 {
  margin-top: 0;
}

body[data-page="ask"] .ask-style-select {
  gap: 14px;
  width: 240px;
  min-height: 48px;
  padding: 4px 6px 4px 16px;
}

body[data-page="ask"] .ask-style-select .visual-select {
  flex-basis: 84px;
  width: 84px;
}

body[data-page="ask"] .ask-style-select select.native-select-hidden {
  inset: auto 6px 4px auto !important;
  width: 84px !important;
  height: 40px !important;
  min-height: 40px !important;
}

body[data-page="ask"] .ask-style-select .visual-select-button {
  width: 84px;
  min-height: 40px;
  padding: 0 27px 0 12px;
  border-radius: 14px;
}

body[data-page="ask"] .ask-style-select .visual-select-button::before {
  right: 13px;
  width: 8px;
  height: 8px;
}

body[data-page="ask"] .composer-tools .image-add-icon {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .72), transparent 34%),
    linear-gradient(135deg, #ffffff, #eef8ff) !important;
}

body[data-page="ask"] .composer-tools .image-add-icon::before {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

body[data-page="ask"] .composer-tools .image-add-icon::after {
  left: 50%;
  top: 50%;
  width: 2px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

body[data-page="ask"] .composer-tools .send-icon::before {
  left: 50%;
  top: 50%;
  width: 23px;
  height: 23px;
  transform: translate(-50%, -52%) rotate(-9deg);
}

body[data-page="ask"] .composer-tools .send-icon::after {
  content: none !important;
  display: none !important;
}

body[data-page="ask"] .ai-guide-panel:has(.ai-guide-empty) {
  background:
    radial-gradient(circle at 50% 38%, rgba(47, 191, 154, .10), transparent 28%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}

body[data-page="ask"] .ai-guide-empty {
  color: #657b90;
}

body[data-page="ask"] .ai-guide-empty::before {
  width: min(214px, 72vw);
  height: 150px;
  background: url("/assets/illustrations/ai-teacher-class.svg?v=20260619-bluegreen-guide") center / contain no-repeat;
  filter: drop-shadow(0 18px 30px rgba(47, 128, 237, .12));
}

body[data-page="ask"] .ai-guide-empty .eyebrow {
  color: var(--site-blue-strong);
  letter-spacing: .04em;
}

body[data-page="ask"] .ai-guide-empty h2 {
  color: var(--text);
}

@keyframes askPageLaserScan {
  0%, 100% {
    transform: translateY(0);
    opacity: .44;
  }
  48%, 56% {
    transform: translateY(118px);
    opacity: .92;
  }
}

/* Learn detail page blue-green commercial polish. */
body[data-page="learn"] .focused-course-detail,
body[data-page="learn"] .learning-path-panel,
body[data-page="learn"] .learning-course-flow,
body[data-page="learn"] .learning-course-unit,
body[data-page="learn"] .course-animation-box,
body[data-page="learn"] .learning-feedback-widget,
body[data-page="learn"] .learn-list-card.compact-learn-card {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .96)) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: 0 16px 36px rgba(39, 78, 108, .08) !important;
}

body[data-page="learn"] .learning-course-head {
  background:
    radial-gradient(circle at 0% 50%, rgba(47, 191, 154, .10), transparent 34%),
    linear-gradient(90deg, rgba(47, 128, 237, .08), transparent 44%) !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14);
}

body[data-page="learn"] .learning-course-title-meta,
body[data-page="learn"] .learn-card-unit {
  color: #2a9f80 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

body[data-page="learn"] .learning-course-head h3,
body[data-page="learn"] .learn-list-card.compact-learn-card strong {
  color: var(--text) !important;
}

body[data-page="learn"] .focused-course-back.learning-course-back {
  color: var(--site-blue-strong) !important;
  background: transparent !important;
  border-color: transparent !important;
  text-shadow: none !important;
}

body[data-page="learn"] .focused-course-back.learning-course-back:hover {
  color: var(--site-green-strong) !important;
}

body[data-page="learn"] .learning-course-now,
body[data-page="learn"] .course-now-main {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .96)) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 24px rgba(39, 78, 108, .06) !important;
}

body[data-page="learn"] .course-now-station {
  color: #18876e !important;
  background: linear-gradient(135deg, rgba(47, 191, 154, .12), rgba(47, 128, 237, .07)) !important;
  border-color: rgba(47, 191, 154, .24) !important;
}

body[data-page="learn"] .course-now-main strong {
  color: var(--text) !important;
}

body[data-page="learn"] .course-now-progress {
  background: #dbe8f1 !important;
  box-shadow: inset 0 1px 2px rgba(39, 78, 108, .10) !important;
}

body[data-page="learn"] .course-now-progress i {
  background: linear-gradient(90deg, var(--site-blue), var(--site-green), #dce96f) !important;
  box-shadow: 0 0 14px rgba(47, 191, 154, .18) !important;
}

body[data-page="learn"] .learning-course-route-drawer summary {
  color: var(--text) !important;
}

body[data-page="learn"] .learning-course-route-drawer summary em,
body[data-page="learn"] .learning-course-route-drawer summary::after {
  color: #2a9f80 !important;
  text-shadow: none !important;
}

body[data-page="learn"] .learning-course-steps button.active,
body[data-page="learn"] .learning-course-steps button.progress {
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .12)) !important;
  border-color: rgba(47, 191, 154, .28) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .08) !important;
}

body[data-page="learn"] .learning-course-steps button.active b,
body[data-page="learn"] .learning-course-steps button.progress b {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="learn"] .learning-course-steps button.locked {
  color: #7a8b9a !important;
  background: #f4f8fb !important;
  border-color: rgba(115, 149, 178, .20) !important;
  opacity: .62;
}

body[data-page="learn"] .learning-course-steps button.locked b {
  color: #7a8b9a !important;
  background: rgba(255, 255, 255, .72) !important;
}

body[data-page="learn"] .course-step-actions button {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .14) !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite {
  background: rgba(255, 255, 255, .84) !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-feedback-summary {
  color: #526a80 !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb {
  color: #526a80 !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .22) !important;
  box-shadow: 0 8px 18px rgba(39, 78, 108, .05) !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb:hover,
body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb.active {
  color: #18876e !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .06), rgba(47, 191, 154, .12)) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-open-label {
  color: #18876e !important;
}

body[data-page="learn"] .learn-list-card.compact-learn-card {
  color: var(--text) !important;
}

/* Learn page quiet labels: remove decorative fills and capsule outlines. */
body[data-page="learn"] .learning-course-head {
  background: transparent !important;
  border-bottom-color: rgba(106, 143, 174, .08) !important;
}

body[data-page="learn"] .learning-course-title-meta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb {
  color: #5a6f84 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 4px !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb:hover,
body[data-page="learn"] .learning-feedback-summary .learning-feedback-thumb.active {
  color: #18876e !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Learn feedback layout: keep the comment header, actions, input, and footer in clean rows. */
body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite {
  display: grid !important;
  gap: 0 !important;
  min-height: 58px !important;
  overflow: hidden !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite[open] {
  gap: 12px !important;
  padding: 14px 16px 16px !important;
}

body[data-page="learn"] .learning-feedback-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  min-height: 56px !important;
  padding: 0 14px !important;
}

body[data-page="learn"] .learning-feedback-widget[open] .learning-feedback-summary {
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: space-between !important;
}

body[data-page="learn"] .learning-feedback-title {
  margin-right: auto !important;
  color: var(--text) !important;
  font-size: 1.05rem !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
}

body[data-page="learn"] .learning-feedback-widget:not([open]) .learning-feedback-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-actions {
  margin-left: 0 !important;
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-open-label,
body[data-page="learn"] .learning-feedback-summary::after {
  flex: 0 0 auto !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite textarea {
  min-height: 112px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  line-height: 1.5 !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite .learning-feedback-foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite .learning-feedback-status {
  color: #5f748a !important;
  line-height: 1.45 !important;
}

body[data-page="learn"] .learning-feedback-widget.learning-feedback-lite .secondary-button {
  flex: 0 0 auto !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  color: #18876e !important;
  background: rgba(234, 250, 245, .9) !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Learn course structure simplification: keep one page shell and one course surface. */
body[data-page="learn"] .focused-course-detail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-path-panel {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-course-flow {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .985), rgba(248, 252, 255, .97)) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  box-shadow: 0 16px 36px rgba(39, 78, 108, .08) !important;
}

body[data-page="learn"] .learning-course-flow.animation-active {
  padding: clamp(18px, 2.2vw, 26px) !important;
}

body[data-page="learn"] .learning-course-flow.animation-active .learning-course-stage {
  gap: 12px !important;
}

body[data-page="learn"] .learning-course-flow.animation-active .learning-course-unit.learning-course-intro-card,
body[data-page="learn"] .learning-course-flow.animation-active .compact-course-map,
body[data-page="learn"] .learning-course-flow.animation-active .course-resource-viewer,
body[data-page="learn"] .learning-course-flow.animation-active .course-resource-pane,
body[data-page="learn"] .learning-course-flow.animation-active .course-animation-box {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-course-flow.animation-active .course-animation-box {
  overflow: visible !important;
}

body[data-page="learn"] .learning-course-flow.animation-active .course-inline-frame {
  border-radius: 8px !important;
}

/* Test-taking page polish: remove legacy dark exam surfaces. */
body[data-page="test"] .test-taking-workspace {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .99), rgba(247, 251, 255, .97)) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

body[data-page="test"] .test-taking-workspace .section-head {
  margin-bottom: 8px !important;
}

body[data-page="test"] .test-taking-workspace .section-head h1 {
  color: var(--text) !important;
  letter-spacing: 0 !important;
}

body[data-page="test"] .test-taking-workspace .section-actions .secondary {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  box-shadow: none !important;
}

body[data-page="test"] .test-paper {
  gap: 16px !important;
  padding-bottom: 16px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="test"] .test-paper-compact-head {
  padding: 20px 22px !important;
  border: 1px solid rgba(106, 143, 174, .22) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 92% 20%, rgba(47, 191, 154, .12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 250, 255, .94)) !important;
  box-shadow: 0 14px 30px rgba(39, 78, 108, .08) !important;
}

body[data-page="test"] .test-paper-title-block p {
  color: #6a7f94 !important;
  font-weight: 900 !important;
}

body[data-page="test"] .test-paper-title-block h2 {
  color: var(--text) !important;
}

body[data-page="test"] .paper-high-score,
body[data-page="test"] .high-score-badge {
  color: #7d560b !important;
  background: linear-gradient(135deg, rgba(255, 239, 167, .72), rgba(255, 255, 255, .86)) !important;
  border-color: rgba(246, 200, 76, .42) !important;
  box-shadow: none !important;
}

body[data-page="test"] .timer-badge {
  min-width: 112px !important;
  color: #64798f !important;
  background: linear-gradient(135deg, rgba(238, 247, 255, .96), rgba(236, 252, 247, .92)) !important;
  border-color: rgba(106, 143, 174, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

body[data-page="test"] .timer-badge strong {
  color: var(--site-blue-strong) !important;
}

body[data-page="test"] .question-card.test-question-card {
  padding: 22px !important;
  color: var(--text) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .985), rgba(248, 252, 255, .97)) !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .06) !important;
}

body[data-page="test"] .test-question-progress {
  color: #61778d !important;
}

body[data-page="test"] .test-question-progress i {
  background: #e6eef5 !important;
}

body[data-page="test"] .test-question-progress b {
  background: linear-gradient(90deg, var(--site-blue), var(--site-green), #b9e986) !important;
}

body[data-page="test"] .test-question-card .question-title-row h3 {
  color: var(--text) !important;
}

body[data-page="test"] .question-hint-tag {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .24) !important;
}

body[data-page="test"] .test-question-card .option-label {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

body[data-page="test"] .test-question-card .option-label:hover {
  border-color: rgba(47, 128, 237, .26) !important;
  background: #f4faff !important;
  box-shadow: 0 0 0 4px rgba(47, 128, 237, .08) !important;
}

body[data-page="test"] .test-question-card .option-label:has(input:checked) {
  color: var(--site-blue-strong) !important;
  border-color: rgba(47, 128, 237, .34) !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .10)) !important;
}

body[data-page="test"] .test-question-card .student-answer-box,
body[data-page="test"] .test-question-card .student-answer-editor {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .22) !important;
}

body[data-page="test"] .test-submit-bar {
  bottom: 14px !important;
  padding: 10px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, .90) 42%, rgba(246, 251, 255, .96)) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .10) !important;
  backdrop-filter: blur(12px) !important;
}

body[data-page="test"] .test-submit-bar button {
  min-width: 170px !important;
  min-height: 46px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .16) !important;
}

body[data-page="learn"] .learn-list-card.compact-learn-card p,
body[data-page="learn"] .learn-list-card.compact-learn-card small {
  color: #657b90 !important;
}

body[data-page="learn"] .learn-list-card.compact-learn-card .primary,
body[data-page="learn"] .learn-list-card.compact-learn-card .secondary-button {
  color: #18876e !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .06), rgba(47, 191, 154, .12)) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

/* Test and report answer surfaces: white content areas for future image-heavy
   questions, clearer choices, and blue-green diagnosis styling. */
body[data-page="test"] .test-taking-workspace .section-head h1 {
  display: none !important;
}

body[data-page="test"] .test-taking-workspace .section-head {
  justify-content: flex-end !important;
  min-height: 0 !important;
  margin-bottom: 14px !important;
}

body[data-page="test"] .test-paper-compact-head {
  background: #ffffff !important;
}

body[data-page="test"] .test-paper-title-block h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
}

body[data-page="test"] .question-card.test-question-card {
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .05) !important;
}

body[data-page="test"] .test-question-card .question-title-row h3 {
  font-size: clamp(24px, 2.25vw, 34px) !important;
  line-height: 1.48 !important;
}

body[data-page="test"] .test-question-card .question-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 18px !important;
}

body[data-page="test"] .test-question-card .option-label {
  min-height: 58px !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  background: #ffffff !important;
}

body[data-page="test"] .test-question-card .option-label input[type="radio"] {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: var(--site-blue) !important;
  filter: drop-shadow(0 1px 2px rgba(47, 128, 237, .16));
}

body[data-page="test"] .test-question-card .option-label:has(input:checked) {
  background: linear-gradient(135deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(47, 128, 237, .18),
    0 8px 18px rgba(47, 128, 237, .07) !important;
}

body[data-page="test"] .test-question-card .student-answer-box {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  background: #ffffff !important;
}

body[data-page="test"] .test-question-card .student-answer-box > span {
  color: #5f7488 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body[data-page="test"] .test-question-card .formula-toggle-button {
  width: fit-content !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  color: var(--site-green-strong) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(47, 191, 154, .28) !important;
  border-radius: 999px !important;
  background: var(--site-green-soft) !important;
  box-shadow: none !important;
}

body[data-page="test"] .test-question-card .student-answer-editor {
  grid-column: 1 / -1 !important;
  min-height: 88px !important;
  padding: 16px !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  background: #ffffff !important;
}

body[data-page="test"] .test-question-card .question-image {
  background: #ffffff !important;
}

body[data-page="test"] .test-report-panel {
  margin-top: 18px !important;
  padding: 16px !important;
  color: var(--text) !important;
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  box-shadow: 0 16px 36px rgba(39, 78, 108, .06) !important;
}

body[data-page="test"] .result-scene.retry {
  color: var(--text) !important;
  background: linear-gradient(135deg, rgba(238, 247, 255, .92), #ffffff 52%, rgba(239, 251, 246, .92)) !important;
  border: 1px solid rgba(47, 191, 154, .2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px rgba(39, 78, 108, .06) !important;
}

body[data-page="test"] .result-scene.retry h3 {
  color: var(--site-blue-strong) !important;
}

body[data-page="test"] .result-scene.retry p {
  color: #5f7488 !important;
}

body[data-page="test"] .wrong-analysis-card,
body[data-page="report"] .wrong-analysis-card,
body[data-page="wrong"] .wrong-analysis-card,
body[data-page="wrong-retry"] .wrong-analysis-card {
  color: var(--text) !important;
  background: #ffffff !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .05) !important;
}

body[data-page="test"] .detail-card > h3,
body[data-page="report"] .detail-card > h3,
body[data-page="wrong"] .detail-card > h3,
body[data-page="wrong-retry"] .detail-card > h3 {
  color: var(--site-blue-strong) !important;
}

body[data-page="test"] .wrong-analysis-card h4,
body[data-page="report"] .wrong-analysis-card h4,
body[data-page="wrong"] .wrong-analysis-card h4,
body[data-page="wrong-retry"] .wrong-analysis-card h4 {
  color: var(--site-green-strong) !important;
}

body[data-page="test"] .wrong-analysis-card p,
body[data-page="report"] .wrong-analysis-card p,
body[data-page="wrong"] .wrong-analysis-card p,
body[data-page="wrong-retry"] .wrong-analysis-card p {
  color: #5f7488 !important;
}

body[data-page="test"] .wrong-analysis-card p strong,
body[data-page="report"] .wrong-analysis-card p strong,
body[data-page="wrong"] .wrong-analysis-card p strong,
body[data-page="wrong-retry"] .wrong-analysis-card p strong {
  color: var(--text) !important;
}

body[data-page="test"] .wrong-analysis-card .card-actions {
  margin-top: 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="test"] .question-rich-view,
body[data-page="report"] .question-rich-view,
body[data-page="wrong"] .question-rich-view,
body[data-page="wrong-retry"] .question-rich-view {
  padding: 16px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

body[data-page="test"] .question-option-view-list,
body[data-page="report"] .question-option-view-list,
body[data-page="wrong"] .question-option-view-list,
body[data-page="wrong-retry"] .question-option-view-list {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-page="test"] .question-option-view,
body[data-page="report"] .question-option-view,
body[data-page="wrong"] .question-option-view,
body[data-page="wrong-retry"] .question-option-view {
  min-height: 54px !important;
  align-items: center !important;
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

body[data-page="test"] .question-option-view span,
body[data-page="report"] .question-option-view span,
body[data-page="wrong"] .question-option-view span,
body[data-page="wrong-retry"] .question-option-view span {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  color: var(--site-blue-strong) !important;
  font-weight: 900 !important;
  border-radius: 999px !important;
  background: #eef6ff !important;
}

body[data-page="test"] .question-option-view strong,
body[data-page="report"] .question-option-view strong,
body[data-page="wrong"] .question-option-view strong,
body[data-page="wrong-retry"] .question-option-view strong {
  font-size: 18px !important;
}

body[data-page="test"] .question-image-preview,
body[data-page="report"] .question-image-preview,
body[data-page="wrong"] .question-image-preview,
body[data-page="wrong-retry"] .question-image-preview {
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
}

/* Wrong retry and account page cleanup.  Payment controls live in parent center. */
body[data-page="wrong-retry"] #retrySummary {
  display: none !important;
}

body[data-page="wrong-retry"] .page-motion {
  display: none !important;
}

body[data-page="wrong-retry"] .section-head {
  align-items: center !important;
  margin-bottom: 18px !important;
}

body[data-page="wrong-retry"] .test-area.compact-test {
  gap: 16px !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper {
  margin-top: 0 !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .question-card {
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 12px 26px rgba(39, 78, 108, .055) !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .question-card h3 {
  color: var(--text) !important;
  font-size: clamp(26px, 2.25vw, 36px) !important;
  line-height: 1.35 !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .tag {
  width: fit-content !important;
  min-height: 34px !important;
  padding: 6px 14px !important;
  color: var(--site-green-strong) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(47, 191, 154, .25) !important;
  border-radius: 999px !important;
  background: var(--site-green-soft) !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .question-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .option-label {
  min-height: 58px !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .option-label input[type="radio"] {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  accent-color: var(--site-blue) !important;
  filter: drop-shadow(0 1px 2px rgba(47, 128, 237, .16));
}

body[data-page="wrong-retry"] #wrongRetryPaper .option-label:has(input:checked) {
  background: linear-gradient(135deg, rgba(47, 128, 237, .08), rgba(47, 191, 154, .08)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(47, 128, 237, .18),
    0 8px 18px rgba(47, 128, 237, .07) !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-box {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-box > span {
  display: none !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .formula-toggle-button {
  justify-self: start !important;
  width: fit-content !important;
  min-height: 36px !important;
  padding: 7px 16px !important;
  color: var(--site-green-strong) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  border: 1px solid rgba(47, 191, 154, .28) !important;
  border-radius: 999px !important;
  background: var(--site-green-soft) !important;
  box-shadow: none !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .formula-toggle-button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-editor {
  min-height: 92px !important;
  padding: 16px !important;
  color: var(--text) !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
}

body[data-page="wrong-retry"] #retryReportPanel {
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 14px 30px rgba(39, 78, 108, .06) !important;
}

body[data-page="account"] .workspace {
  padding: clamp(22px, 3vw, 34px) !important;
  background:
    radial-gradient(circle at 90% 12%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    #ffffff !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}

body[data-page="account"] .section-head {
  align-items: center !important;
  margin-bottom: 18px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="account"] .section-head h1 {
  font-size: clamp(34px, 3.4vw, 54px) !important;
}

body[data-page="account"] .account-home {
  gap: 16px !important;
}

body[data-page="account"] .account-hero-card {
  grid-template-columns: minmax(0, 1.18fr) minmax(240px, 320px) !important;
  gap: 18px !important;
  padding: clamp(20px, 2.6vw, 30px) !important;
  background:
    radial-gradient(circle at 86% 18%, rgba(47, 191, 154, .11), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 16px 34px rgba(39, 78, 108, .08) !important;
}

body[data-page="account"] .account-hero-card::before {
  content: none !important;
}

body[data-page="account"] .account-hero-main .eyebrow {
  width: fit-content;
  margin: 0 0 10px !important;
  padding: 6px 12px;
  color: var(--site-blue-strong) !important;
  letter-spacing: 0 !important;
  background: var(--site-blue-soft);
  border: 1px solid rgba(47, 128, 237, .18);
  border-radius: 999px;
}

body[data-page="account"] .account-hero-main h2 {
  margin: 0 0 10px !important;
  font-size: clamp(42px, 4.2vw, 64px) !important;
  letter-spacing: 0 !important;
}

body[data-page="account"] .account-hero-main > p {
  max-width: 760px;
  color: #526a80 !important;
  font-weight: 700;
}

body[data-page="account"] .nickname-form {
  max-width: 640px !important;
  grid-template-columns: minmax(260px, 1fr) auto;
}

body[data-page="account"] .nickname-form label span {
  color: #526a80 !important;
  font-weight: 850 !important;
}

body[data-page="account"] .guardian-bound-note {
  color: #5f7488 !important;
}

body[data-page="account"] .account-quick-actions {
  margin-top: 18px !important;
}

body[data-page="account"] .account-energy-card {
  min-height: 230px !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(47, 128, 237, .08), transparent 38%),
    #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 26px rgba(39, 78, 108, .07) !important;
}

body[data-page="account"] .energy-ring {
  background:
    radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
    conic-gradient(var(--site-blue) var(--energy), rgba(47, 191, 154, .22) 0) !important;
  box-shadow: 0 10px 26px rgba(47, 128, 237, .12) !important;
}

body[data-page="account"] .energy-ring span {
  color: var(--text) !important;
}

body[data-page="account"] .account-energy-card strong {
  color: var(--text) !important;
}

body[data-page="account"] .account-stat-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body[data-page="account"] .account-stat-strip > div,
body[data-page="account"] .account-stat-strip > a {
  min-height: 106px !important;
  padding: 15px !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .045) !important;
}

body[data-page="account"] .account-stat-strip strong {
  font-size: clamp(26px, 2.8vw, 40px) !important;
}

body[data-page="account"] .mini-section-head h3,
body[data-page="groups"] .mini-section-head h3 {
  margin-top: 0 !important;
}

body[data-page="account"] .mission-board {
  gap: 10px !important;
}

body[data-page="account"] .mission-card {
  min-height: 108px;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .045) !important;
}

body[data-page="account"] .mission-card.active {
  background: linear-gradient(135deg, rgba(47, 128, 237, .06), rgba(47, 191, 154, .09)) !important;
  border-color: rgba(47, 191, 154, .24) !important;
}

body[data-page="account"] .mission-card i {
  color: #ffffff !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="account"] .account-group-board,
body[data-page="account"] .companion-shop-board {
  padding: clamp(18px, 2.4vw, 24px) !important;
  color: var(--text) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(47, 191, 154, .09), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 16px 34px rgba(39, 78, 108, .06) !important;
}

body[data-page="account"] .account-group-main,
body[data-page="account"] .account-group-mini,
body[data-page="account"] .account-group-metrics > div,
body[data-page="account"] .account-group-empty-content,
body[data-page="account"] .companion-shop-current,
body[data-page="account"] .companion-perk-card,
body[data-page="account"] .companion-growth-panel,
body[data-page="account"] .companion-shop-card {
  color: var(--text) !important;
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .045) !important;
}

body[data-page="account"] .account-group-main span,
body[data-page="account"] .account-group-main p,
body[data-page="account"] .account-group-invite small,
body[data-page="account"] .account-group-metrics span,
body[data-page="account"] .account-group-metrics small,
body[data-page="account"] .account-group-mini p,
body[data-page="account"] .companion-shop-current small,
body[data-page="account"] .companion-shop-current p,
body[data-page="account"] .companion-perk-card span,
body[data-page="account"] .companion-growth-panel span,
body[data-page="account"] .companion-shop-card small,
body[data-page="account"] .companion-shop-card p {
  color: #5f7488 !important;
}

body[data-page="account"] .account-group-main h4,
body[data-page="account"] .account-group-mini > strong,
body[data-page="account"] .companion-shop-current strong,
body[data-page="account"] .companion-perk-card strong,
body[data-page="account"] .companion-growth-panel strong,
body[data-page="account"] .companion-shop-card strong {
  color: var(--text) !important;
}

body[data-page="account"] .account-group-invite {
  border-color: rgba(47, 191, 154, .26) !important;
  background: var(--site-green-soft) !important;
}

body[data-page="account"] .account-group-member-list span,
body[data-page="account"] .account-group-pk-list span {
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .16) !important;
}

body[data-page="account"] .team-orbit-icon {
  background:
    radial-gradient(circle at 55% 45%, rgba(47, 191, 154, .2), transparent 26px),
    #ffffff !important;
  border-color: rgba(47, 128, 237, .18) !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .055) !important;
}

body[data-page="account"] .companion-shop-current {
  grid-template-columns: minmax(300px, 1fr) minmax(280px, .82fr) !important;
}

body[data-page="account"] .companion-shop-current figure,
body[data-page="account"] .companion-shop-card figure {
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="account"] .companion-shop-current figure img {
  filter: drop-shadow(0 14px 24px rgba(39, 78, 108, .12)) !important;
}

body[data-page="account"] .companion-shop-card.selected {
  border-color: rgba(47, 191, 154, .38) !important;
  box-shadow:
    inset 0 0 0 1px rgba(47, 191, 154, .1),
    0 12px 26px rgba(47, 191, 154, .08) !important;
}

body[data-page="account"] .companion-shop-card footer span {
  color: var(--site-green-strong) !important;
}

body[data-page="account"] .companion-shop-toggle,
body[data-page="account"] .companion-perk-card button,
body[data-page="account"] .companion-growth-panel button,
body[data-page="account"] .companion-shop-card footer button {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border: 1px solid rgba(47, 191, 154, .26) !important;
  box-shadow: none !important;
}

body[data-page="account"] .companion-shop-toggle:hover,
body[data-page="account"] .companion-shop-toggle:focus,
body[data-page="account"] .companion-perk-card button:hover,
body[data-page="account"] .companion-perk-card button:focus,
body[data-page="account"] .companion-growth-panel button:hover,
body[data-page="account"] .companion-growth-panel button:focus,
body[data-page="account"] .companion-shop-card footer button:hover,
body[data-page="account"] .companion-shop-card footer button:focus {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="account"] .badge-board,
body[data-page="account"] .collection-board {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(47, 191, 154, .08), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 16px 34px rgba(39, 78, 108, .06) !important;
}

body[data-page="account"] .account-group-metrics strong,
body[data-page="groups"] .group-stat-grid strong,
body[data-page="groups"] .group-leader-row > span,
body[data-page="groups"] .pk-score-row span,
body[data-page="groups"] .group-member-card li strong,
body[data-page="groups"] .member-profile-stats strong {
  max-width: 100% !important;
  color: var(--text) !important;
  line-height: .98 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.badge-preview-backdrop,
.thought-card-preview-backdrop,
.card-encounter-layer,
.card-encounter-layer .card-encounter-layer {
  background: rgba(238, 247, 255, .72) !important;
  backdrop-filter: blur(12px) !important;
}

.badge-preview-panel,
.thought-card-preview-panel,
.card-encounter-modal {
  color: var(--text) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(47, 128, 237, .1), transparent 32%),
    radial-gradient(circle at 88% 86%, rgba(47, 191, 154, .12), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
  border-color: rgba(47, 191, 154, .28) !important;
  box-shadow: 0 28px 72px rgba(39, 78, 108, .2) !important;
}

.badge-preview-panel::before,
.badge-preview-panel::after,
.thought-card-preview-panel::before,
.thought-card-preview-stage::after,
.card-encounter-modal::before {
  content: none !important;
}

.badge-preview-close,
.thought-card-preview-close,
.card-close {
  color: var(--site-green-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.badge-preview-close:hover,
.badge-preview-close:focus-visible,
.thought-card-preview-close:hover,
.thought-card-preview-close:focus-visible,
.card-close:hover,
.card-close:focus-visible {
  color: var(--site-blue-strong) !important;
  background: rgba(47, 128, 237, .06) !important;
}

.badge-preview-panel span,
.thought-card-preview-info p,
.card-encounter-copy p,
.card-encounter-copy .card-encounter-status {
  color: #5f7488 !important;
}

.badge-preview-panel h3,
.thought-card-preview-info h3,
.card-encounter-copy h3 {
  color: var(--text) !important;
}

.badge-preview-panel small {
  color: #5f7488 !important;
}

.badge-preview-panel img,
.thought-card-preview-stage img,
.thought-card-image {
  filter: drop-shadow(0 18px 30px rgba(39, 78, 108, .18)) !important;
}

body[data-page="groups"] .workspace {
  padding: clamp(22px, 3vw, 34px) !important;
  opacity: 1 !important;
  animation: none !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    #ffffff !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}

body[data-page="groups"] .group-card,
body[data-page="groups"] .group-hero,
body[data-page="groups"] .group-stat-grid > div,
body[data-page="groups"] .group-member-card,
body[data-page="groups"] .group-leader-row,
body[data-page="groups"] .pk-card {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 12px 26px rgba(39, 78, 108, .05) !important;
}

body[data-page="groups"] .group-hero {
  grid-template-columns: minmax(0, 1fr) !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(47, 191, 154, .1), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
}

body[data-page="groups"] .group-hero h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.14 !important;
}

body[data-page="groups"] .group-card p,
body[data-page="groups"] .group-hero p,
body[data-page="groups"] .group-stat-grid span,
body[data-page="groups"] .group-stat-grid small,
body[data-page="groups"] .group-member-card small,
body[data-page="groups"] .group-leader-row small {
  color: #5f7488 !important;
}

body[data-page="groups"] .group-rank-pill {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 34px !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 6px 12px !important;
  color: var(--site-blue-strong) !important;
  font-weight: 900 !important;
  border: 1px solid rgba(47, 128, 237, .18) !important;
  border-radius: 999px !important;
  background: var(--site-blue-soft) !important;
}

body[data-page="groups"] .group-invite {
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .26) !important;
}

body[data-page="groups"] .group-invite strong,
body[data-page="groups"] .group-leader-row > span,
body[data-page="groups"] .pk-score-row span,
body[data-page="groups"] .group-member-card li strong {
  color: var(--site-green-strong) !important;
}

body[data-page="groups"] .group-member-card li {
  background: #f8fcff !important;
  border-color: rgba(106, 143, 174, .14) !important;
}

body[data-page="groups"] .group-welcome::after {
  color: rgba(47, 191, 154, .08) !important;
}

body[data-page="groups"] .group-rule-grid span {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .25) !important;
}

body[data-page="groups"] .page-motion {
  display: none !important;
}

body[data-page="wrong-retry"] .retry-paper-note {
  margin-bottom: 14px;
  padding: 12px 16px;
  color: #5f7488;
  font-size: 17px;
  line-height: 1.7;
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: #ffffff;
}

body[data-page="evaluation"] .workspace {
  background:
    radial-gradient(circle at 88% 8%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    #ffffff !important;
  background-size: auto, 42px 42px, 42px 42px, auto !important;
}

body[data-page="evaluation"] .evaluation-dashboard {
  gap: 16px;
}

body[data-page="evaluation"] .evaluation-metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-page="evaluation"] .evaluation-route-card,
body[data-page="evaluation"] .diagnosis-card,
body[data-page="evaluation"] .evaluation-metric,
body[data-page="evaluation"] .evaluation-fold,
body[data-page="evaluation"] .trend-card,
body[data-page="evaluation"] .record-panel,
body[data-page="evaluation"] .student-ai-summary,
body[data-page="evaluation"] .ai-evaluation-block {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: 0 12px 26px rgba(39, 78, 108, .045) !important;
}

body[data-page="evaluation"] .evaluation-route-card {
  padding: 22px 24px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(47, 191, 154, .1), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f8fcff 100%) !important;
}

body[data-page="evaluation"] .evaluation-route-card .eyebrow {
  color: var(--site-green-strong) !important;
  font-size: 15px !important;
}

body[data-page="evaluation"] .evaluation-route-card h2 {
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

body[data-page="evaluation"] .evaluation-route-card p,
body[data-page="evaluation"] .student-task-row small,
body[data-page="evaluation"] .student-task-row em,
body[data-page="evaluation"] .evaluation-metric span,
body[data-page="evaluation"] .evaluation-metric small {
  color: #5f7488 !important;
}

body[data-page="evaluation"] .evaluation-scope-note {
  color: var(--site-green-strong) !important;
  margin-top: 5px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body[data-page="evaluation"] .route-chip-list span,
body[data-page="evaluation"] .route-chip-list a {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .25) !important;
}

body[data-page="evaluation"] .route-chip-list .parent-center-link {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .25) !important;
  box-shadow: none !important;
}

body[data-page="evaluation"] .student-task-row {
  grid-template-columns: 96px minmax(0, 1.2fr) minmax(150px, .75fr) auto !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .16) !important;
}

body[data-page="evaluation"] .record-columns {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
  align-items: start !important;
}

body[data-page="evaluation"] .evaluation-side-stack {
  display: grid !important;
  gap: 16px !important;
}

body[data-page="evaluation"] .record-panel .link-card {
  overflow: hidden !important;
}

body[data-page="evaluation"] .record-panel .link-card strong,
body[data-page="evaluation"] .record-panel .link-card span,
body[data-page="evaluation"] .record-panel .link-card small {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="evaluation"] .record-panel .link-card img,
body[data-page="evaluation"] .record-panel .link-card picture,
body[data-page="evaluation"] .record-panel .link-card svg,
body[data-page="evaluation"] .record-panel .link-card canvas {
  display: none !important;
}

body[data-page="evaluation"] .diagnosis-focus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-page="evaluation"] .student-task-row span {
  white-space: nowrap;
}

body[data-page="evaluation"] .student-task-row small {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

body[data-page="evaluation"] .student-next-panel {
  padding: 16px 18px !important;
}

body[data-page="evaluation"] .student-next-panel .diagnosis-heading {
  margin-bottom: 12px !important;
}

body[data-page="evaluation"] .student-task-row span {
  color: var(--site-green-strong) !important;
}

body[data-page="evaluation"] .student-task-row strong,
body[data-page="evaluation"] .diagnosis-heading h3,
body[data-page="evaluation"] .record-panel strong,
body[data-page="evaluation"] .link-card strong,
body[data-page="evaluation"] .ranked-row strong,
body[data-page="evaluation"] .ai-report-toolbar strong,
body[data-page="evaluation"] .ai-report-section h4,
body[data-page="evaluation"] .ai-report-section strong {
  color: var(--text) !important;
}

body[data-page="evaluation"] .student-ai-summary,
body[data-page="evaluation"] .diagnosis-grid > div,
body[data-page="evaluation"] .ability-mastery-list .ranked-row,
body[data-page="evaluation"] .ability-report-bars .ai-report-bar-row,
body[data-page="evaluation"] .ai-report-toolbar,
body[data-page="evaluation"] .ai-parent-summary,
body[data-page="evaluation"] .ai-report-section {
  color: var(--text) !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .18) !important;
}

body[data-page="evaluation"] .diagnosis-heading span,
body[data-page="evaluation"] .ai-evaluation-meta,
body[data-page="evaluation"] .muted-text,
body[data-page="evaluation"] .clean-list,
body[data-page="evaluation"] .ranked-row small,
body[data-page="evaluation"] .ability-mastery-list .ranked-row em,
body[data-page="evaluation"] .ai-report-toolbar span,
body[data-page="evaluation"] .ai-report-section p,
body[data-page="evaluation"] .ai-report-section small,
body[data-page="evaluation"] .ai-report-section span,
body[data-page="evaluation"] .ai-evaluation-block p,
body[data-page="evaluation"] .link-card span,
body[data-page="evaluation"] .link-card small {
  color: #5f7488 !important;
}

body[data-page="evaluation"] .ai-evaluation-block strong,
body[data-page="evaluation"] .student-ai-summary strong {
  color: #2f7f68 !important;
}

body[data-page="evaluation"] .evaluation-metric.priority-metric {
  background:
    radial-gradient(circle at 85% 14%, rgba(47, 191, 154, .12), transparent 36%),
    #ffffff !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

body[data-page="evaluation"] .evaluation-metric strong {
  color: var(--text) !important;
}

body[data-page="evaluation"] .trend-card h3 {
  color: var(--text) !important;
}

body[data-page="evaluation"] .trend-card p,
body[data-page="evaluation"] .trend-card small {
  color: #52677d !important;
  font-weight: 760;
}

body[data-page="evaluation"] .trend-card-head strong {
  color: #102033 !important;
  background: linear-gradient(135deg, #68bfe0, #67c2a6) !important;
  box-shadow: 0 12px 24px rgba(47, 128, 237, .12) !important;
}

body[data-page="evaluation"] .trend-grid-lines line {
  stroke: rgba(117, 151, 180, .22) !important;
}

body[data-page="evaluation"] .trend-labels text {
  fill: #708398 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

body[data-page="evaluation"] .trend-bar {
  fill: #68cdbc !important;
  opacity: 1 !important;
  filter: drop-shadow(0 7px 12px rgba(47, 191, 154, .16)) !important;
}

body[data-page="evaluation"] .trend-line {
  stroke: #94d98d !important;
  stroke-width: 5.5 !important;
  filter: drop-shadow(0 7px 12px rgba(80, 185, 120, .18)) !important;
}

body[data-page="evaluation"] .trend-dot {
  fill: #7ccdf3 !important;
  stroke: #eefaff !important;
  stroke-width: 2.5 !important;
}

body[data-page="evaluation"] .trend-empty {
  fill: #60758c !important;
}

@media (max-width: 1180px) {
  body[data-page="account"] .account-stat-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  body[data-page="test"] .test-question-card .question-options,
  body[data-page="wrong-retry"] #wrongRetryPaper .question-options,
  body[data-page="test"] .question-option-view-list,
  body[data-page="report"] .question-option-view-list,
  body[data-page="wrong"] .question-option-view-list,
  body[data-page="wrong-retry"] .question-option-view-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body[data-page="test"] .test-question-card .question-options,
  body[data-page="wrong-retry"] #wrongRetryPaper .question-options,
  body[data-page="test"] .question-option-view-list,
  body[data-page="report"] .question-option-view-list,
  body[data-page="wrong"] .question-option-view-list,
  body[data-page="wrong-retry"] .question-option-view-list {
    grid-template-columns: 1fr !important;
  }

  body[data-page="test"] .test-question-card .student-answer-box {
    grid-template-columns: 1fr !important;
  }

  body[data-page="account"] .account-hero-card,
  body[data-page="account"] .account-stat-strip,
  body[data-page="account"] .mission-board,
  body[data-page="account"] .account-group-layout,
  body[data-page="account"] .account-group-detail-grid,
  body[data-page="account"] .companion-shop-current {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-20 page polish: align learn/test/parent/search details with the blue-green light theme. */
body:not([data-page="home"]):not([data-page="admin"]) .workspace {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

body:not([data-page="home"]):not([data-page="admin"]) .section-head h1,
body:not([data-page="home"]):not([data-page="admin"]) .section-head h2 {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

body[data-page="learn"] .learning-feedback-summary .learning-feedback-open-label {
  padding: 0 !important;
  color: var(--site-green-strong) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-feedback-summary::after {
  padding: 0 2px !important;
  color: var(--site-green) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body[data-page="test-hub"] .high-score-badge,
body[data-page="practice"] .high-score-badge,
body[data-page="test"] .high-score-badge {
  color: var(--text) !important;
  background: linear-gradient(135deg, #fff7dc 0%, #ffffff 100%) !important;
  border-color: rgba(246, 200, 76, .42) !important;
}

body[data-page="test-hub"] .high-score-badge span,
body[data-page="practice"] .high-score-badge span,
body[data-page="test"] .high-score-badge span {
  color: #1d2f43 !important;
  background: #d9ef8f !important;
}

body[data-page="test-hub"] .high-score-badge strong,
body[data-page="practice"] .high-score-badge strong,
body[data-page="test"] .high-score-badge strong {
  color: #72500a !important;
  text-shadow: none !important;
}

body[data-page="test"] .test-paper-compact-head {
  padding: 18px 20px !important;
}

body[data-page="test"] .test-paper-title-block h2 {
  font-size: clamp(26px, 2.45vw, 38px) !important;
  line-height: 1.16 !important;
}

body[data-page="test"] .test-question-card .question-title-row h3 {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.42 !important;
}

body[data-page="test"] .test-question-card .option-label {
  font-size: 19px !important;
}

body[data-page="test"] .test-question-card .question-title-row {
  margin-top: 10px !important;
}

body[data-page="parent"] .parent-workspace {
  max-width: 1720px !important;
}

body[data-page="parent"] .parent-workspace > .section-head {
  align-items: end !important;
  padding-bottom: 4px !important;
}

body[data-page="parent"] .parent-workspace > .section-head h1 {
  font-size: clamp(40px, 4.2vw, 64px) !important;
  letter-spacing: 0 !important;
}

body[data-page="parent"] .parent-hero-card,
body[data-page="parent"] .parent-panel,
body[data-page="parent"] .parent-stat-card {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border-color: rgba(106, 143, 174, .20) !important;
}

body[data-page="parent"] .parent-hero-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 24px 28px !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    radial-gradient(circle at 92% 24%, rgba(47, 191, 154, .10), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size: 46px 46px, 46px 46px, auto, auto !important;
}

body[data-page="parent"] .parent-hero-card .eyebrow {
  color: var(--site-green-strong) !important;
}

body[data-page="parent"] .parent-route-strip span {
  color: #5f7488 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="parent"] .parent-route-strip strong,
body[data-page="parent"] .parent-route-strip a {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .26) !important;
}

body[data-page="parent"] .parent-stat-card.warning,
body[data-page="parent"] .parent-reminder.warning,
body[data-page="parent"] .parent-reminder.payment {
  color: #9f352f !important;
  background:
    radial-gradient(circle at 14% 16%, rgba(232, 101, 93, .13), transparent 34%),
    linear-gradient(135deg, var(--site-red-soft) 0%, #ffffff 100%) !important;
  border-color: rgba(232, 101, 93, .34) !important;
  box-shadow: 0 12px 26px rgba(232, 101, 93, .10) !important;
}

body[data-page="parent"] .parent-stat-card.warning strong,
body[data-page="parent"] .parent-reminder.warning strong,
body[data-page="parent"] .parent-reminder.payment strong,
body[data-page="parent"] .parent-stat-card.warning span:first-child {
  color: #c94a43 !important;
}

body[data-page="parent"] .parent-hero-actions .secondary,
body[data-page="parent"] .section-actions .secondary {
  color: var(--site-green-strong) !important;
  background: var(--site-green-soft) !important;
  border-color: rgba(47, 191, 154, .28) !important;
}

body[data-page="search"] .workspace {
  max-width: 1580px !important;
}

body[data-page="search"] .section-head {
  margin-bottom: 18px !important;
}

body[data-page="search"] .section-head h1 {
  font-size: clamp(40px, 4vw, 62px) !important;
}

body[data-page="search"] .search-page-form {
  display: grid !important;
  grid-template-columns: minmax(180px, 260px) minmax(260px, 1fr) minmax(180px, 1.6fr) !important;
  align-items: end !important;
  gap: 14px !important;
  padding: 18px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  box-shadow: var(--soft-shadow) !important;
}

body[data-page="search"] .search-page-form label {
  display: grid !important;
  gap: 8px !important;
  color: #5f7488 !important;
  font-weight: 850 !important;
}

body[data-page="search"] .search-page-form button[type="submit"] {
  min-height: 54px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
}

body[data-page="search"] .search-result-grid {
  margin-top: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body[data-page="search"] .search-result-card {
  min-height: 138px !important;
  padding: 22px !important;
  background: #ffffff !important;
  border-color: rgba(106, 143, 174, .20) !important;
}

body[data-page="search"] .search-result-card small {
  color: var(--site-green-strong) !important;
  font-weight: 900 !important;
}

body[data-page="search"] .search-result-card h3 {
  margin: 8px 0 !important;
  color: var(--text) !important;
  font-size: clamp(24px, 2vw, 32px) !important;
}

body[data-page="search"] .search-result-card p {
  color: #5f7488 !important;
}

/* 2026-06-20 final compact pass: search banner, Ask composer, handwriting, and long question readability. */
body[data-page="search"] .page-motion {
  display: none !important;
}

body[data-page="search"] .section-head {
  margin-bottom: 16px !important;
}

body[data-page="ask"] .section-head p.ask-subline {
  color: #1d2f43 !important;
  -webkit-text-fill-color: #1d2f43 !important;
}

body[data-page="ask"] .composer-tools .send-icon {
  color: var(--site-blue-strong) !important;
  background: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(47, 128, 237, .22) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .08), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body[data-page="ask"] .composer-tools .send-icon::before {
  left: 50% !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;
  clip-path: polygon(3% 43%, 96% 4%, 60% 94%, 45% 58%) !important;
  transform: translate(-50%, -50%) rotate(-9deg) !important;
}

body[data-page="ask"] .composer-tools .send-icon::after {
  content: none !important;
  display: none !important;
}

.handwrite-color-menu button[data-handwrite-color="#111827"] i {
  outline: 1px solid rgba(255, 255, 255, .42);
  outline-offset: 2px;
}

body[data-page="test"] .test-paper-title-block h2 {
  font-size: clamp(24px, 2.1vw, 34px) !important;
}

body[data-page="test"] .test-question-card .question-title-row h3,
body[data-page="wrong-retry"] #wrongRetryPaper .question-card h3 {
  font-size: clamp(20px, 1.58vw, 26px) !important;
  line-height: 1.46 !important;
  letter-spacing: 0 !important;
}

body[data-page="test"] .test-question-card .option-label,
body[data-page="wrong-retry"] #wrongRetryPaper .option-label {
  font-size: 18px !important;
}

body[data-page="ask"] .ai-guide-empty .eyebrow {
  display: none !important;
}

body[data-page="ask"] .ask-composer textarea::placeholder {
  color: #7c8da1 !important;
  opacity: 1 !important;
}

body[data-page="ask"] .ask-composer .composer-tools button#askBtn.icon-button.send-icon {
  color: var(--site-blue-strong) !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(47, 128, 237, .22) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .08), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

body[data-page="ask"] .ask-composer .composer-tools button#askBtn.icon-button.send-icon:hover {
  color: var(--site-blue-strong) !important;
  background: #f9fcff !important;
  background-image: none !important;
}

body[data-page="ask"] .ask-composer .composer-tools button#askBtn.icon-button.send-icon::before {
  left: 50% !important;
  top: 50% !important;
  width: 22px !important;
  height: 22px !important;
  background: currentColor !important;
  clip-path: polygon(3% 43%, 96% 4%, 60% 94%, 45% 58%) !important;
  transform: translate(-50%, -50%) rotate(-9deg) !important;
}

body[data-page="ask"] .ask-composer .composer-tools button#askBtn.icon-button.send-icon::after {
  content: none !important;
  display: none !important;
}

body[data-page="parent"] .parent-workspace > .section-head h1 {
  font-size: clamp(34px, 3.3vw, 52px) !important;
  line-height: 1.12 !important;
}

body[data-page="parent"] .parent-hero-card h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1.16 !important;
  margin-bottom: 6px !important;
}

body[data-page="parent"] .parent-workspace > .section-head p,
body[data-page="parent"] .parent-hero-card > div > p:not(.eyebrow):not(.parent-privacy-note) {
  font-size: clamp(16px, 1.28vw, 20px) !important;
  line-height: 1.62 !important;
}

body[data-page="parent"] .parent-workspace > .section-head h1 {
  font-size: clamp(30px, 2.9vw, 46px) !important;
}

body[data-page="parent"] .parent-hero-card h2 {
  font-size: clamp(28px, 2.55vw, 38px) !important;
}

body[data-page="account"] .section-head h1 {
  font-size: clamp(30px, 2.8vw, 44px) !important;
  line-height: 1.12 !important;
}

body[data-page="account"] .account-hero-main .eyebrow {
  margin-bottom: 8px !important;
  padding: 5px 11px !important;
  font-size: 15px !important;
}

body[data-page="account"] .account-hero-main h2 {
  font-size: clamp(30px, 2.9vw, 44px) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
}

body[data-page="account"] .account-hero-main > p {
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.58 !important;
}

body[data-page="parent"] .parent-referral-panel {
  display: grid !important;
  gap: 18px !important;
  padding: clamp(20px, 2vw, 28px) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(47, 191, 154, .10), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 30px rgba(39, 78, 108, .06) !important;
}

body[data-page="parent"] .parent-referral-panel .parent-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="parent"] .parent-referral-panel .parent-panel-head strong {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.18 !important;
}

body[data-page="parent"] .parent-referral-panel .parent-panel-head span {
  flex: 0 0 auto !important;
  padding: 6px 12px !important;
  color: var(--site-blue-strong) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  background: var(--site-blue-soft) !important;
  border: 1px solid rgba(47, 128, 237, .18) !important;
  border-radius: 999px !important;
}

body[data-page="parent"] .parent-referral-main {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  gap: 22px !important;
  align-items: start !important;
}

body[data-page="parent"] .parent-referral-copy {
  max-width: 62ch !important;
  margin: 0 0 16px !important;
  color: #526a80 !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
}

body[data-page="parent"] .parent-referral-code {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  color: var(--text) !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .05) !important;
}

body[data-page="parent"] .parent-referral-code span {
  color: #6b7f93 !important;
  font-weight: 700 !important;
}

body[data-page="parent"] .parent-referral-code strong {
  min-width: 140px !important;
  color: var(--site-green-strong) !important;
  font-size: 18px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

body[data-page="parent"] .parent-referral-code .compact-link-btn {
  min-height: 38px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
}

body[data-page="parent"] .parent-referral-panel .parent-privacy-note {
  max-width: 66ch !important;
  margin: 12px 0 0 !important;
  color: #687c90 !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
}

body[data-page="parent"] .parent-referral-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body[data-page="parent"] .parent-referral-stats span {
  min-height: 118px !important;
  padding: 18px !important;
  color: #526a80 !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 249, 255, .94)) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px rgba(39, 78, 108, .05) !important;
}

body[data-page="parent"] .parent-referral-stats b {
  margin-bottom: 16px !important;
  color: var(--text) !important;
  font-size: clamp(28px, 2.8vw, 42px) !important;
  line-height: 1 !important;
}

body[data-page="parent"] .parent-referral-records {
  margin-top: 0 !important;
}

body[data-page="parent"] .parent-referral-records .slim-empty {
  min-height: auto !important;
  padding: 16px 18px !important;
  color: #60778d !important;
  font-size: 16px !important;
  text-align: center !important;
  background: rgba(255, 255, 255, .74) !important;
  border: 1px dashed rgba(106, 143, 174, .24) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  body[data-page="parent"] .parent-referral-main,
  body[data-page="parent"] .parent-referral-code {
    grid-template-columns: 1fr !important;
  }

  body[data-page="parent"] .parent-referral-code {
    width: 100% !important;
  }
}

body[data-page="parent"] .parent-referral-main {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

body[data-page="parent"] .parent-referral-copy {
  max-width: none !important;
}

body[data-page="parent"] .parent-referral-code {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

body[data-page="parent"] .parent-referral-code strong {
  flex: 1 1 150px !important;
}

body[data-page="parent"] .parent-referral-stats {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
}

body[data-page="parent"] .parent-referral-stats span {
  min-height: 104px !important;
}

body[data-page="parent"] .parent-secondary-grid > .parent-panel:has(.parent-referral-panel) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2026-06-20 commercial polish pass: align secondary pages without changing the homepage layout. */
body:not([data-page="home"]):not([data-page="admin"]) .section-head h1,
body[data-page="wrong-retry"] .wrong-retry-head h1,
body[data-page="groups"] .section-head h1,
body[data-page="search"] .section-head h1 {
  font-size: clamp(30px, 2.75vw, 44px) !important;
  line-height: 1.14 !important;
  letter-spacing: 0 !important;
}

body:not([data-page="home"]):not([data-page="admin"]) .section-head p {
  max-width: 56em !important;
  color: #5f7185 !important;
}

body[data-page="search"] .section-head {
  margin-bottom: 14px !important;
}

body[data-page="search"] .search-page-form {
  grid-template-columns: minmax(160px, 240px) minmax(220px, 1fr) minmax(160px, 240px) !important;
  align-items: end !important;
  padding: 16px !important;
  gap: 12px !important;
}

body[data-page="search"] .search-page-form input,
body[data-page="search"] .search-page-form select {
  min-height: 50px !important;
}

body[data-page="search"] .search-page-form button[type="submit"] {
  min-height: 50px !important;
  padding-inline: 22px !important;
  box-shadow: 0 14px 24px rgba(47, 128, 237, .12) !important;
}

body[data-page="search"] .search-result-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

body[data-page="search"] .search-result-grid:has(.empty-state) {
  grid-template-columns: 1fr !important;
}

body[data-page="search"] .search-result-grid .empty-state {
  min-height: 160px !important;
  padding: 26px !important;
  background:
    radial-gradient(circle at 70% 0%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(135deg, #ffffff, #f8fbff) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  color: #5f7185 !important;
}

body[data-page="ask"] .ai-guide-panel:has(.ai-guide-empty) {
  min-height: 360px !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

body[data-page="ask"] .ai-guide-empty {
  gap: 12px !important;
}

body[data-page="ask"] .ai-guide-empty::before {
  transform: scale(.86) !important;
  opacity: .96 !important;
}

body[data-page="ask"] .ai-guide-empty h2 {
  font-size: clamp(28px, 2.5vw, 36px) !important;
}

body[data-page="practice"] .test-list-card,
body[data-page="practice"] .chapter-card {
  background: linear-gradient(135deg, #ffffff 0%, #fbfdff 100%) !important;
  border-color: rgba(106, 143, 174, .20) !important;
}

body[data-page="practice"] .chapter-fallback-note {
  color: #2f6f61 !important;
  background: linear-gradient(90deg, rgba(232, 255, 246, .98), rgba(240, 253, 250, .94)) !important;
  border-color: rgba(47, 191, 154, .22) !important;
}

/* Ask AI guided-flow polish: keep the empty guide state centered and audio buttons icon-only. */
body[data-page="ask"] .ai-guide-panel:has(.ai-guide-empty) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
}

body[data-page="ask"] .ai-guide-empty {
  min-height: 0 !important;
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  gap: 12px !important;
  text-align: center !important;
}

body[data-page="ask"] .ai-guide-empty::before {
  justify-self: center !important;
  margin-inline: auto !important;
}

body[data-page="ask"] .guide-audio-toggle,
body[data-page="ask"] .speaker-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2f9f82 !important;
}

body[data-page="ask"] .guide-audio-toggle:hover,
body[data-page="ask"] .speaker-icon:hover,
body[data-page="ask"] .speaker-icon.speaking {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2f80ed !important;
}

body[data-page="ask"] .ai-teacher-mark {
  display: none !important;
}

body[data-page="practice"] .test-list-card.practice-status-mastered {
  background: linear-gradient(135deg, #f4fff9 0%, #ffffff 86%) !important;
}

body[data-page="practice"] .test-list-card h3 {
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.22 !important;
}

body[data-page="test"] .test-paper-title-block h2,
body[data-page="wrong-retry"] .wrong-retry-paper h2 {
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.18 !important;
}

body[data-page="test"] .test-question-card .question-title-row h3,
body[data-page="wrong-retry"] #wrongRetryPaper .question-card h3 {
  font-size: clamp(19px, 1.46vw, 24px) !important;
  line-height: 1.48 !important;
}

body[data-page="test"] .test-question-card .option-label,
body[data-page="wrong-retry"] #wrongRetryPaper .option-label {
  min-height: 58px !important;
}

body:not([data-page="home"]) .study-companion.minimized {
  grid-template-columns: 86px !important;
  right: clamp(16px, 2.4vw, 28px);
  bottom: calc(16px + env(safe-area-inset-bottom));
}

body:not([data-page="home"]) .study-companion.minimized .companion-bubble {
  width: 86px !important;
  height: 102px !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 22px rgba(39, 78, 108, .18)) !important;
}

/* Admin visual alignment: keep backend workflows intact while matching the light blue-green frontend system. */
body[data-page="admin"] {
  --admin-panel: rgba(255, 255, 255, .88);
  --admin-panel-strong: rgba(255, 255, 255, .96);
  --admin-panel-soft: rgba(247, 251, 255, .86);
  --admin-line: rgba(106, 143, 174, .22);
  --admin-line-strong: rgba(47, 128, 237, .28);
  --admin-blue: #2f80ed;
  --admin-green: #2fbf9a;
  --admin-text: #1d2f43;
  --admin-muted: #5f7488;
  color: var(--admin-text) !important;
}

body[data-page="admin"] .workspace,
body[data-page="admin"] .admin-pane,
body[data-page="admin"] .admin-form,
body[data-page="admin"] .compact-admin-form,
body[data-page="admin"] .admin-collapse-panel,
body[data-page="admin"] .admin-insight-card,
body[data-page="admin"] .admin-ops-grid > section,
body[data-page="admin"] .manager-card,
body[data-page="admin"] .test-button,
body[data-page="admin"] .test-list-card,
body[data-page="admin"] .admin-question-item,
body[data-page="admin"] .student-detail-card,
body[data-page="admin"] .support-ticket-detail,
body[data-page="admin"] .admin-preview-card {
  color: var(--admin-text) !important;
  border-color: var(--admin-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 252, 255, .9)),
    rgba(255, 255, 255, .86) !important;
  box-shadow: 0 14px 34px rgba(39, 78, 108, .08) !important;
}

body[data-page="admin"] .admin-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-pane.active {
  padding: 24px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(47, 191, 154, .055), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(247,251,255,.86)) !important;
  box-shadow: 0 18px 42px rgba(39, 78, 108, .09) !important;
}

body[data-page="admin"] .admin-pane.active > .admin-panel-title:first-child,
body[data-page="admin"] .admin-pane.active > .admin-form:first-child > .admin-panel-title:first-child {
  margin-bottom: 12px !important;
}

body[data-page="admin"] .admin-panel-title h2,
body[data-page="admin"] .admin-panel-title h3,
body[data-page="admin"] .section-head h1,
body[data-page="admin"] .admin-quick-panel h2,
body[data-page="admin"] .manager-card strong,
body[data-page="admin"] .admin-insight-head h3,
body[data-page="admin"] .support-detail-head strong,
body[data-page="admin"] .student-detail-grid h3,
body[data-page="admin"] .compact-title h3 {
  color: var(--admin-text) !important;
  letter-spacing: 0 !important;
}

body[data-page="admin"] .admin-panel-title p,
body[data-page="admin"] .section-head p,
body[data-page="admin"] .admin-quick-panel p,
body[data-page="admin"] .manager-card small,
body[data-page="admin"] .form-note,
body[data-page="admin"] .admin-session span,
body[data-page="admin"] .admin-insight-head span,
body[data-page="admin"] .admin-mini-row small,
body[data-page="admin"] .admin-ledger-row small,
body[data-page="admin"] .support-ticket-detail,
body[data-page="admin"] .support-ticket-card span,
body[data-page="admin"] .detail-row span,
body[data-page="admin"] .admin-feedback-row p,
body[data-page="admin"] .admin-feedback-row small,
body[data-page="admin"] .admin-feedback-meta {
  color: var(--admin-muted) !important;
}

body[data-page="admin"] .admin-tabs {
  top: 96px !important;
  border-color: var(--admin-line) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 14px 34px rgba(39, 78, 108, .09) !important;
}

body[data-page="admin"] .admin-tabs button,
body[data-page="admin"] .admin-quick-actions button {
  color: #36526a !important;
  border-color: rgba(106, 143, 174, .2) !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-tabs button.active,
body[data-page="admin"] .admin-quick-actions button:hover {
  color: #ffffff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
  box-shadow: 0 12px 24px rgba(47, 128, 237, .18) !important;
}

body[data-page="admin"] .admin-quick-panel,
body[data-page="admin"] .admin-launch-check {
  border-color: rgba(106, 143, 174, .2) !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.9), rgba(246,251,255,.86)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .08) !important;
}

body[data-page="admin"] .admin-list-filters,
body[data-page="admin"] .support-admin-toolbar,
body[data-page="admin"] .student-admin-tools,
body[data-page="admin"] .visual-question-editor,
body[data-page="admin"] .course-unit-admin-card,
body[data-page="admin"] .course-resource-admin,
body[data-page="admin"] .course-scaffold-admin,
body[data-page="admin"] .learning-course-admin,
body[data-page="admin"] .admin-config-group,
body[data-page="admin"] .json-details,
body[data-page="admin"] .ability-picker,
body[data-page="admin"] .mapping-checklist,
body[data-page="admin"] .tree-grade,
body[data-page="admin"] .detail-row,
body[data-page="admin"] .admin-feedback-card,
body[data-page="admin"] .admin-feedback-row,
body[data-page="admin"] .admin-mini-row,
body[data-page="admin"] .admin-ledger-row,
body[data-page="admin"] .payment-row,
body[data-page="admin"] .payment-head,
body[data-page="admin"] .support-meta div,
body[data-page="admin"] .support-replies div {
  color: var(--admin-text) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  background: rgba(255, 255, 255, .72) !important;
}

body[data-page="admin"] .admin-list-filters {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  padding: 14px !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .07) !important;
}

body[data-page="admin"] label,
body[data-page="admin"] .field-label,
body[data-page="admin"] .admin-list-filters label,
body[data-page="admin"] .student-admin-tool-grid label,
body[data-page="admin"] .payment-row label span,
body[data-page="admin"] .admin-json-config span {
  color: #506a82 !important;
  font-weight: 850 !important;
}

body[data-page="admin"] input,
body[data-page="admin"] select,
body[data-page="admin"] textarea,
body[data-page="admin"] .stem-editor,
body[data-page="admin"] .visual-select-button {
  color: var(--admin-text) !important;
  border: 1px solid rgba(106, 143, 174, .24) !important;
  background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

body[data-page="admin"] input:focus,
body[data-page="admin"] select:focus,
body[data-page="admin"] textarea:focus,
body[data-page="admin"] .stem-editor:focus,
body[data-page="admin"] .visual-select.open .visual-select-button {
  outline: none !important;
  border-color: rgba(47, 128, 237, .52) !important;
  box-shadow: 0 0 0 3px rgba(47, 128, 237, .10), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

body[data-page="admin"] input::placeholder,
body[data-page="admin"] textarea::placeholder,
body[data-page="admin"] .stem-editor:empty::before {
  color: #8ca1b4 !important;
}

body[data-page="admin"] .visual-select-menu {
  color: var(--admin-text) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 18px 38px rgba(39, 78, 108, .14) !important;
}

body[data-page="admin"] .visual-select-option {
  color: var(--admin-text) !important;
  background: transparent !important;
}

body[data-page="admin"] .visual-select-option:hover,
body[data-page="admin"] .visual-select-option.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
}

body[data-page="admin"] button,
body[data-page="admin"] .primary,
body[data-page="admin"] button[type="submit"] {
  border-color: transparent !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
  box-shadow: 0 14px 28px rgba(47, 128, 237, .18) !important;
}

body[data-page="admin"] .secondary-button,
body[data-page="admin"] .manager-actions button,
body[data-page="admin"] .card-actions .secondary-button,
body[data-page="admin"] .admin-preview-head .secondary-button,
body[data-page="admin"] .backup-row .secondary-button {
  color: #13836d !important;
  border: 1px solid rgba(47, 191, 154, .28) !important;
  background: rgba(234, 249, 244, .86) !important;
  box-shadow: none !important;
}

body[data-page="admin"] button:disabled,
body[data-page="admin"] .secondary-button:disabled {
  color: #9aaabd !important;
  border-color: rgba(106, 143, 174, .14) !important;
  background: rgba(245, 248, 252, .78) !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-table {
  border-color: var(--admin-line) !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .07) !important;
}

body[data-page="admin"] .admin-table th {
  color: #247b69 !important;
  background: rgba(234, 249, 244, .82) !important;
}

body[data-page="admin"] .admin-table td,
body[data-page="admin"] .admin-table th {
  border-bottom-color: rgba(106, 143, 174, .16) !important;
}

body[data-page="admin"] .admin-list,
body[data-page="admin"] .management-list,
body[data-page="admin"] .admin-question-list {
  display: grid !important;
  gap: 12px !important;
  margin-top: 14px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-list .test-button,
body[data-page="admin"] .admin-list-card,
body[data-page="admin"] .manager-card,
body[data-page="admin"] .question-bank-card,
body[data-page="admin"] .support-ticket-card,
body[data-page="admin"] .admin-question-item {
  min-height: 76px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.92)) !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .06) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body[data-page="admin"] .admin-list-card {
  width: 100% !important;
}

body[data-page="admin"] .admin-list-card > div:first-child,
body[data-page="admin"] .manager-card > div:first-child {
  min-width: 0 !important;
}

body[data-page="admin"] .admin-list-card .card-actions,
body[data-page="admin"] .manager-actions {
  flex: 0 0 auto !important;
}

body[data-page="admin"] .admin-list .test-button:hover,
body[data-page="admin"] .admin-list-card:hover,
body[data-page="admin"] .manager-card:hover,
body[data-page="admin"] .support-ticket-card:hover,
body[data-page="admin"] .admin-question-item:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 128, 237, .30) !important;
  box-shadow: 0 16px 34px rgba(39, 78, 108, .10) !important;
}

body[data-page="admin"] .admin-list .test-button strong,
body[data-page="admin"] .admin-list-card strong,
body[data-page="admin"] .manager-card strong,
body[data-page="admin"] .admin-question-item strong {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

body[data-page="admin"] .admin-entry-tone-0 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(243,250,255,.92)) !important;
  border-color: rgba(106, 143, 174, .22) !important;
}

body[data-page="admin"] .admin-entry-tone-1 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(245,255,250,.96), rgba(239,252,248,.90)) !important;
  border-color: rgba(83, 184, 154, .28) !important;
}

body[data-page="admin"] .admin-question-slot {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

body[data-page="admin"] .admin-question-slot-status {
  justify-self: end;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(83, 184, 154, .30);
  color: var(--green-dark);
  background: rgba(238, 252, 247, .9);
  font-weight: 800;
  white-space: nowrap;
}

body[data-page="admin"] .admin-metric-card {
  color: var(--admin-text) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  background: linear-gradient(135deg, #ffffff, #f6fbff) !important;
}

body[data-page="admin"] .admin-metric-card strong,
body[data-page="admin"] .admin-ledger-row.income b,
body[data-page="admin"] .admin-insight-row em,
body[data-page="admin"] .tree-grade summary,
body[data-page="admin"] .tree-grade-title,
body[data-page="admin"] .support-meta dt,
body[data-page="admin"] .admin-quality-summary {
  color: #16876e !important;
}

body[data-page="admin"] .admin-metric-card span,
body[data-page="admin"] .admin-metric-card small {
  color: var(--admin-muted) !important;
}

body[data-page="admin"] .admin-insight-row b,
body[data-page="admin"] .support-status {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
}

body[data-page="admin"] .download-result,
body[data-page="admin"] .code-result,
body[data-page="admin"] .empty-state,
body[data-page="admin"] .slim-empty,
body[data-page="admin"] .admin-quality-summary {
  border-color: rgba(106, 143, 174, .18) !important;
  color: var(--admin-muted) !important;
  background: rgba(255, 255, 255, .72) !important;
}

body[data-page="admin"] .admin-preview-layer {
  background: rgba(229, 241, 250, .66) !important;
  backdrop-filter: blur(12px) !important;
}

@media (max-width: 980px) {
  body[data-page="admin"] .manager-layout.two-column,
  body[data-page="admin"] .support-admin-layout,
  body[data-page="admin"] .admin-quick-panel,
  body[data-page="admin"] .student-admin-tools,
  body[data-page="admin"] .student-detail-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="admin"] .admin-tabs {
    top: 78px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  body[data-page="admin"] .admin-tabs button {
    white-space: nowrap !important;
  }
}

body:not([data-page="home"]) .site-footer {
  margin-top: 44px !important;
  padding: 22px clamp(24px, 4vw, 56px) !important;
  opacity: .82 !important;
}

body[data-page="home"] .home-next-step-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  min-height: 188px;
  margin-top: 14px;
  padding: 18px 24px 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 14%, rgba(47, 191, 154, .10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--commercial-line-strong);
  border-radius: 8px;
  box-shadow: var(--commercial-shadow);
  overflow: visible;
}

body[data-page="home"] .home-next-step-card > div:first-child {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 8px;
  min-width: 0;
}

body[data-page="home"] .home-next-step-card span {
  width: fit-content;
  padding: 5px 10px;
  color: var(--site-green-strong);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  background: var(--site-green-soft);
  border: 1px solid rgba(47, 191, 154, .22);
  border-radius: 999px;
}

body[data-page="home"] .home-next-step-card strong {
  color: var(--ink-strong);
  font-size: clamp(21px, 1.55vw, 26px);
  line-height: 1.16;
}

body[data-page="home"] .home-next-step-card p {
  max-width: 32em;
  margin: 0;
  color: #5f7488;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 700;
  line-height: 1.58;
}

body[data-page="home"] .home-next-step-card a {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 128px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green));
  border-radius: 8px;
  box-shadow: 0 14px 26px rgba(47, 128, 237, .14);
}

body[data-page="home"] .home-snail-track {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 44px;
  margin-top: -4px;
  overflow: visible;
  cursor: default;
  background: transparent;
  border-radius: 999px;
}

body[data-page="home"] .home-snail-track::before {
  content: none;
}

body[data-page="home"] .home-snail-button {
  display: block;
  position: absolute;
  left: calc(100% + 10px);
  right: auto;
  bottom: 2px;
  width: 38px;
  height: 31px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none !important;
  cursor: pointer;
  transform-origin: 50% 86%;
  animation: homeSnailCrawl 120s linear infinite;
}

body[data-page="home"] .home-snail-button::after {
  content: none !important;
  display: none !important;
}

body[data-page="home"] .home-snail-button:hover,
body[data-page="home"] .home-snail-button:active {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-snail-button:focus-visible {
  outline: 2px solid rgba(70, 132, 222, .5);
  outline-offset: 4px;
  border-radius: 999px;
}

body[data-page="home"] .home-snail-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 9px 12px rgba(47, 128, 118, .16));
  transform-origin: 52% 74%;
  animation: homeSnailCreep 2.8s ease-in-out infinite;
}

body[data-page="home"] .snail-shadow {
  fill: rgba(60, 105, 120, .12);
}

body[data-page="home"] .snail-foot {
  fill: #8edbc3;
  transform-origin: 52% 80%;
  animation: homeSnailFootWave 1.4s ease-in-out infinite;
}

body[data-page="home"] .snail-body,
body[data-page="home"] .snail-neck {
  fill: #bdf1d7;
  stroke: rgba(71, 164, 139, .7);
  stroke-width: 2;
  transform-origin: 70% 68%;
  animation: homeSnailBodyStretch 2.8s ease-in-out infinite;
}

body[data-page="home"] .snail-shell.shell-main {
  fill: #ffd982;
  stroke: #f1b24e;
  stroke-width: 3;
  transform-origin: 54px 44px;
  animation: homeSnailShellRock 2.8s ease-in-out infinite;
}

body[data-page="home"] .snail-shell.shell-spiral {
  fill: none;
  stroke: #e88f52;
  stroke-width: 5;
  stroke-linecap: round;
  transform-origin: 54px 44px;
  animation: homeSnailShellRock 2.8s ease-in-out infinite;
}

body[data-page="home"] .snail-antenna {
  fill: none;
  stroke: #64b99c;
  stroke-width: 4;
  stroke-linecap: round;
}

body[data-page="home"] .snail-antenna.left {
  animation: homeSnailFeelLeft 3.6s ease-in-out infinite;
  transform-origin: 111px 38px;
}

body[data-page="home"] .snail-antenna.right {
  animation: homeSnailFeelRight 3.9s ease-in-out infinite;
  transform-origin: 120px 40px;
}

body[data-page="home"] .snail-eye {
  fill: #ffffff;
  stroke: #64b99c;
  stroke-width: 2;
}

body[data-page="home"] .snail-eye-dot {
  fill: #24334a;
}

body[data-page="home"] .snail-smile {
  fill: none;
  stroke: #3f8d78;
  stroke-width: 2.4;
  stroke-linecap: round;
}

body[data-page="home"] .snail-cheek {
  fill: rgba(255, 142, 135, .55);
}

body[data-page="home"] .home-next-step-card .home-snail-bubble {
  position: absolute;
  right: -4px;
  left: auto;
  bottom: calc(100% + 10px);
  width: 220px;
  max-width: min(220px, 70vw);
  padding: 8px 11px;
  color: rgba(31, 53, 82, .92);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: left;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(122, 208, 179, .58);
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(50, 100, 130, .14);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 6px) scale(.94);
  transition: opacity .18s ease, transform .18s ease;
}

body[data-page="home"] .home-next-step-card .home-snail-bubble::after {
  content: "";
  position: absolute;
  right: 35px;
  left: auto;
  bottom: -6px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.95);
  border-right: 1px solid rgba(122, 208, 179, .58);
  border-bottom: 1px solid rgba(122, 208, 179, .58);
  transform: rotate(45deg);
}

body[data-page="home"] .home-snail-button.is-talking .home-snail-bubble {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@keyframes homeSnailCrawl {
  0% {
    left: calc(100% + 10px);
  }
  100% {
    left: -56px;
  }
}

@keyframes homeSnailCreep {
  0%, 100% {
    transform: translateY(0) scaleX(-1) scaleY(1);
  }
  26% {
    transform: translateY(1px) scaleX(-1.06) scaleY(.95);
  }
  52% {
    transform: translateY(-1px) scaleX(-.96) scaleY(1.04);
  }
  76% {
    transform: translateY(0) scaleX(-1.03) scaleY(.98);
  }
}

@keyframes homeSnailBodyStretch {
  0%, 100% {
    transform: translateX(0) scaleX(1);
  }
  28% {
    transform: translateX(-2px) scaleX(1.035);
  }
  58% {
    transform: translateX(1px) scaleX(.975);
  }
}

@keyframes homeSnailFootWave {
  0%, 100% {
    transform: translateX(0) scaleX(1);
  }
  45% {
    transform: translateX(-2px) scaleX(1.06);
  }
  70% {
    transform: translateX(1px) scaleX(.96);
  }
}

@keyframes homeSnailShellRock {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  34% {
    transform: translate(-1px, 1px) rotate(-2deg);
  }
  68% {
    transform: translate(1px, 0) rotate(1.4deg);
  }
}

@keyframes homeSnailFeelLeft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}

@keyframes homeSnailFeelRight {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}

body[data-page="home"] .home-next-step-card.guest-next-step {
  min-height: 190px;
}

@media (max-width: 760px) {
  body[data-page="home"] .home-next-step-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  body[data-page="home"] .home-next-step-card > div:first-child,
  body[data-page="home"] .home-next-step-card a,
  body[data-page="home"] .home-snail-track {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-page="home"] .home-snail-track {
    min-height: 82px;
  }

  body[data-page="home"] .home-next-step-card a {
    width: 100%;
  }
}

body[data-page="account"] .account-hero,
body[data-page="groups"] .group-hero-card,
body[data-page="parent"] .parent-hero-card {
  background:
    radial-gradient(circle at 92% 10%, rgba(47, 191, 154, .10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
}

body[data-page="groups"] .group-hero-visual {
  opacity: .92 !important;
  filter: saturate(.94) contrast(.98) !important;
}

body[data-page="parent"] .membership-board {
  margin-top: 22px !important;
}

body[data-page="parent"] .parent-payment-panel .membership-board {
  margin-top: 0 !important;
}

@media (max-width: 1180px) {
  body[data-page="search"] .search-page-form {
    grid-template-columns: 1fr 1fr !important;
  }

  body[data-page="search"] .search-page-form button[type="submit"] {
    grid-column: 1 / -1 !important;
  }
}

/* Admin page refinement: polish dense editor pages without touching workflow logic. */
body[data-page="admin"] #adminPane-payment .admin-form,
body[data-page="admin"] #adminPane-site .admin-form,
body[data-page="admin"] #adminPane-learning .admin-form,
body[data-page="admin"] #adminPane-tests .admin-form {
  gap: 18px !important;
  padding: 24px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(47, 191, 154, .06), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.92)) !important;
  box-shadow: 0 16px 36px rgba(39, 78, 108, .08) !important;
}

body[data-page="admin"] #adminPane-learning .admin-row,
body[data-page="admin"] #adminPane-tests .admin-row,
body[data-page="admin"] #adminPane-site .admin-row,
body[data-page="admin"] #adminPane-payment .admin-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  align-items: end !important;
}

body[data-page="admin"] #adminPane-learning textarea,
body[data-page="admin"] #adminPane-tests textarea,
body[data-page="admin"] #adminPane-site textarea,
body[data-page="admin"] #adminPane-payment textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

body[data-page="admin"] #learnContent,
body[data-page="admin"] #learnCourseIntro,
body[data-page="admin"] #learnMethodSummary,
body[data-page="admin"] #adminPane-tests .stem-editor {
  min-height: 140px !important;
}

body[data-page="admin"] #learnAnimationCode,
body[data-page="admin"] #learnExperimentCode,
body[data-page="admin"] #questionAnimationCode,
body[data-page="admin"] #questionSolution,
body[data-page="admin"] #questionExplanation {
  min-height: 160px !important;
}

body[data-page="admin"] .mapping-field {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .64) !important;
}

body[data-page="admin"] .mapping-checklist {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  max-height: 220px !important;
  margin-top: 0 !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border-color: rgba(106, 143, 174, .16) !important;
  background: linear-gradient(135deg, rgba(247,251,255,.82), rgba(255,255,255,.74)) !important;
}

body[data-page="admin"] .mapping-picker-toolbar,
body[data-page="admin"] .mapping-selected,
body[data-page="admin"] .mapping-result-list {
  min-width: 0 !important;
}

body[data-page="admin"] .mapping-picker-toolbar {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 180px) minmax(150px, 180px) auto !important;
  gap: 10px !important;
  align-items: end !important;
  margin: 0 !important;
}

body[data-page="admin"] .mapping-result-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 10px !important;
}

body[data-page="admin"] .mapping-check,
body[data-page="admin"] .mapping-checklist .inline-check {
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(106, 143, 174, .14) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .78) !important;
  color: #36526a !important;
}

body[data-page="admin"] .mapping-picker-toolbar label {
  display: grid !important;
  gap: 6px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-page="admin"] .mapping-checklist::-webkit-scrollbar,
body[data-page="admin"] .site-admin-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body[data-page="admin"] .mapping-checklist::-webkit-scrollbar-thumb,
body[data-page="admin"] .site-admin-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(106, 143, 174, .42);
}

body[data-page="admin"] .learning-course-admin,
body[data-page="admin"] .course-unit-admin-card,
body[data-page="admin"] .visual-question-editor,
body[data-page="admin"] .course-resource-admin,
body[data-page="admin"] .course-scaffold-admin {
  gap: 16px !important;
  padding: 18px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,251,255,.78)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .06) !important;
}

body[data-page="admin"] .course-unit-admin-card.admin-entry-tone-0,
body[data-page="admin"] .admin-question-item.admin-entry-tone-0 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(243,250,255,.92)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: rgba(106, 143, 174, .22) !important;
}

body[data-page="admin"] .course-unit-admin-card.admin-entry-tone-1,
body[data-page="admin"] .admin-question-item.admin-entry-tone-1 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(245,255,250,.96), rgba(239,252,248,.90)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: rgba(83, 184, 154, .28) !important;
}

body[data-page="admin"] .math-symbol-toolbar {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: rgba(247, 251, 255, .78) !important;
}

body[data-page="admin"] .math-symbol-toolbar button {
  min-width: 38px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(47, 128, 237, .22) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
  box-shadow: 0 8px 18px rgba(47, 128, 237, .16) !important;
}

body[data-page="admin"] .admin-question-list {
  display: grid !important;
  gap: 16px !important;
}

body[data-page="admin"] .admin-expanded-question-card {
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .06) !important;
}

body[data-page="admin"] .admin-entry-tone-0,
body[data-page="admin"] .course-unit-admin-card.admin-entry-tone-0,
body[data-page="admin"] .admin-expanded-question-card.admin-entry-tone-0 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(240,248,255,.98), rgba(224,241,255,.94)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: rgba(80, 154, 225, .36) !important;
}

body[data-page="admin"] .admin-entry-tone-1,
body[data-page="admin"] .course-unit-admin-card.admin-entry-tone-1,
body[data-page="admin"] .admin-expanded-question-card.admin-entry-tone-1 {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(239,253,247,.98), rgba(222,248,238,.94)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border-color: rgba(70, 184, 145, .36) !important;
}

body[data-page="admin"] .admin-question-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body[data-page="admin"] .admin-question-card-head h4 {
  margin: 0 !important;
  color: #d94836 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
}

body[data-page="admin"] .course-unit-admin-head h4 {
  color: #d94836 !important;
}

body[data-page="admin"] .admin-question-card-head span {
  padding: 6px 12px !important;
  border: 1px solid rgba(83, 184, 154, .28) !important;
  border-radius: 999px !important;
  color: var(--green-dark) !important;
  background: rgba(238, 252, 247, .86) !important;
  font-weight: 800 !important;
}

body[data-page="admin"] .admin-formula-fold {
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.62) !important;
}

body[data-page="admin"] .admin-formula-fold summary {
  cursor: pointer !important;
  padding: 10px 12px !important;
  color: #2f806f !important;
  font-weight: 900 !important;
}

body[data-page="admin"] .admin-formula-fold .math-symbol-toolbar {
  margin: 0 10px 10px !important;
}

body[data-page="admin"] .admin-question-meta-row {
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
}

body[data-page="admin"] .question-ability-field {
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 8px !important;
}

body[data-page="admin"] .admin-field-block {
  display: grid !important;
  gap: 8px !important;
}

body[data-page="admin"] .admin-field-block > strong {
  color: #53687f !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-page="admin"] .question-ability-picker {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 7px !important;
  min-height: 42px !important;
  max-height: 112px !important;
  overflow: auto !important;
  padding: 8px !important;
  border: 1px solid rgba(106, 143, 174, .22) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .72) !important;
}

body[data-page="admin"] .question-ability-picker label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  border: 1px solid rgba(83, 184, 154, .28) !important;
  border-radius: 999px !important;
  background: rgba(239, 252, 247, .86) !important;
  color: #247b69 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-page="admin"] .question-ability-picker input {
  flex: 0 0 auto !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

body[data-page="admin"] .stem-plus {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  right: 10px !important;
  bottom: 10px !important;
  color: #2f806f !important;
  border: 1px solid rgba(83, 184, 154, .26) !important;
  background: rgba(238, 252, 247, .82) !important;
  box-shadow: 0 8px 16px rgba(39, 78, 108, .08) !important;
}

body[data-page="admin"] .stem-plus:hover {
  background: rgba(225, 249, 241, .94) !important;
  box-shadow: 0 10px 20px rgba(39, 78, 108, .10) !important;
}

body[data-page="admin"] .compact-question-row {
  grid-template-columns: minmax(160px, 240px) minmax(220px, 1fr) !important;
}

body[data-page="admin"] .compact-paste-preview {
  min-height: 70px !important;
}

body[data-page="admin"] .compact-paste-preview img {
  width: 92px !important;
  height: 68px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

body[data-page="admin"] .site-admin-list {
  display: grid !important;
  gap: 14px !important;
}

body[data-page="admin"] #adminPane-site .admin-site-section {
  margin: 0 !important;
}

body[data-page="admin"] #adminPane-site .admin-site-section summary {
  cursor: pointer !important;
}

body[data-page="admin"] #adminPane-site .admin-site-section summary::marker {
  color: #52bfa5 !important;
}

body[data-page="admin"] #adminPane-site .admin-site-section-body {
  display: grid !important;
  gap: 14px !important;
  padding: 16px !important;
}

body[data-page="admin"] #adminPane-site .admin-site-basic-grid {
  grid-template-columns: minmax(220px, .7fr) minmax(260px, 1fr) !important;
  align-items: start !important;
}

body[data-page="admin"] #adminPane-site .admin-site-basic-grid .wide-field,
body[data-page="admin"] #adminPane-site .app-config-basic-row .wide-field,
body[data-page="admin"] #adminPane-site .admin-copy-grid .wide-field {
  grid-column: 1 / -1 !important;
}

body[data-page="admin"] #adminPane-site .app-config-basic-row,
body[data-page="admin"] #adminPane-site .admin-copy-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

body[data-page="admin"] #adminPane-site .app-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  padding: 0 14px 12px !important;
}

body[data-page="admin"] #adminPane-site .app-feature-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  color: var(--admin-text) !important;
  background: rgba(247, 251, 255, .78) !important;
}

body[data-page="admin"] #adminPane-site .app-feature-item input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  accent-color: #49bfa0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] #adminPane-site .app-tab-list {
  max-height: 380px !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

@media (max-width: 760px) {
  body[data-page="admin"] #adminPane-site .app-config-basic-row,
  body[data-page="admin"] #adminPane-site .admin-copy-grid,
  body[data-page="admin"] #adminPane-site .app-feature-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="admin"] .student-detail-section-head {
    align-items: stretch !important;
    flex-direction: column !important;
  }
}

body[data-page="admin"] #adminPane-site .admin-site-section-body > .secondary-button {
  justify-self: start !important;
}

body[data-page="admin"] #adminPane-site .site-admin-list {
  max-height: 520px !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

body[data-page="admin"] #adminPane-site #sitePagesEditor {
  max-height: 620px !important;
}

body[data-page="admin"] #adminPane-site #thoughtCardsEditor {
  max-height: 640px !important;
}

body[data-page="admin"] .site-admin-card,
body[data-page="admin"] .thought-card-admin-row {
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(47, 191, 154, .055), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.92)) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .07) !important;
}

body[data-page="admin"] .site-admin-card-head {
  min-height: 38px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="admin"] .site-admin-card-head strong,
body[data-page="admin"] .admin-mini-label {
  color: #16876e !important;
}

body[data-page="admin"] .site-admin-card .admin-row,
body[data-page="admin"] .thought-card-admin-row .admin-row {
  padding: 10px !important;
  border: 1px solid rgba(106, 143, 174, .12) !important;
  border-radius: 8px !important;
  background: rgba(247, 251, 255, .74) !important;
}

body[data-page="admin"] .site-rich-editor {
  min-height: 150px !important;
  color: var(--admin-text) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
}

body[data-page="admin"] .visual-payment-list,
body[data-page="admin"] #adminPointCostConfig {
  display: grid !important;
  gap: 14px !important;
}

body[data-page="admin"] .admin-config-group {
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.9)) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .06) !important;
}

body[data-page="admin"] .admin-config-group summary {
  min-height: 58px !important;
  padding: 14px 16px !important;
  color: var(--admin-text) !important;
  background: rgba(234, 249, 244, .56) !important;
}

body[data-page="admin"] .admin-config-group summary small {
  color: var(--admin-muted) !important;
}

body[data-page="admin"] .admin-config-group[open] summary {
  margin-bottom: 0 !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="admin"] .admin-config-subgroup {
  overflow: hidden !important;
  margin: 10px 12px !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-config-subgroup > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 50px !important;
  padding: 12px 14px !important;
  color: var(--admin-text) !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, rgba(247,251,255,.96), rgba(235,250,245,.72)) !important;
}

body[data-page="admin"] .admin-config-subgroup > summary span {
  font-weight: 900 !important;
}

body[data-page="admin"] .admin-config-subgroup > summary small {
  color: var(--admin-muted) !important;
  font-weight: 800 !important;
}

body[data-page="admin"] .admin-config-subgroup[open] > summary {
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="admin"] .admin-payment-fold-body {
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

body[data-page="admin"] .student-detail-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
}

body[data-page="admin"] .student-detail-section-head h3 {
  margin: 0 !important;
}

body[data-page="admin"] .admin-subsection-title {
  margin: 16px 14px 6px !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: #16876e !important;
  font-weight: 900 !important;
  background: rgba(234, 249, 244, .72) !important;
}

body[data-page="admin"] .payment-row {
  grid-template-columns: minmax(190px, .9fr) minmax(260px, 1.1fr) minmax(180px, .8fr) !important;
  margin: 10px 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: none !important;
}

body[data-page="admin"] .payment-row.admin-control-row input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 !important;
  accent-color: #49bfa0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .payment-head {
  min-height: 48px !important;
  align-items: center !important;
  color: #16876e !important;
  background: rgba(234, 249, 244, .78) !important;
}

body[data-page="admin"] .payment-row.membership-row {
  grid-template-columns: minmax(150px, 1fr) minmax(100px, .7fr) minmax(100px, .7fr) minmax(100px, .7fr) minmax(220px, 1.35fr) auto !important;
}

body[data-page="admin"] .payment-row.companion-teacher-row,
body[data-page="admin"] .payment-row.companion-teacher-head {
  grid-template-columns: minmax(160px, .8fr) minmax(280px, 1.3fr) minmax(220px, 1fr) auto !important;
}

body[data-page="admin"] .admin-json-config {
  border-color: rgba(106, 143, 174, .16) !important;
  background: rgba(247, 251, 255, .72) !important;
}

body[data-page="admin"] .admin-insight-row {
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  color: var(--admin-text) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(47, 191, 154, .08), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,252,255,.9)) !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .06) !important;
}

body[data-page="admin"] .admin-insight-row:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(47, 128, 237, .28) !important;
  box-shadow: 0 14px 30px rgba(39, 78, 108, .10) !important;
}

body[data-page="admin"] .admin-insight-row strong {
  color: var(--admin-text) !important;
}

body[data-page="admin"] .admin-insight-row small {
  color: var(--admin-muted) !important;
}

body[data-page="admin"] .admin-insight-row em {
  color: #16876e !important;
}

@media (max-width: 980px) {
  body[data-page="admin"] .payment-row,
  body[data-page="admin"] .payment-row.membership-row,
  body[data-page="admin"] .payment-row.companion-teacher-row,
  body[data-page="admin"] .payment-row.companion-teacher-head {
    grid-template-columns: 1fr !important;
  }

  body[data-page="admin"] .mapping-picker-toolbar {
    grid-template-columns: 1fr !important;
  }
}

/* Account home focus pass: fewer words, clearer next action. */
body[data-page="account"] .account-hero-card {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 286px) !important;
  align-items: center !important;
}

body[data-page="account"] .account-hero-main > p {
  max-width: 560px !important;
}

body[data-page="account"] .account-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

body[data-page="account"] .account-name-row h2 {
  margin: 0 !important;
}

body[data-page="account"] .account-name-edit {
  min-height: 28px !important;
  padding: 4px 10px !important;
  color: #13836d !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  border-radius: 999px !important;
  background: rgba(234, 249, 244, .78) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

body[data-page="account"] .nickname-form {
  max-width: 520px !important;
  margin-top: 12px !important;
}

body[data-page="account"] .nickname-form input {
  min-height: 42px !important;
}

body[data-page="account"] .nickname-form .secondary-button {
  min-height: 42px !important;
  padding-inline: 16px !important;
}

body[data-page="account"] .guardian-bound-note {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 36px !important;
  margin-top: 12px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  border-radius: 999px !important;
  color: #13836d !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  background: rgba(234, 249, 244, .78) !important;
}

body[data-page="account"] .guardian-bound-note.unbound {
  color: #2f80ed !important;
  border-color: rgba(47, 128, 237, .22) !important;
  background: rgba(235, 245, 255, .76) !important;
}

body[data-page="account"] .account-quick-actions {
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

body[data-page="account"] .account-primary-action {
  min-width: 152px !important;
  justify-content: center !important;
  font-weight: 950 !important;
}

body[data-page="account"] .account-logout {
  margin-left: auto !important;
  color: #7890a6 !important;
  border-color: rgba(106, 143, 174, .18) !important;
  background: rgba(247, 251, 255, .64) !important;
  box-shadow: none !important;
}

body[data-page="account"] .account-energy-card {
  min-height: 210px !important;
}

body[data-page="account"] .account-energy-card small {
  max-width: 150px !important;
  line-height: 1.45 !important;
}

body[data-page="account"] .account-stat-strip > div,
body[data-page="account"] .account-stat-strip > a {
  min-height: 94px !important;
  padding: 14px !important;
}

body[data-page="account"] .account-stat-strip span,
body[data-page="account"] .account-stat-strip small {
  line-height: 1.35 !important;
}

body[data-page="account"] .account-stat-strip strong {
  margin: 5px 0 3px !important;
  font-size: clamp(26px, 2.55vw, 38px) !important;
  line-height: 1 !important;
}

body[data-page="account"] .mission-card {
  min-height: 88px !important;
  padding: 15px 16px !important;
}

body[data-page="account"] .mission-card span {
  line-height: 1.45 !important;
}

body[data-page="account"] .account-group-more {
  margin-top: 12px !important;
}

body[data-page="account"] .account-group-more summary {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 7px 13px !important;
  color: #13836d !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  border: 1px solid rgba(47, 191, 154, .24) !important;
  border-radius: 999px !important;
  background: rgba(234, 249, 244, .78) !important;
}

body[data-page="account"] .account-group-more[open] summary {
  margin-bottom: 12px !important;
}

body[data-page="account"] .account-group-more .account-group-actions {
  margin-top: 12px !important;
}

body[data-page="account"] .account-group-metrics strong {
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

body[data-page="account"] .account-group-metrics > div {
  min-height: 122px !important;
  padding: 14px 16px !important;
}

body[data-page="account"] .account-group-metrics span,
body[data-page="account"] .account-group-metrics small {
  font-size: 13px !important;
}

body[data-page="account"] .account-group-empty-content p,
body[data-page="account"] .account-group-pk-list p {
  margin: 0 !important;
  color: #5f7488 !important;
}

@media (max-width: 980px) {
  body[data-page="account"] .account-hero-card {
    grid-template-columns: 1fr !important;
  }

  body[data-page="account"] .account-logout {
    margin-left: 0 !important;
  }
}

/* Parent center: final focus layout and AI report distinction. */
body[data-page="parent"] .parent-priority-panel {
  grid-column: 1 / -1 !important;
}

body[data-page="parent"] .parent-list-item strong,
body[data-page="parent"] .parent-list-item span,
body[data-page="parent"] .parent-list-item small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="parent"] .parent-priority-list > div,
body[data-page="parent"] .parent-priority-list .parent-list,
body[data-page="parent"] .parent-priority-list .parent-reminders {
  display: grid !important;
  gap: 10px !important;
}

body[data-page="parent"] .parent-priority-list .parent-list-item,
body[data-page="parent"] .parent-priority-list .parent-reminder {
  min-height: 76px !important;
  padding: 13px !important;
  border-color: rgba(106, 143, 174, .16) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,252,253,.94)) !important;
}

body[data-page="parent"] .parent-task-item small {
  color: #16876e !important;
  font-weight: 850 !important;
}

body[data-page="parent"] .parent-task-item strong {
  margin-top: 0 !important;
}

body[data-page="parent"] .ai-generated-parent-panel {
  scroll-margin-top: 104px;
  border-color: rgba(105, 125, 255, .36) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(105, 125, 255, .14), transparent 30%),
    linear-gradient(135deg, rgba(239, 243, 255, .96), rgba(248, 251, 255, .92)) !important;
  box-shadow: 0 18px 42px rgba(57, 82, 173, .10) !important;
}

body[data-page="parent"] .ai-generated-parent-panel[open] {
  box-shadow: 0 22px 54px rgba(57, 82, 173, .14) !important;
}

body[data-page="parent"] .ai-generated-parent-panel > summary strong::before {
  content: "AI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  margin-right: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  background: linear-gradient(135deg, #6b7cff, #33b8d9);
}

body[data-page="parent"] .ai-generated-parent-panel[open] .parent-collapsible-body {
  padding: 12px 14px 14px !important;
  border-color: rgba(105, 125, 255, .12) !important;
  background: rgba(250, 252, 255, .72) !important;
}

body[data-page="parent"] .parent-report-generate-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
  padding: 0 2px !important;
  color: #5d7187 !important;
  font-size: 14px !important;
}

body[data-page="parent"] .parent-report-generate-row .compact-primary {
  min-height: 42px !important;
  padding: 9px 18px !important;
  white-space: nowrap !important;
}

body[data-page="parent"] .parent-report-generate-row .parent-report-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body[data-page="parent"] .parent-report-generate-row .parent-report-actions .compact-link-btn {
  min-height: 40px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  border-color: rgba(48, 64, 143, .26) !important;
  background: linear-gradient(135deg, #6b7cff, #33b8d9) !important;
  box-shadow: 0 10px 22px rgba(57, 82, 173, .16) !important;
}

body[data-page="parent"] .parent-report-date {
  color: #d94141 !important;
  font-weight: 900 !important;
}

body[data-page="parent"] .parent-report-view .ai-report-shell {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="parent"] .parent-report-view .ai-report-metric,
body[data-page="parent"] .parent-report-view .ai-report-card-list article,
body[data-page="parent"] .parent-report-view .ai-report-bar-row {
  color: var(--text) !important;
  border-color: rgba(105, 125, 255, .18) !important;
  background: rgba(255, 255, 255, .82) !important;
}

body[data-page="parent"] .parent-report-view .ai-parent-summary .inline-actions .compact-link-btn {
  color: #ffffff !important;
  border-color: rgba(48, 64, 143, .26) !important;
  background: linear-gradient(135deg, #6b7cff, #33b8d9) !important;
  box-shadow: 0 10px 22px rgba(57, 82, 173, .20) !important;
}

body[data-page="parent"] .parent-report-view .ai-parent-summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

body[data-page="parent"] .parent-report-view .ai-report-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body[data-page="parent"] .parent-report-view .ai-report-metric {
  min-height: 132px !important;
}

body[data-page="parent"] .parent-report-view .ai-learning-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body[data-page="parent"] .parent-report-view .ability-report-bars {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

body[data-page="parent"] .parent-report-view .ability-report-bars .ai-report-bar-row {
  align-content: start !important;
  min-height: 112px !important;
}

body[data-page="parent"] .parent-report-view .ai-report-bars:not(.ability-report-bars) .ai-report-bar-row,
body[data-page="parent"] .parent-report-view .ai-action-plan article,
body[data-page="parent"] .parent-report-view .parent-reminder {
  border: 1px solid rgba(47, 191, 154, .24) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .86) !important;
}

body[data-page="parent"] .parent-report-view .ai-report-two-columns > .ai-report-section:nth-child(2n) {
  background: rgba(245, 249, 255, .88) !important;
  border-color: rgba(105, 125, 255, .20) !important;
}

body[data-page="parent"] .parent-report-view .ai-parent-summary,
body[data-page="parent"] .parent-report-view .ai-report-section {
  color: var(--text) !important;
  border-color: rgba(47, 191, 154, .24) !important;
  background: rgba(238, 251, 247, .86) !important;
}

body[data-page="parent"] .parent-report-view .ai-parent-summary h4,
body[data-page="parent"] .parent-report-view .ai-report-section h4,
body[data-page="parent"] .parent-report-view .ai-report-toolbar strong {
  color: #30408f !important;
}

body[data-page="parent"] .parent-payment-panel .membership-board {
  margin-top: 0 !important;
}

body[data-page="parent"] .parent-more-panel .parent-referral-panel {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="parent"] .parent-referral-panel .parent-panel-head {
  margin-bottom: 12px !important;
}

body[data-page="parent"] .parent-referral-copy {
  margin-bottom: 12px !important;
}

body[data-page="parent"] .parent-referral-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 12px 0 !important;
}

body[data-page="parent"] .parent-referral-stats span {
  min-width: 132px !important;
}

body[data-page="parent"] .parent-secondary-grid .parent-panel-head span,
body[data-page="parent"] .parent-secondary-grid .parent-referral-panel .parent-panel-head span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
  color: #2f64d9 !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  border: 1px solid rgba(75, 135, 235, .28) !important;
  border-radius: 999px !important;
  background: rgba(239, 247, 255, .86) !important;
}

body[data-page="parent"] .parent-latest-cost {
  margin: 10px 0 !important;
  padding: 10px 12px !important;
  color: #24536f !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(75, 135, 235, .18) !important;
  border-radius: 10px !important;
  background: rgba(245, 250, 255, .88) !important;
}

body[data-page="parent"] .membership-board {
  margin-top: 0 !important;
}

body[data-page="parent"] .parent-wrong-review {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

body[data-page="parent"] .parent-wrong-list-block,
body[data-page="parent"] .parent-ability-summary-block {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

body[data-page="parent"] .parent-wrong-review .parent-mini-label {
  margin: 0 !important;
  color: #16876e !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body[data-page="parent"] .parent-wrong-review .parent-list-item {
  min-height: 88px !important;
}

body[data-page="parent"] .parent-wrong-review .parent-ability-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body[data-page="parent"] .parent-wrong-review .parent-ability-row {
  padding: 8px 10px !important;
  border: 1px solid rgba(47, 191, 154, .15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .68) !important;
}

body[data-page="parent"] .parent-wrong-review .parent-ability-row span,
body[data-page="parent"] .parent-wrong-review .parent-ability-row em {
  font-size: 13px !important;
}

body[data-page="parent"] .parent-wrong-review .parent-ability-row i {
  height: 8px !important;
}

@media (max-width: 900px) {
  body[data-page="parent"] .parent-wrong-review,
  body[data-page="parent"] .parent-report-view .ai-parent-summary {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  body[data-page="parent"] .parent-report-view .ai-report-overview,
  body[data-page="parent"] .parent-report-view .ai-learning-facts {
    grid-template-columns: 1fr !important;
  }

  body[data-page="parent"] .parent-report-generate-row {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Frontend topbar alignment: keep the header width tied to the main content surface. */
body:not([data-page="admin"]) .topbar {
  width: auto !important;
  margin: 10px clamp(18px, 5vw, 64px) 0 !important;
  padding: 10px clamp(14px, 2vw, 22px) !important;
  border-radius: 14px !important;
  border-color: rgba(106, 143, 174, .18) !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(248, 252, 255, .93)) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .10), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body:not([data-page="admin"]) .topbar .brand-mark {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px !important;
  border-radius: 16px !important;
}

body:not([data-page="admin"]) .topbar .nav,
body:not([data-page="admin"]) .topbar .search-box {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(106, 143, 174, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(39, 78, 108, .045) !important;
}

body:not([data-page="admin"]) .topbar .nav a,
body:not([data-page="admin"]) .topbar .user-pill {
  min-height: 38px !important;
  border-radius: 9px !important;
}

@media (max-width: 760px) {
  body:not([data-page="admin"]) .topbar {
    margin: 8px 14px 0 !important;
    padding: 9px 10px !important;
  }
}

/* Commercial billing and admin boundary polish. */
body[data-page="admin"] .admin-topbar {
  width: auto !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  margin: 10px clamp(18px, 5vw, 64px) 0 !important;
  padding: 10px clamp(14px, 2vw, 22px) !important;
  border-radius: 14px !important;
  border-color: rgba(106, 143, 174, .20) !important;
  background:
    radial-gradient(circle at 92% 18%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .97), rgba(248, 252, 255, .94)) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .10), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body[data-page="admin"] .admin-topbar .brand-mark {
  width: 50px !important;
  height: 50px !important;
  flex-basis: 50px !important;
}

.admin-topbar-title {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-topbar-title strong {
  color: #1d2d42;
  font-size: 20px;
  line-height: 1.2;
}

.admin-topbar-title span {
  color: #65798b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-front-link {
  justify-self: end;
  color: var(--site-green-strong) !important;
  border-color: rgba(47, 191, 154, .26) !important;
  background: var(--site-green-soft) !important;
  text-decoration: none !important;
}

.register-policy-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 8px;
  background: rgba(238, 251, 247, .72);
}

.register-policy-tip span {
  min-width: 180px;
  flex: 1;
}

.parent-payment-head-actions,
.parent-refund-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.parent-payment-head-actions a {
  color: var(--site-green-strong);
  font-weight: 900;
  text-decoration: none;
}

.parent-refund-panel {
  margin-top: 12px;
  border: 1px solid rgba(47, 191, 154, .22);
  border-radius: 8px;
  background: rgba(238, 251, 247, .74);
  overflow: hidden;
}

.parent-refund-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.parent-refund-panel summary::-webkit-details-marker {
  display: none;
}

.parent-refund-panel summary span {
  color: #24536f;
  font-weight: 900;
}

.parent-refund-panel summary strong {
  color: var(--site-green-strong);
  font-size: 15px;
  white-space: nowrap;
}

.parent-refund-body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

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

.parent-refund-summary span {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(75, 135, 235, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  color: #64798a;
  font-size: 13px;
  font-weight: 800;
}

.parent-refund-summary b {
  color: #1d2d42;
  font-size: 18px;
}

.parent-refund-rule {
  margin: 0;
  color: #52677b;
  line-height: 1.65;
}

.parent-refund-form {
  display: grid;
  gap: 10px;
}

.parent-refund-form label {
  display: grid;
  gap: 7px;
  color: #52677b;
  font-weight: 850;
}

.parent-refund-form input,
.parent-refund-form textarea {
  width: 100%;
  border-color: rgba(106, 143, 174, .22);
  background: rgba(255, 255, 255, .94);
  color: #1d2d42;
}

.parent-refund-form textarea {
  min-height: 86px;
  resize: vertical;
}

.parent-billing-workspace {
  max-width: 1360px;
}

.billing-rule-hero,
.billing-section,
.billing-info-card,
.billing-compare-card {
  border: 1px solid rgba(106, 143, 174, .20);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: var(--soft-shadow);
}

.billing-rule-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  padding: clamp(20px, 3vw, 34px);
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    radial-gradient(circle at 88% 20%, rgba(47, 191, 154, .12), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

.billing-rule-hero span,
.billing-section-head .eyebrow {
  color: var(--site-green-strong);
  font-weight: 950;
}

.billing-rule-hero strong {
  display: block;
  margin: 6px 0 10px;
  color: #1d2d42;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.08;
}

.billing-rule-hero p,
.billing-info-card p,
.billing-compare-card li,
.billing-note,
.billing-formula p {
  color: #53687d;
  line-height: 1.75;
}

.billing-rule-hero p {
  max-width: 760px;
  margin: 0;
}

.billing-info-grid,
.billing-compare-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.billing-info-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.billing-info-card,
.billing-compare-card {
  padding: 18px;
}

.billing-info-card > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #0f6f5d;
  font-weight: 950;
  border-radius: 50%;
  background: rgba(47, 191, 154, .16);
}

.billing-info-card h2,
.billing-info-card h3,
.billing-compare-card h3,
.billing-section-head h2 {
  margin: 10px 0 8px;
  color: #1d2d42;
  line-height: 1.25;
}

.billing-info-card p {
  margin: 0;
}

.billing-section {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: clamp(18px, 2.5vw, 28px);
}

.billing-section-head h2 {
  font-size: clamp(26px, 3vw, 42px);
}

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

.billing-compare-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.billing-compare-card.allow {
  border-color: rgba(47, 191, 154, .28);
  background: linear-gradient(135deg, #ffffff, rgba(238, 251, 247, .92));
}

.billing-compare-card.deny {
  border-color: rgba(232, 101, 93, .24);
  background: linear-gradient(135deg, #ffffff, rgba(255, 245, 244, .92));
}

.billing-step-list {
  display: grid;
  gap: 10px;
}

.billing-step-list div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid rgba(75, 135, 235, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}

.billing-step-list b {
  color: var(--site-blue);
  font-size: 18px;
}

.billing-step-list span {
  color: #40576d;
  line-height: 1.6;
}

.billing-note,
.billing-formula {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(47, 191, 154, .20);
  border-radius: 8px;
  background: rgba(238, 251, 247, .76);
}

.billing-formula strong {
  display: block;
  margin-bottom: 8px;
  color: #0f6f5d;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

/* Static public pages: readable commercial copy for About and Privacy. */
body[data-page="about"] .legal-page,
body[data-page="privacy"] .legal-page,
body[data-page="point-rules"] .legal-page {
  width: min(1160px, calc(100% - 32px)) !important;
  max-width: 1160px !important;
  margin: 28px auto 0 !important;
  padding: clamp(18px, 3vw, 34px) !important;
  color: #1d2d42 !important;
  border-color: rgba(106, 143, 174, .20) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(47, 191, 154, .08), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .95)) !important;
  box-shadow: 0 18px 42px rgba(39, 78, 108, .10) !important;
}

.legal-page {
  display: grid;
  gap: 18px;
}

.legal-hero {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(106, 143, 174, .18);
  border-radius: 8px;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    radial-gradient(circle at 88% 20%, rgba(47, 191, 154, .10), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  background-size: 46px 46px, 46px 46px, auto, auto;
}

.legal-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #1d2d42;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.08;
  letter-spacing: 0;
}

.legal-hero p:not(.eyebrow) {
  max-width: 920px;
  margin: 0;
  color: #53687d;
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 750;
  line-height: 1.78;
}

.legal-hero-actions,
.legal-version-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.legal-version-row span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 7px 12px;
  color: #52677b;
  font-size: 14px;
  font-weight: 850;
  border: 1px solid rgba(75, 135, 235, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
}

.legal-anchor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.legal-anchor-list a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--site-green-strong);
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 999px;
  background: var(--site-green-soft);
}

.legal-section {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid rgba(106, 143, 174, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  scroll-margin-top: 112px;
}

.legal-notice {
  border-color: rgba(246, 200, 76, .30);
  background: linear-gradient(135deg, #ffffff, var(--site-yellow-soft));
}

.legal-section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.legal-section-head > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #0f6f5d;
  font-weight: 950;
  border-radius: 50%;
  background: rgba(47, 191, 154, .15);
}

.legal-section h2,
.legal-section h3 {
  margin: 0;
  color: #1d2d42;
  line-height: 1.28;
}

.legal-section h2 {
  font-size: clamp(25px, 2.8vw, 40px);
}

.legal-section h3 {
  font-size: clamp(19px, 2vw, 25px);
}

.legal-section p,
.legal-section li,
.legal-section span {
  color: #53687d;
  line-height: 1.75;
}

.legal-section-head p,
.legal-notice p,
.legal-inline-note {
  margin: 7px 0 0;
  font-size: 16px;
}

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

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

.legal-copy-grid article,
.legal-highlight-row div,
.legal-principles p,
.legal-data-table div,
.legal-step-list div {
  border: 1px solid rgba(106, 143, 174, .15);
  border-radius: 8px;
  background: rgba(247, 251, 255, .86);
}

.legal-copy-grid article {
  display: grid;
  gap: 9px;
  padding: 16px;
}

.legal-copy-grid p,
.legal-principles p,
.legal-inline-note,
.legal-notice p {
  margin: 0;
}

.legal-step-list,
.legal-principles,
.legal-data-table {
  display: grid;
  gap: 10px;
}

.legal-step-list div {
  display: grid;
  grid-template-columns: minmax(92px, 130px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 64px;
  padding: 13px 14px;
}

.legal-step-list b {
  color: var(--site-blue-strong);
  font-size: 17px;
}

.legal-highlight-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.legal-highlight-row div {
  display: grid;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
}

.legal-highlight-row strong {
  color: var(--site-green-strong);
  font-size: 20px;
}

.legal-principles p {
  padding: 14px 16px;
}

.legal-principles strong {
  color: #1d2d42;
}

.legal-data-table div {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  gap: 12px;
  padding: 13px 14px;
}

.legal-data-table strong {
  color: var(--site-blue-strong);
}

.legal-inline-note {
  padding: 13px 14px;
  border: 1px solid rgba(47, 191, 154, .20);
  border-radius: 8px;
  background: rgba(234, 249, 244, .78);
}

.legal-inline-note a {
  color: var(--site-green-strong);
  font-weight: 950;
}

body[data-page="about"] .about-brand-page {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(244, 251, 255, .96)) !important;
  background-size: 46px 46px, 46px 46px, auto !important;
}

.about-brand-hero {
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  align-items: center;
  min-height: 390px;
  overflow: hidden;
  border-color: rgba(47, 128, 237, .18);
}

.about-brand-hero h1 {
  max-width: 760px;
  font-size: clamp(38px, 4.8vw, 66px);
}

.about-brand-hero p:not(.eyebrow) {
  max-width: 760px;
}

.about-brand-signal {
  display: grid;
  gap: 12px;
}

.about-brand-signal div,
.about-pillar-grid article,
.about-flow-grid div {
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 28px rgba(39, 78, 108, .05);
}

.about-brand-signal div {
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 16px;
  box-shadow: inset 4px 0 0 rgba(47, 191, 154, .56), 0 12px 28px rgba(39, 78, 108, .05);
}

.about-brand-signal strong,
.about-pillar-grid b,
.about-flow-grid strong {
  color: #1d2d42;
  line-height: 1.2;
}

.about-brand-signal strong {
  font-size: 21px;
}

.about-brand-signal span {
  color: #53687d;
  line-height: 1.55;
}

.about-pillar-grid,
.about-flow-grid {
  display: grid;
  gap: 14px;
}

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

.about-pillar-grid article {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.about-pillar-grid b {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--site-blue-strong);
  border: 1px solid rgba(47, 128, 237, .16);
  border-radius: 999px;
  background: rgba(47, 128, 237, .06);
  font-size: 13px;
  font-weight: 950;
}

.about-pillar-grid h3 {
  font-size: clamp(21px, 2vw, 28px);
}

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

.about-flow-grid div {
  display: grid;
  gap: 10px;
  min-height: 178px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247, 252, 255, .90));
}

.about-flow-grid span {
  width: 44px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f80ed, #2fbf9a);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}

.about-flow-grid strong {
  font-size: clamp(21px, 2vw, 28px);
}

.about-flow-grid p,
.about-pillar-grid p {
  margin: 0;
}

.about-ai-grid article {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(246, 251, 255, .94));
  background-size: 34px 34px, 34px 34px, auto;
}

.about-trust-row div {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(239, 250, 247, .72));
}

.about-principles p {
  border-left: 4px solid rgba(47, 191, 154, .54);
}

.point-rules-content {
  display: grid;
  gap: 18px;
}

.point-rule-summary {
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  background-size: 42px 42px, 42px 42px, auto !important;
}

.point-rule-note-grid,
.point-rule-grid {
  display: grid;
  gap: 12px;
}

.point-rule-note-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.point-rule-note-grid div,
.point-rule-card {
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(247, 251, 255, .86);
}

.point-rule-note-grid div {
  display: grid;
  gap: 8px;
  min-height: 104px;
  padding: 16px;
}

.point-rule-note-grid strong {
  color: var(--site-green-strong);
  font-size: 20px;
}

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

.point-rule-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.point-rule-card > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  justify-content: start;
}

.point-rule-card span {
  display: inline-flex;
  min-height: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  color: var(--site-blue-strong);
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(47, 128, 237, .16);
  border-radius: 999px;
  background: rgba(47, 128, 237, .06);
  line-height: 1;
  white-space: nowrap;
}

.point-rule-card h3 {
  flex: 1;
  margin: 0;
  color: #1d2d42;
  font-size: clamp(19px, 2vw, 25px);
}

.point-rule-card > strong {
  width: fit-content;
  min-width: 92px;
  min-height: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0 13px;
  color: #765411;
  border: 1px solid rgba(246, 200, 76, .34);
  border-radius: 999px;
  background: var(--site-yellow-soft);
  line-height: 1;
  white-space: nowrap;
}

.point-rule-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.point-rule-card li {
  color: #53687d;
  line-height: 1.68;
}

@media (max-width: 900px) {
  body[data-page="about"] .legal-page,
  body[data-page="privacy"] .legal-page,
  body[data-page="point-rules"] .legal-page {
    width: calc(100% - 24px) !important;
    margin-top: 16px !important;
    padding: 14px !important;
  }

  .legal-copy-grid,
  .legal-copy-grid.two,
  .legal-highlight-row,
  .about-brand-hero,
  .about-pillar-grid,
  .about-flow-grid,
  .point-rule-note-grid,
  .point-rule-grid {
    grid-template-columns: 1fr;
  }

  .about-brand-hero {
    min-height: auto;
  }

  .about-brand-hero h1 {
    font-size: 34px;
  }

  .point-rule-card > div {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .legal-section-head,
  .legal-step-list div,
  .legal-data-table div {
    grid-template-columns: 1fr;
  }

  .legal-anchor-list a {
    flex: 1 1 140px;
    justify-content: center;
  }
}

body[data-page="about"],
body[data-page="privacy"],
body[data-page="point-rules"],
body[data-page="site-page"] {
  --aligned-page-width: 1160px;
  --aligned-page-gap: clamp(14px, 2.4vw, 40px);
}

body[data-page="parent-billing"],
body[data-page="admin"] {
  --aligned-page-width: 1360px;
  --aligned-page-gap: clamp(14px, 3vw, 40px);
}

body[data-page="about"] .topbar,
body[data-page="privacy"] .topbar,
body[data-page="point-rules"] .topbar,
body[data-page="site-page"] .topbar,
body[data-page="parent-billing"] .topbar,
body[data-page="admin"] .topbar {
  width: min(var(--aligned-page-width), calc(100% - var(--aligned-page-gap) - var(--aligned-page-gap))) !important;
  margin: 10px auto 0 !important;
}

body[data-page="about"] .page-main,
body[data-page="privacy"] .page-main,
body[data-page="point-rules"] .page-main,
body[data-page="site-page"] .page-main,
body[data-page="parent-billing"] .page-main,
body[data-page="admin"] .page-main {
  padding-inline: var(--aligned-page-gap) !important;
}

body[data-page="about"] .legal-page,
body[data-page="privacy"] .legal-page,
body[data-page="point-rules"] .legal-page,
body[data-page="site-page"] .about-page,
body[data-page="parent-billing"] .parent-billing-workspace,
body[data-page="admin"] #adminLoginPanel,
body[data-page="admin"] .admin-shell {
  width: min(var(--aligned-page-width), 100%) !important;
  max-width: var(--aligned-page-width) !important;
  margin: 28px auto 0 !important;
}

@media (max-width: 980px) {
  body[data-page="admin"] .admin-topbar,
  .billing-rule-hero,
  .billing-info-grid,
  .billing-info-grid.compact,
  .billing-compare-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-front-link,
  .billing-rule-hero .primary {
    justify-self: start;
  }

  .parent-refund-summary {
    grid-template-columns: 1fr;
  }
}

/* AI companion panel polish: clearer hierarchy, calmer colors and readable states. */
.study-companion:not(.minimized) .companion-panel {
  width: 300px !important;
  border: 1px solid rgba(80, 160, 190, .34) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 86% 10%, rgba(77, 196, 176, .16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(244, 251, 255, .98)) !important;
  color: #1d2d42 !important;
  box-shadow: 0 18px 38px rgba(39, 78, 108, .20), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

.study-companion:not(.minimized) .companion-head {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
  background: rgba(255, 255, 255, .42) !important;
}

.study-companion:not(.minimized) .companion-head img {
  width: 38px !important;
  height: 38px !important;
}

.study-companion:not(.minimized) .companion-head strong {
  color: #1c2d42 !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
}

.study-companion:not(.minimized) .companion-head small {
  margin-top: 3px !important;
  color: #4075d6 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.study-companion:not(.minimized) .companion-head button {
  color: #3f73d7 !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(47, 191, 154, .22) !important;
  background: rgba(235, 251, 246, .92) !important;
  color: #2f9c84 !important;
  font-size: 13px !important;
  box-shadow: 0 8px 18px rgba(47, 191, 154, .08) !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle].active {
  border-color: rgba(47, 191, 154, .36) !important;
  background: rgba(226, 250, 243, .96) !important;
  color: #1f8d75 !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-min] {
  width: 28px !important;
  min-width: 28px !important;
  color: #3f73d7 !important;
  font-size: 22px !important;
}

.study-companion:not(.minimized) .companion-panel > p {
  padding: 12px 14px 8px !important;
  color: #30485f !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.study-companion:not(.minimized) .companion-focus-card {
  margin: 0 12px 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(69, 180, 164, .28) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(241, 249, 255, .98), rgba(235, 250, 246, .97)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.study-companion:not(.minimized) .companion-focus-card strong {
  color: #2f64d9 !important;
  font-size: 13px !important;
}

.study-companion:not(.minimized) .companion-panel .companion-focus-card p {
  color: #405a70 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.study-companion:not(.minimized) .companion-context-summary {
  display: grid;
  gap: 5px;
  padding: 0 0 9px;
  border-bottom: 1px solid rgba(47, 191, 154, .14);
}

.study-companion:not(.minimized) .companion-context-summary div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.study-companion:not(.minimized) .companion-context-summary span {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eafaf4;
  color: #16876e;
  font-size: 12px;
  font-weight: 900;
}

.study-companion:not(.minimized) .companion-context-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #1f3448 !important;
  font-size: 12px !important;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-companion:not(.minimized) .companion-panel .companion-context-summary p {
  display: -webkit-box;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: #4d6780 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.study-companion:not(.minimized) .companion-focus-actions a,
.study-companion:not(.minimized) .companion-focus-actions button {
  border-color: rgba(47, 191, 154, .24) !important;
  background: rgba(255, 255, 255, .74) !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-learning-focus {
  gap: 8px !important;
  background:
    linear-gradient(135deg, rgba(238, 247, 255, .99), rgba(230, 249, 244, .98)) !important;
}

.study-companion:not(.minimized) .companion-learning-focus p {
  margin: 4px 0 0 !important;
  color: #2f485f !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.study-companion:not(.minimized) .companion-learning-focus small {
  display: -webkit-box !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: #688096 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion:not(.minimized) .companion-task-list {
  gap: 8px !important;
  padding: 0 12px 10px !important;
}

.study-companion:not(.minimized) .companion-task {
  grid-template-columns: 30px 48px minmax(0, 1fr) !important;
  min-height: 39px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .72) !important;
  color: #1d2d42 !important;
  box-shadow: 0 8px 18px rgba(39, 78, 108, .045) !important;
}

.study-companion:not(.minimized) .companion-task:hover {
  border-color: rgba(47, 191, 154, .30) !important;
  background: rgba(247, 252, 255, .95) !important;
}

.study-companion:not(.minimized) .companion-task span {
  width: 26px !important;
  height: 26px !important;
  background: rgba(47, 191, 154, .16) !important;
  color: #16876e !important;
  font-size: 14px !important;
}

.study-companion:not(.minimized) .companion-task strong {
  color: #16876e !important;
  font-size: 13px !important;
}

.study-companion:not(.minimized) .companion-task em {
  color: #687b8d !important;
  font-size: 12px !important;
}

.study-companion:not(.minimized) .companion-control {
  margin: 0 12px 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(47, 191, 154, .20) !important;
  border-radius: 10px !important;
  background: rgba(242, 251, 248, .80) !important;
}

.study-companion:not(.minimized) .companion-control-stats {
  gap: 6px !important;
}

.study-companion:not(.minimized) .companion-control-stats a,
.study-companion:not(.minimized) .companion-control-stats span {
  min-height: 28px !important;
  color: #16876e !important;
  background: rgba(255, 255, 255, .76) !important;
  border: 1px solid rgba(47, 191, 154, .12) !important;
  font-size: 12px !important;
  text-decoration: none !important;
}

.study-companion:not(.minimized) .companion-control-stats a.needs-action {
  border-color: rgba(63, 127, 232, .22) !important;
  color: #2f64d9 !important;
  background: rgba(244, 248, 255, .92) !important;
}

.study-companion:not(.minimized) .companion-control-stats a span {
  display: contents !important;
}

.study-companion:not(.minimized) .companion-panel .companion-control p {
  color: #4b6175 !important;
}

.study-companion:not(.minimized) .companion-actions {
  padding: 0 12px 10px !important;
}

.study-companion:not(.minimized) .companion-actions a {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #3f7fe8, #49b9a6) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(63, 127, 232, .16) !important;
}

.study-companion:not(.minimized) .companion-chat {
  padding: 0 12px 12px !important;
}

.study-companion:not(.minimized) .companion-chat-log {
  max-height: 120px !important;
  padding: 8px !important;
  border: 1px solid rgba(80, 160, 190, .22) !important;
  border-radius: 9px !important;
  background: rgba(248, 252, 255, .94) !important;
}

.study-companion:not(.minimized) .companion-chat-message {
  color: #263e55 !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(80, 160, 190, .16) !important;
}

.study-companion:not(.minimized) .companion-chat-message.student {
  color: #fff !important;
  background: linear-gradient(135deg, #3f7fe8, #49b9a6) !important;
  border: 0 !important;
}

.study-companion:not(.minimized) .companion-speaker {
  color: #3f7fe8 !important;
}

.study-companion:not(.minimized) .companion-chat-form input {
  height: 38px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #1d2d42 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.study-companion:not(.minimized) .companion-chat-form input::placeholder {
  color: #8ba0b4 !important;
}

.study-companion:not(.minimized) .companion-chat-form .companion-chat-voice {
  border: 1px solid rgba(47, 191, 154, .26) !important;
  background: rgba(235, 251, 246, .94) !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-chat-form .companion-chat-send {
  background: rgba(47, 191, 154, .18) !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-chat small {
  display: block !important;
  color: #607589 !important;
  font-size: 12px !important;
  padding-left: 2px !important;
}

/* Specific learning pages: keep the companion focused on the current step. */
.study-companion.companion-learning-mode:not(.minimized) .companion-panel {
  width: 304px !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-panel > p {
  padding: 10px 14px 8px !important;
  color: #2b435a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-task-list,
.study-companion.companion-learning-mode:not(.minimized) .companion-control,
.study-companion.companion-learning-mode:not(.minimized) .companion-actions {
  display: none !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus {
  margin: 0 12px 10px !important;
  padding: 12px !important;
  border-color: rgba(63, 127, 232, .24) !important;
  background:
    radial-gradient(circle at 95% 8%, rgba(77, 196, 176, .16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(239,249,255,.98)) !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus strong {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 22px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(63, 127, 232, .10) !important;
  color: #2f64d9 !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus p {
  display: -webkit-box !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  color: #1f3449 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus em {
  display: block !important;
  margin-top: 10px !important;
  color: #16876e !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus small {
  -webkit-line-clamp: 3 !important;
  color: #536c83 !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-focus-actions {
  margin-top: 2px !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-focus-actions button {
  width: 100% !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #3f7fe8, #49b9a6) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(63, 127, 232, .14) !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-chat-log {
  max-height: 118px !important;
  overflow-x: hidden !important;
}

/* Practice pages: keep the companion light, direct and answer-focused. */
.study-companion.companion-practice-mode:not(.minimized) .companion-panel {
  width: 304px !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-panel > p {
  padding: 10px 14px 8px !important;
  color: #2b435a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-task-list,
.study-companion.companion-practice-mode:not(.minimized) .companion-control,
.study-companion.companion-practice-mode:not(.minimized) .companion-actions {
  display: none !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus {
  margin: 0 12px 10px !important;
  padding: 12px !important;
  border-color: rgba(47, 191, 154, .30) !important;
  background:
    radial-gradient(circle at 92% 10%, rgba(63, 127, 232, .12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(236,250,247,.98)) !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus strong {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 22px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: rgba(47, 191, 154, .12) !important;
  color: #16876e !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus p {
  display: -webkit-box !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  color: #1f3449 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus em {
  display: block !important;
  margin-top: 10px !important;
  color: #2f64d9 !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus small {
  display: -webkit-box !important;
  margin-top: 5px !important;
  overflow: hidden !important;
  color: #536c83 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-focus-actions {
  margin-top: 2px !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-focus-actions button {
  width: 100% !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #3f7fe8, #49b9a6) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(63, 127, 232, .14) !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-chat-log {
  max-height: 118px !important;
  overflow-x: hidden !important;
}

.study-companion.companion-practice-mode:not(.minimized) .companion-chat-message,
.study-companion.companion-practice-mode:not(.minimized) .companion-chat-message span,
.study-companion.companion-learning-mode:not(.minimized) .companion-chat-message,
.study-companion.companion-learning-mode:not(.minimized) .companion-chat-message span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

/* AI companion cleanup: opaque header, one voice control, collapsed history. */
.study-companion:not(.minimized) .companion-panel {
  background: #ffffff !important;
}

.study-companion:not(.minimized) .companion-head {
  background: #ffffff !important;
}

.study-companion:not(.minimized) .companion-head img {
  opacity: 1 !important;
  filter: none !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] svg {
  width: 20px !important;
  height: 20px !important;
  opacity: 1 !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] .speaker-fill {
  fill: currentColor !important;
  stroke: none !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] .speaker-line {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle]:not(.active) {
  color: #8ba0b4 !important;
  background: transparent !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle].active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-panel > p,
.study-companion.companion-practice-mode:not(.minimized) .companion-panel > p {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: start !important;
  overflow: visible !important;
  white-space: normal !important;
}

.study-companion:not(.minimized) .companion-status-pill {
  display: inline-flex !important;
  min-height: 22px !important;
  align-items: center !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(63, 127, 232, .10) !important;
  color: #2f64d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.study-companion:not(.minimized) .companion-status-text {
  display: -webkit-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #2b435a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion:not(.minimized) [data-companion-guide-text] {
  display: -webkit-box !important;
  margin: 6px 0 0 !important;
  overflow: hidden !important;
  color: #2f485f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  -webkit-line-clamp: 5 !important;
  -webkit-box-orient: vertical !important;
}

.study-companion.companion-learning-mode:not(.minimized) .companion-learning-focus [data-companion-guide-text],
.study-companion.companion-practice-mode:not(.minimized) .companion-practice-focus [data-companion-guide-text] {
  display: block !important;
  margin: 6px 0 0 !important;
  max-height: 168px !important;
  overflow: auto !important;
  color: #2f485f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  scrollbar-width: thin !important;
}

.study-companion:not(.minimized) .companion-head small {
  display: block !important;
  margin-top: 3px !important;
  color: #4075d6 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.study-companion:not(.minimized) .companion-learning-focus strong,
.study-companion:not(.minimized) .companion-practice-focus strong {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.study-companion:not(.minimized) .companion-learning-focus small,
.study-companion:not(.minimized) .companion-practice-focus small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  -webkit-line-clamp: initial !important;
}

.study-companion:not(.minimized) .companion-chat {
  gap: 7px !important;
}

.study-companion:not(.minimized) .companion-record-toggle {
  width: fit-content !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(80, 160, 190, .18) !important;
  border-radius: 999px !important;
  background: #f7fbff !important;
  color: #2f64d9 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.study-companion:not(.minimized) .companion-record-toggle:hover,
.study-companion:not(.minimized) .companion-record-toggle:focus {
  border-color: rgba(63, 127, 232, .28) !important;
  background: #eef6ff !important;
}

.study-companion:not(.minimized) .companion-chat-log[hidden] {
  display: none !important;
}

.study-companion:not(.minimized) .companion-chat-message {
  display: block !important;
  grid-template-columns: none !important;
  background: #ffffff !important;
}

.study-companion:not(.minimized) .companion-speaker {
  display: none !important;
}

/* AI companion final visual pass: green capsules and visible speaker icon. */
.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] {
  position: relative !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] svg {
  display: none !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle]::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 8px !important;
  width: 13px !important;
  height: 14px !important;
  background: currentColor !important;
  clip-path: polygon(0 32%, 35% 32%, 100% 0, 100% 100%, 35% 68%, 0 68%) !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle]::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 7px !important;
  width: 8px !important;
  height: 16px !important;
  border-right: 2px solid currentColor !important;
  border-radius: 0 999px 999px 0 !important;
}

.study-companion:not(.minimized) .companion-head small,
.study-companion:not(.minimized) .companion-status-pill,
.study-companion:not(.minimized) .companion-learning-focus strong,
.study-companion:not(.minimized) .companion-practice-focus strong {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 22px !important;
  align-items: center !important;
  padding: 0 9px !important;
  border: 1px solid rgba(47, 191, 154, .18) !important;
  border-radius: 999px !important;
  background: #eafaf4 !important;
  color: #16876e !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.study-companion:not(.minimized) .companion-head small {
  margin-top: 4px !important;
}

.study-companion:not(.minimized) .companion-status-text {
  color: #253b50 !important;
}

.companion-bubble-tip [data-companion-tip-text] {
  display: block !important;
  line-height: 1.45 !important;
}

.companion-tip-actions button:first-child,
.companion-tip-actions a:first-child,
.companion-tip-actions button,
.companion-tip-actions a {
  border-color: rgba(47, 191, 154, .22) !important;
  background: rgba(234, 250, 244, .82) !important;
  color: #16876e !important;
  box-shadow: none !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle]::before,
.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle]::after {
  content: none !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-voice-toggle] svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.companion-head button[data-companion-voice-toggle] svg.speaker-svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #16876e !important;
}

.companion-head button[data-companion-voice-toggle] svg.speaker-svg path {
  fill: none !important;
  stroke: #16876e !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.companion-head button[data-companion-voice-toggle] {
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(47, 191, 154, .26) !important;
  border-radius: 999px !important;
  background: #eafaf4 !important;
  color: #16876e !important;
  box-shadow: 0 6px 14px rgba(47, 191, 154, .12) !important;
  font-size: 0 !important;
}

.companion-head button[data-companion-voice-toggle] svg.speaker-svg {
  display: block !important;
  flex: 0 0 auto !important;
}

.companion-head button[data-companion-voice-toggle] .speaker-fallback {
  display: none !important;
  color: #16876e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@supports not (stroke: currentColor) {
  .companion-head button[data-companion-voice-toggle] svg.speaker-svg {
    display: none !important;
  }

  .companion-head button[data-companion-voice-toggle] .speaker-fallback {
    display: inline-flex !important;
  }
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle],
.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle].active {
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(47, 191, 154, .32) !important;
  border-radius: 999px !important;
  background: #eafaf4 !important;
  color: #16876e !important;
  box-shadow: 0 6px 14px rgba(47, 191, 154, .14) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] .speaker-fallback {
  display: inline-flex !important;
  color: #16876e !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle],
.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle].active {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  background: #eafaf4 !important;
  color: #16876e !important;
  font-size: 0 !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] svg.speaker-svg {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  flex: 0 0 21px !important;
  fill: none !important;
  stroke: #16876e !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] svg.speaker-svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] .speaker-fallback {
  display: none !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle].active {
  border-color: rgba(47, 191, 154, .36) !important;
  background: #eafaf4 !important;
  color: #16876e !important;
  box-shadow: 0 6px 14px rgba(47, 191, 154, .16) !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle]:not(.active) {
  border-color: rgba(126, 148, 168, .28) !important;
  background: #f4f7fa !important;
  color: #7d8f9f !important;
  box-shadow: none !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle]:not(.active)::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 16px !important;
  width: 18px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-38deg) !important;
  transform-origin: center !important;
}

/* Final AI companion cleanup: lighter teacher header, no repeated status line, green actions. */
.study-companion:not(.minimized) .companion-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.study-companion:not(.minimized) .companion-head img,
.study-companion:not(.minimized) .companion-head [data-companion-face] {
  display: none !important;
}

.study-companion:not(.minimized) .companion-head-title {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: baseline !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

.study-companion:not(.minimized) .companion-head-title strong {
  display: inline !important;
  color: #203146 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.study-companion:not(.minimized) .companion-head-title small,
.study-companion:not(.minimized) .companion-head small {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #16876e !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.study-companion:not(.minimized) [data-companion-message][hidden] {
  display: none !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle],
.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle].active,
.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle]:not(.active) {
  position: relative !important;
  display: inline-flex !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #16876e !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] svg.speaker-svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle] svg.speaker-svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle]:not(.active) {
  color: #86a197 !important;
}

.study-companion:not(.minimized) .companion-head .companion-head-actions button[data-companion-voice-toggle]:not(.active)::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 15px !important;
  width: 18px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-38deg) !important;
  transform-origin: center !important;
}

.study-companion:not(.minimized) .companion-head button[data-companion-min] {
  color: #16876e !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.study-companion:not(.minimized) .companion-record-toggle {
  border-color: rgba(47, 191, 154, .28) !important;
  background: #eafaf4 !important;
  color: #16876e !important;
}

.study-companion:not(.minimized) .companion-record-toggle:hover,
.study-companion:not(.minimized) .companion-record-toggle:focus {
  border-color: rgba(47, 191, 154, .42) !important;
  background: #def7ee !important;
  color: #137760 !important;
}

.companion-task-list[hidden],
.companion-control[hidden] {
  display: none !important;
}

.companion-bubble-tip.is-guest-tip {
  width: 270px !important;
  max-width: min(270px, calc(100vw - 130px)) !important;
}

.companion-bubble-tip.is-guest-tip [data-companion-tip-text] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .companion-bubble-tip.is-guest-tip {
    width: 230px !important;
    max-width: calc(100vw - 112px) !important;
  }

  .companion-bubble-tip.is-guest-tip [data-companion-tip-text] {
    white-space: normal !important;
  }
}

/* Pre-launch polish: remove English page kickers and make custom test composition native. */
body[data-page="compose-test"] .workspace > .section-head::before,
body[data-page="compose-test"] .workspace > .section-head::after,
body[data-page="compose-test"] .workspace::after,
body[data-page="compose-test"] .page-motion {
  display: none !important;
  content: none !important;
}

body[data-page="compose-test"] .workspace > .section-head {
  align-items: flex-end !important;
  margin-bottom: 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

body[data-page="compose-test"] .workspace > .section-head h1 {
  margin-top: 0 !important;
}

body[data-page="compose-test"] .workspace > .section-head p {
  margin-top: 8px !important;
  max-width: 42em !important;
}

body[data-page="compose-test"] .compose-panel.standalone-compose {
  margin-top: 0 !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
  color: var(--text) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 92% 4%, rgba(47, 191, 154, .09), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 18px 40px rgba(39, 78, 108, .08) !important;
}

body[data-page="compose-test"] .compose-panel h3 {
  margin-bottom: 6px !important;
  color: var(--text) !important;
  font-size: clamp(24px, 2.1vw, 32px) !important;
}

body[data-page="compose-test"] .compose-panel p {
  max-width: none !important;
  color: #627589 !important;
  line-height: 1.65 !important;
}

body[data-page="compose-test"] .compose-grid {
  grid-template-columns: minmax(190px, 1fr) minmax(150px, .7fr) minmax(120px, .45fr) minmax(130px, auto) !important;
  gap: 12px !important;
  align-items: end !important;
  padding: 14px !important;
  border: 1px solid rgba(106, 143, 174, .14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .72) !important;
}

body[data-page="compose-test"] .compose-grid label {
  display: grid !important;
  gap: 7px !important;
  color: #526a80 !important;
  font-weight: 800 !important;
}

body[data-page="compose-test"] .compose-grid select,
body[data-page="compose-test"] .compose-grid input {
  min-height: 48px !important;
  color: var(--text) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

body[data-page="compose-test"] #composeTestBtn {
  min-height: 48px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-green)) !important;
  box-shadow: 0 12px 22px rgba(47, 128, 237, .14) !important;
}

body[data-page="compose-test"] .compose-chapters {
  max-height: 360px !important;
  padding: 6px 10px 8px 4px !important;
  gap: 12px !important;
}

body[data-page="compose-test"] .compose-chapters label {
  min-height: 56px !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
  border: 1.5px solid rgba(102, 136, 166, .30) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow: 0 8px 18px rgba(39, 78, 108, .07) !important;
}

body[data-page="compose-test"] .compose-chapters input {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #7f94a7 !important;
  accent-color: #45b89d !important;
}

body[data-page="compose-test"] .compose-chapters label:hover,
body[data-page="compose-test"] .compose-chapters label:has(input:checked) {
  border-color: rgba(47, 191, 154, .70) !important;
  background: linear-gradient(135deg, #effbf7 0%, #ffffff 100%) !important;
  box-shadow: 0 12px 24px rgba(47, 191, 154, .16) !important;
}

body[data-page="compose-test"] .compose-chapters label:has(input:checked) {
  outline: 2px solid rgba(47, 191, 154, .16) !important;
  outline-offset: 2px !important;
}

body[data-page="compose-test"] .compose-chapters span {
  color: var(--text) !important;
}

body[data-page="compose-test"] .compose-hint {
  margin-top: 14px !important;
  color: #627589 !important;
  background: linear-gradient(135deg, #f4fff9, #ffffff) !important;
  border-color: rgba(47, 191, 154, .20) !important;
}

body[data-page="compose-test"] .challenge-share-card {
  color: var(--text) !important;
  border-color: rgba(47, 191, 154, .24) !important;
  background: linear-gradient(135deg, #f4fff9 0%, #ffffff 88%) !important;
  box-shadow: 0 12px 28px rgba(39, 78, 108, .07) !important;
}

body[data-page="report"] .report-date-line {
  margin: 0 0 22px !important;
  color: #526a80 !important;
  font-weight: 800 !important;
}

/* Practice answer input polish: keep scoring calm, make formula tools light. */
body[data-page="test"] .high-score-badge,
body[data-page="practice"] .high-score-badge,
body[data-page="test-hub"] .high-score-badge {
  position: relative !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
}

.high-score-more {
  position: relative;
  margin-left: 2px;
}

.high-score-more summary {
  list-style: none;
  cursor: pointer;
  padding: 3px 8px;
  border: 1px solid rgba(246, 200, 76, .30);
  border-radius: 999px;
  color: #8a6619;
  background: rgba(255, 250, 224, .88);
  font-size: 12px;
  font-weight: 900;
}

.high-score-more summary::-webkit-details-marker {
  display: none;
}

.high-score-more div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  max-width: min(360px, 72vw);
  padding: 10px 12px;
  border: 1px solid rgba(246, 200, 76, .32);
  border-radius: 8px;
  color: #5f4310;
  background: #fffdf3;
  box-shadow: 0 12px 26px rgba(120, 88, 22, .14);
  line-height: 1.7;
}

body[data-page="test"] .test-question-card .student-answer-box,
body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-box {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px 16px !important;
  padding: 18px !important;
  color: var(--text) !important;
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body[data-page="test"] .test-question-card .student-answer-box > span,
body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-box > span {
  grid-column: 1 !important;
  align-self: center !important;
  color: #526a80 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

body[data-page="test"] .test-question-card .formula-toggle-button,
body[data-page="wrong-retry"] #wrongRetryPaper .formula-toggle-button {
  grid-column: 1 !important;
  justify-self: start !important;
  min-height: 34px !important;
  padding: 6px 13px !important;
  color: #2d8976 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  border: 1px solid rgba(47, 191, 154, .20) !important;
  border-radius: 999px !important;
  background: rgba(244, 255, 250, .82) !important;
  box-shadow: none !important;
}

body[data-page="test"] .test-question-card .formula-toggle-button.active,
body[data-page="wrong-retry"] #wrongRetryPaper .formula-toggle-button.active {
  color: #237764 !important;
  background: #eefbf6 !important;
  border-color: rgba(47, 191, 154, .34) !important;
}

body[data-page="test"] .test-question-card .student-math-toolbar,
body[data-page="wrong-retry"] #wrongRetryPaper .student-math-toolbar {
  grid-column: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
}

body[data-page="test"] .test-question-card .student-math-toolbar[hidden],
body[data-page="wrong-retry"] #wrongRetryPaper .student-math-toolbar[hidden] {
  display: none !important;
}

body[data-page="test"] .test-question-card .student-math-toolbar button,
body[data-page="wrong-retry"] #wrongRetryPaper .student-math-toolbar button,
body[data-page="admin"] .math-symbol-toolbar button {
  min-width: 40px !important;
  min-height: 36px !important;
  padding: 7px 10px !important;
  color: #1d3143 !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 4px 10px rgba(39, 78, 108, .04) !important;
}

body[data-page="test"] .test-question-card .student-answer-editor,
body[data-page="wrong-retry"] #wrongRetryPaper .student-answer-editor {
  grid-column: 1 / -1 !important;
  min-height: 88px !important;
  padding: 16px 18px !important;
  color: var(--text) !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
}

body[data-page="test"] .test-question-card .formula-builder,
body[data-page="wrong-retry"] #wrongRetryPaper .formula-builder,
body[data-page="admin"] .formula-builder {
  grid-column: 1 / -1 !important;
  width: min(560px, 100%) !important;
  padding: 14px !important;
  color: var(--text) !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #f8fcff 0%, #f5fffa 100%) !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .08) !important;
}

body[data-page="test"] .test-question-card .formula-builder[hidden],
body[data-page="wrong-retry"] #wrongRetryPaper .formula-builder[hidden],
body[data-page="admin"] .formula-builder[hidden] {
  display: none !important;
}

.formula-builder-fields input,
.formula-preview {
  color: var(--text) !important;
  border-color: rgba(106, 143, 174, .22) !important;
  background: #ffffff !important;
}

.formula-builder-fields input {
  color: #1d3143 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.formula-preview {
  min-width: 104px !important;
  min-height: 64px !important;
  color: #1d3143 !important;
  border-color: rgba(47, 191, 154, .38) !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(47, 191, 154, .14) !important;
}

.formula-builder .formula-chip,
.formula-preview .formula-chip,
.student-answer-editor .formula-chip,
.stem-editor .formula-chip {
  min-width: 40px !important;
  min-height: 38px !important;
  color: #1d3143 !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(47, 191, 154, .46) !important;
  box-shadow: 0 4px 10px rgba(39, 78, 108, .06) !important;
}

.formula-builder .formula-fraction::before,
.formula-preview .formula-fraction::before,
.student-answer-editor .formula-fraction::before,
.stem-editor .formula-fraction::before,
.formula-builder .formula-sqrt::after,
.formula-preview .formula-sqrt::after,
.student-answer-editor .formula-sqrt::after,
.stem-editor .formula-sqrt::after {
  border-color: #1d3143 !important;
}

.formula-builder .formula-chip[data-top="□"],
.formula-builder .formula-chip[data-bottom="□"],
.formula-preview .formula-chip[data-top="□"],
.formula-preview .formula-chip[data-bottom="□"] {
  color: #1d3143 !important;
}

.formula-builder-actions button {
  color: #237764 !important;
  border: 1px solid rgba(47, 191, 154, .22) !important;
  border-radius: 8px !important;
  background: #eefbf6 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .math-symbol-toolbar {
  background: rgba(248, 252, 255, .72) !important;
  border: 1px solid rgba(106, 143, 174, .12) !important;
}

body[data-page="admin"] .admin-formula-fold summary {
  color: #2f806f !important;
  background: rgba(244, 255, 250, .72) !important;
}

/* Final homepage polish: keep helper controls light and integrate support into the footer. */
.site-footer .support-widget {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.site-footer .support-launcher {
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(47, 191, 154, .22) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .36) !important;
  color: #3fa887 !important;
  filter: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.site-footer .support-launcher svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.4 !important;
}

.site-footer .support-launcher span {
  display: inline-block !important;
}

.site-footer .support-panel {
  left: 50% !important;
  right: auto !important;
  bottom: 44px !important;
  transform: translateX(-50%) !important;
  text-align: left !important;
}

.support-panel-head strong {
  font-size: 16px !important;
}

.companion-tip-close {
  border: 0 !important;
  background: transparent !important;
  color: rgba(77, 101, 121, .52) !important;
  box-shadow: none !important;
}

.companion-tip-close:hover,
.companion-tip-close:focus-visible {
  background: transparent !important;
  color: rgba(35, 53, 74, .78) !important;
  transform: none !important;
}

body[data-page="home"] .home-map-node,
body[data-page="home"] .home-map-node summary,
body[data-page="home"] .home-map-node.is-current,
body[data-page="home"] .home-map-node.is-complete:not(.victory),
body[data-page="home"] .guest-home-map .home-map-node:first-of-type {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-page="home"] .home-map-node:hover {
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="home"] .home-map-node summary strong::after {
  content: none !important;
}

/* Footer support and QR polish: compact, light, and easier to scan. */
.site-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 8px !important;
  row-gap: 10px !important;
  }

.site-footer-qrcodes {
  order: 2 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(100%, 520px) !important;
}

.site-footer-links {
  order: 1 !important;
  flex: 0 0 100% !important;
  gap: 16px !important;
}

.site-footer-primary,
.site-footer-records,
.site-footer-copyright {
  display: flex !important;
  flex: 0 0 100% !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  text-align: center !important;
}

.site-footer-primary {
  order: 1 !important;
}

.site-footer-records {
  order: 2 !important;
}

.site-footer-records,
.site-footer-copyright {
  color: #7890a2 !important;
  font-size: 12px !important;
}

.site-footer-copyright {
  order: 3 !important;
}

.site-footer-qrcodes {
  order: 4 !important;
}

.site-footer-qrcode {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(47, 191, 154, .22) !important;
  background: rgba(255, 255, 255, .36) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font: inherit !important;
  text-align: center !important;
  cursor: zoom-in !important;
}

.site-footer-qrcode img {
  width: 64px !important;
  height: 64px !important;
  padding: 5px !important;
  border-radius: 8px !important;
}

.site-footer-qrcode span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #3fa887 !important;
  font-weight: 850 !important;
}

.site-footer-qrcode small {
  max-width: 96px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.site-footer-qrcode:hover,
.site-footer-qrcode:focus-visible {
  border-color: rgba(61, 181, 143, .34) !important;
  background: rgba(244, 255, 250, .78) !important;
  box-shadow: 0 8px 18px rgba(39, 78, 108, .06) !important;
  transform: translateY(-1px);
}

.footer-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 31, 48, .36);
  backdrop-filter: blur(5px);
}

.footer-qr-dialog {
  position: relative;
  width: min(320px, calc(100vw - 40px));
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px 18px 18px;
  border: 1px solid rgba(106, 143, 174, .20);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(23, 45, 70, .24);
}

.footer-qr-dialog img {
  width: min(232px, calc(100vw - 96px));
  height: min(232px, calc(100vw - 96px));
  max-height: 46vh;
  object-fit: contain;
  padding: 12px;
  border: 1px solid rgba(106, 143, 174, .12);
  border-radius: 8px;
  background: #fff;
}

.footer-qr-dialog strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.footer-qr-dialog p {
  margin: 0;
  color: #60748a;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.site-footer .support-widget {
  order: 4 !important;
  align-self: center !important;
}

.footer-qr-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(47, 191, 154, .28);
  border-radius: 999px;
  color: #247a68;
  font-weight: 850;
  background: rgba(244, 255, 250, .92);
}

.footer-qr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  color: #7890a7;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.footer-qr-close:hover,
.footer-qr-close:focus-visible {
  color: #4d6579;
  background: transparent;
  box-shadow: none;
}

.site-footer .support-panel {
  width: min(420px, calc(100vw - 32px)) !important;
  max-height: min(680px, calc(100vh - 116px)) !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  border-color: rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 22px 48px rgba(39, 78, 108, .16) !important;
}

.support-panel-head {
  align-items: center !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(106, 143, 174, .14) !important;
}

.support-panel-head strong {
  color: var(--text) !important;
  font-size: 16px !important;
}

.support-panel-head span {
  color: #60748a !important;
  font-size: 12px !important;
}

.support-close {
  min-height: 32px !important;
  padding: 6px 10px !important;
  color: #2d8976 !important;
  border-color: rgba(47, 191, 154, .22) !important;
  background: rgba(244, 255, 250, .82) !important;
}

.support-faq-list {
  gap: 7px !important;
  margin-bottom: 12px !important;
}

.support-faq-item {
  border-color: rgba(106, 143, 174, .16) !important;
  border-radius: 8px !important;
  background: rgba(248, 252, 255, .82) !important;
  box-shadow: 0 6px 16px rgba(39, 78, 108, .035) !important;
}

.support-faq-item summary {
  padding: 10px 11px !important;
  color: var(--text) !important;
  font-size: 13px !important;
}

.support-faq-item summary span {
  color: #3bb58f !important;
}

.support-faq-item p {
  color: #526a80 !important;
  font-size: 13px !important;
}

.support-form {
  gap: 9px !important;
}

.support-ticket-list {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}

.support-ticket-list-title {
  color: #24536f;
  font-size: 13px;
  font-weight: 950;
}

.support-ticket-item {
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(248, 252, 255, .86);
  overflow: hidden;
}

.support-ticket-item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 11px;
  cursor: pointer;
  list-style: none;
}

.support-ticket-item summary::-webkit-details-marker {
  display: none;
}

.support-ticket-item summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.support-ticket-item b {
  color: #1d2d42;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-ticket-item small {
  color: #60748a;
  font-size: 11px;
}

.support-ticket-item > p {
  margin: 0;
  padding: 0 11px 10px;
  color: #526a80;
  font-size: 13px;
  line-height: 1.6;
}

.support-ticket-reply {
  display: grid;
  gap: 5px;
  margin: 0 11px 11px;
  padding: 10px;
  color: #526a80;
  font-size: 12px;
  line-height: 1.55;
  border: 1px solid rgba(47, 191, 154, .16);
  border-radius: 8px;
  background: rgba(235, 250, 245, .82);
}

.support-ticket-reply strong {
  color: #2d8976;
}

.support-ticket-reply.muted {
  color: #75889a;
  background: rgba(246, 249, 252, .92);
}

.support-form label {
  color: #526a80 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  color: var(--text) !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.support-form select.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.support-form select {
  min-height: 42px !important;
  padding: 0 12px !important;
}

.support-form .visual-select {
  width: 100%;
}

.support-form .visual-select-button {
  min-height: 42px !important;
  justify-content: flex-start !important;
  padding: 0 40px 0 12px !important;
  color: var(--text) !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.support-form .visual-select-button::before {
  border-color: #64798a !important;
}

.support-form .visual-select-menu {
  z-index: 120 !important;
  max-height: 246px !important;
  padding: 6px !important;
  overflow-x: hidden !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 32px rgba(39, 78, 108, .16) !important;
}

.support-form .visual-select-option {
  min-height: 36px !important;
  padding: 8px 10px !important;
  color: #1d2d42 !important;
  border-radius: 6px !important;
  background: transparent !important;
  transform: none !important;
}

.support-form .visual-select-option:hover,
.support-form .visual-select-option:focus,
.support-form .visual-select-option.active {
  color: #0f3d35 !important;
  background: linear-gradient(90deg, rgba(224, 246, 239, .98), rgba(231, 247, 255, .96)) !important;
  transform: none !important;
}

.support-form select option {
  color: var(--text) !important;
  background: #fff !important;
}

.support-form textarea {
  min-height: 92px !important;
  resize: vertical !important;
}

.support-form button[type="submit"] {
  min-height: 42px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #4a85e8 0%, #52c0a7 100%) !important;
  box-shadow: 0 12px 24px rgba(64, 132, 216, .16) !important;
}

.support-submit-note {
  margin-top: 10px;
  padding: 10px 12px;
  color: #247a68;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 8px;
  background: rgba(235, 250, 245, .86);
}

/* Keep the learning path mini-map compact and horizontal on every viewport. */
body[data-page="learn"] .learn-home-map {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-height: 58px !important;
  padding: 8px 14px !important;
  grid-template-columns: 22px minmax(42px, 1fr) 22px minmax(42px, 1fr) 22px !important;
  grid-template-rows: 18px 18px !important;
  gap: 5px 8px !important;
  justify-items: center !important;
  align-items: center !important;
  justify-self: end !important;
}

body[data-page="learn"] .learn-home-map .map-dot {
  width: 16px !important;
  height: 16px !important;
  border-width: 3px !important;
  grid-row: 1 !important;
}

body[data-page="learn"] .learn-home-map .map-line {
  width: 100% !important;
  height: 3px !important;
  grid-row: 1 !important;
}

body[data-page="learn"] .learn-home-map strong {
  grid-row: 2 !important;
  color: #526a80 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body[data-page="learn"] .learn-home-map strong:nth-of-type(1) {
  grid-column: 1 !important;
}

body[data-page="learn"] .learn-home-map strong:nth-of-type(2) {
  grid-column: 3 !important;
}

body[data-page="learn"] .learn-home-map strong:nth-of-type(3) {
  grid-column: 5 !important;
}

@media (max-width: 640px) {
  body[data-page="learn"] .learn-home-map {
    width: min(100%, 300px) !important;
    max-width: 300px !important;
    min-height: 52px !important;
    padding: 7px 10px !important;
    grid-template-columns: 18px minmax(28px, 1fr) 18px minmax(28px, 1fr) 18px !important;
    grid-template-rows: 16px 16px !important;
    gap: 4px 6px !important;
    justify-self: start !important;
  }

  body[data-page="learn"] .learn-home-map .map-dot {
    width: 14px !important;
    height: 14px !important;
    border-width: 2px !important;
  }

  body[data-page="learn"] .learn-home-map .map-line {
    height: 2px !important;
  }

  body[data-page="learn"] .learn-home-map strong {
    font-size: 11px !important;
  }
}

/* Commercial payment model: learning passes, point rules and guardian clarity. */
.learning-pass-board,
.parent-learning-pass-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(47, 128, 237, .18);
  border-radius: 8px;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #f5fbff 100%);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: var(--soft-shadow);
}

.commerce-subhead {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.commerce-subhead span,
.learning-pass-route-note {
  color: var(--site-green-strong);
  font-weight: 900;
}

.commerce-subhead h4 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.2;
}

.commerce-subhead p,
.payment-priority-note,
.learning-pass-benefits,
.learning-pass-route-note,
.parent-learning-pass-panel span {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.commerce-subhead a,
.parent-learning-pass-panel a {
  color: var(--site-green-strong);
  font-weight: 850;
  white-space: nowrap;
}

.commerce-subhead.compact {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 8px;
  background: rgba(235, 250, 245, .72);
}

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

.payment-priority-note span {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 12px 14px;
  color: #53687d;
  border: 1px solid rgba(47, 128, 237, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .76);
}

.payment-priority-note b {
  color: var(--text);
  font-size: 15px;
}

.learning-pass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.learning-pass-card {
  min-height: 100%;
  border-color: rgba(47, 128, 237, .26) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(47, 128, 237, .12), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f3f9ff 100%) !important;
}

.learning-pass-card.active-pass {
  border-color: rgba(47, 191, 154, .44) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(47, 191, 154, .14), transparent 30%),
    linear-gradient(135deg, #f0fff8 0%, #ffffff 100%) !important;
}

.learning-pass-card.recommended-pass {
  border-color: rgba(47, 128, 237, .38) !important;
  box-shadow: 0 18px 34px rgba(47, 128, 237, .13) !important;
}

.payment-choice-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  margin-bottom: 8px;
  padding: 0 10px;
  color: var(--site-blue-strong);
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(47, 128, 237, .22);
  border-radius: 999px;
  background: var(--site-blue-soft);
}

.payment-choice-tag.secondary {
  color: var(--site-green-strong);
  border-color: rgba(47, 191, 154, .22);
  background: var(--site-green-soft);
}

.learning-pass-scope {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  color: var(--site-blue-strong);
  font-weight: 900;
  border: 1px solid rgba(47, 128, 237, .18);
  border-radius: 999px;
  background: var(--site-blue-soft);
}

.learning-pass-benefits {
  display: grid;
  gap: 8px;
  padding-left: 18px;
}

.growth-membership-grid {
  align-content: start;
}

.parent-learning-pass-panel {
  margin-bottom: 14px;
}

.parent-learning-pass-panel.empty-pass {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.parent-learning-pass-list {
  display: grid;
  gap: 10px;
}

.parent-learning-pass-list > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 8px;
  background: rgba(235, 250, 245, .78);
}

.parent-ledger-row .pass-benefit {
  color: var(--site-blue-strong);
}

.parent-refund-summary {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

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

.billing-plan-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(106, 143, 174, .20);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
  box-shadow: var(--soft-shadow);
}

.billing-plan-card.featured {
  border-color: rgba(47, 191, 154, .34);
  background:
    radial-gradient(circle at 90% 10%, rgba(47, 191, 154, .12), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f0fff8 100%);
}

.billing-plan-card span {
  width: fit-content;
  padding: 5px 9px;
  color: var(--site-green-strong);
  font-weight: 900;
  border: 1px solid rgba(47, 191, 154, .22);
  border-radius: 999px;
  background: var(--site-green-soft);
}

.billing-plan-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.25;
}

.billing-plan-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.learning-pass-plan-list .learning-pass-row {
  grid-template-columns: minmax(150px, 1.2fr) minmax(86px, .7fr) minmax(86px, .7fr) minmax(112px, .8fr) minmax(86px, .7fr) minmax(180px, 1.4fr) auto;
}

.learning-pass-included-field {
  grid-column: 1 / -1;
}

#adminLearningPassForm .admin-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 980px) {
  .membership-payment-row,
  .billing-plan-grid {
    grid-template-columns: 1fr;
  }

  .commerce-subhead,
  .parent-learning-pass-panel.empty-pass {
    display: grid;
  }
}

@media (max-width: 720px) {
  .learning-pass-board,
  .parent-learning-pass-panel {
    padding: 14px;
  }

  .payment-priority-note,
  .learning-pass-grid,
  .billing-info-grid,
  .billing-info-grid.compact,
  .billing-compare-grid {
    grid-template-columns: 1fr !important;
  }

  .learning-pass-plan-list .learning-pass-row {
    grid-template-columns: 1fr;
  }
}

/* Parent payment polish: consistent purchase tags, focused anchor target and calmer recharge card. */
.billing-plan-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  min-width: 58px;
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  align-self: start;
  font-size: 14px;
  line-height: 30px;
  box-sizing: border-box;
}

body[data-page="parent"] .parent-route-strip a[data-parent-open-payment] {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--site-blue), var(--site-blue-strong)) !important;
  border-color: rgba(47, 128, 237, .34) !important;
  box-shadow: 0 10px 20px rgba(47, 128, 237, .18) !important;
}

body[data-page="parent"] .membership-board {
  scroll-margin-top: 104px;
}

body[data-page="parent"] .membership-payment-row {
  grid-template-columns: minmax(0, 2.2fr) minmax(300px, .8fr);
  align-items: start;
}

body[data-page="parent"] .growth-membership-grid {
  order: 1;
}

body[data-page="parent"] .parent-recharge-controls {
  order: 2;
  align-self: stretch;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 1px solid rgba(106, 143, 174, .16) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(var(--tech-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-grid) 1px, transparent 1px),
    linear-gradient(135deg, #ffffff 0%, #fbfdff 100%) !important;
  background-size: 38px 38px, 38px 38px, auto !important;
  box-shadow: 0 10px 22px rgba(22, 72, 110, .06) !important;
}

body[data-page="parent"] .recharge-side-head {
  display: grid;
  gap: 4px;
  padding-bottom: 4px;
}

body[data-page="parent"] .recharge-side-head span {
  color: var(--site-green-strong);
  font-weight: 900;
}

body[data-page="parent"] .recharge-side-head p {
  margin: 0;
  color: #64788c;
  font-size: 14px;
  line-height: 1.55;
}

body[data-page="parent"] .parent-recharge-controls .recharge-action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 10px !important;
  align-items: end !important;
  max-width: none !important;
  padding: 0 !important;
  color: var(--text) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="parent"] .parent-recharge-controls label {
  display: grid;
  gap: 8px;
  color: #53687d;
  font-weight: 850;
}

body[data-page="parent"] .parent-recharge-controls label > span {
  font-size: 13px;
  line-height: 1;
}

body[data-page="parent"] .parent-recharge-controls input {
  min-height: 48px !important;
}

body[data-page="parent"] .parent-recharge-controls .recharge-action-row button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}

body[data-page="parent"] .parent-recharge-controls .guardian-pay-notice {
  margin: 2px 0 0 !important;
  padding: 10px 12px;
  color: #53687d !important;
  font-weight: 800;
  border: 1px solid rgba(47, 191, 154, .18);
  border-radius: 8px;
  background: rgba(235, 250, 245, .72);
}

@media (max-width: 640px) {
  body[data-page="parent"] .membership-payment-row {
    grid-template-columns: 1fr;
  }

  body[data-page="parent"] .parent-recharge-controls .recharge-action-row {
    grid-template-columns: 1fr !important;
  }
}

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

.admin-business-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(106, 143, 174, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
}

.admin-business-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
}

.admin-business-section-head > strong {
  color: var(--text);
  font-size: 15px;
}

.admin-business-section-head > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.admin-business-subsection {
  display: grid;
  gap: 8px;
}

.admin-business-subsection > b {
  color: #2f8b76;
  font-size: 13px;
}

.admin-business-record-list {
  display: grid;
  gap: 8px;
}

.admin-business-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(82px, auto);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(116, 150, 178, .16);
  border-radius: 8px;
  background: rgba(248, 252, 255, .86);
}

.admin-business-record-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-business-record-main > strong {
  color: var(--text);
  font-size: 14px;
}

.admin-business-record-main > small,
.admin-business-record-main > span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-business-student-link {
  display: inline-grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid rgba(57, 184, 151, .26);
  border-radius: 8px;
  color: #1d765f;
  background: rgba(235, 250, 245, .82);
  box-shadow: none;
  text-align: left;
}

.admin-business-student-link:hover {
  border-color: rgba(57, 184, 151, .5);
  transform: translateY(-1px);
}

.admin-business-student-link > strong,
.admin-business-student-link > small {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-business-student-link > strong {
  font-size: 13px;
}

.admin-business-student-link > small,
.admin-business-student-muted {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-business-value {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #2f8b76;
  font-weight: 900;
  text-align: right;
}

.admin-business-value > strong {
  font-size: 16px;
}

.admin-business-value > small {
  color: var(--muted);
  font-size: 12px;
}

.admin-business-value.muted {
  color: var(--muted);
  font-size: 12px;
}

.readonly-student-tools {
  display: grid;
  gap: 6px;
}

@media (max-width: 760px) {
  .admin-business-grid {
    grid-template-columns: 1fr;
  }

  .admin-business-section-head {
    display: grid;
  }

  .admin-business-section-head > small {
    text-align: left;
  }

  .admin-business-record {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .admin-business-value {
    justify-items: start;
    text-align: left;
  }
}

body[data-page="admin"] .admin-tabs-grouped {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
}

body[data-page="admin"] .admin-tab-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: auto;
  padding: 6px;
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .5);
}

body[data-page="admin"] .admin-tab-group > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 6px;
  color: #5f7488;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="admin"] .admin-tab-group > button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px !important;
  border-radius: 8px !important;
  white-space: nowrap;
}

body[data-page="admin"] .admin-student-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 16px;
  align-items: start;
}

body[data-page="admin"] .admin-finance-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 16px;
  align-items: start;
}

body[data-page="admin"] .admin-finance-main,
body[data-page="admin"] .admin-finance-side {
  min-width: 0;
}

body[data-page="admin"] .admin-finance-actions {
  justify-content: flex-end;
  margin: 10px 0 14px;
}

body[data-page="admin"] .admin-student-main,
body[data-page="admin"] .admin-student-side {
  min-width: 0;
}

body[data-page="admin"] .admin-student-side {
  position: sticky;
  top: 190px;
}

body[data-page="admin"] .admin-student-side summary,
body[data-page="admin"] .admin-student-side h2,
body[data-page="admin"] .admin-student-side h3 {
  word-break: keep-all;
}

body[data-page="admin"] .admin-list-section {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(106, 143, 174, .16);
}

body[data-page="admin"] .admin-student-benefit .admin-form {
  margin: 0 0 12px !important;
  box-shadow: none !important;
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-workbench {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-side {
  position: static;
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-benefit .admin-site-section-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-benefit .admin-form {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-benefit .admin-row,
body[data-page="admin"] .admin-shell.role-marketing #adminLearningPassForm .admin-row {
  grid-template-columns: 1fr !important;
}

body[data-page="admin"] .admin-shell.role-marketing .admin-student-benefit .card-actions {
  margin-top: auto;
}

body[data-page="admin"] .admin-student-table {
  table-layout: fixed;
}

body[data-page="admin"] .admin-student-table th,
body[data-page="admin"] .admin-student-table td {
  padding: 14px 16px !important;
  vertical-align: middle;
}

body[data-page="admin"] .admin-student-table th:nth-child(1) { width: 30%; }
body[data-page="admin"] .admin-student-table th:nth-child(2) { width: 13%; }
body[data-page="admin"] .admin-student-table th:nth-child(3) { width: 19%; }
body[data-page="admin"] .admin-student-table th:nth-child(4) { width: 15%; }
body[data-page="admin"] .admin-student-table th:nth-child(5) { width: 10%; }
body[data-page="admin"] .admin-student-table th:nth-child(6) { width: 13%; }

body[data-page="admin"] .student-cell-main,
body[data-page="admin"] .student-cell-points,
body[data-page="admin"] .student-cell-records {
  min-width: 0;
}

body[data-page="admin"] .student-cell-main strong,
body[data-page="admin"] .student-cell-main span,
body[data-page="admin"] .student-cell-points strong,
body[data-page="admin"] .student-cell-points span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="admin"] .student-cell-main strong {
  color: var(--admin-text);
  font-size: 15px;
}

body[data-page="admin"] .student-cell-main span,
body[data-page="admin"] .student-cell-points span {
  margin-top: 4px;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
}

body[data-page="admin"] .student-cell-points strong {
  color: #1f8f75;
  font-size: 20px;
}

body[data-page="admin"] .student-pill,
body[data-page="admin"] .student-status,
body[data-page="admin"] .student-cell-records span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(106, 143, 174, .18);
  border-radius: 999px;
  color: #466176;
  background: rgba(248, 252, 255, .78);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="admin"] .student-cell-records {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page="admin"] .student-status.online {
  color: #16866d;
  border-color: rgba(47, 191, 154, .28);
  background: rgba(234, 249, 244, .86);
}

body[data-page="admin"] .student-status.offline {
  color: #667a8e;
  background: rgba(245, 248, 252, .86);
}

body[data-page="admin"] .student-status.disabled {
  color: #b24a42;
  border-color: rgba(218, 88, 79, .25);
  background: rgba(255, 242, 240, .88);
}

body[data-page="admin"] .student-action-cell {
  text-align: right;
}

body[data-page="admin"] .student-action-cell .secondary-button {
  min-width: 92px;
  min-height: 36px;
  padding-inline: 14px !important;
  white-space: nowrap;
}

body[data-page="admin"] .admin-table-head,
body[data-page="admin"] .admin-review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(248, 252, 255, .78);
}

body[data-page="admin"] .admin-table-head strong {
  color: var(--admin-text);
  font-size: 15px;
}

body[data-page="admin"] .admin-table-head span,
body[data-page="admin"] .admin-review-summary span {
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 850;
}

body[data-page="admin"] .admin-review-summary {
  justify-content: flex-start;
}

body[data-page="admin"] .admin-review-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid rgba(47, 191, 154, .2);
  border-radius: 999px;
  background: rgba(234, 249, 244, .72);
}

body[data-page="admin"] .admin-review-summary b {
  color: #227c68;
  font-size: 18px;
}

body[data-page="admin"] .admin-role-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

body[data-page="admin"] .admin-role-guide > div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(106, 143, 174, .16);
  border-radius: 8px;
  background: rgba(248, 252, 255, .78);
}

body[data-page="admin"] .admin-role-guide strong {
  color: var(--admin-text);
  font-size: 15px;
}

body[data-page="admin"] .admin-role-guide span {
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="admin"] .folded-site-page {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-page="admin"] .folded-site-page > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

body[data-page="admin"] .folded-site-page > summary::-webkit-details-marker {
  display: none;
}

body[data-page="admin"] .folded-site-page > summary span {
  color: var(--admin-text);
  font-weight: 900;
}

body[data-page="admin"] .folded-site-page > summary small {
  min-width: 0;
  margin-left: auto;
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="admin"] .folded-site-page-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(47, 191, 154, .24);
  border-radius: 999px;
  color: #227c68;
  background: rgba(234, 249, 244, .82);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="admin"] .folded-site-page-toggle em {
  display: none;
  font-style: normal;
}

body[data-page="admin"] .folded-site-page[open] .folded-site-page-toggle span {
  display: none;
}

body[data-page="admin"] .folded-site-page[open] .folded-site-page-toggle em {
  display: inline;
}

body[data-page="admin"] .folded-site-page[open] {
  padding-bottom: 14px !important;
}

body[data-page="admin"] .folded-site-page[open] > :not(summary) {
  margin-inline: 14px;
}

body[data-page="admin"] .folded-site-page-body {
  display: grid;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(106, 143, 174, .14);
}

body[data-page="admin"] .support-ticket-card.active {
  border-color: rgba(47, 128, 237, .42) !important;
  background: linear-gradient(135deg, rgba(236, 244, 255, .94), rgba(238, 251, 246, .9)) !important;
}

body[data-page="admin"] .support-empty-guide {
  display: grid;
  gap: 10px;
}

body[data-page="admin"] .support-empty-guide strong {
  color: var(--admin-text);
  font-size: 18px;
}

body[data-page="admin"] .support-empty-guide p {
  margin: 0;
  color: var(--admin-muted);
}

body[data-page="admin"] .support-quick-tips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-page="admin"] .support-quick-tips span {
  padding: 6px 10px;
  border: 1px solid rgba(47, 191, 154, .2);
  border-radius: 999px;
  color: #227c68;
  background: rgba(234, 249, 244, .8);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 980px) {
  body[data-page="admin"] .admin-student-workbench,
  body[data-page="admin"] .admin-finance-workbench {
    grid-template-columns: 1fr;
  }

  body[data-page="admin"] .admin-student-side {
    position: static;
  }

  body[data-page="admin"] .admin-shell.role-marketing .admin-student-benefit .admin-site-section-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body[data-page="admin"] .admin-tabs-grouped {
    grid-template-columns: 1fr !important;
  }

  body[data-page="admin"] .admin-tab-group > button {
    flex-basis: calc(50% - 6px);
  }
}

/* Learning resource stage: keep the animation area dominant. */
body[data-page="learn"] .learning-course-unit.has-course-resources {
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-viewer {
  gap: 8px !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-viewer.single-resource {
  gap: 0 !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-toolbar {
  justify-content: flex-start !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-tabs {
  display: inline-flex !important;
  width: auto !important;
  gap: 4px !important;
  padding: 3px !important;
  border: 1px solid rgba(106, 143, 174, .18) !important;
  border-radius: 14px !important;
  background: rgba(248, 252, 255, .76) !important;
  box-shadow: none !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-tabs button {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: #5d7288 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-tabs button.active {
  color: #ffffff !important;
  border-color: rgba(47, 191, 154, .26) !important;
  background: linear-gradient(135deg, rgba(47, 128, 237, .88), rgba(47, 191, 154, .86)) !important;
  box-shadow: 0 6px 14px rgba(47, 128, 237, .10) !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-pane {
  border-radius: 8px !important;
}

body[data-page="learn"] .learning-course-unit.has-course-resources .course-inline-frame {
  height: var(--animation-height, clamp(280px, 52vw, 680px)) !important;
}

@media (max-width: 680px) {
  body[data-page="learn"] .learning-course-unit.has-course-resources .course-resource-tabs button {
    min-height: 28px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  body[data-page="learn"] .learning-course-unit.has-course-resources .course-inline-frame {
    height: var(--animation-height, clamp(238px, 58vw, 420px)) !important;
  }
}

/* Admin entry polish: keep learning/test input areas quiet and single-layered. */
body[data-page="admin"] #adminPane-learning .course-unit-admin-card,
body[data-page="admin"] #adminPane-learning .learning-course-admin,
body[data-page="admin"] #adminPane-learning .course-resource-admin,
body[data-page="admin"] #adminPane-tests .admin-expanded-question-card,
body[data-page="admin"] #adminPane-tests .visual-question-editor,
body[data-page="admin"] #adminPane-question-bank .compact-admin-form {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(106, 143, 174, .20) !important;
  box-shadow: 0 10px 24px rgba(39, 78, 108, .05) !important;
}

body[data-page="admin"] #adminPane-learning .admin-row,
body[data-page="admin"] #adminPane-tests .admin-row,
body[data-page="admin"] #adminPane-question-bank .admin-row {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] #adminPane-learning input,
body[data-page="admin"] #adminPane-learning select,
body[data-page="admin"] #adminPane-learning textarea,
body[data-page="admin"] #adminPane-learning .stem-editor,
body[data-page="admin"] #adminPane-learning .visual-select-button,
body[data-page="admin"] #adminPane-tests input,
body[data-page="admin"] #adminPane-tests select,
body[data-page="admin"] #adminPane-tests textarea,
body[data-page="admin"] #adminPane-tests .stem-editor,
body[data-page="admin"] #adminPane-tests .visual-select-button,
body[data-page="admin"] #adminPane-question-bank input,
body[data-page="admin"] #adminPane-question-bank select,
body[data-page="admin"] #adminPane-question-bank textarea,
body[data-page="admin"] #adminPane-question-bank .stem-editor,
body[data-page="admin"] #adminPane-question-bank .visual-select-button {
  background: #ffffff !important;
  background-image: none !important;
}

body[data-page="admin"] #adminPane-learning .visual-select-button,
body[data-page="admin"] #adminPane-tests .visual-select-button,
body[data-page="admin"] #adminPane-question-bank .visual-select-button {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  min-height: 48px !important;
}

body[data-page="admin"] #adminPane-learning .admin-inline-check,
body[data-page="admin"] #adminPane-tests .admin-inline-check {
  background: #ffffff !important;
  border: 1px solid rgba(106, 143, 174, .20) !important;
  padding: 0 14px !important;
}

body[data-page="admin"] .single-course-resource-admin {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .single-course-resource-admin .course-resource-panel {
  background: #ffffff !important;
  background-image: none !important;
}

body[data-page="admin"] .course-resource-panel-head span {
  color: #5f7688 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body[data-page="admin"] .mapping-details {
  display: block !important;
}

body[data-page="admin"] .mapping-details summary {
  cursor: pointer !important;
  color: #2f806f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

body[data-page="admin"] .mapping-details .mapping-checklist {
  margin-top: 12px !important;
}

body[data-page="admin"] .course-resource-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

body[data-page="admin"] .course-resource-actions button {
  min-height: 40px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(83, 184, 154, .32) !important;
  border-radius: 8px !important;
  color: var(--green-dark) !important;
  background: rgba(238, 252, 247, .76) !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body[data-page="admin"] .course-resource-actions button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--admin-blue), var(--admin-green)) !important;
  box-shadow: 0 10px 22px rgba(47, 128, 237, .18) !important;
}

body[data-page="admin"] .course-scaffold-admin-row textarea {
  min-height: 46px !important;
  height: 46px !important;
  resize: vertical !important;
}

body[data-page="admin"] #adminPane-learning .course-scaffold-admin-row textarea[id*="Scaffold"][id$="Prompt"] {
  min-height: 46px !important;
  height: 46px !important;
  resize: vertical !important;
}