@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --text: #172033;
  --muted: #64748b;
  --accent: #6c63ff;
  --accent-light: #8b84ff;
  --accent-secondary: #38b2ac;
  --amber: #b45309;
  --red: #dc2626;
  --orange: #ea580c;
  --violet: #6c63ff;
  --blue: #2563eb;
  --green: #16a34a;
  --border: #e2e8f0;
  --primary-gradient: linear-gradient(135deg, #5b6df6 0%, #6c63ff 58%, #7c5cff 100%);
  --primary-gradient-hover: linear-gradient(135deg, #5065f1 0%, #6258f6 58%, #714ff2 100%);
  --primary-shadow: 0 9px 18px rgb(92 99 246 / 0.22);
  --primary-shadow-hover: 0 12px 24px rgb(92 99 246 / 0.28);
  --panel-radius: 18px;
  --compact-radius: 14px;
  --control-radius: 12px;
  --section-gap: 18px;
  --panel-padding: 18px;
  --button-height: 42px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --ui-page-header-gap: var(--space-4);
  --ui-toolbar-gap: var(--space-3);
  --ui-toolbar-control-min: 168px;
  --ui-control-height: 40px;
  --ui-badge-height: 26px;
  --ui-detail-row-min: 44px;
  --ui-table-cell-y: 9px;
  --ui-table-cell-x: 10px;
  --ui-table-dense-cell-height: 32px;
  --ui-label-font-size: 11px;
  --ui-body-font-size: 13px;
  --ui-label-font-weight: 800;
  --ui-body-line-height: 1.55;
  --ui-journal-date-column: 150px;
  --ui-journal-category-column: 160px;
  --ui-journal-content-min: 280px;
  --ui-disclosure-summary-min-height: 52px;
  --ui-disclosure-summary-padding-y: 13px;
  --ui-disclosure-summary-padding-x: 14px;
  --ui-disclosure-label-gap: 3px;
  --ui-disclosure-action-radius: 999px;
  --ui-disclosure-action-padding-y: 6px;
  --ui-disclosure-action-font-size: 12px;
  --ui-modal-width: 860px;
  --ui-modal-padding: 24px;
  --ui-modal-close-size: 36px;
  --ui-modal-shadow: 0 24px 70px rgb(15 23 42 / 0.22);
  --portal-math-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --portal-math-color: color-mix(in srgb, var(--violet) 86%, var(--text));
  --portal-math-weight: 850;
  --portal-math-inline-padding: 0 2px;
  --portal-math-block-margin: 6px 0;
  --portal-math-block-padding: var(--space-2) var(--ui-table-cell-x);
  --portal-math-block-radius: var(--space-2);
  --portal-math-block-background: color-mix(in srgb, var(--violet) 8%, var(--surface));
  --portal-math-frac-min-width: 1.2em;
  --portal-math-frac-margin: 0 2px;
  --portal-math-frac-line-height: 1.05;
  --portal-math-frac-rule: 1px solid currentColor;
  --portal-math-frac-numerator-padding: 0 2px 1px;
  --portal-math-frac-denominator-padding: 1px 2px 0;
  --shadow: 0 10px 28px rgb(15 23 42 / 0.07);
  --shadow-hover: 0 14px 36px rgb(15 23 42 / 0.1);
  --shadow-xs: 0 3px 10px rgb(15 23 42 / 0.045);
  --shadow-small: 0 4px 14px rgb(15 23 42 / 0.055);
  --shadow-soft: 0 8px 22px rgb(15 23 42 / 0.06);
  --inset: inset 0 1px 2px rgb(15 23 42 / 0.08);
  --inset-deep: inset 0 2px 5px rgb(15 23 42 / 0.1);
  --inset-small: inset 0 1px 2px rgb(15 23 42 / 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: #141c2f;
  --surface-soft: #1e293b;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #8b84ff;
  --accent-light: #38bdf8;
  --accent-secondary: #2dd4bf;
  --amber: #fbbf24;
  --red: #fb7185;
  --orange: #fb923c;
  --violet: #a78bfa;
  --blue: #60a5fa;
  --green: #34d399;
  --border: #263449;
  --primary-gradient: linear-gradient(135deg, #8b84ff 0%, #6366f1 52%, #06b6d4 100%);
  --primary-gradient-hover: linear-gradient(135deg, #a59fff 0%, #7477f5 52%, #22d3ee 100%);
  --primary-shadow: 0 12px 26px rgb(99 102 241 / 0.28);
  --primary-shadow-hover: 0 16px 34px rgb(34 211 238 / 0.22);
  --panel-radius: 18px;
  --compact-radius: 14px;
  --control-radius: 12px;
  --section-gap: 18px;
  --panel-padding: 18px;
  --button-height: 42px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --ui-page-header-gap: var(--space-4);
  --ui-toolbar-gap: var(--space-3);
  --ui-toolbar-control-min: 168px;
  --ui-control-height: 40px;
  --ui-badge-height: 26px;
  --ui-detail-row-min: 44px;
  --ui-table-cell-y: 9px;
  --ui-table-cell-x: 10px;
  --ui-table-dense-cell-height: 32px;
  --ui-modal-width: 860px;
  --ui-modal-padding: 24px;
  --ui-modal-close-size: 36px;
  --ui-modal-shadow: 0 28px 80px rgb(0 0 0 / 0.36);
  --shadow: 0 18px 42px rgb(0 0 0 / 0.24);
  --shadow-hover: 0 22px 54px rgb(0 0 0 / 0.32);
  --shadow-xs: 0 5px 16px rgb(0 0 0 / 0.18);
  --shadow-small: 0 8px 24px rgb(0 0 0 / 0.2);
  --shadow-soft: 0 10px 28px rgb(0 0 0 / 0.22);
  --inset: inset 0 1px 2px rgb(0 0 0 / 0.28);
  --inset-deep: inset 0 2px 6px rgb(0 0 0 / 0.35);
  --inset-small: inset 0 1px 2px rgb(0 0 0 / 0.28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 34%);
  color: var(--text);
  font-family: "DM Sans", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

html[data-theme="dark"] body {
  background: linear-gradient(180deg, #08111f 0%, var(--bg) 42%);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

h1,
h2,
h3,
.brand strong {
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
  letter-spacing: 0;
  text-wrap: balance;
}

.panel,
.compact-section,
.journal-panel,
.section-head,
.toolbar,
.form-grid,
.table-wrap,
.modal-card,
.portal-nav button,
.primary-button,
.ghost-button,
.danger-button {
  min-width: 0;
}

.panel strong,
.panel h2,
.panel h3,
.compact-section strong,
.journal-panel strong,
.portal-nav strong {
  overflow-wrap: anywhere;
}

:where(.ui-page-header, .section-head, .modal-head, .modal-header) {
  min-width: 0;
  gap: var(--ui-page-header-gap);
}

:where(.ui-page-header, .section-head, .modal-head, .modal-header) > :first-child {
  min-width: 0;
}

:where(.ui-page-header h1, .ui-page-header h2, .section-head h1, .section-head h2, .section-head h3, .modal-head h2, .modal-header h2) {
  margin-block: 0;
  color: var(--text);
  font-size: clamp(20px, 1.45vw, 24px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0;
  line-break: strict;
  text-wrap: balance;
  word-break: keep-all;
}

:where(.ui-page-header p, .section-head p, .modal-head p, .modal-header p, .toolbar-note) {
  max-width: 72ch;
  line-height: 1.45;
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

:where(.ui-filter-row, .toolbar, .recipient-filter-toolbar, .message-data-toolbar, .omr-exam-picker-toolbar, .video-watch-filter-toolbar) {
  align-items: end;
  gap: var(--ui-toolbar-gap);
  min-width: 0;
}

:where(.ui-filter-row, .toolbar) > label,
:where(.recipient-filter-toolbar, .message-data-toolbar, .omr-exam-picker-toolbar, .video-watch-filter-toolbar) label {
  flex: 1 1 var(--ui-toolbar-control-min);
  min-width: min(var(--ui-toolbar-control-min), 100%);
}

:where(.ui-filter-row, .toolbar, .recipient-filter-toolbar, .message-data-toolbar, .omr-exam-picker-toolbar, .video-watch-filter-toolbar) :is(input, select, textarea, button, .primary-button, .ghost-button, .danger-button) {
  min-height: var(--ui-control-height);
}

:where(.primary-button, .ghost-button, .danger-button, .icon-button, .badge, .filter-chip, .state-chip, .count-pill, .term-bar, .rule-chip-list span) {
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  white-space: nowrap;
}

:where(.badge, .filter-chip, .state-chip, .count-pill) {
  min-height: var(--ui-badge-height);
}

:where(.ui-details-row, .detail-row, .calendar-detail-row) {
  min-height: var(--ui-detail-row-min);
  min-width: 0;
  line-height: 1.35;
  line-break: strict;
  word-break: keep-all;
}

:where(.ui-details-row strong, .detail-row strong, .calendar-detail-row strong) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.ui-details-row span, .ui-details-row small, .detail-row span, .detail-row small, .calendar-detail-row span, .calendar-detail-row small) {
  min-width: 0;
  overflow-wrap: anywhere;
}

:where(.ui-table-wrap, .table-wrap, .omr-inline-sheet-wrap, .omr-results-table-wrap, .omr-question-table-wrap, .message-data-table-wrap) {
  max-width: 100%;
  overflow: auto;
  scrollbar-width: thin;
}

:where(.ui-data-table, .data-table, .message-data-table, .omr-results-table, .omr-question-table, .omr-manual-table, .video-watch-table) {
  line-height: 1.32;
  font-variant-numeric: tabular-nums;
}

:where(.ui-data-table th, .ui-data-table td, .data-table th, .data-table td, .message-data-table th, .message-data-table td, .omr-results-table th, .omr-results-table td, .omr-question-table th, .omr-question-table td, .omr-manual-table th, .omr-manual-table td, .video-watch-table th, .video-watch-table td) {
  padding-block: var(--ui-table-cell-y);
  padding-inline: var(--ui-table-cell-x);
  vertical-align: middle;
}

:where(.ui-data-table th, .data-table th, .message-data-table th, .omr-results-table th, .omr-question-table th, .omr-manual-table th, .video-watch-table th) {
  line-break: strict;
  text-wrap: balance;
  white-space: nowrap;
  word-break: keep-all;
}

:where(.ui-data-table td, .data-table td, .message-data-table td, .omr-results-table td, .omr-question-table td, .omr-manual-table td, .video-watch-table td) {
  overflow-wrap: anywhere;
}

:where(.omr-inline-sheet-table th, .omr-inline-sheet-table td) {
  height: var(--ui-table-dense-cell-height);
  line-height: 1.2;
}

:where(.modal-card) {
  width: min(var(--ui-modal-width), 100%);
  padding: var(--ui-modal-padding);
}

:where(.modal-card > .modal-close, .modal-close.icon-button, .modal-close) {
  display: inline-grid;
  width: var(--ui-modal-close-size);
  min-width: var(--ui-modal-close-size);
  height: var(--ui-modal-close-size);
  min-height: var(--ui-modal-close-size);
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: color-mix(in srgb, var(--surface) 84%, var(--surface-soft));
  color: var(--muted);
  padding: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--shadow-small);
}

:where(.modal-card > .modal-close, .modal-close.icon-button, .modal-close):hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  color: var(--accent);
}

.app-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(16px);
  padding: 24px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  border-radius: 24px;
  padding: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.brand-button {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  text-align: left;
}

.brand-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 4px 4px 8px rgb(64 58 170 / 0.45), inset -4px -4px 8px rgb(255 255 255 / 0.24);
}

.brand-mark.large {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  font-size: 12px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.side-panel small,
.muted {
  color: var(--muted);
  font-size: 13px;
}

.app-version-pill {
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  margin-top: -14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  color: var(--accent);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.student-search {
  display: grid;
  gap: 10px;
}

.search-results {
  display: grid;
  gap: 8px;
  border-radius: 18px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--inset);
}

.search-results:empty {
  display: none;
}

.notes-results:not(:empty),
.transfer-results:not(:empty),
.makeup-results:not(:empty),
.video-results:not(:empty) {
  margin-top: 12px;
}

.search-result {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 13px;
  background: var(--surface);
  padding: 10px 12px;
  text-align: left;
  box-shadow: var(--shadow-small);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.search-result:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.search-result span {
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 16px;
  align-content: start;
}

.nav-group {
  display: grid;
  gap: 9px;
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: 15px;
}

.nav-group-toggle {
  margin: 0;
  min-width: 0;
}

.nav-group-toggle > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-group-toggle > summary::-webkit-details-marker {
  display: none;
}

.nav-group-items {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.nav-group:first-child {
  border-top: 0;
  padding-top: 0;
}

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 5px 3px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-group-title span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nav-group-title small {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.nav-group-title::after {
  content: "";
  height: 2px;
  flex: 1;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(108 99 255 / 0.55), rgb(226 232 240 / 0.75));
}

.nav-group-toggle:not([open]) .nav-group-title::after {
  opacity: 0.42;
}

.nav-group-toggle:not([open]) .nav-group-title small {
  background: var(--surface-soft);
  color: var(--muted);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  line-height: 1.2;
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transition: transform 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.nav-item span {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--inset-small);
}

.nav-item {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.nav-item.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}

.nav-item.active span {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  box-shadow: none;
}

.side-panel,
.soft-note,
.muted-box {
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: none;
}

.side-panel {
  margin-top: auto;
}

.manual-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  padding: 12px;
  text-align: left;
  box-shadow: var(--shadow-small);
}

.manual-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.manual-card .manual-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-gradient);
  color: #fff;
  font-weight: 900;
}

.manual-card strong,
.manual-card small {
  display: block;
}

.manual-card strong {
  margin-top: 2px;
  font-weight: 900;
}

.manual-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.manual-card em {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  padding: 5px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.workspace {
  min-width: 0;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow-small);
  margin-bottom: 24px;
  padding: 18px 20px;
}

.topbar h1 {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 800;
}

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

.theme-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 3px;
}

.theme-toggle button {
  min-height: 32px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.theme-toggle button.active {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.primary-button,
.ghost-button,
.danger-button,
.icon-button {
  min-height: var(--button-height);
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: 9px 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}

.primary-button {
  background: var(--primary-gradient);
  color: white;
  box-shadow: var(--primary-shadow);
}

.primary-button.small,
.primary-button.mini {
  background: var(--primary-gradient);
}

.primary-button:hover,
.ghost-button:hover,
.icon-button:hover,
.danger-button:hover {
  transform: translateY(-1px);
}

.primary-button:hover {
  background: var(--primary-gradient-hover);
  box-shadow: var(--primary-shadow-hover);
}

.primary-button:active,
.ghost-button:active,
.icon-button:active,
.danger-button:active {
  transform: translateY(0.5px);
  box-shadow: var(--inset-small);
}

.ghost-button,
.icon-button,
.danger-button {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-small);
}

.ghost-button.small,
.ghost-button.mini {
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar {
  background: rgb(20 28 47 / 0.9);
}

html[data-theme="dark"] .ghost-button.small,
html[data-theme="dark"] .ghost-button.mini,
html[data-theme="dark"] .manual-card em {
  background: var(--surface-soft);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .calendar-date-cell,
html[data-theme="dark"] .clinic-block-slot,
html[data-theme="dark"] .portal-action-grid article,
html[data-theme="dark"] .draft-calendar-grid small {
  background: #101827;
}

.message-action-group .primary-button,
.message-action-group .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.message-action-group .disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ghost-button.done,
.icon-button.done {
  border-color: rgb(56 178 172 / 0.34);
  background: #ecfdf5;
  color: var(--accent-secondary);
  box-shadow: 0 8px 18px rgb(56 178 172 / 0.14);
}

.ghost-button.danger {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
  color: var(--red);
}

html[data-theme="dark"] .ghost-button.danger {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
}

.danger-button {
  color: var(--red);
}

.small,
.primary-button.small,
.ghost-button.small {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.mini,
.primary-button.mini,
.ghost-button.mini {
  min-height: 30px;
  border-radius: 12px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1;
}

.primary-button.small[data-action="add-manual-message-recipient"],
.primary-button.small[data-action="add-exam"],
.primary-button.small[data-action="add-school-boost"] {
  align-self: end;
  border: 0;
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
  font-weight: 900;
}

.primary-button.small[data-action="add-manual-message-recipient"]:hover,
.primary-button.small[data-action="add-exam"]:hover,
.primary-button.small[data-action="add-school-boost"]:hover {
  box-shadow: var(--primary-shadow-hover);
}

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

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

.done {
  color: var(--green);
  border-color: rgb(22 163 74 / 0.3);
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  box-shadow: none;
}

.panel {
  border-radius: var(--panel-radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-small);
  padding: var(--panel-padding);
}

.compact-section {
  padding: 0;
  overflow: hidden;
}

.compact-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
}

.compact-section > summary::-webkit-details-marker {
  display: none;
}

.compact-section > summary::after {
  content: "열기";
  background: var(--surface-soft);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--inset-small);
}

.compact-section[open] > summary::after {
  content: "접기";
}

.compact-section > summary strong,
.compact-section > summary span {
  display: block;
}

.compact-section > :not(summary) {
  margin: 12px 16px 16px;
}

.advanced-workbench-details > summary,
.video-absence-permission-panel.compact-section > summary {
  gap: var(--space-3);
}

.advanced-workbench-details > summary small,
.video-absence-permission-panel.compact-section > summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.video-absence-permission-panel.compact-section {
  background: var(--surface);
}

.video-absence-permission-panel.compact-section > summary .badge {
  flex: 0 0 auto;
}

.stacked-panels {
  display: grid;
  align-content: start;
  gap: var(--section-gap);
}

.panel + .panel,
.panel + .clinic-list,
.panel + .video-grid {
  margin-top: var(--section-gap);
}

.toolbar + .table-wrap {
  margin-top: 16px;
}

.toolbar + :is(.table-wrap, .clinic-block-list, .schedule-grid, .clinic-list, .video-grid, .student-list, .exam-analysis-grid, .message-console-grid, .booking-choice-grid, .calendar-grid, .calendar-shell, .audit-list, .boost-grid),
.toolbar.slim + :is(.clinic-block-list, .schedule-grid, .clinic-list, .video-grid, .student-list, .exam-analysis-grid, .message-console-grid, .booking-choice-grid, .calendar-grid, .calendar-shell, .audit-list, .boost-grid),
.student-search + .student-list,
.student-search + .search-results:not(:empty),
.search-results + .panel,
.section-head + .toolbar,
.section-head + .form-grid,
.section-head + .table-wrap,
.form-grid + :is(.clinic-block-list, .schedule-grid, .student-list, .table-wrap, .booking-list),
.filter-grid + :is(.table-wrap, .clinic-list, .student-list, .video-grid),
.panel + .ui-draft-grid,
.ui-draft-grid + .panel,
.ui-layout-panel + .panel {
  margin-top: 16px;
}

.class-filter-bar + .list-summary,
.list-summary + .student-list,
.exam-filter-toolbar + .exam-tree,
.calendar-mode-row + .calendar-layout,
.calendar-detail-head + .calendar-detail-list,
.message-console-head + .message-prep-bar,
.message-prep-bar + .message-console-grid,
.message-channel-tabs + .message-console-toolbar,
.message-console-toolbar + .recipient-target-options,
.recipient-target-options + .message-console-grid,
.message-console-grid + .message-variable-mapper,
.message-variable-mapper + .message-data-sheet,
.message-data-sheet + .message-primary-actions,
.message-primary-actions + .message-history-panel,
.journal-form + .journal-list,
.message-template-alert + .message-template-editor,
.message-template-alert + .message-template-summary,
.message-template-summary + .message-template-editor,
.video-grid + .completed-video-grid {
  margin-top: 14px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-welcome-panel {
  display: block;
  margin-bottom: var(--section-gap);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 58%),
    var(--surface);
  padding: 12px 16px;
  box-shadow: var(--shadow-xs);
}

.dashboard-welcome-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dashboard-welcome-copy > span {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.dashboard-welcome-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.35;
  min-width: 0;
}

.dashboard-welcome-panel h2 strong,
.dashboard-welcome-panel h2 em {
  font: inherit;
  font-style: normal;
}

.metric-card {
  display: grid;
  min-height: 88px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 14px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.metric-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: var(--shadow);
}

.metric-card.teal {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-secondary) 8%, var(--surface)));
}

.metric-card.amber {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--amber) 8%, var(--surface)));
}

.metric-card.red {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--red) 7%, var(--surface)));
}

.metric-card.orange {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--orange) 7%, var(--surface)));
}

.metric-card.violet {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--violet) 8%, var(--surface)));
}

.metric-card.blue {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue) 8%, var(--surface)));
}

.metric-card span,
.metric-card small {
  display: block;
  color: var(--muted);
}

.metric-card strong {
  display: block;
  margin: 7px 0 4px;
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.metric-card.teal strong,
.badge.video,
.badge.free,
.badge.neutral,
.badge.success {
  color: var(--accent-secondary);
}

.metric-card.amber strong,
.badge.homework {
  color: var(--amber);
}

.metric-card.red strong,
.badge.retest,
.badge.danger,
.score-bad {
  color: var(--red);
}

.metric-card.orange strong {
  color: var(--orange);
}

.metric-card.violet strong,
.badge.required {
  color: var(--violet);
}

.metric-card.blue strong {
  color: var(--blue);
}

.metric-card.active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 16%, transparent);
}

.metric-card.active span,
.metric-card.active strong,
.metric-card.active small {
  color: var(--accent);
}

.v12-readiness-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
}

.v12-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.v12-readiness-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.v12-readiness-head strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.v12-readiness-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.v12-readiness-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 940;
}

.v12-readiness-head > span.done {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.v12-readiness-head > span.warn {
  background: color-mix(in srgb, var(--orange) 13%, var(--surface));
  color: var(--orange);
}

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

.v12-readiness-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main status"
    "note note";
  align-items: center;
  gap: 6px 10px;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.v12-readiness-grid button:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.v12-readiness-grid button > span {
  grid-area: main;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.v12-readiness-grid b,
.v12-readiness-grid strong,
.v12-readiness-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v12-readiness-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.v12-readiness-grid strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.v12-readiness-grid em {
  grid-area: status;
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 930;
  white-space: nowrap;
}

.v12-readiness-grid button.done em {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.v12-readiness-grid button.warn em {
  background: color-mix(in srgb, var(--orange) 13%, var(--surface));
  color: var(--orange);
}

.v12-readiness-grid small {
  grid-area: note;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.dashboard-grid,
.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 20px;
  margin-bottom: 18px;
}

.dashboard-grid > .panel + .panel,
.two-column > .panel + .panel {
  margin-top: 0;
}

.dashboard-calendar-shell {
  display: grid;
  gap: 12px;
}

.dashboard-today-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--compact-radius);
  background: var(--surface-soft);
  padding: 10px;
}

.dashboard-today-strip .ghost-button {
  align-self: stretch;
  min-height: 44px;
}

.dashboard-today-strip div {
  display: grid;
  gap: 2px;
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 12px;
}

.dashboard-today-strip span,
.dashboard-calendar-day span,
.dashboard-calendar-day small,
.dashboard-summary-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-today-strip strong {
  font-size: 22px;
  font-weight: 950;
}

.dashboard-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.dashboard-calendar-day {
  display: grid;
  min-height: 86px;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 7px;
  text-align: center;
  box-shadow: var(--shadow-small);
}

.dashboard-calendar-day strong {
  font-size: 22px;
  font-weight: 950;
}

.dashboard-calendar-day.today {
  border-color: rgb(56 178 172 / 0.42);
}

.dashboard-calendar-day.selected {
  border-color: rgb(108 99 255 / 0.42);
  background: linear-gradient(135deg, rgb(108 99 255 / 0.12), rgb(56 178 172 / 0.08)), var(--surface);
  box-shadow: 0 12px 26px rgb(108 99 255 / 0.13);
}

.dashboard-date-summary {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
  padding: 12px;
}

.dashboard-date-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-date-summary-head strong {
  display: block;
  margin-top: 2px;
  font-size: 18px;
}

.dashboard-summary-list {
  display: grid;
  gap: 6px;
}

.dashboard-summary-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.44fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
}

.dashboard-summary-row:is(:hover, :focus-visible),
.calendar-detail-row:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.dashboard-summary-row.video {
  border-color: rgb(56 178 172 / 0.22);
}

.dashboard-summary-row.boost,
.calendar-detail-row.boost {
  border-color: rgb(108 99 255 / 0.24);
}

.dashboard-priority-row {
  grid-template-columns: minmax(0, 1fr) 58px;
  min-height: 58px;
  gap: 10px;
}

.student-row.dashboard-priority-row {
  grid-template-columns: minmax(0, 1fr) 58px;
}

.dashboard-priority-main {
  min-width: 0;
}

.dashboard-priority-row .count-pill {
  display: grid;
  align-self: center;
  justify-self: end;
  width: 50px;
  height: 26px;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.section-head,
.toolbar,
.clinic-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-head {
  margin-bottom: 16px;
}

.section-head.tight {
  margin-bottom: 12px;
}

.section-head h2,
.section-head h3,
.clinic-main h2 {
  margin: 4px 0 0;
}

.section-head p,
.clinic-main p,
.schedule-card p,
.survey-copy {
  margin: 6px 0 0;
  color: var(--muted);
}

.timeline,
.student-list,
.class-list,
.clinic-list,
.video-grid,
.audit-list,
.booking-list,
.compact-history {
  display: grid;
  gap: 12px;
}

.clinic-list {
  gap: 6px;
}

.video-grid {
  gap: 8px;
}

.timeline-item,
.student-row,
.student-card,
.queue-row,
.booking-row,
.audit-row {
  display: grid;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
  box-shadow: var(--shadow-small);
  transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out;
}

.timeline-item {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-radius: 16px;
  padding: 9px 11px;
}

.timeline-item h3 {
  margin: 3px 0 2px;
  font-size: 15px;
}

.timeline-item p {
  margin: 0;
  font-size: 12px;
}

.timeline-item:hover,
.student-row:hover,
.student-card:hover,
.queue-row:hover,
.schedule-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.timeline-item.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 13%, transparent);
}

.date-box {
  display: grid;
  min-height: 52px;
  place-items: center;
  gap: 1px;
  border-radius: 16px;
  box-shadow: var(--inset);
}

.date-box strong {
  font-size: 15px;
}

.date-box span {
  color: var(--muted);
  font-size: 11px;
}

.badge,
.count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
}

.search-result.selected,
.filter-chip.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 13%, transparent);
}

.filter-chip.withdrawn {
  border-color: rgb(100 116 139 / 0.28);
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
}

.filter-chip.withdrawn.active {
  border-color: rgb(220 38 38 / 0.28);
  background: color-mix(in srgb, var(--surface) 86%, rgb(220 38 38 / 0.14));
  color: var(--red);
  box-shadow: 0 8px 18px rgb(220 38 38 / 0.1);
}

.class-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 11px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.filter-chip strong {
  color: var(--text);
}

.list-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

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

.compact-row {
  min-height: 72px;
}

.action-row,
.queue-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.row-main {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.student-row,
.student-card,
.booking-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.student-card {
  gap: 12px;
}

.student-card-main {
  display: grid;
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.student-card-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.student-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  align-self: center;
}

.student-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
}

.student-card.withdrawn {
  border-color: rgb(100 116 139 / 0.24);
  background: #f8fafc;
  box-shadow: none;
}

.student-row strong,
.student-row span,
.student-card-copy strong,
.student-card-copy span,
.student-card-copy small,
.queue-row strong,
.queue-row span,
.booking-row strong,
.booking-row span,
.audit-row strong,
.audit-row span {
  display: block;
}

.queue-panel .queue-row {
  grid-template-columns: minmax(132px, max-content) minmax(0, 1fr);
}

.queue-panel .section-head + .queue-row {
  margin-top: var(--space-3);
}

.queue-panel .queue-row + .queue-row {
  margin-top: var(--space-2);
}

.queue-panel .queue-row.action-row,
.queue-panel .dashboard-confirm-row {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.queue-panel .queue-row strong {
  min-width: max-content;
  white-space: nowrap;
  word-break: keep-all;
}

.queue-panel .queue-row span:not(.count-pill) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.student-row span,
.student-card-copy span,
.student-card-copy small,
.queue-row span,
.booking-row span,
.audit-row span {
  color: var(--muted);
  font-size: 13px;
}

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

.student-detail-page {
  display: grid;
  gap: 12px;
}

.student-detail-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 46%),
    var(--surface);
  padding: 12px 14px;
}

.student-detail-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 20px;
  font-weight: 950;
  box-shadow: var(--primary-shadow);
}

.student-detail-title {
  min-width: 0;
}

.student-detail-title h2 {
  margin: 2px 0 3px;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.14;
}

.student-detail-title p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

.student-detail-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.student-detail-contact span,
.student-detail-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.student-detail-contact a {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  color: var(--text);
}

.student-detail-contact a:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  color: var(--accent);
}

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

.student-detail-metrics {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.student-detail-metrics .mini-panel {
  min-height: 86px;
  border-radius: 16px;
  padding: 11px 12px;
}

.student-detail-dock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.student-detail-dock-button {
  display: grid;
  gap: 5px;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 13px 14px;
  text-align: left;
  box-shadow: var(--shadow-small);
}

.student-detail-dock-button:hover {
  border-color: rgb(108 99 255 / 0.32);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.student-detail-dock-button span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 950;
}

.student-detail-dock-button em {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f5f3ff;
  color: var(--accent);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.student-detail-dock-button small {
  color: var(--muted);
  font-weight: 800;
}

.student-detail-section {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 12px;
}

.student-detail-section h3 {
  margin: 0 0 10px;
}

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

.student-detail-attendance-row {
  display: grid;
  grid-template-columns: minmax(126px, 150px) 68px minmax(72px, 88px) minmax(68px, 84px) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.student-detail-attendance-row:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: var(--shadow-small);
  transform: translateY(-1px);
}

.student-detail-attendance-date,
.student-detail-attendance-status {
  display: grid;
  min-width: 0;
}

.student-detail-attendance-status {
  justify-items: start;
}

.student-detail-attendance-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.student-detail-week-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.future-attendance-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft));
  color: var(--accent);
  padding: 0 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.student-detail-attendance-status .state-chip {
  flex: 0 0 auto;
  width: 64px;
  justify-content: center;
  text-align: center;
}

.student-detail-attendance-row strong,
.student-detail-attendance-row small {
  display: block;
}

.student-detail-attendance-row small {
  color: var(--muted);
  font-weight: 800;
}

.student-detail-attendance-note {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.student-detail-grid {
  margin-top: 0;
}

.student-detail-modal {
  width: min(1040px, 100%);
}

.student-detail-modal-body {
  display: grid;
  gap: 12px;
}

.student-detail-modal-body .journal-panel,
.student-detail-modal-body .score-panel {
  margin: 0;
}

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

.insight-grid.student-detail-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.mini-panel,
.flow-step {
  border-radius: 24px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--inset);
}

.mini-panel-copy {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 9px 0;
}

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

.detail-grid h3 {
  margin: 0 0 10px;
}

.detail-row {
  display: grid;
  gap: 4px;
  border-radius: 18px;
  padding: 13px;
  box-shadow: var(--inset-small);
}

.detail-row + .detail-row {
  margin-top: 10px;
}

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

.mini-panel span,
.mini-panel small {
  display: block;
  color: var(--muted);
}

.journal-panel,
.weekday-clinic-card,
.clinic-history-row,
.more-history {
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface);
  padding: 0;
  margin-bottom: var(--ui-table-cell-x);
  overflow: hidden;
}

.journal-panel > summary,
.weekday-clinic-card > summary,
.clinic-history-row > summary,
.more-history > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--ui-disclosure-summary-min-height);
  padding: var(--ui-disclosure-summary-padding-y) var(--ui-disclosure-summary-padding-x);
  cursor: pointer;
  list-style: none;
}

.journal-panel > summary::-webkit-details-marker,
.weekday-clinic-card > summary::-webkit-details-marker,
.clinic-history-row > summary::-webkit-details-marker,
.more-history > summary::-webkit-details-marker {
  display: none;
}

.journal-panel > summary > span,
.weekday-clinic-card > summary > span,
.clinic-history-row > summary > span,
.more-history > summary > span {
  display: grid;
  gap: var(--ui-disclosure-label-gap);
  min-width: 0;
}

.journal-panel > summary::after,
.more-history > summary::after {
  content: "열기";
  border-radius: var(--ui-disclosure-action-radius);
  background: var(--surface-soft);
  padding: var(--ui-disclosure-action-padding-y) var(--ui-table-cell-x);
  color: var(--muted);
  font-size: var(--ui-disclosure-action-font-size);
  font-weight: var(--ui-label-font-weight);
}

.journal-panel[open] > summary::after,
.more-history[open] > summary::after {
  content: "접기";
}

.journal-panel > :not(summary),
.weekday-clinic-body,
.clinic-history-row > :not(summary),
.more-history > :not(summary) {
  margin: var(--ui-table-cell-x) var(--space-4) var(--space-4);
}

.journal-form {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.8fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.journal-form.compact {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.journal-list,
.weekday-clinic-list {
  display: grid;
  gap: var(--space-3);
}

.journal-item {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  background: var(--surface);
  padding: var(--space-3);
}

.journal-item-readonly {
  grid-template-columns: 1fr;
}

.journal-read-grid {
  display: grid;
  grid-template-columns:
    minmax(var(--ui-journal-date-column), 0.6fr)
    minmax(var(--ui-journal-category-column), 0.75fr)
    minmax(var(--ui-journal-content-min), 2fr);
  gap: var(--ui-table-cell-x);
}

.journal-read-field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  background: var(--surface-soft);
  padding: var(--ui-table-cell-x) var(--space-3);
}

.journal-read-field small {
  color: var(--muted);
  font-size: var(--ui-label-font-size);
  font-weight: var(--ui-label-font-weight);
}

.journal-read-field strong,
.journal-read-field p {
  margin: 0;
  color: var(--text);
  font-size: var(--ui-body-font-size);
  line-height: var(--ui-body-line-height);
  overflow-wrap: anywhere;
}

.journal-read-content p {
  white-space: pre-wrap;
}

.journal-category-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.journal-item small {
  color: var(--muted);
  white-space: nowrap;
}

.journal-item-editable {
  grid-template-columns: 1fr;
  gap: var(--ui-table-cell-x);
}

.journal-edit-grid {
  display: grid;
  grid-template-columns: var(--ui-journal-date-column) var(--ui-journal-category-column) minmax(var(--ui-journal-content-min), 1fr);
  align-items: end;
  gap: var(--ui-table-cell-x);
}

.journal-edit-grid label {
  display: grid;
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--ui-label-font-size);
  font-weight: var(--ui-label-font-weight);
}

.journal-edit-grid input,
.journal-edit-grid select,
.journal-edit-grid textarea {
  width: 100%;
  min-width: 0;
}

.journal-edit-content textarea {
  min-height: var(--ui-detail-row-min);
  resize: vertical;
}

.journal-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-table-cell-x);
}

.journal-item-meta small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

@media (max-width: 860px) {
  .journal-read-grid,
  .journal-edit-grid {
    grid-template-columns: 1fr;
  }

  .journal-item-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

.weekday-clinic-card {
  box-shadow: var(--shadow-small);
}

.weekday-clinic-card > summary span,
.clinic-history-row > summary span {
  color: var(--muted);
  font-size: 13px;
}

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

.mini-panel strong {
  display: block;
  margin: 6px 0;
  font-size: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

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

.homework-assignment-form label {
  min-width: 0;
}

.homework-assignment-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
}

.homework-assignment-topline .compact-field {
  width: min(150px, 100%);
}

.assignment-class-field {
  display: grid;
  gap: 8px;
}

.assignment-class-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
}

.assignment-class-chip,
.assignment-publish-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
}

.homework-assignment-topline .assignment-publish-switch {
  min-height: 34px;
  padding: 0 11px;
  font-size: 12px;
}

.assignment-class-chip input,
.assignment-publish-switch input {
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  height: 12px;
  min-height: 12px;
  max-height: 12px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, var(--border));
  border-radius: 3px;
  background: var(--surface);
  padding: 0;
  accent-color: var(--violet);
  box-shadow: none;
}

.assignment-class-chip:has(input:checked),
.assignment-publish-switch:has(input:checked) {
  border-color: color-mix(in srgb, var(--violet) 42%, var(--border));
  background: color-mix(in srgb, var(--violet) 10%, var(--surface));
  color: var(--violet);
}

.homework-assignment-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

.homework-assignment-filter {
  margin-bottom: 12px;
}

.homework-assignment-filter label {
  width: min(220px, 100%);
}

.homework-assignment-surface-grid,
.announcement-surface-grid {
  align-items: start;
}

.homework-assignment-compose-panel,
.announcement-compose-panel,
.homework-assignment-status-panel,
.announcement-status-panel {
  padding: 16px 18px;
}

.homework-assignment-compose-panel textarea,
.announcement-compose-panel textarea {
  min-height: 96px;
}

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

.homework-assignment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px 14px;
}

.homework-assignment-row .list-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.homework-assignment-row .list-card-main h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  word-break: keep-all;
}

.homework-assignment-row .list-card-main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.homework-assignment-row .row-actions {
  align-items: center;
  align-self: center;
  flex-wrap: nowrap;
}

.homework-filter-panel .toolbar {
  display: grid;
  grid-template-columns: minmax(94px, 0.72fr) minmax(110px, 0.78fr) minmax(132px, 0.9fr) minmax(190px, 1.25fr) minmax(280px, max-content);
  align-items: end;
  gap: 10px;
}

.homework-filter-panel .toolbar label,
.homework-search-field {
  min-width: 0;
}

.homework-history-note {
  display: inline-flex;
  align-items: center;
  align-self: end;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.attendance-filter-panel .toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(150px, 0.9fr) minmax(160px, 0.9fr) minmax(220px, 1fr);
  align-items: end;
}

.attendance-filter-panel .toolbar label {
  min-width: 0;
}

.homework-queue-panel {
  padding: 16px 18px;
}

.homework-queue-table th,
.homework-queue-table td {
  white-space: normal;
}

.homework-queue-table td:nth-child(4),
.homework-queue-table td:nth-child(5) {
  max-width: 280px;
  line-height: 1.4;
  word-break: keep-all;
}

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

.announcement-form label {
  min-width: 0;
}

.announcement-topline {
  align-items: end;
}

.announcement-topline .announcement-title-field {
  flex: 1 1 260px;
  min-width: min(260px, 100%);
}

.announcement-topline .compact-field {
  width: min(150px, 100%);
}

.announcement-form textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

.announcement-form .form-actions {
  display: flex;
  justify-content: flex-end;
}

.announcement-filter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.announcement-filter label {
  width: min(220px, 100%);
}

.announcement-filter + .stack-list {
  margin-top: 0;
  padding-top: 16px;
}

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

.announcement-summary-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.announcement-summary-button:hover {
  background: color-mix(in srgb, var(--violet) 5%, transparent);
  transform: none;
  box-shadow: none;
}

.announcement-summary-button > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.announcement-summary-button strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-summary-button span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-badge-row,
.announcement-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.announcement-meta-row span,
.announcement-unread {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.announcement-meta-row span.warn {
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange);
}

.announcement-meta-row span.done {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.announcement-unread {
  width: fit-content;
  max-width: 100%;
  line-height: 1.3;
  white-space: normal;
}

.announcement-row .row-actions {
  flex-wrap: nowrap;
  gap: 5px;
}

.announcement-row .row-actions .mini {
  min-height: 28px;
  padding: 0 9px;
}

.announcement-detail-modal {
  width: min(940px, calc(100vw - 28px));
}

.announcement-expired-modal {
  width: min(860px, 100%);
}

.announcement-expired-list {
  display: grid;
  gap: 7px;
  max-height: 62vh;
  overflow: hidden;
}

.announcement-detail-body {
  display: grid;
  gap: 10px;
}

.announcement-detail-copy {
  display: grid;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.announcement-detail-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.announcement-detail-copy strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.announcement-detail-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
  white-space: pre-wrap;
}

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

.announcement-reader-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  min-height: 208px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 10px;
}

.announcement-reader-panel h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.announcement-reader-panel h3 span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.announcement-student-list {
  display: grid;
  grid-auto-rows: minmax(32px, max-content);
  align-content: start;
  align-items: start;
  gap: 5px;
  max-height: 320px;
  overflow: auto;
}

.announcement-student-row {
  display: grid;
  grid-template-columns: minmax(56px, 0.52fr) minmax(120px, 1.25fr) minmax(86px, 0.78fr);
  align-items: center;
  align-self: start;
  gap: 7px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 5px 7px;
}

.announcement-student-row.read {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
}

.announcement-student-row.unread {
  border-color: color-mix(in srgb, var(--orange) 20%, var(--border));
}

.announcement-student-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.announcement-student-row span,
.announcement-student-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-student-row small {
  justify-self: end;
}

.student-form,
.schedule-form,
.exam-form,
.schedule-edit-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exam-picker-field {
  display: grid;
  gap: 7px;
}

.exam-picker-field > input {
  min-height: 40px;
}

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

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

.field-help {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

input,
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  padding: 10px 13px;
  box-shadow: none;
}

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

.compact-callout strong,
.compact-callout span {
  display: block;
}

.attendance-utility-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
}

.attendance-utility-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  min-height: 62px;
  gap: 12px;
  padding: 14px 18px;
}

.attendance-utility-card > summary::after {
  align-self: center;
  justify-self: end;
  white-space: nowrap;
}

.attendance-utility-card > summary > span {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

.attendance-utility-card > summary strong {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.18;
  word-break: keep-all;
}

.attendance-utility-card > summary .eyebrow {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.attendance-utility-card > :not(summary) {
  margin: 0 18px 16px;
}

.attendance-utility-card[open] > :not(summary) {
  padding-top: 10px;
}

.attendance-guide-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
}

.rule-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rule-chip-list span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
}

textarea {
  resize: vertical;
}

::placeholder {
  color: #8a95a5;
}

.toolbar {
  align-items: end;
  flex-wrap: wrap;
}

.toolbar.slim {
  justify-content: flex-start;
  margin-bottom: 0;
}

.toolbar label {
  min-width: 180px;
}

.toolbar-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}

.term-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.term-bar small {
  color: var(--accent);
  font-size: 11px;
}

.table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  box-shadow: none;
}

.data-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0 7px;
  padding: 9px;
}

.data-table th {
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  padding: 7px 10px;
}

.data-table td {
  background: var(--surface);
  padding: 10px 10px;
  vertical-align: top;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.data-table tr td:first-child {
  border-radius: 14px 0 0 14px;
  border-left: 1px solid var(--border);
}

.data-table tr td:last-child {
  border-radius: 0 14px 14px 0;
  border-right: 1px solid var(--border);
}

.data-table .select-col {
  width: 38px;
  min-width: 38px;
  padding-left: 8px;
  padding-right: 6px;
  text-align: center;
}

.data-table .select-col input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.attendance-table {
  min-width: 1280px;
  table-layout: fixed;
}

.attendance-student-col {
  width: 190px;
}

.attendance-status-col {
  width: 164px;
}

.attendance-homework-rate-col {
  width: 126px;
}

.attendance-homework-note-col {
  width: 178px;
}

.attendance-score-col {
  width: 170px;
}

.attendance-clinic-col {
  width: 176px;
}

.attendance-special-col {
  width: 178px;
}

.attendance-notice-col {
  width: 122px;
}

.attendance-table th,
.attendance-table td {
  vertical-align: middle;
}

.attendance-table tbody td {
  height: 72px;
  vertical-align: top;
  padding-top: 16px;
  padding-bottom: 12px;
}

.attendance-table :is(input, select, button) {
  min-height: 34px;
}

.attendance-head-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.attendance-save-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 36px;
}

.attendance-save-controls > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.attendance-save-controls > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attendance-row.has-local-draft td {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.attendance-row.has-local-draft td:first-child {
  border-left-color: var(--accent);
}

.attendance-row td:first-child {
  border-left-width: 4px;
}

.attendance-row.status-pending td:first-child,
.clinic-group-card.status-pending,
.video-card.status-pending,
.daily-clinic-chip.status-pending {
  border-left-color: #94a3b8;
}

.attendance-row.status-present td:first-child,
.clinic-group-card.status-present,
.video-card.status-present,
.daily-clinic-chip.status-present {
  border-left-color: var(--green);
}

.attendance-row.status-late td:first-child,
.clinic-group-card.status-late,
.video-card.status-late,
.daily-clinic-chip.status-late {
  border-left-color: var(--orange);
}

.attendance-row.status-absent td:first-child,
.clinic-group-card.status-absent,
.video-card.status-absent,
.daily-clinic-chip.status-absent {
  border-left-color: var(--red);
}

.clinic-group-card.status-mixed,
.daily-clinic-chip.status-mixed {
  border-left-color: var(--violet);
}

.student-cell,
.text-link {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.student-cell strong,
.student-cell span {
  display: block;
}

.student-cell strong {
  line-height: 1.15;
}

.student-cell span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  margin-top: 3px;
}

.mini-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  max-width: 156px;
}

.mini-badges .badge {
  display: inline-grid;
  place-items: center;
  height: 26px;
  min-width: 48px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.mini-badges .badge > span {
  display: inline-block;
  margin: 0;
  color: inherit;
  line-height: 1;
  transform: translate(-1px, 1.5px);
}

.mini-badges .badge.homework > span {
  color: var(--amber);
}

.mini-badges .badge.retest > span {
  color: var(--red);
}

.mini-badges .badge.video > span {
  color: var(--accent-secondary);
}

.state-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 26px;
  border-radius: 999px;
  padding: 1px 10px 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.state-chip.status-pending {
  background: var(--surface-soft);
  color: var(--muted);
}

.state-chip.status-present {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.state-chip.status-late {
  background: color-mix(in srgb, var(--orange) 12%, var(--surface));
  color: var(--orange);
}

.state-chip.status-absent {
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.state-chip.status-mixed {
  background: color-mix(in srgb, var(--violet) 11%, var(--surface));
  color: var(--violet);
}

.status-select-cell {
  display: grid;
  grid-template-columns: auto minmax(110px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 150px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgb(148 163 184 / 0.18);
}

.status-dot.status-present {
  background: var(--green);
  box-shadow: 0 0 0 3px rgb(22 163 74 / 0.16);
}

.status-dot.status-late {
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(234 88 12 / 0.16);
}

.status-dot.status-absent {
  background: var(--red);
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.14);
}

.percent-field {
  display: grid;
  grid-template-columns: minmax(66px, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 116px;
}

.percent-field span {
  color: var(--muted);
  font-weight: 800;
}

.score-cell {
  display: grid;
  grid-template-rows: 34px 16px;
  align-content: center;
  gap: 4px;
  min-width: 132px;
}

.attendance-table input[data-field="testScore"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.attendance-table input[data-field="testScore"]::-webkit-inner-spin-button,
.attendance-table input[data-field="testScore"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.score-cell small,
.clinic-summary span {
  color: var(--muted);
  font-size: 12px;
}

.score-cell small {
  display: block;
  min-width: 0;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-summary {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  max-width: 164px;
}

.clinic-summary strong,
.clinic-summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.clinic-summary .ghost-button {
  justify-self: start;
}

.attendance-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.attendance-gate.open {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-secondary) 8%, var(--surface)));
}

.attendance-gate.makeup {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--blue) 8%, var(--surface)));
}

.attendance-gate.blocked {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--orange) 8%, var(--surface)));
}

.attendance-gate strong,
.attendance-gate p {
  display: block;
  margin: 8px 0 0;
}

.attendance-gate p {
  color: var(--muted);
}

.attendance-gate-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.attendance-gate-line strong,
.attendance-gate-line span {
  margin: 0;
}

.attendance-gate-line > span:not(.badge) {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.makeup-day-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px auto;
  gap: 10px;
  min-width: min(520px, 100%);
}

.makeup-attendee-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.clinic-block-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.clinic-target-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.clinic-target-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.clinic-target-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.clinic-target-check.active {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent);
  box-shadow: 0 8px 18px rgb(108 99 255 / 0.12);
}

.clinic-target-check:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 6px 14px rgb(31 42 100 / 0.14);
}

.clinic-type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.type-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 6px 12px;
  color: var(--text);
  font-size: 12px;
}

.type-check input {
  width: 14px;
  min-height: 14px;
}

.clinic-block-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.clinic-block-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 14px;
}

.clinic-block-head,
.clinic-block-stats,
.calendar-actions,
.calendar-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.clinic-block-head h3 {
  margin: 2px 0 5px;
}

.clinic-block-head p,
.clinic-block-stats {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clinic-block-stats {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.clinic-block-stats span {
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 8px;
}

.clinic-type-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.type-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.type-tag.homework {
  color: var(--amber);
}

.type-tag.retest {
  color: var(--red);
}

.type-tag.required {
  color: var(--violet);
}

.type-tag.free {
  color: var(--accent-secondary);
}

.clinic-block-grid {
  display: grid;
  grid-template-columns: 104px repeat(var(--slot-columns), minmax(66px, 1fr));
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
}

.clinic-block-corner,
.clinic-block-time,
.clinic-block-date,
.clinic-block-slot {
  min-height: 38px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  font-size: 12px;
}

.clinic-block-corner,
.clinic-block-time,
.clinic-block-date {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.clinic-block-slot {
  display: grid;
  gap: 2px;
  border-top: 0;
  border-left: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.clinic-block-slot:hover,
.clinic-block-slot.active {
  background: linear-gradient(135deg, rgb(108 99 255 / 0.12), rgb(56 178 172 / 0.08)), var(--surface);
  box-shadow: inset 3px 0 0 var(--accent);
}

.clinic-block-slot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.clinic-block-slot strong {
  font-size: 12px;
  line-height: 1.05;
}

.clinic-block-slot span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.clinic-block-slot .clinic-type-tags {
  margin-top: 0;
}

.clinic-block-slot .type-tag {
  min-height: 17px;
  padding: 2px 5px;
  font-size: 9px;
}

.clinic-block-slot.empty {
  cursor: default;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.clinic-block-slot.empty:hover {
  background: var(--surface);
  box-shadow: none;
}

.compact-picker-panel {
  width: min(840px, 100%);
}

.clinic-picker-filter-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  margin-top: 10px;
  overflow: hidden;
}

.clinic-picker-filter-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
  padding: 8px 11px;
}

.clinic-picker-filter-panel > summary::-webkit-details-marker {
  display: none;
}

.clinic-picker-filter-panel > summary strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.clinic-picker-filter-panel > summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.clinic-picker-filter-panel .toolbar.slim {
  border-top: 1px solid var(--border);
  margin: 0;
  padding: 10px;
}

.clinic-picker-filter-panel .toolbar.slim label {
  max-width: 220px;
}

.clinic-picker-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 8px;
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 7px 10px;
}

.clinic-picker-summary strong {
  color: var(--accent);
}

.clinic-picker-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clinic-picker-recommend-list {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.clinic-picker-recommend-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  padding: 5px 8px;
}

.clinic-picker-recommend-times {
  display: grid;
  gap: 4px;
}

.clinic-picker-recommend-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.clinic-picker-recommend-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-picker-recommend-meta span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 950;
}

.clinic-picker-selected {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid rgb(108 99 255 / 0.2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 7px 9px;
}

.clinic-picker-selected.empty {
  border-style: dashed;
  background: var(--surface);
}

.clinic-picker-selected strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.clinic-picker-selected > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.clinic-picker-selected div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.clinic-picker-selected-chip {
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.clinic-picker-all {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  margin-top: 10px;
  overflow: hidden;
}

.clinic-picker-all > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
}

.clinic-picker-all > summary::-webkit-details-marker {
  display: none;
}

.clinic-picker-all > summary strong {
  font-size: 13px;
  font-weight: 950;
}

.clinic-picker-all > summary span {
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.clinic-picker-all .clinic-picker-date-list {
  border-top: 1px solid var(--border);
  padding: 8px;
}

.clinic-picker-date-list {
  display: grid;
  gap: 8px;
}

.clinic-picker-date-group {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.clinic-picker-date-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
}

.clinic-picker-date-group > summary::-webkit-details-marker {
  display: none;
}

.clinic-picker-date-group > summary span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.clinic-picker-time-grid {
  display: grid;
  border-top: 1px solid var(--border);
}

.clinic-picker-time-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-bottom: 1px solid var(--border);
  padding: 5px 9px;
}

.clinic-picker-time-row.compact {
  min-height: 30px;
  border: 0;
  padding: 2px 0;
}

.clinic-picker-time-row:last-child {
  border-bottom: 0;
}

.clinic-picker-time {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.clinic-picker-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.clinic-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.clinic-picker-chip input {
  width: 13px;
  min-height: 13px;
}

.clinic-picker-chip em {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}

.clinic-picker-chip.selected {
  border-color: rgb(108 99 255 / 0.45);
  background: rgb(108 99 255 / 0.1);
  color: var(--accent);
}

.clinic-picker-chip.disabled {
  opacity: 0.45;
}

.slot-console {
  display: grid;
  gap: 12px;
  border: 1px solid rgb(108 99 255 / 0.2);
  border-radius: 20px;
  background: linear-gradient(135deg, rgb(108 99 255 / 0.08), rgb(56 178 172 / 0.06));
  margin-bottom: 16px;
  padding: 14px;
}

.schedule-edit-section {
  margin-bottom: 16px;
}

.slot-console-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.slot-console-head strong,
.slot-console-head span {
  display: block;
}

.slot-console-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.slot-type-summary,
.slot-student-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.slot-type-summary span {
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
}

.slot-console-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.slot-console-column {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.slot-console-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.slot-console-subhead strong {
  font-size: 13px;
  font-weight: 950;
}

.slot-console-subhead span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.slot-student-search {
  max-width: none;
}

.slot-student-results,
.slot-booking-roster {
  display: grid;
  gap: 7px;
}

.slot-student-row,
.slot-roster-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.slot-student-row span,
.slot-roster-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.slot-roster-row {
  text-align: left;
}

.schedule-list-panel .schedule-grid {
  margin-top: 18px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgb(15 23 42 / 0.34);
  padding: 24px;
}

.omr-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgb(15 23 42 / 0.58);
  backdrop-filter: blur(5px);
}

.omr-processing-overlay > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  width: min(420px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 0.3);
}

.omr-processing-overlay strong {
  color: var(--text);
  font-size: 16px;
}

.omr-processing-overlay small {
  grid-column: 2;
  color: var(--muted);
  line-height: 1.5;
}

.modal-card {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  padding: 24px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 0.22);
}

.modal-card > .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 14px;
}

.modal-head h2,
.modal-head p {
  margin: 0;
}

.modal-head h2 {
  margin-top: 3px;
  color: var(--text);
  font-size: 22px;
  font-weight: 920;
  line-height: 1.2;
}

.modal-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.modal-head .icon-button {
  display: inline-grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}

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

.modal-header > div {
  flex: 1 1 auto;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.modal-header h2,
.modal-header p {
  margin: 0;
}

.modal-header .icon-button {
  display: inline-grid;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  line-height: 1;
  flex: 0 0 36px;
}

.manual-modal {
  width: min(1120px, 100%);
  padding: 26px;
}

.manual-modal-head {
  align-items: start;
  margin-bottom: 18px;
}

.manual-modal-head h2 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
}

.manual-modal-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.manual-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.manual-overview-grid > div {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface-soft) 56%, var(--surface)));
  padding: 15px;
}

.manual-overview-grid span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  font-weight: 900;
}

.manual-overview-grid strong {
  font-weight: 900;
}

.manual-overview-grid small {
  color: var(--muted);
  line-height: 1.45;
}

.manual-modal-grid {
  display: grid;
  gap: 14px;
}

.manual-modal-section {
  display: grid;
  grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-small);
}

.manual-section-title span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-section-title h3 {
  margin: 6px 0 8px;
  font-size: 20px;
}

.manual-section-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

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

.manual-step-group {
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  border: 1px solid var(--border);
  padding: 14px;
}

.manual-step-group > strong {
  display: block;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 900;
}

.manual-step-group ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.compact-modal {
  width: min(720px, 100%);
}

.modal-filter {
  padding-bottom: 16px;
}

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

.booking-choice {
  display: grid;
  gap: 7px;
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 16px;
  text-align: left;
  box-shadow: var(--shadow-small);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.booking-choice:hover {
  transform: translateY(-1px);
  border-color: rgb(108 99 255 / 0.5);
  box-shadow: var(--shadow-hover);
}

.booking-choice small,
.booking-choice em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions.split-actions {
  justify-content: space-between;
  align-items: center;
}

.modal-actions-left,
.modal-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-action-box {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 14px;
}

.status-action-box > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.status-action-box > summary::-webkit-details-marker {
  display: none;
}

.status-action-box > summary::after {
  content: "열기";
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  box-shadow: var(--inset-small);
}

.status-action-box[open] > summary::after {
  content: "접기";
}

.status-action-box strong,
.status-action-box span,
.status-action-box small {
  display: block;
}

.status-action-box span,
.status-action-box small {
  color: var(--muted);
}

.status-action-box.withdrawn {
  border-color: rgb(220 38 38 / 0.16);
  background: color-mix(in srgb, var(--surface) 88%, rgb(220 38 38 / 0.12));
}

.status-action-form {
  align-items: start;
  margin-bottom: 0;
}

.status-action-form label {
  align-self: start;
}

.withdraw-help {
  grid-column: 1 / -1;
  margin: -4px 0 0;
}

.slot-card,
.schedule-card,
.task-check {
  position: relative;
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-small);
}

.task-check {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 16px;
  row-gap: 3px;
}

.slot-card {
  padding-left: 46px;
}

.slot-card input {
  position: absolute;
  left: 17px;
  top: 18px;
  width: 16px;
  min-height: 16px;
  box-shadow: none;
}

.task-check input {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  width: 18px;
  min-height: 18px;
  margin: 0;
  box-shadow: none;
}

.slot-card.selected,
.task-check:has(input:checked) {
  box-shadow: var(--inset);
  color: var(--accent);
}

.slot-card.disabled {
  opacity: 0.55;
}

.schedule-card {
  width: 100%;
  text-align: left;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.compact-card {
  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.28fr);
  align-items: center;
  min-height: 116px;
  padding: 14px;
}

.compact-card strong,
.compact-card small {
  display: block;
}

.compact-card strong {
  margin-top: 7px;
}

.compact-card small,
.compact-card p {
  color: var(--muted);
  font-size: 13px;
}

.compact-capacity {
  display: grid;
  gap: 7px;
  justify-items: end;
}

.compact-capacity span {
  color: var(--text);
  font-weight: 800;
}

.capacity-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: none;
}

.capacity-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-secondary);
}

.schedule-detail,
.picker-panel,
.queue-panel {
  margin-bottom: 18px;
}

.clinic-card,
.video-card {
  box-shadow: var(--shadow-small);
}

.request-banner,
.survey-success {
  display: grid;
  gap: 14px;
  border: 1px solid rgb(37 99 235 / 0.24);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgb(37 99 235 / 0.08), rgb(56 178 172 / 0.08)),
    #ffffff;
  padding: 16px;
  margin-bottom: 14px;
}

.request-banner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.request-banner strong,
.survey-success h1 {
  margin: 4px 0 0;
}

.request-banner p,
.survey-success p {
  margin: 6px 0 0;
  color: var(--muted);
}

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

.change-request-box {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  background: var(--surface);
}

.change-request-box > summary {
  cursor: pointer;
  font-weight: 800;
}

.change-request-box > :not(summary) {
  margin-top: 14px;
}

.status-control {
  display: flex;
  align-items: end;
  gap: 10px;
}

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

.task-check span {
  grid-column: 2;
  min-width: 0;
  color: var(--text);
  font-weight: 800;
}

.task-check small,
.slot-card small {
  grid-column: 2;
  min-width: 0;
  color: var(--muted);
}

.carry-box {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  border-radius: 24px;
  box-shadow: var(--inset);
  padding: 12px;
  margin-bottom: 14px;
}

.carry-box span {
  border-radius: 999px;
  background: var(--surface);
  color: var(--amber);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--shadow-small);
}

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

.bulk-box {
  display: grid;
  gap: 14px;
}

.class-form,
.settings-form,
.tag-form,
.boost-form,
.score-form {
  align-items: end;
}

.exam-tree,
.boost-grid,
.class-settings-list,
.account-list,
.student-safe-list {
  display: grid;
  gap: 12px;
}

.ai-model-cost-strip,
.ai-credit-manager,
.ai-settings-actions {
  display: grid;
  gap: 12px;
}

.ai-model-cost-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-credit-row {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  box-shadow: var(--shadow-soft);
}

.ai-model-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

.ai-model-cost-chip b,
.ai-model-cost-chip em {
  color: var(--primary);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.ai-model-cost-chip strong {
  color: var(--ink);
  font-size: 12px;
}

.ai-model-cost-chip span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.ai-model-cost-chip small,
.ai-credit-row span,
.ai-credit-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-credit-manager .section-head {
  margin: 0;
}

.ai-settings-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 42%, var(--surface));
  box-shadow: var(--shadow-soft);
}

.ai-settings-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

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

.ai-credit-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(88px, auto) minmax(150px, auto);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
}

.ai-credit-row > div:first-child {
  display: grid;
  gap: 3px;
}

.ai-credit-meter {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.ai-credit-meter b {
  color: var(--primary);
  font-size: 17px;
}

.ai-credit-grant-field {
  display: grid;
  grid-template-columns: 64px auto;
  align-items: center;
  gap: 6px;
}

.ai-credit-grant-field input {
  min-height: 34px;
  padding: 6px 9px;
  text-align: center;
}

.ai-usage-log-list,
.ai-review-list {
  display: grid;
  gap: 10px;
}

.ai-usage-log-row,
.ai-review-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  box-shadow: var(--shadow-soft);
}

.ai-usage-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
}

.ai-usage-log-row div {
  display: grid;
  gap: 2px;
}

.ai-usage-log-row strong,
.ai-review-card-head strong {
  color: var(--ink);
  font-size: 13px;
}

.ai-usage-log-row span,
.ai-usage-log-row small,
.ai-review-card-head span,
.ai-review-actions span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-usage-log-row b {
  color: var(--primary);
  font-size: 14px;
}

.ai-review-panel {
  display: grid;
  gap: 12px;
}

.ai-review-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ai-review-card-head {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.ai-review-card-head em {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ai-review-card-head em.muted {
  color: var(--muted);
  background: var(--surface-soft);
}

.ai-review-qa {
  display: grid;
  gap: 7px;
}

.ai-review-qa p {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.ai-review-qa b {
  color: var(--primary);
  font-size: 12px;
}

.ai-review-feedback {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ai-review-feedback textarea {
  min-height: 76px;
  resize: vertical;
}

.ai-review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-learning-dashboard,
.ai-learning-panel,
.ai-learning-list,
.ai-learning-body {
  display: grid;
  gap: 12px;
}

.ai-learning-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-learning-summary-grid > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--primary-soft) 44%, var(--surface));
  box-shadow: var(--shadow-soft);
}

.ai-learning-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ai-learning-summary-grid strong {
  color: var(--primary);
  font-size: 22px;
  line-height: 1;
}

.ai-learning-panel {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
  box-shadow: var(--shadow-soft);
}

.ai-learning-form {
  align-items: end;
}

.ai-learning-form textarea {
  min-height: 74px;
  resize: vertical;
}

.ai-learning-form.compact textarea {
  min-height: 58px;
}

.ai-learning-list.compact {
  gap: 8px;
}

.ai-learning-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.ai-learning-body p {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.ai-learning-body b {
  color: var(--primary);
  font-size: 12px;
}

.exam-tree {
  margin-top: 18px;
}

.exam-library-register {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
}

.exam-register-row {
  display: grid;
  align-items: end;
  gap: var(--space-2);
}

.exam-register-row.compact {
  grid-template-columns:
    82px minmax(108px, .62fr) minmax(140px, 1.05fr) 78px
    60px 132px 76px minmax(112px, .7fr);
}

.exam-register-row.compact > label,
.exam-register-row.compact :is(input, select) {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.exam-register-row.title-row {
  grid-template-columns: minmax(260px, 1fr) 150px 110px auto;
}

.exam-name-field {
  min-width: 0;
}

.exam-scope-line {
  min-width: 0;
}

.exam-library-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.exam-library-workspace.unified {
  grid-template-columns: minmax(320px, 410px) minmax(876px, 1fr);
  overflow-x: auto;
}

.exam-library-workspace.unified .exam-library-sidebar {
  position: static;
  top: auto;
  max-height: none;
}

.exam-library-sidebar {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}

.exam-library-sidebar.compact {
  padding: 12px;
}

.exam-library-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--section-gap);
  min-width: 0;
}

.exam-library-main > .panel {
  margin: 0;
}

.exam-selected-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.exam-selected-summary h2 {
  margin: 2px 0 3px;
  font-size: 18px;
  line-height: 1.25;
}

.exam-selected-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.exam-selected-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 7px;
}

.exam-selected-metrics span {
  display: grid;
  place-items: center;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.exam-selected-metrics b {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.exam-selected-metrics small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.exam-selected-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.exam-tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.exam-tool-tabs button {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 11px 13px;
  box-shadow: none;
}

.exam-tool-tabs button.active {
  border-color: color-mix(in srgb, var(--violet) 34%, var(--border));
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.exam-tool-tabs strong {
  font-size: 14px;
  font-weight: 950;
}

.exam-tool-tabs small {
  color: inherit;
  font-size: 11px;
  font-weight: 760;
  opacity: 0.82;
}

.exam-select-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 14px;
}

.exam-side-stack {
  display: grid;
  gap: 14px;
}

.exam-select-panel {
  min-width: 0;
}

.exam-filter-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 132px minmax(190px, 0.42fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.exam-library-sidebar.compact .exam-filter-grid {
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 8px;
}

.exam-library-sidebar.compact .exam-filter-grid label:nth-child(3) {
  grid-column: 1 / -1;
}

.exam-search-field {
  min-width: 0;
}

.exam-tree-wide {
  margin-top: 12px;
}

.exam-answer-mini h2 {
  margin: 4px 0;
  font-size: 17px;
}

.exam-answer-mini p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.answer-sheet-command-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 0;
}

.answer-meta-grid,
.answer-config-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.answer-meta-grid {
  grid-template-columns: 104px minmax(180px, 0.7fr) minmax(220px, 0.8fr) minmax(260px, 1fr) 160px;
}

.answer-meta-grid.compact {
  grid-template-columns:
    78px minmax(96px, .44fr) minmax(104px, .5fr) minmax(92px, .42fr)
    52px 132px 86px 104px;
  align-items: end;
}

.answer-title-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.answer-title-grid.compact {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.answer-title-grid.compact > .wide {
  grid-column: auto;
}

.answer-meta-grid.compact input,
.answer-meta-grid.compact select,
.answer-title-grid.compact input,
.answer-title-grid.compact select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.exam-filter-grid select,
.exam-register-row.compact select,
.answer-meta-grid.compact select {
  padding-left: 9px;
  padding-right: 24px;
}

.answer-config-grid {
  grid-template-columns: minmax(240px, 1fr) 104px 126px 126px 150px;
}

.answer-config-grid.compact {
  grid-template-columns: minmax(220px, .86fr) 80px 100px 100px 122px;
  align-items: end;
}

.answer-meta-grid .wide {
  min-width: 0;
}

.exam-library-register-panel .section-head {
  margin-bottom: 10px;
}

.exam-quick-create-panel {
  padding: var(--space-3);
}

.exam-quick-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.exam-quick-create-row span {
  display: grid;
  gap: 2px;
}

.exam-quick-create-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 940;
}

.exam-quick-create-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.exam-library-register.compact-create {
  padding: var(--space-2);
}

.exam-register-row.title-row.compact-title {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .64fr);
}

@media (min-width: 1500px) {
  .exam-selected-summary {
    grid-template-columns: minmax(0, 1fr) minmax(360px, auto) auto;
    align-items: center;
    gap: 14px;
  }

  .exam-selected-summary h2 {
    font-size: 22px;
  }

  .exam-selected-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 1640px) {
  .exam-library-workspace.unified {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  .exam-library-sidebar {
    position: static;
    max-height: none;
  }

  .exam-library-sidebar.compact .exam-filter-grid {
    grid-template-columns: minmax(240px, 1fr) 88px minmax(180px, .62fr);
  }

  .exam-library-sidebar.compact .exam-filter-grid label:nth-child(3) {
    grid-column: auto;
  }
}

@media (max-width: 980px) {
  .answer-meta-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .answer-title-grid.compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  }

  .answer-config-grid.compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .exam-register-row.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .exam-register-row.title-row.compact-title {
    grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  }

  .omr-answer-bulk-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .omr-answer-bulk-panel > div,
  .omr-answer-bulk-panel .primary-button {
    grid-column: span 2;
  }
}

.exam-filter-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(106px, 0.42fr);
  align-items: end;
  gap: 8px;
}

.exam-filter-toolbar label {
  min-width: 0;
}

.exam-folder-rail {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 7px;
  scrollbar-width: thin;
}

.exam-folder-rail button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.exam-folder-rail button.active {
  border-color: rgb(108 99 255 / 0.24);
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.exam-folder-management {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--ui-control-height);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
}

.exam-folder-management span,
.exam-folder-management strong,
.exam-folder-management small {
  display: block;
  min-width: 0;
}

.exam-folder-management small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.exam-folder-delete-modal {
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: var(--space-3);
}

.exam-folder-delete-modal > .section-head,
.exam-folder-delete-modal > .soft-note,
.exam-folder-delete-modal > .modal-actions {
  margin: 0;
}

.exam-folder-delete-modal > label {
  display: grid;
  gap: var(--space-1);
}

.exam-folder-delete-modal > label select {
  width: 100%;
  min-height: var(--ui-control-height);
}

.exam-folder-delete-modal > .soft-note {
  padding: var(--space-3);
}

.exam-folder-delete-modal > .modal-actions {
  padding-top: var(--space-3);
}

.tree-node small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.homework-rate-list,
.portal-need-list {
  display: grid;
  gap: 10px;
}

.homework-rate-row,
.portal-need-card {
  display: grid;
  grid-template-columns: minmax(96px, 0.35fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 9px 11px;
}

.homework-rate-row.risk {
  background: color-mix(in srgb, var(--surface) 86%, rgb(245 158 11 / 0.14));
  border-color: rgb(245 158 11 / 0.28);
}

.homework-rate-row span {
  color: var(--accent);
  font-size: 18px;
  font-weight: 900;
}

.homework-rate-row small,
.portal-need-card small {
  color: var(--muted);
  font-size: 13px;
}

.portal-need-card {
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  align-items: start;
}

.portal-need-card strong,
.portal-need-card small {
  display: block;
  margin-top: 3px;
}

@media (max-width: 720px) {
  .portal-need-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

.portal-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.portal-makeup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 14px;
}

.portal-makeup-row strong,
.portal-makeup-row small {
  display: block;
}

.portal-makeup-row small {
  margin-top: 5px;
  color: var(--muted);
}

.portal-active-clinic-panel .student-safe-list {
  gap: 7px;
}

.portal-active-clinic-panel .detail-row {
  grid-template-columns: minmax(118px, 0.48fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  min-height: 46px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  padding: 9px 11px;
  box-shadow: none;
}

.portal-active-clinic-panel .detail-row + .detail-row {
  margin-top: 0;
}

.portal-active-clinic-panel .detail-row strong,
.portal-active-clinic-panel .detail-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-active-clinic-panel .detail-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.portal-active-clinic-panel .detail-row span {
  font-size: 12px;
  font-weight: 760;
}

.portal-makeup-panel .empty-state {
  min-height: 66px;
  border-radius: 16px;
  padding: 12px;
}

.makeup-request-modal {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: var(--space-5);
}

.makeup-request-modal > * {
  min-width: 0;
}

.makeup-request-modal .brand {
  margin: 0;
}

.makeup-request-modal .survey-copy,
.makeup-request-modal label,
.makeup-request-modal .change-request-box,
.makeup-request-modal .survey-success {
  margin: 0;
}

.makeup-request-modal .soft-note {
  margin: 0;
  padding: 11px 12px;
}

.makeup-request-modal .primary-button.wide,
.makeup-request-modal .ghost-button.wide {
  margin-top: 0;
}

.makeup-request-grid {
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solapi-sync-callout {
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 14px;
}

.solapi-sync-callout small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.tree-folder,
.boost-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.tree-folder.compact {
  border-radius: 14px;
  box-shadow: none;
}

.tree-folder > summary,
.boost-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
}

.tree-folder.compact > summary {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 920;
}

.tree-folder > summary::-webkit-details-marker,
.boost-card > summary::-webkit-details-marker,
.video-card > summary::-webkit-details-marker {
  display: none;
}

.tree-folder > summary span,
.boost-card small {
  color: var(--muted);
  font-size: 13px;
}

.tree-node-list,
.boost-attendance {
  display: grid;
  gap: 8px;
  margin: 0 14px 14px;
}

.tree-folder.compact .tree-node-list {
  gap: 6px;
  margin: 0 8px 8px;
}

.tree-node-group {
  display: grid;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
  padding: 9px;
}

.tree-folder.compact .tree-node-group {
  gap: 5px;
  border-radius: 12px;
  padding: 6px;
}

.tree-node-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 3px 4px;
}

.tree-folder.compact .tree-node-group-head {
  padding: 0 2px 2px;
}

.tree-node-group-head strong {
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.tree-folder.compact .tree-node-group-head strong {
  font-size: 11.5px;
}

.tree-node-group-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.tree-folder.compact .tree-node-group-head span {
  font-size: 10.5px;
}

.tree-node,
.boost-student-row,
.class-settings-row,
.class-manage-row,
.account-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.exam-library-sidebar .tree-node {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.exam-library-sidebar.compact .tree-node {
  gap: 4px;
  border-radius: 12px;
  padding: 7px 8px;
}

.exam-library-sidebar .tree-node-actions {
  justify-content: flex-start;
}

.tree-node-main {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.tree-node-main strong,
.tree-node-main span,
.tree-node-main small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-library-sidebar.compact .tree-node-main {
  gap: 2px;
}

.exam-library-sidebar.compact .tree-node-main strong {
  font-size: 12px;
  font-weight: 900;
}

.exam-library-sidebar.compact .tree-node-main span,
.exam-library-sidebar.compact .tree-node-main small {
  font-size: 10.5px;
}

.tree-node.selected {
  border-color: color-mix(in srgb, var(--violet) 34%, var(--border));
  background: color-mix(in srgb, var(--violet) 8%, var(--surface));
}

.editable-class-list {
  margin-top: 14px;
}

.previous-class-archive {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.previous-class-archive > summary {
  min-height: 42px;
  padding: 8px 2px;
}

.previous-class-archive > summary span,
.previous-class-term-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.previous-class-archive > summary small,
.previous-class-term-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.previous-class-groups {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.previous-class-groups section {
  display: grid;
  gap: 8px;
}

.archived-class-row {
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.class-manage-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.row-actions,
.tree-node-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.compact-actions {
  gap: 6px;
}

.tree-node strong,
.tree-node span,
.class-settings-row strong,
.class-settings-row span,
.class-manage-row strong,
.class-manage-row span,
.account-row strong,
.account-row span {
  display: block;
}

.tree-node span,
.class-settings-row span,
.class-manage-row span,
.account-row span {
  color: var(--muted);
  font-size: 13px;
}

.tree-node {
  grid-template-columns: minmax(0, 1fr) auto;
}

.tree-node.selected {
  background: #f5f3ff;
}

.tree-node.selected strong {
  color: var(--violet);
}

.tree-node label,
.boost-student-row label,
.class-settings-row label,
.account-row label {
  min-width: 170px;
}

.account-password-field {
  display: grid;
  gap: 6px;
  min-width: min(280px, 44vw);
}

.account-row > div:first-child {
  min-width: 220px;
}

.account-row > div:first-child > span {
  white-space: nowrap;
}

.account-password-field > label {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.account-password-control {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.account-password-control input {
  min-width: 0;
}

.account-portal-open-button {
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.account-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 14px 24px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 10px;
}

.account-filter-toolbar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.account-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ui-control-height);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  padding: 0 13px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}

.account-status-badge {
  display: inline-flex !important;
  margin-left: 5px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px !important;
  line-height: 1;
  vertical-align: middle;
}

.account-status-badge.active {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
}

.account-status-badge.withdrawn {
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

@media (max-width: 720px) {
  .account-filter-toolbar {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 14px;
  }

  .account-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-row > div:first-child,
  .account-password-field {
    min-width: 0;
    width: 100%;
  }

  .account-row > div:first-child > span {
    white-space: normal;
  }
}

.exam-analysis-panel {
  display: grid;
  gap: 16px;
}

.exam-edit-form {
  align-items: end;
}

.exam-action-bar {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.exam-action-bar label {
  min-width: 118px;
}

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

.exam-stat-grid div {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 14px;
}

.exam-stat-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.exam-stat-grid strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.table-sort {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}

.table-sort.need-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}

.table-sort.need-sort.active {
  color: var(--accent);
}

.need-week-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.need-week-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.need-week-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.need-week-chip.pending {
  border-color: rgb(244 114 182 / 0.28);
  background: rgb(244 114 182 / 0.08);
}

.need-week-chip.pending small {
  color: #be185d;
}

.need-week-chip.done {
  border-color: rgb(16 185 129 / 0.24);
  background: rgb(16 185 129 / 0.08);
}

.need-week-chip.done small {
  color: #047857;
}

.score-good {
  color: var(--green);
  font-weight: 900;
}

.billboard-modal {
  width: min(1080px, 100%);
}

.billboard-modal > .section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.billboard-modal > .section-head .ghost-button {
  width: auto;
  min-width: 64px;
  justify-self: end;
}

.billboard-modal-controls {
  margin: 18px 0;
}

.billboard-compact-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.72fr) minmax(110px, 0.72fr) minmax(128px, 0.88fr);
  align-items: end;
  gap: 10px;
}

.billboard-compact-row label {
  min-width: 0;
}

.billboard-tag-editor {
  display: grid;
  gap: 8px;
}

.billboard-tag-editor > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.billboard-tag-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.billboard-preview-shell {
  max-height: min(68vh, 900px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: #f5f7fb;
  padding: 16px;
}

.billboard-sheet {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  width: min(100%, 297mm);
  min-height: auto;
  aspect-ratio: 297 / 420;
  overflow: hidden;
  border: 1px solid #e5e7f3;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgb(108 99 255 / 0.08), rgb(255 255 255 / 0) 30%),
    #ffffff;
  padding: 8mm;
  box-shadow: 0 18px 48px rgb(31 41 55 / 0.09);
}

.billboard-ribbon {
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  background: linear-gradient(90deg, #6c63ff, #38b2ac);
}

.billboard-cover {
  display: grid;
  gap: 8px;
  padding: 7mm 2mm 2mm;
  text-align: center;
}

.billboard-brand-row,
.billboard-meta-row,
.billboard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #667085;
  font-size: 12px;
  font-weight: 800;
}

.billboard-brand {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 999px;
  background: #eef2ff;
  color: #5b55db;
  padding: 7px 13px;
}

.billboard-date {
  border-radius: 999px;
  background: #f1f5f9;
  padding: 7px 13px;
}

.billboard-title-block p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11pt;
  font-weight: 800;
}

.billboard-title-block h1,
.billboard-title-block h2 {
  margin: 0;
  color: #182033;
  line-height: 1.04;
}

.billboard-title-block h1 {
  font-size: clamp(23pt, 3.1vw, 31pt);
  font-weight: 900;
}

.billboard-title-block h2 {
  margin-top: 2px;
  color: var(--violet);
  font-size: clamp(28pt, 3.8vw, 39pt);
  font-weight: 900;
}

.billboard-meta-row {
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 3px;
}

.billboard-meta-row span {
  border: 1px solid #e6e8f3;
  border-radius: 999px;
  background: #ffffff;
  padding: 6px 10px;
}

.billboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.billboard-stats-grid div {
  min-height: 17mm;
  border: 1px solid #e6e8f3;
  border-radius: 20px;
  background: #fbfcff;
  padding: 3mm 4mm;
}

.billboard-stats-grid span {
  display: block;
  color: #7a8294;
  font-size: 10pt;
  font-weight: 900;
}

.billboard-stats-grid strong {
  display: block;
  margin-top: 3px;
  color: #172033;
  font-size: 15pt;
  font-weight: 900;
}

.billboard-table-card {
  align-self: start;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e4e7f0;
  border-radius: 24px;
  background: #ffffff;
}

.billboard-rank-table {
  width: 100%;
  height: auto;
  border-collapse: collapse;
  table-layout: fixed;
}

.billboard-col-rank {
  width: 16%;
}

.billboard-col-name {
  width: 22%;
}

.billboard-col-school {
  width: 22%;
}

.billboard-col-class {
  width: 25%;
}

.billboard-col-score {
  width: 15%;
}

.billboard-rank-table th {
  background: #f4f6fb;
  color: #4b5568;
  height: 7.6mm;
  padding: 1.4mm 2.4mm;
  border-bottom: 1px solid #e4e7f0;
  font-size: 9.6pt;
  font-weight: 850;
  text-transform: uppercase;
}

.billboard-rank-table td {
  height: var(--billboard-row-height, 10mm);
  border-bottom: 1px solid #edf0f6;
  padding: var(--billboard-cell-padding, 1.4mm) 2.4mm;
  text-align: center;
  font-size: var(--billboard-row-font, 13pt);
  font-weight: 700;
  line-height: 1.18;
  word-break: keep-all;
}

.billboard-rank-table td strong {
  color: #141c2f;
  font-weight: 850;
}

.billboard-rank-table td.billboard-school-cell,
.billboard-rank-table td.billboard-class-cell {
  color: #526173;
  font-size: calc(var(--billboard-row-font, 13pt) - 1pt);
  font-weight: 500;
}

.billboard-rank-table td.billboard-score-cell {
  font-weight: 850;
}

.billboard-rank-table tbody tr:nth-child(even) td {
  background: #fbfcff;
}

.billboard-rank-table tbody tr.top-rank td {
  background: #f7f4ff;
}

.rank-badge,
.score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  padding: 1mm 2.2mm;
  font-size: var(--billboard-badge-font, 12pt);
  font-weight: 850;
}

.rank-badge.top {
  background: var(--primary-gradient);
  color: #ffffff;
}

.score-pill {
  background: #ecfdf5;
  color: #0f766e;
  font-weight: 850;
}

.billboard-footer {
  position: static;
  margin-top: 2px;
  padding: 0 2mm;
  font-size: 12pt;
}

.billboard-footer strong {
  color: var(--violet);
}

.billboard-sheet.mono {
  background: #ffffff;
}

.billboard-sheet.mono .billboard-ribbon {
  background: #111827;
}

.billboard-sheet.mono .billboard-brand,
.billboard-sheet.mono .billboard-date,
.billboard-sheet.mono .billboard-meta-row span,
.billboard-sheet.mono .billboard-stats-grid div,
.billboard-sheet.mono .rank-badge,
.billboard-sheet.mono .score-pill {
  border-color: #d1d5db;
  background: #f8fafc;
  color: #111827;
}

.billboard-sheet.mono .billboard-title-block h2,
.billboard-sheet.mono .billboard-footer strong {
  color: #111827;
}

.billboard-sheet.mono .billboard-rank-table td.billboard-school-cell,
.billboard-sheet.mono .billboard-rank-table td.billboard-class-cell {
  color: #374151;
}

.billboard-sheet.mono .billboard-rank-table th,
.billboard-sheet.mono .billboard-rank-table tbody tr:nth-child(even) td,
.billboard-sheet.mono .billboard-rank-table tbody tr.top-rank td {
  background: #f3f4f6;
}

.billboard-sheet.mono .rank-badge.top {
  background: #111827;
  color: #ffffff;
}

.boost-student-row {
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1fr) 150px;
}

.logo-upload-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-column: 1 / -1;
  align-items: end;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 12px;
}

.logo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-preview span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.messages-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.message-console {
  display: grid;
  gap: 18px;
  padding: 0;
  overflow: hidden;
}

.message-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgb(108 99 255 / 0.08), rgb(56 178 172 / 0.06)),
    var(--surface);
  padding: 20px 22px;
}

.message-console-head h2,
.message-console-head p,
.pane-head h3 {
  margin: 4px 0 0;
}

.message-console-head p {
  color: var(--muted);
}

.message-channel-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  margin: 0 18px;
  padding: 8px;
}

.message-channel-tabs button {
  display: grid;
  gap: 3px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  font-weight: 900;
  box-shadow: none;
}

.message-channel-tabs button span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.message-channel-tabs button.active {
  border-color: rgb(108 99 255 / 0.24);
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-small);
}

.message-prep-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.message-prep-controls {
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) minmax(220px, 1fr) minmax(260px, 0.82fr);
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.message-prep-bar .message-channel-tabs,
.message-prep-bar .recipient-target-options {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.message-prep-status {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: center;
  justify-content: end;
  gap: 7px;
  min-width: min(100%, 360px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 8px;
}

.message-prep-status > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.message-prep-status > span.ready {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
}

.message-prep-status > span.warning {
  background: color-mix(in srgb, var(--amber) 16%, var(--surface));
  color: var(--amber);
}

.message-prep-status small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.message-preview-button {
  justify-self: end;
}

.message-console-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.85fr) minmax(220px, 1fr);
  gap: 10px;
  padding: 0 18px;
}

.recipient-target-options {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100% - 36px, 292px);
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  margin: -6px 18px 0;
  padding: 4px;
}

.recipient-target-options label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.recipient-target-options label.active {
  border-color: color-mix(in srgb, var(--accent) 74%, var(--surface));
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 10px 22px rgb(108 99 255 / 0.22);
  color: #fff;
}

.recipient-target-options span {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.recipient-target-options label.active span {
  color: #fff;
}

.recipient-target-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.recipient-target-options small {
  display: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.message-console-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 1.22fr);
  gap: 12px;
  padding: 0 18px 18px;
}

.message-console-pane {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 500px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 18px;
}

.message-console-pane:last-child {
  border-right: 1px solid var(--border);
}

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

.recipient-pane {
  gap: 12px;
}

.recipient-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(140px, 0.72fr) minmax(190px, 1fr);
  gap: 8px;
  align-items: end;
}

.recipient-filter-toolbar + .recipient-summary,
.recipient-summary + .recipient-list-tools,
.recipient-list-tools + .message-recipient-list,
.message-recipient-list + .message-support-grid {
  margin-top: 2px;
}

.recipient-summary,
.template-meta-row,
.message-send-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.recipient-summary strong {
  color: var(--accent);
  font-size: 22px;
  font-weight: 900;
}

.recipient-summary span,
.template-meta-row span,
.template-meta-row strong,
.message-send-summary span,
.message-send-summary strong {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.composer-pane textarea {
  min-height: 280px;
  line-height: 1.55;
}

.composer-pane textarea[readonly] {
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  color: var(--text);
  cursor: default;
}

.message-template-alert {
  display: grid;
  gap: 4px;
  border: 1px solid rgb(108 99 255 / 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  padding: 12px;
}

.message-template-alert.compact {
  border-color: var(--border);
  background: var(--surface-soft);
  padding: 10px 12px;
}

.message-template-alert strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.message-template-alert span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.alimtalk-structure-card,
.alimtalk-preview-parts {
  display: grid;
  gap: 8px;
  border: 1px solid rgb(108 99 255 / 0.16);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
  padding: 12px;
}

.alimtalk-structure-row,
.alimtalk-highlight-preview,
.alimtalk-item-preview div {
  display: grid;
  gap: 3px;
}

.alimtalk-structure-row span,
.alimtalk-highlight-preview span,
.alimtalk-item-preview span,
.alimtalk-button-preview span,
.alimtalk-preview-parts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-all;
}

.alimtalk-structure-row strong,
.alimtalk-highlight-preview strong,
.alimtalk-item-preview strong,
.alimtalk-preview-parts strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.alimtalk-highlight-preview small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.alimtalk-item-preview,
.alimtalk-button-preview {
  display: grid;
  gap: 6px;
}

.alimtalk-button-preview span,
.alimtalk-preview-parts span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 6px 9px;
}

.variable-panel {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 0;
  overflow: hidden;
}

.variable-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.variable-panel > summary::-webkit-details-marker {
  display: none;
}

.variable-panel > summary span,
.variable-panel > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.variable-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 12px;
}

.variable-chip {
  min-height: 30px;
  border: 1px solid rgb(108 99 255 / 0.2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.phone-preview {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 12%, var(--surface)), var(--surface));
  padding: 14px;
}

.phone-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgb(37 99 235 / 0.14);
  padding-bottom: 10px;
}

.phone-preview-top span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
  color: var(--blue);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.phone-preview pre {
  min-height: 290px;
  margin: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  white-space: pre-wrap;
  padding: 16px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.6;
  box-shadow: var(--shadow-small);
}

.message-primary-actions,
.sms-template-save {
  display: grid;
  gap: 10px;
}

.sms-template-save {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  padding: 0 12px 12px;
}

.sms-template-save-panel .sms-template-save {
  margin: 0;
}

.message-review-section {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.message-review-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 0;
}

.message-review-head h3,
.message-review-head p {
  margin: 4px 0 0;
}

.message-review-head p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  text-wrap: balance;
  word-break: keep-all;
}

.message-review-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(260px, 1.08fr) minmax(260px, 1fr);
  gap: 12px;
  align-items: start;
}

.message-review-grid > .message-variable-mapper,
.message-review-grid > .message-data-sheet,
.message-review-grid > .message-history-panel {
  margin: 0;
}

.message-review-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.message-review-card {
  display: grid;
  gap: 4px;
  min-height: 86px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-soft), color-mix(in srgb, var(--accent) 4%, var(--surface)));
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
  box-shadow: none;
}

.message-review-card:hover {
  border-color: rgb(108 99 255 / 0.28);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgb(108 99 255 / 0.1);
}

.message-review-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.message-review-card strong {
  font-size: 15px;
  font-weight: 950;
  word-break: keep-all;
}

.message-review-card small,
.message-review-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.message-review-card em {
  line-height: 1.45;
  word-break: keep-all;
}

.message-advanced-strip {
  margin: 0 18px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  padding: 12px;
}

.message-advanced-strip .message-review-head {
  border-top: 0;
}

.message-advanced-strip .message-review-head h3 {
  font-size: 16px;
}

.message-advanced-actions {
  align-items: stretch;
}

.message-advanced-actions .message-review-card {
  min-height: 78px;
  background: var(--surface);
}

.message-advanced-actions .message-review-card em {
  display: none;
}

.message-review-modal {
  width: min(1120px, calc(100vw - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(860px, calc(100vh - 36px));
  overflow: hidden;
}

.message-review-modal-wide {
  width: min(1320px, calc(100vw - 28px));
}

.message-review-modal-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.message-review-modal .message-variable-mapper,
.message-review-modal .message-data-sheet,
.message-review-modal .message-history-panel {
  margin: 0;
}

.message-review-modal .message-variable-mapper > summary,
.message-review-modal .message-data-sheet > summary,
.message-review-modal .message-history-panel > summary {
  cursor: default;
}

.message-review-modal .message-history-grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

.message-review-modal-variables .message-review-modal-body {
  overflow: hidden;
}

.message-review-modal-variables .message-variable-mapper {
  min-height: 0;
}

.message-review-modal-variables .variable-map-list {
  max-height: min(56vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 10px;
}

@media (max-width: 920px) {
  .message-review-card-grid,
  .message-review-modal .message-history-grid {
    grid-template-columns: 1fr;
  }
}

.message-support-card {
  display: grid;
  gap: 0;
  align-self: start;
  padding: 0;
  overflow: hidden;
}

.message-support-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

.message-support-card > summary::-webkit-details-marker {
  display: none;
}

.message-support-card > summary::after {
  content: "열기";
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: var(--inset-small);
  white-space: nowrap;
}

.message-support-card[open] > summary::after {
  content: "접기";
}

.message-support-card > summary span,
.message-support-card > summary strong,
.message-support-card > summary small {
  display: block;
}

.message-support-card > summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  word-break: keep-all;
}

.message-support-card > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message-support-body {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding: 10px;
}

.message-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  align-items: start;
}

.message-support-grid .message-support-card {
  min-height: 60px;
}

.message-action-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.message-data-sheet {
  margin: 0 18px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.message-data-sheet > summary {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.message-data-sheet > summary::-webkit-details-marker {
  display: none;
}

.message-data-sheet > summary strong,
.message-data-sheet > summary small {
  display: block;
}

.message-data-sheet > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.message-data-sheet > :not(summary) {
  margin: 0 14px 14px;
}

.message-detail-panel {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.message-detail-panel > summary {
  gap: 12px;
  min-height: 46px;
  padding: 9px 12px;
}

.message-detail-panel > summary > span {
  min-width: 0;
}

.message-detail-panel > summary strong,
.message-detail-panel > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-detail-panel > summary strong {
  line-height: 1.2;
  white-space: nowrap;
}

.message-detail-panel > summary small {
  line-height: 1.35;
}

.message-detail-panel[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.message-detail-panel[open] > :not(summary) {
  margin-top: 0;
}

.message-data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message-data-toolbar .ghost-button {
  flex: 0 0 auto;
}

.message-data-table-wrap {
  overflow: auto;
  max-height: min(62vh, 640px);
  border-radius: 18px;
}

.message-data-table {
  width: max(100%, var(--message-data-table-width, 920px));
  min-width: 100%;
  table-layout: fixed;
}

.message-data-table th,
.message-data-table td {
  overflow: hidden;
}

.message-data-table th {
  position: relative;
  padding-right: 14px;
}

.message-data-head-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-column-resizer {
  position: absolute;
  inset: 0 -4px 0 auto;
  width: 9px;
  cursor: col-resize;
  touch-action: none;
  z-index: 3;
}

.message-column-resizer::after {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 4px;
  width: 1px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.message-column-resizer:hover::after,
.message-data-table.is-resizing .message-column-resizer::after {
  background: color-mix(in srgb, var(--accent) 55%, var(--border));
}

body.message-column-resizing {
  cursor: col-resize;
  user-select: none;
}

.message-data-table th:first-child,
.message-data-table td.message-data-sticky-cell {
  position: sticky;
  left: 0;
  z-index: 2;
}

.message-data-table th:first-child {
  z-index: 4;
  background: var(--surface-soft);
}

.message-data-table td.message-data-sticky-cell {
  background: var(--surface);
  font-weight: 900;
}

.sheet-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  padding: 7px 8px;
  font-size: 12px;
}

.sheet-input:focus {
  border-color: rgb(108 99 255 / 0.35);
  outline: 2px solid rgb(108 99 255 / 0.18);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.message-preview-modal {
  width: min(1200px, calc(100vw - 36px));
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background: var(--surface);
  box-shadow: var(--shadow-hover);
}

.message-preview-modal > .section-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.message-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.message-preview-stats div {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 12px;
}

.message-preview-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.message-preview-stats strong {
  font-size: 20px;
}

.message-preview-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.message-preview-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 12px;
}

.message-preview-item.warning {
  border-color: rgb(245 158 11 / 0.35);
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
}

.message-preview-recipient {
  display: grid;
  gap: 5px;
  align-content: start;
}

.message-preview-recipient span {
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.message-preview-recipient small {
  color: var(--muted);
  font-size: 12px;
}

.message-preview-item pre {
  overflow: auto;
  min-height: 120px;
  margin: 0;
  border-radius: 14px;
  background: var(--surface-soft);
  white-space: pre-wrap;
  padding: 11px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

.message-preview-modal .modal-actions > button {
  min-width: 116px;
}

.message-send-button {
  display: inline-flex;
  gap: 8px;
}

.message-send-button .button-spinner {
  display: none;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid rgb(255 255 255 / 0.42);
  border-top-color: #ffffff;
  border-radius: 50%;
}

.message-send-button.is-loading .button-spinner {
  display: inline-block;
  animation: message-button-spin 720ms linear infinite;
}

.message-send-button.is-loading,
.message-send-button.is-loading:disabled {
  opacity: 1;
  cursor: wait;
  background: var(--primary-gradient);
  color: #ffffff;
}

@keyframes message-button-spin {
  to { transform: rotate(360deg); }
}

.message-history-panel {
  margin: 0 18px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.message-history-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
}

.message-history-panel > summary::-webkit-details-marker {
  display: none;
}

.message-history-panel > summary strong,
.message-history-panel > summary small {
  display: block;
}

.message-history-panel > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.message-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 12px;
  max-height: min(68vh, 720px);
  overflow: auto;
}

.history-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}

.history-filter-toolbar .filter-chip {
  align-items: center;
  justify-content: center;
  padding-block: 7px;
  line-height: 1;
}

.message-history-grid .table-section-head {
  margin-bottom: 12px;
}

.message-history-grid .empty-state,
.message-history-grid .history-list,
.message-history-grid .table-wrap {
  margin-top: 0;
}

.history-list {
  display: grid;
  gap: 7px;
  max-height: 360px;
  overflow: auto;
}

.history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 9px 10px;
}

.history-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-row small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-badge {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 900;
}

.history-badge.sms {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
}

.history-badge.failed,
.history-status.failed {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  color: var(--red);
}

.history-status {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  padding: 4px 7px;
  color: var(--amber);
  font-size: 11px;
  font-weight: 900;
}

.history-status.success {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.solapi-history-table td > small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.history-load-more {
  width: 100%;
  margin-top: 10px;
}

.solapi-history-table {
  width: 100%;
  min-width: 620px;
  table-layout: fixed;
}

.solapi-history-table th:nth-child(1) { width: 23%; }
.solapi-history-table th:nth-child(2) { width: 22%; }
.solapi-history-table th:nth-child(3) { width: 10%; }
.solapi-history-table th:nth-child(4) { width: 13%; }

.solapi-history-table td:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.message-status-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-soft);
  padding: 15px;
}

.message-status-card strong,
.message-status-card span {
  display: block;
}

.message-status-card span {
  color: var(--muted);
  font-size: 13px;
}

.message-status-card.ready {
  border-color: rgb(22 163 74 / 0.24);
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.message-status-card.warning {
  border-color: rgb(245 158 11 / 0.28);
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
}

.message-preview {
  display: grid;
  gap: 10px;
  min-height: 220px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface)));
  padding: 16px;
}

.message-preview pre {
  overflow: auto;
  min-height: 122px;
  margin: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  white-space: pre-wrap;
  padding: 12px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}

.message-preview small {
  color: var(--muted);
  font-weight: 800;
}

.message-workspace {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.message-recipient-list,
.message-template-editor {
  display: grid;
  gap: 8px;
}

.message-recipient-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.recipient-list-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 6px 8px;
}

.recipient-list-tools span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.recipient-list-tools .ghost-button.active {
  border-color: rgb(108 99 255 / 0.34);
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.message-recipient-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
  padding: 9px 11px;
}

.message-recipient-row input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  justify-self: center;
}

.message-recipient-row strong,
.message-recipient-row small {
  display: block;
}

.message-recipient-row small {
  color: var(--muted);
  font-size: 12px;
}

.manual-recipient-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 13px;
}

.manual-recipient-card.message-support-card {
  gap: 0;
  padding: 0;
  background: var(--surface-soft);
}

.manual-recipient-card .pane-head h3 {
  font-size: 15px;
}

.manual-recipient-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: end;
}

.message-support-grid .manual-recipient-form .primary-button {
  width: 100%;
}

.message-mini-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.excel-recipient-card,
.manual-recipient-card.message-support-card.excel-recipient-card {
  background: var(--surface-soft);
}

.compact-file-drop {
  min-height: 62px;
  border-radius: 16px;
  padding: 12px;
}

.file-drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px dashed rgb(108 99 255 / 0.32);
  background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--accent) 7%, var(--surface)));
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.file-drop:hover {
  border-color: rgb(108 99 255 / 0.6);
  box-shadow: 0 10px 22px rgb(108 99 255 / 0.1);
  transform: translateY(-1px);
}

.file-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-drop span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 900;
}

.file-drop small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.excel-recipient-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.message-variable-mapper {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  overflow: hidden;
}

.message-variable-mapper > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.message-variable-mapper > summary::-webkit-details-marker {
  display: none;
}

.message-variable-mapper > summary strong,
.message-variable-mapper > summary small {
  display: block;
}

.message-variable-mapper > summary small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.variable-map-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.variable-map-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.7fr) minmax(120px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(160px, 1fr);
  gap: 8px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 9px;
}

.variable-token {
  align-self: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 7px 9px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.muted-control {
  opacity: 0.52;
}

.manual-recipient-list {
  display: grid;
  gap: 6px;
}

.manual-recipient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.manual-recipient-row strong,
.manual-recipient-row small {
  display: block;
}

.manual-recipient-row small,
.empty-inline {
  color: var(--muted);
  font-size: 12px;
}

.empty-inline {
  margin: 0;
  border-radius: 14px;
  background: var(--surface);
  padding: 10px;
  font-weight: 800;
}

.message-template-editor textarea {
  min-height: 220px;
}

.message-template-editor.read-only pre {
  overflow: auto;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  white-space: pre-wrap;
  padding: 12px;
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}

.message-template-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.message-template-summary span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.solapi-settings-form {
  align-items: end;
}

.solapi-template-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.solapi-template-row {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.solapi-template-row > summary {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.solapi-template-row > summary::-webkit-details-marker {
  display: none;
}

.solapi-template-row > summary span,
.solapi-template-row > summary strong,
.solapi-template-row > summary small {
  display: block;
}

.solapi-template-row > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.solapi-template-row .message-template-editor {
  margin: 0 14px 14px;
}

.settings-accordion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(66px, auto);
  gap: 16px 18px;
  align-content: start;
  align-items: start;
  padding: 0;
}

.settings-accordion-grid.ai-management-view {
  margin-top: var(--space-3);
}

.settings-accordion-card {
  width: 100%;
  margin: 0;
  align-self: start;
  box-sizing: border-box;
  justify-self: stretch;
}

.settings-accordion-grid > .settings-accordion-card {
  margin: 0;
}

.settings-accordion-card:not([open]) {
  height: 66px;
  min-height: 66px;
  overflow: hidden;
}

.settings-accordion-card > summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px 18px;
}

.settings-accordion-card:not([open]) > summary {
  height: 64px;
  min-height: 0;
  padding-block: 0;
}

.settings-accordion-card > summary > span {
  min-width: 0;
}

.settings-accordion-card > .settings-section-copy,
.settings-accordion-card > .settings-section-inline,
.settings-accordion-card > .form-grid,
.settings-accordion-card > .tag-list,
.settings-accordion-card > .class-settings-list,
.settings-accordion-card > .account-list,
  .settings-accordion-card > .soft-note,
  .settings-accordion-card > .ai-model-cost-strip,
  .settings-accordion-card > .ai-settings-actions,
  .settings-accordion-card > .ai-credit-manager,
.settings-accordion-card > .ai-usage-log-list,
.settings-accordion-card > .ai-review-panel,
.settings-accordion-card > .solapi-template-list {
  margin-left: 24px;
  margin-right: 24px;
}

.settings-section-copy {
  margin-top: 10px;
  color: var(--muted);
}

.settings-section-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.term-form {
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)) auto;
}

.term-list {
  display: grid;
  gap: 8px;
  margin: 0 24px 18px;
}

.term-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.term-row.active {
  border-color: rgb(108 99 255 / 0.32);
  background: #f7f5ff;
}

.term-row strong,
.term-row span {
  display: block;
}

.term-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.term-transfer-modal {
  width: min(760px, calc(100vw - 32px));
}

.term-transfer-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.term-transfer-summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface-soft);
}

.term-transfer-summary b {
  color: var(--muted);
  font-size: 11px;
}

.term-transfer-summary strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-transfer-controls {
  margin-bottom: 10px;
}

.term-transfer-controls p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.term-transfer-student-list {
  display: grid;
  gap: 6px;
  max-height: min(42vh, 380px);
  margin-bottom: 12px;
  overflow-y: auto;
}

.term-transfer-student-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface);
}

.term-transfer-student-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.term-transfer-student-row span,
.term-transfer-student-row strong,
.term-transfer-student-row small {
  display: block;
  min-width: 0;
}

.term-transfer-student-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .term-transfer-summary {
    grid-template-columns: 1fr;
  }

  .term-transfer-controls {
    align-items: stretch;
  }
}

.current-term-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(108 99 255 / 0.18);
  border-radius: 18px;
  background: #f8f7ff;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.current-term-strip small {
  color: var(--muted);
  font-weight: 700;
}

.previous-term-history {
  margin-top: 14px;
}

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

.previous-term-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 12px;
}

.previous-term-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.daily-clinic-panel {
  margin-top: 18px;
}

.calendar-ops-panel {
  display: grid;
  gap: 14px;
}

.calendar-mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.calendar-mode-tabs {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 4px;
}

.calendar-mode-tabs button {
  min-width: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 7px 12px;
  color: var(--muted);
  font-weight: 900;
}

.calendar-mode-tabs button.active {
  background: var(--primary-gradient);
  color: #ffffff;
}

.calendar-mode-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

.calendar-layout.mode-day {
  grid-template-columns: minmax(0, 0.95fr) 340px;
}

.ops-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.ops-calendar-grid.mode-day {
  grid-template-columns: minmax(0, 1fr);
}

.ops-calendar-grid.mode-week .calendar-date-cell {
  min-height: 168px;
}

.ops-calendar-grid.mode-day .calendar-date-cell {
  min-height: 360px;
}

.calendar-weekday {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  padding: 6px 0;
}

.calendar-date-cell {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 96px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 9px;
  text-align: left;
}

.calendar-date-cell strong {
  font-size: 14px;
}

.calendar-date-cell span {
  width: fit-content;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
}

.calendar-date-cell.muted {
  opacity: 0.45;
}

.calendar-date-cell.today {
  border-color: rgb(56 178 172 / 0.45);
}

.calendar-date-cell.selected {
  border-color: rgb(108 99 255 / 0.55);
  box-shadow: 0 0 0 3px rgb(108 99 255 / 0.12);
}

.calendar-detail-panel {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 14px;
}

.calendar-detail-section {
  display: grid;
  gap: 8px;
}

.calendar-detail-list {
  display: grid;
  gap: 6px;
}

.calendar-detail-row {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 9px 10px;
  text-align: left;
}

.calendar-detail-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ui-lab-hero {
  overflow: hidden;
}

.ui-lab-meter {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 140px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(108 99 255 / 0.11), rgb(56 178 172 / 0.1));
  padding: 12px 14px;
  color: var(--text);
}

.ui-lab-meter strong {
  font-size: 24px;
  line-height: 1;
}

.ui-lab-meter span,
.ui-lab-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.ui-lab-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ui-lab-stats span {
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 6px 10px;
}

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

.ui-draft-card {
  display: grid;
  align-content: start;
  gap: 13px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.ui-draft-card.clean {
  background: #ffffff;
}

.ui-draft-card.midnight {
  background: linear-gradient(180deg, #0f172a, #172033);
  color: #e5e7eb;
  border-color: #263449;
}

.ui-draft-card.violet {
  background: linear-gradient(135deg, #ffffff, #f5f3ff);
  border-color: rgb(108 99 255 / 0.18);
}

html[data-theme="dark"] .ui-draft-card.clean,
html[data-theme="dark"] .ui-draft-card.violet {
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  border-color: var(--border);
}

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

.ui-draft-head span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--accent);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 950;
}

.ui-draft-head strong {
  font-size: 18px;
}

.ui-draft-card p,
.ui-draft-card small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.ui-draft-card.midnight p,
.ui-draft-card.midnight small {
  color: #aebbd0;
}

.ui-draft-card.midnight .ui-draft-head span,
.ui-draft-card.midnight .ui-draft-tags span,
.ui-draft-card.midnight .ui-draft-score-grid span {
  background: rgb(139 132 255 / 0.14);
  color: #c4b5fd;
}

.ui-draft-palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.ui-draft-palette i {
  display: block;
  min-height: 28px;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}

html[data-theme="dark"] .ui-draft-palette i {
  border-color: rgb(226 232 240 / 0.2);
  box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.34);
}

.ui-draft-preview {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  padding: 12px;
}

.draft-tone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  border-radius: 12px;
  background: #f8fafc;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
}

.draft-tone-top b {
  border-radius: 999px;
  background: #eef2ff;
  color: var(--accent);
  padding: 3px 7px;
}

.ui-draft-card.midnight .ui-draft-preview {
  border-color: #263449;
  background: linear-gradient(180deg, #111827, #0f172a);
}

.ui-draft-card.violet .ui-draft-preview {
  background: linear-gradient(135deg, #ffffff, #f6f3ff);
}

html[data-theme="dark"] .ui-draft-card.clean .ui-draft-preview,
html[data-theme="dark"] .ui-draft-card.violet .ui-draft-preview {
  background: linear-gradient(180deg, #111827, #0f172a);
}

html[data-theme="dark"] .draft-tone-top {
  background: #101827;
}

html[data-theme="dark"] .draft-tone-top b,
html[data-theme="dark"] .draft-calendar-grid small {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

html[data-theme="dark"] .draft-command-actions i {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

.draft-ledger-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 900;
}

.draft-ledger-row:last-child {
  border-bottom: 0;
}

.draft-ledger-row em {
  color: var(--muted);
  font-style: normal;
}

.draft-ledger-row b {
  border-radius: 999px;
  background: rgb(108 99 255 / 0.1);
  color: var(--accent);
  padding: 4px 7px;
}

.draft-ledger-row.active {
  color: var(--accent);
}

.draft-tone-actions,
.draft-violet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.draft-tone-actions span,
.draft-tone-actions strong,
.draft-violet-actions span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 950;
}

.draft-tone-actions span {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
}

.draft-tone-actions strong,
.draft-violet-actions span {
  background: var(--primary-gradient);
  color: #ffffff;
}

.draft-violet-actions span:nth-child(2) {
  background: linear-gradient(135deg, var(--accent-secondary), #22c55e);
}

.draft-violet-actions span:nth-child(3) {
  background: var(--primary-gradient);
}

.draft-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  height: 100%;
}

.draft-calendar-grid span {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 94px;
  border-radius: 13px;
  background: var(--surface-soft);
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.draft-calendar-grid span.hot {
  background: linear-gradient(135deg, rgb(108 99 255 / 0.18), rgb(56 178 172 / 0.16));
  color: var(--text);
}

.draft-calendar-grid small {
  width: fit-content;
  border-radius: 999px;
  background: #ffffff;
  padding: 3px 6px;
}

.draft-command-card {
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(108 99 255 / 0.12), rgb(139 132 255 / 0.1));
  padding: 14px;
}

.draft-command-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.draft-command-card strong {
  font-size: 22px;
}

.draft-command-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.draft-command-actions i {
  min-height: 28px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.draft-command-actions.dark i {
  background: var(--primary-gradient);
  box-shadow: 0 10px 20px rgb(20 184 166 / 0.16);
}

.ui-draft-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ui-draft-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.ui-draft-specs span,
.ui-draft-score-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 8px;
}

.ui-draft-specs em,
.ui-draft-score-grid em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.ui-draft-specs strong,
.ui-draft-score-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-draft-card.midnight .ui-draft-specs span {
  background: rgb(255 255 255 / 0.06);
}

.ui-draft-card.midnight .ui-draft-specs strong {
  color: #e5e7eb;
}

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

.ui-layout-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-small);
}

.ui-layout-card-head {
  display: grid;
  gap: 5px;
}

.ui-layout-card-head span {
  width: fit-content;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 950;
}

.ui-layout-card-head strong {
  font-size: 16px;
  font-weight: 950;
}

.ui-layout-preview {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 154px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  padding: 10px;
}

.ui-layout-card p,
.ui-layout-card small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.ui-layout-card > small {
  width: fit-content;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 8px;
}

.ui-menu-map {
  display: grid;
  gap: 6px;
}

.ui-menu-map-row {
  display: grid;
  grid-template-columns: 0.85fr 0.85fr 1.15fr minmax(0, 1.8fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.ui-menu-map-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
}

.ui-menu-map-row span,
.ui-menu-map-row em {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.ui-menu-map-row span {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}

.ui-menu-map-row em {
  background: var(--surface-soft);
  color: var(--muted);
}

.ui-menu-map-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.layout-ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
}

.layout-ledger-row.hot {
  border-color: rgb(108 99 255 / 0.3);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.layout-ledger-row span {
  color: var(--muted);
}

.layout-ledger-row em {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-secondary) 14%, var(--surface));
  color: var(--accent-secondary);
  font-style: normal;
  padding: 4px 7px;
}

.ui-layout-card.split .ui-layout-preview {
  grid-template-columns: 0.9fr 1.1fr;
}

.layout-split-left,
.layout-split-right,
.layout-calendar-side,
.layout-timeline-main {
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  padding: 10px;
}

.layout-split-left {
  display: grid;
  align-content: center;
  gap: 6px;
}

.layout-split-left span,
.layout-split-left small,
.layout-calendar-side small,
.layout-timeline-main span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.layout-split-right {
  display: grid;
  gap: 7px;
}

.layout-split-right i {
  display: block;
  min-height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.layout-calendar-mini {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.layout-calendar-mini span {
  display: grid;
  align-content: start;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 7px;
  font-size: 11px;
  font-weight: 950;
}

.layout-calendar-mini span.active {
  border-color: rgb(108 99 255 / 0.32);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent-secondary) 10%, var(--surface)));
}

.layout-calendar-mini small {
  margin-top: 8px;
  color: var(--accent);
  font-size: 10px;
}

.layout-calendar-side {
  display: grid;
  gap: 4px;
}

.layout-timeline-main {
  display: grid;
  gap: 6px;
  min-height: 72px;
}

.layout-timeline-line {
  display: grid;
  gap: 8px;
  padding-left: 12px;
}

.layout-timeline-line i {
  position: relative;
  display: block;
  min-height: 20px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 34%, var(--border));
}

.layout-timeline-line i::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--accent);
}

.draft-midnight-top {
  display: grid;
  gap: 6px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(139 132 255 / 0.22), rgb(56 189 248 / 0.13));
  padding: 14px;
}

.draft-midnight-top span {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 950;
}

.draft-midnight-top strong {
  color: #ffffff;
  font-size: 24px;
}

.draft-midnight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.draft-midnight-grid span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid #263449;
  border-radius: 14px;
  background: rgb(15 23 42 / 0.72);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 900;
}

.ui-draft-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ui-draft-tags span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
}

.ui-compare-panel {
  margin-top: 14px;
}

.ui-compare-table {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.ui-compare-row {
  display: grid;
  grid-template-columns: 150px 150px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 9px 11px;
}

.ui-compare-row strong,
.ui-compare-row span {
  font-size: 12px;
  font-weight: 950;
}

.ui-compare-row span {
  color: var(--accent);
}

.ui-compare-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.daily-clinic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-clinic-chip {
  display: inline-grid;
  gap: 2px;
  min-width: 116px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
  text-align: left;
}

.daily-clinic-chip:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
}

.daily-clinic-chip span {
  color: var(--muted);
  font-size: 12px;
}

.daily-clinic-chip em {
  width: fit-content;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  padding: 2px 7px;
}

.clinic-week-panel {
  padding: 10px;
}

.clinic-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.clinic-week-head > div:first-child {
  display: grid;
  gap: 2px;
}

.clinic-week-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.clinic-week-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.clinic-week-actions .mini {
  min-height: 28px;
  padding: 5px 8px;
}

.clinic-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.clinic-week-day {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 7px 6px;
  box-shadow: none;
}

.clinic-week-day.selected {
  border-color: color-mix(in srgb, var(--violet) 40%, var(--border));
  background: var(--primary-gradient);
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.clinic-week-day.past:not(.selected) {
  color: var(--muted);
  opacity: 0.68;
}

.clinic-week-day span,
.clinic-week-day small {
  font-size: 10px;
  font-weight: 900;
}

.clinic-week-day strong {
  font-size: 13px;
  font-weight: 950;
}

.clinic-card {
  padding: 14px;
}

.clinic-group-card {
  display: block;
  overflow: hidden;
  padding: 0;
  border-left-width: 4px;
}

.clinic-group-summary {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(0, 1.24fr) auto auto;
  align-items: center;
  gap: 8px 10px;
  min-height: 36px;
  cursor: pointer;
  list-style: none;
  padding: 6px 12px;
}

.clinic-group-summary::-webkit-details-marker {
  display: none;
}

.clinic-group-summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.clinic-group-card[open] > .clinic-group-summary {
  border-bottom: 1px solid var(--border);
}

.clinic-summary-student {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}

.clinic-summary-student strong {
  color: var(--text);
  font-size: 14px;
}

.clinic-summary-student small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.clinic-summary-times {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-summary-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 70px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 10%, var(--surface));
  color: var(--violet);
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  white-space: nowrap;
}

.clinic-group-card > .clinic-main {
  align-items: center;
  margin: 10px 12px 0;
}

.clinic-group-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
}

.clinic-group-controls label {
  min-width: 124px;
  gap: 5px;
}

.clinic-group-summary > .state-chip {
  min-width: 58px;
  justify-content: center;
}

.clinic-group-card > .clinic-subbooking-list,
.clinic-group-card > .clinic-group-review,
.clinic-group-card > .carry-checks {
  margin: 10px 12px 12px;
}

.clinic-group-review {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.clinic-group-review textarea {
  height: 44px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 700;
}

.compact-note {
  padding: 10px 12px;
  font-size: 12px;
}

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

.clinic-subbooking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.38fr);
  align-items: start;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 9px;
}

.clinic-subbooking-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clinic-subbooking-head strong {
  display: block;
  margin-top: 4px;
}

.clinic-subbooking-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(440px, 100%);
}

.clinic-subbooking-tools label {
  margin: 0;
}

.clinic-schedule-editor {
  display: grid;
  width: min(100%, 440px);
  gap: 6px;
}

.clinic-schedule-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.clinic-schedule-control-row select {
  flex: 1 1 260px;
  min-width: 0;
}

.clinic-schedule-control-row .clinic-cancel-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 14px;
  white-space: nowrap;
}

.clinic-change-request {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 6%, var(--surface-soft));
  padding: 10px 12px;
}

.clinic-change-request > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.clinic-change-request > div:last-child {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.clinic-change-request strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.clinic-change-request span,
.clinic-change-request small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-task-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  grid-template-columns: none;
  margin: 0;
}

.clinic-subbooking > .clinic-fields {
  margin: 0;
}

.clinic-subbooking > .clinic-fields label {
  gap: 5px;
}

.clinic-subbooking > .clinic-fields input {
  min-height: 34px;
  padding: 7px 10px;
}

.carry-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-radius: 18px;
  padding: 9px;
}

.carry-checks strong {
  flex: 0 0 auto;
  font-size: 12px;
}

.carry-task {
  margin: 0;
}

.carry-task span {
  background: transparent;
  color: var(--text);
  padding: 0;
  box-shadow: none;
}

.clinic-card .task-grid,
.video-card .checklist {
  gap: 8px;
}

.clinic-card .task-check {
  grid-template-columns: 14px minmax(0, 1fr);
  min-width: 142px;
  border-radius: 14px;
  column-gap: 16px;
  row-gap: 3px;
  padding: 7px 10px;
  box-shadow: none;
}

.clinic-card .task-check input {
  position: static;
  width: 14px;
  min-height: 14px;
}

.clinic-card .task-check span {
  font-size: 12px;
  line-height: 1.2;
}

.clinic-card .task-check small {
  font-size: 11px;
}

.video-card {
  padding: 0;
  overflow: hidden;
  border-left-width: 4px;
}

.video-card > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  margin: 0;
  min-height: 54px;
  padding: 9px 12px;
}

.video-card > summary::after {
  content: "열기";
  align-self: center;
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.video-card > summary h2 {
  margin-top: 3px;
  font-size: 16px;
}

.video-card > summary .state-chip {
  margin-left: 6px;
  vertical-align: middle;
}

.video-card > summary p {
  margin-top: 3px;
  font-size: 12px;
}

.video-card[open] > summary::after {
  content: "접기";
}

.video-card > :not(summary) {
  margin: 8px 12px 9px;
}

.video-card-summary-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}

.video-card-summary-action {
  min-height: 30px;
  padding-inline: 11px;
  white-space: nowrap;
}

.video-notice-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-notice-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  min-height: 25px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.video-notice-status strong {
  color: inherit;
  font-size: inherit;
}

.video-notice-status.is-sent {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  color: var(--green);
}

.video-notice-status.is-pending {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
  color: color-mix(in srgb, var(--amber) 72%, var(--text));
}

.video-card .video-form {
  grid-template-columns: minmax(120px, 0.7fr) minmax(130px, 0.75fr) minmax(110px, 0.6fr) minmax(190px, 1.25fr);
  gap: 7px;
  margin-bottom: 8px;
}

.video-card .video-form .wide {
  grid-column: auto;
}

.video-card .video-form label {
  gap: 5px;
}

.video-card .video-form input,
.video-card .video-form select {
  min-height: 34px;
  padding: 7px 10px;
}

.video-card .checklist {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 7px 12px 9px;
}

.video-card .task-check {
  grid-template-columns: 14px minmax(0, 1fr);
  min-height: 32px;
  border-radius: 14px;
  column-gap: 16px;
  row-gap: 2px;
  padding: 6px 10px;
  box-shadow: none;
}

.video-card .task-check input {
  position: static;
  width: 14px;
  min-height: 14px;
}

.video-card .task-check span {
  font-size: 12px;
  line-height: 1.2;
}

.video-card .task-check small {
  font-size: 11px;
}

.completed-video-panel {
  margin-top: 12px;
}

.completed-video-panel > summary {
  cursor: pointer;
  list-style: none;
}

.completed-video-panel > summary::-webkit-details-marker {
  display: none;
}

.completed-video-panel > summary span {
  display: grid;
  gap: 3px;
}

.completed-video-panel > summary small {
  color: var(--muted);
  font-weight: 700;
}

.completed-video-grid {
  margin-top: 14px;
}

.manual-video-panel {
  margin-bottom: 16px;
}

.video-manual-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tag-color) 12%, white);
  color: var(--tag-color);
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 800;
}

.tag-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 7px;
}

.inline-count {
  display: inline-flex;
  margin-left: 6px;
  border-radius: 999px;
  background: #f5f3ff;
  color: var(--accent);
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
}

.score-panel {
  margin-top: 14px;
}

.score-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.score-chart {
  position: relative;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
    linear-gradient(180deg, transparent 49%, rgb(226 232 240 / 0.9) 50%, transparent 51%),
    linear-gradient(90deg, #ffffff, #f8fafc);
  margin: 10px 0 12px;
  padding: 14px;
}

.score-grid-line {
  position: absolute;
  left: 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.score-grid-line.top {
  top: 10px;
}

.score-grid-line.mid {
  top: 50%;
}

.score-grid-line.bottom {
  bottom: 10px;
}

.score-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.score-lines polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.student-score-line {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 5px 9px rgb(108 99 255 / 0.18));
}

.average-score-line {
  stroke: var(--accent-secondary);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
  opacity: 0.9;
}

.score-point,
.average-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.score-point {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgb(108 99 255 / 0.25);
}

.average-point {
  width: 16px;
  height: 16px;
  border: 3px solid var(--accent-secondary);
  border-radius: 999px;
  background: var(--surface);
}

.portal-score-point {
  width: 10px;
  height: 10px;
  font-size: 0;
  box-shadow: 0 4px 10px rgb(108 99 255 / 0.22);
}

.portal-average-point {
  width: 8px;
  height: 8px;
  border-width: 2px;
}

.score-legend {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.score-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.score-legend i {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.student-line {
  background: var(--accent);
}

.average-line {
  border: 3px solid var(--accent-secondary);
}

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

.score-list div {
  display: grid;
  gap: 3px;
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

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

.school-score-row {
  display: grid !important;
  grid-template-columns: 82px 92px 104px minmax(150px, 1fr) 86px 78px auto;
  align-items: end;
  gap: 8px;
}

.school-score-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.school-score-row input {
  width: 100%;
  min-width: 0;
}

.school-score-actions {
  display: inline-flex;
  gap: 6px;
}

@media (max-width: 980px) {
  .student-detail-modal .score-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-detail-modal .score-form > .primary-button {
    grid-column: 1 / -1;
    width: 100%;
  }

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

  .school-score-actions {
    justify-content: flex-end;
  }
}

.portal-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgb(139 132 255 / 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f6f3ff 42%, var(--bg) 100%);
  padding: 28px;
}

html[data-theme="dark"] .portal-screen {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, #08111f) 0%, var(--bg) 100%);
}

.portal-shell {
  display: grid;
  gap: 18px;
  width: min(1080px, 100%);
  margin: 0 auto;
}

.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow);
}

.portal-header-copy {
  min-width: 0;
}

.portal-header-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.portal-header h1 {
  margin: 4px 0 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
}

.portal-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.portal-nav {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 8px;
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(16px);
}

.portal-nav button {
  display: grid;
  gap: 3px;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  padding: 8px 9px;
  text-align: center;
  word-break: keep-all;
}

.portal-nav button.active {
  border-color: rgb(108 99 255 / 0.28);
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.portal-nav strong {
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.portal-nav span {
  font-size: 11px;
  font-weight: 900;
}

.portal-content {
  display: grid;
  gap: 14px;
}

.portal-today-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  border: 1px solid rgb(108 99 255 / 0.2);
  border-radius: 26px;
  background: linear-gradient(135deg, #ffffff, #f6f3ff);
  padding: 18px;
}

html[data-theme="dark"] .portal-today-panel,
html[data-theme="dark"] .portal-login-copy,
html[data-theme="dark"] .portal-student-dashboard-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface));
}

.portal-today-panel h2 {
  margin: 4px 0 6px;
}

.portal-today-panel p {
  color: var(--muted);
  font-weight: 700;
}

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

.portal-action-grid article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 12px;
}

.portal-action-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.portal-login-brand {
  justify-content: flex-start;
  gap: 10px;
}

.portal-login-brand strong {
  color: var(--text);
}

.portal-login-brand span {
  color: var(--accent);
  font-weight: 760;
}

.portal-login-logo {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 10px 24px rgb(32 41 105 / .16);
}

.portal-login-tools {
  display: flex;
  justify-content: flex-end;
}

.portal-login-form {
  display: grid;
  gap: 12px;
}

.portal-login-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.portal-login-form label > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portal-login-form svg,
.portal-pencil-badge svg,
.portal-home-action svg,
.portal-dashboard-message svg,
.portal-video-link-description svg,
.portal-student-mini-profile svg,
.homework-rate-row i svg,
.portal-clinic-date-card i svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-login-status {
  min-height: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  text-align: center;
}

.portal-login-status.active {
  color: var(--accent);
}

.button-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgb(255 255 255 / .5);
  border-top-color: #fff;
  border-radius: 999px;
  vertical-align: -2px;
  animation: button-spin 780ms linear infinite;
}

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

.portal-home-action.kakao svg,
.portal-home-action.youtube svg {
  fill: currentColor;
  stroke: none;
}

.portal-login-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgb(108 99 255 / 0.1), rgb(255 255 255 / 0.72)),
    var(--surface);
  padding: 16px;
}

.portal-login-copy h1 {
  grid-column: 2;
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: 860;
  line-height: 1.18;
}

.portal-login-copy p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 640;
  line-height: 1.55;
}

.portal-pencil-badge {
  display: inline-grid;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 12px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  box-shadow: var(--primary-shadow);
}

.portal-welcome-block {
  display: grid;
  gap: 7px;
  padding: 4px 4px 0;
}

.portal-welcome-block span {
  color: color-mix(in srgb, var(--violet) 86%, var(--accent));
  font-size: 14px;
  font-weight: 820;
}

.portal-welcome-block h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(23px, 4vw, 32px);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: 0;
}

.portal-student-dashboard-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  min-height: 124px;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 9%, transparent), color-mix(in srgb, #ffffff 86%, transparent)),
    var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-small);
}

html[data-theme="dark"] .portal-home-action.kakao {
  color: #ffffff;
}

.portal-student-greeting {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
}

.portal-greeting-date {
  color: color-mix(in srgb, var(--violet) 86%, var(--accent));
  font-size: 14px;
  font-weight: 820;
  line-height: 1.1;
}

.portal-student-greeting h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 820;
  line-height: 1.18;
  letter-spacing: 0;
}

.portal-student-mini-profile {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.portal-student-mini-profile strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 880;
}

.portal-student-mini-profile small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.portal-dashboard-message {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid color-mix(in srgb, #1f2a64 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, #1f2a64 7%, var(--surface));
  color: #1f2a64;
  min-height: 46px;
  padding: 9px 14px;
}

.portal-dashboard-message span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, #1f2a64 13%, var(--surface));
  color: #1f2a64;
  flex: 0 0 auto;
}

.portal-dashboard-message p {
  margin: 0;
  font-size: 13px;
  font-weight: 820;
  line-height: 1.35;
}

html[data-theme="dark"] .portal-dashboard-message {
  border-color: rgb(129 140 206 / .48);
  background: #202a53;
  color: #f8f9ff;
}

html[data-theme="dark"] .portal-dashboard-message span {
  background: rgb(255 255 255 / .12);
  color: #ffffff;
}

.portal-greeting-logo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.portal-dashboard-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 18px;
}

.portal-home-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.portal-home-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 6%, var(--surface));
  color: color-mix(in srgb, var(--violet) 84%, var(--text));
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 820;
  text-decoration: none;
}

.portal-home-action span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  color: inherit;
  font-size: 11px;
  font-weight: 900;
}

.portal-home-action.kakao {
  justify-content: center;
  min-width: 190px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 78%, var(--accent)), var(--accent));
  color: #ffffff;
  border-color: transparent;
}

.portal-home-action.kakao span {
  background: rgb(255 255 255 / .18);
  color: #ffffff;
}

.portal-home-action.youtube span {
  color: #ef4444;
}

.portal-home-action.youtube span svg {
  width: 18px;
  height: 18px;
}

.portal-home-action.instagram span {
  color: #a855f7;
}

.portal-announcement-home-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 8%, var(--surface)), var(--surface));
  color: var(--text);
  padding: 13px 14px;
  text-align: left;
  box-shadow: var(--shadow-small);
  cursor: pointer;
}

.portal-announcement-home-card:disabled {
  cursor: default;
  opacity: .82;
}

.portal-announcement-icon {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 14%, var(--surface));
  color: var(--accent);
  font-size: 15px;
  font-weight: 950;
}

.portal-announcement-home-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-announcement-home-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.portal-announcement-home-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-announcement-home-card em {
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.portal-announcement-modal-layout {
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  gap: 14px;
}

.portal-announcement-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.portal-announcement-list button {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.portal-announcement-list button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.portal-announcement-list span {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 950;
}

.portal-announcement-list span.unread {
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
  color: var(--red);
}

.portal-announcement-list span.read {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.portal-announcement-list strong,
.portal-announcement-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-announcement-list strong {
  font-size: 14px;
  font-weight: 950;
}

.portal-announcement-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.portal-announcement-detail-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 280px;
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--border));
  border-radius: 20px;
  background: var(--surface);
  padding: 16px;
}

.portal-announcement-detail-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 950;
  line-height: 1.25;
}

.portal-announcement-detail-card > strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
}

.portal-announcement-detail-card p {
  margin: 0;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.65;
}

.portal-announcement-detail-card > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.portal-header-icon-button {
  position: relative;
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--violet) 8%, var(--surface));
  color: var(--accent);
  box-shadow: var(--shadow-small);
  cursor: pointer;
}

.portal-header-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-notification-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #ec4899;
  color: #ffffff;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.portal-sync-chip {
  border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 7%, var(--surface));
  color: var(--accent);
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-ai-comment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 7%, var(--surface)), var(--surface));
  padding: 13px 14px;
  box-shadow: var(--shadow-small);
}

.portal-ai-comment-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 15px;
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.portal-ai-comment-icon svg,
.portal-ai-card svg,
.portal-ai-answer-card svg,
.portal-notification-card svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-ai-comment-card > div:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-ai-comment-card span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.portal-ai-comment-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 880;
  line-height: 1.35;
}

.portal-ai-comment-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-ai-comment-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.portal-notification-modal,
.portal-ai-modal {
  width: min(860px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
  overflow: auto;
}

.portal-notification-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.portal-notification-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--violet) 6%, var(--surface));
  padding: 11px;
}

.portal-notification-summary b {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.portal-notification-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.portal-notification-list {
  display: grid;
  gap: 9px;
}

.portal-notification-card {
  border: 1px solid color-mix(in srgb, var(--violet) 15%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  overflow: hidden;
}

.portal-notification-card.unread {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 9%, var(--surface)), var(--surface));
}

.portal-notification-card button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.portal-notification-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 80%, #22c55e);
}

.portal-notification-card.unread .portal-notification-dot {
  background: #ec4899;
  box-shadow: 0 0 0 5px rgb(236 72 153 / 0.12);
}

.portal-notification-card strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 14px;
  font-weight: 930;
}

.portal-notification-card p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.portal-notification-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-notification-card em {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.portal-notification-card em.read {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.portal-notification-card em.unread {
  background: color-mix(in srgb, #ec4899 12%, var(--surface));
  color: #db2777;
}

.portal-ai-tabs,
.portal-ai-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 5%, var(--surface));
  padding: 6px;
}

.portal-ai-tabs button,
.portal-ai-segmented button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.portal-ai-tabs button.active,
.portal-ai-segmented button.active {
  background: var(--primary-gradient);
  color: #ffffff;
  box-shadow: var(--primary-shadow);
}

.portal-ai-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.portal-ai-card,
.portal-ai-answer-card {
  display: grid;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--border));
  border-radius: 22px;
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-small);
}

.portal-ai-credit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.portal-ai-credit-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.portal-ai-credit-row small,
.portal-ai-quiz-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.portal-ai-input-card textarea,
.portal-ai-followup-box textarea,
.portal-ai-topic-row input {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  resize: vertical;
}

.portal-ai-input-card textarea::placeholder,
.portal-ai-topic-row input::placeholder,
.portal-ai-followup-box textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: 12px;
}

.portal-ai-input-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.ghost-button.icon-only {
  width: 38px;
  min-height: 34px;
  padding: 0;
}

.portal-ai-submit-button {
  justify-content: center;
  min-height: 34px;
}

.portal-ai-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--green) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--green);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
}

.portal-ai-upload-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.portal-ai-conversation-list {
  display: grid;
  gap: 10px;
}

.portal-ai-answer-card header,
.portal-ai-quiz-attempt header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.portal-ai-answer-card header > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 13%, var(--surface));
  color: var(--accent);
}

.portal-ai-answer-card strong,
.portal-ai-quiz-attempt strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.3;
}

.portal-ai-answer-card small,
.portal-ai-quiz-attempt small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-ai-answer-body {
  border-radius: 16px;
  background: color-mix(in srgb, var(--violet) 6%, var(--surface-soft));
  color: var(--text);
  padding: 12px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.62;
}

.portal-ai-answer-body b {
  color: var(--accent);
  font-weight: 950;
}

.portal-math-inline,
.portal-math-block {
  display: inline-block;
  color: var(--portal-math-color);
  font-family: var(--portal-math-font);
  font-weight: var(--portal-math-weight);
}

.portal-math-inline {
  background: transparent;
  padding: var(--portal-math-inline-padding);
}

.portal-math-block {
  display: block;
  margin: var(--portal-math-block-margin);
  padding: var(--portal-math-block-padding);
  border-radius: var(--portal-math-block-radius);
  background: var(--portal-math-block-background);
}

.portal-math-frac {
  display: inline-grid;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  min-width: var(--portal-math-frac-min-width);
  margin: var(--portal-math-frac-margin);
  vertical-align: middle;
  line-height: var(--portal-math-frac-line-height);
}

.portal-math-frac > span:first-child {
  width: 100%;
  border-bottom: var(--portal-math-frac-rule);
  padding: var(--portal-math-frac-numerator-padding);
  text-align: center;
}

.portal-math-frac > span:last-child {
  padding: var(--portal-math-frac-denominator-padding);
  text-align: center;
}

.portal-ai-answer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-ai-answer-actions .mini {
  min-height: 30px;
  padding: 5px 10px;
}

.portal-ai-answer-actions .danger {
  border-color: color-mix(in srgb, #ec4899 28%, var(--border));
  color: #db2777;
}

.portal-ai-followup-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

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

.portal-ai-topic-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.portal-ai-topic-row input,
.portal-ai-topic-row button,
.portal-ai-quiz-wide {
  min-height: 36px;
}

.portal-ai-quiz-attempt > header {
  grid-template-columns: minmax(0, 1fr) auto;
}

.portal-ai-score-pill {
  align-self: start;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #ffffff;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 950;
}

.portal-ai-quiz-list {
  display: grid;
  gap: 9px;
}

.portal-ai-quiz-question {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--violet) 12%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 5%, var(--surface));
  padding: 12px;
}

.portal-ai-quiz-question.correct {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
}

.portal-ai-quiz-question.wrong {
  border-color: color-mix(in srgb, var(--red) 26%, var(--border));
}

.portal-ai-quiz-question p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 860;
  line-height: 1.45;
}

.portal-ai-quiz-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-ai-quiz-options button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 7%, var(--surface));
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.portal-ai-quiz-options button.active {
  background: var(--primary-gradient);
  color: #ffffff;
}

.portal-ai-quiz-explanation {
  display: block;
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 8px 10px;
  line-height: 1.55;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.portal-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgb(108 99 255 / 0.11), rgb(255 255 255 / 0.75)),
    var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-small);
}

.portal-home-hero h2 {
  margin: 5px 0 7px;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 950;
  line-height: 1.14;
}

.portal-home-hero p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.55;
}

.portal-home-message {
  display: grid;
  align-content: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
  border-radius: 22px;
  background: color-mix(in srgb, var(--violet) 7%, var(--surface));
  padding: 15px;
}

.portal-score-message {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  padding: 13px;
}

.portal-score-message span {
  grid-row: 1 / span 2;
}

.portal-home-message span,
.portal-home-message strong {
  color: var(--accent);
  font-weight: 950;
}

.portal-home-message p {
  font-size: 13px;
  font-weight: 850;
}

.portal-clinic-carousel-panel .section-head {
  margin-bottom: 10px;
}

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

.portal-swipe-hint {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-clinic-carousel {
  display: grid;
  grid-auto-columns: minmax(210px, 0.31fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.portal-clinic-card {
  display: grid;
  gap: 5px;
  min-height: 76px;
  scroll-snap-align: start;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface));
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
}

.portal-clinic-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.portal-clinic-card strong {
  font-size: 17px;
  font-weight: 950;
}

.portal-clinic-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.portal-clinic-card.empty {
  min-width: 260px;
}

.portal-clinic-date-list,
.portal-clinic-time-list {
  display: grid;
  gap: 8px;
}

.portal-clinic-date-card,
.portal-clinic-time-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--border));
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
}

.portal-clinic-date-card div,
.portal-clinic-time-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-clinic-date-card strong,
.portal-clinic-time-card strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 920;
}

.portal-clinic-date-card small,
.portal-clinic-time-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
}

.portal-clinic-date-card i {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
  font-style: normal;
}

.portal-clinic-time-card > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
  color: var(--accent);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.portal-clinic-time-card:disabled {
  cursor: default;
  opacity: .72;
}

.portal-clinic-time-card.booked > span {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.portal-clinic-time-card.full > span {
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.portal-clinic-time-modal {
  width: min(520px, calc(100vw - 28px));
}

.portal-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.portal-carousel-dots i {
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--violet) 32%, var(--border));
  border-radius: 999px;
  background: transparent;
}

.portal-carousel-dots i.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--violet) 74%, var(--accent));
}

.portal-routine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.9fr);
  gap: 14px;
}

.portal-routine-grid.single {
  grid-template-columns: 1fr;
}

.portal-routine-card,
.portal-link-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-small);
}

.portal-routine-card > strong,
.portal-link-card > strong {
  font-size: 18px;
  font-weight: 950;
}

.portal-routine-card p,
.portal-link-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.portal-routine-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.portal-routine-card span {
  display: grid;
  gap: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-soft));
  padding: 10px;
}

.portal-routine-card b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portal-routine-card em {
  color: var(--text);
  font-style: normal;
  font-size: 20px;
  font-weight: 950;
}

.portal-link-card .primary-button {
  justify-self: start;
}

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

.portal-quick-card {
  display: grid;
  gap: 4px;
  min-height: 74px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 11px 12px;
  text-align: left;
  box-shadow: var(--shadow-small);
}

.portal-quick-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.portal-quick-card strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.portal-quick-card small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.portal-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-social-row a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--accent);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.portal-learning-panel {
  display: grid;
  gap: 14px;
}

.portal-learning-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 6px;
}

.portal-learning-tabs button {
  min-height: 40px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.portal-learning-tabs button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-small);
}

.portal-homework-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--red) 26%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
  padding: 13px;
}

.portal-homework-warning > span {
  grid-row: 1 / span 2;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--red) 14%, var(--surface));
  color: var(--red);
  font-weight: 950;
}

.portal-homework-warning strong {
  color: var(--red);
  font-size: 14px;
  font-weight: 950;
}

.portal-homework-warning p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.5;
}

.homework-rate-row {
  width: 100%;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.homework-rate-week,
.homework-rate-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.homework-rate-week strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 930;
}

.homework-rate-info {
  align-items: start;
  justify-items: start;
  text-align: left;
}

.homework-rate-info em {
  justify-self: start;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
  font-weight: 880;
}

.homework-rate-info small {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 9%, var(--surface));
  color: color-mix(in srgb, var(--violet) 82%, var(--text));
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homework-rate-row i {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  font-style: normal;
}

.portal-clinic-progress-summary,
.portal-homework-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.portal-clinic-progress-summary span,
.portal-detail-stat {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 11px;
}

.portal-clinic-progress-summary b,
.portal-detail-stat b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portal-clinic-progress-summary strong,
.portal-detail-stat strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.portal-detail-stat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-clinic-remaining-list,
.portal-homework-detail-section {
  display: grid;
  gap: 8px;
}

.portal-homework-detail-section {
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 4%, var(--surface));
  padding: 12px;
}

.portal-homework-detail-section.featured {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent),
    var(--surface);
}

.portal-homework-detail-section > div:first-child {
  display: grid;
  gap: 3px;
  margin-bottom: 2px;
}

.portal-learning-section {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--violet) 4%, var(--surface));
  padding: 12px;
}

.portal-learning-section > div:first-child {
  display: grid;
  gap: 3px;
}

.portal-learning-section > div:first-child strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 920;
}

.portal-learning-section > div:first-child small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.portal-clinic-remaining-list article,
.portal-homework-detail-section article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 10px 11px;
}

.portal-homework-detail-section > strong,
.portal-homework-detail-section > div:first-child strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.portal-homework-detail-section > div:first-child small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.portal-homework-detail-section b {
  color: var(--text);
  font-weight: 950;
}

.portal-clinic-target-card > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.portal-homework-detail-section p,
.portal-homework-detail-section small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.portal-homework-detail-modal,
.portal-clinic-detail-modal,
.portal-announcement-modal {
  width: min(860px, calc(100vw - 28px));
}

.portal-homework-detail-modal,
.portal-clinic-detail-modal {
  display: grid;
  gap: 12px;
}

.portal-clinic-detail-hero {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--violet) 8%, var(--surface)), var(--surface));
  padding: 14px;
}

.portal-clinic-detail-hero > strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.portal-clinic-detail-hero > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-clinic-detail-hero > div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 9%, var(--surface));
  color: color-mix(in srgb, var(--violet) 80%, var(--text));
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 880;
}

.portal-clinic-detail-hero svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portal-clinic-cancel-box,
.portal-clinic-change-box {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--violet) 20%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 5%, var(--surface));
  padding: 14px;
}

.portal-clinic-cancel-box > div:first-child,
.portal-clinic-change-box > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-clinic-cancel-box strong,
.portal-clinic-change-box strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.portal-clinic-cancel-box small,
.portal-clinic-change-box small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portal-clinic-cancel-box label,
.portal-clinic-change-box label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.portal-clinic-cancel-box textarea,
.portal-clinic-change-box textarea,
.portal-clinic-change-box select {
  min-height: 78px;
  resize: vertical;
}

.portal-clinic-change-box select {
  min-height: 42px;
  resize: none;
}

.portal-change-pending {
  margin: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 10%, var(--surface));
  padding: 10px 12px;
  color: color-mix(in srgb, var(--violet) 84%, var(--text));
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.portal-cancel-warning {
  margin: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  padding: 10px 12px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.portal-cancel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.portal-score-panel {
  display: grid;
  gap: 14px;
}

.portal-score-hero-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, rgb(255 255 255 / .18), transparent 32%),
    linear-gradient(135deg, #1f2a64 0%, #31428a 100%);
  padding: 18px;
  color: #ffffff;
  box-shadow: 0 20px 42px rgb(31 42 100 / .22);
}

.portal-score-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.portal-rank-circle {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: 82px;
  height: 82px;
  border: 9px solid rgb(255 255 255 / .28);
  border-top-color: #ffffff;
  border-radius: 999px;
  color: #ffffff;
}

.portal-rank-circle strong {
  font-size: 30px;
  font-weight: 950;
}

.portal-rank-circle span {
  font-size: 12px;
  font-weight: 950;
}

.portal-score-hero-top span {
  color: rgb(255 255 255 / .78);
  font-size: 13px;
  font-weight: 900;
}

.portal-score-hero-top h3 {
  margin: 4px 0 6px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.18;
}

.portal-score-hero-top small {
  display: inline-flex;
  border-radius: 999px;
  background: rgb(255 255 255 / .17);
  padding: 6px 10px;
  color: rgb(255 255 255 / .9);
  font-size: 12px;
  font-weight: 900;
}

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

.portal-score-hero-mini-grid span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 5px 8px;
  min-width: 0;
  border-radius: 18px;
  background: rgb(255 255 255 / .15);
  padding: 12px;
}

.portal-score-hero-mini-grid b {
  grid-column: 1 / -1;
  color: rgb(255 255 255 / .72);
  font-size: 12px;
  font-weight: 900;
}

.portal-score-hero-mini-grid strong {
  color: #ffffff;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
}

.portal-score-hero-mini-grid em {
  align-self: end;
  color: rgb(255 255 255 / .68);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  line-height: 1.1;
}

.portal-score-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 7px;
}

.portal-score-tabs button {
  display: grid;
  gap: 2px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  padding: 7px 9px;
}

.portal-score-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-small);
}

.portal-score-tabs strong {
  font-size: 13px;
  font-weight: 950;
}

.portal-score-tabs span {
  font-size: 11px;
  font-weight: 850;
}

.portal-score-chart-card,
.portal-exam-analysis-card,
.portal-summary-unit-flow {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  padding: 14px;
}

.portal-score-chart-card > div:first-child strong,
.portal-summary-unit-flow > div strong {
  display: block;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 950;
}

.compact-score-chart {
  height: 180px;
}

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

.portal-score-list button,
.portal-score-list div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 11px 12px;
  text-align: left;
}

.portal-score-list button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.portal-score-list button > div {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.portal-score-list button > b {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
  white-space: nowrap;
}

.portal-score-list button > span {
  grid-column: 1;
}

.portal-score-list button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.portal-score-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.portal-score-chip-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.portal-score-chip-row button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 920;
}

.portal-score-chip-row button.active {
  border-color: color-mix(in srgb, var(--violet) 46%, var(--border));
  background: color-mix(in srgb, var(--violet) 10%, var(--surface));
  color: color-mix(in srgb, var(--violet) 84%, var(--text));
}

.portal-score-footnote {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.portal-exam-analysis-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.portal-exam-analysis-card header strong {
  display: block;
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.portal-exam-analysis-card header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.portal-exam-analysis-card header b {
  color: var(--accent);
  font-size: 28px;
  font-weight: 950;
}

.portal-analysis-block {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--violet) 14%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--violet) 5%, var(--surface-soft));
  padding: 12px;
}

.portal-analysis-block > div strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.portal-exam-metrics,
.portal-summary-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.portal-summary-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.portal-exam-metrics span,
.portal-summary-metrics span {
  display: grid;
  gap: 4px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-soft));
  padding: 9px;
}

.portal-exam-metrics b,
.portal-summary-metrics b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.portal-exam-metrics strong,
.portal-summary-metrics strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.portal-unit-bars,
.portal-summary-unit-flow {
  display: grid;
  gap: 8px;
}

.portal-unit-bars span,
.portal-summary-unit-flow > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.portal-unit-bars span::after,
.portal-summary-unit-flow > span::after {
  content: "";
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent) var(--unit-rate), color-mix(in srgb, var(--border) 72%, transparent) var(--unit-rate));
}

.portal-unit-bars b,
.portal-summary-unit-flow b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-unit-bars em,
.portal-summary-unit-flow em {
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.portal-question-details {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 8px 10px;
}

.portal-question-details summary {
  display: grid;
  gap: 2px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 950;
}

.portal-question-details summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-question-grid {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.portal-question-grid span {
  display: grid;
  gap: 3px;
  border-radius: 12px;
  background: var(--surface);
  padding: 8px 9px;
}

.portal-question-grid span.wrong b {
  color: var(--red);
}

.portal-question-grid b {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.portal-question-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.4;
}

.portal-question-grid em {
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  line-height: 1.45;
}

.portal-radar-card {
  display: grid;
  grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.portal-radar-chart {
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1;
}

.portal-radar-chart circle,
.portal-radar-chart line {
  fill: none;
  stroke: color-mix(in srgb, var(--violet) 22%, var(--border));
  stroke-width: 1;
}

.portal-radar-chart polygon {
  fill: color-mix(in srgb, var(--violet) 24%, transparent);
  stroke: color-mix(in srgb, var(--violet) 88%, var(--accent));
  stroke-width: 2;
}

.portal-radar-legend {
  display: grid;
  gap: 6px;
}

.portal-radar-legend span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-radius: 12px;
  background: var(--surface);
  padding: 7px 9px;
}

.portal-radar-legend b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-radar-legend em {
  color: color-mix(in srgb, var(--violet) 88%, var(--accent));
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.portal-average-point span {
  display: none;
}

.portal-video-auto-note {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

html[data-theme="dark"] .app-version-pill,
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .manual-card,
html[data-theme="dark"] .metric-card.teal,
html[data-theme="dark"] .metric-card.amber,
html[data-theme="dark"] .metric-card.red,
html[data-theme="dark"] .metric-card.orange,
html[data-theme="dark"] .metric-card.violet,
html[data-theme="dark"] .metric-card.blue,
html[data-theme="dark"] .metric-card.active,
html[data-theme="dark"] .timeline-item.active,
html[data-theme="dark"] .search-result.selected,
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .tree-node.selected,
html[data-theme="dark"] .term-row.active,
html[data-theme="dark"] .current-term-strip,
html[data-theme="dark"] .attendance-gate.open,
html[data-theme="dark"] .attendance-gate.makeup,
html[data-theme="dark"] .attendance-gate.blocked,
html[data-theme="dark"] .request-banner,
html[data-theme="dark"] .survey-success,
html[data-theme="dark"] .portal-today-panel,
html[data-theme="dark"] .manual-overview-grid > div {
  background:
    linear-gradient(135deg, rgb(139 132 255 / 0.14), rgb(45 212 191 / 0.08)),
    var(--surface);
}

html[data-theme="dark"] .filter-chip.withdrawn,
html[data-theme="dark"] .student-card.withdrawn,
html[data-theme="dark"] .manual-step-group,
html[data-theme="dark"] .status-action-box,
html[data-theme="dark"] .homework-rate-row,
html[data-theme="dark"] .portal-need-card,
html[data-theme="dark"] .portal-makeup-row,
html[data-theme="dark"] .score-list div,
html[data-theme="dark"] .video-access-preview span,
html[data-theme="dark"] .portal-action-grid article,
html[data-theme="dark"] .rule-chip-list span,
html[data-theme="dark"] .type-tag,
html[data-theme="dark"] .daily-clinic-chip,
html[data-theme="dark"] .daily-clinic-chip em,
html[data-theme="dark"] .clinic-group-summary:hover,
html[data-theme="dark"] .clinic-summary-count,
html[data-theme="dark"] .clinic-subbooking,
html[data-theme="dark"] .inline-count,
html[data-theme="dark"] .draft-calendar-grid small {
  background: var(--surface-soft);
}

html[data-theme="dark"] .search-results,
html[data-theme="dark"] .search-result,
html[data-theme="dark"] .request-banner,
html[data-theme="dark"] .survey-success,
html[data-theme="dark"] .billboard-preview-shell,
html[data-theme="dark"] .ui-draft-preview,
html[data-theme="dark"] .draft-tone-top,
html[data-theme="dark"] .draft-ledger-row,
html[data-theme="dark"] .layout-split-left,
html[data-theme="dark"] .layout-split-right,
html[data-theme="dark"] .layout-calendar-side,
html[data-theme="dark"] .layout-timeline-main,
html[data-theme="dark"] .layout-calendar-mini span,
html[data-theme="dark"] .ui-menu-map-row,
html[data-theme="dark"] .layout-ledger-row,
html[data-theme="dark"] .message-detail-panel,
html[data-theme="dark"] .message-support-card > summary::after,
html[data-theme="dark"] .status-action-box > summary::after {
  background: var(--surface);
}

html[data-theme="dark"] .message-console :is(.ghost-button, .icon-button, .danger-button),
html[data-theme="dark"] .message-review-modal :is(.ghost-button, .icon-button, .danger-button) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-small);
}

html[data-theme="dark"] .message-console :is(.primary-button, .ghost-button, .icon-button, .danger-button):disabled,
html[data-theme="dark"] .message-review-modal :is(.primary-button, .ghost-button, .icon-button, .danger-button):disabled {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  box-shadow: none;
  opacity: 0.76;
}

html[data-theme="dark"] .message-channel-tabs button:not(.active),
html[data-theme="dark"] .recipient-target-options label:not(.active) {
  border-color: var(--border);
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  color: var(--text);
  box-shadow: none;
}

html[data-theme="dark"] .recipient-target-options label:not(.active) span {
  color: var(--text);
}

html[data-theme="dark"] .recipient-target-options label.active {
  border-color: color-mix(in srgb, var(--accent-light) 72%, var(--border));
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #fff;
  box-shadow: 0 12px 24px rgb(108 99 255 / 0.32);
}

html[data-theme="dark"] .recipient-target-options label.active span {
  color: #fff;
}

html[data-theme="dark"] .metric-card.teal,
html[data-theme="dark"] .metric-card.amber,
html[data-theme="dark"] .metric-card.red,
html[data-theme="dark"] .metric-card.orange,
html[data-theme="dark"] .metric-card.violet,
html[data-theme="dark"] .metric-card.blue,
html[data-theme="dark"] .attendance-gate.open,
html[data-theme="dark"] .attendance-gate.makeup,
html[data-theme="dark"] .attendance-gate.blocked,
html[data-theme="dark"] .ui-draft-card.clean,
html[data-theme="dark"] .ui-draft-card.violet,
html[data-theme="dark"] .portal-today-panel {
  background:
    linear-gradient(135deg, rgb(139 132 255 / 0.14), rgb(45 212 191 / 0.08)),
    var(--surface);
}

html[data-theme="dark"] .ghost-button.done,
html[data-theme="dark"] .icon-button.done,
html[data-theme="dark"] .done,
html[data-theme="dark"] .state-chip.status-present {
  background: color-mix(in srgb, var(--green) 17%, var(--surface));
  color: var(--green);
}

html[data-theme="dark"] .state-chip.status-pending {
  background: color-mix(in srgb, var(--muted) 16%, var(--surface));
  color: var(--muted);
}

html[data-theme="dark"] .state-chip.status-late {
  background: color-mix(in srgb, var(--orange) 18%, var(--surface));
  color: var(--orange);
}

html[data-theme="dark"] .state-chip.status-absent {
  background: color-mix(in srgb, var(--red) 18%, var(--surface));
  color: var(--red);
}

html[data-theme="dark"] .state-chip.status-mixed,
html[data-theme="dark"] .tag-pill {
  background: color-mix(in srgb, var(--tag-color, var(--violet)) 18%, var(--surface));
}

html[data-theme="dark"] .score-chart {
  background:
    linear-gradient(180deg, transparent 49%, rgb(71 85 105 / 0.62) 50%, transparent 51%),
    linear-gradient(90deg, var(--surface), var(--surface-soft));
}

html[data-theme="dark"] .portal-screen {
  background:
    radial-gradient(circle at 20% 0%, rgb(139 132 255 / 0.2), transparent 34%),
    linear-gradient(180deg, #08111f 0%, var(--bg) 58%);
}

html[data-theme="dark"] .portal-login-copy,
html[data-theme="dark"] .portal-student-dashboard-card,
html[data-theme="dark"] .portal-announcement-home-card,
html[data-theme="dark"] .portal-announcement-detail-card,
html[data-theme="dark"] .portal-notification-card,
html[data-theme="dark"] .portal-ai-comment-card,
html[data-theme="dark"] .portal-ai-card,
html[data-theme="dark"] .portal-ai-answer-card,
html[data-theme="dark"] .portal-home-hero,
html[data-theme="dark"] .portal-home-message,
html[data-theme="dark"] .portal-dashboard-message,
html[data-theme="dark"] .portal-clinic-card,
html[data-theme="dark"] .portal-routine-card,
html[data-theme="dark"] .portal-link-card,
html[data-theme="dark"] .portal-quick-card,
html[data-theme="dark"] .portal-detail-stat,
html[data-theme="dark"] .portal-clinic-progress-summary span,
html[data-theme="dark"] .portal-learning-section,
html[data-theme="dark"] .portal-clinic-date-card,
html[data-theme="dark"] .portal-clinic-time-card,
html[data-theme="dark"] .portal-home-action,
html[data-theme="dark"] .portal-score-chart-card,
html[data-theme="dark"] .portal-exam-analysis-card,
html[data-theme="dark"] .portal-summary-unit-flow {
  background:
    linear-gradient(135deg, rgb(139 132 255 / 0.13), rgb(45 212 191 / 0.04)),
    var(--surface);
}

html[data-theme="dark"] .portal-social-row a,
html[data-theme="dark"] .portal-home-action,
html[data-theme="dark"] .portal-swipe-hint,
html[data-theme="dark"] .portal-announcement-home-card em,
html[data-theme="dark"] .portal-ai-comment-card span,
html[data-theme="dark"] .portal-ai-credit-row span,
html[data-theme="dark"] .portal-math-inline,
html[data-theme="dark"] .portal-math-block,
html[data-theme="dark"] .portal-unit-bars em,
html[data-theme="dark"] .portal-summary-unit-flow em,
html[data-theme="dark"] .portal-question-details summary,
html[data-theme="dark"] .portal-home-message span,
html[data-theme="dark"] .portal-home-message strong,
html[data-theme="dark"] .portal-clinic-card span,
html[data-theme="dark"] .portal-score-chip-row button.active,
html[data-theme="dark"] .portal-radar-legend em,
html[data-theme="dark"] .portal-greeting-date {
  color: #c4b5fd;
}

html[data-theme="dark"] .portal-score-tabs,
html[data-theme="dark"] .portal-learning-tabs,
html[data-theme="dark"] .portal-homework-warning,
html[data-theme="dark"] .portal-question-details,
html[data-theme="dark"] .portal-video-auto-note,
html[data-theme="dark"] .portal-analysis-block {
  background: var(--surface-soft);
}

html[data-theme="dark"] .portal-header-icon-button,
html[data-theme="dark"] .portal-sync-chip,
html[data-theme="dark"] .portal-ai-tabs,
html[data-theme="dark"] .portal-ai-segmented,
html[data-theme="dark"] .portal-ai-answer-body,
html[data-theme="dark"] .portal-ai-quiz-question,
html[data-theme="dark"] .portal-ai-quiz-options button,
html[data-theme="dark"] .portal-notification-summary span {
  background: color-mix(in srgb, #8b5cf6 12%, var(--surface));
}

html[data-theme="dark"] .portal-notification-badge {
  border-color: #141026;
}

html[data-theme="dark"] .portal-notification-card em.unread,
html[data-theme="dark"] .portal-ai-answer-actions .danger {
  color: #f9a8d4;
}

html[data-theme="dark"] .portal-greeting-chips span {
  border-color: color-mix(in srgb, #c4b5fd 22%, var(--border));
  background: color-mix(in srgb, #8b5cf6 13%, var(--surface));
  color: #ddd6fe;
}

html[data-theme="dark"] .portal-greeting-chips span:nth-child(2) {
  border-color: color-mix(in srgb, #fbbf24 22%, var(--border));
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  color: #fde68a;
}

html[data-theme="dark"] .portal-home-action.youtube span {
  color: #fca5a5;
}

html[data-theme="dark"] .portal-home-action.instagram span {
  color: #d8b4fe;
}

.portal-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
}

.portal-video-placeholder h2 {
  margin: 6px 0;
}

.video-access-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.video-access-preview span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
}

.makeup-results {
  margin-top: -6px;
}

.empty-state {
  display: grid;
  min-height: 96px;
  place-items: center;
  border-radius: 24px;
  color: var(--muted);
  text-align: center;
  box-shadow: var(--inset);
}

.login-screen,
.survey-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  background: var(--bg);
  padding: 24px;
}

.guide-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgb(108 99 255 / 0.09), transparent 34%),
    var(--background);
  color: var(--text);
  padding: 26px;
}

.guide-shell {
  display: grid;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.guide-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--surface);
  padding: 22px;
  box-shadow: var(--shadow);
}

.guide-hero h1 {
  margin: 5px 0 8px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
}

.guide-hero p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 760;
}

.guide-hero-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.guide-index {
  position: sticky;
  top: 14px;
  z-index: 4;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  padding: 8px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-small);
}

.guide-index a {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

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

.guide-overview-grid article,
.guide-section {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.guide-overview-grid article {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.guide-overview-grid span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.guide-overview-grid strong {
  font-size: 18px;
  font-weight: 950;
}

.guide-overview-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.guide-content {
  display: grid;
  gap: 14px;
}

.guide-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.46fr);
  gap: 16px;
  padding: 18px;
  scroll-margin-top: 92px;
}

.guide-section-copy h2 {
  margin: 5px 0 8px;
  font-size: clamp(25px, 3vw, 36px);
}

.guide-section-copy > p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 760;
}

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

.guide-control-list article {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 11px 12px;
}

.guide-control-list strong {
  font-weight: 950;
}

.guide-control-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 760;
}

.guide-preview-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface-soft));
  padding: 16px;
}

.guide-preview-top {
  display: flex;
  gap: 5px;
}

.guide-preview-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 55%, var(--surface));
}

.guide-preview-title strong,
.guide-preview-title small {
  display: block;
}

.guide-preview-title strong {
  font-size: 24px;
  font-weight: 950;
}

.guide-preview-title small {
  color: var(--muted);
  font-weight: 850;
}

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

.guide-preview-grid span {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 900;
}

.guide-preview-grid span.active {
  border-color: rgb(108 99 255 / 0.34);
  background: var(--primary-gradient);
  color: #ffffff;
}

.login-card {
  display: grid;
  width: min(440px, 100%);
  gap: 18px;
  border-radius: 32px;
  background: var(--surface);
  padding: 28px;
  box-shadow: var(--shadow);
}

.survey-card {
  width: min(600px, 100%);
}

.login-brand {
  width: 100%;
  min-height: 64px;
  align-items: center;
  border-radius: 24px;
  padding: 10px 14px 10px 10px;
  background: var(--surface);
  box-shadow: none;
}

.survey-card .login-brand {
  margin: 0;
  border-color: var(--border);
}

.survey-card .brand-mark {
  align-self: center;
}

.survey-card .login-brand strong,
.survey-card .login-brand span {
  line-height: 1.25;
}

.form-error {
  margin: 0;
  color: var(--red);
  font-weight: 800;
}

.toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  z-index: 1200;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  border-radius: 999px;
  background: #1f2a64;
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.18);
  box-shadow: 0 14px 32px rgb(31 42 100 / 0.24);
  opacity: 0;
  transform: translate(-50%, -18px) scale(0.98);
  pointer-events: none;
  padding: 14px 22px;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
  transition: opacity 220ms ease-out, transform 260ms ease-out;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

@media (max-width: 720px) {
  .modal-backdrop:has(.message-preview-modal) {
    align-items: start;
    padding: 74px 10px 10px;
  }

  .message-preview-modal {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(100% - 20px, 560px);
    height: calc(100dvh - 84px);
    max-height: calc(100dvh - 84px);
    overflow: hidden;
  }

  .message-preview-modal .message-preview-list {
    min-height: 0;
    overflow: auto;
  }

  .message-preview-modal .modal-actions {
    margin-top: 10px;
    background: var(--surface);
  }
}

@media (max-width: 1180px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .dashboard-grid,
  .two-column,
  .v12-readiness-grid,
  .slot-grid,
  .schedule-grid,
  .calendar-layout,
  .portal-today-panel,
  .portal-dashboard-grid,
  .booking-choice-grid,
  .messages-layout,
  .message-workspace,
  .message-console-grid,
  .message-console-toolbar,
  .message-prep-bar,
  .message-prep-controls,
  .message-review-grid,
  .message-history-grid,
  .excel-recipient-map,
  .variable-map-row,
  .settings-accordion-grid,
  .exam-stat-grid,
  .manual-overview-grid,
  .guide-hero,
  .guide-overview-grid,
  .guide-section,
  .student-detail-hero,
  .student-detail-dock,
  .ui-layout-grid,
  .message-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-form,
  .schedule-form,
  .clinic-block-form,
  .term-form,
  .exam-form,
  .exam-edit-form,
  .class-manage-row,
  .schedule-edit-form,
  .makeup-attendee-form,
  .journal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 18;
    height: auto;
    max-height: none;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    overflow: visible;
  }

  .brand {
    min-height: 48px;
    border-radius: 18px;
    padding: 7px 8px;
    box-shadow: var(--shadow-small);
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
    font-size: 10px;
  }

  .brand span {
    font-size: 12px;
  }

  .app-version-pill {
    align-self: flex-start;
    margin-top: -4px;
    padding: 5px 9px;
  }

  .student-search {
    gap: 7px;
  }

  .nav {
    display: flex;
    gap: 10px;
    margin: 0 -2px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 5px;
    scrollbar-width: thin;
  }

  .nav-group {
    display: grid;
    flex: 0 0 auto;
    gap: 8px;
    width: max-content;
    min-width: 156px;
    border-top: 0;
    padding-top: 0;
  }

  .nav-group-title {
    display: flex;
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 7px 10px;
    box-shadow: var(--shadow-small);
    font-size: 11px;
  }

  .nav-group-items {
    display: flex;
    gap: 8px;
  }

  .nav-group-toggle:not([open]) .nav-group-items {
    display: none;
  }

  .nav-item {
    width: auto;
    min-height: 38px;
    border-radius: 14px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .nav-item span {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 10px;
  }

  .side-panel {
    display: none;
  }

  .manual-card {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    min-height: 42px;
    border-radius: 16px;
    padding: 7px 9px;
  }

  .manual-card .manual-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .manual-card small,
  .manual-card .eyebrow {
    display: none;
  }

  .manual-card strong {
    margin-top: 0;
    font-size: 13px;
  }

  .manual-card em {
    padding: 4px 8px;
  }

  .workspace {
    padding: 18px;
  }

  .topbar,
  .section-head,
  .clinic-main {
    display: grid;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    padding: 13px 14px;
  }

  .topbar h1 {
    margin-top: 2px;
    font-size: 23px;
    line-height: 1.15;
  }

  .topbar .eyebrow {
    font-size: 10px;
  }

  .term-bar {
    margin-top: 7px;
    padding: 4px 8px;
    font-size: 11px;
  }

  .top-actions {
    gap: 7px;
    justify-content: flex-end;
  }

  .top-actions .primary-button,
  .top-actions .ghost-button {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .top-actions .theme-toggle {
    min-height: 34px;
  }

  .top-actions .theme-toggle button {
    min-height: 28px;
    padding: 4px 7px;
  }

  .metric-grid,
  .dashboard-grid,
  .two-column,
  .v12-readiness-grid,
  .calendar-layout,
  .portal-today-panel,
  .portal-action-grid,
  .portal-dashboard-grid,
  .messages-layout,
  .message-workspace,
  .message-console-grid,
  .message-console-toolbar,
  .message-prep-bar,
  .message-prep-controls,
  .message-prep-status,
  .recipient-filter-toolbar,
  .message-review-grid,
  .settings-accordion-grid,
  .message-preview-list,
  .message-preview-stats,
  .exam-stat-grid,
  .message-preview-item,
  .sms-template-save,
  .manual-recipient-form,
  .message-history-grid,
  .excel-recipient-map,
  .variable-map-row,
  .message-settings-form,
  .manual-modal-section,
  .manual-overview-grid,
  .ui-draft-grid,
  .ui-layout-grid,
  .ui-menu-map-row,
  .ui-compare-row,
  .insight-grid,
  .detail-grid,
  .slot-grid,
  .schedule-grid,
  .booking-choice-grid,
  .task-grid,
  .checklist,
  .clinic-fields,
  .video-form,
  .makeup-request-grid,
  .student-form,
  .schedule-form,
  .clinic-block-form,
  .term-form,
  .exam-form,
  .exam-edit-form,
  .schedule-edit-form,
  .makeup-attendee-form,
  .attendance-gate,
  .makeup-day-form,
  .request-banner,
  .journal-form,
  .portal-makeup-row,
  .journal-item {
    grid-template-columns: 1fr;
  }

  .insight-grid.student-detail-metrics {
    grid-template-columns: 1fr;
  }

  .calendar-detail-panel {
    position: static;
  }

  .calendar-layout.mode-day {
    grid-template-columns: 1fr;
  }

  .ops-calendar-grid.mode-day .calendar-date-cell {
    min-height: 220px;
  }

  .portal-screen {
    padding: 10px;
  }

  .portal-shell {
    gap: 10px;
  }

  .portal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
    padding: 10px 12px;
  }

  .portal-header-actions {
    gap: 6px;
  }

  .portal-header-actions .theme-toggle {
    min-height: 34px;
    border-radius: 14px;
  }

  .portal-header-actions .theme-toggle button {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 11px;
  }

  .portal-header h1 {
    margin-top: 1px;
    font-size: 18px;
    line-height: 1.15;
  }

  .portal-header p {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
  }

  .portal-header .eyebrow {
    font-size: 10px;
    letter-spacing: 0;
  }

  .portal-header .ghost-button {
    width: auto;
    min-height: 34px;
    border-radius: 14px;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  .portal-nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(108px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    top: 8px;
    border-radius: 18px;
    padding: 5px;
    scrollbar-width: none;
  }

  .portal-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-nav button {
    min-height: 44px;
    padding: 6px 8px;
  }

  .portal-nav strong {
    font-size: 12px;
  }

  .portal-nav span {
    font-size: 10px;
  }

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

  .portal-home-action.kakao {
    grid-column: 1 / -1;
    width: 100%;
  }

  .portal-home-hero,
  .portal-student-dashboard-card,
  .portal-routine-grid,
  .portal-quick-grid,
  .portal-exam-metrics,
  .portal-clinic-progress-summary,
  .portal-homework-detail-grid,
  .portal-summary-metrics {
    grid-template-columns: 1fr;
  }

  .portal-home-hero {
    border-radius: 22px;
    padding: 15px;
  }

  .portal-home-hero h2 {
    font-size: 24px;
  }

  .portal-clinic-carousel {
    grid-auto-columns: minmax(210px, 78%);
  }

  .portal-quick-card {
    min-height: 74px;
  }

  .portal-score-tabs {
    grid-template-columns: 1fr;
  }

  .compact-score-chart {
    height: 160px;
  }

  .score-chart {
    height: 188px;
  }

  .score-point {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .ui-lab-meter {
    justify-items: start;
  }

  .clinic-picker-recommend-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .clinic-picker-recommend-meta {
    grid-template-columns: auto 1fr;
    justify-content: start;
  }

  .clinic-picker-selected {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .slot-console-body,
  .slot-student-row,
  .slot-roster-row {
    grid-template-columns: 1fr;
  }

  .portal-video-placeholder,
  .term-row,
  .clinic-block-head {
    display: grid;
    align-items: stretch;
  }

  .guide-screen {
    padding: 12px;
  }

  .guide-hero,
  .guide-section,
  .guide-overview-grid,
  .student-detail-hero,
  .student-detail-dock,
  .dashboard-today-strip {
    grid-template-columns: 1fr;
  }

  .guide-hero-actions,
  .student-detail-actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  .guide-control-list article,
  .student-detail-attendance-row {
    grid-template-columns: 1fr;
  }

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

  .attendance-guide-body {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .attendance-utility-card {
    border-radius: 18px;
  }

  .attendance-utility-card > summary {
    min-height: 58px;
    padding: 13px 14px;
  }

  .attendance-utility-card > summary strong {
    font-size: 17px;
  }

  .attendance-utility-card > :not(summary) {
    margin: 0 14px 14px;
  }

  .rule-chip-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .clinic-group-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 54px;
    padding: 8px 10px;
  }

  .clinic-summary-student {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .clinic-summary-times {
    grid-column: 1;
    grid-row: 2;
    order: 3;
    min-width: 0;
    white-space: normal;
  }

  .clinic-group-summary > .state-chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .clinic-summary-count {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .clinic-group-summary::after {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }

  .clinic-subbooking {
    grid-template-columns: 1fr;
  }

  .clinic-subbooking-head {
    display: grid;
    align-items: start;
  }

  .clinic-subbooking-tools {
    min-width: 0;
  }

  .clinic-subbooking-tools select {
    width: 100%;
  }

  .clinic-change-request,
  .clinic-subbooking-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .clinic-group-review {
    grid-template-columns: max-content minmax(0, 1fr);
  }

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

  .video-card > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 7px;
    min-height: 64px;
    padding: 9px 12px;
  }

  .video-card > summary > div {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 4px 7px;
    min-width: 0;
  }

  .video-card > summary h2,
  .video-card > summary p {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .video-card > summary h2 {
    margin: 1px 0 0;
  }

  .video-card > summary p {
    margin: 0;
    line-height: 1.45;
    white-space: normal;
  }

  .video-card-summary-action {
    min-height: 28px;
    padding-inline: 7px;
    font-size: 10px;
  }

  .video-card-summary-actions {
    grid-column: 1;
    justify-self: end;
    padding-left: 0;
  }

  .video-manual-form {
    grid-template-columns: 1fr;
  }

  .video-manual-form label {
    min-width: 0;
  }

  .video-manual-form .primary-button {
    width: 100%;
    white-space: normal;
  }

  .video-card .video-form .wide {
    grid-column: 1 / -1;
  }

  .video-card .checklist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .clinic-summary-count {
    justify-self: start;
  }

  .timeline-item,
  .student-row,
  .student-card,
  .booking-row,
  .queue-row,
  .action-row,
  .class-settings-row,
  .compact-card {
    grid-template-columns: 1fr;
  }

  .student-row.dashboard-priority-row {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .logo-upload-card {
    grid-template-columns: 1fr;
  }

  .settings-section-inline {
    display: grid;
  }

  .modal-backdrop {
    align-items: start;
    padding: 14px;
  }

  .message-console-head,
  .pane-head,
  .message-review-head {
    display: grid;
  }

  .message-prep-status {
    justify-content: stretch;
    min-width: 0;
  }

  .message-prep-status small,
  .message-prep-status > span,
  .message-preview-button {
    justify-self: stretch;
    width: 100%;
  }

  .message-prep-status small {
    white-space: normal;
  }

  .message-console-pane {
    min-height: auto;
    border: 1px solid var(--border);
  }

  .message-console-pane:last-child {
    border-bottom: 1px solid var(--border);
  }

  .billboard-preview-shell {
    padding: 10px;
  }

  .billboard-sheet {
    min-width: 720px;
    padding: 22px;
  }

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

  .billboard-compact-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .billboard-tag-inputs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar {
    grid-template-columns: 1fr;
  }

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

  .dashboard-summary-row {
    grid-template-columns: 1fr;
  }

  .dashboard-welcome-panel {
    padding: 12px 14px;
  }

  .dashboard-welcome-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

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

  .video-card .video-form {
    grid-template-columns: 1fr;
  }

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

  .clinic-subbooking,
  .clinic-group-review {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .video-card .checklist {
    grid-template-columns: 1fr;
  }
}

/* Guide manual page - overrides the old hero-style guide with a document layout. */
.guide-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent-secondary) 10%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, var(--bg)), var(--bg));
  color: var(--text);
  padding: 24px;
}

.guide-shell {
  display: grid;
  gap: 16px;
  width: min(1260px, 100%);
  margin: 0 auto;
}

.guide-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(16px);
  padding: 12px 14px;
}

.guide-brand {
  width: auto;
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-decoration: none;
}

.guide-brand strong,
.guide-brand span {
  display: block;
}

.guide-brand strong {
  font-size: 15px;
}

.guide-brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.guide-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.guide-layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.guide-sidebar {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.guide-sidebar-card,
.guide-principles,
.guide-title-card,
.guide-basics-grid article,
.guide-detail-section {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-small);
}

.guide-sidebar-card {
  display: grid;
  gap: 5px;
  border-radius: 22px;
  padding: 16px;
}

.guide-sidebar-card strong {
  font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
  font-size: 19px;
  line-height: 1.15;
}

.guide-sidebar-card small,
.guide-principles li {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.guide-menu {
  display: grid;
  gap: 7px;
}

.guide-menu a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 82%, var(--surface-soft));
  color: var(--text);
  padding: 9px 11px;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.guide-menu a:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
  transform: translateY(-1px);
}

.guide-menu a span {
  grid-row: 1 / span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  box-shadow: var(--primary-shadow);
}

.guide-menu a strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-menu a small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-principles {
  display: grid;
  gap: 10px;
  border-radius: 22px;
  padding: 16px;
}

.guide-principles strong {
  font-size: 14px;
  font-weight: 950;
}

.guide-principles ul,
.guide-note-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 17px;
}

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

.guide-title-card {
  display: grid;
  gap: 12px;
  border-radius: 28px;
  padding: 26px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface) 95%, transparent);
}

.guide-title-card h1 {
  margin: 0;
  font-size: clamp(31px, 4vw, 43px);
  line-height: 1.08;
}

.guide-title-card p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.65;
}

.guide-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.guide-summary-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 900;
}

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

.guide-basics-grid article {
  display: grid;
  gap: 6px;
  border-radius: 20px;
  padding: 15px;
}

.guide-basics-grid span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.guide-basics-grid strong {
  font-size: 17px;
  font-weight: 950;
  line-height: 1.25;
}

.guide-basics-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.55;
}

.guide-content {
  display: grid;
  gap: 12px;
}

.guide-detail-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  border-radius: 24px;
  padding: 18px;
  scroll-margin-top: 20px;
}

.guide-section-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.guide-section-head > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), color-mix(in srgb, var(--accent-secondary) 12%, var(--surface)));
  color: var(--accent);
  font-weight: 950;
}

.guide-section-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.guide-section-head h2 {
  margin: 3px 0 6px;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.14;
}

.guide-section-head p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.6;
}

.guide-section-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
  gap: 10px;
}

.guide-section-column {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  padding: 14px;
}

.guide-section-column h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.guide-step-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.guide-step-list li {
  position: relative;
  min-height: 31px;
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px 8px 38px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.5;
  counter-increment: guide-step;
}

.guide-step-list li::before {
  content: counter(guide-step);
  position: absolute;
  top: 8px;
  left: 9px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.guide-control-list {
  display: grid;
  gap: 7px;
}

.guide-control-list article {
  display: grid;
  grid-template-columns: minmax(104px, 0.32fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 11px;
}

.guide-control-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.35;
}

.guide-control-list span,
.guide-note-card li,
.guide-done-card p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.55;
}

.guide-note-card {
  border-color: color-mix(in srgb, var(--amber) 20%, var(--border));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.guide-done-card {
  border-color: color-mix(in srgb, var(--accent-secondary) 22%, var(--border));
  background: color-mix(in srgb, var(--accent-secondary) 8%, var(--surface));
}

.guide-done-card p {
  margin: 0;
  color: var(--text);
  font-weight: 780;
}

html[data-theme="dark"] .guide-screen {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent-secondary) 12%, transparent), transparent 32%),
    linear-gradient(180deg, #08111f 0%, var(--bg) 46%);
}

html[data-theme="dark"] .guide-topbar,
html[data-theme="dark"] .guide-sidebar-card,
html[data-theme="dark"] .guide-principles,
html[data-theme="dark"] .guide-title-card,
html[data-theme="dark"] .guide-basics-grid article,
html[data-theme="dark"] .guide-detail-section {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

html[data-theme="dark"] .guide-section-column,
html[data-theme="dark"] .guide-menu a {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

html[data-theme="dark"] .guide-step-list li,
html[data-theme="dark"] .guide-control-list article {
  background: var(--surface);
}

@media (max-width: 1080px) {
  .guide-layout {
    grid-template-columns: 1fr;
  }

  .guide-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .guide-menu {
    display: grid;
    grid-auto-columns: minmax(170px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .guide-principles {
    display: none;
  }
}

@media (max-width: 760px) {
  .guide-screen {
    padding: 10px;
  }

  .guide-topbar,
  .guide-topbar-actions {
    align-items: stretch;
  }

  .guide-topbar {
    display: grid;
    gap: 10px;
  }

  .guide-topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .guide-title-card {
    border-radius: 22px;
    padding: 20px;
  }

  .guide-title-card h1 {
    font-size: 30px;
  }

  .guide-basics-grid,
  .guide-section-body,
  .guide-control-list article {
    grid-template-columns: 1fr;
  }

  .guide-detail-section {
    border-radius: 20px;
    padding: 14px;
  }

  .guide-section-head {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .guide-section-head > span {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .guide-section-head h2 {
    font-size: 23px;
  }
}

@media (max-width: 860px) {
  .student-detail-hero {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border-radius: 20px;
    padding: 13px;
  }

  .student-detail-avatar {
    width: 50px;
    height: 50px;
    border-radius: 17px;
    font-size: 21px;
  }

  .student-detail-title h2 {
    margin-top: 0;
    font-size: 25px;
    line-height: 1.12;
  }

  .student-detail-title p {
    font-size: 13px;
    line-height: 1.35;
  }

  .student-detail-contact {
    gap: 5px;
    margin-top: 8px;
  }

  .student-detail-contact span,
  .student-detail-contact a {
    min-height: 26px;
    max-width: 100%;
    padding: 5px 8px;
    font-size: 11px;
  }

  .student-detail-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .student-detail-actions .primary-button,
  .student-detail-actions .ghost-button {
    width: 100%;
  }

  .student-detail-attendance-row {
    grid-template-columns: minmax(0, 1fr) 70px;
    column-gap: 8px;
    row-gap: 11px;
    padding: 10px;
  }

  .student-detail-attendance-date {
    grid-column: 1;
  }

  .student-detail-attendance-status {
    grid-column: 2;
    justify-items: end;
  }

  .student-detail-attendance-row > div:not(.student-detail-attendance-date):not(.student-detail-attendance-status),
  .student-detail-attendance-row > p {
    grid-column: 1 / -1;
  }

  .student-detail-attendance-status .state-chip {
    width: 62px;
  }
}

@media (max-width: 460px) {
  .student-detail-actions {
    grid-template-columns: 1fr;
  }
}

/* v1.1 guide rewrite: clean docs-style manual inspired by compact help centers. */
.guide-screen {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, var(--bg)) 0%, var(--bg) 36%),
    var(--bg);
  color: var(--text);
  overflow-x: clip;
  padding: 18px;
}

.guide-doc-shell {
  display: grid;
  gap: 16px;
  width: min(1320px, 100%);
  margin: 0 auto;
}

.guide-doc-topbar {
  position: sticky;
  top: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 9px 10px;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-small);
}

.guide-doc-brand {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 2px;
  text-decoration: none;
}

.guide-doc-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  border-radius: 15px;
  font-size: 10px;
}

.guide-doc-brand > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.guide-doc-brand strong,
.guide-doc-brand > div:last-child > span {
  display: block;
}

.guide-doc-brand strong {
  color: #111827;
  font-size: 14px;
  line-height: 1.15;
}

html[data-theme="dark"] .guide-doc-brand strong {
  color: var(--text);
}

.guide-doc-brand > div:last-child > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
}

.guide-doc-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.guide-doc-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  min-width: 0;
}

.guide-doc-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--muted);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.guide-doc-admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-gradient);
  box-shadow: var(--primary-shadow);
  color: #fff;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 950;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}

.guide-doc-admin-button:hover {
  box-shadow: 0 12px 22px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-1px);
}

.guide-doc-layout {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.guide-global-search {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
}

.guide-global-search-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, var(--border));
  border-radius: 8px;
  background: var(--accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 24%, transparent);
  color: #fff;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
}

.guide-global-search-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  width: min(390px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 110px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, var(--border));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--text) 22%, transparent);
}

.guide-global-search-panel[hidden] {
  display: none;
}

.guide-global-search-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 13px 14px 11px;
}

.guide-global-search-panel > header > div {
  display: grid;
  gap: 2px;
}

.guide-global-search-panel > header strong {
  font-size: 14px;
  font-weight: 950;
}

.guide-global-search-panel > header span,
.guide-global-search-panel > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.guide-global-search-panel > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 4px;
}

.guide-global-search-panel input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
}

.guide-global-search-panel kbd {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  padding: 3px 5px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
}

.guide-global-search-panel > small {
  padding: 0 13px 8px;
}

.guide-global-search-results {
  display: grid;
  overflow: auto;
  border-top: 1px solid var(--border);
  scrollbar-width: thin;
}

.guide-global-search-results a {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 10px 13px;
  text-decoration: none;
}

.guide-global-search-results a[hidden] {
  display: none;
}

.guide-global-search-results a:last-child {
  border-bottom: 0;
}

.guide-global-search-results a:hover,
.guide-global-search-results a:focus-visible {
  outline: 0;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.guide-global-search-results strong {
  font-size: 12px;
  font-weight: 950;
}

.guide-global-search-results span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-global-search-trigger kbd {
  border: 1px solid color-mix(in srgb, #fff 48%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, #fff 13%, transparent);
  color: inherit;
  padding: 3px 6px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.guide-global-search-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 32px color-mix(in srgb, var(--accent) 30%, transparent);
}

.guide-global-search-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
  outline-offset: 3px;
}

.guide-doc-sidebar {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-height: calc(100vh - 102px);
  overflow: auto;
  padding: 4px 4px 20px 0;
  scrollbar-width: thin;
}

.guide-doc-home {
  display: grid;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 4px 2px 14px;
  text-decoration: none;
}

.guide-doc-home strong {
  font-size: 17px;
  font-weight: 950;
}

.guide-doc-home span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.55;
}

.guide-doc-nav {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.guide-doc-nav section {
  display: grid;
  gap: 4px;
}

.guide-doc-nav h2 {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.2;
  text-transform: uppercase;
}

.guide-doc-nav a {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  color: var(--text);
  padding: 7px 8px;
  text-decoration: none;
}

.guide-doc-nav a:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.guide-doc-nav a span {
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

.guide-doc-nav a small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

.guide-doc-reference {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.guide-doc-reference span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.guide-doc-reference a {
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.guide-doc-reference a:hover {
  color: var(--accent);
}

.guide-doc-main {
  display: grid;
  min-width: 0;
  gap: 22px;
  padding-bottom: 54px;
}

.guide-doc-hero {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 42px 0 28px;
}

.guide-doc-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: keep-all;
}

.guide-doc-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 720;
  line-height: 1.75;
}

.guide-doc-search-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: min(720px, 100%);
  gap: 8px 12px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px 14px;
  box-shadow: var(--shadow-small);
}

.guide-doc-search-note strong {
  font-size: 13px;
  font-weight: 950;
}

.guide-doc-search-note span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.guide-doc-search-note kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.guide-doc-search {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  max-width: 720px;
}

.guide-doc-search > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.guide-doc-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  letter-spacing: 0;
}

.guide-doc-search input:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.guide-doc-search small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.guide-doc-start-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.guide-doc-start-grid article {
  display: grid;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-small);
}

.guide-doc-start-grid span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.guide-doc-start-grid strong {
  font-size: 17px;
  font-weight: 950;
}

.guide-doc-start-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.6;
}

.guide-doc-path {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--surface));
  padding: 18px;
}

.guide-doc-path h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.guide-doc-path ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: daily-path;
}

.guide-doc-path li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 122px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 40px 12px 12px;
  counter-increment: daily-path;
}

.guide-doc-path li::before {
  content: counter(daily-path);
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
}

.guide-doc-path li strong {
  font-size: 14px;
  font-weight: 950;
}

.guide-doc-path li span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.guide-doc-content {
  display: grid;
  gap: 42px;
}

.guide-doc-section {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--border);
  padding-top: 34px;
  scroll-margin-top: 92px;
}

.guide-doc-section-head {
  display: grid;
  gap: 8px;
}

.guide-doc-section-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.guide-doc-section-kicker span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.guide-doc-section-head h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.16;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: keep-all;
}

.guide-doc-section-head p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.7;
}

.guide-doc-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.guide-actual-screen-link {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.guide-actual-screen {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: top center;
}

.guide-doc-article {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.guide-doc-main,
.guide-doc-content,
.guide-doc-section,
.guide-doc-section-grid,
.guide-doc-callout,
.guide-doc-block,
.guide-doc-note-grid > div,
.guide-screenshot,
.guide-shot-window {
  max-width: 100%;
  min-width: 0;
}

.guide-doc-callout,
.guide-doc-block,
.guide-doc-note-grid > div {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 16px;
}

.guide-doc-callout {
  display: grid;
  gap: 7px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.guide-doc-callout strong,
.guide-doc-block h3,
.guide-doc-note-grid h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 950;
}

.guide-doc-callout p,
.guide-doc-note-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.65;
}

.guide-doc-block {
  display: grid;
  gap: 12px;
}

.guide-doc-steps {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.guide-doc-steps li {
  padding-left: 2px;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.65;
}

.guide-doc-field-list {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.guide-doc-field-list article {
  display: grid;
  grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr);
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
  padding: 12px 14px;
}

.guide-doc-field-list article:last-child {
  border-bottom: 0;
}

.guide-doc-field-list strong {
  min-width: 0;
  font-size: 13px;
  font-weight: 950;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.guide-doc-field-list span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.guide-doc-hero p,
.guide-doc-search-note span,
.guide-doc-start-grid strong,
.guide-doc-start-grid p,
.guide-doc-path h2,
.guide-doc-path li strong,
.guide-doc-path li span,
.guide-doc-section-kicker span,
.guide-doc-section-head p,
.guide-doc-callout p,
.guide-doc-block h3,
.guide-doc-steps li,
.guide-doc-note-grid h3,
.guide-doc-note-grid li,
.guide-doc-note-grid p,
.guide-screenshot figcaption strong,
.guide-screenshot figcaption span,
.guide-shot-head strong,
.guide-shot-head small,
.guide-shot-metrics span,
.guide-shot-rows strong,
.guide-shot-rows small,
.guide-shot-rows em {
  overflow-wrap: break-word;
  word-break: keep-all;
}

.guide-doc-note-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.guide-doc-note-grid > div:first-child {
  border-color: color-mix(in srgb, var(--amber) 22%, var(--border));
  background: color-mix(in srgb, var(--amber) 6%, var(--surface));
}

.guide-doc-note-grid > div:last-child {
  border-color: color-mix(in srgb, var(--accent-secondary) 24%, var(--border));
  background: color-mix(in srgb, var(--accent-secondary) 6%, var(--surface));
}

.guide-doc-note-grid ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding-left: 17px;
}

.guide-doc-note-grid li {
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.55;
}

.guide-screenshot {
  position: sticky;
  top: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
  gap: 18px;
  align-items: start;
  margin: 0;
}

.guide-capture {
  display: grid;
  gap: 10px;
  margin: 0;
}

.guide-capture figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
}

.guide-capture figcaption strong {
  font-size: 13px;
  font-weight: 950;
}

.guide-capture figcaption span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.guide-structure-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.guide-structure-preview > header {
  display: grid;
  gap: 3px;
}

.guide-structure-preview > header strong {
  font-size: 13px;
  font-weight: 950;
}

.guide-structure-preview > header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.guide-shot-window {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.guide-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
  padding: 9px 12px;
}

.guide-shot-bar i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 34%, var(--surface));
}

.guide-shot-bar i:nth-of-type(1) {
  background: #ff5f57;
}

.guide-shot-bar i:nth-of-type(2) {
  background: #ffbd2e;
}

.guide-shot-bar i:nth-of-type(3) {
  background: #28c840;
}

.guide-shot-bar span {
  overflow: hidden;
  margin-left: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-shot-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.guide-shot-head {
  display: grid;
  gap: 4px;
}

.guide-shot-head strong {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.2;
}

.guide-shot-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.guide-shot-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guide-shot-metrics span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-soft));
  color: var(--accent);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 950;
}

.guide-shot-rows {
  display: grid;
  gap: 7px;
}

.guide-shot-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
  padding: 10px;
}

.guide-shot-rows span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.guide-shot-rows strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-shot-rows small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-shot-rows em {
  display: grid;
  min-width: 42px;
  min-height: 25px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

html[data-theme="dark"] .guide-doc-topbar,
html[data-theme="dark"] .guide-doc-search-note,
html[data-theme="dark"] .guide-doc-start-grid article,
html[data-theme="dark"] .guide-doc-path,
html[data-theme="dark"] .guide-doc-callout,
html[data-theme="dark"] .guide-doc-block,
html[data-theme="dark"] .guide-doc-note-grid > div,
html[data-theme="dark"] .guide-shot-window {
  background: var(--surface);
}

html[data-theme="dark"] .guide-doc-field-list article,
html[data-theme="dark"] .guide-shot-bar,
html[data-theme="dark"] .guide-shot-rows > div {
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

@media (max-width: 1180px) {
  .guide-doc-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }

  .guide-doc-path ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-doc-section-grid {
    grid-template-columns: 1fr;
  }

  .guide-screenshot {
    position: static;
  }
}

@media (max-width: 860px) {
  .guide-screen {
    padding: 10px;
  }

  .guide-doc-topbar {
    position: static;
    display: grid;
  }

  .guide-doc-meta {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .guide-doc-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .guide-doc-topbar-actions > * {
    flex: 1 1 150px;
  }

  .guide-doc-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .guide-doc-sidebar {
    position: static;
    order: 2;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .guide-doc-main {
    order: 1;
  }

  .guide-global-search-trigger {
    min-height: 40px;
  }

  .guide-global-search {
    right: 12px;
    bottom: 12px;
  }

  .guide-global-search-panel {
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
  }

  .guide-screenshot {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide-doc-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  .guide-doc-nav section {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    padding: 12px;
  }

  .guide-doc-reference {
    display: none;
  }

  .guide-doc-hero {
    padding-top: 18px;
  }

  .guide-doc-hero h1 {
    font-size: 30px;
  }

  .guide-doc-start-grid,
  .guide-doc-path ol,
  .guide-doc-note-grid,
  .guide-doc-field-list article {
    grid-template-columns: 1fr;
  }

  .guide-doc-section {
    gap: 14px;
    padding-top: 28px;
    scroll-margin-top: 18px;
  }

  .guide-doc-section-head h2 {
    font-size: 25px;
  }

  .guide-doc-field-list {
    gap: 8px;
    border: 0;
    overflow: visible;
  }

  .guide-doc-field-list article {
    border: 1px solid var(--border);
    border-radius: 14px;
  }
}

/* v1.2.0: OMR grading and video library */
.subject-hero-panel,
.omr-hero-panel,
.video-library-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    var(--surface);
}

.subject-metric-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.subject-metric-row span,
.subject-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 7px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.subject-metric-row strong,
.subject-code-pill {
  color: var(--text);
}

.subject-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(100%, 360px);
}

.subject-detail-actions .ghost-button,
.subject-detail-actions .subject-code-pill {
  min-height: 32px;
}

.subject-detail-actions .ghost-button {
  padding-inline: 11px;
}

.subject-priority-panel {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 10px;
}

.subject-priority-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subject-priority-head strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 940;
}

.subject-priority-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.subject-priority-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  padding: 5px 9px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 940;
}

.subject-priority-list {
  display: grid;
  gap: 6px;
}

.subject-priority-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto) minmax(180px, .8fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.subject-priority-list button:hover,
.subject-priority-list button.selected {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.subject-priority-list button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subject-priority-list strong,
.subject-priority-list small,
.subject-priority-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-priority-list strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 930;
}

.subject-priority-list small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
}

.subject-priority-list b {
  justify-self: start;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
  padding: 5px 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.subject-priority-list button.warn b {
  background: color-mix(in srgb, var(--orange) 14%, var(--surface-soft));
  color: var(--orange);
}

.subject-priority-list button.pending b {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface-soft));
  color: var(--blue);
}

.subject-priority-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.subject-workbench {
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.75fr);
  gap: 16px;
  align-items: start;
}

.video-library-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.subject-list-panel,
.subject-detail-panel,
.video-register-panel,
.video-list-panel,
.omr-setup-panel {
  min-width: 0;
}

.subject-list-panel,
.subject-detail-panel {
  align-self: start;
}

.subject-workbench > .panel + .panel {
  margin-top: 0;
}

.subject-builder-head {
  margin-bottom: 12px;
}

.compact-label {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.subject-list,
.unit-list,
.manual-student-list {
  display: grid;
  gap: 8px;
}

.manual-student-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -2px 0 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 7px 9px;
}

.manual-student-selection-summary strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 940;
}

.manual-student-selection-summary span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-empty-guide {
  display: grid;
  place-items: stretch;
  gap: 13px;
  min-height: 0;
  padding: 16px;
  text-align: left;
}

.subject-empty-guide header {
  display: grid;
  gap: 5px;
}

.subject-empty-guide strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.subject-empty-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 730;
  line-height: 1.45;
}

.subject-empty-guide ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subject-empty-guide li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 8px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.subject-empty-guide li b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

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

.subject-empty-guide.compact {
  padding: 14px;
}

.subject-row,
.unit-row,
.manual-student-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 11px;
  text-align: left;
  box-shadow: var(--shadow-small);
}

.subject-row.selected,
.unit-row.selected {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.subject-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--subject-color, var(--accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--subject-color, var(--accent)) 14%, transparent);
}

.subject-row strong,
.unit-row strong,
.unit-leaf strong,
.manual-student-row strong {
  display: block;
  font-size: 14px;
}

.subject-row small,
.unit-row small,
.unit-leaf small,
.manual-student-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.subject-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.subject-row-meta em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface));
  padding: 3px 7px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.subject-row-meta em.done {
  border-color: color-mix(in srgb, var(--green) 20%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.subject-row-meta em.pending {
  opacity: .78;
}

.subject-row-meta b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.compact-details {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
  overflow: clip;
}

.compact-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--text);
  font-weight: 850;
}

.compact-details > :not(summary) {
  margin: 0 14px 14px;
}

.subject-add-grid,
.subject-edit-strip,
.unit-add-row,
.video-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.subject-edit-strip {
  grid-template-columns: minmax(150px, 1.1fr) minmax(94px, .5fr) minmax(74px, .35fr) auto;
  margin-bottom: 12px;
}

.subject-path-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px 10px;
}

.form-hint.subject-hierarchy-hint {
  margin: 0 0 var(--space-2);
}

.subject-path-strip > strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.subject-path-strip > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.subject-path-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.subject-path-strip span.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.subject-path-strip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.subject-tool-deck {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.subject-tool-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.subject-tool-deck .subject-unit-search-panel,
.subject-tool-deck .subject-bulk-unit-panel {
  margin-bottom: 0;
}

.subject-tool-deck .compact-details {
  margin-top: 0;
  width: 100%;
}

.subject-tool-deck .compact-details > summary {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
  gap: 12px;
  min-height: 40px;
  padding: 9px 14px;
}

.subject-tool-deck .compact-details > summary span,
.subject-tool-deck .compact-details > summary small {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-tool-deck .compact-details > summary span {
  color: var(--text);
  font-weight: 920;
}

.subject-tool-deck .compact-details > summary small {
  color: var(--muted);
  font-weight: 780;
  text-align: right;
}

.subject-unit-search-panel {
  margin-bottom: 14px;
}

.subject-unit-search-panel > summary {
  gap: 12px;
}

.subject-unit-search-panel > summary span {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 930;
}

.subject-unit-search-panel > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-unit-search-body {
  display: grid;
  gap: 8px;
}

.subject-unit-search-input {
  display: block;
}

.subject-unit-search-input input {
  min-height: 36px;
  padding: 8px 10px;
}

.subject-unit-search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.subject-unit-search-results .empty-state {
  grid-column: 1 / -1;
}

.subject-unit-search-row {
  display: grid;
  grid-template-columns: auto minmax(0, .72fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 7px 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.subject-unit-search-row.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.subject-unit-search-row span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.subject-unit-search-row strong,
.subject-unit-search-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-unit-search-row strong {
  font-size: 12px;
  font-weight: 900;
}

.subject-unit-search-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.subject-bulk-unit-panel {
  margin: 0;
}

.subject-tool-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
  padding: 8px 10px 8px 14px;
}

.subject-tool-action-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subject-tool-action-row strong,
.subject-tool-action-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-tool-action-row strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.subject-tool-action-row small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.subject-bulk-unit-modal {
  width: min(760px, 100%);
}

.subject-bulk-unit-body {
  display: grid;
  gap: 10px;
}

.subject-bulk-unit-body label {
  display: grid;
  gap: 6px;
}

.subject-bulk-unit-body label > span,
.subject-bulk-unit-body label > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.subject-bulk-unit-body label > small {
  font-weight: 760;
}

.subject-bulk-unit-body textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.5;
}

.subject-bulk-unit-help {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.subject-bulk-unit-help span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.subject-bulk-unit-help b {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.unit-builder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.unit-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 462px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 50%, var(--surface));
  padding: 12px;
}

.unit-list {
  align-content: start;
  min-height: 0;
  max-height: 348px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.unit-column-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.unit-column-head small {
  color: var(--muted);
  font-weight: 800;
}

.unit-row {
  grid-template-columns: minmax(0, 1fr);
  height: 58px;
  min-height: 58px;
  box-shadow: none;
}

.unit-row strong,
.unit-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-leaf-button {
  cursor: pointer;
}

.unit-leaf {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 10px 12px;
}

.unit-add-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.unit-add-row input:first-child {
  grid-column: auto;
}

.unit-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(150px, .64fr) minmax(180px, .72fr);
  align-items: end;
  gap: var(--space-2);
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: var(--space-3);
}

.unit-editor-head,
.unit-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-editor-head {
  grid-column: 1 / -1;
  justify-content: space-between;
  min-height: 0;
  padding-bottom: var(--space-1);
}

.unit-editor-head span {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.unit-editor-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.unit-editor label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.unit-editor input {
  min-height: 34px;
  padding: 7px 9px;
}

.unit-editor textarea {
  min-height: 66px;
  resize: vertical;
}

.unit-editor-description {
  grid-column: 1 / -1;
}

.unit-editor-description textarea {
  min-height: 70px;
}

.unit-code-display {
  display: grid;
  gap: 4px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 6px var(--space-2);
}

.unit-code-display b {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.unit-code-display strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.unit-code-display small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-editor-actions {
  grid-column: auto;
  align-self: stretch;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: auto;
  min-width: 0;
  box-sizing: border-box;
}

.unit-editor-actions .mini {
  flex: 1 1 64px;
  min-width: 0;
  max-width: none;
}

.unit-usage-preview {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
  padding: 9px 10px;
}

.unit-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.unit-usage-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.unit-usage-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.unit-usage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.unit-usage-list span,
.unit-usage-list button {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-radius: 12px;
  background: var(--surface);
  padding: 7px 9px;
  color: var(--text);
  text-align: left;
}

.unit-usage-list button {
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.unit-usage-list button:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.unit-usage-list button:active {
  transform: translateY(1px);
}

.unit-usage-list b,
.unit-usage-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-usage-list b {
  color: var(--text);
  font-size: 12px;
  font-weight: 880;
}

.unit-usage-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
}

.video-unit-usage-preview {
  border-color: color-mix(in srgb, var(--violet) 18%, var(--border));
  background: color-mix(in srgb, var(--violet) 5%, var(--surface));
}

.subject-guide-box,
.omr-subject-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 10px 12px;
  color: var(--muted);
}

.subject-guide-box strong,
.omr-subject-summary strong {
  color: var(--text);
}

.omr-readiness-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.omr-readiness-strip span,
.omr-scan-guide,
.omr-review-metrics span {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface));
  color: var(--muted);
}

.omr-readiness-strip span {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 9px 10px;
}

.omr-readiness-strip span.done {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.omr-readiness-strip span.warn {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}

.omr-readiness-strip strong,
.omr-scan-guide strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.omr-readiness-strip small,
.omr-scan-guide small {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-answer-action-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, .9fr));
  gap: 8px;
  margin-top: 10px;
}

.omr-answer-action-strip span,
.omr-answer-action-strip button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.omr-answer-action-strip button {
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.omr-answer-action-strip button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.omr-answer-action-strip button:disabled {
  opacity: .56;
  cursor: not-allowed;
}

.omr-answer-action-strip span.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.omr-answer-action-strip span.warn {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface));
}

.omr-answer-action-strip b,
.omr-answer-action-strip strong,
.omr-answer-action-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-answer-action-strip b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.omr-answer-action-strip strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.omr-answer-action-strip small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
}

.omr-scan-guide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 780;
}

.omr-scan-guide.done {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.omr-scan-guide.warn {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.omr-scan-guide span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-scan-guide em {
  grid-column: 1 / -1;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.omr-commit-policy {
  display: grid;
  grid-template-columns: minmax(160px, 0.36fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 9px 11px;
}

.omr-commit-policy.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.omr-commit-policy span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.omr-commit-policy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.omr-commit-policy small,
.omr-commit-policy em {
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 780;
  line-height: 1.35;
}

.omr-source-file-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: var(--space-3);
}

.omr-source-file-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.omr-source-file-head strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.omr-source-file-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.omr-source-warning {
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 9%, var(--surface));
  padding: 7px 9px;
  color: color-mix(in srgb, var(--amber) 72%, var(--text));
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
}

.omr-source-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}

.omr-source-file-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: var(--space-2);
}

.omr-source-file-grid article.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
}

.omr-source-file-grid article.warn {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
}

.omr-source-file-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.omr-source-file-grid strong,
.omr-source-file-grid small,
.omr-source-file-grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-source-file-grid strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.omr-source-file-grid small,
.omr-source-file-grid em {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 760;
}

.omr-source-file-grid b {
  justify-self: end;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
  padding: 4px 7px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 900;
}

.omr-source-file-grid article.done b {
  background: color-mix(in srgb, var(--green) 11%, var(--surface-soft));
  color: var(--green);
}

.omr-source-file-grid article.warn b {
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-soft));
  color: var(--amber);
}

.omr-source-file-name {
  min-width: 0;
}

.omr-source-file-status {
  justify-self: end;
}

.omr-source-file-action {
  justify-self: end;
  white-space: nowrap;
}

.omr-flow-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.omr-flow-strip span {
  display: grid;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.omr-flow-strip strong {
  color: var(--text);
  font-size: 13px;
}

.omr-flow-strip-detailed span {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.omr-flow-strip-detailed strong {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
}

.omr-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
  gap: 16px;
  align-items: start;
}

.omr-workbench.single {
  grid-template-columns: minmax(0, 1fr);
}

.omr-tool-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.omr-tool-tabs button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  color: var(--muted);
  padding: 9px 10px;
  text-align: left;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.omr-tool-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--violet) 8%, var(--surface)));
  color: var(--text);
  box-shadow: var(--inset-small);
}

.omr-tool-tabs b,
.omr-tool-tabs span,
.omr-tool-tabs small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-tool-tabs b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.omr-tool-tabs span {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-tool-tabs small {
  font-size: 10.5px;
  font-weight: 760;
}

.omr-layout,
.video-library-layout {
  align-items: start;
}

.omr-control-form,
.omr-upload-form,
.video-lesson-form {
  gap: 12px;
}

.omr-answer-editor {
  grid-column: 1 / -1;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
  overflow: clip;
}

.omr-answer-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.omr-answer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.omr-answer-toolbar span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 6px 10px;
}

.omr-answer-score-grade-row {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(330px, .48fr);
  align-items: stretch;
  gap: 8px;
  margin: 12px 16px;
}

.omr-answer-score-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.omr-answer-score-strip span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 8px 10px;
}

.omr-answer-score-strip b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.omr-answer-score-strip strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.omr-answer-score-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.omr-answer-ops-brief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 12px;
}

.omr-answer-ops-brief span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px 10px;
}

.omr-answer-ops-brief span.done {
  border-color: color-mix(in srgb, #16a34a 20%, var(--border));
}

.omr-answer-ops-brief span.warn {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 6%, var(--surface));
}

.omr-answer-ops-brief b,
.omr-answer-ops-brief strong,
.omr-answer-ops-brief small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-answer-ops-brief b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.omr-answer-ops-brief strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-answer-ops-brief small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.exam-gradecut-panel,
.omr-answer-bulk-panel {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
}

.exam-gradecut-panel.inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.exam-gradecut-panel.inline > span {
  display: grid;
  gap: 1px;
  min-width: 54px;
}

.omr-answer-config-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.34fr);
  gap: 10px;
  margin: 0 16px 12px;
  align-items: stretch;
}

.exam-gradecut-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
}

.exam-gradecut-panel > summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.exam-gradecut-panel > summary strong,
.omr-answer-bulk-panel > div strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.exam-gradecut-panel > summary small,
.omr-answer-bulk-panel > div small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.35;
}

.exam-gradecut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 6px;
  padding: 0;
}

.exam-gradecut-grid label {
  gap: 3px;
}

.exam-gradecut-grid input {
  min-height: 30px;
  padding: 5px 7px;
  text-align: center;
}

.omr-answer-bulk-panel {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) 68px 68px repeat(4, minmax(112px, 1fr)) auto;
  align-items: end;
  gap: 8px;
  padding: 12px;
}

.omr-answer-bulk-panel > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.answer-unit-modal {
  width: min(980px, calc(100vw - 40px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.answer-unit-modal.wide {
  width: min(1120px, calc(100vw - 40px));
}

.answer-unit-modal.step {
  width: min(1080px, calc(100vw - 40px));
}

.answer-unit-modal .modal-head.compact {
  margin-bottom: 12px;
  padding-right: 48px;
}

.answer-unit-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.answer-unit-picker button {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 9px 11px;
  text-align: left;
  box-shadow: none;
}

.answer-unit-picker button:hover {
  border-color: color-mix(in srgb, var(--violet) 30%, var(--border));
  background: color-mix(in srgb, var(--violet) 7%, var(--surface));
}

.answer-unit-picker strong,
.answer-unit-picker small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.answer-unit-step-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.answer-unit-step-column > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.answer-unit-step-column > div {
  display: grid;
  gap: 6px;
  max-height: 52vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 8px;
}

.answer-unit-step-column button {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  padding: 7px 8px;
  text-align: left;
  box-shadow: none;
}

.answer-unit-step-column button:hover,
.answer-unit-step-column button.selected {
  border-color: color-mix(in srgb, var(--violet) 24%, var(--border));
  background: color-mix(in srgb, var(--violet) 8%, var(--surface));
}

.answer-unit-step-column button span,
.answer-unit-step-column button small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-unit-step-column button span {
  font-size: 12px;
  font-weight: 880;
}

.answer-unit-step-column button small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 720;
}

.unit-readonly-cell {
  min-width: 0;
}

.unit-readonly-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unit-action-cell {
  text-align: center;
  vertical-align: middle;
}

.unit-setup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 11px;
  white-space: nowrap;
}

.omr-question-grid-input.question-number {
  max-width: 54px;
  text-align: center;
}

.omr-session-control {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 148px 148px minmax(190px, 0.82fr);
  align-items: end;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
}

.omr-exam-picker {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.omr-exam-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(120px, 0.24fr) minmax(220px, 0.48fr);
  align-items: end;
  gap: 8px;
}

.omr-exam-picker-toolbar.compact {
  grid-template-columns: 96px minmax(300px, .85fr) minmax(280px, 1.15fr);
}

.omr-exam-picker-toolbar > strong {
  align-self: center;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.omr-exam-picker-toolbar label {
  min-width: 0;
}

.omr-exam-select-label select {
  font-weight: 820;
}

.omr-exam-empty-state {
  margin: 0;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 760;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.omr-exam-tree {
  max-height: 270px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 8px;
}

.omr-exam-status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.omr-exam-status-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 8px 10px;
}

.omr-exam-status-strip b {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 950;
}

.omr-exam-status-strip strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  line-break: strict;
}

.omr-review-batch-selector {
  margin: -4px 0 12px;
}

.omr-review-batch-selector label {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 7px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.omr-review-batch-selector select {
  min-width: 0;
  min-height: 30px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 820;
}

.omr-upload-inline {
  display: grid;
  grid-template-columns: 136px minmax(360px, 1fr) 132px;
  align-items: end;
  gap: 10px;
}

.omr-upload-inline label,
.omr-manual-inline label {
  min-width: 0;
}

.omr-manual-inline {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 150px auto auto;
  align-items: end;
  gap: 12px;
  max-width: 720px;
}

.omr-manual-inline .primary-button,
.omr-manual-inline .ghost-button {
  min-height: 40px;
  padding-inline: 18px;
  white-space: nowrap;
}

.omr-file-drop {
  min-height: 40px;
  align-content: center;
  justify-items: stretch;
  padding: 4px 9px;
}

.omr-file-drop > span {
  pointer-events: none;
}

.omr-file-drop > span {
  display: block;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  padding: 3px 8px;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-file-drop.dragging {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 14px 30px -22px rgb(108 99 255 / 0.55);
  transform: translateY(-1px);
}

.omr-upload-inline .primary-button {
  min-height: 40px;
  width: 132px;
  padding-inline: 14px;
  white-space: nowrap;
}

.omr-inline-review-panel {
  margin-top: 12px;
}

.omr-inline-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .34fr);
  gap: 12px;
  align-items: start;
}

.omr-inline-source-pane {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.omr-inline-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  min-width: 0;
}

.omr-inline-source-head span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.omr-inline-source-head strong,
.omr-inline-source-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-inline-source-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-inline-source-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.omr-inline-flag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.omr-inline-flag-strip em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--amber) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  color: color-mix(in srgb, var(--amber) 55%, var(--text));
  padding: 2px 7px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 850;
}

.omr-inline-source-image {
  display: grid;
  place-items: center;
  min-height: 420px;
  max-height: 66vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 8px;
}

.omr-inline-source-image img {
  display: block;
  max-width: 100%;
  max-height: calc(66vh - 18px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.omr-inline-source-image img.rotate-cw,
.omr-inline-source-image img.rotate-ccw,
.omr-result-source-preview img.rotate-cw,
.omr-result-source-preview img.rotate-ccw {
  max-width: 100%;
  max-height: calc(66vh - 18px);
  transform-origin: center center;
}

.omr-inline-source-image img.rotate-cw,
.omr-result-source-preview img.rotate-cw {
  transform: rotate(90deg);
}

.omr-inline-source-image img.rotate-ccw,
.omr-result-source-preview img.rotate-ccw {
  transform: rotate(-90deg);
}

.omr-inline-source-image img.rotate-180,
.omr-result-source-preview img.rotate-180 {
  transform: rotate(180deg);
}

.omr-inline-sheet-pane {
  min-width: 0;
}

.omr-inline-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.omr-inline-sheet-title {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.omr-inline-sheet-head span {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-inline-sheet-head small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-inline-sheet-head.manual {
  justify-content: flex-start;
}

.omr-inline-sheet-head.manual .ghost-button {
  margin-left: auto;
}

.omr-inline-sheet-wrap {
  max-height: min(66vh, 590px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.omr-inline-sheet-table {
  width: max-content;
  min-width: max-content;
  table-layout: fixed;
  font-size: 11px;
}

.omr-inline-sheet-table th,
.omr-inline-sheet-table td {
  padding: 3px 2px;
  vertical-align: middle;
  white-space: nowrap;
}

.omr-inline-sheet-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
  text-align: center;
}

.omr-inline-sheet-table .table-sort {
  width: 100%;
  justify-content: center;
  min-height: 22px;
  padding: 2px 4px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--slate) 5%, var(--surface-soft));
  font-size: 10.5px;
}

.omr-inline-sheet-table th:first-child {
  border-top-left-radius: 14px;
}

.omr-inline-sheet-table th:last-child {
  border-top-right-radius: 14px;
}

.omr-inline-sheet-table th:first-child .table-sort {
  border-top-left-radius: 11px;
}

.omr-inline-sheet-table th:last-child .table-sort {
  border-top-right-radius: 11px;
}

.omr-inline-sheet-table th:first-child,
.omr-inline-sheet-table td:first-child {
  width: 34px;
  min-width: 34px;
  padding-inline: 7px 5px;
  text-align: center;
}

.omr-inline-sheet-table th:nth-child(2),
.omr-inline-sheet-table td:nth-child(2) {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
}

.omr-inline-sheet-table th:nth-child(3),
.omr-inline-sheet-table td:nth-child(3) {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
}

.omr-inline-sheet-table th:nth-child(4),
.omr-inline-sheet-table td:nth-child(4) {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  text-align: center;
}

.omr-inline-sheet-table th:nth-child(5),
.omr-inline-sheet-table td:nth-child(5) {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
  text-align: center;
}

.omr-inline-sheet-table th:nth-child(6),
.omr-inline-sheet-table td:nth-child(6) {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

.omr-inline-question-head {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
}

.omr-inline-row-action-head {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  text-align: center;
}

.omr-inline-question-head span,
.omr-inline-question-head small {
  display: block;
  line-height: 1.15;
}

.omr-inline-question-head small {
  margin-top: 2px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 900;
}

.omr-inline-sheet-table tr.selected td {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.omr-inline-sheet-table input {
  width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 3px 5px;
  font-size: 11px;
  font-weight: 760;
}

.omr-inline-sheet-table .omr-inline-name-cell {
  min-width: 118px;
}

.omr-inline-sheet-table .omr-inline-name-cell input {
  text-align: center;
}

.omr-inline-sheet-table td:nth-child(4) input {
  width: 88px;
  text-align: center;
}

.omr-inline-sheet-table .phone-last4 {
  width: 62px;
  text-align: center;
}

.omr-inline-sheet-table .score-output {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-height: 26px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 3px 5px;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.omr-inline-sheet-table .omr-inline-answer-cell {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
}

.omr-inline-answer-cell input {
  width: 30px;
  margin-inline: auto;
  text-align: center;
}

.omr-inline-row-action-cell {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding-inline: 3px !important;
  text-align: center;
}

.omr-inline-row-action-cell .icon-button {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 950;
}

.omr-inline-answer-cell.correct input {
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
}

.omr-inline-answer-cell.partial input,
.omr-inline-answer-cell.manual input {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface));
}

.omr-inline-answer-cell.wrong input,
.omr-inline-answer-cell.empty input {
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.omr-inline-answer-cell.flagged input {
  border-color: color-mix(in srgb, var(--amber) 70%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 35%, transparent);
}

@media (max-width: 1040px) {
  .omr-inline-review-layout {
    grid-template-columns: 1fr;
  }

  .omr-inline-source-image {
    min-height: 300px;
  }
}

.omr-match-modal {
  width: min(640px, 100%);
}

.omr-match-candidate-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.omr-match-candidate-list button {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 9px 12px;
  text-align: left;
}

.omr-match-candidate-list button:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.omr-match-candidate-list button.selected {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.omr-match-candidate-list strong,
.omr-match-candidate-list span,
.omr-match-candidate-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-match-candidate-list strong {
  font-size: 14px;
  font-weight: 920;
}

.omr-match-candidate-list span,
.omr-match-candidate-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.omr-identity-editor {
  display: grid;
  gap: 10px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
}

.omr-identity-inputs {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .45fr);
  gap: 8px;
}

.omr-identity-candidates {
  display: grid;
  gap: 7px;
}

.omr-identity-candidates > strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.omr-identity-candidates > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px;
}

.omr-identity-candidates button {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 9px;
  text-align: left;
  box-shadow: none;
}

.omr-identity-candidates button:hover,
.omr-identity-candidates button.selected {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.omr-identity-candidates span,
.omr-identity-candidates small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-identity-candidates span {
  font-size: 12px;
  font-weight: 900;
}

.omr-identity-candidates small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 740;
}

.omr-identity-linked {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 6px 9px;
}

.omr-identity-linked strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.omr-identity-linked span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-session-control > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "note";
  align-items: center;
  row-gap: 4px;
}

.omr-session-control > span strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-session-control > span small,
.omr-session-control > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
}

.omr-session-control > span small {
  grid-area: note;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-session-control > span select {
  min-width: 0;
  width: 100%;
  min-height: 32px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 760;
}

.omr-session-control > small {
  grid-column: 1 / -1;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.omr-session-control > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.omr-active-session-strip {
  display: grid;
  position: sticky;
  top: 8px;
  z-index: 4;
  grid-template-columns: minmax(240px, 1.35fr) minmax(150px, .85fr) minmax(130px, .72fr) minmax(110px, .58fr);
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  box-shadow: 0 10px 24px -24px rgb(15 23 42 / 0.42);
}

.omr-active-session-strip span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label value"
    "label note";
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 7px 9px;
}

.omr-active-session-strip b {
  grid-area: label;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 950;
  white-space: nowrap;
}

.omr-active-session-strip strong {
  grid-area: value;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 930;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-active-session-strip small {
  grid-area: note;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-unit-summary {
  margin: 0 16px 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface) 58%);
}

.omr-unit-summary > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  cursor: pointer;
  list-style: none;
}

.omr-unit-summary > summary::-webkit-details-marker {
  display: none;
}

.omr-unit-summary > summary::after {
  content: "열기";
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 850;
}

.omr-unit-summary[open] > summary::after {
  content: "접기";
}

.omr-unit-summary > summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.omr-unit-summary > summary strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-unit-summary > summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.omr-unit-summary[open] > div {
  margin-top: 10px;
}

.omr-unit-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.omr-unit-summary-head span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.omr-unit-summary-head strong {
  color: var(--text);
  font-size: 13px;
}

.omr-unit-chip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 7px;
  max-height: 168px;
  overflow: auto;
}

.omr-unit-chip {
  display: grid;
  gap: 2px;
  align-items: center;
  max-width: 100%;
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  font-size: 12px;
  font-weight: 800;
}

.omr-unit-chip small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-unit-chip.muted {
  border-color: var(--border);
  color: var(--muted);
}

.omr-question-table-wrap {
  margin: 0 16px 16px;
}

.omr-question-table {
  min-width: 980px;
  table-layout: fixed;
}

.omr-question-table th,
.omr-question-table td {
  padding: 7px;
}

.omr-question-table th:nth-child(-n + 6),
.omr-question-table td:nth-child(-n + 6) {
  text-align: center;
}

.omr-question-table thead th,
.omr-results-table thead th,
.omr-manual-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface-soft);
}

.omr-question-table th:first-child,
.omr-question-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 4;
}

.omr-question-table thead th:first-child {
  z-index: 7;
}

.omr-question-table td:first-child {
  background: var(--surface);
  box-shadow: none;
}

.omr-question-table input,
.omr-question-table select {
  width: 100%;
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 7px;
  font-size: 12px;
}

.omr-question-table select {
  text-align: center;
  text-align-last: center;
}

.omr-question-table input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.omr-question-table input[type="number"]::-webkit-outer-spin-button,
.omr-question-table input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.omr-question-table .question-no-col {
  width: 48px;
}

.omr-question-table .question-kind-col {
  width: 64px;
}

.omr-question-table .question-answer-col {
  width: 112px;
}

.omr-question-table .question-point-col {
  width: 58px;
}

.omr-question-table .question-difficulty-col {
  width: 58px;
}

.omr-question-table .question-unit-action-col {
  width: 78px;
}

.omr-question-table .question-unit-col {
  width: 132px;
}

.omr-question-table .question-type-col {
  width: 148px;
}

.omr-question-table td:first-child input {
  max-width: 38px;
  margin: 0 auto;
  text-align: center;
}

.omr-question-table td:nth-child(3) input {
  max-width: 96px;
  margin: 0 auto;
  text-align: center;
}

.omr-question-table td:nth-child(4) input {
  max-width: 44px;
  margin: 0 auto;
  text-align: center;
}

.omr-question-table td:nth-child(2) select,
.omr-question-table td:nth-child(5) select {
  margin: 0 auto;
}

.omr-question-table th:first-child,
.omr-question-table td:first-child {
  text-align: center;
}

.omr-question-row.unused td {
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
}

.omr-question-row.unused .unit-readonly-cell span,
.omr-question-row.unused [data-omr-question-field="answer"] {
  opacity: .52;
}

.omr-question-row.unused [data-omr-question-field="no"] {
  color: var(--muted);
}

.omr-question-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}

.omr-question-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 52%, var(--surface));
  padding: 12px;
}

.omr-question-card .inline-fields {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
}

.omr-batch-list,
.video-lesson-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.omr-upload-inline + :is(.omr-empty-guide, .omr-batch-list) {
  margin-top: var(--space-3);
}

.omr-empty-guide {
  display: grid;
  place-items: stretch;
  gap: 13px;
  min-height: 0;
  padding: 16px;
  text-align: left;
}

.omr-empty-guide header {
  display: grid;
  gap: 5px;
}

.omr-empty-guide strong {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.omr-empty-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 730;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.omr-empty-guide ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.omr-empty-guide li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 8px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.omr-empty-guide li span {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

.omr-empty-guide li b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

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

.video-empty-guide {
  display: grid;
  place-items: stretch;
  gap: 14px;
  min-height: 0;
  padding: 18px;
  text-align: left;
}

.video-empty-guide header {
  display: grid;
  gap: 5px;
}

.video-empty-guide strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.video-empty-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.45;
}

.video-empty-guide ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-empty-guide li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.video-empty-guide li b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

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

.video-empty-guide.compact {
  padding: 15px;
}

.video-library-filter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: end;
  gap: 8px;
}

.video-library-filter label {
  min-width: 0;
}

.video-library-filter label:first-child {
  grid-column: span 2;
}

.video-lesson-filter-summary {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.video-lesson-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.video-lesson-filter-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 5px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.video-lesson-filter-chips strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 950;
}

.video-lesson-active-filter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 7px 9px;
}

.video-lesson-filter-summary.has-filters .video-lesson-active-filter {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.video-lesson-active-filter span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.video-lesson-active-filter strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-batch-row,
.video-lesson-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(170px, .54fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  box-shadow: var(--shadow-small);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.omr-batch-row:hover,
.video-lesson-row:hover,
.omr-batch-row.selected,
.video-lesson-row.selected {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.omr-batch-row strong,
.video-lesson-row strong {
  display: block;
  font-size: 14px;
}

.omr-batch-row small,
.video-lesson-row small,
.video-lesson-row em {
  color: var(--muted);
  font-style: normal;
}

.video-lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.video-lesson-meta b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  padding: 3px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.video-lesson-meta b.published {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: var(--green);
}

.video-lesson-meta b.hidden {
  border-color: color-mix(in srgb, var(--red) 20%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
  color: var(--red);
}

.video-lesson-meta b.unit {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--text);
}

.video-lesson-issue-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
  min-width: 0;
}

.video-lesson-issue-badges b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
  padding: 3px 7px 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.video-lesson-issue-badges b.done {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--green);
}

.video-lesson-issue-badges b.warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border));
  background: color-mix(in srgb, var(--orange) 9%, var(--surface));
  color: var(--orange);
}

.video-lesson-issue-badges b.muted {
  border-color: color-mix(in srgb, var(--muted) 22%, var(--border));
  background: color-mix(in srgb, var(--muted) 8%, var(--surface));
  color: var(--muted);
}

.video-lesson-row-ops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}

.video-lesson-row-ops em {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface));
  padding: 6px 7px;
  color: var(--muted);
  font-style: normal;
  text-align: left;
}

.video-lesson-row-ops em.done {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.video-lesson-row-ops em.warn {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-lesson-row-ops b,
.video-lesson-row-ops strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-lesson-row-ops b {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 950;
}

.video-lesson-row-ops strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.video-lesson-row-ops i {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.video-lesson-row-ops i::before {
  content: "";
  display: block;
  width: var(--video-admin-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.omr-review-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.omr-review-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.omr-review-metrics span {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 850;
}

.omr-review-metrics strong {
  color: var(--text);
  font-size: 15px;
}

.omr-review-summary p {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.omr-result-table-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.omr-result-table-guide strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.omr-result-table-guide small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.omr-results-table-wrap {
  max-height: 68vh;
}

.omr-results-table {
  min-width: 1260px;
  table-layout: fixed;
}

.omr-results-table th,
.omr-results-table td {
  padding: 7px;
}

.omr-results-table td {
  vertical-align: middle;
}

.omr-results-table .omr-student-col {
  width: 190px;
}

.omr-results-table th.select-col,
.omr-results-table td.select-col {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}

.omr-results-table th.omr-student-col,
.omr-results-table td.omr-student-col {
  position: sticky;
  left: 38px;
  z-index: 4;
  background: var(--surface);
  box-shadow: 8px 0 14px -14px rgb(15 23 42 / 0.42);
}

.omr-results-table thead th.select-col,
.omr-results-table thead th.omr-student-col {
  z-index: 8;
  background: var(--surface-soft);
}

.omr-student-open {
  justify-content: flex-start;
  min-height: 24px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  padding: 0;
  font-size: 13px;
  font-weight: 930;
}

.omr-answer-head {
  width: 62px;
  text-align: center;
}

.omr-answer-key-row th {
  position: sticky;
  top: 34px;
  z-index: 2;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.omr-answer-head b,
.omr-answer-head small,
.omr-answer-key-head b,
.omr-answer-key-head small {
  display: block;
}

.omr-answer-head b {
  color: var(--text);
  font-size: 12px;
  font-weight: 930;
}

.omr-answer-head small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 760;
}

.omr-answer-key-head {
  width: 62px;
  text-align: center;
}

.omr-answer-key-head b {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.omr-answer-key-head small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 780;
}

.omr-result-answer-cell {
  width: 62px;
  padding: 5px !important;
}

.omr-result-answer-cell button {
  display: grid;
  place-items: center;
  gap: 1px;
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  padding: 3px;
}

.omr-result-answer-cell strong {
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.omr-result-answer-cell small {
  font-size: 9px;
  font-weight: 820;
  line-height: 1;
}

.omr-result-answer-cell.correct button {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  background: color-mix(in srgb, var(--green) 9%, var(--surface));
  color: var(--green);
}

.omr-result-answer-cell.partial button,
.omr-result-answer-cell.review button {
  border-color: color-mix(in srgb, var(--amber) 38%, var(--border));
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  color: var(--amber);
}

.omr-result-answer-cell.wrong button,
.omr-result-answer-cell.empty button {
  border-color: color-mix(in srgb, var(--red) 30%, var(--border));
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
  color: var(--red);
}

.omr-result-detail-row {
  display: none;
}

.omr-result-detail-row.open {
  display: table-row;
}

.omr-result-detail-row td {
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  padding: 12px;
}

.omr-result-answer-editor {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
}

.omr-result-answer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.omr-result-answer-head span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.omr-result-answer-head strong,
.omr-result-note span,
.omr-answer-cell span {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.omr-result-answer-head small {
  max-width: 560px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
}

.omr-result-source-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 10px;
}

.omr-result-source-preview div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.omr-result-source-preview strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.omr-result-source-preview small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-result-source-preview img {
  grid-column: 1 / -1;
  width: auto;
  max-width: 100%;
  max-height: 360px;
  border: 1px solid var(--border);
  border-radius: 12px;
  object-fit: contain;
  background: #ffffff;
}

.omr-review-resolve {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--amber) 7%, var(--surface));
  padding: 8px 10px;
}

.omr-review-resolve strong,
.omr-review-resolve span,
.omr-review-resolve em {
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 8px;
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.omr-review-resolve strong {
  background: color-mix(in srgb, var(--amber) 15%, var(--surface-soft));
  color: var(--amber);
}

.omr-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.omr-answer-cell,
.omr-result-note {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.omr-answer-cell {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  padding: 8px;
}

.omr-answer-cell.correct {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.omr-answer-cell.wrong {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}

.omr-answer-cell.partial,
.omr-answer-cell.manual {
  border-color: color-mix(in srgb, var(--amber) 32%, var(--border));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.omr-answer-cell input,
.omr-result-note input {
  min-height: 34px;
}

.omr-answer-cell small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-template-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.omr-template-gallery.print-only {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.omr-print-guide {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.omr-print-guide span,
.omr-print-guide a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 9px 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.omr-print-guide a {
  justify-content: center;
  color: var(--text);
  text-decoration: none;
}

.omr-print-guide b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 42px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-size: 10.5px;
  font-weight: 950;
}

.omr-print-guide small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-print-document-root,
.omr-print-document-root body {
  background: #fff;
}

.omr-print-page {
  position: relative;
  min-height: 100vh;
  padding: 16px;
  background: #fff;
  color: #111827;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.omr-print-page .omr-sheet {
  position: relative;
  width: 285mm;
  min-height: 198mm;
  margin: 0 auto;
  border: 0.45mm solid #111827;
  padding: 12mm 14mm 10mm;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.omr-print-page .mark {
  position: absolute;
  width: 8.5mm;
  height: 8.5mm;
  background: #000;
}

.omr-print-page .tl { top: 3.5mm; left: 3.5mm; }
.omr-print-page .tr { top: 3.5mm; right: 3.5mm; }
.omr-print-page .bl { bottom: 3.5mm; left: 3.5mm; }
.omr-print-page .br { bottom: 3.5mm; right: 3.5mm; }

.omr-print-page .omr-sheet > header {
  display: grid;
  grid-template-columns: 43mm minmax(0, 1fr) 120mm;
  gap: 3mm;
  min-height: 54mm;
  border: 0.35mm solid #111827;
  padding: 1.6mm;
}

.omr-print-page .brand-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20mm;
  border: 0.35mm solid #111827;
  border-radius: 0;
  color: #111827;
  font-size: 17pt;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.omr-print-page .brand-box::before {
  content: "";
}

.omr-print-page .field-stack {
  display: grid;
  gap: 1.3mm;
  margin-top: 1.6mm;
}

.omr-print-page .write-field,
.omr-print-page .exam-blank,
.omr-print-page .student-box {
  border: 0.28mm solid #111827;
  color: #111827;
}

.omr-print-page .write-field {
  min-height: 8.8mm;
  padding: 1.1mm 1.4mm;
  font-size: 7.2pt;
  font-weight: 900;
}

.omr-print-page .write-field span,
.omr-print-page .exam-blank span,
.omr-print-page .name-field span,
.omr-print-page .short-row span {
  display: block;
  border-bottom: 0.25mm solid #111827;
}

.omr-print-page .write-field span {
  height: 2.8mm;
  margin-top: 2.2mm;
}

.omr-print-page .title-block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  border: 0.28mm solid #111827;
  padding: 2mm;
  text-align: center;
}

.omr-print-page .title-block .eyebrow {
  display: inline-block;
  width: max-content;
  border: 0;
  border-radius: 0;
  padding: 0.7mm 2.6mm;
  background: #111827;
  color: #fff;
  font-size: 7pt;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.omr-print-page h1 {
  margin: 2.5mm 0 1mm;
  color: #111827;
  font-size: 20pt;
  line-height: 1;
  letter-spacing: 0;
}

.omr-print-page .template-meta {
  margin: 0;
  color: #111827;
  font-size: 8pt;
  font-weight: 900;
}

.omr-print-page .exam-blank {
  min-height: 11mm;
  margin-top: 2.5mm;
  padding: 1.2mm 1.6mm;
  font-size: 8pt;
  font-weight: 900;
  text-align: left;
}

.omr-print-page .exam-blank span {
  margin-top: 4mm;
}

.omr-print-page .student-box {
  border-width: 0.3mm;
  border-radius: 0;
  padding: 1.4mm;
}

.omr-print-page .name-field {
  min-height: 7.2mm;
  color: #111827;
  font-size: 8pt;
  font-weight: 900;
}

.omr-print-page .name-field span {
  margin-top: 2.2mm;
  border-bottom-width: 0.28mm;
}

.omr-print-page .phone-title {
  margin: 0.9mm 0 0.55mm;
  padding: 0.45mm 0.9mm;
  background: #111827;
  color: #fff;
  font-size: 7.2pt;
  font-weight: 950;
}

.omr-print-page .student-mark-area {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1mm;
  align-items: start;
}

.omr-print-page .name-mark-grid,
.omr-print-page .phone-mark-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45mm;
}

.omr-print-page .name-column,
.omr-print-page .phone-column {
  display: grid;
  align-items: center;
  gap: 0.45mm;
}

.omr-print-page .name-column {
  grid-template-columns: 5mm repeat(14, 1fr);
}

.omr-print-page .phone-column {
  grid-template-columns: 5mm repeat(10, 1fr);
}

.omr-print-page .name-column b,
.omr-print-page .phone-column b {
  font-size: 6pt;
  line-height: 1;
}

.omr-print-page .name-bubble,
.omr-print-page .phone-bubble,
.omr-print-page .bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.28mm solid #111827;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-weight: 950;
  line-height: 1;
}

.omr-print-page .name-bubble {
  width: 100%;
  min-width: 4.4mm;
  height: 2.45mm;
  font-size: 5.2pt;
}

.omr-print-page .phone-bubble {
  width: 100%;
  min-width: 5.2mm;
  height: 2.55mm;
  font-size: 5.7pt;
}

.omr-print-page .guide {
  display: grid;
  grid-template-columns: 20mm repeat(4, 1fr);
  gap: 0;
  margin: 2.2mm 0;
  border: 0.28mm solid #111827;
}

.omr-print-page .guide b,
.omr-print-page .guide span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.6mm;
  border-right: 0.22mm solid #111827;
  padding: 1mm 1.2mm;
  font-size: 7.4pt;
  font-weight: 900;
  text-align: center;
}

.omr-print-page .guide b {
  background: #111827;
  color: #fff;
}

.omr-print-page .guide span {
  color: #111827;
}

.omr-print-page .guide span:last-child {
  border-right: 0;
}

.omr-print-page .answer-section {
  display: grid;
  grid-template-columns: var(--omr-answer-columns, 1fr);
  align-items: start;
  gap: 4mm;
}

.omr-print-page .answer-section > div {
  border: 0.32mm solid #111827;
  padding: 1.4mm;
}

.omr-print-page .mcq-grid {
  display: grid;
  grid-template-columns: repeat(var(--omr-mcq-columns, 2), 1fr);
  gap: 0.55mm 2.1mm;
}

.omr-print-page .mcq-row {
  display: grid;
  grid-template-columns: var(--omr-question-no-width, 7mm) repeat(5, 1fr);
  align-items: center;
  gap: 0.65mm;
  min-height: 5.8mm;
  color: #111827;
  font-size: 8pt;
  font-weight: 800;
}

.omr-print-page .mcq-row strong {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.2mm;
  border: 0.22mm solid #111827;
  background: #f3f4f6;
  font-size: 7pt;
}

.omr-print-page .bubble {
  width: var(--omr-bubble-width, 8.2mm);
  height: 4mm;
  font-size: 6.6pt;
}

.omr-print-page .short-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3mm;
}

.omr-print-page .short-row {
  min-height: var(--omr-short-min-height, 12mm);
  border: 0.28mm solid #111827;
  padding: 1.1mm 1.4mm;
  color: #111827;
  font-size: 8pt;
  font-weight: 900;
}

.omr-print-page .short-row span {
  height: 3mm;
  margin-top: 2mm;
}

.omr-print-page h2 {
  margin: 0 0 1.6mm;
  padding: 1mm 1.5mm;
  background: #111827;
  color: #fff;
  font-size: 9pt;
  text-align: center;
  letter-spacing: 0;
}

.omr-print-page footer {
  position: absolute;
  right: 15mm;
  bottom: 7mm;
  left: 15mm;
  display: flex;
  justify-content: space-between;
  color: #4b5563;
  font-size: 7pt;
  font-weight: 800;
}

.omr-print-actions {
  position: absolute;
  right: 16px;
  top: calc(198mm + 34px);
  display: flex;
  gap: 8px;
}

@page {
  size: A4 landscape;
  margin: 6mm;
}

@media print {
  .omr-print-page {
    min-height: auto;
    padding: 0;
  }

  .omr-print-page .omr-sheet {
    margin: 0;
    box-shadow: none;
  }

  .omr-print-page .no-print,
  .omr-print-actions {
    display: none !important;
  }
}

.omr-print-page .acaflow-omr-sheet {
  --omr-accent: #f0f0f0;
  --omr-accent-dark: #111;
  --omr-bubble: #9a9a9a;
  --omr-soft: #f8f8f8;
  width: 285mm;
  height: 198mm;
  min-height: 198mm;
  overflow: hidden;
  border: 0;
  padding: 11.5mm 12mm 9mm;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  color: #171717;
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
}

@media screen and (max-width: 900px) {
  html.omr-print-document-root,
  html.omr-print-document-root body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html.omr-print-document-root .omr-print-page {
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    --omr-screen-scale: 0.68;
    --omr-screen-sheet-height: 134.64mm;
  }

  html.omr-print-document-root .omr-print-page .acaflow-omr-sheet {
    margin: 0;
    transform: scale(var(--omr-screen-scale));
    transform-origin: top left;
  }

  html.omr-print-document-root .omr-print-actions {
    left: 16px;
    right: 16px;
    top: calc(32px + var(--omr-screen-sheet-height));
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 768px) {
  html.omr-print-document-root .omr-print-page {
    --omr-screen-scale: 0.56;
    --omr-screen-sheet-height: 110.88mm;
  }
}

@media screen and (max-width: 640px) {
  html.omr-print-document-root .omr-print-page {
    --omr-screen-scale: 0.41;
    --omr-screen-sheet-height: 81.18mm;
  }
}

@media screen and (max-width: 480px) {
  html.omr-print-document-root .omr-print-page {
    --omr-screen-scale: 0.32;
    --omr-screen-sheet-height: 63.36mm;
  }
}

.omr-print-page .acaflow-omr-sheet.blue {
  --omr-accent: #f0f0f0;
  --omr-accent-dark: #111;
}

.omr-print-page .acaflow-omr-sheet .mark {
  width: 2.4mm;
  height: 4.9mm;
  background: #171717;
}

.omr-print-page .acaflow-omr-sheet .tl { top: 8mm; left: 5.8mm; }
.omr-print-page .acaflow-omr-sheet .tr { top: 8mm; right: 5.8mm; }
.omr-print-page .acaflow-omr-sheet .bl { bottom: 5mm; left: 5.8mm; }
.omr-print-page .acaflow-omr-sheet .br { right: 5.8mm; bottom: 5mm; }

.acaflow-omr-layout {
  display: grid;
  grid-template-columns: 70mm 36mm 4.2mm 79mm minmax(0, 1fr) 4.2mm;
  gap: 6.5mm;
  height: 176mm;
  align-items: stretch;
}

.acaflow-omr-sheet.acaflow-green-20 .acaflow-omr-layout {
  grid-template-columns: 70mm 34mm 4.2mm 36mm minmax(0, 1fr) 4.2mm;
}

.acaflow-omr-sheet.acaflow-blue-25-5 .acaflow-omr-layout,
.acaflow-omr-sheet.acaflow-blue-25-8 .acaflow-omr-layout {
  grid-template-columns: 70mm 34mm 4.2mm 36mm minmax(0, 1fr);
}

.acaflow-omr-sheet.acaflow-green-30-short-5 .acaflow-omr-layout {
  grid-template-columns: 70mm 31mm 4.2mm 79mm minmax(0, 1fr);
  gap: 5.5mm;
}

.acaflow-omr-sheet.acaflow-mixed-40 .acaflow-omr-layout {
  grid-template-columns: 70mm 34mm 4.2mm minmax(0, 1fr);
  gap: 5.5mm;
}

.acaflow-left-zone,
.acaflow-helper-zone {
  display: grid;
  align-content: start;
  gap: 3mm;
  min-width: 0;
}

.acaflow-helper-zone {
  gap: 3.4mm;
}

.acaflow-helper-zone > * {
  width: 100%;
  justify-self: stretch;
}

.omr-print-page .acaflow-omr-sheet .brand-box {
  width: 70mm;
  height: 25mm;
  min-height: 25mm;
  margin: 0 0 2.4mm 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.omr-print-page .acaflow-omr-sheet .brand-box img {
  display: block;
  width: 70mm;
  max-width: 70mm;
  max-height: 25mm;
  object-fit: contain;
  filter: grayscale(1) contrast(1.24);
}

.acaflow-school-panel,
.acaflow-handwriting-panel,
.acaflow-name-panel,
.acaflow-phone-panel,
.acaflow-help-panel,
.acaflow-phone-help,
.acaflow-answer-table,
.acaflow-caution-panel,
.acaflow-subjective-panel {
  border: 0.42mm solid #222;
  border-radius: 1.4mm;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.acaflow-help-panel,
.acaflow-phone-help,
.acaflow-caution-panel {
  border: 0;
  box-shadow: inset 0 0 0 0.42mm #222;
}

.acaflow-school-panel {
  display: grid;
  grid-template-columns: 14mm minmax(0, 1fr) 13mm 15mm;
  grid-template-rows: 9mm 9mm;
  height: 18mm;
}

.acaflow-school-panel b,
.acaflow-school-panel span,
.acaflow-handwriting-panel b,
.acaflow-handwriting-panel span {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 0.26mm solid #222;
  border-bottom: 0.26mm solid #222;
  font-size: 10pt;
  font-weight: 900;
}

.acaflow-school-panel b,
.acaflow-handwriting-panel b {
  background: var(--omr-accent);
}

.acaflow-school-panel span {
  justify-content: center;
  padding: 0 1mm;
}

.acaflow-school-panel .school-label { grid-column: 1; grid-row: 1; }
.acaflow-school-panel .school-value {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  padding-right: 2mm;
}
.acaflow-school-panel .round-label { grid-column: 3; grid-row: 1; }
.acaflow-school-panel .round-value { grid-column: 4; grid-row: 1; border-right: 0; }
.acaflow-school-panel .academy-label { grid-column: 1; grid-row: 2; border-bottom: 0; }
.acaflow-school-panel .academy-value {
  grid-column: 2 / 5;
  grid-row: 2;
  border-right: 0;
  border-bottom: 0;
}

.acaflow-handwriting-panel span {
  border-right: 0;
}

.acaflow-handwriting-panel :nth-child(n + 3) {
  border-bottom: 0;
}

.acaflow-handwriting-panel {
  display: grid;
  grid-template-columns: 14mm minmax(0, 1fr);
  height: 18mm;
}

.acaflow-handwriting-panel b {
  line-height: 1.15;
}

.acaflow-name-panel {
  height: 116mm;
}

.acaflow-name-panel header,
.acaflow-phone-panel header,
.acaflow-help-panel h2,
.acaflow-phone-help h2,
.acaflow-caution-panel h2 {
  box-sizing: border-box;
  margin: 0;
  border-bottom: 0.42mm solid var(--omr-accent-dark);
  background: var(--omr-accent);
  color: #111;
  font-size: 10pt;
  font-weight: 950;
  text-align: center;
  line-height: 1;
}

.acaflow-name-panel header {
  padding: 2.2mm 1mm 1.8mm;
  letter-spacing: 0.04em;
}

.acaflow-name-panel header small {
  font-size: 6.3pt;
  letter-spacing: 0;
}

.name-write-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 10mm;
  border-bottom: 0.36mm solid var(--omr-accent-dark);
}

.name-write-boxes span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.22mm dashed var(--omr-accent-dark);
  color: transparent;
  font-size: 0;
  font-weight: 800;
}

.name-write-boxes span:last-child {
  border-right: 0;
}

.acaflow-name-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 97mm;
}

.acaflow-name-grid .name-syllable-column {
  display: grid;
  grid-template-rows: 5mm minmax(0, 1fr);
  border-right: 0.22mm dashed var(--omr-accent-dark);
}

.acaflow-name-grid .name-syllable-column:last-child {
  border-right: 0;
}

.name-jamo-head,
.name-jamo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.name-jamo-head {
  align-items: center;
  border-bottom: 0.18mm solid #999;
  background: var(--omr-soft);
  color: #333;
  font-size: 5.8pt;
  font-weight: 900;
  text-align: center;
}

.name-jamo-head span,
.name-jamo-grid .name-bubble {
  justify-self: center;
  align-self: center;
}

.name-jamo-grid {
  grid-auto-rows: 4.75mm;
  padding: 1mm 0.7mm 0.8mm;
}

.omr-print-page .acaflow-omr-sheet .name-bubble,
.omr-print-page .acaflow-omr-sheet .phone-bubble,
.omr-print-page .acaflow-omr-sheet .bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.1mm;
  min-width: 0;
  height: 4.45mm;
  border: 0.18mm solid var(--omr-bubble);
  border-radius: 999px;
  color: var(--omr-bubble);
  background: #fff;
  font-size: 5.4pt;
  font-weight: 600;
  line-height: 1;
}

.omr-print-page .acaflow-omr-sheet .name-bubble.empty {
  border-color: transparent;
  background: transparent;
  color: transparent;
}

.acaflow-help-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 44mm;
  background: #fff;
}

.acaflow-help-panel h2,
.acaflow-phone-help h2,
.acaflow-caution-panel h2 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 8.4mm;
  min-height: 8.4mm;
  flex: 0 0 8.4mm;
  margin: 0;
  padding: 2mm 1mm 1.6mm;
  border-bottom-color: #222;
  border-radius: 0;
  font-size: 8.2pt;
  line-height: 1;
  text-decoration: none;
  background: #111;
  color: #fff;
  text-align: center;
}

.acaflow-help-panel ol {
  margin: auto 2.7mm 0;
  padding-left: 3.2mm;
  font-size: 6.1pt;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
}

.marking-sample {
  display: flex;
  justify-content: center;
  gap: 1.2mm;
  width: 100%;
  margin: 1.6mm 0 auto;
}

.marking-sample span {
  width: 2.5mm;
  height: 5.2mm;
  border: 0.35mm solid #222;
  border-radius: 999px;
}

.marking-sample .bad {
  position: relative;
}

.marking-sample .bad::after {
  content: "";
  position: absolute;
  top: 45%;
  left: -0.7mm;
  width: 3.8mm;
  border-top: 0.28mm solid #222;
  transform: rotate(-40deg);
}

.marking-sample .filled {
  background: #222;
}

.marking-sample .stripe {
  background: repeating-linear-gradient(135deg, transparent 0 1px, #222 1px 2px);
}

.acaflow-phone-panel {
  height: 82mm;
}

.acaflow-phone-panel header {
  padding: 2mm 1mm 1.6mm;
  font-size: 9.4pt;
  letter-spacing: 0.02em;
}

.phone-write-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 9.5mm;
  border-bottom: 0.36mm solid var(--omr-accent-dark);
}

.phone-write-boxes span {
  border-right: 0.22mm dashed var(--omr-accent-dark);
}

.phone-write-boxes span:last-child {
  border-right: 0;
}

.acaflow-omr-sheet .phone-mark-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  height: 61.5mm;
}

.acaflow-omr-sheet .phone-column {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 5.35mm;
  justify-items: center;
  align-items: center;
  padding-top: 1.9mm;
  border-right: 0.22mm dashed var(--omr-accent-dark);
}

.acaflow-omr-sheet .phone-column:last-child {
  border-right: 0;
}

.acaflow-phone-help {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 32mm;
  background: #fff;
}

.acaflow-phone-help p {
  margin: 1.2mm 2.7mm 0;
  font-size: 5.7pt;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

.acaflow-phone-help h2 + p {
  margin-top: auto;
}

.acaflow-phone-help p:last-child {
  margin-bottom: auto;
}

.acaflow-register-line {
  display: block;
  width: 3.6mm;
  height: 170mm;
  border: 0.35mm solid var(--omr-accent-dark);
  background: var(--omr-accent);
}

.acaflow-register-line.right {
  justify-self: end;
}

.acaflow-answer-zone {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7mm;
  min-width: 0;
}

.acaflow-omr-sheet.acaflow-green-20 .acaflow-answer-zone {
  grid-template-columns: 1fr;
}

.acaflow-omr-sheet.acaflow-blue-25-5 .acaflow-answer-zone,
.acaflow-omr-sheet.acaflow-blue-25-8 .acaflow-answer-zone {
  grid-template-columns: 1fr;
}

.acaflow-omr-sheet.acaflow-mixed-40 .acaflow-answer-zone {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5mm;
}

.acaflow-answer-table {
  height: 171mm;
  border-radius: 1.4mm;
}

.acaflow-answer-table header {
  display: grid;
  grid-template-columns: 8mm minmax(0, 1fr);
  height: 8mm;
  border-bottom: 0.3mm solid #222;
  background: var(--omr-accent);
  color: #111;
}

.acaflow-answer-table.mixed-answer header {
  grid-template-columns: 7mm 28mm minmax(0, 1fr);
}

.acaflow-answer-table header span,
.acaflow-answer-table header strong,
.acaflow-answer-table header em {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.25mm solid #222;
  font-size: 8pt;
  font-weight: 950;
  font-style: normal;
}

.acaflow-answer-table header strong {
  font-size: 11pt;
  letter-spacing: 0.25em;
}

.acaflow-answer-table header strong:last-child,
.acaflow-answer-table header em {
  border-right: 0;
}

.acaflow-answer-table.mixed-answer header strong {
  font-size: 7.3pt;
  letter-spacing: 0;
}

.acaflow-answer-table.mixed-answer header em {
  font-size: 7.3pt;
}

.acaflow-answer-table .answer-row {
  display: grid;
  grid-template-columns: 8mm minmax(0, 1fr);
  min-height: 8.15mm;
  border-bottom: 0.12mm solid rgba(17, 24, 39, 0.28);
}

.acaflow-answer-table.mixed-answer .answer-row {
  grid-template-columns: 7mm 28mm minmax(0, 1fr);
}

.acaflow-omr-sheet.acaflow-blue-25-5 .acaflow-answer-table .answer-row,
.acaflow-omr-sheet.acaflow-blue-25-8 .acaflow-answer-table .answer-row {
  min-height: 6.52mm;
}

.acaflow-answer-table .answer-row.break-row {
  border-top: 0.26mm solid rgba(17, 24, 39, 0.35);
}

.acaflow-answer-table .answer-row b {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.25mm solid #222;
  background: var(--omr-accent);
  color: #111;
  font-size: 10.2pt;
  font-weight: 950;
}

.acaflow-answer-table .answer-row div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  padding: 0 2mm;
}

.acaflow-answer-table.mixed-answer .answer-row div {
  padding: 0 1mm;
  border-right: 0.25mm solid #222;
}

.acaflow-answer-table.mixed-answer .answer-row i {
  display: block;
  min-width: 0;
  background: #fff;
}

.omr-print-page .acaflow-omr-sheet .answer-row .bubble {
  width: 2.9mm;
  height: 4.75mm;
  font-size: 5.7pt;
}

.omr-print-page .acaflow-omr-sheet .mixed-answer .answer-row .bubble {
  width: 2.55mm;
  height: 4.35mm;
  font-size: 5pt;
}

.acaflow-answer-table .answer-filler {
  height: 81.5mm;
  border-left: 8mm solid var(--omr-accent);
  background: var(--omr-accent);
}

.acaflow-answer-table.secondary .answer-filler {
  min-height: 0;
}

.acaflow-answer-table.secondary.answer-count-5 .answer-filler {
  height: 122.25mm;
}

.acaflow-answer-table.secondary.answer-count-10 .answer-filler {
  height: 81.5mm;
}

.acaflow-caution-panel {
  display: flex;
  flex-direction: column;
  height: 171mm;
  padding: 0;
  background: #fff;
  border-radius: 1.4mm;
  text-align: left;
}

.acaflow-caution-panel.white {
  background: #fff;
}

.acaflow-caution-body {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.acaflow-caution-panel ol {
  width: 100%;
  margin: 4.2mm 3.4mm 0 3.8mm;
  padding-left: 3.5mm;
  font-size: 6.05pt;
  font-weight: 800;
  line-height: 1.72;
  text-align: left;
}

.acaflow-caution-panel li {
  max-width: 100%;
}

.acaflow-caution-panel li + li {
  margin-top: 2mm;
}

.acaflow-omr-sheet.acaflow-green-20 .acaflow-caution-panel ol {
  font-size: 6.35pt;
  line-height: 1.74;
}

.acaflow-omr-sheet.acaflow-green-20 .acaflow-caution-panel li + li {
  margin-top: 2.4mm;
}

.acaflow-subjective-panel {
  --subjective-score-width: 10mm;
  height: 171mm;
  border-radius: 1.4mm;
}

.acaflow-subjective-panel header {
  display: grid;
  grid-template-columns: 8mm minmax(0, 1fr) var(--subjective-score-width);
  height: 8mm;
  background: var(--omr-accent);
  border-bottom: 0.3mm solid #222;
}

.acaflow-subjective-panel header span,
.acaflow-subjective-panel header strong,
.acaflow-subjective-panel header em {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0.25mm solid #222;
  color: #111;
  font-size: 8pt;
  font-style: normal;
  font-weight: 950;
}

.acaflow-subjective-panel header strong {
  font-size: 11.4pt;
  letter-spacing: 0.04em;
}

.acaflow-subjective-panel header em {
  border-right: 0;
}

.subjective-row {
  display: grid;
  grid-template-columns: 8mm minmax(0, 1fr) var(--subjective-score-width);
  min-height: 32.5mm;
  border-bottom: 0.25mm solid #222;
}

.subjective-row:last-child {
  border-bottom: 0;
}

.subjective-row b {
  display: flex;
  align-items: start;
  justify-content: center;
  padding-top: 2mm;
  border-right: 0.25mm solid #222;
  background: var(--omr-accent);
  color: #111;
  font-size: 14pt;
  font-weight: 950;
}

.subjective-row div {
  background: #fff;
  border-right: 0.25mm solid #222;
}

.subjective-row aside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4mm;
  padding: 0 1mm;
  border-left: 0;
  font-size: 10pt;
}

.subjective-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4mm;
  height: 4.4mm;
  border: 0.22mm solid #222;
  border-radius: 999px;
  color: #111;
  background: #fff;
  font-size: 6.2pt;
  font-weight: 850;
  line-height: 1;
}

.acaflow-footer-note {
  position: absolute;
  right: 22.7mm;
  bottom: 11mm;
  margin: 0;
  color: #111;
  font-size: 6.7pt;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.acaflow-omr-sheet.has-short-answers .acaflow-footer-note {
  right: 12mm;
}

@media print {
  .omr-print-page .acaflow-omr-sheet {
    box-shadow: none;
  }
}

.omr-template-gallery > button,
.omr-template-gallery > article {
  display: grid;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 13px;
  text-align: left;
  box-shadow: var(--shadow-small);
  cursor: pointer;
}

.omr-template-gallery > article {
  cursor: default;
}

.omr-template-gallery > article > div {
  display: grid;
  grid-template-columns: 0.78fr 1fr;
  gap: 7px;
}

.omr-template-gallery.print-only > article > div {
  grid-template-columns: 1fr;
}

.omr-template-gallery.print-only > article {
  gap: 7px;
  padding: 10px;
}

.omr-template-gallery.print-only .omr-template-preview {
  min-height: 76px;
}

.omr-template-gallery.print-only .omr-template-preview b {
  font-size: 23px;
}

.omr-template-gallery.print-only > article strong,
.omr-template-gallery.print-only > article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omr-template-gallery > button.selected,
.omr-template-gallery > article.selected {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: var(--inset-small);
}

.omr-template-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, color-mix(in srgb, var(--border) 46%, transparent) 10px 11px),
    var(--surface-soft);
}

.omr-template-preview i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--text);
}

.omr-template-preview i:nth-child(1) { left: 8px; top: 8px; }
.omr-template-preview i:nth-child(2) { right: 8px; top: 8px; }
.omr-template-preview i:nth-child(3) { left: 8px; bottom: 8px; }
.omr-template-preview i:nth-child(4) { right: 8px; bottom: 8px; }

.omr-template-preview b {
  color: var(--accent);
  font-size: 30px;
  font-weight: 950;
}

.omr-template-preview em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.omr-manual-panel {
  overflow: clip;
}

.omr-manual-bulk {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  box-shadow: var(--shadow-xs);
  overflow: clip;
}

.omr-manual-bulk > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
}

.omr-manual-bulk > summary strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.omr-manual-bulk > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.omr-manual-bulk-body {
  display: grid;
  gap: 10px;
  padding: 0 15px 15px;
}

.omr-manual-bulk-format {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.omr-manual-bulk-format span {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 9px 10px;
}

.omr-manual-bulk-format b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.omr-manual-bulk-format small,
.omr-manual-bulk-actions small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.omr-manual-bulk textarea {
  min-height: 118px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.55;
  resize: vertical;
}

.omr-manual-bulk-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.omr-manual-guide,
.report-card-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.omr-manual-guide span,
.report-card-summary-strip span {
  display: grid;
  gap: 2px;
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 8px 10px;
}

.omr-manual-guide b,
.report-card-summary-strip b {
  color: var(--text);
  font-size: 17px;
  font-weight: 950;
}

.omr-manual-guide small,
.report-card-summary-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.omr-manual-guide p {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 9px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.5;
}

.omr-manual-table {
  min-width: calc(500px + (var(--omr-manual-question-count, 20) * 58px));
  table-layout: fixed;
}

.omr-manual-table th:nth-child(1),
.omr-manual-table td:nth-child(1) {
  width: 220px;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
  box-shadow: 8px 0 14px -14px rgb(15 23 42 / 0.42);
}

.omr-manual-table th:nth-child(2),
.omr-manual-table td:nth-child(2) {
  width: 130px;
  position: sticky;
  left: 220px;
  z-index: 4;
  background: var(--surface);
  box-shadow: 8px 0 14px -14px rgb(15 23 42 / 0.24);
}

.omr-manual-table thead th:nth-child(1),
.omr-manual-table thead th:nth-child(2) {
  z-index: 8;
  background: var(--surface-soft);
}

.omr-manual-answer-input {
  font-family: "SFMono-Regular", "Menlo", monospace;
  letter-spacing: .01em;
}

.omr-manual-question-head {
  width: 58px;
  min-width: 58px;
  text-align: center;
  vertical-align: middle;
}

.omr-manual-question-head span,
.omr-manual-question-head small {
  display: block;
}

.omr-manual-question-head span {
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
}

.omr-manual-question-head small {
  margin-top: 2px;
  color: var(--accent);
  font-size: 9.5px;
  font-weight: 850;
  white-space: nowrap;
}

.omr-manual-answer-cell {
  width: 58px;
  min-width: 58px;
  padding: 5px !important;
}

.omr-manual-cell-input {
  width: 100%;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 5px 4px;
  text-align: center;
  font-family: "SFMono-Regular", "Menlo", monospace;
  font-size: 12px;
  font-weight: 850;
}

.omr-manual-cell-input:focus,
.omr-manual-student-input:focus {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.omr-manual-quick-row {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.omr-manual-quick-row td {
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.omr-manual-student-cell {
  display: grid;
  gap: 5px;
}

.omr-manual-student-cell span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.omr-manual-student-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 850;
}

[data-omr-manual-student-status] {
  display: block;
  margin-top: 5px;
  color: var(--green);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

[data-omr-manual-student-status].warning {
  color: var(--amber);
}

.omr-manual-table-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.45;
}

.omr-manual-table-wrap {
  max-height: min(68vh, 620px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.omr-manual-table.omr-inline-sheet-table {
  min-width: max-content;
  width: max-content;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(1),
.omr-manual-table.omr-inline-sheet-table td:nth-child(1) {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: static;
  left: auto;
  z-index: auto;
  box-shadow: none;
  text-align: center;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(2),
.omr-manual-table.omr-inline-sheet-table td:nth-child(2) {
  width: 118px;
  min-width: 118px;
  max-width: 118px;
  position: static;
  left: auto;
  z-index: auto;
  box-shadow: none;
  text-align: center;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(3),
.omr-manual-table.omr-inline-sheet-table td:nth-child(3) {
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  text-align: center;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(4),
.omr-manual-table.omr-inline-sheet-table td:nth-child(4) {
  width: 68px;
  min-width: 68px;
  max-width: 68px;
  text-align: center;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(5),
.omr-manual-table.omr-inline-sheet-table td:nth-child(5) {
  width: 162px;
  min-width: 162px;
  max-width: 162px;
}

.omr-manual-table.omr-inline-sheet-table th:nth-child(6),
.omr-manual-table.omr-inline-sheet-table td:nth-child(6) {
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  text-align: center;
}

.omr-manual-table.omr-inline-sheet-table thead th:nth-child(1),
.omr-manual-table.omr-inline-sheet-table thead th:nth-child(2) {
  z-index: 2;
}

.omr-manual-record-select {
  width: 154px;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 3px 5px;
  font-size: 10.5px;
  font-weight: 760;
}

.score-delete-confirm {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 5%, var(--surface));
  padding: 10px;
}

.score-delete-confirm strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.score-delete-confirm small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.score-delete-confirm div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.omr-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--green) 26%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: var(--green);
  padding: 4px 7px;
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}

.omr-compare-chip.partial {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
  color: var(--amber);
}

.omr-compare-chip.wrong {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
  color: var(--red);
}

.video-watch-table {
  display: grid;
  gap: 6px;
  min-width: 760px;
  padding: 6px;
  width: 100%;
}

.video-watch-table-head,
.video-watch-table-row {
  display: grid;
  grid-template-columns: 116px 130px minmax(170px, 0.95fr) 96px minmax(118px, 0.75fr) 74px;
  gap: 8px;
  align-items: center;
}

.video-watch-table-head {
  padding: 2px 10px 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.video-watch-table-head span {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
}

.video-watch-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 2px 4px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-watch-sort-button:hover,
.video-watch-sort-button:focus-visible,
.video-watch-sort-button.active {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
}

.video-watch-sort-button span {
  min-height: 0;
  color: currentColor;
  font-size: 10px;
}

.video-watch-table-body {
  display: grid;
  gap: 6px;
}

.video-watch-table-row {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 8px 10px;
  box-shadow: var(--shadow-xs);
}

.video-watch-table-row > div {
  min-width: 0;
}

.video-watch-student-cell,
.video-watch-access-cell {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: start;
}

.video-watch-student-cell .text-link {
  justify-self: start;
  padding: 0;
  line-height: 1.2;
}

.video-watch-student-cell small,
.video-watch-access-cell small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.video-watch-record-cell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  max-width: 100%;
  min-width: 0;
}

.video-watch-record-cell b,
.video-watch-record-cell span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: var(--text);
  font-size: 12px;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
}

.video-watch-record-cell span {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-soft));
  padding: 5px 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.video-watch-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.video-watch-progress-cell {
  display: grid;
  gap: 2px;
  align-content: center;
  justify-items: start;
}

.video-watch-progress-cell strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-watch-progress-cell small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.video-watch-speed-cell {
  color: var(--text);
  font-size: 12px;
  font-weight: 830;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.video-watch-complete-cell {
  display: flex;
  align-items: center;
}

.video-watch-complete-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 920;
  line-height: 1;
}

.video-watch-complete-pill.done {
  background: color-mix(in srgb, var(--green) 15%, var(--surface-soft));
  color: var(--green);
}

.video-watch-complete-pill.pending {
  background: color-mix(in srgb, var(--amber) 18%, var(--surface-soft));
  color: var(--amber);
}

.video-watch-empty-row {
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px;
}

.badge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 4px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 920;
  line-height: 1;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.badge-button.allowed {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 12%, var(--surface));
  color: var(--green);
}

.badge-button.blocked {
  border-color: color-mix(in srgb, var(--red) 18%, var(--border));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
}

.badge-button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.ghost-button.tiny {
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.score-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  border-radius: 999px;
  padding: 5px 9px;
  font-weight: 800;
  background: color-mix(in srgb, var(--green) 12%, var(--surface-soft));
  color: var(--green);
}

.score-chip.warn {
  background: color-mix(in srgb, var(--red) 12%, var(--surface-soft));
  color: var(--red);
}

.flag-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--amber) 14%, var(--surface-soft));
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
}

.omr-flag-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.report-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 10px;
}

.report-card-mini {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  padding: 12px;
}

.report-card-mini strong {
  font-size: 16px;
}

.report-card-mini .ghost-button,
.report-card-mini a.ghost-button {
  justify-content: center;
}

.report-card-public-screen {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 14%, transparent), transparent 32rem),
    var(--bg);
}

.report-card-public-shell {
  max-width: 1120px;
  min-width: 0;
  width: 100%;
}

.report-card-public-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: none;
}
.report-card-public-header > div:first-child { min-width: 0; }
.report-card-public-header h1,
.report-card-public-header h2,
.web-report-card .section-head h2,
.web-report-card .section-head p,
.web-report-bars span,
.web-report-metrics small,
.web-report-unit-row strong,
.web-report-unit-row small { overflow-wrap: anywhere; word-break: keep-all; }
.web-report-unit-row small span { white-space: nowrap; }

.report-card-public-brand {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.report-card-public-logo { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.report-card-public-title { min-width: 0; }
.report-card-public-title p { margin-top: 3px; font-size: 12px; line-height: 1.3; }
.web-report-notice { margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--panel-radius); background: var(--surface-soft); }
.web-report-notice p { white-space: pre-wrap; overflow-wrap: anywhere; }
.web-report-card,
.web-report-unit-row > span { min-width: 0; }

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

[data-report-action="portal-home"],
[data-report-action="portal-home"]:hover,
[data-report-action="portal-home"]:focus {
  text-decoration: none;
}

.web-report-hero {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.web-report-score,
.web-report-card,
.web-report-metrics span {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.web-report-score {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 190px;
  border-radius: 28px;
  padding: 22px;
  text-align: center;
}

.web-report-score span,
.web-report-score small,
.web-report-bars span,
.web-report-unit-row small,
.web-report-wrong-list small,
.web-report-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.web-report-score strong {
  color: var(--accent);
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 950;
  line-height: .9;
}

.web-report-score strong em {
  margin-left: 3px;
  font-size: .32em;
  font-style: normal;
  font-weight: 850;
}

.web-report-bars {
  display: grid;
  align-content: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), color-mix(in srgb, var(--accent-secondary) 6%, var(--surface))),
    var(--surface);
  padding: 22px;
}

.web-report-bars div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
}

.web-report-bars strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 950;
}

.web-report-bars i {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.web-report-bars i::before {
  content: "";
  display: block;
  width: var(--report-bar, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.web-report-bars i.average::before {
  background: linear-gradient(90deg, var(--accent-secondary), color-mix(in srgb, var(--accent-secondary) 70%, var(--accent)));
}

.web-report-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.web-report-metrics span {
  display: grid;
  gap: 4px;
  min-height: 72px;
  border-radius: 18px;
  padding: 13px 14px;
}

.web-report-metrics b {
  color: var(--text);
  font-size: 24px;
  font-weight: 950;
}

.web-report-grid {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: 14px;
  align-items: start;
}

.web-report-card {
  border-radius: 24px;
  padding: 18px;
}

.web-report-unit-list,
.web-report-wrong-list {
  display: grid;
  gap: 8px;
}

.web-report-unit-row,
.web-report-wrong-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
}

.web-report-unit-row strong,
.web-report-wrong-list strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.web-report-unit-row b {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.web-report-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.web-report-answer-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
  padding: 9px 10px;
}

.web-report-answer-grid span.correct {
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.web-report-answer-grid span.wrong,
.web-report-answer-grid span.empty {
  border-color: color-mix(in srgb, var(--red) 24%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}

.web-report-answer-grid span.partial,
.web-report-answer-grid span.manual {
  border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
}

.web-report-answer-grid b {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.web-report-answer-grid strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.web-report-answer-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-report-wrong-list div {
  grid-template-columns: minmax(0, 1fr);
}

.web-report-wrong-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.web-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: var(--muted);
}

.web-report-footer strong {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.report-card-public-screen {
  background: var(--bg);
}

.report-card-public-shell {
  max-width: 960px;
}

.report-card-public-header {
  border-bottom: 1px solid var(--border);
}

.report-card-public-header h1 {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.2;
}

.web-report-hero {
  grid-template-columns: minmax(172px, .3fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.web-report-score,
.web-report-bars,
.web-report-card,
.web-report-metrics span,
.web-report-notice,
.web-report-feedback {
  border-radius: 8px;
  box-shadow: none;
}

.web-report-score {
  min-height: 154px;
  padding: var(--space-4);
  background: var(--surface-soft);
}

.web-report-score .web-report-student-name {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.2;
}

.web-report-score .web-report-score-label {
  margin-top: 2px;
  font-size: 11px;
}

.web-report-score strong {
  color: var(--text);
  font-size: 52px;
  line-height: 1;
}

.web-report-bars {
  padding: var(--space-4);
  background: var(--surface);
}

.web-report-bars i {
  height: 8px;
}

.web-report-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.web-report-metrics span {
  min-height: 64px;
  padding: var(--space-3);
  background: var(--surface-soft);
}

.web-report-metrics b {
  font-size: 18px;
}

.web-report-message-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.web-report-notice,
.web-report-feedback {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
  border: 1px solid var(--border);
  padding: var(--space-3);
  background: var(--surface-soft);
}

.web-report-notice h2,
.web-report-feedback h2 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.web-report-notice p,
.web-report-feedback p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.6;
  white-space: normal;
  word-break: keep-all;
}

.web-report-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: var(--space-3);
  align-items: start;
}

.web-report-card {
  padding: var(--space-4);
}

.web-report-side-analysis {
  display: grid;
  gap: var(--space-5);
}

.web-report-top-list,
.web-report-grade-list {
  display: grid;
  gap: var(--space-1);
}

.web-report-top-list div {
  display: grid;
  grid-template-columns: 24px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.web-report-top-list div > b {
  color: var(--muted);
}

.web-report-top-list div > span {
  color: var(--muted);
}

.web-report-top-list em {
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-style: normal;
  font-weight: 850;
}

.web-report-top-list em.correct {
  color: var(--green);
}

.web-report-grade-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
}

.web-report-question-card {
  margin-top: var(--space-3);
}

.web-report-distribution-card {
  margin-bottom: var(--space-3);
}

.web-report-distribution-chart {
  position: relative;
  padding-top: 30px;
}

.web-report-distribution-summary {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.web-report-distribution-summary span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.web-report-distribution-summary span i {
  width: 16px;
  border-top: 1px dashed currentColor;
}

.web-report-distribution-summary .average {
  color: var(--accent-secondary);
}

.web-report-distribution-summary .student {
  color: var(--amber);
}

.web-report-distribution {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-2);
  height: 150px;
  border-bottom: 1px solid var(--border);
  padding-top: var(--space-2);
}

.web-report-distribution span {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: var(--space-2);
  height: 100%;
  min-width: 0;
  text-align: center;
}

.web-report-distribution i {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--text);
}

.web-report-distribution b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.web-report-distribution-marker {
  position: absolute;
  top: 34px;
  bottom: 24px;
  border-left: 1px dashed currentColor;
  pointer-events: none;
}

.web-report-distribution-marker::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.web-report-distribution-marker.student {
  color: var(--amber);
}

.web-report-distribution-marker.average {
  color: var(--accent-secondary);
}

.web-report-middle-analysis {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.web-report-middle-analysis > div {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(120px, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.web-report-middle-analysis strong {
  overflow: visible;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: keep-all;
}

.web-report-middle-analysis > div > span {
  position: relative;
  height: 20px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-soft);
}

.web-report-middle-analysis i {
  position: absolute;
  left: 0;
  height: 50%;
}

.web-report-middle-analysis i.average {
  top: 0;
  background-color: color-mix(in srgb, var(--accent-secondary) 34%, var(--surface));
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-secondary) 48%, var(--surface)) 0, color-mix(in srgb, var(--accent-secondary) 48%, var(--surface)) 5px, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface)) 5px, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface)) 10px);
}

.web-report-middle-analysis i.student {
  bottom: 0;
  background: var(--accent-secondary);
}

.web-report-legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.web-report-legend i {
  display: inline-block;
  width: 16px;
  height: 5px;
  margin-right: 5px;
  vertical-align: middle;
}

.web-report-legend i.average {
  background-color: color-mix(in srgb, var(--accent-secondary) 34%, var(--surface));
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-secondary) 48%, var(--surface)) 0, color-mix(in srgb, var(--accent-secondary) 48%, var(--surface)) 4px, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface)) 4px, color-mix(in srgb, var(--accent-secondary) 22%, var(--surface)) 8px);
}

.web-report-legend i.student {
  background: var(--accent-secondary);
}

.web-report-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.web-report-side-analysis > section {
  min-width: 0;
}

.web-report-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 11px;
  table-layout: fixed;
}

.web-report-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.web-report-table th,
.web-report-table td {
  height: 34px;
  border-bottom: 1px solid var(--border);
  padding: 7px 8px;
  text-align: center;
  vertical-align: middle;
}

.web-report-table thead th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.web-report-table tbody th {
  font-weight: 850;
}

.web-report-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-soft) 55%, transparent);
}

.web-report-table td.correct {
  color: var(--green);
  font-weight: 900;
}

.web-report-table td.wrong,
.web-report-table td.empty,
.web-report-table td.partial,
.web-report-table td.manual {
  color: var(--red);
  font-weight: 900;
}

.web-report-table td.unscored {
  color: var(--muted);
  font-weight: 850;
}

.web-report-type-table {
  min-width: 480px;
}

.web-report-type-table th:first-child,
.web-report-type-table td:first-child {
  width: 42%;
  text-align: left;
}

.web-report-top-table {
  min-width: 360px;
}

.web-report-grade-table {
  min-width: 300px;
}

.web-report-question-table {
  min-width: 620px;
}

.web-report-question-table th:nth-child(2),
.web-report-question-table td:nth-child(2) {
  width: 28%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-report-history-card {
  margin-top: var(--space-3);
}

.web-report-history-chart {
  margin-bottom: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  background: var(--surface-soft);
  padding: var(--space-4);
}

.web-report-history-plot {
  position: relative;
  min-width: max(100%, calc(var(--history-count) * 56px));
  height: 176px;
}

.web-report-history-bars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--history-count), minmax(56px, 1fr));
  align-items: end;
  gap: var(--space-2);
  height: 176px;
  border-bottom: 1px solid var(--border);
}

.web-report-history-score-line {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 146px;
  overflow: visible;
  pointer-events: none;
}

.web-report-history-score-line polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.web-report-history-score-line .halo {
  stroke: var(--surface);
  stroke-width: 6;
}

.web-report-history-score-line .score {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.web-report-history-bar-group {
  display: grid;
  grid-template-rows: 146px auto;
  min-width: 0;
  text-align: center;
}

.web-report-history-bar-group > div {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 146px;
}

.web-report-history-bar-group i {
  position: relative;
  display: block;
  width: min(20px, 38%);
  min-height: 2px;
  height: var(--history-height);
  border-radius: 4px 4px 0 0;
}

.web-report-history-bar-group i.student,
.web-report-history-legend i.student {
  background: var(--accent);
}

.web-report-history-bar-group i.average,
.web-report-history-legend i.average {
  background: var(--accent-secondary);
}

.web-report-history-bar-group b {
  position: absolute;
  right: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(50%);
  color: var(--text);
  font-size: 10px;
  line-height: 1;
}

.web-report-history-bar-group > span {
  overflow: hidden;
  padding-top: var(--space-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-report-history-legend {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.web-report-history-legend i {
  display: inline-block;
  width: 16px;
  height: 4px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

.web-report-history-legend i.trend {
  height: 0;
  border-top: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
}

.web-report-history-list {
  display: grid;
  gap: var(--space-1);
}

.web-report-history-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 88px 88px;
  align-items: center;
  gap: var(--space-2);
  min-height: 46px;
  border-bottom: 1px solid var(--border);
}

.web-report-history-list > div > span {
  display: grid;
  min-width: 0;
}

.web-report-history-list strong,
.web-report-history-list b {
  color: var(--text);
  font-size: 13px;
}

.web-report-history-list small,
.web-report-history-list em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-report-footer {
  justify-content: center;
  margin-top: var(--space-5);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.web-report-footer img {
  width: 150px;
  height: auto;
}

.video-policy-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  padding: 10px 12px;
  color: var(--muted);
}

.video-policy-note strong {
  color: var(--accent);
}

.video-library-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.video-library-stat-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.video-library-stat-strip strong {
  color: var(--text);
  font-size: 15px;
}

.video-admin-tool-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.video-admin-tool-tabs button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  padding: 12px 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.video-admin-tool-tabs button:hover,
.video-admin-tool-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 12%, transparent);
}

.video-admin-tool-tabs button:active {
  transform: translateY(1px);
}

.video-admin-tool-tabs strong,
.video-admin-tool-tabs small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-admin-tool-tabs strong {
  font-size: 14px;
  font-weight: 950;
}

.video-admin-tool-tabs small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.video-admin-dashboard,
.video-registration-tool,
.video-watch-tool {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.video-dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.video-dashboard-kpis button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  padding: 11px 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.video-dashboard-kpis button:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  transform: translateY(-1px);
}

.video-dashboard-kpis button.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
}

.video-dashboard-kpis button.warn {
  border-color: color-mix(in srgb, var(--orange) 30%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-dashboard-kpis b,
.video-dashboard-kpis strong,
.video-dashboard-kpis small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-dashboard-kpis b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-dashboard-kpis strong {
  color: var(--text);
  font-size: 23px;
  font-weight: 950;
  line-height: 1;
}

.video-dashboard-kpis small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-library-tool-deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.video-library-tool-deck button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label badge"
    "title badge"
    "note note";
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  min-height: 68px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.video-library-tool-deck button:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.video-library-tool-deck button.warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-library-tool-deck button.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
}

.video-library-tool-deck span,
.video-library-tool-deck strong,
.video-library-tool-deck small,
.video-library-tool-deck b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-tool-deck span {
  grid-area: label;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-library-tool-deck strong {
  grid-area: title;
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-library-tool-deck small {
  grid-area: note;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-library-tool-deck b {
  grid-area: badge;
  justify-self: end;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  padding: 5px 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 920;
}

.video-library-tool-deck button.warn span,
.video-library-tool-deck button.warn b {
  color: var(--orange);
}

.video-library-tool-deck button.done span,
.video-library-tool-deck button.done b {
  color: var(--green);
}

.video-absence-group-list,
.video-dashboard-lesson-list {
  display: grid;
  gap: 8px;
}

.video-absence-group-card,
.video-dashboard-lesson-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 12px;
}

.video-dashboard-lesson-list button {
  grid-template-columns: auto minmax(0, 1fr) auto;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.video-absence-group-card strong,
.video-absence-group-card small,
.video-absence-group-card p,
.video-dashboard-lesson-list strong,
.video-dashboard-lesson-list small,
.video-dashboard-lesson-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-absence-group-card strong,
.video-dashboard-lesson-list strong {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 940;
  white-space: nowrap;
}

.video-absence-group-card small,
.video-dashboard-lesson-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.video-absence-group-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.video-absence-student-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.video-absence-student-links .text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--orange) 20%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
  padding: 4px 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.video-absence-student-links .text-link small {
  display: inline;
  margin: 0;
  color: var(--orange);
  font-size: 10px;
  font-weight: 900;
}

.video-dashboard-modal {
  width: min(920px, calc(100vw - 32px));
}

.video-dashboard-modal-body,
.video-detail-modal-body {
  display: grid;
  gap: 12px;
}

.video-dashboard-modal-list {
  display: grid;
  gap: 8px;
}

.video-dashboard-modal-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
}

.video-dashboard-modal-list.compact button {
  min-height: 50px;
}

.video-dashboard-modal-list strong,
.video-dashboard-modal-list small,
.video-dashboard-modal-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-dashboard-modal-list strong {
  display: block;
  font-size: 13px;
  font-weight: 930;
}

.video-dashboard-modal-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-dashboard-modal-list em {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.video-dashboard-lesson-list em {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.video-registration-modal {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
}

.video-registration-modal-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 2px;
}

.video-register-modal-section {
  display: grid;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 12px;
}

.video-register-modal-section.compact {
  gap: 8px;
}

.video-register-modal-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.video-register-basic-grid,
.video-register-window-grid {
  display: grid;
  gap: 9px;
}

.video-register-basic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.video-register-window-grid {
  grid-template-columns: repeat(2, minmax(160px, .65fr)) minmax(240px, 1fr);
  align-items: end;
}

.video-register-window-grid label {
  min-width: 0;
}

.video-register-window-grid label small {
  margin-left: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.video-register-window-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.45;
}

.form-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-register-link-stack {
  display: grid;
  gap: 8px;
}

.video-register-link-item {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
  padding: 7px;
}

.video-register-link-row {
  display: grid;
  grid-template-columns: 28px minmax(160px, .9fr) minmax(190px, 1fr) minmax(150px, .8fr);
  gap: 7px;
  align-items: end;
}

.video-register-link-row > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.video-register-link-preview .video-provider-preview {
  min-height: 52px;
  padding: 6px 8px;
}

.video-register-link-preview .video-provider-preview img {
  width: 74px;
  border-radius: 10px;
}

.video-register-link-preview .video-provider-placeholder {
  width: 42px;
  border-radius: 10px;
}

.video-class-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-class-date-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 142px;
  column-gap: 10px;
  row-gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
}

.video-class-date-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  justify-self: center;
  margin: 0;
}

.video-class-date-row span {
  min-width: 0;
}

.video-class-date-row strong,
.video-class-date-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-class-date-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-class-date-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.video-watch-overview {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.video-watch-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.video-watch-overview-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 950;
}

.video-watch-overview-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-watch-bars {
  display: grid;
  gap: 6px;
}

.video-watch-bars button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 112px;
  gap: 9px;
  align-items: center;
  overflow: hidden;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.video-watch-bars button.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.video-watch-bars span,
.video-watch-bars strong,
.video-watch-bars small,
.video-watch-bars em,
.video-watch-bars b {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-watch-bars strong {
  display: block;
  font-size: 13px;
  font-weight: 930;
}

.video-watch-bars small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-watch-bars em {
  color: var(--accent);
  font-size: 20px;
  font-style: normal;
  font-weight: 950;
  text-align: right;
}

.video-watch-bars b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-align: right;
}

.video-watch-bars i {
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.video-watch-bars i::before {
  display: block;
  width: var(--video-watch-rate);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  content: "";
}

.video-library-issue-strip {
  display: grid;
  grid-template-columns: auto minmax(110px, auto) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 8px 10px;
}

.video-library-issue-strip > strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.video-library-issue-strip > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.video-library-issue-strip > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.video-library-issue-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "note note";
  align-items: center;
  column-gap: 7px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 6px 8px;
}

.video-library-issue-chip b {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-issue-chip strong {
  grid-area: count;
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.video-library-issue-chip small {
  grid-area: note;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-issue-chip.warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-library-issue-chip.warn strong {
  color: var(--orange);
}

.video-priority-panel {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 10px;
}

.video-priority-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-priority-head strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 940;
}

.video-priority-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-priority-head > span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  padding: 5px 9px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 940;
}

.video-priority-list {
  display: grid;
  gap: 6px;
}

.video-priority-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, auto) minmax(160px, .7fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.video-priority-list button:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

.video-priority-list button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-priority-list strong,
.video-priority-list small,
.video-priority-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-priority-list strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 930;
}

.video-priority-list small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
}

.video-priority-list b {
  justify-self: start;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-soft));
  padding: 5px 8px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.video-priority-list button.warn b {
  background: color-mix(in srgb, var(--orange) 14%, var(--surface-soft));
  color: var(--orange);
}

.video-priority-list button.pending b {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface-soft));
  color: var(--blue);
}

.video-priority-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.video-unit-ops-panel {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
  padding: 10px;
}

.video-unit-ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.video-unit-ops-head strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-unit-ops-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-unit-ops-grid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.video-unit-ops-grid > span,
.video-unit-ops-grid > button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
}

.video-unit-ops-grid > button {
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.video-unit-ops-grid > button:hover,
.video-unit-ops-grid > button.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.video-unit-ops-grid > button:active {
  transform: translateY(1px);
}

.video-unit-ops-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-unit-ops-grid strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 950;
}

.video-unit-ops-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-unit-ops-grid .summary {
  border-color: color-mix(in srgb, var(--green) 22%, var(--border));
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.video-unit-ops-grid .warn {
  border-color: color-mix(in srgb, var(--orange) 32%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-unit-ops-grid .empty {
  opacity: .72;
}

.video-library-flow-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.video-library-flow-strip span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "step title"
    "step desc";
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 9px 11px;
}

.video-library-flow-strip b {
  grid-area: step;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-library-flow-strip strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-flow-strip small {
  grid-area: desc;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-reference-checklist {
  margin-top: 10px;
}

.video-reference-checklist > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-reference-checklist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.video-reference-checklist-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 78px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 55%, var(--surface));
  padding: 9px 10px;
}

.video-reference-checklist-grid b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-reference-checklist-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-reference-checklist-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.4;
}

.video-register-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

.video-register-optional-details,
.video-optional-classification {
  border-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

.video-register-optional-details > summary small,
.video-optional-classification > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-register-optional-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.video-register-optional-grid .wide {
  grid-column: 1 / -1;
}

.video-optional-classification .video-unit-ops-panel {
  margin-top: 10px;
  border-radius: 16px;
}

.video-access-guide {
  margin-top: 0;
}

.video-access-guide > summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.video-access-guide-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.video-access-decision-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.video-access-decision-matrix span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 88px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  padding: 9px 10px;
}

.video-access-decision-matrix b {
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-access-decision-matrix strong,
.video-access-decision-matrix small,
.video-access-decision-matrix em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-access-decision-matrix strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-access-decision-matrix small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.video-access-decision-matrix em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 720;
}

.video-access-guide-row {
  display: grid;
  gap: 3px;
  border-radius: 12px;
  background: var(--surface);
  padding: 8px 10px;
}

.video-access-guide-row span {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.video-access-guide-row small {
  color: var(--muted);
  line-height: 1.45;
}

.video-registration-access-summary {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 11px 12px;
}

.video-registration-access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.video-registration-access-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-registration-access-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.video-registration-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.video-registration-access-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
}

.video-registration-access-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-registration-access-grid strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-access-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-access-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.video-provider-preview {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 8px 10px;
}

.video-provider-preview.empty {
  grid-template-columns: auto minmax(0, 1fr);
  border-style: dashed;
}

.video-provider-preview img,
.video-provider-placeholder {
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  object-fit: cover;
}

.video-provider-placeholder {
  display: inline-grid;
  place-items: center;
  width: 54px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 950;
}

.video-provider-preview div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.video-provider-preview strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-provider-preview code {
  min-width: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
  padding: 4px 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-provider-preview small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.video-registration-checklist {
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  padding-top: 9px;
}

.video-registration-checklist > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.video-registration-checklist strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.video-registration-checklist small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.video-registration-checklist ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.video-registration-checklist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 8px;
}

.video-registration-checklist li::before {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  content: "";
}

.video-registration-checklist li.done::before {
  background: #16a34a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 14%, transparent);
}

.video-registration-checklist li.warn::before {
  background: #f59e0b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 16%, transparent);
}

.video-registration-checklist li b,
.video-registration-checklist li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-checklist li b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.video-registration-checklist li span {
  color: var(--text);
  font-size: 11px;
  font-weight: 820;
}

.video-registration-readiness {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
  padding: 10px 12px;
}

.video-registration-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.video-registration-readiness-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-registration-readiness-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.video-registration-readiness-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.video-registration-readiness-grid span {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  grid-template-areas:
    "dot label"
    "dot value";
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 10px;
}

.video-registration-readiness-grid span::before {
  grid-area: dot;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  content: "";
}

.video-registration-readiness-grid span.done::before {
  background: #16a34a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 16%, transparent);
}

.video-registration-readiness-grid span.warn::before {
  background: #f59e0b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 18%, transparent);
}

.video-registration-readiness-grid span.pending::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.video-registration-readiness-grid b,
.video-registration-readiness-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-readiness-grid b {
  grid-area: label;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-registration-readiness-grid strong {
  grid-area: value;
  color: var(--text);
  font-size: 12px;
  font-weight: 880;
}

.video-register-advanced-details {
  margin-top: 0;
}

.video-register-advanced-body {
  display: grid;
  gap: 10px;
}

.video-register-advanced-body .compact-label {
  margin-bottom: 0;
}

.video-access-preset-strip {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  padding: 10px 12px;
}

.video-access-preset-strip > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.video-access-preset-strip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-access-preset-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-access-preset-strip > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-access-preset-strip button {
  display: inline-grid;
  gap: 3px;
  min-width: 132px;
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.video-access-preset-strip button b,
.video-access-preset-strip button strong,
.video-access-preset-strip button small,
.video-access-preset-strip button em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-access-preset-strip button b {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-access-preset-strip button strong {
  color: var(--text);
  font-size: 11px;
  font-weight: 840;
}

.video-access-preset-strip button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
}

.video-access-preset-strip button em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 720;
}

.video-access-preset-strip button.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.video-access-preset-strip button.active b,
.video-access-preset-strip button.active strong {
  color: var(--accent);
}

.video-register-permission-panel {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

.video-register-permission-panel > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-audience-preview-details > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-register-permission-body {
  display: grid;
  gap: 10px;
}

.video-register-permission-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.video-register-permission-summary span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
}

.video-register-permission-summary b,
.video-register-permission-summary strong,
.video-register-permission-summary small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-register-permission-summary b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.video-register-permission-summary strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-register-permission-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-register-permission-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.video-register-permission-controls .video-status-picker.wide,
.video-register-permission-controls .video-channel-picker.wide {
  grid-column: auto;
}

.video-register-permission-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.video-registration-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 10px 12px;
}

.video-registration-action-row.pending {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface));
}

.video-registration-action-row.ready {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.video-registration-action-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.video-registration-action-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-registration-action-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-action-row small b {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  padding: 3px 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-registration-action-row.pending small b {
  background: color-mix(in srgb, var(--amber) 16%, var(--surface));
  color: var(--orange);
}

.video-registration-action-row.ready small b {
  background: color-mix(in srgb, var(--green) 14%, var(--surface));
  color: var(--green);
}

.video-registration-ops-brief {
  display: grid;
  gap: 9px;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 11px 12px;
}

.video-registration-ops-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.video-registration-ops-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-registration-ops-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.video-registration-ops-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.video-registration-ops-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
}

.video-registration-ops-grid span.pending {
  border-color: color-mix(in srgb, #f59e0b 26%, var(--border));
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
}

.video-registration-ops-grid b,
.video-registration-ops-grid strong,
.video-registration-ops-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-registration-ops-grid b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.video-registration-ops-grid strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-registration-ops-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.manual-student-row {
  grid-template-columns: auto minmax(0, 1fr);
  cursor: pointer;
}

.manual-student-row input,
.video-class-row input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.video-class-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.video-class-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 9px 10px;
  cursor: pointer;
}

.video-class-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.video-class-row small,
.video-permission-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.video-permission-hint {
  margin: 10px 0 0;
  font-weight: 720;
}

.video-status-picker,
.video-channel-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  padding: 10px 12px;
}

.video-status-picker.wide,
.video-channel-picker.wide {
  grid-column: 1 / -1;
}

.video-status-picker legend,
.video-channel-picker legend {
  padding: 0 4px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-status-picker p,
.video-channel-picker p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.video-status-picker > div,
.video-channel-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-status-picker label,
.video-channel-picker label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.video-status-picker input,
.video-channel-picker input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.video-audience-summary {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 11px 12px;
}

.video-audience-summary.draft {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
}

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

.video-audience-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-access-rule-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.video-access-rule-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.video-access-rule-strip b {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.video-access-rule-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-audience-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.video-audience-summary.draft .video-audience-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-audience-metrics span {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.video-audience-metrics strong {
  color: var(--text);
  font-size: 14px;
}

.video-lesson-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.video-lesson-control-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px 10px;
}

.video-lesson-control-strip span.done {
  border-color: color-mix(in srgb, #16a34a 20%, var(--border));
}

.video-lesson-control-strip span.warn {
  border-color: color-mix(in srgb, var(--amber) 28%, var(--border));
  background: color-mix(in srgb, var(--amber) 6%, var(--surface));
}

.video-lesson-control-strip span.pending {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.video-lesson-control-strip b,
.video-lesson-control-strip strong,
.video-lesson-control-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-lesson-control-strip b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.video-lesson-control-strip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-lesson-control-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-visibility-summary {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
}

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

.video-visibility-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-visibility-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.video-visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
  min-width: 0;
}

.video-visibility-grid span {
  display: grid;
  grid-template-areas:
    "dot label"
    "dot value";
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 7px 10px;
}

.video-visibility-grid span::before {
  grid-area: dot;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  content: "";
}

.video-visibility-grid span.done::before {
  background: #16a34a;
  box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 16%, transparent);
}

.video-visibility-grid span.warn::before {
  background: #f59e0b;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 18%, transparent);
}

.video-visibility-grid b,
.video-visibility-grid strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-visibility-grid b {
  grid-area: label;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-visibility-grid strong {
  grid-area: value;
  color: var(--text);
  font-size: 12px;
  font-weight: 880;
}

.video-access-reason-strip {
  display: grid;
  grid-template-columns: minmax(160px, .32fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px 11px;
}

.video-access-reason-strip > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.video-access-reason-strip > div:first-child strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-access-reason-strip > div:first-child small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.video-access-reason-strip > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
  min-width: 0;
}

.video-access-reason-strip span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "reason count"
    "state state";
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 6px 8px;
}

.video-access-reason-strip b {
  grid-area: reason;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-access-reason-strip span strong {
  grid-area: count;
  color: var(--green);
  font-size: 13px;
  font-weight: 950;
}

.video-access-reason-strip span small {
  grid-area: state;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-access-reason-strip span.warn {
  border-color: color-mix(in srgb, var(--orange) 28%, var(--border));
  background: color-mix(in srgb, var(--orange) 8%, var(--surface));
}

.video-access-reason-strip span.warn strong {
  color: var(--orange);
}

.video-watch-filter-toolbar {
  display: grid;
  gap: 9px;
  margin: 12px 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
}

.video-watch-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-watch-filter-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-watch-filter-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-watch-filter-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-watch-filter-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  padding: 6px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.video-watch-filter-head b {
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.video-watch-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 7px;
  align-items: end;
}

.video-watch-search-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 880;
}

.video-watch-search-row input {
  min-height: 36px;
  border-radius: 13px;
  padding: 8px 10px;
  font-size: 12px;
}

.video-watch-search-row button {
  min-height: 36px;
  white-space: nowrap;
}

.video-watch-filter-buttons {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.video-watch-filter-buttons button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 5px 9px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.video-watch-filter-buttons button:hover,
.video-watch-filter-buttons button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.video-watch-filter-buttons button:active {
  transform: translateY(1px);
}

.video-watch-filter-buttons b,
.video-watch-filter-buttons small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-watch-filter-buttons b {
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.video-watch-filter-buttons small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.video-watch-filter-buttons button.active b {
  color: var(--accent);
}

.video-student-watch-search {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px;
}

.video-student-watch-search-drawer {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
}

.video-student-watch-search-drawer > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-student-watch-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-student-watch-search-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-student-watch-search-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 940;
}

.video-student-watch-search-head small,
.video-student-watch-search-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.video-student-watch-search label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 880;
}

.video-student-watch-search input {
  min-height: 38px;
  border-radius: 14px;
  padding: 9px 11px;
  font-size: 13px;
}

.video-student-watch-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-student-watch-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 9px 11px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.video-student-watch-results strong,
.video-student-watch-results small,
.video-student-watch-results b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-student-watch-results strong {
  display: block;
  font-size: 13px;
  font-weight: 920;
}

.video-student-watch-results small,
.video-student-watch-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-student-watch-results b {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  padding: 6px 9px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 920;
}

.video-student-watch-empty {
  margin: 0;
}

.video-student-watch-modal {
  width: min(980px, calc(100vw - 32px));
}

.video-student-watch-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.video-student-watch-summary span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-soft) 64%, var(--surface));
  padding: 10px 12px;
}

.video-student-watch-summary b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-student-watch-summary strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
}

.video-student-watch-summary .done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.video-student-watch-summary .pending {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.video-student-watch-summary .warn {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

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

.video-student-watch-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 10px 12px;
}

.video-student-watch-list article.done {
  border-color: color-mix(in srgb, var(--green) 24%, var(--border));
  background: color-mix(in srgb, var(--green) 5%, var(--surface));
}

.video-student-watch-list article.pending {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
}

.video-student-watch-list article.warn {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-student-watch-list div,
.video-student-watch-list strong,
.video-student-watch-list small,
.video-student-watch-list em,
.video-student-watch-list b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-student-watch-list strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-student-watch-list small,
.video-student-watch-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.video-student-watch-list b {
  color: var(--text);
  font-size: 12px;
  font-weight: 930;
}

.video-student-watch-list i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.video-student-watch-list i::before {
  display: block;
  width: var(--video-student-watch-rate, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  content: "";
}

.video-student-watch-list article > small {
  grid-column: 1 / -1;
}

.video-student-watch-link-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.video-student-watch-link-list span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--violet) 7%, var(--surface-soft));
  padding: 7px 8px;
}

.video-student-watch-link-list strong {
  font-size: 11px;
}

.video-student-watch-link-list em,
.video-student-watch-link-list small {
  font-size: 10px;
}

.video-operation-board {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--violet) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--violet) 5%, var(--surface));
  padding: 10px 12px;
}

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

.video-operation-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-operation-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.video-operation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.video-operation-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.video-operation-grid span.done {
  border-color: color-mix(in srgb, #16a34a 20%, var(--border));
}

.video-operation-grid span.warn {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
  background: color-mix(in srgb, var(--amber) 5%, var(--surface));
}

.video-operation-grid span.pending {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.video-operation-grid b,
.video-operation-grid strong,
.video-operation-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-operation-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-operation-grid strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 920;
}

.video-operation-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-followup-panel {
  display: grid;
  gap: 10px;
  margin: 12px 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 12px;
}

.video-followup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.video-followup-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.video-followup-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 920;
}

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

.video-followup-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  padding: 5px 9px;
  color: var(--accent);
  font-weight: 900;
}

.video-followup-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-followup-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.video-followup-list button.warn {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
  background: color-mix(in srgb, var(--amber) 6%, var(--surface));
}

.video-followup-list button.pending {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

.video-followup-list span,
.video-followup-list strong,
.video-followup-list small,
.video-followup-list b,
.video-followup-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-followup-list span {
  display: grid;
  gap: 1px;
}

.video-followup-list strong {
  font-size: 13px;
  font-weight: 920;
}

.video-followup-list small,
.video-followup-list em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
}

.video-followup-list b {
  justify-self: end;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  padding: 4px 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-followup-list em {
  grid-column: 1 / -1;
}

.video-followup-more {
  margin: -2px 0 0;
}

.video-audience-preview {
  display: grid;
  gap: 5px;
}

.video-audience-preview p {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.video-audience-preview b {
  color: var(--text);
  font-weight: 900;
}

.video-audience-draft-diagnostics {
  display: grid;
  gap: 8px;
}

.video-audience-draft-diagnostics .video-access-reason-strip {
  grid-template-columns: minmax(120px, .24fr) minmax(0, 1fr);
  margin-bottom: 0;
  padding: 8px 9px;
}

.video-audience-draft-followups {
  display: grid;
  grid-template-columns: minmax(150px, .26fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 9px;
}

.video-audience-draft-followups > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.video-audience-draft-followups strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 920;
}

.video-audience-draft-followups small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.video-audience-draft-followups > div:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.video-audience-draft-followups span {
  display: grid;
  grid-template-columns: minmax(72px, .24fr) minmax(0, 1fr) minmax(88px, .32fr);
  gap: 7px;
  align-items: center;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--orange) 18%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 6%, var(--surface));
  padding: 5px 9px;
}

.video-audience-draft-followups span.done {
  border-color: color-mix(in srgb, var(--green) 18%, var(--border));
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.video-audience-draft-followups b,
.video-audience-draft-followups em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-audience-draft-followups b {
  color: var(--text);
  font-size: 12px;
  font-style: normal;
  font-weight: 920;
}

.video-audience-draft-followups em {
  color: var(--orange);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.video-audience-draft-followups span.done em {
  color: var(--green);
}

.video-manual-picker {
  grid-column: 1 / -1;
}

.video-register-panel .video-lesson-form {
  margin-bottom: 0;
}

.video-permission-editor {
  margin-bottom: 14px;
}

.video-lesson-diagnostics-drawer,
.video-watch-table-drawer {
  margin: 0 0 14px;
}

.video-lesson-diagnostics-drawer > summary,
.video-watch-table-drawer > summary {
  gap: 12px;
}

.video-lesson-diagnostics-drawer > summary span,
.video-watch-table-drawer > summary span {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 930;
}

.video-lesson-diagnostics-drawer > summary small,
.video-watch-table-drawer > summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-lesson-diagnostics-body {
  display: grid;
  gap: 10px;
}

.video-lesson-diagnostics-body .video-visibility-summary,
.video-lesson-diagnostics-body .video-access-reason-strip,
.video-lesson-diagnostics-body .video-operation-board,
.video-lesson-diagnostics-body .video-followup-panel,
.video-lesson-diagnostics-body .video-audience-summary {
  margin-bottom: 0;
}

.video-watch-table-drawer .video-watch-filter-toolbar {
  margin: 0 0 10px;
}

.video-watch-table-drawer .table-wrap {
  margin-bottom: 0;
}

.video-permission-edit-brief {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
}

.video-permission-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-permission-edit-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.video-permission-edit-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-permission-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.video-permission-edit-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
}

.video-permission-edit-grid span.done {
  border-color: color-mix(in srgb, #16a34a 20%, var(--border));
}

.video-permission-edit-grid span.warn {
  border-color: color-mix(in srgb, var(--amber) 24%, var(--border));
  background: color-mix(in srgb, var(--amber) 5%, var(--surface));
}

.video-permission-edit-grid span.pending {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
}

.video-permission-edit-grid b,
.video-permission-edit-grid strong,
.video-permission-edit-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-permission-edit-grid b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-permission-edit-grid strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.video-permission-edit-grid small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-embed-preview {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 12px 0 16px;
}

.video-embed-info {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 10px 12px;
}

.video-embed-info-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.video-embed-info-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.video-embed-info-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-embed-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-embed-info-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 7px 9px;
}

.video-embed-info-grid b,
.video-embed-info-grid strong,
.video-embed-info-grid small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-embed-info-grid b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.video-embed-info-grid strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.video-embed-info-grid small,
.video-embed-info p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.video-embed-info p {
  margin: 0;
  line-height: 1.45;
}

.video-lesson-ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.video-ops-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 82px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface));
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}

.video-ops-card b {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.video-ops-card strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1.05;
}

.video-ops-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-ops-card i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.video-ops-card i::before {
  content: "";
  display: block;
  width: var(--video-ops-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.video-ops-card.warn {
  border-color: color-mix(in srgb, var(--amber) 22%, var(--border));
  background: color-mix(in srgb, var(--amber) 7%, var(--surface));
}

.video-ops-card-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-ops-card-button:hover,
.video-ops-card-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-xs);
}

.video-watch-issues-summary {
  display: grid;
  gap: 10px;
}

.video-watch-actions-compact {
  justify-content: flex-end;
}

.video-watch-student-snapshot {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 12px;
}

.video-watch-snapshot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-watch-snapshot-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.video-watch-snapshot-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 940;
}

.video-watch-snapshot-head small,
.video-watch-snapshot-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-watch-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.video-watch-snapshot-grid button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--text);
  text-align: left;
}

.video-watch-snapshot-grid button.warn {
  border-color: color-mix(in srgb, var(--orange) 24%, var(--border));
  background: color-mix(in srgb, var(--orange) 7%, var(--surface));
}

.video-watch-snapshot-grid button.pending {
  border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
}

.video-watch-snapshot-grid button.done {
  border-color: color-mix(in srgb, var(--green) 20%, var(--border));
  background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.video-watch-snapshot-grid span,
.video-watch-snapshot-grid strong,
.video-watch-snapshot-grid small,
.video-watch-snapshot-grid b,
.video-watch-snapshot-grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-watch-snapshot-grid strong {
  display: block;
  font-size: 13px;
  font-weight: 930;
}

.video-watch-snapshot-grid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.video-watch-snapshot-grid b {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 5px 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 920;
}

.video-watch-snapshot-grid em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.video-watch-snapshot-note {
  margin: 0;
}

.video-detail-modal {
  width: min(1120px, calc(100vw - 32px));
}

.video-detail-modal .video-permission-editor {
  margin-bottom: 0;
}

.youtube-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #0f172a;
  box-shadow: var(--shadow-small);
}

.youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.portal-youtube-beta-player {
  display: grid;
  gap: 14px;
  aspect-ratio: auto;
  padding: 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 24%, rgb(49 66 138 / .42), transparent 34%),
    linear-gradient(145deg, #1f2a64, #0e1538 76%);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 20px 55px rgb(31 42 100 / .28);
}

.portal-youtube-beta-player.is-fullscreen {
  width: 100dvw;
  height: 100dvh;
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
  padding: clamp(12px, 2vw, 24px);
  border-radius: 0;
}

.portal-youtube-beta-player.is-fullscreen .portal-youtube-beta-stage {
  width: min(100%, calc((100dvh - 158px) * 16 / 9));
  max-height: calc(100dvh - 158px);
  align-self: center;
  justify-self: center;
}

.portal-youtube-beta-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 45%, rgb(49 66 138 / .34), transparent 32%), #0e1538;
}

.portal-youtube-beta-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity .18s ease;
}

.portal-youtube-beta-stage.is-playing iframe {
  opacity: 1;
}

.portal-youtube-beta-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 18px;
  border: 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 46%, rgb(49 66 138 / .58), rgb(24 31 78 / .96) 36%, #0e1538 78%),
    linear-gradient(145deg, #1f2a64, #0e1538);
  background-position: center;
  background-size: cover;
  cursor: pointer;
  transition: opacity .18s ease, background .18s ease;
}

.portal-youtube-beta-poster.is-playing,
.portal-youtube-beta-poster.is-activated,
.portal-youtube-beta-player[data-video-activated="true"] .portal-youtube-beta-poster {
  opacity: 0;
  pointer-events: none;
}

.portal-youtube-beta-poster span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #31428a, #1f2a64);
  box-shadow: 0 18px 45px rgb(31 42 100 / .46);
}

.portal-youtube-beta-poster svg,
.portal-youtube-beta-main svg,
.portal-youtube-beta-controls svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
}

.portal-youtube-beta-poster svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  stroke-width: 0;
}

.portal-youtube-beta-poster strong {
  max-width: min(460px, 92%);
  text-align: center;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 900;
  letter-spacing: 0;
}

.portal-youtube-beta-timeline {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.portal-youtube-beta-main {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #31428a, #1f2a64);
  box-shadow: 0 14px 34px rgb(31 42 100 / .34);
  cursor: pointer;
}

.portal-youtube-beta-main svg {
  fill: currentColor;
  stroke-width: 0;
}

.portal-youtube-beta-progress-wrap {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.portal-youtube-beta-progress-wrap input[type="range"] {
  width: 100%;
  accent-color: #1f2a64;
}

.portal-youtube-beta-time {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  font-weight: 850;
}

.portal-youtube-beta-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.portal-youtube-beta-timeline,
.portal-youtube-beta-controls {
  transition: opacity .18s ease, transform .18s ease;
}

.portal-youtube-beta-player.is-fullscreen[data-video-controls-visible="false"] .portal-youtube-beta-timeline,
.portal-youtube-beta-player.is-fullscreen[data-video-controls-visible="false"] .portal-youtube-beta-controls {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

.portal-youtube-beta-controls button {
  display: inline-grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .08);
  font-weight: 900;
  cursor: pointer;
}

.portal-youtube-beta-controls button:hover {
  background: rgba(255, 255, 255, .13);
}

.video-player-placeholder {
  display: grid;
  min-height: 180px;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted);
  background: var(--surface-soft);
}

.portal-video-library {
  display: grid;
  gap: 14px;
}

.portal-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, .85fr);
  gap: 14px;
}

.portal-video-link-stack {
  display: grid;
  gap: 12px;
}

.portal-video-link-card {
  display: grid;
  gap: 8px;
}

.portal-video-link-card header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.portal-video-link-card header > span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
}

.portal-video-link-card header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-video-link-card header strong,
.portal-video-link-card header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-link-card header small {
  color: var(--muted);
}

.portal-video-link-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 10px;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.portal-video-link-selector button {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  gap: 2px 8px;
  align-items: center;
  min-width: 174px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.portal-video-link-selector button > span {
  grid-row: 1 / span 2;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-soft));
  color: var(--accent);
  font-size: 12px;
  font-weight: 950;
}

.portal-video-link-selector strong,
.portal-video-link-selector small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-link-selector strong {
  font-size: 12px;
  font-weight: 930;
}

.portal-video-link-selector small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.portal-video-link-selector button.active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.portal-video-link-description {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-link-description span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
}

.portal-video-player-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.portal-video-player-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.portal-video-player-head h3,
.portal-video-player-head p {
  margin: 0;
}

.portal-video-player-head h3 {
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0;
}

.portal-video-player-head p {
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.45;
}

.portal-video-status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 5px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.portal-video-status-pill.progress {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent);
}

.portal-video-status-pill.done {
  border-color: color-mix(in srgb, var(--green) 28%, var(--border));
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: var(--green);
}

.portal-video-access-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 62%, var(--surface));
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portal-video-access-note span {
  color: var(--text);
  font-weight: 900;
}

.portal-video-telemetry {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 10px;
}

.portal-video-telemetry-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.portal-video-telemetry-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-video-telemetry-head strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 930;
}

.portal-video-telemetry-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.portal-video-telemetry-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 920;
  white-space: nowrap;
}

.portal-video-telemetry-head > span.done {
  background: color-mix(in srgb, var(--green) 13%, var(--surface));
  color: var(--green);
}

.portal-video-telemetry-head > span.warn {
  background: color-mix(in srgb, var(--red) 11%, var(--surface));
  color: var(--red);
}

.portal-video-progress-track {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, var(--border));
}

.portal-video-progress-track::before {
  content: "";
  display: block;
  width: var(--video-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.portal-video-telemetry-grid,
.portal-video-event-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.portal-video-event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-video-telemetry-grid span,
.portal-video-event-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  border-radius: 13px;
  background: var(--surface);
  padding: 8px 9px;
}

.portal-video-telemetry-grid b,
.portal-video-event-grid b {
  color: var(--muted);
  font-size: 10px;
  font-weight: 920;
  text-transform: uppercase;
}

.portal-video-telemetry-grid strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.portal-video-telemetry-grid small,
.portal-video-event-grid small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-priority-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.portal-video-priority-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 9px 10px;
}

.portal-video-priority-strip b,
.portal-video-priority-strip strong,
.portal-video-priority-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-priority-strip b {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.portal-video-priority-strip strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.portal-video-priority-strip small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-video-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}

.portal-video-summary-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface));
  padding: 7px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.portal-video-summary-strip strong {
  color: var(--text);
  font-size: 15px;
}

.portal-video-summary-strip p {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 8px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.portal-video-subject-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.portal-video-subject-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 5px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.portal-video-subject-strip b {
  color: var(--accent);
  font-weight: 950;
}

.portal-video-subject-strip small {
  color: var(--muted);
  font-weight: 760;
}

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

.video-watch-summary {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 700;
}

.portal-video-week-list {
  display: grid;
  align-content: start;
  gap: 9px;
}

.portal-video-week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  padding: 9px 11px;
}

.portal-video-week-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.portal-video-week-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.portal-video-week-group {
  display: grid;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 9px;
}

.portal-video-week-group header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.portal-video-week-group header strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 930;
}

.portal-video-week-group header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.portal-video-week-videos {
  display: grid;
  gap: 6px;
}

.portal-video-week-videos button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
}

.portal-video-week-videos button strong,
.portal-video-week-videos button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-week-videos button strong {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 900;
}

.portal-video-week-videos button small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
}

.portal-video-week-videos button.active {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
}

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

.portal-video-list button {
  display: grid;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
}

.portal-video-list button span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.portal-video-list button strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
}

.portal-video-list button em {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-video-list button small {
  color: var(--muted);
  font-weight: 760;
}

.portal-video-list button i {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 74%, var(--surface));
}

.portal-video-list button i::before {
  content: "";
  display: block;
  width: var(--video-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--violet));
}

.portal-video-list button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.omr-report-row,
.video-watch-log-row {
  align-items: center;
}

.omr-report-row .ghost-button {
  justify-self: center;
  text-decoration: none;
}

html[data-theme="dark"] .youtube-frame {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

@media (max-width: 900px) {
  .portal-video-layout,
  .portal-radar-card {
    grid-template-columns: 1fr;
  }

  .portal-student-dashboard-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .portal-greeting-logo {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    order: 0;
  }

  .portal-student-greeting {
    grid-column: 1;
    grid-row: 1;
  }

  .portal-dashboard-message {
    grid-column: 1 / -1;
    grid-row: 2;
  }

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

  .portal-routine-grid {
    grid-template-columns: 1fr;
  }

  .portal-video-week-list {
    order: -1;
  }
}

@media (max-width: 640px) {
  .portal-screen {
    padding: 10px;
  }

  .portal-shell {
    gap: 10px;
  }

  .portal-header {
    align-items: start;
    gap: 10px;
    border-radius: 18px;
    padding: 12px;
  }

  .portal-header h1 {
    font-size: 19px;
    line-height: 1.18;
  }

  .portal-header p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .portal-header-actions {
    gap: 6px;
  }

  .portal-header-icon-button {
    width: 36px;
    height: 36px;
    border-radius: 14px;
  }

  .portal-nav {
    top: 8px;
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    gap: 5px;
    overflow-x: auto;
    border-radius: 18px;
    padding: 5px;
    scrollbar-width: none;
  }

  .portal-nav::-webkit-scrollbar {
    display: none;
  }

  .portal-nav button {
    min-height: 46px;
    border-radius: 14px;
    padding: 6px 7px;
  }

  .portal-nav strong {
    font-size: 12px;
  }

  .portal-nav span {
    font-size: 10px;
  }

  .portal-content {
    gap: 10px;
  }

  .portal-dashboard-logo {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .portal-student-dashboard-card {
    min-height: 0;
    gap: 12px;
    border-radius: 22px;
    padding: 14px;
  }

  .portal-greeting-date {
    font-size: 13px;
  }

  .portal-student-greeting h2 {
    font-size: 24px;
  }

  .portal-student-mini-profile strong {
    font-size: 16px;
  }

  .portal-student-mini-profile small {
    font-size: 12px;
  }

  .portal-dashboard-message {
    border-radius: 14px;
    min-height: 42px;
    padding: 8px 11px;
  }

  .portal-dashboard-message span {
    width: 24px;
    height: 24px;
  }

  .portal-dashboard-message p {
    font-size: 12px;
  }

  .portal-greeting-chips span {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 12px;
  }

  .portal-home-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .portal-home-action {
    justify-content: center;
    min-height: 34px;
    padding: 6px 10px;
  }

  .portal-home-action.kakao {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .portal-welcome-block {
    gap: 5px;
    padding: 2px;
  }

  .portal-welcome-block h2 {
    font-size: 24px;
    line-height: 1.16;
  }

  .portal-announcement-home-card,
  .portal-ai-comment-card,
  .portal-clinic-carousel-panel,
  .portal-routine-card,
  .portal-quick-card {
    border-radius: 18px;
  }

  .portal-announcement-home-card,
  .portal-ai-comment-card {
    gap: 9px;
    padding: 11px 12px;
  }

  .portal-announcement-home-card small {
    white-space: normal;
    line-height: 1.35;
  }

  .portal-ai-comment-card strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .portal-clinic-carousel-panel,
  .portal-routine-card {
    padding: 12px;
  }

  .portal-clinic-carousel {
    grid-auto-columns: minmax(190px, 82%);
    gap: 8px;
  }

  .portal-clinic-card {
    min-height: 70px;
    border-radius: 16px;
    padding: 9px 10px;
  }

  .portal-routine-card > div {
    gap: 7px;
  }

  .portal-routine-card span {
    border-radius: 14px;
    padding: 9px;
  }

  .portal-routine-card em {
    font-size: 18px;
  }

  .portal-quick-grid,
  .portal-exam-metrics,
  .portal-summary-metrics,
  .portal-learning-tabs,
  .portal-clinic-progress-summary,
  .portal-homework-detail-grid,
  .portal-score-hero-mini-grid,
  .portal-announcement-modal-layout,
  .portal-video-telemetry-grid,
  .portal-video-event-grid {
    grid-template-columns: 1fr;
  }

  .portal-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .portal-quick-card {
    min-height: 68px;
    padding: 10px;
  }

  .portal-quick-card strong {
    font-size: 16px;
  }

  .portal-announcement-home-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .portal-announcement-home-card em {
    grid-column: 2;
  }

  .portal-ai-comment-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .portal-ai-comment-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-notification-summary,
  .portal-ai-topic-row,
  .portal-ai-followup-box {
    grid-template-columns: 1fr;
  }

  .portal-ai-input-actions {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .portal-notification-card button {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .portal-notification-card em {
    grid-column: 2;
    justify-self: start;
  }

  .portal-score-hero-top {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 1100px) {
  .subject-workbench,
  .subject-tool-deck,
  .video-library-workbench,
  .video-register-grid,
  .exam-library-workspace,
  .omr-workbench {
    grid-template-columns: 1fr;
  }

  .exam-library-sidebar {
    position: static;
    max-height: none;
  }

  .answer-meta-grid.compact,
  .answer-config-grid.compact,
  .exam-register-row.compact,
  .exam-register-row.title-row.compact-title,
  .exam-quick-create-row,
  .omr-answer-bulk-panel,
  .answer-unit-step-grid {
    grid-template-columns: 1fr;
  }

  .exam-selected-summary {
    grid-template-columns: 1fr;
  }

  .exam-selected-metrics,
  .omr-answer-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .unit-usage-list,
  .subject-unit-search-results,
  .subject-bulk-unit-help,
  .omr-flow-strip,
  .omr-readiness-strip,
  .omr-answer-action-strip,
  .omr-review-metrics,
  .omr-answer-ops-brief,
  .omr-question-grid,
  .report-card-grid,
  .video-library-flow-strip,
  .video-unit-ops-grid,
  .video-reference-checklist-grid,
  .video-access-decision-matrix,
  .video-registration-ops-grid,
  .video-register-permission-summary,
  .video-registration-readiness-grid,
  .video-registration-access-grid,
  .video-registration-checklist ol,
  .video-visibility-grid,
  .video-operation-grid,
  .video-permission-edit-grid,
  .video-followup-list,
  .video-register-basic-grid,
  .video-registration-readiness-grid,
  .video-lesson-ops-summary,
  .video-lesson-control-strip,
  .video-watch-filter-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-dashboard-kpis,
  .video-library-tool-deck,
  .video-class-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-register-link-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .video-register-link-row label {
    grid-column: 2;
  }

  .video-watch-bars button {
    grid-template-columns: minmax(0, 1fr) 54px;
  }

  .video-watch-bars b {
    grid-column: 1 / -1;
    text-align: left;
  }

  .subject-video-status {
    justify-content: flex-start;
  }

  .video-embed-preview,
  .portal-video-layout,
  .video-access-reason-strip,
  .video-register-window-grid,
  .subject-priority-list button,
  .video-priority-list button,
  .video-audience-draft-followups,
  .video-audience-draft-diagnostics .video-access-reason-strip {
    grid-template-columns: 1fr;
  }

  .video-access-reason-strip > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-library-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .unit-builder-grid,
  .subject-edit-strip,
  .subject-add-grid,
  .unit-editor,
  .unit-add-row,
  .video-permission-grid {
    grid-template-columns: 1fr;
  }

  .video-library-filter {
    grid-template-columns: 1fr;
  }

  .unit-column {
    min-height: 0;
  }

  .unit-list {
    max-height: 260px;
  }

  .video-admin-tool-tabs,
  .video-dashboard-kpis,
  .video-library-tool-deck,
  .video-class-date-grid,
  .exam-selected-metrics,
  .omr-answer-config-grid,
  .omr-exam-picker-toolbar,
  .omr-exam-picker-toolbar.compact,
  .omr-exam-status-strip,
  .omr-session-control,
  .omr-upload-inline,
  .omr-manual-inline,
  .omr-identity-inputs {
    grid-template-columns: 1fr;
  }

  .omr-empty-guide li span,
  .omr-session-control > span small,
  .omr-session-control > small {
    min-width: 0;
    max-width: 100%;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: strict;
  }

  .video-absence-group-card,
  .video-dashboard-lesson-list button,
  .video-class-date-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .video-absence-group-card .ghost-button,
  .video-class-date-row input[type="date"] {
    width: 100%;
  }

  .video-library-filter label:first-child {
    grid-column: auto;
  }

  .video-lesson-active-filter {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .video-lesson-active-filter strong {
    white-space: normal;
  }
  .unit-usage-list,
  .subject-unit-search-results,
  .subject-bulk-unit-help,
  .omr-flow-strip,
  .omr-readiness-strip,
  .omr-answer-action-strip,
  .omr-review-metrics,
  .omr-answer-ops-brief,
  .omr-question-grid,
  .report-card-grid {
    grid-template-columns: 1fr;
  }

  .subject-unit-search-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .subject-unit-search-row small {
    grid-column: 2;
  }

  .omr-scan-guide {
    grid-template-columns: 1fr;
  }

  .omr-batch-row,
  .video-lesson-row {
    align-items: start;
  }

  .omr-batch-row {
    grid-template-columns: 1fr;
  }

  .video-lesson-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .video-lesson-row-ops {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-lesson-row-ops em {
    min-height: 38px;
    padding: 5px 6px;
  }

  .subject-priority-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .subject-priority-list button {
    gap: 7px;
  }

  .subject-priority-list b {
    justify-self: start;
  }

  .video-priority-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .video-priority-list button {
    gap: 7px;
  }

  .video-priority-list b {
    justify-self: start;
  }

  .video-class-list {
    grid-template-columns: 1fr;
  }

  .video-library-stat-strip,
  .video-library-flow-strip,
  .video-library-issue-strip,
  .video-library-issue-strip > div,
  .video-access-reason-strip,
  .video-access-reason-strip > div:last-child,
  .video-watch-filter-buttons,
  .video-unit-ops-grid,
  .video-reference-checklist-grid,
  .video-access-decision-matrix,
  .video-registration-ops-grid,
  .video-access-guide-list,
  .video-registration-readiness-grid,
  .video-register-basic-grid,
  .video-register-window-grid,
  .video-watch-snapshot-grid,
  .video-audience-draft-followups,
  .video-audience-draft-diagnostics .video-access-reason-strip,
  .video-audience-draft-followups span,
  .video-lesson-ops-summary,
  .video-lesson-control-strip,
  .video-audience-metrics,
  .video-audience-summary.draft .video-audience-metrics,
  .portal-video-priority-strip,
  .portal-video-summary-strip {
    grid-template-columns: 1fr;
  }

  .video-registration-access-grid,
  .video-register-permission-summary,
  .video-register-permission-controls,
  .video-register-optional-grid,
  .video-registration-checklist ol,
  .video-visibility-grid,
  .video-operation-grid,
  .video-permission-edit-grid,
  .video-followup-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-registration-access-summary,
  .video-registration-action-row,
  .video-register-permission-body,
  .video-registration-checklist,
  .video-operation-board,
  .video-permission-edit-brief {
    gap: 7px;
  }

  .video-registration-action-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 8px;
  }

  .video-registration-action-row small {
    white-space: normal;
  }

  .video-register-permission-columns {
    grid-template-columns: 1fr;
  }

  .video-register-permission-summary span {
    min-height: 50px;
    padding: 7px 8px;
  }

  .video-registration-access-grid span {
    min-height: 56px;
    padding: 7px 8px;
  }

  .video-registration-checklist li,
  .video-visibility-grid span,
  .video-operation-grid span,
  .video-permission-edit-grid span {
    min-height: 32px;
    padding: 6px 8px;
  }

  .video-policy-note,
  .portal-video-player-head,
  .video-watch-filter-head,
  .video-access-preset-strip > div:first-child,
  .video-permission-edit-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .video-lesson-diagnostics-drawer > summary,
  .video-watch-table-drawer > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .video-lesson-diagnostics-drawer > summary small,
  .video-watch-table-drawer > summary small {
    width: 100%;
    text-align: left;
  }

  .video-watch-table {
    min-width: 0;
  }

  .video-watch-table-head {
    display: none;
  }

  .video-watch-table-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 10px;
  }

  .video-watch-table-row > div {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .video-watch-table-row > div::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 920;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .video-watch-student-cell,
  .video-watch-access-cell,
  .video-watch-progress-cell {
    align-content: center;
  }

  .video-watch-student-cell .text-link,
  .video-watch-access-actions,
  .video-watch-complete-cell {
    grid-column: 2;
  }

  .video-watch-student-cell small,
  .video-watch-access-cell small,
  .video-watch-progress-cell small {
    grid-column: 2;
  }

  .video-provider-preview,
  .video-provider-preview.empty {
    grid-template-columns: 1fr;
  }

  .video-embed-info-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .video-embed-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .video-embed-info-grid span {
    min-height: 48px;
    padding: 6px 8px;
  }

  .video-provider-preview img,
  .video-provider-placeholder {
    width: min(100%, 220px);
  }

  .video-access-preset-strip > div:last-child {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  .video-access-preset-strip button {
    flex: 0 0 168px;
    min-width: 168px;
    min-height: 64px;
    padding: 7px 8px;
    width: 168px;
  }

  .video-access-preset-strip button b {
    font-size: 11.5px;
  }

  .video-access-preset-strip button strong,
  .video-access-preset-strip button small,
  .video-access-preset-strip button em {
    font-size: 9.5px;
  }

  .video-watch-search-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) and (min-width: 721px) {
  .unit-builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .omr-tool-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .omr-active-session-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .omr-exam-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .omr-session-control > span,
  .omr-session-control > small {
    grid-column: 1 / -1;
  }

  .omr-template-gallery,
  .omr-print-guide,
  .web-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unit-editor {
    grid-template-columns: minmax(200px, 1fr) minmax(140px, .6fr) minmax(170px, .7fr);
  }

  .unit-editor-head,
  .unit-editor-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .video-followup-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .omr-tool-tabs,
  .omr-active-session-strip,
  .omr-manual-bulk-format,
  .omr-manual-guide,
  .omr-print-guide,
  .omr-template-gallery,
  .web-report-hero,
  .web-report-grid,
  .web-report-metrics {
    grid-template-columns: 1fr;
  }

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

  .omr-exam-status-strip strong,
  .omr-session-control > span strong,
  .omr-session-control > span small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
  }

  .report-card-public-actions,
  .web-report-footer,
  .omr-manual-bulk-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .report-card-public-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
  }

  .report-card-public-screen {
    padding: 0;
  }

  .report-card-public-shell {
    border-radius: 0;
    padding: 16px 14px 24px;
  }

  .report-card-public-brand {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .report-card-public-logo {
    width: 46px;
    height: 46px;
    border-radius: 7px;
  }

  .report-card-public-header h1 {
    font-size: 17px;
  }

  .report-card-public-title p {
    margin-top: 2px;
    font-size: 10px;
  }

  .report-card-public-actions {
    align-items: center;
    flex-direction: row;
  }

  .report-card-public-actions .primary-button,
  .report-card-public-actions .ghost-button {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  .web-report-hero,
  .web-report-analysis-grid,
  .web-report-message-grid {
    grid-template-columns: 1fr;
  }

  .web-report-score {
    min-height: 124px;
  }

  .web-report-score strong {
    font-size: 46px;
  }

  .web-report-score .web-report-student-name {
    font-size: 22px;
  }

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

  .web-report-metrics span {
    min-height: 58px;
    padding: 10px 11px;
  }

  .web-report-metrics b {
    font-size: 16px;
  }

  .web-report-card {
    padding: 14px;
  }

  .web-report-question-card .web-report-table-scroll {
    overflow-x: visible;
  }

  .web-report-question-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .web-report-question-table thead {
    display: none;
  }

  .web-report-question-table tbody {
    display: grid;
    gap: 8px;
  }

  .web-report-question-table tbody tr {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .web-report-question-table tbody th,
  .web-report-question-table tbody td {
    display: grid;
    align-content: center;
    gap: 2px;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    padding: 6px 7px;
    background: transparent;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  .web-report-question-table tbody [data-label]::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
  }

  .web-report-question-table tbody th:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .web-report-question-table tbody td:nth-child(2) {
    grid-column: 3 / 11;
    grid-row: 1;
    justify-self: stretch;
    overflow: visible;
    width: 100%;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .web-report-question-table tbody td:nth-child(7) {
    grid-column: 11 / 13;
    grid-row: 1;
  }

  .web-report-question-table tbody td:nth-child(3) {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .web-report-question-table tbody td:nth-child(4) {
    grid-column: 4 / 7;
    grid-row: 2;
  }

  .web-report-question-table tbody td:nth-child(5) {
    grid-column: 7 / 10;
    grid-row: 2;
  }

  .web-report-question-table tbody td:nth-child(6) {
    grid-column: 10 / 13;
    grid-row: 2;
  }

  .web-report-question-table tbody td:nth-child(n + 3):nth-child(-n + 6) {
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
  }

  .web-report-question-table tbody td[colspan] {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .web-report-footer {
    align-items: center;
    flex-direction: row;
    justify-content: center;
    text-align: center;
  }

  .web-report-footer img {
    display: block;
    margin-inline: auto;
  }

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

  .web-report-distribution {
    gap: 4px;
    height: 118px;
  }

  .web-report-distribution b {
    font-size: 7px;
  }

  .web-report-distribution-marker b {
    font-size: 8px;
  }

  .web-report-middle-analysis > div {
    grid-template-columns: 108px minmax(72px, 1fr);
    gap: 6px;
  }

  .web-report-middle-analysis strong,
  .web-report-middle-analysis b {
    font-size: 10px;
  }

  .web-report-table {
    font-size: 10px;
  }

  .web-report-table th,
  .web-report-table td {
    height: 32px;
    padding: 6px;
  }

  .web-report-type-table,
  .web-report-top-table,
  .web-report-grade-table {
    min-width: 0;
    font-size: 8.5px;
  }

  .web-report-type-table thead th,
  .web-report-top-table thead th,
  .web-report-grade-table thead th {
    font-size: 8px;
  }

  .web-report-type-table th,
  .web-report-type-table td,
  .web-report-top-table th,
  .web-report-top-table td,
  .web-report-grade-table th,
  .web-report-grade-table td {
    padding-right: 3px;
    padding-left: 3px;
  }

  .web-report-history-list > div {
    grid-template-columns: minmax(0, 1fr) 50px 72px;
  }

  .web-report-history-chart {
    padding: var(--space-3);
  }

  .web-report-history-bars {
    height: 150px;
  }

  .web-report-history-plot {
    height: 150px;
  }

  .web-report-history-score-line {
    height: 122px;
  }

  .web-report-history-bar-group {
    grid-template-rows: 122px auto;
  }

  .web-report-history-bar-group > div {
    height: 122px;
  }

  .web-report-history-list > div > small {
    grid-column: 1 / -1;
    padding-bottom: 6px;
  }

  .web-report-top-list div {
    grid-template-columns: 20px 38px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .report-card-public-actions .primary-button,
  .report-card-public-actions .ghost-button,
  .omr-manual-bulk-actions .primary-button {
    width: 100%;
  }

  .web-report-score {
    min-height: 150px;
  }

  .video-library-hero {
    padding: 16px;
  }

  .video-library-hero .section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .video-library-hero .section-head .primary-button {
    justify-self: end;
    width: auto;
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
  }

  .video-policy-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
  }

  .video-library-stat-strip,
  .video-library-flow-strip,
  .video-unit-ops-grid,
  .video-reference-checklist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .video-library-flow-strip {
    margin-top: 8px;
  }

  .video-library-flow-strip span {
    min-height: 44px;
    border-radius: 13px;
    padding: 7px 8px;
  }

  .video-library-flow-strip b {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  .video-library-flow-strip strong {
    font-size: 12px;
  }

  .video-library-flow-strip small {
    font-size: 10px;
  }

  .video-library-stat-strip span {
    min-height: 31px;
    border-radius: 12px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .video-library-issue-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 8px;
    border-radius: 14px;
    padding: 8px;
  }

  .video-library-issue-strip > small {
    justify-self: end;
  }

  .video-library-issue-strip > div {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .video-library-issue-chip {
    min-height: 34px;
    border-radius: 12px;
    padding: 5px 7px;
  }

  .video-library-issue-chip small {
    font-size: 9.5px;
  }

  .video-priority-panel,
  .video-unit-ops-panel {
    gap: 7px;
    margin-top: 8px;
    border-radius: 14px;
    padding: 8px;
  }

  .video-unit-ops-grid > span,
  .video-unit-ops-grid > button {
    min-height: 46px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .video-unit-ops-grid .summary {
    grid-column: 1 / -1;
  }

  .video-reference-checklist-grid span {
    min-height: 64px;
    border-radius: 12px;
    padding: 8px;
  }
}

@media (max-width: 720px) {
  .subject-hero-panel {
    padding: 16px;
  }

  .subject-hero-panel .section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .subject-hero-panel .section-head .primary-button {
    justify-self: end;
    width: auto;
    min-height: 34px;
    padding: 7px 12px;
    white-space: nowrap;
  }

  .subject-metric-row {
    gap: 6px;
    margin-top: 10px;
  }

  .subject-metric-row span {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 11px;
  }
  .subject-unit-search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .subject-priority-panel {
    gap: 7px;
    border-radius: 14px;
    padding: 8px;
  }

  .subject-unit-search-panel > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .subject-unit-search-panel > summary small {
    width: 100%;
    text-align: left;
  }

  .subject-priority-panel {
    margin-top: 8px;
  }

  .subject-priority-list button {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    min-height: 38px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .subject-priority-list em {
    grid-column: 1 / -1;
  }

  .subject-priority-list b {
    justify-self: end;
    padding: 4px 7px;
  }
  .subject-unit-search-row {
    min-height: 32px;
    border-radius: 12px;
    padding: 6px 8px;
  }

  .subject-unit-search-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }

  .subject-unit-search-row span {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  .subject-unit-search-row strong {
    font-size: 11.5px;
  }

  .subject-unit-search-row small {
    grid-column: 2;
    font-size: 10px;
  }
}

@media (max-width: 720px) {
  .omr-hero-panel {
    padding: 16px;
  }

  .omr-hero-panel .section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
  }

  .omr-hero-panel .exam-action-bar {
    justify-content: stretch;
    width: 100%;
  }

  .omr-hero-panel .exam-action-bar .ghost-button,
  .omr-hero-panel .exam-action-bar .primary-button {
    flex: 1 1 0;
    min-height: 34px;
    padding: 7px 10px;
  }

  .omr-flow-strip,
  .omr-readiness-strip,
  .omr-answer-action-strip,
  .omr-review-metrics,
  .omr-answer-ops-brief,
  .omr-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .omr-flow-strip {
    margin-top: 8px;
  }

  .omr-flow-strip span {
    min-height: 38px;
    border-radius: 13px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .omr-flow-strip-detailed strong {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .omr-readiness-strip span,
  .omr-answer-action-strip span,
  .omr-answer-action-strip button,
  .omr-review-metrics span,
  .omr-answer-ops-brief span {
    min-height: 40px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .omr-scan-guide {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 42px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .omr-scan-guide .ghost-button,
  .omr-scan-guide button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .omr-commit-policy {
    grid-template-columns: 1fr;
    gap: 5px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .omr-source-file-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .omr-source-file-grid {
    grid-template-columns: 1fr;
  }

  .omr-source-file-grid article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .omr-source-file-status,
  .omr-source-file-action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .omr-answer-ops-brief {
    margin-inline: 12px;
  }

  .omr-question-grid {
    padding-inline: 12px;
  }
}

@media (max-width: 720px) {
  .ai-learning-summary-grid,
  .ai-credit-row,
  .ai-review-card-head {
    grid-template-columns: 1fr;
  }

  .ai-settings-actions,
  .ai-review-actions {
    align-items: stretch;
    flex-direction: column;
  }

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

  .ai-learning-body p {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .announcement-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .announcement-filter label {
    width: 100%;
  }

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

  .announcement-summary-button {
    align-items: flex-start;
    flex-direction: column;
  }

  .announcement-row .row-actions {
    justify-content: flex-start;
  }

  .announcement-reader-grid {
    grid-template-columns: 1fr;
  }

  .announcement-student-row {
    grid-template-columns: minmax(52px, 0.5fr) minmax(0, 1fr);
  }

  .announcement-student-row small {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .portal-video-priority-strip,
  .portal-video-summary-strip,
  .portal-video-telemetry-grid,
  .portal-video-week-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .portal-video-week-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .portal-video-week-head,
  .portal-video-week-group {
    border-radius: 14px;
    padding: 8px;
  }

  .portal-video-week-videos button {
    min-height: 44px;
    border-radius: 12px;
    padding: 7px 8px;
  }

  .portal-video-week-videos button strong {
    font-size: 12px;
  }

  .portal-video-event-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .portal-video-telemetry {
    gap: 8px;
    border-radius: 14px;
    padding: 8px;
  }

  .portal-video-telemetry-head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
  }

  .portal-video-telemetry-grid span,
  .portal-video-event-grid span {
    border-radius: 12px;
    padding: 7px 8px;
  }

  .video-watch-actions {
    gap: 6px;
  }

  .video-watch-actions .small {
    flex: 1 1 calc(50% - 6px);
    min-height: 32px;
    padding: 6px 8px;
  }

  .portal-video-priority-strip span {
    min-height: 50px;
    border-radius: 13px;
    padding: 7px 8px;
  }

  .portal-video-priority-strip b {
    font-size: 9.5px;
  }

  .portal-video-priority-strip strong {
    font-size: 12px;
  }

  .portal-video-priority-strip small {
    font-size: 10px;
  }

  .portal-video-summary-strip span {
    min-height: 31px;
    border-radius: 12px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .portal-video-summary-strip strong {
    font-size: 14px;
  }

  .portal-video-summary-strip p {
    border-radius: 12px;
    padding: 7px 8px;
    font-size: 11px;
  }

  .portal-video-subject-strip {
    gap: 5px;
  }

  .portal-video-subject-strip span {
    min-height: 26px;
    padding: 4px 8px;
    font-size: 10.5px;
  }

  .portal-active-clinic-panel .student-safe-list {
    gap: 6px;
  }

  .portal-active-clinic-panel .detail-row {
    grid-template-columns: minmax(116px, 0.5fr) minmax(0, 1fr);
    min-height: 40px;
    border-radius: 13px;
    padding: 7px 9px;
  }

  .portal-active-clinic-panel .detail-row strong {
    font-size: 12px;
  }

  .portal-active-clinic-panel .detail-row span {
    font-size: 11px;
  }

  .portal-makeup-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 14px;
    padding: 10px;
  }

  .portal-makeup-row .primary-button {
    min-height: 32px;
    padding: 6px 10px;
  }

  .portal-makeup-panel .empty-state {
    min-height: 58px;
    padding: 10px;
  }
}

@media (max-width: 900px) {
  .student-detail-hero {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .student-detail-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

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

  .student-detail-dock,
  .student-detail-grid,
  .announcement-surface-grid,
  .homework-assignment-surface-grid {
    grid-template-columns: 1fr;
  }

  .student-detail-attendance-row {
    grid-template-columns: minmax(96px, 1fr) 72px repeat(2, minmax(64px, 0.7fr));
  }

  .student-detail-attendance-note {
    grid-column: 1 / -1;
  }

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

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

  .homework-history-note {
    grid-column: 1 / -1;
    width: fit-content;
    white-space: normal;
  }

}

@media (max-width: 720px) {
  .student-detail-hero {
    border-radius: 18px;
    padding: 11px;
  }

  .student-detail-title h2 {
    font-size: 22px;
  }

  .student-detail-contact span,
  .student-detail-contact a {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }

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

  .student-detail-attendance-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .student-detail-attendance-status {
    justify-items: end;
  }

  .student-detail-attendance-metric {
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: space-between;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    padding: 6px 8px;
  }

  .homework-assignment-compose-panel,
  .announcement-compose-panel,
  .homework-assignment-status-panel,
  .announcement-status-panel,
  .homework-queue-panel {
    padding: 14px;
  }

  .homework-assignment-topline,
  .announcement-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .announcement-filter {
    gap: 8px;
  }

  .homework-assignment-topline .compact-field,
  .announcement-topline .compact-field,
  .homework-assignment-filter label,
  .announcement-filter label {
    width: 100%;
  }

  .homework-assignment-row {
    grid-template-columns: 1fr;
  }

  .homework-assignment-row .row-actions,
  .announcement-row .row-actions {
    justify-content: flex-start;
  }

  .attendance-filter-panel .toolbar {
    grid-template-columns: 1fr;
  }

  .homework-filter-panel .toolbar {
    grid-template-columns: 1fr;
  }

  .announcement-summary-button {
    grid-template-columns: 1fr;
  }

  .announcement-meta-row {
    justify-content: flex-start;
  }
}

/* AI review workspace: compact list-detail shell for the read-only Todo 3 scope. */
.ai-management-shell {
  display: grid;
  min-width: 0;
  gap: var(--section-gap);
}

.ai-management-shell > .ai-management-legacy {
  margin-top: 0;
}

.ai-management-shell > .ai-owner-settings {
  margin: 0;
}

.ai-management-workspace {
  display: grid;
  min-width: 0;
  gap: var(--section-gap);
}

.ai-management-workspace .tag-pill {
  --tag-color: var(--accent);
}

.ai-management-workspace .tag-pill.muted {
  --tag-color: var(--muted);
}

.ai-management-workspace .tag-pill.danger,
.ai-management-workspace .ai-workspace-status.reported {
  --tag-color: var(--red);
}

.ai-workspace-intro.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 0;
}

.ai-workspace-intro h2,
.ai-workspace-tabpanel-head h3 {
  margin: 4px 0 0;
}

.ai-workspace-intro p {
  max-width: 760px;
  line-height: 1.55;
}

.ai-workspace-intro-status,
.ai-model-control-summary,
.ai-workspace-detail-badges,
.ai-workspace-detail-meta,
.ai-workspace-usage-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.ai-workspace-intro-status {
  justify-content: flex-end;
}

.ai-model-controls {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.38fr);
  gap: var(--space-4);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--compact-radius);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.ai-model-controls-copy,
.ai-model-controls-copy small {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.ai-model-controls-copy strong {
  font-size: 15px;
}

.ai-model-controls-copy small,
.ai-model-controls-actions,
.ai-workspace-total-note,
.ai-workspace-pane-head span,
.ai-workspace-detail-head p,
.ai-workspace-state p,
.ai-workspace-guide-row p {
  color: var(--muted);
}

.ai-model-controls-copy small,
.ai-model-controls-actions {
  font-size: 12px;
  line-height: 1.45;
}

.ai-model-control-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.ai-model-control-fields label {
  min-width: 0;
}

.ai-model-controls-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.ai-model-control-summary {
  align-content: start;
}

.ai-workspace-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-1);
}

.ai-workspace-tab {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}

.ai-workspace-tab:hover,
.ai-workspace-tab.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.ai-workspace-tab.active {
  border-bottom-color: var(--accent);
}

.ai-workspace-tabpanel {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
}

.ai-workspace-tabpanel-head,
.ai-workspace-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.ai-workspace-tabpanel-head h3 {
  font-size: 18px;
}

.ai-workspace-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(4, minmax(120px, 0.72fr)) auto;
  align-items: end;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--compact-radius);
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
  padding: var(--space-3);
}

.ai-workspace-filters label {
  min-width: 0;
}

.ai-workspace-filters .ghost-button {
  align-self: end;
}

.ai-workspace-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: var(--space-4);
  min-width: 0;
  min-height: 520px;
  height: min(72dvh, 760px);
}

.ai-workspace-master,
.ai-workspace-detail {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--compact-radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

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

.ai-workspace-pane-head {
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
  padding: 12px var(--space-3);
}

.ai-workspace-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-2);
  scrollbar-width: thin;
}

.ai-workspace-row {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  background: var(--surface);
  color: var(--text);
  padding: 10px;
  text-align: left;
}

.ai-workspace-row:hover,
.ai-workspace-row.selected {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.ai-workspace-row.selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ai-workspace-row-topline,
.ai-workspace-row-meta,
.ai-workspace-row-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.ai-workspace-status-group {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.ai-workspace-row-topline strong,
.ai-workspace-row-question,
.ai-workspace-row-meta,
.ai-workspace-row-date {
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.ai-workspace-row-question {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.ai-workspace-row-meta,
.ai-workspace-row-date {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.ai-workspace-row-date {
  justify-content: flex-start;
}

.ai-workspace-status {
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.ai-workspace-status.reported {
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
}

.ai-workspace-status.draft {
  background: color-mix(in srgb, var(--amber) 11%, var(--surface));
  color: var(--amber);
}

.ai-workspace-status.published {
  background: color-mix(in srgb, var(--accent-secondary) 11%, var(--surface));
  color: var(--accent-secondary);
}

.ai-workspace-status.unpublished {
  background: color-mix(in srgb, var(--muted) 13%, var(--surface));
  color: var(--muted);
}

.ai-workspace-load-more {
  justify-self: stretch;
  margin: 0 var(--space-2) var(--space-2);
}

.ai-workspace-end {
  margin: 0;
  border-top: 1px solid var(--border);
  padding: 10px var(--space-3);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.ai-workspace-state,
.ai-workspace-detail-empty {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 180px;
  gap: var(--space-2);
  padding: var(--space-4);
}

.ai-workspace-state p,
.ai-workspace-detail-empty p {
  margin: 0;
  line-height: 1.5;
}

.ai-workspace-state.error strong {
  color: var(--red);
}

.ai-workspace-skeleton {
  display: block;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.ai-workspace-skeleton.short {
  width: 62%;
}

.ai-workspace-detail {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.ai-workspace-detail-content {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
  padding: var(--space-4);
}

.ai-workspace-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.ai-workspace-detail-head h3 {
  margin: 4px 0 0;
  font-size: 20px;
}

.ai-workspace-detail-head p {
  margin: 5px 0 0;
  font-size: 12px;
}

.ai-workspace-report-callout {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--control-radius) var(--control-radius) 0;
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  padding: 10px 12px;
}

.ai-workspace-report-callout span {
  color: var(--muted);
  font-size: 12px;
}

.ai-workspace-qa-block {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.ai-workspace-block-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ai-workspace-question,
.ai-workspace-answer {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-break: strict;
  white-space: pre-wrap;
}

.ai-workspace-question {
  font-weight: 700;
  line-height: 1.6;
}

.ai-workspace-answer {
  user-select: text;
  font-size: 14px;
  line-height: 1.72;
}

.ai-workspace-qa-block.regenerated {
  border-top-color: color-mix(in srgb, var(--accent-secondary) 42%, var(--border));
}

.ai-workspace-detail-meta {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  color: var(--muted);
  font-size: 11px;
}

.ai-question-image-panel,
.ai-guidance-workbench {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.ai-question-image-head,
.ai-guidance-head,
.ai-guidance-published > div,
.ai-guidance-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.ai-question-image-head small,
.ai-guidance-published span,
.ai-guidance-editor-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.ai-question-image-preview {
  display: block;
  width: min(100%, 720px);
  height: auto;
  max-height: 360px;
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--surface-soft);
  object-fit: contain;
}

.ai-question-image-tombstone {
  display: grid;
  gap: var(--space-1);
  border-left: 3px solid var(--muted);
  background: color-mix(in srgb, var(--surface-soft) 56%, var(--surface));
  padding: var(--space-3);
}

.ai-question-image-tombstone p,
.ai-guidance-conflict p,
.ai-guidance-status-message {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-guidance-workbench {
  display: grid;
  gap: var(--space-3);
}

.ai-guidance-head h4 {
  margin: var(--space-1) 0 0;
  font-size: 16px;
}

.ai-guidance-published {
  display: grid;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  padding: var(--space-3);
}

.ai-guidance-published-body {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: keep-all;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.58;
}

.ai-guidance-editor {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.ai-guidance-editor-copy {
  display: grid;
  gap: var(--space-1);
}

.ai-guidance-editor label {
  min-width: 0;
}

.ai-guidance-editor textarea {
  min-height: 132px;
  max-height: 280px;
  resize: vertical;
  overflow-wrap: anywhere;
  word-break: keep-all;
  line-height: 1.55;
}

.ai-guidance-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.ai-guidance-conflict {
  display: grid;
  gap: var(--space-2);
  border-left: 3px solid var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, var(--surface));
  padding: var(--space-3);
}

.ai-guidance-conflict > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ai-guidance-status-message.success {
  color: var(--accent-secondary);
}

.ai-guidance-status-message.warning {
  color: var(--amber);
}

.ai-guidance-status-message.error {
  color: var(--red);
}

.ai-workspace-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 42%, var(--surface));
  padding: var(--space-3);
}

.ai-workspace-summary-strip > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding: 10px;
}

.ai-workspace-summary-strip > div:first-child {
  border-left: 0;
}

.ai-workspace-summary-strip span {
  color: var(--muted);
  font-size: 11px;
}

.ai-workspace-summary-strip strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.ai-workspace-guide-list,
.ai-workspace-usage-list {
  display: grid;
  gap: 6px;
  padding: 0 var(--space-3) var(--space-3);
}

.ai-workspace-guide-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.ai-workspace-guide-row > div {
  min-width: 0;
}

.ai-workspace-guide-row p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.ai-workspace-usage-list {
  display: flex;
}

.ai-workspace-usage-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
}

@media (max-width: 1180px) {
  .ai-model-control-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-workspace-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-workspace-filters label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .ai-model-controls {
    grid-template-columns: 1fr;
  }

  .ai-workspace-body {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
  }

  .ai-workspace-master {
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(44dvh, 380px);
  }

  .ai-workspace-detail {
    min-height: 0;
    overflow: visible;
  }
}

@media (max-width: 520px) {
  .ai-workspace-intro.section-head {
    grid-template-columns: 1fr;
  }

  .ai-workspace-intro-status {
    justify-content: flex-start;
  }

  .ai-model-control-fields,
  .ai-workspace-filters {
    grid-template-columns: 1fr;
  }

  .ai-workspace-filters label:first-child {
    grid-column: auto;
  }

  .ai-model-controls-actions,
  .ai-workspace-detail-head,
  .ai-workspace-guide-row,
  .ai-guidance-published > div {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-workspace-tab {
    flex: 1 1 calc(50% - 4px);
  }

  .ai-workspace-summary-strip {
    grid-template-columns: 1fr;
  }

  .ai-workspace-summary-strip > div,
  .ai-workspace-summary-strip > div:first-child {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .ai-workspace-summary-strip > div:first-child {
    border-top: 0;
  }

  .ai-workspace-detail-content {
    padding: var(--space-3);
  }
}