:root {
  --bg: #f4f7fb;
  --bg-soft: #eef3f9;
  --panel: #ffffff;
  --panel-soft: #f8fafc;
  --panel-strong: #edf3fa;
  --line: rgba(100, 116, 139, 0.17);
  --line-strong: rgba(71, 85, 105, 0.28);
  --text: #172033;
  --muted: #64748b;
  --cyan: #2563eb;
  --cyan-soft: rgba(37, 99, 235, 0.09);
  --green: #0f9f6e;
  --green-soft: rgba(15, 159, 110, 0.1);
  --orange: #d97706;
  --orange-soft: rgba(217, 119, 6, 0.1);
  --violet: #7c3aed;
  --violet-soft: rgba(124, 58, 237, 0.09);
  --red: #dc3545;
  --red-soft: rgba(220, 53, 69, 0.09);
  --shadow: 0 18px 45px rgba(33, 50, 82, 0.1);
}

/* Cổng học viên dùng cùng mô hình điều hướng trái với trang quản trị. */
.student-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100dvh;
}

.student-workspace {
  min-width: 0;
}

.student-sidebar {
  background: #ffffff;
  border-right: 1px solid #dce5ef;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 22px 16px 18px;
  position: sticky;
  top: 0;
  z-index: 45;
}

.student-sidebar-brand,
.student-sidebar-profile {
  align-items: center;
  display: flex;
  gap: 11px;
}

.student-sidebar-brand {
  border-bottom: 1px solid #e4ebf3;
  padding: 0 7px 20px;
}

.student-sidebar-brand > span {
  align-items: center;
  background: #2563eb;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgb(37 99 235 / 24%);
  color: #fff;
  display: flex;
  height: 43px;
  justify-content: center;
  width: 43px;
}

.student-sidebar-brand > div,
.student-sidebar-profile > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.student-sidebar-brand strong,
.student-sidebar-profile strong {
  color: #172033;
  font-size: 0.91rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-sidebar-brand small,
.student-sidebar-profile small {
  color: #6b7d93;
  font-size: 0.76rem;
}

.student-sidebar .student-learning-tabs {
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 7px;
  margin: 22px 0;
  padding: 0;
  position: static;
}

.student-sidebar .student-learning-tabs button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  justify-content: stretch;
  min-height: 50px;
  padding: 0 13px;
  text-align: left;
  width: 100%;
}

.student-sidebar .student-learning-tabs button strong {
  font-size: 0.91rem;
}

.student-sidebar-profile {
  border-top: 1px solid #e4ebf3;
  margin-top: auto;
  padding: 17px 7px 0;
}

.student-workspace .student-header {
  padding: 0 clamp(18px, 3vw, 42px);
}

.student-workspace .student-content {
  max-width: 1480px;
  padding-inline: clamp(18px, 3vw, 44px);
}

.student-menu-toggle,
.student-sidebar-backdrop {
  display: none;
}

.student-attendance-card.pending {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: auto minmax(280px, 1fr) minmax(390px, 1.1fr);
}

.attendance-card-action {
  align-self: center;
  justify-self: end;
  min-width: 150px;
}

.account-attendance-dialog .modal {
  max-width: 780px;
}

.account-attendance-summary {
  align-items: center;
  background: #edf5ff;
  border: 1px solid #cfe1fb;
  border-radius: 14px;
  color: #1d4ed8;
  display: flex;
  gap: 11px;
  padding: 13px 15px;
}

.account-attendance-summary > div {
  display: grid;
  gap: 3px;
}

.account-attendance-summary small {
  color: #607694;
}

.account-attendance-form input[readonly] {
  background: #f4f7fb;
  color: #52657d;
}

.extension-multiselect {
  min-height: 148px;
  padding: 7px;
}

.extension-multiselect option {
  border-radius: 7px;
  margin: 2px 0;
  padding: 7px 9px;
}

@media (max-width: 1050px) {
  .student-shell {
    display: block;
  }

  .student-sidebar {
    box-shadow: 18px 0 45px rgb(23 47 87 / 20%);
    left: 0;
    position: fixed;
    transform: translateX(-110%);
    transition: transform 180ms ease;
    width: min(86vw, 292px);
  }

  .student-menu-open .student-sidebar {
    transform: translateX(0);
  }

  .student-sidebar-backdrop {
    background: rgb(15 23 42 / 48%);
    border: 0;
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 180ms ease;
    z-index: 44;
  }

  .student-menu-open .student-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .student-menu-toggle {
    align-items: center;
    background: #eef4ff;
    border: 1px solid #d5e2f5;
    border-radius: 10px;
    color: #1d4ed8;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    width: 40px;
  }

  .student-attendance-card.pending,
  .student-attendance-card.completed {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .student-attendance-card .attendance-confirmed-profile {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .student-workspace .student-header {
    min-height: 68px;
  }

  .student-header .student-user > div,
  .student-header .student-user .avatar {
    display: none;
  }

  .student-header .student-user button {
    font-size: 0;
    justify-content: center;
    padding: 0;
    width: 38px;
  }

  .student-header .student-user button svg {
    margin: 0;
  }

  .student-attendance-card.pending,
  .student-attendance-card.completed {
    display: block;
  }

  .student-attendance-card .attendance-status-icon {
    margin-bottom: 12px;
  }

  .student-attendance-card .attendance-confirmed-profile {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }

  .attendance-card-action {
    justify-self: stretch;
    width: 100%;
  }

  .account-attendance-dialog .modal {
    border-radius: 0;
    height: 100dvh;
    max-height: none;
  }

  .account-identity-row {
    grid-template-columns: 1fr;
  }
}

/* Nâng cấp 2026: font tiếng Việt cục bộ và các module học liệu/điểm danh. */
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");
}

body,
button,
input,
select,
textarea {
  font-family: "Be Vietnam Pro", "Segoe UI Variable", "Segoe UI", sans-serif;
}

body {
  font-size: 16px;
  line-height: 1.55;
}

.sidebar nav button,
.primary-button,
.outline-button,
.ghost-button,
.icon-button,
.danger-button,
.table-action {
  font-size: 0.82rem;
}

.eyebrow {
  font-size: 0.76rem;
}

.management-heading h1 {
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  letter-spacing: -0.035em;
}

.panel-heading p {
  display: none;
}

.content-filter-strip {
  align-items: center;
}

.content-card-grid,
.attendance-session-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.content-card,
.attendance-session-card {
  background: linear-gradient(145deg, #fff, #f9fbff);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(30, 64, 175, 0.07);
  display: flex;
  flex-direction: column;
  min-height: 250px;
  overflow: hidden;
  padding: 18px;
  position: relative;
}

.content-card::before,
.attendance-session-card::before {
  background: linear-gradient(90deg, #2563eb, #22c55e);
  content: "";
  height: 4px;
  inset: 0 0 auto;
  position: absolute;
}

.content-card-heading,
.session-card-top,
.content-card-actions,
.session-actions {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: space-between;
}

.content-sequence {
  align-items: center;
  background: #eaf1ff;
  border-radius: 11px;
  color: #1d4ed8;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 42px;
}

.content-card h2,
.attendance-session-card h2 {
  font-size: 1.18rem;
  line-height: 1.4;
  margin-top: 18px;
}

.content-card > p,
.attendance-session-card > p {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 7px;
}

.content-meta,
.session-class-line {
  color: #52617a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.79rem;
  gap: 12px;
  margin-top: 16px;
}

.content-meta span,
.session-class-line {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.resource-list {
  background: #f6f9fe;
  border: 1px solid #e5ecf7;
  border-radius: 12px;
  display: grid;
  gap: 4px;
  margin-top: 15px;
  padding: 8px;
}

.resource-list :is(a, button) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 0.78rem;
  gap: 8px;
  overflow: hidden;
  padding: 7px 9px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.resource-list :is(a, button):hover {
  background: #eaf1ff;
  color: #1d4ed8;
}

.resource-list :is(a, button) span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-card-actions,
.session-actions {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: auto;
  padding-top: 16px;
}

.content-card-actions button,
.session-actions button {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  color: #334155;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 700;
  gap: 6px;
  min-height: 35px;
  padding: 0 10px;
}

.session-progress-row {
  align-items: center;
  background: #f5f8fd;
  border-radius: 14px;
  display: flex;
  gap: 14px;
  margin-top: 17px;
  padding: 13px;
}

.session-progress-row > div:last-child {
  display: grid;
  gap: 2px;
}

.session-progress-row span {
  color: var(--muted);
  font-size: 0.76rem;
}

.ring-mini {
  align-items: center;
  background: conic-gradient(#10b981 calc(var(--value) * 1%), #dbe5f1 0);
  border-radius: 50%;
  display: flex;
  height: 64px;
  justify-content: center;
  position: relative;
  width: 64px;
}

.ring-mini::after {
  background: #fff;
  border-radius: 50%;
  content: "";
  inset: 7px;
  position: absolute;
}

.ring-mini strong {
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

.session-time-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin: 14px 0;
}

.session-time-grid span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.session-time-grid small {
  color: var(--muted);
  font-size: 0.67rem;
  text-transform: uppercase;
}

.session-time-grid strong {
  font-size: 0.75rem;
}

.class-checklist {
  border: 1px solid #dbe4f0;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 13px;
}

.class-checklist legend {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 6px;
}

.class-checklist label {
  align-items: center;
  background: #f6f8fc;
  border-radius: 8px;
  display: flex;
  font-size: 0.8rem;
  gap: 7px;
  padding: 8px 10px;
}

.class-share-selector {
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  min-width: 0;
  padding: 16px;
}

.class-share-selector > legend {
  color: #334155;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0 7px;
}

.class-share-toolbar {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 0.7fr) minmax(220px, 1fr) auto;
  margin-bottom: 14px;
}

.class-share-summary {
  display: grid;
  gap: 3px;
}

.class-share-summary strong {
  color: #17233a;
  font-size: 0.9rem;
}

.class-share-summary small {
  color: #64748b;
  font-size: 0.74rem;
}

.class-share-summary b {
  color: #1559e8;
}

.class-share-search {
  align-items: center;
  background: #fff;
  border: 1px solid #cfdaea;
  border-radius: 10px;
  color: #718096;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 0 11px;
}

.class-share-search input {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
  outline: 0;
  padding: 10px 0;
  width: 100%;
}

.class-share-actions {
  display: flex;
  gap: 7px;
}

.class-share-actions button {
  background: #fff;
  border: 1px solid #cbd8e8;
  border-radius: 9px;
  color: #1559e8;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 750;
  padding: 9px 11px;
  white-space: nowrap;
}

.class-share-actions button:hover {
  background: #edf4ff;
  border-color: #9cbdf8;
}

.class-share-groups {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 330px;
  overflow: auto;
  padding-right: 4px;
}

.class-share-group {
  align-self: start;
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 13px;
  min-width: 0;
  overflow: hidden;
}

.class-share-group > header {
  align-items: center;
  background: #eef5ff;
  border-bottom: 1px solid #d8e6fb;
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}

.class-share-group > header label,
.class-share-group > header label > span {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.class-share-group > header label {
  cursor: pointer;
}

.class-share-group > header label > span {
  color: #173d79;
}

.class-share-group > header strong {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-share-group > header small {
  color: #64748b;
  font-size: 0.68rem;
  white-space: nowrap;
}

.class-share-options {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 10px;
}

.class-share-option {
  align-items: center;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 9px;
  min-width: 0;
  padding: 9px 10px;
}

.class-share-option:hover {
  background: #f1f6ff;
  border-color: #c6dafa;
}

.class-share-option:has(input:checked) {
  background: #eaf3ff;
  border-color: #9dc0fb;
}

.class-share-option > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.class-share-option strong {
  color: #1f2d44;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-share-option small {
  color: #718096;
  font-size: 0.66rem;
}

.class-share-empty {
  color: #64748b;
  font-size: 0.78rem;
  margin: 14px 0 0;
  text-align: center;
}

@media (max-width: 920px) {
  .class-share-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .class-share-search {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .class-share-groups {
    grid-template-columns: 1fr;
  }
}

.lecture-resource-editor {
  background: #f6f8fc;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  padding: 15px;
}

.resource-editor-heading {
  display: grid;
  margin-bottom: 10px;
}

.resource-editor-heading span,
.resource-empty {
  color: var(--muted);
  font-size: 0.76rem;
}

.resource-editor-row {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: flex;
  gap: 10px;
  margin: 6px 0;
  padding: 9px;
}

.resource-editor-row > div {
  display: grid;
  flex: 1;
  min-width: 0;
}

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

.resource-editor-row > button {
  align-items: center;
  background: #f6f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #52617a;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.resource-add-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 0.8fr 1fr minmax(190px, 1.5fr) auto;
  margin-top: 12px;
}

.resource-add-grid input,
.resource-add-grid select,
.manual-attendance input,
.manual-attendance select {
  background: #fff;
  border: 1px solid #d5deeb;
  border-radius: 8px;
  min-height: 38px;
  padding: 0 10px;
}

.quiz-shuffle-settings {
  background: #f2f6ff;
  border: 1px solid #d9e4ff;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px;
}

.attendance-projection {
  background: #07152f;
  border: 0;
  color: #fff;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100vw;
}

html:has(.attendance-projection[open]),
body:has(.attendance-projection[open]) {
  height: 100dvh;
  overflow: hidden;
}

.attendance-projection::backdrop {
  background: #07152f;
}

.attendance-projection-shell {
  background:
    radial-gradient(circle at 20% 10%, rgba(37, 99, 235, 0.35), transparent 32%),
    radial-gradient(circle at 90% 90%, rgba(16, 185, 129, 0.18), transparent 27%),
    #07152f;
  min-height: 100%;
  padding: 24px 32px;
}

.attendance-projection header {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  padding-bottom: 17px;
}

.projection-brand,
.projection-live,
.projection-brand > div {
  align-items: center;
  display: flex;
  gap: 12px;
}

.projection-brand > span {
  align-items: center;
  background: #2563eb;
  border-radius: 12px;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.projection-brand > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
}

.projection-brand small {
  color: #93a9ca;
}

.projection-live > span {
  background: rgba(16, 185, 129, 0.13);
  border: 1px solid rgba(52, 211, 153, 0.38);
  border-radius: 999px;
  color: #6ee7b7;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 13px;
}

.projection-live i {
  background: #34d399;
  border-radius: 50%;
  display: inline-block;
  height: 7px;
  margin-right: 5px;
  width: 7px;
}

.projection-live time {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.projection-live button,
.projection-qr-panel button {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #fff;
  display: inline-flex;
  gap: 8px;
  min-height: 39px;
  padding: 0 13px;
}

.attendance-projection main {
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(380px, 0.9fr) minmax(520px, 1.25fr);
  margin: 30px auto 0;
  max-width: 1500px;
}

.projection-qr-panel,
.projection-stat-panel {
  background: rgba(12, 35, 73, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  min-height: 690px;
  padding: 34px;
}

.projection-qr-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.projection-qr-panel h1 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  margin: 5px 0 22px;
}

.projection-qr {
  align-items: center;
  background: #fff;
  border-radius: 22px;
  display: flex;
  height: 330px;
  justify-content: center;
  padding: 24px;
  width: 330px;
}

.projection-qr-stage {
  display: grid;
  min-height: 330px;
  place-items: center;
  width: 100%;
}

.projection-qr-stage > * {
  grid-area: 1 / 1;
}

.projection-qr-hidden {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 330px;
  justify-content: center;
  width: 330px;
}

.projection-qr-hidden strong {
  color: #fff;
  font-size: 1.15rem;
}

.projection-qr-hidden span {
  font-size: 0.82rem;
  max-width: 230px;
}

.projection-qr img,
.projection-qr canvas {
  height: 280px !important;
  width: 280px !important;
}

.projection-qr-panel p {
  color: #9fb3d2;
  font-size: 0.85rem;
  margin: 18px 0;
}

.projection-qr-panel .projection-scan-link {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.projection-control-row .danger-action {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(248, 113, 113, 0.42);
  color: #fecaca;
}

.projection-stat-panel {
  display: grid;
  gap: 22px;
  grid-template-columns: 230px 1fr;
}

.projection-ring {
  align-items: center;
  align-self: start;
  background: conic-gradient(#34d399 calc(var(--value) * 1%), rgba(255, 255, 255, 0.1) 0);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 220px;
  justify-content: center;
  position: relative;
  width: 220px;
}

.projection-ring::after {
  background: #102b53;
  border-radius: 50%;
  content: "";
  inset: 15px;
  position: absolute;
}

.projection-ring strong,
.projection-ring span {
  position: relative;
  z-index: 1;
}

.projection-ring strong {
  font-size: 3.4rem;
}

.projection-ring span {
  color: #9fb3d2;
}

.projection-counts {
  display: grid;
  gap: 12px;
}

.projection-counts article {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  padding: 15px 18px;
}

.projection-counts article.expired {
  background: rgba(220, 38, 38, 0.16);
}

.projection-counts .projection-deadline strong {
  font-size: 1.1rem;
}

.projection-counts small {
  color: #9fb3d2;
}

.projection-counts strong {
  font-size: 1.65rem;
}

.projection-recent {
  grid-column: 1 / -1;
}

.projection-recent h2 {
  align-items: center;
  display: flex;
  font-size: 1.1rem;
  justify-content: space-between;
  margin-bottom: 10px;
}

.projection-recent h2 label {
  align-items: center;
  color: #9fb3d2;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 7px;
}

.projection-recent > div {
  display: grid;
  gap: 8px;
}

.projection-recent > div > div,
.attendance-live-list > div {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  display: flex;
  gap: 11px;
  padding: 10px 12px;
}

.projection-recent .avatar {
  background: #2563eb;
  color: #fff;
}

.projection-recent > div > div > div,
.attendance-live-list > div > div {
  display: grid;
  flex: 1;
}

.projection-recent small {
  color: #9fb3d2;
}

.projection-recent time {
  color: #6ee7b7;
  font-variant-numeric: tabular-nums;
}

.attendance-report-toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 0.5fr) minmax(160px, 0.5fr) auto;
  margin: 0 16px 14px;
}

.attendance-report-toolbar label {
  align-items: center;
  border: 1px solid #d9e4f5;
  border-radius: 10px;
  display: flex;
  gap: 8px;
  padding: 0 11px;
}

.attendance-report-toolbar input,
.attendance-report-toolbar select {
  background: #fff;
  border: 1px solid #d9e4f5;
  border-radius: 10px;
  min-height: 42px;
  padding: 0 11px;
  width: 100%;
}

.attendance-report-toolbar label input {
  border: 0;
  padding: 0;
}

.attendance-report-table {
  margin: 0 16px 18px;
  max-height: min(56vh, 620px);
  overflow: auto;
}

.attendance-report-table .management-table {
  min-width: 1060px;
}

.attendance-report-table small {
  display: block;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .attendance-report-toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .attendance-report-toolbar {
    grid-template-columns: 1fr;
  }
}

.attendance-live-list {
  display: grid;
  gap: 7px;
  max-height: 48vh;
  overflow: auto;
  padding: 0 16px;
}

.attendance-live-list > div {
  background: #f7f9fc;
}

.attendance-live-list time {
  color: var(--muted);
  font-size: 0.73rem;
}

.manual-attendance {
  align-items: end;
  background: #f1f6ff;
  border-radius: 12px;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr 1fr auto;
  margin: 15px;
  padding: 13px;
}

.manual-attendance h3 {
  align-self: center;
  font-size: 0.88rem;
}

.report-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.report-kpi-grid article {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  padding: 17px;
}

.report-kpi-grid article > span {
  align-items: center;
  background: #eaf1ff;
  border-radius: 11px;
  color: #2563eb;
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.report-kpi-grid article > div {
  display: grid;
}

.report-kpi-grid small {
  color: var(--muted);
}

.report-kpi-grid strong {
  font-size: 1.45rem;
}

.report-two-column {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  margin-top: 18px;
}

.audit-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.audit-list {
  display: grid;
  max-height: 620px;
  overflow: auto;
  padding: 5px 18px 18px;
}

.audit-list > div:not(.empty-panel) {
  display: flex;
  gap: 10px;
  padding: 11px 0;
}

.audit-dot {
  background: #2563eb;
  border: 4px solid #dbeafe;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 13px;
  margin-top: 5px;
  width: 13px;
}

.audit-list p,
.audit-list time {
  color: var(--muted);
  font-size: 0.72rem;
}

.question-import-panel { display: grid; gap: 16px; padding: 8px 0 0; }
.question-import-dialog { width: min(760px, calc(100vw - 32px)); }
.question-import-dialog #manage-content { overflow: visible; }
.question-import-steps { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.question-import-steps li { align-items: center; background: #f7faff; border: 1px solid #dce7f5; border-radius: 12px; color: #536983; display: flex; gap: 9px; min-height: 48px; padding: 8px 11px; }
.question-import-steps li span { align-items: center; background: #e6efff; border-radius: 50%; color: #1e5bd7; display: inline-flex; font-size: .82rem; font-weight: 850; height: 27px; justify-content: center; width: 27px; }
.question-import-steps li strong { font-size: .87rem; }
.question-import-template { align-items: center; background: #fff; border: 1px solid #dce6f3; border-radius: 14px; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; padding: 13px 14px; }
.question-import-template > span { align-items: center; background: #eaf8f2; border-radius: 11px; color: #0b8b63; display: flex; height: 44px; justify-content: center; width: 44px; }
.question-import-template > div { display: grid; gap: 2px; }
.question-import-template small { color: #667891; }
.question-import-dropzone { align-items: center; background: #f8fbff; border: 1.5px dashed #9fc5f8; border-radius: 15px; color: #2459aa; cursor: pointer; display: flex; flex-direction: column; gap: 5px; justify-content: center; min-height: 132px; padding: 22px; text-align: center; transition: .18s ease; }
.question-import-dropzone:hover { background: #f1f7ff; border-color: #3478e5; transform: translateY(-1px); }
.question-import-dropzone.selected { background: #effbf6; border-color: #54bd95; color: #087654; }
.question-import-dropzone small { color: #687b94; }
.question-import-dropzone input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.question-import-footer { border-top: 1px solid #e1e9f3; margin-top: 2px; padding-top: 15px; }

.import-validation {
  border-radius: 11px;
  padding: 13px;
}

.import-validation.success {
  background: #eafaf4;
  color: #047857;
}

.import-validation.error {
  background: #fff1f2;
  color: #be123c;
}

.import-validation p {
  font-size: 0.76rem;
  margin-top: 5px;
}

.attendance-confirm-dialog .modal {
  max-width: 620px;
}

.scan-identity {
  align-items: center;
  background: #eef4ff;
  border-radius: 12px;
  display: flex;
  gap: 11px;
  padding: 12px;
}

.scan-identity > div {
  display: grid;
}

.attendance-confirmed {
  align-items: center;
  color: #047857;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 250px;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

.attendance-confirmed strong {
  font-size: 1.25rem;
}

@media (max-width: 1050px) {
  .resource-add-grid,
  .report-two-column,
  .attendance-projection main {
    grid-template-columns: 1fr;
  }
  .attendance-projection main {
    max-width: 760px;
  }
  .projection-qr-panel,
  .projection-stat-panel {
    min-height: 0;
  }
  .report-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  body { font-size: 15px; }
  .content-card-grid,
  .attendance-session-grid,
  .report-kpi-grid { grid-template-columns: 1fr; }
  .content-card,
  .attendance-session-card { padding: 17px; }
  .session-time-grid { grid-template-columns: 1fr; }
  .resource-add-grid,
  .manual-attendance { grid-template-columns: 1fr; }
  .attendance-projection-shell { padding: 14px; }
  .attendance-projection header,
  .projection-live { align-items: flex-start; flex-direction: column; }
  .attendance-projection main { grid-template-columns: 1fr; margin-top: 16px; }
  .projection-qr-panel,
  .projection-stat-panel { padding: 20px; }
  .projection-stat-panel { grid-template-columns: 1fr; }
  .projection-ring { margin: auto; }
  .projection-qr { height: 280px; width: 280px; }
  .projection-qr img,
  .projection-qr canvas { height: 230px !important; width: 230px !important; }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
}

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

button,
a,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

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

.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.spinning {
  animation: spin 0.8s linear infinite;
}

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

.eyebrow {
  color: var(--cyan);
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  margin-bottom: 8px;
}

.primary-button,
.outline-button,
.ghost-button,
.icon-button,
.danger-button,
.table-action {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 39px;
  padding: 0 13px;
  text-decoration: none;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.primary-button {
  background: linear-gradient(135deg, #20bce9, #2793dd);
  border: 1px solid rgba(84, 223, 255, 0.35);
  color: #03111c;
  box-shadow: 0 8px 22px rgba(32, 188, 233, 0.16);
}

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

.danger-button {
  background: var(--red-soft);
  border: 1px solid rgba(255, 112, 128, 0.22);
  color: var(--red);
}

.danger-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.primary-button.large {
  font-size: 0.82rem;
  min-height: 47px;
  width: 100%;
}

.outline-button,
.ghost-button,
.icon-button {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.outline-button:hover,
.ghost-button:hover,
.icon-button:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(53, 211, 255, 0.35);
}

.ghost-button {
  background: transparent;
}

.icon-button {
  min-width: 39px;
  padding: 0 9px;
}

.boot-screen {
  align-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(53, 211, 255, 0.12), transparent 34%),
    var(--bg);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  min-height: 100vh;
}

.boot-mark {
  align-items: center;
  background: var(--cyan-soft);
  border: 1px solid rgba(53, 211, 255, 0.24);
  border-radius: 18px;
  color: var(--cyan);
  display: flex;
  height: 64px;
  justify-content: center;
  margin-bottom: 8px;
  width: 64px;
}

.boot-screen span {
  font-size: 0.76rem;
}

/* Authentication */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(420px, 0.92fr);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.auth-background {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.auth-shell.has-background .auth-story {
  background:
    linear-gradient(140deg, rgba(248, 251, 255, 0.88), rgba(237, 244, 255, 0.84));
  backdrop-filter: blur(1px);
}

.auth-shell.has-background .auth-panel {
  background: rgba(244, 247, 251, 0.84);
  backdrop-filter: blur(2px);
}

.auth-shell.has-background .auth-card {
  background: rgba(255, 255, 255, 0.94);
}

.branding-upload-card.is-uploading {
  opacity: 0.72;
  pointer-events: none;
  position: relative;
}

.branding-upload-card.is-uploading::after {
  align-items: center;
  background: rgba(255, 255, 255, 0.78);
  color: #1d4ed8;
  content: "Đang tải lên…";
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  inset: 0;
  justify-content: center;
  position: absolute;
  z-index: 4;
}

.auth-shell > section {
  position: relative;
  z-index: 1;
}

.auth-brand img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.auth-story {
  background:
    radial-gradient(circle at 30% 30%, rgba(53, 211, 255, 0.15), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(165, 144, 255, 0.11), transparent 34%),
    linear-gradient(135deg, #06101d, #0c1b2d);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(32px, 6vw, 82px);
  position: relative;
  overflow: hidden;
}

.auth-story::after {
  border: 1px solid rgba(53, 211, 255, 0.08);
  border-radius: 50%;
  content: "";
  height: 520px;
  left: 45%;
  position: absolute;
  top: 15%;
  width: 520px;
}

.auth-brand,
.student-brand,
.projection-brand,
.sidebar-brand {
  align-items: center;
  display: flex;
  gap: 11px;
  position: relative;
  z-index: 1;
}

.auth-brand > span,
.student-brand > span,
.projection-brand > span,
.sidebar-brand > span {
  align-items: center;
  background: linear-gradient(135deg, var(--cyan), #3a9ef2);
  border-radius: 11px;
  color: #061421;
  display: flex;
  height: 43px;
  justify-content: center;
  width: 43px;
}

.auth-brand strong {
  font-size: 0.92rem;
}

.auth-copy {
  max-width: 650px;
  position: relative;
  z-index: 1;
}

.auth-copy h1 {
  font-size: clamp(2.25rem, 4.4vw, 4.6rem);
  letter-spacing: -0.055em;
  line-height: 1.04;
}

.auth-features {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.auth-features span {
  align-items: center;
  color: #b5c6d5;
  display: flex;
  font-size: 0.82rem;
  gap: 10px;
}

.auth-features svg {
  color: var(--green);
}

.auth-story > small {
  color: #70869a;
  font-size: 0.72rem;
  position: relative;
  z-index: 1;
}

.auth-panel {
  align-items: center;
  background: #091523;
  display: flex;
  justify-content: center;
  padding: 30px;
}

.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  max-width: 490px;
  padding: clamp(24px, 4vw, 40px);
  width: 100%;
}

.auth-card-heading {
  margin-bottom: 25px;
  text-align: center;
}

.auth-lock {
  align-items: center;
  background: var(--cyan-soft);
  border: 1px solid rgba(53, 211, 255, 0.2);
  border-radius: 13px;
  color: var(--cyan);
  display: flex;
  height: 48px;
  justify-content: center;
  margin: 0 auto 15px;
  width: 48px;
}

.auth-card-heading h2 {
  font-size: 1.35rem;
}

.auth-card-heading p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
  margin-top: 7px;
}

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

.field {
  display: grid;
  gap: 7px;
}

.field > span {
  color: #a5b7c8;
  font-size: 0.72rem;
  font-weight: 700;
}

.field > small {
  color: #6f8599;
  font-size: 0.72rem;
  line-height: 1.45;
}

.field input,
.field select,
.field textarea,
.compact-select {
  background: rgba(3, 12, 22, 0.46);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--text);
  outline: none;
}

.field input,
.field select {
  height: 43px;
  padding: 0 11px;
}

.field textarea {
  line-height: 1.5;
  padding: 10px 11px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.compact-select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(53, 211, 255, 0.08);
}

.form-row {
  display: grid;
  gap: 12px;
}

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

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

.form-error {
  background: var(--red-soft);
  border: 1px solid rgba(255, 112, 128, 0.18);
  border-radius: 8px;
  color: #ffc0c7;
  font-size: 0.72rem;
  line-height: 1.45;
  padding: 10px 12px;
}

.page-error {
  margin-bottom: 14px;
}

/* Admin app shell */
.admin-shell {
  background: var(--bg);
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: #081421;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 19px 14px 15px;
  position: sticky;
  top: 0;
}

.sidebar-brand {
  padding: 0 6px 22px;
}

.sidebar-brand > span {
  height: 39px;
  width: 39px;
}

.sidebar-brand > div,
.student-brand > div,
.projection-brand > div {
  display: grid;
}

.sidebar-brand strong,
.student-brand strong {
  font-size: 0.8rem;
}

.sidebar-brand small,
.student-brand small,
.projection-brand small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.sidebar nav {
  display: grid;
  gap: 5px;
}

.sidebar nav button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #879eb3;
  display: grid;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 9px;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  min-height: 42px;
  padding: 0 10px;
  text-align: left;
}

.sidebar nav button:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.sidebar nav button.active {
  background: var(--cyan-soft);
  border-color: rgba(53, 211, 255, 0.16);
  color: var(--cyan);
}

.sidebar nav button small {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  display: flex;
  font-size: 0.72rem;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 5px;
}

.sidebar-user {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 33px minmax(0, 1fr) auto;
  margin-top: auto;
  padding: 15px 4px 0;
}

.sidebar-user > div {
  display: grid;
  min-width: 0;
}

.sidebar-user strong {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.sidebar-user button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 5px;
}

.avatar {
  align-items: center;
  background: var(--cyan-soft);
  border: 1px solid rgba(53, 211, 255, 0.15);
  border-radius: 10px;
  color: var(--cyan);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  height: 33px;
  justify-content: center;
  width: 33px;
}

.avatar.admin {
  background: var(--violet-soft);
  border-color: rgba(165, 144, 255, 0.18);
  color: var(--violet);
}

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

.admin-header {
  align-items: center;
  background: rgba(7, 17, 31, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 67px;
  justify-content: space-between;
  padding: 0 25px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.admin-header > div,
.admin-header-actions,
.class-picker,
.live-badge,
.last-update {
  align-items: center;
  display: flex;
}

.admin-header > div {
  gap: 12px;
}

.live-badge {
  background: var(--green-soft);
  border: 1px solid rgba(55, 217, 155, 0.16);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 850;
  gap: 6px;
  letter-spacing: 0.04em;
  padding: 6px 8px;
}

.live-badge i {
  animation: pulse 1.4s ease-in-out infinite;
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 5px rgba(55, 217, 155, 0.08);
    opacity: 0.65;
  }
}

.class-picker {
  position: relative;
}

.class-picker select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 750;
  min-width: 180px;
  outline: 0;
  padding: 8px 28px 8px 4px;
}

.class-picker svg {
  pointer-events: none;
  position: absolute;
  right: 4px;
}

.admin-header-actions {
  gap: 9px;
}

.last-update {
  color: var(--muted);
  font-size: 0.72rem;
  margin-right: 5px;
}

.admin-content {
  margin: 0 auto;
  max-width: 1700px;
  padding: 25px;
}

.page-loading {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 11px;
  justify-content: center;
  min-height: 65vh;
}

.page-loading span {
  font-size: 0.75rem;
}

/* Monitor */
.monitor-page {
  display: grid;
  gap: 15px;
}

.dashboard-filter-bar {
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto minmax(190px, auto);
  padding: 12px;
}

.dashboard-filter-bar label {
  display: grid;
  gap: 5px;
}

.dashboard-filter-bar label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.dashboard-filter-bar input,
.dashboard-filter-bar select {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  min-height: 39px;
  padding: 0 10px;
}

.dashboard-filter-bar output {
  align-self: center;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: right;
}

.page-title-row,
.management-heading,
.student-hero,
.student-section-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.page-title-row h1,
.management-heading h1,
.student-hero h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.4rem);
  letter-spacing: -0.045em;
}

.page-title-row p,
.management-heading p,
.student-hero p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 7px;
}

.monitor-clock {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--cyan);
  display: flex;
  gap: 9px;
  padding: 9px 12px;
}

.monitor-clock > div {
  display: grid;
}

.monitor-clock strong {
  color: var(--text);
  font-size: 0.78rem;
}

.monitor-clock span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
}

.kpi-grid,
.student-kpis {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.kpi-detail-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
}

.kpi-detail-grid small {
  color: var(--muted);
  font-size: 0.7rem;
}

.kpi-detail-grid strong {
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .dashboard-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filter-bar output {
    text-align: left;
  }

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

@media (max-width: 680px) {
  .dashboard-filter-bar,
  .kpi-detail-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-card {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  display: flex;
  gap: 12px;
  min-height: 99px;
  padding: 15px;
}

.kpi-icon {
  align-items: center;
  border-radius: 10px;
  display: flex;
  height: 41px;
  justify-content: center;
  width: 41px;
}

.kpi-card.cyan .kpi-icon {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.kpi-card.green .kpi-icon {
  background: var(--green-soft);
  color: var(--green);
}

.kpi-card.orange .kpi-icon {
  background: var(--orange-soft);
  color: var(--orange);
}

.kpi-card.violet .kpi-icon {
  background: var(--violet-soft);
  color: var(--violet);
}

.kpi-card > div {
  display: grid;
}

.kpi-card > div > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.kpi-card strong {
  font-size: 1.65rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin: 3px 0;
}

.kpi-card small {
  color: #70869a;
  font-size: 0.72rem;
}

.monitor-grid {
  display: grid;
  gap: 11px;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.62fr);
}

.analytics-board {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.health-panel,
.trend-panel,
.grade-panel {
  grid-column: span 4;
}

.risk-panel {
  grid-column: span 4;
}

.delivery-panel {
  grid-column: span 8;
}

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

.gauge-item {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  text-align: center;
}

.gauge-ring {
  --gauge: 0deg;
  align-items: center;
  background:
    radial-gradient(circle at center, var(--panel) 57%, transparent 58%),
    conic-gradient(var(--cyan) var(--gauge), rgba(143, 165, 186, 0.12) 0);
  border-radius: 50%;
  display: flex;
  height: 70px;
  justify-content: center;
  position: relative;
  width: 70px;
}

.gauge-ring.green {
  background:
    radial-gradient(circle at center, var(--panel) 57%, transparent 58%),
    conic-gradient(var(--green) var(--gauge), rgba(143, 165, 186, 0.12) 0);
}

.gauge-ring.violet {
  background:
    radial-gradient(circle at center, var(--panel) 57%, transparent 58%),
    conic-gradient(var(--violet) var(--gauge), rgba(143, 165, 186, 0.12) 0);
}

.gauge-ring span {
  font-size: 0.72rem;
  font-weight: 850;
}

.gauge-item > div:last-child {
  display: grid;
  gap: 3px;
}

.gauge-item strong {
  font-size: 0.72rem;
}

.gauge-item small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.column-chart {
  align-items: end;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 145px;
  padding: 14px 14px 10px;
}

.column-item {
  align-items: center;
  display: grid;
  gap: 3px;
  grid-template-rows: 12px 78px 12px 12px;
  justify-items: center;
  min-width: 0;
}

.column-value {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
}

.column-track {
  align-items: end;
  background: rgba(143, 165, 186, 0.06);
  border-radius: 5px 5px 2px 2px;
  display: flex;
  height: 100%;
  overflow: hidden;
  width: min(24px, 75%);
}

.column-track i {
  background: linear-gradient(180deg, var(--cyan), #187bb7);
  border-radius: inherit;
  display: block;
  min-height: 2px;
  width: 100%;
}

.column-item strong {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.column-item small {
  color: var(--muted);
  font-size: 0.72rem;
}

.horizontal-chart {
  display: grid;
  gap: 13px;
  padding: 19px 15px;
}

.horizontal-row {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 50px minmax(0, 1fr) 20px;
}

.horizontal-row > span,
.horizontal-row > strong {
  font-size: 0.72rem;
}

.horizontal-row > strong {
  text-align: right;
}

.horizontal-track {
  background: rgba(143, 165, 186, 0.09);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.horizontal-track i {
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 2px;
}

.horizontal-track i.danger,
.risk-stack i.danger,
.risk-legend span.danger {
  background: var(--red);
}

.horizontal-track i.warning,
.risk-stack i.warning,
.risk-legend span.warning {
  background: var(--orange);
}

.horizontal-track i.cyan {
  background: var(--cyan);
}

.horizontal-track i.success,
.risk-stack i.success,
.risk-legend span.success {
  background: var(--green);
}

.risk-panel,
.delivery-panel {
  min-height: 178px;
}

.risk-stack {
  background: rgba(143, 165, 186, 0.1);
  border-radius: 999px;
  display: flex;
  height: 12px;
  margin: 22px 15px 17px;
  overflow: hidden;
}

.risk-stack i {
  display: block;
  min-width: 1px;
}

.risk-legend {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 15px 15px;
}

.risk-legend > div {
  display: grid;
  gap: 3px;
  grid-template-columns: 7px 23px minmax(0, 1fr);
}

.risk-legend span {
  border-radius: 50%;
  height: 7px;
  margin-top: 3px;
  width: 7px;
}

.risk-legend strong {
  font-size: 0.72rem;
}

.risk-legend small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.3;
}

.delivery-list {
  display: grid;
  gap: 8px;
  padding: 12px 15px 15px;
}

.delivery-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(100px, 0.7fr) minmax(150px, 1.5fr) 34px;
}

.delivery-row > div:first-child {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: 25px minmax(0, 1fr);
  min-width: 0;
}

.delivery-row > div:first-child strong {
  color: var(--cyan);
  font-size: 0.72rem;
}

.delivery-row > div:first-child span {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delivery-track {
  background: rgba(143, 165, 186, 0.08);
  border-radius: 999px;
  display: flex;
  height: 8px;
  overflow: hidden;
}

.delivery-track i {
  display: block;
}

.delivery-track .on-time {
  background: var(--green);
}

.delivery-track .late {
  background: var(--orange);
}

.delivery-track .missing {
  background: rgba(255, 112, 128, 0.55);
}

.delivery-row > strong {
  color: var(--cyan);
  font-size: 0.72rem;
  text-align: right;
}

.ioc-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}

.panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 65px;
  padding: 13px 15px;
}

.panel-heading h2 {
  font-size: 0.78rem;
}

.panel-heading p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 4px;
}

.panel-heading > svg {
  color: var(--cyan);
}

.assignment-progress-list {
  padding: 6px 15px 11px;
}

.assignment-progress-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 11px;
  grid-template-columns: 32px minmax(0, 1fr) 38px 66px;
  padding: 9px 0;
}

.assignment-progress-row:last-child {
  border-bottom: 0;
}

.assignment-index {
  align-items: center;
  background: var(--cyan-soft);
  border-radius: 8px;
  color: var(--cyan);
  display: flex;
  font-size: 0.72rem;
  font-weight: 850;
  height: 31px;
  justify-content: center;
}

.assignment-progress-main {
  display: grid;
  gap: 7px;
}

.assignment-progress-main > div:first-child {
  display: flex;
  justify-content: space-between;
}

.assignment-progress-main strong {
  font-size: 0.72rem;
}

.assignment-progress-main span {
  color: var(--muted);
  font-size: 0.72rem;
}

.progress-track {
  background: rgba(143, 165, 186, 0.11);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.progress-track i {
  background: linear-gradient(90deg, #1689c6, var(--cyan));
  border-radius: inherit;
  display: block;
  height: 100%;
}

.progress-percent {
  color: var(--cyan);
  font-size: 0.72rem;
  text-align: right;
}

.assignment-state,
.status-pill {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 780;
  padding: 5px 7px;
  text-align: center;
  white-space: nowrap;
}

.assignment-state.published,
.status-pill.published {
  background: var(--green-soft);
  color: var(--green);
}

.assignment-state.draft,
.status-pill.draft {
  background: var(--violet-soft);
  color: var(--violet);
}

.assignment-state.closed,
.status-pill.closed {
  background: rgba(143, 165, 186, 0.1);
  color: var(--muted);
}

.status-pill.late {
  background: var(--orange-soft);
  color: var(--orange);
}

.leaderboard-list {
  padding: 5px 13px 10px;
}

.leader-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: 23px 31px minmax(0, 1fr) 32px;
  padding: 7px 0;
}

.leader-row:last-child {
  border-bottom: 0;
}

.rank {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  font-weight: 850;
  justify-content: center;
}

.rank-1 {
  color: #ffd66e;
}

.rank-2 {
  color: #c4d7e8;
}

.rank-3 {
  color: #e4a274;
}

.leader-row > div {
  display: grid;
  min-width: 0;
}

.leader-row > div strong {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-row > div span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.rank-score {
  color: var(--cyan);
  font-size: 0.77rem;
  text-align: right;
}

.compact-select {
  font-size: 0.72rem;
  height: 31px;
  max-width: 135px;
  padding: 0 8px;
}

.live-feed-panel {
  grid-column: 2;
}

.live-feed {
  padding: 5px 13px 10px;
}

.live-feed > button {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  display: grid;
  gap: 8px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 7px 0;
  text-align: left;
  width: 100%;
}

.live-feed > button:last-child {
  border-bottom: 0;
}

.feed-icon {
  align-items: center;
  background: var(--green-soft);
  border-radius: 8px;
  color: var(--green);
  display: flex;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.live-feed button > div {
  display: grid;
  min-width: 0;
}

.live-feed strong {
  font-size: 0.72rem;
}

.live-feed button span:not(.feed-icon) {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-feed time {
  color: var(--muted);
  font-size: 0.72rem;
}

.live-mini {
  background: var(--green-soft);
  border-radius: 999px;
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 5px 7px;
}

.matrix-panel {
  grid-column: 1 / -1;
}

.matrix-legend {
  display: flex;
  gap: 10px;
}

.matrix-legend span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 5px;
}

.matrix-legend span::before {
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}

.matrix-legend .done::before {
  background: var(--green);
}

.matrix-legend .late::before {
  background: var(--orange);
}

.matrix-legend .missing::before {
  border: 1px solid #6d8295;
}

.matrix-scroll {
  max-height: 315px;
  overflow: auto;
}

.matrix-table {
  border-collapse: collapse;
  font-size: 0.72rem;
  min-width: 720px;
  width: 100%;
}

.matrix-table th {
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 8px;
  position: sticky;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  z-index: 2;
}

.matrix-table th:first-child {
  text-align: left;
}

.matrix-table td {
  border-top: 1px solid var(--line);
  padding: 6px 8px;
  text-align: center;
}

.matrix-table td:first-child {
  display: grid;
  min-width: 165px;
  text-align: left;
}

.matrix-table td:first-child strong {
  font-size: 0.72rem;
}

.matrix-table td:first-child span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
}

.matrix-dot {
  border: 1px solid #536a7d;
  border-radius: 50%;
  display: inline-block;
  height: 9px;
  width: 9px;
}

.matrix-dot.done {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(55, 217, 155, 0.25);
}

.matrix-dot.late {
  background: var(--orange);
  border-color: var(--orange);
}

.matrix-dot.disabled {
  background: rgba(143, 165, 186, 0.12);
  border-color: transparent;
  opacity: 0.45;
}

.empty-panel {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  min-height: 145px;
  padding: 20px;
  text-align: center;
}

.empty-panel svg {
  color: var(--cyan);
}

.empty-panel strong {
  color: var(--text);
  font-size: 0.72rem;
}

.empty-panel span {
  font-size: 0.72rem;
}

/* Management */
.management-page {
  display: grid;
  gap: 17px;
}

.first-class-empty {
  align-items: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(53, 211, 255, 0.1), transparent 42%),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 38px;
  text-align: center;
}

.first-class-empty > span {
  align-items: center;
  background: var(--cyan-soft);
  border: 1px solid rgba(53, 211, 255, 0.18);
  border-radius: 18px;
  color: var(--cyan);
  display: flex;
  height: 68px;
  justify-content: center;
  width: 68px;
}

.first-class-empty h1 {
  font-size: 2rem;
}

.first-class-empty p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
  margin: 10px auto 0;
  max-width: 610px;
}

.workflow-preview {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  max-width: 760px;
  width: 100%;
}

.workflow-preview div {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 7px;
  padding: 14px;
}

.workflow-preview strong {
  color: var(--cyan);
  font-size: 0.72rem;
}

.workflow-preview span {
  font-size: 0.72rem;
}

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

.class-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 14px;
  grid-template-columns: 45px minmax(0, 1fr);
  min-height: 190px;
  padding: 16px;
}

.class-card.current {
  border-color: rgba(53, 211, 255, 0.3);
  box-shadow: inset 0 0 0 1px rgba(53, 211, 255, 0.07);
}

.class-card-icon {
  align-items: center;
  background: var(--cyan-soft);
  border-radius: 10px;
  color: var(--cyan);
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.class-card-main > div {
  align-items: center;
  display: flex;
  gap: 6px;
}

.current-pill {
  background: var(--violet-soft);
  border-radius: 999px;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 750;
  padding: 5px 7px;
}

.class-card-main h2 {
  font-size: 0.86rem;
  margin-top: 13px;
}

.class-card-main p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 6px;
}

.class-card-main .class-admin-summary {
  align-items: center;
  display: flex;
  gap: 6px;
  line-height: 1.45;
  margin-top: 12px;
}

.class-admin-summary svg {
  color: var(--violet);
  flex: 0 0 auto;
}

.class-card-actions {
  align-items: end;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
  padding-top: 12px;
}

.class-card-actions button,
.assignment-card-footer button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--cyan);
  display: flex;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 5px;
  padding: 3px;
}

.danger-action {
  color: var(--red) !important;
}

.heading-actions,
.row-actions,
.assignment-card-footer > div {
  align-items: center;
  display: flex;
  gap: 8px;
}

.table-action.icon-only {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 31px;
  padding: 0;
}

.report-preview {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px 19px 0;
}

.report-preview > div {
  background: rgba(53, 211, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 5px;
  padding: 13px;
}

.report-preview span {
  color: var(--muted);
  font-size: 0.72rem;
}

.report-preview strong {
  font-size: 1.2rem;
}

.report-options {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  padding: 14px 19px 3px;
}

.report-options > button {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  display: flex;
  gap: 12px;
  min-height: 80px;
  padding: 13px;
  text-align: left;
}

.report-options > button:hover {
  border-color: rgba(53, 211, 255, 0.28);
}

.report-options > button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.report-error {
  margin: 10px 19px 0;
}

.class-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(310px, 0.7fr);
  min-height: 430px;
}

.class-admin-list {
  border-right: 1px solid var(--line);
  padding: 17px 18px;
}

.section-label {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-label > span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.section-label > strong,
.section-label > button {
  color: var(--muted);
  font-size: 0.72rem;
}

.section-label > button {
  background: transparent;
  border: 0;
}

.class-admin-list article {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  padding: 11px 0;
}

.class-admin-list article > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.class-admin-list article code {
  color: var(--cyan);
  font-size: 0.72rem;
}

.class-admin-list article small {
  color: var(--muted);
  font-size: 0.72rem;
}

.class-admin-form {
  align-content: start;
  border-top: 0;
  padding-top: 17px;
}

.permission-note {
  align-items: center;
  background: var(--violet-soft);
  border: 1px solid rgba(165, 144, 255, 0.16);
  border-radius: 8px;
  color: var(--violet);
  display: flex;
  font-size: 0.72rem;
  gap: 7px;
  padding: 9px;
}

.report-options > button > span {
  align-items: center;
  background: var(--cyan-soft);
  border-radius: 9px;
  color: var(--cyan);
  display: flex;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.report-options > button > div {
  display: grid;
  gap: 5px;
}

.report-options strong {
  font-size: 0.72rem;
}

.report-options small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.management-heading {
  min-height: 66px;
}

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

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

.assignment-card,
.create-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  min-height: 265px;
  padding: 16px;
}

.assignment-card {
  display: flex;
  flex-direction: column;
}

.assignment-card-top,
.assignment-card-footer,
.card-progress,
.assignment-meta,
.summary-strip,
.inline-progress,
.file-name-cell,
.person-cell,
.credentials-toolbar,
.security-note {
  align-items: center;
  display: flex;
}

.assignment-card-top,
.assignment-card-footer {
  justify-content: space-between;
}

.assignment-number {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.assignment-card h2 {
  font-size: 0.9rem;
  margin-top: 15px;
}

.assignment-card > p {
  color: var(--muted);
  display: -webkit-box;
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 7px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.assignment-meta {
  align-items: flex-start;
  color: var(--muted);
  flex-direction: column;
  font-size: 0.72rem;
  gap: 7px;
  margin-top: 15px;
}

.assignment-meta span {
  align-items: center;
  display: flex;
  gap: 6px;
}

.card-progress {
  gap: 9px;
  margin-top: 17px;
}

.card-progress > div:first-child {
  display: grid;
  min-width: 55px;
}

.card-progress > div:first-child strong {
  font-size: 0.75rem;
}

.card-progress > div:first-child span {
  color: var(--muted);
  font-size: 0.72rem;
}

.card-progress .progress-track {
  flex: 1;
}

.card-progress > strong {
  color: var(--cyan);
  font-size: 0.72rem;
}

.assignment-card-footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding-top: 12px;
}

.assignment-card-footer > span {
  color: var(--muted);
  font-size: 0.72rem;
}

.assignment-card-footer button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--cyan);
  display: flex;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 5px;
}

.create-card {
  align-items: center;
  background: rgba(53, 211, 255, 0.025);
  border-style: dashed;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  text-align: center;
}

.create-card svg {
  color: var(--cyan);
}

.create-card strong {
  color: var(--text);
  font-size: 0.76rem;
}

.create-card span {
  font-size: 0.72rem;
}

.summary-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  gap: 18px;
  min-height: 58px;
  padding: 9px 13px;
}

.summary-strip > span {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 6px;
  white-space: nowrap;
}

.summary-strip > span svg {
  color: var(--cyan);
}

.summary-strip > span strong {
  color: var(--text);
  font-size: 0.72rem;
}

.bulk-delete-button {
  align-items: center;
  background: var(--red-soft);
  border: 1px solid rgba(255, 112, 128, 0.22);
  border-radius: 8px;
  color: var(--red);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 6px;
  min-height: 35px;
  padding: 0 10px;
  white-space: nowrap;
}

.selection-column {
  text-align: center !important;
  width: 42px;
}

.selection-column input {
  accent-color: var(--cyan);
  cursor: pointer;
  height: 15px;
  width: 15px;
}

.table-search {
  align-items: center;
  background: rgba(3, 12, 22, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  margin-left: auto;
  padding: 0 9px;
}

.table-search input {
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 0.72rem;
  height: 35px;
  min-width: 170px;
  outline: 0;
}

.table-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: auto;
}

.management-table {
  border-collapse: collapse;
  font-size: 0.72rem;
  width: 100%;
}

.management-table th {
  background: rgba(255, 255, 255, 0.018);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  padding: 10px 12px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.management-table td {
  border-top: 1px solid var(--line);
  padding: 9px 12px;
}

.person-cell,
.file-name-cell {
  gap: 8px;
  min-width: 0;
}

.person-cell > div,
.file-name-cell > div {
  display: grid;
  min-width: 0;
}

.person-cell strong,
.file-name-cell strong {
  font-size: 0.72rem;
}

.person-cell span,
.file-name-cell span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.file-name-cell > svg {
  color: var(--cyan);
}

.management-table code {
  background: rgba(53, 211, 255, 0.07);
  border-radius: 5px;
  color: #bfefff;
  font-size: 0.72rem;
  padding: 4px 6px;
}

.inline-progress {
  gap: 8px;
  min-width: 110px;
}

.inline-progress .progress-track {
  flex: 1;
}

.inline-progress span {
  color: var(--cyan);
  font-size: 0.72rem;
  min-width: 28px;
}

.score-text {
  color: var(--cyan);
}

.late-text {
  color: var(--orange);
}

.muted-text {
  color: var(--muted);
}

.table-action {
  background: var(--cyan-soft);
  border: 1px solid rgba(53, 211, 255, 0.13);
  color: var(--cyan);
  font-size: 0.72rem;
  min-height: 31px;
  padding: 0 8px;
  white-space: nowrap;
}

/* Modal and forms */
.modal-backdrop,
.preview-backdrop {
  background: rgba(1, 7, 13, 0.78);
  backdrop-filter: blur(8px);
  inset: 0;
  position: fixed;
  z-index: 70;
}

.modal-backdrop {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 18px;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
  max-height: calc(100vh - 30px);
  max-width: 520px;
  overflow: auto;
  padding: 19px;
  width: 100%;
}

.modal.wide {
  max-width: 720px;
}

.modal.extra-wide {
  max-width: 920px;
}

.modal-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 17px;
  padding-bottom: 15px;
}

.modal-heading > div:first-child {
  align-items: center;
  display: flex;
  gap: 10px;
}

.modal-heading > div:first-child > span {
  align-items: center;
  background: var(--cyan-soft);
  border-radius: 10px;
  color: var(--cyan);
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.modal-heading h2 {
  font-size: 0.93rem;
}

.modal-heading p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  margin-top: 4px;
}

.modal-heading > button,
.submission-preview-header > div:last-child > button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  height: 35px;
  justify-content: center;
  width: 35px;
}

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

.dropzone {
  align-items: center;
  background: rgba(53, 211, 255, 0.025);
  border: 1px dashed rgba(53, 211, 255, 0.28);
  border-radius: 11px;
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 112px;
  padding: 15px;
  text-align: center;
}

.dropzone.has-file {
  background: var(--green-soft);
  border-color: rgba(55, 217, 155, 0.3);
  color: var(--green);
}

.dropzone input {
  display: none;
}

.dropzone strong {
  color: var(--text);
  font-size: 0.72rem;
}

.dropzone span {
  color: var(--muted);
  font-size: 0.72rem;
}

.template-builder,
.audience-builder {
  background: rgba(3, 12, 22, 0.28);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.template-help,
.credential-preview {
  align-items: center;
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.template-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.template-note code {
  color: var(--cyan);
}

.template-help span,
.credential-preview span {
  color: var(--muted);
  font-size: 0.72rem;
}

.template-help code,
.credential-preview strong {
  background: var(--cyan-soft);
  border-radius: 5px;
  color: var(--cyan);
  font-size: 0.72rem;
  padding: 4px 6px;
}

.credential-preview i {
  color: var(--muted);
  font-size: 0.72rem;
}

.check-field {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 8px;
}

.check-field input {
  accent-color: var(--cyan);
  height: 15px;
  width: 15px;
}

.inline-check-field {
  align-content: start;
}

.inline-check-field > .check-field {
  min-height: 43px;
}

.attendance-guest-option {
  align-items: flex-start;
  background: #f2f7ff;
  border: 1px solid #cbdcf4;
  border-radius: 12px;
  color: #263d60;
  font-size: 0.86rem;
  padding: 12px 14px;
}

.attendance-guest-option input { margin-top: 3px; }
.attendance-guest-option > span { display: grid; gap: 3px; }
.attendance-guest-option strong { color: #142744; font-size: 0.9rem; }
.attendance-guest-option small { color: #667a97; font-size: 0.78rem; font-weight: 500; }

.attendance-token-field { max-width: 360px; }

.attendance-method-settings {
  background: #fff;
  border: 1px solid #d8e3f1;
  border-radius: 15px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

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

.attendance-method-heading > div { display: grid; gap: 3px; }
.attendance-method-heading strong { color: #142744; font-size: 0.94rem; }
.attendance-method-heading small { color: #667a97; font-size: 0.79rem; }
.attendance-method-heading > span {
  align-items: center;
  background: #e9f8f1;
  border: 1px solid #bee9d5;
  border-radius: 999px;
  color: #087a57;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
  padding: 7px 10px;
}

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

.session-mode.guest-enabled {
  background: #e9f8f1;
  border-color: #bee9d5;
  color: #087a57;
}

@media (max-width: 720px) {
  .attendance-method-heading { align-items: flex-start; flex-direction: column; }
  .attendance-method-options { grid-template-columns: 1fr; }
  .attendance-token-field { max-width: none; }
}

.audience-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.audience-title > div:first-child {
  display: grid;
}

.audience-title strong {
  font-size: 0.72rem;
}

.audience-title span {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.segmented {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  padding: 3px;
}

.segmented button {
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  min-height: 28px;
  padding: 0 8px;
}

.segmented button.active {
  background: var(--cyan-soft);
  color: var(--cyan);
}

.student-selector {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 11px;
  max-height: 190px;
  overflow: auto;
}

.student-selector > label {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 7px;
  grid-template-columns: 14px 29px minmax(0, 1fr);
  padding: 7px;
}

.student-selector input {
  accent-color: var(--cyan);
}

.student-selector .avatar {
  border-radius: 8px;
  height: 29px;
  width: 29px;
}

.student-selector > label > div {
  display: grid;
}

.student-selector strong {
  font-size: 0.72rem;
}

.student-selector small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 2px;
}

.credentials-toolbar {
  justify-content: space-between;
  margin-bottom: 12px;
}

.security-note {
  color: var(--green);
  font-size: 0.72rem;
  gap: 7px;
}

.credentials-table-wrap {
  border: 1px solid var(--line);
  border-radius: 9px;
  max-height: 430px;
  overflow: auto;
}

.credentials-table th {
  background: var(--panel);
  position: sticky;
  top: 0;
}

/* Student portal */
.student-shell {
  background:
    radial-gradient(circle at 12% 10%, rgba(53, 211, 255, 0.07), transparent 23%),
    var(--bg);
  min-height: 100vh;
}

.student-header {
  align-items: center;
  background: rgba(7, 17, 31, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 70px;
  justify-content: space-between;
  padding: 0 clamp(18px, 5vw, 70px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.student-user {
  align-items: center;
  display: flex;
  gap: 9px;
}

.student-user > div {
  display: grid;
  margin-right: 8px;
}

.student-user > div strong {
  font-size: 0.72rem;
}

.student-user > div small {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 3px;
}

.student-user > button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 6px;
  min-height: 34px;
  padding: 0 9px;
}

.student-content {
  margin: 0 auto;
  max-width: 1320px;
  padding: 31px clamp(18px, 5vw, 70px) 55px;
}

.student-live {
  align-items: center;
  background: var(--green-soft);
  border: 1px solid rgba(55, 217, 155, 0.16);
  border-radius: 999px;
  color: var(--green);
  display: flex;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 7px;
  padding: 8px 10px;
}

.password-banner {
  align-items: center;
  background: var(--orange-soft);
  border: 1px solid rgba(255, 182, 92, 0.18);
  border-radius: 10px;
  color: var(--orange);
  display: grid;
  gap: 10px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  margin-top: 17px;
  padding: 11px 13px;
}

.password-banner > div {
  display: grid;
}

.password-banner strong {
  color: var(--text);
  font-size: 0.72rem;
}

.password-banner span {
  color: #d3a56c;
  font-size: 0.72rem;
  margin-top: 3px;
}

.password-banner button {
  background: var(--orange);
  border: 0;
  border-radius: 7px;
  color: #2b1602;
  font-size: 0.72rem;
  font-weight: 780;
  min-height: 30px;
  padding: 0 9px;
}

.student-kpis {
  margin-top: 18px;
}

.student-section-heading {
  margin: 29px 0 12px;
}

.student-section-heading h2 {
  font-size: 0.91rem;
}

.student-section-heading p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 4px;
}

.student-assignment-list {
  display: grid;
  gap: 11px;
}

.student-assignment-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  overflow: hidden;
}

.student-assignment-index {
  align-items: center;
  background:
    linear-gradient(180deg, rgba(53, 211, 255, 0.08), transparent),
    rgba(255, 255, 255, 0.018);
  border-right: 1px solid var(--line);
  color: var(--cyan);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.student-assignment-index span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.student-assignment-index strong {
  font-size: 1.18rem;
  margin-top: 2px;
}

.student-assignment-main {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.student-assignment-title {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.student-assignment-title h3 {
  font-size: 0.79rem;
}

.student-assignment-title p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 4px;
}

.student-assignment-info {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  gap: 13px;
}

.student-assignment-info span,
.student-assignment-info strong {
  align-items: center;
  display: flex;
  gap: 5px;
}

.student-assignment-info strong {
  color: var(--cyan);
  margin-left: auto;
}

.instructions-box,
.feedback-box {
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
  padding: 8px 10px;
}

.instructions-box strong,
.feedback-box strong {
  color: var(--text);
}

.submitted-file {
  align-items: center;
  background: var(--green-soft);
  border: 1px solid rgba(55, 217, 155, 0.14);
  border-radius: 9px;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.submitted-file > span {
  align-items: center;
  background: rgba(55, 217, 155, 0.12);
  border-radius: 8px;
  color: var(--green);
  display: flex;
  height: 34px;
  justify-content: center;
}

.submitted-file > div {
  display: grid;
  min-width: 0;
}

.submitted-file strong {
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submitted-file small {
  color: #70b69d;
  font-size: 0.72rem;
  margin-top: 3px;
}

.submitted-file button {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(55, 217, 155, 0.22);
  border-radius: 7px;
  color: var(--green);
  display: flex;
  font-size: 0.72rem;
  gap: 5px;
  min-height: 31px;
  padding: 0 8px;
}

.student-upload {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.student-upload > label {
  align-items: center;
  background: rgba(53, 211, 255, 0.025);
  border: 1px dashed rgba(53, 211, 255, 0.25);
  border-radius: 8px;
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  font-size: 0.72rem;
  gap: 8px;
  min-height: 39px;
  padding: 0 10px;
}

.student-upload > label span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-upload input {
  display: none;
}

.feedback-box {
  border-color: var(--violet);
}

.feedback-box p {
  margin-top: 4px;
}

.student-empty {
  align-items: center;
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 240px;
  text-align: center;
}

.student-empty svg {
  color: var(--cyan);
}

.student-empty strong {
  color: var(--text);
  font-size: 0.72rem;
}

.student-empty span {
  font-size: 0.72rem;
}

/* Preview and grading */
.preview-backdrop {
  display: flex;
  justify-content: center;
  padding: 14px;
  z-index: 90;
}

.submission-preview {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - 28px);
  max-width: 1400px;
  overflow: hidden;
  width: 100%;
}

.submission-preview-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 68px;
  padding: 11px 14px;
}

.submission-preview-header > div {
  align-items: center;
  display: flex;
  gap: 9px;
}

.file-badge {
  align-items: center;
  background: var(--cyan-soft);
  border-radius: 9px;
  color: var(--cyan);
  display: flex;
  height: 39px;
  justify-content: center;
  width: 39px;
}

.submission-preview-header h2 {
  font-size: 0.75rem;
  max-width: 48vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-preview-header p {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 4px;
}

.submission-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  min-height: 0;
}

.submission-preview-grid.student-only {
  grid-template-columns: 1fr;
}

.document-stage {
  background: #dfe7ee;
  min-height: 0;
  overflow: auto;
  padding: 13px;
}

.document-stage iframe {
  background: white;
  border: 0;
  border-radius: 7px;
  height: 100%;
  min-height: 600px;
  width: 100%;
}

.pdf-document {
  background: #fff;
  border: 0;
  border-radius: 7px;
  display: block;
  height: 100%;
  min-height: 600px;
  width: 100%;
}

.pdf-document > iframe { min-height: 600px; }

.presentation-document-stage {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1120px;
}

.presentation-document-stage > section {
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #fff, #f7faff);
  border: 1px solid #cfdbea;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(31, 56, 92, .14);
  color: #24364e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 260px;
  padding: clamp(24px, 5vw, 62px);
}

.presentation-document-stage > section > span { color: #2563eb; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.presentation-document-stage h3 { color: #172033; font-size: clamp(1.3rem, 3vw, 2.2rem); margin: 12px 0 18px; }
.presentation-document-stage p { font-size: clamp(.88rem, 1.6vw, 1.08rem); line-height: 1.65; margin: 3px 0; }

.document-stage > img {
  background: white;
  border-radius: 7px;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

.document-stage > video {
  background: #07111f;
  border-radius: 7px;
  display: block;
  height: 100%;
  margin: 0 auto;
  max-height: calc(100vh - 125px);
  max-width: 100%;
  width: 100%;
}

.docx-document-stage {
  min-height: 100%;
  overflow: auto;
}

.docx-document-stage .docx-wrapper {
  background: #cfd8e1;
  min-height: 100%;
  padding: 28px !important;
}

.docx-document-stage .docx-wrapper > section {
  box-shadow: 0 5px 22px rgba(27, 46, 65, 0.2);
  margin-bottom: 20px;
}

.spreadsheet-document-stage {
  background: white;
  border-radius: 7px;
  color: #243448;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 560px;
  overflow: hidden;
}

.sheet-tabs {
  background: #e7edf2;
  border-bottom: 1px solid #c8d3dd;
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 7px 9px 0;
}

.sheet-tabs button {
  background: #d8e1e9;
  border: 1px solid #c4d0da;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  color: #52687b;
  font-size: 0.72rem;
  padding: 7px 12px;
  white-space: nowrap;
}

.sheet-tabs button.active {
  background: white;
  color: #087f8c;
  font-weight: 800;
}

.sheet-table-wrap {
  overflow: auto;
}

.sheet-table-wrap table {
  border-collapse: collapse;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  min-width: 100%;
}

.sheet-table-wrap th {
  background: #edf2f6;
  color: #718191;
  font-weight: 500;
  left: 0;
  min-width: 42px;
  position: sticky;
  text-align: center;
}

.sheet-table-wrap th,
.sheet-table-wrap td {
  border: 1px solid #d6dee6;
  height: 27px;
  max-width: 360px;
  min-width: 90px;
  padding: 5px 7px;
  vertical-align: top;
  white-space: pre-wrap;
}

.audio-document-stage {
  align-items: center;
  color: #50677a;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 100%;
  justify-content: center;
}

.audio-document-stage audio {
  max-width: 520px;
  width: 80%;
}

.document-text {
  background: white;
  border-radius: 7px;
  color: #243448;
  font-family: "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  min-height: 100%;
  max-width: 850px;
  padding: 50px 60px;
  white-space: pre-wrap;
}

.document-loading {
  align-items: center;
  color: #64778a;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  justify-content: center;
  text-align: center;
}

.document-loading.error {
  color: #b74754;
}

.document-loading strong {
  font-size: 0.73rem;
}

.document-loading span {
  font-size: 0.72rem;
}

.grading-sidebar {
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow: auto;
  padding: 16px;
}

.grading-heading {
  align-items: flex-start;
  display: flex;
  gap: 9px;
}

.grading-heading > span {
  align-items: center;
  background: var(--violet-soft);
  border-radius: 9px;
  color: var(--violet);
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.grading-heading h3 {
  font-size: 0.72rem;
}

.grading-heading p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
  margin-top: 4px;
}

.grading-sidebar form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.score-input {
  align-items: center;
  display: flex;
  gap: 8px;
}

.score-input input {
  font-size: 1.15rem;
  font-weight: 850;
  text-align: center;
  width: 90px;
}

.score-input strong {
  color: var(--muted);
  font-size: 0.72rem;
}

/* Projection */
.projection-shell {
  background:
    radial-gradient(circle at 40% -20%, rgba(53, 211, 255, 0.08), transparent 40%),
    var(--bg);
  height: 100vh;
  overflow: hidden;
  padding: 0 18px;
}

.projection-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 62px;
  justify-content: space-between;
}

.projection-brand > span {
  height: 38px;
  width: 38px;
}

.projection-brand strong {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.projection-status {
  align-items: center;
  display: flex;
  gap: 13px;
}

.projection-status > strong {
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
}

.exit-projection {
  align-items: center;
  background: rgba(7, 17, 31, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  bottom: 12px;
  color: var(--muted);
  display: flex;
  font-size: 0.72rem;
  gap: 6px;
  min-height: 32px;
  padding: 0 9px;
  position: fixed;
  right: 14px;
  z-index: 50;
}

@media (max-width: 1150px) {
  .assignments-cards,
  .class-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .health-panel,
  .trend-panel,
  .grade-panel {
    grid-column: span 6;
  }

  .risk-panel {
    grid-column: span 6;
  }

  .delivery-panel {
    grid-column: span 12;
  }

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

  .live-feed-panel {
    grid-column: auto;
  }

  .matrix-panel {
    grid-column: auto;
  }

  .summary-strip {
    flex-wrap: wrap;
  }

  .table-search {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-story {
    display: none;
  }

  .admin-shell {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .sidebar-brand > div,
  .sidebar nav button span,
  .sidebar nav button small,
  .sidebar-user > div,
  .sidebar-user > button {
    display: none;
  }

  .sidebar nav button {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .sidebar-user {
    grid-template-columns: 1fr;
    justify-items: center;
  }

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

  .student-user > div,
  .student-user > button:first-of-type {
    display: none;
  }

  .submission-preview-grid {
    grid-template-columns: 1fr;
  }

  .grading-sidebar {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .class-admin-layout {
    grid-template-columns: 1fr;
  }

  .class-admin-list {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }
}

@media (max-width: 680px) {
  .admin-header,
  .admin-content {
    padding-inline: 13px;
  }

  .admin-header .live-badge,
  .last-update,
  .admin-header .outline-button {
    display: none;
  }

  .page-title-row,
  .management-heading,
  .student-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .monitor-clock {
    display: none;
  }

  .kpi-grid,
  .student-kpis,
  .assignments-cards,
  .class-card-grid {
    grid-template-columns: 1fr;
  }

  .analytics-board {
    grid-template-columns: 1fr;
  }

  .health-panel,
  .trend-panel,
  .grade-panel,
  .risk-panel,
  .delivery-panel {
    grid-column: auto;
  }

  .gauge-grid {
    gap: 5px;
    padding-inline: 9px;
  }

  .gauge-ring {
    height: 60px;
    width: 60px;
  }

  .workflow-preview,
  .report-preview,
  .report-options {
    grid-template-columns: 1fr;
  }

  .heading-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .kpi-card {
    min-height: 86px;
  }

  .form-row.two,
  .form-row.three,
  .student-selector {
    grid-template-columns: 1fr;
  }

  .audience-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .summary-strip {
    align-items: flex-start;
  }

  .table-search {
    width: 100%;
  }

  .table-search input {
    width: 100%;
  }

  .management-table {
    min-width: 780px;
  }

  .student-header {
    padding-inline: 13px;
  }

  .student-user > button {
    font-size: 0;
    padding: 0 8px;
  }

  .student-assignment-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .student-upload {
    grid-template-columns: 1fr;
  }

  .student-assignment-info {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .student-assignment-info strong {
    margin-left: 0;
  }

  .submitted-file {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .submitted-file button {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .credentials-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .document-text {
    padding: 26px 22px;
  }
}

/* E-learning upgrade */
body {
  font-size: 17px;
}

.page-title-row p,
.management-heading p,
.student-hero p {
  font-size: 0.94rem;
}

.sidebar nav button {
  font-size: 0.9rem;
}

.panel-heading h2 {
  font-size: 1rem;
}

.panel-heading p {
  font-size: 0.74rem;
}

.management-table {
  font-size: 0.8rem;
}

.management-table th {
  font-size: 0.72rem;
}

.person-cell strong,
.file-name-cell strong {
  font-size: 0.8rem;
}

.person-cell span,
.file-name-cell span {
  font-size: 0.72rem;
}

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

.activity-type-picker > button {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d8e2ed;
  border-radius: 13px;
  color: #52647b;
  display: flex;
  gap: 12px;
  min-height: 78px;
  padding: 14px 16px;
  text-align: left;
}

.activity-type-picker > button > span {
  display: grid;
  gap: 4px;
}

.activity-type-picker strong {
  color: #1e2b3d;
  font-size: 0.86rem;
}

.activity-type-picker small {
  color: #6b7c90;
  font-size: 0.72rem;
}

.activity-type-picker > button.active {
  background: #eef5ff;
  border-color: #89ade5;
  box-shadow: inset 0 0 0 1px #c4d8f7;
  color: #1d4ed8;
}

.quiz-rule-note {
  align-items: center;
  align-self: end;
  background: #edf9f4;
  border: 1px solid #c7eadc;
  border-radius: 10px;
  color: #087f5b;
  display: flex;
  font-size: 0.73rem;
  gap: 9px;
  min-height: 47px;
  padding: 9px 12px;
}

.assignment-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.activity-badge {
  align-items: center;
  background: #eaf2ff;
  border: 1px solid #c8dcfb;
  border-radius: 999px;
  color: #1d4ed8;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 5px;
  padding: 5px 8px;
  width: fit-content;
}

.student-topic-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #cbdcf7;
  border-radius: 999px;
  background: #f4f8ff;
  color: #315a96;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}

.activity-badge.quiz {
  background: #f0eafe;
  border-color: #d9c8fb;
  color: #6d28d9;
}

.status-pill.in_progress {
  background: #fff7e8;
  color: #b35d00;
}

.status-pill.submitted {
  background: #eef5ff;
  color: #1d4ed8;
}

.status-pill.graded {
  background: #e8f8f2;
  color: #087f5b;
}

.submission-mode-tabs {
  background: #eaf0f6;
  border: 1px solid #d8e2ed;
  border-radius: 12px;
  display: flex;
  gap: 6px;
  padding: 5px;
  width: fit-content;
}

.submission-mode-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #5e7085;
  display: flex;
  font-size: 0.8rem;
  font-weight: 750;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
}

.submission-mode-tabs button strong {
  align-items: center;
  background: #dce5ef;
  border-radius: 999px;
  display: flex;
  font-size: 0.72rem;
  height: 23px;
  justify-content: center;
  min-width: 23px;
  padding: 0 6px;
}

.submission-mode-tabs button.active {
  background: #ffffff;
  box-shadow: 0 3px 9px rgba(48, 68, 100, 0.1);
  color: #1d4ed8;
}

.grade-bulk-toolbar {
  align-items: center;
  background: #f7faff;
  border: 1px solid #d9e4f5;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
}

.grade-bulk-toolbar label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.grade-bulk-toolbar > strong {
  color: #64748b;
  font-size: 0.82rem;
  margin-right: auto;
}

.grade-bulk-toolbar .danger-action {
  border-color: #fecaca;
  color: #b91c1c;
}

.cell-subtitle {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  margin-top: 4px;
}

.section-manager-intro {
  align-items: center;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  color: #1e40af;
  display: flex;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
}

.assignment-section-list {
  display: grid;
  gap: 14px;
}

.assignment-section-card {
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  padding: 16px;
}

.assignment-section-card > header {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px 1fr auto;
  margin-bottom: 14px;
}

.assignment-section-card > header > span {
  align-items: center;
  background: #e8f0ff;
  border-radius: 12px;
  color: #1d4ed8;
  display: flex;
  font-weight: 800;
  height: 42px;
  justify-content: center;
}

.assignment-section-card > header div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.assignment-section-card > header small {
  color: var(--muted);
}

.assignment-section-card > header div:last-child,
.section-card-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.assignment-section-card > header button {
  align-items: center;
  background: #fff;
  border: 1px solid #d7e1ee;
  border-radius: 9px;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.section-editor-grid,
.section-add-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.8fr) minmax(130px, 0.6fr) minmax(180px, 0.8fr);
}

.section-card-actions {
  margin-top: 12px;
}

.section-card-actions .form-error {
  flex: 1;
  margin: 0;
}

.assignment-section-add {
  background: #fff;
  border: 1px dashed #93b4e8;
  border-radius: 18px;
  display: grid;
  gap: 13px;
  margin-top: 18px;
  padding: 18px;
}

.assignment-section-add > div:first-child {
  display: grid;
  gap: 4px;
}

.student-section-stack {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.student-response-section {
  background: #f8fbff;
  border: 1px solid #dbe7f6;
  border-radius: 16px;
  padding: 15px;
}

.student-response-section > header {
  align-items: center;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.student-response-section > header > span {
  align-items: center;
  background: #e8f0ff;
  border-radius: 10px;
  color: #2563eb;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.student-response-section > header div {
  display: grid;
  gap: 2px;
}

.student-response-section > header small,
.student-response-section > p {
  color: var(--muted);
}

.student-response-section > p {
  line-height: 1.6;
  margin: 0 0 10px;
}

.published-component-results {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
}

.published-component-results > strong {
  color: #166534;
}

.published-component-results > div {
  display: grid;
  gap: 8px;
}

.published-component-results article {
  align-items: center;
  background: #fff;
  border: 1px solid #dcfce7;
  border-radius: 11px;
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 1fr auto;
  padding: 10px 12px;
}

.published-component-results article > strong {
  color: #15803d;
}

.published-component-results article small {
  color: var(--muted);
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .section-editor-grid,
  .section-add-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .section-editor-grid,
  .section-add-grid {
    grid-template-columns: 1fr;
  }
}

.management-table .check-column {
  padding-left: 14px;
  padding-right: 5px;
  width: 38px;
}

/* Question authoring */
.modal.extra-wide {
  max-height: 94vh;
  max-width: 1500px;
  width: min(96vw, 1500px);
}

.question-builder-layout {
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  height: min(780px, calc(94vh - 78px));
  min-height: 560px;
}

.question-builder-layout.read-only {
  grid-template-columns: 420px minmax(0, 1fr);
}

.question-bank-panel {
  background: #f7f9fc;
  border-right: 1px solid #dce5ef;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.question-bank-heading {
  align-items: center;
  border-bottom: 1px solid #dce5ef;
  display: flex;
  justify-content: space-between;
  padding: 17px;
}

.question-bank-heading > div {
  display: grid;
  gap: 3px;
}

.question-bank-heading strong {
  color: #172033;
  font-size: 0.85rem;
}

.question-bank-heading span {
  color: #6b7c90;
  font-size: 0.72rem;
}

.question-bank-heading .primary-button {
  font-size: 0.74rem;
  min-height: 38px;
  padding-inline: 11px;
}

.question-bank-list {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.question-bank-list > button {
  align-items: center;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #172033;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  margin-bottom: 7px;
  padding: 11px;
  text-align: left;
  width: 100%;
}

.question-bank-list > button > span {
  align-items: center;
  background: #eaf2ff;
  border-radius: 9px;
  color: #1d4ed8;
  display: flex;
  font-size: 0.73rem;
  font-weight: 850;
  height: 34px;
  justify-content: center;
}

.question-bank-list > button > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.question-bank-list > button strong {
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-bank-list > button small {
  color: #6b7c90;
  font-size: 0.72rem;
}

.question-bank-list > button.active {
  border-color: #9fbee9;
  box-shadow: 0 4px 13px rgba(37, 99, 235, 0.1);
}

.page-loading.compact {
  min-height: 200px;
}

.question-editor {
  align-content: start;
  display: grid;
  gap: 17px;
  min-height: 0;
  overflow: auto;
  padding: 21px 23px;
}

.question-editor-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.question-editor-heading h3,
.question-readonly h3 {
  color: #172033;
  font-size: 1.3rem;
}

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

.question-type-grid button {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid #d8e2ed;
  border-radius: 10px;
  color: #52647b;
  display: flex;
  font-size: 0.77rem;
  font-weight: 750;
  gap: 8px;
  min-height: 45px;
  padding: 0 12px;
}

.question-type-grid button.active {
  background: #eef5ff;
  border-color: #89ade5;
  color: #1d4ed8;
}

.option-editor {
  background: #f7f9fc;
  border: 1px solid #dce5ef;
  border-radius: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.option-editor-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.option-editor-heading > div {
  display: grid;
  gap: 3px;
}

.option-editor-heading strong {
  color: #172033;
  font-size: 0.8rem;
}

.option-editor-heading span {
  color: #6b7c90;
  font-size: 0.72rem;
}

.option-editor-heading button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #1d4ed8;
  display: flex;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 5px;
}

.option-editor-row {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 20px 28px minmax(0, 1fr) 34px;
}

.option-editor-row > input:first-child {
  accent-color: #2563eb;
  height: 17px;
  width: 17px;
}

.option-editor-row > span {
  align-items: center;
  background: #eaf2ff;
  border-radius: 7px;
  color: #1d4ed8;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 28px;
  justify-content: center;
}

.option-editor-row > input:nth-child(3) {
  background: #ffffff;
  border: 1px solid #ccd8e6;
  border-radius: 9px;
  color: #172033;
  font-size: 0.78rem;
  height: 42px;
  padding: 0 11px;
}

.option-editor-row > button {
  align-items: center;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  color: #b42334;
  display: flex;
  height: 34px;
  justify-content: center;
}

.option-editor-row > button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.question-attachment-editor {
  background: #f7faff;
  border: 1px dashed #a9c4ec;
  border-radius: 12px;
  display: grid;
  gap: 11px;
  padding: 14px;
}

.question-attachment-editor > div:first-child,
.quiz-question-attachment > div,
.quiz-entry-panel > div,
.quiz-entry-panel > div > div,
.question-attachment-editor > div:first-child > span {
  align-items: center;
  display: flex;
}

.question-attachment-editor > div:first-child {
  color: #1d4ed8;
  gap: 9px;
}

.question-attachment-editor > div:first-child > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}

.question-attachment-editor strong {
  color: #172033;
  font-size: 0.77rem;
}

.question-attachment-editor small {
  color: #6b7c90;
  font-size: 0.72rem;
}

.question-attachment-editor > label {
  align-items: center;
  background: #ffffff;
  border: 1px solid #c7d7e9;
  border-radius: 9px;
  color: #1d4ed8;
  cursor: pointer;
  display: flex;
  font-size: 0.72rem;
  gap: 8px;
  min-height: 41px;
  padding: 0 11px;
}

.question-attachment-editor > label input {
  display: none;
}

.existing-attachment {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.existing-attachment button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #1d4ed8;
  display: flex;
  font-size: 0.72rem;
  gap: 6px;
}

.question-readonly {
  align-content: start;
  display: grid;
  gap: 18px;
  padding: 28px;
}

.question-number-label {
  color: #1d4ed8;
  font-size: 0.74rem;
  font-weight: 800;
}

/* Review and grading */
.quiz-review-summary {
  background: #f7f9fc;
  border-bottom: 1px solid #dce5ef;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 19px;
}

.quiz-review-summary > span {
  border-right: 1px solid #dce5ef;
  color: #6b7c90;
  display: grid;
  font-size: 0.72rem;
  gap: 3px;
  padding: 0 15px;
}

.quiz-review-summary > span:last-child {
  border-right: 0;
}

.quiz-review-summary strong {
  color: #172033;
  font-size: 0.82rem;
}

.quiz-review-list {
  display: grid;
  gap: 14px;
  max-height: calc(94vh - 225px);
  overflow: auto;
  padding: 18px 20px;
}

.quiz-review-card {
  border: 1px solid #dce5ef;
  border-radius: 14px;
  padding: 17px;
}

.quiz-review-card > header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.quiz-review-card > header span {
  background: #eaf2ff;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 9px;
}

.quiz-review-card > header strong {
  color: #52647b;
  font-size: 0.72rem;
}

.quiz-review-card h3 {
  color: #172033;
  font-size: 1rem;
  line-height: 1.55;
  margin: 13px 0;
}

.attachment-link {
  align-items: center;
  background: #f2f7ff;
  border: 1px solid #d7e4f7;
  border-radius: 9px;
  color: #1d4ed8;
  display: flex;
  font-size: 0.72rem;
  gap: 7px;
  margin-bottom: 12px;
  min-height: 38px;
  padding: 0 10px;
}

.essay-response {
  background: #f8fafc;
  border-left: 4px solid #7c3aed;
  border-radius: 0 10px 10px 0;
  color: #26354a;
  font-size: 0.82rem;
  line-height: 1.7;
  min-height: 90px;
  padding: 13px 15px;
  white-space: pre-wrap;
}

.essay-grade-controls {
  align-items: end;
  background: #f7f9fc;
  border: 1px solid #dce5ef;
  border-radius: 11px;
  display: grid;
  gap: 12px;
  grid-template-columns: 150px minmax(260px, 1fr) auto;
  margin-top: 13px;
  padding: 13px;
}

.essay-grade-controls label {
  display: grid;
  gap: 6px;
}

.essay-grade-controls label > span {
  color: #52647b;
  font-size: 0.72rem;
  font-weight: 750;
}

.essay-grade-controls label > div {
  align-items: center;
  display: flex;
  gap: 7px;
}

.essay-grade-controls input,
.essay-grade-controls textarea {
  background: #ffffff;
  border: 1px solid #ccd8e6;
  border-radius: 8px;
  color: #172033;
  font: inherit;
  min-height: 42px;
  padding: 8px 10px;
  width: 100%;
}

.essay-grade-controls .form-error {
  grid-column: 1 / -1;
}

.essay-grade-readonly {
  background: #f7f9fc;
  border-radius: 9px;
  margin-top: 12px;
  padding: 12px;
}

.review-option-list {
  display: grid;
  gap: 8px;
}

.review-option-list > div:not(.automatic-score) {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  display: grid;
  gap: 9px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: 8px 11px;
}

.review-option-list > div.correct {
  background: #edf9f4;
  border-color: #bfe6d6;
}

.review-option-list > div.selected:not(.correct) {
  background: #fff1f2;
  border-color: #fecdd3;
}

.review-option-list strong {
  color: #26354a;
  font-size: 0.77rem;
}

.review-option-list small {
  color: #1d4ed8;
  font-size: 0.72rem;
}

.automatic-score {
  color: #52647b;
  font-size: 0.72rem;
  margin-top: 4px;
  text-align: right;
}

/* Student workspace */
.student-content {
  max-width: 1740px;
  min-height: calc(100vh - 78px);
  padding: 36px clamp(22px, 4vw, 68px) 60px;
}

.student-hero h1 {
  font-size: clamp(2.35rem, 3vw, 3.2rem);
}

.student-hero p {
  font-size: 1rem;
}

.student-kpis {
  gap: 17px;
  margin-top: 24px;
}

.student-kpis .kpi-card {
  min-height: 128px;
}

.student-kpis .kpi-card > div > span {
  font-size: 0.84rem;
}

.student-kpis .kpi-card small {
  font-size: 0.76rem;
}

.student-section-heading {
  margin: 34px 0 16px;
}

.student-section-heading h2 {
  font-size: 1.4rem;
}

.student-section-heading p {
  font-size: 0.84rem;
}

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

.student-assignment-card {
  align-self: start;
  grid-template-columns: 84px minmax(0, 1fr);
}

.student-assignment-main {
  gap: 15px;
  padding: 21px 23px;
}

.student-assignment-title h3 {
  font-size: 1.1rem;
  margin-top: 8px;
}

.student-assignment-title p {
  font-size: 0.8rem;
  line-height: 1.55;
}

.student-assignment-info,
.instructions-box,
.feedback-box {
  font-size: 0.78rem;
}

.instructions-box,
.feedback-box {
  line-height: 1.65;
  padding: 11px 13px;
}

.quiz-entry-panel {
  align-items: center;
  background: #f2f7ff;
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px;
}

.quiz-entry-panel > div {
  min-width: 0;
}

.quiz-entry-panel > div > span {
  align-items: center;
  background: #e3edfe;
  border-radius: 10px;
  color: #1d4ed8;
  display: flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.quiz-entry-panel > div > div {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  margin-left: 10px;
  min-width: 0;
}

.quiz-entry-panel strong {
  color: #1e2b3d;
  font-size: 0.78rem;
}

.quiz-entry-panel small {
  color: #617389;
  font-size: 0.72rem;
  line-height: 1.4;
}

/* Full-screen quiz player */
.quiz-player {
  background: #f3f7fc;
  display: grid;
  grid-template-rows: 84px minmax(0, 1fr);
  inset: 0;
  position: fixed;
  z-index: 120;
}

.quiz-player-header {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #d8e2ed;
  box-shadow: 0 4px 18px rgba(44, 62, 92, 0.06);
  display: flex;
  justify-content: space-between;
  padding: 0 27px;
}

.quiz-player-brand,
.quiz-player-status,
.quiz-player-status > span {
  align-items: center;
  display: flex;
}

.quiz-player-brand {
  gap: 12px;
  min-width: 0;
}

.quiz-player-brand > span {
  align-items: center;
  background: #eaf2ff;
  border-radius: 12px;
  color: #1d4ed8;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.quiz-player-brand > div {
  display: grid;
  min-width: 0;
}

.quiz-player-brand small {
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.quiz-player-brand h1 {
  color: #172033;
  font-size: 1.2rem;
  margin-top: 2px;
  max-width: 55vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quiz-player-status {
  gap: 12px;
}

.quiz-player-status > span {
  background: #f7f9fc;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  color: #52647b;
  font-size: 0.76rem;
  gap: 7px;
  min-height: 39px;
  padding: 0 11px;
}

.quiz-player-status > span.saving {
  color: #1d4ed8;
}

.quiz-player-status > span.quiz-countdown {
  background: #eef8f5;
  border-color: #b8e1d4;
  color: #087f68;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.quiz-player-status > span.quiz-countdown.warning {
  animation: quiz-timer-pulse 1.2s ease-in-out infinite;
  background: #fff3eb;
  border-color: #ffc6a3;
  color: #c2410c;
}

@keyframes quiz-timer-pulse {
  50% {
    box-shadow: 0 0 0 4px rgb(234 88 12 / 10%);
  }
}

.quiz-player-status > button {
  align-items: center;
  background: #f5f8fc;
  border: 1px solid #d8e2ed;
  border-radius: 9px;
  color: #52647b;
  display: flex;
  height: 41px;
  justify-content: center;
  width: 41px;
}

.quiz-player-loading {
  align-items: center;
  color: #617389;
  display: flex;
  flex-direction: column;
  gap: 13px;
  justify-content: center;
  text-align: center;
}

.quiz-player-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 0;
}

.quiz-question-area {
  min-height: 0;
  overflow: auto;
  padding: 24px clamp(24px, 4vw, 64px) 32px;
}

.quiz-progress-header {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(180px, 1fr);
  margin: 0 auto 18px;
  max-width: 1050px;
}

.quiz-progress-header > div:first-child {
  display: grid;
  gap: 2px;
}

.quiz-progress-header span {
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
}

.quiz-progress-header strong {
  color: #52647b;
  font-size: 0.74rem;
}

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

.quiz-progress-track i {
  background: linear-gradient(90deg, #2563eb, #0f9f6e);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 180ms ease;
}

.quiz-submitted-banner {
  align-items: center;
  background: #edf9f4;
  border: 1px solid #bfe6d6;
  border-radius: 12px;
  color: #087f5b;
  display: flex;
  gap: 11px;
  margin: 0 auto 16px;
  max-width: 1050px;
  padding: 12px 14px;
}

.quiz-submitted-banner > div {
  display: grid;
  gap: 2px;
}

.quiz-submitted-banner strong {
  color: #14533f;
  font-size: 0.84rem;
}

.quiz-submitted-banner span {
  font-size: 0.72rem;
}

.quiz-question-card {
  background: #ffffff;
  border: 1px solid #d8e2ed;
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(48, 68, 100, 0.08);
  margin: 0 auto;
  max-width: 1050px;
  min-height: 420px;
  padding: clamp(24px, 3vw, 38px);
}

.quiz-question-card.missing {
  border-color: #ef9aa5;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.09);
}

.quiz-question-meta {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.quiz-question-meta span {
  background: #eaf2ff;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 6px 10px;
}

.quiz-question-meta strong {
  color: #52647b;
  font-size: 0.78rem;
}

.quiz-question-card h2 {
  color: #14213a;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.5;
  margin: 22px 0 9px;
}

.required-note {
  color: #b42334;
  font-size: 0.72rem;
}

.quiz-question-attachment {
  align-items: center;
  background: #f7faff;
  border: 1px solid #d7e4f7;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  margin: 19px 0;
  padding: 12px 13px;
}

.quiz-question-attachment > div:first-child {
  color: #1d4ed8;
  gap: 9px;
}

.quiz-question-attachment > div:first-child > span {
  display: grid;
  gap: 2px;
}

.quiz-question-attachment strong {
  color: #26354a;
  font-size: 0.77rem;
}

.quiz-question-attachment small {
  color: #6b7c90;
  font-size: 0.72rem;
}

.quiz-question-attachment > div:last-child {
  gap: 7px;
}

.quiz-question-attachment .outline-button {
  font-size: 0.72rem;
  min-height: 38px;
  padding-inline: 10px;
}

.quiz-option-list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.quiz-option-list label {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d8e2ed;
  border-radius: 12px;
  color: #26354a;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 20px 38px minmax(0, 1fr);
  min-height: 64px;
  padding: 10px 15px;
  transition:
    border-color 120ms ease,
    background 120ms ease;
}

.quiz-option-list label:hover {
  background: #f2f7ff;
  border-color: #9fbee9;
}

.quiz-option-list label.selected {
  background: #eaf2ff;
  border-color: #76a0e2;
  box-shadow: inset 0 0 0 1px #bed4f6;
}

.quiz-option-list input {
  accent-color: #2563eb;
  height: 18px;
  width: 18px;
}

.quiz-option-list label > span {
  align-items: center;
  background: #e5ecf5;
  border-radius: 9px;
  color: #52647b;
  display: flex;
  font-size: 0.82rem;
  font-weight: 850;
  height: 38px;
  justify-content: center;
}

.quiz-option-list label.selected > span {
  background: #2563eb;
  color: #ffffff;
}

.quiz-option-list strong {
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.5;
}

.quiz-essay-answer {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.quiz-essay-answer > span {
  color: #3c4c61;
  font-size: 0.8rem;
  font-weight: 750;
}

.quiz-essay-answer textarea {
  background: #fbfcfe;
  border: 1px solid #c8d5e3;
  border-radius: 12px;
  color: #172033;
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.7;
  min-height: 230px;
  padding: 15px;
  resize: vertical;
}

.quiz-essay-answer textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: 0;
}

.quiz-essay-answer > small {
  color: #6b7c90;
  font-size: 0.72rem;
  text-align: right;
}

.flag-question-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #6b7c90;
  display: flex;
  font-size: 0.73rem;
  font-weight: 700;
  gap: 7px;
  margin-top: 19px;
  padding: 7px 0;
}

.flag-question-button.active {
  color: #d97706;
}

.quiz-question-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 18px auto 0;
  max-width: 1050px;
}

.quiz-error {
  margin: 14px auto 0;
  max-width: 1050px;
}

.quiz-navigator {
  background: #ffffff;
  border-left: 1px solid #d8e2ed;
  min-height: 0;
  overflow: auto;
  padding: 24px 20px;
}

.quiz-navigator-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.quiz-navigator-heading > div {
  display: grid;
  gap: 3px;
}

.quiz-navigator-heading strong {
  color: #172033;
  font-size: 0.88rem;
}

.quiz-navigator-heading span {
  color: #6b7c90;
  font-size: 0.72rem;
}

.quiz-navigator-heading > span {
  align-items: center;
  background: #eaf2ff;
  border-radius: 999px;
  color: #1d4ed8;
  display: flex;
  font-weight: 800;
  min-height: 31px;
  padding: 0 10px;
}

.quiz-question-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 20px;
}

.quiz-question-grid button {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 9px;
  color: #52647b;
  display: flex;
  font-size: 0.78rem;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  position: relative;
}

.quiz-question-grid button.answered {
  background: #e8f8f2;
  border-color: #a9ddc9;
  color: #087f5b;
}

.quiz-question-grid button.current {
  background: #2563eb;
  border-color: #1d4ed8;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.22);
  color: #ffffff;
}

.quiz-question-grid button.flagged {
  box-shadow: inset 0 -3px 0 #f59e0b;
}

.quiz-question-grid button.missing {
  border-color: #e66a79;
  color: #b42334;
}

.quiz-question-grid button svg {
  position: absolute;
  right: 3px;
  top: 3px;
}

.quiz-navigator-legend {
  border-top: 1px solid #e3eaf2;
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  padding-top: 17px;
}

.quiz-navigator-legend span {
  align-items: center;
  color: #617389;
  display: flex;
  font-size: 0.72rem;
  gap: 6px;
}

.quiz-navigator-legend span::before {
  background: #f7f9fc;
  border: 1px solid #d6e0eb;
  border-radius: 4px;
  content: "";
  height: 13px;
  width: 13px;
}

.quiz-navigator-legend span.answered::before {
  background: #e8f8f2;
  border-color: #a9ddc9;
}

.quiz-navigator-legend span.current::before {
  background: #2563eb;
  border-color: #1d4ed8;
}

.quiz-navigator-legend span.flagged::before {
  background: #fff7e8;
  border-color: #f1c77d;
}

.quiz-navigator-legend span.missing::before {
  background: #fff1f2;
  border-color: #e66a79;
}

.submit-quiz-button {
  align-items: center;
  background: linear-gradient(135deg, #0f9f6e, #087f5b);
  border: 0;
  border-radius: 11px;
  color: #ffffff;
  display: flex;
  font-size: 0.82rem;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
  min-height: 47px;
  width: 100%;
}

.attachment-preview {
  grid-template-rows: auto minmax(0, 1fr);
  max-width: 1450px;
}

.question-file-backdrop {
  z-index: 145;
}

.attachment-preview > .document-stage {
  min-height: 0;
}

/* Leadership IOC readability */
.projection-brand strong {
  font-size: 0.84rem;
}

@media (max-width: 1380px) {
  .student-assignment-list {
    grid-template-columns: 1fr;
  }

  .quiz-player-body {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}

@media (max-width: 1050px) {
  .question-builder-layout,
  .question-builder-layout.read-only {
    grid-template-columns: 320px minmax(0, 1fr);
  }

  .quiz-player-body {
    display: block;
    overflow: auto;
  }

  .quiz-question-area {
    overflow: visible;
  }

  .quiz-navigator {
    border-left: 0;
    border-top: 1px solid #d8e2ed;
  }

  .quiz-question-grid {
    grid-template-columns: repeat(10, minmax(38px, 1fr));
  }

  .essay-grade-controls {
    grid-template-columns: 130px minmax(220px, 1fr);
  }

  .essay-grade-controls > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .activity-type-picker,
  .quiz-review-summary {
    grid-template-columns: 1fr;
  }

  .question-builder-layout,
  .question-builder-layout.read-only {
    display: block;
    height: auto;
    max-height: calc(94vh - 78px);
    overflow: auto;
  }

  .question-bank-panel {
    border-bottom: 1px solid #dce5ef;
    border-right: 0;
    max-height: 300px;
  }

  .question-editor {
    overflow: visible;
  }

  .question-type-grid {
    grid-template-columns: 1fr;
  }

  .student-content {
    padding-inline: 14px;
  }

  .student-assignment-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .student-assignment-main {
    padding: 16px;
  }

  .quiz-entry-panel,
  .quiz-question-attachment {
    align-items: stretch;
    flex-direction: column;
  }

  .quiz-entry-panel .primary-button {
    width: 100%;
  }

  .quiz-player {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .quiz-player-header {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }

  .quiz-player-status > span {
    display: none;
  }

  .quiz-player-status > span.quiz-countdown {
    display: flex;
  }

  .quiz-player-brand h1 {
    font-size: 0.96rem;
    max-width: 65vw;
  }

  .quiz-question-area {
    padding: 16px 12px 24px;
  }

  .quiz-progress-header {
    grid-template-columns: 1fr;
  }

  .quiz-question-card {
    border-radius: 14px;
    min-height: 0;
    padding: 20px 16px;
  }

  .quiz-question-card h2 {
    font-size: 1.25rem;
  }

  .quiz-option-list label {
    grid-template-columns: 20px 34px minmax(0, 1fr);
    min-height: 58px;
    padding-inline: 11px;
  }

  .quiz-question-actions {
    flex-wrap: wrap;
  }

  .quiz-question-actions > button {
    flex: 1 1 130px;
  }

  .quiz-question-grid {
    grid-template-columns: repeat(5, minmax(38px, 1fr));
  }

  .essay-grade-controls {
    grid-template-columns: 1fr;
  }

  .essay-grade-controls > button {
    grid-column: auto;
  }
}

/* IOC E-Learning: privacy, attendance, timed questions and projection */
.ioc-command-header {
  grid-template-columns: minmax(360px, 1fr) minmax(220px, 280px) 210px auto;
}

.sensitive-toggle {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 172px;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.sensitive-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.analytics-board > .risk-panel:first-child {
  grid-column: span 5;
}

.auth-copy .auth-intro {
  max-width: 570px;
  margin: 16px 0 24px;
  color: #526885;
  font-size: 17px;
  line-height: 1.65;
}

.auth-copy > h1 {
  max-width: 650px;
  font-size: clamp(64px, 6.2vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.07em;
}

.import-template-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid #c9d9f3;
  border-radius: 15px;
  background: linear-gradient(135deg, #f5f8ff, #eef8f7);
}

.import-template-callout > div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2f6fed;
}

.import-template-callout span {
  display: grid;
  gap: 3px;
}

.import-template-callout strong {
  color: #182b47;
}

.import-template-callout small {
  color: #647891;
  line-height: 1.4;
}

.student-attendance-card {
  margin-bottom: 20px;
  border: 1px solid #d8e2ef;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(30, 64, 111, 0.08);
}

.student-attendance-card.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 94px;
  color: #637792;
}

.student-attendance-card.pending {
  padding: 22px;
}

.attendance-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}

.attendance-card-heading h2,
.attendance-completed-copy h2 {
  margin: 6px 0 5px;
  color: #14243d;
  font-size: 21px;
  letter-spacing: -0.025em;
}

.attendance-card-heading p,
.attendance-completed-copy p {
  margin: 0;
  color: #647891;
  line-height: 1.5;
}

.attendance-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff3df;
  color: #b96509;
  font-size: 12px;
  font-weight: 800;
}

.attendance-profile-form {
  display: grid;
  grid-template-columns: 0.72fr 1.25fr 0.9fr 1fr 1.3fr auto;
  align-items: end;
  gap: 12px;
}

.attendance-profile-form .field {
  min-width: 0;
}

.attendance-profile-form input {
  min-width: 0;
}

.attendance-submit {
  min-height: 46px;
  white-space: nowrap;
}

.student-attendance-card.completed {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) minmax(460px, 1.35fr);
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-color: #b8e7d8;
  background: linear-gradient(120deg, #f0fbf7 0%, #ffffff 55%);
}

.attendance-status-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #dff7ee;
  color: #06966d;
}

.attendance-confirmed-profile {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr 1.4fr;
  gap: 8px;
}

.attendance-confirmed-profile > span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #d8ebe4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}

.attendance-confirmed-profile small {
  color: #708299;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.attendance-confirmed-profile strong {
  overflow: hidden;
  color: #19364a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.question-required-field {
  margin: -2px 0 2px;
}

.quiz-question-countdown {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #bfd7ff;
  border-radius: 13px;
  background: #eef5ff;
  color: #2f6fed;
}

.quiz-question-countdown > div {
  display: grid;
  gap: 1px;
}

.quiz-question-countdown small {
  color: #6680a3;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quiz-question-countdown strong {
  font-size: 16px;
}

.quiz-question-countdown > span {
  justify-self: end;
  color: #526985;
  font-size: 12px;
}

.quiz-question-countdown.warning {
  border-color: #f4c7bd;
  background: #fff1ee;
  color: #cf3f31;
}

.quiz-question-card.timed-out {
  border-color: #edc0b8;
  background: #fffdfc;
}

.quiz-question-grid button.timed-out {
  border-color: #dd776b;
  background: #fff0ed;
  color: #b73529;
}

.quiz-navigator-legend .timed-out::before {
  background: #dd776b;
}

.projection-modern {
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 0%, rgba(47, 111, 237, 0.14), transparent 30%),
    #edf3fa;
  color: #14243d;
}

.projection-modern .projection-header {
  height: 72px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(130, 153, 184, 0.26);
  background: rgba(248, 251, 255, 0.92);
  backdrop-filter: blur(18px);
}

.projection-modern .projection-brand > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(145deg, #2f6fed, #1e52c8);
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 111, 237, 0.25);
}

.projection-modern .projection-brand strong {
  color: #12233f;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.projection-modern .projection-brand small {
  margin-top: 2px;
  color: #6b7e98;
  font-size: 11px;
}

.projection-modern .projection-status {
  gap: 11px;
}

.projection-modern .projection-status > strong {
  min-width: 75px;
  color: #12233f;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.projection-exit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #ccdaeb;
  border-radius: 11px;
  background: #fff;
  color: #314965;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.projection-exit-button {
  border-color: #ecd2cf;
  color: #b73d34;
}

@media (max-width: 1450px) {
  .ioc-command-header {
    grid-template-columns: minmax(320px, 1fr) 230px 190px;
  }

  .sensitive-toggle {
    grid-column: 2 / 4;
    min-height: 42px;
  }

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

  .attendance-submit {
    min-height: 44px;
  }

  .student-attendance-card.completed {
    grid-template-columns: auto 1fr;
  }

  .attendance-confirmed-profile {
    grid-column: 1 / -1;
  }
}

@media (max-height: 820px) {
  .projection-modern .projection-header {
    height: 62px;
  }
}

@media (max-width: 820px) {
  .import-template-callout,
  .attendance-card-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-profile-form,
  .attendance-confirmed-profile {
    grid-template-columns: 1fr;
  }

  .student-attendance-card.completed {
    grid-template-columns: 1fr;
  }

  .attendance-status-icon {
    width: 48px;
    height: 48px;
  }

  .auth-copy > h1 {
    font-size: 56px;
  }

  .sensitive-toggle {
    grid-column: auto;
  }
}

/* Dashboard IOC: donut, line, column và thanh xếp hạng theo đặc tả. */
.dashboard-donut-panel { border-top: 4px solid #2563eb; }
.dashboard-donut-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px; }
.dashboard-donut-card { align-items: center; background: #f7faff; border: 1px solid #e0e8f2; border-radius: 14px; display: grid; gap: 14px; grid-template-columns: 108px minmax(0, 1fr); padding: 14px; }
.dashboard-donut {
  align-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  position: relative;
}
.dashboard-donut::after { background: #fff; border-radius: 50%; content: ""; inset: 13px; position: absolute; }
.dashboard-donut.attendance { background: conic-gradient(#10b981 0 var(--attendance-deg), #dbe5f0 var(--attendance-deg) 360deg); }
.dashboard-donut.submissions { background: conic-gradient(#10b981 0 var(--ontime-deg), #f59e0b var(--ontime-deg) calc(var(--ontime-deg) + var(--late-deg)), #dbe5f0 calc(var(--ontime-deg) + var(--late-deg)) 360deg); }
.dashboard-donut strong { color: #172033; font-size: 1.25rem; position: relative; z-index: 1; }
.dashboard-donut-card > div:last-child { display: grid; gap: 6px; }
.dashboard-donut-card > div:last-child > strong { color: #172033; font-size: .9rem; margin-bottom: 2px; }
.dashboard-donut-card span { align-items: center; color: #63758c; display: flex; font-size: .72rem; gap: 7px; }
.dashboard-donut-card span i { border-radius: 50%; height: 8px; width: 8px; }
.dashboard-donut-card span i.done { background: #10b981; }
.dashboard-donut-card span i.late { background: #f59e0b; }
.dashboard-donut-card span i.missing { background: #dbe5f0; }

.dashboard-line-chart { display: grid; gap: 4px; padding: 14px 18px 18px; }
.dashboard-line-chart svg { height: 160px; overflow: visible; width: 100%; }
.dashboard-line-chart > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dashboard-line-chart > div span { align-items: center; color: #73849a; display: grid; font-size: .68rem; gap: 2px; justify-items: center; }
.dashboard-line-chart > div strong { color: #2f6fed; font-size: .78rem; }

.assignment-average-panel { border-top: 4px solid #8b5cf6; }
.average-column-chart { align-items: end; display: grid; gap: 10px; grid-auto-flow: column; grid-auto-columns: minmax(42px, 1fr); height: 230px; overflow-x: auto; padding: 22px 18px 16px; }
.average-column-chart > div { align-items: center; display: grid; grid-template-rows: 24px minmax(0, 1fr) 22px; height: 100%; justify-items: center; }
.average-column-chart > div > span { color: #6d4ad1; font-size: .7rem; font-weight: 800; }
.average-column-chart > div > i { align-self: end; background: linear-gradient(180deg, #8b5cf6, #c4b5fd); border-radius: 7px 7px 3px 3px; max-width: 46px; min-height: 4px; width: 72%; }
.average-column-chart > div > small { color: #667891; font-weight: 700; }

.leader-row > div { position: relative; }
.leader-score-bar { background: linear-gradient(90deg, #2f6fed, #7ba7ff); border-radius: 2px; display: block; height: 3px; margin-top: 6px; max-width: 100%; min-width: 2px; }
.grade-history-list { display: grid; gap: 0; padding: 0 20px 20px; }
.grade-history-list article { align-items: center; border-bottom: 1px solid #e4ebf3; display: grid; gap: 12px; grid-template-columns: 110px minmax(0, 1fr) auto; padding: 14px 0; }
.grade-history-list article > div { display: grid; gap: 3px; }
.grade-history-list small,
.grade-history-list time { color: #718096; font-size: .72rem; }

@media (max-width: 760px) {
  .dashboard-donut-grid { grid-template-columns: 1fr; }
  .dashboard-donut-card { grid-template-columns: 92px minmax(0, 1fr); }
}

/* Layout dùng chung, cấu hình hệ thống và điều hướng quản trị responsive. */
.admin-main,
.student-workspace {
  min-height: 100vh;
}

.shared-footer {
  align-items: flex-start;
  background: #fff;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  margin-top: auto;
  padding: 22px clamp(18px, 3vw, 42px);
}

.shared-footer-main,
.shared-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.shared-footer-main {
  flex-direction: column;
}

.shared-footer-main strong { color: var(--text); }
.shared-footer a,
.shared-footer span { align-items: center; color: inherit; display: inline-flex; gap: 6px; text-decoration: none; }
.shared-footer p { margin: 0; max-width: 760px; }

.quick-attendance-shell {
  background: radial-gradient(circle at 15% 10%, rgba(37,99,235,.13), transparent 34%), var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.quick-attendance-brand { align-items: center; display: flex; gap: 12px; margin: 0 auto; max-width: 720px; padding: 28px 18px 12px; width: 100%; }
.quick-attendance-brand > span { align-items: center; background: #2563eb; border-radius: 13px; color: #fff; display: inline-flex; height: 50px; justify-content: center; width: 50px; }
.quick-attendance-brand div { display: grid; gap: 2px; }
.quick-attendance-brand small { color: var(--muted); }
.quick-attendance-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); margin: 22px auto 42px; max-width: 680px; padding: clamp(20px,4vw,34px); width: calc(100% - 28px); }
.quick-attendance-card header { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 13px; margin-bottom: 22px; padding-bottom: 18px; }
.quick-attendance-card header > span { align-items: center; background: var(--cyan-soft); border-radius: 11px; color: var(--cyan); display: inline-flex; height: 46px; justify-content: center; width: 46px; }
.quick-attendance-card h1 { font-size: clamp(1.35rem,5vw,2rem); margin: 3px 0 5px; }
.quick-attendance-card header p { color: var(--muted); margin: 0; }
.quick-attendance-tabs { background: #eef4fb; border: 1px solid #d6e2f1; border-radius: 12px; display: grid; gap: 6px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 18px; padding: 5px; }
.quick-attendance-tabs button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #536780; cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; gap: 7px; justify-content: center; min-height: 44px; padding: 9px 12px; }
.quick-attendance-tabs button.active { background: #fff; box-shadow: 0 4px 14px rgba(29,78,216,.12); color: #1d4ed8; }
.quick-attendance-note { background: #f7faff; border-left: 3px solid #3b82f6; border-radius: 7px; color: #536780; font-size: .88rem; line-height: 1.5; margin: 0 0 16px; padding: 10px 12px; }
.quick-attendance-card .field b { color: var(--red); }
.quick-attendance-card form { display: grid; gap: 16px; }
.quick-optional-fields { background: #f8fafc; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.quick-optional-fields summary { color: #41546d; cursor: pointer; font-weight: 800; padding: 12px 14px; }
.quick-optional-fields[open] summary { border-bottom: 1px solid var(--line); }
.quick-optional-fields > div { padding: 14px; }
.quick-attendance-loading,
.quick-attendance-success { align-items: center; color: var(--muted); display: flex; flex-direction: column; gap: 12px; min-height: 220px; justify-content: center; text-align: center; }
.quick-attendance-loading.error { color: var(--red); }
.quick-attendance-loading.error span { color: var(--muted); }
.quick-attendance-success { color: var(--green); }
.quick-attendance-success p { color: var(--muted); }
.quick-identity-grid { display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.quick-identity-grid > div { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 11px; display: grid; gap: 3px; padding: 12px; }
.quick-identity-grid small { color: var(--muted); }

.review-signal-panel { margin-top: 18px; }
.review-signal-count { background: #eef4ff; border-radius: 999px; color: #315b9b; font-size: .77rem; font-weight: 850; padding: 7px 10px; }
.review-signal-list { display: grid; gap: 0; }
.review-signal-list > article { align-items: center; border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: auto minmax(180px,1.2fr) auto minmax(200px,1fr) auto; padding: 13px 18px; }
.review-signal-list > article:first-child { border-top: 0; }
.review-signal-list > article > div:nth-of-type(1) { display: grid; gap: 3px; }
.review-signal-list > article small,
.review-signal-list time { color: var(--muted); font-size: .75rem; }
.review-signal-list > article > span:nth-of-type(2) { background: #fff7e8; border: 1px solid #f6d69d; border-radius: 10px; color: #95610d; display: grid; justify-items: center; min-width: 68px; padding: 7px; }
.review-signal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.review-signal-tags small { background: #f5f7fa; border: 1px solid #e1e7ef; border-radius: 999px; color: #5a6b80; padding: 5px 8px; }

@media (max-width: 850px) {
  .review-signal-list > article { grid-template-columns: auto minmax(0,1fr) auto; }
  .review-signal-tags { grid-column: 2 / -1; }
  .review-signal-list time { grid-column: 2 / -1; }
}

@media (max-width: 560px) {
  .quick-attendance-brand { padding-top: 18px; }
  .quick-attendance-card { border-radius: 15px; margin-top: 10px; padding: 18px; }
  .quick-attendance-tabs { grid-template-columns: 1fr; }
  .quick-identity-grid { grid-template-columns: 1fr; }
  .quick-attendance-card .form-row.two { grid-template-columns: 1fr; }
  .quick-attendance-card .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .quick-attendance-card .dialog-actions button { width: 100%; }
}

.settings-form,
.settings-card { display: grid; gap: 18px; }
.settings-form { max-width: 1180px; }
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.settings-footer-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-footer-field { align-items: end; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) auto; }
.settings-footer-field .check-field { min-height: 44px; }
.branding-settings-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.branding-upload-card {
  align-items: center;
  background: #f7faff;
  border: 1px solid #d7e4f4;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  padding: 14px;
}
.branding-preview {
  align-items: center;
  background: #fff;
  border: 1px dashed #bfd2eb;
  border-radius: 11px;
  display: flex;
  height: 72px;
  justify-content: center;
  overflow: hidden;
}
.branding-preview img { height: 100%; object-fit: contain; width: 100%; }
.branding-preview.background-preview img { object-fit: cover; }
.branding-preview > span { align-items: center; color: #7890ad; display: grid; gap: 4px; justify-items: center; }
.branding-preview small { font-size: .68rem; }
.branding-upload-copy { display: grid; gap: 4px; min-width: 0; }
.branding-upload-copy small { color: var(--muted); }
.branding-file-button { cursor: pointer; }
.branding-file-button input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.branding-upload-card .danger-link { grid-column: 3; justify-self: center; }
.branding-upload-card .danger-link:disabled { cursor: default; opacity: .42; }

.sidebar-brand { position: relative; }
.sidebar-collapse {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  color: inherit;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  margin-left: auto;
  width: 34px;
}
.admin-menu-toggle,
.admin-sidebar-backdrop { display: none; }
.admin-shell.sidebar-collapsed { grid-template-columns: 82px minmax(0, 1fr); }
.admin-shell.sidebar-collapsed .sidebar-brand > div,
.admin-shell.sidebar-collapsed .sidebar nav button span,
.admin-shell.sidebar-collapsed .sidebar nav button small,
.admin-shell.sidebar-collapsed .sidebar-user > div,
.admin-shell.sidebar-collapsed .sidebar-user > button { display: none; }
.admin-shell.sidebar-collapsed .sidebar nav button,
.admin-shell.sidebar-collapsed .sidebar-user { justify-content: center; }
.admin-shell.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

@media (max-width: 760px) {
  .admin-shell { display: block; }
  .admin-main { min-width: 0; }
  .admin-header { padding-inline: 12px; }
  .admin-header > div:first-child { min-width: 0; }
  .admin-menu-toggle { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--text); display: inline-flex; height: 44px; justify-content: center; width: 44px; }
  .sidebar {
    box-shadow: 18px 0 45px rgba(15, 23, 42, .25);
    inset: 0 auto 0 0;
    max-width: min(86vw, 310px);
    padding: 18px 14px;
    position: fixed;
    transform: translateX(-105%);
    transition: transform .22s ease;
    width: 310px;
    z-index: 2600;
  }
  .sidebar-brand > div,
  .sidebar nav button span,
  .sidebar nav button small,
  .sidebar-user > div,
  .sidebar-user > button { display: initial !important; }
  .sidebar nav button,
  .sidebar-user { justify-content: initial !important; }
  .sidebar-collapse { display: none; }
  .admin-menu-open .sidebar { transform: translateX(0); }
  .admin-sidebar-backdrop { background: rgba(15,23,42,.56); border: 0; inset: 0; position: fixed; z-index: 2500; }
  .admin-menu-open .admin-sidebar-backdrop { display: block; }
  .settings-footer-grid,
  .settings-footer-field,
  .branding-settings-grid { grid-template-columns: 1fr; }
  .branding-upload-card { grid-template-columns: 78px minmax(0, 1fr); }
  .branding-upload-card .branding-file-button { grid-column: 1 / -1; justify-content: center; }
  .branding-upload-card .danger-link { grid-column: 1 / -1; }
  .shared-footer { flex-direction: column; }
  .admin-header-actions .last-update,
  .admin-header-actions [data-report],
  .admin-header-actions [data-presentation] { display: none; }
}

/* Stable, responsive learning forms and document viewer. */
#assignment-form-dialog .modal.wide,
#lecture-form-dialog .modal.wide {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(880px, calc(100dvh - 32px));
  max-width: 980px;
  overflow: hidden;
}

#assignment-form-dialog .dialog-form,
#lecture-form-dialog .dialog-form {
  min-height: 0;
  overflow: auto;
  padding: 2px 7px 16px 1px;
}

#assignment-form-dialog .dialog-actions,
#lecture-form-dialog .dialog-actions {
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #e2e8f0;
  bottom: 0;
  margin-top: 2px;
  padding: 13px 0 2px;
  position: sticky;
  z-index: 4;
}

.assignment-settings-panel,
.form-disclosure {
  background: #f8fafc;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  padding: 15px;
}

.assignment-settings-panel {
  display: grid;
  gap: 14px;
}

.form-section-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.form-section-title strong,
.form-disclosure > summary {
  color: #25364d;
  font-size: 0.86rem;
  font-weight: 800;
}

.form-disclosure > summary {
  cursor: pointer;
  list-style-position: outside;
  margin-left: 17px;
}

.form-disclosure[open] > summary {
  margin-bottom: 14px;
}

.inline-check-field > .check-field,
.section-required-field {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd9ea;
  border-radius: 10px;
  color: #52647b;
  min-height: 46px;
  padding: 10px 12px;
}

.inline-check-field > .check-field input,
.section-required-field input {
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  width: 18px;
}

.section-editor-grid,
.section-add-grid {
  align-items: end;
  grid-template-columns: minmax(250px, 1.6fr) minmax(170px, 0.8fr) minmax(130px, 0.55fr) minmax(135px, 0.55fr);
}

.section-required-field {
  align-self: end;
  justify-content: flex-start;
  white-space: nowrap;
}

.lecture-resource-editor {
  background: #f8fbff;
  border-color: #cbdcf2;
  padding: 16px;
}

.resource-editor-heading {
  gap: 3px;
  margin-bottom: 12px;
}

.resource-add-grid {
  align-items: end;
  grid-template-columns: minmax(150px, 0.7fr) minmax(170px, 0.9fr) minmax(260px, 1.5fr) auto;
}

.resource-add-grid .field {
  min-width: 0;
}

.lecture-upload-picker {
  cursor: pointer;
  min-width: 0;
  position: relative;
}

.lecture-upload-picker > input {
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.lecture-upload-picker > span {
  align-items: center;
  background: #fff;
  border: 1px dashed #8eb2e6;
  border-radius: 10px;
  color: #1d4ed8;
  display: grid;
  gap: 2px 9px;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 64px;
  padding: 9px 12px;
}

.lecture-upload-picker > span > svg {
  grid-row: 1 / 3;
}

.lecture-upload-picker strong,
.lecture-upload-picker small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lecture-upload-picker strong {
  font-size: 0.82rem;
}

.lecture-upload-picker small {
  color: #667891;
  font-size: 0.7rem;
}

.lecture-reading-content,
.student-lecture-body > p,
.student-lecture-body h3,
.student-resource-list :is(a, button) {
  overflow-wrap: anywhere;
}

.lecture-reading-content {
  color: #314158;
  font-size: clamp(0.92rem, 1.4vw, 1rem);
  line-height: 1.75;
  white-space: normal;
}

.lecture-preview {
  height: calc(100dvh - 28px);
}

.lecture-preview .document-stage {
  overscroll-behavior: contain;
}

.lecture-preview .document-stage iframe {
  height: 100%;
  min-height: 0;
}

.lecture-preview .document-stage > .pdf-document {
  height: 100%;
  min-height: 0;
}

.docx-document-stage .docx-wrapper {
  align-items: flex-start;
  overflow: visible;
}

@media (max-width: 900px) {
  #assignment-form-dialog .modal.wide,
  #lecture-form-dialog .modal.wide {
    height: calc(100dvh - 20px);
    max-width: none;
  }

  .section-editor-grid,
  .section-add-grid,
  .resource-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-add-grid > .outline-button {
    min-height: 46px;
  }
}

@media (max-width: 680px) {
  dialog.modal-backdrop.portal-form-dialog {
    padding: 0;
  }

  #assignment-form-dialog .modal.wide,
  #lecture-form-dialog .modal.wide {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: none;
    padding: 14px;
  }

  #assignment-form-dialog .dialog-form,
  #lecture-form-dialog .dialog-form {
    padding-right: 3px;
  }

  .activity-type-picker,
  .form-row.two,
  .form-row.three,
  .section-editor-grid,
  .section-add-grid,
  .resource-add-grid {
    grid-template-columns: 1fr;
  }

  .assignment-settings-panel,
  .form-disclosure,
  .lecture-resource-editor,
  .assignment-section-card,
  .assignment-section-add {
    border-radius: 12px;
    padding: 13px;
  }

  .assignment-section-card > header {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .assignment-section-card > header > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .section-required-field {
    white-space: normal;
  }

  .student-lecture-body {
    padding: 16px;
  }

  .student-lecture-body > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .student-resource-list {
    grid-template-columns: 1fr;
  }

  .student-resource-list :is(a, button) {
    min-width: 0;
  }

  .preview-backdrop.lecture-file-backdrop {
    padding: 0;
  }

  .lecture-preview {
    border: 0;
    border-radius: 0;
    height: 100dvh;
  }

  .lecture-preview .submission-preview-header {
    min-height: 64px;
    padding: 9px 10px;
  }

  .lecture-preview .submission-preview-header h2 {
    max-width: 45vw;
  }

  .lecture-preview .submission-preview-header .outline-button {
    min-height: 38px;
    padding-inline: 10px;
  }

  .lecture-preview .submission-preview-header .outline-button span {
    display: none;
  }

  .lecture-preview .document-stage {
    padding: 4px;
  }

  .docx-document-stage .docx-wrapper {
    padding: 4px !important;
  }
}

/* Student learning hub: lectures and assignments remain distinct and readable. */
.student-learning-tabs {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: flex;
  gap: 8px;
  margin: 22px 0;
  padding: 7px;
  position: sticky;
  top: 12px;
  z-index: 12;
}

.student-learning-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  display: inline-flex;
  font-weight: 700;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
}

.student-learning-tabs button span {
  align-items: center;
  background: #e8eef7;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.74rem;
  justify-content: center;
  min-width: 25px;
  padding: 3px 7px;
}

.student-learning-tabs button.active {
  background: #172f57;
  box-shadow: 0 8px 22px rgba(23, 47, 87, 0.2);
  color: #fff;
}

.student-learning-tabs button.active span {
  background: rgba(255, 255, 255, 0.18);
}

.student-lecture-list {
  display: grid;
  gap: 16px;
}

.student-lecture-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(40, 59, 91, 0.07);
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  overflow: hidden;
}

.student-lecture-number {
  align-items: center;
  background: linear-gradient(165deg, #18345f, #2966bd);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.student-lecture-number span {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.student-lecture-number strong {
  font-size: 1.65rem;
  line-height: 1.25;
}

.student-lecture-body {
  padding: 22px 24px;
}

.student-lecture-body > header {
  align-items: flex-start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.student-lecture-body h3 {
  font-size: 1.18rem;
  letter-spacing: -0.025em;
  margin: 8px 0 0;
}

.student-lecture-body > p,
.lecture-reading-content {
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.7;
}

.lecture-reading-content {
  background: #f7f9fc;
  border: 1px solid #e6ebf3;
  border-radius: 13px;
  margin-top: 14px;
  padding: 15px 17px;
}

.student-resource-list {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  margin-top: 16px;
}

.student-video-resource {
  background: #f8faff;
  border: 1px solid #dce6f4;
  border-radius: 15px;
  grid-column: 1 / -1;
  overflow: hidden;
}

.responsive-video-frame {
  aspect-ratio: 16 / 9;
  background: #0f172a;
  width: 100%;
}

.responsive-video-frame iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.student-resource-list .student-video-resource > a {
  border: 0;
  border-radius: 0;
  border-top: 1px solid #dce6f4;
}

.student-resource-list :is(a, button) {
  align-items: center;
  background: #f8faff;
  border: 1px solid #dce6f4;
  border-radius: 13px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 11px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  padding: 11px 13px;
  text-align: left;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.student-resource-list :is(a, button):hover {
  border-color: #8fb3ea;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.student-resource-list :is(a, button) > span {
  align-items: center;
  background: #e8f0fe;
  border-radius: 10px;
  color: #2563eb;
  display: flex;
  height: 38px;
  justify-content: center;
}

.student-resource-list :is(a, button) div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.student-resource-list :is(a, button) strong,
.student-resource-list :is(a, button) small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-resource-list :is(a, button) small {
  color: var(--muted);
}

.submission-text-field {
  width: 100%;
}

.submission-text-field textarea {
  min-height: 150px;
  resize: vertical;
}

.submission-version-panel {
  background: #f4f7fc;
  border-bottom: 1px solid #dce4ef;
  padding: 16px;
}

.submission-version-panel > header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.submission-version-panel > header span {
  color: var(--muted);
  font-size: 0.78rem;
}

.submission-version-panel > div {
  display: grid;
  gap: 7px;
}

.submission-version-panel a {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
  color: var(--text);
  display: grid;
  gap: 8px;
  grid-template-columns: 82px minmax(0, 1fr) auto auto;
  padding: 9px 11px;
  text-decoration: none;
}

.submission-version-panel a span,
.submission-version-panel a small {
  color: var(--muted);
  font-size: 0.73rem;
}

@media (max-width: 680px) {
  .student-learning-tabs {
    position: static;
  }

  .student-learning-tabs button {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }

  .student-lecture-card {
    grid-template-columns: 1fr;
  }

  .student-lecture-number {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
    padding: 10px 18px;
  }
}

/* Administrative IOC redesign */
.ioc-command-header {
  align-items: center;
  background:
    radial-gradient(circle at 82% 18%, rgb(79 131 255 / 34%), transparent 29%),
    linear-gradient(125deg, #12233f 0%, #17345f 58%, #1c4b80 100%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgb(24 54 94 / 20%);
  color: #ffffff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(340px, 1.35fr) minmax(250px, 0.72fr) auto;
  min-height: 164px;
  overflow: hidden;
  padding: 27px 30px;
  position: relative;
}

.ioc-command-header::after {
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  content: "";
  height: 220px;
  position: absolute;
  right: -72px;
  top: -112px;
  width: 220px;
}

.ioc-command-main,
.ioc-command-progress,
.ioc-command-time {
  position: relative;
  z-index: 1;
}

.ioc-command-label {
  align-items: center;
  color: #b9d5ff;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 8px;
  letter-spacing: 0.1em;
}

.ioc-command-label i {
  background: #53d8ad;
  border: 4px solid rgb(83 216 173 / 18%);
  border-radius: 50%;
  box-sizing: content-box;
  height: 7px;
  width: 7px;
}

.ioc-command-main h1 {
  color: #ffffff;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin-top: 13px;
}

.ioc-command-main p {
  color: #cad9ed;
  font-size: 0.88rem;
  line-height: 1.55;
  margin-top: 10px;
  max-width: 610px;
}

.ioc-command-progress {
  background: rgb(255 255 255 / 9%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 16px;
  padding: 16px 17px;
}

.ioc-command-progress > div:first-child {
  align-items: end;
  display: flex;
  justify-content: space-between;
}

.ioc-command-progress span,
.ioc-command-progress small {
  color: #c9d9ed;
  font-size: 0.72rem;
}

.ioc-command-progress strong {
  color: #ffffff;
  font-size: 1.8rem;
  letter-spacing: -0.04em;
}

.ioc-command-progress-track {
  background: rgb(255 255 255 / 13%);
  border-radius: 999px;
  height: 8px;
  margin: 12px 0 10px;
  overflow: hidden;
}

.ioc-command-progress-track i {
  background: linear-gradient(90deg, #53d8ad, #70e2c0);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.ioc-command-time {
  align-items: center;
  border-left: 1px solid rgb(255 255 255 / 13%);
  display: flex;
  gap: 12px;
  min-width: 170px;
  padding-left: 24px;
}

.ioc-command-time > svg {
  color: #7fb3ff;
}

.ioc-command-time > div {
  display: grid;
  gap: 2px;
}

.ioc-command-time span,
.ioc-command-time small {
  color: #b8cbe4;
  font-size: 0.72rem;
}

.ioc-command-time strong {
  color: #ffffff;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.monitor-page .kpi-card {
  border: 0;
  box-shadow: 0 10px 30px rgb(35 55 87 / 8%);
  min-height: 108px;
}

.monitor-page .kpi-card::after {
  border-radius: 0 8px 8px 0;
  height: auto;
  inset: 18px auto 18px 0;
  opacity: 0.9;
  width: 4px;
}

.monitor-page .kpi-card strong {
  font-size: 1.85rem;
}

.monitor-page .analytics-board,
.monitor-page .monitor-grid {
  gap: 18px;
}

.monitor-page .ioc-panel {
  border: 1px solid #dfe7f0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgb(35 55 87 / 7%);
  overflow: hidden;
}

.monitor-page .health-panel,
.monitor-page .trend-panel,
.monitor-page .grade-panel,
.monitor-page .risk-panel,
.monitor-page .delivery-panel {
  border-top: 1px solid #dfe7f0;
}

.monitor-page .health-panel {
  grid-column: span 5;
}

.monitor-page .trend-panel {
  grid-column: span 4;
}

.monitor-page .grade-panel {
  grid-column: span 3;
}

.monitor-page .risk-panel {
  grid-column: span 5;
}

.monitor-page .delivery-panel {
  grid-column: span 7;
}

.monitor-page .panel-heading {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  border-bottom-color: #e8edf3;
  min-height: 82px;
  padding: 17px 20px;
}

.monitor-page .panel-heading h2 {
  color: #15243a;
  font-size: 1.04rem;
  font-weight: 760;
  letter-spacing: -0.012em;
}

.monitor-page .panel-heading p {
  color: #6f7f93;
  font-size: 0.76rem;
  margin-top: 6px;
}

.monitor-page .panel-heading > svg {
  background: #eef4ff;
  border-radius: 10px;
  box-sizing: content-box;
  padding: 9px;
}

.monitor-page .gauge-grid {
  min-height: 190px;
  padding: 24px 20px;
}

.monitor-page .gauge-ring {
  box-shadow: inset 0 0 0 1px #eef2f7;
  height: 92px;
  width: 92px;
}

.monitor-page .column-chart {
  height: 190px;
  padding: 23px 18px 16px;
}

.monitor-page .horizontal-chart {
  min-height: 190px;
}

.monitor-page .risk-stack {
  height: 14px;
  margin: 31px 20px 23px;
}

.monitor-page .risk-legend {
  padding-inline: 20px;
}

.monitor-page .delivery-list {
  padding: 20px;
}

.monitor-page .assignment-progress-row,
.monitor-page .leader-row,
.monitor-page .live-feed > button {
  transition: background 160ms ease;
}

.monitor-page .assignment-progress-row:hover,
.monitor-page .leader-row:hover,
.monitor-page .live-feed > button:hover {
  background: #f7faff;
}

.monitor-page .live-mini {
  background: #eef4ff;
  color: #315ea8;
  letter-spacing: 0.07em;
}

.assignment-material-editor {
  background: #f4f8ff;
  border-style: solid;
}

.assignment-material-card {
  align-items: center;
  background: linear-gradient(135deg, #f2f7ff, #f8fbff);
  border: 1px solid #cfdef2;
  border-radius: 13px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 13px 14px;
}

.assignment-material-card > div {
  align-items: center;
  display: flex;
  gap: 10px;
}

.assignment-material-card > div:first-child > span {
  align-items: center;
  background: #dfeaff;
  border-radius: 10px;
  color: #1d4ed8;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.assignment-material-card > div:first-child > div {
  display: grid;
  gap: 3px;
}

.assignment-material-card strong {
  color: #172033;
  font-size: 0.86rem;
}

.assignment-material-card small {
  color: #66788d;
  font-size: 0.74rem;
}

.assignment-material-card .outline-button {
  min-height: 36px;
}

@media (max-width: 1250px) {
  .ioc-command-header {
    grid-template-columns: minmax(300px, 1fr) minmax(230px, 0.65fr);
  }

  .ioc-command-time {
    border-left: 0;
    grid-column: 1 / -1;
    padding-left: 0;
  }

  .monitor-page .health-panel,
  .monitor-page .trend-panel,
  .monitor-page .grade-panel,
  .monitor-page .risk-panel {
    grid-column: span 6;
  }

  .monitor-page .delivery-panel {
    grid-column: span 12;
  }
}

@media (max-width: 760px) {
  .ioc-command-header {
    gap: 18px;
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }

  .ioc-command-main h1 {
    font-size: 1.8rem;
  }

  .ioc-command-progress,
  .ioc-command-time {
    grid-column: auto;
  }

  .assignment-material-card,
  .assignment-material-card > div:last-child {
    align-items: stretch;
    flex-direction: column;
  }

  .assignment-material-card .outline-button {
    justify-content: center;
  }

  .monitor-page .health-panel,
  .monitor-page .trend-panel,
  .monitor-page .grade-panel,
  .monitor-page .risk-panel,
  .monitor-page .delivery-panel {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }

  .spinning,
  .live-badge i {
    animation: none;
  }
}

/* Light interface redesign */
html {
  color-scheme: light;
}

body {
  font-size: 16px;
  line-height: 1.5;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  outline-offset: 2px;
}

.eyebrow {
  color: #1d4ed8;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}

.primary-button,
.outline-button,
.ghost-button,
.icon-button,
.danger-button,
.table-action {
  border-radius: 11px;
  font-size: 0.84rem;
  min-height: 44px;
  padding-inline: 16px;
}

.primary-button {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.19);
  color: #ffffff;
}

.outline-button,
.ghost-button,
.icon-button {
  background: #ffffff;
  border-color: #d5dfeb;
  color: #26354a;
}

.outline-button:hover,
.ghost-button:hover,
.icon-button:hover {
  background: #f2f6fb;
  border-color: #9db8df;
}

.boot-screen {
  background:
    radial-gradient(circle at 50% 35%, rgba(37, 99, 235, 0.11), transparent 34%),
    #f5f8fc;
}

.boot-screen span {
  color: #52647b;
  font-size: 0.9rem;
}

.boot-mark,
.auth-lock {
  background: #e7f0ff;
  border-color: #c2d7fa;
  color: #2563eb;
}

/* Sign in */
.auth-story {
  background:
    radial-gradient(circle at 22% 24%, rgba(37, 99, 235, 0.13), transparent 27%),
    radial-gradient(circle at 82% 76%, rgba(15, 159, 110, 0.09), transparent 30%),
    linear-gradient(140deg, #f8fbff, #edf4ff);
  border-right-color: #d8e3f0;
}

.auth-story::after {
  border-color: rgba(37, 99, 235, 0.12);
}

.auth-brand > span,
.student-brand > span,
.projection-brand > span,
.sidebar-brand > span {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.2);
}

.auth-copy h1 {
  color: #14213a;
}

.auth-features span {
  color: #4d6077;
  font-size: 0.95rem;
}

.auth-story > small {
  color: #73849a;
  font-size: 0.78rem;
}

.auth-panel {
  background: #f4f7fb;
}

.auth-card {
  border-color: #dce5ef;
  box-shadow: 0 24px 60px rgba(48, 68, 102, 0.13);
}

.auth-card-heading h2 {
  color: #172033;
  font-size: 1.65rem;
}

.auth-card-heading p {
  font-size: 0.9rem;
}

.auth-form,
.dialog-form {
  gap: 18px;
}

.field > span {
  color: #3c4c61;
  font-size: 0.82rem;
}

.field > small {
  color: #718096;
  font-size: 0.73rem;
}

.field input,
.field select,
.field textarea,
.compact-select {
  background: #ffffff;
  border-color: #ccd8e6;
  color: #172033;
  font-size: 0.88rem;
}

.field input,
.field select {
  height: 47px;
  padding-inline: 13px;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.compact-select:focus {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-error {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #b42334;
  font-size: 0.78rem;
}

/* Main application */
.admin-shell {
  grid-template-columns: 258px minmax(0, 1fr);
}

.sidebar {
  background: #ffffff;
  border-right-color: #dce5ef;
  padding: 23px 17px 18px;
}

.sidebar-brand {
  border-bottom: 1px solid #e6edf5;
  margin-bottom: 17px;
  padding: 0 6px 20px;
}

.sidebar-brand > span {
  height: 44px;
  width: 44px;
}

.sidebar-brand strong,
.student-brand strong {
  color: #162033;
  font-size: 0.94rem;
}

.sidebar-brand small,
.student-brand small,
.projection-brand small {
  color: #6c7d91;
  font-size: 0.72rem;
}

.sidebar nav {
  gap: 7px;
}

.sidebar nav button {
  border-radius: 11px;
  color: #53657b;
  font-size: 0.84rem;
  gap: 11px;
  min-height: 48px;
  padding: 0 13px;
}

.sidebar nav button:hover {
  background: #f2f6fb;
  color: #172033;
}

.sidebar nav button.active {
  background: #eaf2ff;
  border-color: #c8dcfb;
  box-shadow: inset 4px 0 0 #2563eb;
  color: #1d4ed8;
}

.sidebar nav button small {
  background: #e9eef5;
  color: #53657b;
  font-size: 0.72rem;
  height: 24px;
  min-width: 24px;
}

.sidebar-user {
  border-top-color: #e0e8f1;
  gap: 10px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding-top: 18px;
}

.sidebar-user strong {
  color: #1e293b;
  font-size: 0.78rem;
}

.sidebar-user small {
  font-size: 0.72rem;
}

.sidebar-user button {
  color: #64748b;
}

.avatar {
  background: #e8f1ff;
  border-color: #c7dbfb;
  border-radius: 11px;
  color: #1d4ed8;
  font-size: 0.75rem;
  height: 38px;
  width: 38px;
}

.avatar.admin {
  background: #f0eafe;
  border-color: #d9c8fb;
  color: #6d28d9;
}

.admin-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: #dce5ef;
  box-shadow: 0 4px 18px rgba(44, 62, 92, 0.05);
  height: 78px;
  padding: 0 31px;
}

.live-badge {
  background: #e8f8f2;
  border-color: #bde7d6;
  color: #087f5b;
  flex: 0 0 auto;
  font-size: 0.72rem;
  padding: 7px 10px;
  white-space: nowrap;
}

.class-picker {
  background: #f4f7fb;
  border: 1px solid #d8e2ed;
  border-radius: 10px;
}

.class-picker select {
  color: #172033;
  font-size: 0.86rem;
  min-width: 220px;
  padding-left: 12px;
}

.class-picker svg {
  color: #5f7186;
  right: 10px;
}

.last-update {
  font-size: 0.73rem;
}

.admin-header-actions .outline-button {
  white-space: nowrap;
}

.admin-shell[data-active-view]:not([data-active-view="monitor"]):not([data-active-view="reports"]) .admin-header [data-report],
.admin-shell[data-active-view]:not([data-active-view="monitor"]) .admin-header [data-presentation] {
  display: none;
}

.admin-content {
  max-width: 1800px;
  padding: 30px 31px 42px;
}

.page-title-row,
.management-heading,
.student-hero {
  align-items: center;
}

.page-title-row h1,
.management-heading h1,
.student-hero h1 {
  color: #14213a;
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  letter-spacing: -0.035em;
}

.page-title-row p,
.management-heading p,
.student-hero p {
  color: #64748b;
  font-size: 0.86rem;
}

.monitor-page,
.management-page {
  gap: 20px;
}

.admin-content > [data-view-panel],
.management-page,
.summary-strip,
.grade-bulk-toolbar,
.table-panel {
  min-width: 0;
}

.summary-strip {
  flex-wrap: wrap;
  max-width: 100%;
}

.table-panel {
  max-width: 100%;
}

.monitor-clock {
  background: #ffffff;
  border-color: #dce5ef;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(48, 68, 100, 0.07);
  color: #2563eb;
  padding: 11px 14px;
}

.monitor-clock strong {
  color: #172033;
  font-size: 0.9rem;
}

.monitor-clock span {
  font-size: 0.72rem;
}

/* IOC cards and charts */
.kpi-grid,
.student-kpis {
  gap: 15px;
}

.kpi-card {
  background: #ffffff;
  border-color: #dce5ef;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(48, 68, 100, 0.07);
  gap: 15px;
  min-height: 118px;
  overflow: hidden;
  padding: 19px;
  position: relative;
}

.kpi-card::after {
  background: currentColor;
  content: "";
  height: 4px;
  inset: auto 0 0;
  opacity: 0.75;
  position: absolute;
}

.kpi-card.cyan {
  color: #2563eb;
}

.kpi-card.green {
  color: #0f9f6e;
}

.kpi-card.orange {
  color: #d97706;
}

.kpi-card.violet {
  color: #7c3aed;
}

.kpi-icon {
  border-radius: 12px;
  height: 50px;
  width: 50px;
}

.kpi-card > div > span {
  color: #5f7186;
  font-size: 0.76rem;
}

.kpi-card strong {
  color: #111d31;
  font-size: 2rem;
}

.kpi-card small {
  color: #718096;
  font-size: 0.72rem;
}

.analytics-board,
.monitor-grid {
  gap: 15px;
}

.ioc-panel {
  background: #ffffff;
  border-color: #dce5ef;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(48, 68, 100, 0.055);
}

.health-panel {
  border-top: 4px solid #2563eb;
}

.trend-panel {
  border-top: 4px solid #0f9f6e;
}

.grade-panel {
  border-top: 4px solid #7c3aed;
}

.risk-panel {
  border-top: 4px solid #dc3545;
}

.delivery-panel {
  border-top: 4px solid #d97706;
}

.panel-heading {
  border-bottom-color: #e3eaf2;
  min-height: 74px;
  padding: 15px 18px;
}

.panel-heading h2 {
  color: #19263a;
  font-size: 0.95rem;
}

.panel-heading p {
  color: #6b7c90;
  font-size: 0.72rem;
  margin-top: 5px;
}

.panel-heading > svg {
  color: #2563eb;
}

.gauge-grid {
  padding: 19px;
}

.gauge-ring {
  background:
    radial-gradient(circle at center, #ffffff 57%, transparent 58%),
    conic-gradient(#2563eb var(--gauge), #e6edf5 0);
  height: 86px;
  width: 86px;
}

.gauge-ring.green {
  background:
    radial-gradient(circle at center, #ffffff 57%, transparent 58%),
    conic-gradient(#0f9f6e var(--gauge), #e6edf5 0);
}

.gauge-ring.violet {
  background:
    radial-gradient(circle at center, #ffffff 57%, transparent 58%),
    conic-gradient(#7c3aed var(--gauge), #e6edf5 0);
}

.gauge-ring span {
  color: #172033;
  font-size: 0.84rem;
}

.gauge-item strong {
  color: #26364b;
  font-size: 0.72rem;
}

.gauge-item small {
  font-size: 0.72rem;
}

.column-chart {
  height: 170px;
  padding: 18px;
}

.column-item {
  grid-template-rows: 16px 92px 15px 15px;
}

.column-value {
  color: #1d4ed8;
  font-size: 0.72rem;
}

.column-track,
.horizontal-track,
.delivery-track,
.risk-stack {
  background: #eaf0f6;
}

.column-track i {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.column-item strong {
  color: #34445a;
  font-size: 0.72rem;
}

.column-item small {
  font-size: 0.72rem;
}

.horizontal-chart {
  gap: 16px;
  padding: 23px 18px;
}

.horizontal-row {
  grid-template-columns: 64px minmax(0, 1fr) 28px;
}

.horizontal-row > span,
.horizontal-row > strong {
  color: #34445a;
  font-size: 0.72rem;
}

.risk-panel,
.delivery-panel {
  min-height: 205px;
}

.risk-stack {
  height: 16px;
  margin: 27px 18px 20px;
}

.risk-legend {
  padding: 0 18px 18px;
}

.risk-legend strong {
  color: #172033;
  font-size: 0.78rem;
}

.risk-legend small {
  color: #66788d;
  font-size: 0.72rem;
}

.delivery-list {
  gap: 11px;
  padding: 16px 18px 18px;
}

.delivery-row {
  grid-template-columns: minmax(140px, 0.78fr) minmax(180px, 1.5fr) 42px;
}

.delivery-row > div:first-child strong,
.delivery-row > div:first-child span,
.delivery-row > strong {
  font-size: 0.72rem;
}

.delivery-row > div:first-child strong,
.delivery-row > strong {
  color: #1d4ed8;
}

.delivery-track {
  height: 10px;
}

.assignment-progress-list,
.leaderboard-list,
.live-feed {
  padding-inline: 18px;
}

.assignment-progress-row {
  border-bottom-color: #e5ebf2;
  grid-template-columns: 38px minmax(0, 1fr) 46px 74px;
  padding: 12px 0;
}

.assignment-index {
  background: #e9f2ff;
  color: #1d4ed8;
  height: 36px;
}

.assignment-progress-main strong {
  color: #1f2c40;
  font-size: 0.74rem;
}

.assignment-progress-main span,
.progress-percent,
.assignment-state {
  font-size: 0.72rem;
}

.progress-track {
  background: #e6edf5;
}

.progress-track i {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.leader-row,
.live-feed > button {
  border-bottom-color: #e5ebf2;
  padding-block: 11px;
}

.leader-row strong,
.live-feed strong {
  color: #1e2b3d;
  font-size: 0.74rem;
}

.leader-row span,
.live-feed span,
.live-feed time {
  font-size: 0.72rem;
}

.rank-score {
  color: #1d4ed8 !important;
  font-size: 0.88rem !important;
}

.rank-1 {
  color: #d49a00;
}

.rank-2 {
  color: #64748b;
}

.rank-3 {
  color: #b76524;
}

.live-feed > button {
  color: #172033;
}

.live-feed > button:hover {
  background: #f5f8fc;
}

.matrix-table th {
  background: #f5f8fc;
  color: #52647b;
}

.matrix-table td {
  border-top-color: #e5ebf2;
}

.matrix-table td:first-child strong {
  color: #1e2b3d;
}

/* Management pages */
.first-class-empty,
.class-card,
.assignment-card,
.summary-strip,
.table-panel,
.student-assignment-card,
.student-empty {
  background: #ffffff;
  border-color: #dce5ef;
  box-shadow: 0 8px 24px rgba(48, 68, 100, 0.055);
}

.first-class-empty {
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.1), transparent 42%),
    #ffffff;
}

.first-class-empty h1 {
  color: #14213a;
  font-size: 2.4rem;
}

.first-class-empty p {
  font-size: 0.88rem;
}

.workflow-preview div,
.report-options > button {
  background: #f8fafc;
  border-color: #dce5ef;
}

.workflow-preview span {
  color: #37465b;
  font-size: 0.74rem;
}

.class-card-grid {
  gap: 16px;
}

.class-card {
  border-radius: 16px;
  min-height: 220px;
  padding: 20px;
}

.class-card.current {
  border-color: #87aef0;
  box-shadow:
    inset 0 0 0 1px #c5d9fa,
    0 10px 28px rgba(37, 99, 235, 0.09);
}

.class-card-main h2 {
  color: #172033;
  font-size: 1.05rem;
}

.class-card-main p {
  font-size: 0.72rem;
}

.class-card-actions {
  border-top-color: #e5ebf2;
}

.class-card-actions button,
.assignment-card-footer button {
  font-size: 0.72rem;
}

.report-preview > div {
  background: #f2f7ff;
  border-color: #d7e4f7;
  padding: 16px;
}

.report-preview span {
  font-size: 0.72rem;
}

.report-preview strong {
  color: #172033;
  font-size: 1.55rem;
}

.report-options > button {
  color: #172033;
  min-height: 94px;
  padding: 17px;
}

.report-options > button:hover {
  background: #eef5ff;
  border-color: #9fbee9;
}

.report-options strong {
  font-size: 0.82rem;
}

.report-options small {
  font-size: 0.72rem;
}

.permission-note {
  background: #f2edfe;
  border-color: #d9cbf8;
}

.summary-strip {
  gap: 22px;
  min-height: 68px;
  padding: 11px 16px;
}

.summary-strip > span {
  font-size: 0.72rem;
}

.summary-strip > span strong {
  color: #172033;
  font-size: 0.82rem;
}

.table-search {
  background: #f7f9fc;
  border-color: #d7e1ec;
}

.table-search input {
  color: #172033;
  font-size: 0.75rem;
  height: 40px;
  min-width: 210px;
}

.bulk-delete-button {
  font-size: 0.72rem;
  min-height: 40px;
}

.table-panel {
  border-radius: 14px;
}

.management-table {
  font-size: 0.74rem;
}

.management-table th {
  background: #f5f8fc;
  color: #52647b;
  font-size: 0.72rem;
  padding: 13px 15px;
}

.management-table td {
  border-top-color: #e3eaf2;
  padding: 12px 15px;
}

.management-table tbody tr:hover {
  background: #f8fbff;
}

.person-cell strong,
.file-name-cell strong {
  color: #1e2b3d;
  font-size: 0.73rem;
}

.person-cell span,
.file-name-cell span {
  font-size: 0.72rem;
}

.management-table code {
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 0.72rem;
}

.inline-progress span,
.score-text {
  color: #1d4ed8;
  font-size: 0.72rem;
}

.table-action {
  background: #eaf2ff;
  border-color: #c8dcfb;
  color: #1d4ed8;
  font-size: 0.72rem;
  min-height: 36px;
}

/* Dialogs */
.modal-backdrop,
.preview-backdrop {
  background: rgba(30, 41, 59, 0.32);
  backdrop-filter: blur(5px);
}

.modal {
  background: #ffffff;
  border-color: #d7e1ec;
  box-shadow: 0 28px 80px rgba(30, 41, 59, 0.2);
}

.modal-heading {
  border-bottom-color: #e3eaf2;
  padding: 19px 21px;
}

.modal-heading h2 {
  color: #172033;
  font-size: 1.05rem;
}

.modal-heading p {
  font-size: 0.72rem;
}

.modal-heading > button,
.submission-preview-header > div:last-child > button {
  background: #f5f8fc;
  border-color: #d8e2ed;
  color: #52647b;
}

.dialog-actions {
  border-top-color: #e3eaf2;
}

.upload-zone,
.student-selector > label {
  background: #f7faff;
  border-color: #b9cff0;
}

.template-builder,
.audience-builder {
  background: #f7f9fc;
  border-color: #dce5ef;
}

.template-note {
  font-size: 0.72rem;
}

.template-help span,
.credential-preview span,
.template-help code,
.credential-preview strong,
.check-field,
.audience-title span,
.segmented button {
  font-size: 0.72rem;
}

.audience-title strong {
  color: #172033;
  font-size: 0.78rem;
}

.segmented {
  background: #edf2f7;
  border-color: #d5dfeb;
}

.segmented button.active {
  background: #ffffff;
  color: #1d4ed8;
  box-shadow: 0 2px 7px rgba(48, 68, 100, 0.1);
}

.student-selector > label:hover {
  background: #eef5ff;
}

.class-admin-list,
.class-admin-list article,
.credentials-toolbar {
  border-color: #e3eaf2;
}

.class-admin-list article code {
  color: #1d4ed8;
  font-size: 0.72rem;
}

.class-admin-list article small,
.section-label > strong,
.section-label > button {
  font-size: 0.72rem;
}

/* Student portal */
.student-shell {
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, 0.07), transparent 23%),
    #f4f7fb;
}

.student-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: #dce5ef;
  box-shadow: 0 4px 18px rgba(44, 62, 92, 0.05);
  height: 78px;
}

.student-user > div strong {
  color: #1e293b;
  font-size: 0.78rem;
}

.student-user > div small,
.student-user > button {
  font-size: 0.72rem;
}

.student-user > button {
  background: #ffffff;
  border-color: #d5dfeb;
  color: #53657b;
}

.student-live {
  background: #e8f8f2;
  border-color: #bde7d6;
  color: #087f5b;
  font-size: 0.72rem;
}

.password-banner {
  background: #fff7e8;
  border-color: #f4d7a3;
  color: #b35d00;
}

.password-banner strong {
  color: #172033;
  font-size: 0.76rem;
}

.password-banner span {
  color: #8f652e;
  font-size: 0.72rem;
}

.student-section-heading h2 {
  color: #172033;
  font-size: 1.12rem;
}

.student-section-heading p {
  font-size: 0.72rem;
}

.student-assignment-card {
  border-radius: 16px;
  grid-template-columns: 78px minmax(0, 1fr);
}

.student-assignment-index {
  background: #eef5ff;
  border-right-color: #d7e4f7;
  color: #1d4ed8;
}

.student-assignment-index span {
  font-size: 0.72rem;
}

.student-assignment-index strong {
  font-size: 1.45rem;
}

.student-assignment-main {
  gap: 13px;
  padding: 18px 20px;
}

.student-assignment-title h3 {
  color: #172033;
  font-size: 0.95rem;
}

.student-assignment-title p,
.student-assignment-info,
.instructions-box,
.feedback-box {
  font-size: 0.72rem;
}

.instructions-box,
.feedback-box {
  background: #f7f9fc;
}

.instructions-box strong,
.feedback-box strong {
  color: #172033;
}

.submitted-file {
  background: #edf9f4;
  border-color: #c7eadc;
}

.submitted-file strong {
  color: #1e2b3d;
  font-size: 0.72rem;
}

.submitted-file small {
  color: #4e846f;
  font-size: 0.72rem;
}

.student-upload > label {
  background: #f7faff;
  border-color: #a9c4ec;
  font-size: 0.72rem;
}

/* File preview */
.submission-preview {
  background: #ffffff;
  border-color: #cbd7e4;
  box-shadow: 0 26px 80px rgba(30, 41, 59, 0.22);
}

.submission-preview-header {
  border-bottom-color: #e3eaf2;
  min-height: 76px;
  padding: 13px 18px;
}

.submission-preview-header h2 {
  color: #172033;
  font-size: 0.9rem;
}

.submission-preview-header p {
  font-size: 0.72rem;
}

.file-badge {
  background: #eaf2ff;
  color: #1d4ed8;
}

.document-stage {
  background: #e9eef4;
}

.document-stage > video {
  background: #111827;
}

.grading-sidebar {
  background: #ffffff;
  border-left-color: #dce5ef;
  padding: 20px;
}

.grading-heading h3 {
  color: #172033;
  font-size: 0.86rem;
}

.grading-heading p {
  font-size: 0.72rem;
}

.document-loading strong {
  font-size: 0.85rem;
}

.document-loading span {
  font-size: 0.74rem;
}

/* Fullscreen projection */
.projection-shell {
  background:
    radial-gradient(circle at 50% -20%, rgba(37, 99, 235, 0.1), transparent 38%),
    #f3f7fc;
}

.projection-header {
  border-bottom-color: #d8e2ed;
}

.projection-brand strong {
  color: #172033;
}

.projection-status > strong {
  color: #172033;
}

.exit-projection {
  background: rgba(255, 255, 255, 0.96);
  border-color: #cbd7e4;
  box-shadow: 0 6px 18px rgba(48, 68, 100, 0.14);
  color: #4c5e74;
  font-size: 0.72rem;
}

@media (min-width: 1500px) {
  .admin-content {
    padding-inline: 38px;
  }

  .panel-heading h2 {
    font-size: 1rem;
  }

  .panel-heading p {
    font-size: 0.72rem;
  }

  .leader-row strong,
  .live-feed strong,
  .assignment-progress-main strong {
    font-size: 0.78rem;
  }
}

@media (max-width: 1100px) {
  .admin-header {
    padding-inline: 20px;
  }

  .admin-header .last-update {
    display: none;
  }

  .admin-content {
    padding: 24px 20px 36px;
  }

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

@media (max-width: 1400px) {
  .admin-header .last-update {
    display: none;
  }
}

@media (max-width: 1280px) and (min-width: 761px) {
  .admin-header {
    gap: 12px;
    padding-inline: 18px;
  }

  .admin-header [data-presentation] {
    display: none;
  }
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .sidebar {
    padding-inline: 10px;
  }

  .sidebar-brand {
    padding-inline: 5px;
  }

  .sidebar nav button {
    min-height: 48px;
  }
}

@media (max-width: 680px) {
  .admin-header {
    height: 66px;
  }

  .admin-content {
    padding: 20px 14px 32px;
  }

  .page-title-row h1,
  .management-heading h1,
  .student-hero h1 {
    font-size: 1.85rem;
  }

  .kpi-card {
    min-height: 104px;
  }

  .class-card-grid {
    grid-template-columns: 1fr;
  }

  .student-assignment-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }
}

/* Final readability calibration: classroom screens and learner devices */
@media (min-width: 761px) {
  body {
    font-size: 18px;
  }
}

.sidebar nav button,
.page-title-row p,
.management-heading p,
.student-hero p {
  font-size: 1rem;
}

.panel-heading h2 {
  font-size: 1.08rem;
}

.panel-heading p {
  font-size: 0.8rem;
}

.management-table {
  font-size: 0.88rem;
}

.management-table th {
  font-size: 0.76rem;
}

.person-cell strong,
.file-name-cell strong {
  font-size: 0.88rem;
}

.person-cell span,
.file-name-cell span,
.activity-type-picker small,
.quiz-rule-note {
  font-size: 0.76rem;
}

.activity-type-picker strong {
  font-size: 0.94rem;
}

.activity-badge {
  font-size: 0.74rem;
}

.submission-mode-tabs button {
  font-size: 0.88rem;
}

.question-bank-heading strong,
.question-editor label,
.option-editor-heading strong {
  font-size: 0.9rem;
}

.question-bank-heading span,
.question-bank-list small,
.option-editor-heading span,
.question-attachment-editor small {
  font-size: 0.74rem;
}

.question-bank-list > button,
.question-type-grid button,
.option-editor-row > input:nth-child(3),
.question-attachment-editor strong,
.question-attachment-editor > label {
  font-size: 0.86rem;
}

.option-editor-heading button,
.existing-attachment button,
.question-number-label {
  font-size: 0.8rem;
}

.quiz-review-summary > span,
.quiz-review-card > header span,
.quiz-review-card > header strong,
.attachment-link,
.essay-grade-controls label > span,
.review-option-list small,
.automatic-score {
  font-size: 0.76rem;
}

.quiz-review-summary strong,
.essay-response,
.review-option-list strong {
  font-size: 0.9rem;
}

.quiz-review-card h3 {
  font-size: 1.12rem;
}

.student-kpis .kpi-card > div > span {
  font-size: 0.94rem;
}

.student-kpis .kpi-card small,
.student-section-heading p {
  font-size: 0.86rem;
}

.student-section-heading h2 {
  font-size: 1.55rem;
}

.student-assignment-title h3 {
  font-size: 1.24rem;
}

.student-assignment-title p {
  font-size: 0.94rem;
}

.student-assignment-info,
.instructions-box,
.feedback-box {
  font-size: 0.9rem;
}

.quiz-entry-panel strong {
  font-size: 0.94rem;
}

.quiz-entry-panel small {
  font-size: 0.8rem;
}

.quiz-player-brand small {
  font-size: 0.75rem;
}

.quiz-player-brand h1 {
  font-size: 1.4rem;
}

.quiz-player-status > span {
  font-size: 0.86rem;
}

.quiz-progress-header span,
.quiz-progress-header strong {
  font-size: 0.82rem;
}

.quiz-submitted-banner strong {
  font-size: 0.94rem;
}

.quiz-submitted-banner span {
  font-size: 0.82rem;
}

.quiz-question-meta span,
.quiz-question-meta strong {
  font-size: 0.84rem;
}

.quiz-question-card h2 {
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
}

.required-note,
.quiz-question-attachment small,
.quiz-essay-answer > small {
  font-size: 0.78rem;
}

.quiz-question-attachment strong,
.quiz-essay-answer > span {
  font-size: 0.9rem;
}

.quiz-question-attachment .outline-button {
  font-size: 0.8rem;
}

.quiz-option-list strong,
.quiz-essay-answer textarea {
  font-size: 1.06rem;
}

.flag-question-button {
  font-size: 0.84rem;
}

.quiz-navigator-heading strong {
  font-size: 1rem;
}

.quiz-navigator-heading span,
.quiz-question-grid button {
  font-size: 0.84rem;
}

.quiz-navigator-legend span {
  font-size: 0.74rem;
}

.submit-quiz-button {
  font-size: 0.94rem;
}

.projection-brand strong {
  font-size: 0.94rem;
}

@media (max-width: 760px) {
  body {
    font-size: 17px;
  }

  .student-hero h1 {
    font-size: 2.15rem;
  }

  .quiz-player-brand h1 {
    font-size: 1.05rem;
    max-width: 48vw;
  }
}

/* Final IOC E-Learning layout overrides */
.ioc-command-header {
  grid-template-columns: minmax(340px, 1.25fr) minmax(230px, 0.72fr) 210px auto;
}

.sensitive-toggle {
  position: relative;
  z-index: 1;
  min-height: 44px;
}

.projection-shell.projection-modern {
  background:
    radial-gradient(circle at 14% 8%, rgba(54, 121, 255, 0.15), transparent 30%),
    linear-gradient(145deg, #f6f9ff 0%, #edf3fb 100%);
}

@media (max-width: 1450px) {
  .ioc-command-header {
    grid-template-columns: minmax(300px, 1fr) minmax(220px, 0.7fr) auto;
  }

  .ioc-command-header .sensitive-toggle {
    grid-column: 2 / 4;
    justify-self: end;
  }
}

@media (max-width: 900px) {
  .ioc-command-header {
    grid-template-columns: 1fr;
  }

  .ioc-command-header .sensitive-toggle {
    grid-column: auto;
    justify-self: stretch;
  }
}

/* Assignment-centered administrative projection */
.template-page-download {
  background: #eef5ff;
  border-color: #a9c7f4;
  color: #174ea6;
}

.template-page-download:hover {
  background: #e2edff;
  border-color: #74a4e8;
}

.projection-modern .projection-brand strong {
  color: #17233a;
  font-size: 0.92rem;
  letter-spacing: 0.075em;
}

.projection-modern .projection-brand small {
  color: #63728a;
}

.projection-task-stage {
  display: grid;
  gap: 13px;
  grid-template-rows: minmax(154px, 0.95fr) 96px minmax(0, 3.2fr);
  height: calc(100vh - 72px);
  overflow: hidden;
  padding: 14px 18px 18px;
}

.projection-task-hero {
  align-items: stretch;
  background:
    linear-gradient(112deg, rgba(24, 52, 91, 0.98), rgba(25, 76, 132, 0.96)),
    #193a64;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(31, 56, 91, 0.16);
  color: #ffffff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.37fr);
  min-height: 0;
  overflow: hidden;
  padding: 18px 22px;
}

.projection-task-identity {
  align-content: center;
  display: grid;
  min-width: 0;
}

.projection-assignment-picker {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.projection-assignment-picker > span {
  color: #9dd7ff;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.projection-assignment-picker select {
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, #dbeafe 50%) calc(100% - 18px)
      calc(50% - 3px) / 6px 6px no-repeat,
    linear-gradient(135deg, #dbeafe 50%, transparent 50%) calc(100% - 12px)
      calc(50% - 3px) / 6px 6px no-repeat,
    rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 750;
  max-width: 440px;
  min-height: 34px;
  overflow: hidden;
  padding: 0 34px 0 12px;
  text-overflow: ellipsis;
}

.projection-assignment-picker select option {
  background: #ffffff;
  color: #17233a;
}

.projection-task-identity h1 {
  color: #ffffff;
  font-size: clamp(1.45rem, 2.1vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-task-identity > p {
  color: #d7e5f5;
  display: -webkit-box;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 7px 0 0;
  max-width: 960px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.projection-task-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.projection-task-tags span {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #eff6ff;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 5px 9px;
}

.projection-task-tags .status-published {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(110, 231, 183, 0.3);
  color: #b7f7df;
}

.projection-task-tags .status-closed {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(252, 165, 165, 0.28);
  color: #fecaca;
}

.projection-task-countdown {
  align-content: center;
  background: rgba(5, 24, 51, 0.32);
  border: 1px solid rgba(147, 197, 253, 0.24);
  border-radius: 13px;
  display: grid;
  justify-items: center;
  min-width: 0;
  padding: 14px 18px;
  text-align: center;
}

.projection-task-countdown > span {
  align-items: center;
  color: #abd8ff;
  display: flex;
  font-size: 0.72rem;
  font-weight: 850;
  gap: 8px;
  letter-spacing: 0.1em;
}

.projection-task-countdown > strong {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 10px 0 7px;
}

.projection-task-countdown > small {
  color: #c8daec;
  font-size: 0.72rem;
}

.projection-task-countdown.expired {
  background: rgba(112, 30, 33, 0.38);
  border-color: rgba(252, 165, 165, 0.36);
}

.projection-task-countdown.expired > span,
.projection-task-countdown.expired > small {
  color: #fecaca;
}

.projection-task-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
}

.projection-task-kpi {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dce5ef;
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(31, 52, 84, 0.07);
  display: grid;
  gap: 12px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-width: 0;
  padding: 12px 16px;
}

.projection-task-kpi > span {
  align-items: center;
  background: #edf4ff;
  border-radius: 11px;
  color: #2563eb;
  display: flex;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.projection-task-kpi.teal > span {
  background: #e7f7f2;
  color: #059669;
}

.projection-task-kpi.violet > span {
  background: #f2ecff;
  color: #7c3aed;
}

.projection-task-kpi.orange > span {
  background: #fff3e5;
  color: #d97706;
}

.projection-task-kpi > div {
  display: grid;
  min-width: 0;
}

.projection-task-kpi small {
  color: #697a92;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.07em;
}

.projection-task-kpi strong {
  color: #17233a;
  font-size: 1.55rem;
  line-height: 1.05;
  margin-top: 2px;
}

.projection-task-kpi p {
  color: #7a899d;
  font-size: 0.72rem;
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-submission-status {
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  justify-self: start;
  padding: 6px 9px;
  white-space: nowrap;
}

.projection-submission-status.on-time {
  background: #e8f7f1;
  color: #087d5d;
}

.projection-submission-status.late {
  background: #fff0e0;
  color: #b45309;
}

@media (max-width: 1350px) {
  .projection-task-stage {
    grid-template-rows: minmax(148px, 0.9fr) 90px minmax(0, 3.2fr);
    padding-inline: 13px;
  }

  .projection-task-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
    padding: 15px 18px;
  }

  .projection-task-kpi {
    gap: 9px;
    grid-template-columns: 40px minmax(0, 1fr);
    padding-inline: 11px;
  }

  .projection-task-kpi > span {
    height: 39px;
    width: 39px;
  }
}

@media (max-width: 980px) {
  .projection-shell.projection-modern {
    min-height: 100vh;
    overflow: auto;
  }

  .projection-task-stage {
    height: auto;
    overflow: visible;
  }

  .projection-task-hero {
    grid-template-columns: 1fr;
  }

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

/* Typography standardization: keep Vietnamese text crisp and readable. */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family:
    "Segoe UI Variable",
    "Segoe UI",
    Arial,
    Helvetica,
    sans-serif;
  font-size: 1rem;
  font-synthesis: none;
  line-height: 1.5;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

small {
  line-height: 1.4;
}

.sidebar-brand strong,
.student-brand strong {
  font-size: 1rem;
}

.sidebar-brand small,
.student-brand small,
.projection-brand small,
.sidebar-user small {
  font-size: 0.76rem;
}

.sidebar nav button {
  font-size: 0.94rem;
}

.sidebar nav button small {
  font-size: 0.76rem;
}

.sidebar-user strong {
  font-size: 0.86rem;
}

.live-badge,
.last-update {
  font-size: 0.76rem;
}

.class-picker select,
.compact-select {
  font-size: 0.88rem;
}

.ioc-command-label {
  font-size: 0.78rem;
}

.ioc-command-main p {
  font-size: 0.94rem;
}

.ioc-command-progress span,
.ioc-command-progress small,
.ioc-command-time span,
.ioc-command-time small {
  font-size: 0.76rem;
}

.sensitive-toggle {
  font-size: 0.88rem;
}

.kpi-card > div > span {
  font-size: 0.84rem;
}

.kpi-card small {
  font-size: 0.76rem;
}

.panel-heading h2 {
  font-size: 1.02rem;
}

.panel-heading p {
  font-size: 0.78rem;
}

.gauge-item strong,
.column-item strong,
.horizontal-row > span,
.horizontal-row > strong,
.risk-legend strong,
.delivery-row > div:first-child strong,
.delivery-row > div:first-child span,
.delivery-row > strong {
  font-size: 0.78rem;
}

.gauge-item small,
.column-item small,
.risk-legend small {
  font-size: 0.72rem;
}

.assignment-progress-main strong,
.leader-row strong,
.live-feed strong {
  font-size: 0.84rem;
}

.assignment-progress-main span,
.progress-percent,
.assignment-state,
.leader-row span,
.live-feed span,
.live-feed time {
  font-size: 0.74rem;
}

.management-table {
  font-size: 0.84rem;
}

.management-table th {
  font-size: 0.76rem;
}

.person-cell strong,
.file-name-cell strong {
  font-size: 0.84rem;
}

.person-cell span,
.file-name-cell span,
.management-table code,
.table-action {
  font-size: 0.74rem;
}

.field > span,
.check-field,
.segmented button {
  font-size: 0.84rem;
}

.field > small,
.form-error,
.modal-heading p,
.template-note {
  font-size: 0.76rem;
}

@media (max-width: 760px) {
  html {
    font-size: 16px;
  }
}

/* Projection dashboard redesign */
.projection-shell.projection-modern {
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.1), transparent 26%),
    radial-gradient(circle at 92% 100%, rgba(14, 165, 233, 0.08), transparent 25%),
    #edf3fb;
}

.projection-modern .projection-header {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 24px rgba(32, 58, 92, 0.08);
  min-height: 72px;
  padding: 0 24px;
}

.projection-modern .projection-brand > span {
  border-radius: 13px;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.24);
}

.projection-modern .projection-brand strong {
  font-size: 1rem;
  letter-spacing: 0.055em;
}

.projection-modern .projection-brand small {
  font-size: 0.74rem;
}

.projection-modern .projection-status {
  gap: 14px;
}

.projection-modern .projection-status > strong {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

.projection-modern .live-badge {
  font-size: 0.74rem;
  padding: 8px 12px;
}

.projection-exit-button {
  min-height: 42px;
}

.projection-task-stage {
  gap: 13px;
  grid-template-rows: 176px 96px minmax(0, 1fr);
  height: calc(100vh - 72px);
  overflow: auto;
  padding: 14px 18px 18px;
}

.projection-task-hero {
  background:
    radial-gradient(circle at 48% -60%, rgba(96, 165, 250, 0.32), transparent 44%),
    linear-gradient(116deg, #102f58 0%, #164b7d 57%, #176c94 100%);
  border: 1px solid rgba(147, 197, 253, 0.22);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(25, 62, 103, 0.2);
  gap: 22px;
  grid-template-columns: minmax(380px, 1fr) 275px 350px;
  padding: 18px 22px;
  position: relative;
}

.projection-task-hero::after {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  height: 280px;
  pointer-events: none;
  position: absolute;
  right: -90px;
  top: -155px;
  width: 280px;
}

.projection-task-identity {
  position: relative;
  z-index: 1;
}

.projection-assignment-picker {
  margin-bottom: 7px;
}

.projection-assignment-picker > span {
  color: #8bd7ff;
  font-size: 0.74rem;
}

.projection-assignment-picker select {
  background:
    linear-gradient(45deg, transparent 50%, #dbeafe 50%) calc(100% - 18px)
      calc(50% - 3px) / 6px 6px no-repeat,
    linear-gradient(135deg, #dbeafe 50%, transparent 50%) calc(100% - 12px)
      calc(50% - 3px) / 6px 6px no-repeat,
    rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.24);
  font-size: 0.82rem;
  min-height: 37px;
}

.projection-task-identity h1 {
  font-size: clamp(1.65rem, 2.05vw, 2.35rem);
  line-height: 1.08;
  white-space: normal;
}

.projection-task-identity > p {
  color: #d5e8f7;
  font-size: 0.82rem;
  margin-top: 6px;
}

.projection-task-tags {
  margin-top: 9px;
}

.projection-task-tags span {
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.72rem;
  padding: 5px 9px;
}

.projection-task-countdown {
  background:
    linear-gradient(145deg, rgba(10, 39, 75, 0.68), rgba(13, 58, 91, 0.46));
  border-color: rgba(147, 197, 253, 0.28);
  border-radius: 16px;
  padding: 14px 17px;
  position: relative;
  z-index: 1;
}

.projection-task-countdown > span {
  color: #90d5ff;
  font-size: 0.72rem;
}

.projection-task-countdown > strong {
  font-size: clamp(1.65rem, 2.25vw, 2.45rem);
  letter-spacing: 0.015em;
  line-height: 1.06;
  margin: 10px 0 7px;
  overflow-wrap: anywhere;
}

.projection-task-countdown > small {
  font-size: 0.74rem;
  line-height: 1.4;
}

.projection-task-kpis {
  gap: 12px;
}

.projection-task-kpi {
  border: 0;
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(28, 55, 90, 0.08);
  grid-template-columns: 50px minmax(0, 1fr);
  padding: 12px 15px;
  position: relative;
}

.projection-task-kpi::after {
  background: #2563eb;
  border-radius: 0 4px 4px 0;
  content: "";
  inset: 16px auto 16px 0;
  position: absolute;
  width: 4px;
}

.projection-task-kpi.teal::after {
  background: #0f9f7a;
}

.projection-task-kpi.violet::after {
  background: #7c5ce7;
}

.projection-task-kpi.orange::after {
  background: #f59e0b;
}

.projection-task-kpi > span {
  height: 46px;
  width: 46px;
}

.projection-task-kpi small {
  font-size: 0.72rem;
}

.projection-task-kpi strong {
  font-size: 1.65rem;
}

.projection-task-kpi p {
  font-size: 0.72rem;
}

.projection-visual-grid {
  display: grid;
  gap: 13px;
  grid-template-columns: minmax(330px, 0.9fr) minmax(300px, 0.78fr)
    minmax(350px, 1fr);
  grid-template-rows: minmax(220px, 0.85fr) minmax(235px, 1fr);
  min-height: 0;
}

.projection-visual-card {
  background: #ffffff;
  border: 1px solid #d8e4f0;
  border-radius: 17px;
  box-shadow: 0 10px 28px rgba(30, 57, 91, 0.075);
  min-height: 0;
  overflow: hidden;
}

.projection-visual-heading {
  align-items: center;
  border-bottom: 1px solid #e6edf5;
  display: flex;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px 17px;
}

.projection-visual-heading > div {
  min-width: 0;
}

.projection-visual-heading > div > span {
  color: #2563eb;
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

.projection-visual-heading h2 {
  color: #17243a;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0;
}

.projection-visual-heading > svg {
  color: #3b82f6;
}

.projection-status-overview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 12px;
}

.projection-status-visual {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 16px 18px 14px;
}

.projection-status-donut {
  align-items: center;
  background:
    radial-gradient(circle at center, #ffffff 57%, transparent 58%),
    conic-gradient(
      #19b88d 0 var(--on-time-angle),
      #fb923c var(--on-time-angle) var(--submitted-angle),
      #e1e8f1 var(--submitted-angle) 360deg
    );
  border-radius: 50%;
  display: flex;
  height: 128px;
  justify-content: center;
  width: 128px;
}

.projection-status-donut > span {
  display: grid;
  justify-items: center;
}

.projection-status-donut strong {
  color: #14213a;
  font-size: 1.75rem;
  line-height: 1;
}

.projection-status-donut small {
  color: #6e7f94;
  font-size: 0.74rem;
  margin-top: 5px;
}

.projection-status-legend {
  display: grid;
  gap: 12px;
}

.projection-status-legend > div {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
}

.projection-status-legend i {
  background: #dfe7f0;
  border-radius: 4px;
  height: 10px;
  width: 10px;
}

.projection-status-legend i.on-time {
  background: #19b88d;
}

.projection-status-legend i.late {
  background: #fb923c;
}

.projection-status-legend > div > span {
  color: #596b81;
  font-size: 0.78rem;
}

.projection-status-legend strong {
  color: #17243a;
  font-size: 0.94rem;
}

.projection-status-strip {
  background: #e1e8f1;
  display: flex;
  overflow: hidden;
}

.projection-status-strip i {
  display: block;
  height: 100%;
}

.projection-status-strip .on-time {
  background: #19b88d;
}

.projection-status-strip .late {
  background: #fb923c;
}

.projection-status-strip .missing {
  background: #dfe7f0;
}

.projection-live-submissions {
  display: grid;
  grid-column: 3;
  grid-row: 1 / 3;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.projection-review-block {
  background: #f7faff;
  border-bottom: 1px solid #e2eaf4;
  padding: 12px 15px;
}

.projection-review-heading {
  align-items: center;
  display: grid;
  gap: 9px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.projection-review-heading > span {
  align-items: center;
  background: #eef4ff;
  border-radius: 9px;
  color: #315f9e;
  display: flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.projection-review-heading > div { display: grid; }
.projection-review-heading strong { color: #243650; font-size: .78rem; }
.projection-review-heading small { color: #708096; font-size: .67rem; }
.projection-review-heading > b { color: #9a6413; font-size: .9rem; }
.projection-review-list { display: grid; gap: 5px; margin-top: 9px; }
.projection-review-list article { align-items: center; display: grid; gap: 8px; grid-template-columns: 28px minmax(0, 1fr); }
.projection-review-list article > span { align-items: center; background: #fff3d9; border-radius: 8px; color: #96620d; display: flex; font-size: .64rem; font-weight: 850; height: 28px; justify-content: center; width: 28px; }
.projection-review-list article > div { display: grid; min-width: 0; }
.projection-review-list article strong { color: #30425b; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projection-review-list article small,
.projection-review-list p { color: #738399; font-size: .65rem; margin: 0; }
.projection-live-label { align-items: center; display: flex; justify-content: space-between; padding: 10px 17px 2px; }
.projection-live-label strong { color: #253750; font-size: .78rem; }
.projection-live-label span { color: #718198; font-size: .68rem; }

.projection-live-count {
  align-items: center;
  background: #eaf2ff;
  border: 1px solid #c8ddff;
  border-radius: 999px;
  color: #1d4ed8;
  display: flex;
  font-size: 0.86rem;
  font-weight: 850;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding: 0 10px;
}

.projection-live-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: 8px 15px 12px;
}

.projection-live-list > article {
  align-items: center;
  border-bottom: 1px solid #e9eef4;
  display: grid;
  flex: 1 1 0;
  gap: 11px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 10px 2px;
}

.projection-live-list > article:last-child {
  border-bottom: 0;
}

.projection-live-avatar,
.projection-roster-avatar {
  align-items: center;
  background: linear-gradient(145deg, #eaf2ff, #dce9ff);
  border: 1px solid #c6dafb;
  border-radius: 12px;
  color: #1d4ed8;
  display: flex;
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.projection-live-list > article > div {
  display: grid;
  min-width: 0;
}

.projection-live-list > article strong {
  color: #17243a;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-live-list > article > div > span {
  color: #6a7c91;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-live-list > article small {
  color: #8a98a9;
  font-size: 0.72rem;
}

.projection-live-empty {
  align-items: center;
  color: #7d8da1;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.projection-live-empty svg {
  color: #8aa7c9;
  margin-bottom: 9px;
}

.projection-live-empty strong {
  color: #34465c;
  font-size: 0.9rem;
}

.projection-live-empty span {
  font-size: 0.74rem;
  margin-top: 4px;
}

.projection-live-submissions .projection-submission-status {
  font-size: 0.72rem;
  padding: 6px 9px;
}

.projection-roster-monitor {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.projection-roster-monitor .projection-visual-heading > strong {
  background: #eef5ff;
  border-radius: 999px;
  color: #1d4ed8;
  font-size: 0.78rem;
  padding: 7px 11px;
}

.projection-roster-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  overflow: auto;
  padding: 11px 14px;
}

.projection-roster-item {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e3eaf2;
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: 40px minmax(150px, 1fr) minmax(100px, 0.65fr) auto;
  min-height: 66px;
  padding: 9px 11px;
  position: relative;
}

.projection-roster-item::before {
  background: #a9b6c6;
  border-radius: 0 4px 4px 0;
  content: "";
  inset: 10px auto 10px 0;
  position: absolute;
  width: 3px;
}

.projection-roster-item.on-time::before {
  background: #10b981;
}

.projection-roster-item.late::before {
  background: #f97316;
}

.projection-roster-item.in-progress::before {
  background: #7c3aed;
}

.projection-roster-avatar {
  border-radius: 10px;
  height: 38px;
  width: 38px;
}

.projection-roster-person {
  display: grid;
  min-width: 0;
}

.projection-roster-person strong {
  color: #1a293f;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-roster-person small {
  color: #718196;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.projection-roster-progress {
  display: grid;
  gap: 5px;
}

.projection-roster-progress > span {
  background: #e2e8f0;
  border-radius: 999px;
  display: block;
  height: 7px;
  overflow: hidden;
}

.projection-roster-progress i {
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  border-radius: inherit;
  display: block;
  height: 100%;
}

.projection-roster-item.on-time .projection-roster-progress i {
  background: linear-gradient(90deg, #34d399, #059669);
}

.projection-roster-item.late .projection-roster-progress i {
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

.projection-roster-item.in-progress .projection-roster-progress i {
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}

.projection-roster-progress small {
  color: #718196;
  font-size: 0.72rem;
}

.projection-roster-state {
  background: #edf1f6;
  border-radius: 999px;
  color: #627287;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 6px 9px;
  white-space: nowrap;
}

.projection-roster-item.on-time .projection-roster-state {
  background: #e5f7f0;
  color: #087d5d;
}

.projection-roster-item.late .projection-roster-state {
  background: #fff0e5;
  color: #b45309;
}

.projection-roster-item.in-progress .projection-roster-state {
  background: #f1eafe;
  color: #6d28d9;
}

.projection-roster-empty {
  align-items: center;
  color: #75869a;
  display: flex;
  gap: 10px;
  grid-column: 1 / -1;
  justify-content: center;
}

.projection-assignment-summary {
  align-items: center;
  background: #f7f9fc;
  border-top: 1px solid #e6edf5;
  color: #63758a;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.72rem;
  gap: 18px;
  min-height: 36px;
  padding: 7px 15px;
}

.projection-assignment-summary span {
  align-items: center;
  display: flex;
  gap: 6px;
}

.projection-assignment-summary svg {
  color: #2563eb;
}

@media (max-width: 1500px) {
  .projection-task-hero {
    grid-template-columns: minmax(320px, 1fr) 235px 300px;
  }

  .projection-task-countdown > strong {
    font-size: clamp(1.45rem, 2vw, 2rem);
  }

  .projection-roster-item {
    grid-template-columns: 38px minmax(125px, 1fr) minmax(90px, 0.55fr) auto;
  }
}

@media (max-width: 1180px) {
  .projection-task-stage {
    grid-template-rows: auto auto auto;
    height: auto;
  }

  .projection-task-hero {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .projection-task-countdown {
    grid-column: 2;
    grid-row: 1 / 3;
  }

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

  .projection-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 280px minmax(360px, auto) minmax(280px, auto);
  }

  .projection-live-submissions {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .projection-roster-monitor {
    grid-column: 1 / 3;
    grid-row: 3;
  }
}

/* Điểm danh tài khoản: hộp ngang, gọn và không có thanh cuộn trên desktop. */
.account-attendance-dialog {
  padding: clamp(12px, 2.5vw, 30px);
}

.account-attendance-dialog .modal {
  max-height: none;
  max-width: 1100px;
  overflow: hidden;
  padding: 0;
  width: min(1100px, calc(100vw - 40px));
}

.account-attendance-dialog .modal-heading {
  margin: 0;
  padding: 16px 20px;
}

.account-attendance-form {
  display: block;
  overflow: hidden;
}

.account-attendance-layout {
  display: grid;
  grid-template-columns: minmax(290px, .8fr) minmax(520px, 1.45fr);
  min-height: 300px;
}

.attendance-identity-panel {
  background: linear-gradient(145deg, #17345f, #245ea9);
  color: #fff;
  display: grid;
  gap: 16px;
  padding: 22px;
}

.account-attendance-summary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
  padding: 13px;
}

.account-attendance-summary > span {
  align-items: center;
  background: rgba(255, 255, 255, .14);
  border-radius: 9px;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.account-attendance-summary small {
  color: #bfe0ff;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}

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

.attendance-identity-list > div {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 2px;
}

.attendance-identity-list small { color: #c9ddf5; }
.attendance-identity-list strong { max-width: 60%; overflow-wrap: anywhere; text-align: right; }
.attendance-identity-panel > p { align-items: center; color: #d7e9fb; display: flex; font-size: .74rem; gap: 7px; margin-top: auto; }

.attendance-profile-panel {
  display: grid;
  gap: 14px;
  padding: 20px 22px;
}

.attendance-profile-heading {
  align-items: center;
  border-bottom: 1px solid #e3eaf2;
  color: #235eab;
  display: flex;
  justify-content: space-between;
  padding-bottom: 11px;
}

.attendance-profile-heading > div { display: grid; gap: 2px; }
.attendance-profile-heading span { font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.attendance-profile-heading strong { color: #172033; font-size: 1rem; }
.attendance-profile-panel .field { gap: 6px; }
.attendance-profile-panel .field input { min-height: 44px; }
.attendance-profile-panel .dialog-actions { border: 0; margin: 0; padding: 0; }
.attendance-profile-panel .dialog-actions .primary-button { min-width: 190px; }

@media (max-width: 880px) {
  .account-attendance-dialog .modal {
    max-height: calc(100dvh - 20px);
    overflow: auto;
    width: min(680px, calc(100vw - 20px));
  }
  .account-attendance-layout { grid-template-columns: 1fr; }
  .attendance-identity-panel { padding: 16px 18px; }
  .attendance-identity-panel > p { display: none; }
}

@media (max-width: 560px) {
  .account-attendance-dialog { padding: 0; }
  .account-attendance-dialog .modal { border-radius: 0; height: 100dvh; max-height: none; width: 100vw; }
  .account-attendance-dialog .modal-heading { padding: 12px 14px; }
  .attendance-identity-panel,
  .attendance-profile-panel { padding: 13px 14px; }
  .attendance-identity-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .attendance-identity-list > div { align-items: flex-start; border: 0; display: grid; gap: 2px; justify-content: initial; padding: 0; }
  .attendance-identity-list strong { max-width: none; text-align: left; }
  .attendance-profile-panel .form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-profile-panel .dialog-actions .primary-button { width: 100%; }
}

@media (max-width: 820px) {
  .projection-modern .projection-header {
    align-items: flex-start;
    height: auto;
    padding-block: 12px;
  }

  .projection-modern .projection-status {
    align-items: flex-end;
    flex-direction: column;
  }

  .projection-task-stage {
    height: auto;
  }

  .projection-task-hero,
  .projection-visual-grid {
    grid-template-columns: 1fr;
  }

  .projection-task-countdown,
  .projection-live-submissions,
  .projection-roster-monitor {
    grid-column: 1;
    grid-row: auto;
  }

  .projection-task-kpis,
  .projection-roster-grid {
    grid-template-columns: 1fr;
  }

  .projection-visual-grid {
    grid-template-rows: repeat(4, auto);
  }

  .projection-status-visual {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .projection-roster-item {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .projection-roster-progress {
    display: none;
  }
}

/* Simplified projection layout */
.projection-task-stage {
  grid-template-rows: 154px 90px minmax(0, 1fr);
}

.projection-task-hero {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.projection-visual-grid {
  grid-template-columns: minmax(560px, 1.6fr) minmax(340px, 0.74fr);
  grid-template-rows: minmax(235px, 0.72fr) minmax(300px, 1.28fr);
}

.projection-status-overview {
  grid-column: 2;
  grid-row: 1;
}

.projection-live-submissions {
  grid-column: 2;
  grid-row: 2;
}

.projection-roster-monitor {
  grid-column: 1;
  grid-row: 1 / 3;
}

.projection-visual-heading {
  min-height: 58px;
  padding: 12px 16px;
}

.projection-visual-heading h2 {
  font-size: 1.02rem;
}

.projection-status-visual {
  grid-template-columns: 118px minmax(0, 1fr);
  padding: 13px 17px 11px;
}

.projection-status-donut {
  height: 112px;
  width: 112px;
}

.projection-status-donut strong {
  font-size: 1.55rem;
}

.projection-status-legend {
  gap: 9px;
}

.projection-live-list > article {
  flex: 0 0 auto;
  min-height: 76px;
}

.projection-roster-grid {
  grid-auto-rows: minmax(80px, 1fr);
  grid-template-columns: 1fr;
}

.projection-roster-item {
  gap: 14px;
  grid-template-columns: 44px minmax(220px, 1.2fr) minmax(180px, 0.8fr) auto;
  min-height: 80px;
  padding: 11px 14px;
}

.projection-roster-avatar {
  height: 42px;
  width: 42px;
}

.projection-roster-person strong {
  font-size: 0.88rem;
}

.projection-roster-person small,
.projection-roster-progress small,
.projection-roster-state {
  font-size: 0.74rem;
}

@media (max-width: 1180px) {
  .projection-task-stage {
    grid-template-rows: auto auto auto;
  }

  .projection-task-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .projection-task-countdown {
    grid-column: 2;
    grid-row: 1;
  }

  .projection-visual-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(320px, auto);
  }

  .projection-roster-monitor {
    grid-column: 1;
    grid-row: 1;
  }

  .projection-status-overview {
    grid-column: 1;
    grid-row: 2;
  }

  .projection-live-submissions {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 760px) {
  .projection-task-hero {
    grid-template-columns: 1fr;
  }

  .projection-task-countdown {
    grid-column: 1;
    grid-row: auto;
  }

  .projection-roster-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .projection-roster-progress {
    display: none;
  }
}

/* PHP runtime bridge: keep the v2 cascade above unchanged. */
html {
  font-size: 18px;
}

body,
button,
input,
select,
textarea {
  font-family:
    "Be Vietnam Pro", "Segoe UI Variable", "Segoe UI", "Noto Sans", Arial, sans-serif;
}

body {
  font-size: 1rem;
}

.hidden {
  display: none !important;
}

/* Attendance projection must stay inside a 16:9 viewport. These scoped rules
   intentionally override the older assignment-presentation theme below. */
.attendance-projection .attendance-projection-shell {
  box-sizing: border-box;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px;
}

.attendance-projection .projection-brand strong {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.attendance-projection .projection-brand small {
  color: #9fb3d2;
}

.attendance-projection main {
  gap: 22px;
  height: calc(100dvh - 108px);
  margin-top: 16px;
}

.attendance-projection .projection-qr-panel,
.attendance-projection .projection-stat-panel {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: clamp(18px, 2.3vh, 28px);
}

.attendance-projection .projection-qr-panel h1 {
  font-size: clamp(1.55rem, 3.2vh, 2.35rem);
  margin: 3px 0 12px;
}

.attendance-projection .projection-qr-stage,
.attendance-projection .projection-qr,
.attendance-projection .projection-qr-hidden {
  height: clamp(240px, 37vh, 310px);
  min-height: 0;
  width: clamp(240px, 37vh, 310px);
}

.attendance-projection .projection-qr img,
.attendance-projection .projection-qr canvas {
  height: clamp(210px, 31vh, 270px) !important;
  width: clamp(210px, 31vh, 270px) !important;
}

.attendance-projection .projection-qr-panel p {
  margin: 10px 0;
}

.attendance-projection .projection-stat-panel {
  gap: 14px;
  grid-template-columns: minmax(150px, 200px) 1fr;
}

.attendance-projection .projection-ring {
  height: clamp(160px, 23vh, 200px);
  width: clamp(160px, 23vh, 200px);
}

.attendance-projection .projection-ring strong {
  font-size: clamp(2.5rem, 6vh, 3.2rem);
}

.attendance-projection .projection-counts {
  gap: 8px;
}

.attendance-projection .projection-counts article {
  padding: 10px 15px;
}

.attendance-projection .projection-recent {
  min-height: 0;
  overflow: hidden;
}

.attendance-projection .projection-recent > div {
  gap: 6px;
}

.attendance-projection .projection-recent > div > div {
  padding: 7px 10px;
}

[data-view-panel] {
  display: none;
}

[data-view-panel].active {
  display: block;
}

.button {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 750;
  gap: 8px;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  text-decoration: none;
}

.button.primary {
  background: #2867e8;
  border: 1px solid #2867e8;
  color: #fff;
  box-shadow: 0 8px 22px rgba(40, 103, 232, 0.2);
}

.button.ghost {
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.button.danger {
  background: #fff;
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: var(--red);
}

.button.wide {
  width: 100%;
}

.small-button {
  min-height: 35px;
  padding: 0 11px;
}

.portal-form-dialog,
.quiz-dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(8, 28, 58, 0.3);
  color: var(--text);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 0;
  width: min(1160px, calc(100% - 30px));
}

.portal-form-dialog::backdrop,
.quiz-dialog::backdrop {
  background: rgba(9, 25, 49, 0.68);
  backdrop-filter: blur(3px);
}

dialog.modal-backdrop.portal-form-dialog {
  background: rgba(13, 31, 53, 0.42);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100vh;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: auto;
  padding: 20px;
  width: 100vw;
}

body:has(.account-attendance-dialog[open]) {
  overflow: hidden;
}

dialog.modal-backdrop.portal-form-dialog:not([open]) {
  display: none;
}

dialog.modal-backdrop.portal-form-dialog::backdrop {
  background: transparent;
}

.portal-form-dialog > .dialog-close,
.quiz-dialog > form:first-child .dialog-close {
  position: sticky;
  float: right;
  right: 15px;
  top: 12px;
  z-index: 5;
}

.dialog-close {
  align-items: center;
  background: #edf2f8;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  display: inline-flex;
  font-size: 1.45rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.portal-dialog-body,
#manage-content,
#account-content,
#quiz-content {
  padding: 28px;
}

.portal-dialog-heading,
.quiz-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 18px;
  padding-right: 48px;
}

.portal-dialog-heading h2,
.quiz-head h2 {
  font-size: 1.45rem;
  margin: 0 0 6px;
}

.portal-dialog-heading p,
.quiz-head p {
  color: var(--muted);
  line-height: 1.55;
}

.portal-dialog-form,
.question-form {
  display: grid;
  gap: 14px;
}

/* Canonical layout: dashboard, shared footer and assignment editor. */
.admin-main,
.student-workspace {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
}

.admin-content,
.student-content {
  flex: 1 0 auto;
  width: 100%;
}

.shared-footer {
  flex: 0 0 auto;
  width: 100%;
}

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

.monitor-page .dashboard-filter-bar {
  background: #fff;
  border-color: #dce5f0;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(18, 43, 77, 0.05);
  gap: 12px;
  grid-template-columns: repeat(4, minmax(145px, 1fr)) auto;
  padding: 14px 16px;
}

.monitor-page .dashboard-filter-bar output {
  border-top: 1px solid #e6edf5;
  grid-column: 1 / -1;
  padding-top: 10px;
  text-align: left;
}

.monitor-page .kpi-grid {
  gap: 14px;
}

.monitor-page .kpi-card {
  min-height: 112px;
  padding: 18px;
}

.monitor-page .kpi-detail-grid {
  gap: 10px;
}

.monitor-page .kpi-detail-grid article {
  border-radius: 13px;
  min-height: 72px;
  padding: 13px 14px;
}

.monitor-page .kpi-detail-grid strong {
  font-size: 1.08rem;
}

.monitor-page .analytics-board {
  gap: 16px;
}

.monitor-page .dashboard-donut-panel {
  grid-column: span 5;
}

.monitor-page .risk-panel {
  grid-column: span 7;
}

.monitor-page .delivery-panel {
  grid-column: 1 / -1;
}

.monitor-page .health-panel,
.monitor-page .trend-panel,
.monitor-page .assignment-average-panel,
.monitor-page .grade-panel {
  grid-column: span 6;
}

.monitor-page .dashboard-donut-panel,
.monitor-page .risk-panel {
  min-height: 245px;
}

.monitor-page .monitor-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-areas:
    "progress leaderboard"
    "matrix activity";
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.75fr);
}

/* Chuyển trạng thái thống nhất khi đồng bộ dữ liệu, tránh chớp trắng và mất ngữ cảnh. */
.stable-reload-overlay {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgba(244, 248, 253, 0.78);
  color: #17315d;
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: 10px;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 100000;
}

.stable-reload-overlay span {
  background: #fff;
  border: 1px solid #d9e4f1;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(36, 69, 114, 0.14);
  padding: 11px 16px;
}

.app-refreshing {
  cursor: progress;
}

.app-refreshing > :not(.stable-reload-overlay) {
  pointer-events: none;
}

.monitor-page .assignment-progress-panel {
  grid-area: progress;
}

.monitor-page .leaderboard-panel {
  grid-area: leaderboard;
}

.monitor-page .live-feed-panel {
  grid-area: activity;
}

.monitor-page .matrix-panel {
  grid-area: matrix;
}

.monitor-page .assignment-progress-panel,
.monitor-page .leaderboard-panel,
.monitor-page .live-feed-panel,
.monitor-page .matrix-panel {
  min-width: 0;
}

dialog.modal-backdrop.portal-form-dialog {
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(10px, 2vw, 24px);
}

dialog.modal-backdrop.portal-form-dialog[open] {
  display: flex;
}

#assignment-form-dialog > .modal.wide {
  background: #f8fafc;
  border: 1px solid #d8e2ee;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(8, 28, 58, 0.3);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(900px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  max-width: 1120px;
  overflow: hidden;
  padding: 0;
  width: min(1120px, 100%);
}

#assignment-form-dialog .modal-heading,
.assignment-editor-dialog .modal-heading {
  background: #fff;
  border-bottom: 1px solid #e1e8f0;
  margin: 0;
  padding: 18px 22px;
}

#assignment-form-dialog .assignment-editor-form,
.assignment-editor-dialog .assignment-editor-form {
  align-content: start;
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 22px 0;
  scrollbar-gutter: stable;
}

.assignment-editor-dialog {
  height: min(900px, calc(100dvh - 32px));
  max-width: 1120px;
  overflow: hidden;
  width: min(1120px, calc(100% - 28px));
}

.assignment-editor-dialog #manage-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  padding: 0;
}

.assignment-editor-layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.38fr) minmax(330px, 0.82fr);
}

.assignment-editor-content,
.assignment-editor-sidebar {
  align-content: start;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.assignment-editor-content {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  padding: 18px;
}

.assignment-editor-sidebar {
  position: sticky;
  top: 0;
}

.assignment-editor-section-heading {
  align-items: center;
  border-bottom: 1px solid #e7edf4;
  display: flex;
  gap: 10px;
  padding-bottom: 13px;
}

.assignment-editor-section-heading > span {
  align-items: center;
  background: #eaf1ff;
  border-radius: 10px;
  color: #245fe5;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.assignment-editor-section-heading > div {
  display: grid;
  gap: 2px;
}

.assignment-editor-section-heading strong {
  color: #15233b;
  font-size: 0.98rem;
}

.assignment-editor-section-heading small {
  color: #6d7e94;
  font-size: 0.74rem;
}

.assignment-editor-form .activity-type-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assignment-editor-sidebar .assignment-settings-panel,
.assignment-editor-sidebar .form-disclosure {
  background: #fff;
  border-radius: 16px;
}

.assignment-editor-sidebar .form-row.two,
.assignment-editor-sidebar .form-row.three {
  grid-template-columns: minmax(0, 1fr);
}

.assignment-editor-sidebar .form-disclosure .form-row {
  grid-template-columns: 1fr;
}

.assignment-editor-form > .audience-builder,
.assignment-editor-form > .class-checklist,
.assignment-editor-form > .class-share-selector {
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  padding: 17px;
}

.assignment-editor-form > .dialog-actions {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #dfe7f1;
  bottom: 0;
  margin: 0 -22px;
  padding: 14px 22px;
  position: sticky;
  z-index: 5;
}

@media (max-width: 1180px) {
  .monitor-page .dashboard-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-page .dashboard-filter-bar > button {
    justify-self: start;
  }

  .monitor-page .dashboard-donut-panel,
  .monitor-page .risk-panel,
  .monitor-page .delivery-panel,
  .monitor-page .health-panel,
  .monitor-page .trend-panel,
  .monitor-page .assignment-average-panel,
  .monitor-page .grade-panel {
    grid-column: 1 / -1;
  }

  .monitor-page .monitor-grid {
    grid-template-areas:
      "progress"
      "leaderboard"
      "activity"
      "matrix";
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-editor-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-editor-sidebar {
    position: static;
  }
}

@media (max-width: 680px) {
  .admin-main,
  .student-workspace {
    min-height: 100dvh;
  }

  .monitor-page .dashboard-filter-bar,
  .monitor-page .kpi-grid,
  .monitor-page .kpi-detail-grid,
  .monitor-page .dashboard-donut-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  dialog.modal-backdrop.portal-form-dialog {
    padding: 0;
  }

  #assignment-form-dialog > .modal.wide {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
  }

  #assignment-form-dialog .modal-heading,
  .assignment-editor-dialog .modal-heading {
    padding: 14px 16px;
  }

  #assignment-form-dialog .assignment-editor-form,
  .assignment-editor-dialog .assignment-editor-form {
    padding: 14px 14px 0;
  }

  .assignment-editor-dialog {
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100%;
  }

  .assignment-editor-content,
  .assignment-editor-form > .audience-builder,
  .assignment-editor-form > .class-checklist,
  .assignment-editor-form > .class-share-selector {
    border-radius: 12px;
    padding: 14px;
  }

  .class-share-toolbar {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .class-share-actions button {
    flex: 1;
  }

  .class-share-groups,
  .class-share-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .assignment-editor-form .activity-type-picker,
  .assignment-editor-sidebar .form-row.two,
  .assignment-editor-sidebar .form-row.three {
    grid-template-columns: 1fr;
  }

  .assignment-editor-form > .dialog-actions {
    margin: 0 -14px;
    padding: 12px 14px;
  }
}

.portal-dialog-form label,
.question-form label {
  color: var(--muted);
  display: grid;
  font-size: 0.78rem;
  font-weight: 700;
  gap: 7px;
}

.portal-dialog-form input:not([type="checkbox"]):not([type="radio"]),
.portal-dialog-form select,
.portal-dialog-form textarea,
.question-form input:not([type="checkbox"]):not([type="radio"]),
.question-form select,
.question-form textarea {
  background: #fff;
  border: 1px solid #cbd9ea;
  border-radius: 9px;
  color: var(--text);
  min-height: 43px;
  padding: 9px 11px;
  width: 100%;
}

.portal-dialog-form textarea,
.question-form textarea {
  min-height: 96px;
  resize: vertical;
}

.dialog-form-grid,
.question-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.dialog-actions,
.quiz-actions,
.button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.question-list {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
}

.question-item,
.review-answer {
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 14px;
}

.question-item {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto;
}

.question-item p,
.review-answer p {
  color: var(--muted);
  white-space: pre-wrap;
}

.account-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.submission-preview-grid {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.submission-preview-grid.single {
  grid-template-columns: 1fr;
}

.preview-frame {
  background: #fff;
  border: 0;
  height: 68vh;
  min-height: 520px;
  width: 100%;
}

.preview-image {
  max-height: 70vh;
  max-width: 100%;
  object-fit: contain;
}

.preview-media {
  background: #111;
  max-height: 65vh;
  width: 100%;
}

.preview-audio {
  width: min(600px, 90%);
}

.preview-text {
  background: #fff;
  color: #17243a;
  font: 0.82rem/1.65 Consolas, "Segoe UI", sans-serif;
  margin: 0;
  min-height: 420px;
  overflow: auto;
  padding: 24px;
  white-space: pre-wrap;
  width: 100%;
}

.toast {
  background: #17365f;
  border-radius: 11px;
  bottom: 24px;
  box-shadow: 0 16px 35px rgba(5, 26, 58, 0.25);
  color: #fff;
  max-width: 420px;
  opacity: 0;
  padding: 13px 17px;
  pointer-events: none;
  position: fixed;
  right: 24px;
  transform: translateY(20px);
  transition: 0.22s ease;
  z-index: 3000;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: #b92b3e;
}

.toast.success {
  background: #08775a;
}

.file-button input {
  display: none;
}

.projection-shell.projection-modern#projection-stage {
  inset: 0;
  position: fixed;
  z-index: 2500;
}

.class-admin-list {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.class-admin-row {
  align-items: center;
  background: #fbfdff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 12px 14px;
}

.class-admin-row > div:nth-child(2) {
  display: grid;
  gap: 3px;
}

.class-admin-row small {
  color: var(--muted);
}

.quiz-dialog:has(.quiz-player) {
  border: 0;
  border-radius: 0;
  height: 100vh;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  width: 100vw;
}

.quiz-dialog:has(.quiz-player) > form:first-child {
  display: none;
}

.quiz-dialog:has(.quiz-player) #quiz-content {
  height: 100%;
  padding: 0;
}

/* Vùng làm bài là phần tử fullscreen để không xung đột với dialog top-layer. */
#quiz-content:fullscreen,
#quiz-content:-webkit-full-screen {
  background: #f3f7fc;
  height: 100dvh;
  overflow: hidden;
  padding: 0 !important;
  width: 100dvw;
}

#quiz-content:fullscreen .quiz-player,
#quiz-content:-webkit-full-screen .quiz-player {
  height: 100%;
  inset: 0;
  width: 100%;
}

.quiz-dialog:has(#manage-content .modal-heading) > form:first-child {
  display: none;
}

.quiz-dialog:has(#manage-content .modal-heading) #manage-content {
  padding: 19px;
}

.quiz-dialog:has(.class-admin-layout),
.quiz-dialog:has(.quiz-review-list),
.quiz-dialog:has(.credentials-table-wrap) {
  width: min(920px, calc(100% - 30px));
}

.question-editor-dialog,
.quiz-dialog:has(.question-builder-layout) {
  height: min(940px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  max-width: none;
  overflow: hidden;
  width: min(1480px, calc(100vw - 24px));
}

.question-editor-dialog #manage-content,
.quiz-dialog:has(.question-builder-layout) #manage-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.question-editor-dialog .modal-heading,
.quiz-dialog:has(.question-builder-layout) .modal-heading {
  background: #fff;
  border-bottom: 1px solid #dfe7f1;
  margin: 0;
  padding: 18px 22px;
}

.question-editor-dialog .question-builder-layout,
.quiz-dialog:has(.question-builder-layout) .question-builder-layout {
  grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.8fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.question-editor-dialog .question-bank-panel,
.quiz-dialog:has(.question-builder-layout) .question-bank-panel {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.question-editor-dialog .question-bank-list,
.quiz-dialog:has(.question-builder-layout) .question-bank-list {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.question-editor-dialog .question-editor,
.quiz-dialog:has(.question-builder-layout) .question-editor {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px;
  scrollbar-gutter: stable;
}

.question-editor-dialog .question-editor > .dialog-actions,
.quiz-dialog:has(.question-builder-layout) .question-editor > .dialog-actions {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #dfe7f1;
  bottom: -22px;
  margin: 0 -28px -22px;
  padding: 14px 28px;
  position: sticky;
  z-index: 4;
}

@media (min-width: 761px) {
  /* Desktop dùng một vùng cuộn chung, tránh hai thanh cuộn song song trong trình biên soạn. */
  .question-editor-dialog .question-builder-layout,
  .quiz-dialog:has(.question-builder-layout) .question-builder-layout {
    align-items: start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .question-editor-dialog .question-bank-panel,
  .quiz-dialog:has(.question-builder-layout) .question-bank-panel,
  .question-editor-dialog .question-editor,
  .quiz-dialog:has(.question-builder-layout) .question-editor {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .question-editor-dialog .question-bank-list,
  .quiz-dialog:has(.question-builder-layout) .question-bank-list {
    max-height: none;
    overflow: visible;
  }

  .question-editor-dialog .question-editor > .dialog-actions,
  .quiz-dialog:has(.question-builder-layout) .question-editor > .dialog-actions {
    bottom: 0;
  }
}

.quiz-dialog:has(.report-options) {
  width: min(720px, calc(100% - 30px));
}

dialog:has(> .preview-backdrop) {
  overflow: visible !important;
}

dialog > .preview-backdrop {
  z-index: 9999;
}

/* Keep the enlarged professional type fully visible in projection mode. */
.projection-task-stage {
  grid-template-rows: 176px 90px minmax(0, 1fr);
}

.projection-task-countdown > strong {
  font-size: clamp(1.55rem, 2vw, 2.15rem);
  line-height: 1;
  margin: 6px 0 4px;
}

@media (max-width: 820px) {
  html {
    font-size: 17px;
  }

  .dialog-form-grid,
  .dialog-form-grid.two,
  .question-form-grid,
  .account-grid,
  .submission-preview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .question-editor-dialog,
  .quiz-dialog:has(.question-builder-layout) {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
  }

  .question-editor-dialog .modal-heading,
  .quiz-dialog:has(.question-builder-layout) .modal-heading {
    padding: 14px 16px;
  }

  .question-editor-dialog .question-builder-layout,
  .quiz-dialog:has(.question-builder-layout) .question-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(150px, 30dvh) minmax(0, 1fr);
    height: 100%;
    max-height: none;
  }

  .question-editor-dialog .question-bank-panel,
  .quiz-dialog:has(.question-builder-layout) .question-bank-panel {
    border-bottom: 1px solid #dce5ef;
    border-right: 0;
    max-height: none;
  }

  .question-editor-dialog .question-editor,
  .quiz-dialog:has(.question-builder-layout) .question-editor {
    overflow-y: auto;
    padding: 16px;
  }

  .question-editor-dialog .question-editor > .dialog-actions,
  .quiz-dialog:has(.question-builder-layout) .question-editor > .dialog-actions {
    bottom: -16px;
    margin: 0 -16px -16px;
    padding: 12px 16px;
  }
}

/* Usability consolidation: settings, navigation, results and attendance. */
:root {
  --admin-sidebar-width: 294px;
}

.admin-shell {
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
}

.sidebar-brand > div {
  min-width: 0;
}

.sidebar-brand strong,
.sidebar nav button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar nav button {
  grid-template-columns: 21px minmax(0, 1fr) auto;
  padding-inline: 14px;
}

.settings-page {
  max-width: 1360px;
}

.settings-heading {
  align-items: center;
}

.settings-reset-button {
  background: #fff;
  min-height: 44px;
  white-space: nowrap;
}

.settings-form {
  max-width: 1280px;
}

.settings-card {
  border-color: #d9e3ee;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(30, 64, 120, 0.05);
  padding: 24px;
}

.settings-footer-grid {
  gap: 16px;
}

.settings-footer-field {
  align-content: start;
  background: #f8faff;
  border: 1px solid #dce6f2;
  border-radius: 13px;
  display: grid;
  gap: 9px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: 14px;
}

.settings-footer-field-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.settings-footer-field-head > strong {
  color: #26364c;
  font-size: 0.84rem;
}

.settings-footer-field > input,
.settings-footer-field > textarea {
  background: #fff;
  border: 1px solid #cbd8e7;
  border-radius: 10px;
  color: #172033;
  font: inherit;
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}

.settings-footer-field > textarea {
  min-height: 76px;
  resize: vertical;
}

.settings-footer-field > :is(input, textarea):focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: 0;
}

.settings-footer-field > small {
  color: #74849a;
  font-size: 0.72rem;
}

.visibility-switch {
  align-items: center;
  color: #5a6b80;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 7px;
}

.visibility-switch input {
  accent-color: #2563eb;
  height: 18px;
  width: 18px;
}

.settings-actions {
  align-items: center;
  background: rgba(244, 247, 251, 0.96);
  border-top: 1px solid #dce5ef;
  bottom: 0;
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  padding: 14px 0 4px;
  position: sticky;
  z-index: 8;
}

.settings-actions > span {
  color: #718096;
  font-size: 0.75rem;
}

.settings-actions .primary-button {
  min-width: 164px;
}

.monitor-page .monitor-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(410px, 0.9fr);
}

.leaderboard-panel {
  min-width: 410px;
}

.leaderboard-list {
  padding: 4px 18px 14px;
}

.leader-row {
  gap: 12px;
  grid-template-columns: 28px 42px minmax(150px, 1fr) minmax(72px, auto);
  min-height: 70px;
  padding: 10px 0;
}

.leader-row .avatar {
  height: 40px;
  width: 40px;
}

.leader-copy {
  align-content: center;
  display: grid;
  min-width: 0;
}

.leader-copy > strong {
  font-size: 0.86rem !important;
  line-height: 1.3;
}

.leader-copy > span {
  margin-top: 3px;
}

.leader-score-bar {
  margin-top: 8px;
}

.rank-score {
  align-content: center;
  display: grid;
  font-variant-numeric: tabular-nums;
  justify-items: end;
  line-height: 1.1;
  min-width: 72px;
  white-space: nowrap;
}

.rank-score > span {
  color: #1d4ed8;
  font-size: 1rem;
  font-weight: 850;
}

.rank-score > small {
  color: #8290a3;
  font-size: 0.66rem;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
}

.submission-preview-header {
  gap: 16px;
  padding: 12px 16px;
}

.submission-preview-title {
  flex: 1 1 auto;
  min-width: 0;
}

.submission-preview-title > div {
  min-width: 0;
}

.submission-preview-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px !important;
}

.submission-preview-actions :is(button, a) {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  justify-content: center;
  min-height: 42px;
  white-space: nowrap;
}

.submission-history-button {
  background: #eef5ff;
  border-color: #bfd4f4;
  color: #1d4ed8;
  min-width: 132px;
}

.preview-close-button {
  height: 42px;
  padding: 0;
  width: 42px;
}

.submission-version-panel {
  box-shadow: 0 12px 26px rgba(30, 64, 120, 0.08);
}

.attendance-session-grid {
  grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
}

.attendance-session-card {
  border-color: #d7e3f0;
  border-radius: 19px;
  box-shadow: 0 16px 38px rgba(30, 64, 120, 0.08);
  min-height: 0;
  padding: 21px;
}

.attendance-session-card::before {
  background: #94a3b8;
  height: 5px;
}

.attendance-session-card.status-open::before {
  background: linear-gradient(90deg, #10b981, #2dd4bf);
}

.attendance-session-card.status-scheduled::before {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.attendance-session-card.status-draft::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.attendance-session-card.status-cancelled {
  background: #f8fafc;
  opacity: 0.82;
}

.session-status-group {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.session-mode {
  align-items: center;
  color: #617188;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 5px;
}

.session-live-indicator {
  align-items: center;
  color: #087f5b;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 850;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.session-live-indicator i {
  animation: live-pulse 1.4s ease-in-out infinite;
  background: #10b981;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.attendance-session-card h2 {
  color: #172033;
  font-size: 1.16rem;
  margin-top: 16px;
}

.session-class-line {
  background: #f5f8fc;
  border: 1px solid #e0e8f2;
  border-radius: 10px;
  margin-top: 14px;
  padding: 9px 11px;
}

.session-class-line > span {
  color: #2563eb;
}

.session-class-line > strong {
  color: #43546a;
  font-size: 0.78rem;
}

.session-progress-row {
  background: linear-gradient(135deg, #eef5ff, #f7fbff);
  border: 1px solid #dce8f7;
  margin-top: 12px;
  padding: 14px;
}

.session-progress-copy > small {
  color: #2563eb;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.session-progress-copy > strong {
  color: #172033;
  font-size: 0.96rem;
}

.session-time-grid {
  gap: 10px;
}

.session-time-grid > span {
  align-items: center;
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-rows: auto auto;
  padding: 10px 11px;
}

.session-time-grid > span > svg {
  color: #2563eb;
  grid-row: 1 / 3;
}

.session-time-grid > span > small,
.session-time-grid > span > strong {
  grid-column: 2;
  min-width: 0;
}

.session-time-grid > span > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-primary-actions {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2px;
}

.session-primary-actions > button {
  min-height: 42px;
  width: 100%;
}

.session-secondary-actions {
  border-top: 1px solid #e2e9f2;
  margin-top: 13px;
  padding-top: 10px;
}

.session-secondary-actions > summary {
  align-items: center;
  color: #53657b;
  cursor: pointer;
  display: flex;
  font-size: 0.77rem;
  font-weight: 750;
  gap: 7px;
  list-style: none;
  width: fit-content;
}

.session-secondary-actions > summary::-webkit-details-marker {
  display: none;
}

.session-secondary-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 10px;
}

.session-secondary-actions button {
  align-items: center;
  background: #fff;
  border: 1px solid #d9e3ee;
  border-radius: 8px;
  color: #46586e;
  display: inline-flex;
  font-size: 0.73rem;
  font-weight: 700;
  gap: 5px;
  min-height: 34px;
  padding: 0 9px;
}

.session-secondary-actions button.danger-action {
  border-color: #fecdd3;
  color: #c52e3f;
}

.attendance-live-overview {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(120px, 0.65fr));
  margin: 16px;
}

.attendance-live-overview > article {
  align-content: center;
  background: #f7f9fc;
  border: 1px solid #e0e8f2;
  border-radius: 13px;
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 13px 15px;
}

.attendance-live-overview > article > small {
  color: #718096;
  font-size: 0.68rem;
  font-weight: 750;
}

.attendance-live-overview > article > strong {
  color: #172033;
  font-size: 1.35rem;
}

.attendance-live-overview .attendance-live-rate {
  align-items: center;
  background: linear-gradient(135deg, #eaf2ff, #f2f7ff);
  border-color: #cfe0f8;
  display: flex;
  gap: 12px;
}

.attendance-live-rate > span {
  align-items: center;
  background: #2563eb;
  border-radius: 11px;
  color: #fff;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.attendance-live-rate > div {
  display: grid;
}

.attendance-live-rate small {
  color: #52709a;
  font-size: 0.66rem;
  font-weight: 850;
}

.attendance-live-rate strong {
  color: #1d4ed8;
  font-size: 1.55rem;
}

.attendance-report-toolbar {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(145px, 0.72fr)) auto;
}

.attendance-export-actions {
  display: flex;
  gap: 7px;
}

.attendance-export-actions > button {
  min-height: 42px;
  white-space: nowrap;
}

.attendance-report-table {
  border: 1px solid #dfe7f1;
  border-radius: 13px;
}

.attendance-report-table .management-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.account-attendance-dialog .modal {
  border: 1px solid #cddbea;
  box-shadow: 0 34px 90px rgba(15, 39, 72, 0.28);
}

.account-attendance-dialog .modal-heading {
  background: #fff;
}

.attendance-identity-panel {
  background: linear-gradient(150deg, #153b70, #2469b8 72%, #2b7bc6);
}

.attendance-profile-panel {
  background: #fff;
}

.attendance-profile-panel .primary-button {
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

@media (max-width: 1320px) {
  .monitor-page .monitor-grid {
    grid-template-areas:
      "progress"
      "leaderboard"
      "activity"
      "matrix";
    grid-template-columns: minmax(0, 1fr);
  }

  .leaderboard-panel {
    min-width: 0;
  }

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

  .attendance-export-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Read-only badge for content shared from outside the managed class. */
.scope-readonly-note {
  align-items: center;
  background: #f3f6fa;
  border: 1px solid #dce5ef;
  border-radius: 9px;
  color: #66778c;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 6px;
  line-height: 1.35;
  padding: 7px 10px;
}

/* Final form consolidation: compact controls and one primary modal scroller. */
#lecture-form-dialog > .modal.wide,
#attendance-form-dialog > .modal.wide {
  background: #f8fafc;
  border: 1px solid #d8e2ee;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(8, 28, 58, 0.3);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(880px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  max-width: 1040px;
  overflow: hidden;
  padding: 0;
  width: min(1040px, 100%);
}

#lecture-form-dialog .modal-heading,
#attendance-form-dialog .modal-heading {
  background: #fff;
  border-bottom: 1px solid #e1e8f0;
  margin: 0;
  padding: 18px 22px;
}

#lecture-form-dialog .lecture-editor-form,
#attendance-form-dialog .attendance-session-form {
  align-content: start;
  display: grid;
  gap: 15px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 22px 0;
  scrollbar-gutter: stable;
}

#lecture-form-dialog .dialog-actions,
#attendance-form-dialog .dialog-actions {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #dfe7f1;
  bottom: 0;
  margin: 0 -22px;
  padding: 14px 22px;
  position: sticky;
  z-index: 5;
}

.section-editor-grid,
.section-add-grid {
  grid-template-columns: minmax(240px, 1.65fr) minmax(170px, .8fr) minmax(120px, .5fr) 136px;
}

.section-required-field {
  justify-self: stretch;
  min-width: 0;
  width: 136px;
}

.lecture-resource-editor {
  overflow: visible;
}

.resource-add-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, .65fr) minmax(190px, .85fr) minmax(300px, 1.45fr) auto;
}

.resource-add-grid > .outline-button {
  min-height: 46px;
  white-space: nowrap;
}

.attendance-primary-settings {
  background: #f3f7fd;
  border: 1px solid #d8e4f2;
  border-radius: 13px;
  padding: 14px;
}

.branding-settings-grid .branding-card {
  min-height: 148px;
}

.branding-settings-grid .branding-preview {
  background: #fff;
  border-color: #cbd9e9;
}

.student-response-section[data-submitted="true"] {
  border-color: #a7e4cd;
  box-shadow: inset 4px 0 0 #16a878;
}

@media (max-width: 900px) {
  .section-editor-grid,
  .section-add-grid,
  .resource-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resource-add-grid > .outline-button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  #lecture-form-dialog > .modal.wide,
  #attendance-form-dialog > .modal.wide {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
  }

  #lecture-form-dialog .modal-heading,
  #attendance-form-dialog .modal-heading {
    padding: 14px 16px;
  }

  #lecture-form-dialog .lecture-editor-form,
  #attendance-form-dialog .attendance-session-form {
    padding: 14px 14px 0;
  }

  #lecture-form-dialog .dialog-actions,
  #attendance-form-dialog .dialog-actions {
    margin: 0 -14px;
    padding: 12px 14px;
  }

  .section-editor-grid,
  .section-add-grid,
  .resource-add-grid,
  .attendance-primary-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-required-field {
    justify-self: start;
    width: auto;
  }
}

/* Student assignments: one readable task flow with a full-width essay workspace. */
.student-assignment-list {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.student-assignment-card,
.student-assignment-main,
.student-section-stack,
.student-response-section {
  min-width: 0;
  width: 100%;
}

.student-assignment-card {
  grid-template-columns: 92px minmax(0, 1fr);
}

.student-assignment-main {
  gap: 17px;
  padding: 24px clamp(20px, 2.4vw, 34px);
}

.student-response-section {
  background: #f8fbff;
  border-color: #d7e3f2;
  padding: clamp(17px, 2vw, 24px);
}

.student-response-section > header {
  margin-bottom: 14px;
}

.student-upload {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
  width: 100%;
}

.student-upload > .submission-text-field {
  align-items: stretch;
  background: transparent;
  border: 0;
  color: #26364c;
  cursor: default;
  display: grid;
  gap: 8px;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.student-upload > .submission-text-field > span {
  color: #26364c;
  font-size: 0.9rem;
  font-weight: 750;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.student-upload .submission-text-field textarea {
  background: #ffffff;
  border: 1px solid #c7d6e8;
  border-radius: 12px;
  color: #172033;
  display: block;
  font: inherit;
  font-size: 1rem;
  line-height: 1.65;
  min-height: 270px;
  padding: 16px 17px;
  resize: vertical;
  width: 100%;
}

.student-upload .submission-text-field textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: 0;
}

.student-upload > .student-upload-file {
  align-items: center;
  background: #f1f6ff;
  border: 1px dashed #8fb2e8;
  border-radius: 12px;
  display: flex;
  min-height: 66px;
  padding: 12px 15px;
  width: 100%;
}

.student-upload > .student-upload-file > span {
  color: #52657d;
  line-height: 1.45;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

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

.student-upload-actions > .primary-button {
  min-height: 44px;
  min-width: 210px;
}

.student-upload-actions > .form-error {
  flex: 1 0 100%;
  order: 2;
}

@media (max-width: 680px) {
  .student-assignment-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .student-assignment-index {
    align-items: center;
    border-bottom: 1px solid #d7e4f7;
    border-right: 0;
    flex-direction: row;
    gap: 6px;
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 16px;
  }

  .student-assignment-index strong {
    font-size: 1rem;
    margin: 0;
  }

  .student-assignment-main {
    padding: 17px 15px 20px;
  }

  .student-assignment-title {
    align-items: stretch;
    flex-direction: column;
  }

  .student-assignment-title > .status-pill {
    align-self: flex-start;
  }

  .student-response-section {
    border-radius: 13px;
    padding: 15px 13px;
  }

  .student-upload .submission-text-field textarea {
    font-size: 0.96rem;
    min-height: 230px;
    padding: 14px;
  }

  .student-upload-actions,
  .student-upload-actions > .primary-button {
    width: 100%;
  }
}

/* Keep the configurable login title on one balanced line on desktop. */
@media (min-width: 901px) {
  .auth-copy {
    max-width: min(100%, 820px);
    width: 100%;
  }

  .auth-copy h1 {
    font-size: clamp(2.25rem, 4vw, 4.25rem);
    letter-spacing: -0.048em;
    white-space: nowrap;
  }
}

/* Shared footer: compact identity and lightweight multi-line contact details. */
.shared-footer {
  background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
  border-top: 1px solid #d8e3ef;
  box-shadow: inset 0 2px 0 #2f6fed;
  color: #5b6d83;
  display: block;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 0;
  width: 100%;
}

.shared-footer-shell {
  align-items: center;
  display: grid;
  gap: clamp(20px, 2.5vw, 36px);
  grid-template-columns: minmax(250px, 0.72fr) minmax(460px, 1.5fr);
  margin: 0 auto;
  max-width: 1720px;
  padding: 15px clamp(22px, 3vw, 48px) 13px;
  width: 100%;
}

.shared-footer-shell.contacts-only,
.shared-footer-shell.identity-only {
  grid-template-columns: minmax(0, 1fr);
}

.shared-footer-identity {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
  min-width: 0;
}

.shared-footer-mark {
  align-items: center;
  background: linear-gradient(145deg, #3478f6, #2058d5);
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(35, 89, 204, 0.16);
  color: #fff;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.shared-footer-mark > span {
  align-items: center;
  color: #fff;
  display: inline-flex;
  justify-content: center;
}

.shared-footer-mark > span svg {
  color: #fff;
  display: block;
  stroke: currentColor;
}

.shared-footer-mark.has-image {
  background: #fff;
  border-color: #d6e1ef;
  padding: 4px;
}

.shared-footer-mark.has-image img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.shared-footer-identity-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.shared-footer-eyebrow {
  color: #2563d9;
  display: block;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.shared-footer .shared-footer-identity-copy > strong {
  color: #13243d;
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shared-footer .shared-footer-unit-locality {
  display: block;
  margin-top: 1px;
}

.shared-footer-notes {
  display: grid;
  gap: 3px;
  margin-top: 1px;
}

.shared-footer .shared-footer-notes p {
  color: #64758b;
  font-size: 0.7rem;
  line-height: 1.38;
  margin: 0;
  max-width: 620px;
}

.shared-footer-contact-grid {
  display: grid;
  column-gap: clamp(18px, 2.2vw, 34px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 4px;
  min-width: 0;
}

.shared-footer .shared-footer-contact {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 9px;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 36px;
  min-width: 0;
  padding: 3px 4px;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.shared-footer-contact-icon {
  align-items: center;
  background: #e9f1ff;
  border-radius: 8px;
  color: #2868df;
  display: inline-flex;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.shared-footer .shared-footer-contact-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.shared-footer .shared-footer-contact-copy small {
  color: #74859a;
  display: block;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.shared-footer .shared-footer-contact-copy strong {
  color: #273a54;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.shared-footer-bottom {
  background: rgba(231, 237, 245, 0.52);
  border-top: 1px solid #d9e3ee;
}

.shared-footer-bottom small {
  color: #687a90;
  display: block;
  font-size: 0.68rem;
  line-height: 1.35;
  margin: 0 auto;
  max-width: 1720px;
  padding: 7px clamp(22px, 3vw, 48px);
  width: 100%;
}

@media (hover: hover) {
  .shared-footer a.shared-footer-contact:hover {
    background: #edf3fb;
    color: #1e56bd;
  }
}

@media (max-width: 820px) {
  .shared-footer-shell {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .shared-footer-shell {
    gap: 12px;
    padding: 14px 16px 12px;
  }

  .shared-footer-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shared-footer-identity {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .shared-footer-mark {
    border-radius: 9px;
    height: 36px;
    width: 36px;
  }

  .shared-footer-bottom small {
    padding: 7px 16px;
  }
}

@media (max-width: 900px) {
  .settings-footer-grid,
  .branding-settings-grid,
  .attendance-live-overview {
    grid-template-columns: 1fr;
  }

  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-actions .primary-button {
    width: 100%;
  }

  .submission-preview-header {
    align-items: flex-start;
  }

  .submission-preview-actions .outline-button span {
    display: none;
  }

  .submission-history-button {
    min-width: 42px;
  }
}

@media (max-width: 760px) {
  :root {
    --admin-sidebar-width: 310px;
  }

  .admin-shell {
    display: block;
  }

  .settings-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-reset-button {
    width: 100%;
  }

  .leader-row {
    grid-template-columns: 24px 38px minmax(0, 1fr) minmax(62px, auto);
  }

  .submission-preview-header {
    flex-wrap: wrap;
  }

  .submission-preview-title {
    flex-basis: 100%;
  }

  .submission-preview-actions {
    justify-content: flex-end;
    width: 100%;
  }

  .attendance-session-grid {
    grid-template-columns: 1fr;
  }

  .session-primary-actions,
  .attendance-report-toolbar {
    grid-template-columns: 1fr;
  }

  .attendance-export-actions {
    grid-column: auto;
  }

  .attendance-export-actions > button {
    flex: 1;
  }
}

/* Dashboard balance and stable compact navigation. */
.last-update {
  gap: 5px;
  white-space: nowrap;
}

.last-update time {
  color: #52657d;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.monitor-page .monitor-grid {
  align-items: start;
  grid-template-areas:
    "progress activity"
    "matrix leaderboard";
  grid-template-columns: minmax(0, 1.55fr) minmax(500px, 0.85fr);
}

.monitor-page .monitor-grid > .ioc-panel {
  border-color: #dce5ef;
  border-radius: 17px;
  box-shadow: 0 10px 28px rgba(30, 64, 111, 0.055);
  overflow: hidden;
}

.monitor-page .monitor-grid > .ioc-panel > .panel-heading {
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
  min-height: 72px;
}

.monitor-page .assignment-progress-row,
.monitor-page .live-feed > button {
  background: #f8faff;
  border: 1px solid #e4ebf4;
  border-radius: 12px;
  margin-block: 8px;
  padding: 12px;
}

.monitor-page .leaderboard-panel {
  min-width: 0;
}

@media (min-width: 761px) {
  .admin-shell.sidebar-collapsed {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .admin-shell.sidebar-collapsed .sidebar {
    padding-inline: 14px;
  }

  .admin-shell.sidebar-collapsed .sidebar-brand {
    justify-content: center;
    margin-bottom: 14px;
    min-height: 64px;
    padding: 0 0 18px;
  }

  .admin-shell.sidebar-collapsed .sidebar-brand > span {
    flex: 0 0 44px;
  }

  .admin-shell.sidebar-collapsed .sidebar-collapse {
    background: #ffffff;
    border-color: #cbd8e7;
    box-shadow: 0 4px 12px rgba(30, 64, 111, 0.16);
    color: #52657d;
    height: 28px;
    margin: 0;
    position: absolute;
    right: -14px;
    top: 8px;
    width: 28px;
    z-index: 3;
  }

  .admin-shell.sidebar-collapsed .sidebar nav {
    justify-items: center;
  }

  .admin-shell.sidebar-collapsed .sidebar nav button {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: center;
    min-height: 50px;
    padding: 0;
    width: 54px;
  }

  .admin-shell.sidebar-collapsed .sidebar nav button svg {
    flex: 0 0 auto;
    height: 20px;
    width: 20px;
  }

  .admin-shell.sidebar-collapsed .sidebar-user {
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 1320px) {
  .monitor-page .monitor-grid {
    grid-template-areas:
      "progress"
      "activity"
      "leaderboard"
      "matrix";
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Absolute final form layout overrides. Keep this block last. */
#lecture-form-dialog > .modal.wide {
  max-width: 1180px;
  width: min(1180px, calc(100vw - 32px));
}

.section-editor-grid,
.section-add-grid {
  grid-template-columns: minmax(280px, 1.7fr) minmax(210px, .9fr) minmax(150px, .55fr);
}

.section-required-field {
  align-self: auto;
  background: #f0f6ff;
  border-color: #c9dcf7;
  color: #27466f;
  justify-content: flex-start;
  margin-top: 11px;
  min-height: 48px;
  padding-inline: 15px;
  width: 100%;
}

.resource-add-grid {
  grid-template-columns: minmax(210px, .7fr) minmax(320px, 1.3fr);
}

.resource-upload-row {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
}

.resource-upload-row > .field,
.resource-upload-row > .lecture-upload-picker {
  min-width: 0;
}

.resource-upload-row > .outline-button {
  min-height: 64px;
  min-width: 156px;
  white-space: nowrap;
}

.attendance-primary-settings {
  background: transparent;
  border: 0;
  gap: 14px;
  padding: 0;
}

.attendance-primary-settings > .field {
  background: #f3f7fd;
  border: 1px solid #d8e4f2;
  border-radius: 13px;
  padding: 13px 14px 14px;
}

.branding-settings-grid {
  align-items: stretch;
}

.branding-settings-grid .branding-upload-card {
  align-items: center;
  background: #f7faff;
  border: 1px solid #d8e4f2;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  min-height: 154px;
  padding: 14px;
}

.branding-settings-grid .branding-preview {
  background: #fff;
  border: 1px dashed #a9bfdb;
  border-radius: 12px;
  height: 108px;
  overflow: hidden;
  width: 112px;
}

.branding-settings-grid .background-preview img { object-fit: cover; }
.branding-settings-grid .logo-preview img { object-fit: contain; padding: 6px; }
.branding-settings-grid .danger-link { grid-column: 3; }

@media (max-width: 900px) {
  .resource-add-grid,
  .section-editor-grid,
  .section-add-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-upload-row { grid-template-columns: minmax(0, 1fr); }
  .resource-upload-row > .outline-button { min-height: 46px; width: 100%; }

  .branding-settings-grid .branding-upload-card {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .branding-settings-grid .branding-preview { height: 88px; width: 92px; }
  .branding-settings-grid .branding-file-button,
  .branding-settings-grid .danger-link { grid-column: 2; justify-self: start; }
}

@media (max-width: 620px) {
  .branding-settings-grid .branding-upload-card { grid-template-columns: minmax(0, 1fr); }
  .branding-settings-grid .branding-preview { height: 140px; width: 100%; }
  .branding-settings-grid .branding-file-button,
  .branding-settings-grid .danger-link { grid-column: 1; }
}

/* Assignment section manager: one vertical scroller, no horizontal overflow. */
.quiz-dialog.section-manager-dialog {
  height: min(920px, calc(100dvh - 28px));
  max-height: calc(100dvh - 28px);
  max-width: 1240px;
  overflow: hidden;
  width: min(1240px, calc(100vw - 28px));
}

.section-manager-dialog > form:first-child {
  display: none;
}

.section-manager-dialog #manage-content {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  scrollbar-gutter: stable;
  width: 100%;
}

.section-manager-dialog .modal-heading,
.section-manager-dialog .section-manager-intro,
.section-manager-dialog .assignment-section-list,
.section-manager-dialog .assignment-section-card,
.section-manager-dialog .assignment-section-add,
.section-manager-dialog .dialog-actions {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.section-manager-dialog .section-editor-grid,
.section-manager-dialog .section-add-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 0.9fr) minmax(140px, 0.55fr);
  width: 100%;
}

.section-manager-dialog .section-editor-grid > *,
.section-manager-dialog .section-add-grid > *,
.section-manager-dialog .field,
.section-manager-dialog .field :is(input, select, textarea) {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.section-manager-dialog .section-required-field {
  max-width: 100%;
  white-space: normal;
}

.section-manager-dialog .dialog-actions {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid #dfe7f1;
  bottom: -20px;
  margin: 18px 0 -20px;
  padding: 14px 0 20px;
  position: sticky;
  z-index: 5;
}

@media (max-width: 820px) {
  .section-manager-dialog .section-editor-grid,
  .section-manager-dialog .section-add-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .quiz-dialog.section-manager-dialog {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
  }

  .section-manager-dialog #manage-content {
    padding: 14px;
    scrollbar-gutter: auto;
  }

  .section-manager-dialog .assignment-section-card,
  .section-manager-dialog .assignment-section-add {
    padding: 13px;
  }

  .section-manager-dialog .dialog-actions {
    bottom: -14px;
    margin-bottom: -14px;
    padding-bottom: 14px;
  }
}

/* Hộp điểm danh dùng toàn bộ lớp phủ của dialog, không hiện viền mặc định trình duyệt. */
.account-attendance-dialog {
  border: 0;
  box-sizing: border-box;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  width: 100vw;
}

/* Điểm danh trên điện thoại: một cột, một vùng cuộn và không tràn ngang. */
@media (max-width: 600px) {
  .account-attendance-dialog {
    align-items: center;
    padding: 8px;
  }

  .account-attendance-dialog .modal {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100dvh - 16px);
    max-width: none;
    overflow: hidden;
    width: calc(100vw - 16px);
  }

  .account-attendance-dialog .modal-heading {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 12px;
  }

  .account-attendance-dialog .modal-heading h2 { font-size: 1rem; }
  .account-attendance-dialog .modal-heading p { font-size: .72rem; }

  .account-attendance-form {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .account-attendance-layout {
    display: block;
    min-height: 0;
    width: 100%;
  }

  .attendance-identity-panel {
    gap: 10px;
    padding: 11px 12px;
  }

  .account-attendance-summary {
    gap: 9px;
    padding: 9px 10px;
  }

  .account-attendance-summary > span {
    height: 32px;
    width: 32px;
  }

  .account-attendance-summary small { font-size: .59rem; }
  .account-attendance-summary strong { font-size: .86rem; }

  .attendance-identity-list {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .attendance-identity-list > div {
    align-items: flex-start;
    background: rgba(255, 255, 255, .09);
    border: 0;
    border-radius: 8px;
    display: grid;
    gap: 2px;
    justify-content: initial;
    min-width: 0;
    padding: 7px;
  }

  .attendance-identity-list small {
    font-size: .56rem;
    line-height: 1.2;
  }

  .attendance-identity-list strong {
    display: block;
    font-size: .72rem;
    max-width: none;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attendance-profile-panel {
    gap: 10px;
    padding: 12px;
  }

  .attendance-profile-heading { padding-bottom: 8px; }
  .attendance-profile-heading strong { font-size: .9rem; }

  .attendance-profile-panel .form-row.two {
    gap: 9px;
    grid-template-columns: minmax(0, 1fr);
  }

  .attendance-profile-panel .field { min-width: 0; }

  .attendance-profile-panel .field input {
    font-size: 16px;
    min-height: 42px;
    width: 100%;
  }

  .attendance-profile-panel .dialog-actions,
  .attendance-profile-panel .dialog-actions .primary-button {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 600px) and (max-height: 620px) {
  .account-attendance-dialog .modal-heading { min-height: 52px; }
  .attendance-identity-panel { padding-block: 9px; }
  .attendance-profile-panel { gap: 8px; padding-block: 10px; }
}

/* Trung tâm quản trị hệ thống */
.admin-control-center {
  background: #fff;
  border: 1px solid var(--line, #d9e3f0);
  border-radius: 22px;
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 24px;
}

.admin-control-heading,
.admin-control-panel-heading,
.admin-permission-identity,
.admin-session-row,
.admin-backup-row,
.admin-alert-row,
.admin-audit-row {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.admin-control-heading h2,
.admin-control-panel-heading h3 { margin: 3px 0 0; }
.admin-control-heading p,
.admin-control-panel-heading p { color: var(--muted, #64748b); margin: 5px 0 0; }

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

.admin-control-stats > span {
  background: linear-gradient(145deg, #f8fbff, #eef5ff);
  border: 1px solid #d7e4f6;
  border-radius: 15px;
  display: grid;
  gap: 6px;
  padding: 15px 17px;
}

.admin-control-stats small { color: #64748b; font-weight: 700; }
.admin-control-stats strong { color: #15396a; font-size: 1.55rem; }

.admin-control-tabs {
  background: #f3f7fc;
  border: 1px solid #dce6f2;
  border-radius: 14px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
}

.admin-control-tabs button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #52647c;
  display: inline-flex;
  flex: 1 0 max-content;
  font: inherit;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
}

.admin-control-tabs button.active {
  background: #fff;
  box-shadow: 0 5px 16px rgba(31, 74, 132, .1);
  color: #1758d5;
}

.admin-control-panel { display: none; gap: 15px; }
.admin-control-panel.active { display: grid; }
.admin-control-split { display: grid; gap: 16px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.audit-control-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.admin-control-card,
.admin-permission-card {
  background: #f9fbfe;
  border: 1px solid #dce6f2;
  border-radius: 16px;
  padding: 18px;
}

.admin-permission-card + .admin-permission-card { margin-top: 12px; }
.admin-permission-identity { justify-content: flex-start; }
.admin-permission-identity > div { display: grid; flex: 1; gap: 3px; }
.admin-permission-identity > div span { color: #64748b; }
.admin-permission-identity .status-pill { font-style: normal; }

.admin-permission-grid,
.admin-default-toggle-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.admin-permission-grid .check-field,
.admin-default-toggle-grid .check-field,
.admin-control-check {
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  min-height: 46px;
  padding: 10px 12px;
}

.admin-control-list { display: grid; gap: 9px; margin-top: 13px; max-height: 420px; overflow: auto; padding-right: 3px; }
.admin-session-row,
.admin-backup-row,
.admin-alert-row,
.admin-audit-row {
  background: #fff;
  border: 1px solid #dce6f2;
  border-radius: 12px;
  padding: 12px;
}

.admin-session-row.current { border-color: #9ed8c5; background: #f0fcf7; }
.admin-session-row > div,
.admin-backup-row > div:first-child,
.admin-alert-row > div,
.admin-audit-row > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.admin-control-list span,
.admin-control-list small,
.admin-control-list p { color: #64748b; margin: 0; }

.student-login-lock-card { margin-top: 16px; }
.admin-login-lock-row {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #dbe5f1;
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 13px 14px;
}
.admin-login-lock-row.locked { background: #fff7f7; border-left-color: #dc3545; }
.admin-login-lock-row > div { display: grid; gap: 3px; min-width: 0; }
.admin-login-lock-row strong,
.admin-login-lock-row span,
.admin-login-lock-row small { overflow-wrap: anywhere; }
.admin-backup-row .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.admin-alert-row { align-items: flex-start; }
.admin-alert-row.warning { border-left: 4px solid #f59e0b; }
.admin-alert-row.critical { border-left: 4px solid #dc3545; }
.admin-alert-row.acknowledged { opacity: .67; }
.admin-alert-row > i { color: #16815f; font-size: .78rem; font-style: normal; font-weight: 800; }
.admin-audit-row { justify-content: flex-start; }
.admin-control-empty,
.admin-control-loading { align-items: center; color: #64748b; display: grid; gap: 7px; justify-items: center; padding: 34px 18px; text-align: center; }
.admin-control-empty strong { color: #14213a; }
.backup-create-card { max-width: 700px; }

@media (max-width: 1100px) {
  .admin-control-split,
  .audit-control-split { grid-template-columns: 1fr; }
  .admin-permission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .admin-control-center { border-radius: 14px; padding: 14px; }
  .admin-control-heading { align-items: flex-start; }
  .admin-control-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-permission-grid,
  .admin-default-toggle-grid { grid-template-columns: 1fr; }
  .admin-session-row,
  .admin-backup-row { align-items: flex-start; flex-direction: column; }
  .admin-backup-row .row-actions { justify-content: flex-start; }
}

/* Thẻ bài tập: ưu tiên nội dung và quy trình thao tác rõ ràng. */
.assignments-cards {
  gap: 18px;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
}

.assignment-card {
  border-radius: 18px;
  min-height: 360px;
  padding: 20px;
}

.assignment-card h2 {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-top: 17px;
}

.assignment-card > p,
.assignment-meta,
.card-progress > div:first-child span,
.card-progress > strong {
  font-size: .8rem;
}

.assignment-card-footer {
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
}

.assignment-score-summary {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.assignment-score-summary span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.assignment-score-summary strong {
  color: #173f7a;
  font-size: .94rem;
}

.assignment-card-footer > .assignment-card-actions {
  align-items: stretch;
  display: grid;
  gap: 9px;
  width: 100%;
}

.assignment-primary-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.assignment-card-footer .assignment-primary-actions button {
  background: #f2f7ff;
  border: 1px solid #d4e2f6;
  border-radius: 10px;
  color: #155bd7;
  font-size: .78rem;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  white-space: nowrap;
}

.assignment-card-footer .assignment-primary-actions button:hover {
  background: #e8f1ff;
  border-color: #a9c7f2;
}

.assignment-secondary-actions {
  display: flex;
  gap: 7px;
  justify-content: flex-end;
}

.assignment-card-footer .assignment-secondary-actions button {
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .76rem;
  min-height: 34px;
  padding: 6px 9px;
}

.assignment-card-footer .assignment-secondary-actions button:hover {
  background: #f5f8fc;
  border-color: #dbe5f2;
}

@media (max-width: 1220px) {
  .assignment-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .assignments-cards { grid-template-columns: 1fr; }
  .assignment-primary-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .assignment-card { min-height: 0; padding: 16px; }
  .assignment-card-top { align-items: flex-start; gap: 10px; }
  .assignment-badges { flex-wrap: wrap; justify-content: flex-end; }
  .assignment-primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Ngân hàng câu hỏi và ma trận đề */
.exam-security-settings {
  background: #f7faff;
  border: 1px solid #d9e5f5;
  border-radius: 14px;
  margin: 0;
  padding: 15px;
}
.exam-security-settings legend { color: #18345f; font-weight: 850; padding: 0 7px; }
.question-essential-settings {
  align-items: end;
  background: #f7faff;
  border: 1px solid #d9e5f5;
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(150px, .8fr) minmax(140px, .6fr) minmax(210px, 1fr);
  padding: 14px;
}
.question-essential-settings .question-required-field { min-height: 47px; }
.student-module-settings {
  align-items: stretch;
  background: #f7faff;
  border: 1px solid #d9e5f5;
  border-radius: 14px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 12px;
}
.student-module-settings legend { color: #18345f; font-weight: 850; padding: 0 7px; }
.student-module-settings .check-field { background: #fff; min-height: 48px; }
.student-module-settings .check-field span { align-items: center; display: flex; gap: 8px; }
.exam-blueprint-dialog { width: min(1180px, calc(100vw - 32px)); }
.exam-blueprint-dialog #manage-content { max-height: min(90vh, 920px); overflow-x: hidden; overflow-y: auto; padding-bottom: 0; }
.exam-workspace-tabs { background: #f4f7fb; border: 1px solid #dae5f2; border-radius: 15px; display: grid; gap: 7px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; }
.exam-workspace-tabs button { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 11px; color: #5a6b83; display: flex; gap: 11px; min-height: 58px; padding: 9px 13px; text-align: left; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.exam-workspace-tabs button > svg { flex: 0 0 auto; }
.exam-workspace-tabs button > span { display: grid; gap: 2px; min-width: 0; }
.exam-workspace-tabs button strong { color: inherit; font-size: .9rem; }
.exam-workspace-tabs button small { color: #728299; font-size: .73rem; font-weight: 650; }
.exam-workspace-tabs button:hover { background: #fff; border-color: #d7e3f1; color: #174da8; }
.exam-workspace-tabs button.active { background: #fff; border-color: #bcd3f2; box-shadow: 0 5px 16px rgba(31, 83, 160, .1); color: #1555bd; }
.exam-workspace-panel { display: grid; gap: 14px; min-height: 330px; padding: 16px 0 8px; }
.blueprint-summary { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blueprint-summary > span,
.blueprint-summary > button { background: #edf5ff; border: 1px solid #d5e5fb; border-radius: 13px; display: grid; gap: 4px; min-width: 0; padding: 14px 16px; text-align: left; }
.blueprint-summary > button { cursor: pointer; }
.blueprint-summary > button:hover { background: #e5f0ff; border-color: #a9c8ef; }
.blueprint-summary small { color: #60728c; font-weight: 750; }
.blueprint-summary strong { color: #174da8; font-size: 1.23rem; }
.blueprint-summary span > span,
.blueprint-summary button > span { align-items: center; color: #728299; display: flex; font-size: .72rem; font-weight: 650; gap: 5px; }
.blueprint-rule-list { display: grid; gap: 12px; }
.blueprint-rule { background: #fff; border: 1px solid #dbe5f2; border-radius: 15px; box-shadow: 0 3px 12px rgba(27, 65, 118, .04); padding: 15px; }
.blueprint-rule > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.blueprint-rule > header > div { align-items: center; display: flex; gap: 9px; }
.blueprint-rule > header > div > span { align-items: center; background: #eaf2ff; border-radius: 9px; color: #1555bd; display: inline-flex; font-size: .76rem; font-weight: 850; height: 32px; justify-content: center; width: 36px; }
.blueprint-rule > header button { background: #fff4f5; border: 1px solid #ffd3d8; border-radius: 9px; color: #d92d45; min-height: 36px; padding: 7px 10px; }
.blueprint-rule > header button:disabled { cursor: not-allowed; opacity: .42; }
.blueprint-rule-grid { display: grid; gap: 11px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(140px, .55fr); }
.blueprint-add-rule { justify-content: center; width: 100%; }
.exam-bank-overview { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bank-stat-card { align-items: center; background: #fff; border: 1px solid #dde7f2; border-radius: 13px; display: flex; gap: 11px; min-height: 78px; padding: 13px; }
.bank-stat-card > span { align-items: center; background: #edf3fb; border-radius: 10px; color: #3c5b85; display: flex; height: 42px; justify-content: center; width: 42px; }
.bank-stat-card > div { display: grid; gap: 2px; }
.bank-stat-card small { color: #667991; font-weight: 700; }
.bank-stat-card strong { color: #172b4d; font-size: 1.25rem; }
.bank-stat-card.difficulty-easy > span { background: #e6f8f1; color: #07835c; }
.bank-stat-card.difficulty-medium > span { background: #fff4df; color: #b96800; }
.bank-stat-card.difficulty-hard > span { background: #fff0f2; color: #cf304a; }
.exam-bank-groups { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.exam-bank-group { background: #fff; border: 1px solid #dbe5f2; border-radius: 14px; min-width: 0; overflow: hidden; }
.exam-bank-group > header { align-items: center; background: #f8fafc; border-bottom: 1px solid #e3eaf3; display: flex; justify-content: space-between; padding: 12px 14px; }
.exam-bank-group > header > div { align-items: center; display: flex; gap: 8px; }
.exam-bank-group > header h3 { font-size: .92rem; margin: 0; }
.exam-bank-group > header > strong { background: #edf2f8; border-radius: 999px; color: #526881; font-size: .73rem; padding: 5px 8px; }
.difficulty-dot { background: #8da0b7; border-radius: 999px; height: 9px; width: 9px; }
.bank-group-easy .difficulty-dot { background: #12a878; }
.bank-group-medium .difficulty-dot { background: #e18a15; }
.bank-group-hard .difficulty-dot { background: #e4485f; }
.exam-bank-question-list { display: grid; gap: 7px; max-height: 360px; overflow-y: auto; padding: 9px; scrollbar-gutter: stable; }
.exam-bank-question { align-items: start; background: #fbfcfe; border: 1px solid #e7edf4; border-radius: 10px; display: grid; gap: 9px; grid-template-columns: 31px minmax(0, 1fr); padding: 9px; }
.exam-bank-question .question-sequence { align-items: center; background: #eaf2ff; border-radius: 8px; color: #1555bd; display: flex; font-size: .7rem; font-weight: 850; height: 30px; justify-content: center; }
.exam-bank-question > div { display: grid; gap: 4px; min-width: 0; }
.exam-bank-question strong { color: #1c2b43; display: -webkit-box; font-size: .78rem; line-height: 1.4; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.exam-bank-question small { color: #6e7f94; font-size: .69rem; }
.exam-bank-empty { align-items: center; color: #74869b; display: flex; flex-direction: column; gap: 7px; justify-content: center; min-height: 110px; padding: 18px; text-align: center; }
.exam-security-card { background: #f7faff; border: 1px solid #d5e3f4; border-radius: 15px; overflow: hidden; }
.exam-security-card > header { align-items: center; background: #edf5ff; border-bottom: 1px solid #d5e3f4; display: flex; gap: 12px; padding: 14px 16px; }
.exam-security-card > header > span { align-items: center; background: #fff; border-radius: 10px; color: #1555bd; display: flex; height: 43px; justify-content: center; width: 43px; }
.exam-security-card > header > div { display: grid; gap: 2px; }
.exam-security-card h3 { color: #18345f; font-size: 1rem; margin: 0; }
.exam-security-card p { color: #60728c; font-size: .77rem; margin: 0; }
.exam-security-settings { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 15px; }
.exam-security-settings .check-field { align-items: center; background: #fff; border: 1px solid #dce6f2; border-radius: 11px; min-height: 74px; padding: 12px; }
.exam-security-settings .check-field > span { display: grid; gap: 3px; }
.exam-security-settings .check-field strong { color: #223754; font-size: .82rem; }
.exam-security-settings .check-field small { color: #718299; font-size: .72rem; font-weight: 550; }
.exam-security-default{align-items:center;background:#eaf4ff;border:1px solid #bdd7f7;border-radius:11px;display:grid;gap:11px;grid-template-columns:40px minmax(0,1fr);min-height:74px;padding:12px}
.exam-security-default>span{align-items:center;background:#fff;border-radius:10px;color:#1555bd;display:flex;height:40px;justify-content:center;width:40px}.exam-security-default>div{display:grid;gap:3px}.exam-security-default strong{color:#18345f;font-size:.82rem}.exam-security-default small{color:#60728c;font-size:.72rem;line-height:1.45}
.exam-security-settings .field { background: #fff; border: 1px solid #dce6f2; border-radius: 11px; padding: 12px; }
.exam-security-settings .input-suffix { align-items: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.exam-security-settings .input-suffix input { border-bottom-right-radius: 0; border-top-right-radius: 0; }
.exam-security-settings .input-suffix > span { align-items: center; background: #f1f5f9; border: 1px solid #cad6e5; border-left: 0; border-radius: 0 9px 9px 0; color: #63758d; display: flex; height: 100%; padding-inline: 13px; }
.exam-workspace-actions { background: #fff; bottom: 0; border-top: 1px solid #e0e7f0; margin: 0 -2px; padding: 12px 2px 14px; position: sticky; z-index: 4; }
.question-import-quick-summary { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.question-import-quick-summary > span { align-items: center; background: #f8fbff; border: 1px solid #d8e5f4; border-radius: 12px; display: flex; justify-content: space-between; padding: 11px 13px; }
.question-import-quick-summary small { color: #60728c; font-weight: 750; }
.question-import-quick-summary strong { font-size: 1.12rem; }
.difficulty-easy { color: #07835c; }
.difficulty-medium { color: #b96800; }
.difficulty-hard { color: #cf304a; }
.exam-security-banner { align-items: center; background: #eef8ff; border: 1px solid #c7def9; border-radius: 12px; color: #174b84; display: flex; gap: 10px; margin-bottom: 14px; padding: 11px 13px; }
.exam-security-banner > span { display: grid; flex: 1; gap: 2px; }
.exam-security-banner > span:not(:first-child) { font-size: .86rem; }
.exam-security-banner button { flex: 0 0 auto; }
.exam-security-banner button.hidden{display:none}
.exam-review-monitoring{background:#f7faff;border:1px solid #d4e2f2;border-radius:14px;display:grid;gap:12px;margin:14px 0;padding:14px}
.exam-review-monitoring>header{align-items:center;display:flex;gap:14px;justify-content:space-between}
.exam-review-monitoring>header>div{align-items:center;display:flex;gap:9px;min-width:0}.exam-review-monitoring>header span{display:grid;gap:2px}.exam-review-monitoring>header small{color:#687b95;font-weight:500}.exam-review-monitoring>header>b{background:#fff0f1;border-radius:999px;color:#b42331;font-size:.78rem;padding:7px 10px;white-space:nowrap}
.exam-review-monitoring-stats{display:grid;gap:9px;grid-template-columns:repeat(4,minmax(0,1fr))}.exam-review-monitoring-stats>span{background:#fff;border:1px solid #dce6f2;border-radius:10px;color:#677891;display:grid;font-size:.75rem;gap:2px;padding:9px 11px}.exam-review-monitoring-stats strong{color:#12223c;font-size:1.05rem}
.exam-review-monitoring details{background:#fff;border:1px solid #dce6f2;border-radius:10px;overflow:hidden}.exam-review-monitoring summary{cursor:pointer;font-weight:800;padding:11px 13px}.exam-event-list{border-top:1px solid #e5ebf3;display:grid;max-height:260px;overflow:auto}.exam-event-list>div{align-items:center;display:grid;gap:8px;grid-template-columns:auto minmax(0,1fr) auto auto;padding:9px 12px}.exam-event-list>div+div{border-top:1px solid #eef2f7}.exam-event-list>div.attention{background:#fff8f8;color:#9c2531}.exam-event-list time,.exam-event-list small{color:#71829a;font-size:.75rem}.exam-event-list p{color:#71829a;margin:0;padding:13px}
@media(max-width:760px){.exam-security-banner{align-items:flex-start;flex-wrap:wrap}.exam-security-banner button{width:100%}.exam-review-monitoring>header{align-items:flex-start;display:grid}.exam-review-monitoring>header>b{justify-self:start}.exam-review-monitoring-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.exam-event-list>div{grid-template-columns:auto minmax(0,1fr)}.exam-event-list time,.exam-event-list small{grid-column:2}}
@media (max-width: 900px) {
  .question-essential-settings,
  .blueprint-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-essential-settings .question-required-field { grid-column: 1 / -1; }
  .exam-bank-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-bank-groups { grid-template-columns: 1fr; }
  .exam-bank-question-list { max-height: 260px; }
}
@media (max-width: 620px) {
  .question-essential-settings,
  .student-module-settings,
  .blueprint-summary,
  .blueprint-rule-grid,
  .exam-security-settings { grid-template-columns: 1fr; }
  .exam-blueprint-dialog { width: calc(100vw - 14px); }
  .exam-workspace-tabs { grid-template-columns: 1fr; }
  .exam-workspace-tabs button { min-height: 50px; }
  .exam-bank-overview { grid-template-columns: 1fr 1fr; }
  .bank-stat-card { min-height: 68px; padding: 10px; }
  .bank-stat-card > span { height: 36px; width: 36px; }
  .exam-workspace-panel { min-height: 250px; padding-top: 12px; }
  .question-import-quick-summary { grid-template-columns: 1fr; }
  .question-import-steps { grid-template-columns: 1fr; }
  .question-import-template { grid-template-columns: auto 1fr; }
  .question-import-template .outline-button { grid-column: 1 / -1; width: 100%; }
}
/* Hướng dẫn sử dụng */
.user-guide-page { max-width: 1440px; margin: 0 auto; }
.user-guide-heading { align-items: flex-end; }
.user-guide-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.user-guide-actions a { text-decoration: none; }
.user-guide-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 22px; align-items: start; }
.user-guide-toc { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow: auto; border: 1px solid #d9e4f2; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(30,64,175,.06); }
.user-guide-toc-title { display: flex; align-items: center; gap: 9px; padding: 15px 17px; color: #fff; background: linear-gradient(135deg,#1d4ed8,#2563eb); border-radius: 15px 15px 0 0; }
.user-guide-toc nav { display: grid; padding: 8px; }
.user-guide-toc button { width: 100%; display: grid; grid-template-columns: 24px 1fr; gap: 2px; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #334155; text-align: left; font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer; }
.user-guide-toc button:hover, .user-guide-toc button:focus-visible { background: #eff6ff; color: #1d4ed8; outline: none; }
.user-guide-toc button span { color: #2563eb; font-weight: 800; }
.user-guide-content { display: grid; gap: 16px; min-width: 0; }
.user-guide-article { scroll-margin-top: 96px; padding: 22px; border: 1px solid #d9e4f2; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(15,23,42,.045); }
.user-guide-article:focus { outline: 3px solid rgba(37,99,235,.18); outline-offset: 3px; }
.user-guide-article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid #e5edf7; }
.user-guide-article > header > div:first-child { display: flex; align-items: flex-start; gap: 12px; }
.user-guide-index { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eaf2ff; color: #1d4ed8; font-weight: 900; }
.user-guide-article h2 { margin: 5px 0 0; font-size: 21px; }
.audience-badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.user-guide-summary { margin: 16px 0 8px; color: #475569; font-weight: 650; }
.user-guide-body { color: #334155; line-height: 1.7; }
.user-guide-body p { margin: 8px 0; }
.user-guide-article figure { margin: 18px 0 0; padding: 10px; border: 1px solid #dbe7f5; border-radius: 14px; background: #f8fafc; }
.user-guide-article figure img { display: block; width: 100%; max-height: 620px; object-fit: contain; border-radius: 9px; }
.user-guide-article figcaption { padding: 8px 4px 0; color: #64748b; font-size: 13px; }
.guide-image-button { margin-top: 14px; border: 0; background: transparent; color: #2563eb; font-weight: 750; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.user-guide-dialog { width: min(760px,calc(100vw - 32px)); max-height: calc(100vh - 42px); border: 0; border-radius: 20px; padding: 24px; }
.user-guide-dialog::backdrop { background: rgba(15,23,42,.58); backdrop-filter: blur(4px); }
.user-guide-dialog .dialog-heading { display: flex; gap: 12px; align-items: flex-start; padding: 0 44px 16px 0; border-bottom: 1px solid #e2e8f0; }
.user-guide-dialog .dialog-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #eaf2ff; color: #2563eb; }
.user-guide-dialog .dialog-heading h2 { margin: 0; }
.user-guide-dialog .dialog-heading p { margin: 4px 0 0; color: #64748b; }
.user-guide-dialog .stack-form { display: grid; gap: 14px; }
.user-guide-dialog textarea { resize: vertical; }
.user-guide-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.student-content [data-student-panel="guide"] { width: 100%; }
.student-content .user-guide-page { padding-top: 6px; }
@media (max-width: 900px) {
  .user-guide-layout { grid-template-columns: 1fr; }
  .user-guide-toc { position: relative; top: auto; max-height: none; }
  .user-guide-toc nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .user-guide-article { padding: 17px; }
}
@media (max-width: 600px) {
  .user-guide-actions { width: 100%; }
  .user-guide-actions > * { flex: 1; justify-content: center; }
  .user-guide-toc nav { grid-template-columns: 1fr; }
  .user-guide-article > header { align-items: stretch; flex-direction: column; }
  .user-guide-article > header .row-actions { justify-content: flex-end; }
  .user-guide-article h2 { font-size: 18px; }
  .user-guide-dialog { padding: 18px; }
  .user-guide-dialog .form-row.two { grid-template-columns: 1fr; }
}
/* Organization administration and topic-based assessment */
.management-heading-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.organization-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px;margin:0 0 20px}
.organization-summary-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid #d7e3f4;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(30,64,175,.06)}
.organization-summary-card .organization-summary-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#155eef;background:#eaf2ff}
.organization-summary-card div{min-width:0;display:grid;gap:3px}.organization-summary-card strong{font-size:16px;color:#13213c}.organization-summary-card small{color:#66758e;overflow-wrap:anywhere}
.organization-summary-card button{border:1px solid #cddcf0;border-radius:10px;padding:9px 11px;background:#f8fbff;color:#155eef;font-weight:700;white-space:nowrap}
.class-card-grid>.organization-class-heading{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 0 -2px;padding:12px 14px;border-left:4px solid #2864e8;border-radius:10px;background:#edf4ff;color:#17335f}
.organization-class-heading div{display:grid;gap:2px}.organization-class-heading small{color:#687993;font-weight:500}
.class-topic-list{display:grid;gap:10px;padding:18px 18px 0}.class-topic-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid #d9e3f2;border-radius:12px;background:#f8fbff}.class-topic-item>span{color:#2360df}.class-topic-item div{display:grid;gap:3px}.class-topic-item small{color:#687793}
@media(max-width:760px){.organization-summary-card{grid-template-columns:42px 1fr}.organization-summary-card button{grid-column:1/-1}.management-heading-actions{width:100%;justify-content:stretch}.management-heading-actions button{flex:1}.class-card-grid>.organization-class-heading{align-items:flex-start}}

/* Danh mục đơn vị và lớp học */
.class-directory-tools{align-items:end;background:#fff;border:1px solid #d8e4f2;border-radius:16px;display:grid;gap:12px;grid-template-columns:minmax(260px,1fr) minmax(220px,.55fr) auto;margin:0 0 18px;padding:14px 16px;position:sticky;top:74px;z-index:8}
.class-directory-search{align-items:center;background:#f7faff;border:1px solid #cedced;border-radius:11px;color:#60728c;display:grid;gap:9px;grid-template-columns:auto 1fr;min-height:46px;padding:0 13px}
.class-directory-search input{background:transparent;border:0;font:inherit;min-width:0;outline:0;width:100%}
.class-directory-filter{display:grid;gap:5px}.class-directory-filter>span{color:#60728c;font-size:.72rem;font-weight:800;text-transform:uppercase}.class-directory-filter select{min-height:46px}
.class-directory-tools>strong{align-items:center;background:#eaf2ff;border-radius:999px;color:#1555bd;display:flex;font-size:.78rem;justify-content:center;min-height:36px;padding:0 13px;white-space:nowrap}
.class-directory{display:grid;gap:20px}.organization-class-group{background:#fff;border:1px solid #d8e4f2;border-radius:18px;box-shadow:0 8px 24px rgba(30,64,175,.05);overflow:hidden}
.organization-class-heading{align-items:center;background:linear-gradient(90deg,#edf5ff,#f8fbff);border-bottom:1px solid #d8e4f2;display:flex;gap:12px;margin:0;padding:15px 18px}
.organization-class-heading>span{align-items:center;background:#fff;border:1px solid #d4e2f4;border-radius:11px;color:#2360df;display:flex;height:40px;justify-content:center;width:40px}
.organization-class-heading div{display:grid;gap:3px}.organization-class-heading strong{color:#18345f;font-size:1rem}.organization-class-heading small{color:#687993;font-weight:550}
.organization-class-cards{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}
.organization-class-cards .class-card{box-shadow:none;margin:0;min-width:0}.organization-class-cards .class-card.current{box-shadow:0 0 0 2px rgba(40,100,232,.15)}
.class-card-counts{align-items:center;display:flex;gap:6px}
.organization-class-group[hidden],.class-card[hidden]{display:none!important}
@media(max-width:1100px){.organization-class-cards{grid-template-columns:1fr}.class-directory-tools{top:66px}}
@media(max-width:720px){.organization-summary-grid{grid-template-columns:1fr}.class-directory-tools{grid-template-columns:1fr;position:relative;top:auto}.class-directory-tools>strong{justify-self:start}.organization-class-heading{align-items:flex-start;padding:13px}.organization-class-cards{padding:10px}.organization-class-cards .class-card{grid-template-columns:40px minmax(0,1fr)}.organization-class-cards .class-card-actions{grid-column:1/-1}.class-picker select{max-width:min(58vw,330px)}}
@media(max-width:460px){.organization-class-cards .class-card{display:block}.organization-class-cards .class-card-icon{margin-bottom:9px}.organization-class-cards .class-card-actions{display:grid;grid-template-columns:1fr}.organization-class-cards .class-card-actions button{justify-content:flex-start;width:100%}}

/* Danh bạ đa đơn vị: gọn, rõ quyền và đầy đủ thao tác */
.organization-overview{margin:0 0 18px;border:1px solid #d7e3f2;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(30,64,175,.05);overflow:hidden}
.organization-overview-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border-bottom:1px solid #e1e9f4;background:linear-gradient(90deg,#f4f8ff,#fff)}
.organization-overview-heading>div{display:grid;gap:2px}.organization-overview-heading span{color:#1d5bd5;font-size:.7rem;font-weight:850;letter-spacing:.08em}.organization-overview-heading strong{color:#14223b;font-size:1rem}.organization-overview-heading p{margin:0;color:#66758e;font-size:.82rem}
.organization-overview .organization-summary-grid{grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;margin:0;padding:14px}
.organization-overview .organization-summary-card{grid-template-columns:40px minmax(0,1fr);align-items:start;gap:11px;padding:14px;box-shadow:none;border-radius:14px;background:#fbfdff}
.organization-overview .organization-summary-icon{width:40px;height:40px}
.organization-summary-main{display:grid!important;gap:4px!important;min-width:0}
.organization-summary-title{display:flex!important;align-items:center;justify-content:space-between;gap:8px}.organization-summary-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organization-summary-title .status-pill{flex:0 0 auto;font-size:.68rem}
.organization-summary-metrics{display:flex!important;gap:6px!important;flex-wrap:wrap;margin-top:5px}.organization-summary-metrics span{display:inline-flex;align-items:baseline;gap:4px;padding:4px 8px;border-radius:999px;background:#edf4ff;color:#52647d;font-size:.73rem}.organization-summary-metrics b{color:#164fb8;font-size:.82rem}
.organization-summary-actions{grid-column:1/-1;display:flex!important;align-items:center;gap:7px!important;padding-top:9px;border-top:1px solid #e3ebf5}.organization-summary-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 9px;font-size:.76rem}.organization-summary-actions .danger-action{margin-left:auto;border-color:#fecaca;background:#fff7f7;color:#dc2626}
.organization-default-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(130px,.6fr);gap:10px;margin:0;padding:13px;border:1px solid #d8e4f2;border-radius:13px;background:#f8fbff}.organization-default-settings legend{padding:0 6px;color:#18345f;font-weight:800}.organization-default-settings .check-field{min-height:46px;background:#fff}.organization-default-settings .field.compact{gap:4px}.organization-default-settings .field.compact input{min-height:46px}
.organization-admin-layout{min-height:430px}
.class-directory{gap:16px}.organization-class-group{border-radius:16px}.organization-class-heading{padding:12px 15px}.organization-class-heading>span{width:36px;height:36px}.organization-class-cards{grid-template-columns:repeat(auto-fit,minmax(410px,1fr));gap:11px;padding:13px}.organization-class-cards .class-card{padding:14px}.organization-class-cards .class-card-main h2{margin:6px 0 3px;font-size:1.04rem}.organization-class-cards .class-card-main p{margin:3px 0;font-size:.79rem}.organization-class-cards .class-card-actions{gap:5px;padding-top:9px}.organization-class-cards .class-card-actions button{min-height:34px;padding:6px 8px;font-size:.73rem}
.class-topic-item .row-actions{display:flex;gap:6px}.class-topic-item .row-actions button{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #d5e1f0;border-radius:9px;background:#fff;color:#2459b8;font-weight:750}
@media(max-width:900px){.organization-overview-heading{align-items:flex-start;flex-direction:column;gap:5px}.organization-overview .organization-summary-grid{grid-template-columns:1fr}.organization-default-settings{grid-template-columns:1fr 1fr}.organization-class-cards{grid-template-columns:1fr}}
@media(max-width:560px){.organization-overview .organization-summary-grid{padding:9px}.organization-overview .organization-summary-card{padding:12px}.organization-summary-actions{display:grid!important;grid-template-columns:1fr 1fr}.organization-summary-actions .danger-action{grid-column:1/-1;margin-left:0}.organization-default-settings{grid-template-columns:1fr}.class-topic-item{grid-template-columns:32px 1fr}.class-topic-item .row-actions{grid-column:1/-1;justify-content:flex-end}}

/* Rà soát khả dụng 21/08/2026: lưới ổn định, thao tác rõ và không tràn khung. */
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

.admin-main,
.admin-header,
.admin-header > div,
.admin-header-actions,
.monitor-page,
.monitor-page > * {
  min-width: 0;
}

.admin-header-actions {
  flex-shrink: 1;
  max-width: 100%;
}

.monitor-page .dashboard-donut-panel,
.monitor-page .risk-panel {
  grid-column: span 6;
}

.monitor-page .dashboard-donut-card {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
}

.monitor-page .dashboard-donut {
  height: 92px;
  width: 92px;
}

.monitor-page .dashboard-donut-card > div:last-child > strong,
.monitor-page .dashboard-donut-card span {
  overflow-wrap: normal;
  word-break: normal;
}

.monitor-page .delivery-panel,
.monitor-page .matrix-panel {
  overflow: hidden;
}

.monitor-page .matrix-panel .table-wrap,
.monitor-page .matrix-panel .matrix-scroll,
.monitor-page .matrix-panel:has(.matrix-table) {
  max-width: 100%;
}

dialog[open] {
  overscroll-behavior: contain;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .admin-header {
    gap: 10px;
    padding-inline: 20px;
  }

  .admin-header-actions {
    gap: 8px;
  }

  .admin-header-actions .outline-button {
    font-size: .76rem;
    min-width: 0;
    padding-inline: 12px;
  }

  .admin-header-actions .last-update > span {
    display: none;
  }
}

@media (max-width: 1180px) {
  .monitor-page .dashboard-donut-panel,
  .monitor-page .risk-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  :where(button, a, input, select, textarea, summary) {
    touch-action: manipulation;
  }

  .monitor-page .dashboard-donut-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .monitor-page .dashboard-donut {
    height: 88px;
    width: 88px;
  }

  .delivery-row {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(72px, 28%);
  }

  .delivery-row > strong {
    min-width: 0;
    text-align: right;
  }

  .mobile-table-scroll,
  .table-scroll,
  .matrix-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

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