:root {
  color-scheme: dark;
  --bg: #171717;
  --surface: #202124;
  --surface-2: #27292d;
  --surface-3: #303237;
  --line: #3b3e45;
  --text: #f3f4f6;
  --muted: #a9afb8;
  --green: #5ecf8b;
  --cyan: #65c7d8;
  --amber: #d6a84c;
  --danger: #d96a6a;
  --rail: #111;
  --shadow: 0 1.125rem 2.875rem rgba(0, 0, 0, 0.28);
}

/* 练习与 AI 批改 */
.exercise-workspace,
.grading-workspace {
  min-height: 0;
  height: 100%;
  background: var(--surface, #15171c);
}

.exercise-workspace {
  display: grid;
  grid-template-columns: minmax(17rem, 24%) minmax(0, 1fr);
}

.exercise-workspace.is-list-collapsed,
.grading-workspace.is-list-collapsed { grid-template-columns: minmax(0, 1fr); }
.exercise-workspace.is-list-collapsed .exercise-list-panel,
.grading-workspace.is-list-collapsed .grading-exercise-list-panel { display: none; }

.workspace-list-visibility-toggle {
  position: absolute;
  z-index: 12;
  top: 0.65rem;
  left: 0.55rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0.0625rem solid var(--line, #3b3e45);
  border-radius: 0.5rem;
  color: var(--text, #f3f4f6);
  background: color-mix(in srgb, var(--surface-2, #27292d) 92%, transparent);
  box-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.2);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.workspace-list-visibility-toggle:hover { border-color: var(--green, #5ecf8b); }
.workspace-list-visibility-toggle[aria-expanded="false"] { transform: rotate(180deg); }

.exercise-list-panel {
  min-width: 0;
  border-right: 0.0625rem solid var(--border, #30343d);
  padding: 1rem;
  overflow: auto;
}

.exercise-panel-head,
.exercise-editor-meta,
.grading-detail-head,
.answer-review-shell > header,
.answer-review-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.exercise-panel-head h2,
.exercise-panel-head p,
.grading-detail-head h2,
.grading-detail-head p {
  margin: 0;
}

.exercise-panel-tools {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.exercise-create-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 1rem 0 0.5rem;
}

.exercise-upload-action {
  cursor: pointer;
  text-align: center;
}

.exercise-create-actions .primary-action,
.exercise-create-actions .exercise-upload-action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.375rem;
  min-height: 2.375rem;
  padding: 0 0.9375rem;
  line-height: 1;
}

.exercise-list-filters {
  margin: 0.75rem 0;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.6rem;
  background: var(--surface-2, #fafafa);
}

.exercise-filter-toggle {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  color: var(--text, #1f2937);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.exercise-filter-toggle > span:first-child {
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}

.exercise-filter-toggle small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted, #667085);
  font-size: 0.68rem;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-filter-toggle-icon {
  color: var(--muted, #667085);
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.exercise-filter-toggle[aria-expanded="true"] .exercise-filter-toggle-icon {
  transform: rotate(180deg);
}

.exercise-filter-fields {
  padding: 0 0.65rem 0.65rem;
  display: grid;
  gap: 0.5rem;
}

.exercise-filter-fields label {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  color: var(--muted, #667085);
  font-size: 0.7rem;
}

.exercise-filter-fields input,
.exercise-filter-fields select {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.35rem 0.5rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.4rem;
  color: var(--text, #1f2937);
  background: var(--surface, #fff);
  font: inherit;
}

.exercise-date-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.exercise-filter-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.exercise-filter-footer button {
  flex: 0 0 auto;
  min-height: 1.8rem;
  padding: 0.2rem 0.5rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.4rem;
  color: var(--text, #1f2937);
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.7rem;
}

.exercise-ai-status {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.65rem;
  background: var(--surface-2, #fafafa);
  color: var(--muted, #a7adb8);
  font-size: 0.82rem;
}

.exercise-ai-status-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
}
.exercise-ai-status-head > div { display: grid; gap: 0.2rem; }
.exercise-ai-status-head .exercise-ai-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}
.exercise-ai-status time {
  white-space: nowrap;
  color: var(--muted, #667085);
  font-variant-numeric: tabular-nums;
}
.exercise-ai-review-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  color: var(--text, #1f2937);
  font-size: 0.78rem;
}
.exercise-ai-review-option input { margin: 0; }
.exercise-ai-status-actions button {
  min-height: 1.8rem;
  padding: 0.2rem 0.65rem;
  border: 0.0625rem solid color-mix(in srgb, var(--danger, #c0392b) 45%, var(--line, #d7dce3));
  border-radius: 0.45rem;
  background: var(--surface, #fff);
  color: var(--danger, #b42318);
  cursor: pointer;
}
.exercise-ai-status-actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--danger, #c0392b) 7%, var(--surface, #fff));
}
.exercise-ai-status-actions button:disabled { cursor: wait; opacity: 0.65; }
.exercise-ai-status-actions #start-exercise-ai-workflow {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 55%, var(--line, #d7dce3));
  background: color-mix(in srgb, var(--green, #2f9d68) 9%, var(--surface, #fff));
  color: var(--green, #247a53);
  font-weight: 700;
}
.exercise-ai-status-actions #start-exercise-ai-workflow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--green, #2f9d68) 16%, var(--surface, #fff));
}
.exercise-ai-status strong { color: var(--text, #f1f4f8); }
.exercise-ai-status progress { width: 100%; height: 0.55rem; accent-color: var(--green, #2f9d68); }
.exercise-ai-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
.exercise-ai-stages span {
  padding: 0.28rem 0.2rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--muted, #a7adb8) 8%, var(--surface, #fff));
  text-align: center;
}
.exercise-ai-stages span.is-complete {
  color: var(--green, #2f9d68);
  background: color-mix(in srgb, var(--green, #2f9d68) 10%, var(--surface, #fff));
}
.exercise-ai-stages span.is-active {
  color: var(--cyan, #237c91);
  background: color-mix(in srgb, var(--cyan, #237c91) 10%, var(--surface, #fff));
}

.exercise-ai-error-mask {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.5);
}
.exercise-ai-error-mask[hidden] { display: none; }
.exercise-ai-error-dialog {
  width: min(42rem, 100%);
  max-height: min(75vh, 36rem);
  padding: 1rem;
  overflow: hidden;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.75rem;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, 0.25);
}
.exercise-ai-detail-dialog { width: min(50rem, 100%); }
.exercise-ai-error-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.exercise-ai-error-head h3 { margin: 0; }
.exercise-ai-error-detail,
#exercise-ai-error-detail {
  max-height: min(58vh, 28rem);
  margin: 0;
  padding: 0.75rem;
  overflow: auto;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.5rem;
  background: var(--surface-2, #fafafa);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.8125rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.exercise-ai-error-detail[hidden],
#exercise-ai-error-detail[hidden] { display: none; }

.exercise-list {
  display: grid;
  gap: 0.38rem;
}

.exercise-project-group {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.exercise-project-header {
  width: 100%;
  min-width: 0;
  min-height: 1.85rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
  padding: 0.22rem 0.34rem;
  border: 0;
  border-radius: 0.42rem;
  background: color-mix(in srgb, var(--surface-2, #fafafa) 84%, transparent);
  color: var(--text, #1f2937);
}

.exercise-project-header:hover {
  background: color-mix(in srgb, var(--green, #2f9d68) 8%, var(--surface-2, #fafafa));
}

.exercise-project-drag-handle {
  width: 1.35rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--muted, #667085);
  cursor: grab;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: -0.18rem;
  touch-action: none;
}

.exercise-project-drag-handle:hover,
.exercise-project-drag-handle:focus-visible {
  background: color-mix(in srgb, var(--green, #2f9d68) 12%, transparent);
  color: var(--green, #2f9d68);
  outline: none;
}

.exercise-project-drag-handle:disabled {
  cursor: wait;
  opacity: 0.45;
}

.exercise-project-toggle {
  min-width: 0;
  min-height: 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.38rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.exercise-project-toggle strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-project-toggle small {
  color: var(--muted, #667085);
  font-size: 0.68rem;
}

.exercise-project-add {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--muted, #667085);
  cursor: pointer;
  font-size: 1.08rem;
  line-height: 1;
}

.exercise-project-add:hover,
.exercise-project-add:focus-visible {
  background: color-mix(in srgb, var(--green, #2f9d68) 12%, transparent);
  color: var(--green, #2f9d68);
  outline: none;
}

.exercise-project-caret {
  color: var(--muted, #667085);
  font-size: 1rem;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.exercise-project-group.is-collapsed .exercise-project-caret { transform: rotate(0deg); }

.exercise-list.is-project-dragging { user-select: none; }

.exercise-project-group.is-project-dragging { opacity: 0.62; }

.exercise-project-group.is-project-dragging .exercise-project-drag-handle { cursor: grabbing; }

.exercise-project-items {
  display: grid;
  gap: 0.34rem;
  padding-left: 0.38rem;
}

.exercise-project-items[hidden] { display: none; }

.exercise-project-empty {
  margin: 0;
  padding: 0.35rem 0.5rem;
  color: var(--muted, #667085);
  font-size: 0.7rem;
}

.workspace-loading-host,
.exercise-editor-panel {
  position: relative;
}

.exercise-list-loading-host,
.grading-exercise-list-loading-host {
  min-height: 8rem;
}

.workspace-waiting-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  min-height: 7rem;
  padding: 1rem;
  color: var(--text, #f3f4f6);
  background: color-mix(in srgb, var(--surface, #202124) 88%, transparent);
  backdrop-filter: blur(0.125rem);
  font-size: 0.78rem;
  text-align: center;
}

.workspace-waiting-overlay[hidden] { display: none; }

.workspace-waiting-spinner {
  width: 1.75rem;
  height: 1.75rem;
  border: 0.1875rem solid color-mix(in srgb, var(--muted, #a9afb8) 35%, transparent);
  border-top-color: var(--green, #5ecf8b);
  border-radius: 50%;
  animation: workspace-waiting-spin 720ms linear infinite;
}

.classroom-content-loading {
  min-height: min(18rem, 45vh);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.82rem;
}

button.is-loading {
  cursor: wait !important;
}

button.is-loading::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.4rem;
  display: inline-block;
  flex: 0 0 auto;
  border: 0.125rem solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: workspace-waiting-spin 720ms linear infinite;
  vertical-align: -0.1rem;
}

@keyframes workspace-waiting-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-waiting-spinner,
  button.is-loading::before { animation-duration: 1.8s; }
}

.exercise-list-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 8rem;
  padding: 0.35rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.55rem;
  background: var(--surface, #fff);
  box-shadow: 0 0.7rem 2rem rgb(15 23 42 / 18%);
}

.exercise-list-context-menu button {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--text, #1f2937);
  text-align: left;
  cursor: pointer;
}

.exercise-list-context-menu button:hover {
  background: color-mix(in srgb, var(--green, #2f9d68) 10%, var(--surface, #fff));
}

.exercise-list-context-menu button:disabled {
  color: var(--muted, #667085);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.58;
}

.exercise-context-move {
  max-height: min(15rem, 42vh);
  margin-top: 0.22rem;
  padding-top: 0.28rem;
  overflow: auto;
  border-top: 0.0625rem solid var(--line, #d7dce3);
}

.exercise-context-move > small {
  display: block;
  padding: 0.18rem 0.7rem 0.25rem;
  color: var(--muted, #667085);
  font-size: 0.68rem;
}

.exercise-list-item,
.grading-submission-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  text-align: left;
  padding: 0.8rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.75rem;
  background: var(--surface, #fff);
  color: inherit;
}

.exercise-list-item {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding: 0.55rem 0.62rem;
}

.exercise-list-item:hover,
.exercise-list-item.is-active,
.grading-submission-item:hover,
.grading-submission-item.is-active {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 55%, var(--line, #d7dce3));
  background: color-mix(in srgb, var(--green, #2f9d68) 5%, var(--surface, #fff));
}

.exercise-list-select {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.28rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.exercise-list-delete {
  flex: 0 0 auto;
  padding: 0.15rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--muted, #667085);
  font-size: 0.75rem;
}

.exercise-list-delete:hover {
  color: var(--danger, #c64b4b);
  text-decoration: underline;
}

.exercise-list-workflow {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  gap: 0.45rem;
  padding-top: 0.6rem;
  border-top: 0.0625rem solid var(--line, #d7dce3);
}

.exercise-list-workflow-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
}

.exercise-list-workflow-summary > span {
  min-width: 0;
  display: block;
  overflow: hidden;
  color: var(--muted, #667085);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-list-workflow progress {
  width: 100%;
  height: 0.38rem;
  accent-color: var(--green, #2f9d68);
}

.exercise-list-workflow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.exercise-list-workflow-actions label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted, #667085);
  font-size: 0.72rem;
}

.exercise-list-workflow-actions button {
  min-height: 1.75rem;
  padding: 0.2rem 0.55rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.42rem;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  cursor: pointer;
  font-size: 0.72rem;
}

.exercise-list-workflow-actions button[data-start-exercise-import] {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 50%, var(--line, #d7dce3));
  color: var(--green, #247a53);
  font-weight: 700;
}

.exercise-list-workflow-actions button:hover {
  background: color-mix(in srgb, var(--green, #2f9d68) 8%, var(--surface, #fff));
}

.exercise-list-item span,
.grading-submission-item span {
  display: grid;
  gap: 0.25rem;
}

.exercise-list-item small,
.grading-submission-item small {
  color: var(--muted, #a7adb8);
}

.grading-submission-item > span:first-child {
  min-width: 0;
}

.grading-submission-item > span:first-child small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.exercise-list-item .exercise-list-target {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text, #1f2937);
  font-size: 0.72rem;
  opacity: 0.78;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-list-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
}

.exercise-list-title {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.36;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.exercise-list-card-head em {
  align-self: start;
  justify-self: end;
  white-space: nowrap;
}

.exercise-list-card-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  color: var(--muted, #667085);
}

.exercise-list-card-foot > small {
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-list-card-foot > span {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.exercise-list-card-foot > span > small {
  color: var(--muted, #667085);
  font-size: 0.72rem;
  white-space: nowrap;
}

.exercise-list-item em,
.grading-submission-item em,
.exercise-status-pill {
  font-style: normal;
  font-size: 0.75rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999rem;
  color: var(--muted, #667085);
  background: var(--surface-3, #eceff3);
}

.exercise-list-item em[data-status="published"],
.exercise-status-pill[data-status="published"],
.grading-submission-item em[data-status="published"] {
  color: var(--green, #2f9d68);
  background: color-mix(in srgb, var(--green, #2f9d68) 12%, var(--surface, #fff));
}
.exercise-list-item em[data-status="draft"],
.exercise-status-pill[data-status="draft"] {
  color: var(--muted, #667085);
  background: var(--surface-3, #eceff3);
}
.grading-submission-item em[data-status="submitted"] { background: #76591b; }
.grading-submission-item em[data-status="grading"] { background: #365b91; }
.grading-submission-item em[data-status="graded"],
.grading-submission-item em[data-status="reviewed"] { background: #594481; }

.exercise-editor-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.exercise-editor-empty {
  height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  color: var(--muted, #a7adb8);
  text-align: center;
}

.exercise-editor-layout {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.exercise-editor-meta,
.exercise-publish-panel,
.grading-filter-bar,
.grading-summary {
  padding: 0.8rem 1rem;
  border-bottom: 0.0625rem solid var(--border, #30343d);
}
.exercise-editor-meta { padding-left: 3.1rem; }

#exercise-title-input {
  min-width: 12rem;
  flex: 1;
  font-size: 1.2rem;
  font-weight: 700;
}

.exercise-rich-toolbar {
  position: relative;
  justify-content: space-between;
  overflow-x: auto;
}

#exercise-font-size-select {
  min-width: 4rem;
}

#exercise-font-family-select {
  min-width: 5.5rem;
}

.exercise-question-actions button {
  white-space: nowrap;
}

.exercise-edit-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24%);
}

.exercise-rich-editor {
  overflow: auto;
  margin: 1rem;
  padding: clamp(1rem, 3vw, 2.5rem);
}

article.exercise-rich-editor[contenteditable="false"] {
  opacity: 1;
  color: var(--text, #1f2328);
  cursor: default;
}

.exercise-image-resize-target {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
}

.exercise-image-resize-target > img {
  display: block;
  max-width: 100%;
  height: auto !important;
}

.exercise-image-resize-target[data-image-width] > img {
  width: 100% !important;
  max-height: none;
  object-fit: contain;
}

.exercise-image-resize-target[data-image-aspect-ratio] > img {
  height: 100% !important;
  max-height: none;
  object-fit: fill;
}

.exercise-image-resize-handle {
  position: absolute;
  z-index: 4;
  right: -0.45rem;
  bottom: -0.45rem;
  width: 1rem;
  height: 1rem;
  border: 0.14rem solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0.18rem 0.55rem rgb(15 23 42 / 30%);
  cursor: nwse-resize;
  touch-action: none;
}

.exercise-image-resize-target.is-resizing {
  outline: 0.14rem solid color-mix(in srgb, var(--cyan) 55%, transparent);
  outline-offset: 0.2rem;
}

.exercise-rich-editor .exercise-question-prompt[contenteditable="true"],
.exercise-rich-editor .exercise-option-editor li > div[contenteditable="true"] {
  cursor: text;
}

.exercise-question {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 1.2rem;
  border: 0.0625rem solid var(--border, #30343d);
  border-radius: 0.75rem;
}

.exercise-question.is-selected {
  border-color: var(--accent, #6d8cff);
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--accent, #6d8cff) 25%, transparent);
}

.exercise-question-badge {
  color: var(--accent, #8ea5ff);
  font-size: 0.78rem;
}

.exercise-question-review-warning {
  display: grid;
  gap: 0.2rem;
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--amber, #b7791f) 55%, var(--line, #d7dce3));
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--amber, #b7791f) 10%, var(--surface, #fff));
  color: var(--text, #1f2937);
  font-size: 0.82rem;
}

.exercise-question-review-warning strong {
  color: var(--amber, #b7791f);
}

.exercise-question-review-warning span {
  color: var(--muted, #667085);
}

.exercise-global-import-warning {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 0.0625rem solid color-mix(in srgb, var(--danger, #c44747) 52%, var(--line, #d7dce3));
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--danger, #c44747) 10%, var(--surface, #fff));
  color: var(--text, #1f2937);
  font-size: 0.84rem;
}

.exercise-global-import-warning strong {
  color: var(--danger, #a52f2f);
}

.exercise-global-import-warning span {
  color: var(--muted, #667085);
  line-height: 1.55;
}

.exercise-question-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.exercise-question-review-actions button {
  padding: 0.35rem 0.65rem;
  border: 0.0625rem solid color-mix(in srgb, var(--amber, #b7791f) 60%, var(--line, #d7dce3));
  border-radius: 0.45rem;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  cursor: pointer;
}

.exercise-question-prompt {
  min-height: 2rem;
  margin: 0.75rem 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  outline: none;
}

.exercise-question-prompt:empty::before {
  content: attr(data-placeholder);
  color: var(--muted, #667085);
  pointer-events: none;
}

.exercise-question-prompt:focus:empty::before {
  content: "";
}

.exercise-image-resize-target {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: middle;
}

.exercise-image-resize-target > img {
  display: block;
  max-width: 100%;
  height: auto !important;
}

.exercise-image-resize-target[data-image-width] > img {
  width: 100% !important;
  max-height: none;
  object-fit: contain;
}

.exercise-image-resize-target[data-image-aspect-ratio] > img {
  height: 100% !important;
  max-height: none;
  object-fit: fill;
}

.exercise-image-resize-handle {
  position: absolute;
  z-index: 4;
  right: -0.45rem;
  bottom: -0.45rem;
  width: 1rem;
  height: 1rem;
  border: 0.14rem solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0.18rem 0.55rem rgb(15 23 42 / 30%);
  cursor: nwse-resize;
  touch-action: none;
}

.exercise-image-resize-target.is-resizing {
  outline: 0.14rem solid color-mix(in srgb, var(--cyan) 55%, transparent);
  outline-offset: 0.2rem;
}

.exercise-question.is-import-pending {
  border-style: dashed;
  opacity: 0.78;
}

.exercise-question.is-import-pending .exercise-question-prompt {
  color: var(--muted, #667085);
}

.exercise-option-editor {
  display: grid;
  gap: 0.5rem;
  padding-left: 0;
  list-style: none;
}

.exercise-option-editor li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.5rem;
  background: var(--surface, #fff);
}

.exercise-option-editor li > div {
  min-width: 0;
  outline: none;
}

.exercise-option-remove {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #667085);
  cursor: pointer;
}

.exercise-option-remove:hover {
  background: color-mix(in srgb, var(--red, #d64545) 10%, transparent);
  color: var(--red, #d64545);
}

.exercise-answer-placeholder {
  padding: 0.8rem;
  border: 0.0625rem dashed var(--border, #3d4350);
  color: var(--muted, #a7adb8);
}

.exercise-answer-template-preview {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.65rem;
  background: var(--surface, #fff);
}

.exercise-answer-template-preview img {
  width: min(100%, 48rem);
  height: auto;
}

.exercise-answer-template-preview figcaption {
  color: var(--muted, #667085);
  font-size: 0.84rem;
}

.exercise-answer-template-settings {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.6rem;
}

.exercise-answer-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.exercise-answer-template-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.exercise-answer-template-settings-preview img {
  display: block;
  width: 100%;
  max-height: 24rem;
  object-fit: contain;
  border: 0.0625rem solid var(--line);
  background: #fff;
}

.exercise-question-settings {
  min-width: 0;
  padding: 1rem;
  overflow: auto;
  border-left: 0.0625rem solid var(--border, #30343d);
}

.exercise-question-settings h3 {
  margin-top: 0;
  font-size: 1.05rem;
}

.exercise-score-setting-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.exercise-score-setting-row input {
  min-width: 0;
}

.exercise-question-settings .exercise-variant-generation-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.7rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--surface-2, #f6f8fa) 82%, transparent);
  color: var(--text, #1f2328);
  cursor: pointer;
}

.exercise-switch-control {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.4rem;
}

.exercise-question-settings .exercise-switch-control input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.exercise-switch-control > span {
  position: absolute;
  inset: 0;
  border-radius: 999rem;
  background: var(--surface-3, #d9dee7);
  transition: background 140ms ease;
}

.exercise-switch-control > span::after {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.04rem;
  height: 1.04rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.08rem 0.2rem rgb(0 0 0 / 24%);
  content: "";
  transition: transform 140ms ease;
}

.exercise-switch-control input:checked + span {
  background: var(--accent, #2f80ed);
}

.exercise-switch-control input:checked + span::after {
  transform: translateX(1.1rem);
}

.exercise-switch-control input:focus-visible + span {
  outline: 0.16rem solid color-mix(in srgb, var(--accent, #2f80ed) 32%, transparent);
  outline-offset: 0.12rem;
}

.exercise-switch-control input:disabled + span {
  opacity: 0.55;
}

.exercise-question-settings .exercise-variant-generation-setting:has(input:disabled) {
  cursor: default;
}

.exercise-choice-settings {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--surface-2, #f6f8fa) 82%, transparent);
}

.exercise-choice-settings[hidden] {
  display: none;
}

.exercise-multiple-scoring {
  display: grid;
  gap: 0.45rem;
  padding: 0.65rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent, #2f80ed) 35%, var(--line, #d7dce3));
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--accent, #2f80ed) 7%, var(--surface, #fff));
}

.exercise-multiple-scoring[hidden] {
  display: none;
}

.exercise-multiple-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.exercise-multiple-score-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  font-size: 0.78rem;
}

.exercise-multiple-score-grid label > span:last-child {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.exercise-multiple-score-grid input {
  width: 100%;
  min-width: 0;
  padding-inline: 0.35rem;
}

.exercise-multiple-scoring small {
  line-height: 1.45;
}

.exercise-choice-option-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.exercise-choice-option-actions span {
  color: var(--muted, #667085);
  font-size: 0.85rem;
}

.exercise-question-review-gate {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem;
  border: 0.0625rem solid color-mix(in srgb, var(--amber, #b7791f) 45%, var(--line, #d7dce3));
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--amber, #b7791f) 7%, var(--surface, #fff));
}

.exercise-question-review-gate[data-state="reviewed"] {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 48%, var(--line, #d7dce3));
  background: color-mix(in srgb, var(--green, #2f9d68) 7%, var(--surface, #fff));
}

.exercise-question-review-gate > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.exercise-question-review-gate strong { color: var(--text, #1f2328); }
.exercise-question-review-gate small { color: var(--muted, #667085); line-height: 1.45; }

.exercise-question-review-gate-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
}

.exercise-question-review-gate-actions button {
  min-height: 1.7rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.15;
  white-space: nowrap;
}

.exercise-question-review-gate-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.exercise-question-settings label,
.answer-review-item label,
.grading-question-result label,
.grading-teacher-comment {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
  color: var(--muted, #a7adb8);
  font-size: 0.82rem;
}

.exercise-question-settings input,
.exercise-question-settings select,
.exercise-question-settings textarea,
.answer-review-item input,
.answer-review-item textarea,
.grading-question-result input,
.grading-question-result textarea,
.grading-teacher-comment textarea {
  width: 100%;
}

.exercise-setting-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
  color: var(--muted, #a7adb8);
  font-size: 0.82rem;
}

.answer-review-rich-field,
.grading-rich-review-field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
  color: var(--muted, #a7adb8);
  font-size: 0.82rem;
}

.answer-review-rich-field .rich-input-shell,
.grading-rich-review-field .rich-input-shell {
  border-radius: 0.4rem;
}

.exercise-setting-label {
  color: var(--muted, #a7adb8);
}

.exercise-setting-field-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.exercise-rich-expand-button {
  flex: 0 0 auto;
  min-height: 1.45rem;
  padding: 0.1rem 0.42rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 999px;
  background: var(--surface-2, #f6f8fa);
  color: var(--muted, #667085);
  font-size: 0.72rem;
  line-height: 1.1;
  cursor: pointer;
}

.exercise-rich-expand-button:hover,
.exercise-rich-expand-button:focus-visible {
  border-color: color-mix(in srgb, var(--blue, #276ef1) 55%, var(--line, #d7dce3));
  color: var(--blue, #276ef1);
}

.exercise-rich-setting-field .rich-input-shell {
  border-radius: 0.4rem;
}

.exercise-setting-rich-input {
  display: block;
  min-width: 0;
  color: var(--text, #1f2328);
}

.exercise-setting-rich-input .rich-input-editor {
  min-height: 5rem;
  max-height: 12rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.9rem;
}

.exercise-setting-rich-input.is-compact .rich-input-editor {
  min-height: 2.75rem;
  max-height: 7rem;
}

.exercise-setting-field small {
  line-height: 1.45;
  color: var(--muted, #a7adb8);
}

.exercise-knowledge-tags {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.exercise-knowledge-tags:empty {
  display: none;
}

.exercise-knowledge-tag {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.35rem 0.25rem 0.55rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 999px;
  color: var(--text, #1f2328);
  background: var(--surface-2, #fafafa);
}

.exercise-knowledge-tag > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exercise-knowledge-tag button {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted, #667085);
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.exercise-knowledge-tag button:hover,
.exercise-knowledge-tag button:focus-visible {
  color: var(--text, #1f2328);
  background: var(--surface-3, #eceff3);
  outline: none;
}

.exercise-knowledge-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.exercise-knowledge-input-row button {
  padding: 0 0.65rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.35rem;
  color: var(--text, #1f2328);
  background: var(--surface-2, #fafafa);
  cursor: pointer;
}

.exercise-knowledge-input-row button:hover,
.exercise-knowledge-input-row button:focus-visible {
  border-color: var(--accent, #6d8cff);
  outline: none;
}

.exercise-question-settings .inline-check,
.exercise-publish-settings .inline-check {
  display: flex;
  align-items: center;
}

.exercise-question-settings .inline-check input,
.exercise-publish-settings .inline-check input { width: auto; }

.exercise-publish-panel {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-top: 0.0625rem solid var(--border, #30343d);
  border-bottom: 0;
}

.exercise-publish-settings,
.exercise-group-options {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}

.exercise-publish-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.exercise-group-options label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 0.0625rem solid var(--border, #30343d);
  border-radius: 0.5rem;
}

.exercise-group-options label.has-responses {
  border-color: color-mix(in srgb, var(--warning, #c47a18) 48%, var(--border, #30343d));
}

.exercise-group-options label small[data-group-response-count] {
  color: var(--warning, #9a5b0a);
}

body.is-exercise-lecturing {
  overflow: hidden;
}

.exercise-lecture-overlay {
  position: fixed;
  z-index: 1400;
  inset: 0;
  background: #f7f9fc;
  color: #172033;
}

.exercise-lecture-overlay[hidden] {
  display: none;
}

.exercise-lecture-close-zone {
  position: fixed;
  z-index: 1450;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: start end;
  padding: 1rem;
}

.exercise-lecture-close-zone button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgb(23 32 51 / 84%);
  color: #fff;
  box-shadow: 0 0.55rem 1.6rem rgb(15 23 42 / 22%);
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.2;
  transform: translateY(-0.35rem);
  transition: opacity 150ms ease, transform 150ms ease;
}

.exercise-lecture-close-zone:hover button,
.exercise-lecture-close-zone:focus-within button,
.exercise-lecture-close-zone button:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.exercise-lecture-exit-confirm {
  position: fixed;
  z-index: 1480;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgb(15 23 42 / 54%);
  backdrop-filter: blur(0.25rem);
}

.exercise-lecture-exit-confirm[hidden] {
  display: none;
}

.classroom-stop-confirm {
  position: fixed;
  z-index: 1480;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgb(15 23 42 / 54%);
  backdrop-filter: blur(0.25rem);
}

.classroom-stop-confirm[hidden] {
  display: none;
}

.classroom-stop-confirm-card {
  width: min(28rem, 100%);
  padding: 1.35rem;
  border: 0.0625rem solid #d7dee9;
  border-radius: 0.85rem;
  background: #fff;
  color: #172033;
  box-shadow: 0 1.4rem 4rem rgb(15 23 42 / 32%);
}

.classroom-stop-confirm-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.25rem;
}

.classroom-stop-confirm-card p {
  margin: 0;
  color: #5d687a;
  line-height: 1.65;
}

.classroom-stop-confirm-actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.exercise-lecture-exit-card {
  width: min(28rem, 100%);
  padding: 1.35rem;
  border: 0.0625rem solid #d7dee9;
  border-radius: 0.85rem;
  background: #fff;
  color: #172033;
  box-shadow: 0 1.4rem 4rem rgb(15 23 42 / 32%);
}

.exercise-lecture-exit-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.25rem;
}

.exercise-lecture-exit-card p {
  margin: 0;
  color: #5d687a;
  line-height: 1.65;
}

.exercise-lecture-exit-actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

.exercise-lecture-editor {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 0;
}

.exercise-lecture-editor .lexiang-rich-shell {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.exercise-lecture-editor .lexiang-rich-editor-stage {
  min-height: 0;
  overflow: hidden;
}

.exercise-lecture-editor .lexiang-rich-editor {
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: clamp(3.5rem, 7vh, 6.5rem) max(5vw, calc((100vw - 72rem) / 2));
  overflow-y: auto;
  background: transparent;
  caret-color: transparent;
  color: #172033;
  cursor: default;
  font-size: clamp(1.15rem, 1.65vw, 1.55rem);
  line-height: 1.85;
  user-select: none;
  -webkit-user-select: none;
}

.exercise-lecture-editor .lexiang-rich-editor * {
  user-select: none;
  -webkit-user-select: none;
}

.exercise-lecture-editor .exercise-lecture-code {
  max-width: 100%;
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border-left: 0.22rem solid #6b8fc4;
  border-radius: 0.35rem;
  background: #eef3fa;
  color: #172033;
  font: 0.92em/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 4;
  white-space: pre;
}

.exercise-lecture-editor .exercise-lecture-code code {
  font: inherit;
  white-space: inherit;
}

.exercise-lecture-editor .exercise-lecture-code.exercise-lecture-code-boxed {
  border: 0.075rem solid #9aa9bc;
  border-radius: 0.4rem;
  background: #f7f8fa;
}

.exercise-lecture-editor .exercise-lecture-answer-blank {
  display: inline-block;
  min-width: 12em;
  border-bottom: 0.065rem solid currentColor;
  box-sizing: border-box;
  white-space: pre;
  vertical-align: baseline;
}

.exercise-lecture-editor .lexiang-rich-editor > p:first-child {
  margin: 0 0 2.2rem;
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  line-height: 1.25;
  text-align: center;
}

.exercise-lecture-editor .lexiang-rich-editor > div {
  margin: 0 0 2.4rem;
  padding: 0 0 2.25rem;
  border-bottom: 0.0625rem solid #dce3ed;
}

.exercise-lecture-editor .lexiang-rich-editor > div > p:first-child {
  margin-top: 0;
  color: #0a66d8;
  font-size: 0.85em;
}

.exercise-lecture-editor .lexiang-rich-editor ol {
  display: grid;
  gap: 0.65rem;
  padding-left: 2.2rem;
}

.exercise-lecture-editor .lexiang-rich-editor table {
  width: 100%;
  margin: 1.1rem 0 1.5rem;
  border-collapse: collapse;
  color: #172033;
  font-size: 0.88em;
  line-height: 1.55;
}

.exercise-lecture-editor .lexiang-rich-editor th,
.exercise-lecture-editor .lexiang-rich-editor td {
  min-width: 4.5rem;
  padding: 0.55rem 0.7rem;
  border: 0.075rem solid #9aa9bc;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.exercise-lecture-editor .lexiang-rich-editor th {
  background: #eaf3ff;
  color: #0757b5;
  font-weight: 700;
  text-align: center;
}

.exercise-lecture-editor .rich-input-image {
  max-height: min(55vh, 34rem);
}

.exercise-lecture-editor .exercise-question-figure {
  margin: 1.25rem auto 1.7rem;
  text-align: center;
}

.exercise-lecture-editor .exercise-question-figure .rich-input-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(62vh, 42rem);
  margin: 0 auto;
  object-fit: contain;
}

.exercise-lecture-editor .exercise-question-figure figcaption {
  margin-top: 0.55rem;
  color: #66758a;
  font-size: 0.72em;
  line-height: 1.45;
  text-align: center;
}

.exercise-lecture-floating-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.exercise-lecture-floating-surface {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: transparent;
  pointer-events: none;
  will-change: transform;
}

.exercise-lecture-handwriting-annotation {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  object-fit: fill;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.exercise-lecture-handwriting-annotation.is-editing {
  visibility: hidden;
}

.exercise-lecture-floating-media {
  position: absolute;
  box-sizing: border-box;
  min-width: 4.5rem;
  min-height: 4.5rem;
  border: 0.0625rem dashed transparent;
  background: transparent;
  cursor: context-menu;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.exercise-lecture-floating-media:hover,
.exercise-lecture-floating-media:focus-visible {
  border-color: rgb(10 102 216 / 72%);
  outline: none;
}

.exercise-lecture-floating-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.exercise-lecture-media-handle {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.12rem solid #fff;
  border-radius: 50%;
  background: #0a66d8;
  box-shadow: 0 0.1rem 0.35rem rgb(15 23 42 / 30%);
  opacity: 0;
  pointer-events: auto;
}

.exercise-lecture-floating-media.is-resizing .exercise-lecture-media-handle {
  opacity: 1;
}

.exercise-lecture-floating-media.is-moving {
  border-color: rgb(10 102 216 / 72%);
  cursor: move;
}

.exercise-lecture-floating-media.is-resizing {
  border-color: rgb(10 102 216 / 72%);
  cursor: nwse-resize;
}

.exercise-lecture-media-handle.is-nw {
  top: -0.48rem;
  left: -0.48rem;
  cursor: nwse-resize;
}

.exercise-lecture-media-handle.is-ne {
  top: -0.48rem;
  right: -0.48rem;
  cursor: nesw-resize;
}

.exercise-lecture-media-handle.is-se {
  right: -0.48rem;
  bottom: -0.48rem;
  cursor: nwse-resize;
}

.exercise-lecture-media-handle.is-sw {
  bottom: -0.48rem;
  left: -0.48rem;
  cursor: nesw-resize;
}

#exercise-lecture-editor.is-handwriting-overlay .lexiang-rich-editor {
  visibility: visible;
}

#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-layer,
#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-canvas {
  background: transparent;
}

#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-tools-toggle {
  top: 7rem;
  right: 1rem;
}

#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-toolbar {
  top: 7rem;
  right: 3.85rem;
}

#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-pen-popover,
#exercise-lecture-editor.is-handwriting-overlay .lexiang-handwriting-eraser-popover {
  top: 10.2rem;
  right: 3.85rem;
}

body.is-exercise-lecturing .camera-modal {
  z-index: 1600;
}

.grading-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(17rem, 24%) minmax(0, 1fr);
}

.grading-exercise-list-panel {
  min-width: 0;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  border-right: 0.0625rem solid var(--line, #30343d);
  background: var(--surface-2, #1b1d21);
}

.grading-exercise-list {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 1rem;
}

.grading-exercise-item {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.42rem;
  padding: 0.72rem 0.75rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.75rem;
  background: var(--surface, #fff);
  color: var(--text, #1f2937);
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.grading-exercise-item:hover,
.grading-exercise-item.is-active {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 58%, var(--line, #d7dce3));
  background: color-mix(in srgb, var(--green, #2f9d68) 6%, var(--surface, #fff));
}

.grading-exercise-item:hover { transform: translateY(-0.0625rem); }
.grading-exercise-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.55rem;
}
.grading-exercise-title {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.36;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.grading-exercise-card-head em {
  align-self: start;
  justify-self: end;
  padding: 0.18rem 0.45rem;
  border-radius: 999rem;
  background: var(--surface-3, #eceff3);
  color: var(--muted, #667085);
  font-size: 0.72rem;
  font-style: normal;
  white-space: nowrap;
}
.grading-exercise-card-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}
.grading-exercise-card-meta small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted, #667085);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grading-exercise-card-meta small:last-child { flex: 0 0 auto; }
.grading-exercise-card-head em[data-status="submitted"] { color: var(--amber, #a66f00); background: color-mix(in srgb, var(--amber, #a66f00) 12%, var(--surface, #fff)); }
.grading-exercise-card-head em[data-status="grading"] { color: var(--cyan, #237c91); background: color-mix(in srgb, var(--cyan, #237c91) 12%, var(--surface, #fff)); }
.grading-exercise-card-head em[data-status="graded"],
.grading-exercise-card-head em[data-status="reviewed"] { color: #8b6dc3; background: color-mix(in srgb, #8b6dc3 12%, var(--surface, #fff)); }
.grading-exercise-card-head em[data-status="published"] { color: var(--green, #2f9d68); background: color-mix(in srgb, var(--green, #2f9d68) 12%, var(--surface, #fff)); }
.grading-exercise-card-head em[data-status="stopped"] { color: var(--danger, #c62828); background: color-mix(in srgb, var(--danger, #c62828) 10%, var(--surface, #fff)); }
.grading-exercise-card-progress {
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999rem;
  background: var(--surface-3, #eceff3);
}
.grading-exercise-card-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green, #2f9d68); }

.grading-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.grading-stage-empty { height: 100%; }
.grading-stage-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.grading-stage-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 3.1rem;
  border-bottom: 0.0625rem solid var(--line, #30343d);
}
.grading-stage-title { flex: 1 1 50%; min-width: 0; overflow: hidden; }
.grading-stage-title h2,
.grading-stage-title p { margin: 0; }
.grading-stage-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grading-stage-actions { flex: 0 1 50%; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.grading-overview-toggle {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: inherit;
  cursor: pointer;
}
.grading-overview-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.grading-overview-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
.grading-stage-overview { min-height: 0; }
.grading-stage-overview.is-collapsed { display: none; }
.grading-refresh-state { color: var(--muted, #667085); font-size: 0.75rem; white-space: nowrap; }
.grading-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(4.5rem, 1fr));
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  overflow-x: auto;
}
.grading-summary button {
  min-width: 4.5rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.6rem;
  background: var(--surface-2, #fafafa);
  color: var(--text, #1f2937);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.grading-summary button:hover,
.grading-summary button:focus-visible { border-color: var(--green, #2f9d68); outline: none; }
.grading-summary button[data-status="submitted"] strong { color: var(--amber, #a66f00); }
.grading-summary button[data-status="grading"] strong { color: var(--cyan, #237c91); }
.grading-summary button[data-status="published"] strong { color: var(--green, #2f9d68); }
.grading-summary strong { font-size: 1.2rem; line-height: 1; }
.grading-summary span { color: var(--muted, #a7adb8); font-size: 0.72rem; white-space: nowrap; }

.grading-filter-bar {
  display: grid;
  grid-template-columns: minmax(31.5rem, 1.45fr) minmax(20rem, 1fr);
  gap: 0.7rem;
  align-items: end;
  padding: 0.65rem 1rem;
  border-top: 0.0625rem solid var(--line, #30343d);
  border-bottom: 0.0625rem solid var(--line, #30343d);
}
.grading-filter-inputs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(5.15rem, 1fr)) auto;
  gap: 0.4rem;
  align-items: end;
}
.grading-filter-inputs label { min-width: 0; display: grid; gap: 0.2rem; color: var(--muted, #667085); font-size: 0.68rem; }
.grading-filter-inputs select,
.grading-filter-inputs input {
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.3rem 0.45rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.42rem;
  color: var(--text, #1f2937);
  background: var(--surface, #fff);
  font: inherit;
}
.grading-filter-inputs > button { min-height: 2rem; padding-inline: 0.65rem; }
.grading-detail-field-controls {
  min-width: 0;
  margin: 0;
  padding: 0.28rem 0.5rem 0.38rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.55rem;
}
.grading-detail-field-controls legend {
  padding: 0 0.25rem;
  color: var(--muted, #667085);
  font-size: 0.68rem;
}
.grading-detail-field-controls > div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; }
.grading-detail-field-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text, #1f2937);
  font-size: 0.7rem;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
}
.grading-detail-field-controls input {
  width: 0.8rem;
  height: 0.8rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--green, #2f9d68);
}

.grading-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(15rem, 25%) minmax(0, 1fr);
}
.grading-submission-loading-host,
.grading-detail-loading-host { min-width: 0; min-height: 0; }
.grading-submission-loading-host > .grading-submission-list,
.grading-detail-loading-host > .grading-detail { width: 100%; height: 100%; }
.grading-submission-list,
.grading-detail { min-height: 0; overflow: auto; padding: 1rem; }
.grading-submission-list { border-right: 0.0625rem solid var(--line, #30343d); background: var(--surface-2, #1b1d21); }
.grading-submission-item { margin-bottom: 0.55rem; cursor: pointer; }
.grading-submission-item:disabled { cursor: default; opacity: 0.66; }
.grading-submission-item .grading-question-progress {
  grid-column: 1 / -1;
  color: var(--muted, #a9afb8);
  font-size: 0.75rem;
  text-align: left;
}
.grading-submission-item progress { grid-column: 1 / -1; width: 100%; accent-color: var(--cyan, #237c91); }

.grading-detail-head { padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-detail-head > strong { font-size: 1.6rem; white-space: nowrap; }
.grading-live-progress { display: grid; gap: 0.35rem; margin-top: 0.75rem; color: var(--muted, #a9afb8); font-size: 0.8rem; }
.grading-live-progress progress { width: 100%; accent-color: var(--cyan, #237c91); }
.grading-question-result.is-pending-ai { opacity: 0.72; }
.grading-section-head h3,
.grading-section-head p { margin: 0; }
.grading-section-head p { margin-top: 0.2rem; color: var(--muted, #667085); font-size: 0.78rem; }
.grading-submitted-answers { display: grid; gap: 0.75rem; margin-top: 1rem; }
.grading-submitted-answers > article {
  padding: 0.9rem;
  border: 0.0625rem solid var(--line, #30343d);
  border-radius: 0.75rem;
  background: var(--surface-2, #1d2027);
}
.grading-submitted-answers > article > header { display: flex; justify-content: space-between; gap: 0.6rem; }
.grading-submitted-answers > article > header span { color: var(--muted, #667085); font-size: 0.75rem; }
.grading-answer-rich { display: grid; gap: 0.35rem; margin-top: 0.65rem; }
.grading-answer-rich .math-formula,
.grading-question-prompt .math-formula,
.grading-question-option .math-formula {
  --caret-color: currentColor;
  pointer-events: none;
  user-select: none;
}
.grading-question-options { display: grid; gap: 0.48rem; margin: 0.7rem 0; }
.grading-question-option {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0.55rem;
  padding: 0.58rem 0.7rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.55rem;
  background: var(--surface, #fff);
}
.grading-question-option-key {
  display: grid;
  place-items: center;
  min-height: 1.65rem;
  border-radius: 50%;
  background: var(--surface-3, #eceff3);
  font-weight: 800;
}
.grading-question-option-content { min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.grading-question-option.is-student-selected {
  border-color: #eab308;
  background: color-mix(in srgb, #fde047 13%, var(--surface, #fff));
  box-shadow:
    0 0 0 0.125rem color-mix(in srgb, #facc15 72%, transparent),
    0 0 1rem color-mix(in srgb, #facc15 58%, transparent);
}
.grading-question-option.is-student-selected .grading-question-option-key {
  background: #facc15;
  color: #422006;
}
.grading-detail [data-grading-detail-field][hidden] { display: none !important; }
.grading-answer-images { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.grading-answer-images figure { width: fit-content; max-width: 100%; margin: 0; }
.grading-answer-images img { display: block; width: 12rem; max-width: 100%; max-height: 12rem; object-fit: contain; border-radius: 0.5rem; background: #fff; cursor: zoom-in; }
.grading-answer-images figcaption { margin-top: 0.25rem; color: var(--muted); font-size: 0.78rem; text-align: center; }
.grading-image-preview-dialog {
  width: min(96vw, 90rem);
  height: min(92vh, 60rem);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0.0625rem solid var(--border, #30343d);
  border-radius: 0.9rem;
  background: var(--surface, #15171c);
  color: inherit;
  overflow: hidden;
}
.grading-image-preview-dialog::backdrop { background: rgb(0 0 0 / 72%); }
.grading-image-preview-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.grading-image-preview-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 0.0625rem solid var(--line, #30343d);
}
.grading-image-preview-shell > header h2 { min-width: 0; margin: 0; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.grading-image-preview-controls { display: flex; align-items: center; gap: 0.4rem; }
.grading-image-preview-controls button {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.65rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.45rem;
  background: var(--surface-2, #f7f8fa);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.grading-image-preview-controls output { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
#close-grading-image-preview { border: 0; background: transparent; font-size: 1.25rem; }
.grading-image-preview-stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background-color: #20242a;
  background-image:
    linear-gradient(45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
    linear-gradient(-45deg, rgb(255 255 255 / 4%) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 4%) 75%),
    linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 4%) 75%);
  background-position: 0 0, 0 0, 0.75rem -0.75rem, -0.75rem 0.75rem;
  background-size: 1.5rem 1.5rem;
}
.grading-image-preview-stage:focus-visible { outline: 0.125rem solid var(--green, #2f9d68); outline-offset: -0.125rem; }
.grading-image-preview-canvas { display: grid; place-items: center; min-width: 100%; min-height: 100%; padding: 1rem; box-sizing: border-box; }
.grading-image-preview-canvas img { display: block; max-width: none; max-height: none; border-radius: 0.3rem; background: #fff; box-shadow: 0 0.4rem 1.6rem rgb(0 0 0 / 35%); user-select: none; }
@media (max-width: 46rem) {
  .grading-image-preview-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .grading-image-preview-shell > header { align-items: flex-start; }
  .grading-image-preview-controls { flex-wrap: wrap; justify-content: flex-end; }
  .grading-image-preview-controls output { min-width: 3rem; }
}
.grading-question-annotation { display: grid; gap: 0.35rem; margin-top: 0.75rem; color: var(--muted, #667085); font-size: 0.78rem; }
.grading-question-result input,
.grading-question-result textarea,
.grading-teacher-comment textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0.0625rem solid var(--line, #d7dce3);
  border-radius: 0.42rem;
  color: var(--text, #1f2937);
  background: var(--surface, #fff);
  font: inherit;
}
.grading-question-result textarea,
.grading-teacher-comment textarea { resize: vertical; }
.grading-question-result input:focus,
.grading-question-result textarea:focus,
.grading-teacher-comment textarea:focus,
.grading-filter-inputs input:focus,
.grading-filter-inputs select:focus {
  border-color: color-mix(in srgb, var(--green, #2f9d68) 65%, var(--line, #d7dce3));
  outline: 0.125rem solid color-mix(in srgb, var(--green, #2f9d68) 18%, transparent);
  outline-offset: 0.0625rem;
}
.grading-question-results { display: grid; gap: 1rem; margin-top: 1rem; }
.grading-question-result,
.grading-overall,
.answer-review-item {
  padding: 1rem;
  border: 0.0625rem solid var(--line, #30343d);
  border-radius: 0.75rem;
  background: var(--surface-2, #1d2027);
}
.grading-question-result h3 { display: flex; justify-content: space-between; }
.grading-question-result.is-reviewed { border-color: color-mix(in srgb, var(--green, #2f9d68) 65%, var(--line, #30343d)); }
.grading-question-result.is-incorrect {
  border-color: #ef4444;
  box-shadow: 0 0 0 0.125rem color-mix(in srgb, #ef4444 72%, transparent);
}
.grading-question-result.is-grading-failed {
  border-color: #ef4444;
  background: color-mix(in srgb, #ef4444 7%, var(--surface-2, #1d2027));
  box-shadow:
    0 0 0 0.125rem color-mix(in srgb, #ef4444 42%, transparent),
    0 0 1.35rem color-mix(in srgb, #ef4444 48%, transparent),
    inset 0 0 1rem color-mix(in srgb, #ef4444 9%, transparent);
}
.grading-question-result-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grading-question-result-head h3 { margin: 0; }
.grading-question-result-head span { color: var(--amber, #a66f00); font-size: 0.78rem; }
.grading-question-result.is-reviewed .grading-question-result-head span { color: var(--green, #2f9d68); }
.grading-question-result.is-grading-failed .grading-question-result-head span {
  color: #ff6b6b;
  font-weight: 800;
}
.grading-question-result[data-ai-review="true"]:not(.is-reviewed):not(.is-grading-failed) {
  border-color: color-mix(in srgb, var(--amber, #a66f00) 64%, var(--line, #30343d));
}
.grading-ai-review {
  margin: 0.8rem 0;
  padding: 0.75rem;
  border: 0.0625rem solid color-mix(in srgb, var(--amber, #a66f00) 55%, var(--line, #30343d));
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--amber, #a66f00) 7%, transparent);
}
.grading-ai-review summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; cursor: pointer; }
.grading-ai-review summary span { color: var(--amber, #a66f00); font-size: 0.76rem; font-weight: 700; }
.grading-ai-review-reasons { margin: 0.55rem 0; color: var(--muted, #667085); font-size: 0.78rem; }
.grading-ai-candidates { display: grid; gap: 0.55rem; margin-top: 0.65rem; }
.grading-ai-candidate { padding: 0.65rem; border: 0.0625rem solid var(--line, #30343d); border-radius: 0.5rem; background: var(--surface, #fff); }
.grading-ai-candidate.is-recommended { border-color: color-mix(in srgb, var(--green, #2f9d68) 60%, var(--line, #30343d)); }
.grading-ai-candidate.is-error { border-color: color-mix(in srgb, #ef4444 55%, var(--line, #30343d)); }
.grading-ai-candidate header { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.grading-ai-candidate header span { color: var(--muted, #667085); font-size: 0.75rem; }
.grading-ai-candidate p { margin: 0.45rem 0 0; white-space: pre-wrap; }
.grading-ai-candidate ul { margin: 0.45rem 0 0; padding-left: 1.2rem; }
.grading-score-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.9rem 0; }
.grading-score-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.45rem; }
.grading-score-actions label { display: flex; align-items: center; gap: 0.35rem; }
.grading-score-actions input { width: 5rem; }
.grading-confirm-question { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; padding: 0; border: 0.0625rem solid var(--green, #2f9d68); border-radius: 50%; background: transparent; color: var(--green, #2f9d68); cursor: pointer; }
.grading-confirm-question svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grading-question-result.is-reviewed .grading-confirm-question { background: var(--green, #2f9d68); color: #fff; }
.grading-ai-question { min-height: 2.35rem; padding: 0 0.8rem; border: 0.0625rem solid color-mix(in srgb, var(--accent, #4f7cff) 70%, var(--line, #30343d)); border-radius: 0.5rem; background: color-mix(in srgb, var(--accent, #4f7cff) 10%, transparent); color: var(--accent, #4f7cff); font: inherit; font-weight: 700; cursor: pointer; }
.grading-confirm-question:disabled,
.grading-ai-question:disabled { cursor: not-allowed; opacity: 0.5; }
.grading-teacher-comment { display: grid; gap: 0.4rem; margin-top: 1rem; }
.grading-detail-actions {
  position: sticky;
  bottom: -1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 1rem -1rem -1rem;
  padding: 0.75rem 1rem;
  border-top: 0.0625rem solid var(--line, #30343d);
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  backdrop-filter: blur(0.5rem);
}
.grading-annotation-save-state { margin-right: auto; color: var(--muted, #667085); font-size: 0.75rem; }
.grading-error { color: #ff8f8f; }

.grading-submission-item em[data-status="submitted"],
.grading-submission-item em[data-status="grading"],
.grading-submission-item em[data-status="graded"],
.grading-submission-item em[data-status="reviewed"] { color: #fff; }

.exercise-expanded-editor-dialog {
  width: min(58rem, calc(100vw - 2rem));
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0.0625rem solid var(--border, #30343d);
  border-radius: 0.9rem;
  background: var(--surface, #15171c);
  color: var(--text, #f4f5f7);
}

.exercise-expanded-editor-dialog::backdrop {
  background: rgb(0 0 0 / 58%);
}

.exercise-expanded-editor-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 92vh;
}

.exercise-expanded-editor-shell > header,
.exercise-expanded-editor-shell > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
}

.exercise-expanded-editor-shell > header {
  border-bottom: 0.0625rem solid var(--border, #30343d);
}

.exercise-expanded-editor-shell > header p,
.exercise-expanded-editor-shell > header h2,
.exercise-expanded-editor-body > p {
  margin: 0;
}

.exercise-expanded-editor-shell > header h2 {
  margin-top: 0.12rem;
  font-size: 1.1rem;
}

.exercise-expanded-editor-close {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 1.2rem;
}

.exercise-expanded-editor-body {
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.exercise-expanded-rich-input {
  display: block;
  color: var(--text, #1f2328);
}

.exercise-expanded-rich-input .rich-input-shell {
  border-radius: 0.65rem;
}

.exercise-expanded-rich-input .rich-input-editor {
  min-height: min(56vh, 32rem);
  max-height: 62vh;
  padding: 1rem;
  overflow: auto;
  font-size: 1rem;
  line-height: 1.7;
}

.exercise-expanded-editor-body > p {
  padding-top: 0.65rem;
  font-size: 0.82rem;
}

.exercise-expanded-editor-shell > footer {
  border-top: 0.0625rem solid var(--border, #30343d);
}

.exercise-expanded-editor-shell > footer span {
  font-size: 0.8rem;
}

.answer-review-dialog {
  width: min(64rem, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 0.0625rem solid var(--border, #30343d);
  border-radius: 1rem;
  background: var(--surface, #15171c);
  color: inherit;
}

.answer-review-dialog::backdrop { background: rgb(0 0 0 / 65%); }
.answer-review-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: 90vh; }
.answer-review-shell > header,
.answer-review-shell > footer,
.answer-review-shell > p { padding: 1rem; margin: 0; }
.answer-review-list { overflow: auto; padding: 0 1rem 1rem; display: grid; gap: 0.8rem; }
.ai-grade-answer-ready { margin: 0; padding: 0.85rem 1rem; border: 0.0625rem solid color-mix(in srgb, var(--green, #2f9d68) 48%, var(--line, #30343d)); border-radius: 0.65rem; color: var(--text, #f4f5f7); background: color-mix(in srgb, var(--green, #2f9d68) 8%, var(--surface-2, #1d2027)); }
.ai-grade-student-picker { padding: 0 1rem 0.8rem; border-bottom: 0.0625rem solid var(--line, #30343d); }
.ai-grade-student-picker-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem; }
.ai-grade-student-picker-head label { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.ai-grade-student-picker-head span { color: var(--muted, #667085); font-size: 0.78rem; }
.ai-grade-student-list { max-height: 12rem; overflow-y: auto; display: grid; gap: 0.35rem; padding-right: 0.25rem; }
.ai-grade-student-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border: 0.0625rem solid var(--line, #30343d); border-radius: 0.55rem; background: var(--surface-2, #1d2027); }
.ai-grade-student-item span { display: grid; min-width: 0; }
.ai-grade-student-item small { color: var(--muted, #667085); }
.ai-grade-student-item em { color: var(--muted, #667085); font-style: normal; font-size: 0.75rem; }
.ai-grade-student-item.is-ungraded em { color: var(--amber, #a66f00); }

.grading-roster-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: 82vh; padding: 0; border: 0.0625rem solid var(--border, #30343d); border-radius: 0.9rem; background: var(--surface, #15171c); color: inherit; }
.grading-roster-dialog::backdrop { background: rgb(0 0 0 / 58%); }
.grading-roster-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 82vh; }
.grading-roster-shell > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-roster-shell > header h2,
.grading-roster-shell > header p { margin: 0; }
.grading-roster-shell > header button { border: 0; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; }
.grading-roster-shell > footer { display: flex; justify-content: flex-end; gap: 0.55rem; padding: 0.85rem 1rem; border-top: 0.0625rem solid var(--line, #30343d); }
.grading-roster-shell > footer[hidden] { display: none; }
.grading-summary-dialog { width: min(52rem, calc(100vw - 2rem)); max-height: 88vh; padding: 0; border: 0.0625rem solid var(--border, #30343d); border-radius: 0.9rem; background: var(--surface, #15171c); color: inherit; }
.grading-summary-dialog::backdrop { background: rgb(0 0 0 / 58%); }
.grading-summary-dialog-shell { position: relative; width: 100%; height: min(88vh, 48rem); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.grading-summary-dialog-shell > header,
.grading-summary-dialog-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; }
.grading-summary-dialog-shell > header { border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-summary-dialog-shell > footer { justify-content: flex-end; border-top: 0.0625rem solid var(--line, #30343d); }
.grading-summary-dialog-shell > header h2,
.grading-summary-dialog-shell > header p { margin: 0; }
.grading-summary-dialog-shell > header button { cursor: pointer; }
#close-grading-summary-dialog { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.125rem; line-height: 1; }
.grading-summary-dialog-body { min-height: 12rem; padding: 1rem; overflow: auto; }
.grading-feedback-tabs { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-feedback-tabs button { min-height: 2.35rem; padding: 0.45rem 0.9rem; border: 0.0625rem solid transparent; border-radius: 0.55rem; background: transparent; color: var(--muted, #667085); font: inherit; font-weight: 700; cursor: pointer; }
.grading-feedback-tabs button:hover,
.grading-feedback-tabs button:focus-visible { color: var(--text, #1f2937); outline: none; }
.grading-feedback-tabs button.is-active { border-color: color-mix(in srgb, var(--green, #2f9d68) 45%, var(--line, #d7dce3)); background: color-mix(in srgb, var(--green, #2f9d68) 10%, var(--surface, #fff)); color: var(--green, #2f9d68); }
.grading-feedback-panel[hidden] { display: none; }
.grading-summary-history,
.grading-summary-generator,
.grading-score-report-generator { padding: 1rem; border: 0.0625rem solid var(--line, #30343d); border-radius: 0.75rem; background: var(--surface-2, #1d2027); }
.grading-summary-generator { margin-top: 1rem; }
.grading-summary-history > header,
.grading-summary-generator > header,
.grading-score-report-generator > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.grading-summary-history h3,
.grading-summary-generator h3,
.grading-score-report-generator h3 { margin: 0; font-size: 1rem; }
.grading-summary-history > header span { color: var(--muted, #667085); font-size: 0.78rem; }
.grading-summary-history-list { display: grid; gap: 0.55rem; }
.grading-summary-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.6rem; background: var(--surface, #fff); color: var(--text, #1f2937); }
.grading-summary-history-item:hover { border-color: color-mix(in srgb, var(--green, #2f9d68) 58%, var(--line, #d7dce3)); background: color-mix(in srgb, var(--green, #2f9d68) 6%, var(--surface, #fff)); }
.grading-summary-history-copy { min-width: 0; display: grid; gap: 0.25rem; }
.grading-summary-history-copy strong,
.grading-summary-history-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grading-summary-history-copy small { color: var(--muted, #667085); font-size: 0.76rem; }
.grading-summary-history-actions { display: flex; align-items: center; gap: 0.4rem; }
.grading-summary-history-item button { min-height: 2rem; padding: 0.35rem 0.75rem; }
.grading-summary-select-all,
.grading-summary-generation-groups label { display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.55rem 0.65rem; border-radius: 0.5rem; background: var(--surface, #fff); }
.grading-summary-select-all { width: fit-content; margin-bottom: 0.6rem; font-weight: 700; }
.grading-summary-generation-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.grading-summary-generation-groups label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grading-summary-generation-error,
#grading-score-report-error { display: block; min-height: 1.15rem; margin-top: 0.45rem; color: var(--danger, #c62828); font-size: 0.75rem; }
.grading-summary-generation-actions { display: flex; justify-content: flex-end; }
.grading-summary-generation-state { margin-top: 0.7rem; }
.grading-summary-progress { display: grid; gap: 0.65rem; color: var(--muted, #667085); }
.grading-summary-progress progress { width: 100%; }
.grading-summary-progress button { justify-self: start; }
.grading-score-report-result { margin-top: 1rem; }
.grading-score-report-result > .muted { margin: 0; padding: 1rem; text-align: center; }
.grading-score-report-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.grading-score-report-stat-grid div { display: grid; gap: 0.2rem; padding: 0.75rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.65rem; background: var(--surface-2, #fafafa); }
.grading-score-report-stat-grid strong { font-size: 1.2rem; }
.grading-score-report-stat-grid span { color: var(--muted, #667085); font-size: 0.75rem; }
.grading-score-report-groups { display: grid; gap: 0.45rem; margin-top: 0.8rem; }
.grading-score-report-groups article { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.55rem; background: var(--surface-2, #fafafa); }
.grading-score-report-groups span { color: var(--muted, #667085); font-size: 0.78rem; text-align: right; }
.grading-score-report-table-wrap { margin-top: 0.8rem; overflow-x: auto; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.65rem; }
.grading-score-report-table { width: 100%; border-collapse: collapse; background: var(--surface, #fff); font-size: 0.82rem; }
.grading-score-report-table th,
.grading-score-report-table td { padding: 0.6rem 0.7rem; border-bottom: 0.0625rem solid var(--line, #d7dce3); text-align: left; white-space: nowrap; }
.grading-score-report-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2, #fafafa); color: var(--muted, #667085); font-size: 0.75rem; }
.grading-score-report-table tbody tr:last-child td { border-bottom: 0; }
.grading-score-report-table td[data-score] { font-variant-numeric: tabular-nums; text-align: right; }
.grading-score-report-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.grading-summary-preview { position: absolute; z-index: 3; inset: 4.75rem 1rem 1rem; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 0.0625rem solid var(--line, #30343d); border-radius: 0.8rem; background: var(--surface, #15171c); box-shadow: 0 1rem 3rem rgb(0 0 0 / 35%); }
.grading-summary-preview[hidden] { display: none; }
.grading-summary-preview > header,
.grading-summary-preview > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; }
.grading-summary-preview > header { border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-summary-preview > header h3,
.grading-summary-preview > header p { margin: 0; }
.grading-summary-preview > header span { display: block; margin-top: 0.2rem; color: var(--muted, #667085); font-size: 0.78rem; }
#close-grading-summary-preview { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.125rem; cursor: pointer; }
.grading-summary-preview-body { min-height: 0; padding: 1rem; overflow: auto; }
.grading-summary-preview > footer { justify-content: flex-end; border-top: 0.0625rem solid var(--line, #30343d); }
.grading-summary-preview > footer a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.grading-summary-preview-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.grading-summary-preview-stat-grid div { display: grid; gap: 0.2rem; padding: 0.75rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.65rem; background: var(--surface-2, #fafafa); }
.grading-summary-preview-stat-grid strong { font-size: 1.25rem; }
.grading-summary-preview-stat-grid span { color: var(--muted, #667085); font-size: 0.75rem; }
.grading-summary-preview-section { margin-top: 1rem; }
.grading-summary-preview-section h4 { margin: 0 0 0.55rem; }
.grading-summary-preview-section p { line-height: 1.65; }
.grading-summary-preview-hotspots,
.grading-summary-preview-students { display: grid; gap: 0.5rem; }
.grading-summary-preview-hotspots article,
.grading-summary-preview-students article { padding: 0.7rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.6rem; background: var(--surface-2, #fafafa); }
.grading-summary-preview-hotspots article p,
.grading-summary-preview-students article p { margin: 0.25rem 0 0; color: var(--muted, #667085); }
.grading-summary-preview-detail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 0.125rem solid var(--line, #d7dce3); }
.grading-summary-detail-questions { display: grid; gap: 0.85rem; }
.grading-summary-detail-question { padding: 0.85rem; border: 0.0625rem solid var(--line, #d7dce3); border-radius: 0.7rem; background: var(--surface-2, #fafafa); }
.grading-summary-detail-question > header,
.grading-summary-detail-students article > header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.grading-summary-detail-question > header span,
.grading-summary-detail-question > small,
.grading-summary-detail-students article > header span { color: var(--muted, #667085); font-size: 0.75rem; }
.grading-summary-detail-question > p { margin: 0.4rem 0; }
.grading-summary-detail-score-summary { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.grading-summary-detail-score-summary span { padding: 0.35rem 0.55rem; border-radius: 999px; background: var(--surface, #fff); color: var(--muted, #667085); font-size: 0.75rem; }
.grading-summary-detail-choice-errors { display: grid; gap: 0.35rem; margin-top: 0.7rem; padding: 0.7rem; border-radius: 0.55rem; background: color-mix(in srgb, var(--warning, #d98c10) 10%, var(--surface, #fff)); }
.grading-summary-detail-choice-errors span { color: var(--muted, #667085); font-size: 0.8rem; }
.grading-summary-detail-choice-errors .rich-input-image { width: auto !important; max-width: min(16rem, 100%); max-height: 3rem; }
.grading-summary-detail-choice-error-group { display: grid; gap: 0.2rem; padding: 0.45rem 0.55rem; border-radius: 0.4rem; background: var(--surface, #fff); }
.grading-summary-detail-choice-error-group > div { line-height: 1.55; overflow-wrap: anywhere; }
.grading-summary-detail-choice-error-group > div > span { color: inherit; font-size: inherit; }
.grading-summary-detail-choice-error-group > small { color: var(--muted, #667085); font-size: 0.72rem; }
.grading-summary-detail-analysis { display: grid; gap: 0.35rem; margin-top: 0.7rem; padding: 0.75rem; border-radius: 0.55rem; background: color-mix(in srgb, var(--accent, #5b7cfa) 9%, var(--surface, #fff)); }
.grading-summary-detail-analysis p { margin: 0; line-height: 1.6; }
.grading-summary-detail-students { display: grid; gap: 0.55rem; margin-top: 0.7rem; }
.grading-summary-detail-student-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.grading-summary-detail-student-list > span { display: grid; gap: 0.1rem; min-width: 8rem; padding: 0.5rem 0.6rem; border-left: 0.18rem solid var(--accent, #5b7cfa); border-radius: 0.35rem; background: var(--surface, #fff); }
.grading-summary-detail-student-list small { color: var(--muted, #667085); font-size: 0.72rem; }
.grading-summary-detail-students article { padding: 0.7rem; border-left: 0.2rem solid var(--accent, #5b7cfa); border-radius: 0.35rem; background: var(--surface, #fff); }
.grading-summary-detail-students article p { margin: 0.35rem 0 0; color: inherit; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.grading-summary-detail-students details { margin-top: 0.55rem; color: var(--muted, #667085); }
.grading-summary-detail-students summary { cursor: pointer; font-size: 0.78rem; }
.grading-summary-detail-overall { display: grid; gap: 0.7rem; margin-top: 1rem; padding: 1rem; border: 0.0625rem solid color-mix(in srgb, var(--accent, #5b7cfa) 40%, var(--line, #d7dce3)); border-radius: 0.7rem; background: color-mix(in srgb, var(--accent, #5b7cfa) 7%, var(--surface, #fff)); }
.grading-summary-detail-overall h4,
.grading-summary-detail-overall p { margin: 0; }
.grading-summary-detail-weak-points { display: grid; gap: 0.55rem; }
.grading-summary-detail-weak-points article { padding: 0.7rem; border-radius: 0.5rem; background: var(--surface, #fff); }
.grading-summary-detail-weak-points article span { display: block; margin-top: 0.15rem; color: var(--muted, #667085); font-size: 0.75rem; }
.grading-summary-detail-weak-points article p { margin-top: 0.35rem; }
.grading-summary-detail-overall details summary { cursor: pointer; }
.grading-summary-detail-knowledge-stats { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.grading-summary-detail-knowledge-stats span { padding: 0.45rem 0.55rem; border-radius: 0.4rem; background: var(--surface, #fff); font-size: 0.78rem; }
.grading-summary-detail-teaching-focus ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.grading-confirm-dialog { width: min(28rem, calc(100vw - 2rem)); padding: 0; border: 0.0625rem solid var(--border, #30343d); border-radius: 0.9rem; background: var(--surface, #15171c); color: inherit; }
.grading-confirm-dialog::backdrop { background: rgb(0 0 0 / 58%); }
.grading-confirm-dialog-shell { display: grid; }
.grading-confirm-dialog-shell > header,
.grading-confirm-dialog-shell > footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; }
.grading-confirm-dialog-shell > header { border-bottom: 0.0625rem solid var(--line, #30343d); }
.grading-confirm-dialog-shell > header h2 { margin: 0; font-size: 1.1rem; }
.grading-confirm-dialog-shell > header button { border: 0; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; }
.grading-confirm-dialog-shell > p { margin: 0; padding: 1.2rem 1rem; line-height: 1.65; white-space: pre-line; }
.grading-confirm-dialog-shell > footer { justify-content: flex-end; border-top: 0.0625rem solid var(--line, #30343d); }
@media (max-width: 720px) {
  .grading-summary-generation-groups { grid-template-columns: 1fr; }
  .grading-score-report-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grading-score-report-groups article { align-items: flex-start; flex-direction: column; }
  .grading-score-report-groups span { text-align: left; }
  .grading-summary-history-item { grid-template-columns: 1fr; }
  .grading-summary-history-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grading-summary-history-item button { width: 100%; }
  .grading-summary-preview { inset: 4.75rem 0.5rem 0.5rem; }
  .grading-summary-preview-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grading-roster-list { min-height: 8rem; max-height: 65vh; overflow-y: auto; display: grid; align-content: start; gap: 0.45rem; padding: 1rem; }
.grading-roster-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.75rem; border: 0.0625rem solid var(--line, #30343d); border-radius: 0.55rem; background: var(--surface-2, #1d2027); }
.grading-roster-item span { display: grid; }
.grading-roster-item small { color: var(--muted, #667085); }
.grading-roster-item em { font-style: normal; font-size: 0.75rem; }

@media (max-width: 70rem) {
  .exercise-edit-body { grid-template-columns: 1fr; overflow: auto; }
  .exercise-rich-editor { min-height: 30rem; }
  .exercise-question-settings { border-left: 0; border-top: 0.0625rem solid var(--border, #30343d); }
  .exercise-publish-panel { grid-template-columns: 1fr; }
  .grading-workspace { grid-template-columns: minmax(16rem, 30%) minmax(0, 1fr); }
  .grading-filter-bar { grid-template-columns: minmax(0, 1fr); }
  .grading-filter-inputs { grid-template-columns: repeat(3, minmax(7rem, 1fr)); }
  .grading-filter-inputs > button { width: 100%; }
  .grading-summary { grid-template-columns: repeat(8, minmax(4.25rem, 1fr)); }
  .grading-main { grid-template-columns: minmax(13.5rem, 32%) minmax(0, 1fr); }
}

@media (max-width: 55rem) {
  .grading-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(11rem, 30vh) minmax(0, 1fr);
  }
  .grading-exercise-list-panel { border-right: 0; border-bottom: 0.0625rem solid var(--line, #30343d); }
  .grading-exercise-list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
  .grading-stage-head { align-items: flex-start; }
  .grading-main { grid-template-columns: minmax(12rem, 34%) minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .grading-stage-head { align-items: stretch; flex-direction: column; }
  .grading-stage-actions { flex-basis: auto; justify-content: stretch; }
  .grading-stage-title { flex-basis: auto; }
  .grading-stage-actions button { flex: 1; }
  .grading-filter-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grading-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(9rem, 28vh) minmax(0, 1fr); }
  .grading-submission-list { border-right: 0; border-bottom: 0.0625rem solid var(--line, #30343d); }
  .grading-detail-actions { align-items: stretch; flex-direction: column; }
  .grading-annotation-save-state { margin-right: 0; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #eceff3;
  --line: #d7dce3;
  --text: #1f2328;
  --muted: #667085;
  --green: #2f9d68;
  --cyan: #237c91;
  --amber: #a66f00;
  --danger: #c64b4b;
  --rail: #202327;
  --shadow: 0 1.125rem 2.875rem rgba(31, 35, 40, 0.14);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  width: 100%;
  min-width: 20rem;
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

button {
  font: inherit;
}

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

.app-shell {
  height: 100vh;
  display: block;
  overflow: hidden;
}

.view-selector {
  position: relative;
  min-width: 0;
}

.view-heading {
  margin: 0;
}

.view-switcher {
  min-width: 7rem;
  height: 2.375rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.view-switcher:hover,
.view-switcher:focus-visible,
.view-switcher[aria-expanded="true"] {
  border-color: var(--line);
  background: var(--surface-2);
  outline: none;
}

.view-switcher-chevron {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: transform 120ms ease;
}

.view-switcher[aria-expanded="true"] .view-switcher-chevron {
  transform: rotate(180deg);
}

.view-menu {
  position: absolute;
  inset: calc(100% + 0.375rem) auto auto 0;
  z-index: 50;
  width: 10.5rem;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.activity-button {
  position: relative;
  width: 100%;
  min-height: 2.5rem;
  padding: 0 2rem 0 0.625rem;
  border: 0;
  border-radius: 0.375rem;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease;
}

.activity-button:hover,
.activity-button:focus-visible {
  color: var(--text);
  background: var(--surface-3);
  outline: none;
}

.activity-button.is-active {
  color: var(--green);
  background: rgba(94, 207, 139, 0.16);
}

.activity-button svg,
.icon-action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.activity-button:first-child svg path {
  fill: currentColor;
  stroke: none;
}

.activity-button span {
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1;
  white-space: nowrap;
}

.activity-button .mail-entry-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999rem;
  color: #fff;
  background: #ef4444;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.workspace {
  min-width: 0;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.topbar {
  position: relative;
  min-height: 3.25rem;
  padding: 0.4375rem clamp(0.875rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
  transition:
    min-height 160ms ease,
    padding 160ms ease,
    opacity 160ms ease;
}

.app-shell.is-topbar-collapsed[data-view="classroom"] .topbar {
  min-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.topbar-collapse-handle,
.topbar-expand-button {
  width: 2.125rem;
  height: 1rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem 0.375rem 0 0;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.topbar-collapse-handle:hover,
.topbar-collapse-handle:focus-visible,
.topbar-expand-button:hover,
.topbar-expand-button:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.topbar-collapse-handle svg,
.topbar-expand-button svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-collapse-handle {
  position: absolute;
  left: 50%;
  bottom: -0.0625rem;
  z-index: 30;
  transform: translateX(-50%);
}

.topbar-expand-button {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 28;
  display: none;
  border-radius: 0 0 0.375rem 0.375rem;
  transform: translateX(-50%);
}

.app-shell.is-topbar-collapsed[data-view="classroom"] .topbar-expand-button {
  display: grid;
}

.classroom-session-controls {
  min-width: 0;
  margin-left: 0.75rem;
  margin-right: auto;
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.app-shell[data-view="classroom"] .classroom-session-controls {
  display: inline-flex;
}

.session-action {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 0.0625rem solid rgba(94, 207, 139, 0.42);
  border-radius: 0.375rem;
  color: #ffffff;
  background: var(--green);
  cursor: pointer;
  font-weight: 650;
}

.session-action:hover,
.session-action:focus-visible {
  filter: brightness(1.05);
  outline: 0.125rem solid rgba(94, 207, 139, 0.28);
  outline-offset: 0.125rem;
}

.session-action[aria-pressed="true"] {
  border-color: rgba(217, 106, 106, 0.48);
  background: var(--danger);
}

.session-action:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.session-timer {
  min-width: 4.25rem;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.topbar-class-group {
  width: clamp(8.75rem, 15vw, 11rem);
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
}

.topbar-control-switch {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
}

.topbar-control-switch:hover,
.topbar-control-switch:focus-within {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.topbar-control-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.topbar-control-switch svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-control-switch:has(input:checked) {
  border-color: rgba(94, 207, 139, 0.58);
  color: #102016;
  background: var(--green);
}

.icon-action {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
}

.icon-action:hover,
.icon-action:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--cyan);
  font-size: 0.8125rem;
}

.topbar .eyebrow {
  display: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 680;
}

h2 {
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 650;
}

h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.5rem, 4vw, 2.625rem);
  font-weight: 720;
}

.teacher-account {
  position: relative;
}

.teacher-chip {
  height: 2.125rem;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
  font: inherit;
  cursor: pointer;
}

.teacher-chip:hover,
.teacher-chip[aria-expanded="true"] {
  border-color: var(--accent);
}

.teacher-chip-chevron {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.teacher-chip[aria-expanded="true"] .teacher-chip-chevron {
  transform: rotate(180deg);
}

.teacher-account-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 9.5rem;
  padding: 0.375rem;
  display: grid;
  gap: 0.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 1rem 2.5rem rgba(10, 20, 35, 0.2);
}

.teacher-account-menu button {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.teacher-account-menu button:hover,
.teacher-account-menu button:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.teacher-account-mask {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(10, 16, 28, 0.62);
  backdrop-filter: blur(0.3rem);
}

.teacher-account-mask[hidden] {
  display: none;
}

.teacher-account-dialog {
  width: min(29rem, 100%);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 1.5rem 4rem rgba(10, 20, 35, 0.32);
}

.teacher-account-dialog > header,
.teacher-account-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.teacher-account-dialog h2,
.teacher-account-dialog p {
  margin: 0;
}

.teacher-account-dialog-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}

.teacher-account-dialog form,
.teacher-account-dialog label {
  display: grid;
  gap: 0.5rem;
}

.teacher-account-dialog form {
  gap: 0.875rem;
}

.teacher-account-dialog input,
.teacher-account-dialog textarea {
  width: 100%;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.prep-publish-dialog {
  width: min(34rem, 100%);
}

.prep-move-dialog {
  width: min(32rem, 100%);
}

.prep-publish-target,
.prep-move-target {
  margin: -0.25rem 0 0;
  color: var(--muted);
}

.prep-move-field {
  display: grid;
  gap: 0.5rem;
}

.prep-move-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.prep-move-field select {
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.prep-publish-options {
  display: grid;
  gap: 0.625rem;
}

.prep-publish-mode,
.prep-publish-group-item {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface-2);
  cursor: pointer;
}

.prep-publish-mode input,
.prep-publish-group-item input {
  width: auto;
  margin-top: 0.15rem;
}

.prep-publish-mode span {
  display: grid;
  gap: 0.2rem;
}

.prep-publish-mode small,
.prep-publish-group-empty {
  color: var(--muted);
}

.prep-publish-group-list {
  max-height: 14rem;
  overflow: auto;
  display: grid;
  gap: 0.5rem;
  padding-left: 2rem;
}

.prep-publish-group-list.is-disabled {
  opacity: 0.52;
}

.prep-publish-group-item {
  padding: 0.625rem 0.75rem;
  background: var(--surface);
}

.teacher-token-dialog textarea {
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.teacher-token-skill-option {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.teacher-token-skill-option input {
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
}

.teacher-token-help,
.teacher-account-status {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.teacher-account-status[data-status="error"] {
  color: var(--danger, #d85757);
}

.teacher-account-status[data-status="success"] {
  color: var(--green);
}

.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 62.44rem;
  background: var(--green);
  box-shadow: 0 0 0 0.25rem rgba(94, 207, 139, 0.12);
}

.logout-action {
  height: 2.125rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.logout-action:hover {
  color: var(--text);
  border-color: var(--accent);
}

.sync-chip {
  height: 2.125rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.sync-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 62.44rem;
  background: var(--amber);
  box-shadow: 0 0 0 0.25rem rgba(214, 168, 76, 0.12);
}

.sync-chip[data-status="success"] .sync-dot {
  background: var(--green);
  box-shadow: 0 0 0 0.25rem rgba(94, 207, 139, 0.12);
}

.sync-chip[data-status="error"] .sync-dot {
  background: var(--danger);
  box-shadow: 0 0 0 0.25rem rgba(217, 106, 106, 0.12);
}

.content-grid {
  min-height: 0;
  padding: clamp(1.125rem, 4vw, 2.625rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 21.25rem);
  gap: 1.125rem;
}

.classroom-workbench {
  --classroom-outline-width: clamp(15rem, 28vw, 21rem);
  position: relative;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  overflow: hidden;
}

.sidebar-edge-expand-button {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 27;
  width: 0.875rem;
  height: 2.5rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transform: translate(-0.35rem, -50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background 120ms ease;
}

.sidebar-edge-expand-button svg {
  width: 0.5rem;
  height: 0.625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-edge-expand-button:hover,
.sidebar-edge-expand-button:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.classroom-workbench.is-outline-collapsed .classroom-outline-expand-button,
.prep-workbench.is-tree-collapsed .prep-tree-expand-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.sidebar-edge-expand-button {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 27;
  width: 0.875rem;
  height: 2.5rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transform: translate(-0.35rem, -50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background 120ms ease;
}

.sidebar-edge-expand-button svg {
  width: 0.5rem;
  height: 0.625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-edge-expand-button:hover,
.sidebar-edge-expand-button:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.classroom-workbench.is-outline-collapsed .classroom-outline-expand-button,
.prep-workbench.is-tree-collapsed .prep-tree-expand-button {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%);
}

.classroom-outline-panel {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 26;
  width: var(--classroom-outline-width);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-right: 0.0625rem solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.classroom-workbench.is-outline-collapsed .classroom-outline-panel {
  transform: translateX(calc(-100% - 0.75rem));
  pointer-events: none;
}

.classroom-outline-scroll {
  min-height: 0;
  padding: 0.75rem;
  overflow: auto;
}

.classroom-main-panel {
  min-height: 0;
  height: 100%;
  padding: 0;
  padding-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.classroom-corner-zone {
  position: absolute;
  bottom: 0;
  z-index: 24;
  width: clamp(3rem, 8vw, 5rem);
  height: clamp(3rem, 8vw, 5rem);
}

.classroom-prev-zone {
  left: 0;
}

.classroom-next-zone {
  right: 0;
}

.classroom-nav-button {
  position: absolute;
  bottom: 1rem;
  z-index: 27;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    background 120ms ease;
}

.classroom-prev-button {
  left: 1rem;
}

.classroom-next-button {
  right: 1rem;
}

.classroom-nav-button svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.classroom-nav-button:hover,
.classroom-nav-button:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.24);
  outline-offset: 0.125rem;
}

.classroom-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0;
}

.app-shell[data-view="classroom"] .classroom-workbench.is-prev-nav-open .classroom-prev-button:not(:disabled),
.app-shell[data-view="classroom"] .classroom-workbench.is-next-nav-open .classroom-next-button:not(:disabled),
.classroom-nav-button:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

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

.primary-panel,
.side-panel {
  min-width: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.primary-panel {
  min-height: 30rem;
  padding: clamp(1.125rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.side-panel {
  padding: 1.375rem;
  align-self: start;
}

.class-group-workspace {
  min-height: 0;
  padding: clamp(1.125rem, 4vw, 2.625rem);
  display: grid;
  grid-template-columns: minmax(11.5rem, 14rem) minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
}

.class-group-nav,
.class-group-main {
  min-width: 0;
  min-height: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.class-group-nav {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.class-group-nav-head {
  padding: 0 0.25rem 0.75rem;
}

.mail-workspace {
  min-height: 0;
  padding: clamp(1.125rem, 4vw, 2.625rem);
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
}

.mail-list-panel,
.mail-detail-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
  overflow: hidden;
}

.mail-thread-list,
.mail-message-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
}

.mail-student-search {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid var(--line);
}

.mail-student-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.mail-student-search-row input {
  width: 100%;
  min-width: 0;
}

.ai-mail-open-button {
  width: auto;
  min-height: 2.375rem;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

.mail-student-results {
  max-height: 13rem;
  overflow: auto;
  margin-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
}

.mail-student-result {
  width: 100%;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.mail-student-result:hover {
  border-color: var(--accent);
}

.mail-student-result small {
  color: var(--muted);
}

.mail-thread-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  padding: 0.75rem;
  border: 0;
  border-radius: 0.45rem;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.mail-thread-item:hover,
.mail-thread-item.is-active {
  background: var(--surface-3);
}

.mail-unread-dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.3rem;
  border-radius: 999px;
  background: transparent;
}

.mail-thread-item.is-unread .mail-unread-dot {
  background: #ef4444;
}

.mail-thread-title {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 700;
}

.mail-thread-meta,
.mail-message-time {
  color: var(--muted);
  font-size: 0.82rem;
}

.mail-history-control {
  min-height: 2rem;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.mail-history-control button {
  padding: 0.3rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
}

.mail-history-control button:hover,
.mail-history-control button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.mail-history-control.is-loading::before {
  width: 0.75rem;
  height: 0.75rem;
  border: 0.125rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: mail-history-spin 0.75s linear infinite;
}

.mail-history-control.is-complete {
  opacity: 0.78;
}

@keyframes mail-history-spin {
  to { transform: rotate(360deg); }
}

.mail-detail-head {
  padding: 0.95rem 1rem;
  border-bottom: 0.0625rem solid var(--line);
}

.mail-message {
  max-width: min(44rem, 86%);
  margin: 0 0 0.75rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.mail-message.is-mine {
  margin-left: auto;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
}

.mail-message:not(.is-mine) {
  margin-right: auto;
}

.mail-message-body {
  overflow-wrap: anywhere;
}

.mail-message-body img {
  max-width: 100%;
  border-radius: 0.375rem;
}

#teacher-mail-messages .mail-message-body img { cursor: zoom-in; }
.mail-image-preview {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 3.5rem 1rem 1rem;
  background: rgb(0 0 0 / 82%);
  overscroll-behavior: contain;
}
.mail-image-preview > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: calc(100dvh - 4.5rem);
  object-fit: contain;
}
.mail-image-preview-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  color: #fff;
  background: #242424;
  font-size: 1.75rem;
}

.mail-resizable-media {
  position: relative;
  display: block;
  width: 70%;
  max-width: 100%;
  margin: 0.5rem 0;
  line-height: 0;
}

.mail-resizable-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 0.375rem;
}

.mail-resizable-media.is-resizing {
  outline: 0.12rem solid rgba(37, 99, 235, 0.35);
  outline-offset: 0.15rem;
}

.mail-composer {
  position: relative;
  flex: 0 0 var(--teacher-mail-composer-height, 20rem);
  min-height: 16.5rem;
  max-height: 70%;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  border-top: 0.0625rem solid var(--line);
  background: var(--surface-2);
}

.teacher-mail-composer-resizer {
  position: absolute;
  z-index: 2;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 1rem;
  cursor: row-resize;
  touch-action: none;
  outline: none;
}

.teacher-mail-composer-resizer::before {
  position: absolute;
  top: 0.35rem;
  left: 50%;
  width: 5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--line);
  content: "";
  transform: translateX(-50%);
  transition: width 0.15s ease, background 0.15s ease;
}

.teacher-mail-composer-resizer:hover::before,
.teacher-mail-composer-resizer:focus-visible::before,
.teacher-mail-composer-resizer.is-dragging::before {
  width: 7rem;
  background: var(--accent);
}

body.is-teacher-mail-composer-resizing {
  cursor: row-resize;
  user-select: none;
}

.mail-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.mail-editor-toolbar button {
  min-width: 2rem;
  height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.mail-rich-editor {
  min-height: 6rem;
  max-height: 13rem;
  overflow: auto;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  outline: none;
}

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

lexiang-rich-input.mail-rich-editor {
  width: 100%;
  height: 100%;
  min-height: 10rem;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  resize: none;
}

lexiang-rich-input.mail-rich-editor:empty::before {
  content: none;
}

lexiang-rich-input.mail-rich-editor .lexiang-rich-shell {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

lexiang-rich-input.mail-rich-editor .lexiang-rich-editor {
  min-height: 10rem;
  max-height: none;
  padding-right: 4.25rem;
  padding-bottom: 4.25rem;
}

.teacher-mail-editor-wrap {
  position: relative;
  min-width: 0;
  min-height: 10rem;
  flex: 1 1 auto;
}

.teacher-mail-send-button {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #102016;
  background: var(--green);
  box-shadow: 0 0.3rem 0.9rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.teacher-mail-send-button svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  transform: translateX(0.08rem);
}

.teacher-mail-send-button:hover,
.teacher-mail-send-button:focus-visible {
  filter: brightness(1.06);
  outline: 0.125rem solid rgba(94, 207, 139, 0.35);
  outline-offset: 0.125rem;
  transform: translateY(-0.08rem);
}

.teacher-mail-send-button:disabled {
  cursor: wait;
  opacity: 0.5;
  transform: none;
}

.ai-mail-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(15, 23, 42, 0.66);
}

.ai-mail-dialog {
  width: min(70rem, calc(100vw - 2rem));
  height: min(48rem, calc(100vh - 2rem));
  height: min(48rem, calc(100dvh - 2rem));
  min-height: 28rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.ai-mail-head {
  min-height: 4rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface);
}

.ai-mail-head > div {
  display: grid;
  gap: 0.15rem;
}

.ai-mail-head p,
.ai-mail-head h2,
.ai-mail-review p {
  margin: 0;
}

.ai-mail-head h2 {
  font-size: 1.125rem;
}

.ai-mail-head > button {
  width: 2.25rem;
  height: 2.25rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  color: var(--muted);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 1.3rem;
}

.ai-mail-body {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(10rem, 1fr) auto;
  overflow: hidden;
}

.ai-mail-conversation {
  min-height: 0;
  padding: 1rem clamp(0.75rem, 3vw, 2rem);
  display: grid;
  align-content: start;
  gap: 0.75rem;
  overflow: auto;
  background: var(--surface-2);
}

.ai-mail-message {
  width: fit-content;
  max-width: min(48rem, 88%);
  padding: 0.75rem 0.875rem;
  display: grid;
  gap: 0.3rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.7rem;
  background: var(--surface);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.ai-mail-message.user {
  justify-self: end;
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.1);
}

.ai-mail-message.assistant {
  justify-self: start;
}

.ai-mail-message-role {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.ai-mail-issue-card {
  max-width: min(52rem, 94%);
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
  border: 0.0625rem solid rgba(166, 111, 0, 0.42);
  border-radius: 0.65rem;
  background: rgba(166, 111, 0, 0.08);
}

.ai-mail-issue-card p {
  margin: 0;
  color: var(--muted);
}

.ai-mail-candidate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ai-mail-candidate-button {
  min-height: 2.15rem;
  padding: 0.35rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.ai-mail-candidate-button:hover {
  border-color: var(--accent);
}

.ai-mail-review {
  max-height: min(24rem, 48vh);
  padding: 0.85rem 1rem 1rem;
  display: grid;
  grid-template-columns: minmax(14rem, 0.7fr) minmax(18rem, 1.3fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem 1rem;
  overflow: hidden;
  border-top: 0.0625rem solid var(--line);
  background: var(--surface);
}

.ai-mail-review > header {
  grid-column: 1 / -1;
}

.ai-mail-review > header > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-mail-recipient-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  overflow: auto;
}

.ai-mail-recipient-row {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.4rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  color: var(--text);
  background: var(--surface-2);
  text-align: left;
}

.ai-mail-recipient-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.ai-mail-recipient-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-mail-recipient-preview {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ai-mail-draft-summary {
  min-width: 0;
  min-height: 0;
  padding: 0.75rem;
  display: grid;
  align-content: start;
  gap: 0.55rem;
  overflow: auto;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  background: var(--surface-2);
}

.ai-mail-draft-summary > strong {
  font-size: 0.85rem;
}

.ai-mail-draft-summary p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.ai-mail-composer {
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.55rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--surface);
}

.ai-mail-attachment {
  min-width: 0;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  background: var(--surface-2);
}

.ai-mail-attachment > span {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.ai-mail-attachment strong,
.ai-mail-attachment small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-mail-attachment small {
  color: var(--muted);
}

.ai-mail-attachment button {
  border: 0;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}

.ai-mail-input-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.55rem;
}

.ai-mail-input-row textarea {
  width: 100%;
  min-height: 3.25rem;
  max-height: 9rem;
  padding: 0.7rem 0.75rem;
  resize: vertical;
  border: 0.0625rem solid var(--line);
  border-radius: 0.55rem;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
}

.ai-mail-attach-button {
  width: 2.5rem;
  height: 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 1.25rem;
}

.ai-mail-send-button {
  width: auto;
  min-height: 2.5rem;
}

.ai-mail-compose-meta {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.ai-mail-status {
  color: var(--muted);
  font-size: 0.8rem;
}

.ai-mail-dialog button:disabled,
.ai-mail-dialog textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-mail-dialog :focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.class-group-nav-head h2 {
  margin: 0;
  font-size: 1rem;
}

.class-group-tab {
  min-height: 2.375rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.class-group-tab:hover,
.class-group-tab:focus-visible {
  color: var(--text);
  background: var(--surface-3);
  outline: none;
}

.class-group-tab.is-active {
  color: var(--green);
  background: rgba(94, 207, 139, 0.16);
}

.class-group-main {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
}

.class-group-panel {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  overflow: auto;
}

.class-group-panel-tools {
  display: grid;
  grid-template-columns: minmax(14rem, 24rem);
  gap: 0.875rem;
}

.class-group-panel-tools label {
  display: grid;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.class-group-panel-tools select {
  min-height: 2.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  padding: 0 0.75rem;
  color: var(--text);
  background: var(--surface);
}

.class-group-management-list,
.class-group-member-list,
.class-group-member-rows {
  display: grid;
  gap: 0.75rem;
}

.class-group-management-row,
.class-group-member-row,
.member-list-head {
  min-height: 3.25rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  display: grid;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
}

.class-group-management-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.class-group-row-main {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.25rem;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.class-group-management-row.is-selected {
  border-color: rgba(94, 207, 139, 0.45);
  background: rgba(94, 207, 139, 0.08);
}

.class-group-row-main span,
.member-list-head span,
.class-group-member-row small {
  color: var(--muted);
  font-size: 0.8125rem;
}

.member-list-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.class-group-member-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.class-group-member-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.danger-action {
  min-height: 2.25rem;
  padding: 0 0.8125rem;
  border: 0.0625rem solid rgba(217, 106, 106, 0.35);
  border-radius: 0.375rem;
  color: var(--danger);
  background: var(--surface);
  cursor: pointer;
}

.danger-action:hover,
.danger-action:focus-visible {
  background: rgba(217, 106, 106, 0.12);
  outline: 0.125rem solid rgba(217, 106, 106, 0.2);
  outline-offset: 0.125rem;
}

.prep-workbench {
  --prep-tree-width: clamp(16rem, 30vw, 22rem);
  --component-width: clamp(15rem, 26vw, 21rem);
  position: relative;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg);
  overflow: hidden;
}

.prep-workbench.is-tree-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.prep-workbench.is-components-collapsed .prep-content-layout {
  grid-template-columns: minmax(0, 1fr);
}

.prep-sidebar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 26;
  width: var(--prep-tree-width);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 0.0625rem solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.prep-workbench.is-tree-collapsed .prep-sidebar {
  transform: translateX(calc(-100% - 0.75rem));
  pointer-events: none;
}

.prep-edge-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 25;
  width: 1rem;
}

.prep-left-zone {
  left: 0;
}

.prep-right-zone {
  right: 0;
}

.explorer-header,
.explorer-footer {
  min-height: 3rem;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  border-bottom: 0.0625rem solid var(--line);
}

.explorer-footer {
  min-height: 2.25rem;
  border-top: 0.0625rem solid var(--line);
  border-bottom: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.explorer-header h2 {
  font-size: 0.8125rem;
  text-transform: uppercase;
}

.explorer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.mini-action {
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0;
  border-radius: 0.3125rem;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.mini-action:hover,
.mini-action:focus-visible,
.mini-action[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-3);
  outline: none;
}

.mini-action svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.prep-main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: clamp(0.75rem, 1.5vw, 1.125rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.prep-editor-head {
  display: none;
}

.prep-editor-head > div:first-child {
  display: none;
}

.prep-editor-placeholder {
  margin-top: 1.125rem;
  min-height: 16.25rem;
  padding: clamp(1.25rem, 4vw, 2.125rem);
  border: 0.0625rem dashed var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.prep-editor-placeholder h3 {
  font-size: clamp(1.375rem, 3vw, 2rem);
}

.prep-content-layout {
  position: relative;
  min-height: 0;
  height: 100%;
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  overflow: hidden;
}

.lesson-editor-panel,
.component-panel {
  min-width: 0;
  min-height: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.lesson-editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.editor-toolbar {
  position: relative;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-bottom: 0.0625rem solid var(--line);
}

.prep-dialog-loading {
  min-height: 7rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.65rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding-right: 0.5rem;
  border-right: 0.0625rem solid var(--line);
}

.toolbar-group:last-child {
  border-right: 0;
}

.editor-toolbar button,
.editor-toolbar select,
.toolbar-color-control {
  min-width: 2.125rem;
  min-height: 2rem;
  padding: 0 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.3125rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
}

.editor-toolbar select {
  min-width: 4.5rem;
}

.editor-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.editor-toolbar button svg,
.toolbar-color-control > svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolbar-color-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0 0.25rem;
}

.toolbar-color-control input[type="color"] {
  width: 0.75rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.toolbar-color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.toolbar-color-control input[type="color"]::-webkit-color-swatch {
  border: 0.0625rem solid var(--line);
  border-radius: 0.1875rem;
}

.toolbar-color-icon {
  position: relative;
  font-weight: 700;
  line-height: 1;
}

.toolbar-color-icon::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.1875rem;
  left: 0;
  height: 0.125rem;
  border-radius: 999px;
  background: currentColor;
}

.toolbar-math-icon {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 700;
}

.toolbar-ipa-icon {
  font-family: "Times New Roman", "Noto Sans", serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.editor-toolbar button:hover,
.editor-toolbar button:focus-visible,
.editor-toolbar select:hover,
.editor-toolbar select:focus-visible,
.toolbar-color-control:hover,
.toolbar-color-control:focus-within {
  background: var(--surface-3);
  outline: none;
}

.editor-toolbar button.is-component-active {
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 14%, var(--surface));
}

.editor-toolbar .toolbar-danger-action:hover,
.editor-toolbar .toolbar-danger-action:focus-visible {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
}

.toolbar-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 50%;
  width: min(18rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.toolbar-popover.is-global-edit-popover {
  position: fixed;
  z-index: 1400;
  top: 50%;
  left: 50%;
  max-height: min(44rem, calc(100vh - 2rem));
  transform: translate(-50%, -50%);
}

.table-picker-popover {
  display: grid;
  gap: 0.625rem;
}

.table-grid {
  display: grid;
  grid-template-columns: repeat(8, 1.625rem);
  gap: 0.25rem;
  justify-content: center;
}

.table-grid-cell {
  width: 1.625rem;
  height: 1.625rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.25rem;
  background: var(--surface);
  cursor: pointer;
}

.table-grid-cell.is-active {
  border-color: var(--cyan);
  background: rgba(101, 199, 216, 0.22);
}

.table-size-label {
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.formula-popover {
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100vh - 2rem));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
}

.toolbar-popover.is-global-edit-popover.formula-popover {
  box-sizing: border-box;
  max-height: min(40rem, calc(100vh - 2rem));
  max-height: min(40rem, calc(100dvh - 2rem));
}

.formula-scroll-body {
  min-height: 0;
  padding-right: 0.2rem;
  display: grid;
  align-content: start;
  gap: 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.formula-title-row {
  align-items: center;
  gap: 0.75rem;
}

.formula-field-section {
  display: grid;
  gap: 0.35rem;
}

.formula-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 0.5rem;
}

.formula-input-row #formula-inline-button {
  min-width: 6rem;
  white-space: nowrap;
}

.formula-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
}

.formula-section-heading button {
  min-height: 1.75rem;
  border: 0;
  padding: 0 0.35rem;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.formula-section-heading button:hover,
.formula-section-heading button:focus-visible {
  color: var(--cyan);
  outline: none;
}

.formula-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

#formula-native-input {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-width: 1px;
  min-height: 1px;
  border: 0;
  padding: 0;
  opacity: 0.01;
  pointer-events: none;
  clip-path: inset(50%);
}

.ipa-popover {
  width: min(34rem, calc(100vw - 2rem));
  display: grid;
  gap: 0.75rem;
}

.ipa-title-row {
  align-items: baseline;
  gap: 0.75rem;
}

.ipa-title-row span {
  color: var(--muted);
  font-size: 0.75rem;
}

.ipa-popover > input {
  width: 100%;
  min-height: 2.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  background: var(--surface);
  font-family: "Times New Roman", "Noto Sans", serif;
  font-size: 1.15rem;
}

.ipa-popover > input:focus {
  border-color: var(--cyan);
  outline: 0.125rem solid rgba(101, 199, 216, 0.16);
}

.ipa-preview {
  min-height: 3rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid rgba(101, 199, 216, 0.35);
  border-radius: 0.375rem;
  color: var(--cyan);
  background: rgba(101, 199, 216, 0.12);
  font-family: "Times New Roman", "Noto Sans", serif;
  font-size: 1.35rem;
}

.ipa-symbol-groups {
  display: grid;
  gap: 0.625rem;
}

.ipa-symbol-group {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
}

.ipa-symbol-group > span {
  padding-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.ipa-symbol-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ipa-symbol-grid button {
  min-width: 2rem;
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.35rem;
  padding: 0.2rem 0.45rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-family: "Times New Roman", "Noto Sans", serif;
  font-size: 1rem;
}

.ipa-symbol-grid button:hover,
.ipa-symbol-grid button:focus-visible {
  border-color: var(--cyan);
  outline: none;
  background: rgba(101, 199, 216, 0.14);
}

.ipa-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.formula-popover math-field {
  width: 100%;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  padding: 0.4rem 0.55rem;
  color: var(--text);
  background: var(--surface);
  font-size: 1rem;
  line-height: 1.5;
}

#formula-input {
  min-height: 3rem;
  font-size: 1rem;
}

#formula-input::part(menu-toggle),
#formula-input::part(virtual-keyboard-toggle) {
  display: none;
}

#formula-input:focus-within {
  border-color: var(--cyan);
  outline: 0.125rem solid rgba(101, 199, 216, 0.16);
}

.formula-render {
  color: inherit;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.15em;
  line-height: 1.45;
}

.formula-fraction {
  min-width: 1.5em;
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: center;
  vertical-align: middle;
}

.formula-fraction > span:first-child {
  padding: 0 0.25em 0.08em;
  border-bottom: 0.08em solid currentColor;
}

.formula-fraction > span:last-child {
  padding: 0.08em 0.25em 0;
}

.formula-sqrt {
  display: inline-flex;
  align-items: stretch;
  gap: 0.08em;
  vertical-align: middle;
}

.formula-sqrt::before {
  content: "√";
  font-size: 1.25em;
  line-height: 1;
}

.formula-sqrt > span {
  padding: 0 0.18em;
  border-top: 0.08em solid currentColor;
}

.formula-cases {
  display: inline-block;
  padding-left: 0.45em;
  border-left: 0.12em solid currentColor;
  text-align: left;
  vertical-align: middle;
}

.formula-tool-section {
  display: grid;
  gap: 0.35rem;
}

.formula-tool-section > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.formula-status {
  min-height: 1.1rem;
  margin: 0;
  color: var(--danger);
  font-size: 0.75rem;
}

.formula-template-grid,
.formula-symbol-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.formula-template-grid button,
.formula-symbol-row button {
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.35rem;
  padding: 0.25rem 0.5rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font-family: "Times New Roman", Georgia, serif;
}

.formula-template-grid button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
}

.formula-template-grid button small {
  color: var(--muted);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 0.8rem;
}

.formula-symbol-groups {
  display: grid;
  gap: 0.5rem;
}

.formula-symbol-group {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
}

.formula-symbol-group > span {
  padding-top: 0.45rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.formula-symbol-row button {
  min-width: 2.1rem;
  padding: 0.2rem 0.4rem;
}

.formula-symbol-row .formula-render {
  font-size: 1rem;
}

.formula-template-grid button:hover,
.formula-template-grid button:focus-visible,
.formula-symbol-row button:hover,
.formula-symbol-row button:focus-visible {
  border-color: var(--cyan);
  outline: none;
  background: rgba(101, 199, 216, 0.14);
}

.math-formula {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  font-size: inherit;
  vertical-align: middle;
  white-space: nowrap;
  --caret-color: transparent;
  --selection-background-color: transparent;
}

.math-formula[data-display="block"] {
  display: flex;
  width: fit-content;
  margin: 0.4rem auto;
}

.math-formula::part(menu-toggle),
.math-formula::part(virtual-keyboard-toggle) {
  display: none;
}

.math-formula.is-editing {
  outline: 0.125rem solid var(--cyan);
  outline-offset: 0.125rem;
}

.formula-atom.is-editing {
  outline: 0.125rem solid var(--cyan);
  outline-offset: 0.125rem;
}

.rich-input-editor .rich-input-image[draggable="true"] {
  cursor: grab;
}

.rich-input-editor :is(.formula-atom, .ipa-atom) {
  cursor: text;
}

.rich-input-editor :is(.formula-atom, .ipa-atom, .rich-input-image).is-selected {
  outline: none;
  background: rgba(79, 145, 228, 0.24);
}

.rich-input-editor :is(.formula-atom, .ipa-atom).is-selected:active {
  cursor: text;
}

.rich-input-editor .rich-input-image.is-selected:active {
  cursor: grabbing;
}

#lesson-editor .image-block[draggable="true"] {
  cursor: grab;
}

#lesson-editor :is(.formula-atom, .ipa-atom) {
  cursor: text;
}

#lesson-editor :is(.formula-atom, .ipa-atom, .image-block).is-selected {
  outline: none;
  background: rgba(79, 145, 228, 0.24);
}

#lesson-editor :is(.formula-atom, .ipa-atom).is-selected:active {
  cursor: text;
}

#lesson-editor .image-block.is-selected:active {
  cursor: grabbing;
}

.ipa-atom {
  display: inline;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  vertical-align: middle;
  white-space: nowrap;
}

.formula-atom {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  background: transparent;
  font: inherit;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: auto;
}

.formula-atom::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -0.125rem;
  cursor: text;
}

.formula-atom > .math-formula {
  color: inherit;
  font: inherit;
  font-size: inherit;
  pointer-events: none;
}

.math-formula[data-display="block"] {
  display: grid;
  margin: 0.75rem auto;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  font-size: inherit;
}

.editor-scroll {
  min-height: 0;
  overflow: auto;
}

.lesson-editor,
.section-preview {
  width: min(100%, 54rem);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);
  color: var(--text);
  background: var(--surface);
  outline: none;
  line-height: 1.75;
}

.lesson-editor:focus {
  box-shadow: inset 0 0 0 0.0625rem rgba(101, 199, 216, 0.55);
}

.lesson-editor blockquote,
.section-preview blockquote {
  margin: 1rem 0;
  padding: 0.5rem 0.875rem;
  border-left: 0.25rem solid var(--cyan);
  color: var(--muted);
  background: var(--surface-2);
}

.lesson-editor hr,
.section-preview hr {
  border: 0;
  border-top: 0.0625rem solid var(--line);
  margin: 1.25rem 0;
}

.lesson-editor:empty::before {
  content: "在这里编辑小节内容。可输入文字，也可从右侧拖入组件。";
  color: var(--muted);
}

.lesson-editor[contenteditable="false"] {
  color: var(--muted);
  cursor: not-allowed;
}

.lesson-editor h3,
.section-preview h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.25rem;
}

.lesson-editor p,
.section-preview p {
  margin: 0.5rem 0;
}

.component-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 24;
  width: var(--component-width);
  height: 100%;
  overflow: hidden;
  padding: 0.875rem;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.75rem;
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.prep-workbench.is-components-collapsed .component-panel {
  transform: translateX(calc(100% + 0.75rem));
  pointer-events: none;
}

.component-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.component-panel-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.component-panel-title select {
  width: 6.5rem;
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4rem;
  padding: 0 1.75rem 0 0.6rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
}

.component-panel-title select:hover,
.component-panel-title select:focus-visible {
  border-color: var(--cyan);
  outline: 0.125rem solid rgba(101, 199, 216, 0.14);
}

.component-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.component-panel-head h3 {
  margin: 0;
  font-size: 1rem;
}

.component-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 0.625rem;
}

.component-item.drop-before {
  box-shadow: 0 -0.18rem 0 var(--primary);
}

.component-item.drop-after {
  box-shadow: 0 0.18rem 0 var(--primary);
}

.ai-generate-action {
  min-height: 2.25rem;
  border: 0.0625rem solid rgba(94, 207, 139, 0.42);
  border-radius: 0.375rem;
  color: #102016;
  background: var(--green);
  cursor: pointer;
  font-weight: 650;
}

.component-item {
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  cursor: grab;
}

.component-item:hover,
.component-item:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.component-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.component-item-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
}

.component-name {
  margin-bottom: 0.25rem;
  font-weight: 650;
}

.component-kind {
  padding: 0.125rem 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.6875rem;
  line-height: 1.2;
}

.component-item.is-system .component-kind {
  color: var(--cyan);
}

.component-item.is-custom .component-kind {
  color: var(--green);
}

.component-delete-button {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid rgba(217, 106, 106, 0.38);
  border-radius: 50%;
  color: var(--danger);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.component-delete-button:hover,
.component-delete-button:focus-visible {
  background: rgba(217, 106, 106, 0.12);
  outline: none;
}

.component-meta,
.component-empty {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.component-form {
  padding-top: 0.75rem;
  display: grid;
  gap: 0.625rem;
  border-top: 0.0625rem solid var(--line);
}

.component-edit-popover,
.response-popover {
  position: fixed;
  z-index: 56;
  right: clamp(1rem, 3vw, 2rem);
  top: clamp(4.5rem, 14vh, 7rem);
  width: min(27rem, calc(100vw - 2rem));
  max-height: min(42rem, calc(100vh - 8rem));
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.response-popover {
  width: min(34rem, calc(100vw - 2rem));
}

.component-edit-popover label,
.component-edit-popover .rich-config-field {
  display: grid;
  gap: 0.3125rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.component-edit-popover .config-label {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
}

.component-edit-popover input,
.component-edit-popover textarea {
  width: 100%;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
}

.component-edit-popover input {
  min-height: 2.125rem;
  padding: 0 0.625rem;
}

.component-edit-popover textarea,
.rich-input-editor {
  min-height: 5.5rem;
  max-height: min(18rem, 34vh);
  padding: 0.5rem 0.625rem;
  line-height: 1.5;
  overflow: auto;
}

.component-edit-popover textarea {
  resize: vertical;
}

.component-edit-popover lexiang-rich-input.cfg-rich-field {
  position: relative;
  width: 100%;
  display: block;
  color: var(--text);
}

.rich-input-shell {
  position: relative;
  display: grid;
  gap: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface);
  overflow: visible;
}

.rich-input-shell:focus-within {
  border-color: var(--cyan);
}

.rich-input-toolbar {
  min-height: 2.25rem;
  padding: 0.3125rem;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  border-bottom: 0.0625rem solid var(--line);
  background: var(--surface-2);
}

.rich-input-tool,
.rich-formula-actions button,
.rich-formula-template-grid button,
.rich-formula-symbol-grid button,
.rich-formula-close {
  min-width: 2rem;
  min-height: 1.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.3125rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.rich-input-tool:hover,
.rich-formula-actions button:hover,
.rich-formula-template-grid button:hover,
.rich-formula-symbol-grid button:hover,
.rich-formula-close:hover {
  border-color: var(--cyan);
}

.rich-input-editor {
  width: 100%;
  border: 0;
  color: var(--text);
  background: transparent;
  font: inherit;
  outline: none;
}

lexiang-rich-input.is-single-line .rich-input-editor {
  min-height: 2.125rem;
  max-height: 5rem;
  padding: 0.35rem 0.625rem;
  white-space: nowrap;
}

.component-edit-popover input:focus,
.component-edit-popover textarea:focus {
  border-color: var(--cyan);
  outline: none;
}

.rich-formula-popover {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 50%;
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(38rem, calc(100vh - 2rem));
  padding: 0.75rem;
  display: grid;
  gap: 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: auto;
  transform: translate(-50%, -50%);
}

.rich-formula-popover.is-hidden {
  display: none;
}

.rich-formula-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.rich-formula-field {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.375rem 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface-2);
}

.rich-formula-template-grid,
.rich-formula-symbol-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}

.rich-formula-symbol-grid button {
  min-width: 2.25rem;
}

.rich-formula-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.rich-formula-actions button:last-child {
  color: #fff;
  border-color: transparent;
  background: var(--green);
}

.rich-input-image {
  max-width: 100%;
  max-height: 12rem;
  display: inline-block;
  vertical-align: middle;
  border-radius: 0.25rem;
}

.component-config-content {
  min-height: 0;
  display: grid;
  gap: 0.625rem;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

.component-config-content label,
.component-config-content .rich-config-field {
  display: grid;
  gap: 0.3125rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.function-expression-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
}

.function-expression-config .rich-config-field {
  min-width: 0;
}

.function-expression-formula-button {
  min-height: 2.35rem;
  white-space: nowrap;
}

.component-config-content .checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.component-edit-popover .switch-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.switch-control {
  position: relative;
  width: 2.6rem;
  height: 1.5rem;
  flex: 0 0 auto;
}

.component-edit-popover .switch-control input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 0.0625rem var(--line);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1rem 0.3rem rgba(15, 23, 42, 0.24);
  transition: transform 160ms ease;
}

.switch-control input:checked + .switch-track {
  background: var(--green);
  box-shadow: inset 0 0 0 0.0625rem color-mix(in srgb, var(--green) 72%, #166534);
}

.switch-control input:checked + .switch-track::after {
  transform: translateX(1.1rem);
}

.switch-control input:focus-visible + .switch-track {
  outline: 0.125rem solid var(--cyan);
  outline-offset: 0.125rem;
}

.switch-copy {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.switch-copy strong {
  color: var(--text);
  font-size: 0.8rem;
}

.switch-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
}

.image-config-card {
  display: grid;
  gap: 0.75rem;
}

.config-field {
  display: grid;
  gap: 0.375rem;
}

.config-field label {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem;
}

.config-value {
  color: var(--cyan);
  font-weight: 700;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.segmented-control.is-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.segmented-control button {
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.segmented-control button.is-active {
  border-color: rgba(101, 199, 216, 0.72);
  color: var(--text);
  background: rgba(101, 199, 216, 0.2);
}

.custom-code-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
}

.geometry-config-section {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.geometry-config-section-head,
.geometry-text-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
}

.geometry-config-section-head > span {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

.geometry-text-list {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--line);
}

.geometry-text-list-head .secondary-btn,
.geometry-structure-sync {
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
}

.geometry-text-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem;
  align-items: start;
  gap: 0.45rem;
}

.geometry-text-row-main {
  min-width: 0;
  display: grid;
  gap: 0.3125rem;
}

.geometry-text-remove {
  display: inline-grid;
  place-items: center;
  margin-top: 1.35rem;
}

.geometry-config-empty {
  margin: 0;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.75rem;
}

.geometry-object-labels {
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--line);
}

.geometry-object-labels summary {
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.geometry-object-label-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.geometry-object-label-row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.geometry-object-label-name {
  min-width: 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.geometry-structure-section {
  background: var(--surface-2);
}

.component-edit-popover .geometry-structure-json {
  min-height: 13rem;
  max-height: min(24rem, 44vh);
}

.geometry-structure-json[aria-invalid="true"] {
  border-color: var(--danger);
}

.geometry-structure-error {
  margin: -0.25rem 0 0;
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 700;
}

.component-edit-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  padding-top: 0.25rem;
  background: var(--surface-2);
}

.popover-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.component-form label {
  display: grid;
  gap: 0.3125rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.component-form input,
.component-form textarea,
.control-form input,
.control-form select {
  width: 100%;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
}

.component-form input,
.control-form input,
.control-form select {
  min-height: 2.125rem;
  padding: 0 0.625rem;
}

.component-form textarea {
  min-height: 5.75rem;
  padding: 0.5rem 0.625rem;
  resize: vertical;
}

.lesson-component {
  margin: 0.875rem 0;
  padding: 0.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.interactive-card {
  margin: 0.5rem 0;
  padding: 0.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.choice-mode-line {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.component-edit-popover .choice-mode-line input,
.component-edit-popover .choice-correct-control {
  width: auto;
}

.choice-option-editor {
  display: grid;
  gap: 0.45rem;
}

.choice-option-head,
.choice-option-row {
  display: grid;
  grid-template-columns: 2.8rem 1.5rem minmax(0, 1fr) 1.75rem;
  align-items: center;
  gap: 0.45rem;
}

.choice-option-head {
  grid-template-columns: 4.75rem minmax(0, 1fr);
  color: var(--muted);
  font-size: 0.75rem;
}

.choice-option-letter {
  color: var(--cyan);
  font-weight: 800;
  text-align: center;
}

.choice-option-remove {
  display: inline-grid;
  place-items: center;
}

.secondary-btn {
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.interactive-card h3 {
  margin: 0 0 0.625rem;
  color: var(--cyan);
  font-size: 1rem;
}

.fill-answer-template {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
}

.fill-answer-template img,
.fill-answer-template-config-preview img {
  display: block;
  width: min(100%, 48rem);
  max-height: 36rem;
  object-fit: contain;
  background: #fff;
}

.fill-answer-template-config {
  display: grid;
  gap: 0.65rem;
}

.fill-answer-template-config-preview {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.fill-answer-template-rich-editor {
  min-height: 8rem;
}

.info-card-list,
.info-card-config-list {
  display: grid;
  gap: 0.875rem;
}

.info-card-item + .info-card-item {
  padding-top: 0.875rem;
  border-top: 0.0625rem solid var(--line);
}

.info-card-item-content > :first-child {
  margin-top: 0;
}

.info-card-item-content > :last-child {
  margin-bottom: 0;
}

.info-card-config-item {
  display: grid;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.info-card-config-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.info-card-config-item-head strong {
  color: var(--cyan);
  font-size: 0.8rem;
}

.info-card-remove-item {
  min-height: 1.75rem;
  color: var(--danger);
}

.info-card-add-item {
  width: 100%;
  margin-top: 0.75rem;
}

.option-line {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.5rem 0;
  cursor: pointer;
}

.fill-input {
  width: min(22rem, 100%);
  min-height: 2.125rem;
  margin: 0.5rem 0;
  padding: 0 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface-2);
}

.submit-btn {
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  color: #102016;
  background: var(--green);
  cursor: pointer;
  font-weight: 650;
}

.feedback {
  margin: 0.5rem 0 0;
  font-weight: 700;
}

.plot-stage {
  position: relative;
  width: min(100%, 42.5rem);
  margin-top: 0.65rem;
}

.plot-canvas {
  width: 100%;
  max-width: 42.5rem;
  display: block;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.plot-canvas.is-dragging {
  cursor: grabbing;
}

.plot-controls {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  overflow: hidden;
  border: 0.0625rem solid rgba(148, 163, 184, 0.55);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.2rem 0.75rem rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(0.4rem);
}

.plot-controls button {
  min-width: 2rem;
  min-height: 2rem;
  border: 0;
  border-right: 0.0625rem solid #e2e8f0;
  padding: 0 0.4rem;
  color: #334155;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
}

.plot-controls button:last-child {
  border-right: 0;
}

.plot-controls button:hover,
.plot-controls button:focus-visible,
.plot-controls button[aria-pressed="true"] {
  color: #1d4ed8;
  background: #eff6ff;
  outline: none;
}

.plot-gesture-hint,
.plot-viewport-status,
.plot-error {
  position: absolute;
  bottom: 0.55rem;
  border-radius: 0.3rem;
  padding: 0.2rem 0.4rem;
  background: rgba(255, 255, 255, 0.88);
  color: #64748b;
  font-size: 0.68rem;
  pointer-events: none;
}

.plot-gesture-hint {
  left: 0.55rem;
}

.plot-viewport-status {
  right: 0.55rem;
}

.plot-error {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  color: #b91c1c;
  transform: translate(-50%, -50%);
}

.plot-expression {
  width: fit-content;
  min-height: 2.15rem;
  border: 0;
  padding: 0.2rem 0.45rem;
  color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  font-size: 1.05rem;
}

.plot-expression::part(menu-toggle),
.plot-expression::part(virtual-keyboard-toggle) {
  display: none;
}

.component-block {
  position: relative;
  width: min(100%, var(--component-width, 100%));
  min-height: var(--component-height, auto);
  max-width: 100%;
  margin: 1rem 0;
  padding: 0.75rem;
  border: 0.125rem dashed rgba(101, 199, 216, 0.55);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface-2) 82%, var(--cyan));
  cursor: grab;
  user-select: none;
}

.component-block[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}

.component-block[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}

.component-block[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}

.component-block:active {
  cursor: grabbing;
}

.component-block.is-selected {
  border-color: var(--green);
  box-shadow: inset 0 0 0 0.0625rem rgba(94, 207, 139, 0.4);
}

.component-block.is-dragging {
  opacity: 0.45;
}

.component-block.is-resizing {
  cursor: nwse-resize;
  box-shadow: inset 0 0 0 0.0625rem rgba(37, 99, 235, 0.5), 0 0 0 0.18rem rgba(37, 99, 235, 0.14);
}

.component-resize-handle,
.mail-media-resize-handle {
  position: absolute;
  right: -0.35rem;
  bottom: -0.35rem;
  width: 0.9rem;
  height: 0.9rem;
  border: 0.12rem solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0.18rem 0.5rem rgba(15, 23, 42, 0.28);
  cursor: nwse-resize;
  touch-action: none;
}

.component-remove {
  min-width: 1.75rem;
  min-height: 1.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.3125rem;
  color: var(--danger);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
}

.component-response-button {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.3125rem;
  display: none;
  place-items: center;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.component-response-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.classroom-preview .component-block,
.classroom-preview .runtime-component {
  position: relative;
  cursor: default;
}

.classroom-preview .component-remove {
  display: none;
}

.classroom-preview .component-response-button {
  display: grid;
}

.classroom-preview [data-classroom-focus-id] {
  transition: background 160ms ease, outline-color 160ms ease, box-shadow 160ms ease;
}

.classroom-preview .is-classroom-focus {
  outline: 0.18rem solid #f59e0b;
  outline-offset: 0.2rem;
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  box-shadow: 0 0.35rem 1rem rgba(245, 158, 11, 0.18);
}

.component-preview-title {
  margin-bottom: 0.375rem;
  color: var(--cyan);
  font-weight: 700;
}

.image-block {
  display: block;
  width: var(--image-width, 70%);
  max-width: 100%;
  margin: 1.25rem auto;
  line-height: 0;
  clear: both;
  position: relative;
  cursor: pointer;
}

.image-block[data-align="left"] {
  margin-left: 0;
  margin-right: auto;
}

.image-block[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}

.image-block[data-align="right"] {
  margin-left: auto;
  margin-right: 0;
}

.image-block[data-wrap="inline"] {
  display: inline-block;
  margin: 0 0.5rem;
  clear: none;
  vertical-align: middle;
}

.image-block[data-wrap="inline"][data-align="left"] {
  margin-left: 0;
  margin-right: 0.5rem;
}

.image-block[data-wrap="inline"][data-align="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.image-block[data-wrap="inline"][data-align="right"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.image-block[data-wrap="square-left"] {
  float: left;
  clear: none;
  margin: 0.5rem 1rem 0.75rem 0;
}

.image-block[data-wrap="square-right"] {
  float: right;
  clear: none;
  margin: 0.5rem 0 0.75rem 1rem;
}

.image-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--image-aspect, 1.3333);
  line-height: 0;
  overflow: hidden;
  border-radius: 0.5rem;
}

.image-block[data-quarter-turn="true"] .image-frame {
  aspect-ratio: var(--image-inverse-aspect, 0.75);
}

.image-block.is-selected .image-frame {
  outline: 0.1875rem solid var(--cyan);
  outline-offset: 0.25rem;
}

.image-block.is-selected .image-frame::after {
  content: "";
  position: absolute;
  right: -0.5rem;
  bottom: -0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 0.125rem solid var(--surface);
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: var(--shadow);
}

.editor-image {
  max-width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0.5rem;
  transform-origin: center center;
  object-fit: cover;
  translate: -50% -50%;
}

.image-block[data-fit="contain"] .editor-image {
  object-fit: contain;
  background: var(--surface);
}

.image-block[data-quarter-turn="true"] .editor-image {
  max-width: none;
}

.temporary-image-resize-target {
  position: relative;
  max-width: 100%;
  max-height: none;
}

.temporary-image-resize-target > .image-frame {
  height: auto !important;
  max-height: none !important;
}

.temporary-image-resize-inline {
  display: inline-block;
  width: min(70%, 100%);
  line-height: 0;
}

.temporary-image-resize-inline > img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}

.temporary-image-resize-handle {
  position: absolute;
  z-index: 6;
  right: -0.45rem;
  bottom: -0.45rem;
  width: 1rem;
  height: 1rem;
  border: 0.14rem solid #fff;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0.18rem 0.55rem rgb(15 23 42 / 30%);
  cursor: nwse-resize;
  touch-action: none;
}

.temporary-image-resize-target.is-temporary-resizing {
  outline: 0.14rem solid color-mix(in srgb, var(--cyan) 55%, transparent);
  outline-offset: 0.2rem;
}

.editor-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.editor-table th,
.editor-table td {
  border: 0.0625rem solid var(--line);
  padding: 0.5rem 0.625rem;
  min-width: 5rem;
  vertical-align: top;
}

.editor-table th {
  background: var(--surface-2);
  color: var(--cyan);
}

.ai-builder-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(0, 0, 0, 0.58);
}

.ai-builder-mask.is-open {
  display: flex;
}

.ai-builder {
  width: min(90rem, 96vw);
  height: min(45rem, 90vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.ai-builder-header {
  min-height: 3.25rem;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.0625rem solid var(--line);
}

.ai-builder-header button {
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.ai-builder-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 0.7fr) minmax(20rem, 1fr) minmax(24rem, 1.15fr);
}

.ai-builder-settings,
.ai-chat-panel,
.ai-preview-panel {
  min-height: 0;
  padding: 1rem;
  overflow: auto;
}

.ai-builder-settings,
.ai-preview-panel {
  background: var(--surface);
}

.ai-builder-settings {
  border-right: 0.0625rem solid var(--line);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.75rem;
}

.ai-preview-panel {
  border-left: 0.0625rem solid var(--line);
}

.image-recognition-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(15, 23, 42, 0.62);
}

.image-recognition-mask[hidden] {
  display: none;
}

.image-recognition-dialog {
  width: min(58rem, 100%);
  max-height: calc(100vh - 2rem);
  display: grid;
  grid-template-rows: auto minmax(16rem, 1fr) auto;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.image-recognition-head {
  min-height: 4rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 0.0625rem solid var(--line);
  color: #1f2937;
  background: #eef4fb;
}

.image-recognition-head > div {
  display: grid;
  gap: 0.2rem;
}

.image-recognition-head p {
  margin: 0;
  color: #526071;
  font-size: 0.78rem;
}

.image-recognition-head button {
  border: 0;
  color: #334155;
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
}

.image-recognition-body {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.75rem;
  overflow: auto;
  padding: 1rem;
}

.image-recognition-status {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4rem;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.8125rem;
}

.image-recognition-status[data-state="loading"] {
  border-color: rgba(101, 199, 216, 0.52);
  color: var(--cyan);
}

.image-recognition-status[data-state="loading"]::before {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  content: "";
  border: 0.125rem solid rgba(101, 199, 216, 0.28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: image-recognition-spin 0.75s linear infinite;
}

@keyframes image-recognition-spin {
  to { transform: rotate(360deg); }
}

.image-recognition-status[data-state="error"] {
  border-color: rgba(239, 68, 68, 0.42);
  color: #ef4444;
}

#image-recognition-result {
  min-height: 22rem;
}

#image-recognition-result .rich-input-shell,
#image-recognition-result .rich-input-editor {
  min-height: 22rem;
}

.image-recognition-actions {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem 1rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--surface-2);
}

.image-recognition-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.image-recognition-keep-original {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
}

.image-recognition-keep-original input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--green);
}

.ai-builder label {
  display: grid;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.ai-builder textarea {
  width: 100%;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
}

.ai-builder textarea {
  min-height: 8rem;
  padding: 0.625rem;
  resize: vertical;
}

.ai-chat-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
  gap: 0.75rem;
}

.ai-image-attachment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ai-image-attachment[hidden] {
  display: none;
}

.ai-image-attachment img {
  width: 7.5rem;
  height: 5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  object-fit: cover;
  background: var(--surface);
}

.ai-history-head,
.ai-chat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-history-head h3,
.ai-preview-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.ai-model-summary {
  padding: 0.55rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.8125rem;
}

.ai-conversation-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  overflow: auto;
}

.ai-conversation-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: 0.35rem;
  align-items: stretch;
}

.ai-conversation-item {
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
}

.ai-conversation-delete {
  width: 2rem;
  min-height: 2rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--muted);
  background: var(--surface-2);
  cursor: pointer;
}

.ai-conversation-delete:hover {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
}

.ai-conversation-item.is-active {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: inset 0 0 0 0.0625rem rgba(34, 211, 238, 0.18);
}

.ai-conversation-item strong,
.ai-conversation-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-conversation-item span {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.ai-conversation-empty {
  color: var(--muted);
  font-size: 0.8125rem;
}

.ai-conversation-messages {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  overflow: auto;
}

.ai-conversation-message {
  max-width: 92%;
  padding: 0.65rem 0.75rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  white-space: pre-wrap;
  line-height: 1.55;
}

.ai-conversation-message.user {
  justify-self: end;
  border-color: rgba(37, 99, 235, 0.36);
  background: rgba(37, 99, 235, 0.12);
}

.ai-conversation-message.assistant {
  justify-self: start;
  background: var(--surface);
}

.ai-status {
  min-height: 1.5rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.ai-preview-list {
  display: grid;
  gap: 0.75rem;
}

.ai-preview-card {
  padding: 0.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface-2);
}

.ai-preview-card h4 {
  margin: 0 0 0.375rem;
}

.ai-preview-card iframe {
  width: 100%;
  height: 14rem;
  margin: 0.625rem 0;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  background: #fff;
}

.lesson-component strong {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--cyan);
}

.lesson-component.info-card {
  border-left: 0.25rem solid var(--green);
}

.lesson-component.choice-card {
  border-left: 0.25rem solid var(--amber);
}

.lesson-component.steps-card {
  border-left: 0.25rem solid var(--cyan);
}

.section-subsection {
  padding: 1rem 0;
  border-bottom: 0.0625rem solid var(--line);
}

.section-subsection:last-child {
  border-bottom: 0;
}

.section-subsection-title {
  margin: 0 0 0.625rem;
  color: var(--cyan);
  font-size: 1.125rem;
}

.section-empty {
  color: var(--muted);
}

.selected-card {
  display: none;
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.primary-action {
  min-height: 2.375rem;
  padding: 0 0.9375rem;
  border: 0.0625rem solid rgba(94, 207, 139, 0.42);
  border-radius: 0.375rem;
  color: #102016;
  background: var(--green);
  cursor: pointer;
}

.secondary-action {
  min-height: 2.25rem;
  padding: 0 0.8125rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
}

.secondary-action:hover,
.secondary-action:focus-visible {
  background: var(--surface-3);
  outline: 0.125rem solid rgba(101, 199, 216, 0.22);
  outline-offset: 0.125rem;
}

.secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.secondary-action.danger {
  color: var(--danger);
}

.primary-action:hover,
.primary-action:focus-visible {
  filter: brightness(1.06);
  outline: 0.125rem solid rgba(94, 207, 139, 0.35);
  outline-offset: 0.125rem;
}

.lesson-board {
  min-height: 0;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lesson-board p:last-child,
.muted {
  color: var(--muted);
}

.classroom-preview {
  min-height: 18rem;
  max-height: none;
  height: 100%;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lesson-board > h3 {
  margin: 0;
  min-width: 0;
  padding: 0.35rem 0.75rem;
  border-bottom: 0.0625rem solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.classroom-preview-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.classroom-annotation-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.classroom-annotation-surface {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background: transparent;
  pointer-events: none;
  will-change: transform;
}

.classroom-handwriting-input {
  position: absolute;
  z-index: 20;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.classroom-handwriting-input.is-active {
  visibility: visible;
  pointer-events: auto;
}

.classroom-handwriting-input .lexiang-rich-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.classroom-handwriting-input .lexiang-rich-editor {
  visibility: hidden !important;
  background: transparent;
  pointer-events: none;
}

.classroom-handwriting-input.is-handwriting-overlay .lexiang-handwriting-layer,
.classroom-handwriting-input.is-handwriting-overlay .lexiang-handwriting-canvas {
  background: transparent;
}

.classroom-handwriting-annotation {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.classroom-handwriting-annotation.is-editing {
  visibility: hidden;
}

.html-sandbox-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.html-sandbox-launcher-copy {
  min-width: 0;
}

.html-sandbox-launcher-copy h3,
.html-sandbox-launcher-copy p {
  margin: 0;
}

.html-sandbox-launcher-copy p {
  margin-top: 0.35rem;
}

.html-sandbox-open-button {
  flex: 0 0 auto;
}

.html-sandbox-upload-field,
.html-sandbox-permission-fields {
  padding: 0.9rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
}

.html-sandbox-upload-field {
  display: grid;
  gap: 0.55rem;
}

.html-sandbox-upload-field input[type="file"] {
  width: 100%;
}

.html-sandbox-upload-field [data-status="success"] {
  color: var(--green);
}

.html-sandbox-upload-field [data-status="warning"] {
  color: var(--amber, #a66f00);
}

.html-sandbox-upload-field [data-status="error"] {
  color: var(--danger);
}

.html-sandbox-permission-fields {
  display: grid;
  gap: 0.7rem;
}

.html-sandbox-permission-fields legend {
  padding: 0 0.35rem;
  color: var(--text);
  font-weight: 750;
}

.html-sandbox-modal {
  position: fixed;
  z-index: 1490;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: rgb(15 23 42 / 58%);
  backdrop-filter: blur(0.2rem);
}

.html-sandbox-modal[hidden] {
  display: none;
}

.html-sandbox-modal.is-classroom-sandbox {
  position: absolute;
  z-index: 15;
}

.html-sandbox-dialog {
  width: min(74rem, 92vw);
  height: min(48rem, 84vh);
  min-width: min(20rem, 100%);
  min-height: min(20rem, 100%);
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.9rem;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #fff;
  box-shadow: 0 1.4rem 4rem rgb(15 23 42 / 34%);
}

.html-sandbox-modal.is-maximized {
  padding: 0;
}

.html-sandbox-modal.is-maximized .html-sandbox-dialog {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.html-sandbox-dialog-head {
  min-height: 3.25rem;
  padding: 0.55rem 0.65rem 0.55rem 1rem;
  border-bottom: 0.0625rem solid #d7dee9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #172033;
  background: #fff;
}

.html-sandbox-dialog-head h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.html-sandbox-window-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.html-sandbox-window-actions button {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  display: grid;
  place-items: center;
  color: #172033;
  background: transparent;
  cursor: pointer;
}

.html-sandbox-window-actions button:hover,
.html-sandbox-window-actions button:focus-visible {
  background: #edf2f7;
  outline: 0.125rem solid rgb(10 102 216 / 24%);
}

.html-sandbox-window-actions svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.html-sandbox-frame-wrap {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.html-sandbox-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.classroom-floating-media {
  position: absolute;
  box-sizing: border-box;
  min-width: 4.5rem;
  min-height: 4.5rem;
  border: 0.0625rem dashed transparent;
  background: transparent;
  cursor: context-menu;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.classroom-floating-media:hover,
.classroom-floating-media:focus-visible,
.classroom-floating-media.is-transforming,
.classroom-floating-media.is-moving,
.classroom-floating-media.is-resizing {
  border-color: rgb(10 102 216 / 72%);
  outline: none;
}

.classroom-floating-media.is-moving {
  cursor: move;
}

.classroom-floating-media.is-resizing {
  cursor: nwse-resize;
}

.classroom-floating-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  user-select: none;
}

.classroom-media-handle {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border: 0.12rem solid #fff;
  border-radius: 50%;
  background: #0a66d8;
  box-shadow: 0 0.1rem 0.35rem rgb(15 23 42 / 30%);
  opacity: 0;
  pointer-events: auto;
}

.classroom-floating-media.is-transforming .classroom-media-handle,
.classroom-floating-media.is-resizing .classroom-media-handle {
  opacity: 1;
}

.classroom-media-handle.is-nw { top: -0.48rem; left: -0.48rem; cursor: nwse-resize; }
.classroom-media-handle.is-ne { top: -0.48rem; right: -0.48rem; cursor: nesw-resize; }
.classroom-media-handle.is-se { right: -0.48rem; bottom: -0.48rem; cursor: nwse-resize; }
.classroom-media-handle.is-sw { bottom: -0.48rem; left: -0.48rem; cursor: nesw-resize; }

.response-content {
  min-height: 0;
  max-height: min(34rem, calc(100vh - 11rem));
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 0.75rem;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.response-summary {
  color: var(--muted);
  font-size: 0.8125rem;
}

.response-table {
  display: grid;
  min-height: max-content;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
}

.response-row {
  display: grid;
  grid-template-columns: minmax(5rem, 0.9fr) minmax(5rem, 0.8fr) minmax(6rem, 1.4fr) minmax(7rem, 1fr);
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 0.0625rem solid var(--line);
  align-items: center;
  font-size: 0.8125rem;
}

.response-row:last-child {
  border-bottom: 0;
}

.response-row.is-head {
  color: var(--muted);
  background: var(--surface);
  font-weight: 700;
}

.response-content-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.response-content-value > small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
}

.response-answer-images {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}

.response-answer-images img {
  display: block;
  width: min(12rem, 100%);
  max-height: 10rem;
  object-fit: contain;
  border: 0.0625rem solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
}

.classroom-outline-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.classroom-outline-list .classroom-outline-list {
  padding-left: 0.75rem;
}

.classroom-node,
.classroom-node-label {
  width: 100%;
  min-height: 2rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  color: var(--text);
  background: transparent;
  font-size: 0.8125rem;
  text-align: left;
}

.classroom-node {
  cursor: pointer;
}

.classroom-node:hover,
.classroom-node:focus-visible,
.classroom-node.is-selected {
  background: var(--surface-3);
  outline: none;
}

.classroom-preview {
  padding: 0;
}

.field-label {
  display: grid;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.field-label select {
  width: 100%;
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
}

.switch-row {
  margin-top: 0.875rem;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text);
}

.switch-row input {
  width: 1.125rem;
  height: 1.125rem;
}

.status-list {
  margin: 1.125rem 0 0;
}

.status-list div {
  padding: 0.875rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  border-bottom: 0.0625rem solid var(--line);
}

.status-list div:last-child {
  border-bottom: 0;
}

.status-list.compact div {
  padding: 0.625rem 0;
}

.status-list dt {
  color: var(--muted);
}

.status-list dd {
  margin: 0;
  text-align: right;
}

.status-list.classroom-status-strip {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 1;
  min-width: 14rem;
  max-width: 27rem;
}

.status-list.classroom-status-strip div {
  min-width: 0;
  min-height: 2.25rem;
  padding: 0.375rem 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.375rem;
  background: var(--surface-2);
}

.status-list.classroom-status-strip dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prep-explorer {
  position: relative;
  min-height: 0;
  padding: 0.5rem;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.loading-layer {
  position: absolute;
  inset: 0.5rem;
  z-index: 3;
  display: grid;
  place-content: center;
  gap: 0.625rem;
  border-radius: 0.4375rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.app-loading-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  width: min(24rem, calc(100vw - 2rem));
  padding: 0.75rem 0.875rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.625rem;
  align-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.app-loading-toast small {
  grid-column: 2;
  min-width: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.loader {
  width: 1.625rem;
  height: 1.625rem;
  justify-self: center;
  border: 0.1875rem solid color-mix(in srgb, var(--line) 72%, transparent);
  border-top-color: var(--green);
  border-radius: 62.44rem;
  animation: spin 780ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.tree-root {
  min-height: 100%;
}

.tree-placeholder {
  min-height: 5.75rem;
  padding: 0.75rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--muted);
  border: 0.0625rem dashed var(--line);
  border-radius: 0.5rem;
}

.tree-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-list .tree-list {
  padding-left: 1.125rem;
}

.tree-item {
  min-width: 13.75rem;
}

.tree-row {
  height: 2rem;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.3125rem;
  color: var(--text);
  cursor: default;
  user-select: none;
}

.tree-row:hover,
.tree-row.is-selected {
  background: var(--surface-3);
}

.tree-row.is-draggable {
  cursor: grab;
}

.tree-row.is-dragging {
  opacity: 0.46;
}

.tree-row.drop-before {
  box-shadow: inset 0 0.125rem 0 var(--green);
}

.tree-row.drop-after {
  box-shadow: inset 0 -0.125rem 0 var(--green);
}

.inline-edit-row {
  position: relative;
  background: var(--surface-3);
}

.inline-edit-row:has(.tree-inline-input.is-saving)::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 0.1rem solid color-mix(in srgb, var(--muted) 32%, transparent);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: workspace-waiting-spin 720ms linear infinite;
}

.tree-inline-input.is-saving {
  padding-right: 1.7rem;
  cursor: wait;
  opacity: 0.82;
}

.tree-toggle {
  width: 1rem;
  height: 1.375rem;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  text-align: center;
  cursor: pointer;
}

.tree-icon {
  width: 1.125rem;
  color: var(--amber);
  text-align: center;
}

.tree-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
}

.tree-row.is-resource-subscription .tree-icon {
  color: var(--cyan);
}

.tree-resource-source {
  display: inline-block;
  max-width: 7rem;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.3125rem;
  overflow: hidden;
  border-radius: 62.44rem;
  color: var(--cyan);
  background: rgba(101, 199, 216, 0.12);
  font-size: 0.625rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  vertical-align: 0.0625rem;
}

.tree-publish-toggle {
  min-width: 2.625rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 62.44rem;
  color: var(--muted);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.6875rem;
  line-height: 1;
}

.tree-publish-toggle.is-published {
  border-color: rgba(94, 207, 139, 0.42);
  color: var(--green);
  background: rgba(94, 207, 139, 0.12);
}

.tree-publish-toggle:hover,
.tree-publish-toggle:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.tree-publish-toggle:disabled {
  border-color: rgba(101, 199, 216, 0.28);
  color: var(--cyan);
  background: rgba(101, 199, 216, 0.08);
  cursor: default;
}

.tree-inline-input {
  width: 100%;
  min-width: 5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  border: 0.0625rem solid var(--cyan);
  border-radius: 0.1875rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}

.tree-type {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.tree-children.is-collapsed {
  display: none;
}

.tree-delete-confirm {
  margin: 0.125rem 0 0.375rem 2.625rem;
  padding: 0.4375rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.3125rem;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.75rem;
}

.tree-delete-confirm span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-delete-confirm button {
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.25rem;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
}

.tree-delete-confirm button:hover,
.tree-delete-confirm button:focus-visible {
  background: var(--surface-3);
  outline: none;
}

.tree-delete-confirm .inline-danger {
  color: var(--danger);
}

.selected-card {
  min-height: 6rem;
  margin-top: 1.125rem;
  padding: 0.875rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.selected-empty {
  color: var(--muted);
}

.selected-type {
  margin-bottom: 0.5rem;
  color: var(--cyan);
  font-size: 0.8125rem;
}

.selected-name {
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
  font-size: 1.125rem;
  font-weight: 650;
}

.selected-path {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.context-menu {
  position: fixed;
  box-sizing: border-box;
  z-index: 1500;
  min-width: 9.5rem;
  padding: 0.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.context-menu-entry {
  position: relative;
}

.context-menu button {
  width: 100%;
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 0;
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.context-menu button:hover,
.context-menu button:focus-visible {
  background: var(--surface-3);
  outline: none;
}

.context-menu button:disabled {
  color: var(--muted);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.58;
}

.context-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-menu-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
}

.context-menu-submenu {
  /* Fixed descendants escape a scrollable parent menu without being clipped. */
  position: fixed;
  box-sizing: border-box;
  z-index: 1;
  top: -0.375rem;
  left: calc(100% - 0.125rem);
  min-width: 9.5rem;
  max-height: calc(100vh - 1rem);
  padding: 0.375rem;
  display: none;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.context-menu-entry:hover > .context-menu-submenu,
.context-menu-entry:focus-within > .context-menu-submenu,
.context-menu-entry.is-open > .context-menu-submenu {
  display: block;
}

.context-menu button.danger {
  color: var(--danger);
}

.global-edit-status {
  position: fixed;
  z-index: 1600;
  right: 1rem;
  bottom: 1rem;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.7rem 0.9rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 0.82rem;
}

.device-table {
  width: 100%;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

.device-groups {
  display: grid;
  gap: 1rem;
}

.device-group {
  display: grid;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
}

.device-group.is-selected {
  border-color: rgba(94, 207, 139, 0.45);
  background: rgba(94, 207, 139, 0.08);
}

.device-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.device-group-head h3 {
  margin: 0;
  font-size: 1rem;
}

.device-group-head span {
  color: var(--muted);
  font-size: 0.8125rem;
}

.table-row {
  min-height: 3.375rem;
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.1fr) minmax(5.625rem, 0.7fr) minmax(9.375rem, 1.2fr);
  align-items: center;
  gap: 0.875rem;
  padding: 0 1.125rem;
  border-bottom: 0.0625rem solid var(--line);
}

.table-row:last-child {
  border-bottom: 0;
}

.table-head {
  min-height: 2.75rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8125rem;
}

.device-table .table-row {
  grid-template-columns: minmax(5.5rem, 0.8fr) minmax(8rem, 1.1fr) minmax(4.25rem, 0.5fr) minmax(7rem, 1fr);
}

.device-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: 62.44rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.75rem;
}

.device-status.is-online {
  color: var(--green);
  background: rgba(94, 207, 139, 0.12);
}

.student-summary-button {
  min-width: 3.75rem;
  min-height: 1.75rem;
  padding: 0 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
}

.student-summary-button[data-empty="false"] {
  border-color: rgba(94, 207, 139, 0.42);
  color: var(--green);
}

.class-group-tools {
  display: grid;
  gap: 0.875rem;
  margin-top: 1rem;
}

.class-group-tools label {
  display: grid;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.class-group-tools input {
  min-height: 2.375rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  padding: 0 0.75rem;
  color: var(--text);
  background: var(--surface);
}

.class-group-members-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: start;
  gap: 1rem;
}

.class-group-student-picker {
  min-width: 0;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  box-shadow: 0 0.5rem 1.5rem rgba(28, 45, 68, 0.05);
}

.student-picker-head {
  padding: 1rem 1rem 0;
}

.student-picker-head h3 {
  margin: 0;
  font-size: 1rem;
}

.student-search-form {
  padding: 0.875rem 1rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.625rem;
}

.student-search-form label {
  min-width: 0;
  display: grid;
  gap: 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
}

.student-search-form input {
  width: 100%;
  min-height: 2.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  padding: 0 0.75rem;
  color: var(--text);
  background: var(--surface);
}

.student-search-form input:focus {
  border-color: rgba(46, 166, 114, 0.55);
  outline: 0.1875rem solid rgba(46, 166, 114, 0.12);
}

.student-search-selection {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border-top: 0.0625rem solid var(--line);
  border-bottom: 0.0625rem solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 0.8125rem;
}

.student-search-selection[hidden] {
  display: none;
}

.student-search-selection label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.student-search-results {
  display: grid;
  min-height: 5rem;
  max-height: 20rem;
  overflow: auto;
  background: var(--surface);
}

.student-search-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 0.0625rem solid var(--line);
  cursor: pointer;
  transition: background 0.16s ease;
}

.student-search-row:last-child {
  border-bottom: 0;
}

.student-search-row span {
  display: grid;
  gap: 0.125rem;
}

.student-search-row:hover,
.student-search-row.is-selected {
  background: rgba(46, 166, 114, 0.08);
}

.student-search-row input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--green);
}

.student-search-row small {
  color: var(--muted);
}

.student-search-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.8125rem;
}

.student-search-row.is-disabled {
  opacity: 0.68;
  cursor: default;
}

.student-search-empty {
  margin: 0;
  padding: 1.25rem 1rem;
  color: var(--muted);
  text-align: center;
}

.student-picker-actions {
  min-height: 3.75rem;
  padding: 0.75rem 1rem;
  border-top: 0.0625rem solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.8125rem;
  background: var(--surface-2);
}

.student-picker-actions .primary-action {
  min-width: 10.5rem;
}

.student-detail-popover {
  position: fixed;
  top: 5rem;
  right: 2rem;
  z-index: 40;
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 6rem);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.student-detail-popover > .popover-title-row {
  flex: 0 0 auto;
}

.student-detail-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.student-detail-head,
.student-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
}

.student-detail-head {
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.student-detail-list {
  display: grid;
  gap: 0.5rem;
}

.student-detail-row {
  min-height: 2.5rem;
  padding: 0 0.625rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.375rem;
  background: var(--surface-2);
}

.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  background: rgba(15, 23, 42, 0.56);
}

.camera-dialog {
  width: min(68rem, 100%);
  max-height: calc(100vh - 2rem);
  display: grid;
  grid-template-rows: auto minmax(18rem, 1fr) auto;
  border: 0.0625rem solid rgba(255, 255, 255, 0.14);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}

.camera-head {
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: var(--topbar);
}

.camera-head button {
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
}

.camera-body {
  min-height: 0;
  overflow: auto;
  padding: 0.85rem;
  background: var(--surface-3);
}

.camera-preview-panel {
  min-height: min(28rem, calc(100vh - 12rem));
  display: grid;
  place-items: center;
  background: #0f172a;
}

.camera-preview-panel video,
.camera-preview-panel canvas {
  width: 100%;
  max-height: min(34rem, calc(100vh - 12rem));
  object-fit: contain;
}

.camera-edit-panel {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(14rem, 0.78fr) minmax(24rem, 1.22fr);
  gap: 0.85rem;
}

.scan-source-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(12rem, 0.82fr) auto;
  gap: 0.75rem;
}

.scan-source-wrap,
.scan-result-wrap {
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  background: #111827;
}

.scan-source-wrap {
  min-height: 0;
  align-self: start;
}

.scan-result-wrap {
  min-height: min(34rem, calc(100vh - 10rem));
}

.scan-source-wrap canvas,
.scan-result-wrap canvas {
  width: 100%;
  height: 100%;
  max-height: min(34rem, calc(100vh - 14rem));
  object-fit: contain;
}

.scan-corner {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  border: 0.16rem solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.3), 0 0.25rem 0.7rem rgba(15, 23, 42, 0.35);
  cursor: grab;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.scan-corner:active {
  cursor: grabbing;
}

.scan-magnifier {
  position: absolute;
  z-index: 4;
  width: 7.5rem;
  height: 7.5rem;
  overflow: hidden;
  border: 0.18rem solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5rem 1.2rem rgba(15, 23, 42, 0.36);
  pointer-events: none;
}

.scan-magnifier canvas {
  width: 100%;
  height: 100%;
}

.camera-adjustments {
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  border: 0.0625rem solid var(--line);
  border-radius: 0.45rem;
  background: var(--surface-2);
}

.camera-adjustments label {
  min-width: 0;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.camera-mirror-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.camera-mirror-actions .is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.camera-actions {
  padding: 0.75rem 0.9rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  border-top: 0.0625rem solid var(--line);
  background: var(--surface-2);
}

.mobile-photo-dialog {
  width: min(34rem, 100%);
  grid-template-rows: auto auto auto;
}

.mobile-photo-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.mobile-photo-qr {
  width: 12rem;
  height: 12rem;
  display: grid;
  place-items: center;
  border: 0.0625rem solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
}

.mobile-photo-qr img {
  width: 11rem;
  height: 11rem;
}

.mobile-photo-info {
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.mobile-photo-info p,
.mobile-photo-info a {
  margin: 0;
  overflow-wrap: anywhere;
}

.mobile-photo-info p {
  color: var(--muted);
}

@media (max-width: 51.25rem) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .class-group-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .class-group-nav {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
  }

  .class-group-nav-head {
    padding: 0 0.75rem 0 0;
  }

  .classroom-session-controls {
    flex-wrap: wrap;
  }

  .prep-workbench {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(9rem, 24vh, 12rem) minmax(0, 1fr);
  }

  .prep-workbench.is-tree-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: 2.75rem minmax(0, 1fr);
  }

  .prep-content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(12rem, 1fr) minmax(13rem, 1fr);
  }

  .prep-workbench.is-components-collapsed .prep-content-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 2.75rem;
  }

  .prep-sidebar {
    min-height: 0;
    border-right: 0;
    border-bottom: 0.0625rem solid var(--line);
  }

  .prep-main {
    padding: 0.75rem;
  }

  .side-panel {
    align-self: stretch;
  }
}

@media (max-width: 35rem) {
  .topbar,
  .panel-title-row,
  .prep-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions,
  .panel-actions,
  .teacher-account,
  .teacher-chip,
  .secondary-action,
  .primary-action {
    width: 100%;
  }

  .teacher-chip,
  .panel-actions,
  .secondary-action,
  .primary-action {
    justify-content: center;
  }

  .topbar-actions {
    align-items: stretch;
  }

  .classroom-session-controls,
  .classroom-status-strip {
    width: 100%;
  }

  .classroom-status-strip {
    grid-template-columns: 1fr;
  }

  .table-row {
    grid-template-columns: 1fr;
    gap: 0.3125rem;
    padding: 0.8125rem 1rem;
  }

  .class-group-panel-tools,
  .class-group-management-row,
  .class-group-member-row,
  .member-list-head {
    grid-template-columns: 1fr;
  }

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

  .student-search-selection,
  .student-picker-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .table-head {
    display: none;
  }
}

@media (max-width: 51.25rem) {
  .prep-workbench,
  .prep-workbench.is-tree-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .prep-content-layout,
  .prep-workbench.is-components-collapsed .prep-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .prep-sidebar {
    width: min(86vw, 22rem);
    border-right: 0.0625rem solid var(--line);
    border-bottom: 0;
  }

  .component-panel {
    width: min(86vw, 21rem);
  }

  .component-edit-actions {
    flex-direction: column-reverse;
  }

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

  .image-recognition-actions span {
    display: none;
  }

  .image-recognition-keep-original {
    grid-column: 1 / -1;
  }

  .image-recognition-keep-original span {
    display: inline;
  }

  #image-recognition-result,
  #image-recognition-result .rich-input-shell,
  #image-recognition-result .rich-input-editor {
    min-height: 15rem;
  }
}

@media (max-width: 51.25rem) {
  .ai-mail-dialog {
    width: min(100%, 46rem);
    height: calc(100vh - 1.5rem);
    height: calc(100dvh - 1.5rem);
  }

  .ai-mail-review {
    max-height: min(30rem, 58vh);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(9rem, 1fr);
    overflow: auto;
  }

  .ai-mail-recipient-list {
    max-height: 8.5rem;
  }

  .ai-mail-draft-summary {
    min-height: 7rem;
    overflow: visible;
  }

  .ai-mail-review > header > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-height: 44rem) {
  .ai-mail-dialog {
    height: calc(100vh - 1rem);
    height: calc(100dvh - 1rem);
    min-height: 0;
  }

  .ai-mail-body {
    display: block;
    overflow-y: auto;
  }

  .ai-mail-conversation {
    min-height: 8rem;
    max-height: 15rem;
  }

  .ai-mail-review {
    max-height: none;
    overflow: visible;
  }

  .ai-mail-recipient-list {
    max-height: 8.5rem;
  }
}

@media (max-width: 35rem) {
  .ai-mail-mask {
    padding: 0;
  }

  .ai-mail-dialog {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .ai-mail-head,
  .ai-mail-composer {
    padding-inline: 0.75rem;
  }

  .ai-mail-conversation {
    padding: 0.75rem;
  }

  .ai-mail-message,
  .ai-mail-issue-card {
    max-width: 96%;
  }

  .ai-mail-review {
    padding-inline: 0.75rem;
  }

  .mail-student-search-row .ai-mail-open-button,
  .ai-mail-input-row .ai-mail-send-button {
    width: auto;
  }

}

/* Teacher class-group AI conversation review. */
.device-table .table-row { grid-template-columns: minmax(5.5rem, .8fr) minmax(6rem, 1fr) minmax(4rem, .5fr) minmax(5rem, .7fr) minmax(5rem, .6fr); }
.teacher-ai-history-dialog { width:min(86rem, calc(100vw - 3rem)); height:calc(100dvh - 3rem); max-width:none; max-height:none; box-sizing:border-box; overflow:hidden; padding:0; border:1px solid var(--line); border-radius:1rem; color:var(--text); background:var(--surface); }
.teacher-ai-history-dialog[open] { display:flex; flex-direction:column; }
.teacher-ai-history-dialog [hidden] { display:none !important; }
.teacher-ai-history-dialog::backdrop { background:#0008; }
.ai-history-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem .65rem; flex:none; }
.teacher-ai-history-dialog h2 { margin:0; font-size:1.1rem; line-height:1.4; }
.teacher-ai-history-dialog h3 { margin:0; font-size:.95rem; line-height:1.45; overflow-wrap:anywhere; }
.teacher-ai-history-dialog button { cursor:pointer; font:inherit; }
.teacher-ai-history-dialog button:disabled { cursor:default; opacity:.4; }
.teacher-ai-history-dialog button:focus-visible, .teacher-ai-history-dialog select:focus-visible, .teacher-ai-history-dialog input:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.ai-history-header button, .ai-history-columns nav button, .teacher-ai-history-dialog [data-more], .teacher-ai-history-dialog [data-back] { padding:.35rem .65rem; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); color:inherit; font-size:.8rem; }
.ai-history-filters { display:grid; grid-template-columns:minmax(8rem,1fr) minmax(11rem,1.7fr) minmax(8.5rem,1fr) minmax(8.5rem,1fr) auto; align-items:end; gap:.65rem; margin:0; padding:.5rem 1.25rem .8rem; flex:none; }
.ai-history-filters label { display:grid; gap:.25rem; font-size:.75rem; min-width:0; color:var(--muted); }
.ai-history-filters input, .ai-history-filters select, .ai-history-stats-head select { width:100%; min-width:0; box-sizing:border-box; padding:.45rem .55rem; height:2.25rem; font:inherit; font-size:.85rem; border:1px solid var(--line); border-radius:.45rem; background:var(--surface); color:var(--text); }
.ai-history-filters button { height:2.25rem; padding:.4rem 1rem; font-size:.85rem; }
.ai-history-viewbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 1.25rem; border-bottom:1px solid var(--line); flex:none; }
.ai-history-viewbar [role=tablist] { display:flex; gap:1.2rem; }
.ai-history-viewbar [role=tab] { border:0; border-bottom:2px solid transparent; padding:.6rem 0; font-size:.9rem; background:transparent; color:var(--muted); }
.ai-history-viewbar [aria-selected=true] { border-bottom-color:var(--green); color:var(--text); font-weight:650; }
.ai-history-totals { display:flex; gap:1rem; font-size:.75rem; color:var(--muted); }
.ai-history-totals span { display:flex; align-items:baseline; gap:.3rem; }
.ai-history-totals strong { font-size:.95rem; color:var(--text); }
.ai-history-status { flex:none; font-size:.7rem; line-height:1.4; margin:0; padding:.4rem 1.25rem; border-bottom:1px solid var(--line); }
.ai-history-columns { display:grid; grid-template-columns:minmax(15rem, 27%) minmax(0,1fr); flex:1; min-height:0; overflow:hidden; }
.ai-history-list { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line); }
.ai-history-list > h3 { flex:none; padding:.75rem 1rem; font-size:.75rem; color:var(--muted); }
.teacher-ai-history-dialog [data-sessions] { flex:1; min-height:0; overflow:auto; padding:0 .5rem; }
.ai-history-session { width:100%; display:flex; flex-direction:column; gap:.4rem; padding:.7rem; margin-bottom:.25rem; text-align:left; border:1px solid transparent; background:transparent; color:inherit; border-radius:.5rem; }
.ai-history-session:hover { background:color-mix(in srgb, var(--green) 5%, transparent); }
.ai-history-session[aria-current=true] { border-color:color-mix(in srgb, var(--green) 40%, var(--line)); background:color-mix(in srgb, var(--green) 8%, var(--surface)); }
.ai-history-session strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.85rem; font-weight:550; line-height:1.45; overflow-wrap:anywhere; }
.ai-history-session-person { display:flex; justify-content:space-between; width:100%; font-size:.75rem; font-weight:600; }
.ai-history-session-person > span, .ai-history-session time { color:var(--muted); font-weight:400; font-size:.7rem; }
.ai-history-columns nav { display:flex; align-items:center; justify-content:space-between; gap:.35rem; padding:.65rem .75rem; border-top:1px solid var(--line); font-size:.75rem; flex:none; }
.ai-history-detail { display:flex; flex-direction:column; min-height:0; min-width:0; }
.ai-history-detail-head { padding:.8rem 1.25rem; border-bottom:1px solid var(--line); flex:none; }
.ai-history-detail-head h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ai-history-detail-head p { margin:.3rem 0 0; font-size:.75rem; color:var(--muted); }
.teacher-ai-history-dialog [data-back] { display:none; }
.ai-history-thread { flex:1; min-height:0; overflow:auto; padding:1rem 1.25rem; background:color-mix(in srgb, var(--line) 14%, var(--surface)); }
.ai-history-message { padding:.85rem 1rem; margin:0 0 .85rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); }
.ai-history-message.is-question { margin-left:8%; background:color-mix(in srgb, var(--green) 6%, var(--surface)); border-color:color-mix(in srgb, var(--green) 18%, var(--line)); }
.ai-history-message > header { display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.75rem; }
.ai-history-message time { color:var(--muted); font-size:.7rem; }
.ai-history-message-text { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.6rem; font-size:.9rem; line-height:1.75; }
.ai-history-message img { max-width:100%; height:auto; margin-top:.5rem; }
.ai-history-stats { flex:1; display:flex; flex-direction:column; min-height:0; padding:1rem 1.25rem; }
.ai-history-stats-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex:none; padding-bottom:.8rem; }
.ai-history-stats-head label { display:flex; align-items:center; gap:.5rem; font-size:.8rem; }
.ai-history-stats-head select { width:6rem; }
.ai-history-time { flex:1; min-height:0; overflow:auto; }
.ai-history-time table { width:100%; min-width:520px; border-collapse:collapse; text-align:left; font-size:.85rem; }
.ai-history-time th, .ai-history-time td { padding:.75rem; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ai-history-time th { white-space:nowrap; position:sticky; top:0; background:var(--surface); }
@media(max-width:750px) {
 .teacher-ai-history-dialog { width:calc(100vw - 1rem); height:calc(100dvh - 1rem); border-radius:.7rem; }
 .ai-history-header { padding:.75rem; }
 .ai-history-filters { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; padding:.4rem .75rem .6rem; gap:.5rem; }
 .ai-history-keyword { grid-column:2 / 4; }
 .ai-history-viewbar { padding:0 .75rem; gap:.5rem; }
 .ai-history-totals { gap:.5rem; font-size:.65rem; }
 .ai-history-totals strong { font-size:.8rem; }
 .ai-history-status { padding:.35rem .75rem; }
 .ai-history-columns { grid-template-columns:minmax(0,1fr); }
 .teacher-ai-history-dialog[data-detail=false] .ai-history-detail { display:none; }
 .teacher-ai-history-dialog[data-detail=true] .ai-history-list { display:none; }
 .teacher-ai-history-dialog [data-back] { display:inline-block; margin-bottom:.5rem; }
 .ai-history-detail-head, .ai-history-thread { padding:.75rem; }
 .device-table { overflow-x:auto; }
 .device-table .table-row { min-width:34rem; }
}

/* Rich AI history text: preserve code whitespace without expanding normal paragraphs. */
.ai-history-message-text { white-space:normal; }
.ai-history-message-text p { margin:.45rem 0; }
.ai-history-message-text p:first-child { margin-top:0; }
.ai-history-message-text p:last-child { margin-bottom:0; }
.ai-history-message-text pre { white-space:pre; overflow:auto; padding:.65rem; background:var(--surface-2); border-radius:.4rem; }
.ai-history-message-text ul, .ai-history-message-text ol { margin:.5rem 0; padding-left:1.5rem; }
.ai-history-message-text .ai-table-wrap { overflow:auto; }
.ai-history-message-text table { border-collapse:collapse; }
.ai-history-message-text td, .ai-history-message-text th { padding:.4rem .65rem; border:1px solid var(--line); }
.ai-history-message-text .formula-atom[data-display="block"] { display:block; max-width:100%; overflow-x:auto; margin:.65rem 0; }
.ai-history-message-text math-field { pointer-events:none; max-width:100%; }
.ai-history-session .formula-atom, .ai-history-detail-head .formula-atom { pointer-events:none; }
.ai-history-session strong, .ai-history-detail-head h3 { display:block; max-height:4.5em; overflow:hidden; }
.teacher-ai-history-dialog .formula-atom::after { content:none; }
.ai-history-message-text .math-formula[data-display="block"] { margin:.25rem auto; }
.ai-history-message-text li { display:list-item; }
.ai-history-message-text .ai-code-block > span { display:block; color:var(--muted); font-size:.75rem; margin-bottom:.35rem; }
/* Teacher wrong-question inspection shares only the read-only two-pane shell. */
.device-table .table-row { grid-template-columns:minmax(5.5rem,.8fr) minmax(6rem,1fr) minmax(4rem,.5fr) minmax(5rem,.7fr) minmax(5rem,.6fr) minmax(5rem,.6fr); }
.wrong-review-filters { grid-template-columns:10rem auto 1fr; }
.wrong-review-filters .ai-history-totals { justify-content:flex-end; flex-wrap:wrap; }
.wrong-review-reference { margin-bottom:1rem; }
.wrong-review-reference summary { cursor:pointer; padding:.4rem 0; font-size:.85rem; }
.wrong-review-history-title { margin-bottom:.8rem !important; }
.teacher-wrong-review-dialog [data-retry] { padding:.4rem .7rem; }
@media(max-width:750px) {
  .device-table .table-row { min-width:40rem; }
  .wrong-review-filters { grid-template-columns:minmax(0,1fr) auto; }
  .wrong-review-filters .ai-history-totals { grid-column:1/-1; justify-content:flex-start; }
}
/* Group summary actions stay aligned with their student-level actions. */
.device-table .table-head .secondary-action { white-space:nowrap; padding:.4rem .55rem; }
.wrong-stats-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1.25rem; }
.wrong-stats-summary .ai-history-totals { flex-wrap:wrap; }
.wrong-stats-table { flex:1; min-height:0; overflow:auto; padding:0 1.25rem; }
.wrong-stats-table table { width:100%; min-width:48rem; border-collapse:collapse; text-align:left; font-size:.85rem; }
.wrong-stats-table th,.wrong-stats-table td { padding:.7rem .45rem; border-bottom:1px solid var(--line); }
.wrong-stats-table th { position:sticky; top:0; background:var(--surface); white-space:nowrap; }
.wrong-stats-table button { white-space:nowrap; }
.wrong-stats-pages { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; border-top:1px solid var(--line); font-size:.8rem; }
.wrong-stats-pages button { border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:.4rem; padding:.4rem .65rem; }
@media(max-width:750px){ .wrong-stats-summary,.wrong-stats-pages { padding:.6rem .75rem; } .wrong-stats-table { padding:0 .75rem; } }

/* Live preparation documents: details in the header sync popover. */
.realtime-bar { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--line); flex-wrap:wrap; }
.realtime-bar.is-hidden { display:none; }
.realtime-peers { flex-basis:100%; min-width:0; color:var(--muted,#64748b); font-size:13px; }
.realtime-bar button { padding:5px 10px; font-size:13px; }
.realtime-history-dialog { width:min(720px,90vw); max-height:80vh; border:1px solid #dce3e9; border-radius:14px; padding:22px; color:#202830; }
.realtime-history-dialog::backdrop { background:#172b4d66; }
.realtime-history-heading,.realtime-history-row { display:flex; gap:16px; align-items:center; justify-content:space-between; }
.realtime-history-heading h2 { margin:0; font-size:20px; }
.realtime-history-list { margin-top:18px; }
.realtime-history-row { padding:12px 0; border-top:1px solid #e7ebef; font-size:14px; }
.realtime-history-row button { flex-shrink:0; }

.realtime-status { flex-basis:100%; overflow-wrap:anywhere; color:var(--muted,#64748b); font-size:13px; }

.realtime-history-preview { width:100%; height:280px; margin-top:16px; border:1px solid var(--line); border-radius:8px; background:white; }

.sync-chip { cursor:pointer; font-family:inherit; }
.sync-chip:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.sync-details { position:fixed; inset:3.5rem 1rem auto auto; margin:0; width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - 80px); overflow:auto; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text); box-shadow:0 12px 36px #0002; }
.sync-details-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sync-details-heading button { padding:5px 10px; font-size:13px; }
#sync-operation-detail { font-size:13px; color:var(--muted); overflow-wrap:anywhere; margin:12px 0; }

.exercise-publication-schedule { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 12px 0; }
.exercise-publication-schedule > label { display: flex; align-items: center; gap: 8px; }
.exercise-publication-schedule [hidden] { display: none !important; }
.exercise-publication-schedule input[type="datetime-local"] { min-width: 210px; padding: 8px; border: 1px solid var(--border, #d7dce3); border-radius: 8px; }
.exercise-publication-schedule > p { flex-basis: 100%; margin: 0; }