:root {
  --bg: #f6f4fb;
  --surface: #ffffff;
  --surface-soft: #faf8fe;
  --text: #221c33;
  --muted: #6e6580;
  --line: #e2dcee;
  --line-strong: #cbc0dd;
  --plum: #241e38;
  --plum-soft: #373050;
  --purple: #6f4bee;
  --purple-strong: #5233c4;
  --purple-soft: #efeaff;
  --green: #0fa377;
  --green-strong: #0b7a5a;
  --green-soft: #e2f7ee;
  --ink: var(--text);
  --violet: var(--purple);
  --mint: var(--green);
  --font-body: "Onest", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", var(--font-body);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --paper-grid: linear-gradient(rgba(74, 53, 97, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 53, 97, .035) 1px, transparent 1px);
  --blue: #4079b8;
  --blue-soft: #e9f3fb;
  --amber: #8a6a12;
  --danger: #c2496a;
  --danger-soft: #fdedf2;
  --shadow: 0 16px 40px rgba(38, 27, 64, .10);
  --shadow-soft: 0 6px 18px rgba(38, 27, 64, .06);
  --radius: 12px;
  --radius-sm: 9px;
}

html { scroll-behavior: smooth; }

.studio-body {
  min-width: 320px;
  overflow-x: clip;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  letter-spacing: 0;
}

.studio-body h1,
.home-hero h1,
.home-system-map h2,
.home-roles h2,
.home-course-rail h2 {
  font-family: var(--font-display);
  font-weight: 600;
}

.studio-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(74, 53, 97, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 53, 97, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}

.studio-backdrop::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 5.2vw;
  width: 1px;
  background: rgba(115, 83, 216, .17);
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 10px 13px;
  border-radius: 6px;
  background: var(--plum);
  color: #fff;
  transition: top .16s ease;
}

.skip-link:focus { top: 14px; }

.topbar {
  min-height: 64px;
  padding: 10px max(22px, calc((100vw - 1320px) / 2));
  gap: 18px;
  border: 0;
  border-bottom: 1px solid rgba(41, 33, 51, .10);
  background: rgba(250, 248, 254, .82);
  box-shadow: 0 8px 20px rgba(45, 31, 61, .03);
}

.brand {
  gap: 10px;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--plum);
  box-shadow: 4px 4px 0 rgba(111, 75, 238, .32);
  color: #d7ffef;
  font-family: var(--font-display);
  transition: transform .18s ease, box-shadow .18s ease;
}

.brand:hover .brand-mark {
  transform: translate(-2px, -2px) rotate(-3deg);
  box-shadow: 6px 6px 0 rgba(15, 163, 119, .28);
}

.nav { gap: 2px; }

.nav a {
  position: relative;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #5f5670;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .16s ease, color .16s ease;
}

.nav a::before { content: none; }

.nav a:hover {
  border-color: transparent;
  background: var(--purple-soft);
  color: var(--purple-strong);
}

.account { gap: 10px; font-size: 13px; }
.account > span { color: #62576d; }

.topbar-wallet {
  flex: 0 0 auto;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  color: var(--green-strong);
}

.topbar-wallet span {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.topbar-wallet strong {
  min-width: 2ch;
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

.topbar-wallet:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 163, 119, .4);
}

.studio-main {
  width: min(1280px, calc(100% - 44px));
  margin-top: 34px;
  margin-bottom: 80px;
}

.page-header,
.catalog-hero,
.course-detail-hero,
.moved-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, .94);
  background-image:
    linear-gradient(rgba(115, 83, 216, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 83, 216, .04) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: var(--shadow-soft);
}

.page-header,
.catalog-hero,
.course-detail-hero { margin-bottom: 20px; }

.page-header {
  min-height: 0;
  padding: 20px 24px;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.catalog-hero,
.course-detail-hero {
  min-height: 0;
  padding: 24px 26px;
}

.page-header::before,
.panel::before {
  height: 3px;
  background: var(--green);
}

.auth-copy::before,
.auth-copy::after { content: none; }

.page-header::after,
.auth-copy::after,
.catalog-hero::after,
.course-detail-hero::after,
.moved-card::after { display: none; }

.page-header h1,
.auth-copy h1,
.catalog-hero h1,
.course-detail-copy h1,
.moved-card h1 {
  max-width: 790px;
  margin-top: 6px;
  color: var(--plum);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.page-header p:not(.eyebrow),
.catalog-hero p,
.course-detail-copy p,
.auth-copy p,
.moved-card p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
}

.eyebrow::before {
  content: "";
  width: 13px;
  height: 2px;
  background: currentColor;
}

.course-detail-card {
  min-width: 0;
  overflow-wrap: anywhere;
  border: 1px solid #3f3150;
  border-radius: 8px;
  background: var(--plum);
  box-shadow: 8px 8px 0 rgba(115, 83, 216, .20);
  color: #fff;
}

.course-detail-card span,
.course-detail-card small { color: #d3c9e2; }
.course-detail-card strong { color: #b5f1d9; }

.platform-hero .course-detail-card::before {
  content: "ДОСТУП К ПЛАТФОРМЕ";
  display: block;
  margin-bottom: 11px;
  color: #a99ada;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.platform-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: center;
  gap: 30px;
}

.platform-hero .course-detail-card { padding: 20px; }

.empty,
.panel > .empty {
  min-height: 0;
  padding-left: 0;
  background: none;
}

.empty::before,
.empty::after,
.panel > .empty::after { display: none; }

.auth-layout { gap: 18px; }

.auth-copy {
  min-height: 0;
  padding: 6px 4px 0;
  align-content: start;
  justify-items: center;
  text-align: center;
  border: 0;
  background: none;
  box-shadow: none;
}

.auth-copy .eyebrow { justify-content: center; }

.auth-panel,
.panel,
.stat,
.stat-card,
.referral-box,
.embedded-panel,
.course-card,
.lecture-card,
.material-card,
.list-row,
.access-card,
.message,
.analytics-status-row,
.analytics-metric,
.table-wrap,
.secure-video-shell,
.secure-pdf-shell,
.video-shell,
.game-stage,
.game-panel,
.leaderboard-panel,
.leaderboard-list li {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-soft);
}

.auth-panel,
.panel { padding: 24px; }

.oauth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.oauth-divider::before,
.oauth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.oauth-actions {
  display: grid;
  gap: 10px;
}

.oauth-button {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--plum);
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.oauth-button:hover {
  border-color: rgba(30, 150, 118, .32);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

.oauth-mark {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-strong);
  font-size: 14px;
  font-weight: 750;
}

.oauth-button-vk .oauth-mark {
  background: #eaf2ff;
  color: #1677ff;
}

.oauth-button-yandex .oauth-mark {
  background: #fff0ef;
  color: #d71920;
}

.panel::before { border-radius: 8px 8px 0 0; }

.panel-heading {
  min-height: 34px;
  margin-bottom: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  color: var(--plum);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.split-grid,
.stats-grid,
.course-grid,
.lecture-grid,
.material-grid,
.file-grid,
.game-layout { gap: 18px; }

.stat,
.stat-card {
  min-height: 118px;
  padding: 18px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.stat::after,
.stat-card::after { display: none; }

.stat:hover,
.stat-card:hover {
  border-color: #b5e8d5;
  box-shadow: 0 16px 28px rgba(45, 31, 61, .085);
  transform: translateY(-2px);
}

.stat span,
.stat-card span {
  color: #867b91;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.stat strong,
.stat-card strong {
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
}

.course-card,
.lecture-card,
.material-card,
.list-row,
.access-card {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.course-card:hover,
.lecture-card:hover,
.material-card:hover,
.list-row:hover,
.access-card:hover {
  border-color: #b5e8d5;
  box-shadow: 0 18px 30px rgba(45, 31, 61, .09);
  transform: translateY(-2px);
}

.course-system-cover,
.course-detail-system-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
  background-size: 19px 19px;
}

.course-system-cover {
  height: 184px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.course-system-cover::before,
.course-detail-system-cover::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: -1;
  border: 1px solid rgba(212, 199, 255, .20);
}

.course-cover-index,
.course-cover-kind,
.course-cover-code {
  position: absolute;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-cover-index {
  top: 22px;
  left: 22px;
  color: #c9bdff;
}

.course-cover-kind {
  right: 22px;
  top: 22px;
  color: #9ae7cc;
}

.course-cover-code {
  right: 22px;
  bottom: 21px;
  max-width: 68%;
  overflow: hidden;
  color: rgba(255,255,255,.58);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-cover-letter,
.course-detail-letter {
  position: absolute;
  z-index: 1;
  color: #9a7dff;
  font-size: 148px;
  font-weight: 750;
  line-height: .78;
  opacity: .92;
  text-shadow: 7px 7px 0 rgba(19, 152, 117, .31);
}

.course-cover-letter { bottom: 12px; left: 17px; }

img.course-cover-badge,
img.course-detail-badge {
  position: absolute;
  z-index: 3;
  width: 88px;
  height: 88px;
  object-fit: contain;
  border-radius: 8px;
  filter: drop-shadow(0 12px 18px rgba(45,31,61,.22));
}

.course-cover-badge {
  right: 24px;
  bottom: 54px;
}

.course-detail-badge {
  left: 30px;
  bottom: 28px;
  width: 112px;
  height: 112px;
}

.course-cover-particle {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
  animation: signal-drift 5.6s ease-in-out infinite;
}

.particle-one {
  top: 52px;
  right: 74px;
  width: 12px;
  height: 12px;
  background: #9ae7cc;
  box-shadow: 0 0 0 6px rgba(154,231,204,.11);
}

.particle-two {
  top: 84px;
  right: 35px;
  width: 6px;
  height: 6px;
  background: #b8a7ff;
  animation-delay: -2s;
}

.particle-three {
  bottom: 41px;
  left: 54%;
  width: 8px;
  height: 8px;
  background: #baabff;
  animation-delay: -3.8s;
}

.course-card-tone-1 .course-cover-letter { color: #83d9bf; text-shadow: 7px 7px 0 rgba(115,83,216,.29); }
.course-card-tone-1 .particle-one { background: #b9a8ff; }
.course-card-tone-2 .course-cover-letter { color: #a7bfff; text-shadow: 7px 7px 0 rgba(19,152,117,.29); }
.course-card-tone-2 .particle-three { background: #9ae7cc; }

.course-detail-system-cover {
  min-height: 320px;
  border: 1px solid #3c3048;
  box-shadow: 10px 10px 0 rgba(115,83,216,.18);
}

.course-detail-system-cover .course-cover-kind {
  top: 30px;
  right: 30px;
}

.course-detail-system-cover .course-cover-code {
  right: 30px;
  bottom: 28px;
}

.course-detail-letter {
  right: 25px;
  bottom: 24px;
  font-size: 238px;
}

.course-card-body { padding: 20px; }
.course-card h2 { color: var(--plum); font-size: 24px; letter-spacing: 0; }
.course-card p { color: var(--muted); }

.course-badge-upload {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.course-badge-upload img,
.course-badge-preview,
.course-badge-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border: 1px solid rgba(15, 163, 119, .26);
  border-radius: 8px;
  background: #fff8d9;
  box-shadow: 0 10px 20px rgba(45,31,61,.06);
}

.course-badge-preview {
  flex: 0 0 72px;
}

.course-badges-panel {
  margin-bottom: 22px;
}

.course-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.course-badge-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
}

.course-badge-card strong,
.course-badge-card small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.course-badge-card small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.course-certificates-panel {
  margin-bottom: 22px;
}

.student-skills-panel {
  margin-bottom: 22px;
}

.student-skill-courses,
.student-skill-groups {
  display: grid;
  gap: 12px;
}

.student-skill-course {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
}

.student-skill-course h3,
.student-skill-group h4 {
  margin: 0;
  letter-spacing: 0;
}

.student-skill-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  align-items: start;
}

.student-skill-group {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.student-skill-group ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.student-skill-group li {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--plum);
}

.student-skill-group li.is-child {
  padding-left: 16px;
  color: var(--muted);
}

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

.certificate-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(228,247,238,.72), rgba(255,255,255,.92)),
    var(--paper-grid);
  color: var(--plum);
  box-shadow: var(--shadow-soft);
}

.certificate-row strong,
.certificate-row small {
  display: block;
  overflow-wrap: anywhere;
}

.certificate-row small {
  margin-top: 4px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.certificate-page {
  display: grid;
  gap: 18px;
}

.certificate-shell {
  position: relative;
  isolation: isolate;
  min-height: 520px;
  display: grid;
  align-content: center;
  gap: 34px;
  padding: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid #342840;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,233,255,.88)),
    var(--paper-grid);
  box-shadow: 12px 12px 0 rgba(19,152,117,.18);
}

.certificate-shell::before {
  content: "";
  position: absolute;
  inset: 22px;
  z-index: -1;
  border: 1px solid rgba(41,35,58,.20);
}

.certificate-mark {
  position: absolute;
  right: clamp(24px, 6vw, 76px);
  bottom: clamp(20px, 5vw, 56px);
  color: rgba(112,82,214,.16);
  font-size: clamp(150px, 28vw, 320px);
  font-weight: 750;
  line-height: .75;
}

.certificate-copy {
  max-width: 760px;
}

.certificate-copy h1 {
  margin: 10px 0 22px;
  color: var(--plum);
  font-size: clamp(46px, 8vw, 92px);
  line-height: .9;
  letter-spacing: 0;
}

.certificate-lead {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
}

.certificate-student,
.certificate-course {
  display: block;
  overflow-wrap: anywhere;
  color: var(--plum);
  line-height: 1;
}

.certificate-student {
  margin: 8px 0 22px;
  font-size: clamp(32px, 6vw, 64px);
}

.certificate-course {
  margin-top: 8px;
  font-size: clamp(24px, 4vw, 44px);
}

.certificate-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 0;
}

.certificate-meta div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}

.certificate-meta dt {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.certificate-meta dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--plum);
  font-weight: 750;
}

.certificate-actions {
  justify-content: flex-start;
}

.platform-hero-card {
  position: relative;
  min-height: 154px;
  padding-right: 130px;
}

.platform-hero-card > span,
.platform-hero-card > strong,
.platform-hero-card > small { display: block; }

.platform-hero-card > small {
  max-width: 218px;
  margin-top: 8px;
  line-height: 1.38;
}

.platform-k3d {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 118px;
  height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 13px 16px rgba(0,0,0,.24));
  animation: k-float 5.4s ease-in-out infinite;
}

.billing-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.billing-status-strip.is-enabled {
  border-color: rgba(19,152,117,.24);
  background:
    linear-gradient(135deg, rgba(228,247,238,.86), rgba(255,255,255,.92)),
    var(--paper-grid);
}

.billing-status-strip.is-disabled {
  border-color: rgba(115,83,216,.18);
}

.billing-status-strip strong,
.billing-status-strip small {
  display: block;
  overflow-wrap: anywhere;
}

.billing-status-strip strong {
  margin-top: 3px;
  color: var(--plum);
  font-size: 18px;
}

.billing-status-strip small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.course-study-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 24px;
}

.course-study-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 126px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 8px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow-soft);
}

.course-study-nav nav {
  display: grid;
  gap: 8px;
}

.course-study-nav span,
.course-study-nav a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.course-study-nav span {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.course-study-nav a {
  display: block;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--plum);
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.course-study-nav a:hover,
.course-study-nav a:focus-visible {
  border-color: rgba(19,152,117,.24);
  background: var(--green-soft);
  transform: translateX(2px);
}

.course-study-main,
.course-program-stack {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.course-program-section {
  border-top: 5px solid var(--green);
}

.course-program-section .stack-list {
  display: grid;
  gap: 10px;
}

.course-program-section .list-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.course-program-section .list-row strong,
.course-program-section .list-row small {
  display: block;
  overflow-wrap: anywhere;
}

.course-meta-row span,
.course-detail-meta span,
.badge,
.status,
.thread-type,
.attachment-pill {
  border-radius: 999px;
  font-weight: 800;
}

.course-meta-row span,
.course-detail-meta span {
  border-color: #bee8d9;
  background: var(--green-soft);
  color: var(--green-strong);
}

.badge {
  border-color: #d8cdfc;
  background: var(--purple-soft);
  color: var(--purple-strong);
}

.status.assigned,
.status.open,
.status.ready,
.status.approved { background: var(--green-soft); color: var(--green-strong); }

.status.pending,
.status.processing { background: #f1edff; color: #5e499b; }

.status.neutral { background: rgba(45,31,61,.08); color: var(--ink); }

.status.rejected,
.status.failed,
.status.cancelled { background: var(--danger-soft); color: var(--danger); }

.primary-button,
.ghost-button,
.danger-button,
.ghost-link-button {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.primary-button {
  border-color: var(--purple-strong);
  background: var(--purple);
  box-shadow: 4px 4px 0 rgba(82, 51, 196, .22);
}

.primary-button:hover {
  background: #5f3ddd;
  box-shadow: 6px 6px 0 rgba(82, 51, 196, .22);
  transform: translate(-1px, -1px);
}

.primary-button:active {
  box-shadow: 1px 1px 0 rgba(82, 51, 196, .22);
  transform: translate(2px, 2px);
}

.ghost-button,
.ghost-link-button {
  border-color: #d7cdee;
  background: #fbfaff;
  color: var(--purple-strong);
}

.ghost-button:hover,
.ghost-link-button:hover {
  border-color: #b7a7e4;
  background: var(--purple-soft);
  transform: translateY(-1px);
}

.danger-button {
  border-color: #e3adba;
  background: var(--danger-soft);
  color: var(--danger);
}

.primary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled,
.primary-button[aria-disabled="true"],
.ghost-button[aria-disabled="true"] {
  border-color: #ded8ea;
  background: #edeaf4;
  color: #9d94b0;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

input,
select,
textarea {
  border-color: #d7cfdf;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset;
}

input:hover,
select:hover,
textarea:hover { border-color: #b9a9d5; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(115, 83, 216, .12);
}

:where(a, button, summary, input[type="checkbox"], input[type="radio"]):focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

:where(a, button, summary, input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid rgba(112, 82, 214, .42);
  outline-offset: 3px;
}

label { color: #55495f; font-size: 13px; font-weight: 800; }

fieldset {
  border-color: #dfd7e8;
  border-radius: 8px;
  background: #fbfaff;
}

.list-row {
  border-left: 3px solid transparent;
  background: #fff;
}

.list-row:hover { border-left-color: var(--green); }

.course-admin-details,
.grader-assignment-box,
.check-mode-card,
.file-drop,
.analytics-metric,
.access-card {
  border-color: var(--line);
  border-radius: 8px;
  background: #fbfaff;
  box-shadow: none;
}

.check-mode-card:hover {
  border-color: #b7e6d5;
  background: #f2fbf7;
}

.admin-hero,
.analytics-hero,
.grader-hero,
.dashboard-hero,
.lessons-hero,
.lesson-hero,
.submission-hero,
.chat-hero,
.games-hero { background-color: rgba(255, 255, 255, .94); }

.game-coin-box {
  min-width: 190px;
}

.game-coin-box strong {
  color: var(--green-strong);
}

.admin-hero::after,
.analytics-hero::after,
.grader-hero::after,
.dashboard-hero::after,
.lessons-hero::after,
.lesson-hero::after,
.submission-hero::after,
.chat-hero::after,
.games-hero::after { display: none; }

.dashboard-shell {
  display: grid;
  grid-template-columns: minmax(190px, 236px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.dashboard-side-nav {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--green);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-soft);
}

.dashboard-side-nav nav {
  display: grid;
  gap: 7px;
}

.dashboard-side-nav a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--plum);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-side-nav a:hover {
  border-color: #d7cef1;
  background: var(--purple-soft);
  color: var(--purple-strong);
}

.search-panel {
  margin-bottom: 18px;
}

.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.search-results {
  display: grid;
  gap: 12px;
}

.search-result-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(45,31,61,.13);
  border-left: 5px solid var(--green);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-soft);
}

.search-result-card strong {
  color: var(--plum);
  font-size: 22px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.search-result-card small,
.search-result-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.search-result-card:hover {
  border-color: rgba(112,82,214,.28);
  border-left-color: var(--purple);
  transform: translateY(-1px);
}

.dashboard-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.review-thread,
.submission-thread {
  border-color: #413449;
  border-radius: 9px;
  background-color: var(--plum);
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

.review-thread .message,
.submission-thread .message {
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

.message.student,
.message.admin { background: rgba(255,255,255,.96); }
.message.grader { background: #e6f8ef; }

.table-wrap { overflow: auto; }

table thead th {
  border-bottom-color: #cfc5da;
  background: #f1edfa;
  color: #58486a;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

tbody tr { transition: background .14s ease; }
tbody tr:hover { background: #f8f5fd; }

.secure-video-shell,
.video-shell,
.secure-pdf-shell {
  border-color: #3d3148;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

.pdf-page-card {
  border-radius: 7px;
  box-shadow: 0 12px 24px rgba(30, 21, 41, .20);
}

.game-titlebar,
.game-panel,
.leaderboard-panel,
.game-stage {
  border-color: var(--line);
  border-radius: 8px;
}

.game-tabs {
  border-color: var(--line);
  border-radius: 8px;
  background: #fbfaff;
}

.game-tab {
  border-radius: 6px;
  color: #675d73;
  transition: transform .16s ease, color .16s ease, background .16s ease;
}

.game-tab:hover,
.game-tab.is-active {
  background: var(--purple-soft);
  color: var(--purple-strong);
  transform: translateY(-1px);
}

.game-overlay {
  border-color: rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(41, 33, 51, .93);
}

.leaderboard-list li.is-current {
  border-color: #b8e7d5;
  background: var(--green-soft);
}

.moved-card {
  max-width: 900px;
  padding: 54px;
}

.moved-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  align-items: center;
  gap: 34px;
  max-width: 1060px;
}

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

.signal-scene {
  position: relative;
  min-height: 278px;
  overflow: hidden;
  border: 1px solid rgba(115,83,216,.24);
  border-radius: 8px;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 18px 18px;
}

.signal-scene::before {
  content: "K / SIGNAL";
  position: absolute;
  top: 16px;
  left: 16px;
  color: rgba(212,199,255,.68);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.signal-scene img {
  position: absolute;
  z-index: 2;
  right: -21px;
  bottom: -24px;
  width: 280px;
  height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,.31));
  animation: k-float 6.2s ease-in-out infinite;
}

.signal-particle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  animation: signal-drift 5.8s ease-in-out infinite;
}

.signal-particle-one { top: 54px; left: 42px; width: 9px; height: 9px; background: #98e8ca; box-shadow: 0 0 0 6px rgba(152,232,202,.12); }
.signal-particle-two { top: 78px; right: 42px; width: 7px; height: 7px; background: #b9a8ff; animation-delay: -2.5s; }
.signal-particle-three { bottom: 45px; left: 32px; width: 12px; height: 12px; background: #beacff; animation-delay: -3.2s; }
.signal-particle-four { top: 126px; left: 70px; width: 5px; height: 5px; background: #8be1c3; animation-delay: -4.2s; }
.signal-particle-five { bottom: 72px; right: 110px; width: 6px; height: 6px; background: #b5a1ff; animation-delay: -1.3s; }
.signal-particle-six { top: 38px; right: 105px; width: 4px; height: 4px; background: #fff; animation-delay: -3.8s; }

@keyframes signal-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

@keyframes k-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(-4px, -9px, 0) rotate(2deg); }
}

.mobile-menu-button {
  border-radius: 7px;
  border-color: #d9d1e3;
  background: #fff;
}

.mobile-menu-panel {
  border-color: #d9d1e3;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

@media (max-width: 980px) {
  .studio-main { width: min(100% - 28px, 920px); margin-top: 22px; }
  .topbar { padding: 10px 16px; }
  .desktop-nav, .desktop-account { display: none; }
  .mobile-menu { display: block; }
  .platform-hero { grid-template-columns: minmax(0, 1fr); }
  .course-detail-card { width: 100%; }
  .course-study-shell { grid-template-columns: minmax(0, 1fr); }
  .course-study-nav {
    position: relative;
    top: auto;
    max-height: none;
    padding: 10px;
  }
  .course-study-nav nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .course-study-nav a { flex: 0 0 auto; white-space: nowrap; }
  .page-header h1, .auth-copy h1 { font-size: 24px; }
  .catalog-hero h1, .course-detail-copy h1 { font-size: 30px; }
}

@media (max-width: 720px) {
  .studio-backdrop::before { display: none; }
  .studio-main { width: min(100% - 22px, 620px); margin-bottom: 52px; }
  .topbar { min-height: 64px; }
  .brand { font-size: 17px; }
  .brand-mark { width: 32px; height: 32px; }
  .page-header, .catalog-hero, .course-detail-hero, .moved-card { background-size: 18px 18px; }
  .page-header { min-height: 0; padding: 18px 16px; }
  .catalog-hero, .course-detail-hero { padding: 24px 20px; }
  .auth-copy { min-height: 0; padding: 6px 4px 0; }
  .page-header h1, .auth-copy h1, .catalog-hero h1, .course-detail-copy h1, .moved-card h1 { font-size: 21px; }
  .page-header p:not(.eyebrow), .catalog-hero p, .course-detail-copy p, .auth-copy p, .moved-card p:not(.eyebrow) { font-size: 15px; }
  .auth-panel, .panel { padding: 18px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat,
.stat-card { min-height: 100px; padding: 14px; }
  .stat strong,
.stat-card strong { font-size: 21px; }
  .course-card-body { padding: 17px; }
  .course-system-cover { height: 160px; }
  .course-cover-letter { font-size: 126px; }
  .course-detail-system-cover { min-height: 245px; }
  .course-detail-letter { right: 18px; bottom: 16px; font-size: 176px; }
  .platform-hero-card { min-height: 136px; padding-right: 110px; }
  .platform-hero-card > small { max-width: 190px; }
  .platform-k3d { width: 102px; height: 102px; }
  .course-study-shell { gap: 14px; }
  .course-program-section .list-row,
  .ai-notes-panel .list-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .latex-material h2,
  .latex-section-title { font-size: 22px; }
  .latex-subsection-title { font-size: 18px; }
  .moved-card { grid-template-columns: 1fr; padding: 28px 22px; }
  .signal-scene { min-height: 226px; }
  .signal-scene img { width: 230px; height: 230px; }
  .game-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .game-tab { flex: 0 0 auto; }
  .moved-card { padding: 28px 22px; }
}

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

.role-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border: 1px solid #d9cdf9;
  border-radius: 999px;
  background: #f3efff;
  color: var(--purple-strong);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guest-actions { display: flex; align-items: center; gap: 8px; }

.studio-main > .home-hero,
.studio-main > .home-system-map,
.studio-main > .home-roles,
.studio-main > .home-course-rail { animation: none; }

.home-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100vw;
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(390px, .85fr);
  align-items: center;
  overflow: hidden;
  margin: -34px 0 0 calc(50% - 50vw);
  padding: 92px max(28px, calc((100vw - 1280px) / 2));
  border-top: 1px solid #3f324b;
  border-bottom: 1px solid #3f324b;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #fff;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(33,27,41,.12);
}

.home-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 660px;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: #c9bdfb;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
}

.home-kicker span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8be1c3;
  box-shadow: 0 0 0 6px rgba(139,225,195,.12);
  animation: home-pulse 2.8s ease-in-out infinite;
}

.home-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.home-hero h1 em,
.home-section-lead h2 em {
  color: #bda9ff;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

.home-lead {
  max-width: 580px;
  margin: 26px 0 0;
  color: #d5cedf;
  font-size: 18px;
  line-height: 1.58;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 31px;
}

.home-actions .primary-button {
  min-height: 48px;
  padding: 0 19px;
  background: #9b80f2;
  border-color: #b39df8;
  color: #fff;
  box-shadow: 5px 5px 0 rgba(115,83,216,.35);
}

.home-actions .primary-button:hover {
  background: #b39df8;
  box-shadow: 7px 7px 0 rgba(115,83,216,.35);
}

.home-actions .ghost-button {
  border-color: rgba(255,255,255,.24);
  background: transparent;
  color: #f2eff8;
}

.home-actions .ghost-button:hover {
  border-color: #c9bdfb;
  background: rgba(189,169,255,.12);
  color: #fff;
}

.home-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
  color: #bcb2c9;
  font-size: 12px;
}

.home-metrics span { display: inline-flex; align-items: center; gap: 7px; }

.home-metrics b {
  color: #8be1c3;
  font-family: var(--mono);
  font-size: 10px;
}

.home-k-stage {
  position: relative;
  z-index: 1;
  align-self: stretch;
  min-height: 420px;
  overflow: hidden;
}

.home-k-stage canvas,
.home-k-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-k-stage canvas { z-index: 3; }

.home-k-fallback {
  z-index: 2;
  display: grid;
  place-items: center;
  transition: opacity .4s ease;
}

.home-k-stage.is-webgl .home-k-fallback { opacity: .12; }

.home-k-fallback img {
  width: min(480px, 87%);
  height: min(480px, 87%);
  object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.33));
  animation: k-float 6.2s ease-in-out infinite;
}

.home-k-stage.use-fallback .home-k-fallback img {
  animation: k-turn 7.4s ease-in-out infinite;
}

.home-particle {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  animation: signal-drift 5.6s ease-in-out infinite;
}

.home-particle-one { top: 22%; left: 17%; width: 10px; height: 10px; background: #9ae7cc; box-shadow: 0 0 0 7px rgba(154,231,204,.12); }
.home-particle-two { top: 34%; right: 13%; width: 7px; height: 7px; background: #bca8ff; animation-delay: -2.2s; }
.home-particle-three { bottom: 19%; left: 18%; width: 13px; height: 13px; background: #af95ff; animation-delay: -3.6s; }
.home-particle-four { bottom: 30%; right: 26%; width: 5px; height: 5px; background: #fff; animation-delay: -4.4s; }

.home-stage-label {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 24px;
  color: rgba(255,255,255,.62);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .10em;
}

.home-system-map,
.home-roles,
.home-course-rail { margin-top: 110px; }

.home-section-lead {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  max-width: 890px;
  margin-bottom: 38px;
}

.home-section-lead > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #3d3149;
  border-radius: 50%;
  background: #292133;
  color: #bcefd9;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.home-section-lead h2 {
  max-width: 780px;
  margin: 0;
  color: var(--plum);
  font-size: 46px;
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: 0;
}

.system-map-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  min-height: 265px;
  padding: 28px;
  overflow: hidden;
  border-top: 1px solid #43344e;
  border-bottom: 1px solid #43344e;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.system-map-path {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 9%;
  right: 9%;
  border-top: 1px dashed rgba(182,168,255,.56);
}

.system-node,
.system-map-result {
  position: relative;
  z-index: 1;
  min-height: 136px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 7px;
  background: rgba(41,33,51,.95);
  color: #fff;
  box-shadow: 6px 6px 0 rgba(115,83,216,.17);
}

.system-node {
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.system-node:hover {
  border-color: #9ae7cc;
  background: #30253a;
  transform: translateY(-3px);
}

.system-node span,
.system-map-result span {
  display: block;
  color: #bba9fb;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
}

.system-node strong,
.system-map-result strong {
  display: block;
  margin-top: 18px;
  font-size: 18px;
}

.system-node small {
  display: block;
  margin-top: 7px;
  color: #ccc4d7;
  font-size: 12px;
  line-height: 1.4;
}

.node-grader { margin-top: 38px; }
.node-school { margin-top: -18px; }

.system-map-result {
  border-color: #92ddc1;
  background: #e5f7ef;
  color: #203a31;
  box-shadow: 6px 6px 0 rgba(17,115,87,.20);
}

.system-map-result span { color: #087457; }

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

.home-role-card {
  position: relative;
  min-height: 265px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.home-role-card::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  right: -19px;
  top: -19px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .20;
}

.role-number {
  color: #8a7b9c;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-role-card h3 {
  margin: 46px 0 10px;
  color: var(--plum);
  font-size: 28px;
  font-weight: 750;
}

.home-role-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.home-role-card a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid currentColor;
  color: currentColor;
  font-size: 13px;
  font-weight: 700;
}

.home-role-card a span { font-size: 20px; line-height: 1; }
.role-student { color: #6046c5; }
.role-grader { color: #087457; }
.role-school { color: #3c6d97; }

.home-course-lead {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  max-width: none;
  align-items: end;
}

.home-course-lead .ghost-button { margin-bottom: 4px; }

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

.home-course-module {
  position: relative;
  min-height: 230px;
  display: block;
  overflow: hidden;
  padding: 21px;
  border: 1px solid #41334e;
  border-radius: 8px;
  background-color: #211b29;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #fff;
  box-shadow: 7px 7px 0 rgba(115,83,216,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-course-module:hover {
  border-color: #9ae7cc;
  box-shadow: 10px 10px 0 rgba(19,152,117,.17);
  transform: translate(-2px, -2px);
}

.home-course-id,
.home-course-kind {
  position: relative;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.home-course-id { color: #c7baff; }
.home-course-kind { float: right; color: #9ae7cc; }

.home-course-module strong {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 74%;
  margin-top: 61px;
  font-size: 24px;
  line-height: 1.1;
}

.home-course-module small {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 75%;
  margin-top: 9px;
  color: #d0c8dc;
  font-size: 12px;
  line-height: 1.42;
}

.home-course-module i {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 9px;
  color: #9b81ff;
  font-size: 142px;
  font-style: normal;
  font-weight: 750;
  line-height: .8;
  text-shadow: 7px 7px 0 rgba(19,152,117,.30);
}

.home-course-tone-1 i { color: #81ddc0; text-shadow: 7px 7px 0 rgba(115,83,216,.30); }
.home-course-tone-2 i { color: #9fb9ff; text-shadow: 7px 7px 0 rgba(19,152,117,.30); }

.home-course-empty {
  padding: 24px;
  border: 1px dashed #b9afc3;
  color: var(--muted);
}

.studio-hero {
  position: relative;
}

.studio-hero > div:first-child,
.page-header > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.studio-hero::after {
  order: 10;
  position: static;
  display: block;
  flex: 0 0 auto;
  width: auto;
  aspect-ratio: auto;
  opacity: 1;
  filter: none;
  padding: 8px 11px;
  border: 1px solid #ded4f0;
  border-radius: 7px;
  background: #f5f1ff;
  color: #5f46ad;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  white-space: pre;
}

@media (max-width: 1080px) {
  .studio-hero::after { display: none; }
}

.dashboard-hero::after { content: "ЗАНЯТИЕ  →  СДАЧА  →  ОТВЕТ"; }
.grader-hero::after { content: "ОЧЕРЕДЬ  →  РАЗБОР  →  ФИДБЕК"; }
.admin-hero::after { content: "КУРС  →  ЗАНЯТИЕ  →  ДОСТУП"; }
.analytics-hero::after { content: "ДАННЫЕ  →  СРЕЗ  →  РЕШЕНИЕ"; }
.lessons-hero::after { content: "КУРС  →  РАЗДЕЛ  →  ЗАНЯТИЕ"; }
.lesson-hero::after { content: "ЗАНЯТИЕ  →  ШАГИ  →  ДОМАШКА"; }
.achievements-hero::after { content: "ОГОНЁК  →  МОНЕТЫ  →  РЕЙТИНГ"; }
.profile-hero::after { content: "АВАТАР  →  ИМЯ  →  ВХОД"; }
.settings-hero::after { content: "КАНАЛЫ  →  СОБЫТИЯ  →  ПАРОЛЬ"; }
.submission-hero::after { content: "ФАЙЛ  →  ПРОВЕРКА  →  ДИАЛОГ"; }
.chat-hero::after { content: "ВОПРОС  →  ОТВЕТ  →  ЯСНОСТЬ"; }
.games-hero::after { content: "ИГРА  →  СЧЁТ  →  РЕЙТИНГ"; }
.lectures-hero::after { content: "КУРС  →  ЛЕКЦИЯ  →  ПРОСМОТР"; }
.lecture-detail-hero::after { content: "МАТЕРИАЛ  →  ВНИМАНИЕ  →  ЗНАНИЕ"; }
.media-hero::after { content: "ЗАЩИТА  →  ДОСТУП  →  МАТЕРИАЛ"; }
.regional-hero::after { content: "ЗАДАНИЕ  →  РЕШЕНИЕ  →  РЕЗУЛЬТАТ"; }

.page-header,
.catalog-hero,
.course-detail-hero {
  box-shadow: 0 14px 28px rgba(45,31,61,.06);
}

.page-header h1,
.auth-copy h1,
.catalog-hero h1,
.course-detail-copy h1 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.catalog-hero h1,
.course-detail-copy h1 {
  font-size: clamp(26px, 3.4vw, 38px);
}

.panel-heading h2,
.course-card h2,
.lecture-card h2,
.material-card h2 { font-weight: 750; }

.lessons-catalog-panel {
  display: grid;
  gap: 22px;
}

.lessons-catalog-heading {
  align-items: start;
}

.lesson-product-stack {
  display: grid;
  gap: 22px;
}

.lesson-product-section {
  min-width: 0;
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(20, 154, 120, .20);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(236,255,248,.72), rgba(255,255,255,.80) 42%),
    var(--paper-grid);
}

.lesson-product-head {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(45,31,61,.10);
}

.lesson-product-head > div {
  min-width: 0;
}

.lesson-product-head h2 {
  max-width: 100%;
  margin: 4px 0 6px;
  color: var(--plum);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.02;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.lesson-product-head p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.lesson-product-meter {
  min-width: 170px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.lesson-product-meter strong {
  color: var(--green-strong);
  font-size: 26px;
  line-height: 1;
}

.lesson-product-meter span,
.lesson-card-progress {
  position: relative;
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(123, 93, 246, .14);
}

.lesson-product-meter span::before,
.lesson-card-progress::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--progress-width, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--violet));
  transition: width .18s ease;
}

.lesson-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 14px;
}

.lesson-section-stack {
  display: grid;
  gap: 18px;
}

.lesson-section-band {
  display: grid;
  gap: 12px;
}

.lesson-section-band-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 0 2px;
}

.lesson-section-band-head h3 {
  margin: 2px 0 0;
  color: var(--plum);
  font-size: 24px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.lesson-progress-link {
  min-width: 0;
  min-height: 218px;
  position: relative;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  text-decoration: none;
}

.lesson-progress-link::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--mint), var(--violet));
}

.lesson-card-kicker,
.lesson-card-progress-meta {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.lesson-card-percent {
  flex: 0 0 auto;
  color: var(--violet);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
}

.lesson-progress-link > strong {
  max-width: 100%;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 31px);
  line-height: 1.04;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.lesson-progress-link > small,
.lesson-card-progress-meta,
.lesson-progress-link .lecture-course,
.lesson-progress-link .lecture-meta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.lesson-progress-link > small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.lesson-card-progress-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.lesson-progress-link .lecture-meta {
  justify-self: start;
  margin-top: auto;
  color: var(--violet);
}

.panel,
.auth-panel,
.course-card,
.lecture-card,
.material-card { box-shadow: 0 10px 20px rgba(45,31,61,.05); }

@keyframes home-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.26); opacity: .72; }
}

@keyframes k-turn {
  0%, 100% { transform: perspective(900px) rotateX(0deg) rotateY(-13deg) rotateZ(-2deg) translate3d(0, 0, 0); }
  50% { transform: perspective(900px) rotateX(7deg) rotateY(18deg) rotateZ(3deg) translate3d(-3px, -10px, 0); }
}

@media (max-width: 1080px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); padding-left: 32px; padding-right: 32px; }
  .home-hero h1 { font-size: 44px; }
  .home-section-lead h2 { font-size: 41px; }
  .system-map-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-map-path { display: none; }
  .node-grader, .node-school { margin-top: 0; }
}

@media (max-width: 980px) {
  .guest-actions { display: none; }
  .home-hero { margin-top: -22px; margin-left: calc(50% - 50vw); grid-template-columns: minmax(0, 1fr); min-height: 720px; padding: 72px 30px 38px; }
  .home-hero-copy { max-width: 680px; }
  .home-k-stage { min-height: 330px; margin-top: -12px; }
  .home-hero::before { background: rgba(33,27,41,.12); }
  .studio-hero { padding-right: 32px; }
  .studio-hero::after { display: none; }
}

@media (max-width: 720px) {
  .home-hero { margin: -22px 0 0 calc(50% - 50vw); padding: 56px 22px 26px; }
  .home-hero h1 { font-size: 34px; }
  .home-lead { font-size: 16px; }
  .home-metrics { gap: 10px 14px; margin-top: 28px; }
  .home-k-stage { min-height: 280px; }
  .home-section-lead { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; margin-bottom: 26px; }
  .home-section-lead > span { width: 28px; height: 28px; font-size: 9px; }
  .home-section-lead h2 { font-size: 34px; }
  .home-system-map, .home-roles, .home-course-rail { margin-top: 72px; }
  .system-map-board { grid-template-columns: 1fr; min-height: 0; padding: 18px; }
  .system-node, .system-map-result { min-height: 112px; }
  .system-node strong, .system-map-result strong { margin-top: 12px; }
  .home-role-grid, .home-course-grid { grid-template-columns: 1fr; }
  .home-role-card { min-height: 215px; }
  .home-role-card h3 { margin-top: 32px; }
  .home-course-lead { grid-template-columns: 34px minmax(0, 1fr); }
  .home-course-lead .ghost-button { grid-column: 2; justify-self: start; margin-top: 4px; }
  .home-course-module { min-height: 205px; }

  .lesson-product-head {
    align-items: start;
    flex-direction: column;
  }

  .lesson-product-meter {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .lesson-product-meter strong {
    justify-self: start;
  }
}

.lesson-route-shell {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lesson-route-shell,
.lesson-route-shell > *,
.lesson-track,
.lesson-step-card,
.lesson-step-card > *,
.lesson-progress-card {
  min-width: 0;
}

.lesson-progress-card {
  position: sticky;
  top: 92px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
}

.lesson-progress-card strong {
  display: block;
  font-size: clamp(48px, 7vw, 74px);
  line-height: .9;
  color: var(--ink);
  letter-spacing: 0;
  margin: 8px 0 14px;
}

.lesson-progress-card small,
.lesson-progress-card p {
  color: var(--muted);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.lesson-progress-card p {
  margin: 18px 0 0;
}

.lesson-term-card {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.lesson-term-card span {
  min-width: 0;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,.72);
}

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

.lesson-term-card strong {
  color: var(--plum);
  font-size: 13px;
  font-weight: 750;
}

.lesson-term-card small {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 800;
}

.ksigcoin-mini {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(15, 163, 119, .26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(226,247,238,.92), rgba(242,255,247,.86)),
    var(--paper-grid);
}

.ksigcoin-mini strong {
  margin: 0;
  color: var(--green-strong);
  font-size: 24px;
  line-height: 1.05;
}

.ksigcoin-mini small,
.ksigcoin-wallet p,
.ksigcoin-wallet small,
.ksigcoin-pill small {
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ksigcoin-mini .is-visible,
.ksigcoin-wallet .is-visible {
  color: #0b8d6b;
}

.lesson-progress-bar {
  height: 10px;
  border: 1px solid rgba(45,31,61,.14);
  background: rgba(123, 93, 246, .12);
  overflow: hidden;
  border-radius: 999px;
}

.lesson-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--mint), var(--violet));
  transition: width .25s ease;
}

.lesson-track {
  display: grid;
  gap: 18px;
}

.lesson-step-card {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-soft);
}

.lesson-step-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 12px 0 0 12px;
  background: var(--violet);
  opacity: .5;
}

.lesson-step-card.is-done {
  border-color: rgba(11, 151, 116, .3);
}

.lesson-step-card.is-done::before {
  background: var(--green);
  opacity: .6;
}

.lesson-step-card.is-locked {
  border-color: var(--line);
  background: rgba(250, 249, 253, .92);
}

.lesson-step-card.is-locked::before {
  background: var(--line-strong);
  opacity: 1;
}

.locked-content-card {
  display: grid;
  gap: 6px;
  max-width: 680px;
  padding: 14px 16px;
  border: 1px dashed rgba(45,31,61,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
}

.locked-content-card strong {
  color: var(--plum);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.locked-content-card small {
  color: var(--muted);
  font-weight: 700;
}

.live-lesson-card {
  border-color: rgba(20,154,120,.26);
  background:
    linear-gradient(135deg, rgba(234,255,246,.95), rgba(255,255,255,.9)),
    var(--paper-grid);
}

.lesson-step-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.lesson-step-head > div {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.lesson-step-index {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
  color: var(--violet);
}

.lesson-step-card h2 {
  margin: 16px 0 12px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: .98;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.lesson-step-copy {
  max-width: 780px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 750;
  margin-bottom: 18px;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.transcript-copy-shell {
  max-width: 100%;
  margin-top: 18px;
}

.lesson-transcript {
  display: grid;
  gap: 9px;
  max-width: 980px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.lesson-transcript-intro {
  padding: 12px 14px;
  border: 1px solid #d9d0e5;
  border-radius: 8px;
  background: #fbfaff;
}

.lesson-transcript-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #ded6ea;
  border-radius: 8px;
  background: #fff;
}

.transcript-time {
  min-height: 40px;
  padding: 8px 9px;
  border: 1px solid #d8cff1;
  border-radius: 7px;
  background: var(--purple-soft);
  color: var(--purple-strong);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.transcript-time:hover,
.transcript-time.is-active {
  border-color: #a9dfcb;
  background: var(--green-soft);
  color: var(--green-strong);
}

.transcript-time.is-missing-video {
  border-color: #efb2c1;
  background: var(--danger-soft);
  color: var(--danger);
}

.transcript-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.transcript-copy strong {
  color: var(--plum);
  font-size: 17px;
  line-height: 1.25;
}

.transcript-copy p,
.lesson-transcript-intro p {
  margin: 0;
}

.lesson-step-file,
.lesson-step-file strong,
.lesson-step-file small,
.lesson-item-admin,
.lesson-item-admin summary,
.lesson-item-admin input,
.lesson-item-admin textarea {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.lesson-step-image figcaption,
.error-text,
.empty {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.lesson-step-check label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 750;
  white-space: nowrap;
}

.lesson-step-check.is-locked label {
  cursor: default;
  color: var(--muted);
}

.lesson-step-check input {
  width: 22px;
  height: 22px;
  accent-color: var(--mint);
}

.lesson-step-check input:disabled {
  opacity: 0.72;
}

.lesson-progress-submit {
  display: none;
}

.quiz-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(123, 93, 246, .2);
  border-radius: 8px;
  background: rgba(123, 93, 246, .1);
  color: var(--violet);
  font-weight: 750;
}

.quiz-status.is-correct,
.quiz-feedback.is-correct {
  border-color: rgba(11, 151, 116, .26);
  background: rgba(11, 151, 116, .1);
  color: #08775b;
}

.lesson-quiz-card {
  display: grid;
  gap: 14px;
  max-width: 760px;
  margin-top: 12px;
}

.lesson-quiz-question {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 880;
  overflow-wrap: anywhere;
}

.quiz-image {
  margin-top: 0;
}

.lesson-quiz-form,
.quiz-options,
.quiz-builder-grid {
  display: grid;
  gap: 12px;
}

.quiz-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  font-weight: 700;
}

.quiz-feedback {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 163, 119, .32);
  border-radius: 8px;
  background: rgba(226,247,238,.85);
  color: var(--green-strong);
  font-weight: 750;
}

.quiz-feedback.is-wrong {
  border-color: rgba(205, 60, 74, .24);
  background: rgba(255, 238, 240, .88);
  color: #9d2433;
}

.quiz-builder-fields {
  border: 1px dashed rgba(123, 93, 246, .28);
  border-radius: 8px;
  padding: 12px;
  background: rgba(250,247,255,.56);
}

.quiz-builder-fields summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--ink);
}

.quiz-builder-grid {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quiz-builder-grid .wide-field {
  grid-column: 1 / -1;
}

.lesson-step-file {
  max-width: 520px;
  margin-top: 14px;
}

.lesson-step-image {
  margin: 18px 0 0;
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.lesson-step-image img {
  display: block;
  width: 100%;
  max-height: 820px;
  object-fit: contain;
  background: #fff;
}

.lesson-step-image figcaption {
  border-top: 1px solid rgba(45,31,61,.12);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.lesson-item-admin {
  margin-top: 18px;
  border-top: 1px dashed rgba(45,31,61,.18);
  padding-top: 14px;
}

.lesson-item-admin summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--violet);
}

.lesson-item-admin form,
.lesson-builder-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.lesson-item-admin .wide-field,
.lesson-builder-form .wide-field {
  grid-column: 1 / -1;
}

.latex-material-panel,
.ai-notes-panel,
.latex-admin-panel {
  border-top: 5px solid var(--mint);
}

.latex-material-panel {
  gap: 18px;
}

.latex-material {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,255,252,.88)),
    var(--paper-grid);
}

.latex-material h2 {
  margin: 0 0 12px;
  color: var(--plum);
  font-size: 24px;
  line-height: 1.12;
}

.latex-inline {
  display: grid;
  gap: 10px;
  color: var(--plum);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.latex-inline p,
.latex-inline ul,
.latex-inline ol {
  margin: 0;
}

.latex-inline ul,
.latex-inline ol {
  padding-left: 22px;
}

.latex-section-title,
.latex-subsection-title {
  margin: 2px 0 0;
  color: var(--plum);
  line-height: 1.15;
}

.latex-section-title {
  font-size: 26px;
}

.latex-subsection-title {
  font-size: 20px;
}

.latex-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(187,76,103,.24);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.content-report-drawer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(45,31,61,.18);
}

.content-report-drawer summary {
  cursor: pointer;
  color: var(--violet);
  font-weight: 750;
}

.content-report-drawer form {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin-top: 10px;
}

.ai-notes-panel .list-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.ai-notes-panel .row-actions {
  justify-content: flex-end;
}

.lesson-builder-panel {
  border-top: 5px solid var(--mint);
}

.task-upload-panel,
.solution-admin-drawer {
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.72);
}

.task-upload-panel summary,
.solution-admin-drawer summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--plum);
}

.task-upload-grid {
  display: grid;
  grid-template-columns: minmax(72px, .18fr) minmax(220px, 1fr);
  gap: 10px;
  margin-top: 12px;
  align-items: end;
}

.compact-file-drop {
  min-height: 72px;
  padding: 12px;
}

.problem-solutions-panel,
.course-rating-panel,
.task-ledger-panel {
  border-top: 5px solid var(--mint);
}

.solution-admin-form {
  display: grid;
  grid-template-columns: minmax(90px, .5fr) minmax(180px, 1fr) minmax(120px, .5fr);
  gap: 12px;
  align-items: end;
}

.solution-admin-form .wide-field {
  grid-column: 1 / -1;
}

.solution-ai-form {
  border-top: 1px dashed rgba(45,31,61,.14);
  padding-top: 12px;
}

.compile-log-grid {
  display: grid;
  gap: 10px;
}

.compile-log-drawer {
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
}

.compile-log-drawer summary {
  cursor: pointer;
  color: var(--plum);
  font-weight: 750;
}

.compile-log-drawer pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 10px 0 0;
  font: 700 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
}

.solution-ledger,
.task-ledger {
  display: grid;
  gap: 12px;
}

.solution-row,
.task-card {
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  padding: 14px;
  min-width: 0;
}

.solution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.solution-row > div,
.task-card > * {
  min-width: 0;
}

.solution-row strong,
.solution-row small {
  display: block;
  overflow-wrap: anywhere;
}

.solution-body {
  grid-column: 1 / -1;
  border-left: 3px solid rgba(123,93,246,.42);
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.task-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(45,31,61,.1);
}

.task-card-head strong,
.task-card-head small {
  display: block;
  overflow-wrap: anywhere;
}

.resubmit-dialog,
.submit-hw-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
  overflow: auto;
  border: 0;
}

.submit-hw-dialog {
  width: min(760px, calc(100vw - 24px));
  max-height: min(820px, calc(100vh - 24px));
  padding: 0;
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(30,20,42,.24);
}

.submit-hw-head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.98);
}

.submit-hw-head h2 {
  margin: 4px 0 6px;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0;
}

.submit-hw-head p:last-child {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.dialog-close-button,
.homework-task-remove {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.dialog-close-button:hover,
.homework-task-remove:hover {
  border-color: rgba(180,58,83,.36);
  background: var(--danger-soft);
  color: var(--danger);
}

.homework-submit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 22px 24px 0;
}

.submit-hw-section {
  display: grid;
  gap: 12px;
}

.submit-hw-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.submit-hw-section-head > div {
  display: grid;
  gap: 3px;
}

.submit-hw-section-head strong {
  color: var(--plum);
  font-size: 16px;
}

.submit-hw-section-head small {
  color: var(--muted);
  font-weight: 700;
}

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

.homework-task-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 36px;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfaff;
}

.homework-task-row.has-file {
  border-color: rgba(11,151,116,.34);
  background: rgba(239,252,247,.92);
}

.homework-task-number {
  align-content: center;
}

.homework-task-number span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.homework-task-number input {
  min-height: 44px;
  text-align: center;
  font: 800 16px/1 var(--mono);
}

.homework-file-picker {
  position: relative;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px dashed rgba(108,78,190,.34);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.homework-file-picker:has(input:focus-visible) {
  outline: 3px solid rgba(112,82,214,.42);
  outline-offset: 2px;
}

.homework-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.homework-file-title {
  color: var(--purple-strong);
  font-size: 14px;
  font-weight: 850;
}

.homework-file-picker small {
  overflow: hidden;
  color: var(--muted);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homework-task-row.has-file .homework-file-title {
  color: var(--green-strong);
}

.homework-task-remove {
  align-self: center;
}

.homework-submit-form .check-mode-field {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.homework-submit-form .check-mode-field legend {
  grid-column: 1 / -1;
}

.homework-submit-form .check-mode-card:has(input:checked) {
  border-color: rgba(11,151,116,.42);
  background: rgba(239,252,247,.92);
  box-shadow: 0 0 0 2px rgba(11,151,116,.08);
}

.submit-hw-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(180,58,83,.24);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 750;
}

.submit-hw-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 -24px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.98);
}

.submit-hw-footer span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.resubmit-dialog::backdrop,
.submit-hw-dialog::backdrop {
  background: rgba(25, 20, 35, .45);
}

.homework-block .submission-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.grader-scope-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: -8px 0 22px;
  color: var(--muted);
}

.grader-scope-strip > strong {
  flex: 0 0 auto;
  color: var(--plum);
}

.grader-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 28px;
}

.grader-queues,
.grader-side-rail,
.grader-queue-section {
  display: grid;
  gap: 18px;
}

.grader-queues {
  gap: 34px;
}

.grader-side-rail {
  position: sticky;
  top: 88px;
}

.grader-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.grader-section-head h2 {
  margin: 3px 0 0;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: 0;
}

.grader-section-head.compact-head {
  align-items: center;
}

.grader-section-head.compact-head h2 {
  margin: 0;
  font-size: 19px;
}

.grader-ticket-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.grader-ticket {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.grader-ticket.is-assigned {
  border-left-color: var(--green);
}

.grader-ticket.has-new-message {
  box-shadow: 0 0 0 2px rgba(123,93,246,.12), var(--shadow-soft);
}

.grader-ticket-head,
.grader-ticket-title,
.grader-ticket-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.grader-ticket-head time,
.grader-ticket-title > span {
  color: var(--muted);
  font: 700 11px/1.3 var(--mono);
}

.grader-ticket-title {
  align-items: flex-start;
}

.grader-ticket-title h3 {
  min-width: 0;
  margin: 0;
  font-size: 19px;
  line-height: 1.18;
}

.grader-ticket-title h3 a {
  color: var(--plum);
  text-decoration: none;
}

.grader-ticket-title h3 a:hover {
  color: var(--purple-strong);
}

.grader-ticket > p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.grader-ticket-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.grader-ticket-meta div {
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(45,31,61,.09);
  border-radius: 6px;
  background: #fbfaff;
}

.grader-ticket-meta dt,
.grader-ticket-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.grader-ticket-meta dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.grader-ticket-meta dd {
  margin-top: 3px;
  color: var(--plum);
  font-size: 14px;
  font-weight: 900;
}

.grader-ticket-actions {
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 2px;
}

.grader-ticket-actions form {
  margin-left: auto;
}

.grader-new-message {
  color: var(--purple-strong);
  font-size: 12px;
  font-weight: 850;
}

.grader-empty-state {
  margin: 0;
  padding: 24px;
  border: 1px dashed rgba(45,31,61,.18);
  border-radius: 8px;
  background: rgba(255,255,255,.68);
  color: var(--muted);
  text-align: center;
  font-weight: 750;
}

.grader-side-block {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.grader-earnings-panel {
  border-top: 4px solid var(--green);
}

.grader-earnings-total {
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.grader-earnings-panel > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.grader-earning-list,
.grader-student-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.grader-earning-list > div,
.grader-student-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(45,31,61,.08);
}

.grader-earning-list span,
.grader-student-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.grader-student-list a {
  color: inherit;
  text-decoration: none;
}

.grader-student-list a > span:first-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.grader-student-list a > span:last-child {
  color: var(--purple-strong);
  font-size: 12px;
  font-weight: 850;
}

.task-thread {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.task-chat-form,
.task-answer-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .35fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.task-answer-form {
  grid-template-columns: minmax(0, 1fr) minmax(140px, .24fr) auto;
  padding-top: 12px;
  border-top: 1px solid rgba(45,31,61,.1);
}

.builder-required-row {
  align-self: end;
}

.builder-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(123, 93, 246, .25);
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(233,255,246,.82)),
    var(--paper-grid);
  box-shadow: var(--shadow-soft);
}

.builder-cta h3 {
  margin: 6px 0 8px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0;
}

.builder-cta p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.45;
}

.admin-stats-grid .stat:first-child {
  grid-column: span 2;
}

.admin-stats-grid .stat:first-child strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.admin-course-switcher {
  border-top: 5px solid var(--mint);
}

.admin-course-filter {
  align-items: end;
}

.admin-scope-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.admin-scope-map a {
  min-width: 0;
  border: 1px solid rgba(123, 93, 246, .20);
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,239,255,.82)),
    var(--paper-grid);
  color: var(--plum);
  font-weight: 750;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.admin-scope-map a:hover {
  border-color: rgba(20, 154, 120, .38);
  box-shadow: 0 14px 24px rgba(45, 31, 61, .08);
  transform: translateY(-2px);
}

.admin-scope-map span {
  display: block;
  margin-bottom: 5px;
  color: var(--violet);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-workspace-grid,
.admin-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-module {
  min-width: 0;
}

.admin-module .panel-heading {
  align-items: start;
}

.admin-module .panel-heading .eyebrow,
.admin-course-switcher .panel-heading .eyebrow {
  margin-bottom: 4px;
}

.course-admin-row.is-selected {
  border-color: rgba(20, 154, 120, .45);
  background:
    linear-gradient(135deg, rgba(234,255,246,.92), rgba(255,255,255,.96)),
    var(--paper-grid);
}

.admin-create-card,
.admin-feed-card {
  min-width: 0;
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255,255,255,.78);
}

.admin-create-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.admin-create-card h3,
.admin-feed-card h3 {
  margin: 0 0 12px;
  color: var(--plum);
  font-size: 18px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.admin-feed-card .stack-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 3px;
}

.integration-token-result {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(20, 154, 120, .24);
  border-radius: 8px;
  padding: 12px;
  background: rgba(234,255,246,.72);
}

.integration-token-result code,
.integration-code {
  display: block;
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.86);
  color: var(--plum);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-person-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  scroll-margin-top: 92px;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.admin-person-card.is-return-target {
  border-color: rgba(20, 154, 120, .48);
  background-color: rgba(239, 252, 247, .96);
  box-shadow: 0 0 0 3px rgba(20, 154, 120, .10);
}

.admin-person-card .access-head,
.admin-person-card .access-head span,
.admin-person-card .access-head strong,
.admin-person-card .access-head small,
.admin-person-card .list-row,
.admin-person-card label,
.admin-person-card input,
.admin-person-card select,
.admin-person-card textarea,
.admin-module .list-row,
.admin-module .list-row span,
.admin-module .list-row strong,
.admin-module .list-row small,
.admin-module .check-row span,
.admin-create-card label,
.admin-feed-card,
.course-admin-main,
.course-admin-main span,
.course-admin-main strong,
.course-admin-main small {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.admin-person-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

.admin-person-grid .grader-assignment-box {
  grid-column: 1 / -1;
}

.admin-role-tools {
  border-top: 1px dashed rgba(45,31,61,.18);
  padding-top: 12px;
}

.admin-role-tools summary {
  cursor: pointer;
  color: var(--violet);
  font-weight: 750;
}

.admin-role-tools .role-form {
  margin-top: 12px;
}

.admin-person-card .student-name-form {
  grid-template-columns: 1fr;
}

.admin-person-card .student-name-form button {
  justify-self: start;
}

.teacher-hero {
  border-top: 5px solid var(--mint);
}

.teacher-mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(45,31,61,.12);
  border-top: 5px solid var(--violet);
  border-radius: 8px;
  padding: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(234,255,246,.78)),
    var(--paper-grid);
  box-shadow: var(--shadow-soft);
}

.teacher-mode-copy {
  min-width: 0;
}

.teacher-mode-copy h2 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: clamp(28px, 4vw, 48px);
  line-height: .98;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.teacher-mode-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.5;
}

.teacher-mode-toggle {
  display: grid;
  min-width: 0;
}

.teacher-mode-switch {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 132px;
  width: 100%;
  border: 1px solid rgba(123, 93, 246, .28);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(244,239,255,.94), rgba(255,255,255,.96)),
    var(--paper-grid);
  color: var(--plum);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(45,31,61,.08);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.teacher-mode-switch:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 154, 120, .42);
}

.teacher-mode-switch.is-on {
  border-color: rgba(20, 154, 120, .44);
  background:
    linear-gradient(135deg, rgba(234,255,246,.94), rgba(255,255,255,.98)),
    var(--paper-grid);
}

.teacher-mode-switch span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.teacher-mode-switch strong {
  font-size: 24px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.teacher-stats-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-mode-summary,
.teacher-check-grid {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(123, 93, 246, .18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255,255,255,.72);
}

.teacher-mode-summary.is-enabled {
  border-color: rgba(20, 154, 120, .34);
  background: rgba(234,255,246,.72);
}

.teacher-mode-summary strong,
.teacher-check-grid strong {
  color: var(--plum);
  font-size: 28px;
  line-height: 1;
}

.teacher-mode-summary small,
.teacher-check-grid small {
  color: var(--muted);
  font-weight: 760;
}

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

.teacher-check-grid span {
  min-width: 0;
}

.teacher-admin-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(123, 93, 246, .18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255,255,255,.72);
}

.teacher-admin-strip.is-enabled {
  border-color: rgba(20, 154, 120, .34);
  background: rgba(234,255,246,.72);
}

.teacher-admin-strip span {
  min-width: 0;
}

.teacher-admin-strip strong,
.teacher-admin-strip small {
  display: block;
  overflow-wrap: anywhere;
}

.teacher-admin-strip small {
  color: var(--muted);
  font-weight: 760;
}

.parent-hero {
  border-top: 5px solid var(--blue);
}

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

.parent-child-stack {
  display: grid;
  gap: 20px;
}

.parent-child-card {
  display: grid;
  gap: 18px;
}

.parent-child-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 18px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.parent-child-head h2 {
  margin: 4px 0 8px;
  color: var(--plum);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.parent-child-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.parent-child-kpis,
.parent-attendance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.parent-child-kpis span,
.parent-attendance-grid span,
.parent-digest-points span {
  min-width: 0;
  border: 1px solid rgba(78, 150, 189, .22);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(232,244,251,.82), rgba(255,255,255,.94)),
    var(--paper-grid);
}

.parent-child-kpis strong,
.parent-attendance-grid strong {
  display: block;
  color: var(--plum);
  font-size: 28px;
  line-height: 1;
}

.parent-child-kpis small,
.parent-attendance-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-weight: 780;
  line-height: 1.25;
}

.parent-digest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  gap: 18px;
  align-items: stretch;
  border: 1px solid rgba(20, 154, 120, .23);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(234,255,246,.86), rgba(255,255,255,.96)),
    var(--paper-grid);
}

.parent-digest h3 {
  margin: 6px 0 8px;
  color: var(--plum);
  font-size: 22px;
  line-height: 1.1;
}

.parent-digest p {
  margin: 0 0 8px;
  color: var(--text);
  font-weight: 760;
  line-height: 1.55;
}

.parent-digest small {
  color: var(--muted);
  font-weight: 780;
}

.parent-digest-points {
  display: grid;
  gap: 10px;
  align-content: start;
}

.parent-digest-points span {
  border-color: rgba(20, 154, 120, .22);
  background: rgba(255,255,255,.72);
  color: var(--green-strong);
  font-weight: 750;
}

.parent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 18px;
}

.parent-embedded-panel {
  min-width: 0;
}

.parent-embedded-panel .panel-heading {
  margin-bottom: 12px;
}

.parent-progress-row > span:first-child {
  display: grid;
  gap: 7px;
}

.parent-progress-meter {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(45,31,61,.09);
}

.parent-progress-meter::before {
  content: "";
  display: block;
  width: var(--progress-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.parent-policy-list {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.parent-policy-list span {
  border: 1px solid rgba(78, 150, 189, .20);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(232,244,251,.66);
  color: var(--plum);
  font-weight: 700;
}

.parent-table-wrap {
  margin-top: 0;
}

@media (max-width: 760px) {
  .admin-stats-grid .stat:first-child { grid-column: 1 / -1; }
  .admin-scope-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-workspace-grid,
  .admin-section-grid,
  .admin-role-list,
  .admin-person-grid { grid-template-columns: 1fr; }
  .admin-feed-card .stack-list { max-height: none; }
  .admin-course-filter { align-items: stretch; }
  .teacher-mode-panel,
  .teacher-stats-grid,
  .teacher-check-grid,
  .parent-stats-grid,
  .parent-child-head,
  .parent-child-kpis,
  .parent-digest,
  .parent-grid,
  .parent-attendance-grid { grid-template-columns: 1fr; }
  .teacher-admin-strip { align-items: flex-start; flex-direction: column; }
}

.builder-hero p {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--muted);
  font-weight: 760;
  line-height: 1.5;
}

.lesson-builder-shell {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.builder-course-nav,
.builder-workbench,
.builder-existing {
  border-top: 5px solid var(--mint);
}

.builder-course-nav {
  position: sticky;
  top: 92px;
  border: 1px solid rgba(45,31,61,.14);
  border-top: 5px solid var(--mint);
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,255,.88)),
    var(--paper-grid);
  box-shadow: var(--shadow-soft);
}

.builder-course-nav h2,
.builder-workbench h2,
.builder-stack h3 {
  margin: 6px 0 14px;
  letter-spacing: 0;
}

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

.builder-course-list a {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 7px;
  background: rgba(255,255,255,.74);
  color: var(--text);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.builder-course-list a:hover,
.builder-course-list a.is-active {
  transform: translateY(-2px);
  border-color: rgba(123, 93, 246, .42);
  background: linear-gradient(135deg, rgba(238,233,255,.92), rgba(228,247,238,.78));
  box-shadow: 6px 6px 0 rgba(123, 93, 246, .12);
}

.builder-course-list small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
}

.builder-workbench {
  border: 1px solid rgba(45,31,61,.14);
  border-top: 5px solid var(--violet);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.88)),
    var(--paper-grid);
  box-shadow: var(--shadow);
}

.builder-workbench-head,
.builder-submit-row,
.submission-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.submission-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-map-list,
.skill-map-lessons {
  display: grid;
  gap: 12px;
}

.skill-map-card,
.skill-map-lesson,
.skill-problem-row {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.skill-map-card.is-child {
  margin-left: 18px;
}

.skill-map-card-head,
.skill-problem-row,
.skill-problem-actions,
.skill-problem-edit {
  display: grid;
  gap: 10px;
}

.skill-map-card-head {
  grid-template-columns: 1fr auto;
  align-items: start;
}

.skill-problem-row {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
}

.skill-problem-edit {
  grid-template-columns: minmax(0, 1fr) 86px;
}

.skill-problem-edit .compact {
  grid-column: 1 / -1;
}

.skill-class-heatmap details summary {
  cursor: pointer;
  font-weight: 750;
  color: var(--plum);
}

.skill-class-heatmap tr.is-empty {
  color: var(--muted);
  background: rgba(45,31,61,.035);
}

.skill-student-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.skill-student-list span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(45,31,61,.08);
}

.skill-student-list small {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.compact-heading {
  gap: 10px;
}

.builder-entity-map,
.course-section-form,
.builder-delivery-grid {
  display: grid;
  gap: 12px;
}

.builder-entity-map {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin: 18px 0;
}

.builder-entity-map span,
.delivery-card {
  min-width: 0;
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,233,255,.72)),
    var(--paper-grid);
}

.builder-entity-map strong,
.builder-entity-map small,
.delivery-card strong,
.delivery-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.builder-entity-map strong,
.delivery-card strong {
  color: var(--plum);
  font-weight: 750;
}

.builder-entity-map small,
.delivery-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.builder-entity-map i {
  width: 26px;
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, var(--mint), var(--violet));
}

.course-section-form {
  grid-template-columns: minmax(180px, 1.1fr) minmax(110px, .5fr) minmax(180px, .9fr);
  align-items: end;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid rgba(20,154,120,.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(234,255,246,.82), rgba(255,255,255,.92)),
    var(--paper-grid);
}

.course-section-form .wide-field {
  grid-column: 1 / -2;
}

.pair-builder-form {
  display: grid;
  gap: 22px;
}

.builder-core-grid,
.builder-count-grid,
.builder-dynamic-grid,
.builder-delivery-grid {
  display: grid;
  gap: 14px;
}

.builder-core-grid {
  grid-template-columns: minmax(170px, .7fr) minmax(120px, .45fr) minmax(0, 1fr);
}

.builder-core-grid .wide-field {
  grid-column: 1 / -1;
}

.builder-delivery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(190px, .8fr) minmax(220px, 1fr);
}

.delivery-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.delivery-card input {
  width: auto;
  margin-top: 4px;
}

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

.builder-count-grid label {
  background: rgba(238,233,255,.45);
}

.builder-system-map {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px dashed rgba(45,31,61,.24);
  border-radius: 8px;
  background: rgba(247,245,251,.76);
}

.builder-system-map span {
  padding: 8px 10px;
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 6px;
  background: #fff;
  color: var(--plum);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.builder-system-map i {
  height: 1px;
  background: linear-gradient(90deg, var(--mint), var(--violet));
}

.builder-dynamic-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.builder-stack {
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255,255,255,.78);
}

.builder-stack.wide-stack {
  grid-column: 1 / -1;
}

.builder-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(45,31,61,.1);
  margin-bottom: 12px;
}

.builder-stack-head h3 {
  font-size: 24px;
}

.builder-block {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,255,249,.68)),
    var(--paper-grid);
}

.builder-block-number {
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(123, 93, 246, .52);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
}

.builder-block .wide-field {
  grid-column: 1 / -1;
}

.builder-block label,
.builder-core-grid label,
.builder-count-grid label {
  min-width: 0;
}

.file-field input {
  padding: 14px;
  background: #fff;
}

.builder-submit-row {
  padding-top: 6px;
}

.builder-submit-row p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-weight: 780;
  line-height: 1.45;
}

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

.builder-section-list {
  display: grid;
  gap: 16px;
}

.builder-section-card {
  border: 1px solid rgba(45,31,61,.13);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255,255,255,.7);
}

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

.builder-section-head h3 {
  margin: 3px 0 0;
  color: var(--plum);
  font-size: 24px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.builder-lesson-list article {
  border: 1px solid rgba(45,31,61,.14);
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,247,255,.82)),
    var(--paper-grid);
}

.builder-lesson-list h3 {
  margin: 8px 0;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0;
}

.builder-lesson-list p {
  color: var(--muted);
  font-weight: 700;
}

.streak-banner,
.lesson-streak-mini {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.daily-question-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.daily-question-card h2 {
  margin: 6px 0;
  color: var(--plum);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}

.daily-question-card p,
.daily-question-card small {
  color: var(--muted);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.daily-question-card form {
  display: grid;
  gap: 10px;
}

.course-billing-strip {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(180px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(115,83,216,.18);
  border-radius: 8px;
  background: rgba(248,246,255,.74);
}

.lesson-deadline-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(45,31,61,.10);
}

.ksigcoin-wallet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.ksigcoin-wallet h2 {
  margin: 6px 0;
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.ksigcoin-store-panel {
  margin-bottom: 22px;
}

.today-panel,
.course-map-panel,
.grader-filter-panel,
.grader-earnings-panel {
  margin-bottom: 22px;
}

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

.today-grid article,
.course-map-course {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
}

.today-grid article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 126px;
}

.today-grid strong {
  color: var(--plum);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.today-grid small,
.course-map-head small,
.course-map-lesson small {
  color: var(--muted);
  font-weight: 820;
  line-height: 1.35;
}

.course-map-list {
  display: grid;
  gap: 14px;
}

.course-map-course {
  display: grid;
  gap: 14px;
}

.course-map-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 260px);
  align-items: center;
  gap: 14px;
}

.course-map-head strong,
.course-map-section h3,
.course-map-lesson strong {
  color: var(--plum);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.course-map-head strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.course-map-section {
  display: grid;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(45,31,61,.10);
}

.course-map-section h3 {
  margin: 0;
  font-size: 15px;
}

.course-map-section h3 small {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

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

.course-map-lesson {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(45,31,61,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  color: inherit;
  text-decoration: none;
}

.course-map-lesson:is(:hover, :focus-visible) {
  border-color: rgba(25,149,116,.42);
  box-shadow: 0 10px 22px rgba(45,31,61,.08);
  transform: translateY(-1px);
}

.course-map-lesson.is-done {
  background: rgba(238,255,247,.86);
}

.course-map-lesson.is-stuck {
  background: rgba(255,247,214,.82);
}

.course-map-lesson.is-locked {
  background: rgba(248,246,252,.92);
  color: rgba(45,31,61,.72);
}

.course-map-lesson > span:first-child {
  min-width: 0;
}

.course-map-lesson .status,
.course-map-lesson .badge {
  flex: 0 0 auto;
}

.grader-filter-panel .analytics-filter-form {
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto;
  align-items: end;
}

.grader-filter-panel button {
  min-height: 52px;
}

.grader-stats-grid .stat-card {
  min-height: 94px;
  padding: 14px 16px;
}

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

.store-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
}

.store-card h3,
.store-history h3 {
  margin: 0;
  color: var(--plum);
  font-size: 17px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.store-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.store-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid rgba(45,31,61,.12);
}

.store-card-foot strong {
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.store-card-foot small {
  color: var(--muted);
  font-weight: 750;
}

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

.ksigcoin-pill {
  flex: 0 0 auto;
  min-width: 178px;
  display: grid;
  gap: 3px;
  justify-items: end;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
}

.ksigcoin-pill span:first-child {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.ksigcoin-pill strong {
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.streak-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
  padding: 20px 22px;
}

.streak-banner h2 {
  margin: 6px 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.streak-banner p,
.lesson-streak-mini small {
  color: var(--muted);
  font-weight: 500;
}

.lesson-streak-mini {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 14px;
}

.lesson-streak-mini strong {
  margin: 0;
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 920px) {
  .lesson-route-shell {
    grid-template-columns: 1fr;
  }

  .lesson-progress-card {
    position: static;
  }

  .lesson-builder-shell,
  .builder-dynamic-grid,
  .builder-lesson-list,
  .builder-delivery-grid,
  .course-section-form,
  .course-billing-strip,
  .today-grid,
  .grader-workbench,
  .course-map-lessons {
    grid-template-columns: 1fr;
  }

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

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

  .builder-course-nav {
    position: static;
  }

  .grader-side-rail {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grader-filter-panel .analytics-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grader-filter-panel .analytics-filter-form button {
    width: 100%;
  }

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

@media (max-width: 640px) {
  .lesson-step-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-step-check label {
    white-space: normal;
  }

  .lesson-item-admin form,
  .lesson-builder-form,
  .quiz-builder-grid,
  .grader-ticket-list,
  .grader-side-rail {
    grid-template-columns: 1fr;
  }

  .lesson-step-card h2 {
    font-size: 30px;
  }

  .builder-cta,
  .builder-workbench-head,
  .builder-submit-row {
    grid-template-columns: 1fr;
    display: grid;
    justify-items: start;
  }

  .builder-core-grid,
  .builder-count-grid,
  .builder-system-map,
  .builder-entity-map,
  .builder-delivery-grid,
  .course-section-form {
    grid-template-columns: 1fr;
  }

  .builder-system-map i,
  .builder-entity-map i {
    width: 1px;
    min-height: 16px;
    justify-self: start;
    background: linear-gradient(180deg, var(--mint), var(--violet));
  }

  .streak-banner,
  .daily-question-card,
  .ksigcoin-wallet,
  .search-form {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .daily-question-card h2 {
    font-size: 28px;
  }

  .submit-hw-head {
    padding: 18px 16px 14px;
  }

  .submit-hw-head h2 {
    font-size: 24px;
  }

  .homework-submit-form {
    gap: 16px;
    padding: 16px 16px 0;
  }

  .homework-task-row {
    grid-template-columns: 86px minmax(0, 1fr) 36px;
  }

  .homework-submit-form .check-mode-field {
    grid-template-columns: 1fr;
  }

  .submit-hw-footer {
    grid-template-columns: 1fr;
    margin: 0 -16px;
    padding: 14px 16px;
  }

  .submit-hw-footer .primary-button {
    width: 100%;
  }

  .grader-scope-strip,
  .submit-hw-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .grader-ticket-actions form,
  .grader-ticket-actions .primary-button {
    width: 100%;
    margin-left: 0;
  }

  .grader-filter-panel .analytics-filter-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
  }

  body {
    background-size: 30px 30px;
    -webkit-text-size-adjust: 100%;
  }

  .ksigcoin-pill {
    width: 100%;
    min-width: 0;
    justify-items: start;
  }

  .course-badge-upload,
  .course-badge-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .certificate-row,
  .billing-status-strip,
  .certificate-meta {
    grid-template-columns: 1fr;
  }

  .task-upload-grid,
  .solution-admin-form,
  .solution-row,
  .task-card-head,
  .task-chat-form,
  .task-answer-form {
    grid-template-columns: 1fr;
  }

  .task-card-head .row-actions,
  .solution-row .row-actions {
    justify-items: stretch;
  }

  .course-badge-upload img,
  .course-badge-preview,
  .course-badge-card img {
    width: 58px;
    height: 58px;
  }

  .course-detail-badge {
    width: 82px;
    height: 82px;
  }

  .certificate-shell {
    min-height: 0;
    padding: 26px 20px;
    box-shadow: 7px 7px 0 rgba(19,152,117,.16);
  }

  .certificate-shell::before {
    inset: 12px;
  }

  .certificate-mark {
    right: 14px;
    bottom: 12px;
    font-size: 140px;
  }

  .topbar {
    min-height: 58px;
    padding: 8px max(10px, env(safe-area-inset-left)) 8px max(10px, env(safe-area-inset-right));
    gap: 10px;
    background: rgba(247, 245, 251, .96);
    backdrop-filter: blur(16px) saturate(1.08);
  }

  .mobile-wallet {
    width: 100%;
    justify-content: space-between;
    margin: 8px 0 10px;
  }

  .brand {
    min-width: 0;
    max-width: calc(100vw - 82px);
    gap: 8px;
    font-size: 17px;
  }

  .brand > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .mobile-menu {
    flex: 0 0 auto;
  }

  .mobile-menu-button {
    width: 44px;
    height: 44px;
    box-shadow: 4px 4px 0 rgba(123, 93, 246, .12);
  }

  .mobile-menu-panel {
    position: fixed;
    top: 66px;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100dvh - 82px);
    overflow: auto;
    padding: 10px;
    z-index: 30;
  }

  .mobile-account {
    overflow-wrap: anywhere;
  }

  .mobile-nav {
    gap: 7px;
  }

  .mobile-nav a,
  .mobile-logout {
    min-height: 48px;
    border-color: rgba(45,31,61,.10);
    background: rgba(255,255,255,.74);
    font-size: 15px;
  }

  .studio-main,
  .page {
    width: min(100% - 20px, 720px);
    margin-top: 14px;
    margin-bottom: calc(42px + env(safe-area-inset-bottom));
  }

  .page-header,
  .studio-hero,
  .catalog-hero,
  .course-detail-hero,
  .auth-copy,
  .moved-card {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 14px;
    padding: 18px;
    border-radius: 8px;
    overflow: hidden;
  }

  .page-header::after,
  .studio-hero::after,
  .catalog-hero::after,
  .course-detail-hero::after {
    display: none;
  }

  .page-header h1,
  .studio-hero h1,
  .catalog-hero h1,
  .course-detail-copy h1,
  .auth-copy h1,
  .moved-card h1 {
    max-width: 100%;
    font-size: 20px;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .home-hero h1 {
    max-width: 100%;
    font-size: clamp(30px, 10.5vw, 42px);
    line-height: 1.06;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  .page-header p:not(.eyebrow),
  .catalog-hero p,
  .course-detail-copy p,
  .auth-copy p,
  .moved-card p:not(.eyebrow) {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .row-actions,
  .panel-heading,
  .builder-workbench-head,
  .builder-submit-row,
  .builder-cta,
  .streak-banner,
  .course-admin-main,
  .access-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }

  .row-actions > *,
  .row-actions form,
  .row-actions a,
  .row-actions button,
  .panel-heading > *,
  .builder-submit-row > *,
  .builder-cta > *,
  .course-admin-main > * {
    min-width: 0;
    max-width: 100%;
  }

  .row-actions .primary-button,
  .row-actions .ghost-button,
  .row-actions .danger-button,
  .builder-submit-row .primary-button,
  .builder-cta .primary-button,
  .builder-cta .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .inline-delete-form,
  .inline-form,
  .rating-form,
  .submission-chat-form,
  .review-question-form,
  .role-form,
  .student-name-form,
  .analytics-filter-form,
  .admin-course-filter,
  .course-catalog-form,
  .lesson-builder-form,
  .lesson-item-admin form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  input,
  select,
  textarea,
  button,
  .primary-button,
  .ghost-button,
  .danger-button,
  .ghost-link-button {
    max-width: 100%;
  }

  input,
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
  }

  textarea {
    min-height: 112px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 0;
  }

  .primary-button,
  .ghost-button,
  .danger-button,
  .ghost-link-button {
    min-height: 46px;
    padding: 11px 14px;
  }

  .panel,
  .embedded-panel,
  .auth-panel,
  .admin-create-card,
  .admin-feed-card,
  .builder-workbench,
  .builder-course-nav,
  .lesson-step-card,
  .lesson-progress-card,
  .lesson-product-section {
    padding: 16px;
    border-radius: 8px;
  }

  .stats-grid,
  .admin-stats-grid,
  .split-grid,
  .auth-layout,
  .course-grid,
  .lecture-grid,
  .material-grid,
  .file-grid,
  .admin-workspace-grid,
  .admin-section-grid,
  .admin-role-list,
  .admin-person-grid,
  .lesson-route-shell,
  .dashboard-shell,
  .lesson-builder-shell,
  .builder-core-grid,
  .builder-count-grid,
  .builder-delivery-grid,
  .builder-entity-map,
  .course-section-form,
  .builder-dynamic-grid,
  .builder-lesson-list,
  .builder-section-list,
  .lesson-product-grid,
  .lesson-section-stack,
  .game-layout,
  .game-ratings-grid,
  .chess-shell,
  .course-checkbox-grid,
  .answers-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-side-nav {
    position: sticky;
    top: 64px;
    z-index: 9;
    gap: 8px;
    padding: 10px;
  }

  .dashboard-side-nav nav {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-side-nav a {
    flex: 0 0 auto;
    min-height: 36px;
    white-space: nowrap;
  }

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

  .transcript-time {
    justify-self: start;
    min-width: 132px;
  }

  .stats-grid,
  .admin-stats-grid {
    gap: 10px;
  }

  .stat,
.stat-card {
    min-height: 92px;
    padding: 14px;
  }

  .stat strong,
.stat-card strong {
    font-size: clamp(25px, 9vw, 38px);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .admin-scope-map,
  .game-tabs {
    display: flex;
    width: 100vw;
    max-width: 100vw;
    gap: 8px;
    margin-inline: calc(50% - 50vw);
    padding: 0 10px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .admin-scope-map a,
  .game-tabs .game-tab {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .home-hero,
  .home-k-stage,
  .home-k-scene {
    max-width: 100%;
    overflow: hidden;
  }

  .list-row,
  .course-admin-row,
  .media-admin-row,
  .admin-person-card,
  .check-mode-card,
  .lesson-progress-link {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .list-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .list-row > span,
  .access-head > span,
  .course-admin-main > span {
    min-width: 0;
    max-width: 100%;
  }

  .access-head strong,
  .access-head small,
  .list-row strong,
  .list-row small {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .table-wrap {
    max-width: 100%;
    margin-inline: 0;
    border-radius: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 680px;
  }

  .meta-list div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .lesson-progress-card {
    position: static;
    top: auto;
  }

  .lesson-progress-card strong {
    font-size: clamp(42px, 16vw, 64px);
  }

  .lesson-step-head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lesson-step-check label {
    display: flex;
    min-height: 44px;
    justify-content: space-between;
    white-space: normal;
  }

  .lesson-step-card h2,
  .builder-lesson-list h3,
  .lesson-progress-link > strong,
  .lesson-product-head h2 {
    font-size: clamp(24px, 8.2vw, 34px);
    line-height: 1.02;
    overflow-wrap: anywhere;
  }

  .lesson-step-copy {
    font-size: 16px;
    line-height: 1.55;
  }

  .secure-video-shell,
  .video-shell,
  .game-stage,
  .game-panel,
  .math-game,
  .word-game,
  .chess-game,
  .puzzle-game,
  .tetris-game {
    max-width: 100%;
    overflow: hidden;
  }

  .lecture-video,
  .secure-video-shell video,
  .video-shell video {
    width: 100%;
    max-height: 56vh;
  }

  .game-layout {
    gap: 14px;
  }

  .game-stage {
    margin-inline: -2px;
  }

  .game-hud,
  .math-hud,
  .word-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .game-hud {
    margin: 10px;
  }

  .game-hud > div:not(.game-timer),
  .math-hud > div,
  .word-hud > div {
    min-height: 46px;
    padding: 6px 7px;
  }

  .game-hud span,
  .math-hud span,
  .word-hud span {
    font-size: 10px;
  }

  .game-hud strong,
  .math-hud strong,
  .word-hud strong {
    font-size: 18px;
  }

  .game-timer {
    height: 12px;
  }

  .arcade-canvas,
  .lumberjack-canvas {
    min-height: 0;
    aspect-ratio: 9 / 12;
  }

  .math-game,
  .puzzle-game,
  .tetris-game,
  .chess-game {
    min-height: 540px;
    padding: 82px 10px 12px;
  }

  .word-game {
    min-height: 600px;
    padding: 14px 8px 12px;
  }

  .word-board {
    width: min(100%, 315px);
    gap: 5px;
  }

  .word-cell {
    font-size: clamp(24px, 9vw, 34px);
  }

  .word-keyboard {
    gap: 6px;
  }

  .word-key-row {
    gap: 3px;
  }

  .word-key {
    min-width: 25px;
    height: 40px;
    padding: 0 5px;
    font-size: 12px;
  }

  .word-key[data-action="enter"],
  .word-key[data-action="backspace"] {
    min-width: 42px;
  }

  .chess-board {
    min-width: 0;
    width: min(100%, 348px);
  }

  .chess-square {
    font-size: clamp(22px, 8vw, 34px);
  }

  .chess-side {
    order: 2;
  }

  .chess-log {
    max-height: 180px;
  }

  .game-controls,
  .chess-controls,
  .puzzle-controls,
  .math-answer,
  .word-form,
  .chess-levels {
    grid-template-columns: 1fr;
  }

  .leaderboard-panel {
    max-height: none;
  }

  .leaderboard-list li {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .leader-name {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  .studio-main,
  .page {
    width: min(100% - 14px, 420px);
  }

  .page-header,
  .studio-hero,
  .catalog-hero,
  .course-detail-hero,
  .auth-copy,
  .panel,
  .embedded-panel,
  .auth-panel,
  .builder-workbench,
  .builder-course-nav,
  .lesson-step-card,
  .lesson-progress-card {
    padding: 14px;
  }

  .page-header h1,
  .studio-hero h1,
  .catalog-hero h1,
  .course-detail-copy h1,
  .auth-copy h1 {
    font-size: 19px;
  }

  .home-hero h1 {
    font-size: clamp(28px, 11.5vw, 38px);
  }

  .primary-button,
  .ghost-button,
  .danger-button,
  .ghost-link-button {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .badge,
  .status,
  .thread-type {
    max-width: 100%;
    white-space: normal;
  }

  .stat,
.stat-card {
    min-height: 82px;
  }

  .game-hud,
  .math-hud,
  .word-hud {
    gap: 5px;
  }

  .game-hud > div:not(.game-timer),
  .math-hud > div,
  .word-hud > div {
    min-height: 42px;
    padding: 5px;
  }

  .math-question {
    min-height: 110px;
    font-size: clamp(42px, 18vw, 70px);
  }

  .grid-2048 {
    gap: 7px;
    padding: 7px;
  }

  .tile-2048 {
    font-size: clamp(18px, 8vw, 30px);
  }
}

@media print {
  .topbar,
  .studio-backdrop,
  .certificate-actions,
  .skip-link {
    display: none !important;
  }

  .studio-main,
  .page {
    width: 100%;
    margin: 0;
  }

  .certificate-shell {
    min-height: 92vh;
    border-color: #222;
    box-shadow: none;
    break-inside: avoid;
  }

  .certificate-page {
    gap: 0;
  }
}

/* === ui-v1: topbar (student), achievements, profile, settings === */
.topbar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  color: #62576d;
}

.topbar-icon-link:hover {
  color: var(--purple-strong);
  border-color: rgba(111, 75, 238, .4);
}

.topbar-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  color: #62576d;
}

.topbar-streak.is-active {
  border-color: rgba(224, 122, 33, .35);
  color: #b45817;
}

.topbar-streak strong {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.topbar-streak:hover { transform: translateY(-1px); }

.topbar-profile-link {
  color: #241e38;
  font-weight: 600;
}

.topbar-profile-link:hover { color: var(--purple-strong); }

.profile-shell,
.settings-shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-identity > div {
  display: grid;
  gap: 2px;
}

.profile-identity small { color: #62576d; }

.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 16px;
  background: var(--purple-soft);
  color: var(--purple-strong);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.profile-name-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.profile-name-form label { flex: 1; }

.profile-referral-code {
  margin: 6px 0 4px;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--purple-strong);
}

.settings-soon-list .list-row.is-disabled {
  opacity: .6;
  pointer-events: none;
}

.rating-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.rating-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
}

.rating-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rating-card-head h3 { margin: 0; font-size: 16px; }

.rating-card > p {
  margin: 0;
  color: #62576d;
  font-size: 13px;
}

.rating-top-list {
  margin: 0;
  padding: 0 0 0 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.rating-top-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #62576d;
}

.rating-top-list li.is-me {
  color: var(--purple-strong);
  font-weight: 600;
}

@media (max-width: 760px) {
  .profile-name-form { flex-direction: column; align-items: stretch; }
}

/* === ui-v1: Мои курсы (ученик) === */
.my-course-stack {
  display: grid;
  gap: 18px;
}

.my-course-card {
  display: grid;
  gap: 18px;
}

.my-course-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.my-course-title {
  flex: 1;
  min-width: 200px;
}

.my-course-title h2 {
  margin: 0;
  color: var(--plum);
  font-size: 21px;
  letter-spacing: 0;
}

.my-course-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.my-course-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.my-course-section {
  display: grid;
  gap: 10px;
}

.my-course-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.my-course-section-head h3 {
  margin: 0;
  color: var(--plum);
  font-size: 15px;
  letter-spacing: 0;
}

.buy-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.buy-course-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--plum);
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}

.buy-course-card:hover {
  border-color: rgba(111, 75, 238, .4);
  transform: translateY(-1px);
}

.buy-course-card strong { font-size: 15px; }

.buy-course-card small {
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.buy-course-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 760px) {
  .my-course-head { align-items: flex-start; }
  .my-course-actions { width: 100%; }
}

/* === ui-v1: KaTeX и картинки в rich-контенте === */
.rich-image {
  display: block;
  max-width: min(100%, 560px);
  margin: 8px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.latex-inline .katex-display {
  margin: 14px 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

.latex-inline .katex,
.rich-markdown .katex,
.ai-message-body .katex {
  font-size: 1.06em;
}

.ai-message-body .katex-display {
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 760px) {
  .grader-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* === student-cjm-v2: one clear next step, no cramped controls === */
.student-mobile-wallet,
.student-mobile-nav {
  display: none;
}

.student-today-panel {
  display: grid;
  gap: 18px;
}

.student-today-heading {
  margin-bottom: 0;
}

.today-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 18px 0 20px 18px;
  border-top: 1px solid rgba(25, 149, 116, .24);
  border-bottom: 1px solid rgba(25, 149, 116, .24);
  border-left: 4px solid var(--green-strong);
  background: rgba(238, 255, 247, .74);
}

.today-focus > div,
.today-focus h3,
.today-focus p {
  min-width: 0;
}

.today-focus h3 {
  margin: 6px 0 4px;
  color: var(--plum);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.today-focus p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.today-focus .primary-button {
  min-width: 148px;
  justify-content: center;
  white-space: nowrap;
}

.today-insights {
  gap: 0;
}

.today-insights .today-insight {
  min-height: 0;
  padding: 14px 12px 10px;
  border: 0;
  border-top: 1px solid rgba(45, 31, 61, .10);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.today-insights .today-insight:first-child {
  border-left: 1px solid rgba(45, 31, 61, .10);
}

.today-insights .today-insight:last-child {
  border-right: 1px solid rgba(45, 31, 61, .10);
}

.today-insight .text-action {
  align-self: end;
  width: fit-content;
  margin-top: 4px;
  color: var(--green-strong);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.today-insight .text-action:is(:hover, :focus-visible) {
  color: var(--purple-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.course-map-head {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 240px) auto;
}

.course-map-section {
  display: block;
}

.course-map-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 0;
  color: var(--plum);
  cursor: pointer;
  list-style: none;
}

.course-map-section > summary::-webkit-details-marker {
  display: none;
}

.course-map-section > summary > span:first-child {
  min-width: 0;
}

.course-map-section > summary strong,
.course-map-section > summary small {
  display: block;
  overflow-wrap: anywhere;
}

.course-map-section > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(45, 31, 61, .14);
  border-radius: 50%;
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.course-map-section[open] > summary::after {
  content: "-";
}

.course-map-section-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.course-map-section > .course-map-lessons {
  padding-top: 10px;
}

.course-map-lesson {
  min-height: 74px;
}

.student-course-card {
  overflow: clip;
}

.student-course-card,
.student-course-card *,
.student-submission-overview,
.student-submission-overview *,
.student-task-ledger,
.student-task-ledger * {
  min-width: 0;
}

.my-course-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(118px, 170px) auto;
  align-items: center;
}

.my-course-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.my-course-actions > * {
  white-space: nowrap;
}

.my-course-section-head {
  flex-wrap: wrap;
}

.role-student .lesson-progress-card {
  max-height: calc(100vh - 112px);
  overflow-x: hidden;
  overflow-y: auto;
}

.lesson-outline {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(45, 31, 61, .12);
}

.lesson-outline > div {
  display: grid;
  gap: 5px;
}

.lesson-outline a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--plum);
  text-decoration: none;
}

.lesson-outline a > span {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.lesson-outline a strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lesson-outline a:is(:hover, :focus-visible) {
  border-color: rgba(25, 149, 116, .26);
  background: var(--green-soft);
}

.lesson-outline a.is-locked {
  color: var(--muted);
}

.lesson-outline a.is-locked > span {
  color: var(--muted);
}

.homework-submit-form,
.submit-hw-section,
.submit-hw-section-head,
.submit-hw-footer,
.homework-task-row,
.task-card-head .row-actions,
.task-chat-form,
.task-answer-form,
.review-composer-grid,
.review-composer-grid > * {
  min-width: 0;
}

.student-submission-overview > .panel:first-child {
  border-left: 4px solid var(--green-strong);
}

.student-task-ledger .task-card-head .row-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.student-task-ledger .task-card-head .status,
.student-task-ledger .task-card-head .badge {
  overflow-wrap: anywhere;
}

.student-task-ledger .task-chat-form button,
.student-task-ledger .task-answer-form button,
.student-submission-overview .ghost-button,
.student-submission-overview .primary-button {
  white-space: normal;
}

@media (max-width: 920px) {
  .course-map-head {
    grid-template-columns: 1fr;
  }

  .today-insights .today-insight:first-child,
  .today-insights .today-insight:last-child {
    border-right: 0;
    border-left: 0;
  }

  .my-course-head {
    grid-template-columns: 72px minmax(0, 1fr) minmax(110px, 150px);
  }

  .my-course-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .role-student .lesson-progress-card {
    max-height: none;
    overflow: visible;
  }

  .lesson-outline > div {
    display: flex;
    gap: 7px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .lesson-outline a {
    flex: 0 0 auto;
    grid-template-columns: 24px minmax(0, 170px);
    max-width: min(72vw, 220px);
  }
}

@media (max-width: 760px) {
  .role-student .studio-main,
  .role-student .page {
    margin-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  .role-student .brand {
    max-width: calc(100vw - 158px);
  }

  .student-mobile-wallet {
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 5px;
    align-items: center;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid rgba(25, 149, 116, .28);
    border-radius: 8px;
    background: rgba(238, 255, 247, .92);
    color: var(--green-strong);
    text-decoration: none;
  }

  .student-mobile-wallet span {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 800;
  }

  .student-mobile-wallet strong {
    min-width: 2ch;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }

  .student-mobile-nav {
    position: fixed;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(45, 31, 61, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 32px rgba(45, 31, 61, .18);
    backdrop-filter: blur(14px);
  }

  .student-mobile-nav a {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 7px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
  }

  .student-mobile-nav a.is-active {
    border-color: rgba(25, 149, 116, .25);
    background: var(--green-soft);
    color: var(--green-strong);
  }

  .today-focus {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 0 16px 14px;
  }

  .today-focus .primary-button {
    width: 100%;
  }

  .today-insights .today-insight {
    padding: 13px 0 10px;
  }

  .course-map-section > summary {
    grid-template-columns: minmax(0, 1fr) 24px;
  }

  .course-map-section-count {
    display: none;
  }

  .course-map-lesson {
    align-items: flex-start;
    min-height: 0;
  }

  .my-course-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }

  .my-course-head .lesson-product-meter,
  .my-course-actions {
    grid-column: 1 / -1;
  }

  .my-course-head .lesson-product-meter {
    width: 100%;
    min-width: 0;
  }

  .my-course-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .my-course-actions > * {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .lesson-outline {
    margin-top: 14px;
  }

  .submit-hw-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .submit-hw-head {
    gap: 12px;
    padding: 16px;
  }

  .submit-hw-head h2 {
    font-size: 22px;
  }

  .homework-submit-form {
    gap: 16px;
    padding: 16px 16px 0;
  }

  .submit-hw-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .submit-hw-section-head .ghost-button {
    width: 100%;
  }

  .homework-task-row {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .homework-task-number {
    grid-column: 1 / -1;
  }

  .homework-file-picker {
    min-height: 66px;
  }

  .submit-hw-footer {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 -16px;
    padding: 14px 16px;
  }

  .submit-hw-footer .primary-button {
    width: 100%;
  }

  .student-task-ledger .task-card-head .row-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .student-task-ledger .task-card-head .row-actions > * {
    width: 100%;
    text-align: center;
  }

  .student-task-ledger .task-chat-form .file-drop,
  .student-task-ledger .task-chat-form button,
  .student-task-ledger .task-answer-form button,
  .review-composer-grid .primary-button,
  .review-composer-grid .ghost-button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .role-student .brand {
    max-width: calc(100vw - 150px);
  }

  .student-mobile-nav {
    gap: 2px;
    padding: 4px;
  }

  .student-mobile-nav a {
    min-height: 42px;
    padding: 6px 2px;
    font-size: 10px;
  }

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

  .lesson-outline a {
    grid-template-columns: 22px minmax(0, 152px);
  }
}

@media print {
  .student-mobile-wallet,
  .student-mobile-nav {
    display: none !important;
  }
}

/* === student-workspace-v3: action first, routes second === */
.student-command-center {
  gap: 0;
}

.student-command-center .student-today-heading {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 16px;
}

.student-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(238px, 286px);
  border-top: 1px solid rgba(45, 31, 61, .12);
}

.student-next-step {
  min-width: 0;
  margin: 0;
}

.student-learning-pulse {
  display: grid;
  align-content: stretch;
  min-width: 0;
  border-left: 1px solid rgba(45, 31, 61, .12);
}

.student-pulse-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "hint value";
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  min-height: 76px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(45, 31, 61, .10);
  color: var(--plum);
  text-decoration: none;
}

.student-pulse-row:last-child {
  border-bottom: 0;
}

.student-pulse-row > span {
  grid-area: label;
  min-width: 0;
  color: var(--plum);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.student-pulse-row strong {
  grid-area: value;
  min-width: 0;
  color: var(--green-strong);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: right;
}

.student-pulse-row small {
  grid-area: hint;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.student-pulse-row:is(:hover, :focus-visible) {
  background: var(--green-soft);
  outline: 0;
}

.student-action-queue {
  display: grid;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(45, 31, 61, .12);
}

.student-queue-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.student-queue-heading h3 {
  margin: 4px 0 0;
  color: var(--plum);
  font-size: 18px;
  line-height: 1.15;
}

.student-queue-heading .text-action {
  flex: 0 0 auto;
  margin: 0;
}

.student-queue-list {
  display: grid;
  border-top: 1px solid rgba(45, 31, 61, .10);
}

.student-queue-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 13px 0;
  border-bottom: 1px solid rgba(45, 31, 61, .10);
  color: var(--plum);
  text-decoration: none;
}

.student-queue-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(25, 149, 116, .28);
  border-radius: 50%;
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}

.student-queue-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.student-queue-copy small {
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.student-queue-copy strong {
  min-width: 0;
  color: var(--plum);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.student-queue-copy em {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.student-queue-action {
  color: var(--green-strong);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.student-queue-item:is(:hover, :focus-visible) {
  background: rgba(238, 255, 247, .58);
  outline: 0;
}

.student-course-map .course-map-list {
  gap: 0;
}

.student-course-map .course-map-course {
  gap: 12px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgba(45, 31, 61, .12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.student-course-map .course-map-course:first-child {
  padding-top: 2px;
  border-top: 0;
}

.student-course-map .course-map-head {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 230px) auto;
}

.student-course-map .course-map-section {
  padding-top: 12px;
}

.student-course-map .course-map-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.student-course-section {
  display: block;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(45, 31, 61, .10);
}

.student-course-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--plum);
  cursor: pointer;
  list-style: none;
}

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

.student-course-section > summary > span:first-child,
.student-course-section > summary h3 {
  min-width: 0;
}

.student-course-section > summary h3 {
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.student-course-section > summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(45, 31, 61, .14);
  border-radius: 50%;
  color: var(--green-strong);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

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

.student-course-section-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.student-course-section-meta .status,
.student-course-section-meta .badge {
  white-space: nowrap;
}

.student-course-section .my-course-section-body {
  padding-top: 10px;
}

.student-course-section .my-lesson-row,
.student-course-section .my-lesson-row > span:first-child {
  min-width: 0;
}

.student-course-section .my-lesson-row strong,
.student-course-section .my-lesson-row small {
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .student-command-grid {
    grid-template-columns: 1fr;
  }

  .student-learning-pulse {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(45, 31, 61, .12);
    border-left: 0;
  }

  .student-pulse-row {
    min-height: 82px;
    border-right: 1px solid rgba(45, 31, 61, .10);
    border-bottom: 0;
  }

  .student-pulse-row:last-child {
    border-right: 0;
  }

  .student-course-map .course-map-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .student-course-map .course-map-head .lesson-progress-bar {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .student-command-center .student-today-heading {
    align-items: flex-start;
    gap: 10px;
  }

  .student-next-step {
    padding-right: 14px;
    padding-left: 14px;
    border-left-width: 3px;
  }

  .student-learning-pulse {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-pulse-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "value"
      "hint";
    align-content: center;
    gap: 3px;
    min-height: 102px;
    padding: 12px 10px;
  }

  .student-pulse-row > span,
  .student-pulse-row small,
  .student-pulse-row strong {
    text-align: left;
  }

  .student-pulse-row strong {
    font-size: 18px;
  }

  .student-action-queue {
    padding-top: 16px;
  }

  .student-queue-heading {
    align-items: flex-end;
  }

  .student-queue-item {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
  }

  .student-queue-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
    text-align: left;
  }

  .student-course-map .course-map-course {
    padding: 16px 0;
  }

  .student-course-map .course-map-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-course-map .course-map-head .primary-button,
  .student-course-map .course-map-head .ghost-button {
    width: 100%;
    justify-content: center;
  }

  .student-course-section > summary {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .student-pulse-row {
    min-height: 108px;
    padding: 10px 8px;
  }

  .student-pulse-row > span {
    font-size: 11px;
  }

  .student-pulse-row strong {
    font-size: 15px;
  }

  .student-pulse-row small {
    font-size: 10px;
  }

  .student-queue-heading .text-action {
    font-size: 11px;
  }

  .student-course-section-meta .status,
  .student-course-section-meta .badge {
    font-size: 10px;
  }
}