:root {
  color-scheme: dark;
  --bg: #100f15;
  --surface: #1a1720;
  --surface-soft: #221d29;
  --ink: #f4eddf;
  --muted: #b8ad9c;
  --line: #3b3344;
  --brand: #c79a4b;
  --brand-dark: #9b6d2f;
  --accent: #6f2636;
  --danger: #ff6b6b;
  --danger-soft: #341b23;
  --success: #75c9a5;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

/* r199: student flip-card practice */
body.student-page .student-flashcard-shell {
  width: min(100%, 720px);
  margin: 10px auto 4px;
  padding: 16px;
  border: 1px solid rgba(160, 119, 49, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 252, 244, 0.98), rgba(255, 246, 224, 0.95));
  box-shadow: 0 16px 36px rgba(103, 70, 25, 0.09);
}

body.student-page .student-flashcard-summary,
body.student-page .student-flashcard-nav,
body.student-page .student-flashcard-ratings {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.student-page .student-flashcard-summary {
  justify-content: space-between;
  margin-bottom: 12px;
}

body.student-page .student-flashcard-summary > div {
  display: grid;
  gap: 2px;
}

body.student-page .student-flashcard-summary strong {
  color: #4d321d;
  font-size: 15px;
}

body.student-page .student-flashcard-summary span {
  color: #8d7866;
  font-size: 12px;
}

body.student-page .student-flashcard-filter,
body.student-page .student-flashcard-nav button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(160, 119, 49, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #74542d;
  font-weight: 700;
}

body.student-page .student-flashcard-filter.active {
  border-color: #eba21a;
  background: #fff0bf;
  color: #8c5a00;
}

body.student-page .student-flashcard-stage {
  display: block;
  width: 100%;
  min-height: 280px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  perspective: 1200px;
  touch-action: manipulation;
}

body.student-page .student-flashcard-card {
  position: relative;
  display: block;
  width: 100%;
  height: 280px;
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

body.student-page .student-flashcard-shell.is-flipped .student-flashcard-card {
  transform: rotateY(180deg);
}

body.student-page .student-flashcard-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 16px;
  padding: clamp(26px, 6vw, 54px);
  overflow: auto;
  border: 1px solid rgba(166, 119, 37, 0.18);
  border-radius: 22px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: linear-gradient(150deg, #fffef9, #fff6dc);
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.44);
  text-align: center;
}

body.student-page .student-flashcard-back {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #fff9e9, #fff0c1);
}

body.student-page .student-flashcard-face small {
  color: #9a7849;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.student-page .student-flashcard-face strong {
  color: #342218;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.55;
  white-space: pre-line;
}

body.student-page .student-flashcard-face em {
  color: #a5855b;
  font-size: 12px;
  font-style: normal;
}

body.student-page .student-flashcard-instruction {
  min-height: 58px;
  margin: 0;
  padding: 16px 8px 8px;
  color: #8b7663;
  text-align: center;
}

body.student-page .student-flashcard-ratings {
  justify-content: center;
  min-height: 58px;
  padding-top: 12px;
}

body.student-page .student-flashcard-ratings button {
  display: grid;
  flex: 1 1 0;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid rgba(142, 104, 52, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: #684a2a;
}

body.student-page .student-flashcard-ratings button.good {
  border-color: rgba(93, 139, 83, 0.38);
  background: #edf7e9;
  color: #426b3b;
}

body.student-page .student-flashcard-ratings span {
  font-weight: 800;
}

body.student-page .student-flashcard-ratings small {
  margin-top: 2px;
  color: inherit;
  opacity: 0.72;
}

body.student-page .student-flashcard-nav {
  justify-content: space-between;
  margin-top: 12px;
}

body.student-page .student-flashcard-nav span {
  color: #81694f;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .student-flashcard-nav button:disabled {
  opacity: 0.38;
}

body.student-page .student-flashcard-empty,
body.student-page .student-flashcard-complete {
  padding: 24px;
  color: #735d48;
  text-align: center;
}

body.student-page .student-flashcard-complete p {
  margin: 18px 0;
}

@media (max-width: 620px) {
  body.student-page .student-flashcard-shell {
    padding: 12px;
    border-radius: 20px;
  }

  body.student-page .student-flashcard-stage,
  body.student-page .student-flashcard-card {
    min-height: 230px;
    height: 230px;
  }

  body.student-page .student-flashcard-face {
    padding: 24px 18px;
  }

  body.student-page .student-flashcard-face strong {
    font-size: 21px;
  }

  body.student-page .student-flashcard-ratings {
    gap: 6px;
  }

  body.student-page .student-flashcard-ratings button {
    min-height: 62px;
    font-size: 12px;
  }
}

/* r169: student todo planner replaces the former floating deer assistant. */
body.student-page .student-planner-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 68px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 13px !important;
  border: 1px solid rgba(40, 35, 30, 0.1) !important;
  border-radius: 14px !important;
  background: #1f1d1b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(36, 29, 22, 0.2) !important;
}

body.student-page .student-planner-fab.hidden {
  display: none !important;
}

body.student-page .student-planner-fab-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

body.student-page .student-planner-fab > strong {
  color: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
}

body.student-page .student-planner-fab .student-assistant-dot {
  top: -8px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
}

body.student-page .student-planner-fab .student-assistant-dot.hidden {
  display: none !important;
}

body.student-page .student-assistant-sheet {
  display: grid;
  gap: 12px;
  max-height: min(88dvh, 760px);
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(228, 216, 198, 0.9);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: #fffdf8;
  box-shadow: 0 -20px 54px rgba(53, 43, 31, 0.24);
}

body.student-page .student-assistant-sheet.hidden,
body.student-page .student-assistant-backdrop.hidden {
  display: none !important;
}

body.student-page .student-assistant-handle {
  width: 36px;
  background: #d8d1c8;
}

body.student-page .student-planner-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body.student-page .student-planner-head > div {
  min-width: 0;
}

body.student-page .student-planner-head span {
  color: #a36d23;
  font-size: 12px;
  font-weight: 750;
}

body.student-page .student-planner-head h2 {
  margin: 2px 0 0;
  color: #241b15;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif;
  font-size: 22px;
  font-weight: 800;
}

body.student-page .student-planner-head p {
  margin: 3px 0 0;
  color: #8b8176;
  font-size: 12px;
  line-height: 1.4;
}

body.student-page .student-planner-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: #f2ede5;
  color: #665c52;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

body.student-page .student-planner-calendar-card,
body.student-page .student-planner-month-plan,
body.student-page .student-planner-task-card {
  border: 1px solid #eee2d2;
  border-radius: 18px;
  background: #ffffff;
}

body.student-page .student-planner-calendar-card {
  padding: 11px 12px 10px;
}

body.student-page .student-planner-calendar-toolbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
}

body.student-page .student-planner-calendar-toolbar strong {
  color: #2b211a;
  font-size: 15px;
  font-weight: 780;
  text-align: center;
}

body.student-page .student-planner-calendar-toolbar button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 10px;
  background: #f7f2eb;
  color: #65594f;
  font-size: 24px;
  line-height: 1;
}

body.student-page .student-planner-weekdays,
body.student-page .student-planner-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

body.student-page .student-planner-weekdays {
  margin-top: 7px;
}

body.student-page .student-planner-weekdays span {
  color: #a39a90;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

body.student-page .student-planner-calendar {
  margin-top: 4px;
}

body.student-page .student-planner-calendar button,
body.student-page .student-planner-calendar-blank {
  aspect-ratio: 1;
}

body.student-page .student-planner-calendar button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #4b423b;
  font-size: 12px;
  font-weight: 650;
}

body.student-page .student-planner-calendar button.today {
  border-color: #d6ad5a;
}

body.student-page .student-planner-calendar button.studied {
  background: #f7c94b;
  color: #4c3505;
  font-weight: 850;
}

body.student-page .student-planner-calendar button.completed {
  border-color: #8ab768;
  background: #9bcc79;
  color: #17350d;
  font-weight: 850;
}

body.student-page .student-planner-calendar-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}

body.student-page .student-planner-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8f857b;
  font-size: 10px;
}

body.student-page .student-planner-calendar-legend i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

body.student-page .student-planner-calendar-legend i.studied {
  background: #f7c94b;
}

body.student-page .student-planner-calendar-legend i.completed {
  background: #9bcc79;
}

body.student-page .student-planner-month-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px 12px;
}

body.student-page .student-planner-month-plan label {
  grid-column: 1 / -1;
  color: #2d231c;
  font-size: 14px;
  font-weight: 780;
}

body.student-page .student-planner-month-plan textarea {
  min-width: 0;
  min-height: 66px;
  resize: vertical;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: #faf7f1;
  color: #302821;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  outline: none;
}

body.student-page .student-planner-month-plan textarea:focus {
  box-shadow: inset 0 0 0 1px #e4b654;
}

body.student-page .student-planner-month-plan button {
  align-self: end;
  min-height: 38px;
  padding: 0 12px;
  border-color: #ead9bd;
  background: #fff6df;
  color: #7a5114;
  font-size: 12px;
  font-weight: 750;
}

body.student-page .student-planner-task-card {
  padding: 11px 12px 12px;
}

body.student-page .student-planner-task-heading > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.student-page .student-planner-task-heading strong {
  color: #2d231c;
  font-size: 14px;
  font-weight: 780;
}

body.student-page .student-planner-task-heading span {
  color: #93887d;
  font-size: 11px;
}

body.student-page .student-planner-task-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 48px;
  gap: 6px;
  margin-top: 9px;
}

body.student-page .student-planner-task-form input {
  min-width: 0;
  height: 38px;
  border: 1px solid #e9dfd2;
  border-radius: 10px;
  padding: 0 9px;
  background: #faf8f4;
  color: #302821;
  font: inherit;
  font-size: 12px;
  outline: none;
}

body.student-page .student-planner-task-form input:focus {
  border-color: #d7a641;
}

body.student-page .student-planner-task-form button {
  min-width: 0;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #24211f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 760;
}

body.student-page .student-planner-task-list {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

body.student-page .student-planner-task {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  border-top: 1px solid #f0e9df;
  padding: 6px 1px;
}

body.student-page .student-planner-check {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  padding: 0;
  border: 1.5px solid #cfc5b8;
  border-radius: 7px;
  background: #ffffff;
  color: #17350d;
  font-size: 14px;
  font-weight: 900;
}

body.student-page .student-planner-task.completed .student-planner-check {
  border-color: #8ab768;
  background: #9bcc79;
}

body.student-page .student-planner-task > div {
  min-width: 0;
}

body.student-page .student-planner-task strong,
body.student-page .student-planner-task span {
  display: block;
}

body.student-page .student-planner-task strong {
  overflow-wrap: anywhere;
  color: #332a23;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

body.student-page .student-planner-task span {
  margin-top: 2px;
  color: #a1988f;
  font-size: 10px;
}

body.student-page .student-planner-task.completed strong {
  color: #9a9187;
  text-decoration: line-through;
}

body.student-page .student-planner-delete {
  min-width: 38px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b0a69b;
  font-size: 11px;
}

body.student-page .student-planner-empty {
  padding: 18px 4px 8px;
  color: #aaa095;
  font-size: 12px;
  text-align: center;
}

body.student-page .student-planner-message {
  min-height: 17px;
  margin: 5px 0 0;
  color: #4f7b35;
  font-size: 11px;
  text-align: center;
}

body.student-page .student-planner-message.error {
  color: #b42318;
}

@media (max-width: 390px) {
  body.student-page .student-planner-task-form {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  body.student-page .student-planner-task-form input[type="date"] {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.student-page .student-planner-task-form button {
    grid-column: 2;
    grid-row: 1;
  }
}

/* r140: student-feedback fixes for chapter papers, iOS safe areas, and compact navigation. */
body.student-page .topbar::before {
  content: none !important;
  display: none !important;
}

body.student-page .chapter-paper-answer-panel {
  position: sticky;
  top: calc(8px + env(safe-area-inset-top, 0px));
  z-index: 24;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(111, 101, 243, 0.2);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(60, 72, 118, 0.12);
  backdrop-filter: blur(16px);
}

body.student-page .chapter-paper-answer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #536078;
  font-size: 13px;
  font-weight: 900;
}

body.student-page .chapter-paper-answer-summary strong {
  color: #5546bd;
}

body.student-page .chapter-paper-answer-card > summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 12px;
  background: #f3f1ff;
  color: #5546bd;
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

body.student-page .chapter-paper-answer-card > summary::-webkit-details-marker {
  display: none;
}

body.student-page .chapter-paper-answer-card > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding-top: 8px;
}

body.student-page .chapter-paper-answer-card button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #d9dfeb !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #647086 !important;
  box-shadow: none !important;
}

body.student-page .chapter-paper-answer-card button.answered {
  border-color: #7c6bea !important;
  background: #efedff !important;
  color: #5546bd !important;
}

body.student-page .chapter-paper-answer-card button.given-up,
body.student-page .chapter-paper-answer-card button.unanswered {
  border-color: #e3a451 !important;
  background: #fff6e8 !important;
  color: #a65b18 !important;
}

body.student-page .chapter-paper-quiz-form .quiz-question-row.unanswered {
  border-color: #e3a451 !important;
  box-shadow: 0 0 0 3px rgba(227, 164, 81, 0.13) !important;
}

body.student-page .chapter-paper-quiz-form .quiz-question-row.given-up {
  border-color: rgba(227, 164, 81, 0.58) !important;
  background: #fffaf2 !important;
}

body.student-page .quiz-dont-know-button.active {
  border-color: #d99843 !important;
  background: #fff1dc !important;
  color: #9f5719 !important;
}

body.student-page .quiz-feedback-next {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 10px !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
  width: min(430px, calc(100vw - 20px)) !important;
  padding: 6px !important;
  gap: 4px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button {
  min-height: 44px !important;
  padding: 0 5px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  grid-template-columns: repeat(var(--student-module-tab-columns, 3), minmax(0, 1fr)) !important;
  width: min(680px, calc(100vw - 16px)) !important;
  height: auto !important;
  min-height: 50px !important;
  max-height: none !important;
  padding: 5px !important;
  overflow: visible !important;
  border-color: rgba(135, 119, 209, 0.24) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 30px rgba(80, 72, 131, 0.16) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 14px !important;
  color: #667185 !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active {
  border-color: rgba(112, 90, 215, 0.26) !important;
  background: linear-gradient(135deg, #eee9ff, #edf7ff) !important;
  color: #5c49bf !important;
}

@media (max-width: 760px) {
  body.student-page .topbar {
    min-height: 58px !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px !important;
  }

  body.student-page .topbar button,
  body.student-page .topbar a {
    min-height: 44px;
  }

  body.student-page .chapter-paper-answer-card > div {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 760px) and (max-width: 1180px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    width: min(680px, calc(100vw - 32px)) !important;
    max-width: 680px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 7px !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button {
    min-height: 48px !important;
    font-size: 15px !important;
  }
}

/* 章节测试套卷 */
.chapter-paper-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.chapter-paper-batch-builder {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 170px) auto minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(111, 101, 243, 0.2);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(247, 244, 255, 0.96), rgba(240, 248, 255, 0.96));
}

.chapter-paper-batch-builder label {
  display: grid;
  gap: 7px;
  color: #526179;
  font-weight: 750;
}

.chapter-paper-batch-builder > span {
  align-self: center;
  color: #68758b;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.chapter-paper-toolbar label,
.chapter-paper-compose-row label,
.chapter-paper-question-field {
  display: grid;
  gap: 7px;
  color: #526179;
  font-weight: 750;
}

.chapter-paper-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.55fr);
  gap: 18px;
  align-items: start;
}

.chapter-paper-list-pane,
.chapter-paper-editor {
  border: 1px solid rgba(113, 132, 169, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  padding: 16px;
}

.chapter-paper-list-head,
.chapter-paper-actions,
.chapter-paper-compose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chapter-paper-list-head {
  justify-content: space-between;
  margin-bottom: 12px;
}

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

.chapter-paper-list-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(113, 132, 169, 0.2);
  border-radius: 14px;
  background: #fff;
  color: #1d2a3f;
  text-align: left;
}

.chapter-paper-list-item.active {
  border-color: #6f65f3;
  background: linear-gradient(135deg, rgba(239, 236, 255, 0.96), rgba(234, 246, 255, 0.96));
  box-shadow: 0 8px 20px rgba(96, 86, 210, 0.12);
}

.chapter-paper-list-item b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eef3ff;
  color: #526fe2;
}

.chapter-paper-list-item span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chapter-paper-list-item strong,
.chapter-paper-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-paper-list-item small,
.chapter-paper-summary,
.chapter-paper-empty {
  color: #758198;
}

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

.chapter-paper-basic-fields {
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, 0.6fr);
}

.chapter-paper-basic-fields .wide-field {
  grid-column: 1 / -1;
}

.chapter-paper-compose-row label {
  grid-template-columns: auto 82px;
  align-items: center;
  margin-right: auto;
}

.chapter-paper-question-field textarea {
  min-height: 320px;
  resize: vertical;
  line-height: 1.65;
}

.chapter-paper-preview {
  max-height: 360px;
  overflow: auto;
  border-radius: 14px;
  background: rgba(247, 249, 255, 0.86);
  padding: 12px;
}

.chapter-paper-actions {
  padding-top: 4px;
}

.chapter-paper-stats {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(113, 132, 169, 0.2);
  border-radius: 16px;
  background: rgba(248, 250, 255, 0.9);
}

.chapter-paper-stats-head,
.chapter-paper-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chapter-paper-stats-head > div {
  display: grid;
  gap: 4px;
}

.chapter-paper-stats-head small,
.chapter-paper-result-head span {
  color: #758198;
}

.chapter-paper-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr));
  gap: 9px;
}

.chapter-paper-stat-grid article {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(113, 132, 169, 0.16);
  border-radius: 12px;
  background: #fff;
}

.chapter-paper-stat-grid small {
  color: #758198;
}

.chapter-paper-stat-grid strong {
  color: #24324a;
  font-size: 1.22rem;
}

.chapter-paper-result-list,
.chapter-paper-question-stats {
  display: grid;
  gap: 8px;
}

.chapter-paper-result-table,
.chapter-paper-question-stat-list {
  display: grid;
  gap: 6px;
}

.chapter-paper-result-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 80px 72px minmax(135px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
}

.chapter-paper-result-row time,
.chapter-paper-result-row span {
  color: #758198;
  font-size: 0.9rem;
}

.chapter-paper-result-row b {
  color: #5c4acb;
}

.chapter-paper-question-stat-list > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 58px;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
}

.chapter-paper-question-stat-list b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #5c4acb;
  background: #f0edff;
}

.chapter-paper-question-stat-list strong {
  color: #b54747;
  text-align: right;
}

@media (max-width: 900px) {
  .chapter-paper-toolbar,
  .chapter-paper-layout,
  .chapter-paper-basic-fields {
    grid-template-columns: 1fr;
  }

  .chapter-paper-basic-fields .wide-field {
    grid-column: auto;
  }

  .chapter-paper-batch-builder {
    grid-template-columns: 1fr;
  }

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

  .chapter-paper-result-row {
    grid-template-columns: minmax(0, 1fr) 70px 68px;
  }

  .chapter-paper-result-row time {
    grid-column: 1 / -1;
  }
}

.output-topic-folder.chapter-paper-folder {
  border-color: rgba(121, 92, 224, 0.3);
  background: linear-gradient(135deg, rgba(250, 246, 255, 0.95), rgba(241, 248, 255, 0.95));
}

.output-topic-folder.chapter-paper-folder .output-topic-folder-head > span,
.output-quiz-row.chapter-paper-row > em {
  color: #7359cf;
}

.output-quiz-row.chapter-paper-row {
  border-color: rgba(121, 92, 224, 0.24);
}

.chapter-paper-practice-screen .output-practice-header {
  background: linear-gradient(135deg, rgba(246, 239, 255, 0.98), rgba(235, 247, 255, 0.98));
}

.chapter-paper-practice-screen .student-module-quiz-form {
  display: grid;
  gap: 16px;
}

/* r85: chapter and module publication controls for the teacher console. */
body.admin-page .knowledge-publication-card {
  display: grid;
  gap: 9px;
  margin: 8px 0;
  border: 1px solid #d9e4ef;
  border-radius: 12px;
  padding: 11px;
  background: #f8fafc;
}

body.admin-page .knowledge-publication-card[hidden] {
  display: none !important;
}

body.admin-page .knowledge-publication-card.published {
  border-color: #a7dfbd;
  background: #f1fbf5;
}

body.admin-page .knowledge-publication-card.teacher-only {
  border-color: #e7cf9a;
  background: #fffaf0;
}

body.admin-page .knowledge-publication-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

body.admin-page .knowledge-publication-head > div {
  min-width: 0;
}

body.admin-page .knowledge-publication-head strong,
body.admin-page .knowledge-publication-head span {
  display: block;
}

body.admin-page .knowledge-publication-head strong {
  color: #14263a;
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .knowledge-publication-head span,
body.admin-page .knowledge-publication-summary {
  margin-top: 3px;
  color: #66778b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

body.admin-page .knowledge-publication-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

body.admin-page .knowledge-publication-actions .compact-link {
  width: 100%;
  min-height: 32px !important;
  border-color: #cbd8e6 !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #29445f !important;
  font-size: 12px !important;
}

body.admin-page .chapter-visible-switch {
  flex: 0 0 38px;
}

body.admin-page .tree-publication-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-page .tree-publication-badge.published {
  background: #dcfce7;
  color: #168447;
}

body.admin-page .tree-publication-badge.teacher-only {
  background: #fef3c7;
  color: #a16207;
}

/* r86: independent publication controls for every module in a chapter. */
body.admin-page .chapter-module-publication-manager {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border: 1px solid #cbdceb;
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(145deg, #f7fbff, #fffdf8);
}

body.admin-page .chapter-module-publication-manager.empty {
  border-style: dashed;
}

body.admin-page .chapter-module-publication-header {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

body.admin-page .chapter-module-publication-header > div {
  min-width: 0;
}

body.admin-page .chapter-module-publication-header strong,
body.admin-page .chapter-module-publication-header span {
  display: block;
}

body.admin-page .chapter-module-publication-header strong {
  color: #14263a;
  font-size: 16px;
  font-weight: 950;
}

body.admin-page .chapter-module-publication-header span {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

body.admin-page .chapter-module-publication-header > em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  background: #e8f3ff;
  color: #245b91;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-page .chapter-module-publication-groups {
  display: grid;
  gap: 9px;
}

body.admin-page .chapter-module-publication-group {
  overflow: hidden;
  border: 1px solid #d9e4ef;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

body.admin-page .chapter-module-publication-group > summary {
  display: grid;
  grid-template-columns: 30px minmax(120px, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
}

body.admin-page .chapter-module-publication-group > summary::-webkit-details-marker {
  display: none;
}

body.admin-page .chapter-module-publication-group > summary::after {
  content: "›";
  color: #64748b;
  font-size: 20px;
  font-weight: 900;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

body.admin-page .chapter-module-publication-group[open] > summary::after {
  transform: rotate(90deg);
}

body.admin-page .chapter-module-publication-group > summary {
  grid-template-columns: 30px minmax(120px, 1fr) auto auto 18px;
}

body.admin-page .chapter-module-publication-type-icon,
body.admin-page .chapter-module-publication-type-icon > * {
  display: grid;
  width: 28px !important;
  height: 28px !important;
  place-items: center;
}

body.admin-page .chapter-module-publication-group > summary strong {
  color: #172b40;
  font-size: 13px;
  font-weight: 950;
}

body.admin-page .chapter-module-publication-group > summary em,
body.admin-page .chapter-module-publication-group > summary i {
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

body.admin-page .chapter-module-publication-group > summary em {
  color: #24659f;
}

body.admin-page .chapter-module-publication-group > summary i {
  color: #9a650f;
}

body.admin-page .chapter-module-publication-rows {
  display: grid;
  border-top: 1px solid #e5edf5;
}

body.admin-page .chapter-module-publication-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 8px 12px 8px 18px;
  border-bottom: 1px solid #edf2f7;
}

body.admin-page .chapter-module-publication-row:last-child {
  border-bottom: 0;
}

body.admin-page .chapter-module-publication-row.teacher-only {
  background: #fffaf0;
}

body.admin-page .chapter-module-publication-row.published {
  background: #f4fbf7;
}

body.admin-page .chapter-module-publication-row > div {
  min-width: 0;
}

body.admin-page .chapter-module-publication-row strong,
body.admin-page .chapter-module-publication-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .chapter-module-publication-row strong {
  color: #1d3147;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .chapter-module-publication-row span {
  margin-top: 3px;
  color: #718096;
  font-size: 11px;
  font-weight: 700;
}

body.admin-page .chapter-module-publication-row > em {
  color: #607185;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body.admin-page .chapter-module-publication-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-page .chapter-module-publication-group > summary {
    grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  }

  body.admin-page .chapter-module-publication-group > summary i {
    display: none;
  }

  body.admin-page .chapter-module-publication-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  body.admin-page .chapter-module-publication-row > em {
    display: none;
  }
}

/* r87: one switch per module type inside the selected unit. */
body.admin-page .chapter-module-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

body.admin-page .chapter-module-type-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 42px;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  border: 1px solid #dbe6ef;
  border-radius: 12px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.92);
}

body.admin-page .chapter-module-type-row.published {
  border-color: #a8dfbc;
  background: #f2fbf5;
}

body.admin-page .chapter-module-type-row.partial {
  border-color: #a9cfee;
  background: #f3f9ff;
}

body.admin-page .chapter-module-type-row.teacher-only {
  border-color: #ead7ac;
  background: #fffaf0;
}

body.admin-page .chapter-module-type-row > div {
  min-width: 0;
}

body.admin-page .chapter-module-type-row strong,
body.admin-page .chapter-module-type-row span {
  display: block;
}

body.admin-page .chapter-module-type-row strong {
  overflow: hidden;
  color: #193049;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .chapter-module-type-row > div > span {
  margin-top: 4px;
  color: #6c7f92;
  font-size: 11px;
  font-weight: 750;
}

body.admin-page .chapter-module-type-row > em {
  color: #607185;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-page .chapter-module-type-row.published > em {
  color: #168447;
}

body.admin-page .chapter-module-type-row.partial > em {
  color: #24659f;
}

@media (max-width: 980px) {
  body.admin-page .chapter-module-type-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  body.admin-page .chapter-module-type-row {
    grid-template-columns: 32px minmax(0, 1fr) 42px;
  }

  body.admin-page .chapter-module-type-row > em {
    display: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, #0b0a10 0%, #16121b 48%, #100f15 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 96px);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body > *:not(.art-wallpaper) {
  position: relative;
  z-index: 1;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.app-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 28px 0 48px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(199, 154, 75, 0.24);
  padding-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.15;
  font-family: "Songti SC", "STSong", Georgia, serif;
  letter-spacing: 0;
}

h2 {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 20px;
  position: relative;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: 8px 8px 0 0;
  background: var(--brand);
  opacity: 0.65;
}

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

.panel-heading p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

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

label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 14px;
}

input {
  width: 100%;
  border: 1px solid #4a3c4d;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #120f17;
  outline: none;
}

textarea {
  width: 100%;
  min-height: 118px;
  resize: vertical;
  border: 1px solid #4a3c4d;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #120f17;
  outline: none;
  line-height: 1.45;
}

select {
  width: 100%;
  border: 1px solid #4a3c4d;
  border-radius: 8px;
  padding: 12px 13px;
  color: var(--ink);
  background: #120f17;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(199, 154, 75, 0.18);
}

select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(199, 154, 75, 0.18);
}

.primary,
.secondary,
.danger-soft {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 700;
}

.primary {
  background: var(--brand);
  color: #15100b;
}

.primary:hover {
  background: var(--brand-dark);
  color: #fff7e8;
}

.secondary {
  background: #292331;
  color: var(--ink);
  border: 1px solid var(--line);
}

.danger-soft {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(255, 107, 107, 0.35);
}

.link-button {
  display: inline-grid;
  min-height: 40px;
  place-items: center;
  border-radius: 8px;
  padding: 0 14px;
  background: #292331;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.account-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #16121b;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 14px;
}

.message {
  min-height: 22px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 14px;
}

.workspace {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 18px;
}

.hidden {
  display: none !important;
}

.dev-only {
  display: none !important;
}

.sidebar {
  align-self: start;
}

.main-column {
  display: grid;
  gap: 18px;
}

.course-list,
.lesson-list,
.student-list,
.record-list,
.event-list {
  display: grid;
  gap: 10px;
}

.full-button {
  width: 100%;
  margin-bottom: 12px;
}

.course-card,
.lesson-card,
.student-card,
.record-card,
.event-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-soft);
}

.course-card strong,
.lesson-card strong,
.student-card strong,
.record-card strong,
.event-card strong {
  display: block;
  margin-bottom: 6px;
}

.course-card span,
.lesson-card span,
.student-card span,
.record-card span,
.event-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

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

.student-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.student-card.status-banned {
  border-color: rgba(255, 107, 107, 0.55);
  background: #2a1720;
}

.student-card.status-removed {
  opacity: 0.72;
  background: #17151a;
}

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

body.admin-page .student-actions .active-soft {
  border-color: rgba(34, 197, 94, 0.34);
  background: rgba(236, 253, 245, 0.92);
  color: #047857;
}

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

.student-tools label {
  margin: 0;
}

.student-summary {
  min-height: 1.35em;
  margin: 0 0 10px;
}

.strong-danger {
  border-width: 2px;
  font-weight: 900;
}

.student-card-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.student-summary-row {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) auto;
  padding: 0;
  text-align: left;
  width: 100%;
}

.student-summary-row strong {
  margin: 0;
}

.student-summary-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-summary-row em {
  color: var(--brand);
  font-style: normal;
  font-weight: 900;
}

.student-detail {
  border-top: 1px solid rgba(214, 173, 88, 0.24);
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.device-request-panel {
  background: #fff8e8;
  border: 2px solid rgba(214, 173, 88, 0.5);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.device-request-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(180px, 1fr) auto auto;
}

.device-request-row span {
  color: var(--ink-deep);
}

.delete-confirm-panel {
  align-items: center;
  background: #fff0ea;
  border: 2px solid #e8afa8;
  border-radius: 8px;
  color: var(--danger);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.delete-confirm-panel span {
  color: var(--danger);
}

.course-access-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  border-top: 1px solid rgba(214, 173, 88, 0.24);
  padding-top: 12px;
}

.course-access-header {
  display: grid;
  gap: 4px;
}

.course-access-header strong {
  margin-bottom: 0;
}

.course-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.access-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

.access-checkbox input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.access-checkbox span {
  color: var(--ink);
}

.access-license.expired {
  border-color: rgba(180, 35, 24, 0.34);
  background: rgba(180, 35, 24, 0.06);
}

.access-license-title {
  font-weight: 800;
}

.access-days-field {
  grid-column: 2;
  display: grid;
  gap: 7px;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
}

.access-days-field input {
  width: min(100%, 220px);
  max-width: none;
  min-height: 52px;
  padding: 10px 14px;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.access-license-meta {
  grid-column: 2;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}

.access-license-scope {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(151, 130, 156, 0.18);
}

.access-price-field,
.access-mode-field {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
}

.access-price-field input,
.access-mode-field select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.access-scope-editor {
  display: none;
  gap: 10px;
  border: 1px solid rgba(151, 130, 156, 0.18);
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(248, 217, 223, 0.52), rgba(220, 232, 248, 0.44));
}

.access-license.custom-scope .access-scope-editor {
  display: grid;
}

.access-license.disabled {
  opacity: 0.62;
}

.access-scope-note,
.access-scope-empty {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.access-scope-detail {
  border: 1px solid rgba(151, 130, 156, 0.18);
  border-radius: 12px;
  background: rgba(255, 252, 249, 0.76);
  overflow: hidden;
}

.access-scope-detail summary {
  cursor: pointer;
  padding: 9px 10px;
  color: var(--ink);
  font-weight: 900;
}

.access-scope-list,
.access-scope-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.access-scope-list-tall {
  max-height: 240px;
  overflow: auto;
}

.access-scope-check {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-height: 36px;
  border: 1px solid rgba(151, 130, 156, 0.2);
  border-radius: 12px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.access-scope-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.access-scope-check span {
  color: var(--ink);
  line-height: 1.35;
}

.module-type-check {
  background: rgba(255, 252, 249, 0.84);
}

.course-access-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.record-card {
  background: var(--surface-soft);
}

.player-panel {
  overflow: hidden;
}

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

.version-pill {
  border: 1px solid rgba(104, 76, 45, 0.22);
  border-radius: 999px;
  color: #7a5b38;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.36rem 0.65rem;
  white-space: nowrap;
}

.video-stage {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background: #08070b;
  isolation: isolate;
}

.fake-video-motion {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(111, 38, 54, 0.76), transparent 38%),
    linear-gradient(315deg, rgba(199, 154, 75, 0.55), transparent 42%),
    linear-gradient(45deg, rgba(28, 26, 38, 0.95), rgba(8, 7, 11, 1));
  background-size: 180% 180%;
  animation: videoMotion 9s ease-in-out infinite alternate;
}

.course-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

.course-video::-webkit-media-controls-fullscreen-button {
  display: initial !important;
}

.player-fullscreen-surface {
  width: 100%;
}

.player-fullscreen-surface:fullscreen,
.player-fullscreen-surface:-webkit-full-screen,
.player-fullscreen-surface.cinema-mode {
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 36px);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 244, 218, 0.08), transparent 36%),
    #050403;
}

.player-fullscreen-surface.cinema-mode {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.player-fullscreen-surface:fullscreen,
.player-fullscreen-surface:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}

.player-fullscreen-surface:fullscreen .video-stage,
.player-fullscreen-surface:-webkit-full-screen .video-stage,
.player-fullscreen-surface.cinema-mode .video-stage {
  width: min(96vw, calc(96vh * 16 / 9));
  max-width: 96vw;
  aspect-ratio: 16 / 9;
}

body.player-cinema-active {
  overflow: hidden;
}

@keyframes videoMotion {
  from {
    background-position: 0% 35%;
  }
  to {
    background-position: 100% 65%;
  }
}

.blackout {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  background: #000;
  color: #fff;
  padding: 24px;
}

.blackout strong {
  font-size: 22px;
}

.blackout span {
  color: rgba(255, 255, 255, 0.75);
}

.play-placeholder {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-content: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  font-weight: 700;
}

.playback-row {
  display: grid;
  grid-template-columns: 120px 88px 116px 108px minmax(220px, 1fr) 96px;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}

.progress-wrap {
  display: grid;
  gap: 8px;
}

.progress-text {
  color: var(--muted);
  font-size: 14px;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #2a2531;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: var(--brand);
}

.seek-slider {
  width: 100%;
  accent-color: var(--brand);
}

.speed-control {
  gap: 6px;
  margin: 0;
  min-width: 92px;
}

.speed-control select {
  min-height: 40px;
  padding: 8px 10px;
}

.event-card.high {
  border-color: rgba(255, 107, 107, 0.55);
  background: #2a1720;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.admin-workspace {
  grid-template-columns: 300px 1fr;
}

.lesson-mini-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.lesson-mini {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.lesson-mini[draggable="true"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid rgba(210, 183, 137, 0.78);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 250, 238, 0.72);
}

.lesson-mini.dragging-lesson {
  opacity: 0.58;
}

.lesson-mini-content {
  display: grid;
  gap: 4px;
}

.quiz-editor {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border: 1px dashed rgba(10, 132, 255, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.quiz-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quiz-editor-head strong {
  margin: 0;
}

.quiz-editor-head span,
.quiz-editor small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.quiz-editor textarea {
  min-height: 104px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 0.95rem;
}

.lesson-index-pill {
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.course-material-box {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.course-material-title {
  display: grid;
  gap: 4px;
}

.course-material-title span {
  color: var(--muted);
  font-size: 13px;
}

.material-upload-row {
  display: grid;
  grid-template-columns: 120px minmax(150px, 1fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.material-mini {
  display: grid;
  gap: 8px;
}

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

.compact-link,
.download-link {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  text-decoration: none;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 6px;
  color: var(--ink);
}

.checkbox-line input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

@media (max-width: 860px) {
  .topbar,
  .row,
  .lesson-card,
  .student-card,
  .playback-row {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace,
  .student-card,
  .material-upload-row,
  .playback-row {
    grid-template-columns: 1fr;
  }

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

  .device-request-row {
    grid-template-columns: 1fr;
  }

  .video-stage {
    min-height: 320px;
  }
}

/* Layered dashboard and gallery theme */
:root {
  --forest: #153f35;
  --forest-deep: #09251f;
  --moss: #6f8f54;
  --gold: #d6ad58;
  --rose: #9a4d54;
  --canvas: #f1dfbd;
  --ink-deep: #21170f;
}

body.admin-page {
  background:
    radial-gradient(circle at 18% 8%, rgba(214, 173, 88, 0.18), transparent 28%),
    linear-gradient(135deg, #071b18 0%, #102c26 38%, #1c1721 100%);
}

body.student-page {
  color-scheme: light;
  --surface: rgba(255, 247, 229, 0.88);
  --surface-soft: rgba(250, 230, 195, 0.74);
  --ink: #25190f;
  --muted: #725f4c;
  --line: rgba(107, 74, 42, 0.28);
  --brand: #b86f3b;
  --brand-dark: #754b2f;
  --danger-soft: #f3d5cc;
  --shadow: 0 18px 48px rgba(73, 43, 18, 0.18);
  background:
    radial-gradient(circle at 18% 12%, rgba(242, 195, 96, 0.45), transparent 26%),
    radial-gradient(circle at 90% 20%, rgba(87, 131, 149, 0.36), transparent 28%),
    linear-gradient(135deg, #f4dfb8 0%, #dcae77 34%, #8fb2a1 66%, #d8c1a2 100%);
}

.art-wallpaper {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.74;
  transition: background 900ms ease, opacity 900ms ease;
}

.art-wallpaper::before,
.art-wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.art-wallpaper::before {
  opacity: 0.32;
  background:
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(73, 44, 23, 0.08) 0 1px, transparent 1px 38px);
}

.art-wallpaper::after {
  opacity: 0.22;
  mix-blend-mode: multiply;
}

.art-wallpaper-0 {
  background:
    radial-gradient(circle at 20% 18%, rgba(242, 202, 106, 0.42), transparent 24%),
    linear-gradient(115deg, rgba(48, 95, 86, 0.48), rgba(229, 188, 118, 0.5)),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 30px);
}

.art-wallpaper-0::after {
  background:
    radial-gradient(ellipse at 18% 74%, rgba(47, 72, 60, 0.48), transparent 30%),
    radial-gradient(ellipse at 52% 64%, rgba(29, 58, 68, 0.32), transparent 28%),
    linear-gradient(180deg, transparent 18%, rgba(82, 111, 78, 0.28) 48%, transparent 72%);
}

.art-wallpaper-1 {
  background:
    radial-gradient(circle at 78% 22%, rgba(68, 118, 157, 0.34), transparent 26%),
    radial-gradient(circle at 28% 80%, rgba(203, 112, 74, 0.32), transparent 24%),
    linear-gradient(130deg, rgba(240, 223, 188, 0.55), rgba(93, 132, 111, 0.42));
}

.art-wallpaper-1::after {
  background:
    radial-gradient(circle at 28% 30%, rgba(255, 222, 116, 0.64), transparent 8%),
    radial-gradient(circle at 55% 52%, rgba(38, 99, 146, 0.36), transparent 22%),
    radial-gradient(circle at 70% 70%, rgba(190, 72, 74, 0.28), transparent 20%);
}

.art-wallpaper-2 {
  background:
    linear-gradient(90deg, rgba(246, 233, 196, 0.55), rgba(192, 150, 83, 0.38)),
    repeating-linear-gradient(0deg, rgba(74, 52, 31, 0.12) 0 1px, transparent 1px 42px);
}

.art-wallpaper-2::after {
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(52, 79, 74, 0.36) 36% 42%, transparent 43%),
    radial-gradient(ellipse at 68% 68%, rgba(63, 99, 82, 0.34), transparent 32%),
    radial-gradient(ellipse at 32% 76%, rgba(113, 75, 40, 0.2), transparent 24%);
}

.art-wallpaper-3 {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 233, 174, 0.2), transparent 22%),
    linear-gradient(135deg, rgba(44, 64, 100, 0.46), rgba(130, 77, 64, 0.32), rgba(234, 190, 98, 0.38));
}

.art-wallpaper-3::after {
  background:
    radial-gradient(ellipse at 48% 20%, rgba(242, 211, 143, 0.54), transparent 18%),
    radial-gradient(ellipse at 42% 54%, rgba(88, 47, 62, 0.3), transparent 22%),
    linear-gradient(90deg, rgba(41, 59, 97, 0.26), transparent 40%, rgba(175, 103, 58, 0.26));
}

.art-wallpaper-4 {
  background:
    radial-gradient(circle at 22% 38%, rgba(100, 161, 176, 0.36), transparent 24%),
    radial-gradient(circle at 70% 42%, rgba(211, 88, 118, 0.24), transparent 22%),
    linear-gradient(125deg, rgba(232, 224, 194, 0.56), rgba(87, 129, 148, 0.42), rgba(230, 183, 89, 0.36));
}

.art-wallpaper-4::after {
  background:
    radial-gradient(ellipse at 30% 72%, rgba(42, 86, 94, 0.34), transparent 28%),
    radial-gradient(ellipse at 68% 72%, rgba(129, 72, 47, 0.22), transparent 24%),
    repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 18px);
}

.art-wallpaper-5 {
  background:
    radial-gradient(circle at 30% 30%, rgba(222, 70, 82, 0.28), transparent 18%),
    radial-gradient(circle at 58% 42%, rgba(255, 214, 111, 0.36), transparent 18%),
    radial-gradient(circle at 76% 66%, rgba(57, 125, 95, 0.3), transparent 22%),
    linear-gradient(135deg, rgba(48, 38, 67, 0.26), rgba(241, 218, 172, 0.52));
}

.art-wallpaper-5::after {
  background:
    radial-gradient(ellipse at 28% 76%, rgba(88, 119, 80, 0.3), transparent 24%),
    radial-gradient(ellipse at 60% 70%, rgba(125, 62, 84, 0.24), transparent 22%),
    linear-gradient(180deg, rgba(255, 246, 215, 0.28), transparent 52%);
}

body.admin-page .art-wallpaper {
  opacity: 0.28;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border: 1px solid rgba(214, 173, 88, 0.5);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  object-fit: cover;
}

.admin-dashboard {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(440px, 1.45fr);
  gap: 18px;
  align-items: start;
}

.admin-command-center {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 16px;
}

.command-copy,
.dashboard-stat,
.module-tile,
.nested-nav,
.storage-note,
.sub-panel {
  border: 1px solid rgba(214, 173, 88, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 246, 219, 0.08), rgba(13, 38, 33, 0.82)),
    var(--surface);
  box-shadow: var(--shadow);
}

.command-copy {
  padding: 18px;
}

.command-copy h2 {
  font-size: 24px;
}

.command-copy p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.55;
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dashboard-stat {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
}

.dashboard-stat strong {
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
}

.dashboard-stat span {
  color: var(--muted);
  font-size: 13px;
}

.module-grid {
  display: grid;
  gap: 12px;
}

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

.module-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  min-height: 136px;
  padding: 18px;
  gap: 8px 12px;
  color: var(--ink);
  text-align: left;
}

.module-tile.active {
  border-color: rgba(214, 173, 88, 0.92);
  background:
    linear-gradient(145deg, rgba(214, 173, 88, 0.28), rgba(24, 63, 52, 0.92)),
    var(--surface-soft);
  box-shadow: 0 0 0 2px rgba(214, 173, 88, 0.12), var(--shadow);
}

.tile-icon {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(214, 173, 88, 0.45);
  border-radius: 8px;
  background: rgba(214, 173, 88, 0.16);
  color: var(--gold);
  font-weight: 800;
}

.module-tile strong {
  align-self: end;
  font-size: 18px;
}

.module-tile small {
  color: var(--muted);
  line-height: 1.45;
}

.storage-note {
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

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

.nested-nav {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.nested-nav.active {
  display: grid;
}

.nested-nav button {
  min-height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 700;
}

.nested-nav button.active {
  border-color: rgba(214, 173, 88, 0.72);
  background: rgba(214, 173, 88, 0.18);
  color: var(--ink);
}

.module-panel {
  display: none;
}

.module-panel.active {
  display: block;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  gap: 14px;
}

.sub-panel {
  padding: 18px;
  box-shadow: none;
}

.sub-panel .panel-heading {
  margin-bottom: 14px;
}

body.student-page .panel {
  backdrop-filter: blur(14px);
}

body.student-page .topbar {
  border-bottom-color: rgba(97, 65, 38, 0.24);
}

body.student-page .brand-mark {
  border-color: rgba(117, 75, 47, 0.32);
}

.student-workspace {
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) minmax(520px, 1.6fr);
  gap: 18px;
}

.gallery-panel,
.lesson-gallery-panel,
.art-player-panel,
.event-gallery-panel {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 238, 205, 0.78)),
    var(--surface);
}

.student-page .course-card {
  display: block;
  width: 100%;
  min-height: 150px;
  border: 8px solid #8d5d38;
  border-radius: 8px;
  padding: 16px;
  color: var(--ink);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(244, 205, 102, 0.55), rgba(102, 145, 139, 0.56)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 2px, transparent 2px 18px);
  box-shadow: inset 0 0 0 2px rgba(255, 245, 218, 0.7), 0 16px 32px rgba(86, 53, 25, 0.2);
}

.student-page .course-card strong {
  font-family: "Songti SC", "STSong", Georgia, serif;
  font-size: 20px;
}

.student-page .lesson-card {
  border-color: rgba(104, 71, 44, 0.25);
  background:
    linear-gradient(90deg, rgba(255, 247, 228, 0.88), rgba(234, 199, 141, 0.55));
}

.art-player-panel {
  overflow: visible;
}

.student-page .video-stage {
  min-height: 420px;
  border: 14px solid #8b5934;
  box-shadow:
    inset 0 0 0 3px rgba(255, 237, 191, 0.82),
    0 22px 50px rgba(73, 43, 18, 0.28);
  background: #21170f;
}

.student-page .fake-video-motion {
  background:
    radial-gradient(circle at 26% 18%, rgba(249, 214, 110, 0.65), transparent 22%),
    radial-gradient(circle at 78% 32%, rgba(88, 134, 152, 0.52), transparent 24%),
    linear-gradient(135deg, #6f884e 0%, #cf9365 45%, #2f646d 100%);
}

.student-page .play-placeholder {
  color: rgba(255, 248, 228, 0.9);
  text-shadow: 0 2px 12px rgba(42, 24, 12, 0.5);
}

body.student-page .app-watermark {
  position: fixed;
  z-index: 132;
  left: 8%;
  top: 16%;
  max-width: min(82vw, 360px);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.36);
  color: rgba(31, 42, 59, 0.38);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
  transition: left 16s linear, top 16s linear, opacity 900ms ease, transform 900ms ease;
  mix-blend-mode: multiply;
}

body.student-page .app-watermark.hidden {
  display: none;
}

.student-page .progress-track {
  background: rgba(112, 73, 42, 0.22);
}

.student-page .progress-fill {
  background: linear-gradient(90deg, #b86f3b, #4f8b87);
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button {
  background: #2f2436;
  border: 1px solid rgba(47, 36, 54, 0.25);
  color: #fff4df;
}

body.student-page .primary:hover,
body.student-page .secondary:hover,
body.student-page .link-button:hover {
  background: #533d5d;
}

body.student-page .danger-soft {
  background: #fff0ea;
  border-color: #e9a09b;
  color: #b9293b;
}

body.student-page .account-pill {
  background: #2f2436;
  color: #f6dfb6;
  border-color: rgba(47, 36, 54, 0.24);
}

.file-picker {
  display: grid;
  gap: 10px;
  align-items: start;
}

.field-label {
  font-weight: 800;
}

.sr-only-file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.file-pick-button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sr-only-file::file-selector-button {
  min-height: 38px;
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--brand);
  color: #2b1b10;
  font-weight: 700;
  cursor: pointer;
}

#videoFileName {
  color: var(--muted);
  font-size: 13px;
}

.form-grid.drag-over {
  outline: 2px solid var(--brand);
  outline-offset: 6px;
  border-radius: 8px;
}

.folder-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.folder-tabs button {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 700;
}

.folder-tabs button.active {
  border-color: var(--brand);
  color: var(--ink);
  background: rgba(199, 154, 75, 0.2);
}

.course-card.dragging {
  opacity: 0.55;
}

.course-card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.drag-handle {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(199, 154, 75, 0.12);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  cursor: grab;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.lesson-drag-handle {
  min-width: 76px;
  color: #6a4a1d;
}

.course-admin-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr)) repeat(3, auto);
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.course-admin-tools label {
  margin: 0;
}

.lesson-row-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.sound-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 244, 220, 0.9);
  background: #2f5f91;
  color: #fff8e8;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
  font-size: 24px;
  font-weight: 900;
}

.sound-toggle.muted {
  background: #7c6c5c;
}

.course-style-chinese .video-stage {
  border-width: 18px 28px;
  border-color: #8b5934;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #9b6538 0 16px, transparent 16px calc(100% - 16px), #9b6538 calc(100% - 16px)),
    #26180e;
}

.course-style-western .video-stage {
  border: 20px ridge #b88a46;
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 4px rgba(255, 235, 174, 0.92),
    0 24px 52px rgba(60, 37, 19, 0.35);
}

.student-page .course-card.art-chinese {
  border-color: #9a693d;
  background:
    linear-gradient(90deg, rgba(252, 238, 193, 0.92), rgba(191, 213, 170, 0.72)),
    repeating-linear-gradient(90deg, rgba(120, 88, 50, 0.12) 0 1px, transparent 1px 26px);
}

.student-page .course-card.art-western {
  border-color: #b88a46;
  background:
    radial-gradient(circle at 30% 24%, rgba(245, 219, 122, 0.68), transparent 30%),
    linear-gradient(135deg, rgba(82, 122, 150, 0.66), rgba(202, 116, 78, 0.58), rgba(244, 221, 158, 0.7));
}

@media (max-width: 960px) {
  .admin-dashboard,
  .student-workspace,
  .split-grid {
    grid-template-columns: 1fr;
  }

  .admin-command-center {
    position: static;
  }

  .category-grid,
  .dashboard-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .nested-nav {
    grid-template-columns: 1fr;
  }

  .folder-form,
  .course-admin-tools {
    grid-template-columns: 1fr;
  }
}

/* Formal art-gallery release theme */
body.admin-page,
body.student-page {
  background: #efe4cf;
}

.art-wallpaper {
  opacity: 1;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(0.96);
}

.art-wallpaper::before {
  opacity: 0.36;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.5), rgba(255, 248, 232, 0.18)),
    repeating-linear-gradient(90deg, rgba(76, 54, 30, 0.06) 0 1px, transparent 1px 42px);
}

.art-wallpaper::after {
  opacity: 1;
  mix-blend-mode: normal;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 244, 218, 0.32), transparent 28%),
    linear-gradient(90deg, rgba(244, 233, 210, 0.58), rgba(244, 233, 210, 0.28), rgba(244, 233, 210, 0.62));
}

.art-wallpaper-0,
.art-wallpaper-2,
.art-wallpaper-4 {
  background-image: url("/assets/bg-chinese-landscape.png");
}

.art-wallpaper-1,
.art-wallpaper-3,
.art-wallpaper-5 {
  background-image: url("/assets/bg-western-oil.png");
}

body.admin-page .art-wallpaper {
  opacity: 0.92;
  filter: saturate(0.82) brightness(0.54) contrast(1.05);
}

body.admin-page .art-wallpaper::after {
  background:
    linear-gradient(90deg, rgba(7, 17, 16, 0.82), rgba(11, 22, 24, 0.68)),
    radial-gradient(circle at 18% 14%, rgba(209, 167, 88, 0.18), transparent 30%);
}

body.student-page {
  --surface: rgba(255, 250, 239, 0.9);
  --surface-soft: rgba(255, 248, 232, 0.82);
  --ink: #21170f;
  --muted: #655542;
  --line: rgba(102, 73, 40, 0.24);
  --brand: #9a653c;
  --brand-dark: #5f3b25;
  --shadow: 0 18px 50px rgba(70, 45, 22, 0.18);
}

body.student-page .panel {
  background: rgba(255, 250, 239, 0.9);
  border-color: rgba(112, 76, 41, 0.22);
  box-shadow: 0 18px 50px rgba(70, 45, 22, 0.16);
}

body.student-page input,
body.student-page select {
  background: rgba(255, 253, 247, 0.96);
  border-color: rgba(90, 62, 35, 0.28);
  color: #20160f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.student-page input::placeholder {
  color: rgba(32, 22, 15, 0.42);
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button {
  background: #2d2232;
  color: #fff4df;
}

body.student-page .sound-toggle,
.sound-toggle {
  left: auto !important;
  right: 18px !important;
}

.student-page .course-card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  border: 0;
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 250, 239, 0.86);
  box-shadow:
    inset 0 0 0 8px rgba(137, 91, 50, 0.86),
    inset 0 0 0 11px rgba(255, 241, 204, 0.8),
    0 16px 30px rgba(79, 50, 23, 0.2);
}

.student-page .course-card::before {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  opacity: 0.74;
  background: url("/assets/bg-chinese-landscape.png") center / cover;
  filter: saturate(0.9) brightness(1.06);
}

.student-page .course-card::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 249, 232, 0.72), rgba(255, 249, 232, 0.4));
}

.student-page .course-card > * {
  position: relative;
  z-index: 1;
}

.student-page .course-card.art-western::before {
  background-image: url("/assets/bg-western-oil.png");
}

.student-page .video-stage {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

.student-page .video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.course-style-chinese .video-stage::after {
  background-image: url("/assets/frame-chinese-scroll.png");
}

.course-style-western .video-stage::after {
  background-image: url("/assets/frame-western-oil.png");
}

.course-style-chinese .fake-video-motion,
.course-style-chinese .course-video {
  inset: auto;
  top: 13.6%;
  left: 9.3%;
  width: 81.4%;
  height: 73.9%;
  border-radius: 2px;
}

.course-style-western .fake-video-motion,
.course-style-western .course-video {
  inset: auto;
  top: 14.2%;
  left: 9.1%;
  width: 81.8%;
  height: 71.8%;
  border-radius: 2px;
}

.course-style-chinese .fake-video-motion {
  background: url("/assets/bg-chinese-landscape.png") center / cover;
  filter: brightness(0.7) saturate(0.88);
}

.course-style-western .fake-video-motion {
  background: url("/assets/bg-western-oil.png") center / cover;
  filter: brightness(0.72) saturate(0.92);
}

.course-style-chinese .play-placeholder,
.course-style-chinese .blackout {
  inset: auto;
  top: 13.6%;
  left: 9.3%;
  width: 81.4%;
  height: 73.9%;
}

.course-style-western .play-placeholder,
.course-style-western .blackout {
  inset: auto;
  top: 14.2%;
  left: 9.1%;
  width: 81.8%;
  height: 71.8%;
}

.student-page .play-placeholder {
  color: rgba(255, 249, 232, 0.92);
  text-shadow: 0 2px 14px rgba(20, 12, 6, 0.62);
}

.course-style-chinese .video-stage,
.course-style-western .video-stage {
  border: 0;
  background: transparent;
}

/* Light theme override: keep the whole system warm and readable instead of dark. */
:root {
  color-scheme: light;
  --bg: #f7ead8;
  --surface: #fffaf1;
  --surface-soft: #f6ead8;
  --ink: #2c1d12;
  --muted: #725f4c;
  --line: #dbc7a7;
  --brand: #c8843f;
  --brand-dark: #9d6330;
  --accent: #4e8f86;
  --danger: #b9293b;
  --danger-soft: #fff0ea;
  --success: #237a62;
  --shadow: 0 18px 46px rgba(120, 78, 36, 0.14);
}

body,
body.admin-page,
body.student-page {
  color-scheme: light;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 213, 129, 0.34), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(125, 178, 166, 0.28), transparent 28%),
    linear-gradient(135deg, #fff7e8 0%, #f2d5a8 46%, #dbe8dc 100%);
}

.panel,
.command-copy,
.dashboard-stat,
.module-tile,
.nested-nav,
.storage-note,
.sub-panel,
.course-card,
.lesson-card,
.student-card,
.record-card,
.event-card {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.module-tile.active,
.nested-nav button.active {
  border-color: rgba(200, 132, 63, 0.78);
  background: #fff0d4;
}

input,
select,
.account-pill {
  border-color: var(--line);
  background: #fffdf7;
  color: var(--ink);
}

.secondary,
.link-button,
body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button {
  border-color: var(--line);
  background: #fff8ec;
  color: var(--ink);
}

.secondary:hover,
.link-button:hover,
body.student-page .secondary:hover,
body.student-page .link-button:hover {
  background: #f8e4c3;
}

.primary,
.sr-only-file::file-selector-button {
  background: var(--brand);
  color: #fffaf1;
}

.primary:hover,
body.student-page .primary:hover {
  background: var(--brand-dark);
}

.danger-soft,
body.student-page .danger-soft,
.student-card.status-banned,
.event-card.high {
  border-color: #e8afa8;
  background: #fff0ea;
  color: var(--danger);
}

.student-card.status-removed {
  background: #f2eadf;
}

.progress-track {
  background: #ead9bd;
}

.video-stage,
.course-video,
.player-fullscreen-surface:fullscreen,
.player-fullscreen-surface:-webkit-full-screen,
.player-fullscreen-surface.cinema-mode {
  background: #fff4df;
}

.blackout {
  background: #fff0ea;
  color: var(--danger);
}

.blackout span {
  color: #7f463e;
}

.play-placeholder {
  color: #6d5338;
  text-shadow: none;
}

.fake-video-motion {
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 214, 118, 0.72), transparent 22%),
    radial-gradient(circle at 78% 32%, rgba(107, 164, 154, 0.46), transparent 24%),
    linear-gradient(135deg, #f9e3b5 0%, #dba66e 45%, #8fbdb0 100%);
}

.course-style-chinese .fake-video-motion,
.course-style-western .fake-video-motion {
  filter: brightness(1.02) saturate(0.98);
}

.student-page .course-card,
.student-page .lesson-card {
  color: var(--ink);
  background: #fff8ec;
  border-color: #bf8952;
}

body.student-page .account-pill {
  background: #fff8ec;
  color: var(--ink);
  border-color: var(--line);
}

/* 4.1 Admin refresh: cleaner macOS-inspired management surface. */
body.admin-page {
  --bg: #f5f7fb;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-soft: rgba(245, 248, 252, 0.88);
  --ink: #111827;
  --muted: #667085;
  --line: rgba(17, 24, 39, 0.12);
  --brand: #0a84ff;
  --brand-dark: #0066cc;
  --accent: #30d158;
  --danger: #ff453a;
  --danger-soft: #fff1f0;
  --success: #248a3d;
  --shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  color: var(--ink);
  background:
    linear-gradient(135deg, #f8fbff 0%, #eef5ff 46%, #f7f8fb 100%);
}

body.admin-page .art-wallpaper {
  display: none;
}

body.admin-page .app-shell {
  width: min(1440px, calc(100vw - 40px));
  padding-top: 22px;
}

body.admin-page .topbar {
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

body.admin-page h1,
body.admin-page h2 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-weight: 800;
}

body.admin-page h1 {
  font-size: 30px;
}

body.admin-page h2 {
  font-size: 21px;
}

body.admin-page .eyebrow {
  color: var(--brand);
}

body.admin-page .brand-mark {
  border-color: rgba(10, 132, 255, 0.24);
  box-shadow: 0 8px 22px rgba(10, 132, 255, 0.12);
}

body.admin-page .panel,
body.admin-page .command-copy,
body.admin-page .dashboard-stat,
body.admin-page .module-tile,
body.admin-page .nested-nav,
body.admin-page .storage-note,
body.admin-page .sub-panel,
body.admin-page .course-card,
body.admin-page .lesson-card,
body.admin-page .student-card,
body.admin-page .record-card,
body.admin-page .event-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.admin-page .panel::before {
  display: none;
}

body.admin-page .admin-dashboard {
  grid-template-columns: minmax(300px, 0.82fr) minmax(620px, 1.58fr);
  gap: 22px;
}

body.admin-page .command-copy,
body.admin-page .dashboard-stat,
body.admin-page .module-tile,
body.admin-page .nested-nav,
body.admin-page .storage-note,
body.admin-page .sub-panel {
  background: rgba(255, 255, 255, 0.7);
}

body.admin-page .module-tile {
  min-height: 124px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body.admin-page .module-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(10, 132, 255, 0.3);
}

body.admin-page .module-tile.active,
body.admin-page .nested-nav button.active {
  border-color: rgba(10, 132, 255, 0.48);
  background: rgba(10, 132, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.08), var(--shadow);
}

body.admin-page .tile-icon {
  border-color: rgba(10, 132, 255, 0.18);
  background: rgba(10, 132, 255, 0.1);
  color: var(--brand);
}

body.admin-page .dashboard-stat strong {
  color: var(--brand);
}

body.admin-page .nested-nav {
  gap: 6px;
  padding: 6px;
}

body.admin-page .nested-nav button {
  min-height: 44px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

body.admin-page label {
  color: #344054;
  font-weight: 700;
}

body.admin-page input,
body.admin-page select {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.admin-page input:focus,
body.admin-page select:focus {
  outline: 3px solid rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.52);
}

body.admin-page .primary {
  min-height: 46px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.18);
}

body.admin-page .primary:hover {
  background: var(--brand-dark);
}

body.admin-page .secondary,
body.admin-page .link-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
}

body.admin-page .secondary:hover,
body.admin-page .link-button:hover {
  border-color: rgba(10, 132, 255, 0.28);
  background: rgba(10, 132, 255, 0.08);
}

body.admin-page .version-pill,
body.admin-page .account-pill {
  border-color: rgba(10, 132, 255, 0.18);
  background: rgba(10, 132, 255, 0.08);
  color: var(--brand-dark);
}

body.admin-page .folder-form {
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
}

body.admin-page .folder-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.admin-page .folder-tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.72);
}

body.admin-page .folder-tab-item.active {
  border-color: rgba(10, 132, 255, 0.42);
  background: rgba(10, 132, 255, 0.08);
}

body.admin-page .folder-tabs button,
body.admin-page .folder-tab-main {
  border: 0;
  min-height: 38px;
  background: transparent;
  color: var(--ink);
}

body.admin-page .folder-tabs button.active,
body.admin-page .folder-tab-main.active {
  background: transparent;
  color: var(--brand-dark);
}

body.admin-page .folder-delete-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: var(--danger);
  font-weight: 800;
}

body.admin-page .folder-delete-button:hover {
  border-color: rgba(255, 69, 58, 0.24);
  background: rgba(255, 69, 58, 0.08);
}

body.admin-page .folder-delete-button.confirm-delete,
body.admin-page .confirm-delete {
  border-color: rgba(255, 69, 58, 0.38);
  background: rgba(255, 69, 58, 0.12);
  color: var(--danger);
}

body.admin-page .course-card {
  padding: 18px;
}

body.admin-page .course-card-compact {
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.78);
}

body.admin-page .course-card-summary {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

body.admin-page .course-expand-button {
  display: grid;
  gap: 4px;
  min-height: 54px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

body.admin-page .course-expand-button strong {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

body.admin-page .course-expand-button span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .course-quick-actions,
body.admin-page .lesson-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

body.admin-page .course-detail {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px;
  background: rgba(248, 250, 252, 0.74);
}

body.admin-page .course-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

body.admin-page .course-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

body.admin-page .course-section summary::-webkit-details-marker {
  display: none;
}

body.admin-page .course-section summary strong {
  margin: 0;
  font-size: 16px;
}

body.admin-page .course-section summary span {
  color: var(--muted);
  font-size: 13px;
}

body.admin-page .course-section[open] summary {
  border-bottom: 1px solid var(--line);
}

body.admin-page .course-section > *:not(summary) {
  padding: 12px;
}

body.admin-page .lesson-mini {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.66);
}

body.admin-page .lesson-mini[draggable="true"] {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.62);
}

body.admin-page .drag-handle {
  border-color: rgba(10, 132, 255, 0.18);
  background: rgba(10, 132, 255, 0.08);
  color: var(--brand-dark);
}

body.admin-page .danger-soft {
  border-color: rgba(255, 69, 58, 0.24);
  background: rgba(255, 69, 58, 0.08);
  color: var(--danger);
}

body.admin-page .quiz-course-panel,
body.admin-page .lesson-mini-list {
  display: grid;
  gap: 10px;
}

body.admin-page .quiz-lesson-editor {
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  background: rgba(10, 132, 255, 0.04);
}

body.admin-page .quiz-lesson-editor summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

body.admin-page .quiz-lesson-editor summary::-webkit-details-marker {
  display: none;
}

body.admin-page .quiz-lesson-editor summary span,
body.admin-page .quiz-lesson-editor summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .quiz-lesson-editor .quiz-editor {
  margin: 0 12px 12px;
}

body.admin-page .quiz-preview {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
}

body.admin-page .quiz-preview-row {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid rgba(107, 114, 128, 0.14);
  padding-bottom: 8px;
}

body.admin-page .quiz-preview-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.admin-page .quiz-preview-row ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

body.admin-page .course-upload-jump {
  display: flex;
  justify-content: flex-end;
}

body.admin-page .admin-preview-modal {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(16px);
}

body.admin-page .admin-preview-modal.hidden {
  display: none;
}

body.admin-page .admin-preview-card {
  display: grid;
  gap: 14px;
  width: min(960px, 100%);
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

body.admin-page .admin-history-card {
  width: min(820px, 100%);
  max-height: min(78vh, 720px);
  overflow: hidden;
}

body.admin-page .history-warning {
  border: 1px solid rgba(180, 131, 155, 0.22);
  border-radius: 14px;
  padding: 12px 14px;
  color: #6f5f73;
  background: linear-gradient(135deg, rgba(255, 241, 248, 0.86), rgba(241, 250, 255, 0.86));
  font-weight: 700;
}

body.admin-page .admin-history-list {
  display: grid;
  gap: 10px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 4px;
}

body.admin-page .history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(193, 211, 230, 0.72);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 248, 244, 0.92), rgba(242, 248, 255, 0.92));
}

body.admin-page .history-row-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.admin-page .history-row-main strong {
  color: var(--ink);
  font-size: 15px;
}

body.admin-page .history-row-main span,
body.admin-page .history-row-main small,
body.admin-page .history-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

body.admin-page .history-row-main small {
  word-break: break-all;
}

body.admin-page .history-empty {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: 14px;
  padding: 16px;
  background: rgba(248, 250, 252, 0.86);
}

body.admin-page .history-empty.error {
  border-color: rgba(239, 68, 68, 0.3);
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.92);
}

body.admin-page .admin-preview-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

body.admin-page .admin-preview-head strong {
  display: block;
  margin: 0 0 4px;
  font-size: 18px;
}

body.admin-page .admin-preview-head span {
  color: var(--muted);
  font-size: 13px;
}

body.admin-page #adminPreviewVideo {
  width: 100%;
  max-height: min(68vh, 620px);
  border-radius: 8px;
  background: #000;
}

body.admin-page .file-picker {
  border: 1px dashed rgba(10, 132, 255, 0.3);
  border-radius: 8px;
  padding: 14px;
  background: rgba(10, 132, 255, 0.05);
}

body.admin-page .upload-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body.admin-page .upload-action-row .primary {
  width: 100%;
}

body.admin-page #videoFileName {
  color: var(--muted);
  font-size: 14px;
}

body.admin-page .upload-records {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

body.admin-page .upload-records h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

body.admin-page .upload-record-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

body.admin-page .upload-record {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.7);
}

body.admin-page .upload-record strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

body.admin-page .upload-record span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

body.admin-page .upload-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body.admin-page .upload-record.active,
body.admin-page .upload-record.queued {
  border-color: rgba(10, 132, 255, 0.22);
  background: rgba(10, 132, 255, 0.07);
}

body.admin-page .upload-record.success {
  border-color: rgba(36, 138, 61, 0.24);
  background: rgba(36, 138, 61, 0.08);
}

body.admin-page .upload-record.warning {
  border-color: rgba(255, 159, 10, 0.32);
  background: rgba(255, 159, 10, 0.1);
}

body.admin-page .upload-record.failed {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 69, 58, 0.08);
}

/* Clean player mode: no decorative frame, no glow, preserve any video ratio. */
.student-page .video-stage,
.course-style-chinese .video-stage,
.course-style-western .video-stage {
  overflow: hidden;
  border: 0 !important;
  border-radius: 8px;
  background: #111 !important;
  box-shadow: none !important;
}

.student-page .video-stage::after,
.course-style-chinese .video-stage::after,
.course-style-western .video-stage::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

.course-style-chinese .fake-video-motion,
.course-style-chinese .course-video,
.course-style-western .fake-video-motion,
.course-style-western .course-video {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.course-video {
  background: #111 !important;
  object-fit: contain !important;
}

.player-fullscreen-surface:fullscreen,
.player-fullscreen-surface:-webkit-full-screen,
.player-fullscreen-surface.cinema-mode {
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 0 !important;
  background: #000 !important;
}

.player-fullscreen-surface:fullscreen .video-stage,
.player-fullscreen-surface:-webkit-full-screen .video-stage,
.player-fullscreen-surface.cinema-mode .video-stage {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
}

.player-fullscreen-surface:fullscreen .course-video,
.player-fullscreen-surface:-webkit-full-screen .course-video,
.player-fullscreen-surface.cinema-mode .course-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

.player-fullscreen-surface:fullscreen .fake-video-motion,
.player-fullscreen-surface:-webkit-full-screen .fake-video-motion,
.player-fullscreen-surface.cinema-mode .fake-video-motion {
  display: none !important;
}

.player-fullscreen-surface:fullscreen .play-placeholder,
.player-fullscreen-surface:-webkit-full-screen .play-placeholder,
.player-fullscreen-surface.cinema-mode .play-placeholder,
.player-fullscreen-surface:fullscreen .blackout,
.player-fullscreen-surface:-webkit-full-screen .blackout,
.player-fullscreen-surface.cinema-mode .blackout {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 4.2 Student mobile app layer: lighter, cleaner, touch-first. */
body.student-page {
  --surface: rgba(255, 255, 255, 0.86);
  --surface-soft: rgba(248, 250, 252, 0.92);
  --ink: #111827;
  --muted: #6b7280;
  --line: rgba(17, 24, 39, 0.12);
  --brand: #0a84ff;
  --brand-dark: #0066cc;
  --accent: #30d158;
  --danger: #ff453a;
  --success: #248a3d;
  --shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 14% 8%, rgba(10, 132, 255, 0.12), transparent 26%),
    radial-gradient(circle at 86% 16%, rgba(48, 209, 88, 0.1), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef4ff 52%, #f7fbf8 100%);
}

body.student-page .panel {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

body.student-page .panel::before {
  display: none;
}

body.student-page .brand-mark,
body.student-page .version-pill,
body.student-page .account-pill,
body.student-page input,
body.student-page select,
body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .event-card {
  border-radius: 8px;
}

body.student-page input,
body.student-page select {
  min-height: 48px;
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--line);
  color: var(--ink);
}

body.student-page input:focus,
body.student-page select:focus {
  border-color: rgba(10, 132, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14);
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button {
  min-height: 46px;
  border-color: var(--line);
}

body.student-page .primary {
  background: var(--brand);
  color: #ffffff;
}

body.student-page .primary:hover {
  background: var(--brand-dark);
}

body.student-page .secondary,
body.student-page .link-button {
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
}

body.student-page .secondary:hover,
body.student-page .link-button:hover {
  background: rgba(235, 245, 255, 0.96);
}

body.student-page .danger-soft {
  color: var(--danger);
  background: rgba(255, 69, 58, 0.08);
  border-color: rgba(255, 69, 58, 0.22);
}

body.student-page .account-pill {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
}

body.student-page .remember-login-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 4px 0 14px;
  padding: 12px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.7);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
}

body.student-page .remember-login-row input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  accent-color: var(--brand);
}

body.student-page.student-app-shell .student-admin-link,
body.student-page .student-admin-link.hidden {
  display: none !important;
}

body.student-page #logoutButton {
  min-height: 36px;
  color: var(--brand-dark);
}

body.student-page .course-card,
body.student-page .lesson-card {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

body.student-page .course-card::before,
body.student-page .course-card::after {
  display: none;
}

body.student-page .course-card strong {
  font-family: inherit;
}

body.student-page .progress-fill {
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

@media (max-width: 760px) {
  html {
    background: #f5f7fb;
  }

  body.student-page {
    min-height: 100dvh;
    background: #f5f7fb;
  }

  body.student-page .art-wallpaper {
    display: none;
  }

  body.student-page .app-shell {
    width: 100%;
    padding: max(10px, env(safe-area-inset-top)) 12px 24px;
  }

  body.student-page .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    align-items: center;
    gap: 10px;
    margin: -10px -12px 12px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 247, 251, 0.88);
    backdrop-filter: blur(18px);
  }

  body.student-page .brand-lockup {
    min-width: 0;
    gap: 10px;
  }

  body.student-page .brand-mark {
    width: 42px;
    height: 42px;
  }

  body.student-page .eyebrow {
    display: none;
  }

  body.student-page h1 {
    max-width: 120px;
    overflow: hidden;
    font: 800 20px/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.student-page h2 {
    font-size: 19px;
  }

  body.student-page .player-actions {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    gap: 8px;
  }

  body.student-page .version-pill,
  body.student-page .student-admin-link {
    display: none;
  }

  body.student-page .network-pill {
    display: none;
  }

  body.student-page .account-pill {
    max-width: 118px;
    min-height: 36px;
    padding: 8px 10px;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.student-page #logoutButton {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  body.student-page .panel {
    padding: 14px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  }

  body.student-page .panel-heading {
    margin-bottom: 12px;
  }

  body.student-page .panel-heading p {
    font-size: 13px;
  }

  body.student-page #loginPanel {
    margin-top: 16px;
  }

  body.student-page label {
    gap: 7px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  body.student-page input,
  body.student-page select {
    min-height: 52px;
    font-size: 17px;
  }

  body.student-page .student-workspace {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body.student-page .student-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  body.student-page .art-player-panel {
    order: -1;
  }

  body.student-page .course-list,
  body.student-page .lesson-list,
  body.student-page .event-list {
    gap: 8px;
  }

  body.student-page .course-card {
    min-height: 78px;
    padding: 14px;
  }

  body.student-page .course-card strong {
    margin-bottom: 4px;
    font-size: 17px;
  }

  body.student-page .course-card span,
  body.student-page .lesson-card span,
  body.student-page .event-card span {
    font-size: 12px;
  }

  body.student-page .lesson-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
    align-items: center;
    padding: 12px;
  }

  body.student-page .lesson-card strong {
    overflow-wrap: anywhere;
    font-size: 15px;
  }

  body.student-page .lesson-card .secondary,
  body.student-page .material-card .download-link {
    min-width: 66px;
    min-height: 44px;
    padding: 0 12px;
  }

  body.student-page .material-card {
    grid-template-columns: 1fr;
  }

  body.student-page .material-card .download-link {
    width: 100%;
  }

  body.student-page .video-stage,
  body.student-page .course-style-chinese .video-stage,
  body.student-page .course-style-western .video-stage {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
    border-radius: 8px;
    background: #000 !important;
  }

  body.student-page .course-style-chinese .fake-video-motion,
  body.student-page .course-style-chinese .course-video,
  body.student-page .course-style-western .fake-video-motion,
  body.student-page .course-style-western .course-video,
  body.student-page .fake-video-motion,
  body.student-page .course-video {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  body.student-page .course-style-chinese .play-placeholder,
  body.student-page .course-style-chinese .blackout,
  body.student-page .course-style-western .play-placeholder,
  body.student-page .course-style-western .blackout,
  body.student-page .play-placeholder,
  body.student-page .blackout {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  body.student-page .play-placeholder {
    padding: 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    text-align: center;
  }

  body.student-page .blackout strong {
    font-size: 17px;
  }

  body.student-page .playback-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  body.student-page .playback-row button {
    min-height: 48px;
    padding: 0 8px;
    font-size: 14px;
  }

  body.student-page .progress-wrap,
  body.student-page .speed-control {
    grid-column: 1 / -1;
  }

  body.student-page .progress-text {
    font-size: 12px;
  }

  body.student-page .seek-slider {
    min-height: 30px;
  }

  body.student-page .speed-control select {
    min-height: 48px;
  }

  body.student-page .event-gallery-panel {
    opacity: 0.92;
  }

  body.student-page .sound-toggle,
  .sound-toggle {
    position: fixed !important;
    left: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 390px) {
  body.student-page .app-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  body.student-page .panel {
    padding: 12px;
  }

  body.student-page h1 {
    max-width: 96px;
    font-size: 18px;
  }

  body.student-page .account-pill {
    max-width: 124px;
  }

  body.student-page .playback-row button {
    font-size: 13px;
  }
}

/* r128: keep unauthenticated entry screens isolated from private workspaces. */
body.student-page.student-guest .student-workspace,
body.student-page .student-workspace.hidden {
  display: none !important;
}

body.student-page.student-guest .topbar .player-actions {
  display: none !important;
}

body.student-page.student-guest #loginPanel {
  width: min(560px, calc(100% - 24px));
  margin: clamp(24px, 8vh, 84px) auto 0 !important;
}

body.student-page.student-guest #loginButton {
  width: 100%;
  min-height: 48px;
}

body.admin-page.admin-guest .topbar-menu-button,
body.admin-page.admin-guest .admin-breadcrumb,
body.admin-page.admin-guest .topbar .player-actions {
  display: none !important;
}

body.admin-page.admin-guest #adminWorkspace {
  display: none !important;
}

body.admin-page.admin-guest .topbar {
  grid-template-columns: 1fr !important;
}

body.admin-page.admin-guest #adminLoginPanel {
  width: min(560px, calc(100% - 32px));
  margin: clamp(32px, 9vh, 96px) auto 0 !important;
}

body.admin-page.admin-guest #adminLoginButton {
  width: 100%;
  min-height: 48px;
}

body.student-page.student-authenticated .app-shell {
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 4.3 Student learning home: continue watching and progress overview. */
body.student-page .learning-panel {
  display: grid;
  gap: 14px;
}

body.student-page .learning-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.student-page .learning-stat {
  min-height: 72px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(10, 132, 255, 0.06);
}

body.student-page .learning-stat strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

body.student-page .learning-stat span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

body.student-page .course-progress-list {
  display: grid;
  gap: 8px;
}

body.student-page .course-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.36fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  text-align: left;
}

body.student-page .course-progress-card.active {
  border-color: rgba(10, 132, 255, 0.42);
  background: rgba(10, 132, 255, 0.08);
}

body.student-page .course-progress-card strong,
body.student-page .course-progress-card span {
  display: block;
}

body.student-page .course-progress-card strong {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
  font-size: 15px;
}

body.student-page .course-progress-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body.student-page .course-progress-card em {
  color: var(--brand-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

body.student-page .mini-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.18);
}

body.student-page .mini-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* 4.5 Student mobile player: install prompt, playback status, next lesson. */
body.student-page .mobile-install-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-color: rgba(10, 132, 255, 0.2);
  background: rgba(239, 246, 255, 0.94);
}

body.student-page .mobile-install-banner.hidden {
  display: none;
}

body.student-page .mobile-install-banner div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.student-page .mobile-install-banner strong {
  color: var(--ink);
  font-size: 16px;
}

body.student-page .mobile-install-banner span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

body.student-page .install-actions,
body.student-page .playback-status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.student-page .playback-status-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(10, 132, 255, 0.22);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.88);
}

body.student-page .playback-status-card.hidden {
  display: none;
}

body.student-page .playback-status-card.success {
  border-color: rgba(48, 209, 88, 0.28);
  background: rgba(240, 253, 244, 0.9);
}

body.student-page .playback-status-card.error {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 241, 242, 0.92);
}

body.student-page .playback-status-card div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.student-page .playback-status-card strong {
  color: var(--ink);
  font-size: 15px;
}

body.student-page .playback-status-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

body.student-page .playback-status-card.error span {
  color: #9f1239;
}

body.student-page .compact-link.hidden {
  display: none;
}

@media (max-width: 760px) {
  body.student-page .mobile-install-banner,
  body.student-page .playback-status-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.student-page .install-actions,
  body.student-page .playback-status-actions {
    justify-content: stretch;
  }

  body.student-page .install-actions > *,
  body.student-page .playback-status-actions > * {
    flex: 1 1 auto;
  }
}

/* 4.4 Upload diagnosis and student mobile access entry. */
body.admin-page .mobile-access-list {
  display: grid;
  gap: 14px;
}

body.admin-page .mobile-release-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: 16px;
}

body.admin-page .mobile-share-card,
body.admin-page .mobile-publish-empty,
body.admin-page .mobile-qr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.9);
}

body.admin-page .mobile-publish-empty {
  grid-template-columns: minmax(0, 1fr);
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.84);
}

body.admin-page .mobile-share-card div:first-child,
body.admin-page .mobile-qr-card div:first-child,
body.admin-page .mobile-publish-empty {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.admin-page .mobile-share-card strong,
body.admin-page .mobile-qr-card strong,
body.admin-page .mobile-publish-empty strong {
  color: var(--ink);
  font-size: 15px;
}

body.admin-page .mobile-share-card span,
body.admin-page .mobile-qr-card span,
body.admin-page .mobile-publish-empty span {
  color: var(--muted);
  white-space: pre-line;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

body.admin-page .qr-box {
  width: 168px;
  height: 168px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #ffffff;
}

body.admin-page .qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.admin-page .qr-placeholder {
  width: 168px;
  min-height: 168px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

body.admin-page .mobile-warning,
body.admin-page .mobile-install-steps {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.82);
  color: #8a4b0f;
  font-weight: 700;
  line-height: 1.55;
}

body.admin-page .mobile-warning.ready {
  border-color: rgba(22, 163, 74, 0.28);
  background: rgba(240, 253, 244, 0.82);
  color: #166534;
}

body.admin-page .mobile-install-steps {
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(239, 246, 255, 0.9);
  color: var(--ink);
}

body.admin-page .mobile-install-steps span {
  color: var(--muted);
  font-weight: 650;
}

body.admin-page .mobile-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

body.admin-page .mobile-url-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

body.admin-page .mobile-url-card div:first-child {
  display: grid;
  gap: 7px;
  min-width: 0;
}

body.admin-page .mobile-url-card code {
  width: 100%;
  overflow-wrap: anywhere;
  padding: 9px 10px;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .mobile-url-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

body.admin-page .mobile-url-card strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.admin-page .mobile-url-card strong em {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(48, 209, 88, 0.16);
  color: #166534;
  font-size: 11px;
  font-style: normal;
}

body.admin-page .mobile-url-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 760px) {
  body.admin-page .mobile-release-form,
  body.admin-page .mobile-share-card,
  body.admin-page .mobile-qr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .qr-box,
  body.admin-page .qr-placeholder {
    justify-self: center;
  }

  body.admin-page .mobile-url-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .mobile-url-actions {
    justify-content: stretch;
  }

  body.admin-page .mobile-url-actions > * {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media (max-width: 760px) {
  body.student-page .learning-panel {
    order: -3;
  }

  body.student-page .art-player-panel {
    order: -2;
  }

  body.student-page .learning-panel .panel-heading.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.student-page .learning-panel #continueButton {
    width: 100%;
  }

  body.student-page .learning-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.student-page .learning-stat {
    min-height: 64px;
    padding: 10px;
  }

  body.student-page .learning-stat strong {
    font-size: 20px;
  }

  body.student-page .course-progress-card {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  body.student-page .course-progress-card .mini-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.student-page .course-progress-card em {
    justify-self: end;
  }
}

/* Student mobile app navigation, remembered login, and mini player foundation. */
body.student-page .mobile-study-nav,
body.student-page .mobile-mini-player {
  display: none;
}

@media (max-width: 760px) {
  body.student-page .app-shell {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
  }

  body.student-page .mobile-study-nav {
    position: fixed;
    z-index: 90;
    right: 12px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(20px);
  }

  body.student-page .mobile-study-nav button {
    min-height: 44px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: 800 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body.student-page .mobile-study-nav button.active {
    background: rgba(10, 132, 255, 0.12);
    color: var(--brand-dark);
  }

  body.student-page .mobile-mini-player {
    position: fixed;
    z-index: 89;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 74px;
    padding: 9px 10px;
    border: 1px solid rgba(10, 132, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(22px);
  }

  body.student-page .mobile-mini-player.hidden {
    display: none;
  }

  body.student-page .mobile-mini-main {
    display: grid;
    gap: 5px;
    min-width: 0;
    min-height: 54px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
  }

  body.student-page .mobile-mini-main strong,
  body.student-page .mobile-mini-main span {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.student-page .mobile-mini-main strong {
    font-size: 14px;
    line-height: 1.2;
  }

  body.student-page .mobile-mini-main span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
  }

  body.student-page .mobile-mini-progress {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(107, 114, 128, 0.18);
  }

  body.student-page .mobile-mini-progress i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--accent));
  }

  body.student-page .mobile-mini-action {
    min-width: 66px;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--brand);
    color: #ffffff;
    font-weight: 900;
  }

  body.student-page .mobile-mini-action:disabled {
    background: rgba(107, 114, 128, 0.18);
    color: var(--muted);
  }

  body.student-page .learning-panel,
  body.student-page #coursePanel,
  body.student-page #playerPanel,
  body.student-page #materialsPanel,
  body.student-page #accountPanel {
    scroll-margin-top: 76px;
    scroll-margin-bottom: 180px;
  }

  body.student-page .sound-toggle {
    bottom: calc(154px + env(safe-area-inset-bottom)) !important;
  }
}

/* Student mobile study home: search, resume card, clearer progress lists. */
body.student-page {
  background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 46%, #f7fbf9 100%);
}

body.student-page .student-search-field {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .student-search-field input {
  width: 100%;
  min-height: 48px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

body.student-page .resume-card {
  display: grid;
  gap: 7px;
  width: 100%;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.11), rgba(48, 209, 88, 0.08));
  color: var(--ink);
  text-align: left;
  box-shadow: 0 12px 30px rgba(10, 132, 255, 0.1);
}

body.student-page .study-plan-card {
  display: grid;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

body.student-page .study-plan-card.hidden {
  display: none;
}

body.student-page .study-plan-card[data-status="urgent"] {
  border-color: rgba(255, 159, 10, 0.34);
  background: linear-gradient(135deg, rgba(255, 249, 235, 0.95), rgba(255, 255, 255, 0.84));
}

body.student-page .study-plan-card[data-status="complete"] {
  border-color: rgba(48, 209, 88, 0.24);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 0.84));
}

body.student-page .study-plan-top,
body.student-page .study-plan-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.student-page .study-plan-top span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.student-page .study-plan-top em {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--brand-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .study-plan-card[data-status="urgent"] .study-plan-top em {
  background: rgba(255, 159, 10, 0.16);
  color: #9a5a00;
}

body.student-page .study-plan-card[data-status="complete"] .study-plan-top em {
  background: rgba(48, 209, 88, 0.16);
  color: #166534;
}

body.student-page .study-plan-card strong {
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.25;
}

body.student-page .study-plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
}

body.student-page .study-plan-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.18);
}

body.student-page .study-plan-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

body.student-page .study-plan-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

body.student-page .exam-countdown-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

body.student-page .exam-countdown-main {
  display: grid;
  gap: 5px;
}

body.student-page .exam-countdown-main span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.student-page .exam-countdown-main strong {
  overflow-wrap: anywhere;
  font-size: 19px;
  line-height: 1.25;
}

body.student-page .exam-countdown-main p,
body.student-page .exam-countdown-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
}

body.student-page .exam-days-badge {
  display: grid;
  place-items: center;
  min-width: 82px;
  min-height: 64px;
  border-radius: 8px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--brand-dark);
  font-size: 18px;
  font-weight: 950;
  text-align: center;
}

body.student-page .exam-countdown-card[data-status="today"] .exam-days-badge {
  background: rgba(255, 159, 10, 0.18);
  color: #9a5a00;
}

body.student-page .exam-countdown-card[data-status="passed"] .exam-days-badge {
  background: rgba(255, 59, 48, 0.12);
  color: #b42318;
}

body.student-page .exam-countdown-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 150px auto auto;
  gap: 8px;
  align-items: center;
}

body.student-page .exam-countdown-form input {
  min-height: 46px;
  background: rgba(255, 255, 255, 0.95);
}

body.student-page .exam-countdown-message {
  grid-column: 1 / -1;
}

body.student-page .exam-countdown-message.error {
  color: #b42318;
}

body.student-page .resume-card.hidden {
  display: none;
}

body.student-page .resume-card span,
body.student-page .lesson-eyebrow {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

body.student-page .resume-card strong {
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.25;
}

body.student-page .resume-card em,
body.student-page .resume-card small {
  color: var(--muted);
  font-style: normal;
  font-weight: 750;
  line-height: 1.4;
}

body.student-page .resume-card i,
body.student-page .course-card .mini-progress,
body.student-page .lesson-card .mini-progress {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.18);
}

body.student-page .resume-card i b,
body.student-page .course-card .mini-progress span,
body.student-page .lesson-card .mini-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

body.student-page .course-card.active,
body.student-page .lesson-card.active {
  border-color: rgba(10, 132, 255, 0.42);
  background: rgba(239, 246, 255, 0.9);
}

body.student-page .course-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

body.student-page .course-card-top em {
  color: var(--brand-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .course-card .mini-progress {
  margin-top: 10px;
}

body.student-page .lesson-card.completed {
  border-color: rgba(48, 209, 88, 0.24);
  background: rgba(240, 253, 244, 0.78);
}

body.student-page .lesson-card .mini-progress {
  margin-top: 9px;
}

body.student-page .lesson-quiz-pill {
  display: inline-grid;
  width: fit-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(10, 132, 255, 0.12);
  color: var(--brand-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .quiz-modal {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(14px);
}

body.student-page .quiz-modal.hidden {
  display: none;
}

body.student-page .quiz-modal-card {
  display: grid;
  gap: 14px;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid rgba(10, 132, 255, 0.2);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.22);
}

body.student-page .quiz-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

body.student-page .quiz-modal-head span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.student-page .quiz-modal-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
}

body.student-page .quiz-question-list {
  display: grid;
  gap: 10px;
}

body.student-page .quiz-question-row {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 1px solid rgba(107, 114, 128, 0.18);
  border-radius: 8px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.78);
  color: var(--ink);
}

body.student-page .quiz-question-row.correct {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(240, 253, 244, 0.88);
}

body.student-page .quiz-question-row.wrong {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(254, 242, 242, 0.9);
}

body.student-page .quiz-question-row span {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 900;
}

body.student-page .quiz-question-row strong {
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.35;
}

body.student-page .quiz-question-row input {
  min-height: 52px;
  background: #fff;
  font-size: 17px;
  font-weight: 760;
}

body.student-page .quiz-fill-inline {
  display: block;
  align-items: center;
  color: var(--ink);
  font-size: 16px;
  font-weight: 820;
  line-height: 2.15;
  word-break: break-word;
}

body.student-page .quiz-fill-blank {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 72px;
  margin: 0 3px;
  vertical-align: baseline;
}

body.student-page .quiz-fill-blank input {
  width: clamp(76px, 18vw, 132px);
  min-height: 30px;
  border: 0;
  border-bottom: 2px solid rgba(10, 132, 255, 0.62);
  border-radius: 0;
  background: transparent;
  padding: 0 4px 2px;
  text-align: center;
  box-shadow: none;
}

body.student-page .quiz-fill-blank.correct input {
  border-color: rgba(34, 197, 94, 0.72);
  background: rgba(236, 253, 243, 0.72);
  color: #15803d;
}

body.student-page .quiz-fill-blank.wrong input {
  border-color: rgba(239, 68, 68, 0.72);
  background: rgba(255, 241, 242, 0.76);
  color: #b42318;
}

body.student-page .quiz-fill-feedback {
  display: none;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

body.student-page .quiz-fill-blank.correct .quiz-fill-feedback {
  display: inline;
  color: #15803d;
}

body.student-page .quiz-fill-blank.wrong .quiz-fill-feedback {
  display: inline;
  color: #b42318;
}

body.student-page .quiz-choice-list {
  display: grid;
  gap: 8px;
}

body.student-page .quiz-choice-option {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

body.student-page .quiz-choice-option input {
  min-height: auto;
}

body.student-page .quiz-choice-option em {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(10, 132, 255, 0.1);
  color: var(--brand-dark);
  font-style: normal;
  font-weight: 950;
}

body.student-page .quiz-choice-option b {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

body.student-page .quiz-result {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.55;
}

body.student-page .quiz-result.has-feedback {
  display: block;
}

body.student-page .quiz-result.error {
  color: #b42318;
}

body.student-page .quiz-result strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

body.student-page .quiz-result ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

body.student-page .quiz-result li span {
  display: block;
  color: var(--muted);
}

body.student-page .quiz-feedback-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.92);
}

body.student-page .quiz-feedback-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

body.student-page .quiz-feedback-summary strong {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}

body.student-page .quiz-feedback-summary span {
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 900;
}

body.student-page .quiz-feedback-list {
  display: grid;
  gap: 8px;
}

body.student-page .quiz-feedback-item {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(107, 114, 128, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

body.student-page .quiz-feedback-item.correct {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(240, 253, 244, 0.76);
}

body.student-page .quiz-feedback-item.wrong {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(254, 242, 242, 0.82);
}

body.student-page .quiz-feedback-item strong {
  margin: 0;
  color: var(--ink);
}

body.student-page .quiz-feedback-item span,
body.student-page .quiz-feedback-item p {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

body.student-page .quiz-feedback-item .quiz-feedback-explain {
  color: var(--ink);
  font-weight: 820;
}

body.student-page .quiz-feedback-blanks {
  display: grid;
  gap: 4px;
}

body.student-page .quiz-feedback-blanks p.correct {
  color: #15803d;
}

body.student-page .quiz-feedback-blanks p.wrong {
  color: #b42318;
}

@media (max-width: 760px) {
  body.student-page .learning-panel {
    gap: 12px;
  }

  body.student-page .resume-card {
    padding: 14px;
  }

  body.student-page .study-plan-card {
    padding: 14px;
  }

  body.student-page .resume-card strong {
    font-size: 19px;
  }

  body.student-page .study-plan-card strong {
    font-size: 19px;
  }

  body.student-page .study-plan-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.student-page .study-plan-actions span {
    text-align: left;
  }

  body.student-page .exam-countdown-card,
  body.student-page .exam-countdown-form {
    grid-template-columns: 1fr;
  }

  body.student-page .exam-days-badge {
    justify-items: start;
    min-height: 48px;
    padding: 0 12px;
  }

  body.student-page .quiz-modal {
    align-items: end;
    padding: 10px;
  }

  body.student-page .quiz-modal-card {
    max-height: calc(100vh - 20px);
  }

  body.student-page .quiz-modal-head {
    display: grid;
  }

  body.student-page .student-search-field input {
    min-height: 50px;
    font-size: 16px;
  }

  body.student-page .course-card {
    gap: 8px;
  }

  body.student-page .lesson-card {
    grid-template-columns: minmax(0, 1fr) 68px;
  }
}

/* Student account and connection status center. */
body.student-page .network-pill {
  display: inline-grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid rgba(48, 209, 88, 0.26);
  border-radius: 8px;
  padding: 0 11px;
  background: rgba(240, 253, 244, 0.86);
  color: #166534;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .network-pill.offline {
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 241, 242, 0.92);
  color: #9f1239;
}

body.student-page .connection-banner {
  display: grid;
  gap: 6px;
  border-color: rgba(255, 69, 58, 0.28);
  background: rgba(255, 241, 242, 0.92);
}

body.student-page .connection-banner.hidden {
  display: none;
}

body.student-page .connection-banner strong {
  color: #9f1239;
  font-size: 15px;
}

body.student-page .connection-banner span {
  color: #7f1d1d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

body.student-page .account-panel {
  display: grid;
  gap: 14px;
}

body.student-page .profile-summary-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  padding: 14px;
  background: rgba(239, 246, 255, 0.82);
}

body.student-page .profile-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.95), rgba(48, 209, 88, 0.82));
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
}

body.student-page .profile-summary-card strong,
body.student-page .profile-summary-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.student-page .profile-summary-card strong {
  color: var(--ink);
  font-size: 18px;
}

body.student-page .profile-summary-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

body.student-page .profile-summary-card em {
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(48, 209, 88, 0.16);
  color: #166534;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .profile-summary-card em.danger {
  background: rgba(255, 69, 58, 0.12);
  color: #9f1239;
}

body.student-page .account-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.student-page .account-metric {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
}

body.student-page .account-metric strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

body.student-page .account-metric span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

body.student-page .account-detail-list,
body.student-page .course-access-list {
  display: grid;
  gap: 8px;
}

body.student-page .account-detail-list div,
body.student-page .access-row {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
  text-align: left;
}

body.student-page .account-detail-list span,
body.student-page .access-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .account-detail-list strong,
body.student-page .access-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
}

body.student-page .student-table-mark-settings {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
}

body.student-page .table-mark-setting-row {
  display: grid;
  gap: 8px;
}

body.student-page .table-mark-setting-row > span,
body.student-page .table-mark-bold-toggle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .table-mark-color-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.student-page .table-mark-color-list button,
body.student-page .table-mark-toolbar-colors button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(157, 166, 186, 0.38);
  border-radius: 999px;
  background: var(--table-mark-bg, #fff7ed);
  color: var(--table-mark-text, #7a3451);
  font-size: 12px;
  font-weight: 950;
}

body.student-page .table-mark-color-list button.active,
body.student-page .table-mark-toolbar-colors button.active {
  border-color: rgba(10, 132, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

body.student-page .table-mark-bold-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

body.student-page .access-row {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: rgba(10, 132, 255, 0.12);
}

body.student-page .access-row em {
  color: var(--brand-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

/* 5.3 Student watch history: recent lesson resume rows. */
body.student-page .history-block {
  display: grid;
  gap: 10px;
}

body.student-page .section-mini-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.student-page .section-mini-heading strong {
  color: var(--ink);
  font-size: 15px;
}

body.student-page .section-mini-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

body.student-page .watch-history-list {
  display: grid;
  gap: 8px;
}

body.student-page .history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-align: left;
}

body.student-page .history-row strong,
body.student-page .history-row span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

body.student-page .history-row strong {
  font-size: 14px;
}

body.student-page .history-row span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

body.student-page .history-row i {
  display: block;
  height: 5px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(107, 114, 128, 0.18);
}

body.student-page .history-row i b {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

body.student-page .history-row em {
  color: var(--brand-dark);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 760px) {
  body.student-page .profile-summary-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    padding: 12px;
  }

  body.student-page .profile-avatar {
    width: 48px;
    height: 48px;
  }

  body.student-page .account-metric-grid {
    gap: 8px;
  }

  body.student-page .account-metric {
    min-height: 64px;
    padding: 10px;
  }

  body.student-page .account-metric strong {
    font-size: 18px;
  }

  body.student-page .account-detail-list div {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 1fr);
  }

  body.student-page .mobile-study-nav button {
    min-height: 42px;
    font-size: 12px;
  }

  body.student-page .network-pill {
    display: none;
  }
}

@media (max-width: 760px) {
  body.admin-page .upload-action-row {
    grid-template-columns: 1fr;
  }
}

/* 6.5 Mobile student app tabs: avoid one long waterfall page on phones. */
@media (max-width: 760px) {
  body.student-page .student-workspace {
    display: block;
    padding-bottom: 0;
  }

  body.student-page .student-main {
    display: block;
  }

  body.student-page #learningPanel,
  body.student-page #coursePanel,
  body.student-page #lessonPanel,
  body.student-page #playerPanel,
  body.student-page #materialsPanel,
  body.student-page #accountPanel,
  body.student-page #eventPanel {
    display: none;
  }

  body.student-page #learningPanel.active-mobile-panel,
  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #playerPanel.active-mobile-panel,
  body.student-page #materialsPanel.active-mobile-panel,
  body.student-page #accountPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    display: grid;
    animation: mobilePanelIn 180ms ease-out;
  }

  body.student-page #coursePanel.active-mobile-panel {
    margin-bottom: 12px;
  }

  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    margin-top: 12px;
  }

  body.student-page .art-player-panel.active-mobile-panel {
    min-height: calc(100dvh - 166px);
  }

  body.student-page[data-mobile-target="playerPanel"] .mobile-mini-player {
    display: none;
  }

  body.student-page .player-fullscreen-surface:fullscreen,
  body.student-page .player-fullscreen-surface:-webkit-full-screen,
  body.student-page .player-fullscreen-surface.cinema-mode {
    padding: 0;
    background: #000;
  }

  body.student-page .player-fullscreen-surface:fullscreen .video-stage,
  body.student-page .player-fullscreen-surface:-webkit-full-screen .video-stage,
  body.student-page .player-fullscreen-surface.cinema-mode .video-stage {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

@keyframes mobilePanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 7.1 dashboard redesign: platform-style teacher admin and modular learning workspace. */
body.admin-page .knowledge-preview-panel {
  overflow: hidden;
}

body.admin-page .knowledge-preview-shell {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.7fr);
  gap: 14px;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-card {
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.07);
}

body.admin-page .knowledge-sidebar {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

body.admin-page .knowledge-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.admin-page .knowledge-list {
  display: grid;
  gap: 8px;
}

body.admin-page .knowledge-list button,
body.admin-page .knowledge-outline-list button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--ink);
  text-align: left;
}

body.admin-page .knowledge-list button.active,
body.admin-page .knowledge-outline-list button.active {
  border-color: rgba(10, 132, 255, 0.38);
  background: rgba(10, 132, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .knowledge-list button strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-list button span {
  color: var(--muted);
  font-size: 12px;
}

body.admin-page .knowledge-list button.level-2,
body.admin-page .knowledge-outline-list button.level-2 {
  width: calc(100% - 18px);
  margin-left: 18px;
}

body.admin-page .knowledge-list button.level-3,
body.admin-page .knowledge-outline-list button.level-3 {
  width: calc(100% - 36px);
  margin-left: 36px;
}

body.admin-page .knowledge-list button.level-2 strong::before,
body.admin-page .knowledge-outline-list button.level-2 strong::before {
  content: "  ";
  white-space: pre;
}

body.admin-page .knowledge-list button.level-3 strong::before,
body.admin-page .knowledge-outline-list button.level-3 strong::before {
  content: "    ";
  white-space: pre;
}

body.admin-page .knowledge-main {
  display: grid;
  gap: 14px;
}

body.admin-page .knowledge-course-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(10, 132, 255, 0.18), transparent 28%),
    linear-gradient(145deg, #172033, #273865);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  color: #fff;
}

body.admin-page .knowledge-course-hero::after {
  content: "知";
  position: absolute;
  right: 18px;
  bottom: -42px;
  color: rgba(255, 255, 255, 0.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 129px;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .knowledge-hero-line,
body.admin-page .knowledge-hero-stats {
  position: relative;
  z-index: 1;
}

body.admin-page .knowledge-hero-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.admin-page .knowledge-hero-line span {
  color: rgba(211, 220, 255, 0.88);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

body.admin-page .knowledge-hero-line em {
  border: 1px solid rgba(53, 214, 164, 0.26);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(53, 214, 164, 0.14);
  color: #9befd5;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

body.admin-page .knowledge-course-hero h3 {
  position: relative;
  z-index: 1;
  margin: 10px 0 4px;
  color: #fff;
  font-size: clamp(22px, 2.7vw, 34px);
  letter-spacing: 0;
}

body.admin-page .knowledge-course-hero p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(226, 232, 255, 0.82);
  line-height: 1.55;
}

body.admin-page .knowledge-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  max-width: 520px;
}

body.admin-page .knowledge-hero-stats span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(231, 235, 255, 0.8);
  font-size: 12px;
  font-weight: 750;
}

body.admin-page .knowledge-hero-stats strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
}

body.admin-page .knowledge-hero-progress {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 6px;
  max-width: 520px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

body.admin-page .knowledge-hero-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7a8cff, #b6c0ff);
  transition: width 240ms ease;
}

body.admin-page .knowledge-flow-tabs {
  position: sticky;
  top: 10px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

body.admin-page .knowledge-flow-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #7c8799;
  font-weight: 850;
}

body.admin-page .knowledge-flow-tabs button.active,
body.admin-page .knowledge-flow-tabs button:hover {
  background: rgba(10, 132, 255, 0.1);
  color: var(--brand);
}

body.admin-page .knowledge-top-grid,
body.admin-page .knowledge-work-grid {
  display: grid;
  gap: 14px;
}

body.admin-page .knowledge-top-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

body.admin-page .knowledge-work-grid {
  grid-template-columns: minmax(220px, 0.68fr) minmax(0, 1.32fr);
}

body.admin-page .knowledge-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

body.admin-page .knowledge-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(107, 114, 128, 0.12);
  padding-bottom: 10px;
}

body.admin-page .knowledge-card-head strong {
  font-size: 16px;
}

body.admin-page .knowledge-card-head span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-file-row {
  display: grid;
  gap: 8px;
}

body.admin-page .knowledge-card textarea {
  min-height: 132px;
  border-color: rgba(229, 234, 241, 0.95);
  background: rgba(255, 255, 255, 0.86);
}

body.admin-page .mind-file-preview {
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.84)),
    radial-gradient(circle at 24px 24px, rgba(10, 132, 255, 0.12) 0 3px, transparent 3px);
  background-size: auto, 28px 28px;
  color: var(--ink);
  text-align: center;
}

body.admin-page .mind-file-preview.empty {
  padding: 24px;
  border-style: dashed;
}

body.admin-page .mind-file-preview strong {
  display: block;
  font-size: 18px;
}

body.admin-page .mind-file-preview span {
  display: block;
  max-width: 360px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

body.admin-page .mind-file-preview img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

body.admin-page .knowledge-image-uploader {
  display: block;
}

body.admin-page .knowledge-image-uploader input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.admin-page .knowledge-image-preview {
  display: grid;
  place-items: center;
  min-height: 210px;
  overflow: hidden;
  border: 1.5px dashed rgba(10, 132, 255, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.74)),
    radial-gradient(circle at 18% 20%, rgba(10, 132, 255, 0.12), transparent 24%);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.admin-page .knowledge-image-preview:hover {
  border-color: rgba(10, 132, 255, 0.68);
  box-shadow: 0 14px 34px rgba(10, 132, 255, 0.12);
  transform: translateY(-1px);
}

body.admin-page .knowledge-image-preview.empty {
  padding: 24px;
}

body.admin-page .knowledge-image-preview strong {
  display: block;
  font-size: 18px;
}

body.admin-page .knowledge-image-preview em {
  display: block;
  max-width: 320px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

body.admin-page .knowledge-image-preview img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
  background: rgba(248, 250, 252, 0.88);
}

body.admin-page .knowledge-table-preview {
  display: grid;
  gap: 12px;
}

body.admin-page .knowledge-table-preview table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(229, 234, 241, 0.96);
  border-radius: 8px;
  background: #fff;
}

body.admin-page .knowledge-table-preview th,
body.admin-page .knowledge-table-preview td {
  border-bottom: 1px solid rgba(229, 234, 241, 0.96);
  padding: 12px 14px;
  line-height: 1.55;
  vertical-align: top;
}

body.admin-page .knowledge-table-preview tr:last-child th,
body.admin-page .knowledge-table-preview tr:last-child td {
  border-bottom: 0;
}

body.admin-page .knowledge-table-preview th {
  width: 132px;
  background: rgba(248, 250, 252, 0.96);
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
}

body.admin-page .knowledge-table-preview td {
  color: var(--ink);
  font-size: 14px;
  font-weight: 620;
}

body.admin-page .knowledge-table-empty {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: 8px;
  padding: 16px;
  background: rgba(248, 250, 252, 0.76);
  color: var(--muted);
  font-size: 13px;
}

body.admin-page .knowledge-table-map {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 18px 18px, rgba(10, 132, 255, 0.08) 0 2px, transparent 2px),
    linear-gradient(145deg, rgba(10, 132, 255, 0.06), rgba(255, 255, 255, 0.86));
  background-size: 18px 18px, auto;
}

body.admin-page .knowledge-table-map > strong {
  justify-self: start;
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px rgba(10, 132, 255, 0.18);
}

body.admin-page .knowledge-table-map > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

body.admin-page .knowledge-table-map span {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(229, 234, 241, 0.96);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
}

body.admin-page .knowledge-table-map b {
  color: var(--brand-dark);
  font-size: 13px;
}

body.admin-page .knowledge-table-map em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

body.admin-page .module-builder {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(10, 132, 255, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(10, 132, 255, 0.06), rgba(255, 255, 255, 0.92));
}

body.admin-page .module-builder-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

body.admin-page .module-builder-head div {
  display: grid;
  gap: 4px;
}

body.admin-page .module-builder-head strong {
  color: var(--ink);
  font-size: 16px;
}

body.admin-page .module-builder-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .module-add-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.admin-page .knowledge-module-list {
  display: grid;
  gap: 12px;
}

body.admin-page .knowledge-module-card {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(229, 234, 241, 0.96);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

body.admin-page .module-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

body.admin-page .module-card-head span {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(10, 132, 255, 0.09);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .knowledge-module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

body.admin-page .knowledge-module-card textarea {
  min-height: 150px;
  resize: vertical;
}

body.admin-page .module-table-preview {
  margin-top: 6px;
  overflow-x: auto;
}

body.admin-page .module-table-preview table,
body.admin-page .modal-table-preview table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  table-layout: fixed;
  font-size: 14px;
}

body.admin-page .module-table-preview th,
body.admin-page .module-table-preview td,
body.admin-page .modal-table-preview th,
body.admin-page .modal-table-preview td {
  border-bottom: 1px solid #e6eef8;
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  word-break: break-word;
}

body.admin-page .module-table-preview th,
body.admin-page .modal-table-preview th {
  width: 30%;
  border-right: 1px solid #e6eef8;
  background: #f6f9fc;
  color: #0f172a;
  font-weight: 850;
}

body.admin-page .module-table-preview td,
body.admin-page .modal-table-preview td {
  color: #243044;
}

body.admin-page .module-table-preview tr:last-child th,
body.admin-page .module-table-preview tr:last-child td,
body.admin-page .modal-table-preview tr:last-child th,
body.admin-page .modal-table-preview tr:last-child td {
  border-bottom: 0;
}

body.admin-page .module-file-row {
  display: grid;
  gap: 10px;
}

body.admin-page .module-file-picker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--brand-dark);
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
}

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

body.admin-page .module-file-empty,
body.admin-page .module-file-ready {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

body.admin-page .module-file-ready a {
  color: var(--brand);
  font-weight: 850;
}

body.admin-page .module-file-preview {
  display: grid;
  gap: 8px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(229, 234, 241, 0.96);
  border-radius: 8px;
  padding: 10px;
  background: rgba(248, 250, 252, 0.88);
}

body.admin-page .module-file-preview img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

body.admin-page .module-file-preview video {
  width: 100%;
  max-height: 360px;
  border-radius: 6px;
  background: #0f172a;
}

body.admin-page .module-file-preview audio {
  width: 100%;
}

body.admin-page .module-file-preview figcaption,
body.admin-page .module-file-preview span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .mind-node-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

body.admin-page .mind-node-cluster {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.82));
}

body.admin-page .mind-node-cluster span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .knowledge-outline-list {
  display: grid;
  gap: 10px;
}

body.admin-page .outline-group {
  display: grid;
  gap: 7px;
}

body.admin-page .outline-group > strong {
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--brand-dark);
  font-size: 13px;
}

body.admin-page .knowledge-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.admin-page .knowledge-asset-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-page .knowledge-asset-summary span {
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(10, 132, 255, 0.06);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

body.admin-page .knowledge-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-page .knowledge-action-row.compact-left {
  justify-content: flex-start;
}

body.admin-page .module-search-input {
  width: 100%;
  margin-top: 10px;
}

body.admin-page .module-palette {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

body.admin-page .module-palette-group {
  display: grid;
  gap: 8px;
}

body.admin-page .module-palette-group > strong {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
}

body.admin-page .module-palette-group > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

body.admin-page .module-palette-item {
  display: grid;
  gap: 4px;
  min-height: 74px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

body.admin-page .module-palette-item:hover,
body.admin-page .module-palette-item.active {
  border-color: rgba(10, 132, 255, 0.55);
  background: rgba(10, 132, 255, 0.08);
}

body.admin-page .module-palette-item span {
  font-size: 14px;
  font-weight: 850;
}

body.admin-page .module-palette-item em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

body.admin-page .knowledge-module-card.collapsed .module-card-body {
  display: none;
}

body.admin-page .module-card-head {
  gap: 10px;
}

body.admin-page .module-card-head > div:first-child {
  display: grid;
  gap: 2px;
}

body.admin-page .module-card-head em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

body.admin-page .module-card-actions,
body.admin-page .module-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.admin-page .module-meta-row {
  margin: 8px 0;
}

body.admin-page .module-meta-row label {
  min-width: 130px;
}

body.admin-page .inline-check {
  display: inline-flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  min-width: auto;
  font-size: 13px;
  font-weight: 750;
}

body.student-page .knowledge-study-panel,
body.student-page .review-panel {
  display: grid;
  gap: 16px;
}

body.student-page .knowledge-progress-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(10, 132, 255, 0.15);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(255, 255, 255, 0.9));
}

body.student-page .knowledge-progress-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .knowledge-progress-card strong {
  font-size: 26px;
}

body.student-page .knowledge-progress-card i {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(10, 132, 255, 0.12);
}

body.student-page .knowledge-progress-card b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
}

body.student-page .student-knowledge-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
}

body.student-page .student-chapter-list,
body.student-page .student-knowledge-detail,
body.student-page .review-list,
body.student-page .student-module-list {
  display: grid;
  gap: 12px;
}

body.student-page .student-chapter-card,
body.student-page .student-module-card,
body.student-page .review-card {
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

body.student-page .student-chapter-title,
body.student-page .student-topic-list button,
body.student-page .review-card {
  width: 100%;
  text-align: left;
}

body.student-page .student-chapter-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

body.student-page .chapter-media-row {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

body.student-page .chapter-media-row button {
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(10, 132, 255, 0.08);
  color: var(--brand-dark);
  font-weight: 850;
}

body.student-page .student-topic-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

body.student-page .student-topic-list button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

body.student-page .student-topic-list button.active {
  border-color: rgba(10, 132, 255, 0.65);
  background: rgba(10, 132, 255, 0.08);
}

body.student-page .status-mastered {
  color: #087443;
}

body.student-page .status-review {
  color: #b54708;
}

body.student-page .status-unmarked {
  color: var(--muted);
}

body.student-page .knowledge-detail-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(229, 234, 241, 0.95);
  padding-bottom: 12px;
}

body.student-page .knowledge-detail-top span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .knowledge-detail-top h3 {
  margin: 4px 0 0;
  font-size: 24px;
}

body.student-page .knowledge-status-actions {
  display: flex;
  gap: 8px;
}

body.student-page .knowledge-status-actions .active {
  border-color: rgba(10, 132, 255, 0.65);
}

body.student-page .student-module-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

body.student-page .student-module-head span {
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

body.student-page .student-module-head strong {
  font-size: 17px;
}

body.student-page .student-knowledge-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
}

body.student-page .student-table-recite {
  display: grid;
  gap: 10px;
}

body.student-page .student-table-recite-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(221, 199, 226, 0.72);
  border-radius: 14px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #fff4f7, #f2f7ff);
}

body.student-page .student-table-recite-toolbar span {
  color: #72516d;
  font-size: 13px;
  font-weight: 950;
}

body.student-page .student-table-recite-toolbar div {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.student-page .student-table-recite-toolbar button {
  min-height: 32px;
  border: 1px solid rgba(167, 139, 153, 0.3);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #6d5b68;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .student-table-recite-toolbar button.active {
  border-color: rgba(226, 141, 167, 0.52);
  background: #f7dbe5;
  color: #7a3451;
}

body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  border: 1px solid rgba(229, 234, 241, 0.95);
  padding: 10px;
  vertical-align: top;
}

body.student-page .student-knowledge-table th {
  width: 30%;
  background: rgba(10, 132, 255, 0.06);
  color: var(--brand-dark);
}

body.student-page .student-table-self-index {
  display: none;
  color: #8b6b7b;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

body.student-page .student-table-answer {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

body.student-page .student-table-answer > em {
  display: none;
  color: #9b6a7f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .student-keyword-cloze {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  margin: 0 2px;
  border: 0;
  border-radius: 8px;
  padding: 1px 5px;
  background: rgba(247, 219, 229, 0.65);
  color: inherit;
  font: inherit;
  line-height: 1.35;
  vertical-align: baseline;
  box-shadow: none;
}

body.student-page .student-keyword-cloze em {
  display: none;
  color: #9b4f69;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  line-height: 1.2;
}

body.student-page .student-table-recite.mode-keyword .student-keyword-cloze:not(.revealed) span {
  visibility: hidden;
}

body.student-page .student-table-recite.mode-keyword .student-keyword-cloze:not(.revealed) em {
  display: block;
}

body.student-page .student-table-recite.mode-keyword .student-keyword-cloze:not(.revealed) {
  min-width: 64px;
  border: 1px dashed rgba(179, 134, 153, 0.46);
  background: #fff7fa;
}

body.student-page .student-table-recite.mode-keyword .student-keyword-cloze.revealed {
  background: #edf7ee;
  color: #35664b;
}

body.student-page .student-table-recite.mode-dimension .student-table-answer,
body.student-page .student-table-recite.mode-self .student-table-answer {
  border: 1px dashed rgba(179, 134, 153, 0.42);
  padding: 8px;
  background: linear-gradient(135deg, #fff7fa, #f7f4ec);
}

body.student-page .student-table-recite.mode-dimension .student-table-answer:not(.revealed) .student-table-answer-text,
body.student-page .student-table-recite.mode-self .student-table-answer:not(.revealed) .student-table-answer-text {
  visibility: hidden;
}

body.student-page .student-table-recite.mode-dimension .student-table-answer:not(.revealed) > em,
body.student-page .student-table-recite.mode-self .student-table-answer:not(.revealed) > em {
  display: block;
}

body.student-page .student-table-recite.mode-dimension .student-table-answer.revealed,
body.student-page .student-table-recite.mode-self .student-table-answer.revealed {
  border-color: rgba(104, 146, 124, 0.5);
  background: #f2f7ee;
}

body.student-page .student-table-recite.mode-self .student-table-dimension-text {
  display: none;
}

body.student-page .student-table-recite.mode-self .student-table-self-index {
  display: inline;
}

body.student-page .student-module-image {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-align: left;
}

body.student-page .student-module-image img {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border: 1px solid rgba(229, 234, 241, 0.95);
  border-radius: 8px;
  background: #f8fafc;
}

body.student-page .student-module-video,
body.student-page .student-module-audio {
  width: 100%;
}

body.student-page .student-quiz-text {
  white-space: pre-wrap;
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
  color: var(--text);
  font: inherit;
}

body.student-page .review-card {
  display: grid;
  gap: 5px;
  color: var(--text);
}

body.student-page .review-card span,
body.student-page .review-card em {
  color: var(--muted);
  font-style: normal;
}

body.student-page .image-viewer {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-rows: auto 1fr;
  background: rgba(3, 7, 18, 0.92);
  overscroll-behavior: contain;
  touch-action: none;
}

body.student-page .image-viewer.hidden {
  display: none;
}

body.student-page .image-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: #fff;
}

/* r188: keep the immersive memory feed full-screen on tablet viewports. */
@media (min-width: 760px) and (max-width: 1180px) {
  body.student-page[data-mobile-target="podcastPanel"] {
    overflow: hidden;
    background: #171219;
  }

  body.student-page[data-mobile-target="podcastPanel"] .topbar,
  body.student-page[data-mobile-target="podcastPanel"] #studentAssistantFab.student-planner-fab,
  body.student-page[data-mobile-target="podcastPanel"] .student-planner-fab,
  body.student-page[data-mobile-target="podcastPanel"] .student-assistant-fab,
  body.student-page[data-mobile-target="podcastPanel"] .mobile-mini-player,
  body.student-page[data-mobile-target="podcastPanel"] .module-podcast-dock {
    display: none !important;
  }

  body.student-page[data-mobile-target="podcastPanel"] .app-shell,
  body.student-page[data-mobile-target="podcastPanel"] .student-workspace,
  body.student-page[data-mobile-target="podcastPanel"] .student-main {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0 !important;
    gap: 0;
  }

  body.student-page #podcastPanel.active-mobile-panel {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh !important;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #171219 !important;
    box-shadow: none;
  }

  body.student-page #podcastPanel .memory-feed-shell,
  body.student-page #podcastPanel .memory-feed-list,
  body.student-page #podcastPanel .memory-feed-card {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  body.student-page #podcastPanel .memory-feed-toolbar {
    position: fixed;
    top: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 6px;
  }

  body.student-page #podcastPanel .memory-feed-search {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: max(18px, calc((100vw - 760px) / 2));
    right: max(18px, calc((100vw - 760px) / 2));
  }

  body.student-page #podcastPanel .memory-feed-slide img {
    position: relative;
    z-index: 1;
    object-position: center;
  }

  body.student-page #podcastPanel .memory-feed-slide {
    position: relative;
    isolation: isolate;
  }

  body.student-page #podcastPanel .memory-feed-slide::before {
    position: absolute;
    z-index: 0;
    inset: -30px;
    background: #171219 var(--memory-feed-backdrop-image) center / cover no-repeat;
    content: "";
    filter: blur(26px) brightness(0.56) saturate(0.82);
    opacity: 0.92;
    transform: scale(1.08);
  }

  body.student-page #podcastPanel .memory-feed-actions {
    bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-copy {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-audio {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

body.student-page .image-viewer-toolbar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 850;
}

body.student-page .image-viewer-toolbar #imageViewerCaption {
  flex: 1 1 auto;
  min-width: 0;
}

body.student-page .image-viewer-toolbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

body.student-page .image-viewer-zoom {
  min-width: 54px;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(23, 139, 255, 0.12);
  color: #1769aa;
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.student-page .image-viewer img {
  align-self: center;
  justify-self: center;
  max-width: 92vw;
  max-height: 82vh;
  object-fit: contain;
  touch-action: none;
  cursor: grab;
  user-select: none;
  will-change: transform;
  transform-origin: center center;
}

body.student-page .image-viewer img.is-zoomed {
  cursor: move;
}

body.student-page .image-viewer-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  background: #05070a;
}

body.student-page .image-viewer-stage > img,
body.student-page .image-deep-zoom-viewer {
  grid-area: 1 / 1;
}

body.student-page .image-deep-zoom-viewer {
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
  background: #05070a;
}

body.student-page .image-deep-zoom-viewer.hidden,
body.student-page .image-viewer-stage > img.hidden,
body.student-page .image-viewer-loading.hidden {
  display: none !important;
}

body.student-page .image-viewer-loading {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 10px 15px;
  background: rgba(15, 23, 42, 0.84);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

/* Museum-style deep zoom viewer: preserve a dark, edge-to-edge image stage. */
body.student-page.image-viewer-open .image-viewer {
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070a !important;
  box-shadow: none !important;
}

@media (max-width: 1100px) {
  body.admin-page .knowledge-preview-shell,
  body.admin-page .knowledge-top-grid,
  body.admin-page .knowledge-work-grid {
    grid-template-columns: 1fr;
  }

  body.admin-page .knowledge-asset-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.student-page .student-knowledge-layout {
    grid-template-columns: 1fr;
  }

  body.student-page .knowledge-detail-top,
  body.student-page .knowledge-status-actions {
    flex-direction: column;
  }

  body.student-page .knowledge-status-actions button {
    width: 100%;
  }
}

/* 7.1 teacher dashboard redesign: clean SaaS-style admin shell. */
body.admin-page {
  color-scheme: light;
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e5eaf1;
  --brand: #0a84ff;
  --brand-dark: #0969da;
  --accent: #22c55e;
  --danger: #ef4444;
  --danger-soft: #fff1f2;
  --success: #16a34a;
  --shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
}

body.admin-page .art-wallpaper {
  display: none;
}

body.admin-page .app-shell {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body.admin-page .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 58px;
  margin: 0;
  padding: 0 20px 0 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

body.admin-page .brand-lockup {
  width: 220px;
  height: 58px;
  padding: 0 18px;
  border-right: 1px solid var(--line);
  gap: 10px;
  background: #fff;
}

body.admin-page .brand-lockup::after {
  content: "知识搭建  >  中国美术史  >  知识点编辑";
  position: fixed;
  top: 20px;
  left: 260px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

body.admin-page .brand-mark {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

body.admin-page .brand-lockup .eyebrow {
  display: none;
}

body.admin-page .brand-lockup h1 {
  max-width: 132px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .player-actions {
  gap: 10px;
  margin-left: auto;
}

body.admin-page .admin-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px 6px 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .admin-user-chip span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eaf4ff, #dbeeff);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.admin-page .version-pill,
body.admin-page .link-button,
body.admin-page .secondary,
body.admin-page .primary {
  border-radius: 8px;
  min-height: 36px;
  padding: 8px 14px;
  font-weight: 800;
}

body.admin-page .version-pill {
  border: 1px solid #cfe3ff;
  background: #eff6ff;
  color: var(--brand-dark);
}

body.admin-page .link-button,
body.admin-page .secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

body.admin-page .primary {
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.22);
}

body.admin-page .admin-dashboard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 58px);
}

body.admin-page .admin-command-center {
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow: auto;
  align-self: start;
  display: block;
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  background: #fff;
}

body.admin-page .command-copy {
  margin-bottom: 16px;
  border: 0;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
}

body.admin-page .command-copy .eyebrow {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

body.admin-page .command-copy h2 {
  display: none;
}

body.admin-page .command-copy p:not(.eyebrow) {
  display: none;
}

body.admin-page .dashboard-stat-grid,
body.admin-page .storage-note {
  display: none;
}

body.admin-page .category-grid {
  display: none;
}

body.admin-page .admin-side-menu {
  display: grid;
  gap: 6px;
}

body.admin-page .admin-side-menu strong {
  margin: 16px 10px 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

body.admin-page .admin-side-menu strong:first-child {
  margin-top: 4px;
}

body.admin-page .admin-side-menu button {
  display: flex;
  align-items: center;
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

body.admin-page .admin-side-menu button::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
}

body.admin-page .admin-side-menu button:hover,
body.admin-page .admin-side-menu button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .admin-side-menu button.active::before {
  border-color: #8ec5ff;
  background: #dbeeff;
}

body.admin-page .module-tile {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  grid-template-columns: 28px 1fr;
  padding: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
}

body.admin-page .module-tile:hover,
body.admin-page .module-tile.active {
  border: 0;
  background: #eaf4ff;
  color: var(--brand-dark);
  box-shadow: none;
}

body.admin-page .tile-icon {
  width: 24px;
  height: 24px;
  border: 1px solid #cfe3ff;
  border-radius: 6px;
  background: #f0f7ff;
  color: var(--brand);
  font-size: 12px;
}

body.admin-page .module-tile strong {
  align-self: center;
  font-size: 14px;
}

body.admin-page .module-tile small {
  display: none;
}

body.admin-page .admin-panels {
  min-width: 0;
  padding: 14px 16px 36px;
  gap: 12px;
}

body.admin-page .nested-nav {
  display: none;
  grid-template-columns: repeat(4, minmax(110px, auto));
  justify-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}

body.admin-page .nested-nav.active {
  display: grid;
}

body.admin-page .nested-nav button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

body.admin-page .nested-nav button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .panel,
body.admin-page .module-panel,
body.admin-page .knowledge-card,
body.admin-page .sub-panel,
body.admin-page .course-card,
body.admin-page .lesson-card,
body.admin-page .student-card,
body.admin-page .record-card,
body.admin-page .event-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow);
}

body.admin-page .panel::before {
  display: none;
}

body.admin-page label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

body.admin-page input,
body.admin-page select,
body.admin-page textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus {
  border-color: #8ec5ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.14);
  outline: 0;
}

body.admin-page .knowledge-preview-panel {
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-page .knowledge-preview-panel > .panel-heading {
  display: none;
}

body.admin-page .knowledge-preview-shell {
  display: grid;
  grid-template-columns: 250px minmax(520px, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-main,
body.admin-page .knowledge-right-rail {
  min-width: 0;
}

body.admin-page .knowledge-sidebar {
  position: sticky;
  top: 132px;
  max-height: calc(100vh - 150px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}

body.admin-page .knowledge-main {
  display: grid;
  gap: 14px;
}

body.admin-page .knowledge-right-rail {
  position: sticky;
  top: 132px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

body.admin-page .knowledge-course-hero {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
}

body.admin-page .knowledge-hero-line span {
  color: var(--muted);
}

body.admin-page .knowledge-hero-line em {
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
}

body.admin-page .knowledge-course-hero h3 {
  color: var(--ink);
  font-size: 20px;
}

body.admin-page .knowledge-flow-tabs {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}

body.admin-page .knowledge-flow-tabs button {
  color: var(--muted);
}

body.admin-page .knowledge-flow-tabs button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .knowledge-top-grid,
body.admin-page .knowledge-work-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

body.admin-page .knowledge-card {
  padding: 16px;
}

body.admin-page .knowledge-card-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

body.admin-page .knowledge-card-head strong {
  color: var(--ink);
}

body.admin-page .knowledge-card-head span {
  color: var(--muted);
}

body.admin-page .knowledge-list button,
body.admin-page .knowledge-outline-list button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

body.admin-page .knowledge-list button:hover,
body.admin-page .knowledge-list button.active,
body.admin-page .knowledge-outline-list button.active {
  border-color: #b8dcff;
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .knowledge-create-row {
  grid-template-columns: minmax(0, 1fr);
}

body.admin-page .knowledge-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(170px, 0.7fr);
  gap: 12px;
  margin-bottom: 12px;
}

body.admin-page .mastery-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

body.admin-page .mastery-row span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .mastery-row span.active {
  border-color: #9cc9ff;
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .mastery-row span.complete {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

body.admin-page .module-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 6px 0 12px;
  color: var(--muted);
}

body.admin-page .module-section-title strong {
  color: var(--ink);
  font-size: 16px;
}

body.admin-page .knowledge-module-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

body.admin-page .knowledge-module-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

body.admin-page .module-card-head {
  border-bottom: 1px solid var(--line);
  padding: 12px;
}

body.admin-page .module-card-body {
  padding: 12px;
}

body.admin-page .module-card-actions .compact-link {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 12px;
}

body.admin-page .action-rail-card {
  padding: 10px;
}

body.admin-page .action-rail-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .action-rail-buttons .compact-link {
  justify-content: center;
  text-align: center;
}

body.admin-page .module-library-card .module-add-row {
  grid-template-columns: 1fr;
}

body.admin-page .module-library-card .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .module-palette-item {
  min-height: 68px;
  border-color: var(--line);
  background: #fff;
  text-align: center;
}

body.admin-page .module-palette-item span {
  font-size: 12px;
}

body.admin-page .module-palette-item em {
  display: none;
}

body.admin-page .tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-page .tag-cloud span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef2f7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .data-grid span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

body.admin-page .data-grid strong {
  color: var(--ink);
  font-size: 17px;
}

body.admin-page .quiz-source-field {
  margin-top: 14px;
}

body.admin-page .quiz-builder-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

body.admin-page .quiz-builder-toolbar div {
  display: grid;
  gap: 2px;
}

body.admin-page .quiz-builder-toolbar strong {
  color: var(--ink);
  font-size: 15px;
}

body.admin-page .quiz-builder-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .quiz-question-editor-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body.admin-page .quiz-empty-state,
body.admin-page .quiz-question-editor-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

body.admin-page .quiz-empty-state {
  display: grid;
  gap: 5px;
  color: var(--muted);
}

body.admin-page .quiz-empty-state strong {
  color: var(--ink);
}

body.admin-page .quiz-question-editor-card {
  display: grid;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

body.admin-page .quiz-question-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

body.admin-page .quiz-question-editor-card p {
  color: var(--ink);
  line-height: 1.55;
}

body.admin-page .quiz-question-editor-card em,
body.admin-page .quiz-question-editor-card small {
  color: var(--muted);
  font-style: normal;
}

body.admin-page .quiz-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .quiz-choice-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #f8fafc;
  color: var(--ink);
}

@media (max-width: 1290px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 900px) {
  body.admin-page .topbar {
    padding-right: 10px;
  }

  body.admin-page .brand-lockup {
    width: auto;
    min-width: 180px;
  }

  body.admin-page .brand-lockup::after {
    display: none;
  }

  body.admin-page .admin-dashboard,
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 1fr;
  }

  body.admin-page .admin-command-center,
  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail {
    position: static;
    height: auto;
    max-height: none;
  }
}

/* 8.8: reference-style course editor shell, closer to the clean SaaS layout. */
body.admin-page .brand-lockup::after {
  display: none;
}

body.admin-page .admin-breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

body.admin-page .admin-breadcrumb span,
body.admin-page .admin-breadcrumb strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-breadcrumb span::after {
  content: ">";
  margin-left: 9px;
  color: #b6c2d2;
}

body.admin-page .admin-breadcrumb strong {
  color: var(--ink);
  font-weight: 900;
}

body.admin-page .nested-nav,
body.admin-page .nested-nav.active {
  display: none;
}

body.admin-page .admin-panels {
  padding-top: 16px;
}

body.admin-page .knowledge-preview-shell {
  grid-template-columns: 250px minmax(560px, 1fr) 320px;
}

body.admin-page .knowledge-side-course-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

body.admin-page .knowledge-side-course-card img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

body.admin-page .knowledge-side-course-card strong,
body.admin-page .knowledge-side-course-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-side-course-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

body.admin-page .knowledge-side-course-card span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

body.admin-page .knowledge-search-field {
  gap: 7px;
}

body.admin-page .knowledge-search-field input {
  min-height: 40px;
}

body.admin-page .knowledge-side-progress {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.admin-page .progress-ring-lite {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 8px solid #dbeeff;
  border-top-color: var(--brand);
  border-radius: 50%;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.admin-page .knowledge-side-progress strong,
body.admin-page .knowledge-side-progress span {
  display: block;
}

body.admin-page .knowledge-side-progress strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

body.admin-page .knowledge-side-progress span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

body.admin-page .knowledge-course-hero,
body.admin-page .knowledge-flow-tabs {
  display: none;
}

body.admin-page .knowledge-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.admin-page .knowledge-work-grid {
  order: 1;
  display: grid;
  grid-template-columns: 1fr;
}

body.admin-page .knowledge-work-grid .outline-card {
  display: none;
}

body.admin-page .knowledge-work-grid .detail-card {
  min-height: 0;
}

body.admin-page .knowledge-top-grid {
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin-page .knowledge-card-head {
  min-height: 34px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

body.admin-page .knowledge-card-head strong {
  color: var(--ink);
  font-size: 16px;
}

body.admin-page .knowledge-edit-row {
  grid-template-columns: minmax(0, 1fr) 180px;
}

body.admin-page .mastery-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.admin-page .module-section-title {
  margin-top: 4px;
}

body.admin-page .knowledge-module-list {
  gap: 10px;
}

body.admin-page .knowledge-module-card {
  border-radius: 8px;
  padding: 12px;
}

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

body.admin-page .module-card-title {
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

body.admin-page .module-card-title i {
  color: #94a3b8;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}

body.admin-page .module-card-title b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #eaf4ff;
  color: var(--brand-dark);
  font-size: 12px;
}

body.admin-page .module-card-title span,
body.admin-page .module-card-title em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .module-card-title span {
  color: var(--ink);
  font-weight: 950;
}

body.admin-page .module-card-title em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

body.admin-page .module-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

body.admin-page .module-visible-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  margin-left: 2px;
}

body.admin-page .module-visible-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.admin-page .module-visible-switch span {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #dbe6f3;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: 0.18s ease;
}

body.admin-page .module-visible-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: 0.18s ease;
}

body.admin-page .module-visible-switch input:checked + span {
  background: var(--brand);
}

body.admin-page .module-visible-switch input:checked + span::after {
  transform: translateX(16px);
}

body.admin-page .quiz-builder-toolbar {
  align-items: center;
}

body.admin-page .quiz-builder-toolbar > div {
  display: grid;
  gap: 3px;
}

body.admin-page .quiz-question-editor-card {
  border-radius: 8px;
  background: #fff;
}

@media (max-width: 1290px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  body.admin-page .admin-breadcrumb {
    display: none;
  }

  body.admin-page .knowledge-top-grid,
  body.admin-page .knowledge-edit-row {
    grid-template-columns: 1fr;
  }
}

/* 8.8: finer reference-image polish for tree, modules, and module palette. */
body.admin-page .knowledge-list button .tree-index {
  color: var(--brand-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
}

body.admin-page .chapter-tree-item .tree-title-line {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 5px;
  align-items: center;
}

body.admin-page .chapter-tree-item .tree-title-line i {
  color: #64748b;
  font-size: 13px;
  font-style: normal;
}

body.admin-page .module-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-page .module-bulk-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .module-bulk-actions .compact-link {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

body.admin-page .module-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
}

body.admin-page .module-category-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .module-category-tabs button.active {
  box-shadow: inset 0 -2px 0 var(--brand);
  color: var(--brand-dark);
}

body.admin-page .module-library-card .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .module-palette-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 76px;
  border-color: var(--line);
  background: #fff;
  text-align: center;
}

body.admin-page .module-palette-item:hover {
  border-color: #9cc9ff;
  background: #f3f9ff;
  transform: translateY(-1px);
}

body.admin-page .module-palette-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border: 1px solid #cfe3ff;
  border-radius: 7px;
  background: #eaf4ff;
  color: var(--brand-dark);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

body.admin-page .module-palette-item span {
  font-size: 12px;
  line-height: 1.25;
}

/* 8.8: denser center editor, closer to the reference content-module list. */
body.admin-page .knowledge-editor-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

body.admin-page .knowledge-editor-panel .knowledge-edit-row {
  margin-bottom: 10px;
}

body.admin-page .knowledge-editor-panel label {
  gap: 7px;
}

body.admin-page .knowledge-editor-panel input,
body.admin-page .knowledge-editor-panel select {
  min-height: 40px;
  font-size: 14px;
}

body.admin-page .knowledge-editor-panel .mastery-row {
  margin-bottom: 0;
}

body.admin-page .knowledge-editor-panel .mastery-row span {
  min-height: 34px;
  border-radius: 7px;
  font-size: 12px;
}

body.admin-page .module-section-title {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

body.admin-page .knowledge-module-card {
  overflow: hidden;
  padding: 0;
}

body.admin-page .knowledge-module-card .module-card-head {
  padding: 10px 12px;
  background: #fff;
}

body.admin-page .knowledge-module-card .module-card-body {
  display: grid;
  gap: 10px;
  padding: 10px 12px 12px;
  background: #fff;
}

body.admin-page .module-card-title {
  grid-template-columns: 16px 24px minmax(0, 1fr);
}

body.admin-page .module-card-title b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

body.admin-page .module-card-actions .compact-link {
  min-height: 28px;
  border: 0;
  padding: 4px 7px;
  background: transparent;
  color: var(--brand-dark);
  box-shadow: none;
}

body.admin-page .module-card-actions .danger-soft {
  color: #dc2626;
}

body.admin-page .module-meta-row {
  grid-template-columns: minmax(150px, 0.8fr) repeat(2, minmax(120px, 0.6fr));
  gap: 8px;
}

body.admin-page .module-meta-row label {
  min-height: 34px;
}

body.admin-page .module-card-body > label:first-child {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

body.admin-page .module-card-body > label:first-child input,
body.admin-page .module-meta-row select {
  min-height: 36px;
}

body.admin-page .knowledge-module-card p {
  border-left: 3px solid #dbeeff;
  padding-left: 8px;
  color: #64748b;
}

body.admin-page .knowledge-module-card textarea {
  min-height: 96px;
}

body.admin-page .module-file-row {
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: start;
}

body.admin-page .module-file-picker {
  min-height: 36px;
  padding: 8px 10px;
}

body.admin-page .module-file-preview {
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  align-items: center;
}

body.admin-page .module-file-preview img,
body.admin-page .module-file-preview video {
  max-height: 126px;
}

body.admin-page .add-module-inline {
  width: 100%;
  min-height: 38px;
  border: 1px dashed #9cc9ff;
  border-radius: 8px;
  background: #fff;
  color: var(--brand-dark);
  box-shadow: none;
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .add-module-inline:hover {
  background: #f3f9ff;
}

/* 8.8: right rail settings and realtime data match the reference card rhythm. */
body.admin-page .setting-field-stack {
  display: grid;
  gap: 12px;
}

body.admin-page .setting-field-stack input,
body.admin-page .setting-field-stack textarea {
  min-height: 38px;
  background: #fff;
  font-size: 13px;
}

body.admin-page .setting-field-stack textarea {
  min-height: 78px;
  resize: vertical;
}

body.admin-page .setting-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .setting-label-row .compact-link {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

body.admin-page .setting-meta-list {
  display: grid;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

body.admin-page .setting-meta-list strong {
  color: var(--ink);
  font-weight: 800;
}

body.admin-page .data-card {
  gap: 14px;
}

body.admin-page .data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin-page .data-grid span {
  min-height: 58px;
  justify-content: center;
  background: #fff;
}

body.admin-page .data-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

body.admin-page .data-detail-button {
  justify-content: center;
  width: 100%;
  min-height: 34px;
  background: #eaf4ff;
  color: var(--brand-dark);
}

/* 8.8: make the left column behave like a real course/chapter tree. */
body.admin-page .knowledge-sidebar > label:has(#knowledgeCourseSelect) {
  display: none;
}

body.admin-page .knowledge-sidebar .topic-list {
  display: none;
}

body.admin-page .course-tree-group {
  display: grid;
  gap: 4px;
}

body.admin-page .course-tree-topic-list {
  display: grid;
  gap: 2px;
  padding: 2px 0 8px 18px;
}

body.admin-page .course-tree-topic-list button {
  min-height: 36px;
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
}

body.admin-page .course-tree-topic-list button strong {
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .course-tree-topic-list button:hover,
body.admin-page .course-tree-topic-list button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .course-tree-topic-list button.level-2 {
  margin-left: 12px;
  width: calc(100% - 12px);
}

body.admin-page .course-tree-topic-list button.level-3 {
  margin-left: 24px;
  width: calc(100% - 24px);
}

body.admin-page .knowledge-create-row:has(#knowledgeChapterInput) {
  gap: 10px;
}

body.admin-page .knowledge-create-row:has(#knowledgeChapterInput) .compact-link {
  min-height: 40px;
  background: var(--brand);
  color: #fff;
}

/* 8.8: reference-image scale pass plus real multi-question quiz editing. */
body.admin-page {
  --line: rgba(15, 23, 42, 0.09);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
  background: #f5f7fb;
}

body.admin-page .app-shell {
  width: min(1440px, 100vw);
  padding-top: 0;
}

body.admin-page .topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0 16px 0 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

body.admin-page .brand-lockup {
  width: 180px;
  height: 56px;
  padding: 0 18px;
}

body.admin-page .brand-lockup img {
  width: 28px;
  height: 28px;
}

body.admin-page .brand-lockup h1 {
  font-size: 14px;
  letter-spacing: 0;
}

body.admin-page .brand-lockup .eyebrow {
  display: none;
}

body.admin-page .topbar-menu-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: #475569;
  box-shadow: none;
  font-size: 18px;
  font-weight: 900;
}

body.admin-page .admin-dashboard {
  grid-template-columns: 180px minmax(0, 1fr);
  min-height: calc(100vh - 56px);
}

body.admin-page .admin-command-center {
  top: 56px;
  height: calc(100vh - 56px);
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  background: #fff;
  box-shadow: none;
}

body.admin-page .admin-command-center .command-copy,
body.admin-page .admin-command-center .dashboard-stat-grid,
body.admin-page .admin-command-center .module-grid,
body.admin-page .admin-command-center .storage-note {
  display: none;
}

body.admin-page .admin-side-menu {
  gap: 2px;
}

body.admin-page .admin-side-menu strong {
  margin: 18px 8px 7px;
  font-size: 13px;
}

body.admin-page .admin-side-menu button {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

body.admin-page .admin-side-menu button::before {
  width: 16px;
  height: 16px;
  margin-right: 9px;
}

body.admin-page .admin-collapse-button {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  min-height: 38px;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  color: #64748b;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .admin-collapse-button::before {
  content: "<<";
  margin-right: 8px;
  color: #94a3b8;
}

body.admin-page .admin-panels {
  padding: 18px 18px 40px;
}

body.admin-page .knowledge-preview-panel {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-page .knowledge-preview-panel > .panel-heading {
  display: none;
}

body.admin-page .knowledge-preview-shell {
  grid-template-columns: 250px minmax(600px, 1fr) 312px;
  gap: 16px;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-right-rail {
  top: 74px;
  max-height: calc(100vh - 92px);
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-card,
body.admin-page .panel,
body.admin-page .module-panel,
body.admin-page .sub-panel,
body.admin-page .course-card,
body.admin-page .lesson-card,
body.admin-page .student-card,
body.admin-page .record-card,
body.admin-page .event-card {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
}

body.admin-page .knowledge-card {
  padding: 14px;
}

body.admin-page .knowledge-card-head {
  min-height: 32px;
}

body.admin-page .quiz-source-field textarea {
  min-height: 118px;
  background: #f8fbff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.55;
}

body.admin-page .quiz-builder-toolbar {
  grid-template-columns: minmax(0, 1fr) auto auto;
  border-color: #dbeafe;
  background: #f8fbff;
}

body.admin-page .quiz-builder-toolbar .primary {
  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.18);
}

body.admin-page .quiz-question-editor-list {
  gap: 12px;
}

body.admin-page .quiz-question-editor-card {
  gap: 12px;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

body.admin-page .quiz-question-editor-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 132px auto;
  align-items: center;
  gap: 10px;
}

body.admin-page .quiz-question-title {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

body.admin-page .quiz-question-title b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eaf4ff;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 950;
}

body.admin-page .quiz-question-title div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.admin-page .quiz-question-editor-head strong {
  color: var(--brand-dark);
  font-size: 14px;
}

body.admin-page .quiz-question-editor-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.admin-page .quiz-question-editor-head select {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

body.admin-page .quiz-question-editor-card label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .quiz-question-editor-card textarea {
  min-height: 72px;
  resize: vertical;
}

body.admin-page .quiz-question-editor-card input,
body.admin-page .quiz-question-editor-card textarea,
body.admin-page .quiz-question-editor-card select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

body.admin-page .quiz-choice-editor-grid {
  display: grid;
  gap: 8px;
}

body.admin-page .quiz-choice-editor-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.admin-page .quiz-choice-editor-row .quiz-choice-key {
  text-align: center;
  font-weight: 950;
}

body.admin-page .quiz-add-choice {
  justify-self: start;
  min-height: 32px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--brand-dark);
}

body.admin-page .quiz-answer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: end;
}

body.admin-page .quiz-multiple-toggle {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
}

body.admin-page .quiz-multiple-toggle input {
  width: 16px;
  height: 16px;
}

body.admin-page .quiz-multiple-toggle.hidden {
  display: none;
}

body.admin-page .danger-soft.icon-text {
  min-height: 34px;
  padding: 6px 10px;
}

body.admin-page .full-width-action {
  width: 100%;
  justify-content: center;
}

body.admin-page .preview-editor-card {
  padding: 14px;
}

body.admin-page .preview-mind-module,
body.admin-page .preview-artwork-module {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.admin-page .preview-mind-module img,
body.admin-page .preview-artwork-module img {
  width: 100%;
  height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
  background: #f8fafc;
}

body.admin-page .preview-artwork-module img {
  height: 150px;
}

body.admin-page .preview-mind-module div,
body.admin-page .preview-artwork-module div {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

body.admin-page .preview-mind-module strong,
body.admin-page .preview-artwork-module strong {
  color: var(--ink);
}

body.admin-page .preview-palette {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .preview-palette button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  justify-content: center;
  padding: 8px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .preview-palette button:hover,
body.admin-page .preview-palette button.active {
  border-color: #9cc9ff;
  background: #f3f9ff;
  color: var(--brand-dark);
}

body.admin-page.admin-preview-page .knowledge-main {
  gap: 12px;
}

body.admin-page.admin-preview-page .knowledge-module-card {
  padding: 0;
}

body.admin-page.admin-preview-page .knowledge-module-card .module-card-head {
  padding: 10px 12px;
}

body.admin-page.admin-preview-page .knowledge-module-card .module-card-body {
  padding: 10px 12px 12px;
}

body.admin-page.admin-preview-page .knowledge-sidebar label:has(select),
body.admin-page.admin-preview-page .knowledge-sidebar label:has(#knowledgeChapterTitleInput),
body.admin-page.admin-preview-page .knowledge-sidebar .knowledge-action-row {
  display: none;
}

/* 8.8: keep the reference screen visible first, then place unit-level tools lower. */
body.admin-page .knowledge-work-grid {
  order: 1;
}

body.admin-page .knowledge-work-grid .detail-card {
  order: 1;
}

body.admin-page .knowledge-work-grid .outline-card {
  order: 2;
}

body.admin-page .knowledge-top-grid {
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1320px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 900px) {
  body.admin-page .brand-lockup {
    width: auto;
  }

  body.admin-page .admin-dashboard {
    grid-template-columns: 1fr;
  }

  body.admin-page .admin-command-center {
    position: sticky;
    top: 56px;
    z-index: 15;
    height: auto;
    max-height: none;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 8px 10px;
  }

  body.admin-page .admin-side-menu {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body.admin-page .admin-side-menu strong,
  body.admin-page .admin-collapse-button {
    display: none;
  }

  body.admin-page .admin-side-menu button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
  }

  body.admin-page .admin-side-menu button::before {
    display: none;
  }

  body.admin-page .admin-panels {
    padding: 12px;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail {
    position: static;
    height: auto;
    max-height: none;
  }

  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 1fr;
  }

  body.admin-page .knowledge-sidebar {
    max-height: 360px;
    overflow: auto;
  }

  body.admin-page .knowledge-side-progress {
    display: none;
  }

  body.admin-page .knowledge-top-grid {
    grid-template-columns: 1fr;
  }

  body.admin-page .quiz-builder-toolbar,
  body.admin-page .quiz-question-editor-head,
  body.admin-page .quiz-question-title,
  body.admin-page .quiz-answer-grid,
  body.admin-page .quiz-choice-editor-row {
    grid-template-columns: 1fr;
  }
}

/* 8.8: make the quiz editor feel like a real question bank, not a one-question note box. */
body.admin-page .quiz-source-field {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.admin-page .quiz-source-field textarea {
  margin-top: 8px;
}

body.admin-page .quiz-builder-toolbar {
  position: sticky;
  top: 66px;
  z-index: 5;
  grid-template-columns: minmax(0, 1fr) 170px 132px;
  padding: 12px;
  border-color: #bfdbfe;
  background: rgba(248, 251, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(10, 132, 255, 0.08);
}

body.admin-page .quiz-builder-toolbar .compact-link {
  min-height: 42px;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
}

body.admin-page .quiz-builder-toolbar .secondary {
  border-color: #bfdbfe;
  background: #fff;
  color: var(--brand-dark);
}

body.admin-page #knowledgeQuizCountText {
  display: inline-flex;
  width: max-content;
  margin-top: 4px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 4px 9px;
  background: #eaf4ff;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 950;
}

body.admin-page .quiz-question-editor-card {
  position: relative;
  border-color: #bfdbfe;
  padding-left: 16px;
}

body.admin-page .quiz-question-editor-card::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 999px;
  background: var(--brand);
}

body.admin-page .quiz-question-editor-head select,
body.admin-page .quiz-question-editor-head .danger-soft {
  min-height: 36px;
}

body.admin-page .quiz-empty-state {
  border-style: dashed;
  border-color: #bfdbfe;
  background: #f8fbff;
}

body.admin-page .quiz-empty-state small {
  line-height: 1.55;
}

body.admin-page .quiz-question-list-footer {
  display: grid;
  justify-items: center;
  border: 1px dashed #9cc9ff;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

body.admin-page .quiz-question-list-footer .compact-link {
  min-height: 38px;
  padding-inline: 18px;
}

body.admin-page .module-card-actions {
  flex-wrap: nowrap;
}

body.admin-page .module-card-actions .compact-link {
  min-width: 34px;
  min-height: 28px;
  border-radius: 7px;
}

@media (max-width: 900px) {
  body.admin-page .quiz-builder-toolbar {
    position: static;
    grid-template-columns: 1fr;
  }

  body.admin-page .quiz-builder-toolbar .compact-link {
    width: 100%;
  }
}

/* 8.8: tighten the wide admin screen toward the reference image. */
body.admin-page .admin-side-menu button {
  position: relative;
  gap: 8px;
}

body.admin-page .admin-side-menu button::before {
  display: none;
}

body.admin-page .admin-side-menu button.active {
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .action-rail-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .action-rail-buttons .compact-link {
  min-width: 0;
  min-height: 38px;
  padding: 8px 9px;
  justify-content: center;
  white-space: nowrap;
  font-size: 13px;
}

body.admin-page .module-library-card {
  padding-bottom: 12px;
}

body.admin-page .module-library-card .module-palette-group > div,
body.admin-page .preview-palette {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .preview-palette button,
body.admin-page .module-palette-item {
  min-height: 50px;
  border-radius: 8px;
  padding: 8px 6px;
  font-size: 12px;
}

body.admin-page .module-palette-item em {
  display: none;
}

body.admin-page .module-card-actions .compact-link {
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .knowledge-module-card {
  border-color: #e2e8f0;
}

@media (min-width: 1321px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px minmax(560px, 1fr) 300px;
    gap: 16px;
  }

  body.admin-page .knowledge-right-rail {
    min-width: 0;
  }
}

/* 8.9: teacher workbench pass. Match the reference's focused editor layout. */
body.admin-page .knowledge-course-hero,
body.admin-page .knowledge-flow-tabs {
  display: none;
}

body.admin-page .knowledge-preview-panel {
  min-height: calc(100vh - 92px);
}

body.admin-page .nested-nav,
body.admin-page .nested-nav.active {
  display: none;
}

body.admin-page .knowledge-preview-shell {
  align-items: start;
}

body.admin-page .knowledge-sidebar {
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

body.admin-page .knowledge-side-course-card {
  grid-template-columns: 52px minmax(0, 1fr);
  border: 0;
  padding: 0 0 14px;
  background: transparent;
  box-shadow: none;
}

body.admin-page .knowledge-side-course-card img {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}

body.admin-page .knowledge-search-field {
  margin-bottom: 10px;
}

body.admin-page .knowledge-create-row {
  grid-template-columns: minmax(0, 1fr);
}

body.admin-page .knowledge-create-row .compact-link {
  width: 100%;
  justify-content: center;
}

body.admin-page .knowledge-list {
  gap: 6px;
}

body.admin-page .chapter-tree-item {
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}

body.admin-page .chapter-tree-item.active {
  background: #f3f8ff;
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .course-tree-topic-list button {
  min-height: 34px;
  border: 0;
  background: transparent;
}

body.admin-page .course-tree-topic-list button.active {
  background: #eaf4ff;
}

body.admin-page .knowledge-work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body.admin-page .knowledge-work-grid .detail-card {
  order: 1;
}

body.admin-page .knowledge-work-grid .outline-card {
  order: 2;
}

body.admin-page .knowledge-top-grid {
  order: 3;
}

body.admin-page .detail-card,
body.admin-page .outline-card,
body.admin-page .mind-card,
body.admin-page .memory-card,
body.admin-page .knowledge-right-rail .knowledge-card {
  border-radius: 8px;
  border-color: #e5eaf1;
  background: #fff;
}

body.admin-page .module-section-title {
  margin-top: 4px;
  border: 0;
  padding: 0;
  background: transparent;
}

body.admin-page .module-card-title {
  grid-template-columns: 18px 24px minmax(0, 1fr);
}

body.admin-page .module-card-title i {
  color: #94a3b8;
}

body.admin-page .module-card-title b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #dbeafe;
  color: var(--brand-dark);
  font-size: 12px;
}

body.admin-page .module-card-actions {
  gap: 6px;
}

body.admin-page .module-card-actions .compact-link {
  min-width: 0;
  padding-inline: 9px;
}

body.admin-page .quiz-workbench-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.admin-page .quiz-workbench-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid #e5eaf1;
  padding-bottom: 12px;
}

body.admin-page .quiz-workbench-head div {
  display: grid;
  gap: 4px;
}

body.admin-page .quiz-workbench-head strong {
  color: var(--ink);
  font-size: 16px;
}

body.admin-page .quiz-workbench-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

body.admin-page .quiz-workbench-head #knowledgeQuizCountText {
  flex: 0 0 auto;
  margin-top: 0;
}

body.admin-page .quiz-count-panel {
  display: grid;
  gap: 4px;
  min-width: 132px;
  justify-items: end;
}

body.admin-page .quiz-count-panel > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  grid-template-columns: minmax(0, 1fr) 112px 150px 129px;
  position: static;
  top: auto;
  box-shadow: none;
}

body.admin-page .quiz-add-count-field {
  display: grid;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .quiz-add-count-field input {
  min-height: 42px;
  border-color: #bfdbfe;
  background: #fff;
  color: var(--brand-dark);
  text-align: center;
  font-size: 15px;
  font-weight: 950;
}

body.admin-page.sidebar-collapsed .admin-dashboard {
  grid-template-columns: minmax(0, 1fr);
}

body.admin-page.sidebar-collapsed .admin-command-center {
  display: none;
}

body.admin-page.sidebar-collapsed .topbar-menu-button {
  background: #eaf4ff;
  color: var(--brand-dark);
}

body.admin-page .target-focus-flash {
  outline: 3px solid rgba(10, 132, 255, 0.28);
  box-shadow: 0 0 0 8px rgba(10, 132, 255, 0.08);
  transition: outline 180ms ease, box-shadow 180ms ease;
}

body.admin-page.sidebar-collapsed .knowledge-preview-shell {
  grid-template-columns: 280px minmax(640px, 1fr) 320px;
}

@media (max-width: 1320px) {
  body.admin-page.sidebar-collapsed .knowledge-preview-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* 8.10 Student mobile mapping refresh: teacher modules publish here, student reads in order. */
body.student-page {
  --student-bg: #eef6ff;
  --student-surface: #ffffff;
  --student-soft: #f5f9ff;
  --student-line: #e2eaf5;
  --student-ink: #17233a;
  --student-muted: #718098;
  --student-blue: #2388f2;
  --student-blue-dark: #0967d2;
  --student-green: #22b56d;
  --student-orange: #f59e0b;
  --student-red: #ef4444;
  --surface: var(--student-surface);
  --surface-soft: var(--student-soft);
  --ink: var(--student-ink);
  --muted: var(--student-muted);
  --line: var(--student-line);
  --brand: var(--student-blue);
  --brand-dark: var(--student-blue-dark);
  --accent: var(--student-green);
  --danger: var(--student-red);
  --shadow: 0 14px 34px rgba(20, 44, 84, 0.09);
  min-height: 100dvh;
  background:
    linear-gradient(135deg, #edf6ff 0%, #f8fbff 52%, #eefbf7 100%);
  color: var(--student-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

body.student-page .art-wallpaper,
body.student-page .sound-toggle {
  display: none !important;
}

body.student-page .app-shell {
  width: min(430px, 100vw);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 12px calc(104px + env(safe-area-inset-bottom));
}

@media (min-width: 761px) {
  body.student-page .app-shell {
    margin-block: 22px;
    min-height: calc(100dvh - 44px);
    border: 1px solid rgba(23, 35, 58, 0.1);
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.76);
    box-shadow: 0 24px 80px rgba(20, 44, 84, 0.16);
  }
}

body.student-page .topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0 -12px 12px;
  border: 0;
  padding: calc(12px + env(safe-area-inset-top)) 12px 10px;
  background: rgba(248, 251, 255, 0.92);
  box-shadow: 0 8px 22px rgba(20, 44, 84, 0.06);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.student-page .brand-lockup {
  gap: 9px;
}

body.student-page .brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(35, 136, 242, 0.16);
}

body.student-page .eyebrow {
  margin-bottom: 2px;
  color: var(--student-blue);
  font-size: 11px;
  font-weight: 850;
}

body.student-page h1 {
  color: var(--student-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 850;
  line-height: 1.18;
}

body.student-page h2 {
  color: var(--student-ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 850;
}

body.student-page h3 {
  margin: 0;
  color: var(--student-ink);
  font-size: 18px;
  line-height: 1.28;
}

body.student-page .player-actions {
  justify-content: flex-end;
  gap: 6px;
}

body.student-page .version-pill,
body.student-page .student-admin-link,
body.student-page .network-pill {
  display: none;
}

body.student-page .account-pill {
  max-width: 118px;
  overflow: hidden;
  border: 1px solid var(--student-line);
  border-radius: 999px;
  padding: 7px 9px;
  background: #fff;
  color: var(--student-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 780;
}

body.student-page #logoutButton {
  min-height: 32px;
  padding-inline: 10px;
}

body.student-page .panel {
  overflow: hidden;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.student-page .panel::before {
  display: none;
}

body.student-page .panel-heading {
  margin-bottom: 12px;
}

body.student-page .panel-heading.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

body.student-page .panel-heading p {
  margin-top: 4px;
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

body.student-page label {
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 760;
}

body.student-page input,
body.student-page select {
  min-height: 42px;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8fbff;
  color: var(--student-ink);
  box-shadow: none;
}

body.student-page input:focus,
body.student-page select:focus {
  border-color: rgba(35, 136, 242, 0.54);
  box-shadow: 0 0 0 3px rgba(35, 136, 242, 0.12);
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button,
body.student-page .danger-soft {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 850;
}

body.student-page .primary {
  border: 1px solid var(--student-blue);
  background: var(--student-blue);
  color: #fff;
}

body.student-page .primary:hover {
  background: var(--student-blue-dark);
}

body.student-page .secondary,
body.student-page .link-button {
  border: 1px solid var(--student-line);
  background: #f6f9fe;
  color: var(--student-ink);
}

body.student-page .secondary:hover,
body.student-page .link-button:hover {
  background: #eaf4ff;
}

body.student-page .danger-soft {
  border-color: #ffd6d6;
  background: #fff2f2;
  color: var(--student-red);
}

body.student-page .student-workspace,
body.student-page .student-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.student-page .gallery-panel,
body.student-page .lesson-gallery-panel,
body.student-page .learning-panel,
body.student-page .art-player-panel,
body.student-page .review-panel,
body.student-page .progress-panel,
body.student-page .account-panel,
body.student-page .event-gallery-panel {
  background: rgba(255, 255, 255, 0.94);
}

body.student-page .learning-panel {
  gap: 10px;
}

body.student-page .learning-panel .study-plan-card {
  order: 1;
}

body.student-page .learning-panel .resume-card {
  order: 2;
}

body.student-page .learning-panel .learning-stats {
  order: 3;
}

body.student-page .learning-panel .course-progress-list {
  order: 4;
}

body.student-page .learning-panel .history-block {
  order: 5;
}

body.student-page .learning-panel .exam-countdown-card {
  order: 20;
}

body.student-page .learning-panel .panel-heading {
  margin-bottom: 4px;
}

body.student-page .learning-panel #continueButton {
  align-self: start;
}

body.student-page .learning-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .learning-stat {
  min-height: 70px;
  border: 1px solid #eaf0f7;
  border-radius: 8px;
  padding: 10px 8px;
  background: #f8fbff;
  text-align: center;
}

body.student-page .learning-stat strong {
  color: var(--student-blue);
  font-size: 22px;
  font-weight: 900;
}

body.student-page .learning-stat span {
  margin-top: 5px;
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 760;
}

body.student-page .study-plan-card,
body.student-page .exam-countdown-card,
body.student-page .resume-card,
body.student-page .playback-status-card,
body.student-page .profile-summary-card {
  border: 1px solid var(--student-line);
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

body.student-page .study-plan-card {
  padding: 12px;
}

body.student-page .study-plan-top em,
body.student-page .exam-days-badge,
body.student-page .lesson-quiz-pill {
  border-radius: 999px;
  background: #fff4df;
  color: var(--student-orange);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

body.student-page .study-plan-progress,
body.student-page .mini-progress,
body.student-page .progress-track,
body.student-page .knowledge-progress-card i,
body.student-page .history-row i {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e7edf5;
}

body.student-page .study-plan-progress i,
body.student-page .mini-progress span,
body.student-page .progress-fill,
body.student-page .knowledge-progress-card b,
body.student-page .history-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--student-blue), var(--student-green));
}

body.student-page .resume-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px;
  color: var(--student-ink);
  text-align: left;
}

body.student-page .resume-card span,
body.student-page .resume-card em,
body.student-page .resume-card small {
  color: var(--student-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

body.student-page .resume-card strong {
  font-size: 16px;
}

body.student-page .course-progress-list,
body.student-page .course-list,
body.student-page .lesson-list,
body.student-page .review-list,
body.student-page .watch-history-list {
  display: grid;
  gap: 8px;
}

body.student-page .course-progress-card,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .event-card,
body.student-page .review-card,
body.student-page .history-row {
  border: 1px solid var(--student-line);
  border-radius: 8px;
  background: #fff;
  color: var(--student-ink);
  box-shadow: 0 8px 20px rgba(20, 44, 84, 0.05);
}

body.student-page .course-progress-card {
  grid-template-columns: minmax(0, 1fr) 54px;
  padding: 12px;
}

body.student-page .course-progress-card .mini-progress {
  grid-column: 1 / -1;
}

body.student-page .course-progress-card em {
  justify-self: end;
  color: var(--student-blue);
}

body.student-page .course-card {
  min-height: 0;
  border: 1px solid var(--student-line);
  padding: 12px;
  background: #fff;
  text-align: left;
}

body.student-page .course-card::before,
body.student-page .course-card::after {
  display: none;
}

body.student-page .course-card.active,
body.student-page .course-progress-card.active,
body.student-page .lesson-card.active {
  border-color: rgba(35, 136, 242, 0.48);
  background: #f0f7ff;
}

body.student-page .course-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

body.student-page .course-card strong,
body.student-page .lesson-card strong,
body.student-page .event-card strong,
body.student-page .review-card strong,
body.student-page .history-row strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--student-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
}

body.student-page .course-card span,
body.student-page .lesson-card span,
body.student-page .event-card span,
body.student-page .review-card span,
body.student-page .history-row span {
  display: block;
  margin-top: 5px;
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

body.student-page .course-card em,
body.student-page .lesson-card em,
body.student-page .review-card em,
body.student-page .history-row em {
  color: var(--student-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

body.student-page .lesson-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

body.student-page .lesson-card .secondary {
  min-width: 66px;
  background: var(--student-blue);
  color: #fff;
}

body.student-page .lesson-eyebrow {
  margin: 0 0 3px;
  color: var(--student-blue);
  font-size: 11px;
  font-weight: 850;
}

body.student-page .knowledge-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 12px;
  background: #f0f7ff;
}

body.student-page .knowledge-progress-card span {
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 760;
}

body.student-page .knowledge-progress-card strong {
  color: var(--student-blue);
  font-size: 18px;
  font-weight: 900;
}

body.student-page .knowledge-progress-card i {
  grid-column: 1 / -1;
}

body.student-page .student-knowledge-layout,
body.student-page .student-chapter-list,
body.student-page .student-module-list {
  display: grid;
  gap: 10px;
}

body.student-page .student-chapter-card {
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

body.student-page .student-chapter-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--student-ink);
  text-align: left;
}

body.student-page .student-chapter-title strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

body.student-page .student-chapter-title span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #eaf4ff;
  color: var(--student-blue);
  font-size: 11px;
  font-weight: 850;
}

body.student-page .chapter-media-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

body.student-page .chapter-media-row button {
  min-height: 30px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 0 9px;
  background: #f0f7ff;
  color: var(--student-blue);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .student-topic-list {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

body.student-page .student-topic-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fbff;
  color: var(--student-ink);
  text-align: left;
}

body.student-page .student-topic-list button.active {
  border-color: rgba(35, 136, 242, 0.5);
  background: #eaf4ff;
}

body.student-page .student-topic-list span {
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .student-topic-list em,
body.student-page .knowledge-status-actions .active {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

body.student-page .status-mastered {
  background: #eafaf1;
  color: var(--student-green);
}

body.student-page .status-review {
  background: #fff4df;
  color: var(--student-orange);
}

body.student-page .status-unmarked {
  background: #edf1f7;
  color: var(--student-muted);
}

body.student-page .student-knowledge-detail {
  display: grid;
  gap: 10px;
}

body.student-page .knowledge-detail-top {
  display: grid;
  gap: 10px;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

body.student-page .knowledge-detail-top span {
  display: block;
  margin-bottom: 3px;
  color: var(--student-blue);
  font-size: 11px;
  font-weight: 850;
}

body.student-page .knowledge-status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .knowledge-summary {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 10px;
  background: #f0f7ff;
  color: var(--student-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
}

body.student-page .student-module-list {
  counter-reset: student-module;
}

body.student-page .student-module-card {
  counter-increment: student-module;
  display: grid;
  gap: 10px;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(20, 44, 84, 0.05);
}

body.student-page .student-module-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

body.student-page .student-module-head::before {
  content: counter(student-module);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--student-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .student-module-head span,
body.student-page .student-module-head strong {
  grid-column: 2;
}

body.student-page .student-module-head span {
  color: var(--student-blue);
  font-size: 11px;
  font-weight: 850;
}

body.student-page .student-module-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--student-ink);
  font-size: 15px;
}

body.student-page .student-module-card p,
body.student-page .student-quiz-text,
body.student-page .student-knowledge-table {
  color: var(--student-ink);
  font-size: 13px;
  line-height: 1.58;
}

body.student-page .student-quiz-text {
  overflow-x: auto;
  margin: 0;
  border: 1px solid #edf1f7;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
  white-space: pre-wrap;
}

body.student-page .student-knowledge-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #edf1f7;
  border-radius: 8px;
}

body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  border-bottom: 1px solid #edf1f7;
  padding: 9px;
  text-align: left;
  vertical-align: top;
}

body.student-page .student-knowledge-table th {
  width: 34%;
  background: #f8fbff;
  color: var(--student-blue);
  font-weight: 850;
}

body.student-page .student-module-image {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px dashed rgba(35, 136, 242, 0.28);
  border-radius: 8px;
  padding: 8px;
  background: #f8fbff;
  color: var(--student-blue);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .student-module-image img {
  display: block;
  width: 100%;
  max-height: 280px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}

body.student-page .student-module-video,
body.student-page .student-module-audio {
  width: 100%;
}

body.student-page .review-card,
body.student-page .history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 12px;
  text-align: left;
}

body.student-page .empty-state {
  border: 1px dashed #dbeafe;
  border-radius: 8px;
  padding: 16px;
  background: #f8fbff;
  color: var(--student-muted);
  text-align: center;
  font-size: 13px;
  font-weight: 760;
}

body.student-page .video-stage,
body.student-page .course-style-chinese .video-stage,
body.student-page .course-style-western .video-stage {
  min-height: 210px;
  border: 0;
  border-radius: 8px;
  background: #0e1726;
  box-shadow: none;
}

body.student-page .video-stage::after,
body.student-page .course-style-chinese .video-stage::after,
body.student-page .course-style-western .video-stage::after {
  display: none;
}

body.student-page .fake-video-motion,
body.student-page .course-video,
body.student-page .course-style-chinese .fake-video-motion,
body.student-page .course-style-western .fake-video-motion,
body.student-page .course-style-chinese .course-video,
body.student-page .course-style-western .course-video {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #132238 0%, #1f76d2 56%, #2bbd7e 100%);
  filter: none;
}

body.student-page .play-placeholder,
body.student-page .blackout,
body.student-page .course-style-chinese .play-placeholder,
body.student-page .course-style-western .play-placeholder,
body.student-page .course-style-chinese .blackout,
body.student-page .course-style-western .blackout {
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

body.student-page .playback-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .playback-row .progress-wrap,
body.student-page .playback-row .speed-control {
  grid-column: 1 / -1;
}

body.student-page .image-viewer {
  z-index: 120;
  background: rgba(8, 15, 28, 0.92);
}

body.student-page .image-viewer-toolbar {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--student-ink);
}

body.student-page .mobile-mini-player {
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  bottom: calc(72px + env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  min-height: 66px;
  border: 1px solid rgba(35, 136, 242, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

body.student-page .mobile-mini-action {
  min-width: 58px;
  min-height: 42px;
  border-radius: 8px;
  background: var(--student-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
}

body.student-page .mobile-study-nav {
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  bottom: calc(8px + env(safe-area-inset-bottom));
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(23, 35, 58, 0.1);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(20, 44, 84, 0.14);
}

body.student-page .mobile-study-nav button {
  min-height: 44px;
  border-radius: 8px;
  color: var(--student-muted);
  font-size: 12px;
}

body.student-page .mobile-study-nav button.active {
  background: #eaf4ff;
  color: var(--student-blue);
}

/* v10.0: student V2 mapping UI + 九色鹿 assistant. */
body.student-page .study-plan-card:not(.hidden) {
  display: grid;
  gap: 10px;
  border: 0;
  padding: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(135deg, #1677ff, #53a7ff);
  color: #fff;
}

body.student-page .study-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.student-page .study-plan-top span,
body.student-page .study-plan-card strong,
body.student-page .study-plan-card p,
body.student-page .study-plan-card #studyPlanTime {
  color: #fff;
}

body.student-page .study-plan-card strong {
  font-size: 20px;
  line-height: 1.28;
}

body.student-page .study-plan-card p {
  opacity: 0.86;
}

body.student-page .study-plan-top em {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

body.student-page .study-plan-card .primary {
  border-color: #fff;
  background: #fff;
  color: var(--student-blue);
}

body.student-page .study-plan-progress {
  background: rgba(255, 255, 255, 0.26);
}

body.student-page .study-plan-progress i {
  background: #fff;
}

body.student-page .learning-stats {
  margin-top: 2px;
}

body.student-page .learning-stat {
  background: #fff;
}

body.student-page .course-progress-card,
body.student-page .review-card,
body.student-page .progress-course-card,
body.student-page .progress-chapter-row {
  position: relative;
  overflow: hidden;
}

body.student-page .course-progress-card::after,
body.student-page .review-card::after,
body.student-page .progress-course-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--student-blue), var(--student-green));
  opacity: 0;
}

body.student-page .course-progress-card.active::after,
body.student-page .review-card:focus-visible::after,
body.student-page .progress-course-card:focus-visible::after {
  opacity: 1;
}

body.student-page .student-module-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 5px;
  background: #eef3f9;
}

body.student-page .student-module-tabs span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 8px;
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .student-module-tabs span.active {
  background: #fff;
  color: var(--student-blue);
  box-shadow: 0 6px 14px rgba(20, 44, 84, 0.08);
}

body.student-page .progress-panel {
  display: grid;
  gap: 10px;
}

body.student-page .progress-hero-card {
  display: grid;
  gap: 6px;
  border: 1px solid #cfe4ff;
  border-radius: 8px;
  padding: 14px;
  background: linear-gradient(135deg, #f0f7ff, #ffffff);
}

body.student-page .progress-hero-card span,
body.student-page .progress-hero-card p,
body.student-page .progress-course-card span,
body.student-page .progress-chapter-row span,
body.student-page .progress-section-title span {
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

body.student-page .progress-hero-card strong {
  color: var(--student-blue);
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
}

body.student-page .progress-hero-card i,
body.student-page .progress-course-card i,
body.student-page .progress-chapter-row i {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: #e7edf5;
}

body.student-page .progress-hero-card b,
body.student-page .progress-course-card b,
body.student-page .progress-chapter-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--student-blue), var(--student-green));
}

body.student-page .progress-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.student-page .progress-metric-grid > div {
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 11px 8px;
  background: #fff;
  text-align: center;
}

body.student-page .progress-metric-grid > div > strong {
  display: block;
  color: var(--student-blue);
  font-size: 22px;
  font-weight: 950;
}

body.student-page .progress-metric-grid > div > span {
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 800;
}

body.student-page .progress-status-section {
  overflow: hidden;
  border: 1px solid rgba(161, 176, 193, 0.36);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff8ee, #f7fbff);
  box-shadow: 0 10px 24px rgba(62, 79, 108, 0.08);
}

body.student-page .progress-status-section.progress-mastered {
  background: linear-gradient(135deg, #eaf7ef, #fffaf1);
}

body.student-page .progress-status-section.progress-review {
  background: linear-gradient(135deg, #fff0f5, #f8f4ff);
}

body.student-page .progress-status-section.progress-unmarked {
  background: linear-gradient(135deg, #f7f3ea, #f7fbff);
}

body.student-page .progress-status-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 14px;
  background: transparent;
  color: var(--student-ink);
  text-align: left;
}

body.student-page .progress-status-toggle span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #33435d;
  font-size: 15px;
  font-weight: 920;
}

body.student-page .progress-status-toggle strong {
  color: #1f7ae0;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

body.student-page .progress-status-toggle em {
  grid-column: 1 / -1;
  color: #6f7d92;
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

body.student-page .progress-status-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

body.student-page .progress-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 8px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(116, 137, 163, 0.2);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--student-ink);
  text-align: left;
  box-shadow: 0 6px 16px rgba(62, 79, 108, 0.06);
}

body.student-page .progress-topic-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.student-page .progress-topic-row strong {
  overflow: hidden;
  color: #1d2b3f;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .progress-topic-row small {
  overflow: hidden;
  color: #758298;
  font-size: 11px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .progress-topic-row em {
  color: #27866a;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .progress-topic-row em.status-review {
  color: #c2687a;
}

body.student-page .progress-topic-row em.status-unmarked {
  color: #7c8290;
}

body.student-page .progress-topic-row .importance-mini {
  grid-column: 1 / -1;
  justify-self: start;
}

body.student-page .progress-topic-empty {
  border: 1px dashed rgba(126, 145, 168, 0.35);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.46);
  color: #76849a;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

body.student-page .progress-course-list {
  display: grid;
  gap: 8px;
}

body.student-page .progress-course-card,
body.student-page .progress-chapter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--student-line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--student-ink);
  text-align: left;
  box-shadow: 0 8px 20px rgba(20, 44, 84, 0.05);
}

body.student-page .progress-course-card strong,
body.student-page .progress-chapter-row strong,
body.student-page .progress-section-title strong {
  display: block;
  color: var(--student-ink);
  font-size: 15px;
  font-weight: 880;
}

body.student-page .progress-course-card em,
body.student-page .progress-chapter-row em {
  color: var(--student-blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .progress-course-card i,
body.student-page .progress-chapter-row i {
  grid-column: 1 / -1;
}

body.student-page .progress-section-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 2px 2px 0;
}

body.student-page .student-assistant-fab {
  position: fixed;
  right: max(18px, calc((100vw - 430px) / 2 + 18px));
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 135;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(35, 136, 242, 0.22);
  border-radius: 8px;
  padding: 0;
  background: linear-gradient(145deg, #eef8ff, #fff7e8);
  box-shadow: 0 16px 34px rgba(20, 44, 84, 0.18);
  touch-action: none;
}

body.student-page .student-assistant-fab img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

body.student-page .student-assistant-dot {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--student-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

body.student-page .student-assistant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 138;
  background: rgba(9, 20, 36, 0.36);
}

body.student-page .student-assistant-sheet {
  position: fixed;
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  bottom: 0;
  left: max(12px, calc((100vw - 430px) / 2 + 12px));
  z-index: 139;
  display: grid;
  gap: 11px;
  max-height: min(76dvh, 620px);
  overflow: auto;
  border: 1px solid var(--student-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -18px 48px rgba(9, 31, 59, 0.22);
}

body.student-page .student-assistant-handle {
  justify-self: center;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #d8e1ec;
}

body.student-page .student-assistant-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

body.student-page .student-assistant-head img {
  width: 54px;
  height: 54px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: linear-gradient(145deg, #eef8ff, #fff7e8);
}

body.student-page .student-assistant-head span {
  color: var(--student-blue);
  font-size: 12px;
  font-weight: 900;
}

body.student-page .student-assistant-head h2 {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.25;
}

body.student-page .student-assistant-head p {
  margin-top: 4px;
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

body.student-page .student-assistant-diagnosis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body.student-page .student-assistant-diagnosis div {
  border-radius: 8px;
  padding: 10px 7px;
  background: #f5f9ff;
  text-align: center;
}

body.student-page .student-assistant-diagnosis div:nth-child(1) {
  background: #eafaf1;
}

body.student-page .student-assistant-diagnosis div:nth-child(2) {
  background: #fff4df;
}

body.student-page .student-assistant-diagnosis strong {
  display: block;
  color: var(--student-blue);
  font-size: 20px;
  font-weight: 950;
}

body.student-page .student-assistant-diagnosis span {
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 800;
}

body.student-page .student-assistant-note {
  border: 1px solid #d7e8fb;
  border-radius: 8px;
  padding: 10px;
  background: linear-gradient(135deg, #f0f7ff, #f8fbff);
  color: #40516a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

body.student-page .student-assistant-plan {
  display: grid;
  gap: 6px;
}

body.student-page .student-assistant-plan-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid #edf1f5;
  padding: 8px 0;
}

body.student-page .student-assistant-plan-item span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #eaf4ff;
  color: var(--student-blue);
  font-size: 12px;
  font-weight: 950;
}

body.student-page .student-assistant-plan-item strong {
  display: block;
  color: var(--student-ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

body.student-page .student-assistant-plan-item p {
  margin-top: 3px;
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

body.student-page .student-assistant-plan-item em {
  color: var(--student-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

body.student-page .student-assistant-actions {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
}

body.student-page .student-assistant-actions button {
  width: 100%;
  min-height: 43px;
}

@media (max-width: 760px) {
  body.student-page .app-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.student-page .student-workspace,
  body.student-page .student-main {
    display: block;
  }

  body.student-page #learningPanel,
  body.student-page #coursePanel,
  body.student-page #lessonPanel,
  body.student-page #knowledgeStudyPanel,
  body.student-page #playerPanel,
  body.student-page #materialsPanel,
  body.student-page #reviewPanel,
  body.student-page #progressPanel,
  body.student-page #accountPanel,
  body.student-page #eventPanel {
    display: none;
  }

  body.student-page #learningPanel.active-mobile-panel,
  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #knowledgeStudyPanel.active-mobile-panel,
  body.student-page #playerPanel.active-mobile-panel,
  body.student-page #materialsPanel.active-mobile-panel,
  body.student-page #reviewPanel.active-mobile-panel,
  body.student-page #progressPanel.active-mobile-panel,
  body.student-page #accountPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    display: grid;
    animation: mobilePanelIn 180ms ease-out;
  }

  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    margin-top: 10px;
  }

  body.student-page .panel-heading.row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.student-page .learning-panel #continueButton {
    width: 100%;
  }

  body.student-page .lesson-card {
    grid-template-columns: minmax(0, 1fr) 66px;
  }

  body.student-page .art-player-panel.active-mobile-panel {
    min-height: auto;
  }
}

@media (max-width: 390px) {
  body.student-page .app-shell {
    padding-inline: 10px;
  }

  body.student-page .topbar {
    margin-inline: -10px;
    padding-inline: 10px;
  }

  body.student-page .learning-stat strong {
    font-size: 19px;
  }
}

/* 9.1: final teacher workbench pass. Keep the admin page close to the reference layout. */
body.admin-page {
  --surface: #ffffff;
  --surface-soft: #f6f9fe;
  --ink: #102033;
  --muted: #65758d;
  --line: #e3ebf5;
  --brand: #1686f7;
  --brand-dark: #096bd1;
  --accent: #25c26e;
  --danger: #ef4444;
  --shadow: 0 12px 34px rgba(20, 44, 84, 0.07);
  background: #f4f8fd;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

body.admin-page .art-wallpaper,
body.admin-page .sound-toggle {
  display: none !important;
}

body.admin-page .app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #f4f8fd;
}

body.admin-page .topbar {
  display: grid;
  grid-template-columns: 180px 44px minmax(0, 1fr) auto;
  gap: 0;
  align-items: center;
  height: 56px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
}

body.admin-page .brand-lockup {
  width: 180px;
  min-width: 180px;
  height: 56px;
  padding: 0 18px;
}

body.admin-page .admin-dashboard {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 56px);
  background: #f4f8fd;
}

body.admin-page .admin-command-center {
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
  overflow: auto;
  border-right: 1px solid var(--line);
  padding: 18px 16px 68px;
  background: #fff;
  box-shadow: none;
}

body.admin-page .admin-command-center .command-copy,
body.admin-page .admin-command-center .dashboard-stat-grid,
body.admin-page .admin-command-center .module-grid,
body.admin-page .admin-command-center .storage-note {
  display: none !important;
}

body.admin-page .admin-side-menu {
  display: grid;
  gap: 2px;
}

body.admin-page .admin-side-menu strong {
  margin: 18px 8px 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .admin-side-menu button {
  justify-content: flex-start;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

body.admin-page .admin-side-menu button::before {
  display: none;
}

body.admin-page .admin-side-menu button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .admin-panels {
  min-width: 0;
  padding: 14px 16px 32px;
  background: #f4f8fd;
}

body.admin-page .nested-nav,
body.admin-page .nested-nav.active {
  display: none !important;
}

body.admin-page .knowledge-preview-panel {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body.admin-page .knowledge-preview-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-right-rail {
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 86px);
  overflow: auto;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-card,
body.admin-page .panel,
body.admin-page .module-panel,
body.admin-page .sub-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
}

body.admin-page .knowledge-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.admin-page .knowledge-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.admin-page .knowledge-work-grid .detail-card {
  order: 1;
}

body.admin-page .knowledge-work-grid .outline-card {
  order: 2;
}

body.admin-page .knowledge-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  order: 3;
}

body.admin-page .knowledge-card {
  padding: 14px;
}

body.admin-page .knowledge-card-head {
  min-height: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

body.admin-page .knowledge-editor-panel {
  border: 1px solid #edf2f8;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

body.admin-page .module-card-head {
  background: #fff;
}

body.admin-page .module-card-title b {
  background: #dbeafe;
  color: var(--brand-dark);
}

body.admin-page .module-library-card .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .module-palette-item {
  min-height: 64px;
  border-radius: 8px;
  background: #fff;
}

body.admin-page .quiz-workbench-card {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

body.admin-page .quiz-workbench-head {
  align-items: center;
}

body.admin-page .quiz-count-panel {
  min-width: 150px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 10px;
  background: #eaf4ff;
}

body.admin-page #knowledgeQuizCountText {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand-dark);
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  grid-template-columns: minmax(0, 1fr) 166px 154px 140px;
  border-color: #dbeafe;
  background: #f8fbff;
}

body.admin-page .quiz-add-count-field {
  display: grid;
  gap: 5px;
  margin: 0;
}

body.admin-page .quiz-add-count-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .quiz-count-stepper {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 6px;
  align-items: center;
}

body.admin-page .quiz-count-stepper button {
  min-width: 0;
  min-height: 42px;
  border-radius: 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 950;
}

body.admin-page .quiz-count-stepper input {
  min-height: 42px;
  padding: 0 8px;
  text-align: center;
}

body.admin-page .quiz-question-editor-card {
  border-color: #dbeafe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.admin-page .module-quiz-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 12px;
  background: #eff6ff;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-quiz-toolbar .compact-link {
  min-height: 34px;
  border-color: #93c5fd;
  background: #fff;
  color: var(--brand-dark);
}

@media (max-width: 1290px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }

  body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
    grid-template-columns: minmax(0, 1fr) 166px;
  }
}

@media (max-width: 900px) {
  body.admin-page .topbar {
    grid-template-columns: minmax(160px, 1fr) 44px;
    height: auto;
    padding-right: 0;
  }

  body.admin-page .admin-breadcrumb,
  body.admin-page .player-actions {
    grid-column: 1 / -1;
    padding: 8px 12px;
  }

  body.admin-page .admin-dashboard {
    grid-template-columns: 1fr;
  }

  body.admin-page .admin-command-center {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
  }

  body.admin-page .admin-side-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .admin-side-menu strong {
    grid-column: 1 / -1;
  }

  body.admin-page .knowledge-preview-shell,
  body.admin-page .knowledge-top-grid,
  body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
    grid-template-columns: 1fr;
  }

  body.admin-page .knowledge-sidebar {
    position: static;
    max-height: none;
  }
}

/* v9.2: keep the quiz editing toolbar readable inside the three-column CMS layout. */
body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  grid-template-columns: none;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar > div:first-child {
  flex: 1 1 260px;
  min-width: 240px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar > div:first-child strong,
body.admin-page .quiz-workbench-card .quiz-builder-toolbar > div:first-child span {
  display: block;
  writing-mode: horizontal-tb;
  white-space: normal;
}

body.admin-page .quiz-workbench-card .quiz-add-count-field {
  flex: 0 0 172px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

body.admin-page .legacy-knowledge-quick-panel {
  display: none !important;
}

body.admin-page .module-card-body .module-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

body.admin-page .module-card-body .module-meta-row > label:not(.inline-check) {
  flex: 1 1 180px;
  min-width: 180px;
}

body.admin-page .module-card-body .module-meta-row .inline-check {
  flex: 0 0 auto;
  min-width: 96px;
  white-space: nowrap;
}

/* v9.3: reference-style compact module cards. */
body.admin-page .knowledge-module-card {
  overflow: hidden;
  border-color: #dfe7f2;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

body.admin-page .knowledge-module-card.collapsed .module-card-body {
  display: none;
}

body.admin-page .knowledge-module-card .module-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-bottom: 0;
  padding: 12px 14px 8px;
}

body.admin-page .knowledge-module-card .module-card-title {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

body.admin-page .knowledge-module-card .module-card-title i {
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
}

body.admin-page .knowledge-module-card .module-card-title b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: #dbeafe;
  color: var(--brand);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .knowledge-module-card .module-card-title div {
  min-width: 0;
}

body.admin-page .knowledge-module-card .module-card-title span {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-module-card .module-card-title em {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

body.admin-page .knowledge-module-card .module-card-actions {
  justify-content: flex-end;
}

body.admin-page .knowledge-module-card .module-card-actions .compact-link {
  min-height: 30px;
  border: 0;
  padding: 4px 7px;
  background: transparent;
  color: var(--brand-dark);
  box-shadow: none;
}

body.admin-page .knowledge-module-card .module-card-actions .danger-soft {
  color: #dc2626;
}

body.admin-page .module-card-preview-row {
  margin: 0 14px 12px 58px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfdff;
}

body.admin-page .knowledge-module-card.editing .module-card-preview-row {
  border-color: #bfdbfe;
  background: #f8fbff;
}

body.admin-page .module-preview-text,
body.admin-page .module-preview-empty {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.65;
}

body.admin-page .module-preview-table {
  display: block;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
}

body.admin-page .module-preview-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

body.admin-page .module-preview-table th,
body.admin-page .module-preview-table td {
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
}

body.admin-page .module-preview-table th {
  width: 34%;
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
}

body.admin-page .module-preview-table td {
  color: #0f172a;
}

body.admin-page .module-preview-table tr:last-child th,
body.admin-page .module-preview-table tr:last-child td {
  border-bottom: 0;
}

body.admin-page .knowledge-timeline-preview,
body.admin-page .modal-timeline-preview .knowledge-timeline-preview,
body.admin-page .module-suite-timeline-preview .knowledge-timeline-preview,
body.student-page .student-knowledge-timeline {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 20px;
  list-style: none;
}

body.admin-page .knowledge-timeline-preview .timeline-item,
body.student-page .student-knowledge-timeline .timeline-item {
  position: relative;
  display: flex;
  gap: 16px;
}

body.admin-page .knowledge-timeline-preview .timeline-left,
body.student-page .student-knowledge-timeline .timeline-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.admin-page .knowledge-timeline-preview .timeline-icon,
body.student-page .student-knowledge-timeline .timeline-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--timeline-stage-color, #2a9d8f);
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .knowledge-timeline-preview .timeline-line,
body.student-page .student-knowledge-timeline .timeline-line {
  width: 2px;
  flex: 1;
  min-height: 26px;
  margin-top: 6px;
  background: #e6e6e6;
}

body.admin-page .knowledge-timeline-preview .timeline-card,
body.student-page .student-knowledge-timeline .timeline-card {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

body.admin-page .knowledge-timeline-preview .timeline-header,
body.student-page .student-knowledge-timeline .timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.admin-page .knowledge-timeline-preview .year,
body.student-page .student-knowledge-timeline .year {
  color: #1f2937;
  font-size: 14px;
  font-weight: 900;
}

body.admin-page .knowledge-timeline-preview .stage-tag,
body.student-page .student-knowledge-timeline .stage-tag {
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--timeline-stage-color, #2a9d8f);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .knowledge-timeline-preview .title,
body.student-page .student-knowledge-timeline .title {
  display: block;
  margin-top: 6px;
  color: #111827;
  font-size: 16px;
  font-weight: 950;
}

body.admin-page .knowledge-timeline-preview .desc,
body.student-page .student-knowledge-timeline .desc {
  margin: 0;
  margin-top: 6px;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

body.admin-page .knowledge-timeline-preview .stage-hint,
body.student-page .student-knowledge-timeline .stage-hint {
  margin: 8px 0 0;
  color: #999;
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .knowledge-timeline-empty {
  border: 1px dashed var(--module-accent-border, #e5d8bd);
  border-radius: 10px;
  padding: 12px;
  background: var(--module-accent-veil, #fcfaf5);
  color: #64748b;
  font-size: 13px;
}

body.admin-page .module-preview-file {
  display: grid;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .module-preview-file .module-file-preview {
  margin: 0;
}

body.admin-page .module-preview-file img {
  max-height: 120px;
  object-fit: contain;
}

body.admin-page .module-preview-quiz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

body.admin-page .module-preview-quiz strong {
  border-radius: 999px;
  padding: 6px 10px;
  background: #eff6ff;
  color: var(--brand-dark);
  font-size: 12px;
}

body.admin-page .module-preview-quiz span {
  flex: 1 1 220px;
  overflow: hidden;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-module-card .module-card-body {
  margin: 0 14px 14px 58px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 12px;
  background: #f8fbff;
}

@media (max-width: 1180px) {
}

/* v9.4: keep the reference-style three-column editor visible on normal laptop width. */
@media (min-width: 1100px) and (max-width: 1320px) {
  body.admin-page .admin-command-center {
    width: 170px;
  }

  body.admin-page .admin-dashboard {
    grid-template-columns: 170px minmax(0, 1fr);
  }

  body.admin-page .module-panel.knowledge-preview-panel {
    padding: 12px;
  }

  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 214px minmax(0, 1fr) 260px;
    gap: 10px;
  }

  body.admin-page .knowledge-right-rail {
    position: sticky;
    top: 70px;
    grid-column: auto;
    max-height: calc(100vh - 86px);
    overflow: auto;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-card {
    padding: 10px;
  }

  body.admin-page .knowledge-side-course-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  body.admin-page .knowledge-side-course-card img {
    width: 40px;
    height: 40px;
  }

  body.admin-page .knowledge-create-row input,
  body.admin-page .knowledge-create-row .compact-link,
  body.admin-page .knowledge-sidebar label input,
  body.admin-page .knowledge-sidebar label select {
    min-height: 40px;
    font-size: 13px;
  }

  body.admin-page .knowledge-list button,
  body.admin-page .knowledge-outline-list button {
    min-height: 36px;
    padding: 7px 9px;
  }

  body.admin-page .knowledge-editor-panel {
    padding: 10px;
  }

  body.admin-page .knowledge-edit-row {
    grid-template-columns: minmax(0, 1fr) 170px;
  }

  body.admin-page .mastery-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  body.admin-page .mastery-row span {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  body.admin-page .module-section-title {
    gap: 8px;
  }

  body.admin-page .module-bulk-actions {
    gap: 6px;
  }

  body.admin-page .knowledge-module-card .module-card-head {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 10px 6px;
  }

  body.admin-page .knowledge-module-card .module-card-actions {
    justify-content: flex-start;
  }

  body.admin-page .knowledge-module-card .module-card-actions .compact-link {
    min-height: 28px;
    padding: 3px 5px;
    font-size: 12px;
  }

  body.admin-page .module-card-preview-row,
  body.admin-page .knowledge-module-card .module-card-body {
    margin-left: 46px;
    margin-right: 10px;
  }

  body.admin-page .module-library-card .module-palette-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .module-palette-item {
    min-height: 58px;
    padding: 8px 6px;
  }

  body.admin-page .module-palette-icon {
    width: 22px;
    height: 22px;
  }

  body.admin-page .module-palette-item em {
    display: none;
  }

  body.admin-page .action-rail-buttons {
    grid-template-columns: 1fr;
  }

  body.admin-page .data-grid {
    grid-template-columns: 1fr 1fr;
  }
}

body.admin-page .module-preview-quiz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

body.admin-page .module-preview-quiz > div:first-child {
  min-width: 0;
}

body.admin-page .module-preview-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

body.admin-page .module-preview-quiz-actions .compact-link {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 680px) {
  body.admin-page .module-preview-quiz {
    grid-template-columns: 1fr;
  }

  body.admin-page .module-preview-quiz-actions {
    justify-content: flex-start;
  }
}

/* v9.7: closer to the reference CMS layout, plus a real multi-question quiz bank. */
body.admin-page {
  overflow-x: hidden;
}

body.admin-page .topbar {
  min-height: 54px;
}

body.admin-page .admin-side-menu button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

body.admin-page .admin-side-menu strong {
  margin: 14px 8px 6px;
  font-size: 12px;
}

body.admin-page .knowledge-card,
body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-right-rail .knowledge-card {
  border-color: #e6edf6;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

body.admin-page .knowledge-card {
  padding: 12px;
}

body.admin-page .knowledge-card-head {
  min-height: 28px;
  padding-bottom: 8px;
}

body.admin-page .knowledge-card-head strong {
  font-size: 14px;
}

body.admin-page .knowledge-card-head span {
  font-size: 12px;
}

body.admin-page .knowledge-editor-panel {
  padding: 10px;
}

body.admin-page .knowledge-edit-row {
  gap: 10px;
}

body.admin-page .mastery-row span {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}

body.admin-page .module-section-title {
  margin: 0;
}

body.admin-page .module-section-title strong {
  font-size: 15px;
}

body.admin-page .knowledge-module-list {
  gap: 9px;
}

body.admin-page .knowledge-module-card {
  border-radius: 8px;
}

body.admin-page .knowledge-module-card .module-card-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px 11px 6px;
}

body.admin-page .knowledge-module-card .module-card-title {
  gap: 8px;
}

body.admin-page .knowledge-module-card .module-card-title b {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  font-size: 11px;
}

body.admin-page .knowledge-module-card .module-card-title span {
  font-size: 13px;
}

body.admin-page .knowledge-module-card .module-card-title em {
  font-size: 11px;
}

body.admin-page .knowledge-module-card .module-card-actions {
  gap: 4px;
}

body.admin-page .knowledge-module-card .module-card-actions .compact-link {
  min-height: 24px;
  padding: 2px 5px;
  font-size: 11px;
}

body.admin-page .module-visible-switch {
  width: 34px;
}

body.admin-page .module-visible-switch span {
  width: 34px;
  height: 19px;
}

body.admin-page .module-visible-switch span::after {
  width: 15px;
  height: 15px;
}

body.admin-page .module-visible-switch input:checked + span::after {
  transform: translateX(15px);
}

body.admin-page .module-card-preview-row {
  margin: 0 11px 10px 48px;
  padding: 9px 10px;
}

body.admin-page .knowledge-module-card .module-card-body {
  margin: 0 11px 11px 48px;
  padding: 10px;
}

body.admin-page .module-preview-table b,
body.admin-page .module-preview-table em {
  padding: 6px 8px;
  font-size: 11px;
}

body.admin-page .module-preview-file img {
  max-height: 94px;
}

body.admin-page .module-preview-quiz {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.admin-page .module-preview-quiz strong {
  padding: 5px 8px;
  font-size: 11px;
}

body.admin-page .module-preview-quiz span {
  font-size: 12px;
}

body.admin-page .module-preview-quiz-actions .compact-link {
  min-height: 28px;
  border-color: #bfdbfe;
  background: #f8fbff;
  padding: 3px 7px;
}

body.admin-page .module-library-card .module-add-row {
  grid-template-columns: 1fr;
  gap: 7px;
}

body.admin-page .module-library-card .module-add-row select,
body.admin-page .module-library-card .module-add-row input,
body.admin-page .module-library-card .module-add-row button,
body.admin-page .module-search-input {
  min-height: 36px;
  font-size: 12px;
}

body.admin-page .module-library-card .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body.admin-page .module-palette-item {
  min-height: 52px;
  padding: 7px 5px;
}

body.admin-page .module-palette-icon {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

body.admin-page .module-palette-item span {
  font-size: 11px;
  line-height: 1.2;
}

body.admin-page .action-rail-buttons .compact-link {
  min-height: 34px;
  font-size: 12px;
}

body.admin-page .setting-field-stack label,
body.admin-page .setting-label-row,
body.admin-page .setting-meta-list span,
body.admin-page .data-grid span {
  font-size: 12px;
}

body.admin-page .quiz-workbench-card {
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
}

body.admin-page .quiz-workbench-head {
  padding-bottom: 9px;
}

body.admin-page .quiz-source-field {
  padding: 10px;
}

body.admin-page .quiz-source-field textarea {
  min-height: 92px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  gap: 8px;
  padding: 10px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar > div:first-child {
  flex: 1 1 220px;
  min-width: 200px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar > button,
body.admin-page .quiz-workbench-card .quiz-builder-toolbar .compact-link {
  min-height: 36px;
}

body.admin-page .quiz-workbench-card .quiz-add-count-field {
  flex: 0 0 148px;
}

body.admin-page .quiz-count-stepper {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}

body.admin-page .quiz-count-stepper button,
body.admin-page .quiz-count-stepper input {
  min-height: 36px;
}

body.admin-page .quiz-question-editor-card {
  gap: 10px;
  padding: 12px 12px 12px 14px;
}

body.admin-page .quiz-question-editor-head {
  grid-template-columns: minmax(160px, 1fr) 116px auto;
  gap: 8px;
}

body.admin-page .quiz-question-title {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}

body.admin-page .quiz-question-title b {
  width: 30px;
  height: 30px;
}

body.admin-page .quiz-question-editor-card textarea {
  min-height: 58px;
}

@media (min-width: 1100px) {
  body.admin-page .admin-dashboard {
    grid-template-columns: 154px minmax(0, 1fr);
  }

  body.admin-page .admin-command-center {
    width: 154px;
    padding: 14px 10px 52px;
  }

  body.admin-page .admin-panels {
    padding: 12px 12px 28px;
  }

  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 220px minmax(0, 1fr) 276px;
    gap: 12px;
  }
}

@media (min-width: 1321px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 238px minmax(620px, 1fr) 292px;
    gap: 14px;
  }
}

@media (max-width: 1160px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

@media (max-width: 760px) {
  body.admin-page .admin-panels {
    overflow-x: hidden;
    padding: 8px;
  }

  body.admin-page .admin-command-center {
    display: none;
  }

  body.admin-page .admin-dashboard,
  body.admin-page .knowledge-preview-shell,
  body.admin-page .knowledge-top-grid,
  body.admin-page .knowledge-edit-row,
  body.admin-page .quiz-question-editor-head,
  body.admin-page .quiz-answer-grid,
  body.admin-page .quiz-choice-editor-row {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail {
    position: static;
    max-height: none;
  }

  body.admin-page .module-card-preview-row,
  body.admin-page .knowledge-module-card .module-card-body {
    margin-left: 10px;
  }

  body.admin-page .knowledge-module-card .module-card-head {
    grid-template-columns: 1fr;
  }

  body.admin-page .knowledge-module-card .module-card-actions {
    justify-content: flex-start;
  }

  body.admin-page .module-library-card .module-palette-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v9.7 final: lock the teacher editor closer to the submitted SaaS reference. */
body.admin-page .topbar {
  height: 52px;
  min-height: 52px;
}

body.admin-page .brand-lockup {
  width: 172px;
}

body.admin-page .admin-breadcrumb {
  font-size: 12px;
}

body.admin-page .player-actions {
  gap: 8px;
}

body.admin-page .version-pill,
body.admin-page .player-actions .link-button,
body.admin-page .player-actions .secondary {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
}

body.admin-page .admin-side-menu {
  gap: 1px;
}

body.admin-page .admin-side-menu strong {
  color: #111827;
  font-size: 12px;
}

body.admin-page .admin-side-menu button {
  border-radius: 7px;
  color: #64748b;
  font-weight: 780;
}

body.admin-page .admin-side-menu button.active {
  background: #eaf4ff;
  color: var(--brand-dark);
  box-shadow: inset 3px 0 0 var(--brand);
}

body.admin-page .knowledge-sidebar {
  padding: 12px;
}

body.admin-page .knowledge-side-course-card {
  margin-bottom: 12px;
}

body.admin-page .knowledge-search-field input,
body.admin-page .knowledge-create-row input,
body.admin-page .knowledge-sidebar input,
body.admin-page .knowledge-sidebar select {
  min-height: 36px;
  border-radius: 8px;
  font-size: 12px;
}

body.admin-page .knowledge-create-row .compact-link {
  min-height: 36px;
  border-radius: 8px;
  font-size: 12px;
}

body.admin-page .course-tree-topic-list {
  padding-left: 16px;
}

body.admin-page .course-tree-topic-list button {
  min-height: 32px;
  padding: 7px 9px;
}

body.admin-page .course-tree-topic-list button strong {
  font-size: 12px;
}

body.admin-page .knowledge-side-progress {
  padding: 10px;
}

body.admin-page .progress-ring-lite {
  width: 48px;
  height: 48px;
  border-width: 7px;
}

body.admin-page .detail-card {
  padding: 12px;
}

body.admin-page .knowledge-editor-panel {
  border-radius: 8px;
  padding: 10px;
}

body.admin-page .knowledge-editor-panel input,
body.admin-page .knowledge-editor-panel select {
  min-height: 36px;
}

body.admin-page .mastery-row {
  gap: 8px;
}

body.admin-page .mastery-row span {
  min-height: 32px;
}

body.admin-page .module-section-title {
  align-items: center;
  border-top: 1px solid #edf2f8;
  padding-top: 12px;
}

body.admin-page .module-bulk-actions .compact-link {
  min-height: 28px;
}

body.admin-page .knowledge-module-card .module-card-head {
  align-items: center;
}

body.admin-page .knowledge-module-card .module-card-actions {
  align-items: center;
}

body.admin-page .knowledge-module-card .module-card-actions .compact-link {
  border-radius: 6px;
  color: #2563eb;
}

body.admin-page .knowledge-module-card .module-card-actions .danger-soft {
  color: #dc2626;
}

body.admin-page .module-card-preview-row {
  background: #fbfdff;
}

body.admin-page .knowledge-module-card.collapsed .module-card-preview-row {
  margin-bottom: 12px;
}

body.admin-page .module-library-card,
body.admin-page .setting-card,
body.admin-page .data-card {
  padding: 12px;
}

body.admin-page .module-category-tabs button {
  min-height: 34px;
  font-size: 12px;
}

body.admin-page .module-palette-item {
  border-color: #e2e8f0;
  box-shadow: none;
}

body.admin-page .module-palette-item:hover,
body.admin-page .module-palette-item.active {
  border-color: #93c5fd;
  background: #f3f9ff;
  color: var(--brand-dark);
}

body.admin-page .quiz-question-list-footer {
  padding: 10px;
}

body.admin-page .quiz-question-list-footer .compact-link {
  min-height: 36px;
}

@media (min-width: 1180px) {
  body.admin-page .admin-dashboard {
    grid-template-columns: 172px minmax(0, 1fr);
  }

  body.admin-page .admin-command-center {
    top: 52px;
    width: 172px;
    height: calc(100vh - 52px);
    padding: 14px 12px 52px;
  }

  body.admin-page .admin-panels {
    padding: 12px 14px 30px;
  }

  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 246px minmax(480px, 1fr) 298px;
    gap: 14px;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail {
    position: sticky;
    top: 66px;
    grid-column: auto;
    max-height: calc(100vh - 80px);
  }

  body.admin-page .action-rail-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.admin-page .action-rail-buttons .compact-link {
    min-width: 0;
    padding-inline: 6px;
    white-space: nowrap;
  }
}

@media (min-width: 1380px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 260px minmax(660px, 1fr) 318px;
    gap: 16px;
  }
}

@media (max-width: 1179px) and (min-width: 761px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
  }
}

/* v9.8: closer desktop proportion to the submitted professional art-learning CMS. */
body.admin-page .admin-side-menu button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
}

body.admin-page .admin-side-menu button::before {
  display: block;
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid #a7b7cc;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 43%, #a7b7cc 43% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, #a7b7cc 43% 57%, transparent 57%);
  opacity: 0.86;
}

body.admin-page .admin-side-menu button.active::before {
  border-color: #1d8bff;
  background:
    linear-gradient(90deg, transparent 43%, #1d8bff 43% 57%, transparent 57%),
    linear-gradient(0deg, transparent 43%, #1d8bff 43% 57%, transparent 57%),
    #eff6ff;
}

body.admin-page .knowledge-side-course-card {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
}

body.admin-page .knowledge-side-course-card img {
  width: 44px;
  height: 44px;
}

body.admin-page .knowledge-side-course-card strong,
body.admin-page .course-tree-chapter-head strong {
  font-size: 13px;
}

body.admin-page .course-tree-topic-list button {
  border-radius: 7px;
}

body.admin-page .course-tree-topic-list button.active {
  background: #eaf4ff;
  box-shadow: inset 3px 0 0 #1d8bff;
}

body.admin-page .knowledge-module-card {
  border-radius: 9px;
}

body.admin-page .knowledge-module-card .module-card-title {
  min-width: 0;
}

body.admin-page .knowledge-module-card .module-card-actions {
  white-space: nowrap;
}

body.admin-page .knowledge-module-card .module-card-actions .compact-link {
  padding-inline: 4px;
}

body.admin-page .module-card-preview-row,
body.admin-page .knowledge-module-card .module-card-body {
  margin-left: 42px;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  align-items: center;
}

body.admin-page .quiz-question-editor-card {
  border-color: #d9e7f7;
}

body.admin-page .quiz-question-editor-head {
  align-items: center;
}

body.admin-page .quiz-empty-state {
  border-color: #bfdbfe;
  background: #f7fbff;
}

body.admin-page .question-hub-panel {
  display: none;
  gap: 18px;
}

body.admin-page .question-hub-panel.active {
  display: grid;
}

body.admin-page .question-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.admin-page .question-hub-grid article,
body.admin-page .question-paper-roadmap article {
  display: grid;
  gap: 8px;
  border: 1px solid #dce8f7;
  border-radius: 10px;
  background: #f8fbff;
  padding: 16px;
}

body.admin-page .question-hub-grid strong,
body.admin-page .question-paper-roadmap strong {
  color: #0f172a;
  font-size: 15px;
}

body.admin-page .question-hub-grid span,
body.admin-page .question-paper-roadmap span,
body.admin-page .soft-note {
  color: #64748b;
  font-size: 13px;
  line-height: 1.65;
}

body.admin-page .question-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.admin-page .question-type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.admin-page .question-type-list span {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 9px 13px;
  font-weight: 850;
}

body.admin-page .question-paper-roadmap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.admin-page .question-paper-roadmap b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #1d8bff;
  color: #fff;
  font-size: 13px;
}

/* v9.9: make quiz modules read as a multi-question bank in the CMS. */
body.admin-page .module-preview-quiz {
  align-items: start;
  gap: 12px;
}

body.admin-page .module-preview-quiz > div:first-child {
  display: grid;
  gap: 8px;
}

body.admin-page .module-preview-quiz-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.admin-page .module-preview-quiz-list li {
  display: grid;
  grid-template-columns: 22px 58px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.4;
}

body.admin-page .module-preview-quiz-list b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #eaf4ff;
  color: #1d8bff;
  font-size: 12px;
}

body.admin-page .module-preview-quiz-list em {
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  padding: 3px 7px;
  text-align: center;
}

body.admin-page .module-preview-quiz-actions {
  align-self: stretch;
}

@media (min-width: 1180px) {
  body.admin-page .admin-panels {
    padding: 8px 8px 26px;
  }

  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 216px minmax(0, 1fr) 268px;
    gap: 10px;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail {
    top: 60px;
    max-height: calc(100vh - 68px);
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail .knowledge-card,
  body.admin-page .knowledge-main .knowledge-card {
    border-radius: 9px;
  }

  body.admin-page .knowledge-right-rail {
    display: grid;
    gap: 8px;
  }

  body.admin-page .module-library-card,
  body.admin-page .setting-card,
  body.admin-page .data-card {
    padding: 10px;
  }

  body.admin-page .module-library-card .module-palette-group > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.admin-page .module-palette-item {
    min-height: 50px;
    padding: 6px 4px;
  }

  body.admin-page .module-palette-icon {
    width: 18px;
    height: 18px;
  }

  body.admin-page .action-rail-buttons {
    gap: 6px;
  }
}

@media (max-width: 760px) {
  body.admin-page .question-hub-grid,
  body.admin-page .question-paper-roadmap {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1500px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 238px minmax(0, 1fr) 300px;
    gap: 14px;
  }
}

@media (min-width: 1680px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 260px minmax(720px, 1fr) 318px;
  }
}

/* v10.1 base: reference-CMS pass, clearer three-column course editor and stronger quiz builder. */
body.admin-page {
  --cms-bg: #f5f8fc;
  --cms-panel: #ffffff;
  --cms-border: #dfe8f4;
  --cms-muted: #66758a;
  --cms-blue-soft: #edf6ff;
  --cms-blue: #1296ff;
  background: var(--cms-bg);
}

body.admin-page .topbar {
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

body.admin-page .brand-lockup h1 {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

body.admin-page .admin-breadcrumb {
  color: #64748b;
}

body.admin-page .admin-breadcrumb span::after {
  content: ">";
  margin-left: 10px;
  color: #94a3b8;
}

body.admin-page .admin-breadcrumb strong {
  color: #0f172a;
}

body.admin-page .admin-dashboard {
  grid-template-columns: 190px minmax(0, 1fr);
}

body.admin-page .admin-command-center {
  width: 190px;
  padding: 20px 14px 72px;
}

body.admin-page .admin-side-menu strong {
  margin: 22px 10px 8px;
  color: #0f172a;
  font-size: 13px;
}

body.admin-page .admin-side-menu strong:first-child {
  margin-top: 2px;
}

body.admin-page .admin-side-menu button {
  min-height: 38px;
  border-radius: 8px;
  padding: 9px 10px;
  color: #69788d;
  font-size: 13px;
}

body.admin-page .admin-side-menu button.active,
body.admin-page .admin-side-menu button:hover {
  background: #eaf4ff;
  color: #0b73d9;
  box-shadow: inset 3px 0 0 #1296ff;
}

body.admin-page .admin-panels {
  padding: 18px 18px 36px;
}

body.admin-page .knowledge-preview-shell {
  align-items: start;
  grid-template-columns: 270px minmax(640px, 1fr) 320px;
  gap: 18px;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-card,
body.admin-page .knowledge-right-rail .knowledge-card {
  border: 1px solid var(--cms-border);
  border-radius: 10px;
  background: var(--cms-panel);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

body.admin-page .knowledge-sidebar {
  padding: 14px;
}

body.admin-page .knowledge-side-course-card {
  align-items: center;
  border: 1px solid #e3ebf6;
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px;
}

body.admin-page .knowledge-side-course-card strong {
  color: #0f172a;
  font-size: 15px;
}

body.admin-page .knowledge-side-course-card span {
  color: #64748b;
  font-size: 12px;
}

body.admin-page .knowledge-search-field input,
body.admin-page .knowledge-sidebar input,
body.admin-page .knowledge-sidebar select {
  border-color: #dfe8f4;
  background: #fff;
}

body.admin-page .knowledge-create-row .compact-link {
  background: var(--cms-blue);
  color: #fff;
}

body.admin-page .course-tree-group {
  border-radius: 8px;
}

body.admin-page .chapter-tree-item {
  border-radius: 8px;
}

body.admin-page .chapter-tree-item.active {
  background: #f3f9ff;
}

body.admin-page .course-tree-topic-list {
  margin: 4px 0 8px;
  padding-left: 12px;
}

body.admin-page .course-tree-topic-list button,
body.admin-page .knowledge-outline-list button {
  border-radius: 8px;
}

body.admin-page .course-tree-topic-list button strong,
body.admin-page .knowledge-outline-list button strong {
  font-size: 13px;
}

body.admin-page .course-tree-topic-list button.active,
body.admin-page .knowledge-outline-list button.active {
  background: #eaf4ff;
  color: #0b73d9;
  box-shadow: inset 3px 0 0 #1296ff;
}

body.admin-page .knowledge-course-hero {
  display: none;
}

body.admin-page .knowledge-flow-tabs {
  justify-content: flex-start;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}

body.admin-page .knowledge-flow-tabs button {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 12px;
  color: #66758a;
  font-size: 13px;
}

body.admin-page .knowledge-flow-tabs button.active {
  background: #eaf4ff;
  color: #0b73d9;
}

body.admin-page .knowledge-top-grid {
  grid-template-columns: 1.15fr 0.85fr;
  gap: 14px;
}

body.admin-page .knowledge-work-grid {
  grid-template-columns: 1fr;
}

body.admin-page .outline-card {
  order: 1;
}

body.admin-page .detail-card {
  order: 2;
}

body.admin-page .knowledge-card-head {
  border-bottom: 1px solid #edf2f8;
}

body.admin-page .knowledge-card-head strong {
  color: #0f172a;
  font-size: 16px;
}

body.admin-page .knowledge-card-head span {
  color: var(--cms-muted);
}

body.admin-page .knowledge-editor-panel {
  border: 1px solid #e6edf6;
  border-radius: 10px;
  background: #fbfdff;
}

body.admin-page .module-section-title {
  margin-top: 14px;
}

body.admin-page .knowledge-module-card {
  overflow: hidden;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: #fff;
}

body.admin-page .knowledge-module-card .module-card-head {
  padding: 12px 14px;
  background: #fbfdff;
}

body.admin-page .knowledge-module-card .module-card-title b {
  background: #eaf4ff;
  color: #0b73d9;
}

body.admin-page .knowledge-module-card .module-card-title span {
  color: #0f172a;
  font-size: 14px;
}

body.admin-page .module-card-preview-row,
body.admin-page .knowledge-module-card .module-card-body {
  margin-right: 14px;
  margin-left: 50px;
}

body.admin-page .module-card-preview-row {
  border: 1px solid #edf2f8;
  border-radius: 8px;
  background: #fff;
}

body.admin-page .module-library-card {
  padding: 14px;
}

body.admin-page .module-category-tabs {
  border: 1px solid #dfe8f4;
  border-radius: 9px;
  background: #fbfdff;
  padding: 4px;
}

body.admin-page .module-category-tabs button {
  border-radius: 7px;
}

body.admin-page .module-category-tabs button.active {
  background: #eaf4ff;
  color: #0b73d9;
}

body.admin-page .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .module-palette-item {
  min-height: 62px;
  border-radius: 8px;
  background: #fff;
}

body.admin-page .module-palette-item em {
  display: none;
}

body.admin-page .quiz-workbench-card {
  border: 1px solid #d7e8ff;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  padding: 16px;
}

body.admin-page .quiz-workbench-head strong {
  font-size: 16px;
}

body.admin-page .quiz-count-panel {
  border-radius: 8px;
  background: #eaf4ff;
  color: #0b73d9;
}

body.admin-page .quiz-source-field {
  border: 1px dashed #a7d1ff;
  border-radius: 10px;
  background: #f5faff;
}

body.admin-page .quiz-source-field textarea {
  min-height: 129px;
  border-color: #cfe3ff;
  background: #fff;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto;
  align-items: center;
  border: 1px solid #dfe8f4;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

body.admin-page .quiz-quick-add-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

body.admin-page .quiz-quick-add-row .compact-link {
  min-width: 52px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #0b73d9;
}

body.admin-page .quiz-add-count-field {
  min-width: 150px;
}

body.admin-page .quiz-question-editor-list {
  gap: 12px;
}

body.admin-page .quiz-question-editor-card {
  border: 1px solid #d7e8ff;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

body.admin-page .quiz-question-editor-card::before {
  background: #1296ff;
}

body.admin-page .quiz-question-title b {
  background: #eaf4ff;
  color: #0b73d9;
}

body.admin-page .quiz-question-editor-head select {
  min-height: 36px;
}

body.admin-page .quiz-question-list-footer {
  display: flex;
  justify-content: center;
  border: 1px dashed #a7d1ff;
  border-radius: 10px;
  background: #f7fbff;
}

body.admin-page .quiz-question-list-footer .compact-link {
  min-width: 180px;
}

@media (min-width: 1290px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 220px minmax(500px, 1fr) 260px;
    gap: 12px;
  }
}

@media (max-width: 1120px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1;
  }

  body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1380px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px minmax(620px, 1fr) 300px;
    gap: 16px;
  }
}

@media (max-width: 820px) {
  body.admin-page .admin-dashboard,
  body.admin-page .knowledge-preview-shell,
  body.admin-page .knowledge-top-grid {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .admin-command-center {
    position: static;
    width: auto;
    height: auto;
  }

  body.admin-page .module-card-preview-row,
  body.admin-page .knowledge-module-card .module-card-body {
    margin-left: 12px;
  }
}

/* v10.x: draggable teacher hotspots plus per-question quiz feedback. */
body.admin-page .knowledge-preview-panel > .panel-heading {
  display: none;
}

body.admin-page .knowledge-preview-shell {
  margin-top: 0;
}

body.admin-page .knowledge-sidebar {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

body.admin-page .knowledge-right-rail {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

body.admin-page .knowledge-flow-tabs {
  position: sticky;
  top: 76px;
  z-index: 5;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

body.admin-page .knowledge-top-grid {
  align-items: stretch;
}

body.admin-page .knowledge-card {
  border-color: #e3ebf6;
}

body.admin-page .module-library-card .knowledge-card-head {
  align-items: flex-start;
  padding-bottom: 10px;
}

body.admin-page .module-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
}

body.admin-page .module-category-tabs button {
  min-height: 30px;
  padding: 5px 4px;
  font-size: 12px;
}

body.admin-page .module-add-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.admin-page .module-add-row .compact-link {
  width: 100%;
}

body.admin-page .module-search-input {
  min-height: 36px;
  margin: 10px 0 8px;
  font-size: 13px;
}

body.admin-page .module-palette {
  display: grid;
  gap: 10px;
}

body.admin-page .module-palette-group {
  display: grid;
  gap: 8px;
}

body.admin-page .module-palette-group > strong {
  color: #64748b;
  font-size: 12px;
}

body.admin-page .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .module-palette-item {
  min-height: 74px;
  border: 1px solid #e4ecf7;
  border-radius: 8px;
  padding: 8px 5px;
  background: #fff;
  box-shadow: none;
  text-align: center;
}

body.admin-page .module-palette-item:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  transform: translateY(-1px);
}

body.admin-page .module-palette-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  background: #eff6ff;
  color: #1296ff;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .module-palette-item span {
  display: block;
  color: #0f172a;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

body.admin-page .module-palette-item em {
  display: block;
  margin-top: 2px;
  color: #8a99ad;
  font-size: 11px;
  font-style: normal;
}

body.admin-page .quiz-workbench-card {
  margin-top: 18px;
}

body.admin-page .quiz-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

body.admin-page .quiz-workbench-card .quiz-builder-toolbar {
  grid-template-columns: minmax(160px, 1fr);
  gap: 10px;
}

body.admin-page .quiz-quick-add-row {
  justify-content: stretch;
}

body.admin-page .quiz-quick-add-row .compact-link {
  flex: 1;
  min-width: 0;
}

body.admin-page .quiz-add-count-field {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  gap: 8px;
  align-items: center;
}

body.admin-page .module-preview-quiz {
  gap: 12px;
}

body.admin-page .module-preview-quiz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

body.admin-page .module-preview-quiz-actions .compact-link {
  min-width: 58px;
  padding-right: 10px;
  padding-left: 10px;
}

@media (min-width: 1290px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 232px minmax(530px, 1fr) 272px;
  }
}

@media (min-width: 1440px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px minmax(690px, 1fr) 310px;
    gap: 18px;
  }
}

@media (max-width: 1180px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px minmax(0, 1fr);
  }

  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-right-rail,
  body.admin-page .knowledge-flow-tabs {
    position: static;
    max-height: none;
  }
}

/* 10.4 AI artwork hotspot module. */
body.admin-page .module-preview-hotspot {
  display: grid;
  gap: 8px;
}

body.admin-page .module-preview-hotspot > span,
body.admin-page .hotspot-editor-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .interactive-hotspot-preview,
body.student-page .student-hotspot-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  background: #f8fafc;
}

body.admin-page .interactive-hotspot-preview {
  cursor: crosshair;
}

body.admin-page .interactive-hotspot-preview img,
body.student-page .student-hotspot-stage img {
  display: block;
  width: 100%;
  height: auto;
}

body.admin-page .interactive-hotspot-dot,
body.student-page .student-hotspot-point {
  position: absolute;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #0a84ff;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(10, 132, 255, 0.28);
  font-weight: 950;
}

body.admin-page .interactive-hotspot-dot {
  width: 28px;
  height: 28px;
  z-index: 2;
  cursor: grab;
  font-size: 12px;
  touch-action: none;
  user-select: none;
}

body.admin-page .interactive-hotspot-dot.dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 12px 26px rgba(10, 132, 255, 0.42);
}

body.admin-page .interactive-hotspot-dot.pending {
  background: #f97316;
}

body.admin-page .interactive-hotspot-preview.image-label-mode .interactive-hotspot-dot {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(15, 23, 42, 0.18);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.12);
}

/* v11.0: knowledge building modules, student media, and proactive learning data. */
body.admin-page .module-gallery-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
}

body.admin-page .module-gallery-preview figure {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

body.admin-page .module-gallery-preview img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f8fafc;
}

body.admin-page .module-gallery-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

body.admin-page .gallery-caption-input {
  width: 100%;
  margin-top: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: #fff;
  font-size: 13px;
}

body.admin-page .student-risk-alerts {
  display: grid;
  gap: 10px;
  margin: 10px 0 16px;
}

body.admin-page .student-risk-alert {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 12px;
  background: #fff1f2;
  color: #991b1b;
  text-align: left;
}

body.admin-page .student-risk-alert strong,
body.admin-page .student-risk-alert span {
  display: block;
}

body.admin-page .student-risk-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  background: #f0fdf4;
  color: #166534;
}

body.admin-page .question-analysis-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

body.admin-page .question-analysis-table th,
body.admin-page .question-analysis-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  text-align: left;
  vertical-align: top;
}

body.admin-page .question-analysis-table th {
  color: #475569;
  background: #f8fafc;
}

body.student-page .student-gallery-module {
  display: grid;
  gap: 12px;
}

body.student-page .student-gallery-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: #f8fafc;
}

body.student-page .student-gallery-image {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

body.student-page .student-gallery-image img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: opacity 160ms ease, transform 180ms ease;
}

body.student-page .student-gallery-stage.is-switching .student-gallery-image img {
  opacity: 0;
  transform: scale(0.992);
}

body.student-page .gallery-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 28px;
  transform: translateY(-50%);
}

body.student-page .gallery-arrow.left {
  left: 10px;
}

body.student-page .gallery-arrow.right {
  right: 10px;
}

body.student-page .gallery-arrow:disabled {
  opacity: 0.25;
}

body.student-page .student-gallery-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: #64748b;
}

body.student-page .student-gallery-meta strong {
  color: #0f172a;
  text-align: center;
}

body.student-page .student-author-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 2px;
}

body.student-page .student-author-work-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

body.student-page .student-author-work-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f8fafc;
}

body.student-page .student-author-work-card span {
  min-height: 2.4em;
  font-weight: 700;
  line-height: 1.2;
}

body.student-page .student-external-link-card {
  display: block;
  padding: 14px;
  border: 1px solid rgba(37, 99, 235, 0.24);
  border-radius: 14px;
  background: #eff6ff;
  color: #0f172a;
  text-decoration: none;
}

body.student-page .student-external-link-card span {
  color: #2563eb;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .student-module-video-player {
  display: grid;
  gap: 10px;
}

body.student-page .module-video-stage {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #020617;
}

body.student-page .module-video-stage video {
  display: block;
  width: 100%;
  max-height: 64vh;
  filter: brightness(var(--module-video-brightness, 1));
}

body.student-page .module-video-lock-layer {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(15, 23, 42, 0.55);
  color: #fff;
  font-weight: 900;
  pointer-events: none;
}

body.student-page .student-module-video-player.locked .module-video-lock-layer {
  display: grid;
}

body.student-page .module-video-controls {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto auto;
  gap: 8px;
  align-items: center;
}

body.student-page .module-video-seek {
  width: 100%;
}

body.student-page .module-video-brightness {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 12px;
}

body.student-page .module-video-caption {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 760px) {
  body.student-page .student-author-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.student-page .module-video-controls {
    grid-template-columns: repeat(3, minmax(0, auto));
  }

  body.student-page .module-video-controls .module-video-seek,
  body.student-page .module-video-controls [data-module-video-time],
  body.student-page .module-video-controls .module-video-brightness {
    grid-column: 1 / -1;
  }
}

body.admin-page .interactive-hotspot-preview.dragging {
  cursor: grabbing;
}

body.admin-page .interactive-hotspot-empty {
  border: 1px dashed rgba(10, 132, 255, 0.28);
  border-radius: 8px;
  padding: 16px;
  color: #64748b;
  font-weight: 800;
  background: rgba(239, 246, 255, 0.72);
}

body.admin-page .interactive-hotspot-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 14px;
  background: rgba(248, 250, 252, 0.92);
}

body.admin-page .hotspot-drag-tip {
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(239, 246, 255, 0.78);
  color: #0f62c9;
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .hotspot-editor-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

body.admin-page .hotspot-editor-head > div:first-child {
  display: grid;
  gap: 3px;
}

body.admin-page .hotspot-editor-head > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-page .hotspot-hint-input {
  min-height: 72px;
}

body.admin-page .hotspot-editor-list {
  display: grid;
  gap: 10px;
}

body.admin-page .hotspot-editor-row {
  display: grid;
  grid-template-columns: 34px minmax(72px, 0.35fr) minmax(120px, 0.7fr) minmax(180px, 1fr) minmax(210px, 0.7fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

body.admin-page .hotspot-editor-row.pending {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(255, 247, 237, 0.72);
}

body.admin-page .hotspot-editor-row > b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #0a84ff;
  color: #ffffff;
}

body.admin-page .hotspot-position-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .student-hotspot-module {
  display: grid;
  gap: 12px;
}

body.student-page .student-hotspot-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .student-hotspot-toolbar button {
  min-height: 40px;
  border: 1px solid rgba(10, 132, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a;
  font-weight: 900;
}

body.student-page .student-hotspot-toolbar button.active {
  border-color: rgba(10, 132, 255, 0.52);
  background: rgba(10, 132, 255, 0.12);
  color: #0066cc;
}

body.student-page .student-hotspot-point {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 2px solid #ffffff;
  font-size: 13px;
  cursor: pointer;
}

body.student-page .student-hotspot-point.active {
  background: #30d158;
  box-shadow: 0 8px 18px rgba(48, 209, 88, 0.28);
}

body.student-page .student-hotspot-point.in-image-marker,
body.student-page .student-hotspot-point.in-image-marker.active,
body.student-page .student-hotspot-module.marker-image_labels.mode-exam .student-hotspot-point,
body.student-page .student-hotspot-module.marker-image_labels.mode-exam .student-hotspot-point.active {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.student-page .student-hotspot-point.in-image-marker span,
body.student-page .student-hotspot-module.marker-image_labels.mode-exam .student-hotspot-point span,
body.student-page .student-hotspot-module.marker-image_labels.mode-exam .student-hotspot-point.active span {
  opacity: 0;
}

body.student-page .student-hotspot-point.in-image-marker:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.56);
  outline-offset: 3px;
}

body.student-page .student-hotspot-module.mode-learn .student-hotspot-point {
  min-width: 78px;
  height: 34px;
}

body.student-page .student-hotspot-module.mode-exam .student-hotspot-point {
  width: 46px;
  height: 46px;
  border-color: transparent;
  background: rgba(10, 132, 255, 0.02);
  box-shadow: none;
}

body.student-page .student-hotspot-module.mode-exam .student-hotspot-point span {
  opacity: 0;
}

body.student-page .student-hotspot-module.mode-exam .student-hotspot-point.active {
  border-color: #ffffff;
  background: #30d158;
  box-shadow: 0 8px 18px rgba(48, 209, 88, 0.28);
}

body.student-page .student-hotspot-module.mode-exam .student-hotspot-point.active span {
  opacity: 1;
}

body.student-page .student-hotspot-explain {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(10, 132, 255, 0.14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(239, 246, 255, 0.74);
}

body.student-page .student-hotspot-explain span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

body.student-page .student-hotspot-explain strong {
  color: #0f172a;
  font-size: 17px;
}

body.student-page .student-hotspot-explain p {
  margin: 0;
  color: #334155;
  line-height: 1.6;
}

body.student-page .student-hotspot-popover {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 4px;
  width: min(240px, calc(100% - 28px));
  max-width: 240px;
  transform: translate(-50%, calc(-100% - 14px));
  border: 1px solid rgba(148, 122, 92, 0.28);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255, 251, 243, 0.95);
  box-shadow: 0 14px 34px rgba(64, 44, 28, 0.18);
  color: #1f2937;
  text-align: left;
}

body.student-page .student-hotspot-popover.below {
  transform: translate(-50%, 16px);
}

body.student-page .student-hotspot-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(148, 122, 92, 0.28);
  border-bottom: 1px solid rgba(148, 122, 92, 0.28);
  background: rgba(255, 251, 243, 0.95);
}

body.student-page .student-hotspot-popover.below::after {
  top: -7px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(148, 122, 92, 0.28);
  border-top: 1px solid rgba(148, 122, 92, 0.28);
}

body.student-page .student-hotspot-popover span {
  color: #8a6b45;
  font-size: 11px;
  font-weight: 900;
}

body.student-page .student-hotspot-popover strong {
  color: #111827;
  font-size: 15px;
  line-height: 1.28;
}

body.student-page .student-hotspot-popover p {
  margin: 0;
  color: #3f4754;
  font-size: 13px;
  line-height: 1.48;
}

@media (max-width: 860px) {
  body.admin-page .hotspot-editor-head,
  body.admin-page .hotspot-editor-row {
    grid-template-columns: 1fr;
  }

  body.admin-page .hotspot-position-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v10.7: module desktop grid, reliable right rail toggle, and tree actions. */
body.admin-page .knowledge-preview-shell {
  position: relative;
}

body.admin-page .right-rail-toggle {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 82px;
  z-index: 8;
  width: 100%;
  min-height: 40px;
  border: 1px solid #dbe7f6;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  font-weight: 900;
}

body.admin-page .knowledge-right-rail {
  grid-column: 3;
  grid-row: 1;
  margin-top: 52px;
}

body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  grid-template-columns: 250px minmax(0, 1fr) 129px !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-right-rail {
  display: none !important;
}

body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
  grid-column: 3;
  margin-top: 0;
  background: #eaf4ff;
  color: #006fd6;
}

body.admin-page .knowledge-module-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  align-items: stretch;
  min-height: 116px;
  border: 1px dashed transparent;
  border-radius: 10px;
  padding: 2px;
}

body.admin-page .knowledge-module-list.drag-over {
  border-color: #0a84ff;
  background: rgba(10, 132, 255, 0.06);
}

body.admin-page .knowledge-module-card.module-tile {
  display: grid;
  min-height: 172px;
  border: 1px solid #dbe7f6;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
  cursor: pointer;
  user-select: none;
}

body.admin-page .knowledge-module-card.module-tile:hover {
  border-color: #8ec5ff;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(10, 132, 255, 0.12);
}

body.admin-page .module-tile-main {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px 10px;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

body.admin-page .module-tile-icon {
  grid-row: 1 / 4;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #0a84ff;
  font-style: normal;
  font-weight: 950;
}

body.admin-page .module-tile-index {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: #dbeafe;
  color: #006fd6;
  font-size: 12px;
  font-weight: 950;
}

body.admin-page .module-tile-main strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .module-tile-main em,
body.admin-page .module-tile-main small {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
}

body.admin-page .module-tile-main small {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  margin-top: 4px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.admin-page .module-tile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 10px;
}

body.admin-page .module-tile-actions .compact-link {
  min-height: 30px;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
}

body.admin-page .knowledge-module-card.module-editor-card {
  grid-column: 1 / -1;
}

body.admin-page .knowledge-tree-menu {
  position: absolute;
  z-index: 50;
  display: grid;
  gap: 4px;
  min-width: 156px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  padding: 6px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

body.admin-page .knowledge-tree-menu.hidden {
  display: none;
}

body.admin-page .knowledge-tree-menu button {
  justify-content: flex-start;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 6px 9px;
  background: transparent;
  color: #0f172a;
  box-shadow: none;
  font-weight: 850;
}

body.admin-page .knowledge-tree-menu button:hover {
  background: #eef6ff;
  color: #006fd6;
}

body.admin-page .knowledge-tree-menu .danger-soft {
  color: #dc2626;
}

@media (max-width: 1180px) {
  body.admin-page .right-rail-toggle,
  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1;
    position: static;
    margin-top: 0;
  }

  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v11.0 base: module QA, hidden legacy quiz workbench, and reliable module rail. */
body.admin-page .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns: 270px minmax(0, 1fr) 340px !important;
  gap: 16px !important;
  align-items: start;
}

body.admin-page .knowledge-main {
  min-width: 0;
}

body.admin-page .right-rail-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  position: sticky;
  top: 82px;
  z-index: 15;
  min-height: 42px;
  border-radius: 8px;
}

body.admin-page .knowledge-right-rail {
  grid-column: 3;
  grid-row: 1;
  margin-top: 54px !important;
  min-width: 0;
}

body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  grid-template-columns: 270px minmax(0, 1fr) 48px !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-right-rail {
  display: none !important;
}

body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
  grid-column: 3;
  width: 48px;
  min-height: 176px;
  padding: 12px 6px;
  background: #eaf4ff;
  color: #006fd6;
  line-height: 1.35;
  white-space: normal;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

body.admin-page .module-section-title {
  align-items: center;
}

body.admin-page .module-bulk-actions [data-kp-expand-all-modules],
body.admin-page .module-bulk-actions [data-kp-collapse-all-modules],
body.admin-page .add-module-inline {
  display: none !important;
}

body.admin-page .knowledge-module-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch;
  min-height: 160px;
  padding: 0;
}

body.admin-page .knowledge-module-list.editing-one {
  display: block !important;
}

body.admin-page .knowledge-module-card.module-tile {
  position: relative;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  min-height: 210px;
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
}

body.admin-page .knowledge-module-card.module-tile::after {
  content: "双击编辑";
  position: absolute;
  right: 12px;
  top: 12px;
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(10, 132, 255, 0.1);
  color: #006fd6;
  font-size: 11px;
  font-weight: 900;
}

body.admin-page .module-tile-preview {
  display: grid;
  align-content: center;
  min-height: 72px;
  max-height: 88px;
  margin-top: 12px;
  border: 1px solid #edf3fb;
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  background: #f8fbff;
  color: #64748b;
}

body.admin-page .module-tile-preview img,
body.admin-page .module-tile-preview video {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}

body.admin-page .module-tile-preview table,
body.admin-page .module-tile-preview .knowledge-table-preview,
body.admin-page .module-tile-preview .module-table-preview {
  max-height: 70px;
  overflow: hidden;
  font-size: 11px;
}

body.admin-page .module-tile-actions {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

body.admin-page .knowledge-module-card.module-tile:hover .module-tile-actions,
body.admin-page .knowledge-module-card.module-tile:focus-within .module-tile-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.admin-page .module-add-card {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 210px;
  border: 1px dashed #93c5fd;
  border-radius: 10px;
  padding: 18px;
  background: #f8fbff;
  color: #006fd6;
  text-align: center;
}

body.admin-page .module-add-card span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #eaf4ff;
  font-size: 26px;
  font-weight: 950;
}

body.admin-page .module-add-card em {
  max-width: 210px;
  color: #64748b;
  font-style: normal;
  font-weight: 750;
  line-height: 1.5;
}

body.admin-page .knowledge-module-editor-shell {
  display: grid;
  gap: 14px;
}

body.admin-page .module-editor-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

body.admin-page .module-editor-toolbar > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.admin-page .module-editor-toolbar strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .module-editor-toolbar span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .module-editor-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-page .knowledge-module-card.module-editor-card {
  margin: 0;
  border-radius: 10px;
}

body.admin-page .module-library-card .module-palette-group > div {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.admin-page .module-palette-item {
  min-height: 82px !important;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main {
  grid-column: 1 / -1;
  width: 100% !important;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon index"
    "icon title"
    "icon meta"
    "summary summary";
  align-items: start;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-icon {
  grid-area: icon;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-index {
  grid-area: index;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main em {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main small {
  grid-area: summary;
  grid-column: 1 / -1;
  width: 100%;
  word-break: normal;
  writing-mode: horizontal-tb;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-preview,
body.admin-page .knowledge-module-card.module-tile .module-tile-actions {
  grid-column: 1 / -1;
  width: 100%;
}

body.admin-page .teacher-hidden-progress {
  display: none !important;
}

body.admin-page #knowledgePracticeArea {
  display: none !important;
}

body.admin-page .knowledge-module-card.module-tile .module-preview-quiz.compact {
  display: grid;
  gap: 6px;
}

body.admin-page .knowledge-module-card.module-tile .module-preview-quiz.compact strong,
body.admin-page .knowledge-module-card.module-tile .module-preview-quiz.compact span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1320px) {
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 248px minmax(0, 1fr) 300px !important;
  }

  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: 248px minmax(0, 1fr) 48px !important;
  }
}

@media (max-width: 1180px) {
  body.admin-page .knowledge-preview-shell,
  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-page .right-rail-toggle,
  body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
    writing-mode: horizontal-tb;
  }

  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1;
    margin-top: 0 !important;
  }
}

/* v11.2: make actions visible and persistent: save toasts, clearer drag handles, and stable module tile hit areas. */
body.admin-page .admin-global-toast {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 48px));
  padding: 12px 16px;
  border: 1px solid #b7dcff;
  border-radius: 12px;
  background: rgba(238, 247, 255, 0.96);
  color: #0759b8;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  box-shadow: 0 18px 44px rgba(12, 43, 90, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

body.admin-page .admin-global-toast.show {
  opacity: 1;
  transform: translateY(0);
}

body.admin-page .admin-global-toast.error {
  border-color: #ffb4b4;
  background: rgba(255, 241, 241, 0.96);
  color: #bd1d2a;
}

body.admin-page .tree-drag-handle,
body.admin-page .module-card-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8aa0bb;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -3px;
  cursor: grab;
  user-select: none;
}

body.admin-page [data-kp-tree-node]:hover .tree-drag-handle,
body.admin-page .knowledge-module-card:hover .module-card-drag-handle {
  color: #1683f6;
}

body.admin-page .chapter-tree-item .tree-title-line {
  gap: 8px !important;
}

body.admin-page .chapter-tree-item .tree-drag-handle {
  width: 22px;
  min-width: 22px;
}

body.admin-page .course-tree-topic-list [data-kp-tree-node],
body.admin-page #knowledgeTopicList [data-kp-tree-node] {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.admin-page .course-tree-topic-list [data-kp-tree-node] strong,
body.admin-page #knowledgeTopicList [data-kp-tree-node] strong {
  min-width: 0;
}

body.admin-page .knowledge-module-card.module-tile {
  position: relative;
}

body.admin-page .knowledge-module-card.module-tile .module-card-drag-handle {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 24px;
  height: 32px;
  z-index: 2;
  touch-action: none;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main {
  padding-left: 28px;
}

body.admin-page .knowledge-module-card.module-tile.dragging-module {
  opacity: 0.65;
  outline: 2px solid #1683f6;
  outline-offset: 2px;
}

body.admin-page .knowledge-module-card.module-tile.module-drop-target {
  outline: 3px solid #1683f6;
  outline-offset: 3px;
  background: #eef7ff;
}

/* v13.4: Morandi module color system. Same module type keeps one calm color family; different modules stay visually distinct. */
body.admin-page [data-module-type] {
  --module-accent: #7f93a5;
  --module-accent-soft: #eef2f5;
  --module-accent-border: #cfd9df;
  --module-accent-text: #435363;
}

body.admin-page [data-module-type="text"] {
  --module-accent: #8da0b0;
  --module-accent-soft: #eef3f5;
  --module-accent-border: #cfdbe2;
  --module-accent-text: #405365;
}

body.admin-page [data-module-type="rich_text"] {
  --module-accent: #9b91aa;
  --module-accent-soft: #f3eff6;
  --module-accent-border: #ddd5e6;
  --module-accent-text: #584f68;
}

body.admin-page [data-module-type="table"],
body.admin-page [data-module-type="artwork_table"] {
  --module-accent: #7f9f94;
  --module-accent-soft: #edf4f1;
  --module-accent-border: #c9ddd7;
  --module-accent-text: #3f6257;
}

body.admin-page [data-module-type="artwork_table"] {
  --module-accent: #8b9f79;
  --module-accent-soft: #f0f4ea;
  --module-accent-border: #d5dfc6;
  --module-accent-text: #53633d;
}

body.admin-page [data-module-type="timeline"] {
  --module-accent: #b9a17d;
  --module-accent-soft: #f7f2e8;
  --module-accent-border: #e5d7bd;
  --module-accent-text: #6f5b35;
}

body.admin-page [data-module-type="profile"],
body.admin-page [data-module-type="flashcard"] {
  --module-accent: #ad927f;
  --module-accent-soft: #f6efeb;
  --module-accent-border: #e4d2c8;
  --module-accent-text: #684d3f;
}

body.admin-page [data-module-type="flashcard"] {
  --module-accent: #b79a7b;
  --module-accent-soft: #f7f1e8;
  --module-accent-border: #e6d6bf;
  --module-accent-text: #6d5436;
}

body.admin-page [data-module-type="mindmap"] {
  --module-accent: #789ab4;
  --module-accent-soft: #edf4f8;
  --module-accent-border: #c8dbe8;
  --module-accent-text: #3d5c72;
}

body.admin-page [data-module-type="memory-palace"],
body.admin-page [data-module-type="fun_memory"],
body.admin-page [data-module-type="memory_image"] {
  --module-accent: #c19a99;
  --module-accent-soft: #f8eeee;
  --module-accent-border: #ead0cf;
  --module-accent-text: #7a4e4d;
}

body.admin-page [data-module-type="memory_image"] {
  --module-accent: #b58fa2;
  --module-accent-soft: #f7eff3;
  --module-accent-border: #e5ccd8;
  --module-accent-text: #71495c;
}

body.admin-page [data-module-type="artwork_image"] {
  --module-accent: #8fa88b;
  --module-accent-soft: #eef5ed;
  --module-accent-border: #d0e1cc;
  --module-accent-text: #4c6647;
}

body.admin-page [data-module-type="gallery"] {
  --module-accent: #8aa8a5;
  --module-accent-soft: #edf5f4;
  --module-accent-border: #cde0de;
  --module-accent-text: #496865;
}

body.admin-page [data-module-type="author_works"] {
  --module-accent: #a4a17a;
  --module-accent-soft: #f5f3e8;
  --module-accent-border: #e1debd;
  --module-accent-text: #626035;
}

body.admin-page [data-module-type="comparison_image"] {
  --module-accent: #9b967f;
  --module-accent-soft: #f3f1eb;
  --module-accent-border: #ddd8c8;
  --module-accent-text: #5e5945;
}

body.admin-page [data-module-type="interactive_artwork"] {
  --module-accent: #7f91bd;
  --module-accent-soft: #eef2fa;
  --module-accent-border: #ccd6ec;
  --module-accent-text: #46577d;
}

body.admin-page [data-module-type="lesson_video"],
body.admin-page [data-module-type="memory_video"],
body.admin-page [data-module-type="audio"] {
  --module-accent: #9a88a8;
  --module-accent-soft: #f2eef6;
  --module-accent-border: #ddd2e7;
  --module-accent-text: #5d4c68;
}

body.admin-page [data-module-type="memory_video"] {
  --module-accent: #8c8caf;
  --module-accent-soft: #f0f1f8;
  --module-accent-border: #d1d3e8;
  --module-accent-text: #515275;
}

body.admin-page [data-module-type="audio"] {
  --module-accent: #879bb4;
  --module-accent-soft: #eef3f8;
  --module-accent-border: #ccd9e7;
  --module-accent-text: #465b73;
}

body.admin-page [data-module-type="recall_image"],
body.admin-page [data-module-type="oral_recall"],
body.admin-page [data-module-type="quiz"] {
  --module-accent: #c1a36f;
  --module-accent-soft: #f8f3e8;
  --module-accent-border: #ead9b8;
  --module-accent-text: #735d2e;
}

body.admin-page [data-module-type="oral_recall"] {
  --module-accent: #b9968e;
  --module-accent-soft: #f7efed;
  --module-accent-border: #e6d1cb;
  --module-accent-text: #70514a;
}

body.admin-page [data-module-type="quiz"] {
  --module-accent: #b8aa78;
  --module-accent-soft: #f6f3e9;
  --module-accent-border: #e6ddb8;
  --module-accent-text: #6d6133;
}

body.admin-page [data-module-type="external_link"],
body.admin-page [data-module-type="file"] {
  --module-accent: #809d9b;
  --module-accent-soft: #edf4f4;
  --module-accent-border: #c9dddc;
  --module-accent-text: #405f5d;
}

body.admin-page [data-module-type="file"] {
  --module-accent: #8b96a3;
  --module-accent-soft: #eef1f4;
  --module-accent-border: #d0d8df;
  --module-accent-text: #4b5663;
}

body.admin-page .knowledge-module-card.module-tile[data-module-type] {
  border-color: var(--module-accent-border);
  background:
    linear-gradient(90deg, var(--module-accent) 0 5px, transparent 5px),
    linear-gradient(180deg, #ffffff 0%, var(--module-accent-soft) 100%);
}

body.admin-page .knowledge-module-card.module-tile[data-module-type]::after {
  background: color-mix(in srgb, var(--module-accent) 13%, white);
  color: var(--module-accent-text);
}

body.admin-page .knowledge-module-card.module-tile[data-module-type]:hover {
  border-color: var(--module-accent);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--module-accent) 18%, transparent);
}

body.admin-page .knowledge-module-card[data-module-type] .module-tile-icon,
body.admin-page .module-palette-item[data-module-type] .module-palette-icon {
  border-color: var(--module-accent-border);
  background: var(--module-accent-soft);
  color: var(--module-accent-text);
}

body.admin-page .knowledge-module-card[data-module-type] .module-tile-index {
  background: color-mix(in srgb, var(--module-accent) 17%, white);
  color: var(--module-accent-text);
}

body.admin-page .knowledge-module-card[data-module-type] .module-card-title i,
body.admin-page .knowledge-module-card[data-module-type] .module-card-title b {
  background: var(--module-accent-soft);
  color: var(--module-accent-text);
}

body.admin-page .knowledge-module-card.module-editor-card[data-module-type] {
  border-left: 5px solid var(--module-accent);
}

body.admin-page .module-palette-item[data-module-type] {
  border-color: var(--module-accent-border);
  background: linear-gradient(180deg, #fff 0%, var(--module-accent-soft) 100%);
}

body.admin-page .module-palette-item[data-module-type]:hover,
body.admin-page .module-palette-item[data-module-type]:focus-visible {
  border-color: var(--module-accent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--module-accent) 14%, transparent);
}

/* v13.9: keep module tile action buttons above the card hit layer so preview/edit/delete are real clicks, not decorative text. */
body.admin-page .knowledge-module-card.module-tile .module-tile-main,
body.admin-page .knowledge-module-card.module-tile .module-tile-preview {
  position: relative;
  z-index: 1;
}

body.admin-page .knowledge-module-card.module-tile::after {
  pointer-events: none;
  z-index: 2;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-actions {
  position: relative;
  z-index: 6;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-actions button,
body.admin-page .knowledge-module-card.module-tile .module-tile-actions label {
  pointer-events: auto;
}

@media (max-width: 760px) {
  body.admin-page .admin-global-toast {
    top: 72px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}

/* v11.0: real previews, save-to-collapse, draggable structure, and module-first media editing. */
body.admin-page #knowledgeMemoryCard {
  display: none !important;
}

body.admin-page .knowledge-top-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-page .media-inspector {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.admin-page .module-file-toolbar,
body.admin-page .module-panzoom-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.admin-page .module-panzoom-wrap {
  display: grid;
  gap: 8px;
  min-width: 0;
}

body.admin-page .module-panzoom-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  max-height: 520px;
  overflow: hidden;
  border: 1px solid #d9e7f7;
  border-radius: 10px;
  background:
    radial-gradient(circle at 16px 16px, rgba(10, 132, 255, 0.12) 0 3px, transparent 4px) 0 0 / 34px 34px,
    #f8fbff;
  cursor: grab;
  touch-action: none;
}

body.admin-page .module-preview-status,
body.admin-page .module-preview-error {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
}

body.admin-page .module-preview-status {
  color: #2563eb;
  background: rgba(10, 132, 255, 0.08);
}

body.admin-page .module-preview-error {
  display: none;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
}

body.admin-page .module-panzoom-stage .module-preview-status,
body.admin-page .module-panzoom-stage .module-preview-error {
  position: absolute;
  inset: auto 16px 16px;
  z-index: 2;
  pointer-events: none;
}

body.admin-page .is-loaded > .module-preview-status,
body.admin-page .is-loaded .module-preview-status,
body.admin-page .module-panzoom-stage.is-loaded .module-preview-status {
  display: none;
}

body.admin-page .is-error > .module-preview-status,
body.admin-page .is-error .module-preview-status,
body.admin-page .module-panzoom-stage.is-error .module-preview-status {
  display: none;
}

body.admin-page .is-error > .module-preview-error,
body.admin-page .is-error .module-preview-error,
body.admin-page .module-panzoom-stage.is-error .module-preview-error {
  display: grid;
}

body.admin-page .module-panzoom-stage.dragging {
  cursor: grabbing;
}

body.admin-page .module-panzoom-stage img,
body.admin-page .module-panzoom-stage .mind-diagram-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.08s ease;
  user-select: none;
  -webkit-user-drag: none;
}

body.admin-page .module-file-preview video,
body.admin-page .modal-single-file video {
  width: 100%;
  max-height: 68vh;
  border-radius: 10px;
  background: #0f172a;
}

body.admin-page .module-file-preview audio,
body.admin-page .modal-single-file audio {
  width: 100%;
}

body.admin-page .module-file-preview iframe,
body.admin-page .modal-single-file iframe {
  width: 100%;
  min-height: 62vh;
  border: 1px solid #d9e7f7;
  border-radius: 10px;
  background: #fff;
}

body.admin-page .knowledge-content-preview-card {
  width: min(1120px, calc(100vw - 44px));
  max-height: calc(100vh - 48px);
}

body.admin-page .knowledge-content-preview-body {
  display: grid;
  gap: 16px;
  overflow: auto;
  padding-right: 4px;
}

body.admin-page .student-preview-module {
  display: grid;
  gap: 12px;
  border: 1px solid #dbe8f7;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}

body.admin-page .student-preview-module-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #64748b;
}

body.admin-page .student-preview-module-head b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e8f3ff;
  color: #0a84ff;
}

body.admin-page .student-preview-module-head strong {
  color: #0f172a;
}

body.admin-page .modal-gallery-viewer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

body.admin-page .modal-gallery-viewer figure,
body.admin-page .modal-single-file {
  display: grid;
  gap: 10px;
  margin: 0;
}

body.admin-page .modal-gallery-viewer img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border: 1px solid #dbe8f7;
  border-radius: 10px;
  background: #f8fbff;
}

body.admin-page .modal-gallery-viewer .module-panzoom-stage {
  min-height: 320px;
  max-height: 520px;
}

body.admin-page .modal-gallery-viewer .module-panzoom-stage img {
  width: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

body.admin-page .modal-gallery-viewer figcaption {
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-plain-image-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid #dbe8f7;
  border-radius: 14px;
  background: #f8fbff;
}

body.admin-page .module-plain-image-preview img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

body.student-page .student-gallery-stage {
  touch-action: pan-y;
}

body.student-page .student-gallery-image {
  cursor: pointer;
}

body.student-page .student-gallery-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
  max-height: 190px;
  overflow: auto;
  padding: 2px;
}

body.student-page .student-gallery-thumb {
  position: relative;
  min-height: 78px;
  overflow: hidden;
  border: 2px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: #f8fafc;
}

body.student-page .student-gallery-thumb.active {
  border-color: #178bff;
  box-shadow: 0 0 0 3px rgba(23, 139, 255, 0.14);
}

body.student-page .student-gallery-thumb img {
  width: 100%;
  height: 78px;
  object-fit: cover;
}

body.student-page .student-gallery-thumb span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .image-viewer.not-zoomable #imageViewerReset {
  display: none;
}

body.student-page .image-viewer.not-zoomable img {
  cursor: default;
}

body.admin-page .modal-text-preview {
  display: grid;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
}

body.admin-page .mind-diagram-preview {
  width: 100%;
}

body.admin-page .mind-diagram-preview .mind-stage {
  min-height: 520px;
  max-height: 68vh;
  background: #fff;
}

body.admin-page .mind-diagram-canvas {
  --mind-color: #0a84ff;
  display: inline-flex;
  align-items: center;
  gap: 46px;
  width: max-content;
  max-width: none !important;
  max-height: none !important;
  min-width: 760px;
  padding: 60px 76px;
  color: #0f172a;
  transform-origin: center center;
}

body.admin-page .mind-diagram-canvas .mind-root-node {
  flex: 0 0 auto;
  max-width: 220px;
  border-radius: 999px;
  padding: 12px 18px;
  background: #fff;
  color: #fff;
  color: #0f172a;
  border: 2px solid #0a84ff;
  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.12);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

body.admin-page .mind-branch-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.admin-page .mind-branch-list.root-branches {
  gap: 24px;
}

body.admin-page .mind-branch {
  --mind-color: #0a84ff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 28px;
}

body.admin-page .mind-branch::before {
  content: "";
  flex: 0 0 32px;
  height: 2px;
  border-radius: 999px;
  background: var(--mind-color);
}

body.admin-page .mind-branch-list.nested {
  position: relative;
  gap: 10px;
}

body.admin-page .mind-branch-list.nested::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.16);
}

body.admin-page .mind-node {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 240px;
  border: 0;
  border-bottom: 2px solid var(--mind-color);
  border-radius: 0;
  background: #fff;
  color: #475569;
  box-shadow: none;
  padding: 2px 4px 4px;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  cursor: default;
}

body.admin-page .mind-node.has-children {
  cursor: pointer;
  color: #0f172a;
  font-weight: 780;
}

body.admin-page .mind-node.has-children::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 2px solid var(--mind-color);
  border-radius: 999px;
  background: #fff;
}

body.admin-page .mind-node span {
  overflow-wrap: anywhere;
}

body.admin-page .mind-node i {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mind-color) 14%, #fff);
  color: var(--mind-color);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .mind-branch.collapsed > .mind-branch-list {
  display: none;
}

body.admin-page .mind-branch.collapsed > .mind-node::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--mind-color);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .mind-branch.hue-0 { --mind-color: #0a84ff; }
body.admin-page .mind-branch.hue-1 { --mind-color: #ff6b2c; }
body.admin-page .mind-branch.hue-2 { --mind-color: #22a447; }
body.admin-page .mind-branch.hue-3 { --mind-color: #d7267d; }
body.admin-page .mind-branch.hue-4 { --mind-color: #8b5cf6; }
body.admin-page .mind-branch.hue-5 { --mind-color: #c9a600; }
body.admin-page .mind-branch.hue-6 { --mind-color: #0ea5a3; }
body.admin-page .mind-branch.hue-7 { --mind-color: #64748b; }

body.admin-page .mind-branch.depth-4 .mind-node,
body.admin-page .mind-branch.depth-5 .mind-node {
  font-size: 12px;
  font-weight: 560;
}

body.admin-page .tree-drop-target {
  outline: 3px solid #0a84ff !important;
  outline-offset: 3px;
  background: #dceeff !important;
}

body.admin-page [data-kp-tree-node] {
  cursor: grab;
  user-select: none;
  touch-action: none;
}

body.admin-page [data-kp-tree-node]:active,
body.admin-page .dragging-tree-node {
  cursor: grabbing;
  opacity: 0.55;
}

/* v11.1 final interaction fixes: right rail can really collapse/reopen, legacy standalone panels stay hidden, and every file card has a bounded preview surface. */
body.admin-page .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.7fr) minmax(620px, 1.6fr) minmax(300px, 0.75fr) !important;
  gap: 16px !important;
  align-items: start !important;
}

body.admin-page .right-rail-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 72px !important;
  z-index: 35 !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
}

body.admin-page .knowledge-right-rail {
  display: grid !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin-top: 54px !important;
  overflow: visible !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  grid-template-columns: minmax(260px, 0.7fr) minmax(620px, 1.6fr) 56px !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-right-rail {
  display: none !important;
}

body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
  grid-column: 3 !important;
  width: 56px !important;
  min-height: 190px !important;
  padding: 12px 6px !important;
  writing-mode: vertical-rl !important;
  white-space: normal !important;
}

body.admin-page #knowledgeMemoryCard,
body.admin-page #knowledgePracticeArea,
body.admin-page .legacy-knowledge-quick-panel,
body.admin-page .teacher-hidden-progress {
  display: none !important;
}

body.admin-page .generic-document-preview {
  min-width: 0;
}

body.admin-page .generic-document-preview iframe {
  width: 100%;
  min-height: 260px;
  max-height: 560px;
  border: 1px solid #d9e7f7;
  border-radius: 10px;
  background: #fff;
}

body.admin-page .document-preview-result {
  width: 100%;
  max-height: 420px;
  overflow: auto;
  border: 1px solid #d9e7f7;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.admin-page .document-preview-viewport {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
}

body.admin-page .document-preview-tools span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .document-preview-stage {
  position: relative;
  min-height: 260px;
  max-height: 560px;
  overflow: hidden;
  border: 1px solid #d9e7f7;
  border-radius: 10px;
  background:
    radial-gradient(circle at 16px 16px, rgba(10, 132, 255, 0.1) 0 3px, transparent 4px) 0 0 / 34px 34px,
    #f8fbff;
  cursor: grab;
  touch-action: none;
}

body.admin-page .document-preview-stage.dragging {
  cursor: grabbing;
}

body.admin-page .document-preview-content {
  display: grid;
  gap: 10px;
  min-width: min(760px, 100%);
  padding: 14px;
  transform-origin: center center;
  transition: transform 0.08s ease;
  user-select: none;
}

body.admin-page .document-preview-text,
body.admin-page .document-preview-slides,
body.admin-page .document-preview-mindmap,
body.admin-page .document-preview-native {
  padding: 14px;
}

body.admin-page .document-preview-text p,
body.admin-page .document-preview-slide p {
  margin: 0 0 8px;
  color: #25364d;
  line-height: 1.65;
}

body.admin-page .document-preview-slide {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e5eef8;
  border-radius: 10px;
  background: #fff;
}

body.admin-page .document-preview-slide strong {
  display: block;
  margin-bottom: 8px;
  color: #0a66d8;
}

body.admin-page .document-preview-mind-node {
  margin: 0 0 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #eaf4ff;
  color: #0f2742;
  font-weight: 700;
}

body.admin-page .document-preview-mind-node.level-2 { margin-left: 24px; background: #f3f8ff; }
body.admin-page .document-preview-mind-node.level-3 { margin-left: 48px; background: #fff; border: 1px solid #d9e7f7; }
body.admin-page .document-preview-mind-node.level-4 { margin-left: 72px; background: #fff; border: 1px dashed #bdd7f4; }
body.admin-page .document-preview-mind-node.level-5,
body.admin-page .document-preview-mind-node.level-6 { margin-left: 96px; background: #fff; border: 1px dashed #d9e7f7; }

body.admin-page .module-preview-status.is-static {
  position: static;
  min-height: 96px;
}

body.admin-page .module-preview-error.visible {
  display: block;
  position: static;
  padding: 14px;
  color: #b42318;
}

body.admin-page .module-panzoom-tools [data-kp-fullscreen-file] {
  display: inline-flex;
}

/* v12.0: teacher workspace columns scroll independently like a real dashboard. */
body.admin-page .admin-panels {
  overflow: hidden !important;
}

body.admin-page .panel[data-admin-section="knowledge"],
body.admin-page .knowledge-preview-panel,
body.admin-page #knowledgePreviewPanel {
  min-height: 0 !important;
  height: calc(100vh - 84px) !important;
  max-height: calc(100vh - 84px) !important;
  overflow: hidden !important;
}

body.admin-page .knowledge-preview-shell {
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-main,
body.admin-page .knowledge-right-rail {
  height: calc(100vh - 104px) !important;
  max-height: calc(100vh - 104px) !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
}

body.admin-page .knowledge-sidebar {
  border-right: 1px solid #d9e7f7;
  padding-right: 16px;
}

body.admin-page .knowledge-main {
  border-left: 1px solid #eef4fb;
  border-right: 1px solid #eef4fb;
  padding-inline: 16px;
}

body.admin-page .knowledge-right-rail {
  border-left: 1px solid #d9e7f7;
  padding-left: 16px;
  margin-top: 0 !important;
}

body.admin-page .right-rail-toggle {
  position: sticky !important;
  top: 0 !important;
  z-index: 24 !important;
}

@media (max-width: 1180px) {
  body.admin-page .knowledge-preview-shell,
  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-page .right-rail-toggle,
  body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    writing-mode: horizontal-tb !important;
  }

  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
    margin-top: 0 !important;
  }
}

/* v11.5: strict subject/unit/art-category/topic persistence and fixed tree selection actions. */
body.admin-page .knowledge-preview-shell {
  --knowledge-tree-width: 520px;
  display: grid !important;
  grid-template-columns:
    minmax(380px, var(--knowledge-tree-width))
    8px
    minmax(520px, 1fr)
    minmax(420px, 440px) !important;
  gap: 0 !important;
  align-items: start !important;
}

body.admin-page .knowledge-sidebar {
  grid-column: 1 !important;
  min-width: 0 !important;
  margin-right: 16px !important;
}

body.admin-page .knowledge-column-splitter {
  position: sticky;
  top: 82px;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  width: 8px;
  min-height: calc(100vh - 116px);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  outline: none;
  z-index: 28;
}

body.admin-page .knowledge-column-splitter::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  content: "";
  border-radius: 999px;
  background: #d9e7f7;
  transition: left 0.16s ease, width 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

body.admin-page .knowledge-column-splitter span {
  position: sticky;
  top: 46%;
  display: block;
  width: 22px;
  height: 48px;
  margin-left: -7px;
  border: 1px solid #d9e7f7;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

body.admin-page .knowledge-column-splitter:hover::before,
body.admin-page .knowledge-column-splitter:focus-visible::before,
body.admin-page.knowledge-column-resizing .knowledge-column-splitter::before {
  left: 2px;
  width: 4px;
  background: #0a84ff;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12);
}

body.admin-page .knowledge-column-splitter:hover span,
body.admin-page .knowledge-column-splitter:focus-visible span,
body.admin-page.knowledge-column-resizing .knowledge-column-splitter span {
  opacity: 1;
}

body.admin-page.knowledge-column-resizing,
body.admin-page.knowledge-column-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.admin-page .knowledge-main {
  grid-column: 3 !important;
  min-width: 0 !important;
  margin: 0 16px !important;
}

body.admin-page .right-rail-toggle {
  grid-column: 4 !important;
}

body.admin-page .knowledge-right-rail {
  grid-column: 4 !important;
  min-width: 0 !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  grid-template-columns:
    minmax(380px, var(--knowledge-tree-width))
    8px
    minmax(560px, 1fr)
    56px !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-main {
  grid-column: 3 !important;
}

body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
  grid-column: 4 !important;
}

body.admin-page .chapter-tree-item,
body.admin-page .knowledge-list button {
  min-width: 0 !important;
}

body.admin-page .chapter-tree-item .tree-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.admin-page .chapter-tree-item .tree-title-line i,
body.admin-page .tree-drag-handle,
body.admin-page .tree-index,
body.admin-page .chapter-tree-item > span:not(.tree-title-line),
body.admin-page .knowledge-list button > span:not(.tree-title-line) {
  flex: 0 0 auto !important;
}

body.admin-page .chapter-tree-item .tree-title-line strong,
body.admin-page .knowledge-list button strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.admin-page .mind-diagram-source-note {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  body.admin-page .knowledge-preview-shell,
  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-main,
  body.admin-page .right-rail-toggle,
  body.admin-page.knowledge-rail-collapsed .right-rail-toggle,
  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  body.admin-page .knowledge-column-splitter {
    display: none !important;
  }
}

body.admin-page .subject-tree-item {
  background: linear-gradient(135deg, #eff6ff, #fff);
  border-color: rgba(10, 132, 255, 0.28);
}

body.admin-page .subject-tree-item .tree-title-line i {
  color: #0a84ff;
  font-style: normal;
}

body.admin-page .knowledge-list button.art-category-node {
  margin-left: 18px;
  border-left: 3px solid rgba(10, 132, 255, 0.36);
  background: #f8fbff;
}

body.admin-page .knowledge-list button.knowledge-point-node {
  margin-left: 42px;
}

body.admin-page .hierarchy-overview-card,
body.admin-page .art-category-overview {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 10px 28px rgba(20, 44, 84, 0.06);
}

body.admin-page .hierarchy-overview-card > div:first-child,
body.admin-page .art-category-overview > div:first-child {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

body.admin-page .hierarchy-overview-card strong,
body.admin-page .art-category-overview strong {
  color: var(--ink);
  font-size: 18px;
}

body.admin-page .hierarchy-overview-card span,
body.admin-page .art-category-overview span {
  color: var(--muted);
}

body.admin-page .hierarchy-overview-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

body.admin-page .hierarchy-overview-actions select {
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  min-height: 40px;
  padding: 0 12px;
}

body.admin-page .hierarchy-overview-actions span {
  color: var(--muted);
  font-size: 13px;
}

body.admin-page .hierarchy-overview-grid,
body.admin-page .art-category-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

body.admin-page .hierarchy-overview-grid button,
body.admin-page .art-category-topic-grid button {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbff;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  text-align: left;
}

body.admin-page .hierarchy-overview-grid button:hover,
body.admin-page .art-category-topic-grid button:hover {
  border-color: rgba(10, 132, 255, 0.48);
  box-shadow: 0 10px 24px rgba(10, 132, 255, 0.12);
}

body.admin-page.knowledge-node-not-topic .module-library-card,
body.admin-page.knowledge-node-not-topic .knowledge-node-settings-card,
body.admin-page.knowledge-node-not-topic .knowledge-data-card {
  opacity: 0.38;
  pointer-events: none;
}

/* v11.6: knowledge-point quiz modules are real answerable cards on the student side. */
body.student-page .student-module-quiz-form {
  display: grid;
  gap: 14px;
}

body.student-page .module-quiz-mode-row {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(250px, 100%);
  gap: 4px;
  border: 1px solid rgba(224, 192, 171, 0.55);
  border-radius: 999px;
  padding: 4px;
  background: rgba(255, 249, 242, 0.82);
}

body.student-page .module-quiz-mode-row button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #8a6b78;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

body.student-page .module-quiz-mode-row button.active {
  background: linear-gradient(135deg, #fff, #ffe9ef);
  color: #7a3451;
  box-shadow: 0 8px 18px rgba(129, 96, 83, 0.12);
}

body.student-page .module-quiz-challenge {
  position: relative;
  display: grid;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(224, 192, 171, 0.62);
  border-radius: 18px;
  padding: 13px 14px;
  background: linear-gradient(135deg, #fff6e8, #f8edf5);
  box-shadow: 0 14px 32px rgba(129, 96, 83, 0.1);
}

body.student-page .module-quiz-timer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8a5b55;
  font-weight: 950;
}

body.student-page .module-quiz-timer-head span,
body.student-page .module-quiz-challenge p {
  margin: 0;
  color: #8a6b78;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .module-quiz-timer-head strong {
  color: #6e3e52;
  font-size: 20px;
  letter-spacing: 0;
}

body.student-page .module-quiz-deer-track {
  position: relative;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(213, 184, 164, 0.55);
}

body.student-page .module-quiz-deer-track i {
  position: absolute;
  inset: 4px 4px 4px auto;
  width: var(--quiz-fill-width, 0%);
  border-radius: 999px;
  background: linear-gradient(270deg, #f4c8a4, #f2d989);
  transition: width 0.25s linear;
}

body.student-page .module-quiz-deer-track b {
  position: absolute;
  top: 50%;
  left: var(--quiz-deer-left, 94%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff9ef;
  box-shadow: 0 8px 18px rgba(122, 84, 66, 0.14);
  font-size: 15px;
  line-height: 1;
  transition: left 0.25s linear;
}

body.student-page .module-quiz-complete-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: none;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(238, 255, 243, 0.94);
  color: #128346;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 10px 18px rgba(18, 131, 70, 0.12);
}

body.student-page .module-quiz-complete-badge em {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  font-style: normal;
}

body.student-page .module-quiz-challenge.is-complete .module-quiz-complete-badge {
  display: inline-flex;
}

body.student-page .module-quiz-challenge.time-up {
  background: linear-gradient(135deg, #fff4ef, #f7eef3);
}

body.student-page .module-quiz-challenge.feedback-locked {
  background: linear-gradient(135deg, #fff8ee, #f8eef2);
}

body.student-page .student-module-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 10px;
  background: #f8fbff;
  padding: 12px;
}

body.student-page .student-module-quiz-head strong {
  color: var(--ink);
}

body.student-page .student-module-quiz-head span {
  color: var(--muted);
  font-size: 13px;
}

body.student-page .student-module-quiz-form .quiz-question-row {
  position: relative;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px;
}

body.student-page .student-module-quiz-form .quiz-question-row > legend,
body.student-page .student-module-quiz-form .quiz-question-row > span {
  padding-right: 142px;
}

body.student-page .quiz-ignore-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-height: 30px;
  border: 1px solid rgba(171, 126, 13, 0.36);
  border-radius: 999px;
  background: #fff4bd;
  color: #75580b;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: none;
}

body.student-page .quiz-ignore-button:active {
  transform: scale(0.98);
}

body.student-page .quiz-ignore-button:disabled {
  opacity: 0.62;
}

body.student-page .quiz-dont-know-button {
  justify-self: start;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(106, 79, 185, 0.34);
  border-radius: 0;
  background: transparent;
  color: #6546b8;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: none;
}

body.student-page .quiz-dont-know-button:disabled {
  opacity: 0.6;
}

body.student-page .student-module-quiz-form .quiz-question-row.hidden {
  display: none;
}

body.student-page .student-module-quiz-form .quiz-question-row.correct {
  border-color: rgba(22, 163, 74, 0.45);
  background: #f0fdf4;
}

body.student-page .student-module-quiz-form .quiz-question-row.wrong {
  border-color: rgba(220, 38, 38, 0.42);
  background: #fff7f7;
}

body.student-page .student-module-quiz-form fieldset {
  margin: 0;
}

body.student-page .student-module-quiz-form legend,
body.student-page .student-module-quiz-form .quiz-question-row > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

body.student-page .student-module-quiz-form .quiz-question-row > strong {
  color: var(--ink);
  line-height: 1.55;
}

body.student-page .module-quiz-result {
  border-radius: 10px;
  background: #f8fbff;
  color: var(--muted);
  padding: 12px;
}

body.student-page .module-quiz-result.error {
  background: #fff1f2;
  color: #b91c1c;
}

body.student-page .module-quiz-result.has-feedback {
  background: transparent;
  padding: 0;
}

body.student-page .module-quiz-pager {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body.student-page .module-quiz-pager span {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
}

/* v11.7: keep uploaded mind-map source files honest; images preview, source files open as files. */
body.admin-page .mind-source-preview {
  min-height: 180px;
}

body.admin-page .mind-source-file-card {
  display: grid;
  gap: 10px;
  width: 100%;
  min-height: 150px;
  align-content: center;
  justify-items: start;
  border: 1px solid #d9e7f7;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
}

body.admin-page .mind-source-file-card strong {
  color: var(--ink);
}

body.admin-page .mind-source-file-card span {
  color: var(--muted);
  line-height: 1.55;
}

body.student-page .chapter-media-row .chapter-media-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 0 9px;
  background: #f0f7ff;
  color: var(--student-blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

/* v12.7: final teacher knowledge workspace layout guard.
   Keep each vertical lane independent: left tree, middle editor, right module rail. */
body.admin-page .admin-panels {
  overflow: hidden !important;
}

body.admin-page .knowledge-preview-shell,
body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns:
    minmax(320px, var(--knowledge-tree-width, 520px))
    10px
    minmax(520px, 1fr)
    minmax(360px, 420px) !important;
  gap: 0 !important;
  align-items: stretch !important;
  height: calc(100vh - 84px) !important;
  max-height: calc(100vh - 84px) !important;
  overflow: hidden !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
  grid-template-columns:
    minmax(320px, var(--knowledge-tree-width, 520px))
    10px
    minmax(520px, 1fr)
    58px !important;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-main,
body.admin-page .knowledge-right-rail {
  min-height: 0 !important;
  height: calc(100vh - 104px) !important;
  max-height: calc(100vh - 104px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

body.admin-page .knowledge-sidebar {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 18px 16px 28px 0 !important;
  border-right: 1px solid #d9e7f7 !important;
}

body.admin-page .knowledge-column-splitter {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  height: calc(100vh - 104px) !important;
  min-height: 0 !important;
  border-left: 1px solid #eef4fb;
  border-right: 1px solid #eef4fb;
}

body.admin-page .knowledge-main {
  grid-column: 3 !important;
  margin: 0 !important;
  padding: 18px 18px 34px !important;
  border-right: 1px solid #d9e7f7 !important;
}

body.admin-page .right-rail-toggle {
  grid-column: 4 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 38 !important;
  width: calc(100% - 18px) !important;
  min-height: 42px !important;
  margin: 0 0 10px 18px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

body.admin-page .knowledge-right-rail {
  grid-column: 4 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  margin: 54px 0 0 0 !important;
  padding: 0 0 34px 18px !important;
  border-left: 1px solid #d9e7f7 !important;
}

body.admin-page.knowledge-rail-collapsed .knowledge-right-rail {
  display: none !important;
}

body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
  width: 48px !important;
  min-height: 190px !important;
  margin-left: 10px !important;
  padding: 12px 6px !important;
  writing-mode: vertical-rl !important;
  white-space: normal !important;
}

body.admin-page .knowledge-module-list:empty::before {
  content: "这个知识点还没有内容模块。请从右侧模块栏点击或拖入需要的模块。";
  display: grid;
  min-height: 129px;
  place-items: center;
  border: 1px dashed #b9d8ff;
  border-radius: 14px;
  background: #f8fbff;
  color: #64748b;
  font-weight: 850;
  text-align: center;
}

body.admin-page .module-add-card-static {
  cursor: default !important;
  user-select: none;
}

body.admin-page .module-add-card-static:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.admin-page .add-module-inline {
  display: none !important;
}

@media (max-width: 1180px) {
  body.admin-page .knowledge-preview-shell,
  body.admin-page.knowledge-rail-collapsed .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-main,
  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
  }

  body.admin-page .knowledge-column-splitter {
    display: none !important;
  }

  body.admin-page .right-rail-toggle,
  body.admin-page.knowledge-rail-collapsed .right-rail-toggle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    writing-mode: horizontal-tb !important;
  }
}

/* v12.8: live-preview column contract.
   The knowledge builder is a three-lane editor. Each lane scrolls by itself. */
body.admin-page #knowledgePreviewPanel.active {
  height: calc(100vh - 92px) !important;
  max-height: calc(100vh - 92px) !important;
  overflow: hidden !important;
}

body.admin-page #knowledgePreviewPanel.active > .panel-heading {
  flex: 0 0 auto;
  margin-bottom: 12px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .knowledge-preview-shell {
  --knowledge-live-shell-height: calc(100vh - 184px);
  display: grid !important;
  grid-template-columns:
    minmax(320px, var(--knowledge-tree-width, 520px))
    10px
    minmax(560px, 1fr)
    minmax(340px, 390px) !important;
  grid-template-rows: var(--knowledge-live-shell-height) !important;
  gap: 0 !important;
  height: var(--knowledge-live-shell-height) !important;
  max-height: var(--knowledge-live-shell-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .knowledge-preview-shell {
  grid-template-columns:
    minmax(320px, var(--knowledge-tree-width, 520px))
    10px
    minmax(560px, 1fr)
    56px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
body.admin-page #knowledgePreviewPanel.active .knowledge-main,
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable both-edges;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 16px 16px 28px 0 !important;
  border-right: 1px solid #d7e5f5 !important;
  box-shadow: 12px 0 22px rgba(15, 23, 42, 0.03);
}

body.admin-page #knowledgePreviewPanel.active .knowledge-column-splitter {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  border-left: 1px solid #edf4fc !important;
  border-right: 1px solid #d7e5f5 !important;
  background:
    linear-gradient(90deg, #f8fbff 0, #fff 50%, #f8fbff 100%) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-main {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 18px 18px 34px !important;
  border-right: 1px solid #d7e5f5 !important;
}

body.admin-page #knowledgePreviewPanel.active .right-rail-toggle {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: start !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 45 !important;
  width: calc(100% - 16px) !important;
  min-height: 42px !important;
  margin: 0 0 10px 16px !important;
  border-radius: 0 0 14px 14px !important;
  background: #f8fbff !important;
  border: 1px solid #d7e5f5 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  grid-column: 4 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 56px 0 34px 16px !important;
  border-left: 1px solid #d7e5f5 !important;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), rgba(255, 255, 255, 0.98)) !important;
}

body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .knowledge-right-rail {
  display: none !important;
}

body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .right-rail-toggle {
  width: 48px !important;
  min-height: 176px !important;
  margin: 0 0 0 8px !important;
  padding: 12px 6px !important;
  border-radius: 14px !important;
  writing-mode: vertical-rl !important;
  white-space: normal !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list {
  min-height: 170px;
}

body.admin-page #knowledgePreviewPanel.active .module-add-card-static {
  min-height: 140px;
  border-style: dashed;
  background: #f8fbff;
}

body.admin-page #knowledgePreviewPanel.active .module-add-card-static strong::after {
  content: "（从右侧选择后才会出现）";
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 1180px) {
  body.admin-page #knowledgePreviewPanel.active {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .knowledge-preview-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-page #knowledgePreviewPanel.active .right-rail-toggle,
  body.admin-page.knowledge-rail-collapsed #knowledgePreviewPanel.active .right-rail-toggle,
  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail,
  body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
  body.admin-page #knowledgePreviewPanel.active .knowledge-main {
    grid-column: 1 / -1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-column-splitter {
    display: none !important;
  }
}

/* v14.1: unified Morandi module palette for teacher builder and student view.
   Each module type keeps one recognizable family, with nearby tones for related modules. */
body.admin-page [data-module-type],
body.student-page [data-module-type] {
  --module-accent: #8794a2;
  --module-accent-soft: #f0f3f5;
  --module-accent-veil: #f7f9fa;
  --module-accent-border: #d2dbe2;
  --module-accent-text: #485866;
}

body.admin-page [data-module-type="text"],
body.student-page [data-module-type="text"] {
  --module-accent: #8fa1ad;
  --module-accent-soft: #eef4f5;
  --module-accent-veil: #f7fafb;
  --module-accent-border: #cfdde3;
  --module-accent-text: #415765;
}

body.admin-page [data-module-type="rich_text"],
body.student-page [data-module-type="rich_text"] {
  --module-accent: #a09aad;
  --module-accent-soft: #f3f0f6;
  --module-accent-veil: #faf8fb;
  --module-accent-border: #ddd7e6;
  --module-accent-text: #5a5368;
}

body.admin-page [data-module-type="table"],
body.student-page [data-module-type="table"] {
  --module-accent: #82a094;
  --module-accent-soft: #eef5f1;
  --module-accent-veil: #f7fbf9;
  --module-accent-border: #c9ded7;
  --module-accent-text: #426358;
}

body.admin-page [data-module-type="artwork_table"],
body.student-page [data-module-type="artwork_table"] {
  --module-accent: #8b9d78;
  --module-accent-soft: #f1f5eb;
  --module-accent-veil: #fafbf7;
  --module-accent-border: #d7dfc7;
  --module-accent-text: #566640;
}

body.admin-page [data-module-type="timeline"],
body.student-page [data-module-type="timeline"] {
  --module-accent: #b7a37f;
  --module-accent-soft: #f7f2e8;
  --module-accent-veil: #fcfaf5;
  --module-accent-border: #e5d8bd;
  --module-accent-text: #705c39;
}

body.admin-page [data-module-type="profile"],
body.student-page [data-module-type="profile"] {
  --module-accent: #ad9280;
  --module-accent-soft: #f6efeb;
  --module-accent-veil: #fbf8f6;
  --module-accent-border: #e3d2c8;
  --module-accent-text: #6a4f41;
}

body.admin-page [data-module-type="flashcard"],
body.student-page [data-module-type="flashcard"] {
  --module-accent: #b79d7d;
  --module-accent-soft: #f7f1e8;
  --module-accent-veil: #fcfaf5;
  --module-accent-border: #e6d8c0;
  --module-accent-text: #6f5638;
}

body.admin-page [data-module-type="mindmap"],
body.student-page [data-module-type="mindmap"] {
  --module-accent: #7c9ab1;
  --module-accent-soft: #edf4f8;
  --module-accent-veil: #f7fbfd;
  --module-accent-border: #cadbe8;
  --module-accent-text: #3f5d72;
}

body.admin-page [data-module-type="memory-palace"],
body.admin-page [data-module-type="fun_memory"],
body.student-page [data-module-type="memory-palace"],
body.student-page [data-module-type="fun_memory"] {
  --module-accent: #c09a99;
  --module-accent-soft: #f8eeee;
  --module-accent-veil: #fcf8f8;
  --module-accent-border: #ead0cf;
  --module-accent-text: #7b504f;
}

body.admin-page [data-module-type="memory_image"],
body.student-page [data-module-type="memory_image"] {
  --module-accent: #b58fa2;
  --module-accent-soft: #f7eff3;
  --module-accent-veil: #fcf8fa;
  --module-accent-border: #e5ccd8;
  --module-accent-text: #714b5d;
}

body.admin-page [data-module-type="artwork_image"],
body.student-page [data-module-type="artwork_image"] {
  --module-accent: #8fa78b;
  --module-accent-soft: #eef5ed;
  --module-accent-veil: #f8fbf7;
  --module-accent-border: #d1e0cc;
  --module-accent-text: #50694a;
}

body.admin-page [data-module-type="interactive_artwork"],
body.student-page [data-module-type="interactive_artwork"] {
  --module-accent: #8291bd;
  --module-accent-soft: #eef2fa;
  --module-accent-veil: #f8faff;
  --module-accent-border: #cdd6ec;
  --module-accent-text: #48587d;
}

body.admin-page [data-module-type="gallery"],
body.student-page [data-module-type="gallery"] {
  --module-accent: #8aa8a5;
  --module-accent-soft: #edf5f4;
  --module-accent-veil: #f7fbfb;
  --module-accent-border: #cde0de;
  --module-accent-text: #496965;
}

body.admin-page [data-module-type="author_works"],
body.student-page [data-module-type="author_works"] {
  --module-accent: #a5a17b;
  --module-accent-soft: #f5f3e8;
  --module-accent-veil: #fbfaf5;
  --module-accent-border: #e1debd;
  --module-accent-text: #656138;
}

body.admin-page [data-module-type="comparison_image"],
body.student-page [data-module-type="comparison_image"] {
  --module-accent: #9a9580;
  --module-accent-soft: #f3f1eb;
  --module-accent-veil: #fbfaf7;
  --module-accent-border: #ded9c9;
  --module-accent-text: #5f5a46;
}

body.admin-page [data-module-type="lesson_video"],
body.student-page [data-module-type="lesson_video"] {
  --module-accent: #9b8aa8;
  --module-accent-soft: #f2eef6;
  --module-accent-veil: #faf8fc;
  --module-accent-border: #ddd2e7;
  --module-accent-text: #5f506a;
}

body.admin-page [data-module-type="memory_video"],
body.student-page [data-module-type="memory_video"] {
  --module-accent: #8b8caf;
  --module-accent-soft: #f0f1f8;
  --module-accent-veil: #f8f9fd;
  --module-accent-border: #d1d3e8;
  --module-accent-text: #535578;
}

body.admin-page [data-module-type="audio"],
body.student-page [data-module-type="audio"] {
  --module-accent: #879cb4;
  --module-accent-soft: #eef3f8;
  --module-accent-veil: #f8fbfd;
  --module-accent-border: #ccd9e7;
  --module-accent-text: #465d74;
}

body.admin-page [data-module-type="recall_image"],
body.student-page [data-module-type="recall_image"] {
  --module-accent: #c0a471;
  --module-accent-soft: #f8f3e8;
  --module-accent-veil: #fcfaf5;
  --module-accent-border: #eadab8;
  --module-accent-text: #735f31;
}

body.admin-page [data-module-type="oral_recall"],
body.student-page [data-module-type="oral_recall"] {
  --module-accent: #b8988e;
  --module-accent-soft: #f7efed;
  --module-accent-veil: #fcf8f7;
  --module-accent-border: #e6d1cb;
  --module-accent-text: #71534b;
}

body.admin-page [data-module-type="quiz"],
body.student-page [data-module-type="quiz"] {
  --module-accent: #b8aa78;
  --module-accent-soft: #f6f3e9;
  --module-accent-veil: #fcfaf6;
  --module-accent-border: #e6ddb8;
  --module-accent-text: #6d6235;
}

body.admin-page [data-module-type="external_link"],
body.student-page [data-module-type="external_link"] {
  --module-accent: #809d9b;
  --module-accent-soft: #edf4f4;
  --module-accent-veil: #f7fbfb;
  --module-accent-border: #c9dddc;
  --module-accent-text: #42615f;
}

body.admin-page [data-module-type="file"],
body.student-page [data-module-type="file"] {
  --module-accent: #8b96a3;
  --module-accent-soft: #eef1f4;
  --module-accent-veil: #f8f9fb;
  --module-accent-border: #d0d8df;
  --module-accent-text: #4d5865;
}

body.admin-page .module-palette-item[data-module-type] {
  border-color: var(--module-accent-border) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--module-accent-soft)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

body.admin-page .module-palette-item[data-module-type]::before {
  content: "";
  width: 28px;
  height: 4px;
  border-radius: 999px;
  background: var(--module-accent);
  opacity: 0.76;
}

body.admin-page .module-palette-item[data-module-type]:hover,
body.admin-page .module-palette-item[data-module-type].active {
  border-color: var(--module-accent) !important;
  background:
    linear-gradient(180deg, #fff, var(--module-accent-soft)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--module-accent) 18%, transparent);
}

body.admin-page .module-palette-item[data-module-type] .module-palette-icon,
body.admin-page .knowledge-module-card[data-module-type] .module-tile-icon,
body.admin-page .knowledge-module-card[data-module-type] .module-card-title b,
body.student-page .student-module-head::before {
  border-color: var(--module-accent-border) !important;
  background: var(--module-accent-soft) !important;
  color: var(--module-accent-text) !important;
}

body.admin-page .knowledge-module-card[data-module-type] {
  border-color: var(--module-accent-border) !important;
  background:
    linear-gradient(90deg, var(--module-accent) 0 6px, transparent 6px),
    linear-gradient(180deg, #fff 0%, var(--module-accent-veil) 100%) !important;
}

body.admin-page .knowledge-module-card.module-editor-card[data-module-type] {
  border-left-color: var(--module-accent) !important;
}

body.admin-page .knowledge-module-card[data-module-type] .module-card-title span,
body.admin-page .knowledge-module-card[data-module-type] .module-tile-main strong,
body.admin-page .module-palette-item[data-module-type] span,
body.student-page .student-module-card[data-module-type] .student-module-head span {
  color: var(--module-accent-text) !important;
}

body.admin-page .knowledge-module-card[data-module-type] .module-tile-preview,
body.admin-page .knowledge-module-card[data-module-type] .module-card-body,
body.student-page .student-module-card[data-module-type] {
  border-color: var(--module-accent-border) !important;
  background: linear-gradient(180deg, #fff, var(--module-accent-veil)) !important;
  min-width: 0;
  overflow: hidden;
}

body.student-page .student-module-card[data-module-type] {
  box-shadow: 0 12px 26px color-mix(in srgb, var(--module-accent) 12%, transparent);
}

/* v14.2: compact knowledge builder density.
   Keep the same structure, but reduce oversized controls so the teacher can scan more content. */
body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar {
  padding: 10px 12px 18px 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-main {
  padding: 14px 14px 28px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  padding: 52px 0 28px 12px !important;
}

body.admin-page .knowledge-sidebar {
  font-size: 13px !important;
}

body.admin-page .knowledge-sidebar label,
body.admin-page .knowledge-sidebar .field-label,
body.admin-page .knowledge-sidebar .muted {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.admin-page .knowledge-search-field,
body.admin-page .knowledge-manual-field,
body.admin-page .knowledge-create-row,
body.admin-page .knowledge-action-row,
body.admin-page .knowledge-bulk-import {
  margin-bottom: 8px !important;
}

body.admin-page .knowledge-sidebar input,
body.admin-page .knowledge-sidebar select,
body.admin-page .knowledge-sidebar textarea,
body.admin-page .knowledge-create-row input,
body.admin-page .knowledge-manual-field input {
  min-height: 36px !important;
  height: 36px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

body.admin-page .knowledge-sidebar textarea {
  height: auto !important;
  min-height: 92px !important;
}

body.admin-page .knowledge-create-row {
  grid-template-columns: minmax(0, 1fr) 96px !important;
  gap: 8px !important;
}

body.admin-page .knowledge-create-row .compact-link,
body.admin-page .knowledge-action-row .compact-link,
body.admin-page .knowledge-sidebar button {
  min-height: 36px !important;
  padding: 0 10px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body.admin-page .chapter-tree-item,
body.admin-page .knowledge-list button {
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  gap: 3px !important;
}

body.admin-page .chapter-tree-item .tree-title-line,
body.admin-page .knowledge-list button .tree-title-line {
  gap: 5px !important;
}

body.admin-page .chapter-tree-item .tree-title-line strong,
body.admin-page .knowledge-list button strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body.admin-page .chapter-tree-item .tree-title-line i,
body.admin-page .tree-drag-handle,
body.admin-page .tree-index,
body.admin-page .chapter-tree-item > span:not(.tree-title-line),
body.admin-page .knowledge-list button > span:not(.tree-title-line) {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.admin-page .knowledge-list button.art-category-node {
  margin-left: 14px !important;
}

body.admin-page .knowledge-list button.knowledge-point-node {
  margin-left: 28px !important;
}

body.admin-page .course-tree-group {
  gap: 5px !important;
  margin-bottom: 7px !important;
}

body.admin-page .course-tree-topic-list {
  gap: 4px !important;
  margin-top: 5px !important;
}

body.admin-page .knowledge-empty-tree {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 16px;
  border: 1px dashed #b8d7ff;
  border-radius: 12px;
  background: #f7fbff;
  color: #64748b;
}

body.admin-page .knowledge-empty-tree strong {
  color: #0f2742;
  font-size: 15px;
}

body.admin-page .knowledge-empty-tree span {
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .knowledge-course-switcher {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(189, 160, 181, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 244, 250, 0.96), rgba(236, 247, 255, 0.96));
}

body.admin-page .knowledge-course-switcher-label {
  color: #7a6b83;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

body.admin-page .chapter-tree-item.knowledge-course-switch {
  margin-left: 0 !important;
  border-color: rgba(184, 203, 229, 0.9) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: inset 4px 0 0 #bda0b5, 0 8px 18px rgba(117, 91, 124, 0.08) !important;
}

body.admin-page .chapter-tree-item.knowledge-course-switch.active {
  border-color: #8fbaff !important;
  background: linear-gradient(135deg, #f9ecf5, #edf6ff) !important;
  box-shadow: inset 5px 0 0 #0a84ff, 0 10px 22px rgba(10, 132, 255, 0.12) !important;
}

body.admin-page .chapter-tree-item.knowledge-course-switch .tree-drag-handle.inert {
  opacity: 0.24;
}

body.admin-page .hierarchy-overview-card,
body.admin-page .art-category-overview {
  padding: 14px !important;
  border-radius: 12px !important;
}

body.admin-page .hierarchy-overview-card > div:first-child,
body.admin-page .art-category-overview > div:first-child {
  gap: 4px !important;
  margin-bottom: 10px !important;
}

body.admin-page .hierarchy-overview-card strong,
body.admin-page .art-category-overview strong {
  font-size: 15px !important;
}

body.admin-page .hierarchy-overview-card span,
body.admin-page .art-category-overview span {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.admin-page .hierarchy-overview-grid,
body.admin-page .art-category-topic-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 8px !important;
}

body.admin-page .hierarchy-overview-grid button,
body.admin-page .art-category-topic-grid button {
  min-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  gap: 4px !important;
}

body.admin-page .knowledge-module-card .module-card-title,
body.admin-page .knowledge-module-card .module-tile-row {
  gap: 8px !important;
}

body.admin-page .knowledge-module-card .module-tile-main strong,
body.admin-page .module-card-title b {
  font-size: 14px !important;
}

/* v14.3: clearer table modules, right-click delete placement, and card-style mind map. */
body.admin-page [data-module-type="comparison_table"],
body.student-page [data-module-type="comparison_table"] {
  --module-accent: #7f9f99;
  --module-accent-soft: #edf5f3;
  --module-accent-veil: #f7fbfa;
  --module-accent-border: #c7dfdc;
  --module-accent-text: #3f625d;
}

body.admin-page [data-module-type="exam_table"],
body.student-page [data-module-type="exam_table"] {
  --module-accent: #9e9872;
  --module-accent-soft: #f4f2e8;
  --module-accent-veil: #fbfaf4;
  --module-accent-border: #ded9b7;
  --module-accent-text: #625c35;
}

body.admin-page .knowledge-tree-menu .danger-soft {
  color: #dc2626 !important;
}

body.admin-page .knowledge-tree-menu .danger-soft:hover {
  background: #fff1f2 !important;
  color: #b91c1c !important;
}

body.admin-page .module-preview-table small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

/* v14.4: shift multi-select, scrollable context menu, clearer hierarchy, and fuller table previews. */
body.admin-page .knowledge-tree-menu {
  max-height: min(420px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.admin-page .knowledge-tree-menu .menu-selection-count {
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 8px 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .chapter-tree-item.subject-tree-item {
  border-color: #b7c9e3 !important;
  background: linear-gradient(135deg, #f9fbff, #eef4fb) !important;
  box-shadow: inset 4px 0 0 #526985 !important;
}

body.admin-page .chapter-tree-item.unit-tree-item {
  margin-left: 18px !important;
  border-color: #bfd7f8 !important;
  background: #eef6ff !important;
  box-shadow: inset 4px 0 0 #0a84ff !important;
}

/* A separately billed course with one subject is presented as one subject in the knowledge tree. */
body.admin-page .subject-tree-group.single-subject-tree > .course-tree-group > .chapter-tree-item.unit-tree-item {
  margin-left: 0 !important;
}

body.admin-page .course-tree-topic-list button.art-category-node {
  margin-left: 42px !important;
  border-color: #dbe4ef !important;
  background: #f6f8fb !important;
  box-shadow: inset 3px 0 0 #8fbaff !important;
}

body.admin-page .course-tree-topic-list button.knowledge-point-node {
  margin-left: 76px !important;
  min-height: 42px !important;
  border-color: transparent !important;
  background: #ffffff !important;
  box-shadow: inset 2px 0 0 #d8e7fb !important;
}

body.admin-page .course-tree-topic-list button.level-3 {
  margin-left: 104px !important;
}

body.admin-page .chapter-tree-item.multi-selected,
body.admin-page .course-tree-topic-list button.multi-selected {
  outline: 2px solid #0a84ff !important;
  outline-offset: 2px;
  background: #e7f2ff !important;
  box-shadow: inset 5px 0 0 #0a84ff, 0 8px 18px rgba(10, 132, 255, 0.12) !important;
}

body.admin-page .chapter-tree-item.subject-tree-item .tree-title-line strong {
  font-size: 15px !important;
}

body.admin-page .chapter-tree-item.unit-tree-item .tree-title-line strong {
  font-size: 14px !important;
}

body.admin-page .course-tree-topic-list button.art-category-node strong {
  font-size: 14px !important;
}

body.admin-page .course-tree-topic-list button.knowledge-point-node strong {
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.admin-page .module-preview-table small:first-child {
  display: block;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 7px 9px;
}

body.admin-page .mind-diagram-preview .mind-stage {
  min-height: 520px;
  border: 1px solid #dbe8f6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 24px 24px, rgba(10, 132, 255, 0.09) 0 3px, transparent 4px) 0 0 / 42px 42px,
    linear-gradient(135deg, #f8fbff, #ffffff);
}

body.admin-page .mind-diagram-canvas {
  display: grid !important;
  grid-template-columns: minmax(210px, 260px) minmax(520px, 1fr);
  align-items: start !important;
  gap: 28px !important;
  min-width: 900px !important;
  padding: 42px 46px !important;
}

body.admin-page .mind-diagram-canvas .mind-root-node {
  position: sticky;
  top: 24px;
  display: grid;
  place-items: center;
  min-height: 132px;
  max-width: 260px !important;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 22px !important;
  background:
    linear-gradient(135deg, #0a84ff, #4aa3ff) !important;
  color: #fff !important;
  box-shadow: 0 20px 42px rgba(10, 132, 255, 0.24) !important;
  font-size: 18px !important;
  font-weight: 950;
}

body.admin-page .mind-branch-list.root-branches {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px !important;
}

body.admin-page .mind-branch {
  display: grid !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-height: 0 !important;
  border: 1px solid color-mix(in srgb, var(--mind-color) 24%, #dbe7f6);
  border-left: 7px solid var(--mind-color);
  border-radius: 18px;
  padding: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mind-color) 8%, #fff), #fff);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
}

body.admin-page .mind-branch::before,
body.admin-page .mind-branch-list.nested::before,
body.admin-page .mind-node.has-children::before {
  display: none !important;
}

body.admin-page .mind-node {
  width: 100%;
  max-width: none !important;
  min-height: 42px !important;
  justify-content: space-between;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #102033 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mind-color) 18%, #e2e8f0) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.admin-page .mind-node span {
  overflow-wrap: anywhere;
}

body.admin-page .mind-node i {
  background: color-mix(in srgb, var(--mind-color) 16%, #fff) !important;
  color: var(--mind-color) !important;
}

body.admin-page .mind-branch-list.nested {
  display: grid !important;
  gap: 8px !important;
  padding-left: 10px !important;
}

body.admin-page .mind-branch-list.nested .mind-branch {
  border-radius: 14px;
  padding: 9px;
  box-shadow: none;
}

body.admin-page .mind-branch.collapsed > .mind-node::after {
  content: "展开" !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: var(--mind-color) !important;
  color: #fff !important;
  font-size: 11px !important;
}

body.admin-page .document-preview-mind-node {
  border-radius: 14px !important;
  border: 1px solid #d9e7f7;
  background: linear-gradient(180deg, #fff, #f7fbff) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

/* v14.5: exam-importance pills and clearer three-column workspace colors. */
body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar {
  background:
    linear-gradient(180deg, rgba(239, 247, 255, 0.95), rgba(250, 253, 255, 0.98)) !important;
  border-right: 1px solid #cfe0f4 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-main {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 255, 255, 0.98)) !important;
  border-inline: 1px solid #eadfca !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  background:
    linear-gradient(180deg, rgba(247, 251, 249, 0.96), rgba(255, 255, 255, 0.98)) !important;
  border-left: 1px solid #cfded8 !important;
}

body.admin-page .tree-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body.admin-page .tree-title-line strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.admin-page .tree-drag-handle {
  cursor: grab !important;
  color: #7ca0c6 !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: -3px !important;
}

body.admin-page .tree-drag-handle:active {
  cursor: grabbing !important;
}

body.admin-page .tree-order-badge {
  flex: 0 0 auto;
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 7px;
  background: #e8f2ff;
  color: #0a63c7;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

body.admin-page .tree-expand-toggle,
body.admin-page .tree-expand-spacer {
  flex: 0 0 16px;
  width: 16px;
  color: #486a8d;
  font-style: normal;
  font-weight: 950;
  text-align: center;
}

body.admin-page .tree-expand-toggle {
  pointer-events: auto !important;
  cursor: pointer;
}

body.admin-page .tree-expand-spacer {
  pointer-events: none !important;
}

body.admin-page .knowledge-importance-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  border: 1px solid transparent;
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

body.admin-page .knowledge-importance-pill.importance-required {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

body.admin-page .knowledge-importance-pill.importance-high {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

body.admin-page .knowledge-importance-pill.importance-normal {
  background: #eef6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

body.admin-page .knowledge-importance-pill.importance-rare {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

body.admin-page .knowledge-importance-pill.importance-low {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

body.admin-page .course-tree-topic-children {
  display: grid;
  gap: 6px;
}

body.admin-page .knowledge-module-card .module-tile-main,
body.admin-page .knowledge-module-card .module-card-title {
  border-radius: 16px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent-soft, #eaf4ff) 78%, #ffffff), #ffffff) !important;
}

body.admin-page .student-preview-modal[data-preview-mode="mobile"] .preview-dialog {
  max-width: 430px !important;
}

/* v14.6: mind-map modules are optional, preview as a real workbench, and pan/zoom feels controlled. */
body.admin-page #knowledgeOverviewCard,
body.admin-page .knowledge-flow-tabs [data-kp-scroll="knowledgeOverviewCard"] {
  display: none !important;
}

body.admin-page .knowledge-top-grid {
  display: none !important;
}

body.admin-page .mindmap-document-preview,
body.admin-page .mind-source-preview .document-preview-result {
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.admin-page .mind-source-preview {
  min-height: 0 !important;
}

body.admin-page .mindmap-preview-workbench {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  border: 1px solid #d8e6f6;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 14px;
}

body.admin-page .mindmap-preview-toolbar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px;
}

body.admin-page .mindmap-preview-toolbar span {
  margin-left: auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .mindmap-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

body.admin-page .mindmap-canvas-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-stage {
  min-height: 520px !important;
  max-height: none !important;
  height: min(58vh, 660px);
  overflow: hidden !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 22px 22px, rgba(10, 132, 255, 0.08) 0 3px, transparent 4px) 0 0 / 46px 46px,
    linear-gradient(135deg, #fbfdff 0%, #ffffff 55%, #f7fbff 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-stage:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 22px 22px, rgba(10, 132, 255, 0.08) 0 3px, transparent 4px) 0 0 / 46px 46px,
    #fff !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-content {
  display: grid !important;
  place-items: center !important;
  width: max-content !important;
  min-width: 1100px !important;
  min-height: 580px !important;
  padding: 48px !important;
  transform-origin: center center !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap {
  display: grid !important;
  grid-template-columns: minmax(260px, max-content) auto minmax(260px, max-content) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 34px !important;
  min-width: max-content !important;
  padding: 34px 42px !important;
  color: #111827 !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-root-node {
  position: relative !important;
  top: auto !important;
  display: grid !important;
  place-items: center !important;
  min-width: 160px !important;
  max-width: 220px !important;
  min-height: 74px !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  background: linear-gradient(135deg, #08142d, #0b1f46) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px rgba(8, 20, 45, 0.22) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  text-align: center !important;
}

body.admin-page .mindmap-preview-workbench .side-branches {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 250px;
}

body.admin-page .mindmap-preview-workbench .left-branches {
  direction: rtl;
}

body.admin-page .mindmap-preview-workbench .left-branches * {
  direction: ltr;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-branch {
  position: relative !important;
  display: grid !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  padding: 0 0 0 34px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .mindmap-preview-workbench .left-branches .mind-branch {
  padding: 0 34px 0 0 !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-branch::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 22px !important;
  width: 34px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--mind-color, #0a84ff) !important;
}

body.admin-page .mindmap-preview-workbench .left-branches .mind-branch::before {
  left: auto !important;
  right: 0 !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-node {
  width: max-content !important;
  max-width: 280px !important;
  min-height: 42px !important;
  border: 2px solid color-mix(in srgb, var(--mind-color, #0a84ff) 60%, #ffffff) !important;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  background: color-mix(in srgb, var(--mind-color, #0a84ff) 13%, #ffffff) !important;
  color: color-mix(in srgb, var(--mind-color, #0a84ff) 76%, #142033) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-node.has-children::before {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-node i {
  min-width: 22px;
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--mind-color, #0a84ff) !important;
  color: #fff !important;
  font-size: 11px !important;
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-branch-list.nested {
  display: grid !important;
  gap: 10px !important;
  margin: 8px 0 0 18px !important;
  padding: 0 0 0 18px !important;
  border-left: 3px solid color-mix(in srgb, var(--mind-color, #0a84ff) 55%, #ffffff);
}

body.admin-page .mindmap-preview-workbench .left-branches .mind-branch-list.nested {
  margin: 8px 18px 0 0 !important;
  padding: 0 18px 0 0 !important;
  border-left: 0;
  border-right: 3px solid color-mix(in srgb, var(--mind-color, #0a84ff) 55%, #ffffff);
}

body.admin-page .mindmap-preview-workbench .modern-document-mindmap .mind-branch-list.nested::before {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .mind-branch.collapsed > .mind-branch-list {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .mind-branch.collapsed > .mind-node::after {
  content: "已收起" !important;
  width: auto !important;
  height: auto !important;
  margin-left: 8px;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: var(--mind-color, #0a84ff) !important;
  color: #fff !important;
  font-size: 11px !important;
}

body.admin-page .mindmap-info-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

body.admin-page .mindmap-info-panel section {
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  padding: 14px;
}

body.admin-page .mindmap-info-panel h4 {
  margin: 0 0 10px;
  color: #102033;
  font-size: 14px;
  font-weight: 950;
}

body.admin-page .mindmap-info-panel dl {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  color: #51657f;
  font-size: 12px;
}

body.admin-page .mindmap-info-panel dt {
  font-weight: 850;
}

body.admin-page .mindmap-info-panel dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .mindmap-ok {
  color: #12a150 !important;
  font-weight: 950;
}

body.admin-page .mindmap-mini-map {
  max-height: 210px;
  overflow: auto;
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px;
}

body.admin-page .mindmap-mini-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 14px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .mindmap-mini-list li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .mindmap-file-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  background: #ffffff;
  padding: 12px 14px;
}

body.admin-page .mindmap-file-strip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #142033;
  font-weight: 950;
}

body.admin-page .mindmap-file-strip span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1290px) {
  body.admin-page .mindmap-preview-layout {
    grid-template-columns: 1fr;
  }

  body.admin-page .mindmap-info-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v14.7: right-click menus float above columns and scroll inside the viewport. */
body.admin-page .knowledge-tree-menu,
body.admin-page .module-context-menu {
  position: fixed !important;
  z-index: 9999 !important;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

body.admin-page .knowledge-tree-menu button,
body.admin-page .module-context-menu button {
  flex: 0 0 auto;
}

body.admin-page [data-kp-tree-node] {
  cursor: grab;
}

body.admin-page [data-kp-tree-node]:active,
body.admin-page .dragging-tree-node {
  cursor: grabbing;
}

/* v14.8: replace the teacher-side mind-map module editor with a real workbench. */
body.admin-page .knowledge-module-card[data-module-type="mindmap"].editing {
  overflow: visible;
}

body.admin-page .knowledge-module-card[data-module-type="mindmap"].editing .module-card-body {
  gap: 14px;
}

body.admin-page .mindmap-module-editor-window {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

body.admin-page .mindmap-replace-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 1px dashed #9cc7ff;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8fbff, #ffffff);
  padding: 14px 16px;
  cursor: pointer;
}

body.admin-page .mindmap-replace-zone.drag-over {
  border-color: #0a84ff;
  background: #eef6ff;
  box-shadow: inset 0 0 0 2px rgba(10, 132, 255, 0.16);
}

body.admin-page .mindmap-replace-zone input {
  max-width: 260px;
}

body.admin-page .mindmap-replace-zone span {
  border-radius: 12px;
  background: #0a84ff;
  color: #fff;
  padding: 10px 14px;
  font-weight: 950;
}

body.admin-page .mindmap-replace-zone em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}

body.admin-page .mindmap-empty-state {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 320px;
  border: 1px solid #dbe7f6;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  color: #607187;
  text-align: center;
}

body.admin-page .mindmap-empty-state strong {
  color: #142033;
  font-size: 20px;
  font-weight: 950;
}

body.admin-page .mindmap-module-preview-shell,
body.admin-page .mindmap-module-preview-shell .module-file-preview,
body.admin-page .mindmap-module-preview-shell .document-preview-result,
body.admin-page .mindmap-module-preview-shell .mindmap-document-preview {
  width: 100%;
  max-width: none !important;
  min-width: 0 !important;
}

body.admin-page .mindmap-module-preview-shell .mind-source-preview {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.admin-page .mindmap-preview-workbench {
  gap: 16px !important;
  border-radius: 22px !important;
  padding: 16px !important;
}

body.admin-page .mindmap-preview-layout {
  grid-template-columns: minmax(620px, 1fr) 310px !important;
  gap: 16px !important;
}

body.admin-page .mindmap-preview-workbench.is-info-hidden .mindmap-preview-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-page .mindmap-preview-workbench.is-info-hidden .mindmap-info-panel {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-stage {
  min-height: 640px !important;
  height: clamp(620px, 70vh, 780px) !important;
  background: #ffffff !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-content {
  min-width: 1290px !important;
  min-height: 720px !important;
  padding: 58px !important;
  transform-origin: center center !important;
}

body.admin-page .mindmap-preview-image {
  display: block;
  max-width: none;
  width: auto;
  min-width: 900px;
  max-height: 760px;
  object-fit: contain;
}

body.admin-page .mindmap-parse-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-width: 520px;
  min-height: 260px;
  border: 1px solid #dbe7f6;
  border-radius: 18px;
  background: #f8fbff;
  color: #64748b;
  text-align: center;
}

body.admin-page .mindmap-parse-empty strong {
  color: #102033;
  font-size: 18px;
  font-weight: 950;
}

body.admin-page .mindmap-preview-toolbar {
  border-bottom: 1px solid #e5edf7;
  padding-bottom: 12px !important;
}

body.admin-page .mindmap-preview-toolbar .compact-link {
  min-height: 38px;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap {
  gap: 42px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-node {
  border-width: 2px !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  background: #ffffff !important;
  color: #142033 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-root-node {
  border-radius: 10px !important;
  background: #061334 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch::before {
  height: 4px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch-list.nested {
  border-color: #171717 !important;
}

body.admin-page .mindmap-info-panel {
  max-height: clamp(620px, 70vh, 780px);
  overflow: auto;
}

body.admin-page .mindmap-info-panel section {
  box-shadow: none;
}

body.admin-page .mindmap-info-panel .compact-link {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 1380px) {
  body.admin-page .mindmap-preview-layout {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .mindmap-info-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }
}

/* v14.9: mindmap uses clear black bracket connectors and never lets the info rail cover the canvas. */
body.admin-page .mindmap-preview-layout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px) !important;
  align-items: start !important;
  overflow: visible !important;
}

body.admin-page .mindmap-canvas-panel,
body.admin-page .mindmap-info-panel {
  min-width: 0 !important;
}

body.admin-page .mindmap-info-panel {
  position: relative !important;
  z-index: 3 !important;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-stage {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-content {
  min-width: 1080px !important;
  min-height: 720px !important;
  padding: 54px 88px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap {
  display: grid !important;
  grid-template-columns: minmax(260px, max-content) max-content minmax(360px, max-content) !important;
  gap: 44px !important;
  align-items: center !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-root-node {
  border: 3px solid #171717 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .side-branches {
  position: relative !important;
  gap: 28px !important;
  padding-left: 34px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches {
  padding-left: 0 !important;
  padding-right: 34px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .side-branches::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 20px !important;
  bottom: 20px !important;
  width: 0 !important;
  border-left: 4px solid #171717 !important;
  border-radius: 26px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches::before {
  left: auto !important;
  right: 0 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch {
  position: relative !important;
  padding: 0 0 0 34px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches .mind-branch {
  padding: 0 34px 0 0 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch::before {
  content: "" !important;
  position: absolute !important;
  left: -34px !important;
  top: 23px !important;
  width: 68px !important;
  height: 0 !important;
  border-top: 4px solid #171717 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches .mind-branch::before {
  left: auto !important;
  right: -34px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-node {
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  border: 3px solid #171717 !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: none !important;
  cursor: default !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-node.has-children {
  cursor: pointer !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-node.has-children:hover {
  background: #f8fbff !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-node i {
  min-width: 22px !important;
  border: 2px solid #171717 !important;
  background: #ffffff !important;
  color: #111827 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch-list.nested {
  position: relative !important;
  display: grid !important;
  gap: 16px !important;
  margin: 12px 0 0 34px !important;
  padding: 0 0 0 36px !important;
  border-left: 4px solid #171717 !important;
  border-radius: 24px 0 0 24px !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches .mind-branch-list.nested {
  margin: 12px 34px 0 0 !important;
  padding: 0 36px 0 0 !important;
  border-left: 0 !important;
  border-right: 4px solid #171717 !important;
  border-radius: 0 24px 24px 0 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .mind-branch-list.nested .mind-branch::before {
  left: -36px !important;
  width: 36px !important;
  border-top-color: #171717 !important;
}

body.admin-page .mindmap-preview-workbench .reference-document-mindmap .left-branches .mind-branch-list.nested .mind-branch::before {
  left: auto !important;
  right: -36px !important;
}

body.admin-page .mindmap-preview-workbench .mind-branch.collapsed > .mind-branch-list {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .mind-branch.collapsed > .mind-node {
  border-style: dashed !important;
}

body.admin-page .mindmap-preview-workbench .mind-branch.collapsed > .mind-node::after {
  content: "展开" !important;
  margin-left: 8px !important;
  border: 1px solid #171717 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 11px !important;
}

@media (max-width: 1180px) {
  body.admin-page .mindmap-preview-layout {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .mindmap-info-panel {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-height: none !important;
  }
}

/* v15.0: classic one-sided mindmap, readable like teacher reference, with clickable collapsible nodes. */
body.admin-page .mindmap-preview-workbench {
  overflow: visible !important;
}

body.admin-page .mindmap-preview-layout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 292px) !important;
  gap: 14px !important;
}

body.admin-page .mindmap-preview-workbench.is-info-hidden .mindmap-preview-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-panel {
  min-width: 0 !important;
  overflow: visible !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-stage {
  height: clamp(520px, 66vh, 760px) !important;
  min-height: 520px !important;
  overflow: hidden !important;
  background: #fff !important;
}

body.admin-page .mindmap-preview-workbench .mindmap-canvas-content {
  width: max-content !important;
  min-width: 1320px !important;
  min-height: 780px !important;
  padding: 70px 110px !important;
  transform-origin: 0 0 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap {
  display: inline-grid !important;
  grid-template-columns: max-content max-content !important;
  column-gap: 56px !important;
  align-items: center !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-root-node {
  position: relative !important;
  align-self: center !important;
  border: 3px solid #171717 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  min-width: 170px !important;
  text-align: center !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-root-node::after {
  content: "" !important;
  position: absolute !important;
  right: -58px !important;
  top: 50% !important;
  width: 58px !important;
  border-top: 4px solid #171717 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .side-branches {
  position: relative !important;
  display: grid !important;
  gap: 22px !important;
  min-width: 0 !important;
  padding: 0 0 0 44px !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .side-branches::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 24px !important;
  bottom: 24px !important;
  width: 0 !important;
  border-left: 4px solid #171717 !important;
  border-radius: 999px !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch {
  position: relative !important;
  display: grid !important;
  grid-template-columns: max-content max-content !important;
  align-items: center !important;
  column-gap: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch::before {
  content: "" !important;
  position: absolute !important;
  left: -44px !important;
  top: 50% !important;
  width: 44px !important;
  height: 0 !important;
  border-top: 4px solid #171717 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-node {
  position: relative !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 120px !important;
  max-width: 360px !important;
  min-height: 42px !important;
  padding: 8px 16px !important;
  border: 3px solid #171717 !important;
  border-radius: 3px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  box-shadow: none !important;
  touch-action: manipulation !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-node.has-children {
  cursor: pointer !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-node.has-children:hover {
  background: #f8fafc !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-node i {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 24px !important;
  height: 24px !important;
  border: 2px solid #171717 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch-list.nested {
  position: relative !important;
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 0 0 38px !important;
  border-left: 4px solid #171717 !important;
  border-radius: 999px 0 0 999px !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch-list.nested .mind-branch {
  grid-template-columns: max-content max-content !important;
  column-gap: 36px !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch-list.nested .mind-branch::before {
  left: -38px !important;
  width: 38px !important;
  border-top: 4px solid #171717 !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch.collapsed {
  grid-template-columns: max-content !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch.collapsed > .mind-branch-list {
  display: none !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch.collapsed > .mind-node {
  border-style: solid !important;
  background: #fff !important;
}

body.admin-page .mindmap-preview-workbench .classic-branch-mindmap .mind-branch.collapsed > .mind-node::after {
  content: "已收起" !important;
  margin-left: 4px !important;
  border: 1px solid #171717 !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  background: #fff !important;
  color: #111827 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

body.admin-page .mindmap-info-panel {
  max-height: clamp(520px, 66vh, 760px) !important;
  overflow: auto !important;
}

@media (max-width: 1180px) {
  body.admin-page .mindmap-preview-layout {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .mindmap-preview-workbench .mindmap-canvas-content {
    min-width: 1040px !important;
  }
}

/* v15.3: image module interactions are separated by module purpose. */
body.admin-page .knowledge-module-card[data-module-type="mindmap"].editing .module-card-body {
  padding: 14px !important;
  gap: 12px !important;
}

body.admin-page .knowledge-module-card[data-module-type="mindmap"].editing .module-card-body > p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

body.admin-page .mindmap-module-editor-window {
  grid-template-rows: auto minmax(420px, auto) !important;
  align-items: start !important;
}

body.admin-page .mindmap-replace-zone {
  min-height: 52px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}

body.admin-page .mindmap-replace-zone span {
  padding: 8px 12px !important;
  font-size: 13px !important;
}

body.admin-page .mindmap-replace-zone em {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

body.admin-page .mindmap-module-preview-shell {
  min-height: 520px !important;
  max-height: min(82vh, 900px) !important;
  overflow: auto !important;
  resize: vertical !important;
  border: 1px solid #d8e4f2 !important;
  border-radius: 18px !important;
  background: #f8fbff !important;
  padding: 10px !important;
}

body.admin-page .mindmap-module-preview-shell .module-file-preview {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-preview-workbench {
  min-width: 720px !important;
  min-height: 500px !important;
  max-width: none !important;
  resize: both !important;
  overflow: auto !important;
  padding: 12px !important;
  border: 1px solid #cfe0f4 !important;
  background: #ffffff !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-preview-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-preview-toolbar .compact-link {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-preview-toolbar span {
  flex: 1 1 260px !important;
  min-width: 220px !important;
  color: #617086 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-preview-layout {
  grid-template-columns: minmax(460px, 1fr) minmax(220px, 280px) !important;
  gap: 10px !important;
  min-width: 700px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-canvas-panel {
  resize: both !important;
  overflow: auto !important;
  min-width: 460px !important;
  min-height: 420px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  padding: 8px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-canvas-stage {
  height: clamp(380px, 54vh, 620px) !important;
  min-height: 360px !important;
  resize: both !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-canvas-content {
  min-width: 1180px !important;
  min-height: 680px !important;
  padding: 52px 78px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-file-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: center !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-file-strip strong {
  max-width: 46ch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-info-panel {
  resize: both !important;
  overflow: auto !important;
  min-width: 220px !important;
  min-height: 260px !important;
  max-height: clamp(380px, 54vh, 620px) !important;
  padding: 10px !important;
  border: 1px solid #dbe7f6 !important;
  border-radius: 16px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-info-panel section {
  padding: 10px !important;
  border-radius: 12px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-info-panel h4 {
  margin-bottom: 8px !important;
  font-size: 14px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-info-panel dl {
  gap: 6px 8px !important;
  font-size: 12px !important;
}

body.admin-page .mindmap-module-preview-shell .mindmap-info-panel .compact-link {
  min-height: 30px !important;
  font-size: 12px !important;
}

body.admin-page .mindmap-module-preview-shell .classic-branch-mindmap .mind-node {
  min-height: 36px !important;
  padding: 7px 12px !important;
  font-size: 14px !important;
  border-width: 2px !important;
}

body.admin-page .mindmap-module-preview-shell .classic-branch-mindmap .mind-root-node {
  min-width: 140px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  border-width: 2px !important;
}

body.admin-page .mindmap-module-preview-shell .classic-branch-mindmap .mind-node i {
  min-width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
  border-width: 1px !important;
}

@media (max-width: 1290px) {
  body.admin-page .mindmap-module-preview-shell .mindmap-preview-layout {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .mindmap-module-preview-shell .mindmap-info-panel {
    max-height: 320px !important;
  }
}

/* v15.3: real image gallery module. Gallery is a plain album; zoom stays in artwork images, hotspots stay in AI interactive images. */
body.admin-page .module-gallery-editor {
  display: grid;
  gap: 14px;
  width: 100%;
}

body.admin-page .gallery-editor-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
}

body.admin-page .gallery-editor-head > div:first-child {
  display: grid;
  gap: 3px;
}

body.admin-page .gallery-editor-head strong {
  color: #0f172a;
  font-size: 16px;
}

body.admin-page .gallery-editor-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .gallery-editor-head-actions,
body.admin-page .gallery-preview-actions,
body.admin-page .gallery-manage-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-page .module-gallery-editor .compact-link.active {
  border-color: rgba(10, 132, 255, 0.48);
  background: rgba(10, 132, 255, 0.12);
  color: #0066cc;
}

body.admin-page .gallery-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 180px;
  width: 100%;
  border: 1px dashed rgba(10, 132, 255, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 24px 24px, rgba(10, 132, 255, 0.11) 0 4px, transparent 5px) 0 0 / 38px 38px,
    linear-gradient(180deg, #f8fbff, #ffffff);
  color: #0f172a;
  text-align: center;
  cursor: pointer;
}

body.admin-page .gallery-empty-state strong {
  font-size: 18px;
}

body.admin-page .gallery-empty-state span {
  max-width: 40ch;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .gallery-editor-pane {
  min-width: 0;
}

body.admin-page .gallery-editor-preview-pane {
  display: grid;
  gap: 12px;
}

body.admin-page .gallery-preview-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #f8fafc;
}

body.admin-page .gallery-preview-stage img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #f8fafc;
}

body.admin-page .gallery-preview-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  transform: translateY(-50%);
}

body.admin-page .gallery-preview-arrow.left {
  left: 12px;
}

body.admin-page .gallery-preview-arrow.right {
  right: 12px;
}

body.admin-page .gallery-preview-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}

body.admin-page .gallery-preview-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .gallery-preview-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: #fff;
}

body.admin-page .gallery-preview-meta > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.admin-page .gallery-preview-meta strong,
body.admin-page .gallery-preview-meta span,
body.admin-page .gallery-preview-meta p {
  overflow: hidden;
  text-overflow: ellipsis;
}

body.admin-page .gallery-preview-meta span,
body.admin-page .gallery-preview-meta p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

body.admin-page .gallery-preview-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 2px;
}

body.admin-page .gallery-preview-thumb {
  position: relative;
  min-height: 76px;
  overflow: hidden;
  border: 2px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  background: #f8fafc;
  touch-action: pan-y;
}

body.admin-page .gallery-preview-thumb.dragging {
  opacity: 0.58;
  cursor: grabbing;
}

body.admin-page .gallery-preview-thumb.drop-target {
  border-color: rgba(10, 132, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.16);
}

body.admin-page .gallery-preview-thumb.active {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

body.admin-page .gallery-preview-thumb img {
  width: 100%;
  height: 76px;
  object-fit: cover;
}

body.admin-page .gallery-preview-thumb span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .gallery-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

body.admin-page .gallery-manage-card,
body.admin-page .gallery-add-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

body.admin-page .gallery-manage-card {
  cursor: grab;
}

body.admin-page .gallery-manage-card.dragging {
  opacity: 0.58;
  cursor: grabbing;
}

body.admin-page .gallery-manage-card.drop-target {
  border-color: rgba(10, 132, 255, 0.58);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12);
}

body.admin-page .gallery-manage-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #f8fafc;
}

body.admin-page .gallery-manage-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

body.admin-page .gallery-manage-image span {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.9);
  color: #fff;
  font-weight: 900;
}

body.admin-page .gallery-manage-card label,
body.admin-page .gallery-display-settings label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .gallery-manage-card input,
body.admin-page .gallery-manage-card textarea,
body.admin-page .gallery-display-settings select {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  color: #0f172a;
  font: inherit;
}

body.admin-page .gallery-manage-card textarea {
  min-height: 76px;
  resize: vertical;
}

body.admin-page .gallery-manage-card small {
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .gallery-add-card {
  min-height: 220px;
  place-items: center;
  border-style: dashed;
  color: #0a84ff;
  text-align: center;
}

body.admin-page .gallery-add-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .gallery-display-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
}

body.admin-page .gallery-caption-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
}

body.admin-page .gallery-caption-toggle input {
  width: 22px;
  height: 22px;
}

body.student-page .student-gallery-grid {
  display: grid;
  gap: 10px;
}

body.student-page .student-gallery-grid.columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.student-page .student-gallery-grid.columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.student-page .student-gallery-grid-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  padding: 8px;
  background: #fff;
  color: #0f172a;
  text-align: left;
}

body.student-page .student-gallery-grid-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #f8fafc;
}

body.student-page .student-gallery-grid-card span {
  min-height: 2.35em;
  overflow: hidden;
  color: #334155;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}

body.student-page.student-gallery-viewer-open {
  overflow: hidden;
}

body.student-page .student-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(15, 23, 42, 0.94);
  color: #fff;
}

body.student-page .student-gallery-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.student-page .student-gallery-viewer-head button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 900;
}

body.student-page .student-gallery-viewer-head span {
  font-weight: 900;
}

body.student-page .student-gallery-viewer-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
}

body.student-page .student-gallery-viewer-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #0f172a;
}

body.student-page .student-gallery-viewer-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  transform: translateY(-50%);
}

body.student-page .student-gallery-viewer-arrow.left {
  left: 8px;
}

body.student-page .student-gallery-viewer-arrow.right {
  right: 8px;
}

body.student-page .student-gallery-viewer-arrow:disabled {
  opacity: 0.25;
}

body.student-page .student-gallery-viewer figcaption {
  display: grid;
  gap: 4px;
  justify-items: center;
  max-width: min(720px, 92vw);
  margin: 0 auto;
  text-align: center;
}

body.student-page .student-gallery-viewer figcaption strong {
  color: #fff;
  font-size: 16px;
}

body.student-page .student-gallery-viewer figcaption span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
}

body.student-page .student-gallery-viewer-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

body.student-page .student-gallery-viewer-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.32);
}

body.student-page .student-gallery-viewer-dots button.active {
  width: 24px;
  background: #0a84ff;
}

/* v15.4 module editor suite */
body.admin-page .knowledge-module-editor-shell.suite-editor {
  --module-settings-width: 360px;
  --module-editor-zoom: 1;
  --module-accent: #0a84ff;
  --module-soft: #edf6ff;
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--module-accent) 18%, #d9e6f7);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94)),
    var(--module-soft);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
}

body.admin-page.module-editor-fullscreen-open {
  overflow: hidden;
}

body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen {
  position: fixed;
  inset: 12px;
  z-index: 1190;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.32);
}

body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, 0.38);
}

body.admin-page .module-editor-suite-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
}

body.admin-page .module-suite-title-block {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

body.admin-page .module-suite-title-block > i {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--module-accent) 28%, #dbeafe);
  border-radius: 16px;
  background: var(--module-soft);
  color: var(--module-accent);
  font-style: normal;
  font-size: 20px;
  font-weight: 950;
}

body.admin-page .module-suite-title-block strong,
body.admin-page .module-suite-title-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .module-suite-title-block strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 950;
}

body.admin-page .module-suite-title-block span {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-editor-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-page .module-editor-floating-controls {
  position: fixed;
  top: 112px;
  right: 34px;
  z-index: 1120;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  max-width: min(560px, calc(100vw - 72px));
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
}

body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen .module-editor-floating-controls {
  top: 28px;
  right: 32px;
  z-index: 1205;
}

body.admin-page .module-editor-zoom-readout {
  display: inline-grid;
  min-height: 36px;
  min-width: 54px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 12px;
  font-weight: 950;
}

body.admin-page .module-editor-suite-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px var(--module-settings-width);
  min-height: min(72vh, 840px);
  transform: scale(var(--module-editor-zoom));
  transform-origin: top left;
  width: calc(100% / var(--module-editor-zoom));
  height: calc(100% / var(--module-editor-zoom));
  transition: grid-template-columns 0.18s ease;
}

body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen .module-editor-suite-body {
  min-height: 0;
}

body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-editor-suite-body {
  grid-template-columns: minmax(0, 1fr) 0 0;
}

body.admin-page .module-editor-suite-main {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  max-height: calc(100vh - 168px);
  overflow: auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.64), rgba(255, 255, 255, 0.94));
}

body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen .module-editor-suite-main,
body.admin-page .knowledge-module-editor-shell.suite-editor.is-fullscreen .module-editor-suite-side {
  max-height: none;
}

body.admin-page .module-editor-suite-splitter {
  cursor: col-resize;
  background:
    linear-gradient(90deg, transparent 0 3px, rgba(148, 163, 184, 0.35) 3px 5px, transparent 5px 10px);
}

body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-editor-suite-splitter,
body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-editor-suite-side {
  display: none;
}

body.admin-page .module-editor-suite-side {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  max-height: calc(100vh - 168px);
  overflow: auto;
  padding: 18px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(245, 249, 255, 0.92), rgba(255, 255, 255, 0.92));
}

body.admin-page.module-editor-resizing,
body.admin-page.module-editor-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

body.admin-page .module-suite-restore {
  position: absolute;
  top: 92px;
  right: 14px;
  z-index: 4;
  display: none;
  min-height: 42px;
  border: 1px solid rgba(10, 132, 255, 0.28);
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  color: #0a84ff;
  font-weight: 950;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12);
}

body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-suite-restore {
  display: inline-flex;
  align-items: center;
}

body.admin-page .module-suite-identity,
body.admin-page .module-suite-edit-card,
body.admin-page .module-suite-side-card {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
}

body.admin-page .module-suite-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  gap: 16px;
  align-items: end;
  padding: 16px;
}

body.admin-page .module-suite-identity input,
body.admin-page .module-suite-large-input,
body.admin-page .module-suite-table-input,
body.admin-page .module-suite-quiz-input,
body.admin-page .module-suite-edit-card textarea,
body.admin-page .module-suite-edit-card input,
body.admin-page .module-suite-edit-card select,
body.admin-page .module-suite-side-card input,
body.admin-page .module-suite-side-card textarea,
body.admin-page .module-suite-side-card select {
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-size: 15px;
  font-weight: 750;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.admin-page .module-suite-status-strip {
  display: grid;
  gap: 6px;
  min-height: 54px;
  align-content: center;
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--module-soft);
  color: color-mix(in srgb, var(--module-accent) 65%, #334155);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .module-suite-workspace {
  min-width: 0;
}

body.admin-page .module-suite-edit-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body.admin-page .module-suite-card-head {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

body.admin-page .module-suite-card-head h4,
body.admin-page .module-suite-side-card h4 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

body.admin-page .module-suite-card-head p,
body.admin-page .module-suite-side-card p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
}

body.admin-page .module-suite-large-input,
body.admin-page .module-suite-quiz-input {
  min-height: 240px;
  resize: vertical;
  line-height: 1.65;
}

body.admin-page .module-suite-table-input {
  min-height: 150px;
  resize: vertical;
  line-height: 1.55;
}

body.admin-page .module-suite-table-preview,
body.admin-page .module-suite-file-preview,
body.admin-page .module-suite-quiz-preview {
  overflow: auto;
  min-height: 120px;
  max-height: 440px;
  border: 1px solid color-mix(in srgb, var(--module-accent) 24%, #dbeafe);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--module-soft));
}

body.admin-page .module-suite-file-panel,
body.admin-page .module-suite-quiz-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

body.admin-page .module-ai-result {
  margin-top: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-ai-result.running {
  border-color: rgba(59, 130, 246, 0.3);
  background: #eff6ff;
  color: #1d4ed8;
}

body.admin-page .module-ai-result.success {
  border-color: rgba(34, 197, 94, 0.3);
  background: #ecfdf5;
  color: #15803d;
}

body.admin-page .module-ai-result.failed {
  border-color: rgba(248, 113, 113, 0.34);
  background: #fef2f2;
  color: #b91c1c;
}

body.admin-page .module-suite-file-name {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-radius: 14px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-suite-file-name strong {
  overflow: hidden;
  color: #0f172a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .module-suite-side-card {
  padding: 14px;
}

body.admin-page .module-suite-rail-toggle {
  justify-self: stretch;
  min-height: 44px;
  border-radius: 14px;
}

body.admin-page .module-suite-phone {
  display: grid;
  min-height: 420px;
  overflow: hidden;
  border: 10px solid #111827;
  border-radius: 32px;
  background: #f8fafc;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

body.admin-page .module-suite-phone-screen {
  max-height: 520px;
  overflow: auto;
  padding: 14px;
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}

body.admin-page .module-suite-settings-grid,
body.admin-page .module-suite-capabilities {
  display: grid;
  gap: 10px;
}

body.admin-page .module-suite-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.admin-page .module-suite-checks label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
  font-weight: 900;
}

body.admin-page .module-suite-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

body.admin-page .module-suite-capabilities span {
  border-radius: 12px;
  padding: 9px 10px;
  background: var(--module-soft);
  color: color-mix(in srgb, var(--module-accent) 62%, #334155);
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .knowledge-module-card.module-tile {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--module-accent) 30%, #d8e4f4) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.76)),
    var(--module-soft) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07) !important;
}

body.admin-page .knowledge-module-card.module-tile::before {
  background: var(--module-accent) !important;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main {
  min-height: 118px;
  padding: 18px 18px 10px !important;
  text-align: left;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-icon,
body.admin-page .module-palette-item[data-module-type] .module-palette-icon {
  border-color: color-mix(in srgb, var(--module-accent) 30%, #dbeafe) !important;
  background: var(--module-soft) !important;
  color: var(--module-accent) !important;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-main strong {
  color: color-mix(in srgb, var(--module-accent) 48%, #0f172a) !important;
  font-size: 17px !important;
}

body.admin-page .knowledge-module-card.module-tile .module-tile-preview {
  margin: 8px 14px 12px;
  border-color: color-mix(in srgb, var(--module-accent) 22%, #dbeafe) !important;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.78);
}

body.admin-page .module-palette-item[data-module-type] {
  border-color: color-mix(in srgb, var(--module-accent) 28%, #dbeafe) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)),
    var(--module-soft) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

body.admin-page .module-palette-item[data-module-type]::before {
  background: color-mix(in srgb, var(--module-accent) 70%, #ffffff) !important;
}

body.admin-page .module-palette-item[data-module-type]:hover,
body.admin-page .module-palette-item[data-module-type]:focus-visible {
  border-color: color-mix(in srgb, var(--module-accent) 56%, #bfdbfe) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--module-accent) 16%, transparent);
  transform: translateY(-1px);
}

body.admin-page .module-palette-item[data-module-type] span {
  color: color-mix(in srgb, var(--module-accent) 46%, #0f172a) !important;
}

@media (max-width: 1180px) {
  body.admin-page .module-editor-suite-topbar,
  body.admin-page .module-suite-identity {
    grid-template-columns: 1fr;
  }

  body.admin-page .module-editor-suite-body,
  body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-editor-suite-body {
    grid-template-columns: 1fr;
  }

  body.admin-page .module-editor-suite-splitter,
  body.admin-page .module-editor-suite-side,
  body.admin-page .module-suite-restore {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body.admin-page .gallery-editor-head,
  body.admin-page .gallery-preview-meta {
    grid-template-columns: 1fr;
    display: grid;
  }

  body.admin-page .gallery-display-settings {
    grid-template-columns: 1fr;
  }

  body.student-page .student-gallery-grid.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v15.8 teacher module visual cards */
body.admin-page .knowledge-module-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  align-items: start !important;
  gap: 18px !important;
}

body.admin-page .knowledge-module-card.visual-module-card {
  min-height: 372px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid color-mix(in srgb, var(--module-accent) 28%, #dbe6f5) !important;
  border-left: 6px solid color-mix(in srgb, var(--module-accent) 78%, #ffffff) !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--module-soft) 82%, transparent), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.86)),
    var(--module-soft) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.admin-page .knowledge-module-card.visual-module-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--module-accent) 45%, #cfe0f5) !important;
  box-shadow: 0 24px 56px color-mix(in srgb, var(--module-accent) 13%, rgba(15, 23, 42, 0.12)) !important;
}

body.admin-page .knowledge-module-card.visual-module-card::before {
  display: none !important;
}

body.admin-page .visual-card-head {
  display: grid;
  grid-template-columns: 22px 30px 74px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

body.admin-page .visual-drag {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 22px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9aabc3;
  font-size: 20px;
  cursor: grab;
}

body.admin-page .visual-order {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--module-soft) 75%, #ffffff);
  color: color-mix(in srgb, var(--module-accent) 55%, #0f172a);
  font-weight: 950;
  font-size: 14px;
}

body.admin-page .visual-icon {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 15px !important;
  font-size: 21px !important;
  font-style: normal !important;
  color: color-mix(in srgb, var(--module-accent) 70%, #12223a) !important;
  background: color-mix(in srgb, var(--module-soft) 78%, #ffffff) !important;
  border: 1px solid color-mix(in srgb, var(--module-accent) 28%, #dbeafe) !important;
}

body.admin-page .visual-title {
  grid-column: 4 / 5;
  grid-row: 1;
  min-width: 0;
  cursor: pointer;
}

body.admin-page .visual-title strong,
body.admin-page .visual-title b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #132238;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.3;
}

body.admin-page .visual-title em,
body.admin-page .visual-title span,
body.admin-page .visual-card-meta span,
body.admin-page .visual-card-meta small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #718096;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

body.admin-page .visual-status {
  grid-column: 4 / 5;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-page .visual-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
}

body.admin-page .visual-status.published i {
  background: #22c55e;
}

body.admin-page .visual-status.hidden i {
  background: #94a3b8;
}

body.admin-page .visual-status.draft i,
body.admin-page .visual-status.review i {
  background: #f59e0b;
}

body.admin-page .visual-switch {
  grid-column: 5 / 6;
  grid-row: 1 / span 2;
  justify-self: end;
  margin-left: 0 !important;
}

body.admin-page .visual-card-click {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

body.admin-page .visual-card-preview {
  width: 100% !important;
  max-height: none !important;
  min-height: 150px;
  display: block;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body.admin-page .knowledge-module-card.visual-module-card .vf-mini {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.admin-page .visual-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

body.admin-page .visual-card-meta {
  min-width: 0;
}

body.admin-page .visual-card-meta em {
  display: block;
  max-width: 100%;
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #53637b;
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

body.admin-page .visual-card-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

body.admin-page .visual-card-buttons .compact-link {
  min-height: 32px !important;
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

body.admin-page .vf-mini {
  position: relative;
  min-height: 156px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--module-accent) 20%, #dbeafe);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: #132238;
}

body.admin-page .vf-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  color: #7a8aa3;
  font-weight: 900;
}

body.admin-page .vf-text {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0 60%, color-mix(in srgb, var(--module-soft) 75%, #fff5df) 60% 100%);
}

body.admin-page .vf-text p,
body.admin-page .vf-rich li,
body.admin-page .vf-quick div,
body.admin-page .vf-profile span,
body.admin-page .vf-preview-note {
  margin: 0;
  color: #59687f;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}

body.admin-page .vf-text strong {
  width: max-content;
  border-radius: 10px;
  padding: 7px 10px;
  color: color-mix(in srgb, var(--module-accent) 58%, #0f172a);
  background: color-mix(in srgb, var(--module-soft) 75%, #fff);
  font-size: 12px;
}

body.admin-page .vf-rich {
  padding: 18px;
  background: linear-gradient(135deg, #ffffff 0 62%, color-mix(in srgb, var(--module-soft) 80%, #fff4d7) 62%);
}

body.admin-page .vf-rich ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.admin-page .vf-rich li b {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--module-accent) 16%, #ffffff);
  color: color-mix(in srgb, var(--module-accent) 65%, #0f172a);
}

body.admin-page .vf-table-wrap,
body.admin-page .vf-compare-table,
body.admin-page .vf-analysis,
body.admin-page .vf-quick {
  padding: 14px;
}

body.admin-page .vf-table,
body.admin-page .vf-compare-table table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #e4ecf4;
  border-radius: 13px;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.94);
  table-layout: fixed;
  font-size: 12px;
}

body.admin-page .vf-table th,
body.admin-page .vf-table td,
body.admin-page .vf-compare-table th,
body.admin-page .vf-compare-table td {
  border: 1px solid #e6eef8;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  word-break: break-word;
}

body.admin-page .vf-table th,
body.admin-page .vf-compare-table th {
  width: 34%;
  border-right: 1px solid #edf2f7;
  background: rgba(246, 249, 252, 0.95);
  color: #52627a;
  font-weight: 950;
}

body.admin-page .vf-table-module-preview {
  min-height: 150px;
}

body.admin-page .vf-table tr:last-child th,
body.admin-page .vf-table tr:last-child td,
body.admin-page .vf-compare-table tr:last-child th,
body.admin-page .vf-compare-table tr:last-child td {
  border-bottom: 0;
}

body.admin-page .vf-analysis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

body.admin-page .vf-artwork-analysis {
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.9fr);
  min-height: 156px;
}

body.admin-page .vf-analysis-main {
  position: relative;
  min-height: 124px;
  display: grid;
  place-items: center;
}

body.admin-page .vf-score {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(color-mix(in srgb, var(--module-accent) 68%, #22c55e) 86%, #e6eef8 0);
  color: #0f5132;
  font-size: 11px;
  font-weight: 900;
}

body.admin-page .vf-score b {
  font-size: 18px;
}

body.admin-page .vf-bars {
  display: grid;
  gap: 8px;
}

body.admin-page .vf-bars span {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

body.admin-page .vf-bars em {
  color: #64748b;
  font-style: normal;
}

body.admin-page .vf-bars i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--module-accent) 58%, #22c55e);
}

body.admin-page .vf-comparison-table {
  min-height: 156px;
}

body.admin-page .vf-comparison-table table {
  height: 100%;
}

body.admin-page .vf-comparison-table thead th {
  background: color-mix(in srgb, var(--module-soft) 82%, #f4efff);
  color: color-mix(in srgb, var(--module-accent) 58%, #3f3a75);
}

body.admin-page .vf-comparison-table th,
body.admin-page .vf-comparison-table td {
  font-size: 11px;
}

body.admin-page .vf-comparison-table th:first-child {
  width: 30%;
}

body.admin-page .vf-quick {
  display: grid;
  gap: 8px;
}

body.admin-page .vf-quick div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.82);
}

body.admin-page .vf-quick div b {
  display: grid;
  height: 100%;
  min-height: 36px;
  place-items: center;
  border-radius: 9px;
  color: #846f43;
  background: #fff7df;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

body.admin-page .vf-quick div span {
  align-self: center;
  min-width: 0;
  color: #59687f;
  font-size: 12px;
  line-height: 1.45;
}

body.admin-page .vf-quick .vf-quick-row-2 b {
  color: #7b66a1;
  background: #f4efff;
}

body.admin-page .vf-quick .vf-quick-row-3 b {
  color: #5d7fac;
  background: #edf4ff;
}

body.admin-page .vf-quick .vf-quick-row-4 b {
  color: #b36363;
  background: #fff0f0;
}

body.admin-page .vf-timeline {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 18px 22px;
}

body.admin-page .vf-timeline span {
  position: relative;
  display: grid;
  grid-template-columns: 20px 78px 1fr;
  gap: 10px;
  align-items: center;
  color: #5d6d84;
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .vf-timeline i {
  width: 12px;
  height: 12px;
  border: 3px solid color-mix(in srgb, var(--module-accent) 55%, #4ade80);
  border-radius: 50%;
}

body.admin-page .vf-timeline-suite {
  position: relative;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px 14px 16px 30px;
  background:
    linear-gradient(90deg, rgba(232, 247, 242, 0.85), rgba(255, 255, 255, 0.72)),
    #fbfffd;
}

body.admin-page .vf-timeline-suite::before {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 26px;
  width: 2px;
  border-radius: 999px;
  content: "";
  background: linear-gradient(#4eb99a, rgba(78, 185, 154, 0.2));
}

body.admin-page .vf-timeline-suite-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding-left: 18px;
}

body.admin-page .vf-timeline-node {
  position: absolute;
  left: -12px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #4eb99a;
  box-shadow: 0 0 0 2px rgba(78, 185, 154, 0.82);
}

body.admin-page .vf-timeline-suite-item time {
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 7px;
  background: #e8f7f2;
  color: #357f70;
  font-size: 10px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .vf-timeline-suite-item strong {
  overflow: hidden;
  color: #536078;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .vf-timeline-suite-item small {
  border-radius: 999px;
  padding: 4px 6px;
  background: #ecfdf3;
  color: #4f9f72;
  font-size: 9px;
  font-weight: 950;
  white-space: nowrap;
}

body.admin-page .vf-timeline-node.node-sprout i {
  position: absolute;
  bottom: 2px;
  width: 2px;
  height: 7px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  animation: visualSproutGrow 1.6s ease-in-out infinite alternate;
}

body.admin-page .vf-timeline-node.node-sprout b,
body.admin-page .vf-timeline-node.node-leaf b {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 5px;
  height: 3px;
  border-radius: 100% 0 100% 0;
  background: #fff;
  transform: rotate(-25deg);
  animation: visualSproutLeaf 1.6s ease-in-out infinite alternate;
}

body.admin-page .vf-timeline-node.node-leaf b {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 5px;
  transform: rotate(25deg);
}

body.admin-page .vf-timeline-node.node-tree::before {
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 7px;
  content: "";
  background: #fff;
}

body.admin-page .vf-timeline-node.node-tree::after {
  position: absolute;
  top: 2px;
  width: 10px;
  height: 8px;
  border-radius: 50%;
  content: "";
  background: #fff;
}

body.admin-page .vf-profile {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
}

body.admin-page .vf-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 34%, #f2c48b 0 13px, transparent 14px),
    radial-gradient(circle at 50% 100%, #d58f45 0 24px, transparent 25px),
    color-mix(in srgb, var(--module-soft) 70%, #fff);
}

body.admin-page .vf-mindmap {
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle, rgba(59, 130, 246, 0.08) 2px, transparent 3px) 0 0 / 34px 34px,
    #fbfdff;
}

body.admin-page .vf-mindmap b {
  z-index: 1;
  border-radius: 15px;
  padding: 10px 16px;
  background: #0f1b3d;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 8px 18px rgba(15, 27, 61, 0.18);
}

body.admin-page .vf-mindmap span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--module-accent) 32%, #dbeafe);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  color: #52627a;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .vf-mindmap .a { left: 18px; top: 28px; }
body.admin-page .vf-mindmap .b { right: 18px; top: 38px; }
body.admin-page .vf-mindmap .c { left: 38px; bottom: 30px; }
body.admin-page .vf-mindmap .d { right: 30px; bottom: 30px; }

body.admin-page .vf-video {
  display: grid;
  align-content: end;
  min-height: 174px;
  padding: 14px;
  color: #fff;
  background: #101827;
}

body.admin-page .vf-video:not(.vf-video-deer) > div {
  position: absolute;
  inset: 18px 32px 38px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent) 55%, #eab308), #27364f);
}

body.admin-page .vf-video:not(.vf-video-deer) > div i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  transform: translate(-50%, -50%);
}

body.admin-page .vf-video:not(.vf-video-deer) > div i::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 14px;
  border-left: 14px solid #0f172a;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

body.admin-page .vf-video span,
body.admin-page .vf-video em {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .vf-video em {
  margin-top: 8px;
  border-top: 4px solid rgba(255, 255, 255, 0.35);
  padding-top: 5px;
  font-size: 12px;
}

body.admin-page .vf-audio {
  display: grid;
  gap: 16px;
  align-content: center;
  padding: 18px;
  text-align: center;
}

body.admin-page .vf-wave {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

body.admin-page .vf-wave i {
  width: 4px;
  height: var(--h);
  border-radius: 999px;
  background: color-mix(in srgb, var(--module-accent) 70%, #38bdf8);
}

body.admin-page .vf-artwork,
body.admin-page .vf-hotspot,
body.admin-page .vf-image-compare,
body.admin-page .vf-recall {
  display: grid;
  place-items: center;
  background: #f8fbff;
}

body.admin-page .vf-artwork-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

body.admin-page .vf-artwork-placeholder {
  width: 118px;
  height: 96px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--module-soft) 76%, #f5dec0);
}

body.admin-page .vf-artwork-placeholder span,
body.admin-page .vf-artwork-placeholder i {
  position: absolute;
  border-radius: 50%;
}

body.admin-page .vf-artwork-placeholder span {
  inset: 44px auto auto 50%;
  width: 88px;
  height: 42px;
  border: 14px solid #a65f22;
  border-top: 0;
  transform: translateX(-50%);
}

body.admin-page .vf-artwork-placeholder i {
  left: calc(50% - 8px);
  top: 46px;
  width: 16px;
  height: 16px;
  background: #1f2937;
}

body.admin-page .vf-deer-placeholder {
  position: relative;
  width: min(172px, 82%);
  min-height: 138px;
  display: grid;
  place-items: center;
  gap: 4px;
  margin: auto;
  color: #49634b;
  isolation: isolate;
}

body.admin-page .vf-deer-placeholder strong {
  position: relative;
  z-index: 3;
  border-radius: 999px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #5f765f;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

body.admin-page .vf-deer-scene {
  position: relative;
  width: 142px;
  height: 116px;
  display: grid;
  place-items: center;
}

body.admin-page .vf-deer-frame {
  position: absolute;
  inset: 12px 12px 24px;
  border: 8px solid rgba(163, 129, 91, 0.32);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(247, 226, 234, 0.88), rgba(224, 236, 221, 0.88)),
    #fffaf3;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.76);
  overflow: hidden;
}

body.admin-page .vf-frame-sun {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f3c86b;
}

body.admin-page .vf-frame-hill {
  position: absolute;
  bottom: -7px;
  width: 84px;
  height: 38px;
  border-radius: 50% 50% 0 0;
  background: rgba(144, 175, 136, 0.5);
}

body.admin-page .vf-frame-hill.one {
  left: -10px;
}

body.admin-page .vf-frame-hill.two {
  right: -18px;
  bottom: -10px;
  background: rgba(188, 160, 125, 0.42);
}

body.admin-page .vf-deer-svg {
  position: relative;
  z-index: 2;
  width: 114px;
  height: 114px;
  filter: none;
}

body.admin-page .vf-deer-placeholder.video {
  width: min(178px, 88%);
  min-height: 150px;
  color: #5d4b69;
}

body.admin-page .vf-deer-placeholder.video .vf-deer-scene {
  width: 158px;
  height: 124px;
  border-radius: 26px;
  background: linear-gradient(135deg, #f7e4ed, #e7f0fb);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

body.admin-page .vf-deer-placeholder.video .vf-deer-svg {
  width: 122px;
  height: 122px;
}

body.admin-page .vf-video-deer {
  align-content: center;
  justify-items: center;
  gap: 6px;
  overflow: hidden;
  color: #27354a;
  background: linear-gradient(135deg, #fff4f7, #e9f3ff);
}

body.admin-page .vf-video-deer > span,
body.admin-page .vf-video-deer > em {
  color: #26364e;
}

body.admin-page .vf-video-deer > em {
  border-top-color: rgba(38, 54, 78, 0.12);
}

body.admin-page .vf-deer-svg .deer-body,
body.admin-page .vf-deer-svg .deer-neck,
body.admin-page .vf-deer-svg .deer-head {
  fill: #d99a57;
}

body.admin-page .vf-deer-svg .deer-belly,
body.admin-page .vf-deer-svg .deer-muzzle {
  fill: #fff4df;
}

body.admin-page .vf-deer-svg .deer-ear {
  fill: #c77c43;
}

body.admin-page .vf-deer-svg .deer-tail {
  fill: #f5d0b0;
}

body.admin-page .vf-deer-svg .deer-antler,
body.admin-page .vf-deer-svg .deer-smile,
body.admin-page .vf-deer-svg .deer-leg,
body.admin-page .vf-deer-svg .deer-hoof,
body.admin-page .vf-deer-svg .deer-arm {
  fill: none;
  stroke: #7f5535;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.admin-page .vf-deer-svg .deer-leg,
body.admin-page .vf-deer-svg .deer-hoof,
body.admin-page .vf-deer-svg .deer-arm {
  stroke-width: 7;
}

body.admin-page .vf-deer-svg .deer-eye {
  fill: #172033;
}

body.admin-page .vf-deer-svg .deer-cheek {
  fill: #f3a1a1;
  opacity: 0.82;
}

body.admin-page .vf-deer-svg .deer-reel circle {
  fill: #f8fafc;
  stroke: #6b7fa3;
  stroke-width: 5;
}

body.admin-page .vf-deer-svg .deer-reel path {
  fill: #516179;
  stroke: #516179;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.admin-page .vf-artwork-tools {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
}

body.admin-page .vf-artwork-tools button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  font-weight: 950;
}

body.admin-page .vf-hotspot span {
  position: absolute;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1d82f3;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(29, 130, 243, 0.28);
  transform: translate(-50%, -50%);
}

body.admin-page .vf-gallery,
body.admin-page .vf-author {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body.admin-page .vf-author-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #52627a;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .vf-thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

body.admin-page .vf-thumb-grid figure {
  min-width: 0;
  margin: 0;
}

body.admin-page .vf-thumb-grid img,
body.admin-page .vf-thumb-grid i {
  width: 100%;
  aspect-ratio: 1.2;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  background: color-mix(in srgb, var(--module-soft) 78%, #f4e0c2);
}

body.admin-page .vf-thumb-grid figcaption {
  overflow: hidden;
  margin-top: 4px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b7b93;
  font-size: 11px;
  font-weight: 850;
}

body.admin-page .vf-image-compare i {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 50%;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--module-accent) 62%, #f97316);
}

body.admin-page .vf-image-compare b,
body.admin-page .vf-image-compare em {
  position: absolute;
  top: 12px;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #52627a;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .vf-image-compare b { left: 12px; }
body.admin-page .vf-image-compare em { right: 12px; }

body.admin-page .vf-memory {
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--module-soft) 50%, #fff8e7);
}

body.admin-page .visual-hint {
  position: absolute;
  inset: 20px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: color-mix(in srgb, var(--module-accent) 58%, #0f172a);
  font-weight: 950;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

body.admin-page .visual-press-reveal:active .visual-hint,
body.admin-page .visual-press-reveal:focus-within .visual-hint,
body.admin-page .visual-press-reveal.is-pressed .visual-hint {
  opacity: 0;
  transform: scale(0.94);
}

body.admin-page .visual-hint.two {
  inset: auto 16px 20px auto;
  width: 72px;
  height: 34px;
}

body.admin-page .visual-hint.three {
  inset: 18px auto auto 18px;
  width: 72px;
  height: 34px;
}

body.admin-page .visual-press-instruction {
  position: absolute;
  right: 10px;
  bottom: 9px;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.88);
  color: #5e6a7c;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .visual-press-reveal.is-pressed .visual-press-instruction {
  color: transparent;
}

body.admin-page .visual-press-reveal.is-pressed .visual-press-instruction::before {
  color: #5e6a7c;
  content: "纯图检索中";
}

body.admin-page .memory-palace-editor {
  display: grid;
  gap: 18px;
  padding: 2px;
}

body.admin-page .memory-palace-intro-card,
body.admin-page .memory-palace-preview-card,
body.admin-page .memory-palace-rules-card,
body.admin-page .memory-palace-upload-card {
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

body.admin-page .memory-palace-intro-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}

body.admin-page .memory-palace-intro-card div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.admin-page .memory-palace-intro-card span,
body.admin-page .memory-palace-upload-card span {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .memory-palace-intro-card strong {
  color: #12223a;
  font-size: 20px;
  font-weight: 950;
}

body.admin-page .memory-palace-intro-card p,
body.admin-page .memory-palace-upload-card p,
body.admin-page .memory-palace-rules-card span {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

body.admin-page .memory-palace-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.admin-page .memory-palace-upload-card {
  display: grid;
  gap: 13px;
  padding: 16px;
}

body.admin-page .memory-palace-upload-card.clean {
  background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

body.admin-page .memory-palace-upload-card.hint {
  background: linear-gradient(180deg, #ffffff, #fff6f8);
}

body.admin-page .memory-palace-upload-card strong {
  display: block;
  margin-top: 3px;
  color: #132238;
  font-size: 17px;
  font-weight: 950;
}

body.admin-page .memory-palace-upload-button {
  display: inline-grid;
  width: max-content;
  min-height: 36px;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 11px;
  padding: 0 14px;
  background: #fff;
  color: #2563eb;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

body.admin-page .memory-palace-upload-card.hint .memory-palace-upload-button {
  border-color: #ffe1ea;
  color: #db5272;
}

body.admin-page .memory-palace-upload-button input {
  display: none;
}

body.admin-page .memory-palace-upload-card em,
body.admin-page .memory-palace-upload-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

body.admin-page .memory-palace-preview-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

body.admin-page .memory-palace-preview-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
}

body.admin-page .memory-palace-preview-grid > div {
  display: grid;
  gap: 9px;
  min-width: 0;
}

body.admin-page .memory-palace-preview-grid b,
body.admin-page .memory-palace-rules-card strong {
  color: #132238;
  font-size: 14px;
  font-weight: 950;
}

body.admin-page .memory-palace-rules-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

body.admin-page .memory-palace-rules-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8fafc;
}

body.admin-page .memory-palace-rules-card b {
  color: #334155;
  font-size: 13px;
  font-weight: 950;
}

body.admin-page .vf-memory-palace {
  display: grid;
  padding: 12px;
  background: linear-gradient(180deg, #f7fbff, #fff8fa);
}

body.admin-page .memory-palace-image,
body.admin-page .memory-palace-empty {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  overflow: hidden;
  margin: 0;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #f8fbff;
}

body.admin-page .memory-palace-image.upload-preview,
body.admin-page .memory-palace-empty.upload-preview {
  min-height: 150px;
}

body.admin-page .memory-palace-image.portrait-frame,
body.admin-page .memory-palace-empty.portrait-frame {
  min-height: 280px;
  aspect-ratio: 9 / 14;
}

body.admin-page .memory-palace-image.landscape-frame,
body.admin-page .memory-palace-empty.landscape-frame {
  min-height: 190px;
  aspect-ratio: 16 / 9;
}

body.admin-page .memory-palace-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
}

body.admin-page .memory-palace-image figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.88);
  color: #475569;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .memory-palace-empty {
  gap: 5px;
  color: #64748b;
  text-align: center;
}

body.admin-page .memory-palace-empty span {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .memory-palace-empty strong {
  color: #334155;
  font-size: 15px;
  font-weight: 950;
}

body.admin-page .memory-palace-viewer,
body.student-page .memory-palace-viewer {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  user-select: none;
  touch-action: manipulation;
}

body.admin-page .memory-palace-stage,
body.student-page .memory-palace-stage {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 240px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fbff;
}

body.admin-page .memory-palace-viewer.compact .memory-palace-stage {
  min-height: 128px;
  border-radius: 14px;
}

body.admin-page .memory-palace-stage.landscape,
body.student-page .memory-palace-stage.landscape {
  aspect-ratio: 16 / 9;
}

body.admin-page .memory-palace-stage.portrait,
body.student-page .memory-palace-stage.portrait {
  aspect-ratio: 9 / 14;
}

body.admin-page .memory-palace-stage.square,
body.student-page .memory-palace-stage.square {
  aspect-ratio: 1 / 1;
}

body.admin-page .memory-palace-stage img,
body.student-page .memory-palace-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transition: opacity 0.16s ease;
}

body.admin-page .memory-palace-hint,
body.student-page .memory-palace-hint {
  opacity: 0;
}

body.admin-page .memory-palace-viewer.has-hint.is-pressed .memory-palace-clean,
body.student-page .memory-palace-viewer.has-hint.is-pressed .memory-palace-clean {
  opacity: 0;
}

body.admin-page .memory-palace-viewer.is-pressed .memory-palace-hint,
body.student-page .memory-palace-viewer.is-pressed .memory-palace-hint {
  opacity: 1;
}

body.admin-page .memory-palace-viewer p,
body.student-page .memory-palace-viewer p {
  margin: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

body.student-page .memory-palace-viewer.student {
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff, #fff8fa);
}

body.student-page .student-memory-palace-module {
  display: grid;
  gap: 10px;
}

body.student-page .memory-palace-open-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .memory-palace-open-actions button {
  min-height: 42px;
  border-radius: 13px !important;
  background: #fff !important;
  color: #25405f !important;
  font-size: 13px;
  font-weight: 900;
}

body.student-page .memory-palace-stage {
  min-height: 0;
  max-height: 62vh;
}

@keyframes visualSproutGrow {
  from { transform: scaleY(0.72); }
  to { transform: scaleY(1.08); }
}

@keyframes visualSproutLeaf {
  from { opacity: 0.72; transform: rotate(-25deg) scale(0.82); }
  to { opacity: 1; transform: rotate(-25deg) scale(1.08); }
}

body.admin-page .vf-flash,
body.admin-page .vf-link,
body.admin-page .vf-files,
body.admin-page .vf-quiz {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 16px;
}

body.admin-page .vf-flash {
  text-align: center;
  background: color-mix(in srgb, var(--module-soft) 55%, #fff7ed);
}

body.admin-page .vf-oral {
  display: grid;
  gap: 12px;
  place-items: center;
  padding: 16px;
}

body.admin-page .vf-oral button {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: color-mix(in srgb, var(--module-accent) 70%, #f97316);
  color: #fff;
  font-weight: 950;
}

body.admin-page .vf-quiz span {
  display: block;
  border: 1px solid #e2eaf5;
  border-radius: 10px;
  padding: 8px 10px;
  color: #52627a;
  background: #fff;
  font-size: 12px;
  font-weight: 850;
}

body.admin-page .vf-quiz span:first-child {
  border-color: color-mix(in srgb, var(--module-accent) 35%, #bbf7d0);
  background: color-mix(in srgb, var(--module-soft) 72%, #f0fdf4);
}

body.admin-page .vf-link {
  background: color-mix(in srgb, var(--module-soft) 55%, #ecfeff);
}

body.admin-page .vf-link b {
  color: color-mix(in srgb, var(--module-accent) 60%, #0f172a);
}

body.admin-page .vf-files span {
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.82);
  color: #52627a;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1290px) {
  body.admin-page .knowledge-module-list {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  }

  body.admin-page .visual-card-head {
    grid-template-columns: 20px 30px 44px minmax(0, 1fr) auto;
  }

  body.admin-page .visual-status {
    display: none;
  }
}

/* v15.13: teacher console polish.
   Keep existing product logic intact while making the admin workspace calmer,
   denser, and usable in narrow Codex/browser panes. */
body.admin-page {
  --teacher-bg: #f4f7fb;
  --teacher-surface: rgba(255, 255, 255, 0.94);
  --teacher-surface-solid: #ffffff;
  --teacher-border: #dbe5f0;
  --teacher-border-strong: #c8d7e8;
  --teacher-text: #102033;
  --teacher-muted: #607086;
  --teacher-soft-blue: #eaf4ff;
  --teacher-blue: #1683f7;
  --teacher-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
  --teacher-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
  background:
    radial-gradient(circle at 18% 0%, rgba(220, 237, 255, 0.66), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, var(--teacher-bg) 48%, #eef3f9 100%);
  color: var(--teacher-text);
}

body.admin-page .app-shell {
  min-height: 100vh;
  background: transparent !important;
}

body.admin-page .topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(203, 216, 232, 0.86);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

body.admin-page .brand-lockup {
  min-width: 170px;
}

body.admin-page .brand-lockup::after {
  display: none !important;
}

body.admin-page .brand-lockup img,
body.admin-page .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(22, 131, 247, 0.12);
}

body.admin-page .brand-lockup h1 {
  font-size: 15px !important;
  letter-spacing: 0;
  color: #0f1f33;
}

body.admin-page .brand-lockup .eyebrow,
body.admin-page .admin-breadcrumb,
body.admin-page .panel-heading p,
body.admin-page .knowledge-card-head span,
body.admin-page .knowledge-hero-line,
body.admin-page label,
body.admin-page .module-palette-item em {
  color: var(--teacher-muted);
}

body.admin-page .admin-breadcrumb {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 850;
}

body.admin-page .player-actions {
  gap: 8px;
  align-items: center;
}

body.admin-page .player-actions button,
body.admin-page .player-actions .compact-link,
body.admin-page .version-pill,
body.admin-page .admin-user-chip,
body.admin-page button.secondary,
body.admin-page button.primary,
body.admin-page .compact-link {
  min-height: 38px;
  border-radius: 12px !important;
  font-weight: 900;
}

body.admin-page button.primary,
body.admin-page .primary {
  background: linear-gradient(180deg, #2491ff, #0f75e3) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(22, 131, 247, 0.24);
}

body.admin-page button.secondary,
body.admin-page .secondary,
body.admin-page .compact-link:not(.primary) {
  border-color: var(--teacher-border) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #17304b !important;
}

body.admin-page button:hover,
body.admin-page .compact-link:hover {
  transform: translateY(-1px);
}

body.admin-page #adminLoginPanel {
  width: min(520px, calc(100vw - 32px));
  margin: 54px auto 0;
  padding: 26px;
  border: 1px solid var(--teacher-border);
  border-radius: 22px;
  background: var(--teacher-surface);
  box-shadow: var(--teacher-shadow);
}

body.admin-page #adminLoginPanel label,
body.admin-page #adminLoginPanel input {
  width: 100%;
}

body.admin-page .admin-dashboard {
  gap: 0;
}

body.admin-page .admin-command-center {
  border-right: 1px solid rgba(203, 216, 232, 0.82);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.04);
}

body.admin-page .admin-side-menu {
  gap: 5px;
}

body.admin-page .admin-side-menu strong {
  margin-top: 18px;
  color: #132235;
  font-size: 12px;
  letter-spacing: 0;
}

body.admin-page .admin-side-menu button {
  min-height: 42px;
  border-radius: 12px;
  color: #41516a;
  font-weight: 850;
}

body.admin-page .admin-side-menu button.active {
  border-color: rgba(22, 131, 247, 0.34);
  background: linear-gradient(180deg, #eef7ff, #e5f1ff);
  color: #0f68c7;
  box-shadow: inset 3px 0 0 #1683f7;
}

body.admin-page .module-panel,
body.admin-page .knowledge-card,
body.admin-page .knowledge-side-course-card,
body.admin-page .knowledge-module-card,
body.admin-page .module-palette-item {
  border-color: var(--teacher-border) !important;
  border-radius: 16px !important;
  background-color: var(--teacher-surface-solid) !important;
  box-shadow: var(--teacher-shadow-soft);
}

body.admin-page .module-panel.knowledge-preview-panel {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-preview-panel > .panel-heading {
  margin: 12px 14px 0;
  border: 1px solid var(--teacher-border);
  border-radius: 18px;
  background: var(--teacher-surface);
  box-shadow: var(--teacher-shadow-soft);
}

body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
body.admin-page .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns: minmax(260px, 292px) 8px minmax(0, 1fr) minmax(238px, 286px) !important;
  gap: 12px !important;
  min-height: calc(100vh - 78px);
  max-height: calc(100vh - 78px);
  padding: 12px 14px 14px !important;
  overflow: hidden;
  background: transparent !important;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-main,
body.admin-page .knowledge-right-rail {
  min-width: 0;
  height: auto !important;
  max-height: calc(100vh - 104px);
  overflow: auto;
  border: 1px solid var(--teacher-border) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: var(--teacher-shadow-soft);
}

body.admin-page .knowledge-sidebar {
  padding: 12px !important;
}

body.admin-page .knowledge-main {
  padding: 12px !important;
}

body.admin-page .knowledge-right-rail {
  padding: 12px !important;
}

body.admin-page .knowledge-course-hero {
  border: 1px solid var(--teacher-border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(235, 246, 255, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: var(--teacher-shadow-soft);
}

body.admin-page .knowledge-card {
  padding: 14px !important;
}

body.admin-page input,
body.admin-page textarea,
body.admin-page select {
  border-color: var(--teacher-border) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: #132235;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body.admin-page input:focus,
body.admin-page textarea:focus,
body.admin-page select:focus {
  border-color: rgba(22, 131, 247, 0.62) !important;
  box-shadow: 0 0 0 4px rgba(22, 131, 247, 0.12) !important;
  outline: none;
}

body.admin-page .knowledge-list button,
body.admin-page [data-kp-topic],
body.admin-page [data-kp-subject],
body.admin-page [data-kp-chapter] {
  border-radius: 13px !important;
}

body.admin-page .knowledge-list button.active,
body.admin-page [data-kp-topic].active,
body.admin-page [data-kp-subject].active,
body.admin-page [data-kp-chapter].active {
  border-color: rgba(22, 131, 247, 0.55) !important;
  background: linear-gradient(180deg, #eef7ff, #eaf4ff) !important;
  box-shadow: inset 4px 0 0 #1683f7, 0 10px 22px rgba(22, 131, 247, 0.08);
}

body.admin-page .module-category-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid #e3ebf5;
  border-radius: 14px;
  background: #f8fbff;
}

body.admin-page .module-category-tabs button {
  min-height: 34px;
  border-radius: 10px;
}

body.admin-page .module-category-tabs button.active {
  background: #fff !important;
  color: #0f68c7 !important;
  box-shadow: 0 8px 18px rgba(22, 131, 247, 0.1);
}

body.admin-page .module-add-row {
  gap: 8px;
}

body.admin-page .module-palette {
  gap: 10px;
}

body.admin-page .module-palette-item {
  min-height: 84px;
  padding: 12px !important;
}

body.admin-page .knowledge-module-list {
  gap: 12px !important;
}

body.admin-page .module-editor-topbar,
body.admin-page .module-suite-workspace > section,
body.admin-page .module-suite-main,
body.admin-page .memory-palace-intro-card,
body.admin-page .memory-palace-preview-card,
body.admin-page .memory-palace-rules-card,
body.admin-page .memory-palace-upload-card {
  border-color: var(--teacher-border) !important;
  box-shadow: var(--teacher-shadow-soft);
}

@media (min-width: 1500px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: minmax(300px, 340px) 8px minmax(0, 1fr) minmax(260px, 320px) !important;
  }
}

@media (max-width: 1280px) {
  body.admin-page .admin-command-center {
    width: 172px;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: minmax(250px, 310px) 8px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-main {
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.admin-page #knowledgePreviewPanel.active .right-rail-toggle {
    display: none !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail,
  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px 0 0 !important;
    padding: 12px !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 860px) {
  body.admin-page .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    height: auto !important;
    min-height: 156px !important;
    gap: 8px;
    padding: 8px 10px;
  }

  body.admin-page .brand-lockup {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-right: 0 !important;
  }

  body.admin-page .topbar-menu-button {
    position: static !important;
    width: 40px;
    height: 40px;
    justify-self: end;
  }

  body.admin-page .admin-breadcrumb {
    display: none;
  }

  body.admin-page .player-actions {
    position: static !important;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 !important;
  }

  body.admin-page .player-actions button,
  body.admin-page .player-actions .compact-link,
  body.admin-page .version-pill,
  body.admin-page .admin-user-chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.admin-page .admin-dashboard {
    display: block !important;
  }

  body.admin-page .admin-command-center {
    position: static !important;
    width: auto !important;
    margin: 8px 10px;
    border: 1px solid var(--teacher-border);
    border-radius: 18px;
  }

  body.admin-page .admin-side-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .admin-side-menu strong {
    grid-column: 1 / -1;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page .knowledge-preview-shell {
    display: block !important;
    min-height: auto;
    max-height: none;
    padding: 10px !important;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-main,
  body.admin-page .knowledge-right-rail {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    overflow: visible;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
  body.admin-page #knowledgePreviewPanel.active .knowledge-main,
  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 12px !important;
    overflow: visible !important;
  }

  body.admin-page #knowledgePreviewPanel.active .right-rail-toggle,
  body.admin-page .knowledge-right-rail {
    display: none !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail,
  body.admin-page .knowledge-right-rail {
    display: grid !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 520px) {
  body.admin-page .brand-lockup {
    min-width: 0;
  }

  body.admin-page .brand-lockup h1 {
    font-size: 14px !important;
  }

  body.admin-page .player-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page #adminLoginPanel {
    margin-top: 22px;
    padding: 20px;
    border-radius: 18px;
  }

  body.admin-page .module-add-row {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .memory-palace-upload-grid,
  body.admin-page .memory-palace-preview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v15.15: mobile student app and art-history admin redesign.
   Visual-only layer over the existing data, upload, save and publish logic. */
body.student-page {
  --student-bg: #f4f8ff;
  --student-surface: #ffffff;
  --student-card: rgba(255, 255, 255, 0.94);
  --student-line: #e5edf7;
  --student-text: #122238;
  --student-muted: #7b8aa0;
  --student-blue: #1677ff;
  --student-blue-dark: #0f63d7;
  --student-green: #2ccf88;
  --student-orange: #ff9f43;
  --student-red: #ff6b6b;
  --student-shadow: 0 18px 46px rgba(33, 76, 128, 0.12);
  min-height: 100vh;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 44%, #f6f9fe 100%) !important;
  color: var(--student-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans SC", "Segoe UI", sans-serif !important;
}

body.student-page .app-shell {
  width: min(430px, 100vw) !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 0 14px 112px !important;
  background: rgba(255, 255, 255, 0.28);
}

body.student-page .topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px !important;
  min-height: 78px;
  margin: 0 -14px 12px !important;
  padding: 12px 16px 10px !important;
  border: 0 !important;
  background: rgba(248, 251, 255, 0.86) !important;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(45, 78, 118, 0.08);
}

body.student-page .topbar::before {
  content: "9:41";
  grid-column: 1 / -1;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .brand-lockup {
  min-width: 0 !important;
  gap: 10px !important;
}

body.student-page .brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid #fff;
  box-shadow: 0 10px 24px rgba(22, 119, 255, 0.16);
}

body.student-page .eyebrow {
  margin: 0 0 2px !important;
  color: #7b8aa0 !important;
  font-size: 11px !important;
  font-weight: 800;
}

body.student-page h1 {
  color: var(--student-text) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 900;
  line-height: 1.2;
}

body.student-page .player-actions {
  display: flex !important;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

body.student-page .version-pill,
body.student-page .network-pill,
body.student-page .account-pill,
body.student-page .student-admin-link {
  min-height: 28px !important;
  padding: 6px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #edf5ff !important;
  color: #1677ff !important;
  font-size: 11px !important;
  font-weight: 900;
  box-shadow: none !important;
}

body.student-page .student-admin-link,
body.student-page .network-pill {
  display: none !important;
}

body.student-page .panel,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .event-card,
body.student-page .student-module-card,
body.student-page .student-chapter-card,
body.student-page .knowledge-detail-top,
body.student-page .quiz-modal-card,
body.student-page .student-assistant-sheet {
  border: 1px solid var(--student-line) !important;
  border-radius: 18px !important;
  background: var(--student-card) !important;
  color: var(--student-text) !important;
  box-shadow: var(--student-shadow) !important;
}

body.student-page .panel::before,
body.student-page .course-card::before,
body.student-page .course-card::after {
  display: none !important;
}

body.student-page #loginPanel {
  margin-top: 20px;
  padding: 22px !important;
}

body.student-page .student-workspace {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.student-page .main-column,
body.student-page .student-main {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  min-width: 0;
}

body.student-page .panel {
  padding: 16px !important;
}

body.student-page .panel-heading {
  margin-bottom: 14px !important;
}

body.student-page .panel-heading h2 {
  color: var(--student-text) !important;
  font-size: 18px !important;
  font-weight: 950;
}

body.student-page .panel-heading p,
body.student-page label,
body.student-page .event-card span,
body.student-page .course-card small,
body.student-page .lesson-card span,
body.student-page .student-module-head span {
  color: var(--student-muted) !important;
}

body.student-page input,
body.student-page select,
body.student-page textarea {
  min-height: 44px;
  border: 1px solid var(--student-line) !important;
  border-radius: 12px !important;
  background: #f7f9fc !important;
  color: var(--student-text) !important;
  box-shadow: none !important;
}

body.student-page input:focus,
body.student-page select:focus,
body.student-page textarea:focus {
  border-color: rgba(22, 119, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.1) !important;
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button,
body.student-page .compact-link {
  min-height: 42px;
  border-radius: 13px !important;
  font-weight: 900 !important;
}

body.student-page .primary {
  background: linear-gradient(180deg, #1f8bff, #1677ff) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(22, 119, 255, 0.26) !important;
}

body.student-page .secondary,
body.student-page .link-button {
  border: 1px solid var(--student-line) !important;
  background: #fff !important;
  color: #31506f !important;
}

body.student-page .learning-panel {
  overflow: hidden;
  border: 0 !important;
  background: linear-gradient(180deg, #1683ff, #0967e8) !important;
  color: #fff !important;
}

body.student-page .learning-panel .panel-heading h2,
body.student-page .learning-panel .panel-heading p,
body.student-page .learning-panel .section-mini-heading,
body.student-page .learning-panel .section-mini-heading span {
  color: #fff !important;
}

body.student-page .learning-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.student-page .learning-stat {
  border: 0 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.student-page .learning-stat strong,
body.student-page .learning-stat span {
  color: #fff !important;
}

body.student-page .course-list,
body.student-page .lesson-list,
body.student-page .student-topic-list,
body.student-page .student-module-list,
body.student-page .review-list,
body.student-page .progress-course-list,
body.student-page .watch-history-list {
  display: grid;
  gap: 12px !important;
}

body.student-page .course-card {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 10px !important;
  text-align: left;
}

body.student-page .course-card.active {
  border-color: rgba(22, 119, 255, 0.42) !important;
  background: #f7fbff !important;
}

body.student-page .course-thumb {
  display: grid;
  place-items: center;
  width: 86px;
  min-height: 82px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(22, 119, 255, 0.16), rgba(44, 207, 136, 0.14)),
    #eef6ff;
  background-position: center;
  background-size: cover;
}

body.student-page .course-thumb.has-image span {
  display: none;
}

body.student-page .course-thumb span {
  color: var(--student-blue);
  font-size: 24px;
  font-weight: 950;
}

body.student-page .course-card-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.student-page .course-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.student-page .course-card strong,
body.student-page .lesson-card strong {
  color: var(--student-text) !important;
  font-size: 15px !important;
  line-height: 1.25;
}

body.student-page .course-card em,
body.student-page .lesson-quiz-pill,
body.student-page .status-mastered,
body.student-page .status-review,
body.student-page .status-unmarked,
body.student-page .knowledge-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e9fbf3;
  color: #16a56b !important;
  font-size: 11px !important;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

body.student-page .status-review,
body.student-page .knowledge-status-pill.status-review {
  background: #fff3e7;
  color: #e97816 !important;
}

body.student-page .status-unmarked,
body.student-page .knowledge-status-pill.status-unmarked {
  background: #f2f4f7;
  color: #8a98aa !important;
}

body.student-page .mini-progress,
body.student-page .resume-card i,
body.student-page .knowledge-progress-card i {
  height: 5px !important;
  border-radius: 999px !important;
  background: #e9eef6 !important;
}

body.student-page .mini-progress span,
body.student-page .resume-card i b,
body.student-page .knowledge-progress-card i b {
  background: linear-gradient(90deg, #1677ff, #2ccf88) !important;
}

body.student-page .lesson-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px !important;
}

body.student-page .lesson-card.completed {
  border-color: rgba(44, 207, 136, 0.32) !important;
}

body.student-page .knowledge-study-panel {
  padding: 0 !important;
  overflow: hidden;
}

body.student-page .knowledge-study-panel > .panel-heading {
  padding: 16px 16px 0;
}

body.student-page .knowledge-progress-card {
  margin: 0 16px 12px;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f7fbff !important;
  box-shadow: none !important;
}

body.student-page .student-knowledge-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.student-page .student-chapter-list {
  display: grid;
  gap: 10px;
  max-height: none !important;
  padding: 0 16px 14px !important;
  overflow: visible !important;
}

body.student-page .student-chapter-card {
  padding: 10px !important;
  box-shadow: none !important;
}

body.student-page .student-chapter-title {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  background: #f8fbff !important;
  color: var(--student-text) !important;
}

body.student-page .student-topic-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--student-text) !important;
  box-shadow: inset 0 0 0 1px #edf2f8;
}

body.student-page .student-topic-list button.active {
  background: #eef7ff !important;
  box-shadow: inset 3px 0 0 var(--student-blue), inset 0 0 0 1px #cfe5ff;
}

body.student-page .student-knowledge-detail {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0 16px 16px !important;
}

body.student-page .knowledge-detail-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 16px !important;
}

body.student-page .knowledge-detail-top h3 {
  margin: 4px 0;
  color: var(--student-text) !important;
  font-size: 22px !important;
  font-weight: 950;
}

body.student-page .knowledge-detail-top small {
  color: var(--student-muted);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .knowledge-status-actions {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .student-module-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--student-line);
}

body.student-page .student-module-tabs span {
  padding: 12px 4px;
  color: #7b8aa0;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

body.student-page .student-module-tabs span.active {
  color: var(--student-blue);
  box-shadow: inset 0 -2px 0 var(--student-blue);
}

body.student-page .student-module-card {
  padding: 14px !important;
}

body.student-page .student-module-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

body.student-page .student-module-head strong {
  color: var(--student-text);
  font-size: 16px;
}

body.student-page .student-module-image,
body.student-page .student-gallery-stage,
body.student-page .memory-palace-stage,
body.student-page .student-hotspot-stage {
  overflow: hidden;
  border-radius: 16px !important;
  background: #f4f7fb !important;
}

body.student-page .student-module-image img,
body.student-page .student-gallery-stage img,
body.student-page .memory-palace-stage img,
body.student-page .student-hotspot-stage img {
  width: 100%;
  height: auto;
  object-fit: contain !important;
}

body.student-page .student-module-quiz-form {
  display: grid;
  gap: 12px;
}

body.student-page .student-module-quiz-option,
body.student-page .quiz-question-option {
  min-height: 48px;
  border: 1px solid var(--student-line) !important;
  border-radius: 13px !important;
  background: #fff !important;
}

body.student-page .mobile-study-nav {
  position: fixed !important;
  left: 50%;
  right: auto !important;
  bottom: 12px !important;
  z-index: 70;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(398px, calc(100vw - 24px)) !important;
  min-height: 64px;
  padding: 8px !important;
  transform: translateX(-50%);
  border: 1px solid rgba(220, 231, 245, 0.96);
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 42px rgba(25, 61, 99, 0.18) !important;
  backdrop-filter: blur(18px);
}

body.student-page .mobile-study-nav button {
  min-height: 46px !important;
  border-radius: 15px !important;
  background: transparent !important;
  color: #7b8aa0 !important;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .mobile-study-nav button.active {
  background: #edf6ff !important;
  color: var(--student-blue) !important;
}

body.student-page .output-quiz-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--student-line);
  border-radius: 18px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(33, 76, 128, 0.08);
}

body.student-page .output-quiz-section {
  display: grid;
  gap: 10px;
}

body.student-page .output-quiz-section h3 {
  margin: 0;
  color: var(--student-ink);
  font-size: 15px;
  font-weight: 950;
}

body.student-page .output-quiz-section.attempted .output-quiz-card {
  background: linear-gradient(135deg, #fff6eb, #f8eff5);
}

body.student-page .output-quiz-section.pending .output-quiz-card {
  background: linear-gradient(135deg, #f3f8ff, #fffaf0);
}

body.student-page .output-quiz-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #8a6b78;
  font-size: 12px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(224, 192, 171, 0.5);
}

body.student-page .output-quiz-card.active {
  border-color: rgba(22, 119, 255, 0.38);
  background: #f8fbff;
}

body.student-page .output-quiz-trigger {
  width: 100%;
  text-align: left;
}

body.student-page .output-quiz-trigger em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 4px 10px;
  background: #eaf4ff;
  color: var(--student-blue);
  font-style: normal;
  font-weight: 950;
}

body.student-page .output-empty-card {
  gap: 8px;
}

body.student-page .output-launch-button {
  grid-column: 1 / -1;
}

body.student-page .plan-progress-breakdown,
body.student-page .plan-progress-grid,
body.student-page .plan-progress-grid article {
  display: grid;
  gap: 12px;
}

body.student-page .plan-progress-grid article {
  border: 1px solid var(--student-line);
  border-radius: 18px;
  padding: 12px;
  background: #fff;
}

body.student-page .plan-progress-grid h3 {
  margin: 0;
  color: var(--student-text);
  font-size: 15px;
  font-weight: 950;
}

body.student-page .plan-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

body.student-page .plan-progress-row strong {
  display: block;
  color: var(--student-text);
  font-size: 13px;
}

body.student-page .plan-progress-row span {
  display: block;
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 800;
}

body.student-page .plan-progress-row em {
  color: var(--student-blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

body.student-page .plan-progress-row i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef6;
}

body.student-page .plan-progress-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1677ff, #2ccf88);
}

body.student-page .mobile-mini-player {
  left: 50% !important;
  bottom: 88px !important;
  width: min(398px, calc(100vw - 24px)) !important;
  transform: translateX(-50%);
  border-radius: 18px !important;
  background: rgba(18, 34, 56, 0.94) !important;
  box-shadow: 0 18px 42px rgba(18, 34, 56, 0.22) !important;
}

body.student-page .image-viewer,
body.student-page .student-gallery-viewer {
  background: #05070a !important;
}

body.student-page .image-viewer {
  overscroll-behavior: contain !important;
  touch-action: none !important;
}

body.student-page .image-viewer img {
  user-select: none !important;
  touch-action: none !important;
  will-change: transform;
  transform-origin: center center;
}

@media (min-width: 760px) {
  body.student-page .app-shell {
    margin-top: 24px !important;
    border: 1px solid rgba(219, 231, 245, 0.92);
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(26, 61, 102, 0.16);
  }
}

body.admin-page {
  --admin-bg: #f5f7fb;
  --admin-surface: #ffffff;
  --admin-line: #e5ebf3;
  --admin-text: #122238;
  --admin-muted: #718096;
  --admin-blue: #1677ff;
  --admin-blue-soft: #eaf4ff;
  --admin-green: #24c37a;
  --admin-orange: #ff9f43;
  --admin-shadow: 0 14px 36px rgba(32, 54, 87, 0.08);
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans SC", "Segoe UI", sans-serif !important;
}

body.admin-page .app-shell {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

body.admin-page .topbar {
  display: grid !important;
  grid-template-columns: 180px 40px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 4px 18px rgba(32, 54, 87, 0.06) !important;
}

body.admin-page .brand-lockup {
  min-width: 0 !important;
  height: 58px;
  gap: 10px;
}

body.admin-page .brand-mark {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #1677ff;
}

body.admin-page .brand-lockup .eyebrow {
  display: none;
}

body.admin-page .brand-lockup h1 {
  color: var(--admin-text) !important;
  font-size: 16px !important;
  font-weight: 950;
}

body.admin-page .topbar-menu-button {
  display: grid !important;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #667085 !important;
}

body.admin-page .admin-breadcrumb {
  color: #667085 !important;
  font-size: 13px;
  font-weight: 800;
}

body.admin-page .player-actions {
  gap: 10px !important;
}

body.admin-page .version-pill {
  display: none !important;
}

body.admin-page .player-actions button,
body.admin-page .player-actions .compact-link,
body.admin-page .admin-user-chip,
body.admin-page button.primary,
body.admin-page button.secondary,
body.admin-page .compact-link {
  min-height: 36px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.admin-page button.primary,
body.admin-page .primary {
  background: #1677ff !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(22, 119, 255, 0.22) !important;
}

body.admin-page button.secondary,
body.admin-page .secondary,
body.admin-page .compact-link:not(.primary) {
  border: 1px solid var(--admin-line) !important;
  background: #fff !important;
  color: #26384d !important;
  box-shadow: none !important;
}

body.admin-page .admin-dashboard {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: calc(100vh - 58px);
  gap: 0 !important;
}

body.admin-page .admin-command-center {
  position: sticky !important;
  top: 58px;
  align-self: start;
  width: 190px !important;
  height: calc(100vh - 58px);
  padding: 20px 16px !important;
  overflow: auto;
  border-right: 1px solid var(--admin-line) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.admin-page .command-copy,
body.admin-page .dashboard-stat-grid,
body.admin-page .module-grid,
body.admin-page .nested-nav {
  display: none !important;
}

body.admin-page .admin-side-menu {
  display: grid;
  gap: 8px !important;
}

body.admin-page .admin-side-menu strong {
  margin: 18px 0 4px !important;
  color: #101828 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

body.admin-page .admin-side-menu button {
  justify-content: flex-start;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #667085 !important;
  font-weight: 850 !important;
  text-align: left;
  box-shadow: none !important;
}

body.admin-page .admin-side-menu button.active {
  background: var(--admin-blue-soft) !important;
  color: var(--admin-blue) !important;
  box-shadow: none !important;
}

body.admin-page .admin-side-menu button::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border-radius: 5px;
  background: currentColor;
  opacity: 0.16;
}

body.admin-page .admin-collapse-button {
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: #667085 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .module-panel.knowledge-preview-panel {
  padding: 0 !important;
  background: transparent !important;
}

body.admin-page .knowledge-preview-panel > .panel-heading {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
body.admin-page .knowledge-preview-shell {
  grid-template-columns: 250px 0 minmax(560px, 1fr) 310px !important;
  gap: 16px !important;
  min-height: calc(100vh - 58px) !important;
  max-height: calc(100vh - 58px) !important;
  padding: 14px 14px 14px 16px !important;
  overflow: hidden !important;
}

body.admin-page .knowledge-column-splitter {
  display: none !important;
}

body.admin-page .knowledge-sidebar,
body.admin-page .knowledge-main,
body.admin-page .knowledge-right-rail {
  height: calc(100vh - 86px) !important;
  max-height: calc(100vh - 86px) !important;
  overflow: auto !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--admin-surface) !important;
  box-shadow: var(--admin-shadow) !important;
}

body.admin-page .knowledge-sidebar {
  padding: 16px !important;
}

body.admin-page .knowledge-main {
  padding: 18px !important;
}

body.admin-page .knowledge-right-rail {
  padding: 14px !important;
}

body.admin-page .knowledge-side-course-card {
  min-height: 74px;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fbff !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-side-course-card img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

body.admin-page .knowledge-search-field,
body.admin-page .knowledge-manual-field,
body.admin-page .knowledge-bulk-import,
body.admin-page .knowledge-create-row {
  margin-top: 12px;
}

body.admin-page input,
body.admin-page textarea,
body.admin-page select {
  min-height: 40px;
  border: 1px solid var(--admin-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--admin-text) !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-create-row button[data-kp-add-chapter] {
  background: var(--admin-blue) !important;
  color: #fff !important;
}

body.admin-page .knowledge-list {
  display: grid;
  gap: 6px !important;
  margin-top: 14px;
}

body.admin-page .knowledge-list button,
body.admin-page [data-kp-topic],
body.admin-page [data-kp-subject],
body.admin-page [data-kp-chapter] {
  min-height: 38px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #344054 !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-list button.active,
body.admin-page [data-kp-topic].active,
body.admin-page [data-kp-subject].active,
body.admin-page [data-kp-chapter].active {
  background: var(--admin-blue-soft) !important;
  color: var(--admin-blue) !important;
  box-shadow: inset 3px 0 0 var(--admin-blue) !important;
}

body.admin-page .knowledge-side-progress {
  border-radius: 10px !important;
  background: #f7fbff !important;
}

body.admin-page .knowledge-course-hero {
  padding: 18px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-course-hero::before {
  content: "编辑知识点";
  display: block;
  margin-bottom: 16px;
  color: #101828;
  font-size: 18px;
  font-weight: 950;
}

body.admin-page .knowledge-hero-line span {
  color: #667085;
}

body.admin-page .knowledge-hero-line em {
  border-radius: 999px;
  padding: 4px 8px;
  background: #ecfdf3;
  color: #12a064;
  font-style: normal;
  font-weight: 900;
}

body.admin-page .knowledge-hero-stats span {
  border-radius: 10px;
  background: #f8fbff;
}

body.admin-page .knowledge-flow-tabs {
  display: flex;
  gap: 10px;
  margin: 12px 0;
  padding: 4px;
  border-radius: 10px;
  background: #f7f9fc;
}

body.admin-page .knowledge-flow-tabs button {
  min-height: 34px;
  border-radius: 8px;
  color: #667085;
  background: transparent;
}

body.admin-page .knowledge-flow-tabs button.active {
  color: var(--admin-blue);
  background: #fff;
  box-shadow: 0 6px 16px rgba(32, 54, 87, 0.08);
}

body.admin-page .knowledge-top-grid,
body.admin-page .knowledge-work-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.admin-page .knowledge-card,
body.admin-page .knowledge-module-card,
body.admin-page .module-palette-item,
body.admin-page .quiz-workbench-card {
  border: 1px solid var(--admin-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.admin-page .knowledge-card {
  padding: 16px !important;
}

body.admin-page .knowledge-card-head strong,
body.admin-page .module-section-title strong {
  color: #101828;
  font-size: 16px;
  font-weight: 950;
}

body.admin-page .knowledge-editor-panel {
  border: 0 !important;
  background: transparent !important;
}

body.admin-page .knowledge-edit-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 180px 180px;
  gap: 14px !important;
}

body.admin-page .knowledge-module-list {
  display: grid;
  gap: 12px !important;
}

body.admin-page .knowledge-module-card {
  padding: 14px !important;
  border-radius: 10px !important;
}

body.admin-page .knowledge-module-card::before {
  opacity: 0 !important;
}

body.admin-page .knowledge-module-card .module-card-head,
body.admin-page .module-section-title {
  align-items: center;
}

body.admin-page .add-module-inline {
  min-height: 42px !important;
  border: 1px dashed #b9d9ff !important;
  border-radius: 8px !important;
  background: #f8fbff !important;
  color: var(--admin-blue) !important;
  font-weight: 950;
}

body.admin-page .action-rail-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .action-rail-buttons .primary {
  grid-column: 1 / -1;
}

body.admin-page .module-category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.admin-page .module-category-tabs button {
  min-height: 38px;
  border-radius: 0 !important;
  color: #667085 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page .module-category-tabs button.active {
  color: var(--admin-blue) !important;
  box-shadow: inset 0 -2px 0 var(--admin-blue) !important;
}

body.admin-page .module-add-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: 12px;
}

body.admin-page .module-palette {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px !important;
}

body.admin-page .module-palette-item {
  display: grid !important;
  place-items: center;
  min-height: 58px !important;
  padding: 8px !important;
  text-align: center;
}

body.admin-page .module-palette-item span {
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.admin-page .setting-card .tag-cloud span {
  border-radius: 999px !important;
  background: #f2f4f7 !important;
  color: #52657a !important;
}

body.admin-page .data-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

body.admin-page .data-grid span {
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  padding: 10px;
  background: #fbfdff;
}

body.student-page #installBanner {
  display: none !important;
}

/* v15.15: subject-first knowledge workflow. */
body.admin-page .admin-side-menu button[data-admin-target="course"] {
  color: #667085 !important;
}

body.admin-page .knowledge-flow-builder {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #dbe8f7;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
  box-shadow: 0 12px 28px rgba(38, 89, 143, 0.08);
}

body.admin-page .knowledge-flow-current {
  display: grid;
  gap: 4px;
}

body.admin-page .knowledge-flow-current span {
  color: #1677ff;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .knowledge-flow-current strong {
  color: #102033;
  font-size: 17px;
  font-weight: 1000;
}

body.admin-page .knowledge-flow-current em {
  color: #667085;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
}

body.admin-page .knowledge-primary-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
}

body.admin-page .knowledge-primary-create input {
  min-width: 0;
}

body.admin-page .knowledge-primary-create .primary {
  white-space: nowrap;
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.22) !important;
}

body.admin-page .knowledge-context-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .knowledge-context-actions button {
  min-height: 34px;
  padding-inline: 8px !important;
  font-size: 12px !important;
}

body.admin-page .knowledge-sidebar > .knowledge-create-row {
  display: none !important;
}

body.admin-page .knowledge-recovery-dock {
  margin-top: 10px;
  border: 1px solid #dbe8f7;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

body.admin-page .knowledge-recovery-dock summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  color: #102033;
  cursor: pointer;
  font-size: 13px;
  font-weight: 1000;
}

body.admin-page .knowledge-recovery-dock summary span {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eef6ff;
  color: #1677ff;
  font-size: 12px;
}

body.admin-page .knowledge-recovery-list {
  display: grid;
  gap: 8px;
  padding: 0 10px 10px;
}

body.admin-page .knowledge-recovery-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: #fbfdff;
}

body.admin-page .knowledge-recovery-item div {
  min-width: 0;
}

body.admin-page .knowledge-recovery-item strong {
  display: block;
  overflow: hidden;
  color: #102033;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .knowledge-recovery-item span,
body.admin-page .knowledge-recovery-empty {
  color: #667085;
  font-size: 11px;
}

@media (max-width: 1280px) {
  body.admin-page .admin-dashboard {
    grid-template-columns: 172px minmax(0, 1fr);
  }

  body.admin-page .admin-command-center {
    width: 172px !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page .knowledge-preview-shell {
    grid-template-columns: 250px 0 minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: auto !important;
    max-height: none !important;
  }
}

@media (max-width: 860px) {
  body.admin-page .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: auto !important;
    padding: 10px !important;
  }

  body.admin-page .admin-dashboard {
    display: block !important;
  }

  body.admin-page .admin-command-center {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 10px !important;
    border: 1px solid var(--admin-line) !important;
    border-radius: 14px !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell,
  body.admin-page .knowledge-preview-shell {
    display: block !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 10px !important;
  }

  body.admin-page .knowledge-sidebar,
  body.admin-page .knowledge-main,
  body.admin-page .knowledge-right-rail {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 12px !important;
  }

  body.admin-page .knowledge-edit-row {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .module-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.admin-page #adminLoginPanel.hidden,
body.admin-page #adminWorkspace.hidden {
  display: none !important;
}

/* v15.15 hotfix: keep module palette readable inside the narrow knowledge rail. */
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-group,
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-group > div {
  min-width: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-group > div {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  gap: 8px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-icon {
  grid-row: 1 / span 2;
  margin: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-item span {
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-item em {
  display: none !important;
}

@media (max-width: 860px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette {
    grid-template-columns: 1fr !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-group > div {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
}

/* v15.16: teacher UI stability layer.
   Keep the knowledge builder as left catalog, center editor, right actions/modules. */
body.admin-page {
  --teacher-topbar-height: 58px;
  --teacher-side-width: 188px;
  --teacher-panel-gap: 14px;
  --knowledge-tree-stable-width: clamp(268px, 22vw, 320px);
  --knowledge-rail-stable-width: clamp(286px, 22vw, 330px);
}

body.admin-page .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  min-height: var(--teacher-topbar-height) !important;
  height: var(--teacher-topbar-height) !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #dbe6f4 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(14px);
}

body.admin-page #adminWorkspace {
  display: grid !important;
  grid-template-columns: var(--teacher-side-width) minmax(0, 1fr) !important;
  min-height: calc(100vh - var(--teacher-topbar-height)) !important;
  background: #f5f8fc !important;
}

body.admin-page .admin-command-center {
  position: sticky !important;
  top: var(--teacher-topbar-height) !important;
  align-self: start !important;
  width: auto !important;
  height: calc(100vh - var(--teacher-topbar-height)) !important;
  margin: 0 !important;
  padding: 16px 12px !important;
  overflow-y: auto !important;
  border-right: 1px solid #dbe6f4 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.admin-page .command-copy,
body.admin-page .dashboard-stat-grid,
body.admin-page .module-grid.category-grid,
body.admin-page .storage-note {
  display: none !important;
}

body.admin-page .admin-side-menu {
  display: grid !important;
  gap: 6px !important;
}

body.admin-page .admin-side-menu strong {
  margin: 14px 8px 4px !important;
  color: #102033 !important;
  font-size: 13px !important;
}

body.admin-page .admin-side-menu button {
  min-height: 38px !important;
  justify-content: flex-start !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

body.admin-page .admin-panels {
  min-width: 0 !important;
  padding: 14px !important;
}

body.admin-page .nested-nav.active {
  position: sticky !important;
  top: calc(var(--teacher-topbar-height) + 8px) !important;
  z-index: 50 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  padding: 8px !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05) !important;
}

body.admin-page .nested-nav.active button {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

body.admin-page #knowledgePreviewPanel.active {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns:
    var(--knowledge-tree-stable-width)
    minmax(520px, 1fr)
    var(--knowledge-rail-stable-width) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--teacher-panel-gap) !important;
  height: calc(100vh - var(--teacher-topbar-height) - 94px) !important;
  min-height: 620px !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-column-splitter,
body.admin-page #knowledgePreviewPanel.active .right-rail-toggle {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
body.admin-page #knowledgePreviewPanel.active .knowledge-main,
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  grid-row: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid #dbe6f4 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar {
  grid-column: 1 !important;
  padding: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-main {
  grid-column: 2 !important;
  padding: 16px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  grid-column: 3 !important;
  display: grid !important;
  align-content: start !important;
  gap: 12px !important;
  padding: 14px !important;
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-card,
body.admin-page #knowledgePreviewPanel.active .module-library-card,
body.admin-page #knowledgePreviewPanel.active .setting-card,
body.admin-page #knowledgePreviewPanel.active .action-rail-card {
  border: 1px solid #e1ebf6 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.admin-page #knowledgePreviewPanel.active .action-rail-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.admin-page #knowledgePreviewPanel.active .action-rail-buttons button {
  min-height: 36px !important;
  padding-inline: 8px !important;
  white-space: normal !important;
}

body.admin-page #knowledgePreviewPanel.active .module-add-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-group {
  display: grid !important;
  gap: 8px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-group > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-icon {
  grid-row: 1 / span 2 !important;
  margin: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item span {
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item em {
  display: none !important;
}

/* v1.0 r28: the right module picker uses compact text marks, not the large deer artwork icons. */
body.admin-page #knowledgePreviewPanel.active .module-category-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 6px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-category-tabs button {
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 7px 4px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item {
  grid-template-columns: 32px minmax(0, 1fr) !important;
  min-height: 56px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item .module-palette-icon,
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail .module-palette-item .module-palette-icon {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border: 1px solid color-mix(in srgb, var(--module-accent) 30%, #c7d7e8) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--module-soft) 82%, #ffffff) !important;
  color: color-mix(in srgb, var(--module-accent) 68%, #304257) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  padding: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item .module-palette-icon img {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-item > span:not(.module-palette-icon) {
  color: #314158 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

@media (max-width: 1180px) {
  body.admin-page #adminWorkspace {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .admin-command-center {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dbe6f4 !important;
  }

  body.admin-page .admin-side-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.admin-page .admin-side-menu strong {
    grid-column: 1 / -1 !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-preview-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
  body.admin-page #knowledgePreviewPanel.active .knowledge-main,
  body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.admin-page #knowledgePreviewPanel.active .module-palette-group > div {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  body.admin-page .topbar {
    height: auto !important;
    min-height: var(--teacher-topbar-height) !important;
  }

  body.admin-page .admin-side-menu {
    grid-template-columns: 1fr !important;
  }

  body.admin-page .admin-panels {
    padding: 10px !important;
  }

  body.admin-page .nested-nav.active {
    position: static !important;
  }

  body.admin-page #knowledgePreviewPanel.active .action-rail-buttons,
  body.admin-page #knowledgePreviewPanel.active .module-palette-group > div {
    grid-template-columns: 1fr !important;
  }
}

/* v15.16 build 138: added-module grid/list view switch. */
body.admin-page .module-bulk-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.admin-page .module-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid #dbe6f4;
  border-radius: 12px;
  background: #f3f7fc;
}

body.admin-page .module-view-switch button {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 5px 11px;
  background: transparent;
  color: #63758c;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body.admin-page .module-view-switch button.active,
body.admin-page .module-view-switch button[aria-pressed="true"] {
  background: #ffffff;
  color: #1478ee;
  box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-height: 190px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .knowledge-module-card.visual-module-card {
  min-width: 0 !important;
  min-height: 176px !important;
  grid-template-rows: auto 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
  border-left-width: 4px !important;
  border-radius: 16px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .knowledge-module-card.module-tile::after {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-head {
  grid-template-columns: 18px 30px minmax(0, 1fr) 38px !important;
  gap: 6px !important;
  align-items: start !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-drag {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 18px !important;
  height: 30px !important;
  font-size: 16px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-order {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-icon {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-title {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-title strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-title em {
  font-size: 11px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-status {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  max-width: 100% !important;
  padding: 3px 6px !important;
  font-size: 11px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-switch {
  grid-column: 4 / 5 !important;
  grid-row: 1 !important;
  transform: scale(0.82);
  transform-origin: top right;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-click {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-actions,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .module-tile-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding-top: 7px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-meta span,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-meta small {
  display: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-meta em {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #53637b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-buttons .compact-link {
  min-width: 0 !important;
  min-height: 28px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .module-add-card {
  min-height: 176px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .knowledge-module-card.visual-module-card {
  min-height: 330px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .visual-card-actions,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .module-tile-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  body.admin-page .module-section-title,
  body.admin-page .module-bulk-actions {
    align-items: stretch !important;
  }

  body.admin-page .module-view-switch {
    width: 100%;
  }

  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v15.17 build 139: sync Figma V2 visual system into the real app. */
:root {
  --vf-bg: #f2f7fc;
  --vf-bg-strong: #eaf3ff;
  --vf-surface: #ffffff;
  --vf-surface-soft: #f8fbff;
  --vf-line: #dbe6f4;
  --vf-line-strong: #bfd4ec;
  --vf-text: #121f32;
  --vf-muted: #66748a;
  --vf-soft-text: #8a98ac;
  --vf-blue: #1677ff;
  --vf-blue-2: #38a3ff;
  --vf-blue-soft: #e8f3ff;
  --vf-green: #1fbe7c;
  --vf-green-soft: #e2f9ef;
  --vf-orange: #f29147;
  --vf-orange-soft: #fff1e5;
  --vf-purple: #8b5cf6;
  --vf-purple-soft: #f1ebff;
  --vf-pink: #e25b85;
  --vf-pink-soft: #ffebf2;
  --vf-gold: #b9aa7b;
  --vf-gold-soft: #faf4dc;
  --vf-radius-lg: 18px;
  --vf-radius-md: 14px;
  --vf-radius-sm: 11px;
  --vf-shadow-card: 0 16px 42px rgba(20, 42, 75, 0.08);
  --vf-shadow-soft: 0 10px 26px rgba(20, 42, 75, 0.06);
}

body.student-page,
body.admin-page {
  background:
    radial-gradient(circle at 18% 0%, rgba(22, 119, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #f7fbff 0%, var(--vf-bg) 46%, #eef5fb 100%) !important;
  color: var(--vf-text);
}

body.student-page .topbar,
body.admin-page .topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--vf-line) !important;
  box-shadow: 0 10px 26px rgba(33, 62, 105, 0.06) !important;
  backdrop-filter: blur(18px);
}

body.student-page .brand-lockup h1,
body.admin-page .brand-lockup h1,
body.student-page h1,
body.student-page h2,
body.student-page h3,
body.admin-page h1,
body.admin-page h2,
body.admin-page h3 {
  color: var(--vf-text);
  letter-spacing: 0 !important;
}

body.student-page .version-pill,
body.admin-page .version-pill,
body.student-page .account-pill,
body.student-page .network-pill,
body.admin-page .admin-user-chip {
  border: 1px solid var(--vf-line) !important;
  border-radius: 999px !important;
  background: var(--vf-surface-soft) !important;
  color: var(--vf-muted) !important;
  box-shadow: none !important;
}

body.student-page .panel,
body.student-page .course-card,
body.student-page .course-progress-card,
body.student-page .progress-course-card,
body.student-page .lesson-card,
body.student-page .knowledge-progress-card,
body.student-page .student-chapter-list,
body.student-page .student-knowledge-detail,
body.student-page .review-panel,
body.student-page .progress-panel,
body.student-page .progress-hero-card,
body.student-page .student-module-card,
body.admin-page .panel,
body.admin-page .knowledge-card,
body.admin-page .module-library-card,
body.admin-page .setting-card,
body.admin-page .action-rail-card,
body.admin-page .dashboard-stat,
body.admin-page .module-tile {
  background: var(--vf-surface) !important;
  border: 1px solid var(--vf-line) !important;
  border-radius: var(--vf-radius-lg) !important;
  box-shadow: var(--vf-shadow-card) !important;
}

body.student-page .panel-heading p,
body.student-page .course-card span,
body.student-page .course-card em,
body.student-page .course-card small,
body.student-page .lesson-card span,
body.student-page .lesson-card em,
body.student-page .student-module-card p,
body.admin-page .knowledge-card-head span,
body.admin-page .module-section-title span,
body.admin-page .visual-title em,
body.admin-page .visual-card-meta em {
  color: var(--vf-muted) !important;
}

body.student-page input,
body.student-page select,
body.student-page textarea,
body.admin-page input,
body.admin-page select,
body.admin-page textarea {
  border: 1px solid var(--vf-line) !important;
  border-radius: var(--vf-radius-md) !important;
  background: #ffffff !important;
  color: var(--vf-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

body.student-page input:focus,
body.student-page select:focus,
body.student-page textarea:focus,
body.admin-page input:focus,
body.admin-page select:focus,
body.admin-page textarea:focus {
  border-color: rgba(22, 119, 255, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(22, 119, 255, 0.12) !important;
  outline: 0 !important;
}

body.student-page button.primary,
body.student-page .primary,
body.admin-page button.primary,
body.admin-page .primary {
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--vf-blue), var(--vf-blue-2)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(22, 119, 255, 0.22) !important;
}

body.student-page button.secondary,
body.student-page .secondary,
body.student-page .link-button,
body.admin-page button.secondary,
body.admin-page .secondary,
body.admin-page .compact-link {
  border: 1px solid var(--vf-line) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  color: #26435f !important;
  box-shadow: 0 8px 18px rgba(20, 42, 75, 0.05) !important;
}

body.student-page .course-list,
body.student-page .student-chapter-list,
body.student-page .review-list,
body.student-page .progress-course-list {
  gap: 12px !important;
}

body.student-page .course-card,
body.student-page .course-progress-card,
body.student-page .progress-course-card,
body.student-page .lesson-card {
  position: relative;
  overflow: hidden;
}

body.student-page .course-card::before,
body.student-page .course-progress-card::before,
body.student-page .progress-course-card::before,
body.student-page .lesson-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--vf-blue), var(--vf-green));
}

body.student-page .course-card.active,
body.student-page .course-progress-card.active,
body.student-page .progress-course-card.active,
body.student-page .lesson-card.active {
  border-color: rgba(22, 119, 255, 0.46) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%) !important;
}

body.student-page .course-card strong,
body.student-page .lesson-card strong,
body.student-page .student-module-card strong,
body.admin-page .visual-title strong,
body.admin-page .knowledge-card-head strong {
  color: var(--vf-text) !important;
  font-weight: 900 !important;
}

body.student-page .mini-progress,
body.student-page .progress-track,
body.student-page .knowledge-progress-card i,
body.student-page .progress-hero-card i,
body.student-page .progress-course-card i {
  overflow: hidden;
  border-radius: 999px !important;
  background: var(--vf-blue-soft) !important;
}

body.student-page .mini-progress span,
body.student-page .progress-fill,
body.student-page .knowledge-progress-card b,
body.student-page .progress-hero-card b,
body.student-page .progress-course-card b,
body.student-page #knowledgeProgressFill,
body.student-page #progressHeroFill {
  background: linear-gradient(90deg, var(--vf-blue), var(--vf-green)) !important;
}

body.student-page .student-module-card {
  border-left: 5px solid var(--vf-blue) !important;
}

body.student-page .student-module-card[data-module-type*="memory"],
body.student-page .student-module-card.module-memory-palace {
  border-left-color: var(--vf-pink) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--vf-pink-soft) 180%) !important;
}

body.student-page .student-module-card[data-module-type*="quiz"],
body.student-page .student-module-card.module-quiz {
  border-left-color: var(--vf-orange) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--vf-orange-soft) 180%) !important;
}

body.student-page .student-module-card[data-module-type*="image"],
body.student-page .student-module-card.module-artwork_image,
body.student-page .student-module-card.module-gallery {
  border-left-color: var(--vf-green) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--vf-green-soft) 180%) !important;
}

body.student-page .student-module-card[data-module-type*="table"],
body.student-page .student-module-card.module-timeline,
body.student-page .student-module-card.module-comparison_table {
  border-left-color: var(--vf-purple) !important;
  background: linear-gradient(180deg, #ffffff 0%, var(--vf-purple-soft) 180%) !important;
}

body.student-page .mobile-tab-bar {
  border: 1px solid rgba(219, 230, 244, 0.92) !important;
  border-radius: 22px 22px 0 0 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 -14px 30px rgba(20, 42, 75, 0.1) !important;
  backdrop-filter: blur(18px);
}

body.student-page .mobile-tab-bar button {
  border-radius: 14px !important;
  color: var(--vf-muted) !important;
}

body.student-page .mobile-tab-bar button.active {
  background: var(--vf-blue-soft) !important;
  color: var(--vf-blue) !important;
}

body.admin-page #adminWorkspace {
  background: transparent !important;
}

body.admin-page .admin-command-center,
body.admin-page #knowledgePreviewPanel.active .knowledge-sidebar,
body.admin-page #knowledgePreviewPanel.active .knowledge-main,
body.admin-page #knowledgePreviewPanel.active .knowledge-right-rail {
  background: rgba(255, 255, 255, 0.84) !important;
  border: 1px solid var(--vf-line) !important;
  box-shadow: var(--vf-shadow-card) !important;
  backdrop-filter: blur(18px);
}

body.admin-page .admin-side-menu button {
  border-radius: var(--vf-radius-md) !important;
  color: var(--vf-muted) !important;
}

body.admin-page .admin-side-menu button.active {
  background: var(--vf-blue-soft) !important;
  color: var(--vf-blue) !important;
  box-shadow: inset 4px 0 0 var(--vf-blue) !important;
}

body.admin-page .module-view-switch {
  border-color: var(--vf-line) !important;
  background: #edf5ff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

body.admin-page .module-view-switch button.active,
body.admin-page .module-view-switch button[aria-pressed="true"] {
  color: var(--vf-blue) !important;
  box-shadow: var(--vf-shadow-soft) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid {
  grid-template-columns: repeat(3, minmax(178px, 1fr)) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card {
  border-color: var(--vf-line) !important;
  box-shadow: var(--vf-shadow-card) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 100%) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .visual-icon,
body.admin-page #knowledgePreviewPanel.active .module-palette-button .module-palette-icon,
body.admin-page .module-palette-card .module-palette-icon {
  border: 1px solid var(--vf-line-strong) !important;
  background: var(--vf-surface-soft) !important;
  color: var(--vf-blue) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .visual-status {
  border-radius: 999px !important;
  background: var(--vf-green-soft) !important;
  color: #0a8c58 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-group > div,
body.admin-page .module-palette-grid {
  gap: 10px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-palette-button,
body.admin-page .module-palette-card {
  border: 1px solid var(--vf-line) !important;
  border-radius: var(--vf-radius-md) !important;
  background: #ffffff !important;
  box-shadow: var(--vf-shadow-soft) !important;
}

body.admin-page .module-category-tabs {
  padding: 4px !important;
  border: 1px solid var(--vf-line) !important;
  border-radius: 14px !important;
  background: var(--vf-surface-soft) !important;
}

body.admin-page .module-category-tabs button {
  border-radius: 11px !important;
  color: var(--vf-muted) !important;
}

body.admin-page .module-category-tabs button.active {
  background: #ffffff !important;
  color: var(--vf-blue) !important;
  box-shadow: var(--vf-shadow-soft) !important;
}

body.admin-page .knowledge-tree-node,
body.admin-page .chapter-tree-node,
body.admin-page .topic-tree-node {
  border-radius: var(--vf-radius-md) !important;
}

body.admin-page .knowledge-tree-node.active,
body.admin-page .chapter-tree-node.active,
body.admin-page .topic-tree-node.active {
  background: var(--vf-blue-soft) !important;
  color: var(--vf-blue) !important;
  box-shadow: inset 4px 0 0 var(--vf-blue) !important;
}

@media (max-width: 960px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.student-page .topbar,
  body.admin-page .topbar {
    border-radius: 0 !important;
  }

  body.student-page .panel,
  body.student-page .course-card,
  body.student-page .course-progress-card,
  body.student-page .lesson-card,
  body.student-page .student-module-card,
  body.admin-page .panel,
  body.admin-page .knowledge-card {
    border-radius: 16px !important;
  }
}

body.student-page button:disabled,
body.student-page button[disabled],
body.admin-page button:disabled,
body.admin-page button[disabled] {
  border-color: #dce7f4 !important;
  background: #d9eaff !important;
  color: #8a98ac !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.72 !important;
}

/* v15.17 r3: module grid/list switch also controls subject/unit/category overviews. */
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .hierarchy-overview-card,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .hierarchy-overview-card,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .art-category-overview,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .art-category-overview {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  border: 1px solid rgba(145, 157, 170, 0.24) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(232, 236, 232, 0.92), rgba(235, 229, 220, 0.92)) !important;
  box-shadow: 0 16px 34px rgba(54, 67, 82, 0.08) !important;
  padding: 18px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .hierarchy-overview-grid,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .art-category-topic-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .hierarchy-overview-grid,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .art-category-topic-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(116, 130, 143, 0.25) !important;
  border-radius: 16px !important;
  color: #223247 !important;
  box-shadow: 0 12px 26px rgba(46, 60, 78, 0.08) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .hierarchy-overview-grid button,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .art-category-topic-grid button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 142px !important;
  padding: 18px 16px !important;
  text-align: center !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .hierarchy-overview-grid button,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .art-category-topic-grid button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 76px !important;
  padding: 14px 18px !important;
  text-align: left !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button::before,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button::before {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  width: 42px !important;
  height: 5px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  background: rgba(128, 115, 100, 0.28) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .hierarchy-overview-grid button::before,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .art-category-topic-grid button::before {
  left: 18px !important;
  top: 50% !important;
  width: 5px !important;
  height: 34px !important;
  transform: translateY(-50%) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 1),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 1),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 1) {
  background: linear-gradient(145deg, #e4ebe7, #f0ede5) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 2),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 2),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 2) {
  background: linear-gradient(145deg, #e3e8ee, #eee8df) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 3),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 3),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 3) {
  background: linear-gradient(145deg, #e8dfdf, #f1ebe6) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 4),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 4),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 4) {
  background: linear-gradient(145deg, #dfe7d9, #ece7dc) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 5),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 5),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 5) {
  background: linear-gradient(145deg, #e6dfeb, #ede7df) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n) {
  background: linear-gradient(145deg, #dce6e3, #ebe3d8) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #1e2d3f !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.28 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .hierarchy-overview-grid button strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list .art-category-topic-grid button strong {
  flex: 1 1 auto !important;
  padding-left: 16px !important;
  text-align: left !important;
  -webkit-line-clamp: 2;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button span,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button span {
  color: #5f6d7b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:hover,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:hover {
  border-color: rgba(54, 92, 122, 0.36) !important;
  box-shadow: 0 18px 34px rgba(46, 60, 78, 0.12) !important;
  transform: translateY(-1px);
}

@media (max-width: 960px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .hierarchy-overview-grid,
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .art-category-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .hierarchy-overview-grid,
  body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .art-category-topic-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

body.student-page .student-chapter-card.open {
  border-color: rgba(22, 119, 255, 0.28) !important;
  background: linear-gradient(180deg, #f8fbff, #fff) !important;
}

body.student-page .student-course-input-section {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid rgba(151, 130, 156, 0.24);
  border-radius: 22px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(255, 248, 238, 0.95), rgba(241, 247, 255, 0.92));
  box-shadow: 0 16px 34px rgba(91, 76, 103, 0.1);
}

body.student-page .student-course-input-section.open {
  border-color: rgba(185, 121, 157, 0.38);
  background: linear-gradient(135deg, #fff2f5 0%, #eef6ff 52%, #fff8e9 100%);
}

body.student-page .student-course-input-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--student-ink);
  text-align: left;
}

body.student-page .student-course-input-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--rococo-ink, #24334a);
  font-size: 17px;
  font-weight: 950;
}

body.student-page .student-course-input-toggle strong {
  color: #c16a86;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

body.student-page .student-course-input-toggle em {
  color: #68768d;
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

body.student-page .student-course-input-toggle > i {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: rgba(156, 171, 191, 0.24);
}

body.student-page .student-course-input-toggle > i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f0a7ba, #9ec5ee 52%, #e8c987);
}

body.student-page .student-course-input-body {
  display: grid;
  gap: 10px;
}

body.student-page .student-learning-input-section {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

body.student-page .student-learning-section-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 18px !important;
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color: #172033 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

body.student-page .student-learning-input-section.open .student-learning-section-toggle {
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: linear-gradient(135deg, #e8f2ff, #f8fbff) !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12) !important;
}

body.student-page .student-learning-input-section[data-learning-section^="chapterOrder"].open .student-learning-section-toggle {
  border-color: rgba(103, 145, 111, 0.42) !important;
  background: linear-gradient(135deg, #e7eee7, #fbfaf4) !important;
  box-shadow: 0 14px 28px rgba(103, 145, 111, 0.12) !important;
}

body.student-page .student-learning-input-section.open .student-learning-section-toggle .learning-caret {
  background: #ffffff;
  color: #1d4ed8;
}

body.student-page .student-learning-section-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .student-learning-section-toggle em {
  justify-self: end;
  max-width: 86px;
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .student-learning-section-body {
  display: grid;
  gap: 10px;
}

body.student-page .student-chapter-title strong,
body.student-page .student-category-toggle span,
body.student-page .student-topic-node span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

body.student-page .learning-caret {
  display: inline-grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 7px;
  background: #eaf3ff;
  color: var(--student-blue);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

body.student-page .student-topic-group {
  display: grid;
  gap: 8px;
}

body.student-page .student-topic-group.open {
  padding: 8px;
  border-radius: 15px;
  background: #f6f9fc;
}

body.student-page .student-category-toggle {
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #eef7ff, #f7fbff) !important;
  color: var(--student-text) !important;
  box-shadow: inset 0 0 0 1px #d8e9fb !important;
}

body.student-page .student-category-toggle em {
  background: #fff !important;
  color: #5d718b !important;
}

body.student-page .student-topic-children {
  display: grid;
  gap: 8px;
  padding-left: 16px;
  border-left: 2px solid #dceafe;
}

body.student-page .student-topic-node {
  cursor: pointer;
}

body.student-page .student-topic-node:hover,
body.student-page .student-category-toggle:hover,
body.student-page .student-chapter-title:hover {
  transform: translateY(-1px);
}

body.student-page #playerBackButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 760px) {
  body.student-page #playerBackButton {
    order: -1;
    width: 100%;
  }

  body.student-page .student-topic-children {
    padding-left: 10px;
  }
}

/* 15.17 App Shell: student app-grade layer, constrained by pasted research report. */
body.student-page {
  --color-bg: #f6f7fb;
  --color-surface: #ffffff;
  --color-surface-soft: #f9fafc;
  --color-text: #172033;
  --color-text-2: #4d5b76;
  --color-text-3: #6b7280;
  --color-border: #e6eaf0;
  --color-primary: #3b82f6;
  --color-primary-weak: #eaf2ff;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-memory-clean-bg: #eff6ff;
  --color-memory-hint-bg: #fff1f5;
  --font-size-xxl: 28px;
  --font-size-xl: 22px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12);
  --tabbar-height: 64px;
  --header-height: 56px;
  --app-max-width: 430px;
  --student-bg: var(--color-bg);
  --student-card: var(--color-surface);
  --student-line: var(--color-border);
  --student-text: var(--color-text);
  --student-muted: var(--color-text-3);
  --student-blue: var(--color-primary);
  --student-green: var(--color-success);
  --student-orange: var(--color-warning);
  min-width: 320px;
  background:
    radial-gradient(circle at 12% -10%, rgba(59, 130, 246, 0.12), transparent 34%),
    linear-gradient(180deg, #fbfdff 0%, var(--color-bg) 42%, #eef3f8 100%) !important;
  color: var(--color-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  letter-spacing: 0 !important;
}

body.student-page .app-shell {
  width: min(var(--app-max-width), 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--space-3)) var(--space-3) calc(var(--tabbar-height) + env(safe-area-inset-bottom) + 22px) !important;
}

body.student-page .topbar {
  position: sticky !important;
  top: 0;
  z-index: 80;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--header-height);
  margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) var(--space-3) !important;
  padding: env(safe-area-inset-top) var(--space-3) var(--space-2) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(230, 234, 240, 0.82) !important;
  background: rgba(246, 247, 251, 0.92) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

body.student-page .brand-lockup {
  min-width: 0;
}

body.student-page h1,
body.student-page .panel-heading h2 {
  letter-spacing: 0 !important;
}

body.student-page .panel-heading h2 {
  font-size: var(--font-size-lg) !important;
  line-height: 1.25;
}

body.student-page .panel-heading p,
body.student-page .course-card small,
body.student-page .lesson-card span,
body.student-page .student-module-head span {
  font-size: var(--font-size-sm) !important;
  line-height: 1.5;
}

body.student-page .student-workspace {
  gap: var(--space-3) !important;
}

body.student-page .main-column,
body.student-page .student-main {
  gap: var(--space-3) !important;
}

body.student-page .panel,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .course-progress-card,
body.student-page .progress-course-card,
body.student-page .student-module-card,
body.student-page .knowledge-detail-top,
body.student-page .review-card,
body.student-page .event-card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-md) !important;
}

body.student-page .learning-panel {
  border: 0 !important;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(34, 197, 94, 0.86)),
    var(--color-primary) !important;
  box-shadow: 0 16px 36px rgba(59, 130, 246, 0.24) !important;
}

body.student-page .study-plan-card,
body.student-page .exam-countdown-card,
body.student-page .resume-card {
  border-radius: var(--radius-lg) !important;
}

body.student-page .primary,
body.student-page .secondary,
body.student-page .link-button,
body.student-page .compact-link,
body.student-page .lesson-card button,
body.student-page .course-card,
body.student-page .course-progress-card,
body.student-page .progress-course-card,
body.student-page .history-row,
body.student-page .student-topic-list button,
body.student-page .student-gallery-thumb,
body.student-page .student-gallery-grid-card {
  min-height: 44px !important;
  border-radius: var(--radius-md) !important;
}

body.student-page .primary {
  min-height: 44px !important;
  background: linear-gradient(180deg, #4f90ff, var(--color-primary)) !important;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.22) !important;
}

body.student-page .course-card,
body.student-page .course-progress-card {
  position: relative;
  overflow: hidden;
}

body.student-page .course-card::after,
body.student-page .course-progress-card::after {
  content: "";
  position: absolute;
  inset: auto 16px 10px 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.28), rgba(34, 197, 94, 0.28));
}

body.student-page .knowledge-study-panel {
  background: var(--color-surface) !important;
}

body.student-page .student-knowledge-layout {
  gap: var(--space-3) !important;
}

body.student-page .student-chapter-card,
body.student-page .student-topic-group.open {
  background: var(--color-surface-soft) !important;
}

body.student-page .student-category-toggle,
body.student-page .student-topic-node {
  text-align: left;
}

body.student-page .student-module-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) !important;
}

body.student-page .student-module-head strong {
  font-size: var(--font-size-lg) !important;
  font-weight: 700 !important;
}

body.student-page .student-module-list {
  gap: var(--space-4) !important;
}

body.student-page .student-module-tabs {
  position: sticky;
  top: calc(var(--header-height) + env(safe-area-inset-top));
  z-index: 2;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
}

body.student-page .student-module-image,
body.student-page .student-gallery-stage,
body.student-page .student-gallery-viewer-stage,
body.student-page .memory-palace-stage,
body.student-page .student-hotspot-stage,
body.student-page .module-video-stage,
body.student-page .video-stage {
  background: var(--color-surface-soft) !important;
}

body.student-page .student-module-image img,
body.student-page .student-gallery-stage img,
body.student-page .student-gallery-viewer-stage img,
body.student-page .memory-palace-stage img,
body.student-page .student-hotspot-stage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.student-page .memory-palace-viewer.student {
  background: linear-gradient(180deg, var(--color-memory-clean-bg), var(--color-memory-hint-bg)) !important;
}

body.student-page .student-memory-palace-module {
  display: grid !important;
  gap: 10px !important;
}

body.student-page .memory-palace-open-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .memory-palace-viewer {
  touch-action: manipulation !important;
}

body.student-page .memory-palace-viewer:focus-visible,
body.student-page .student-gallery-stage:focus-visible,
body.student-page .student-topic-list button:focus-visible,
body.student-page .mobile-study-nav button:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.38);
  outline-offset: 3px;
}

body.student-page .student-gallery-stage,
body.student-page .student-gallery-viewer {
  touch-action: pan-y;
}

body.student-page .student-gallery-strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

body.student-page .student-gallery-thumb {
  scroll-snap-align: center;
  flex: 0 0 64px;
}

body.student-page .student-gallery-module[data-gallery-open-viewer] {
  cursor: zoom-in;
}

body.student-page.image-viewer-open .mobile-study-nav {
  display: none !important;
}

body.student-page.image-viewer-open .image-viewer {
  z-index: 10000 !important;
  background: rgba(5, 7, 10, 0.96) !important;
}

body.student-page .mobile-study-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  z-index: 90 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(var(--app-max-width), calc(100vw - 20px)) !important;
  min-height: var(--tabbar-height) !important;
  padding: 8px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(230, 234, 240, 0.94) !important;
  border-radius: var(--radius-xl) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(20px);
}

body.student-page .mobile-study-nav button {
  min-width: 0;
  min-height: 48px;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: var(--color-text-3) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.student-page .mobile-study-nav button.active {
  background: var(--color-primary-weak) !important;
  color: var(--color-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18) !important;
}

@media (max-width: 760px) {
  body.student-page .app-shell {
    max-width: var(--app-max-width);
  }

  body.student-page #learningPanel,
  body.student-page #coursePanel,
  body.student-page #lessonPanel,
  body.student-page #knowledgeStudyPanel,
  body.student-page #playerPanel,
  body.student-page #materialsPanel,
  body.student-page #reviewPanel,
  body.student-page #progressPanel,
  body.student-page #accountPanel,
  body.student-page #eventPanel {
    display: none !important;
  }

  body.student-page #learningPanel.active-mobile-panel,
  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #knowledgeStudyPanel.active-mobile-panel,
  body.student-page #playerPanel.active-mobile-panel,
  body.student-page #materialsPanel.active-mobile-panel,
  body.student-page #reviewPanel.active-mobile-panel,
  body.student-page #progressPanel.active-mobile-panel,
  body.student-page #accountPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    display: grid !important;
  }

  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #progressPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    margin-top: var(--space-3) !important;
  }
}

/* 15.17 Cloud/App navigation: student side is an app shell, not a waterfall page. */
body.student-page .student-workspace:not(.hidden) {
  display: block !important;
  width: min(var(--app-max-width), calc(100vw - 20px)) !important;
  max-width: var(--app-max-width) !important;
  margin: 0 auto !important;
  padding-bottom: calc(var(--tabbar-height) + 36px + env(safe-area-inset-bottom)) !important;
}

body.student-page .student-main,
body.student-page .main-column {
  display: block !important;
  width: 100% !important;
}

body.student-page #learningPanel,
body.student-page #coursePanel,
body.student-page #lessonPanel,
body.student-page #knowledgeStudyPanel,
body.student-page #playerPanel,
body.student-page #materialsPanel,
body.student-page #reviewPanel,
body.student-page #progressPanel,
body.student-page #accountPanel,
body.student-page #eventPanel {
  display: none !important;
}

body.student-page #learningPanel.active-mobile-panel,
body.student-page #coursePanel.active-mobile-panel,
body.student-page #lessonPanel.active-mobile-panel,
body.student-page #knowledgeStudyPanel.active-mobile-panel,
body.student-page #playerPanel.active-mobile-panel,
body.student-page #materialsPanel.active-mobile-panel,
body.student-page #reviewPanel.active-mobile-panel,
body.student-page #progressPanel.active-mobile-panel,
body.student-page #accountPanel.active-mobile-panel,
body.student-page #eventPanel.active-mobile-panel {
  display: grid !important;
  width: 100% !important;
  min-height: calc(100dvh - var(--header-height) - var(--tabbar-height) - 54px) !important;
  animation: mobilePanelIn 180ms ease-out;
}

body.student-page .student-knowledge-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

body.student-page .student-chapter-list,
body.student-page .student-knowledge-detail,
body.student-page .lesson-list,
body.student-page .course-list,
body.student-page .watch-history-list,
body.student-page .review-list,
body.student-page .progress-course-list {
  max-height: none !important;
}

body.student-page[data-mobile-target="coursePanel"] #lessonPanel,
body.student-page[data-mobile-target="lessonPanel"] #coursePanel,
body.student-page[data-mobile-target="reviewPanel"] #progressPanel,
body.student-page[data-mobile-target="progressPanel"] #reviewPanel {
  display: none !important;
}

/* 15.17 Student study choice: exam-frequency groups with visible progress. */
body.student-page .student-importance-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

body.student-page .importance-group-card {
  position: relative;
  display: grid;
  min-height: 112px;
  gap: 7px;
  align-content: start;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(204, 213, 224, 0.78);
  border-radius: 22px;
  background: #f5f2ea;
  color: #223044;
  text-align: left;
  box-shadow: 0 12px 26px rgba(33, 45, 66, 0.08);
}

body.student-page .importance-group-card.active {
  border-color: rgba(37, 99, 235, 0.56);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.16);
}

body.student-page .importance-group-card span {
  font-size: 13px;
  font-weight: 900;
  color: rgba(31, 41, 55, 0.82);
}

body.student-page .importance-group-card strong {
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  color: #152033;
}

body.student-page .importance-group-card em {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.45;
  color: rgba(71, 85, 105, 0.86);
}

body.student-page .importance-group-card i {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

body.student-page .importance-group-card i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(37, 99, 235, 0.78);
}

body.student-page .importance-group-card::after {
  position: absolute;
  right: -16px;
  top: -16px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  content: "";
}

body.student-page .student-filter-summary {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body.student-page .student-filter-summary strong {
  color: #172033;
  font-size: 15px;
  font-weight: 950;
}

body.student-page .student-filter-summary span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

body.student-page .importance-all {
  background: #edf2f6;
}

body.student-page .importance-required {
  background: #f0e6df;
}

body.student-page .importance-high {
  background: #ebe7d8;
}

body.student-page .importance-normal {
  background: #e7eee7;
}

body.student-page .importance-rare {
  background: #e5ecef;
}

body.student-page .importance-low {
  background: #eee9ef;
}

body.student-page .importance-required i b {
  background: #b26a5b;
}

body.student-page .importance-high i b {
  background: #b28a42;
}

body.student-page .importance-normal i b {
  background: #67916f;
}

body.student-page .importance-rare i b {
  background: #66889b;
}

body.student-page .importance-low i b {
  background: #907894;
}

body.student-page .importance-mini {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #374151;
  background: #edf2f6;
}

body.student-page .importance-mini.importance-required {
  background: #f0e6df;
  color: #8a4f44;
}

body.student-page .importance-mini.importance-high {
  background: #ebe7d8;
  color: #84652f;
}

body.student-page .importance-mini.importance-normal {
  background: #e7eee7;
  color: #4f7557;
}

body.student-page .importance-mini.importance-rare {
  background: #e5ecef;
  color: #4d6e82;
}

body.student-page .importance-mini.importance-low {
  background: #eee9ef;
  color: #755e79;
}

body.student-page .student-topic-node {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
}

body.student-page .student-topic-thumb {
  display: inline-grid !important;
  flex: 0 0 42px;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(151, 130, 156, 0.26);
  border-radius: 14px;
  background: linear-gradient(135deg, #eef1f4, #d9dee5);
}

body.student-page .student-topic-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.student-page .student-topic-thumb.empty::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(100, 116, 139, 0.22);
}

body.student-page .student-topic-title {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  color: var(--student-text, #172033);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 15.17 Mobile nested learning: list and detail are separate app states, not one waterfall. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-knowledge-detail {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-progress-card,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-chapter-list {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
  display: grid !important;
  padding: 0 16px 16px !important;
  touch-action: pan-y;
}

body.student-page .knowledge-detail-back {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-height: 38px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

body.student-page .student-module-image {
  min-height: 260px;
  align-items: center;
  justify-items: center;
}

body.student-page .student-module-image img {
  width: 100% !important;
  height: auto !important;
  max-height: min(68vh, 560px) !important;
  object-fit: contain !important;
}

body.student-page .memory-palace-stage {
  min-height: 320px !important;
}

body.student-page .memory-palace-stage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.student-page .student-module-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto;
  padding: 8px 0 10px !important;
  border-bottom: 0 !important;
  scroll-snap-type: x proximity;
}

body.student-page .student-module-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 42px;
  max-width: 168px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
  background: #fff;
  color: #475569;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  scroll-snap-align: start;
}

body.student-page .student-module-tabs button span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  box-shadow: none !important;
}

body.student-page .student-module-tabs button strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .student-module-tabs button.active {
  border-color: rgba(37, 99, 235, 0.52);
  background: #eff6ff;
  color: #1d4ed8;
}

body.student-page .student-module-list {
  align-items: stretch;
}

body.student-page .knowledge-table-version-guide {
  position: sticky;
  top: max(56px, calc(env(safe-area-inset-top) + 50px));
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(82, 143, 121, 0.28);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(247, 252, 249, 0.96);
  box-shadow: 0 10px 24px rgba(38, 88, 70, 0.1);
  backdrop-filter: blur(14px);
}

body.student-page .knowledge-table-version-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.student-page .knowledge-table-version-copy strong {
  color: #23483c;
  font-size: 13px;
  font-weight: 950;
}

body.student-page .knowledge-table-version-copy span {
  color: #708079;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

body.student-page .knowledge-table-version-buttons {
  display: flex;
  gap: 7px;
  min-width: 0;
}

body.student-page .knowledge-table-version-buttons button {
  display: grid;
  gap: 1px;
  min-width: 86px;
  min-height: 42px;
  border: 1px solid rgba(98, 132, 118, 0.24);
  border-radius: 12px;
  padding: 6px 10px;
  background: #fff;
  color: #36594d;
  box-shadow: none;
  text-align: left;
}

body.student-page .knowledge-table-version-buttons button strong {
  font-size: 12px;
  font-weight: 950;
}

body.student-page .knowledge-table-version-buttons button span {
  color: #7a8882;
  font-size: 10px;
  font-weight: 800;
}

body.student-page .knowledge-table-version-buttons button.version-core,
body.student-page .knowledge-table-version-buttons button.active {
  border-color: rgba(51, 132, 102, 0.46);
  background: #e8f6ef;
  color: #1f6b50;
}

body.student-page .student-module-card[data-knowledge-table-version] {
  scroll-margin-top: 126px;
}

body.student-page .student-module-card[data-knowledge-table-version="concise"] {
  border-color: rgba(51, 132, 102, 0.34);
  box-shadow: 0 12px 30px rgba(42, 111, 84, 0.09);
}

@media (max-width: 640px) {
  body.student-page .knowledge-table-version-guide {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  body.student-page .knowledge-table-version-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body.student-page .knowledge-table-version-buttons button {
    flex: 1 1 0;
    min-width: 0;
  }
}

body.student-page .student-module-group-section {
  display: grid;
  gap: 12px;
  scroll-margin-top: 76px;
}

body.student-page .student-module-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(151, 130, 156, 0.22);
  border-radius: 16px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(248, 217, 223, 0.48), rgba(220, 232, 248, 0.62));
  color: var(--rococo-ink, #263041);
}

body.student-page .student-module-group-head span {
  font-size: 15px;
  font-weight: 950;
}

body.student-page .student-module-group-head em {
  color: var(--rococo-muted, #6f7890);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

body.student-page .knowledge-neighbor-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

body.student-page .knowledge-neighbor-card {
  display: grid;
  gap: 4px;
  min-height: 76px;
  border: 1px solid rgba(151, 130, 156, 0.24);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 246, 234, 0.92), rgba(238, 245, 255, 0.96));
  color: var(--rococo-ink, #263041);
  text-align: left;
  box-shadow: 0 12px 26px rgba(54, 48, 63, 0.08);
}

body.student-page .knowledge-neighbor-card.next {
  background: linear-gradient(135deg, rgba(238, 245, 255, 0.96), rgba(250, 232, 238, 0.92));
}

body.student-page .knowledge-neighbor-card span {
  color: var(--rococo-muted, #6f7890);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .knowledge-neighbor-card strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .knowledge-neighbor-card:disabled {
  opacity: 0.54;
}

@media (max-width: 430px) {
  body.student-page .knowledge-neighbor-nav {
    grid-template-columns: 1fr;
  }
}

/* r157 QA pass 1: remove the remaining cool-purple legacy accents. */
body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button,
body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.version-core {
  border-color: rgba(208, 178, 129, 0.24) !important;
  border-radius: 18px !important;
  background: var(--forest-card) !important;
  color: var(--forest-brown) !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.active {
  border-color: rgba(239, 167, 43, 0.34) !important;
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: 0 5px 13px rgba(205, 133, 20, 0.07) !important;
}

body.student-page .output-mode-chooser,
body.student-page .output-mode-chooser-head,
body.student-page .output-mode-choice-grid {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

body.student-page .output-mode-chooser-head {
  gap: 7px !important;
  padding: 8px 3px 12px !important;
}

body.student-page .output-mode-chooser-head > span,
body.student-page .output-mode-choice em {
  color: var(--forest-orange-deep) !important;
}

body.student-page .output-mode-chooser-head > strong {
  color: var(--forest-ink) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

body.student-page .output-mode-chooser-head > p,
body.student-page .output-mode-choice span,
body.student-page .output-mode-choice small {
  color: var(--forest-muted) !important;
  font-weight: 500 !important;
}

body.student-page .output-mode-choice,
body.student-page .output-mode-choice.knowledge,
body.student-page .output-mode-choice.chapter {
  min-height: 146px !important;
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 28px !important;
  padding: 20px !important;
  background: var(--forest-card) !important;
  color: var(--forest-ink) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .output-mode-choice strong {
  color: var(--forest-ink) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

body.student-page .output-section-back,
body.student-page .chapter-paper-answer-summary strong {
  color: var(--forest-orange-deep) !important;
}

body.student-page .chapter-paper-answer-card > summary {
  background: #fff5dc !important;
  color: var(--forest-brown) !important;
}

body.student-page .chapter-paper-answer-card button.answered {
  border-color: rgba(239, 167, 43, 0.34) !important;
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .account-subsection-head button,
body.student-page .knowledge-favorite-button,
body.student-page .account-topic-row em {
  border-color: rgba(239, 167, 43, 0.22) !important;
  background: #fff4d9 !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: none !important;
}

body.student-page .account-topic-empty {
  border-color: rgba(208, 178, 129, 0.3) !important;
  background: #fffaf0 !important;
  color: var(--forest-muted) !important;
}

body.student-page .progress-track,
body.student-page .student-course-input-toggle > i,
body.student-page .knowledge-progress-card i,
body.student-page .progress-hero-card i,
body.student-page .progress-course-card i {
  background: #efe5d2 !important;
}

body.student-page .progress-track > i,
body.student-page .progress-track > span,
body.student-page .student-course-input-toggle > i b,
body.student-page .knowledge-progress-card b,
body.student-page .progress-hero-card i b,
body.student-page .progress-course-card i b {
  background: linear-gradient(90deg, var(--forest-sage), var(--forest-orange)) !important;
}

body.student-page .student-topic-node em.status-unmarked,
body.student-page .student-topic-node em.status-review {
  background: #f6f1e8 !important;
  color: #9b8a79 !important;
}


/* 15.18 Teacher IA cleanup: knowledge modules are the only content entry.
   Hide legacy second-level nav so it cannot overlap section headings. */
body.admin-page .nested-nav,
body.admin-page .nested-nav.active {
  display: none !important;
}

body.admin-page [data-admin-section="course"],
body.admin-page [data-admin-section="upload"],
body.admin-page [data-admin-section="catalog"] {
  display: none !important;
}

body.admin-page .question-hub-panel.active,
body.admin-page .module-panel.active:not(.knowledge-preview-panel) {
  margin-top: 0 !important;
}

@media (max-width: 390px) {
  body.student-page .student-importance-groups {
    grid-template-columns: 1fr;
  }
}

/* 15.18 r7 Rococo palette pass: color only, no information-structure changes. */
body.admin-page,
body.student-page {
  --rococo-ink: #263041;
  --rococo-muted: #6f7890;
  --rococo-line: rgba(151, 130, 156, 0.28);
  --rococo-rose: #e8a5b8;
  --rococo-rose-soft: #f8d9df;
  --rococo-blue: #9dbbe8;
  --rococo-blue-soft: #dce8f8;
  --rococo-mint: #a6cfbd;
  --rococo-mint-soft: #dff0e8;
  --rococo-lilac: #c7addd;
  --rococo-lilac-soft: #ecddf4;
  --rococo-gold: #d8b15f;
  --rococo-gold-soft: #f4e3b6;
  --brand: #b9799d;
  --brand-dark: #895979;
  --accent: #a6cfbd;
  --line: var(--rococo-line);
}

body.admin-page {
  background:
    radial-gradient(circle at 12% -8%, rgba(232, 165, 184, 0.35), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(157, 187, 232, 0.32), transparent 30%),
    linear-gradient(180deg, #fbf8fb 0%, #f5f1f6 46%, #edf4f1 100%) !important;
}

body.student-page {
  --color-bg: #f8f4f8;
  --color-surface: rgba(255, 252, 249, 0.96);
  --color-surface-soft: #fbf2f5;
  --color-text: var(--rococo-ink);
  --color-text-2: #536077;
  --color-text-3: var(--rococo-muted);
  --color-border: var(--rococo-line);
  --color-primary: #b9799d;
  --color-primary-weak: #f8d9df;
  --color-success: #71a887;
  --color-warning: #c9943f;
  --student-blue: #b9799d;
  background:
    radial-gradient(circle at 10% -8%, rgba(232, 165, 184, 0.36), transparent 34%),
    radial-gradient(circle at 90% 4%, rgba(157, 187, 232, 0.34), transparent 32%),
    linear-gradient(180deg, #fffafa 0%, #f8f2f7 52%, #eef5f1 100%) !important;
}

body.admin-page .topbar,
body.student-page .topbar {
  border-color: rgba(151, 130, 156, 0.24) !important;
  background: rgba(255, 250, 250, 0.84) !important;
}

body.admin-page .panel,
body.admin-page .event-card,
body.admin-page .student-card,
body.admin-page .course-card,
body.student-page .panel,
body.student-page .event-card,
body.student-page .course-card,
body.student-page .student-module-card,
body.student-page .review-card {
  border-color: rgba(151, 130, 156, 0.24) !important;
  background: rgba(255, 252, 249, 0.92) !important;
  box-shadow: 0 18px 42px rgba(86, 70, 96, 0.10) !important;
}

body.admin-page .panel-heading,
body.student-page .panel-heading {
  border-radius: 20px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(248, 217, 223, 0.72), rgba(220, 232, 248, 0.58));
}

body.admin-page .panel-heading h2,
body.student-page .panel-heading h2 {
  color: var(--rococo-ink) !important;
}

body.admin-page .primary,
body.student-page .primary {
  background: linear-gradient(135deg, #c77fa3, #9bbbe8) !important;
  box-shadow: 0 14px 26px rgba(172, 111, 151, 0.22) !important;
}

body.admin-page .secondary,
body.admin-page .compact-link:not(.primary),
body.student-page .secondary,
body.student-page .compact-link:not(.primary) {
  border-color: rgba(151, 130, 156, 0.28) !important;
  background: rgba(255, 252, 249, 0.84) !important;
  color: var(--rococo-ink) !important;
}

body.admin-page .nested-nav button.active,
body.admin-page .module-tile.active,
body.student-page .mobile-study-nav button.active,
body.student-page .student-module-tabs button.active {
  border-color: rgba(185, 121, 157, 0.38) !important;
  background: linear-gradient(135deg, var(--rococo-rose-soft), var(--rococo-blue-soft)) !important;
  color: #7e4f72 !important;
  box-shadow: inset 0 0 0 1px rgba(185, 121, 157, 0.12) !important;
}

body.student-page #knowledgeStudyPanel.active-mobile-panel {
  gap: 10px !important;
  padding-top: 10px !important;
}

body.student-page #knowledgeStudyPanel .panel-heading {
  margin-bottom: 6px !important;
  padding: 10px 12px !important;
}

body.student-page #knowledgeStudyPanel .panel-heading p {
  margin-top: 2px !important;
}

body.student-page .student-knowledge-layout {
  gap: 10px !important;
}

body.student-page .student-learning-section-toggle {
  min-height: 54px;
  border-color: rgba(151, 130, 156, 0.28) !important;
  color: var(--rococo-ink) !important;
}

body.student-page .student-learning-input-section[data-learning-section^="chapterOrder"] .student-learning-section-toggle {
  background: linear-gradient(135deg, #f0b8c8 0%, #f5d8bc 100%) !important;
}

body.student-page .student-learning-input-section.open .student-learning-section-toggle {
  filter: saturate(1.08);
  box-shadow: 0 14px 30px rgba(106, 83, 118, 0.16) !important;
}

body.student-page .student-learning-section-toggle span,
body.student-page .student-learning-section-toggle em {
  color: var(--rococo-ink) !important;
}

body.student-page .learning-caret {
  background: rgba(255, 252, 249, 0.84) !important;
  color: #8b5b7d !important;
}

body.student-page .knowledge-progress-card {
  border-radius: 20px !important;
  border-color: rgba(166, 207, 189, 0.48) !important;
  background: linear-gradient(135deg, #cde9dc 0%, #f4e3b6 100%) !important;
  box-shadow: 0 14px 30px rgba(113, 168, 135, 0.14) !important;
}

body.student-page .knowledge-progress-card span,
body.student-page .knowledge-progress-card strong {
  color: var(--rococo-ink) !important;
}

body.student-page .knowledge-progress-card i {
  background: rgba(255, 252, 249, 0.72) !important;
}

body.student-page .knowledge-progress-card b {
  background: linear-gradient(90deg, #71a887, #d8b15f) !important;
}

body.student-page .knowledge-refresh-row {
  display: flex;
  justify-content: stretch;
}

body.student-page .knowledge-refresh-row button {
  width: 100%;
  min-height: 50px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ecddf4, #dce8f8) !important;
  font-weight: 950 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-refresh-row {
  display: none !important;
}

body.student-page .importance-high {
  background: linear-gradient(135deg, #f4e3b6, #f7d7b7) !important;
}

body.student-page .importance-normal {
  background: linear-gradient(135deg, #dff0e8, #dce8f8) !important;
}

body.student-page .importance-low {
  background: linear-gradient(135deg, #ecddf4, #f8d9df) !important;
}

body.student-page .importance-group-card.active {
  border-color: rgba(185, 121, 157, 0.52) !important;
  box-shadow: 0 16px 34px rgba(185, 121, 157, 0.18) !important;
}

/* 15.18 r8: exam-frequency groups are dropdown sections, not filter tiles. */
body.student-page .student-importance-groups {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

body.student-page .importance-group-section {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(151, 130, 156, 0.26);
  border-radius: 22px;
  padding: 8px;
  background: rgba(255, 252, 249, 0.62);
  box-shadow: 0 12px 28px rgba(86, 70, 96, 0.08);
}

body.student-page .importance-group-section.importance-high {
  background: linear-gradient(135deg, #f4e3b6, #f7d7b7) !important;
}

body.student-page .importance-group-section.importance-normal {
  background: linear-gradient(135deg, #dff0e8, #dce8f8) !important;
}

body.student-page .importance-group-section.importance-low {
  background: linear-gradient(135deg, #ecddf4, #f8d9df) !important;
}

body.student-page .importance-group-section.open {
  border-color: rgba(185, 121, 157, 0.42);
  box-shadow: 0 16px 34px rgba(106, 83, 118, 0.14);
}

body.student-page .importance-group-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 66px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  background: rgba(255, 252, 249, 0.58) !important;
  box-shadow: none !important;
}

body.student-page .importance-group-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 15px !important;
  color: var(--rococo-ink) !important;
}

body.student-page .importance-group-card strong {
  align-self: center;
  font-size: 20px !important;
  color: var(--rococo-ink) !important;
}

body.student-page .importance-group-card em,
body.student-page .importance-group-card > i {
  grid-column: 1 / -1;
}

body.student-page .importance-group-body {
  display: grid;
  gap: 10px;
  padding: 2px;
}

body.student-page .importance-group-body .student-filter-summary {
  margin-bottom: 0 !important;
  border-color: rgba(151, 130, 156, 0.22) !important;
  background: rgba(255, 252, 249, 0.68) !important;
}

body.student-page .importance-group-body .student-chapter-card {
  background: rgba(255, 252, 249, 0.72) !important;
}

/* v1.0 r19: stabilize teacher knowledge/module editor after large table imports. */
body.admin-page #knowledgePreviewPanel.active .knowledge-main {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-flow-tabs {
  position: static !important;
  top: auto !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 8px !important;
  border: 1px solid #dfe9f6 !important;
  border-radius: 14px !important;
  background: #f7f9fd !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-flow-tabs button {
  flex: 0 0 auto !important;
  min-width: 82px !important;
  min-height: 42px !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
}

body.admin-page #knowledgePreviewPanel.active .detail-card {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  overflow: hidden !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-editor-panel {
  position: static !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: end !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row label {
  min-width: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row input,
body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.admin-page #knowledgePreviewPanel.active .module-section-title {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 16px 0 0 !important;
  border-top: 1px solid #e5edf7 !important;
  background: transparent !important;
}

body.admin-page #knowledgePreviewPanel.active .module-bulk-actions {
  flex: 1 1 320px !important;
  justify-content: flex-end !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.editing-one {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.editing-one {
  display: block !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.editing-one > .knowledge-module-editor-shell {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-editor-shell.suite-editor,
body.admin-page #knowledgePreviewPanel.active .module-editor-suite-main,
body.admin-page #knowledgePreviewPanel.active .module-editor-suite-side,
body.admin-page #knowledgePreviewPanel.active .module-suite-workspace,
body.admin-page #knowledgePreviewPanel.active .module-suite-edit-card,
body.admin-page #knowledgePreviewPanel.active .module-suite-side-card,
body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview,
body.admin-page #knowledgePreviewPanel.active .module-table-preview,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview,
body.admin-page #knowledgePreviewPanel.active .vf-table-wrap {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.admin-page #knowledgePreviewPanel.active .module-editor-suite-topbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-title-block {
  flex: 1 1 280px !important;
  min-width: 220px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-editor-toolbar-actions {
  flex: 1 1 420px !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-editor-toolbar-actions .compact-link {
  min-height: 38px !important;
  white-space: nowrap !important;
}

body.admin-page #knowledgePreviewPanel.active .module-editor-suite-body {
  grid-template-columns: minmax(0, 1fr) 8px minmax(240px, min(var(--module-settings-width), 32%)) !important;
  min-width: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-edit-card {
  overflow: hidden !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-input {
  width: 100% !important;
  max-width: 100% !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview,
body.admin-page #knowledgePreviewPanel.active .module-table-preview,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview {
  overflow: auto !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview {
  max-height: 360px !important;
  padding: 12px !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview table,
body.admin-page #knowledgePreviewPanel.active .module-table-preview table,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview table,
body.admin-page #knowledgePreviewPanel.active .vf-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview th,
body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview td,
body.admin-page #knowledgePreviewPanel.active .module-table-preview th,
body.admin-page #knowledgePreviewPanel.active .module-table-preview td,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview th,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview td,
body.admin-page #knowledgePreviewPanel.active .vf-table th,
body.admin-page #knowledgePreviewPanel.active .vf-table td {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.admin-page #knowledgePreviewPanel.active .module-suite-table-preview th,
body.admin-page #knowledgePreviewPanel.active .module-table-preview th,
body.admin-page #knowledgePreviewPanel.active .knowledge-table-preview th,
body.admin-page #knowledgePreviewPanel.active .vf-table th {
  width: 28% !important;
}

@media (max-width: 1380px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-page #knowledgePreviewPanel.active .module-editor-suite-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.admin-page #knowledgePreviewPanel.active .module-editor-suite-splitter {
    display: none !important;
  }

  body.admin-page #knowledgePreviewPanel.active .module-editor-suite-side {
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-left: 0 !important;
  }
}

/* v1.0 r20: Rococo pastel gradients for subject/unit/category overview cards. */
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .hierarchy-overview-card,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .hierarchy-overview-card,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .art-category-overview,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .art-category-overview {
  border-color: rgba(190, 159, 176, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(255, 243, 248, 0.96), rgba(239, 247, 255, 0.94)) !important;
  box-shadow: 0 18px 40px rgba(120, 98, 128, 0.12) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .hierarchy-overview-card > div:first-child,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .hierarchy-overview-card > div:first-child,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .art-category-overview > div:first-child,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .art-category-overview > div:first-child {
  color: #7f6175 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .hierarchy-overview-card > div:first-child strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .hierarchy-overview-card > div:first-child strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid > .art-category-overview > div:first-child strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-list > .art-category-overview > div:first-child strong {
  color: #18283c !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button {
  border-color: rgba(164, 149, 168, 0.32) !important;
  color: #17263b !important;
  box-shadow: 0 14px 30px rgba(106, 87, 120, 0.12) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button::before,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button::before {
  background: linear-gradient(90deg, rgba(218, 172, 190, 0.72), rgba(224, 202, 145, 0.72)) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 1),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 1),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 1) {
  background: linear-gradient(145deg, #fff1f7, #edf7ff) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 2),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 2),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 2) {
  background: linear-gradient(145deg, #edf7ff, #f5efff) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 3),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 3),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 3) {
  background: linear-gradient(145deg, #fff0f2, #f2f8ee) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 4),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 4),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 4) {
  background: linear-gradient(145deg, #eef8ef, #fff3e3) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n + 5),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n + 5),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n + 5) {
  background: linear-gradient(145deg, #f7efff, #fff2f7) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:nth-child(6n),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:nth-child(6n),
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .knowledge-module-card.visual-module-card:nth-of-type(6n) {
  background: linear-gradient(145deg, #eef8ff, #fff4ea) !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button strong,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button strong {
  color: #17263b !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button span,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button span {
  color: #63718b !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .hierarchy-overview-grid button:hover,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-list .art-category-topic-grid button:hover {
  border-color: rgba(190, 121, 157, 0.46) !important;
  box-shadow: 0 20px 38px rgba(144, 93, 133, 0.16) !important;
}

/* v1.0 r20: module preview opens only on demand and uses a full editor-sized dialog. */
body.admin-page .knowledge-content-preview-modal {
  padding: 28px !important;
  place-items: center !important;
}

body.admin-page .knowledge-content-preview-card {
  width: min(1280px, calc(100vw - 56px)) !important;
  max-height: calc(100vh - 56px) !important;
  border-color: rgba(190, 159, 176, 0.32) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 252, 249, 0.98), rgba(244, 249, 255, 0.98)) !important;
}

body.admin-page .knowledge-content-preview-body {
  max-height: calc(100vh - 168px) !important;
  padding: 4px 6px 4px 0 !important;
}

body.admin-page .knowledge-content-preview-body .modal-table-preview,
body.admin-page .knowledge-content-preview-body .student-knowledge-table,
body.admin-page .knowledge-content-preview-body .vf-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto !important;
}

body.admin-page .knowledge-content-preview-body table {
  width: 100% !important;
  table-layout: fixed !important;
}

body.admin-page .knowledge-content-preview-body th,
body.admin-page .knowledge-content-preview-body td {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.admin-page .knowledge-content-preview-modal[data-preview-mode="mobile"] .knowledge-content-preview-card {
  width: min(430px, calc(100vw - 32px)) !important;
}

/* v1.0 r22: keep module editing single-column; no cramped right preview/settings rail. */
body.admin-page .knowledge-module-editor-shell.suite-editor .module-editor-suite-body,
body.admin-page #knowledgePreviewPanel.active .knowledge-module-editor-shell.suite-editor .module-editor-suite-body,
body.admin-page .knowledge-module-editor-shell.suite-editor.settings-collapsed .module-editor-suite-body {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.admin-page .knowledge-module-editor-shell.suite-editor .module-editor-suite-splitter,
body.admin-page .knowledge-module-editor-shell.suite-editor .module-editor-suite-side,
body.admin-page .knowledge-module-editor-shell.suite-editor .module-suite-restore {
  display: none !important;
}

body.admin-page .module-editor-suite-settings-row {
  min-width: 0;
}

body.admin-page .module-editor-suite-settings-row .module-suite-side-card {
  display: grid;
  grid-template-columns: minmax(280px, 1.35fr) minmax(220px, 0.75fr) minmax(260px, 1fr);
  gap: 14px;
  align-items: start;
}

body.admin-page .module-editor-suite-settings-row .module-suite-side-head {
  display: flex;
  grid-column: 1 / -1;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

body.admin-page .module-editor-suite-settings-row .module-suite-side-head strong {
  color: #0f172a;
  font-size: 17px;
  font-weight: 950;
}

body.admin-page .module-editor-suite-settings-row .module-suite-side-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 850;
}

body.admin-page .module-editor-suite-settings-row .module-suite-side-card > label:first-of-type {
  grid-column: span 2;
}

body.admin-page .module-editor-suite-settings-row .module-suite-checks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.admin-page .module-editor-suite-settings-row .module-suite-capabilities {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  body.admin-page .module-editor-suite-settings-row .module-suite-side-card {
    grid-template-columns: 1fr;
  }

  body.admin-page .module-editor-suite-settings-row .module-suite-side-card > label:first-of-type,
  body.admin-page .module-editor-suite-settings-row .module-suite-capabilities {
    grid-column: auto;
  }

  body.admin-page .module-editor-suite-settings-row .module-suite-checks {
    grid-template-columns: 1fr;
  }
}

/* v1.0 r24: common question type selector and visible topic-list tag. */
body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.admin-page .knowledge-question-type-pill {
  flex: 0 0 auto;
  border: 1px solid #ead7bd;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff7ed;
  color: #9a5b22;
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

body.admin-page .knowledge-question-type-pill.question-type-artwork {
  border-color: #f5c9d8;
  background: #fff1f6;
  color: #a33d62;
}

body.admin-page .knowledge-question-type-pill.question-type-essay {
  border-color: #d5c9f5;
  background: #f6f2ff;
  color: #6b4bb3;
}

/* v1.0 r24: teacher cloud sync status. */
body.admin-page .cloud-sync-indicator {
  min-width: 190px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(214, 188, 155, 0.62);
  border-radius: 999px;
  padding: 0 12px;
  background: linear-gradient(135deg, #fff8f1, #f8fbff);
  color: #775d3f;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(111, 82, 54, 0.08);
}

body.admin-page .cloud-sync-indicator::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

body.admin-page .cloud-sync-indicator[data-status="queued"] {
  border-color: rgba(241, 190, 109, 0.64);
  background: linear-gradient(135deg, #fff7df, #fffaf1);
  color: #9a6418;
}

body.admin-page .cloud-sync-indicator[data-status="queued"]::before {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

body.admin-page .cloud-sync-indicator[data-status="syncing"] {
  border-color: rgba(96, 165, 250, 0.7);
  background: linear-gradient(135deg, #eef6ff, #f7fbff);
  color: #1d5f9d;
}

body.admin-page .cloud-sync-indicator[data-status="syncing"]::before {
  background: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
}

body.admin-page .cloud-sync-indicator[data-status="synced"] {
  border-color: rgba(116, 176, 134, 0.68);
  background: linear-gradient(135deg, #eef9ee, #fbfff7);
  color: #3d7444;
}

body.admin-page .cloud-sync-indicator[data-status="synced"]::before {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}

body.admin-page .cloud-sync-indicator[data-status="error"] {
  border-color: rgba(248, 113, 113, 0.68);
  background: linear-gradient(135deg, #fff0f1, #fff8f6);
  color: #a63a3a;
}

body.admin-page .cloud-sync-indicator[data-status="error"]::before {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14);
}

body.admin-page .file-upload-indicator {
  --file-upload-progress: 0%;
  min-width: 210px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(147, 197, 253, 0.74);
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  background: linear-gradient(135deg, #eef6ff, #fffaf2);
  color: #28547c;
  box-shadow: 0 8px 18px rgba(47, 99, 139, 0.1);
  white-space: nowrap;
}

body.admin-page .file-upload-indicator.hidden {
  display: none !important;
}

body.admin-page .file-upload-ring {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background:
    radial-gradient(circle closest-side, #fff 67%, transparent 69%),
    conic-gradient(#3b82f6 var(--file-upload-progress), rgba(191, 219, 254, 0.88) 0);
}

body.admin-page .file-upload-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: #3b82f6;
}

body.admin-page .file-upload-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

body.admin-page .file-upload-copy strong,
body.admin-page .file-upload-copy small {
  display: block;
  max-width: 178px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.admin-page .file-upload-copy strong {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.1;
}

body.admin-page .file-upload-copy small {
  color: #5f7187;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

body.admin-page .file-upload-indicator[data-status="uploading"] .file-upload-ring,
body.admin-page .file-upload-indicator[data-status="processing"] .file-upload-ring {
  animation: fileUploadPulse 1s linear infinite;
}

body.admin-page .file-upload-indicator[data-status="processing"] {
  border-color: rgba(245, 158, 11, 0.62);
  background: linear-gradient(135deg, #fff7df, #f7fbff);
  color: #9a6418;
}

body.admin-page .file-upload-indicator[data-status="processing"] .file-upload-ring {
  background:
    radial-gradient(circle closest-side, #fff 67%, transparent 69%),
    conic-gradient(#f59e0b var(--file-upload-progress), rgba(253, 230, 138, 0.9) 0);
}

body.admin-page .file-upload-indicator[data-status="processing"] .file-upload-ring::after {
  background: #f59e0b;
}

body.admin-page .file-upload-indicator[data-status="success"] {
  border-color: rgba(116, 176, 134, 0.68);
  background: linear-gradient(135deg, #eef9ee, #fbfff7);
  color: #3d7444;
}

body.admin-page .file-upload-indicator[data-status="success"] .file-upload-ring {
  background:
    radial-gradient(circle closest-side, #fff 67%, transparent 69%),
    conic-gradient(#22c55e 100%, rgba(187, 247, 208, 0.92) 0);
}

body.admin-page .file-upload-indicator[data-status="success"] .file-upload-ring::after {
  background: #22c55e;
}

body.admin-page .file-upload-indicator[data-status="error"] {
  border-color: rgba(248, 113, 113, 0.68);
  background: linear-gradient(135deg, #fff0f1, #fff8f6);
  color: #a63a3a;
}

body.admin-page .file-upload-indicator[data-status="error"] .file-upload-ring {
  background:
    radial-gradient(circle closest-side, #fff 67%, transparent 69%),
    conic-gradient(#ef4444 100%, rgba(254, 202, 202, 0.9) 0);
}

body.admin-page .file-upload-indicator[data-status="error"] .file-upload-ring::after {
  background: #ef4444;
}

@keyframes fileUploadPulse {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
  body.admin-page .cloud-sync-indicator,
  body.admin-page .file-upload-indicator {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.admin-page .file-upload-copy strong,
  body.admin-page .file-upload-copy small {
    max-width: 120px;
  }
}

/* v1.0 r27: use the provided deer icon image set for every teacher-side module type. */
body.admin-page .module-palette-icon,
body.admin-page .module-tile-icon.visual-icon,
body.admin-page .module-suite-mascot {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--module-accent) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
}

body.admin-page .visual-card-head {
  grid-template-columns: 22px 30px 88px minmax(0, 1fr) auto !important;
}

body.admin-page .module-palette-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  padding: 0 !important;
}

body.admin-page .module-tile-icon.visual-icon {
  width: 82px !important;
  height: 82px !important;
  border-radius: 24px !important;
  padding: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  padding: 0 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-card-head {
  grid-template-columns: 18px 64px minmax(0, 1fr) 38px !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-order {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.admin-page #knowledgePreviewPanel.active .knowledge-module-list.module-view-grid .visual-icon {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}

body.admin-page .module-suite-mascot {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
  padding: 0 !important;
}

body.admin-page .module-suite-title-block {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

body.admin-page .module-mascot-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

body.admin-page .module-mascot-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.admin-page .module-mascot-icon img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
}

body.admin-page .module-mascot-icon .mascot-bg {
  fill: color-mix(in srgb, var(--module-soft) 72%, #fff8f1);
}

body.admin-page .module-mascot-icon .mascot-face {
  fill: #d99a57;
}

body.admin-page .module-mascot-icon .mascot-face-mark,
body.admin-page .module-mascot-icon .mascot-muzzle {
  fill: #fff4df;
}

body.admin-page .module-mascot-icon .mascot-body,
body.admin-page .module-mascot-icon .mascot-neck,
body.admin-page .module-mascot-icon .mascot-head {
  fill: #d99a57;
}

body.admin-page .module-mascot-icon .mascot-belly,
body.admin-page .module-mascot-icon .mascot-muzzle {
  fill: #fff4df;
}

body.admin-page .module-mascot-icon .mascot-ear {
  fill: #c77c43;
}

body.admin-page .module-mascot-icon .mascot-tail {
  fill: #f3c7a4;
}

body.admin-page .module-mascot-icon .mascot-antler,
body.admin-page .module-mascot-icon .mascot-smile,
body.admin-page .module-mascot-icon .mascot-leg,
body.admin-page .module-mascot-icon .mascot-hoof,
body.admin-page .module-mascot-icon .mascot-prop-line,
body.admin-page .module-mascot-icon .mascot-prop-accent-stroke {
  fill: none;
  stroke: #7a5237;
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.admin-page .module-mascot-icon .mascot-prop {
  transform-box: fill-box;
  transform-origin: center;
}

body.admin-page .module-mascot-icon .mascot-prop-line.light {
  stroke: #fffaf3;
}

body.admin-page .module-mascot-icon .mascot-eye {
  fill: #142033;
}

body.admin-page .module-mascot-icon .mascot-cheek {
  fill: #ee9d9d;
}

body.admin-page .module-mascot-icon .mascot-prop-fill {
  fill: color-mix(in srgb, var(--module-soft) 62%, #fff1d8);
  stroke: color-mix(in srgb, var(--module-accent) 46%, #8b6f4b);
  stroke-width: 3.6;
  stroke-linejoin: round;
}

body.admin-page .module-mascot-icon .mascot-prop-linebox {
  fill: color-mix(in srgb, var(--module-accent) 28%, #fdf2f8);
  stroke: color-mix(in srgb, var(--module-accent) 58%, #6b5572);
  stroke-width: 3.4;
  stroke-linejoin: round;
}

body.admin-page .module-mascot-icon .mascot-prop-dot,
body.admin-page .module-mascot-icon .mascot-prop-accent {
  fill: color-mix(in srgb, var(--module-accent) 70%, #f4b5b5);
}

body.admin-page .module-mascot-icon.mascot-image .mascot-prop-fill,
body.admin-page .module-mascot-icon.mascot-hotspot .mascot-prop-fill {
  fill: #f8eef2;
}

body.admin-page .module-mascot-icon.mascot-video .mascot-prop-fill,
body.admin-page .module-mascot-icon.mascot-audio .mascot-prop-fill {
  fill: #eee9f8;
}

body.admin-page .module-mascot-icon.mascot-table .mascot-prop-fill,
body.admin-page .module-mascot-icon.mascot-timeline .mascot-prop-fill,
body.admin-page .module-mascot-icon.mascot-mindmap .mascot-prop-fill {
  fill: #edf5e9;
}

body.admin-page .module-mascot-icon.mascot-memory .mascot-prop-fill,
body.admin-page .module-mascot-icon.mascot-quiz .mascot-prop-fill {
  fill: #fff0da;
}

@media (max-width: 1360px) {
  body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Keep only the moving identity watermark; remove legacy player overlay marks. */
body.student-page .video-stage::before,
body.student-page .video-stage::after,
body.student-page .module-video-stage::before,
body.student-page .module-video-stage::after,
body.student-page .course-style-chinese .video-stage::before,
body.student-page .course-style-chinese .video-stage::after,
body.student-page .course-style-western .video-stage::before,
body.student-page .course-style-western .video-stage::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Student table recitation: keep full table readable, then cover row answers like a sheet of paper. */
body.student-page .student-table-recite {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.student-page .student-table-recite-toolbar {
  position: sticky;
  left: 0;
  z-index: 1;
}

body.student-page .student-knowledge-table {
  width: 100% !important;
  min-width: 100% !important;
  table-layout: auto !important;
  overflow: visible !important;
  border-collapse: separate !important;
}

body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  padding: 6px 8px !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  vertical-align: middle !important;
}

body.student-page .student-knowledge-table th {
  width: 30% !important;
  min-width: 86px;
}

body.student-page .student-knowledge-table td {
  width: 70% !important;
  min-width: 0;
}

body.student-page .student-table-answer {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

body.student-page .student-table-answer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(221, 199, 226, 0.78);
  border-radius: inherit;
  background: linear-gradient(135deg, #fffdf8, #f7eef3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 10px 22px rgba(121, 87, 103, 0.08);
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: top;
  transition: opacity 0.18s ease, transform 0.22s ease;
  pointer-events: none;
}

body.student-page .student-table-answer.covered::after {
  opacity: 1;
  transform: rotateX(0deg);
}

body.student-page .student-table-answer.covered .student-table-answer-text {
  opacity: 0;
}

body.student-page .student-table-answer-text {
  display: block;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.45;
  transition: opacity 0.12s ease;
  user-select: text;
  -webkit-user-select: text;
}

body.student-page [data-mark-color="rose"] {
  --table-mark-bg: linear-gradient(135deg, #ffe3eb, #fff6f0);
  --table-mark-border: rgba(219, 135, 165, 0.46);
  --table-mark-text: #8f365a;
}

body.student-page [data-mark-color="gold"] {
  --table-mark-bg: linear-gradient(135deg, #fff0b8, #fffaf0);
  --table-mark-border: rgba(211, 166, 73, 0.48);
  --table-mark-text: #76521d;
}

body.student-page [data-mark-color="mint"] {
  --table-mark-bg: linear-gradient(135deg, #dff7e8, #f7fff8);
  --table-mark-border: rgba(95, 165, 126, 0.44);
  --table-mark-text: #2f684b;
}

body.student-page [data-mark-color="blue"] {
  --table-mark-bg: linear-gradient(135deg, #dff0ff, #f6fbff);
  --table-mark-border: rgba(92, 151, 214, 0.44);
  --table-mark-text: #2b5e9a;
}

body.student-page [data-mark-color="lavender"] {
  --table-mark-bg: linear-gradient(135deg, #efe4ff, #fff8ff);
  --table-mark-border: rgba(154, 119, 207, 0.42);
  --table-mark-text: #68459b;
}

body.student-page .student-table-keyword {
  display: inline-grid;
  grid-template-areas: "stack";
  place-items: center;
  min-width: 1.8em;
  min-height: 1.32em;
  margin: 0 2px;
  border-radius: 7px;
  padding: 1px 5px 2px;
  background: var(--table-mark-bg, linear-gradient(135deg, #ffe3eb, #fff6f0));
  border: 1px solid var(--table-mark-border, rgba(219, 135, 165, 0.46));
  color: var(--table-mark-text, #8f365a);
  font-weight: 950;
  line-height: 1.38;
  cursor: pointer;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  vertical-align: baseline;
}

body.student-page .student-table-keyword[data-mark-bold="false"] {
  font-weight: 650;
}

body.student-page .student-table-keyword span,
body.student-page .student-table-keyword em {
  grid-area: stack;
}

body.student-page .student-table-keyword em {
  display: none;
  color: #a17348;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0;
}

body.student-page .student-table-keyword.keyword-covered {
  min-width: 3.2em;
  background: linear-gradient(135deg, #fffdf7, #f7edf1);
  border-color: rgba(201, 170, 116, 0.68);
  border-style: dashed;
  color: #a17348;
}

body.student-page .student-table-keyword.keyword-covered span {
  visibility: hidden;
}

body.student-page .student-table-keyword.keyword-covered em {
  display: block;
}

body.student-page .student-table-soft-break {
  display: block;
  content: "";
  margin: 2px 0;
}

body.student-page .student-table-recite-toolbar button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

body.student-page .student-table-mark-toolbar {
  position: fixed;
  left: 12px;
  right: auto;
  top: 12px;
  bottom: auto;
  z-index: 10020;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  max-width: min(calc(100vw - 24px), 360px);
  border: 1px solid rgba(218, 224, 235, 0.92);
  border-radius: 999px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(38, 48, 74, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.student-page .student-table-mark-toolbar::after {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  content: "";
  border-right: 1px solid rgba(218, 224, 235, 0.92);
  border-bottom: 1px solid rgba(218, 224, 235, 0.92);
  background: rgba(255, 255, 255, 0.98);
  transform: translateX(-50%) rotate(45deg);
}

body.student-page .student-table-mark-toolbar.below::after {
  top: -5px;
  bottom: auto;
  border: 0;
  border-left: 1px solid rgba(218, 224, 235, 0.92);
  border-top: 1px solid rgba(218, 224, 235, 0.92);
}

body.student-page .student-table-mark-toolbar.below.edge-bottom::after {
  display: none;
}

body.student-page .student-table-mark-toolbar.hidden {
  display: none;
}

body.student-page .student-table-mark-toolbar .table-mark-apply,
body.student-page .student-table-mark-toolbar .table-mark-clear {
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

body.student-page .student-table-mark-toolbar .table-mark-apply {
  background: linear-gradient(135deg, #2f8cff, #65b8ff);
  color: #ffffff;
}

body.student-page .student-table-mark-toolbar .table-mark-clear {
  background: rgba(239, 242, 247, 0.92);
  color: var(--muted);
}

body.student-page .table-mark-toolbar-colors {
  display: flex;
  gap: 6px;
}

/* Student image viewer: open centered, then allow stable pan and pinch zoom without drifting to one corner. */
body.student-page .image-viewer {
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

body.student-page .image-viewer img {
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  height: auto !important;
  max-width: 94vw !important;
  max-height: calc(100dvh - 96px) !important;
  object-fit: contain !important;
}

/* Student chapter list: reclaim nested left gutter so thumbnails and titles have room on phones. */
body.student-page .student-course-input-body,
body.student-page .student-learning-section-body,
body.student-page .student-topic-list,
body.student-page .student-topic-group,
body.student-page .student-topic-children {
  min-width: 0;
}

body.student-page .student-chapter-list {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

body.student-page .student-chapter-card {
  padding: 8px !important;
}

body.student-page .student-topic-group.open {
  padding: 6px !important;
}

body.student-page .student-topic-children {
  padding-left: 0 !important;
  border-left: 0 !important;
}

body.student-page .student-category-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px !important;
}

body.student-page .student-category-toggle span {
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

body.student-page .student-category-toggle em {
  white-space: nowrap;
}

body.student-page .student-topic-node {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: stretch !important;
  width: 100%;
  box-sizing: border-box;
  gap: 5px 10px !important;
  padding: 12px !important;
}

body.student-page .student-topic-thumb {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 50px;
  height: 50px;
  border-radius: 16px;
}

body.student-page .student-topic-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  overflow: visible !important;
  line-height: 1.35;
  text-align: left;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

body.student-page .student-topic-node > em {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  max-width: 100%;
  margin-top: 2px;
}

@media (max-width: 430px) {
  body.student-page .student-chapter-list {
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  body.student-page .student-topic-node {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  body.student-page .student-topic-thumb {
    width: 46px;
    height: 46px;
  }
}

/* r46: Make the student memory-palace image viewport larger and softer. */
body.student-page .student-memory-palace-module {
  margin-inline: -6px;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.student {
  padding: 8px !important;
  border-radius: 24px !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage {
  width: 100% !important;
  min-height: min(72vh, 560px) !important;
  max-height: 72vh !important;
  border-radius: 22px !important;
  border-color: rgba(208, 160, 180, 0.34) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage img {
  border-radius: 20px !important;
}

body.student-page .student-memory-palace-module .memory-palace-viewer p {
  margin-top: 2px !important;
}

/* r47: Keep memory-palace preview large by ratio, not by stretching height only. */
body.student-page .student-module-card.module-memory-palace {
  padding-inline: 8px !important;
}

body.student-page .student-memory-palace-module {
  margin-inline: -2px !important;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.student {
  padding: 6px !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage {
  justify-self: center !important;
  width: min(100%, 420px) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage.landscape {
  width: min(100%, 520px) !important;
  aspect-ratio: 3 / 2 !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage.portrait,
body.student-page .student-memory-palace-module .memory-palace-stage.square {
  aspect-ratio: 2 / 3 !important;
}

/* r48: Student mobile visual skin inspired by the soft playful app reference. */
body.student-page {
  --otter-bg: #f7f3ff;
  --otter-bg-soft: #eef8ff;
  --otter-surface: rgba(255, 255, 255, 0.86);
  --otter-line: #e4ddfb;
  --otter-purple: #7866ff;
  --otter-purple-deep: #5f52db;
  --otter-lavender: #ebe7ff;
  --otter-mint: #ddfff0;
  --otter-peach: #ffe7c7;
  --otter-pink: #ffe0ee;
  --otter-blue: #e6f6ff;
  --otter-ink: #1e2742;
  --otter-muted: #77829a;
  --student-bg: var(--otter-bg);
  --student-surface: #ffffff;
  --student-soft: #f7f4ff;
  --student-line: var(--otter-line);
  --student-blue: var(--otter-purple);
  --student-blue-dark: var(--otter-purple-deep);
  --student-ink: var(--otter-ink);
  --student-muted: var(--otter-muted);
  --brand: var(--otter-purple);
  --brand-dark: var(--otter-purple-deep);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 224, 238, 0.88) 0, transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(212, 245, 255, 0.9) 0, transparent 32%),
    linear-gradient(180deg, #fffafd 0%, #f6f1ff 46%, #eef9ff 100%) !important;
  color: var(--otter-ink) !important;
}

body.student-page .app-shell {
  padding-inline: 10px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(238, 248, 255, 0.34)),
    transparent !important;
  overflow-x: hidden !important;
}

@media (min-width: 761px) {
  body.student-page .app-shell {
    border-radius: 34px !important;
    box-shadow: 0 30px 80px rgba(109, 93, 180, 0.2) !important;
  }
}

body.student-page .topbar {
  margin: 0 -10px 14px !important;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px !important;
  border: 0 !important;
  border-radius: 0 0 26px 26px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 14px 34px rgba(118, 102, 255, 0.14) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

body.student-page .brand-lockup {
  gap: 10px !important;
  min-width: 0 !important;
}

body.student-page .brand-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 12px 24px rgba(123, 108, 255, 0.18) !important;
}

body.student-page h1,
body.student-page .brand-lockup h1 {
  color: var(--otter-ink) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.student-page .account-pill,
body.student-page #logoutButton,
body.student-page .player-actions button {
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--otter-ink) !important;
  box-shadow: 0 10px 24px rgba(105, 93, 150, 0.1) !important;
}

body.student-page .panel,
body.student-page .course-card,
body.student-page .course-progress-card,
body.student-page .progress-course-card,
body.student-page .lesson-card,
body.student-page .knowledge-progress-card,
body.student-page .student-chapter-card,
body.student-page .student-topic-group,
body.student-page .review-card,
body.student-page .progress-hero-card,
body.student-page .student-module-card,
body.student-page .importance-group-section,
body.student-page .importance-group-card {
  border: 1px solid rgba(226, 218, 250, 0.86) !important;
  border-radius: 26px !important;
  background: var(--otter-surface) !important;
  box-shadow: 0 18px 42px rgba(103, 92, 165, 0.1) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
}

body.student-page .panel {
  padding: 16px !important;
}

body.student-page .course-card:nth-child(4n + 1),
body.student-page .student-chapter-card:nth-child(4n + 1),
body.student-page .student-topic-node:nth-child(4n + 1),
body.student-page .student-module-card:nth-child(4n + 1),
body.student-page .importance-group-section:nth-child(4n + 1) {
  background: linear-gradient(135deg, #fff 0%, var(--otter-lavender) 100%) !important;
}

body.student-page .course-card:nth-child(4n + 2),
body.student-page .student-chapter-card:nth-child(4n + 2),
body.student-page .student-topic-node:nth-child(4n + 2),
body.student-page .student-module-card:nth-child(4n + 2),
body.student-page .importance-group-section:nth-child(4n + 2) {
  background: linear-gradient(135deg, #fff 0%, var(--otter-blue) 100%) !important;
}

body.student-page .course-card:nth-child(4n + 3),
body.student-page .student-chapter-card:nth-child(4n + 3),
body.student-page .student-topic-node:nth-child(4n + 3),
body.student-page .student-module-card:nth-child(4n + 3),
body.student-page .importance-group-section:nth-child(4n + 3) {
  background: linear-gradient(135deg, #fff 0%, var(--otter-peach) 100%) !important;
}

body.student-page .course-card:nth-child(4n + 4),
body.student-page .student-chapter-card:nth-child(4n + 4),
body.student-page .student-topic-node:nth-child(4n + 4),
body.student-page .student-module-card:nth-child(4n + 4),
body.student-page .importance-group-section:nth-child(4n + 4) {
  background: linear-gradient(135deg, #fff 0%, var(--otter-mint) 100%) !important;
}

body.student-page .student-learning-section-toggle,
body.student-page .student-category-toggle,
body.student-page .importance-group-card,
body.student-page .knowledge-detail-top,
body.student-page .knowledge-status-actions,
body.student-page .student-module-head,
body.student-page .student-module-group-section > h3 {
  border-radius: 24px !important;
}

body.student-page .student-learning-section-toggle,
body.student-page .student-category-toggle {
  border: 1px solid rgba(222, 213, 249, 0.9) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 26px rgba(109, 93, 180, 0.09) !important;
}

body.student-page .student-topic-node {
  border: 1px solid rgba(230, 222, 251, 0.86) !important;
  border-radius: 24px !important;
  padding: 12px !important;
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.1) !important;
}

body.student-page .student-topic-thumb {
  border-radius: 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 12px 24px rgba(104, 92, 160, 0.14) !important;
}

body.student-page .student-topic-title,
body.student-page .student-chapter-card strong,
body.student-page .knowledge-progress-card strong,
body.student-page .importance-group-card strong,
body.student-page .student-module-card h3,
body.student-page .student-module-head h3 {
  color: var(--otter-ink) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

body.student-page .student-topic-node > em,
body.student-page .student-filter-summary,
body.student-page .student-chapter-card span,
body.student-page .knowledge-progress-card span,
body.student-page .importance-group-card em,
body.student-page .student-module-card p {
  color: var(--otter-muted) !important;
}

body.student-page .student-module-tabs {
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 24px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 12px 28px rgba(110, 96, 170, 0.1) !important;
}

body.student-page .student-module-tabs button {
  border-radius: 18px !important;
  color: var(--otter-muted) !important;
  font-weight: 900 !important;
}

body.student-page .student-module-tabs button.active,
body.student-page .student-module-tabs button[aria-selected="true"] {
  background: linear-gradient(135deg, var(--otter-purple), #9f8cff) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(120, 102, 255, 0.28) !important;
}

body.student-page button.primary,
body.student-page .primary-action,
body.student-page .start-quiz-button,
body.student-page .knowledge-next-button,
body.student-page .student-refresh-button {
  border: 0 !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--otter-purple), #5ab6ff) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(120, 102, 255, 0.25) !important;
}

body.student-page button.secondary,
body.student-page .ghost-button,
body.student-page .knowledge-status-actions button,
body.student-page .module-action-row button {
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: var(--otter-ink) !important;
  box-shadow: 0 10px 22px rgba(105, 93, 150, 0.09) !important;
}

body.student-page input,
body.student-page select,
body.student-page textarea {
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  color: var(--otter-ink) !important;
  box-shadow: 0 10px 22px rgba(105, 93, 150, 0.06) inset !important;
}

body.student-page .student-knowledge-table,
body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  border-color: rgba(223, 216, 246, 0.95) !important;
}

body.student-page .student-knowledge-table {
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 14px 30px rgba(103, 92, 165, 0.08) !important;
}

body.student-page .student-knowledge-table th {
  background: linear-gradient(135deg, #f2efff, #eaf8ff) !important;
  color: var(--otter-ink) !important;
}

body.student-page .student-table-answer.covered {
  background: linear-gradient(135deg, #fff7fb, #efeaff) !important;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.student,
body.student-page .image-viewer,
body.student-page .module-image-frame,
body.student-page .student-module-image {
  border-radius: 26px !important;
  border-color: rgba(226, 218, 250, 0.9) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: 0 18px 40px rgba(103, 92, 165, 0.12) !important;
}

body.student-page .image-viewer img,
body.student-page .student-module-image img,
body.student-page .memory-palace-stage img {
  border-radius: 22px !important;
}

body.student-page .mobile-study-nav {
  left: max(10px, env(safe-area-inset-left, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  padding: 8px !important;
  border: 1px solid rgba(226, 218, 250, 0.92) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 42px rgba(105, 93, 150, 0.18) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
}

body.student-page .mobile-study-nav button {
  min-height: 54px !important;
  border-radius: 24px !important;
  color: var(--otter-muted) !important;
  font-weight: 950 !important;
}

body.student-page .mobile-study-nav button.active,
body.student-page .mobile-study-nav button[aria-selected="true"] {
  background: linear-gradient(135deg, #ffe8f5, #e7e3ff) !important;
  color: var(--otter-purple-deep) !important;
  box-shadow: 0 12px 24px rgba(120, 102, 255, 0.16) !important;
}

/* r49: Release the student learning list from excessive nested frames. */
body.student-page .app-shell {
  padding-inline: 6px !important;
}

body.student-page .main-content,
body.student-page .mobile-panel-stack,
body.student-page #knowledgeStudyPanel,
body.student-page .student-knowledge-layout,
body.student-page .student-chapter-list,
body.student-page .student-course-input-body,
body.student-page .student-learning-section-body,
body.student-page .student-topic-list,
body.student-page .student-topic-children {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.student-page .panel {
  padding: 10px !important;
  border-radius: 24px !important;
}

body.student-page .student-knowledge-layout {
  gap: 10px !important;
}

body.student-page .student-course-input-section {
  margin: 0 0 12px !important;
  padding: 10px !important;
  border-radius: 26px !important;
}

body.student-page .student-course-input-section.open {
  padding: 10px !important;
}

body.student-page .student-course-input-body,
body.student-page .student-learning-section-body,
body.student-page .student-topic-list {
  padding: 0 !important;
  margin: 0 !important;
  gap: 10px !important;
}

body.student-page .student-learning-input-section {
  margin: 0 !important;
}

body.student-page .student-learning-section-toggle,
body.student-page .student-chapter-title,
body.student-page .student-category-toggle {
  min-width: 0 !important;
}

body.student-page .student-chapter-card {
  padding: 8px !important;
  border-radius: 22px !important;
}

body.student-page .student-chapter-card.open {
  padding: 8px !important;
}

body.student-page .student-topic-group,
body.student-page .student-topic-group.open {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.student-page .student-topic-children {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: 0 !important;
}

body.student-page .student-category-toggle {
  padding: 12px 14px !important;
  border-radius: 20px !important;
}

/* r56: Make student era/period rows read as parents, and skip visual parity with category rows. */
body.student-page .student-topic-group.level-1 {
  margin: 10px 0 12px !important;
}

body.student-page .student-topic-group.level-1 > .student-category-toggle {
  position: relative;
  min-height: 66px !important;
  padding: 16px 18px 16px 22px !important;
  border: 1.5px solid rgba(178, 188, 226, 0.78) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fff4fb 0%, #edf7ff 100%) !important;
  box-shadow: 0 18px 34px rgba(124, 119, 180, 0.14) !important;
}

body.student-page .student-topic-group.level-1 > .student-category-toggle::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d79ab8, #9db9e4) !important;
}

body.student-page .student-topic-group.level-1 > .student-category-toggle span {
  color: #15243a !important;
  font-size: 1.08em !important;
  font-weight: 950 !important;
}

body.student-page .student-topic-group.level-1 > .student-category-toggle em {
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.66) !important;
  color: #52657e !important;
  font-weight: 900 !important;
}

body.student-page .student-topic-group.level-1 > .student-topic-children {
  margin-top: 10px !important;
  padding: 0 4px !important;
}

body.student-page .student-topic-group.level-1.flat-children > .student-topic-children {
  display: grid !important;
  gap: 10px !important;
}

body.student-page .student-topic-group.level-2 > .student-category-toggle {
  min-height: 52px !important;
  margin-left: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(226, 218, 250, 0.72) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 10px 18px rgba(124, 119, 180, 0.07) !important;
}

body.student-page .student-topic-group.level-2 > .student-category-toggle span {
  color: #627087 !important;
  font-weight: 880 !important;
}

body.student-page .student-topic-group.level-2 > .student-category-toggle em {
  color: #6b7890 !important;
  font-weight: 820 !important;
}

body.student-page .student-topic-node {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 14px !important;
  border-radius: 24px !important;
}

body.student-page .student-topic-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
}

body.student-page .student-topic-title {
  min-width: 0 !important;
  line-height: 1.28 !important;
}

body.student-page .student-topic-node > em {
  justify-self: start !important;
  max-width: 100% !important;
}

body.student-page .knowledge-detail-top {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body.student-page .knowledge-completion-actions {
  display: grid !important;
  gap: 12px !important;
  margin: 16px 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255, 246, 251, 0.92), rgba(235, 248, 255, 0.9)) !important;
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.1) !important;
}

body.student-page .knowledge-completion-actions strong,
body.student-page .knowledge-completion-actions span {
  display: block !important;
}

body.student-page .knowledge-completion-actions span {
  margin-top: 4px !important;
  color: var(--otter-muted) !important;
  font-weight: 800 !important;
}

body.student-page .knowledge-completion-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body.student-page .knowledge-completion-actions button {
  min-width: 0 !important;
  min-height: 50px !important;
  white-space: normal !important;
}

body.student-page .mobile-study-nav {
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.student-page .mobile-study-nav button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 430px) {
  body.student-page .app-shell {
    padding-inline: 4px !important;
  }

  body.student-page .panel {
    padding: 8px !important;
  }

  body.student-page .student-course-input-section,
  body.student-page .student-chapter-card {
    padding: 7px !important;
  }

  body.student-page .student-topic-node {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  body.student-page .student-topic-thumb {
    width: 54px !important;
    height: 54px !important;
  }

  body.student-page .knowledge-completion-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.student-page .knowledge-completion-row button {
    min-height: 50px !important;
    padding-inline: 8px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
}

body.student-page .student-assistant-fab,
body.student-page .mobile-mini-player {
  border-radius: 22px !important;
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 18px 36px rgba(103, 92, 165, 0.18) !important;
}

body.student-page .badge,
body.student-page .status-pill,
body.student-page .knowledge-status-pill,
body.student-page .module-status {
  border-radius: 999px !important;
  background: rgba(221, 255, 240, 0.9) !important;
  color: #169565 !important;
}

/* r58: Deframe student knowledge detail so media modules use the screen width. */
@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] {
    padding-inline: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    display: grid !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 6px 88px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
    margin-inline: 0 !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-list {
    gap: 10px !important;
    width: 100% !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head {
    margin-inline: 2px !important;
    border-radius: 18px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-gallery,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-artwork_image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-memory-palace {
    padding-inline: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage {
    border-radius: 20px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage img {
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    padding-inline: 2px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    padding: 10px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-gallery,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-artwork_image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card.module-memory-palace {
    padding-inline: 6px !important;
  }
}
body.student-page img.secure-media-loading {
  opacity: 0.72;
  filter: blur(1px);
  background:
    linear-gradient(110deg, rgba(255, 247, 251, 0.95), rgba(236, 247, 255, 0.95)),
    #f6f8ff;
}

body.student-page img.secure-media-ready {
  opacity: 1;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

/* r60: Teacher mobile app shell. The /teacher entry reuses real admin APIs,
   but gets a single-column touch layout instead of the desktop three-column editor. */
html.teacher-mobile-shell,
html.teacher-mobile-shell body.admin-page {
  width: 100%;
  min-width: 0 !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 217, 223, 0.82), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(220, 232, 248, 0.82), transparent 34%),
    linear-gradient(180deg, #fffafa 0%, #f8f2f7 48%, #eef5f1 100%) !important;
}

html.teacher-mobile-shell body.admin-page .app-shell {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

html.teacher-mobile-shell body.admin-page .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  height: auto !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
  border-bottom: 1px solid rgba(151, 130, 156, 0.22) !important;
  background: rgba(255, 252, 249, 0.9) !important;
  box-shadow: 0 12px 30px rgba(86, 70, 96, 0.1) !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup::after,
html.teacher-mobile-shell body.admin-page .admin-breadcrumb,
html.teacher-mobile-shell body.admin-page .topbar-menu-button,
html.teacher-mobile-shell body.admin-page .version-pill,
html.teacher-mobile-shell body.admin-page .admin-user-chip,
html.teacher-mobile-shell body.admin-page .player-actions [data-admin-target="mobile"] {
  display: none !important;
}

html.teacher-mobile-shell body.admin-page .brand-mark {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup h1 {
  max-width: none !important;
  font-size: 18px !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup .eyebrow {
  display: block !important;
  margin: 0 !important;
  color: #9b6b86 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup .eyebrow::before {
  content: "手机";
}

html.teacher-mobile-shell body.admin-page .brand-lockup .eyebrow {
  font-size: 0 !important;
}

html.teacher-mobile-shell body.admin-page .brand-lockup .eyebrow::before {
  font-size: 11px !important;
}

html.teacher-mobile-shell body.admin-page .player-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin-left: 0 !important;
}

html.teacher-mobile-shell body.admin-page .cloud-sync-indicator,
html.teacher-mobile-shell body.admin-page .file-upload-indicator {
  order: 2 !important;
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: 32px !important;
  justify-content: center !important;
  font-size: 11px !important;
}

html.teacher-mobile-shell body.admin-page #refreshButton {
  min-height: 38px !important;
  padding: 8px 12px !important;
}

html.teacher-mobile-shell body.admin-page #adminLoginPanel {
  width: min(420px, calc(100vw - 24px)) !important;
  margin: 22px auto !important;
  padding: 18px !important;
  border-radius: 24px !important;
}

html.teacher-mobile-shell body.admin-page .admin-dashboard {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-width: 0 !important;
  min-height: auto !important;
}

html.teacher-mobile-shell body.admin-page .admin-command-center {
  position: sticky !important;
  top: 64px !important;
  z-index: 50 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: block !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(151, 130, 156, 0.18) !important;
  padding: 8px 10px !important;
  background: rgba(255, 252, 249, 0.86) !important;
  -webkit-overflow-scrolling: touch !important;
}

html.teacher-mobile-shell body.admin-page .command-copy,
html.teacher-mobile-shell body.admin-page .dashboard-stat-grid,
html.teacher-mobile-shell body.admin-page .category-grid,
html.teacher-mobile-shell body.admin-page .storage-note,
html.teacher-mobile-shell body.admin-page .admin-collapse-button {
  display: none !important;
}

html.teacher-mobile-shell body.admin-page .admin-side-menu {
  display: flex !important;
  width: max-content !important;
  gap: 8px !important;
}

html.teacher-mobile-shell body.admin-page .admin-side-menu strong {
  display: none !important;
}

html.teacher-mobile-shell body.admin-page .admin-side-menu button {
  flex: 0 0 auto !important;
  min-height: 42px !important;
  border: 1px solid rgba(151, 130, 156, 0.2) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: rgba(255, 252, 249, 0.82) !important;
  color: #5e687c !important;
  box-shadow: 0 8px 18px rgba(86, 70, 96, 0.08) !important;
  white-space: nowrap !important;
}

html.teacher-mobile-shell body.admin-page .admin-side-menu button::before {
  display: none !important;
}

html.teacher-mobile-shell body.admin-page .admin-side-menu button.active {
  border-color: rgba(185, 121, 157, 0.42) !important;
  background: linear-gradient(135deg, #f8d9df, #dce8f8) !important;
  color: #7e4f72 !important;
}

html.teacher-mobile-shell body.admin-page .admin-panels {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 10px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: visible !important;
}

html.teacher-mobile-shell body.admin-page .module-panel.active,
html.teacher-mobile-shell body.admin-page .panel {
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}

html.teacher-mobile-shell body.admin-page .panel-heading {
  padding: 12px !important;
  border-radius: 18px !important;
}

html.teacher-mobile-shell body.admin-page .panel-heading h2 {
  font-size: 18px !important;
}

html.teacher-mobile-shell body.admin-page .form-grid,
html.teacher-mobile-shell body.admin-page .student-controls,
html.teacher-mobile-shell body.admin-page .mobile-release-form {
  grid-template-columns: 1fr !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-preview-shell {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-sidebar,
html.teacher-mobile-shell body.admin-page .knowledge-right-rail {
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 22px !important;
  padding: 12px !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-sidebar {
  max-height: 48vh !important;
  overflow: auto !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-right-rail {
  order: 3 !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-main {
  order: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.teacher-mobile-shell body.admin-page #knowledgePreviewPanel.active .knowledge-edit-row {
  grid-template-columns: 1fr !important;
}

html.teacher-mobile-shell body.admin-page #knowledgePreviewPanel.active .module-section-title {
  align-items: stretch !important;
}

html.teacher-mobile-shell body.admin-page #knowledgePreviewPanel.active .module-bulk-actions,
html.teacher-mobile-shell body.admin-page .knowledge-action-row,
html.teacher-mobile-shell body.admin-page .upload-action-row,
html.teacher-mobile-shell body.admin-page .module-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html.teacher-mobile-shell body.admin-page #knowledgePreviewPanel.active .module-editor-suite-topbar,
html.teacher-mobile-shell body.admin-page .module-card-head,
html.teacher-mobile-shell body.admin-page .knowledge-card-head {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html.teacher-mobile-shell body.admin-page #knowledgePreviewPanel.active .module-editor-toolbar-actions {
  justify-content: flex-start !important;
}

html.teacher-mobile-shell body.admin-page .module-editor-suite-settings-row .module-suite-side-card,
html.teacher-mobile-shell body.admin-page .module-library-card .module-palette-group > div,
html.teacher-mobile-shell body.admin-page .mobile-access-grid {
  grid-template-columns: 1fr !important;
}

html.teacher-mobile-shell body.admin-page .action-rail-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html.teacher-mobile-shell body.admin-page .knowledge-module-card,
html.teacher-mobile-shell body.admin-page .module-suite-workspace,
html.teacher-mobile-shell body.admin-page .module-suite-edit-card,
html.teacher-mobile-shell body.admin-page .module-table-preview,
html.teacher-mobile-shell body.admin-page .knowledge-table-preview,
html.teacher-mobile-shell body.admin-page .vf-table-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

html.teacher-mobile-shell body.admin-page button,
html.teacher-mobile-shell body.admin-page input,
html.teacher-mobile-shell body.admin-page select,
html.teacher-mobile-shell body.admin-page textarea {
  font-size: 16px !important;
}

html.teacher-mobile-shell body.admin-page .primary,
html.teacher-mobile-shell body.admin-page .secondary,
html.teacher-mobile-shell body.admin-page .compact-link {
  min-height: 42px !important;
}

html.teacher-mobile-shell body.admin-page .admin-preview-modal,
html.teacher-mobile-shell body.admin-page .knowledge-content-preview-modal {
  padding: 12px !important;
}

html.teacher-mobile-shell body.admin-page .admin-preview-card,
html.teacher-mobile-shell body.admin-page .knowledge-content-preview-card {
  width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
}

@media (min-width: 760px) {
  html.teacher-mobile-shell body.admin-page .knowledge-preview-shell {
    grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr) !important;
  }

html.teacher-mobile-shell body.admin-page .knowledge-right-rail {
    grid-column: 1 / -1 !important;
  }
}

/* r66: Give iPad/tablet student clients a real tablet canvas instead of the phone-width shell. */
@media (min-width: 761px) and (max-width: 1366px) {
  body.student-page .app-shell {
    width: min(1120px, 100vw) !important;
    max-width: 1120px !important;
    min-height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 clamp(22px, 4vw, 52px) 118px !important;
    border-radius: 0 !important;
  }

  body.student-page .main-content,
  body.student-page .mobile-panel-stack,
  body.student-page #knowledgeStudyPanel,
  body.student-page .student-knowledge-layout,
  body.student-page .student-course-input-section,
  body.student-page .student-chapter-list,
  body.student-page .student-topic-list,
  body.student-page .student-topic-children,
  body.student-page .student-knowledge-detail,
  body.student-page .student-module-list {
    width: 100% !important;
    max-width: none !important;
  }

  body.student-page .panel {
    padding: clamp(18px, 2.4vw, 30px) !important;
    border-radius: 34px !important;
  }

  body.student-page .student-course-input-section {
    padding: clamp(18px, 2.2vw, 28px) !important;
    border-radius: 32px !important;
  }

  body.student-page .student-chapter-card {
    padding: 18px !important;
    border-radius: 30px !important;
  }

  body.student-page .student-topic-group.level-1 > .student-topic-children,
  body.student-page .student-topic-group.level-1.flat-children > .student-topic-children {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 0 !important;
  }

  body.student-page .student-topic-node {
    grid-template-columns: 82px minmax(0, 1fr) auto !important;
    gap: 16px !important;
    min-height: 118px !important;
    padding: 18px !important;
    border-radius: 28px !important;
  }

  body.student-page .student-topic-thumb {
    width: 82px !important;
    height: 82px !important;
    border-radius: 22px !important;
  }

  body.student-page .student-topic-title {
    font-size: clamp(18px, 2.05vw, 24px) !important;
    line-height: 1.25 !important;
  }

  body.student-page .student-topic-node > em {
    justify-self: end !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] {
    padding-inline: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    display: grid !important;
    gap: 18px !important;
    padding: 0 0 118px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head {
    max-width: 980px !important;
    margin-inline: auto !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    width: 100% !important;
    max-width: 980px !important;
    margin-inline: auto !important;
    padding: clamp(20px, 3vw, 34px) !important;
    border-radius: 30px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage {
    width: 100% !important;
    max-width: 920px !important;
    margin-inline: auto !important;
    border-radius: 28px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage img {
    border-radius: 24px !important;
  }

  body.student-page .mobile-study-nav {
    width: min(720px, calc(100vw - 96px)) !important;
    max-width: 720px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px !important;
    border-radius: 34px !important;
  }

  body.student-page .mobile-study-nav button {
    min-height: 60px !important;
    font-size: 18px !important;
  }
}

html.ios-screen-captured body::before {
  content: "录屏保护中，请关闭屏幕录制后继续学习";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(10, 18, 32, 0.96);
  color: #fff;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  text-align: center;
  letter-spacing: 0;
}

/* r67: iPad/tablet layout must not inherit the 430px phone shell. */
@media (min-width: 761px) and (max-width: 1366px) {
  body.student-page {
    --app-max-width: 1180px;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.student-page .app-shell {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 18px)
      clamp(28px, 5vw, 72px)
      calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.student-page .topbar {
    margin:
      calc((env(safe-area-inset-top, 0px) + 18px) * -1)
      calc(clamp(28px, 5vw, 72px) * -1)
      22px !important;
    padding:
      calc(env(safe-area-inset-top, 0px) + 16px)
      clamp(28px, 5vw, 72px)
      16px !important;
  }

  body.student-page .student-workspace:not(.hidden) {
    display: block !important;
    width: min(1180px, calc(100vw - 56px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.student-page .main-content,
  body.student-page .mobile-panel-stack,
  body.student-page .student-main,
  body.student-page .main-column,
  body.student-page #knowledgeStudyPanel,
  body.student-page #knowledgeStudyPanel.active-mobile-panel,
  body.student-page .student-knowledge-layout,
  body.student-page .student-course-input-section,
  body.student-page .student-course-input-body,
  body.student-page .student-learning-section-body,
  body.student-page .student-chapter-list,
  body.student-page .student-topic-list,
  body.student-page .student-topic-children,
  body.student-page .student-knowledge-detail,
  body.student-page .student-module-list {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.student-page #learningPanel.active-mobile-panel,
  body.student-page #coursePanel.active-mobile-panel,
  body.student-page #lessonPanel.active-mobile-panel,
  body.student-page #knowledgeStudyPanel.active-mobile-panel,
  body.student-page #playerPanel.active-mobile-panel,
  body.student-page #materialsPanel.active-mobile-panel,
  body.student-page #reviewPanel.active-mobile-panel,
  body.student-page #progressPanel.active-mobile-panel,
  body.student-page #accountPanel.active-mobile-panel,
  body.student-page #eventPanel.active-mobile-panel {
    display: grid !important;
    width: 100% !important;
  }

  body.student-page .panel {
    padding: clamp(18px, 2.4vw, 30px) !important;
    border-radius: 34px !important;
  }

  body.student-page .student-knowledge-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.student-page .student-course-input-section,
  body.student-page .student-course-input-section.open,
  body.student-page .student-chapter-card,
  body.student-page .student-chapter-card.open {
    padding: clamp(16px, 2vw, 24px) !important;
    border-radius: 30px !important;
  }

  body.student-page .student-topic-group.open {
    padding: 12px !important;
    border-radius: 28px !important;
  }

  body.student-page .student-topic-group.level-1 > .student-topic-children,
  body.student-page .student-topic-group.level-1.flat-children > .student-topic-children {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
    margin: 12px 0 0 !important;
  }

  body.student-page .student-topic-node {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 16px !important;
    min-height: 126px !important;
    width: 100% !important;
    padding: 18px !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
  }

  body.student-page .student-topic-thumb {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 88px !important;
    height: 88px !important;
    border-radius: 24px !important;
  }

  body.student-page .student-topic-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    min-width: 0 !important;
    overflow: visible !important;
    color: var(--student-text, #172033) !important;
    font-size: clamp(20px, 2vw, 25px) !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
  }

  body.student-page .student-topic-node > em {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] {
    padding-inline: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 116px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head {
    width: min(1040px, 100%) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    width: min(1040px, 100%) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: clamp(20px, 3vw, 34px) !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .module-video-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .video-stage {
    width: 100% !important;
    max-width: 980px !important;
    margin-inline: auto !important;
    border-radius: 28px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .memory-palace-stage img {
    border-radius: 24px !important;
  }

  body.student-page .mobile-study-nav {
    left: 50% !important;
    right: auto !important;
    width: min(860px, calc(100vw - 120px)) !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 10px !important;
    border-radius: 34px !important;
  }

  body.student-page .mobile-study-nav button {
    min-height: 60px !important;
    font-size: 18px !important;
  }
}

@media (min-width: 1061px) and (max-width: 1366px) {
  body.student-page .student-topic-group.level-1 > .student-topic-children,
  body.student-page .student-topic-group.level-1.flat-children > .student-topic-children {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* r70: Keep the student course directory flat and use the available width. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
  width: 100% !important;
  max-width: none !important;
  padding-inline: max(8px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-knowledge-layout,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-list,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-section,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-section.open,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card.open,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-list,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.open,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-children {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-title,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle {
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(130, 119, 150, 0.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle::before,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle::before {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-topic-children,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1.flat-children > .student-topic-children,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-topic-children {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 12px 6px !important;
  gap: 5px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(130, 119, 150, 0.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  border-radius: 12px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-title {
  grid-column: 2 / 4 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node > em,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-status {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  margin: 0 !important;
}

@media (min-width: 700px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
    padding-inline: 24px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
    grid-template-columns: 68px minmax(0, 1fr) auto !important;
    min-height: 96px !important;
    padding: 14px 10px !important;
    gap: 6px 16px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
    width: 66px !important;
    height: 66px !important;
  }
}

/* r71: Turn the student directory into a readable vertical mind map. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
  --map-line: rgba(160, 132, 180, 0.38);
  --map-dot: #c982a4;
  --map-course-a: #fff2f6;
  --map-course-b: #eef5ff;
  --map-chapter-a: #fff8ed;
  --map-chapter-b: #f5efff;
  --map-group-a: #eef8f1;
  --map-group-b: #f8f5ea;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-section {
  position: relative !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-toggle {
  position: relative !important;
  z-index: 2 !important;
  padding: 16px 18px !important;
  border: 1px solid rgba(200, 154, 177, 0.32) !important;
  border-radius: 18px !important;
  background: linear-gradient(120deg, var(--map-course-a), var(--map-course-b)) !important;
  box-shadow: 0 8px 22px rgba(109, 91, 130, 0.08) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body {
  position: relative !important;
  padding: 18px 0 4px 30px !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 34px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: var(--map-line);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card.open {
  position: relative !important;
  padding: 0 0 20px 20px !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::before {
  content: "";
  position: absolute;
  top: 27px;
  left: -15px;
  width: 35px;
  height: 2px;
  background: var(--map-line);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::after {
  content: "";
  position: absolute;
  top: 22px;
  left: -20px;
  width: 10px;
  height: 10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--map-dot);
  box-shadow: 0 0 0 1px rgba(160, 132, 180, 0.2);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-title {
  position: relative !important;
  z-index: 1 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(197, 171, 142, 0.3) !important;
  border-radius: 15px !important;
  background: linear-gradient(120deg, var(--map-chapter-a), var(--map-chapter-b)) !important;
  box-shadow: 0 5px 15px rgba(113, 94, 130, 0.06) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-list {
  position: relative !important;
  padding: 14px 0 0 26px !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-list::before,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 28px;
  left: 11px;
  width: 2px;
  border-radius: 2px;
  background: var(--map-line);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.open {
  position: relative !important;
  padding: 0 0 14px 18px !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group::before,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 25px !important;
  left: -15px !important;
  width: 33px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--map-line) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle {
  position: relative !important;
  z-index: 1 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(143, 169, 145, 0.3) !important;
  border-radius: 14px !important;
  background: linear-gradient(120deg, var(--map-group-a), var(--map-group-b)) !important;
  box-shadow: 0 4px 12px rgba(92, 112, 96, 0.05) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-children,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-topic-children,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1.flat-children > .student-topic-children,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-topic-children {
  position: relative !important;
  display: block !important;
  padding: 12px 0 0 25px !important;
  overflow: visible !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
  position: relative !important;
  z-index: 1 !important;
  min-height: 78px !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(153, 151, 173, 0.2) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 4px 13px rgba(98, 87, 115, 0.05) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node::after {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #8eb8aa;
  box-shadow: 0 0 0 1px rgba(113, 155, 143, 0.22);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
  width: 54px !important;
  height: 54px !important;
  border-radius: 11px !important;
}

@media (max-width: 430px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body {
    padding-left: 24px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body::before {
    left: 11px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card.open {
    padding-left: 15px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::before {
    left: -13px;
    width: 28px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::after {
    left: -17px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-list,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1.flat-children > .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-topic-children {
    padding-left: 20px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.open {
    padding-left: 14px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    gap: 4px 10px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
    width: 50px !important;
    height: 50px !important;
  }
}

@media (min-width: 700px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body {
    padding-left: 42px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-body::before {
    left: 21px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card.open {
    padding-left: 28px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::before {
    left: -21px;
    width: 49px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-card::after {
    left: -26px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1.flat-children > .student-topic-children,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-topic-children {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 16px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group {
    grid-column: 1 / -1 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
    min-height: 92px !important;
    margin-bottom: 0 !important;
  }
}

/* r75: Focus the concrete knowledge page on the topic and its learning modules. */
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .topbar,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] > .panel-heading {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 86px !important;
  padding: 18px 24px !important;
  border: 1px solid rgba(210, 198, 241, 0.92) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(255, 247, 251, 0.98), rgba(239, 235, 255, 0.96)) !important;
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.12) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
  margin: 0 !important;
  color: var(--otter-ink, #1e2742) !important;
  font-size: clamp(28px, 6vw, 38px) !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  text-align: center !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row small {
  color: var(--otter-muted, #77829a) !important;
  font-weight: 850 !important;
  text-align: center !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row .knowledge-status-pill {
  position: static !important;
  margin: 0 !important;
}

@media (max-width: 430px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame {
    min-height: 78px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
  }
}

/* r76: image-module explanation audio, prominent refresh, and separated detail header. */
body.admin-page .module-explanation-audio-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(170, 150, 208, 0.28);
  border-radius: var(--radius-lg, 18px);
  background: linear-gradient(135deg, rgba(255, 249, 252, 0.98), rgba(242, 239, 255, 0.94));
}

body.admin-page .module-explanation-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.admin-page .module-explanation-audio-current {
  display: grid;
  flex: 1 1 280px;
  gap: 6px;
  min-width: 0;
}

body.admin-page .module-explanation-audio-current audio {
  width: 100%;
}

body.admin-page .module-explanation-audio-current strong,
body.admin-page .module-explanation-audio-empty {
  overflow: hidden;
  color: var(--muted, #64748b);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .knowledge-refresh-row-top {
  margin: 0 0 16px;
}

body.student-page .knowledge-refresh-row-top .student-refresh-button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3px !important;
  width: 100% !important;
  min-height: 64px !important;
  padding: 12px 18px !important;
  border-radius: var(--radius-lg, 18px) !important;
  background: linear-gradient(135deg, #7b61ff, #4aaef8) !important;
  color: #fff !important;
  text-align: left !important;
  box-shadow: 0 14px 28px rgba(82, 112, 232, 0.24) !important;
}

body.student-page .knowledge-refresh-row-top .student-refresh-button strong {
  font-size: 16px;
  font-weight: 950;
}

body.student-page .knowledge-refresh-row-top .student-refresh-button span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 750;
}

body.student-page .knowledge-keyword-search {
  position: relative;
  z-index: 24;
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

body.student-page .knowledge-keyword-search-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 1px solid rgba(88, 151, 127, 0.32);
  border-radius: 18px;
  padding: 8px 10px 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(42, 111, 84, 0.1);
}

body.student-page .knowledge-keyword-search-icon {
  color: #2f8061;
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
}

body.student-page .knowledge-keyword-search-bar label {
  color: #285c49;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

body.student-page .knowledge-keyword-search-bar input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 0 !important;
  padding: 0 8px !important;
  background: transparent !important;
  color: #172033;
  font-size: 15px;
  box-shadow: none !important;
  outline: 0;
}

body.student-page .knowledge-keyword-search-bar input::placeholder {
  color: #94a39d;
}

body.student-page .knowledge-keyword-search-clear {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #e8f4ef;
  color: #2f7158;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

body.student-page .knowledge-keyword-search-results {
  overflow: hidden;
  border: 1px solid rgba(88, 151, 127, 0.26);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(29, 78, 60, 0.16);
}

body.student-page #knowledgeStudyPanel.knowledge-search-active .student-knowledge-layout,
body.student-page #knowledgeStudyPanel.knowledge-search-active .knowledge-progress-card {
  display: none !important;
}

body.student-page .knowledge-keyword-search-summary {
  border-bottom: 1px solid rgba(88, 151, 127, 0.16);
  padding: 9px 14px;
  color: #668076;
  font-size: 12px;
  font-weight: 850;
}

body.student-page .knowledge-keyword-search-list {
  display: grid;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.student-page .knowledge-keyword-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 0;
  border-bottom: 1px solid rgba(88, 151, 127, 0.12);
  border-radius: 0;
  padding: 10px 14px;
  background: transparent;
  color: #172033;
  text-align: left;
  box-shadow: none;
}

body.student-page .knowledge-keyword-search-result:last-child {
  border-bottom: 0;
}

body.student-page .knowledge-keyword-search-result:hover,
body.student-page .knowledge-keyword-search-result:focus-visible {
  background: #f0f8f4;
}

body.student-page .knowledge-keyword-search-result span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.student-page .knowledge-keyword-search-result strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .knowledge-keyword-search-result small {
  overflow: hidden;
  color: #74857e;
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .knowledge-keyword-search-result em {
  color: #2f8061;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.student-page .knowledge-keyword-search-state {
  display: grid;
  gap: 5px;
  padding: 18px 16px;
  text-align: center;
}

body.student-page .knowledge-keyword-search-state strong {
  color: #294c40;
  font-size: 14px;
  font-weight: 950;
}

body.student-page .knowledge-keyword-search-state span {
  color: #7a8a84;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 640px) {
  body.student-page .knowledge-keyword-search-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 7px;
    min-height: 54px;
    padding-left: 12px;
  }

  body.student-page .knowledge-keyword-search-bar label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  body.student-page .knowledge-keyword-search-bar input {
    font-size: 14px;
  }
}

body.student-page .student-image-explanation-audio {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

body.student-page .student-image-explanation-audio button {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid rgba(126, 102, 220, 0.26);
  border-radius: var(--radius-md, 14px);
  background: linear-gradient(135deg, #fff7fb, #f0edff);
  color: var(--otter-ink, #1e2742);
  text-align: left;
  box-shadow: 0 10px 22px rgba(98, 81, 167, 0.1);
}

body.student-page .student-image-explanation-audio button.playing {
  border-color: rgba(100, 75, 226, 0.58);
  background: linear-gradient(135deg, #eee8ff, #e1efff);
}

body.student-page .student-image-explanation-audio button > img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body.student-page .student-image-explanation-audio button strong {
  white-space: nowrap;
}

body.student-page .student-image-explanation-audio button small {
  min-width: 0;
  overflow: hidden;
  color: var(--otter-muted, #77829a);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .student-image-explanation-audio > em {
  padding-left: 4px;
  color: var(--otter-muted, #77829a);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
  align-content: start !important;
  gap: 14px !important;
  padding-top: 12px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-back {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  justify-self: start !important;
  margin: 0 0 2px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
  position: relative !important;
  z-index: 0 !important;
  margin: 0 !important;
}

/* r81: Show every learning-module tab without horizontal swiping. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: visible !important;
  padding: 6px !important;
  scroll-snap-type: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 5px 8px !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  scroll-snap-align: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button span {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  aspect-ratio: 1 / 1;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button strong {
  display: -webkit-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* r82: Give category titles a full row; place the knowledge-point count below. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: 8px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-category-toggle > span,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle > span,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle > span {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-category-toggle > em,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-1 > .student-category-toggle > em,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-group.level-2 > .student-category-toggle > em {
  display: block !important;
  justify-self: start !important;
  margin: 0 0 0 18px !important;
  white-space: nowrap !important;
}

/* r84: museum-style viewer must stay full-screen and must not inherit card/image rules. */
body.student-page.image-viewer-open .image-viewer {
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070a !important;
  box-shadow: none !important;
}

body.student-page .image-deep-zoom-viewer img {
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: fill !important;
  transform: none !important;
}

/* r88: module-type access switches inside the unit right-click menu. */
body.admin-page .knowledge-tree-menu.has-module-access {
  width: min(292px, calc(100vw - 24px));
}

body.admin-page .tree-menu-module-access[hidden] {
  display: none !important;
}

body.admin-page .tree-menu-module-access {
  display: grid;
  border-radius: 8px;
}

body.admin-page .tree-menu-module-access > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border-radius: 7px;
  padding: 6px 9px;
  color: #0f172a;
  cursor: pointer;
  font-size: 14px;
  font-weight: 850;
  list-style: none;
}

body.admin-page .tree-menu-module-access > summary::-webkit-details-marker {
  display: none;
}

body.admin-page .tree-menu-module-access > summary:hover,
body.admin-page .tree-menu-module-access[open] > summary {
  background: #eef6ff;
  color: #006fd6;
}

body.admin-page .tree-menu-module-access > summary span {
  font-size: 19px;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

body.admin-page .tree-menu-module-access[open] > summary span {
  transform: rotate(90deg);
}

body.admin-page .tree-menu-module-access-list {
  display: grid;
  gap: 5px;
  max-height: min(300px, calc(100vh - 250px));
  margin: 4px 0;
  overflow-y: auto;
  border: 1px solid #dbe7f6;
  border-radius: 9px;
  padding: 6px;
  background: #f8fbff;
  overscroll-behavior: contain;
}

body.admin-page .tree-menu-module-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  border: 1px solid #e1e9f2;
  border-radius: 8px;
  padding: 6px 7px;
  background: #fff;
  cursor: pointer;
}

body.admin-page .tree-menu-module-option.published {
  border-color: #a8dfbc;
  background: #f2fbf5;
}

body.admin-page .tree-menu-module-option.partial {
  border-color: #a9cfee;
  background: #f3f9ff;
}

body.admin-page .tree-menu-module-option.teacher-only {
  border-color: #ead7ac;
  background: #fffaf0;
}

body.admin-page .tree-menu-module-icon,
body.admin-page .tree-menu-module-icon > *,
body.admin-page .tree-menu-module-icon img {
  display: block;
  width: 26px !important;
  height: 26px !important;
  object-fit: contain;
}

body.admin-page .tree-menu-module-copy {
  min-width: 0;
}

body.admin-page .tree-menu-module-copy strong,
body.admin-page .tree-menu-module-copy em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .tree-menu-module-copy strong {
  color: #193049;
  font-size: 12px;
  font-weight: 900;
}

body.admin-page .tree-menu-module-copy em {
  margin-top: 2px;
  color: #6c7f92;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

body.admin-page .tree-menu-module-empty {
  padding: 10px;
  color: #6c7f92;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

/* r94: Keep student page changes stable and motion-free. */
body.student-page #learningPanel.active-mobile-panel,
body.student-page #coursePanel.active-mobile-panel,
body.student-page #lessonPanel.active-mobile-panel,
body.student-page #knowledgeStudyPanel.active-mobile-panel,
body.student-page #playerPanel.active-mobile-panel,
body.student-page #materialsPanel.active-mobile-panel,
body.student-page #reviewPanel.active-mobile-panel,
body.student-page #progressPanel.active-mobile-panel,
body.student-page #accountPanel.active-mobile-panel,
body.student-page #eventPanel.active-mobile-panel {
  animation: none !important;
}

/* r95: Show concise and expanded knowledge tables in one switchable window. */
body.student-page .knowledge-table-switcher {
  gap: 10px;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-guide {
  position: static !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button,
body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.version-core {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(151, 130, 156, 0.24) !important;
  border-radius: 14px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #5f6878 !important;
  text-align: center;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.active {
  border-color: rgba(119, 87, 214, 0.46) !important;
  background: linear-gradient(135deg, #eee8ff, #e8f5ff) !important;
  color: #5d46b5 !important;
  box-shadow: 0 8px 18px rgba(104, 82, 176, 0.12) !important;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button strong {
  font-size: 14px;
  text-align: center;
}

body.student-page .knowledge-table-version-window {
  width: 100%;
  min-width: 0;
}

body.student-page .knowledge-table-version-panel[hidden] {
  display: none !important;
}

body.student-page .knowledge-table-version-panel.active {
  display: block;
}

body.student-page .knowledge-table-version-panel > .student-module-card {
  width: 100%;
  margin: 0 !important;
}

body.student-page .knowledge-table-version-panel > .student-module-card > .student-module-head {
  display: none !important;
}

/* r96: Keep memory-palace clean and hint images in one reliable touch layer. */
body.student-page .student-memory-palace-module .memory-palace-viewer {
  touch-action: pan-y !important;
  -webkit-touch-callout: none;
}

body.student-page .student-memory-palace-module .memory-palace-stage > img.memory-palace-clean,
body.student-page .student-memory-palace-module .memory-palace-stage > img.memory-palace-hint {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage > img.memory-palace-clean {
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

body.student-page .student-memory-palace-module .memory-palace-stage > img.memory-palace-hint {
  z-index: 2;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.has-hint.is-pressed .memory-palace-clean {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.has-hint.is-pressed .memory-palace-hint {
  opacity: 1 !important;
  visibility: visible !important;
}

/* r97: Replace the main student tab bar with a one-row module dock in topic detail. */
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav {
  display: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 220 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--student-module-tab-count, 1), minmax(0, 1fr)) !important;
  width: min(680px, calc(100vw - 20px)) !important;
  height: auto !important;
  max-width: none !important;
  max-height: 70px !important;
  margin: 0 !important;
  padding: 7px !important;
  gap: 5px !important;
  align-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 218, 250, 0.94) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 18px 42px rgba(105, 93, 150, 0.2) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  scroll-snap-type: none !important;
  transform: translateX(-50%) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  padding: 7px 4px !important;
  gap: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background: transparent !important;
  color: #687386 !important;
  box-shadow: none !important;
  scroll-snap-align: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button span {
  display: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button strong {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(10px, 2.8vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button.active {
  border-color: rgba(119, 87, 214, 0.28) !important;
  background: linear-gradient(135deg, #eee8ff, #e9f5ff) !important;
  color: #654bc5 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell {
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}

/* r98: Native mobile fallback for press-and-hold memory-palace switching. */
body.student-page .student-memory-palace-module .memory-palace-viewer.has-hint:active .memory-palace-clean {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.student-page .student-memory-palace-module .memory-palace-viewer.has-hint:active .memory-palace-hint {
  opacity: 1 !important;
  visibility: visible !important;
}

/* r99: Mount topic-module navigation in the existing viewport-fixed student dock. */
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs {
  display: none !important;
  position: static !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  position: fixed !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 260 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--student-module-tab-count, 1), minmax(0, 1fr)) !important;
  align-items: center !important;
  width: min(680px, calc(100vw - 20px)) !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 6px !important;
  gap: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid #d4ab2f !important;
  border-radius: 22px !important;
  background: #fada5e !important;
  box-shadow: 0 14px 34px rgba(151, 111, 16, 0.28) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  transform: translateX(-50%) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #4f4018 !important;
  box-shadow: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button strong {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(14px, 3.8vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active {
  border-color: #bb8b13 !important;
  background: #fff4bd !important;
  color: #4b3510 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* r100: mastery celebration, subjective review and directory-based output. */
.mastery-celebration {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 46, 142, 0.2), transparent 26%),
    radial-gradient(circle at 80% 22%, rgba(255, 210, 38, 0.22), transparent 28%),
    radial-gradient(circle at 52% 78%, rgba(29, 208, 255, 0.2), transparent 30%);
  animation: mastery-layer-in 0.18s ease-out both;
}

.mastery-celebration.is-leaving {
  opacity: 0;
  transition: opacity 0.34s ease;
}

.mastery-fireworks {
  position: absolute;
  inset: 0;
}

.mastery-fireworks i {
  position: absolute;
  top: var(--firework-y);
  left: var(--firework-x);
  width: 5px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  background: hsl(var(--firework-hue) 96% 58%);
  box-shadow: 0 0 10px hsl(var(--firework-hue) 100% 64% / 0.78);
  transform: translate(-50%, -50%) rotate(var(--firework-angle)) translateX(0) scaleY(0.35);
  animation: mastery-firework-pop 0.82s cubic-bezier(0.15, 0.72, 0.32, 1) var(--firework-delay) both;
}

.mastery-celebration-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 40px));
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  padding: 28px 24px;
  color: #17213c;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(246, 241, 255, 0.95));
  box-shadow: 0 26px 70px rgba(89, 48, 158, 0.3), 0 0 0 7px rgba(255, 255, 255, 0.28);
  animation: mastery-card-pop 0.52s cubic-bezier(0.18, 1.2, 0.36, 1) both;
}

.mastery-celebration-card span {
  justify-self: center;
  border-radius: 999px;
  padding: 7px 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(110deg, #ff3f8e, #7857ff, #18bff1);
  box-shadow: 0 10px 22px rgba(111, 74, 236, 0.26);
}

.mastery-celebration-card strong {
  font-size: clamp(24px, 7vw, 38px);
  line-height: 1.18;
}

.mastery-celebration-card p {
  margin: 0;
  color: #68708a;
  font-weight: 800;
  line-height: 1.55;
}

@keyframes mastery-layer-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mastery-card-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.78); }
  68% { opacity: 1; transform: translateY(-3px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mastery-firework-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--firework-angle)) translateX(0) scaleY(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--firework-angle)) translateX(var(--firework-distance)) scaleY(1); }
}

body.student-page .subjective-quiz-form,
body.student-page .subjective-quiz-row {
  display: grid;
  gap: 12px;
}

body.student-page .subjective-quiz-row.reviewed {
  border-color: rgba(38, 168, 108, 0.42) !important;
  background: linear-gradient(135deg, #f4fff9, #f8fbff) !important;
}

body.student-page .subjective-quiz-row textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid rgba(156, 173, 202, 0.5);
  border-radius: 15px;
  padding: 13px 14px;
  color: var(--student-ink, #1f2c43);
  font: inherit;
  line-height: 1.65;
  background: rgba(255, 255, 255, 0.96);
  outline: none;
}

body.student-page .subjective-quiz-row textarea:focus {
  border-color: rgba(109, 83, 225, 0.66);
  box-shadow: 0 0 0 4px rgba(109, 83, 225, 0.1);
}

body.student-page .subjective-quiz-result {
  border-radius: 14px;
  padding: 12px 14px;
  color: #7b8499;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  background: #f7f9fd;
}

body.student-page .subjective-quiz-result.error {
  color: #b42347;
  background: #fff1f4;
}

body.student-page .subjective-quiz-result.has-feedback {
  padding: 0;
  background: transparent;
}

body.student-page .subjective-reference-answer {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(35, 164, 111, 0.3);
  border-radius: 17px;
  padding: 15px;
  background: linear-gradient(135deg, #edfff6, #eef7ff);
}

body.student-page .subjective-reference-answer > span {
  color: #25825e;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .subjective-reference-answer > strong {
  color: #183e35;
  font-size: 15px;
}

body.student-page .subjective-reference-answer p {
  margin: 0;
  color: #33485a;
  font-weight: 700;
  line-height: 1.72;
  white-space: pre-wrap;
}

body.student-page .output-directory-intro {
  display: grid;
  gap: 5px;
  margin-bottom: 12px;
  border: 1px solid rgba(130, 106, 225, 0.2);
  border-radius: 21px;
  padding: 16px;
  background: linear-gradient(135deg, #fff4fa, #eef8ff 54%, #fff9e9);
  box-shadow: 0 14px 34px rgba(80, 72, 148, 0.09);
}

body.student-page .output-directory-intro span,
body.student-page .output-directory-intro p {
  margin: 0;
  color: #737c91;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .output-directory-intro strong {
  color: #2a3150;
  font-size: 20px;
}

body.student-page .output-course-directory-list,
body.student-page .output-course-body,
body.student-page .output-chapter-body,
body.student-page .output-topic-quiz-list {
  display: grid;
  gap: 10px;
}

body.student-page .output-course-directory,
body.student-page .output-chapter-directory {
  border: 1px solid rgba(185, 194, 216, 0.52);
  border-radius: 20px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
}

body.student-page .output-chapter-directory {
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(247, 250, 255, 0.96), rgba(255, 250, 244, 0.96));
}

body.student-page .output-course-directory > summary,
body.student-page .output-chapter-directory > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 2px 5px;
  color: #28344e;
  cursor: pointer;
  list-style: none;
}

body.student-page .output-course-directory > summary::-webkit-details-marker,
body.student-page .output-chapter-directory > summary::-webkit-details-marker {
  display: none;
}

body.student-page .output-course-directory > summary strong::before,
body.student-page .output-chapter-directory > summary strong::before {
  content: "▸";
  display: inline-block;
  margin-right: 7px;
  color: #7857d8;
  transition: transform 0.18s ease;
}

body.student-page .output-course-directory[open] > summary strong::before,
body.student-page .output-chapter-directory[open] > summary strong::before {
  transform: rotate(90deg);
}

body.student-page .output-course-directory > summary span,
body.student-page .output-chapter-directory > summary span {
  color: #828ca0;
  font-size: 12px;
  font-weight: 850;
}

body.student-page .output-course-body,
body.student-page .output-chapter-body {
  padding-top: 8px;
}

body.student-page .output-topic-folder {
  display: grid;
  gap: 8px;
  border-left: 3px solid rgba(115, 88, 218, 0.28);
  padding-left: 9px;
}

body.student-page .output-topic-folder-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 3px 2px;
}

body.student-page .output-topic-folder-head span,
body.student-page .output-topic-folder-head em {
  border-radius: 999px;
  padding: 4px 8px;
  color: #6c64a0;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  background: #f0ecff;
}

body.student-page .output-topic-folder-head strong {
  min-width: 0;
  color: #2d3850;
  font-size: 14px;
  line-height: 1.35;
}

body.student-page .output-quiz-card {
  border-radius: 15px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(43, 68, 113, 0.07);
}

body.student-page .output-quiz-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 8px;
}

body.student-page .output-quiz-trigger strong,
body.student-page .output-quiz-trigger span {
  min-width: 0;
}

body.student-page .output-quiz-trigger span {
  grid-column: 1 / -1;
}

body.student-page .output-quiz-trigger em {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .mastery-celebration-card {
    border-radius: 24px;
    padding: 24px 18px;
  }

  body.student-page .output-course-directory,
  body.student-page .output-chapter-directory {
    padding: 8px;
  }

  body.student-page .output-topic-folder-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.student-page .output-topic-folder-head em {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mastery-fireworks i {
    display: none;
  }

  .mastery-celebration,
  .mastery-celebration-card {
    animation: none;
  }
}

/* r104: Output is a focused, one-question-at-a-time practice flow. */
body.student-page .output-directory-intro {
  gap: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vf-line) !important;
  border-radius: 0 !important;
  padding: 4px 0 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .output-directory-intro strong {
  font-size: 22px !important;
  line-height: 1.3;
}

body.student-page .output-continue-button {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 950;
}

body.student-page .output-course-directory-list,
body.student-page .output-course-body,
body.student-page .output-chapter-body,
body.student-page .output-topic-quiz-list {
  gap: 0 !important;
}

body.student-page .output-course-directory,
body.student-page .output-chapter-directory {
  border: 0 !important;
  border-bottom: 1px solid var(--vf-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .output-course-directory > summary,
body.student-page .output-chapter-directory > summary {
  min-height: 52px !important;
  padding: 8px 0 !important;
}

body.student-page .output-course-body,
body.student-page .output-chapter-body {
  padding: 0 0 8px !important;
}

body.student-page .output-chapter-directory {
  margin-left: 18px;
}

body.student-page .output-topic-folder {
  gap: 0 !important;
  border: 0 !important;
  padding: 4px 0 4px 18px !important;
}

body.student-page .output-topic-folder-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 42px;
  padding: 7px 0 !important;
}

body.student-page .output-topic-folder-head > span {
  display: none !important;
}

body.student-page .output-topic-folder-head em {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--vf-muted) !important;
}

body.student-page .output-quiz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  border: 0 !important;
  border-top: 1px solid #edf2f8 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  background: transparent !important;
  color: var(--vf-text);
  text-align: left;
  box-shadow: none !important;
}

body.student-page .output-quiz-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.student-page .output-quiz-row strong,
body.student-page .output-quiz-row small {
  overflow-wrap: anywhere;
}

body.student-page .output-quiz-row strong {
  font-size: 15px;
}

body.student-page .output-quiz-row small {
  color: var(--vf-muted);
  font-size: 12px;
}

body.student-page .output-quiz-row em {
  color: var(--vf-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

body.student-page #reviewPanel.output-practice-active > .panel-heading {
  display: none !important;
}

body.student-page #reviewPanel.output-practice-active,
body.student-page #reviewPanel.output-practice-active .review-list,
body.student-page .output-practice-screen,
body.student-page .output-practice-quiz {
  min-width: 0;
}

body.student-page #reviewPanel.output-practice-active {
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #reviewPanel.output-practice-active .review-list {
  gap: 0 !important;
}

body.student-page .output-practice-screen {
  display: grid;
  gap: 18px;
  width: 100%;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

body.student-page .output-practice-header {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid var(--vf-line);
  padding: 0 0 16px;
}

body.student-page .output-practice-back {
  justify-self: start;
  min-height: 44px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--vf-blue) !important;
  font-size: 14px;
  font-weight: 900;
  box-shadow: none !important;
}

body.student-page .output-practice-header small {
  color: var(--vf-muted);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .output-practice-header h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.3;
}

body.student-page .output-practice-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--vf-muted);
  font-size: 13px;
  font-weight: 850;
}

body.student-page .output-practice-meta strong {
  color: var(--vf-blue);
}

body.student-page .output-practice-progress {
  height: 6px;
  overflow: hidden;
  background: #e6edf7;
}

body.student-page .output-practice-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--vf-blue), var(--vf-green));
  transition: none !important;
}

body.student-page .output-practice-quiz .student-module-quiz-form {
  display: grid;
  gap: 14px;
  width: 100%;
}

body.student-page .output-practice-quiz .student-module-quiz-head {
  display: none !important;
}

body.student-page .output-practice-quiz .student-module-quiz-head strong {
  font-size: 14px;
}

body.student-page .output-practice-quiz .student-module-quiz-form .quiz-question-row {
  gap: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 42px 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .output-practice-quiz .quiz-ignore-button {
  top: 0;
  right: 0;
}

body.student-page .quiz-preference-toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  z-index: 10080;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(88vw, 430px);
  border: 1px solid rgba(171, 126, 13, 0.3);
  border-radius: 14px;
  background: #fff4bd;
  color: #4f3c08;
  padding: 11px 13px;
  box-shadow: 0 12px 30px rgba(79, 60, 8, 0.2);
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 800;
}

body.student-page .quiz-preference-toast span {
  flex: 1;
  min-width: 0;
}

body.student-page .quiz-preference-toast button {
  min-height: 34px;
  border: 1px solid rgba(79, 60, 8, 0.34);
  border-radius: 10px;
  background: #fff;
  color: #4f3c08;
  padding: 6px 12px;
  font-weight: 900;
  white-space: nowrap;
}

body.student-page .quiz-feedback-memory {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  border-top: 1px solid rgba(106, 79, 185, 0.18);
  padding-top: 12px;
}

body.student-page .quiz-feedback-memory figcaption {
  color: #6546b8;
  font-size: 14px;
  font-weight: 900;
}

body.student-page .quiz-feedback-memory img {
  display: block;
  width: 100%;
  max-height: 52vh;
  border-radius: 10px;
  object-fit: contain;
  background: #f7f4ff;
}

body.student-page .output-practice-quiz .quiz-question-row > strong {
  font-size: clamp(19px, 5.2vw, 23px);
  line-height: 1.55 !important;
}

body.student-page .output-practice-quiz .quiz-choice-list {
  gap: 10px;
}

body.student-page .output-practice-quiz .quiz-choice-option {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  min-height: 58px;
  border: 1px solid var(--vf-line) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.student-page .output-practice-quiz .quiz-choice-option:has(input:checked) {
  border-color: rgba(22, 119, 255, 0.65) !important;
  background: var(--vf-blue-soft) !important;
}

body.student-page .output-practice-quiz .quiz-choice-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

body.student-page .output-practice-quiz .quiz-choice-option em {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

body.student-page .output-practice-quiz .quiz-choice-option b {
  font-size: 16px;
  line-height: 1.45;
}

body.student-page .output-practice-quiz .output-single-submit {
  order: 4;
  width: 100%;
  min-height: 48px;
  font-size: 15px;
}

body.student-page .output-practice-quiz .auto-submit-question .output-single-submit {
  display: none !important;
}

body.student-page .output-practice-quiz .module-quiz-result {
  order: 5;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .output-practice-quiz .module-quiz-result:not(.has-feedback):not(.error) {
  display: none !important;
}

body.student-page .output-practice-quiz .output-single-pager {
  order: 6;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr) minmax(82px, auto);
  padding-top: 4px;
}

body.student-page .output-practice-quiz .output-single-pager button {
  min-height: 44px;
}

body.student-page .output-practice-quiz .output-single-pager button:disabled {
  opacity: 0.38;
  box-shadow: none !important;
}

body.student-page .output-practice-quiz .quiz-feedback-card,
body.student-page .output-practice-quiz .quiz-feedback-item,
body.student-page .output-practice-quiz .subjective-reference-answer {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.student-page .output-practice-quiz .quiz-feedback-card {
  border-left: 4px solid #ef6b6b !important;
  padding: 10px 0 10px 13px !important;
  background: #fff8f8 !important;
}

body.student-page .output-practice-quiz .quiz-feedback-item {
  border-top: 1px solid rgba(239, 107, 107, 0.22) !important;
  padding: 10px 0 0 !important;
  background: transparent !important;
}

body.student-page .output-practice-quiz .subjective-reference-answer {
  border-left: 4px solid var(--vf-green) !important;
  padding: 10px 0 10px 13px !important;
  background: #f3fff9 !important;
}

body.student-page .output-practice-quiz textarea {
  width: 100%;
  min-height: 150px;
}

body.student-page .output-practice-quiz .module-quiz-next-note {
  color: #138a5a;
  font-size: 15px;
  font-weight: 950;
}

/* r115: spaced review, wrong-book filter, and direct relearning after a wrong answer. */
body.student-page .output-quiz-view-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 14px;
  background: #fff2b8;
}

body.student-page .output-quiz-view-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #665821;
  font-size: 14px;
  font-weight: 900;
}

body.student-page .output-quiz-view-tabs button.active {
  background: #fff;
  color: #4d38b8;
  box-shadow: 0 4px 12px rgba(92, 71, 171, 0.12);
}

body.student-page .output-quiz-view-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 3px;
  border-radius: 999px;
  background: #ef6b6b;
  color: #fff;
  font-size: 11px;
}

body.student-page .quiz-relearning-panel {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid rgba(239, 107, 107, 0.28);
  padding-top: 12px;
}

body.student-page .quiz-relearning-panel > div:first-child {
  display: grid;
  gap: 3px;
}

body.student-page .quiz-relearning-panel > div:first-child strong {
  color: #8e3030;
  font-size: 16px;
}

body.student-page .quiz-relearning-panel > div:first-child span {
  color: #786b6b;
  font-size: 12px;
  font-weight: 750;
}

body.student-page .quiz-relearning-modules {
  display: grid;
}

body.student-page .quiz-relearning-modules button {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border: 0;
  border-bottom: 1px solid rgba(139, 112, 112, 0.16);
  padding: 7px 0;
  background: transparent;
  color: #29344d;
  text-align: left;
}

body.student-page .quiz-relearning-modules button > span {
  color: #8e6565;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .quiz-relearning-modules button > strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  body.student-page #reviewPanel.output-practice-active.active-mobile-panel {
    min-height: calc(100dvh - var(--header-height) - var(--tabbar-height) - 24px) !important;
  }

  body.student-page .output-practice-screen {
    gap: 15px;
  }
}

@media (max-width: 390px) {
  body.student-page .output-practice-quiz .output-single-pager {
    grid-template-columns: 76px minmax(0, 1fr) 76px;
    gap: 7px;
  }

  body.student-page .output-practice-quiz .output-single-pager button {
    min-width: 0;
    padding-inline: 8px !important;
  }
}
/* r118: Student profile center, learning calendar, favorites and review entry. */
body.student-page .panel-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

body.student-page .account-panel {
  gap: 14px !important;
  background: linear-gradient(180deg, rgba(250, 248, 255, 0.98), rgba(240, 248, 255, 0.96)) !important;
}

body.student-page .account-panel > .panel-heading.row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 8px 10px !important;
}

body.student-page .account-panel > .panel-heading.row > button {
  width: auto !important;
  min-height: 40px !important;
  padding-inline: 12px !important;
}

body.student-page .profile-summary-card {
  grid-template-columns: 78px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border: 1px solid rgba(226, 218, 250, 0.96) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.1) !important;
}

body.student-page .profile-avatar-button {
  position: relative;
  display: grid;
  width: 74px;
  height: 74px;
  min-height: 0 !important;
  place-items: center;
  overflow: visible;
  border: 0 !important;
  border-radius: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .profile-avatar,
body.student-page .profile-avatar-image {
  display: grid;
  width: 74px !important;
  height: 74px !important;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffe4f1, #ded9ff) !important;
  color: var(--otter-purple-deep) !important;
  box-shadow: 0 10px 24px rgba(120, 102, 255, 0.2);
  object-fit: cover;
  font-size: 28px !important;
  font-weight: 950;
}

body.student-page .profile-avatar-button > em {
  position: absolute;
  right: -7px;
  bottom: -5px;
  min-width: 36px;
  border: 2px solid #fff;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  background: var(--otter-purple) !important;
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1.2;
}

body.student-page .profile-summary-copy {
  min-width: 0;
}

body.student-page .profile-summary-copy strong {
  font-size: 20px !important;
  font-weight: 950;
}

body.student-page .profile-summary-copy span,
body.student-page .profile-summary-copy small {
  display: block;
  overflow-wrap: anywhere;
}

body.student-page .profile-summary-copy small {
  margin-top: 6px;
  color: var(--otter-muted);
  font-size: 11px;
  font-weight: 780;
}

body.student-page .profile-summary-card > #profileStatus {
  align-self: start;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  background: var(--otter-mint) !important;
  color: #13784d !important;
  font-size: 11px !important;
  white-space: nowrap;
}

body.student-page .profile-summary-card > #profileStatus.danger {
  background: #ffe9ec !important;
  color: #a63245 !important;
}

body.student-page .account-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.student-page .account-metric {
  min-height: 76px !important;
  border: 1px solid rgba(226, 218, 250, 0.9) !important;
  border-radius: 20px !important;
  padding: 12px 8px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  text-align: center;
  box-shadow: 0 10px 22px rgba(103, 92, 165, 0.06);
}

body.student-page .account-metric strong {
  color: var(--otter-purple-deep) !important;
  font-size: 22px !important;
  font-weight: 950;
}

body.student-page .account-metric span {
  margin-top: 5px !important;
  color: var(--otter-muted) !important;
  font-size: 11px !important;
}

body.student-page .account-action-list {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(226, 218, 250, 0.96);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.08);
}

body.student-page .account-action-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  border: 0 !important;
  border-bottom: 1px solid rgba(226, 218, 250, 0.72) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  background: transparent !important;
  color: var(--otter-ink) !important;
  text-align: left;
  box-shadow: none !important;
}

body.student-page .account-action-list > button:last-child {
  border-bottom: 0 !important;
}

body.student-page .account-action-list > button.active {
  background: linear-gradient(90deg, rgba(255, 232, 245, 0.76), rgba(231, 227, 255, 0.72)) !important;
}

body.student-page .account-action-list strong,
body.student-page .account-action-list span {
  display: block;
}

body.student-page .account-action-list strong {
  font-size: 15px;
  font-weight: 920;
}

body.student-page .account-action-list span {
  color: var(--otter-muted);
  font-size: 12px;
  font-weight: 760;
  text-align: right;
}

body.student-page .account-subsection {
  display: grid;
  gap: 12px;
  scroll-margin-top: 12px;
  border: 1px solid rgba(226, 218, 250, 0.96);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 34px rgba(103, 92, 165, 0.08);
}

body.student-page .account-subsection.hidden {
  display: none !important;
}

body.student-page .account-subsection-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

body.student-page .account-subsection-head > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

body.student-page .account-subsection-head strong,
body.student-page .account-subsection-head span {
  display: block;
}

body.student-page .account-subsection-head strong {
  color: var(--otter-ink);
  font-size: 16px;
}

body.student-page .account-subsection-head span {
  color: var(--otter-muted);
  font-size: 12px;
  font-weight: 760;
}

body.student-page .account-subsection-head button {
  min-height: 34px !important;
  border: 1px solid rgba(120, 102, 255, 0.2) !important;
  border-radius: 14px !important;
  padding: 6px 10px !important;
  background: #f3f0ff !important;
  color: var(--otter-purple-deep) !important;
  font-size: 11px;
  font-weight: 900;
  box-shadow: none !important;
}

body.student-page .account-calendar-week,
body.student-page .account-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

body.student-page .account-calendar-week span {
  color: #9aa3b8;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

body.student-page .account-calendar-day,
body.student-page .account-calendar-empty {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--otter-ink);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .account-calendar-day.active {
  background: linear-gradient(135deg, #ffe4f1, #e4e0ff);
  color: var(--otter-purple-deep);
  box-shadow: inset 0 0 0 1px rgba(120, 102, 255, 0.12);
}

body.student-page .account-calendar-day.today {
  border-color: var(--otter-purple);
}

body.student-page .account-calendar-note {
  margin: 0;
  color: var(--otter-muted);
  font-size: 11px;
  font-weight: 730;
}

body.student-page .account-topic-list {
  display: grid;
  gap: 8px;
}

body.student-page .account-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(226, 218, 250, 0.85) !important;
  border-radius: 18px !important;
  padding: 11px 13px !important;
  background: #fbfaff !important;
  color: var(--otter-ink) !important;
  text-align: left;
  box-shadow: none !important;
}

body.student-page .account-topic-row strong,
body.student-page .account-topic-row small {
  display: block;
  overflow-wrap: anywhere;
}

body.student-page .account-topic-row strong {
  font-size: 14px;
  font-weight: 900;
}

body.student-page .account-topic-row small {
  margin-top: 4px;
  color: var(--otter-muted);
  font-size: 11px;
  font-weight: 730;
}

body.student-page .account-topic-row em {
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--otter-lavender);
  color: var(--otter-purple-deep);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .account-topic-empty {
  border: 1px dashed rgba(120, 102, 255, 0.28);
  border-radius: 18px;
  padding: 18px;
  background: #fbfaff;
  color: var(--otter-muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.7;
  text-align: center;
}

body.student-page .knowledge-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

body.student-page .knowledge-favorite-button {
  min-height: 34px !important;
  border: 1px solid rgba(120, 102, 255, 0.24) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  background: #fff !important;
  color: var(--otter-purple-deep) !important;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none !important;
}

body.student-page .knowledge-favorite-button.active {
  background: linear-gradient(135deg, #ffe4f1, #e5e1ff) !important;
}

@media (max-width: 760px) {
  body.student-page .profile-summary-card {
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    gap: 11px !important;
    padding: 14px !important;
  }

  body.student-page .profile-avatar-button,
  body.student-page .profile-avatar,
  body.student-page .profile-avatar-image {
    width: 66px !important;
    height: 66px !important;
  }

  body.student-page .profile-summary-copy strong {
    font-size: 18px !important;
  }

  body.student-page .profile-summary-copy span {
    font-size: 11px !important;
  }

  body.student-page .account-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.student-page .account-action-list > button {
    min-height: 60px;
    padding-inline: 14px !important;
  }

  body.student-page .account-subsection {
    padding: 13px;
  }

  body.student-page .account-calendar-day,
  body.student-page .account-calendar-empty {
    border-radius: 12px;
    font-size: 11px;
  }

  body.student-page .knowledge-detail-meta-row {
    align-items: flex-start !important;
  }
}

@media (max-width: 390px) {
  body.student-page .profile-summary-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body.student-page .profile-avatar-button,
  body.student-page .profile-avatar,
  body.student-page .profile-avatar-image {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  body.student-page .profile-summary-card > #profileStatus {
    grid-column: 2;
    justify-self: start;
  }

  body.student-page .account-action-list span {
    max-width: 120px;
  }
}

/* r130: stable quiz feedback, explicit answer colors, and visible completion counts. */
body.student-page .output-practice-stats {
  color: #4f5f73;
  font-size: 13px;
  font-weight: 900;
}

body.student-page .quiz-choice-option.answer-correct,
body.student-page .output-practice-quiz .quiz-choice-option.answer-correct {
  border-color: #22a06b !important;
  background: #eafaf2 !important;
  color: #11633f !important;
}

body.student-page .quiz-choice-option.answer-correct em {
  background: #22a06b !important;
  color: #fff !important;
}

body.student-page .quiz-choice-option.answer-wrong,
body.student-page .output-practice-quiz .quiz-choice-option.answer-wrong {
  border-color: #e25555 !important;
  background: #fff0f0 !important;
  color: #9f2424 !important;
}

body.student-page .quiz-choice-option.answer-wrong em {
  background: #e25555 !important;
  color: #fff !important;
}

body.student-page .module-quiz-result.is-pending {
  color: #2967b2 !important;
}

body.student-page .output-practice-quiz .quiz-feedback-card.correct {
  border-left-color: #22a06b !important;
  background: #f1fcf6 !important;
}

body.student-page .output-practice-quiz .quiz-feedback-card.correct .quiz-feedback-item {
  border-top-color: rgba(34, 160, 107, 0.24) !important;
}

/* r133: keep learning-module navigation compact and confined to topic study. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs {
  grid-template-columns: repeat(var(--student-module-tab-count, 1), minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 5px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button {
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 4px 3px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs button strong {
  display: block !important;
  overflow: hidden !important;
  font-size: clamp(10px, 2.9vw, 13px) !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 5px !important;
  gap: 3px !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 3px !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button strong {
  font-size: clamp(10px, 3vw, 13px) !important;
  white-space: nowrap !important;
}

body.student-page:not([data-mobile-target="knowledgeStudyPanel"]) .mobile-study-nav.knowledge-module-dock,
body.student-page:not([data-knowledge-view="detail"]) .mobile-study-nav.knowledge-module-dock {
  display: none !important;
}

/* r139: optional podcast per learning module with upload-time trimming. */
body.admin-page .visual-title strong,
body.admin-page .module-suite-title-block > div > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.admin-page .module-podcast-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff1a8;
  color: #6b4b00;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .module-podcast-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

body.admin-page .module-podcast-badge.compact {
  width: 24px;
  height: 24px;
  padding: 0;
  justify-content: center;
}

body.admin-page .module-explanation-audio-editor .module-suite-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

body.admin-page .module-explanation-audio-editor .module-suite-card-head strong {
  white-space: nowrap;
}

body.student-page .student-module-head > strong {
  flex: 1 1 auto;
  min-width: 0;
}

body.student-page .student-module-podcast-button {
  display: grid;
  flex: 0 0 44px;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #d6ad32;
  border-radius: 50%;
  background: #fff4bd;
  color: #4b3510;
  box-shadow: 0 6px 14px rgba(151, 111, 16, 0.18);
}

body.student-page .student-module-podcast-button img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

body.student-page .student-module-podcast-button.playing {
  border-color: #7254d8;
  background: #eee8ff;
  box-shadow: 0 0 0 4px rgba(114, 84, 216, 0.12);
}

body.student-page .knowledge-table-podcast-tool {
  display: flex;
  justify-content: flex-end;
  min-height: 0;
  margin: 0 2px 8px;
}

body.student-page .knowledge-table-podcast-tool:empty {
  display: none;
  margin: 0;
}

body.student-page .module-podcast-dock {
  position: fixed;
  left: 50%;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  z-index: 275;
  display: grid;
  width: min(680px, calc(100vw - 20px));
  max-width: calc(100vw - 20px);
  min-width: 0;
  gap: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #d6ad32;
  border-radius: 20px;
  background: rgba(255, 250, 224, 0.97);
  box-shadow: 0 16px 36px rgba(120, 88, 19, 0.24);
  backdrop-filter: blur(18px) saturate(1.12);
  transform: translateX(-50%);
}

body.student-page .module-podcast-now {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body.student-page .module-podcast-now > img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body.student-page .module-podcast-now > div {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

body.student-page .module-podcast-now small {
  color: #8a6a1f;
  font-size: 10px;
  font-weight: 850;
}

body.student-page .module-podcast-now strong,
body.student-page .module-podcast-now span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .module-podcast-now strong {
  color: #392d16;
  font-size: 14px;
  font-weight: 950;
}

body.student-page .module-podcast-now span {
  color: #7b6d51;
  font-size: 10px;
  font-weight: 700;
}

body.student-page .module-podcast-toggle,
body.student-page .module-podcast-collapse,
body.student-page .module-podcast-close {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid rgba(107, 75, 0, 0.22);
  border-radius: 12px;
  background: #fff;
  color: #4b3510;
  font-weight: 900;
}

body.student-page .module-podcast-close {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}

body.student-page .module-podcast-collapse {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
}

body.student-page .module-podcast-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 8px;
}

body.student-page .module-podcast-controls > button {
  min-height: 40px;
  padding: 0 8px;
  border: 1px solid rgba(107, 75, 0, 0.2);
  border-radius: 10px;
  background: #fff;
  color: #4b3510;
  font-size: 11px;
  font-weight: 850;
}

body.student-page .module-podcast-controls input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #7a5ce0;
}

body.student-page .module-podcast-controls span {
  color: #665a42;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

body.student-page .module-podcast-controls select {
  min-height: 40px;
  padding: 0 6px;
  border: 1px solid rgba(107, 75, 0, 0.2);
  border-radius: 10px;
  background: #fff;
  color: #4b3510;
  font-size: 11px;
  font-weight: 850;
}

body.student-page.module-podcast-open .mobile-mini-player {
  display: none !important;
}

body.student-page.module-podcast-open .app-shell {
  padding-bottom: calc(182px + env(safe-area-inset-bottom, 0px)) !important;
}

/* r182: immersive image-note feed replaces the former student podcast library. */
body.student-page .memory-feed-shell {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  border-radius: 22px;
  background: #171510;
  color: #fffdf7;
}

body.student-page .memory-feed-toolbar {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 250px) 62px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  pointer-events: none;
}

body.student-page .memory-feed-toolbar button {
  pointer-events: auto;
}

body.student-page .memory-feed-text-button,
body.student-page .memory-feed-mode-switch,
body.student-page .memory-feed-enter,
body.student-page .memory-feed-actions button,
body.student-page .memory-feed-audio,
body.student-page .memory-feed-search {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.student-page .memory-feed-text-button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 0 11px;
  background: rgba(19, 17, 15, 0.58);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

body.student-page .memory-feed-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  padding: 3px;
  background: rgba(19, 17, 15, 0.58);
}

body.student-page .memory-feed-mode-switch button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

body.student-page .memory-feed-mode-switch button.active {
  background: rgba(255, 252, 244, 0.96);
  color: #29231c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

body.student-page .memory-feed-list {
  height: min(820px, 88vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #171510;
}

body.student-page .memory-feed-list::-webkit-scrollbar,
body.student-page .memory-feed-carousel::-webkit-scrollbar {
  display: none;
}

body.student-page .memory-feed-card {
  position: relative;
  width: 100%;
  height: min(820px, 88vh);
  min-height: 680px;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #171510;
  color: #ffffff;
}

body.student-page .memory-feed-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}

body.student-page .memory-feed-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  background: #171510;
}

body.student-page .memory-feed-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 42%;
}

body.student-page .memory-feed-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 18%, transparent 45%, rgba(7, 6, 5, 0.82) 82%, rgba(7, 6, 5, 0.94) 100%);
}

body.student-page .memory-feed-enter {
  position: absolute;
  z-index: 6;
  top: 72px;
  right: 16px;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(19, 17, 15, 0.6);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

body.student-page .memory-feed-actions {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: 248px;
  display: grid;
  gap: 14px;
}

body.student-page .memory-feed-actions button {
  display: grid;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  padding: 5px 3px;
  background: rgba(19, 17, 15, 0.6);
  color: #ffffff;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.2);
}

body.student-page .memory-feed-actions button:disabled {
  opacity: 0.52;
}

body.student-page .memory-feed-actions strong,
body.student-page .memory-feed-actions span {
  font-size: 10px;
  line-height: 1.15;
}

body.student-page .memory-feed-actions span {
  color: rgba(255, 255, 255, 0.66);
  font-weight: 750;
}

body.student-page .memory-feed-copy {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: 70px;
  bottom: 252px;
  display: grid;
  gap: 5px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

body.student-page .memory-feed-copy > strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .memory-feed-copy > span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .memory-feed-dots {
  display: flex;
  gap: 5px;
}

body.student-page .memory-feed-dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
}

body.student-page .memory-feed-dots i.active {
  width: 14px;
  background: #ffffff;
}

body.student-page .memory-feed-audio {
  position: absolute;
  z-index: 7;
  left: 12px;
  right: 12px;
  bottom: 80px;
  display: grid;
  gap: 8px;
  min-height: 154px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  padding: 13px 14px 11px;
  background: rgba(19, 17, 15, 0.74);
  color: #ffffff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25);
}

body.student-page .memory-feed-audio.no-audio {
  opacity: 0.78;
}

body.student-page .memory-feed-audio-head,
body.student-page .memory-feed-progress,
body.student-page .memory-feed-audio-controls {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.student-page .memory-feed-audio-head {
  justify-content: space-between;
}

body.student-page .memory-feed-audio-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body.student-page .memory-feed-audio-head strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .memory-feed-audio-head span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .memory-feed-audio-head button,
body.student-page .memory-feed-audio-controls button {
  min-width: 0;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

body.student-page .memory-feed-progress input {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  accent-color: #ffffff;
}

body.student-page .memory-feed-progress span {
  min-width: 72px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

body.student-page .memory-feed-audio-controls {
  justify-content: space-between;
}

body.student-page .memory-feed-audio-controls .memory-feed-play-main {
  min-width: 54px;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.82);
  background: #fffdf7;
  color: #201c17;
  font-size: 11px;
}

body.student-page .memory-feed-status,
body.student-page .memory-feed-empty {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  margin: 0;
  padding: 24px;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}

body.student-page .memory-feed-empty strong {
  color: #ffffff;
  font-size: 18px;
}

body.student-page .memory-feed-empty span {
  font-size: 12px;
}

body.student-page .memory-feed-search {
  position: absolute;
  z-index: 18;
  top: 64px;
  left: 12px;
  right: 12px;
  display: grid;
  gap: 8px;
  max-height: min(56vh, 420px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
  background: rgba(25, 22, 18, 0.92);
  color: #ffffff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
}

body.student-page .memory-feed-search.hidden {
  display: none;
}

body.student-page .memory-feed-search label {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

body.student-page .memory-feed-search > div:first-of-type {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

body.student-page .memory-feed-search input {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.94);
  color: #24201b;
  font-size: 15px;
}

body.student-page .memory-feed-search > div > button {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

body.student-page .memory-feed-search-results {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

body.student-page .memory-feed-search-results > span {
  padding: 8px 3px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
}

body.student-page .memory-feed-search-results button {
  display: grid;
  gap: 2px;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  text-align: left;
}

body.student-page .memory-feed-search-results button span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

body.student-page .memory-comments-backdrop,
body.student-page .memory-sleep-backdrop {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px 0;
  background: rgba(8, 7, 6, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

body.student-page .memory-comments-backdrop {
  z-index: 230;
}

body.student-page.memory-comments-open .mobile-study-nav:not(.knowledge-module-dock) {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.student-page .memory-comments-backdrop.hidden,
body.student-page .memory-sleep-backdrop.hidden {
  display: none;
}

body.student-page .memory-comments-sheet,
body.student-page .memory-sleep-sheet {
  width: min(100%, 640px);
  max-height: min(78dvh, 680px);
  border: 1px solid rgba(228, 216, 198, 0.86);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: #fffdf8;
  color: #2a241d;
  box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.26);
}

body.student-page .memory-comments-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(120px, 1fr) auto auto;
  gap: 10px;
}

body.student-page .memory-comments-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: #d8d0c6;
}

body.student-page .memory-comments-sheet header,
body.student-page .memory-sleep-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.student-page .memory-comments-sheet header > div {
  display: grid;
  gap: 2px;
}

body.student-page .memory-comments-sheet header strong,
body.student-page .memory-sleep-sheet header strong {
  color: #2a241d;
  font-size: 16px;
}

body.student-page .memory-comments-sheet header span {
  color: #81766b;
  font-size: 11px;
}

body.student-page .memory-comments-sheet header button,
body.student-page .memory-sleep-sheet header button,
body.student-page .memory-comment-card button {
  min-height: 32px;
  border: 1px solid #e3d9cd;
  border-radius: 999px;
  padding: 0 11px;
  background: #ffffff;
  color: #51473d;
  font-size: 11px;
  font-weight: 800;
}

body.student-page .memory-comments-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
}

body.student-page .memory-comment-card {
  position: relative;
  display: grid;
  gap: 6px;
  border-bottom: 1px solid #eee5da;
  padding: 5px 62px 10px 2px;
}

body.student-page .memory-comment-card > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

body.student-page .memory-comment-card strong {
  color: #342c25;
  font-size: 12px;
}

body.student-page .memory-comment-card span {
  color: #9a8f84;
  font-size: 10px;
}

body.student-page .memory-comment-card p {
  margin: 0;
  color: #51473d;
  font-size: 13px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

body.student-page .memory-comment-card button {
  position: absolute;
  top: 5px;
  right: 0;
}

body.student-page .memory-comments-empty {
  display: grid;
  place-content: center;
  gap: 4px;
  min-height: 130px;
  color: #8a7e72;
  text-align: center;
}

body.student-page .memory-comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

body.student-page .memory-comment-form textarea {
  min-height: 52px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid #e3d9cd;
  border-radius: 14px;
  padding: 10px 11px;
  background: #ffffff;
  color: #342c25;
  font: inherit;
}

body.student-page .memory-comment-form button {
  min-width: 58px;
  border: 0;
  border-radius: 14px;
  background: #28221c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
}

body.student-page .memory-comment-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

body.student-page .memory-comment-message {
  min-height: 16px;
  margin: 0;
  color: #8a6230;
  font-size: 11px;
}

body.student-page .memory-comment-message.is-success {
  color: #27834a;
  font-weight: 800;
}

body.student-page .memory-sleep-sheet {
  display: grid;
  gap: 14px;
}

body.student-page .memory-sleep-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .memory-sleep-options button {
  min-height: 48px;
  border: 1px solid #e3d9cd;
  border-radius: 14px;
  background: #ffffff;
  color: #40372f;
  font-size: 13px;
  font-weight: 800;
}

body.student-page .memory-sleep-options button:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  body.student-page[data-mobile-target="podcastPanel"] {
    overflow: hidden;
    background: #171510;
  }

  body.student-page[data-mobile-target="podcastPanel"] .topbar,
  body.student-page[data-mobile-target="podcastPanel"] .mobile-mini-player,
  body.student-page[data-mobile-target="podcastPanel"] .module-podcast-dock,
  body.student-page[data-mobile-target="podcastPanel"] .student-planner-fab {
    display: none !important;
  }

  body.student-page[data-mobile-target="podcastPanel"] .app-shell,
  body.student-page[data-mobile-target="podcastPanel"] .student-workspace,
  body.student-page[data-mobile-target="podcastPanel"] .student-main {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  body.student-page #podcastPanel.active-mobile-panel {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #171510;
    box-shadow: none;
  }

  body.student-page #podcastPanel .memory-feed-shell,
  body.student-page #podcastPanel .memory-feed-list,
  body.student-page #podcastPanel .memory-feed-card {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  body.student-page #podcastPanel .memory-feed-toolbar {
    position: fixed;
    top: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 8px;
    grid-template-columns: 52px minmax(0, 224px) 52px;
  }

  body.student-page #podcastPanel .memory-feed-enter {
    top: calc(58px + env(safe-area-inset-top, 0px));
    right: 10px;
  }

  body.student-page #podcastPanel .memory-feed-search {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
  }

  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav:not(.knowledge-module-dock) {
    z-index: 105;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(68px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(226, 217, 205, 0.95);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 248, 0.96);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav:not(.knowledge-module-dock) button {
    min-height: 44px;
    border: 0;
    background: transparent;
    color: #8a8178;
    font-size: 11px;
  }

  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav:not(.knowledge-module-dock) button.active {
    color: #bd7561;
  }

  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav .mobile-nav-refresh {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    align-self: center;
    justify-self: center;
    border-radius: 999px !important;
    background: #f4e7df !important;
    color: #7e5449 !important;
  }

  body.student-page #podcastPanel .memory-feed-audio {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-copy {
    bottom: calc(244px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-actions {
    bottom: calc(240px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 390px) {
  body.student-page #podcastPanel .memory-feed-toolbar {
    grid-template-columns: 48px minmax(0, 210px) 48px;
    gap: 5px;
  }

  body.student-page #podcastPanel .memory-feed-mode-switch button {
    padding: 0 7px;
    font-size: 11px;
  }

  body.student-page #podcastPanel .memory-feed-audio {
    left: 8px;
    right: 8px;
    min-height: 150px;
    padding: 11px;
  }

  body.student-page #podcastPanel .memory-feed-audio-controls {
    gap: 5px;
  }

  body.student-page #podcastPanel .memory-feed-audio-controls button {
    padding: 0 7px;
    font-size: 9px;
  }
}

@media (max-width: 430px) {
  body.student-page .module-podcast-dock {
    gap: 6px;
    padding: 9px 10px;
    border-radius: 18px;
  }

  body.student-page .module-podcast-now {
    grid-template-columns: 22px minmax(0, 1fr) 48px 40px 42px;
    gap: 4px;
  }

  body.student-page .module-podcast-now > img {
    width: 21px;
    height: 21px;
  }

  body.student-page .module-podcast-toggle {
    width: 48px;
    padding-inline: 4px;
  }

  body.student-page .module-podcast-collapse {
    width: 40px;
    padding-inline: 2px;
  }

  body.student-page .module-podcast-close {
    width: 42px;
    padding-inline: 2px;
  }

  body.student-page .module-podcast-controls {
    grid-template-columns: 48px minmax(0, 1fr) 48px 76px 72px;
    gap: 6px;
  }

  body.student-page .module-podcast-controls > button {
    padding-inline: 3px;
    font-size: 10px;
  }

  body.student-page .module-podcast-controls span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.student-page .module-podcast-controls select {
    width: 54px;
  }
}

body.admin-page.podcast-trim-open {
  overflow: hidden;
}

body.admin-page .podcast-trim-dialog {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
}

body.admin-page .podcast-trim-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 40, 0.55);
  backdrop-filter: blur(10px);
}

body.admin-page .podcast-trim-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(720px, 100%);
  min-width: 0;
  max-height: calc(100vh - 40px);
  gap: 18px;
  padding: 24px;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid rgba(111, 91, 204, 0.22);
  border-radius: 28px;
  background: #fffdf8;
  box-shadow: 0 28px 80px rgba(25, 23, 44, 0.3);
}

body.admin-page .podcast-trim-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.admin-page .podcast-trim-head > div {
  min-width: 0;
}

body.admin-page .podcast-trim-head h2,
body.admin-page .podcast-trim-head p {
  margin: 0;
}

body.admin-page .podcast-trim-head span {
  display: block;
  max-width: 560px;
  margin-top: 6px;
  overflow: hidden;
  color: #6e7484;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page #podcastTrimAudio {
  width: 100%;
}

body.admin-page .podcast-trim-target {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #e3ddf2;
  border-radius: 18px;
  background: #faf8ff;
}

body.admin-page .podcast-trim-target > span {
  color: #313a52;
  font-weight: 900;
}

body.admin-page .podcast-trim-target select {
  width: 100%;
  min-height: 46px;
}

body.admin-page .podcast-trim-target small {
  color: #747d91;
  line-height: 1.5;
}

body.admin-page .podcast-trim-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff0b8;
  color: #4d3810;
}

body.admin-page .podcast-trim-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.admin-page .podcast-trim-fields label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #e3ddf2;
  border-radius: 18px;
  background: #faf8ff;
}

body.admin-page .podcast-trim-fields label > span {
  grid-column: 1 / -1;
  color: #313a52;
  font-weight: 900;
}

body.admin-page .podcast-trim-fields input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #7866ff;
}

body.admin-page .podcast-trim-fields .podcast-trim-time-input {
  width: 92px;
  min-height: 44px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.admin-page .podcast-trim-note {
  margin: 0;
  color: #747d91;
  line-height: 1.6;
}

body.admin-page .podcast-trim-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.admin-page .podcast-trim-actions button {
  min-height: 48px;
}

@media (max-width: 620px) {
  body.admin-page .podcast-trim-dialog {
    padding: 10px;
  }

  body.admin-page .podcast-trim-card {
    max-height: calc(100vh - 20px);
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
  }

  body.admin-page .podcast-trim-summary,
  body.admin-page .podcast-trim-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .podcast-trim-summary {
    display: grid;
  }

  body.admin-page .podcast-trim-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .podcast-trim-fields label {
    grid-template-columns: minmax(0, 1fr) 76px;
  }

  body.admin-page .podcast-trim-fields .podcast-trim-time-input {
    width: 76px;
  }
}

/* r135: separate output modes and keep the active quiz inside one stable viewport. */
body.student-page .output-mode-chooser {
  display: grid;
  gap: 16px;
}

body.student-page .output-mode-chooser-head {
  display: grid;
  gap: 6px;
  padding: 6px 2px;
}

body.student-page .output-mode-chooser-head > span {
  color: #7866ff;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .output-mode-chooser-head > strong {
  color: #172137;
  font-size: 24px;
  font-weight: 950;
}

body.student-page .output-mode-chooser-head > p {
  margin: 0;
  color: #748096;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

body.student-page .output-mode-choice-grid {
  display: grid;
  gap: 12px;
}

body.student-page .output-mode-choice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  min-height: 142px !important;
  border: 1px solid rgba(120, 102, 255, 0.2) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  color: #172137 !important;
  text-align: left;
  box-shadow: 0 14px 32px rgba(75, 67, 131, 0.1) !important;
}

body.student-page .output-mode-choice.knowledge {
  background: linear-gradient(135deg, #f0edff, #edf8ff) !important;
}

body.student-page .output-mode-choice.chapter {
  background: linear-gradient(135deg, #fff3dc, #fffbe9) !important;
}

body.student-page .output-mode-choice em {
  grid-column: 1 / -1;
  color: #7866ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

body.student-page .output-mode-choice strong {
  font-size: 21px;
  font-weight: 950;
}

body.student-page .output-mode-choice span {
  color: #4c5870;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

body.student-page .output-mode-choice small {
  grid-column: 1 / -1;
  color: #738096;
  font-size: 12px;
  font-weight: 750;
}

body.student-page .output-section-back {
  justify-self: start;
  min-height: 36px !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #5c4acb !important;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none !important;
}

body.student-page .output-practice-screen {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
}

body.student-page .output-practice-screen.is-switching-question {
  opacity: 0;
  transform: translateY(-8px);
}

@media (max-width: 760px) {
  body.student-page.output-practice-active {
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.student-page.output-practice-active .app-shell {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.student-page.output-practice-active .student-workspace:not(.hidden) {
    height: calc(100dvh - var(--header-height) - 16px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-bottom: calc(var(--tabbar-height) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.student-page.output-practice-active #reviewPanel.output-practice-active.active-mobile-panel {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body.student-page.output-practice-active #reviewPanel.output-practice-active .review-list,
  body.student-page.output-practice-active .output-practice-screen {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.student-page.output-practice-active .output-practice-screen {
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0 !important;
  }

  body.student-page.output-practice-active .output-practice-quiz {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  body.student-page.output-practice-active .output-practice-quiz::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page .output-practice-screen {
    transition: none !important;
  }
}

/* r137: chapter papers use native page scrolling; only single-question practice locks the viewport. */
@media (max-width: 760px) {
  body.student-page.output-practice-active.chapter-paper-practice-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  body.student-page.output-practice-active.chapter-paper-practice-active .app-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.student-page.output-practice-active.chapter-paper-practice-active .student-workspace:not(.hidden),
  body.student-page.output-practice-active.chapter-paper-practice-active #reviewPanel.output-practice-active.active-mobile-panel,
  body.student-page.output-practice-active.chapter-paper-practice-active #reviewPanel.output-practice-active .review-list,
  body.student-page.output-practice-active.chapter-paper-practice-active .chapter-paper-practice-screen,
  body.student-page.output-practice-active.chapter-paper-practice-active .chapter-paper-practice-screen .output-practice-quiz {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-page.output-practice-active.chapter-paper-practice-active .chapter-paper-practice-screen {
    display: grid !important;
    grid-template-rows: auto auto !important;
    padding-bottom: calc(var(--tabbar-height) + 30px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.output-practice-active.chapter-paper-practice-active .chapter-paper-practice-screen .output-practice-quiz,
  body.student-page.output-practice-active.chapter-paper-practice-active .chapter-paper-practice-screen .student-module-quiz-form {
    touch-action: pan-y !important;
  }
}

/* r140-late: final student feedback overrides. */
body.student-page .topbar::before { content: none !important; display: none !important; }

body.student-page .chapter-paper-answer-panel {
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 24;
  display: grid; gap: 8px; border: 1px solid rgba(111, 101, 243, 0.2);
  border-radius: 16px; padding: 10px; background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(60, 72, 118, 0.12); backdrop-filter: blur(16px);
}
body.student-page .chapter-paper-answer-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #536078; font-size: 13px; font-weight: 900;
}
body.student-page .chapter-paper-answer-summary strong { color: #5546bd; }
body.student-page .chapter-paper-answer-card > summary {
  min-height: 38px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 12px; background: #f3f1ff; color: #5546bd;
  font-size: 13px; font-weight: 900; list-style: none;
}
body.student-page .chapter-paper-answer-card > summary::-webkit-details-marker { display: none; }
body.student-page .chapter-paper-answer-card > div {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding-top: 8px;
}
body.student-page .chapter-paper-answer-card button {
  min-width: 0 !important; min-height: 38px !important; padding: 0 !important;
  border: 1px solid #d9dfeb !important; border-radius: 10px !important;
  background: #fff !important; color: #647086 !important; box-shadow: none !important;
}
body.student-page .chapter-paper-answer-card button.answered {
  border-color: #7c6bea !important; background: #efedff !important; color: #5546bd !important;
}
body.student-page .chapter-paper-answer-card button.given-up,
body.student-page .chapter-paper-answer-card button.unanswered {
  border-color: #e3a451 !important; background: #fff6e8 !important; color: #a65b18 !important;
}
body.student-page .chapter-paper-quiz-form .quiz-question-row.unanswered {
  border-color: #e3a451 !important; box-shadow: 0 0 0 3px rgba(227, 164, 81, 0.13) !important;
}
body.student-page .chapter-paper-quiz-form .quiz-question-row.given-up {
  border-color: rgba(227, 164, 81, 0.58) !important; background: #fffaf2 !important;
}
body.student-page .quiz-dont-know-button.active {
  border-color: #d99843 !important; background: #fff1dc !important; color: #9f5719 !important;
}
body.student-page .quiz-feedback-next {
  width: 100% !important; min-height: 46px !important; margin-top: 10px !important;
}
body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
  width: min(430px, calc(100vw - 20px)) !important; padding: 6px !important; gap: 4px !important;
  border-radius: 22px !important; background: rgba(255, 255, 255, 0.96) !important;
}
body.student-page .mobile-study-nav:not(.knowledge-module-dock) button {
  min-height: 44px !important; padding: 0 5px !important; border-radius: 16px !important; font-size: 14px !important;
}
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  grid-template-columns: repeat(var(--student-module-tab-columns, 3), minmax(0, 1fr)) !important;
  width: min(680px, calc(100vw - 16px)) !important; height: auto !important;
  min-height: 50px !important; max-height: none !important; padding: 5px !important; overflow: visible !important;
  border-color: rgba(135, 119, 209, 0.24) !important; border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 12px 30px rgba(80, 72, 131, 0.16) !important;
}
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  height: 38px !important; min-height: 38px !important; max-height: 38px !important;
  border-radius: 14px !important; color: #667185 !important;
}
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active {
  border-color: rgba(112, 90, 215, 0.26) !important;
  background: linear-gradient(135deg, #eee9ff, #edf7ff) !important; color: #5c49bf !important;
}
@media (max-width: 760px) {
  body.student-page .topbar {
    min-height: 58px !important; padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px !important;
  }
  body.student-page .topbar button, body.student-page .topbar a { min-height: 44px; }
  body.student-page .chapter-paper-answer-card > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1180px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    width: min(680px, calc(100vw - 32px)) !important; max-width: 680px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; padding: 7px !important;
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button {
    min-height: 48px !important; font-size: 15px !important;
  }
}

/* r141: Compact learning list and app-style five-slot navigation. */
@media (max-width: 1180px) {
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .topbar,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] #knowledgeStudyPanel > .panel-heading,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] #knowledgeStudyPanel > .knowledge-refresh-row-top { display: none !important; }
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] #knowledgeStudyPanel {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  }
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search { margin-top: 0 !important; }
  body.student-page .app-shell { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    left: 50% !important; right: auto !important; bottom: 0 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: end !important;
    width: min(680px, 100vw) !important; max-width: 680px !important;
    min-height: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important; padding: 12px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important; gap: 0 !important;
    transform: translateX(-50%) !important; border: 0 !important;
    border-top: 1px solid rgba(223, 226, 234, 0.96) !important; border-radius: 24px 24px 0 0 !important;
    background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 -8px 28px rgba(48, 55, 72, 0.1) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important; overflow: visible !important;
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    min-width: 0 !important; min-height: 48px !important; padding: 10px 2px 2px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
    color: #8c8c91 !important; font-size: 15px !important; font-weight: 850 !important;
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active {
    background: transparent !important; color: #232634 !important; box-shadow: none !important;
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    place-self: end center !important; width: 64px !important; height: 64px !important;
    min-width: 64px !important; min-height: 64px !important; margin: 0 0 8px !important; padding: 0 !important;
    transform: translateY(-14px) !important; border: 0 !important; border-radius: 20px !important;
    background: linear-gradient(145deg, #ff3c59, #ff2442) !important;
    box-shadow: 0 12px 24px rgba(255, 36, 66, 0.28) !important;
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh img {
    display: block; width: 31px; height: 31px; margin: auto; filter: brightness(0) invert(1);
  }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh.is-loading img {
    animation: student-nav-refresh-spin 0.75s linear infinite;
  }
}
@keyframes student-nav-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 390px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) { font-size: 14px !important; }
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important;
  }
}

/* r142: flatter, shorter navigation and a real student podcast library. */
body.student-page #podcastPanel {
  display: none !important;
}

body.student-page #podcastPanel.active-mobile-panel {
  display: grid !important;
  width: 100% !important;
  min-height: calc(100dvh - var(--header-height) - 128px) !important;
}

body.student-page .podcast-library {
  display: grid;
  gap: 10px;
  align-content: start;
}

body.student-page .podcast-library-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(132, 111, 151, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

body.student-page .podcast-library-card > div,
body.student-page .podcast-library-empty {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.student-page .podcast-library-card small,
body.student-page .podcast-library-card span,
body.student-page .podcast-library-empty span {
  color: #798397;
  font-size: 12px;
  font-weight: 700;
}

body.student-page .podcast-library-card strong {
  overflow: hidden;
  color: #1f293d;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .podcast-library-play {
  min-width: 76px;
  min-height: 44px;
  border: 1px solid rgba(111, 84, 207, 0.3);
  border-radius: 12px;
  background: #f0edff;
  color: #624cc7;
  font-weight: 900;
}

body.student-page .podcast-library-play.playing {
  border-color: #6f54cf;
  background: #6f54cf;
  color: #fff;
}

body.student-page .podcast-library-empty {
  place-items: center;
  min-height: 160px;
  padding: 24px;
  text-align: center;
}

@media (max-width: 1180px) {
  body.student-page .app-shell {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.module-podcast-open .app-shell {
    padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    align-items: center !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
    box-shadow: 0 -3px 12px rgba(48, 55, 72, 0.08) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    min-height: 44px !important;
    padding: 6px 2px 2px !important;
    font-size: 14px !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    place-self: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    transform: translateY(-4px) !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 14px rgba(255, 36, 66, 0.22) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh img {
    width: 22px !important;
    height: 22px !important;
  }

  body.student-page .module-podcast-dock {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 390px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    font-size: 13px !important;
  }
}

/* r143: keep study screens focused and make both navigation rows compact. */
@media (max-width: 1180px) {
  body.student-page:not([data-mobile-target="accountPanel"]) .topbar {
    display: none !important;
  }

  body.student-page[data-mobile-target="accountPanel"] .topbar {
    display: flex !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel > .knowledge-keyword-search {
    display: none !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search-bar {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 3px 8px 3px 10px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search-bar > span {
    font-size: 20px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search-bar input {
    min-height: 34px !important;
    padding: 0 6px !important;
    font-size: 14px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="list"] .knowledge-keyword-search-clear {
    min-height: 30px !important;
    padding: 0 8px !important;
  }

  body.student-page .app-shell {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.module-podcast-open .app-shell {
    padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    align-items: center !important;
    min-height: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 2px 4px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 2px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    transform: translateY(-2px) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh img {
    width: 19px !important;
    height: 19px !important;
  }

  body.student-page .module-podcast-dock {
    bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .app-shell {
    padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-module-tabs {
    grid-template-columns: repeat(var(--student-module-tab-columns, 1), minmax(0, 1fr)) !important;
    width: min(680px, 100vw) !important;
    min-height: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    padding: 2px !important;
    gap: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-module-tabs button {
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* r144: one-row completion actions and a bottom-flush module dock. */
@media (max-width: 1180px) {
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .knowledge-completion-actions {
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .knowledge-completion-actions > div:first-child {
    display: none !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .knowledge-completion-row {
    display: contents !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .knowledge-completion-actions button,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .knowledge-completion-row button,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .output-launch-button {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    font-size: clamp(10px, 2.9vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
    bottom: 0 !important;
    min-height: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    padding: 2px 2px calc(2px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
    border-radius: 0 !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button[aria-selected="true"] {
    border-radius: 999px !important;
    border-color: rgba(112, 90, 215, 0.26) !important;
    background: linear-gradient(135deg, #eee9ff, #edf7ff) !important;
    color: #5c49bf !important;
  }
}

/* r145: restore comfortable touch height and keep quiz controls clear of iOS system bars. */
@media (max-width: 1180px) {
  body.student-page .app-shell {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.module-podcast-open .app-shell {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    bottom: 0 !important;
    width: min(680px, 100vw) !important;
    min-height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 3px 4px calc(3px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 0 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    min-height: 42px !important;
    height: 42px !important;
    padding: 3px 2px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    transform: translateY(-2px) !important;
  }

  body.student-page .module-podcast-dock {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.output-practice-active .output-practice-header {
    position: relative;
    z-index: 26;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    background: var(--vf-page, #fff) !important;
  }

  body.student-page.output-practice-active .output-practice-back {
    position: relative;
    z-index: 2;
    min-width: 112px;
    min-height: 44px;
    touch-action: manipulation;
  }
}

@media (max-width: 390px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    font-size: 13.5px !important;
  }
}

/* r156: warm museum-paper student UI, grounded in the selected knowledge-point references. */
body.student-page {
  --forest-paper: #fffaf0;
  --forest-paper-deep: #f9efd9;
  --forest-card: rgba(255, 253, 247, 0.96);
  --forest-ink: #2f190f;
  --forest-brown: #7d5d45;
  --forest-muted: #9c8069;
  --forest-orange: #f5a10b;
  --forest-orange-deep: #e87d00;
  --forest-orange-soft: #fff0ca;
  --forest-sage: #97a565;
  --forest-sage-soft: #edf0d9;
  --forest-line: rgba(214, 177, 123, 0.34);
  --forest-shadow: 0 18px 42px rgba(115, 75, 34, 0.09);
  --otter-ink: var(--forest-ink);
  --otter-muted: var(--forest-muted);
  --otter-purple: var(--forest-orange);
  --otter-purple-deep: var(--forest-orange-deep);
  --otter-lavender: var(--forest-orange-soft);
  --otter-blue: #f5ead6;
  --otter-peach: #fff2d9;
  --otter-mint: var(--forest-sage-soft);
  --color-primary: var(--forest-orange);
  --color-primary-weak: var(--forest-orange-soft);
  --color-success: var(--forest-sage);
  --color-text: var(--forest-ink);
  --color-text-2: var(--forest-brown);
  --color-text-3: var(--forest-muted);
  --color-border: var(--forest-line);
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 255, 255, 0.98), rgba(255, 250, 240, 0.74) 34%, transparent 62%),
    linear-gradient(180deg, #fffdf8 0%, var(--forest-paper) 54%, #fbf2df 100%) !important;
  color: var(--forest-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body.student-page .app-shell {
  background: transparent !important;
}

body.student-page .topbar {
  border-bottom: 1px solid var(--forest-line) !important;
  border-radius: 0 0 24px 24px !important;
  background: rgba(255, 252, 245, 0.94) !important;
  box-shadow: 0 10px 30px rgba(115, 75, 34, 0.07) !important;
}

body.student-page .brand-mark {
  border-color: #f2d9ad !important;
  background: var(--forest-paper) !important;
  box-shadow: 0 8px 20px rgba(115, 75, 34, 0.1) !important;
}

body.student-page .brand-lockup h1,
body.student-page .panel-heading h2,
body.student-page .panel-heading strong {
  color: var(--forest-ink) !important;
}

body.student-page .panel-heading {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .panel-heading h2 {
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

body.student-page .panel-heading p,
body.student-page .panel-heading span {
  color: var(--forest-muted) !important;
}

body.student-page .panel,
body.student-page .event-card,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .review-card,
body.student-page .progress-hero-card,
body.student-page .progress-course-card,
body.student-page .profile-summary-card,
body.student-page .account-subsection,
body.student-page .podcast-library-card {
  border-color: var(--forest-line) !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page button.primary,
body.student-page .primary,
body.student-page .primary-action,
body.student-page .start-quiz-button,
body.student-page .knowledge-next-button,
body.student-page .student-refresh-button,
body.student-page .output-continue-button {
  border: 1px solid rgba(231, 132, 0, 0.18) !important;
  background: linear-gradient(180deg, #ffc148, var(--forest-orange)) !important;
  color: #4f2b12 !important;
  box-shadow: 0 12px 26px rgba(232, 125, 0, 0.2) !important;
}

body.student-page button.secondary,
body.student-page .secondary,
body.student-page .ghost-button,
body.student-page .knowledge-status-actions button,
body.student-page .module-action-row button {
  border-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.92) !important;
  color: var(--forest-brown) !important;
  box-shadow: none !important;
}

body.student-page input,
body.student-page select,
body.student-page textarea {
  border-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.96) !important;
  color: var(--forest-ink) !important;
  box-shadow: inset 0 2px 8px rgba(111, 77, 42, 0.04) !important;
}

body.student-page input:focus,
body.student-page select:focus,
body.student-page textarea:focus,
body.student-page button:focus-visible,
body.student-page a:focus-visible {
  outline: 3px solid rgba(245, 161, 11, 0.3) !important;
  outline-offset: 2px !important;
}

/* Knowledge directory and its adjacent learning screens share one card language. */
body.student-page #knowledgeStudyPanel,
body.student-page #reviewPanel,
body.student-page #progressPanel,
body.student-page #podcastPanel,
body.student-page #accountPanel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .student-course-input-section,
body.student-page .student-course-input-section.open {
  border: 1px solid var(--forest-line) !important;
  border-radius: 24px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .student-course-input-toggle {
  border-radius: 20px !important;
  background: #fff9eb !important;
}

body.student-page .student-course-input-toggle span,
body.student-page .student-course-input-toggle em {
  color: var(--forest-brown) !important;
}

body.student-page .student-course-input-toggle strong {
  color: var(--forest-orange-deep) !important;
}

body.student-page .student-course-input-toggle > i,
body.student-page .knowledge-progress-card i,
body.student-page .progress-hero-card i,
body.student-page .progress-course-card i {
  background: #eee1ca !important;
}

body.student-page .student-course-input-toggle > i b,
body.student-page .knowledge-progress-card b,
body.student-page .progress-hero-card i b,
body.student-page .progress-course-card i b {
  background: linear-gradient(90deg, var(--forest-sage), var(--forest-orange)) !important;
}

body.student-page .student-learning-section-toggle,
body.student-page .student-learning-input-section.open .student-learning-section-toggle,
body.student-page .student-category-toggle {
  border-color: var(--forest-line) !important;
  background: linear-gradient(135deg, #fffdf6, #f5f0df) !important;
  color: var(--forest-ink) !important;
  box-shadow: 0 10px 22px rgba(115, 75, 34, 0.06) !important;
}

body.student-page .student-learning-input-section[data-learning-section^="chapterOrder"].open .student-learning-section-toggle {
  border-color: rgba(151, 165, 101, 0.42) !important;
  background: linear-gradient(135deg, #f4f3df, #fffaf0) !important;
}

body.student-page .learning-caret {
  background: #fff4cf !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .student-chapter-card,
body.student-page .student-chapter-card.open,
body.student-page .student-topic-node,
body.student-page .student-topic-node:nth-child(n),
body.student-page .importance-group-section,
body.student-page .importance-group-card {
  border-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.94) !important;
  box-shadow: 0 10px 24px rgba(115, 75, 34, 0.06) !important;
}

body.student-page .student-topic-node.active,
body.student-page .student-chapter-card.open {
  border-color: rgba(245, 161, 11, 0.48) !important;
  background: #fff7df !important;
}

body.student-page .student-topic-title,
body.student-page .student-topic-title-text,
body.student-page .student-chapter-card strong,
body.student-page .student-category-toggle span {
  color: var(--forest-ink) !important;
}

body.student-page .knowledge-progress-card {
  border-color: rgba(151, 165, 101, 0.38) !important;
  background: linear-gradient(135deg, var(--forest-sage-soft), #fff2ce) !important;
  color: var(--forest-ink) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
  --map-line: rgba(151, 165, 101, 0.36) !important;
  --map-dot: var(--forest-sage) !important;
  --map-course-a: #f4f3df !important;
  --map-course-b: #fff2ce !important;
  --map-chapter-a: #fff8e7 !important;
  --map-chapter-b: #f4f3df !important;
  --map-group-a: #f2f3df !important;
  --map-group-b: #fff9ed !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-toggle {
  border-color: rgba(151, 165, 101, 0.34) !important;
  background: linear-gradient(120deg, #f4f3df, #fff2ce) !important;
  box-shadow: 0 8px 22px rgba(115, 75, 34, 0.08) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-title {
  border-color: rgba(214, 177, 123, 0.34) !important;
  background: linear-gradient(120deg, #fff8e7, #f4f3df) !important;
  box-shadow: 0 5px 15px rgba(115, 75, 34, 0.06) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
  border-color: rgba(214, 177, 123, 0.28) !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow: 0 9px 22px rgba(115, 75, 34, 0.06) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node em.status-mastered {
  background: var(--forest-sage-soft) !important;
  color: #657141 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node em.status-unmarked,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node em.status-review {
  background: var(--forest-orange-soft) !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .student-assistant-fab {
  border-color: #fff4d3 !important;
  background: #fffaf0 !important;
  box-shadow: 0 12px 28px rgba(115, 75, 34, 0.18) !important;
}

body.student-page .student-assistant-fab img {
  object-fit: contain !important;
}

/* Selected reference: concrete knowledge-point page. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
  gap: 18px !important;
  padding: 18px 18px calc(122px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .knowledge-detail-hero {
  display: grid;
  gap: 16px;
}

body.student-page .knowledge-detail-nav-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-back {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 2px 4px 0 !important;
  background: transparent !important;
  color: var(--forest-ink) !important;
  font-family: Georgia, serif !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.student-page .knowledge-detail-nav-row > strong {
  overflow: hidden;
  color: var(--forest-ink);
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .knowledge-detail-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--forest-ink);
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

body.student-page .knowledge-detail-brand img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 124px !important;
  align-items: end !important;
  gap: 8px !important;
  min-height: 184px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame {
  display: grid !important;
  place-items: initial !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.student-page .knowledge-topic-title-frame > p {
  margin: 0 !important;
  color: var(--forest-sage) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
  margin: 0 !important;
  color: var(--forest-ink) !important;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif !important;
  font-size: clamp(34px, 9vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

body.student-page .knowledge-detail-mascot {
  position: relative;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  place-items: end center;
  min-width: 0;
}

body.student-page .knowledge-detail-mascot span {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(232, 125, 0, 0.48);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(255, 253, 247, 0.94);
  color: var(--forest-brown);
  font-family: "Songti SC", STSong, serif;
  font-size: 13px;
  white-space: nowrap;
}

body.student-page .knowledge-detail-mascot img {
  width: 124px;
  height: 142px;
  margin-top: -4px;
  object-fit: contain;
  object-position: center bottom;
}

body.student-page .knowledge-step-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

body.student-page .knowledge-step-dots {
  display: grid;
  grid-template-columns: repeat(5, minmax(16px, 1fr));
  align-items: center;
  gap: 0;
  min-width: 0;
}

body.student-page .knowledge-step-dots i {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8dcc8;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

body.student-page .knowledge-step-dots i:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: 18px;
  z-index: -1;
  width: calc(100% - 2px);
  border-top: 2px dashed #e2d3ba;
  content: "";
}

body.student-page .knowledge-step-dots i.done {
  background: var(--forest-sage);
}

body.student-page .knowledge-step-dots i.done:not(:last-child)::after {
  border-color: var(--forest-sage);
}

body.student-page .knowledge-step-dots i.active {
  width: 22px;
  height: 22px;
  margin-left: -2px;
  background: var(--forest-orange);
  box-shadow: 0 0 0 4px rgba(245, 161, 11, 0.1);
}

body.student-page .knowledge-step-progress > span {
  color: var(--forest-brown);
  font-size: 12px;
  white-space: nowrap;
}

body.student-page .knowledge-step-progress > span strong {
  color: var(--forest-orange-deep);
  font-size: 17px;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row {
  justify-content: space-between !important;
  min-height: 40px !important;
  border-top: 1px solid rgba(214, 177, 123, 0.2) !important;
  padding: 10px 0 0 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row small {
  color: var(--forest-muted) !important;
  text-align: left !important;
}

body.student-page .knowledge-favorite-button,
body.student-page .knowledge-status-pill {
  border-color: var(--forest-line) !important;
  background: #fff9e9 !important;
  color: var(--forest-brown) !important;
}

body.student-page .knowledge-summary {
  margin: 0 !important;
  border: 1px solid var(--forest-line) !important;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  background: linear-gradient(135deg, #fffdf7, #fff4d7) !important;
  color: var(--forest-ink) !important;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif !important;
  font-size: clamp(20px, 5vw, 25px) !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-list {
  gap: 20px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
  display: grid !important;
  gap: 10px !important;
  scroll-margin-top: 14px;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
  background: transparent !important;
  color: var(--forest-ink) !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span {
  position: relative;
  padding-left: 15px;
  color: var(--forest-ink) !important;
  font-family: "Songti SC", STSong, serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 24px;
  border-radius: 999px;
  background: var(--forest-orange);
  content: "";
  transform: translateY(-50%);
}

body.student-page .knowledge-core-title {
  margin: 0 !important;
  border-bottom: 1px solid rgba(214, 177, 123, 0.28) !important;
  padding: 4px 8px 14px !important;
  color: var(--forest-ink) !important;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif !important;
  font-size: clamp(22px, 5.8vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head em {
  color: var(--forest-muted) !important;
  font-size: 11px !important;
  font-style: normal !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  border: 1px solid var(--forest-line) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px 12px !important;
  align-items: center !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(214, 177, 123, 0.24) !important;
  border-radius: 0 !important;
  padding: 0 0 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head > span {
  grid-column: 1;
  color: var(--forest-orange-deep) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head > strong {
  grid-column: 1;
  color: var(--forest-ink) !important;
  font-family: "Songti SC", STSong, "Noto Serif CJK SC", serif !important;
  font-size: clamp(22px, 5.6vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head > .student-module-podcast-button {
  grid-column: 2;
  grid-row: 1 / 3;
}

body.student-page .student-module-podcast-button {
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: var(--forest-orange) !important;
  box-shadow: 0 8px 18px rgba(232, 125, 0, 0.24) !important;
}

body.student-page .student-module-podcast-button img {
  width: 26px !important;
  height: 26px !important;
  filter: brightness(0) invert(1) !important;
}

body.student-page .knowledge-table-podcast-tool {
  justify-content: flex-end !important;
}

body.student-page .knowledge-table-version-panel > .student-module-card > .student-module-head {
  display: grid !important;
}

body.student-page .knowledge-table-version-buttons button,
body.student-page .knowledge-table-version-buttons button.version-core {
  border-color: var(--forest-line) !important;
  background: #fffaf0 !important;
  color: var(--forest-brown) !important;
}

body.student-page .knowledge-table-version-buttons button.active {
  border-color: rgba(245, 161, 11, 0.52) !important;
  background: var(--forest-orange-soft) !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: none !important;
}

body.student-page .student-table-recite-toolbar {
  border: 1px solid rgba(214, 177, 123, 0.24) !important;
  border-radius: 16px !important;
  padding: 8px 10px !important;
  background: #fffaf0 !important;
}

body.student-page .student-table-recite-toolbar > span {
  color: var(--forest-brown) !important;
}

body.student-page .student-table-recite-toolbar button {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--forest-muted) !important;
  box-shadow: none !important;
}

body.student-page .student-table-recite-toolbar button.active {
  border-color: rgba(245, 161, 11, 0.28) !important;
  background: var(--forest-orange-soft) !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .student-knowledge-table {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .student-knowledge-table tr {
  border-bottom: 1px solid rgba(214, 177, 123, 0.28) !important;
}

body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  border: 0 !important;
  padding: 14px 8px !important;
  background: transparent !important;
  vertical-align: middle !important;
}

body.student-page .student-knowledge-table th {
  width: 38% !important;
  color: var(--forest-muted) !important;
}

body.student-page .student-knowledge-table th > span {
  display: inline !important;
  color: var(--forest-muted) !important;
  font-size: 14px !important;
}

body.student-page .student-table-row-icon {
  display: inline-block !important;
  width: 38px !important;
  height: 38px !important;
  margin-right: 8px !important;
  border-radius: 50% !important;
  background: #fff0da !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

body.student-page .student-table-answer,
body.student-page .student-table-answer-text {
  color: var(--forest-ink) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.student-page .student-knowledge-table tr.knowledge-memory-row th,
body.student-page .student-knowledge-table tr.knowledge-memory-row td {
  background: #fff1c9 !important;
}

body.student-page .student-knowledge-table tr.knowledge-memory-row th:first-child {
  border-radius: 14px 0 0 14px !important;
}

body.student-page .student-knowledge-table tr.knowledge-memory-row td:last-child {
  border-radius: 0 14px 14px 0 !important;
}

body.student-page .student-module-image,
body.student-page .student-gallery-stage,
body.student-page .memory-palace-stage {
  border: 0 !important;
  border-radius: 20px !important;
  background: #e8dbc5 !important;
  box-shadow: inset 0 0 0 1px rgba(113, 75, 42, 0.06) !important;
}

body.student-page .student-module-image img,
body.student-page .student-gallery-stage img,
body.student-page .memory-palace-stage img {
  border-radius: 18px !important;
}

body.student-page .student-module-image > span {
  color: var(--forest-brown) !important;
  font-size: 12px !important;
}

body.student-page .knowledge-completion-actions {
  border-color: var(--forest-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff8e7, #fff1c9) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .knowledge-completion-actions strong {
  color: var(--forest-ink) !important;
}

body.student-page .knowledge-completion-actions span {
  color: var(--forest-muted) !important;
}

body.student-page .knowledge-neighbor-card {
  border-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.92) !important;
  color: var(--forest-brown) !important;
  box-shadow: none !important;
}

/* Matching bottom navigation for both the detail modules and the surrounding app. */
body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
  border-top-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.98) !important;
  box-shadow: 0 -8px 30px rgba(115, 75, 34, 0.1) !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
  display: grid !important;
  grid-template-rows: 28px auto !important;
  place-items: center !important;
  gap: 2px !important;
  color: #a48b77 !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) > img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  opacity: 0.62;
  filter: saturate(0.62) sepia(0.12);
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) > strong {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active {
  color: var(--forest-orange-deep) !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active > img {
  opacity: 1;
  filter: saturate(1.08);
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
  border: 3px solid #fff7e4 !important;
  background: var(--forest-orange) !important;
  box-shadow: 0 8px 18px rgba(232, 125, 0, 0.24) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  left: 50% !important;
  bottom: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--student-module-tab-columns, 1), minmax(72px, 1fr)) !important;
  width: min(680px, 100vw) !important;
  height: auto !important;
  min-height: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: none !important;
  padding: 10px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--forest-line) !important;
  border-radius: 24px 24px 0 0 !important;
  background: rgba(255, 253, 247, 0.98) !important;
  box-shadow: 0 -10px 34px rgba(115, 75, 34, 0.11) !important;
  transform: translateX(-50%) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock.has-overflow {
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(76px, 1fr) !important;
  grid-template-columns: none !important;
  justify-content: start !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  position: relative !important;
  display: grid !important;
  grid-template-rows: 42px auto !important;
  place-items: center !important;
  gap: 2px !important;
  min-width: 72px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 2px !important;
  background: transparent !important;
  color: #9f8772 !important;
  box-shadow: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button > img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  opacity: 0.62;
  filter: saturate(0.58) sepia(0.14);
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button > strong {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active {
  border: 0 !important;
  background: transparent !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active::after {
  position: absolute;
  right: 22%;
  bottom: -2px;
  left: 22%;
  height: 3px;
  border-radius: 999px;
  background: var(--forest-orange);
  content: "";
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active > img {
  opacity: 1;
  filter: saturate(1.08);
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button:disabled {
  color: #c8b9aa !important;
  cursor: not-allowed !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button:disabled > img {
  opacity: 0.34;
  filter: grayscale(1);
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-module-tabs {
  display: none !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .student-assistant-fab {
  display: none !important;
}

/* Output, podcast, progress and profile surfaces coordinated with the detail page. */
body.student-page .output-directory-intro,
body.student-page .output-course-directory,
body.student-page .output-quiz-row,
body.student-page .podcast-library-card,
body.student-page .account-action-list,
body.student-page .account-action-list > button,
body.student-page .account-topic-row,
body.student-page .account-calendar-day,
body.student-page .progress-metric-card,
body.student-page .progress-course-card {
  border-color: var(--forest-line) !important;
  background: var(--forest-card) !important;
  color: var(--forest-ink) !important;
  box-shadow: 0 10px 26px rgba(115, 75, 34, 0.06) !important;
}

body.student-page .output-directory-intro,
body.student-page .progress-hero-card {
  background: linear-gradient(135deg, #fffdf7, #fff0c9) !important;
}

body.student-page .output-directory-intro > span,
body.student-page .output-directory-intro > p,
body.student-page .output-quiz-row small,
body.student-page .podcast-library-card small,
body.student-page .podcast-library-card span,
body.student-page .account-action-list span,
body.student-page .account-topic-row small {
  color: var(--forest-muted) !important;
}

body.student-page .output-directory-intro > strong,
body.student-page .output-quiz-row strong,
body.student-page .podcast-library-card strong,
body.student-page .account-action-list strong,
body.student-page .account-topic-row strong {
  color: var(--forest-ink) !important;
}

body.student-page .podcast-library-play,
body.student-page .podcast-library-play.playing {
  border-color: rgba(245, 161, 11, 0.38) !important;
  background: var(--forest-orange-soft) !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .profile-summary-card {
  background: linear-gradient(135deg, #fffdf6, #f3f0dd) !important;
}

body.student-page .account-metric {
  border-color: var(--forest-line) !important;
  background: var(--forest-card) !important;
  box-shadow: 0 10px 24px rgba(115, 75, 34, 0.05) !important;
}

body.student-page .account-metric strong {
  color: var(--forest-orange-deep) !important;
}

body.student-page .profile-avatar,
body.student-page .profile-avatar-button {
  border-color: rgba(151, 165, 101, 0.42) !important;
  background: var(--forest-sage-soft) !important;
  color: #657141 !important;
}

body.student-page .module-podcast-dock {
  border-color: var(--forest-line) !important;
  background: rgba(255, 253, 247, 0.98) !important;
  color: var(--forest-ink) !important;
  box-shadow: 0 -8px 30px rgba(115, 75, 34, 0.1) !important;
}

body.student-page .module-podcast-dock input[type="range"] {
  accent-color: var(--forest-orange) !important;
}

body.student-page #loginPanel {
  border: 1px solid var(--forest-line) !important;
  border-radius: 28px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page #loginPanel label:has(input[type="checkbox"]) {
  border-color: rgba(214, 177, 123, 0.32) !important;
  background: #fff9ed !important;
  color: var(--forest-muted) !important;
}

body.student-page #loginPanel input[type="checkbox"] {
  accent-color: var(--forest-orange) !important;
}

@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section.active {
    display: grid !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section:not(.is-table-group) > .student-module-group-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section:not(.is-table-group) .student-module-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-podcast-tool,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-panel .student-module-head {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section:not(.is-table-group) .student-module-card {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-image {
    width: 100% !important;
    min-height: 280px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-image img {
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    object-fit: contain !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-strip {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-meta {
    grid-template-columns: 1fr !important;
    color: var(--forest-brown) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-meta > span {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-meta > strong {
    color: var(--forest-ink) !important;
    text-align: left !important;
  }
}

@media (max-width: 430px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    padding-inline: 14px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
    grid-template-columns: minmax(0, 1fr) 96px !important;
    min-height: 132px !important;
  }

  body.student-page .knowledge-detail-mascot img {
    width: 96px;
    height: 108px;
  }

  body.student-page .knowledge-detail-mascot span {
    min-height: 30px;
    padding-inline: 9px;
    font-size: 11px;
  }

  body.student-page .knowledge-step-progress {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  body.student-page .knowledge-step-dots {
    max-width: 170px;
  }

  body.student-page .knowledge-step-progress > span {
    justify-self: end;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
    font-size: clamp(29px, 7.5vw, 32px) !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  body.student-page .knowledge-detail-hero {
    gap: 8px;
  }

  body.student-page .knowledge-detail-nav-row {
    min-height: 46px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-list {
    gap: 10px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section {
    gap: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    padding: 14px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .is-table-group .student-module-group-head {
    min-height: 36px !important;
  }
}

@media (max-width: 360px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
    grid-template-columns: minmax(0, 1fr) 88px !important;
  }

  body.student-page .knowledge-detail-mascot img {
    width: 88px;
    height: 108px;
  }

  body.student-page .knowledge-detail-brand {
    font-size: 0;
  }

  body.student-page .knowledge-detail-brand img {
    width: 42px;
    height: 42px;
  }

  body.student-page .student-knowledge-table th,
  body.student-page .student-knowledge-table td {
    padding-inline: 5px !important;
  }

  body.student-page .student-table-row-icon {
    width: 32px !important;
    height: 32px !important;
    margin-right: 4px !important;
  }
}

/* r157: Memory Bread-inspired warm-minimal student system. */
body.student-page {
  --forest-paper: #fff8e6;
  --forest-paper-deep: #fdf1d7;
  --forest-card: #fefdf8;
  --forest-card-soft: #fffaf0;
  --forest-ink: #3b2012;
  --forest-brown: #735843;
  --forest-muted: #9c8774;
  --forest-orange: #efa72b;
  --forest-orange-deep: #d98a0e;
  --forest-orange-soft: #fff0cd;
  --forest-sage: #a2aa71;
  --forest-sage-soft: #f0f1db;
  --forest-line: rgba(208, 178, 129, 0.28);
  --forest-shadow: 0 12px 30px rgba(129, 91, 37, 0.055), 0 2px 7px rgba(129, 91, 37, 0.035);
  --forest-shadow-soft: 0 8px 22px rgba(129, 91, 37, 0.045);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --color-bg: var(--forest-paper);
  --color-surface: var(--forest-card);
  --color-surface-soft: var(--forest-card-soft);
  --color-text: var(--forest-ink);
  --color-text-2: var(--forest-brown);
  --color-text-3: var(--forest-muted);
  --color-border: var(--forest-line);
  --color-primary: var(--forest-orange);
  --color-primary-weak: var(--forest-orange-soft);
  --shadow-sm: var(--forest-shadow-soft);
  --shadow-md: var(--forest-shadow);
  --shadow-lg: 0 14px 34px rgba(129, 91, 37, 0.07);
  background: var(--forest-paper) !important;
  color: var(--forest-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0 !important;
}

body.student-page :where(button, input, select, textarea) {
  font-family: inherit !important;
}

body.student-page .app-shell {
  background: var(--forest-paper) !important;
}

body.student-page .topbar {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 248, 230, 0.96) !important;
  box-shadow: none !important;
}

body.student-page .brand-lockup h1,
body.student-page .panel-heading h2,
body.student-page .panel-heading strong,
body.student-page .student-module-head strong,
body.student-page .student-chapter-card strong,
body.student-page .student-topic-title,
body.student-page .student-topic-title-text {
  color: var(--forest-ink) !important;
  font-family: inherit !important;
}

body.student-page .panel-heading {
  gap: 5px !important;
  padding: 10px 4px 14px !important;
}

body.student-page .panel-heading h2 {
  font-family: inherit !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
}

body.student-page .panel-heading p,
body.student-page .panel-heading span {
  color: var(--forest-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

body.student-page .panel,
body.student-page .event-card,
body.student-page .course-card,
body.student-page .lesson-card,
body.student-page .review-card,
body.student-page .progress-hero-card,
body.student-page .progress-course-card,
body.student-page .profile-summary-card,
body.student-page .account-subsection,
body.student-page .podcast-library-card {
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 28px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page button.primary,
body.student-page .primary,
body.student-page .primary-action,
body.student-page .start-quiz-button,
body.student-page .knowledge-next-button,
body.student-page .student-refresh-button,
body.student-page .output-continue-button {
  border: 1px solid rgba(216, 137, 14, 0.16) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffc65c 0%, #f2ad30 100%) !important;
  color: #4a2b18 !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(205, 133, 20, 0.11) !important;
}

body.student-page button.secondary,
body.student-page .secondary,
body.student-page .ghost-button,
body.student-page .knowledge-status-actions button,
body.student-page .module-action-row button {
  border: 1px solid rgba(208, 178, 129, 0.28) !important;
  border-radius: 999px !important;
  background: #fff7e6 !important;
  color: var(--forest-brown) !important;
  box-shadow: 0 3px 9px rgba(129, 91, 37, 0.035) !important;
}

body.student-page input,
body.student-page select,
body.student-page textarea {
  border: 1px solid rgba(208, 178, 129, 0.3) !important;
  border-radius: 18px !important;
  background: #fffdf8 !important;
  color: var(--forest-ink) !important;
  box-shadow: inset 0 1px 3px rgba(129, 91, 37, 0.025) !important;
}

/* Directory: flat creamy surfaces and restrained elevation. */
body.student-page .student-course-input-section,
body.student-page .student-course-input-section.open {
  border: 1px solid rgba(208, 178, 129, 0.22) !important;
  border-radius: 28px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .student-course-input-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-course-input-toggle,
body.student-page .student-learning-section-toggle,
body.student-page .student-learning-input-section.open .student-learning-section-toggle,
body.student-page .student-category-toggle,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-chapter-title {
  border-color: rgba(208, 178, 129, 0.22) !important;
  border-radius: 22px !important;
  background: #fffaf0 !important;
  color: var(--forest-ink) !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

body.student-page .student-chapter-card,
body.student-page .student-chapter-card.open,
body.student-page .student-topic-node,
body.student-page .student-topic-node:nth-child(n),
body.student-page .importance-group-section,
body.student-page .importance-group-card,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node:nth-child(n) {
  border-color: rgba(208, 178, 129, 0.18) !important;
  border-radius: 22px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

body.student-page .student-topic-node.active,
body.student-page .student-chapter-card.open {
  border-color: rgba(239, 167, 43, 0.34) !important;
  background: #fff7df !important;
}

body.student-page .knowledge-progress-card,
body.student-page .progress-hero-card,
body.student-page .output-directory-intro {
  border-color: rgba(208, 178, 129, 0.2) !important;
  border-radius: 28px !important;
  background: #fff4d9 !important;
  color: var(--forest-ink) !important;
  box-shadow: var(--forest-shadow) !important;
}

/* Concrete knowledge point: no museum-serif drift. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
  gap: 16px !important;
  padding: 16px 16px calc(116px + env(safe-area-inset-bottom, 0px)) !important;
}

body.student-page .knowledge-detail-hero {
  gap: 11px !important;
}

body.student-page .knowledge-detail-nav-row {
  min-height: 48px !important;
}

body.student-page .knowledge-detail-nav-row > strong,
body.student-page .knowledge-detail-brand,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3,
body.student-page .knowledge-detail-mascot span,
body.student-page .knowledge-summary,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span,
body.student-page .knowledge-core-title,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head > strong {
  font-family: inherit !important;
}

body.student-page .knowledge-detail-nav-row > strong {
  font-size: 15px !important;
  font-weight: 650 !important;
}

body.student-page .knowledge-detail-brand {
  color: var(--forest-ink) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
  min-height: 148px !important;
  align-items: end !important;
}

body.student-page .knowledge-topic-title-frame > p {
  color: #9aa36b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
  color: var(--forest-ink) !important;
  font-size: clamp(31px, 8vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

body.student-page .knowledge-detail-mascot span {
  border-color: rgba(217, 138, 14, 0.34) !important;
  border-radius: 999px !important;
  background: #fffaf0 !important;
  color: var(--forest-brown) !important;
  font-size: 12px !important;
  box-shadow: 0 3px 9px rgba(129, 91, 37, 0.035) !important;
}

body.student-page .knowledge-step-dots i {
  background: #eadfca !important;
}

body.student-page .knowledge-step-dots i:not(:last-child)::after {
  border-color: #e5d4b8 !important;
}

body.student-page .knowledge-step-dots i.done,
body.student-page .knowledge-step-dots i.done:not(:last-child)::after {
  background: var(--forest-sage) !important;
  border-color: var(--forest-sage) !important;
}

body.student-page .knowledge-step-dots i.active {
  background: var(--forest-orange) !important;
  box-shadow: none !important;
}

body.student-page .knowledge-summary {
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 26px !important;
  padding: 18px 20px !important;
  background: #fffaf0 !important;
  color: var(--forest-ink) !important;
  font-size: clamp(18px, 4.8vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span {
  font-size: 19px !important;
  font-weight: 800 !important;
}

body.student-page .knowledge-core-title {
  color: var(--forest-ink) !important;
  font-size: clamp(20px, 5.2vw, 25px) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 28px !important;
  padding: 18px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head > strong {
  font-size: clamp(20px, 5.2vw, 25px) !important;
  font-weight: 800 !important;
}

body.student-page .student-module-podcast-button {
  border: 2px solid #fffdf8 !important;
  background: var(--forest-orange) !important;
  box-shadow: 0 7px 16px rgba(205, 133, 20, 0.14) !important;
}

body.student-page .knowledge-table-version-buttons button,
body.student-page .knowledge-table-version-buttons button.version-core,
body.student-page .student-table-recite-toolbar {
  border-color: rgba(208, 178, 129, 0.24) !important;
  background: #fffaf0 !important;
  color: var(--forest-brown) !important;
  box-shadow: none !important;
}

body.student-page .knowledge-table-version-buttons button.active,
body.student-page .student-table-recite-toolbar button.active {
  border-color: rgba(239, 167, 43, 0.3) !important;
  background: var(--forest-orange-soft) !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .student-knowledge-table th,
body.student-page .student-knowledge-table td {
  padding: 15px 8px !important;
}

body.student-page .student-knowledge-table th > span {
  color: var(--forest-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

body.student-page .student-table-answer,
body.student-page .student-table-answer-text {
  color: var(--forest-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

body.student-page .student-knowledge-table tr.knowledge-memory-row th,
body.student-page .student-knowledge-table tr.knowledge-memory-row td {
  background: #fff1cc !important;
}

body.student-page .student-module-image,
body.student-page .student-gallery-stage,
body.student-page .memory-palace-stage {
  border-radius: 24px !important;
  background: #f4ead8 !important;
  box-shadow: inset 0 0 0 1px rgba(129, 91, 37, 0.035) !important;
}

body.student-page .student-module-image img,
body.student-page .student-gallery-stage img,
body.student-page .memory-palace-stage img {
  border-radius: 22px !important;
}

body.student-page .knowledge-completion-actions {
  border-color: rgba(208, 178, 129, 0.2) !important;
  border-radius: 26px !important;
  background: #fff4d9 !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

/* Account, progress, podcast and practice share the same surface grammar. */
body.student-page .account-panel {
  gap: 15px !important;
  background: transparent !important;
}

body.student-page .profile-summary-card {
  grid-template-columns: 68px minmax(0, 1fr) auto !important;
  gap: 13px !important;
  padding: 10px 6px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page .profile-avatar,
body.student-page .profile-avatar-button,
body.student-page .profile-avatar-image {
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff0c9 !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: 0 6px 16px rgba(205, 133, 20, 0.08) !important;
}

body.student-page .profile-summary-copy strong {
  color: var(--forest-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

body.student-page .profile-summary-copy span,
body.student-page .profile-summary-copy small {
  color: var(--forest-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.student-page .profile-summary-card > #profileStatus {
  background: #fff0cd !important;
  color: var(--forest-brown) !important;
  font-weight: 650 !important;
}

body.student-page .account-metric-grid {
  gap: 10px !important;
}

body.student-page .account-metric,
body.student-page .progress-metric-card {
  min-height: 92px !important;
  border: 1px solid rgba(208, 178, 129, 0.16) !important;
  border-radius: 26px !important;
  padding: 16px 9px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .account-metric strong {
  color: var(--forest-ink) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

body.student-page .account-metric span {
  color: var(--forest-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.student-page .account-action-list {
  overflow: hidden;
  border: 1px solid rgba(208, 178, 129, 0.16) !important;
  border-radius: 28px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .account-action-list > button {
  min-height: 68px !important;
  border-bottom: 1px solid rgba(208, 178, 129, 0.24) !important;
  padding: 13px 17px !important;
  background: transparent !important;
  color: var(--forest-ink) !important;
  box-shadow: none !important;
}

body.student-page .account-action-list > button.active {
  background: #fff8e8 !important;
}

body.student-page .account-action-list strong {
  color: var(--forest-ink) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

body.student-page .account-action-list span {
  color: var(--forest-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

body.student-page .account-subsection,
body.student-page .account-topic-row,
body.student-page .podcast-library-card,
body.student-page .output-course-directory,
body.student-page .output-quiz-row,
body.student-page .progress-course-card {
  border-color: rgba(208, 178, 129, 0.16) !important;
  border-radius: 26px !important;
  background: var(--forest-card) !important;
  color: var(--forest-ink) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .account-calendar-day.active {
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 167, 43, 0.12) !important;
}

body.student-page .account-calendar-day.today {
  border-color: var(--forest-orange) !important;
}

body.student-page .podcast-library-play,
body.student-page .podcast-library-play.playing {
  border-color: rgba(239, 167, 43, 0.3) !important;
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: none !important;
}

body.student-page .module-podcast-dock {
  border-color: rgba(208, 178, 129, 0.2) !important;
  border-radius: 26px 26px 0 0 !important;
  background: rgba(254, 253, 248, 0.985) !important;
  color: var(--forest-ink) !important;
  box-shadow: 0 -7px 24px rgba(129, 91, 37, 0.065) !important;
}

/* Bottom bars use the reference's almost-flat off-white dock. */
body.student-page .mobile-study-nav:not(.knowledge-module-dock),
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  border-color: rgba(208, 178, 129, 0.2) !important;
  border-radius: 28px 28px 0 0 !important;
  background: rgba(254, 253, 248, 0.985) !important;
  box-shadow: 0 -7px 24px rgba(129, 91, 37, 0.065) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh),
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  color: #a28f7c !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active,
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active {
  color: var(--forest-orange-deep) !important;
}

body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
  border: 3px solid #fff9e9 !important;
  background: var(--forest-orange) !important;
  box-shadow: 0 7px 16px rgba(205, 133, 20, 0.14) !important;
}

/* Login is part of the same product, not a separate visual theme. */
body.student-page.student-guest .app-shell {
  background: var(--forest-paper) !important;
}

body.student-page #loginPanel {
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 30px !important;
  background: var(--forest-card) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page #loginPanel h2 {
  color: var(--forest-ink) !important;
  font-family: inherit !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

body.student-page #loginPanel p,
body.student-page #loginPanel label {
  color: var(--forest-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.student-page #loginPanel label:has(input[type="checkbox"]) {
  border-color: rgba(208, 178, 129, 0.2) !important;
  border-radius: 16px !important;
  background: #fffaf0 !important;
}

@media (max-width: 430px) {
  body.student-page .app-shell {
    padding-inline: 14px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    padding-inline: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    min-height: 132px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
    font-size: clamp(28px, 7.4vw, 32px) !important;
    font-weight: 800 !important;
  }

  body.student-page .knowledge-detail-mascot img {
    width: 94px !important;
    height: 104px !important;
  }

  body.student-page .knowledge-summary,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-card {
    border-radius: 24px !important;
  }

  body.student-page .account-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) > strong,
  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button > strong {
    font-size: 12px !important;
    font-weight: 650 !important;
  }
}

/* r157 QA pass 2: final warm overrides must remain last in the cascade. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
  --map-line: rgba(197, 164, 105, 0.34) !important;
  --map-dot: #d6ad62 !important;
  --map-course-a: #fffaf0 !important;
  --map-course-b: #fff3d8 !important;
  --map-chapter-a: #fffaf0 !important;
  --map-chapter-b: #f8f0df !important;
  --map-group-a: #f5f2df !important;
  --map-group-b: #fffaf0 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node::after {
  border-color: #fffaf0 !important;
  background: #d6ad62 !important;
  box-shadow: 0 0 0 1px rgba(197, 164, 105, 0.22) !important;
}

body.student-page .student-topic-thumb,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
  border-color: rgba(208, 178, 129, 0.22) !important;
  background: #f5eedf !important;
  box-shadow: none !important;
}

body.student-page .student-topic-thumb.empty::after {
  background: rgba(166, 144, 112, 0.18) !important;
}
body.student-page #knowledgeProgressFill,
body.student-page #progressHeroFill,
body.student-page .progress-fill,
body.student-page .progress-hero-card b,
body.student-page .progress-course-card b {
  background: linear-gradient(90deg, var(--forest-sage), var(--forest-orange)) !important;
}


body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button,
body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.version-core {
  border-color: rgba(208, 178, 129, 0.24) !important;
  background: var(--forest-card) !important;
  color: var(--forest-brown) !important;
  box-shadow: var(--forest-shadow-soft) !important;
}

body.student-page .knowledge-table-switcher .knowledge-table-version-buttons button.active {
  border-color: rgba(239, 167, 43, 0.34) !important;
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: 0 5px 13px rgba(205, 133, 20, 0.07) !important;
}

body.student-page .output-mode-chooser,
body.student-page .output-mode-chooser-head,
body.student-page .output-mode-choice-grid {
  align-content: start !important;
  grid-auto-rows: max-content !important;
}

body.student-page .output-mode-chooser-head {
  gap: 7px !important;
  padding: 8px 3px 12px !important;
}

body.student-page .output-mode-chooser-head > span,
body.student-page .output-mode-choice em {
  color: var(--forest-orange-deep) !important;
}

body.student-page .output-mode-chooser-head > strong {
  color: var(--forest-ink) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
}

body.student-page .output-mode-chooser-head > p,
body.student-page .output-mode-choice span,
body.student-page .output-mode-choice small {
  color: var(--forest-muted) !important;
  font-weight: 500 !important;
}

body.student-page .output-mode-choice,
body.student-page .output-mode-choice.knowledge,
body.student-page .output-mode-choice.chapter {
  min-height: 146px !important;
  border: 1px solid rgba(208, 178, 129, 0.18) !important;
  border-radius: 28px !important;
  padding: 20px !important;
  background: var(--forest-card) !important;
  color: var(--forest-ink) !important;
  box-shadow: var(--forest-shadow) !important;
}

body.student-page .output-mode-choice strong {
  color: var(--forest-ink) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

body.student-page .output-section-back,
body.student-page .chapter-paper-answer-summary strong {
  color: var(--forest-orange-deep) !important;
}

body.student-page .chapter-paper-answer-card > summary {
  background: #fff5dc !important;
  color: var(--forest-brown) !important;
}

body.student-page .chapter-paper-answer-card button.answered {
  border-color: rgba(239, 167, 43, 0.34) !important;
  background: #fff0cd !important;
  color: var(--forest-orange-deep) !important;
}

body.student-page .account-subsection-head button,
body.student-page .knowledge-favorite-button,
body.student-page .account-topic-row em {
  border-color: rgba(239, 167, 43, 0.22) !important;
  background: #fff4d9 !important;
  color: var(--forest-orange-deep) !important;
  box-shadow: none !important;
}

body.student-page .account-topic-empty {
  border-color: rgba(208, 178, 129, 0.3) !important;
  background: #fffaf0 !important;
  color: var(--forest-muted) !important;
}

body.student-page .progress-track,
body.student-page .student-course-input-toggle > i,
body.student-page .knowledge-progress-card i,
body.student-page .progress-hero-card i,
body.student-page .progress-course-card i {
  background: #efe5d2 !important;
}

body.student-page .progress-track > i,
body.student-page .progress-track > span,
body.student-page .student-course-input-toggle > i b,
body.student-page .knowledge-progress-card b,
body.student-page .progress-hero-card i b,
body.student-page .progress-course-card i b {
  background: linear-gradient(90deg, var(--forest-sage), var(--forest-orange)) !important;
}

body.student-page .student-topic-node em.status-unmarked,
body.student-page .student-topic-node em.status-review {
  background: #f6f1e8 !important;
  color: #9b8a79 !important;
}

/* r161: final knowledge-point detail pass based on the selected clean reference. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] > .panel-heading,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] > .knowledge-refresh-row,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-nav-row,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-top,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-meta-row,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-brand,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-mascot,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-back,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-tabs {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
  width: min(680px, 100%) !important;
  gap: 18px !important;
  padding: 18px 20px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-hero,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame {
  display: grid !important;
  gap: 15px !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame > p {
  color: #6f5543 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: 0.03em !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(34px, 9vw, 50px) !important;
  line-height: 1.12 !important;
  letter-spacing: 0.02em !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-step-progress {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-section.active {
  gap: 12px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head {
  min-height: 34px !important;
  padding: 0 4px 0 22px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span {
  padding-left: 0 !important;
  font-size: 21px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head span::before {
  left: -21px !important;
  width: 5px !important;
  height: 25px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-group-head em {
  color: #9a826e !important;
  font-size: 12px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-guide {
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  border: 1px solid #eadcc7 !important;
  border-radius: 20px !important;
  padding: 5px !important;
  background: #fffaf0 !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-buttons button,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-buttons button.version-core {
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 15px !important;
  padding: 0 10px !important;
  background: transparent !important;
  color: #806b59 !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-buttons button.active {
  border: 0 !important;
  background: #fff0c8 !important;
  color: #925d08 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-window {
  overflow: hidden !important;
  border: 1px solid #eadcc7 !important;
  border-radius: 28px !important;
  padding: 14px !important;
  background: #fffdf8 !important;
  box-shadow: 0 10px 24px rgba(76, 52, 36, 0.06) !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-panel > .student-module-card,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-table-recite {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding-inline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-panel > .student-module-card > .student-module-head {
  padding-inline: 8px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-table-recite-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 0 8px !important;
  border: 1px solid #eee0cb !important;
  border-radius: 18px !important;
  padding: 5px 7px 5px 13px !important;
  background: #fff9eb !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-table-recite-toolbar button {
  min-width: 0 !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 0 9px !important;
  background: transparent !important;
  color: #9a826e !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-table-recite-toolbar button.active {
  background: #fff0c8 !important;
  color: #925d08 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-table th,
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-table td {
  padding: 15px 10px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-table th {
  width: 27% !important;
  color: #80634e !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  vertical-align: top !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-table-row-icon {
  display: none !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-table th > span {
  color: #80634e !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

.student-module-dock-icon {
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.student-module-dock-icon.icon-table,
.student-module-dock-icon.icon-book {
  -webkit-mask-image: url("/icon-table.svg?v=v1-0-r174");
  mask-image: url("/icon-table.svg?v=v1-0-r174");
}

.student-module-dock-icon.icon-photo {
  -webkit-mask-image: url("/icon-photo.svg?v=v1-0-r174");
  mask-image: url("/icon-photo.svg?v=v1-0-r174");
}

.student-module-dock-icon.icon-video {
  -webkit-mask-image: url("/icon-play.svg?v=v1-0-r187");
  mask-image: url("/icon-play.svg?v=v1-0-r187");
}

.student-module-dock-icon.icon-memory {
  -webkit-mask-image: url("/icon-brain.svg?v=v1-0-r174");
  mask-image: url("/icon-brain.svg?v=v1-0-r174");
}

.student-module-dock-icon.icon-practice {
  -webkit-mask-image: url("/icon-clipboard-check.svg?v=v1-0-r174");
  mask-image: url("/icon-clipboard-check.svg?v=v1-0-r174");
}

.student-module-dock-icon.icon-audio {
  -webkit-mask-image: url("/volume-2.svg?v=v1-0-r174");
  mask-image: url("/volume-2.svg?v=v1-0-r174");
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock {
  grid-template-columns: repeat(var(--student-module-tab-count, 1), minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  justify-content: stretch !important;
  width: min(680px, 100vw) !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  bottom: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid #eadcc7 !important;
  border-width: 1px 0 0 !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255, 253, 248, 0.985) !important;
  box-shadow: 0 -8px 22px rgba(76, 52, 36, 0.08) !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button {
  grid-template-rows: 23px auto !important;
  min-width: 0 !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  gap: 2px !important;
  border-radius: 0 !important;
  padding: 5px 1px 8px !important;
  color: #6f5543 !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button strong {
  font-size: clamp(10px, 2.7vw, 12px) !important;
  font-weight: 700 !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active,
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.playing {
  color: #ee9209 !important;
}

body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] .mobile-study-nav.knowledge-module-dock button.active::after {
  right: 30% !important;
  bottom: 2px !important;
  left: 30% !important;
  height: 2px !important;
}

@media (max-width: 520px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    padding: 14px 16px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 16px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-table-version-window {
    border-radius: 24px !important;
    padding: 10px !important;
  }
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] {
  --map-line: rgba(197, 164, 105, 0.34) !important;
  --map-dot: #d6ad62 !important;
  --map-course-a: #fffaf0 !important;
  --map-course-b: #fff3d8 !important;
  --map-chapter-a: #fffaf0 !important;
  --map-chapter-b: #f8f0df !important;
  --map-group-a: #f5f2df !important;
  --map-group-b: #fffaf0 !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-node::after {
  border-color: #fffaf0 !important;
  background: #d6ad62 !important;
  box-shadow: 0 0 0 1px rgba(197, 164, 105, 0.22) !important;
}

body.student-page .student-topic-thumb,
body.student-page #knowledgeStudyPanel[data-knowledge-view="list"] .student-topic-thumb {
  border-color: rgba(208, 178, 129, 0.22) !important;
  background: #f5eedf !important;
  box-shadow: none !important;
}

body.student-page .student-topic-thumb.empty::after {
  background: rgba(166, 144, 112, 0.18) !important;
}

body.student-page #knowledgeProgressFill,
body.student-page #progressHeroFill,
body.student-page .progress-fill,
body.student-page .progress-hero-card b,
body.student-page .progress-course-card b {
  background: linear-gradient(90deg, var(--forest-sage), var(--forest-orange)) !important;
}


/* r163: fixed visual/text split for the knowledge-point study screen. */
@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(680px, 100%) !important;
    height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    gap: 10px !important;
    overflow: hidden !important;
    padding: 12px 14px 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-hero,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame {
    gap: 7px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame > p {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-topic-title-frame h3 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(27px, 7.6vw, 38px) !important;
    line-height: 1.12 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-step-progress {
    gap: 8px !important;
    margin: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-step-dots i {
    width: 15px !important;
    height: 15px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-step-dots i.active {
    width: 19px !important;
    height: 19px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    display: grid !important;
    grid-template-rows: minmax(244px, 48%) minmax(0, 52%) !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane {
    overflow: hidden !important;
    border: 1px solid #eadcc7 !important;
    border-radius: 24px !important;
    background: #f8f1e5 !important;
    box-shadow: 0 7px 18px rgba(76, 52, 36, 0.06) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-list,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-group-section.active {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-group-section.active {
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-group-section.active::-webkit-scrollbar {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-group-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .knowledge-core-title,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-strip,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > .compact-link,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-open-actions {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-card {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module {
    position: relative !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 28px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8f1e5 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 4px 42px !important;
    background: rgba(255, 253, 248, 0.94) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-meta > span {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-meta > strong {
    overflow: hidden !important;
    color: #6f5543 !important;
    font-size: 12px !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) 30px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8f1e5 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image > span {
    min-height: 28px !important;
    margin: 0 !important;
    padding: 5px 12px !important;
    background: rgba(255, 253, 248, 0.94) !important;
    color: #6f5543 !important;
    font-size: 12px !important;
    text-align: center !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 2px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .student-module-list {
    display: grid !important;
    gap: 10px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .student-module-group-section.active {
    display: grid !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .knowledge-table-version-window {
    border-radius: 24px !important;
    padding: 10px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .knowledge-table-version-panel > .student-module-card > .student-module-head.has-inline-tools {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) minmax(146px, 48%) !important;
    gap: 7px !important;
    align-items: center !important;
    min-height: 43px !important;
    border: 0 !important;
    padding: 0 0 9px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools > span {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools > strong {
    grid-column: 1 / 3 !important;
    overflow: hidden !important;
    color: #6f5543 !important;
    font-size: 15px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools > .knowledge-table-version-guide {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools .knowledge-table-version-buttons {
    gap: 3px !important;
    border-radius: 14px !important;
    padding: 3px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools .knowledge-table-version-buttons button,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-module-head.has-inline-tools .knowledge-table-version-buttons button.version-core {
    min-height: 34px !important;
    border-radius: 11px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-pane-empty {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #9a826e !important;
    font-size: 13px !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] {
    overflow: hidden !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel {
    position: fixed !important;
    inset: 0 0 72px !important;
    z-index: 20 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #fffaf0 !important;
    box-shadow: none !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .student-knowledge-layout {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #knowledgeStudyPanel .student-knowledge-detail {
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* r165: visual-module audio switch and softly rounded image stage */
body.student-page .podcast-autoplay-settings {
  display: grid;
  gap: 10px;
  border-bottom: 1px solid rgba(221, 199, 165, 0.58);
  padding-bottom: 12px;
}

body.student-page .podcast-autoplay-toggle {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  border: 1px solid #eadcc7;
  border-radius: 16px;
  padding: 10px 12px;
  background: #fffaf0;
}

body.student-page .podcast-autoplay-toggle > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.student-page .podcast-autoplay-toggle strong {
  color: #422619;
  font-size: 14px;
}

body.student-page .podcast-autoplay-toggle small {
  color: #9a826e;
  font-size: 11px;
  line-height: 1.45;
}

body.student-page .podcast-autoplay-toggle input[role="switch"] {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  margin: 0;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #d9cdbc;
  cursor: pointer;
  transition: background 160ms ease;
}

body.student-page .podcast-autoplay-toggle input[role="switch"]::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(66, 38, 25, 0.22);
  content: "";
  transition: transform 160ms ease;
}

body.student-page .podcast-autoplay-toggle input[role="switch"]:checked {
  background: #f2a313;
}

body.student-page .podcast-autoplay-toggle input[role="switch"]:checked::after {
  transform: translateX(18px);
}

body.student-page .podcast-autoplay-toggle input[role="switch"]:focus-visible {
  outline: 3px solid rgba(242, 163, 19, 0.25);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-card {
    box-sizing: border-box !important;
    border-radius: 18px !important;
    padding: 6px !important;
    background: #fffdf8 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image {
    overflow: hidden !important;
    border-radius: 14px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    border-radius: 12px !important;
  }
}

/* r166: compact cover-style knowledge detail screen. */
@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    grid-template-rows: minmax(280px, 54%) minmax(0, 46%) !important;
    gap: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane {
    border: 0 !important;
    border-radius: 20px !important;
    background: #f4ebdc !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-group-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .knowledge-core-title,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-head,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-meta,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-strip,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > .compact-link,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image > span,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-open-actions {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-card {
    border: 0 !important;
    border-radius: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    border-radius: 20px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group {
    gap: 7px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(138px, 42%) !important;
    gap: 10px !important;
    min-height: 40px !important;
    padding: 0 2px 0 22px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head > span {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head > em {
    justify-self: end !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head > .knowledge-table-version-guide {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head .knowledge-table-version-buttons {
    gap: 3px !important;
    border-radius: 14px !important;
    padding: 3px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head .knowledge-table-version-buttons button,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head .knowledge-table-version-buttons button.version-core {
    min-height: 32px !important;
    border-radius: 11px !important;
    padding: 0 4px !important;
    font-size: 12px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-group-head .knowledge-table-version-buttons button strong {
    font-size: 12px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .knowledge-core-title,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .student-module-head {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .knowledge-table-version-window {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .knowledge-table-version-panel > .student-module-card,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane .is-table-group > .student-module-card {
    border: 1px solid #eadcc7 !important;
    border-radius: 20px !important;
    padding: 10px !important;
    background: #fffdf8 !important;
    box-shadow: none !important;
  }
}

/* r167: immersive image-first knowledge detail screen. */
@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-detail-hero {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-knowledge-detail {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    display: grid !important;
    grid-template-rows: minmax(280px, 50dvh) minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #201813 !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-card,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    border: 0 !important;
    border-radius: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image {
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .gallery-arrow {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
    background: rgba(255, 255, 255, 0.62) !important;
    color: rgba(66, 48, 37, 0.82) !important;
    font-size: 21px !important;
    line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(24, 17, 12, 0.13) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .gallery-arrow.left {
    left: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .gallery-arrow.right {
    right: 8px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-top: 1px solid rgba(221, 199, 165, 0.72) !important;
    padding: 10px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fffaf0 !important;
  }
}

/* r168: Xiaohongshu-inspired text-only student navigation. */

@media (max-width: 1180px) {
  body.student-page .mobile-study-nav:not(.knowledge-module-dock) {
    align-items: center !important;
    width: min(680px, 100vw) !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 5px 12px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid #eeeeee !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: none !important;
    backdrop-filter: blur(18px) !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #777777 !important;
    box-shadow: none !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) > img {
    display: none !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh) > strong {
    color: inherit !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active {
    color: #111111 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) button:not(.mobile-nav-refresh).active > strong {
    font-weight: 750 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh {
    place-self: center !important;
    display: grid !important;
    place-items: center !important;
    width: 54px !important;
    height: 36px !important;
    min-width: 54px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh > img {
    display: none !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh > strong {
    display: block !important;
    color: inherit !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  body.student-page .mobile-study-nav:not(.knowledge-module-dock) .mobile-nav-refresh:disabled {
    opacity: 0.55 !important;
  }
}

/* r169 planner priority overrides for earlier student theme rules. */
body.student-page #studentAssistantFab.student-planner-fab,
body.student-page[data-mobile-target="knowledgeStudyPanel"][data-knowledge-view="detail"] #studentAssistantFab.student-planner-fab {
  display: inline-flex !important;
  width: auto !important;
  min-width: 68px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid rgba(40, 35, 30, 0.1) !important;
  border-radius: 14px !important;
  padding: 0 13px !important;
  background: #1f1d1b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(36, 29, 22, 0.2) !important;
}

body.student-page #studentAssistantFab.student-planner-fab.hidden {
  display: none !important;
}

body.student-page #studentAssistantSheet.student-assistant-sheet {
  gap: 12px !important;
  max-height: min(88dvh, 760px) !important;
  overflow: auto !important;
  border: 1px solid rgba(228, 216, 198, 0.9) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fffdf8 !important;
  color: #2d231c !important;
  box-shadow: 0 -20px 54px rgba(53, 43, 31, 0.24) !important;
}

body.student-page #studentAssistantSheet .student-assistant-handle {
  width: 36px !important;
  background: #d8d1c8 !important;
}

body.student-page #studentAssistantSheet .student-planner-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.student-page #studentAssistantSheet .student-planner-head span {
  color: #a36d23 !important;
  font-size: 12px !important;
}

body.student-page #studentAssistantSheet .student-planner-head h2 {
  margin: 2px 0 0 !important;
  color: #241b15 !important;
  font-size: 22px !important;
}

body.student-page #studentAssistantSheet .student-planner-head p {
  margin: 3px 0 0 !important;
  color: #8b8176 !important;
  font-size: 12px !important;
}

/* r171: ratio-aware Xiaohongshu-style image gallery. */
body.student-page .student-gallery-stage {
  position: relative;
}

body.student-page .gallery-arrow,
body.student-page .student-gallery-viewer-arrow {
  display: none !important;
}

body.student-page .student-gallery-dots,
body.student-page .student-gallery-viewer-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

body.student-page .student-gallery-dots {
  position: absolute;
  z-index: 4;
  bottom: 10px;
  left: 50%;
  min-height: 22px;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(31, 25, 20, 0.42);
  box-shadow: 0 2px 10px rgba(31, 25, 20, 0.12);
  backdrop-filter: blur(8px);
  transform: translateX(-50%);
}

body.student-page .student-gallery-dots button,
body.student-page .student-gallery-viewer-dots button {
  flex: 0 0 auto;
  width: 6px !important;
  min-width: 6px !important;
  height: 6px !important;
  min-height: 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: none !important;
  transition: width 160ms ease, background 160ms ease, transform 160ms ease;
}

body.student-page .student-gallery-dots button.active,
body.student-page .student-gallery-viewer-dots button.active {
  width: 16px !important;
  min-width: 16px !important;
  background: #f4a300 !important;
}

@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    --knowledge-visual-height: max(220px, min(68dvh, calc(100vw * 2 / 3)));
    grid-template-rows: minmax(220px, var(--knowledge-visual-height)) minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    transition: grid-template-rows 220ms ease !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f4ebdc !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-card,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-memory-palace-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #f4ebdc !important;
    box-shadow: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-stage {
    touch-action: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-image img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-stage img,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f4ebdc !important;
    object-fit: contain !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-meta,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-strip,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-gallery-module > .compact-link,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .memory-palace-viewer > p,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-visual-pane .student-module-image > span {
    display: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    transition: none !important;
  }
}

/* r174: restore the r171 Xiaohongshu-style split divider after r172/r173. */
body.student-page .knowledge-split-divider {
  display: none;
}

@media (max-width: 760px) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning {
    grid-template-rows: minmax(0, var(--knowledge-visual-height)) 18px minmax(0, 1fr) !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning.is-text-focused {
    --knowledge-visual-height: 72px !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning.is-resizing {
    transition: none !important;
    user-select: none !important;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-divider {
    position: relative;
    z-index: 8;
    display: grid;
    width: 100%;
    height: 18px;
    min-height: 18px;
    place-items: center;
    border: 0;
    border-top: 1px solid rgba(221, 199, 165, 0.72);
    border-bottom: 1px solid rgba(221, 199, 165, 0.5);
    background: #fffaf0;
    cursor: ns-resize;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-divider::before {
    position: absolute;
    inset: -10px 0;
    content: "";
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-divider > span {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #c9bba8;
    box-shadow: 0 1px 2px rgba(66, 38, 25, 0.08);
    transition: width 160ms ease, background 160ms ease, transform 160ms ease;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning.is-resizing .knowledge-split-divider > span {
    width: 46px;
    background: #9f846e;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning.is-hold-ready .knowledge-split-divider > span,
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-learning.is-text-focused .knowledge-split-divider > span {
    width: 52px;
    background: #f2a313;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-divider:focus-visible {
    outline: 3px solid rgba(242, 163, 19, 0.26);
    outline-offset: -3px;
  }

  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-text-pane {
    border-top: 0 !important;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .knowledge-split-divider > span {
    transition: none !important;
  }
}

/* r172: native scrolling and a reliable top-left previous-question control. */
body.student-page .output-practice-top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

body.student-page .output-practice-previous,
body.student-page .output-practice-top-actions .output-practice-back {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--vf-blue) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.student-page .output-practice-top-actions .output-practice-back {
  justify-self: end;
  color: var(--vf-muted) !important;
}

body.student-page .output-practice-quiz .output-single-pager {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.student-page .output-practice-quiz .output-single-pager > span {
  text-align: left;
}

@media (max-width: 760px) {
  body.student-page.output-practice-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  body.student-page.output-practice-active .app-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body.student-page.output-practice-active .student-workspace:not(.hidden),
  body.student-page.output-practice-active #reviewPanel.output-practice-active.active-mobile-panel,
  body.student-page.output-practice-active #reviewPanel.output-practice-active .review-list,
  body.student-page.output-practice-active .output-practice-screen,
  body.student-page.output-practice-active .output-practice-quiz,
  body.student-page.output-practice-active .output-practice-quiz .student-module-quiz-form,
  body.student-page.output-practice-active .output-practice-quiz .module-quiz-result,
  body.student-page.output-practice-active .output-practice-quiz .quiz-feedback-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.student-page.output-practice-active .student-workspace:not(.hidden) {
    padding-bottom: calc(var(--tabbar-height) + 22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.output-practice-active .output-practice-screen {
    grid-template-rows: auto auto !important;
    padding-bottom: calc(var(--tabbar-height) + 34px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.student-page.output-practice-active .output-practice-header {
    padding-top: 4px !important;
  }

  body.student-page.output-practice-active .output-practice-quiz,
  body.student-page.output-practice-active .output-practice-quiz .student-module-quiz-form,
  body.student-page.output-practice-active .output-practice-quiz .quiz-feedback-card {
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }
}

/* r179: chapter-paper result review, status answer card, and clear directory return. */
body.student-page .chapter-paper-practice-screen .output-practice-top-actions .chapter-paper-directory-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  gap: 5px !important;
  color: var(--vf-blue) !important;
}

body.student-page .chapter-paper-directory-back b {
  font-family: Arial, sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

body.student-page .chapter-paper-answer-card > .chapter-paper-answer-legend {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 14px;
  padding: 9px 2px 0;
  color: #647086;
  font-size: 12px;
  font-weight: 900;
}

body.student-page .chapter-paper-answer-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.student-page .chapter-paper-answer-legend span::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: "";
}

body.student-page .chapter-paper-answer-legend .correct::before { background: #29a769; }
body.student-page .chapter-paper-answer-legend .wrong::before { background: #e35e5e; }

body.student-page .chapter-paper-answer-card button.correct {
  border-color: #29a769 !important;
  background: #eaf8f1 !important;
  color: #137a4a !important;
}

body.student-page .chapter-paper-answer-card button.wrong {
  border-color: #e35e5e !important;
  background: #fff0f0 !important;
  color: #b72e2e !important;
}

body.student-page .chapter-paper-review {
  gap: 14px !important;
}

body.student-page .chapter-paper-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(111, 101, 243, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: #f8f7ff;
}

body.student-page .chapter-paper-review-head > div {
  display: grid;
  gap: 5px;
}

body.student-page .chapter-paper-review-head span,
body.student-page .chapter-paper-review-head p {
  margin: 0;
  color: #647086;
  font-size: 13px;
}

body.student-page .chapter-paper-review-head strong {
  color: #5546bd;
  font-size: 28px;
  line-height: 1.1;
}

body.student-page .chapter-paper-review-head button {
  flex: 0 0 auto;
  min-height: 42px;
}

body.student-page .chapter-paper-review-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.student-page .chapter-paper-review-filter button {
  min-height: 42px;
  border: 1px solid #d9dfeb;
  border-radius: 12px;
  background: #fff;
  color: #647086;
  font-weight: 900;
}

body.student-page .chapter-paper-review-filter button.active {
  border-color: #7c6bea;
  background: #efedff;
  color: #5546bd;
}

body.student-page .chapter-paper-review-results .quiz-feedback-card {
  border-left: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body.student-page .chapter-paper-review-results .quiz-feedback-list {
  gap: 12px;
}

body.student-page .chapter-paper-review-results .quiz-feedback-item {
  scroll-margin-top: 150px;
  border: 1px solid rgba(107, 114, 128, 0.14) !important;
  border-left-width: 5px !important;
  border-radius: 14px !important;
  padding: 13px !important;
  background: #fff !important;
}

body.student-page .chapter-paper-review-results .quiz-feedback-item.correct {
  border-color: rgba(41, 167, 105, 0.34) !important;
  border-left-color: #29a769 !important;
  background: #f2fbf6 !important;
}

body.student-page .chapter-paper-review-results .quiz-feedback-item.wrong {
  border-color: rgba(227, 94, 94, 0.34) !important;
  border-left-color: #e35e5e !important;
  background: #fff5f5 !important;
}

body.student-page .chapter-paper-review.show-wrong-only .quiz-feedback-item.correct {
  display: none !important;
}

@media (max-width: 560px) {
  body.student-page .chapter-paper-review-head {
    align-items: stretch;
    flex-direction: column;
  }

  body.student-page .chapter-paper-review-head button {
    width: 100%;
  }
}

/* r180: keep visual-module audio controls inside the bottom “讲解” entry. */
body.student-page .knowledge-dock-audio.settings-open {
  color: #ee9209 !important;
}

body.student-page .knowledge-dock-audio.playing .student-module-dock-icon.icon-audio {
  transform-origin: 36% 54%;
  animation: knowledge-speaker-speaking 720ms ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(238, 146, 9, 0.34));
}

@keyframes knowledge-speaker-speaking {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-5deg) scale(1.08); }
  55% { transform: rotate(3deg) scale(0.96); }
  80% { transform: rotate(-2deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  body.student-page .knowledge-dock-audio.playing .student-module-dock-icon.icon-audio {
    animation: none;
  }
}

/* r182 final mobile guard: keep the immersive feed unobstructed by legacy floating controls. */
@media (max-width: 760px) {
  body.student-page[data-mobile-target="podcastPanel"] #studentAssistantFab.student-planner-fab,
  body.student-page[data-mobile-target="podcastPanel"] .student-planner-fab,
  body.student-page[data-mobile-target="podcastPanel"] .student-assistant-fab,
  body.student-page[data-mobile-target="podcastPanel"] .mobile-mini-player,
  body.student-page[data-mobile-target="podcastPanel"] .module-podcast-dock {
    display: none !important;
  }

  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav:not(.knowledge-module-dock) {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* r182 approved visual direction: warm translucent controls over the artwork. */
body.student-page .memory-feed-text-button,
body.student-page .memory-feed-enter {
  border-color: rgba(82, 67, 53, 0.16);
  background: rgba(255, 252, 245, 0.88);
  color: #312b25;
  box-shadow: 0 6px 18px rgba(52, 39, 24, 0.1);
}

body.student-page .memory-feed-mode-switch {
  border-color: rgba(82, 67, 53, 0.14);
  background: rgba(255, 252, 245, 0.9);
  box-shadow: 0 6px 18px rgba(52, 39, 24, 0.1);
}

body.student-page .memory-feed-mode-switch button {
  color: #5f5963;
}

body.student-page .memory-feed-mode-switch button.active {
  background: rgba(239, 234, 255, 0.98);
  color: #4d3da8;
  box-shadow: none;
}

body.student-page .memory-feed-shade {
  background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(30, 23, 17, 0.08) 58%, rgba(25, 19, 14, 0.72) 84%, rgba(17, 13, 10, 0.86) 100%);
}

body.student-page .memory-feed-actions {
  gap: 4px;
  border: 1px solid rgba(82, 67, 53, 0.14);
  border-radius: 30px;
  padding: 6px 3px;
  background: rgba(255, 252, 245, 0.78);
  box-shadow: 0 10px 28px rgba(52, 39, 24, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.student-page .memory-feed-actions button {
  border: 0;
  background: transparent;
  color: #332d27;
  box-shadow: none;
}

body.student-page .memory-feed-actions span {
  color: #776e66;
}

body.student-page .memory-feed-audio {
  border-color: rgba(82, 67, 53, 0.15);
  background: rgba(255, 252, 245, 0.88);
  color: #302a25;
  box-shadow: 0 14px 38px rgba(52, 39, 24, 0.18);
}

body.student-page .memory-feed-audio-head strong {
  color: #302a25;
}

body.student-page .memory-feed-audio-head span,
body.student-page .memory-feed-progress span {
  color: #746a62;
}

body.student-page .memory-feed-audio-head button,
body.student-page .memory-feed-audio-controls button {
  border-color: rgba(82, 67, 53, 0.18);
  background: rgba(255, 255, 255, 0.28);
  color: #4a423b;
}

body.student-page .memory-feed-progress input {
  accent-color: #8c79f6;
}

body.student-page .memory-feed-audio-controls .memory-feed-play-main {
  border-color: rgba(132, 110, 247, 0.22);
  background: #eee9ff;
  color: #5543bd;
}

body.student-page .memory-feed-search {
  border-color: rgba(82, 67, 53, 0.14);
  background: rgba(255, 252, 245, 0.95);
  color: #312b25;
}

body.student-page .memory-feed-search label,
body.student-page .memory-feed-search-results > span,
body.student-page .memory-feed-search-results button span {
  color: #776e66;
}

body.student-page .memory-feed-search > div > button,
body.student-page .memory-feed-search-results button {
  border-color: rgba(82, 67, 53, 0.14);
  background: rgba(255, 255, 255, 0.62);
  color: #312b25;
}

@media (max-width: 760px) {
  body.student-page[data-mobile-target="podcastPanel"] .mobile-study-nav:not(.knowledge-module-dock) button[data-mobile-target="podcastPanel"].active {
    color: #7765ef !important;
  }
}

body.student-page .memory-feed-shell,
body.student-page .memory-feed-list,
body.student-page .memory-feed-card,
body.student-page .memory-feed-slide,
body.student-page[data-mobile-target="podcastPanel"] {
  background: #8c785f;
}

body.student-page .memory-feed-dots {
  width: calc(100% + 54px);
  justify-content: center;
}

body.student-page #memoryFeedBackButton {
  width: 36px;
  min-width: 36px;
  padding: 0;
  justify-self: start;
}

body.student-page #memoryFeedBackButton img {
  width: 17px;
  height: 17px;
  margin: auto;
  filter: brightness(0) saturate(100%);
}

/* r183: Douyin-like low-obstruction memory feed and progressive cards. */
body.student-page .memory-feed-shell,
body.student-page .memory-feed-list,
body.student-page .memory-feed-card,
body.student-page .memory-feed-slide,
body.student-page[data-mobile-target="podcastPanel"] {
  background: #171219;
}

body.student-page .memory-feed-toolbar {
  grid-template-columns: 40px minmax(0, 220px) 40px;
  gap: 8px;
  padding: 14px 12px 8px;
  background: transparent;
}

body.student-page .memory-feed-text-button,
body.student-page .memory-feed-mode-switch {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.student-page .memory-feed-text-button,
body.student-page #memoryFeedBackButton {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 8px;
}

body.student-page .memory-feed-text-button img,
body.student-page #memoryFeedBackButton img {
  width: 23px;
  height: 23px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

body.student-page .memory-feed-mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 0;
}

body.student-page .memory-feed-mode-switch button,
body.student-page .memory-feed-mode-switch button.active {
  position: relative;
  min-height: 34px;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  box-shadow: none;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.78);
}

body.student-page .memory-feed-mode-switch button.active {
  color: #ffffff;
  font-weight: 900;
}

body.student-page .memory-feed-mode-switch button.active::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: #ffffff;
  content: "";
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

body.student-page .memory-feed-carousel {
  touch-action: pan-x pan-y;
}

body.student-page .memory-feed-slide img {
  user-select: none;
  -webkit-user-drag: none;
}

body.student-page .memory-feed-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, transparent 24%, transparent 64%, rgba(9, 7, 9, 0.2) 76%, rgba(9, 7, 9, 0.74) 100%);
}

body.student-page .memory-feed-actions {
  right: 10px;
  bottom: 142px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.student-page .memory-feed-actions .memory-feed-action-icon {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  place-items: center;
  gap: 1px;
  border: 0;
  border-radius: 0;
  padding: 2px;
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.student-page .memory-feed-action-icon img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.78));
}

body.student-page .memory-feed-action-icon[data-memory-feed-play].is-playing .memory-feed-speaker-icon {
  transform-origin: 36% 54%;
  animation: knowledge-speaker-speaking 720ms ease-in-out infinite;
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.56));
}

@media (prefers-reduced-motion: reduce) {
  body.student-page .memory-feed-action-icon[data-memory-feed-play].is-playing .memory-feed-speaker-icon {
    animation: none;
  }
}

body.student-page .memory-feed-action-icon[aria-pressed="true"] img[data-memory-favorite-icon] {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.62));
}

body.student-page .memory-feed-actions .memory-feed-action-icon > span,
body.student-page .memory-feed-actions .memory-feed-action-label {
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

@media (max-height: 700px) {
  body.student-page #podcastPanel .memory-feed-actions {
    gap: 4px;
  }

  body.student-page #podcastPanel .memory-feed-actions .memory-feed-action-icon {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  body.student-page #podcastPanel .memory-feed-action-icon img {
    width: 24px;
    height: 24px;
  }
}

body.student-page .memory-feed-copy {
  left: 14px;
  right: 58px;
  bottom: 82px;
  gap: 4px;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.86);
}

body.student-page .memory-feed-copy > strong {
  font-size: 19px;
}

body.student-page .memory-feed-copy > span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}

body.student-page .memory-feed-dots {
  width: auto;
  justify-content: flex-start;
}

body.student-page .memory-feed-collection-link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 330px);
  min-height: 28px;
  margin-top: 2px;
  border: 0;
  border-radius: 6px;
  padding: 3px 7px 3px 5px;
  background: rgba(28, 24, 29, 0.48);
  color: #ffffff;
  text-align: left;
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.student-page .memory-feed-collection-link img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

body.student-page .memory-feed-collection-link strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.student-page .memory-feed-collection-link em {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-style: normal;
}

body.student-page .memory-feed-audio {
  z-index: 8;
  left: 10px;
  right: 10px;
  bottom: 62px;
  display: none;
  min-height: 18px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

body.student-page .memory-feed-audio.expanded {
  display: block;
}

body.student-page .memory-feed-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  pointer-events: auto;
}

body.student-page .memory-feed-progress input {
  width: 100%;
  height: 2px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  accent-color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
}

body.student-page #podcastPanel .memory-feed-progress input[type="range"] {
  width: 100% !important;
  height: 2px !important;
  min-height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.42) !important;
  box-shadow: none !important;
}

body.student-page .memory-feed-progress input::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

body.student-page .memory-feed-progress input::-webkit-slider-thumb {
  width: 7px;
  height: 7px;
  margin-top: -2.5px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-appearance: none;
}

body.student-page .memory-feed-progress input::-moz-range-track {
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
}

body.student-page .memory-feed-progress input::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
}

body.student-page .memory-feed-progress > span {
  display: none;
  color: #ffffff;
  font-size: 9px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

body.student-page .memory-feed-progress > button {
  display: grid;
  width: 26px;
  min-width: 26px;
  height: 24px;
  min-height: 24px;
  place-items: center;
  margin-top: -5px;
  border: 0;
  border-radius: 999px;
  padding: 3px;
  background: rgba(18, 15, 20, 0.5);
  color: #ffffff;
}

body.student-page .memory-feed-progress > button img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

body.student-page .memory-feed-audio-controls {
  position: absolute;
  right: 0;
  bottom: 22px;
  display: none;
  align-items: center;
  gap: 5px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(20, 17, 22, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: auto;
}

body.student-page .memory-feed-audio.expanded .memory-feed-audio-controls {
  display: flex;
}

body.student-page .memory-feed-audio.expanded .memory-feed-progress > span {
  display: inline;
}

body.student-page .memory-feed-audio.expanded .memory-feed-progress {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.student-page .memory-feed-audio-controls button {
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 10px;
  box-shadow: none;
}

body.student-page .memory-feed-audio-controls button[data-memory-feed-speed] {
  width: 40px;
  min-width: 40px;
  padding: 0;
}

body.student-page .memory-feed-audio-controls button img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

body.student-page .memory-feed-audio-controls .memory-feed-play-main {
  border: 0;
  background: #ffffff;
  color: #171219;
}

body.student-page .memory-feed-audio-controls .memory-feed-play-main img {
  filter: none;
}

body.student-page .memory-feed-icon-pause,
body.student-page .memory-feed-play-main.is-playing .memory-feed-icon-play {
  display: none;
}

body.student-page .memory-feed-play-main.is-playing .memory-feed-icon-pause {
  display: block;
}

body.student-page .memory-feed-audio-controls > span {
  display: none;
}

.memory-collection-backdrop {
  position: fixed;
  z-index: 190;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(11, 8, 12, 0.55);
}

.memory-collection-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(680px, 100%);
  max-height: 82dvh;
  border-radius: 22px 22px 0 0;
  padding: 8px 10px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.25);
}

.memory-collection-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: #d5d5d5;
}

.memory-collection-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
}

.memory-collection-sheet > header > div {
  display: grid;
  gap: 2px;
}

.memory-collection-sheet > header strong {
  color: #18151a;
  font-size: 18px;
}

.memory-collection-sheet > header span {
  color: #8a858d;
  font-size: 11px;
}

.memory-collection-sheet > header button {
  min-width: 0;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #f2f0f3;
  color: #4b4650;
}

.memory-collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 10px;
}

.memory-collection-card {
  display: grid;
  min-width: 0;
  gap: 4px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #211d22;
  text-align: left;
  box-shadow: none;
}

.memory-collection-cover {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  background: #ece8ed;
}

.memory-collection-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-collection-cover em {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(18, 15, 20, 0.6);
  color: #ffffff;
  font-size: 10px;
  font-style: normal;
}

.memory-collection-card > strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-collection-card > small {
  color: #969199;
  font-size: 10px;
}

body.memory-collection-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  body.student-page #podcastPanel .memory-feed-toolbar {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px;
    grid-template-columns: 40px minmax(0, 220px) 40px;
  }

  body.student-page #podcastPanel .memory-feed-actions {
    bottom: calc(142px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-copy {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  body.student-page #podcastPanel .memory-feed-audio {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    right: 10px;
    min-height: 18px;
    padding: 0;
  }
}

/* r186: image viewer controls float below the system status bar without a toolbar background. */
body.student-page.image-viewer-open .image-viewer {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  background: #05070a !important;
}

body.student-page .image-viewer-stage {
  grid-area: 1 / 1 !important;
}

body.student-page .image-viewer-toolbar {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  min-height: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: max(44px, calc(env(safe-area-inset-top, 0px) + 10px)) 12px 8px !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.88);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.student-page .image-viewer-toolbar #imageViewerCaption {
  color: #ffffff !important;
  font-size: 13px;
}

body.student-page .image-viewer-toolbar-actions {
  gap: 2px;
}

body.student-page .image-viewer-zoom,
body.student-page #imageViewerReset,
body.student-page #imageViewerClose {
  min-width: 0;
  min-height: 36px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 7px !important;
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.student-page .image-viewer-zoom,
body.student-page #imageViewerReset {
  font-size: 11px;
}

body.student-page #imageViewerClose {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  overflow: hidden;
  color: transparent !important;
  font-size: 0;
}

body.student-page #imageViewerClose::before,
body.student-page #imageViewerClose::after {
  position: absolute;
  top: 17px;
  left: 8px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  content: "";
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.82));
}

body.student-page #imageViewerClose::before {
  transform: rotate(45deg);
}

body.student-page #imageViewerClose::after {
  transform: rotate(-45deg);
}

body.student-page .image-viewer-stage > img {
  max-height: 100dvh !important;
}

/* r191: non-destructive image notes over the existing deep-zoom viewer. */
body.student-page .image-viewer {
  --annotation-amber: #e69a16;
  --annotation-amber-soft: #fff1ca;
  --annotation-ivory: #fffdf8;
  --annotation-ink: #33291f;
  --annotation-muted: #76695b;
  --annotation-line: rgba(86, 67, 42, 0.16);
  isolation: isolate;
}

body.student-page .image-annotation-surface {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  place-items: center;
  line-height: 0;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

/* r194: disable native iPad selection across the whole note UI while preserving editors. */
body.student-page .image-viewer.is-annotating,
body.student-page .image-viewer.is-annotating * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

body.student-page .image-viewer.is-annotating .image-annotation-surface > img {
  -webkit-user-drag: none;
}

body.student-page .image-viewer.is-annotating textarea,
body.student-page .image-viewer.is-annotating input[type="text"],
body.student-page .image-viewer.is-annotating [contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text !important;
  user-select: text !important;
}

body.student-page .image-annotation-surface.hidden,
body.student-page .image-annotation-surface > img.hidden {
  display: none !important;
}

body.student-page .image-annotation-surface.is-loading-image {
  visibility: hidden;
}

body.student-page .image-annotation-surface > img {
  display: block;
  grid-area: 1 / 1;
  max-height: 100dvh !important;
}

body.student-page .image-annotation-canvas,
body.student-page .image-annotation-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.student-page .image-annotation-canvas {
  z-index: 2;
  pointer-events: none;
}

body.student-page .image-annotation-layer {
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

body.student-page .image-viewer.is-annotating .image-annotation-layer {
  pointer-events: none;
}

body.student-page .image-annotation-item {
  position: absolute;
  min-width: 64px;
  min-height: 38px;
  box-sizing: border-box;
  overflow: visible;
  line-height: 1.45;
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body.student-page .image-annotation-item.selected {
  z-index: 6;
  outline: 2px solid var(--annotation-amber);
  outline-offset: 3px;
}

body.student-page .image-annotation-item textarea,
body.student-page .image-annotation-item [contenteditable="true"] {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  resize: none;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  font: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: none;
  overscroll-behavior: none;
}

body.student-page .image-annotation-item textarea::-webkit-scrollbar,
body.student-page .image-annotation-item [contenteditable="true"]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body.student-page .image-annotation-note {
  --annotation-note-paper: rgba(255, 253, 248, 0.86);
  --annotation-note-texture:
    repeating-linear-gradient(8deg, rgba(121, 89, 47, 0.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 11px);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(142, 105, 35, 0.22);
  padding: 6px 7px;
  border: 1px solid var(--annotation-note-border);
  border-radius: 3px;
  background-color: var(--annotation-note-paper);
  background-image: var(--annotation-note-texture);
  background-position: 0 0;
  background-size: var(--annotation-note-texture-size);
  color: #3b3022;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", sans-serif;
  font-size: calc(clamp(13px, 2.2vw, 19px) * var(--annotation-item-scale, 1));
  box-shadow: 0 5px 12px rgba(50, 34, 12, 0.15);
}

body.student-page [data-annotation-note-style="ivory-fiber"] {
  --annotation-note-paper: rgba(255, 253, 248, 0.86);
  --annotation-note-texture:
    repeating-linear-gradient(8deg, rgba(121, 89, 47, 0.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 11px);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(142, 105, 35, 0.22);
}

body.student-page [data-annotation-note-style="amber-wash"] {
  --annotation-note-paper: rgba(255, 241, 202, 0.84);
  --annotation-note-texture:
    radial-gradient(circle at 18% 12%, rgba(230, 154, 22, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent 58%);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(230, 154, 22, 0.34);
}

body.student-page [data-annotation-note-style="kraft-grain"] {
  --annotation-note-paper: rgba(242, 223, 189, 0.84);
  --annotation-note-texture:
    repeating-linear-gradient(93deg, rgba(103, 72, 35, 0.04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(3deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 9px);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(119, 82, 37, 0.28);
}

body.student-page [data-annotation-note-style="ruled-paper"] {
  --annotation-note-paper: rgba(255, 253, 248, 0.86);
  --annotation-note-texture: repeating-linear-gradient(180deg, transparent 0 21px, rgba(208, 178, 129, 0.25) 21px 22px);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(208, 178, 129, 0.3);
}

body.student-page [data-annotation-note-style="dot-paper"] {
  --annotation-note-paper: rgba(255, 252, 242, 0.84);
  --annotation-note-texture: radial-gradient(circle, rgba(166, 113, 32, 0.25) 0 0.8px, transparent 0.9px);
  --annotation-note-texture-size: 12px 12px;
  --annotation-note-border: rgba(166, 113, 32, 0.26);
}

body.student-page [data-annotation-note-style="square-grid"] {
  --annotation-note-paper: rgba(255, 252, 242, 0.84);
  --annotation-note-texture:
    linear-gradient(rgba(190, 147, 81, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 147, 81, 0.2) 1px, transparent 1px);
  --annotation-note-texture-size: 18px 18px;
  --annotation-note-border: rgba(166, 113, 32, 0.26);
}

body.student-page [data-annotation-note-style="rice-grid"] {
  --annotation-note-paper: rgba(255, 249, 232, 0.84);
  --annotation-note-texture:
    linear-gradient(45deg, transparent 48.5%, rgba(187, 139, 72, 0.17) 49%, rgba(187, 139, 72, 0.17) 51%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, rgba(187, 139, 72, 0.17) 49%, rgba(187, 139, 72, 0.17) 51%, transparent 51.5%),
    linear-gradient(rgba(187, 139, 72, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187, 139, 72, 0.22) 1px, transparent 1px);
  --annotation-note-texture-size: 24px 24px;
  --annotation-note-border: rgba(154, 104, 39, 0.28);
}

body.student-page [data-annotation-note-style="deckle-fiber"] {
  --annotation-note-paper: rgba(250, 244, 226, 0.84);
  --annotation-note-texture:
    repeating-linear-gradient(12deg, rgba(91, 66, 36, 0.035) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 13px),
    linear-gradient(90deg, rgba(139, 103, 56, 0.08), transparent 5px, transparent calc(100% - 5px), rgba(139, 103, 56, 0.08));
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(139, 103, 56, 0.24);
}

body.student-page [data-annotation-note-style="vellum-glow"] {
  --annotation-note-paper: rgba(255, 248, 226, 0.8);
  --annotation-note-texture: linear-gradient(135deg, rgba(255, 255, 255, 0.36), rgba(230, 154, 22, 0.07));
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(230, 154, 22, 0.3);
}

body.student-page [data-annotation-note-style="margin-slip"] {
  --annotation-note-paper: rgba(255, 253, 248, 0.84);
  --annotation-note-texture:
    linear-gradient(90deg, rgba(230, 154, 22, 0.78) 0 3px, transparent 3px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgba(208, 178, 129, 0.16) 22px 23px);
  --annotation-note-texture-size: auto;
  --annotation-note-border: rgba(142, 105, 35, 0.2);
}

body.student-page .image-annotation-note::before {
  display: none;
  content: none;
}

body.student-page .image-annotation-item-control {
  position: absolute;
  z-index: 2;
  display: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(83, 59, 23, 0.24);
  color: #49371e;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 3px 9px rgba(50, 34, 12, 0.2);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body.student-page .image-annotation-item.selected .image-annotation-item-control {
  display: grid;
  place-items: center;
}

body.student-page .image-annotation-item-move-handle {
  top: -22px;
  left: 50%;
  width: 64px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  transform: translateX(-50%);
}

body.student-page .image-annotation-item-move-handle::before {
  content: "";
  width: 32px;
  height: 5px;
  border-radius: 99px;
  background: rgba(76, 54, 23, 0.55);
}

body.student-page .image-annotation-item-move-handle:active {
  cursor: grabbing;
}

body.student-page .image-annotation-item-delete {
  top: -20px;
  right: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: #a6372d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

body.student-page .image-annotation-item-resize-handle {
  right: 0;
  bottom: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  cursor: nwse-resize;
}

body.student-page .image-annotation-item-resize-handle::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

body.student-page .image-annotation-text {
  padding: 2px 3px;
  border: 0 !important;
  background: transparent !important;
  color: var(--annotation-amber);
  box-shadow: none !important;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", sans-serif;
  font-size: calc(clamp(16px, 2.5vw, 24px) * var(--annotation-item-scale, 1));
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

body.student-page .image-annotation-selection {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  border: 2px dashed #fff;
  outline: 2px solid rgba(230, 154, 22, 0.9);
  outline-offset: 2px;
  background: rgba(230, 154, 22, 0.08);
  cursor: move;
  touch-action: none;
}

body.student-page .image-annotation-selection::after {
  content: "拖动批注";
  position: absolute;
  top: -30px;
  left: 0;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--annotation-ivory);
  color: var(--annotation-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

body.student-page .image-annotation-selection-actions {
  position: absolute;
  right: 0;
  bottom: -38px;
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 9px;
  background: var(--annotation-ivory);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22);
}

body.student-page .image-annotation-selection-actions button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--annotation-ink);
  font-size: 12px;
  font-weight: 850;
}

body.student-page .image-annotation-selection-actions button:last-child {
  color: #b33b2f;
}

body.student-page .image-annotation-selection.hidden {
  display: none;
}

body.student-page .annotation-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 18;
  min-width: 88px;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(230, 154, 22, 0.32);
  border-radius: 999px;
  background: var(--annotation-ivory);
  color: var(--annotation-ink);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  font-size: 15px;
  font-weight: 900;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.student-page .annotation-fab::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--annotation-amber);
  vertical-align: 1px;
}

body.student-page .annotation-fab[aria-expanded="true"] {
  border-color: var(--annotation-amber);
  background: var(--annotation-amber);
  color: #fff;
}

body.student-page .image-viewer.is-annotating .annotation-fab {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.student-page .annotation-workbench {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 16;
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100dvh - 96px - env(safe-area-inset-top, 0px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: var(--annotation-ivory);
  color: var(--annotation-ink);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
  touch-action: pan-y;
  overscroll-behavior: contain;
}

body.student-page .annotation-workbench.is-loading .annotation-tabs,
body.student-page .annotation-workbench.is-loading .annotation-tab-panel,
body.student-page .annotation-workbench.is-loading .annotation-workbench-foot {
  opacity: 0.48;
  pointer-events: none;
}

body.student-page .annotation-workbench.hidden,
body.student-page .annotation-quick-menu.hidden,
body.student-page .annotation-toast.hidden,
body.student-page .annotation-tab-panel.hidden {
  display: none;
}

body.student-page .annotation-workbench-head {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 15px;
  border-bottom: 1px solid var(--annotation-line);
  background: var(--annotation-ivory);
  cursor: grab;
  touch-action: none;
}

body.student-page .annotation-workbench-head strong {
  font-size: 17px;
  font-weight: 950;
}

body.student-page .annotation-drag-hint {
  flex: 1;
  color: var(--annotation-muted);
  font-size: 11px;
}

body.student-page .annotation-history-actions {
  display: flex;
  gap: 4px;
}

body.student-page .annotation-history-actions button,
body.student-page .annotation-tabs button,
body.student-page .annotation-tool-grid button,
body.student-page .annotation-brush-grid button,
body.student-page .annotation-add-note,
body.student-page .annotation-add-text,
body.student-page .annotation-workbench-foot button,
body.student-page .annotation-quick-menu button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

body.student-page .annotation-history-actions button::before,
body.student-page .annotation-tabs button::before,
body.student-page .annotation-tool-grid button::before,
body.student-page .annotation-brush-grid button::before,
body.student-page .annotation-add-note::before,
body.student-page .annotation-add-text::before,
body.student-page .annotation-workbench-foot button::before {
  display: block;
  min-height: 16px;
  margin: 0 auto 3px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

body.student-page #annotationUndo::before { content: "\21B6"; }
body.student-page #annotationRedo::before { content: "\21B7"; }
body.student-page #annotationCollapse::before { content: "\2303"; }
body.student-page [data-annotation-tab="tools"]::before { content: "\229E"; }
body.student-page [data-annotation-tab="brushes"]::before { content: "\2710"; }
body.student-page [data-annotation-tab="notes"]::before { content: "\25AD"; }
body.student-page [data-annotation-tool="move"]::before { content: "\2194"; }
body.student-page [data-annotation-tool="select"]::before { content: "\2316"; }
body.student-page [data-annotation-tool="pen"]::before { content: "\2710"; }
body.student-page [data-annotation-tool="eraser"]::before { content: "\232B"; }
body.student-page [data-annotation-tool="text"]::before { content: "T"; }
body.student-page [data-annotation-add-note]::before { content: "\25AD"; }
body.student-page [data-annotation-brush="pen"]::before { content: "\2571"; }
body.student-page [data-annotation-brush="pencil"]::before { content: "\2571"; font-weight: 300; }
body.student-page [data-annotation-brush="marker"]::before { content: "\2585"; }
body.student-page [data-annotation-brush="brush"]::before { content: "\223F"; }
body.student-page .annotation-add-text::before { content: "T"; }
body.student-page .annotation-clear::before { content: "\232B"; }
body.student-page .annotation-save::before { content: "\2713"; }

body.student-page .annotation-history-actions button {
  min-width: 42px;
  min-height: 36px;
  padding: 0 6px;
  border-radius: 9px;
  color: var(--annotation-muted);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .annotation-history-actions button:disabled {
  opacity: 0.35;
}

body.student-page .annotation-history-actions button:not(:disabled):active,
body.student-page .annotation-tool-grid button:active,
body.student-page .annotation-brush-grid button:active {
  background: var(--annotation-amber-soft);
}

body.student-page .annotation-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 12px 14px 8px;
  padding: 4px;
  border: 1px solid var(--annotation-line);
  border-radius: 13px;
  background: #f8f4ea;
}

body.student-page .annotation-tabs button {
  min-height: 48px;
  border-radius: 9px;
  color: var(--annotation-muted);
  font-size: 14px;
  font-weight: 850;
}

body.student-page .annotation-tabs button.active {
  background: var(--annotation-amber-soft);
  color: #9a6204;
}

body.student-page .annotation-tab-panel {
  min-height: 145px;
  padding: 8px 14px 12px;
}

body.student-page .annotation-tool-grid,
body.student-page .annotation-brush-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

body.student-page .annotation-brush-grid {
  grid-template-columns: repeat(4, 1fr);
}

body.student-page .annotation-tool-grid button,
body.student-page .annotation-brush-grid button {
  min-height: 44px;
  padding: 6px;
  border: 1px solid var(--annotation-line);
  border-radius: 11px;
  background: #fff;
  color: var(--annotation-muted);
  font-size: 13px;
  font-weight: 850;
}

body.student-page .annotation-tool-grid button.active,
body.student-page .annotation-brush-grid button.active {
  border-color: rgba(230, 154, 22, 0.5);
  background: var(--annotation-amber-soft);
  color: #9a6204;
}

body.student-page .annotation-tip {
  margin: 10px 2px 0;
  color: var(--annotation-muted);
  font-size: 12px;
  line-height: 1.45;
}

body.student-page .annotation-colors {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 13px 8px 11px;
  padding: 4px 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.student-page .annotation-colors::-webkit-scrollbar {
  display: none;
}

body.student-page .annotation-colors button {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 3px solid var(--annotation-ivory);
  border-radius: 50%;
  background: var(--annotation-color);
  box-shadow: 0 0 0 1px rgba(60, 42, 24, 0.18);
  scroll-snap-align: center;
}

body.student-page .annotation-colors button.active {
  box-shadow: 0 0 0 2px var(--annotation-amber);
}

body.student-page .annotation-colors button[data-annotation-color="#e69a16"] { --annotation-color: #e69a16; }
body.student-page .annotation-colors button[data-annotation-color="#191919"] { --annotation-color: #191919; }
body.student-page .annotation-colors button[data-annotation-color="#dc4b32"] { --annotation-color: #dc4b32; }
body.student-page .annotation-colors button[data-annotation-color="#2f75d6"] { --annotation-color: #2f75d6; }

body.student-page .annotation-width-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--annotation-muted);
  font-size: 12px;
  font-weight: 800;
}

body.student-page .annotation-width-control input {
  width: 100%;
  accent-color: var(--annotation-amber);
}

body.student-page .annotation-width-control output {
  min-width: 42px;
  text-align: right;
}

body.student-page .annotation-pressure-preview {
  height: 26px;
  margin-top: 8px;
  border-bottom: 3px solid var(--annotation-amber);
  border-radius: 50%;
  opacity: 0.9;
  transform: rotate(-1deg) scaleY(0.7);
}

body.student-page .annotation-add-note,
body.student-page .annotation-add-text {
  width: 100%;
  min-height: 44px;
  margin-bottom: 8px;
  border: 1px solid var(--annotation-line);
  border-radius: 11px;
  background: #fff7d6;
  color: #7c5310;
  font-size: 14px;
  font-weight: 900;
}

body.student-page .annotation-add-text {
  background: #fff;
  color: var(--annotation-ink);
}

body.student-page .annotation-note-style-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 6px;
  margin-top: 2px;
}

body.student-page .annotation-note-style-picker button {
  min-width: 44px;
  min-height: 48px;
  padding: 18px 3px 4px;
  border: 1px solid var(--annotation-note-border) !important;
  border-radius: 8px !important;
  background-color: var(--annotation-note-paper) !important;
  background-image: var(--annotation-note-texture) !important;
  background-position: 0 0 !important;
  background-size: var(--annotation-note-texture-size) !important;
  color: #4f3922 !important;
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.student-page .annotation-note-style-picker button.active,
body.student-page .annotation-note-style-picker button[aria-pressed="true"] {
  border-color: var(--annotation-amber) !important;
  box-shadow: 0 0 0 2px rgba(230, 154, 22, 0.24) !important;
}

body.student-page .annotation-workbench-foot {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 8px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--annotation-line);
  background: var(--annotation-ivory);
}

body.student-page .annotation-workbench-foot button {
  min-height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 950;
}

body.student-page .annotation-clear {
  border: 1px solid var(--annotation-line) !important;
  background: #fff !important;
  color: var(--annotation-muted) !important;
}

body.student-page .annotation-save {
  background: var(--annotation-amber) !important;
  color: #fff !important;
}

body.student-page .annotation-quick-menu {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
  z-index: 17;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px;
  background: var(--annotation-ivory);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
}

body.student-page .annotation-quick-menu button {
  min-width: 74px;
  min-height: 38px;
  border-radius: 9px;
  color: var(--annotation-ink);
  font-size: 13px;
  font-weight: 850;
}

body.student-page .annotation-quick-menu button:active {
  background: var(--annotation-amber-soft);
}

body.student-page .annotation-toast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  z-index: 20;
  max-width: calc(100vw - 40px);
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(26, 23, 19, 0.92);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

@media (min-width: 700px) and (max-width: 1366px) {
  body.student-page .annotation-workbench {
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 58px));
    right: auto;
    bottom: auto;
    left: max(18px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: auto 132px minmax(250px, 1fr) 104px;
    width: min(760px, calc(100vw - 36px));
    max-height: none;
    overflow: hidden;
    border-radius: 18px;
    touch-action: none;
  }

  body.student-page .annotation-workbench.hidden {
    display: none;
  }

  body.student-page .annotation-workbench-head {
    position: static;
    min-height: 78px;
    padding: 6px;
    border-right: 1px solid var(--annotation-line);
    border-bottom: 0;
  }

  body.student-page .annotation-workbench-head strong {
    display: none;
  }

  body.student-page .annotation-drag-hint {
    flex: 0 0 18px;
    width: 18px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  body.student-page .annotation-drag-hint::before {
    content: "\28FF";
    color: var(--annotation-muted);
    font-size: 18px;
  }

  body.student-page .annotation-history-actions {
    gap: 1px;
  }

  body.student-page .annotation-history-actions button {
    min-width: 34px;
    min-height: 54px;
    padding: 2px;
    font-size: 9px;
  }

  body.student-page .annotation-tabs {
    align-self: stretch;
    gap: 2px;
    margin: 6px;
    padding: 3px;
  }

  body.student-page .annotation-tabs button {
    min-width: 38px;
    min-height: 64px;
    padding: 3px;
    font-size: 10px;
  }

  body.student-page .annotation-tab-panel {
    display: flex;
    min-width: 0;
    min-height: 78px;
    align-items: center;
    gap: 8px;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.student-page .annotation-tab-panel::-webkit-scrollbar {
    display: none;
  }

  body.student-page .annotation-tab-panel.hidden {
    display: none;
  }

  body.student-page .annotation-tool-grid,
  body.student-page .annotation-brush-grid {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
  }

  body.student-page .annotation-tool-grid button,
  body.student-page .annotation-brush-grid button {
    width: 48px;
    min-height: 62px;
    padding: 3px;
    font-size: 10px;
  }

  body.student-page .annotation-colors {
    flex: 0 0 220px;
    gap: 8px;
    margin: 0;
  }

  body.student-page .annotation-colors button {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  body.student-page .annotation-width-control {
    flex: 0 0 160px;
  }

  body.student-page .annotation-pressure-preview,
  body.student-page .annotation-tip {
    display: none;
  }

  body.student-page .annotation-add-note,
  body.student-page .annotation-add-text {
    flex: 0 0 110px;
    width: 110px;
    min-height: 62px;
    margin: 0;
    font-size: 11px;
  }

  body.student-page .annotation-note-style-picker {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    margin: 0;
  }

  body.student-page .annotation-note-style-picker button {
    flex: 0 0 52px;
    width: 52px;
    min-height: 62px;
    padding: 27px 3px 4px;
  }

  body.student-page .annotation-workbench-foot {
    position: static;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px 6px;
    border-top: 0;
    border-left: 1px solid var(--annotation-line);
  }

  body.student-page .annotation-workbench-foot button {
    min-width: 42px;
    min-height: 62px;
    padding: 3px;
    font-size: 10px;
  }
}

/* r197: keep image-note controls compact across phone and iPad portrait/landscape widths. */
@media (max-width: 1366px) {
  body.student-page .annotation-workbench.is-collapsed {
    display: flex;
    width: min(164px, calc(100vw - 16px));
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    overflow: hidden;
    border-radius: 14px;
  }

  body.student-page .annotation-workbench.is-collapsed.hidden {
    display: none;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-workbench-head {
    position: static;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 54px;
    padding: 3px 5px;
    border: 0;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-workbench-head strong,
  body.student-page .annotation-workbench.is-collapsed .annotation-tabs,
  body.student-page .annotation-workbench.is-collapsed .annotation-tab-panel,
  body.student-page .annotation-workbench.is-collapsed .annotation-workbench-foot {
    display: none;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-drag-hint {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-drag-hint::before {
    content: "\28FF";
    color: var(--annotation-muted);
    font-size: 18px;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-history-actions {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 1px;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-history-actions button {
    min-width: 40px;
    min-height: 48px;
    padding: 2px;
    font-size: 0;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-history-actions button::after {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
  }

  body.student-page .annotation-workbench.is-collapsed #annotationUndo::after {
    content: "撤销";
  }

  body.student-page .annotation-workbench.is-collapsed #annotationRedo::after {
    content: "重做";
  }

  body.student-page .annotation-workbench.is-collapsed #annotationCollapse::before {
    content: "\2304";
  }

  body.student-page .annotation-workbench.is-collapsed #annotationCollapse::after {
    content: "展开";
  }
}

@media (max-width: 699px) {
  body.student-page .annotation-workbench {
    top: max(82px, calc(env(safe-area-inset-top, 0px) + 64px));
    right: 8px;
    bottom: auto;
    left: 8px;
    display: flex;
    box-sizing: border-box;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px;
    background: rgba(255, 253, 248, 0.96);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  body.student-page .annotation-workbench::-webkit-scrollbar {
    display: none;
  }

  body.student-page .annotation-workbench.hidden {
    display: none;
  }

  body.student-page .annotation-workbench-head {
    position: static;
    display: flex;
    flex: 0 0 auto;
    min-height: 78px;
    gap: 2px;
    padding: 5px;
    border-right: 1px solid var(--annotation-line);
    border-bottom: 0;
  }

  body.student-page .annotation-workbench-head strong {
    display: none;
  }

  body.student-page .annotation-drag-hint {
    flex: 0 0 18px;
    width: 18px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  body.student-page .annotation-drag-hint::before {
    content: "\28FF";
    color: var(--annotation-muted);
    font-size: 18px;
  }

  body.student-page .annotation-history-actions {
    gap: 1px;
  }

  body.student-page .annotation-history-actions button {
    min-width: 34px;
    min-height: 62px;
    padding: 2px;
    font-size: 9px;
    touch-action: manipulation;
  }

  body.student-page .annotation-tabs {
    display: flex;
    flex: 0 0 auto;
    align-self: stretch;
    gap: 2px;
    margin: 5px;
    padding: 3px;
  }

  body.student-page .annotation-tabs button {
    flex: 0 0 40px;
    min-width: 40px;
    min-height: 62px;
    padding: 3px;
    font-size: 9px;
    touch-action: manipulation;
  }

  body.student-page .annotation-tab-panel {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 78px;
    align-items: center;
    gap: 7px;
    padding: 6px;
    overflow: visible;
  }

  body.student-page .annotation-tab-panel.hidden {
    display: none;
  }

  body.student-page .annotation-tool-grid,
  body.student-page .annotation-brush-grid {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
  }

  body.student-page .annotation-tool-grid button,
  body.student-page .annotation-brush-grid button {
    flex: 0 0 47px;
    width: 47px;
    min-height: 62px;
    padding: 3px;
    font-size: 9px;
    touch-action: manipulation;
  }

  body.student-page .annotation-colors {
    flex: 0 0 210px;
    width: 210px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 3px;
    overscroll-behavior-x: auto;
  }

  body.student-page .annotation-colors button {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  body.student-page .annotation-width-control {
    flex: 0 0 154px;
    width: 154px;
    gap: 5px;
    padding: 0 3px;
    font-size: 9px;
  }

  body.student-page .annotation-width-control output {
    min-width: 34px;
  }

  body.student-page .annotation-pressure-preview,
  body.student-page .annotation-tip {
    display: none;
  }

  body.student-page .annotation-add-note,
  body.student-page .annotation-add-text {
    flex: 0 0 90px;
    width: 90px;
    min-height: 62px;
    margin: 0;
    padding: 3px;
    font-size: 10px;
    touch-action: manipulation;
  }

  body.student-page .annotation-note-style-picker {
    display: flex;
    flex: 0 0 auto;
    gap: 5px;
    margin: 0;
  }

  body.student-page .annotation-note-style-picker button {
    flex: 0 0 50px;
    width: 50px;
    min-height: 62px;
    padding: 27px 3px 4px;
  }

  body.student-page .annotation-workbench-foot {
    position: static;
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px 6px;
    border-top: 0;
    border-left: 1px solid var(--annotation-line);
  }

  body.student-page .annotation-workbench-foot button {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 62px;
    padding: 3px;
    font-size: 9px;
    touch-action: manipulation;
  }

  body.student-page .annotation-workbench.is-collapsed {
    right: auto;
    width: min(164px, calc(100vw - 16px));
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  body.student-page .annotation-workbench.is-collapsed .annotation-workbench-head {
    min-height: 54px;
    padding: 3px 5px;
  }

  body.student-page .annotation-fab {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* r208: easier image navigation in the knowledge-point gallery. */
body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow {
  position: absolute;
  z-index: 6;
  top: clamp(132px, 50%, calc(100% - 66px));
  display: grid !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  touch-action: manipulation;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow.left {
  left: 6px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow.right {
  right: 6px !important;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow img {
  display: block;
  width: 21px;
  height: 21px;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.72));
  opacity: 0.58;
  pointer-events: none;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow.right img {
  transform: rotate(180deg);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.92);
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow:focus-visible {
  outline: 3px solid rgba(244, 163, 0, 0.9);
  outline-offset: 2px;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow:disabled {
  opacity: 0.24 !important;
  pointer-events: none;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-corner-hit {
  position: absolute;
  z-index: 3;
  bottom: 0;
  display: block !important;
  width: clamp(64px, 22vw, 84px) !important;
  height: clamp(72px, 18%, 110px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-corner-hit.left {
  left: 0;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-corner-hit.right {
  right: 0;
}

body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-corner-hit:disabled {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.student-page #knowledgeStudyPanel[data-knowledge-view="detail"] .student-gallery-stage .gallery-arrow {
    transition: none !important;
  }
}

body.student-page .tablet-knowledge-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body.student-page .knowledge-bgm-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: inline-grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

body.student-page .knowledge-bgm-toggle img {
  width: 20px;
  height: 20px;
}

body.student-page .knowledge-bgm-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.student-page .knowledge-bgm-toggle.is-off {
  opacity: 0.56;
}

body.student-page .knowledge-image-actions .knowledge-bgm-toggle {
  display: inline-grid;
}

body.student-page .knowledge-image-actions .knowledge-bgm-toggle img {
  width: 18px;
  height: 18px;
}

body.student-page .student-bgm-floating-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 72px);
  right: 16px;
  z-index: 1200;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #263447;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

body.student-page .student-bgm-floating-toggle img {
  width: 20px;
  height: 20px;
}

body.student-page .student-bgm-floating-toggle span {
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

body.student-page .student-bgm-floating-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 124px);
  right: 16px;
  z-index: 1201;
  width: min(340px, calc(100vw - 32px));
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.24);
  padding: 14px;
}

body.student-page .student-bgm-floating-panel.hidden {
  display: none !important;
}

body.student-page .student-bgm-floating-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.student-page .student-bgm-floating-panel > header strong {
  font-size: 15px;
  font-weight: 950;
  color: #263447;
}

body.student-page .student-bgm-floating-panel > header button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 20px;
  line-height: 1;
}

body.student-page .student-bgm-floating-panel .student-bgm {
  margin: 0;
}

@media (max-width: 720px) {
  body.student-page .student-bgm-floating-toggle {
    top: calc(env(safe-area-inset-top) + 64px);
    right: 12px;
  }

  body.student-page .student-bgm-floating-toggle span {
    display: none;
  }

  body.student-page .student-bgm-floating-panel {
    top: calc(env(safe-area-inset-top) + 112px);
    right: 12px;
    width: min(320px, calc(100vw - 24px));
  }
}