.classroom-dialog {
  --classroom-gold: #ffe07a;
  --classroom-line: #ae91f45e;
  --classroom-soft: #ded0ff;
  width: min(750px, calc(100% - 26px));
  max-width: none;
  max-height: min(88dvh, 760px);
  margin: auto;
  padding: 0;
  color: #f5faff;
  background: #302365;
  border: 3px solid #dfd0ff;
  border-radius: 25px;
  box-shadow: 0 20px 62px #211143b3, 0 7px 0 #442782;
  overflow: auto;
  overscroll-behavior: contain;
}

.classroom-dialog::backdrop {
  background: #271753aa;
  backdrop-filter: blur(5px);
}

.classroom-dialog *,
.classroom-dialog *::before,
.classroom-dialog *::after { box-sizing: border-box; }

.classroom-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 19px clamp(15px, 4vw, 30px) 17px;
  background: linear-gradient(106deg, #8054d5, #50359a 79%);
  border-bottom: 1px solid var(--classroom-line);
}

.classroom-eyebrow {
  color: #ece0ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 0 0 3px;
}

.classroom-heading h2 {
  color: var(--classroom-gold);
  font-size: clamp(25px, 4.2vw, 38px);
  line-height: 1.14;
  margin: 0;
}

.classroom-close {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  font-size: 30px;
  border: 1px solid var(--classroom-line);
  border-radius: 14px;
  color: inherit;
  background: #422980;
}

.classroom-body {
  display: grid;
  gap: 15px;
  padding: 18px clamp(14px, 4vw, 30px) 26px;
}

.classroom-gate { max-width: 520px; margin-inline: auto; }
.classroom-note { margin: 0; color: var(--classroom-soft); font-size: 16px; line-height: 1.55; }

.classroom-form {
  display: grid;
  gap: 11px;
  align-items: start;
}

.classroom-field {
  display: grid;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
}

.classroom-field input,
.classroom-field textarea,
.classroom-field select {
  width: 100%;
  min-height: 48px;
  padding: 9px 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 650;
  color: #f6fbff;
  background: #0a2041;
  border: 1px solid var(--classroom-line);
  border-radius: 10px;
}

.classroom-field textarea { resize: vertical; min-height: 70px; max-height: 155px; }
.classroom-field textarea::placeholder { color: #a7bbd2; }

.classroom-dialog :is(input, textarea, select, button):focus-visible {
  outline: 3px solid #a7dbff;
  outline-offset: 3px;
}

.classroom-primary,
.classroom-small,
.classroom-tab {
  min-height: 47px;
  padding: 8px 14px;
  border: 1px solid var(--classroom-line);
  border-radius: 11px;
  background: #254a76;
  color: #f5faff;
  font-weight: 850;
  font-size: 16px;
}

.classroom-primary {
  color: #31234a;
  border-color: #ffeab0;
  border-bottom: 4px solid #de901b;
  background: linear-gradient(#ffe693, #ffcd49);
  justify-self: start;
}

.classroom-dialog button:disabled { opacity: .45; cursor: default; }
.classroom-danger { background: #492d48; color: #ffd5dc; border-color: #c475884f; }
.classroom-status { min-width: 0; margin: 0; color: #9fffd8; font-size: 15px; }
.classroom-status:empty { display: none; }
.classroom-status[data-error="true"] { color: #ffb4ba; }

.classroom-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.classroom-tab { background: #1b3a65; }
.classroom-tab[aria-current="page"] { color: var(--classroom-gold); border-color: #e8bc566e; background: #354666; }
.classroom-empty { padding: 22px 13px; margin: 0; text-align: center; color: var(--classroom-soft); border: 1px dashed var(--classroom-line); border-radius: 13px; }

.classroom-student-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--classroom-line);
  border-radius: 13px;
  overflow: clip;
}

.classroom-student-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1a3960;
}

.classroom-student-row + .classroom-student-row { border-top: 1px solid var(--classroom-line); }
.classroom-student-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.classroom-inline {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
}
.classroom-inline .classroom-status { grid-column: 1 / -1; }

.classroom-actions, .classroom-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.classroom-pagination { justify-content: space-between; }
.classroom-track-preview {
  margin: 0; padding: 12px 15px; border-radius: 11px;
  color: #fff1b0; background: #211949; font-size: 17px; line-height: 1.5;
}
.classroom-filters {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) auto;
  gap: 10px; align-items: end;
}
.classroom-mistake-filters { grid-template-columns: minmax(0, 1fr) auto; }
.classroom-question-editor {
  padding: 13px; border: 1px solid var(--classroom-line); border-radius: 14px; background: #21194e;
}
.classroom-question-editor h3 { margin: 0; color: var(--classroom-gold); font-size: 20px; }
.classroom-option-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.classroom-question-detail { display: grid; flex: 1; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.classroom-question-detail small { color: #b9e8ff; font-size: 14px; }
.classroom-question-row > button { flex-shrink: 0; }

.classroom-tiers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0;
}

.classroom-tiers li {
  padding: 5px 9px;
  font-size: 14px;
  font-weight: 850;
  border-radius: 8px;
  background: #264975;
}

.classroom-tiers li:last-child { color: var(--classroom-gold); }
.classroom-board-scroll { overflow: auto; border: 1px solid var(--classroom-line); border-radius: 13px; }
.classroom-board { width: 100%; border-collapse: collapse; text-align: left; font-size: 16px; }
.classroom-board :is(th, td) { padding: 11px 10px; border-bottom: 1px solid var(--classroom-line); }
.classroom-board th { color: #c7e4ff; font-weight: 800; white-space: nowrap; background: #1b3c66; font-size: 14px; }
.classroom-board td { font-weight: 700; overflow-wrap: anywhere; }
.classroom-board td:first-child { color: var(--classroom-gold); text-align: center; }
.classroom-board td:nth-child(2) { min-width: 75px; }
.classroom-board :is(th, td):nth-child(n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.classroom-board tr:last-child td { border-bottom: 0; }
.classroom-board tbody tr:nth-child(even) { background: #ffffff08; }
.classroom-mistake-table td:nth-child(3) { min-width: 148px; }
.classroom-mistake-table td:last-child { white-space: nowrap; }
.classroom-rank {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 6px;
  background: #233f65;
  color: #e4effb;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.classroom-rank[data-tier="0"] { color: #ffcaa1; }
.classroom-rank[data-tier="2"] { color: #ffdf7b; }
.classroom-rank[data-tier="3"] { color: #a5ffee; }
.classroom-rank[data-tier="4"] { color: #c1d8ff; }
.classroom-rank[data-tier="5"] { color: #ffe483; background: #664f27; }

@media (max-width: 480px) {
  .classroom-dialog { max-height: 92dvh; border-radius: 17px; }
  .classroom-body { gap: 12px; }
  .classroom-small, .classroom-tab { padding-inline: 9px; font-size: 14px; }
  .classroom-board :is(th, td) { padding-inline: 8px; }
  .classroom-board { min-width: 390px; }
  .classroom-filters:not(.classroom-mistake-filters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classroom-option-fields { grid-template-columns: 1fr; }
}