:root {
  --bg: #f7f8fb;
  --bg-2: #eef3ff;
  --panel: #ffffff;
  --panel-strong: #f8fafc;
  --line: rgba(15, 23, 42, 0.14);
  --text: #111827;
  --muted: #526173;
  --gold: #ea580c;
  --blue: #1e40af;
  --green: #16a34a;
  --red: #dc2626;
  --rose: #be185d;
  --violet: #6d28d9;
  --shadow: 0 18px 55px rgba(15, 23, 42, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-2), var(--bg) 34%, #ffffff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

details:not([open]) > :not(summary) {
  display: none !important;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateZ(0);
}

.brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  color: #ffffff;
  font-weight: 950;
}

.brand small,
.micro {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar nav a,
.topbar nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 750;
}

.landing,
.app-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.7fr);
  gap: 32px;
  align-items: center;
  padding: 56px 0;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(42px, 7vw, 86px);
  line-height: 0.94;
  letter-spacing: 0;
}

h2 {
  font-size: 24px;
  letter-spacing: 0;
}

.lead,
.hero-copy > p:last-of-type,
.auth-card p,
.app-hero p {
  max-width: 720px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 850;
}

.button.primary {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  box-shadow: 0 14px 34px rgba(30, 64, 175, 0.18);
}

.button.secondary {
  color: var(--text);
  background: #ffffff;
}

.hero-card,
.auth-card,
.panel,
.score-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  padding: 30px;
}

.pulse-ring {
  display: none;
}

.mission-grid {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.mission-grid span,
.mission-grid strong {
  padding: 14px;
  border-radius: 8px;
  background: var(--panel-strong);
}

.mission-grid strong {
  color: var(--gold);
  font-size: 30px;
}

.proof-grid,
.teacher-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 56px;
}

.proof-grid article,
.kpi {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.proof-grid strong,
.kpi strong,
.score-card strong {
  display: block;
  color: var(--gold);
  font-size: 40px;
}

.proof-grid span,
.kpi span,
.score-card span {
  color: var(--muted);
}

.auth-screen {
  display: grid;
  place-items: center;
  width: min(1040px, calc(100% - 32px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  width: 100%;
  padding: 28px;
}

.auth-card h1 {
  font-size: clamp(36px, 5vw, 64px);
}

.stack {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-weight: 760;
}

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

input {
  min-height: 48px;
  padding: 0 14px;
}

textarea {
  min-height: 96px;
  resize: vertical;
  padding: 12px 14px;
  line-height: 1.45;
}

input:focus,
textarea:focus {
  outline: 2px solid rgba(82, 214, 255, 0.28);
  border-color: var(--blue);
}

.error {
  border: 1px solid rgba(251, 113, 133, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  color: #991b1b;
  background: #fef2f2;
}

.app-shell {
  padding: 28px 0 56px;
}

.app-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.app-hero h1,
.app-hero.compact h1 {
  font-size: 28px;
  line-height: 1.15;
}

.student-lab-section {
  margin-bottom: 18px;
  padding: 22px 0 4px;
}

.student-lab-intro {
  margin: -8px 0 16px;
  color: var(--muted);
}

.score-card {
  min-width: 130px;
  padding: 20px;
  text-align: center;
}

.sync-status {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--muted);
  background: #ffffff;
  font-size: 13px;
  font-weight: 850;
}

.sync-status.is-online {
  border-color: rgba(22, 163, 74, 0.25);
  color: #166534;
  background: #f0fdf4;
}

.sync-status.is-offline,
.sync-status.has-pending {
  border-color: rgba(234, 88, 12, 0.35);
  color: #9a3412;
  background: #fff7ed;
}

.mission-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  margin-bottom: 18px;
}

.mission-visual {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101827;
  box-shadow: var(--shadow);
}

.mission-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 17, 31, 0.9), rgba(7, 17, 31, 0.48) 52%, rgba(7, 17, 31, 0.08));
}

.mission-overlay {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 12px;
  width: min(560px, 100%);
  min-height: 360px;
  padding: 28px;
  color: #ffffff;
}

.mission-overlay .micro {
  color: #fbbf24;
}

.mission-overlay h2 {
  max-width: 13ch;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1;
}

.mission-overlay p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.6;
}

.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.mission-actions .button.secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}

.guided-chapter {
  margin-bottom: 18px;
}

.guided-chapter.is-quiz-active {
  display: none;
}

.guided-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(30, 64, 175, 0.16);
  border-radius: 8px;
  padding: 18px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.guided-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guided-top strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 22px;
}

.guided-dots {
  display: flex;
  gap: 8px;
}

.guided-dots span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #f8fafc;
  font-weight: 900;
}

.guided-dots span.is-done {
  border-color: transparent;
  color: #ffffff;
  background: var(--green);
}

.guided-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.82fr);
  gap: 18px;
  align-items: stretch;
  min-height: 270px;
}

.guided-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.guided-kicker {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 6px 10px;
  color: #9a3412;
  background: #ffedd5;
  font-size: 12px;
  font-weight: 950;
}

.guided-copy h2 {
  margin: 0;
  max-width: 16ch;
  color: var(--text);
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1;
}

.guided-copy p {
  max-width: 48ch;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.guided-bullets {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guided-bullets li,
.guided-rule,
.guided-start-card,
.guided-qcm-preview span,
.guided-feedback {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.guided-bullets li {
  color: var(--text);
  font-weight: 850;
}

.guided-rule {
  border-color: rgba(22, 163, 74, 0.28);
  color: #14532d;
  background: #f0fdf4;
  font-size: 20px;
  font-weight: 950;
}

.guided-start-card {
  display: grid;
  align-content: center;
  gap: 8px;
}

.guided-start-card strong,
.guided-start-card p {
  margin: 0;
}

.guided-start-card strong {
  color: var(--text);
  font-size: 28px;
}

.guided-start-card.is-ready {
  border-color: rgba(234, 88, 12, 0.28);
  background: #fff7ed;
}

.guided-circuit {
  display: grid;
  gap: 10px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.guided-circuit svg {
  width: 100%;
  min-height: 180px;
}

.guided-circuit rect,
.guided-circuit circle,
.guided-circuit line,
.guided-circuit path {
  fill: none;
  stroke: #1e40af;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guided-circuit .meter {
  fill: #ffffff;
  stroke: #ea580c;
}

.guided-circuit text {
  fill: var(--text);
  font-size: 22px;
  font-weight: 950;
  text-anchor: middle;
}

.guided-circuit strong {
  color: var(--text);
  text-align: center;
}

.guided-signal {
  display: grid;
  gap: 10px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.guided-signal svg {
  width: 100%;
  min-height: 180px;
}

.guided-signal .axis {
  stroke: #94a3b8;
  stroke-width: 3;
}

.guided-signal polyline {
  fill: none;
  stroke: var(--blue);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guided-signal .period {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guided-signal circle {
  fill: #ffffff;
  stroke: var(--gold);
  stroke-width: 5;
}

.guided-signal text {
  fill: var(--text);
  font-size: 18px;
  font-weight: 950;
  text-anchor: middle;
}

.guided-signal strong {
  color: var(--text);
  text-align: center;
}

.guided-energy {
  display: grid;
  gap: 10px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
}

.guided-energy svg {
  width: 100%;
  min-height: 180px;
}

.guided-energy rect {
  stroke-width: 4;
}

.guided-energy .source {
  fill: #eff6ff;
  stroke: var(--blue);
}

.guided-energy .useful {
  fill: #f0fdf4;
  stroke: var(--green);
}

.guided-energy .loss {
  fill: #fff7ed;
  stroke: var(--gold);
}

.guided-energy .flow,
.guided-energy .loss-line {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guided-energy .flow {
  stroke: var(--green);
}

.guided-energy .loss-line {
  stroke: var(--gold);
}

.guided-energy text {
  fill: var(--text);
  font-size: 17px;
  font-weight: 950;
  text-anchor: middle;
}

.guided-energy strong {
  color: var(--text);
  text-align: center;
}

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

.guided-choice {
  min-height: 64px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  background: #ffffff;
  cursor: pointer;
  font-weight: 950;
}

.guided-choice.is-correct {
  border-color: var(--green);
  color: #14532d;
  background: #dcfce7;
}

.guided-choice.is-wrong {
  border-color: var(--red);
  color: #991b1b;
  background: #fee2e2;
}

.guided-feedback {
  color: var(--text);
  font-weight: 850;
}

.guided-qcm-preview {
  display: grid;
  gap: 8px;
}

.guided-qcm-preview span {
  color: var(--muted);
  font-size: 14px;
}

.guided-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.guided-primary {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  color: #ffffff;
  background: var(--gold);
  box-shadow: 0 14px 28px rgba(234, 88, 12, 0.22);
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
}

.guided-primary[hidden] {
  display: none;
}

.guided-link {
  border: 0;
  padding: 8px 10px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  text-decoration: underline;
}

.guided-tools {
  justify-self: end;
  min-width: 148px;
}

.guided-tools summary {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--text);
  background: #f8fafc;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.guided-tools summary::-webkit-details-marker {
  display: none;
}

.guided-tools div {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin-top: 6px;
}

.mission-xp-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  min-width: 142px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 12px;
  color: #ffffff;
  background: rgba(7, 17, 31, 0.74);
  backdrop-filter: blur(12px);
}

.mission-xp-card span,
.mission-xp-card small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.mission-xp-card strong {
  display: block;
  margin: 4px 0;
  color: #fbbf24;
  font-size: 22px;
}

.mission-stories {
  display: grid;
  align-content: start;
  gap: 12px;
}

.mission-progress,
.story-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.mission-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
}

.mission-progress span {
  color: var(--muted);
  font-weight: 850;
}

.mission-progress strong {
  color: var(--blue);
  font-size: 26px;
}

.mission-progress div {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.mission-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--green));
}

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

.story-card {
  min-height: 154px;
  padding: 14px;
}

.story-card span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--blue);
  font-weight: 950;
}

.story-card strong {
  display: block;
  margin-top: 12px;
  color: var(--text);
  font-size: 18px;
}

.story-card p {
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.premium-panel {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.student-drawer {
  padding: 0;
  overflow: hidden;
}

.student-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
}

.student-drawer > summary::-webkit-details-marker {
  display: none;
}

.student-drawer > summary span {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 900;
}

.student-drawer > summary strong {
  color: var(--text);
  font-size: 18px;
}

.student-drawer > summary::after {
  content: "+";
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  color: var(--blue);
  background: #eff6ff;
  font-size: 22px;
  font-weight: 900;
}

.student-drawer[open] > summary {
  border-bottom: 1px solid var(--line);
}

.student-drawer[open] > summary::after {
  content: "-";
}

.student-drawer > :not(summary) {
  margin: 18px 22px 22px;
}

.premium-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.premium-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.premium-card.is-focus {
  border-color: rgba(234, 88, 12, 0.38);
  background: #fff7ed;
}

.premium-card span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.premium-card.is-focus span {
  background: var(--gold);
}

.premium-card strong {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font-size: 17px;
}

.premium-card p {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.premium-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.premium-meta small {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 850;
}

.mini-button {
  width: max-content;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  color: #ffffff;
  background: var(--blue);
  cursor: pointer;
  font-weight: 850;
}

.student-grid,
.teacher-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  gap: 18px;
  margin-bottom: 18px;
}

.student-focus-grid {
  grid-template-columns: 1fr;
}

.qcm-panel.is-hidden {
  display: none;
}

.teacher-main {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.panel {
  padding: 22px;
  margin-bottom: 18px;
}

.readiness-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.readiness-copy p:last-child {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.55;
}

.teacher-class-filter {
  position: sticky;
  top: 82px;
  z-index: 70;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.teacher-jump-nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.teacher-jump-nav a {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--muted);
  background: #ffffff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

#teacherLive,
#teacherEditor,
#teacherYear,
#teacherQuality,
#teacherGrades,
#teacherStudents {
  scroll-margin-top: 250px;
}

.class-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 10px;
}

.class-tab {
  display: grid;
  gap: 3px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: var(--panel-strong);
  text-align: left;
  cursor: pointer;
}

.class-tab:hover,
.class-tab:focus-visible {
  border-color: var(--blue);
  outline: 2px solid rgba(30, 64, 175, 0.16);
}

.class-tab.is-active {
  border-color: var(--blue);
  color: #ffffff;
  background: var(--blue);
}

.class-tab span,
.class-tab small {
  color: var(--muted);
  font-size: 12px;
}

.class-tab.is-active span,
.class-tab.is-active small {
  color: rgba(255, 255, 255, 0.82);
}

.teacher-editor-grid {
  align-items: start;
}

.editor-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.editor-form,
.editor-form label {
  display: grid;
  gap: 7px;
}

.editor-form {
  gap: 12px;
}

.editor-form label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.editor-form label small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.editor-form input,
.editor-form textarea,
.editor-form select,
.grade-input,
.comment-input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #ffffff;
}

.editor-form textarea {
  min-height: 72px;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.editor-preview {
  display: grid;
  gap: 6px;
  border-left: 4px solid var(--gold);
  padding: 12px 14px;
  background: #fff7ed;
}

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

.editor-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  background: var(--panel-strong);
}

.editor-empty p {
  margin-top: 6px;
}

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

.version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-strong);
}

.version-row div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.version-row span,
.version-row small {
  color: var(--muted);
  font-size: 12px;
}

.grade-input {
  max-width: 86px;
  min-height: 38px;
  padding: 0 8px;
}

.comment-input {
  min-height: 38px;
  padding: 0 8px;
}

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

.readiness-step {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel-strong);
}

.readiness-step span,
.readiness-step p {
  color: var(--muted);
  font-size: 13px;
}

.readiness-step strong {
  display: block;
  margin: 5px 0;
  color: var(--text);
  font-size: 20px;
}

.readiness-step.is-ready {
  border-color: rgba(22, 163, 74, 0.28);
  background: #f0fdf4;
}

.readiness-step.is-testable {
  border-color: rgba(30, 64, 175, 0.24);
  background: #eff6ff;
}

.readiness-step.is-todo {
  border-color: rgba(234, 88, 12, 0.32);
  background: #fff7ed;
}

.chapter-overview {
  display: grid;
  gap: 16px;
}

.program-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-strong);
}

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

.program-head h3 {
  margin: 0;
  font-size: 24px;
}

.program-head p {
  margin-top: 6px;
  color: var(--muted);
}

.program-score {
  min-width: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #ffffff;
}

.program-score strong {
  display: block;
  color: var(--blue);
  font-size: 32px;
}

.program-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.program-meter {
  height: 10px;
  margin: 14px 0 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.program-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.program-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.program-stats span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: #ffffff;
  font-size: 12px;
  font-weight: 850;
}

.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.phase-pill {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.phase-pill span,
.phase-pill small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.phase-pill strong {
  display: block;
  margin: 3px 0;
  color: var(--text);
  font-size: 14px;
}

.chapter-list {
  display: grid;
  gap: 8px;
}

.chapter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.chapter-row p,
.chapter-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.chapter-row > span {
  border-radius: 8px;
  padding: 7px;
  color: #ffffff;
  background: var(--blue);
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

.chapter-row.is-ready > span {
  background: var(--green);
}

.chapter-row.is-testable > span {
  background: var(--blue);
}

.chapter-row.is-thin > span {
  background: var(--gold);
}

.chapter-row.is-empty > span {
  background: var(--red);
}

.program-focus,
.program-more {
  margin-top: 12px;
  border-left: 4px solid var(--gold);
  padding: 10px 12px;
  color: var(--muted);
  background: #fff7ed;
}

.program-focus.is-ok {
  border-left-color: var(--green);
  background: #f0fdf4;
}

.program-focus p,
.program-more {
  font-size: 13px;
}

.program-details {
  margin-top: 10px;
}

.program-details summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 850;
}

.program-details .chapter-list {
  margin-top: 10px;
}

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

.chip,
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.debug-chip[hidden] {
  display: none !important;
}

.qcm-card {
  display: grid;
  gap: 16px;
}

.qcm-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.qcm-meta span {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 850;
}

.timer {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.timer span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transform-origin: left;
}

.choice-grid {
  display: grid;
  gap: 10px;
}

.choice {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: var(--text);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.choice:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 64, 175, 0.38);
  background: #eff6ff;
}

.choice:disabled {
  cursor: default;
}

.choice.correct {
  border-color: var(--green);
  background: #bbf7d0;
}

.choice.wrong {
  border-color: var(--red);
  background: #fee2e2;
}

.feedback {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  background: var(--panel-strong);
}

.remediation {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  border-left: 4px solid var(--gold);
  padding: 10px 12px;
  color: var(--text);
  background: #fff7ed;
}

.quiz-summary {
  display: grid;
  justify-items: start;
  gap: 14px;
  border: 1px solid rgba(234, 88, 12, 0.24);
  border-radius: 8px;
  padding: 20px;
  background: linear-gradient(135deg, #fff7ed, #ffffff 58%, #eff6ff);
}

.quiz-score {
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 92px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--violet), var(--gold));
  font-size: 30px;
  font-weight: 950;
}

.quiz-summary h2 {
  margin: 0;
  color: var(--text);
  font-size: 34px;
  line-height: 1.05;
}

.quiz-summary p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}

.quiz-xp {
  border-radius: 999px;
  padding: 8px 12px;
  color: #ffffff;
  background: var(--green);
  font-weight: 950;
  animation: xp-pop 480ms ease-out both;
}

.quiz-streak {
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 999px;
  padding: 6px 10px;
  color: #166534;
  background: #f0fdf4;
  font-size: 12px;
  font-weight: 900;
}

@keyframes xp-pop {
  0% { opacity: 0; transform: scale(0.82); }
  100% { opacity: 1; transform: scale(1); }
}

.quiz-summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quiz-summary-grid span {
  border-radius: 999px;
  padding: 7px 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.quiz-summary-grid .is-ok {
  background: var(--green);
}

.quiz-summary-grid .is-ko {
  background: var(--gold);
}

.quiz-summary-grid .is-pending {
  color: #334155;
  background: #e2e8f0;
}

.choice.pending {
  border-color: #94a3b8;
  color: #334155;
  background: #f8fafc;
}

.quiz-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.student-roadmap {
  display: grid;
  gap: 14px;
}

.student-roadmap-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel-strong);
}

.student-roadmap-head h3 {
  margin: 0;
  font-size: 22px;
}

.student-roadmap-head p {
  margin-top: 6px;
  color: var(--muted);
}

.student-roadmap-score {
  min-width: 126px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  background: #ffffff;
}

.student-roadmap-score strong {
  display: block;
  color: var(--blue);
  font-size: 26px;
}

.student-roadmap-score span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.student-roadmap-list {
  display: grid;
  gap: 8px;
}

.student-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.student-chapter p,
.student-chapter small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.student-chapter-progress {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.student-chapter-progress span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.student-chapter-progress strong {
  color: var(--text);
  font-size: 18px;
}

.student-course {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.student-course summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--blue);
  font-weight: 850;
}

.student-course summary span {
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
}

.student-course summary strong {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
}

.student-course-body {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.course-vocab {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.course-vocab span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  font-weight: 850;
}

.course-step-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(180px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-radius: 8px;
  padding: 14px;
  background: #f8fbff;
}

.course-hero-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.course-badge {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  color: #075985;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 900;
}

.course-hero-copy h4,
.course-section-title h4 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
}

.course-hero-copy p {
  max-width: 62ch;
  color: var(--text);
  line-height: 1.55;
}

.course-hero-media {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
}

.course-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
}

.course-hero-media figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 12px;
  font-weight: 850;
}

.course-hero-media.is-fallback {
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 16px;
  color: #ffffff;
  text-align: center;
}

.course-hero-media.is-fallback strong {
  font-size: 20px;
}

.course-soft-grid,
.course-quick-grid,
.course-action-grid {
  display: grid;
  gap: 10px;
}

.course-soft-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-soft-grid article,
.course-mini {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.course-soft-grid article {
  display: grid;
  gap: 6px;
  align-content: start;
}

.course-soft-grid span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--blue);
  font-weight: 900;
}

.course-soft-grid strong,
.course-mini strong {
  color: var(--text);
}

.course-soft-grid p {
  color: var(--muted);
  line-height: 1.4;
}

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

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

.course-action-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.course-action-grid span {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffffff;
  background: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.course-action-grid strong {
  color: var(--text);
  font-size: 18px;
}

.course-action-grid p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.45;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.course-mini ul,
.course-mini ol {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.45;
}

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

.course-grid section,
.course-minute-plan {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
}

.course-grid h4,
.course-minute-plan h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 14px;
}

.course-grid ul,
.course-grid ol,
.course-minute-plan ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.course-grid p {
  color: var(--muted);
  line-height: 1.55;
}

.course-media-strip,
.course-experience,
.course-training,
.course-ccf {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
}

.course-section-title {
  display: grid;
  gap: 2px;
}

.course-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.course-media {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.course-media img,
.media-fallback,
.video-card {
  width: 100%;
  height: 118px;
}

.course-media img {
  display: block;
  object-fit: cover;
}

.media-fallback,
.video-card {
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue), var(--gold));
  font-weight: 900;
}

.video-card {
  align-content: center;
  gap: 5px;
}

.video-card span {
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--text);
  background: #ffffff;
  font-size: 12px;
}

.course-media div:last-child {
  padding: 10px;
}

.course-media strong,
.course-experience strong,
.course-training strong,
.course-ccf strong {
  color: var(--text);
}

.course-media p,
.course-experience p,
.course-training p,
.course-training small,
.course-ccf li {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.45;
}

.course-experience h4,
.course-training h4,
.course-ccf h4 {
  margin: 2px 0 0;
  font-size: 18px;
}

.experience-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.experience-columns h5 {
  margin: 0 0 6px;
  color: var(--text);
}

.experience-columns ul,
.experience-columns ol,
.course-ccf ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.course-experience .expected {
  border-left: 4px solid var(--green);
  margin-top: 10px;
  padding: 9px 10px;
  background: #f0fdf4;
}

.training-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.training-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.training-list span,
.course-ccf span {
  display: inline-flex;
  width: max-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: #ffffff;
  background: var(--gold);
  font-size: 12px;
  font-weight: 850;
}

.course-ccf {
  border-color: rgba(234, 88, 12, 0.32);
  background: #fff7ed;
}

.course-more {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 10px;
}

.course-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.course-more[open] summary {
  margin-bottom: 10px;
}

.course-full-details {
  border: 1px dashed rgba(15, 23, 42, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

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

.course-minute-plan li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
}

.course-minute-plan strong {
  color: var(--gold);
}

.student-chapter.is-done {
  border-color: rgba(22, 163, 74, 0.28);
  background: #f0fdf4;
}

.student-chapter.is-done .student-chapter-progress span {
  background: var(--green);
}

.student-chapter.is-current {
  border-color: rgba(234, 88, 12, 0.32);
  background: #fff7ed;
}

.student-chapter.is-current .student-chapter-progress span {
  background: var(--gold);
}

.student-chapter.is-soon {
  opacity: 0.78;
}

.student-chapter.is-soon .student-chapter-progress span {
  background: var(--muted);
}

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

.lab-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel-strong);
}

.lab-card h3 {
  margin: 0;
  font-size: 19px;
}

.lab-card select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: #ffffff;
}

.lab-result {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.lab-result p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.lab-bars {
  display: flex;
  align-items: end;
  gap: 5px;
  height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.lab-bars span {
  flex: 1;
  min-width: 8px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--blue), var(--gold));
  transition: height 180ms ease;
}

.dose-tank {
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.dose-tank span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #93c5fd, var(--blue));
  transition: width 180ms ease;
}

.signal-svg {
  width: 100%;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(#e2e8f0 1px, transparent 1px),
    linear-gradient(90deg, #e2e8f0 1px, transparent 1px),
    #ffffff;
  background-size: 24px 24px;
}

.signal-svg polyline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 10px rgba(234, 88, 12, 0.18));
  transition: all 180ms ease;
}

.skill-list,
.alert-list,
.class-grid,
.content-list,
.live-list,
.ccf-list {
  display: grid;
  gap: 12px;
}

.skill-row,
.alert-row,
.class-card,
.content-row,
.live-row,
.live-empty,
.ccf-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--panel);
}

.live-row,
.ccf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.live-row strong,
.ccf-card strong {
  display: block;
  margin-bottom: 4px;
}

.live-row span,
.live-row p,
.live-empty p,
.ccf-card p {
  color: var(--muted);
}

.live-row p {
  margin-top: 6px;
  font-size: 14px;
}

.live-side,
.ccf-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 92px;
}

.live-status,
.ccf-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #ffffff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.live-row.is-stuck {
  border-color: rgba(220, 38, 38, 0.45);
  background: #fef2f2;
}

.live-row.is-idle {
  border-color: rgba(234, 88, 12, 0.35);
  background: #fff7ed;
}

.live-row.is-active {
  border-color: rgba(22, 163, 74, 0.28);
  background: #f0fdf4;
}

.live-row.is-stuck .live-status,
.ccf-card.is-closed .ccf-status {
  background: var(--red);
}

.live-row.is-idle .live-status,
.ccf-card.is-planned .ccf-status {
  background: var(--gold);
}

.live-row.is-active .live-status,
.ccf-card.is-live .ccf-status {
  background: var(--green);
}

.mini-button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--text);
  background: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.premium-card .mini-button {
  width: max-content;
  min-height: 34px;
  color: #ffffff;
  background: var(--blue);
}

.student-ccf-card {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  border: 1px solid rgba(30, 64, 175, 0.24);
  border-radius: 8px;
  padding: 12px;
  background: #eff6ff;
}

.student-ccf-card.is-live {
  border-color: rgba(22, 163, 74, 0.35);
  background: #f0fdf4;
}

.student-ccf-card p {
  color: var(--muted);
  font-size: 14px;
}

.ccf-active .topbar nav {
  visibility: hidden;
}

.ccf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.ccf-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 36px;
  border-radius: 8px;
  color: #111827;
  background: #fed7aa;
  font-size: 20px;
  font-weight: 950;
}

.ccf-log {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.ccf-log-title,
.ccf-log-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 8px;
  align-items: center;
}

.ccf-log-title {
  grid-template-columns: 1fr auto;
  color: var(--muted);
  font-size: 13px;
}

.ccf-log-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: var(--panel-strong);
  font-size: 13px;
}

.ccf-log-row span,
.ccf-log-row small,
.ccf-log-empty {
  color: var(--muted);
}

.class-card {
  display: grid;
  gap: 12px;
}

.class-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.class-head strong,
.content-row strong {
  display: block;
  margin-bottom: 4px;
}

.class-head span,
.class-card p,
.content-row p {
  color: var(--muted);
}

.pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  color: #052e16 !important;
  background: #bbf7d0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 950;
}

.class-meter {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.class-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--violet), var(--green));
}

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

.import-preview {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(82, 214, 255, 0.28);
  border-radius: 8px;
  padding: 12px;
  background: #eff6ff;
}

.import-preview[hidden] {
  display: none;
}

.import-preview p {
  color: var(--muted);
  font-size: 14px;
}

.import-preview .warning {
  color: #fed7aa;
}

.preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.preview-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--text);
  background: #ffffff;
  font-size: 12px;
  font-weight: 760;
}

.content-row > span {
  display: inline-flex;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 850;
}

.bar {
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.bar span {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 420ms ease;
}

.grade-source {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

#gradebookTable td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.grade-actions {
  display: flex;
  min-width: 190px;
  gap: 6px;
}

.grade-status {
  display: inline-block;
  min-width: 82px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 7px;
  color: var(--muted);
  background: #ffffff;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.grade-status.is-locked {
  border-color: #15803d;
  color: #166534;
  background: #f0fdf4;
}

.is-grade-locked td {
  background: #f8fafc;
}

.quality-dashboard {
  display: grid;
  gap: 18px;
}

.quality-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.quality-summary div {
  display: grid;
  gap: 3px;
  min-height: 86px;
  padding: 16px;
  border-right: 1px solid var(--line);
  align-content: center;
}

.quality-summary div:last-child {
  border-right: 0;
}

.quality-summary strong {
  font-size: 25px;
}

.quality-summary span,
.quality-program span,
.quality-issue small {
  color: var(--muted);
  font-size: 12px;
}

.quality-programs,
.quality-issues {
  display: grid;
  gap: 8px;
}

.quality-program {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 2fr) 50px;
  gap: 14px;
  align-items: center;
}

.quality-program div:first-child {
  display: grid;
  gap: 2px;
}

.quality-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.quality-meter span {
  display: block;
  height: 100%;
  background: var(--green);
}

.quality-issue {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border-left: 4px solid #d97706;
  padding: 10px 12px;
  background: #fffaf0;
}

.quality-issue.is-blocking {
  border-left-color: #dc2626;
  background: #fff7f7;
}

.quality-issue div {
  display: grid;
  gap: 2px;
}

.quality-issue span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.timeline {
  display: grid;
  gap: 12px;
}

.lesson {
  display: grid;
  grid-template-columns: 84px 110px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel);
}

.lesson strong {
  color: var(--gold);
}

.heatmap {
  display: grid;
  gap: 10px;
}

.heat-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 80px;
  gap: 12px;
  align-items: center;
}

.heat-cell {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.heat-cell span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold), var(--green));
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 340px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.confirm-dialog {
  width: min(460px, calc(100% - 32px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.confirm-dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.confirm-dialog-body {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.confirm-dialog-body h2 {
  font-size: 22px;
}

.confirm-dialog-body > p:not(.micro) {
  color: var(--muted);
  line-height: 1.55;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

@media (max-width: 880px) {
  .quality-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quality-summary div:nth-child(2) {
    border-right: 0;
  }

  .quality-summary div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .quality-program {
    grid-template-columns: 1fr 50px;
  }

  .quality-program div:first-child {
    grid-column: 1 / -1;
  }

  .topbar {
    padding: 0 16px;
  }

  .topbar nav {
    gap: 10px;
  }

  .app-hero h1,
  .app-hero.compact h1 {
    font-size: 24px;
  }

  .app-hero {
    padding: 18px;
  }

  .app-hero p {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
  }

  .teacher-class-filter {
    top: 72px;
    padding: 12px;
  }

  .teacher-class-filter .panel-head {
    margin-bottom: 8px;
  }

  .teacher-class-filter .panel-head > div {
    display: none;
  }

  #teacherLive,
  #teacherEditor,
  #teacherYear,
  #teacherGrades,
  #teacherStudents {
    scroll-margin-top: 230px;
  }

  .hero,
  .auth-card,
  .mission-stage,
  .guided-screen,
  .student-grid,
  .teacher-main,
  .readiness-panel,
  .app-hero {
    grid-template-columns: 1fr;
    display: grid;
  }

  .proof-grid,
  .teacher-grid,
  .readiness-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .lesson {
    grid-template-columns: 1fr;
  }

  .editor-toolbar {
    grid-template-columns: 1fr;
  }

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

  .live-row,
  .ccf-card {
    display: grid;
  }

  .live-side,
  .ccf-actions {
    justify-items: start;
  }

  .ccf-log-row {
    grid-template-columns: 1fr;
  }

  .program-head,
  .chapter-row,
  .student-roadmap-head,
  .student-chapter {
    grid-template-columns: 1fr;
    display: grid;
  }

  .program-score,
  .student-roadmap-score {
    width: 100%;
  }

  .student-chapter-progress {
    justify-items: start;
  }

  .student-course summary {
    align-items: start;
    flex-direction: column;
  }

  .course-step-hero,
  .course-grid,
  .course-quick-grid,
  .course-action-grid {
    grid-template-columns: 1fr;
  }

  .experience-columns,
  .course-ccf,
  .ccf-columns {
    grid-template-columns: 1fr;
  }

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

  .course-hero-media,
  .course-hero-media img {
    min-height: 190px;
  }

  .mission-visual,
  .mission-overlay {
    min-height: 420px;
  }

  .guided-actions {
    grid-template-columns: 1fr;
  }

  .guided-primary {
    width: 100%;
  }

  .guided-tools {
    justify-self: stretch;
    width: 100%;
  }

  .guided-tools div {
    justify-items: start;
  }

  .guided-link {
    justify-self: start;
  }

  .mission-visual::after {
    background: linear-gradient(180deg, rgba(7, 17, 31, 0.86), rgba(7, 17, 31, 0.56));
  }

  .mission-overlay h2 {
    max-width: 11ch;
  }
}

@media (max-width: 560px) {
  .readiness-steps,
  .lab-grid,
  .story-track,
  .course-soft-grid,
  .training-list {
    grid-template-columns: 1fr;
  }

  .student-course-body {
    gap: 12px;
  }

  .course-step-hero,
  .course-media-strip,
  .course-experience,
  .course-training,
  .course-action-grid article,
  .course-ccf {
    padding: 12px;
  }

  .course-hero-copy h4,
  .course-section-title h4 {
    font-size: 18px;
  }

  .course-media-grid {
    grid-template-columns: 1fr;
  }

  .guided-card {
    padding: 14px;
  }

  .guided-top {
    align-items: start;
    flex-direction: column;
  }

  .guided-dots span {
    width: 28px;
    height: 28px;
  }

  .guided-screen {
    gap: 14px;
    min-height: 0;
  }

  .guided-copy h2 {
    font-size: 34px;
  }

  .guided-copy p {
    font-size: 16px;
  }

  .guided-choice-row {
    grid-template-columns: 1fr;
  }

  .mission-overlay {
    padding: 20px;
  }

  .mission-xp-card {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
}