.admin-page {
  min-height: 100vh;
  color: #18334a;
  background:
    radial-gradient(circle at 92% 0, rgba(20, 169, 151, .13), transparent 32%),
    linear-gradient(180deg, #eef4f7, #f7f9fb 55%, #edf3f6);
}

.admin-shell {
  width: min(1180px, calc(100% - 32px));
  margin: auto;
  padding: 24px 0 48px;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 20px;
  color: white;
  background: linear-gradient(135deg, #071a3b, #075f5b);
  box-shadow: 0 20px 52px rgba(19, 54, 83, .16);
}

.admin-header h1 {
  margin: 2px 0;
  font-size: 30px;
}

.admin-header > div > p:last-child {
  margin: 4px 0 0;
  color: #bad3dc;
  font-size: 12px;
}

.admin-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-header a,
.admin-header button {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 9px;
  color: #eaf7f6;
  background: rgba(255, 255, 255, .08);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.admin-tools {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-card {
  padding: 17px 18px;
  border: 1px solid #dce7ed;
  border-radius: 16px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 10px 30px rgba(20, 55, 80, .05);
}

.admin-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-card-title span {
  color: #0b887c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}

.admin-card-title h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.admin-card-title > b {
  color: #8495a4;
  font-size: 9px;
  font-weight: 500;
}

.admin-card > p {
  margin: 10px 0;
  color: #718496;
  font-size: 11px;
  line-height: 1.6;
}

.roster-steps {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0;
}

.roster-steps span {
  padding: 7px 11px;
  border-radius: 999px;
  color: #6d8394;
  background: #edf3f6;
  font-size: 10px;
  font-weight: 700;
}

.roster-steps span.current {
  color: #08796e;
  background: #dff4ef;
}

.roster-steps span.ready {
  color: #684800;
  background: #fff0bd;
}

.roster-steps span.done {
  color: #087062;
  background: #d9f3ea;
}

.roster-steps i {
  color: #9aabb7;
  font-style: normal;
}

.roster-upload {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 20px;
  border: 1px dashed #9dbbc7;
  border-radius: 12px;
  color: #24465d;
  background: #f7fbfc;
  cursor: pointer;
  text-align: center;
}

.roster-upload:hover {
  border-color: #0b8d7f;
  background: #f0fbf8;
}

.roster-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.roster-upload strong { color: #08796e; font-size: 15px; }
.roster-upload span { margin-top: 7px; color: #738a9b; font-size: 10px; line-height: 1.5; }

.roster-upload.ready {
  border-color: #16a394;
  background: #effbf8;
}

.roster-upload.ready span {
  color: #315f63;
  font-weight: 700;
}

.roster-upload.synced {
  border-style: solid;
  border-color: #54b6a7;
  background: #eaf9f5;
}

.roster-upload.synced strong {
  color: #087062;
  font-size: 18px;
}

.roster-upload.synced span {
  color: #35766d;
  font-size: 11px;
  font-weight: 700;
}

.roster-confirm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #edc75c;
  border-radius: 11px;
  color: #5d4308;
  background: #fff8df;
}

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

.roster-confirm > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  color: #fff;
  background: #d99d0b;
  font-size: 9px;
  font-weight: 800;
}

.roster-confirm div {
  display: grid;
  gap: 2px;
}

.roster-confirm strong { font-size: 12px; }
.roster-confirm small { color: #826824; font-size: 9px; }

.roster-confirm.success {
  border-color: #63bcae;
  color: #075e55;
  background: #eaf9f5;
}

.roster-confirm.success > span { background: #0b8d7f; }
.roster-confirm.success small { color: #3c766e; }

.admin-card button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.roster-manager footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 9px;
}

.admin-card button {
  padding: 9px 12px;
  border: 1px solid #ccdbe4;
  border-radius: 9px;
  color: #3b5a70;
  background: white;
  cursor: pointer;
}

.admin-card button.primary {
  color: white;
  border-color: #0b8d7f;
  background: #0b8d7f;
}

.admin-card button.roster-import:not(:disabled) {
  min-width: 230px;
  border-color: #08796e;
  background: #08796e;
  box-shadow: 0 7px 18px rgba(11, 141, 127, .23);
  font-weight: 800;
}

.admin-card button.danger {
  color: white;
  border-color: #cb554c;
  background: #cb554c;
}

.onsite-roster-manager {
  margin-bottom: 12px;
}

.onsite-roster-toolbar,
.onsite-add-student {
  display: grid;
  align-items: end;
  gap: 9px;
}

.onsite-roster-toolbar {
  grid-template-columns: minmax(240px, 1fr);
  margin: 12px 0;
}

.admin-session-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.assistant-pin-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 9px;
}

.assistant-pin-form label {
  display: grid;
  gap: 5px;
  color: #718496;
  font-size: 9px;
}

.assistant-pin-form input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ccdbe4;
  border-radius: 9px;
  color: #24465d;
  background: white;
}

.access-manager > small,
.reset-manager > small {
  display: block;
  margin-top: 9px;
  color: #8495a4;
  font-size: 9px;
}

.reset-manager {
  border-color: #efc5c1;
  background: linear-gradient(135deg, #fff, #fff6f5);
}

.reset-progress-button {
  width: 100%;
  min-height: 44px;
  font-weight: 800;
}

.reset-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
}

.onsite-add-student {
  grid-template-columns: 130px 1fr 1fr auto;
  padding: 12px;
  border-radius: 12px;
  background: #f0f7f7;
}

.onsite-add-panel {
  margin-top: 12px;
  border: 1px solid #e0e9ee;
  border-radius: 11px;
  background: #fbfdfe;
}

.onsite-add-panel summary {
  padding: 11px 13px;
  color: #08796e;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.onsite-add-panel[open] summary {
  border-bottom: 1px solid #e0e9ee;
}

.onsite-roster-manager label {
  display: grid;
  gap: 5px;
  color: #718496;
  font-size: 9px;
}

.onsite-roster-manager input,
.onsite-roster-manager select {
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #ccdbe4;
  border-radius: 8px;
  color: #24465d;
  background: white;
  font: inherit;
  font-size: 11px;
}

.onsite-roster-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.onsite-roster-row {
  display: grid;
  grid-template-columns: 1.2fr 110px 1.2fr 100px auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e0e9ee;
  border-radius: 11px;
  background: #fbfdfe;
}

.onsite-roster-row.absent {
  border-color: #efcac6;
  background: #fff7f6;
}

.onsite-roster-row.absent input,
.onsite-roster-row.absent select {
  color: #96605b;
}

.onsite-roster-empty {
  display: grid;
  gap: 5px;
  padding: 24px;
  border: 1px dashed #ccdbe4;
  border-radius: 11px;
  color: #8495a4;
  text-align: center;
  font-size: 11px;
}

.onsite-roster-manager input[readonly] {
  color: #08796e;
  background: #edf8f5;
}

.onsite-roster-empty strong {
  color: #496579;
  font-size: 12px;
}

.onsite-roster-empty span {
  line-height: 1.55;
}

.export-buttons {
  display: grid;
  gap: 8px;
}

.route-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 11px;
  color: #75899a;
  background: #f1f6f8;
  font-size: 10px;
}

.route-card strong {
  color: #08796e;
  font-family: Consolas, monospace;
}

.admin-group-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.admin-group-card {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f2f6f8;
  text-align: left;
  cursor: pointer;
}

.admin-group-card:hover,
.admin-group-card.active {
  border-color: #25a99a;
  background: #eaf8f5;
  box-shadow: 0 7px 18px rgba(13, 125, 113, .1);
}

.admin-group-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.admin-group-card strong {
  color: #1c3e56;
  font-size: 14px;
}

.admin-group-card em {
  color: #758b9c;
  font-size: 8px;
  font-style: normal;
}

.admin-group-card > p {
  min-height: 20px;
  margin: 5px 0 0;
  overflow: hidden;
  color: #548076;
  font-size: 8px;
  line-height: 1.25;
}

.admin-group-bars {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.admin-group-bars span {
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: #dce6eb;
}

.admin-group-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.admin-group-bars .complete i { background: #55bce8; }
.admin-group-bars .checked i { background: #e4b849; }
.admin-group-bars .passed i { background: #18b49e; }

.admin-group-open {
  display: block;
  margin-top: 7px;
  color: #0b887c;
  font-size: 8px;
  font-weight: 800;
  text-align: right;
}

.admin-group-session {
  display: block;
  min-height: 13px;
  color: #8b9aa6;
  font-size: 8px;
}

.admin-group-session.online {
  color: #08796e;
  font-weight: 800;
}

.admin-group-detail {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid #cfe0e6;
  border-radius: 13px;
  background: #f8fbfc;
}

.admin-group-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #dce8ed;
  background: #edf7f5;
}

.admin-group-detail-head > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.admin-group-detail-head span {
  color: #08796e;
  font-size: 16px;
  font-weight: 800;
}

.admin-group-detail-head strong {
  color: #36586d;
  font-size: 10px;
}

.admin-group-detail-head small {
  color: #8495a4;
  font-size: 8px;
}

.admin-group-detail-head .release-session {
  color: #a94841;
  border-color: #e9b8b4;
  background: #fff3f2;
}

.admin-group-detail-scroll {
  overflow-x: auto;
}

.admin-group-student-table {
  min-width: 820px;
}

.admin-group-student-head,
.admin-group-student-row {
  display: grid;
  grid-template-columns: 1.55fr repeat(5, 1fr) .9fr;
  align-items: center;
}

.admin-group-student-head {
  color: #718496;
  background: #f1f6f8;
  font-size: 8px;
  text-align: center;
}

.admin-group-student-head > span,
.admin-group-student-row > * {
  min-width: 0;
  padding: 8px 7px;
  border-right: 1px solid #e3ebef;
  border-bottom: 1px solid #e3ebef;
}

.admin-group-student-head > span:first-child,
.admin-group-student-row > div:first-child {
  text-align: left;
}

.admin-group-student-head small {
  display: block;
  margin-top: 2px;
  color: #9aa8b4;
  font-size: 7px;
}

.admin-group-student-row {
  background: white;
}

.admin-group-student-row.absent {
  opacity: .55;
  background: #fff5f4;
}

.admin-group-student-row > div:first-child strong,
.admin-group-student-row > div:first-child small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-group-student-row > div:first-child strong {
  color: #24465d;
  font-size: 10px;
}

.admin-group-student-row > div:first-child small {
  margin-top: 2px;
  color: #7c908f;
  font-size: 8px;
}

.admin-subject-progress {
  display: grid;
  gap: 2px;
  text-align: center;
}

.admin-subject-progress b { color: #63798a; font-size: 10px; }
.admin-subject-progress small { color: #93a1ad; font-size: 7px; }
.admin-subject-progress.partial b { color: #b17b08; }
.admin-subject-progress.complete b,
.admin-subject-progress.complete small { color: #078676; }

.admin-exam-status {
  margin: 0 8px;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 99px;
  color: #728596;
  background: #edf2f5;
  font-size: 8px;
  font-weight: 800;
  text-align: center;
}

.admin-exam-status.waiting { color: #8d6805; background: #fff3cf; }
.admin-exam-status.redo { color: #a7433c; background: #fee7e4; }
.admin-exam-status.passed { color: #08776d; background: #dff7f3; }

.danger-dialog {
  border-color: rgba(255, 117, 109, .5);
  background: linear-gradient(145deg, #321018, #5a2222);
}

.danger-dialog h2 { color: #ffb0aa; }

.reset-warning {
  display: grid;
  gap: 3px;
  margin: 12px 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 176, 170, .28);
  border-radius: 9px;
  color: #ffd1cd;
  background: rgba(255, 117, 109, .1);
  font-size: 10px;
}

.reset-warning span { color: #e9b9b5; font-size: 9px; }

#resetProgressError,
#clearTestDataError {
  display: block;
  min-height: 16px;
  margin-top: 8px;
  color: #ffb0aa;
  font-size: 9px;
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
  margin-top: 12px;
}

.dialog-actions button {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  color: white;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
}

.dialog-actions button.danger {
  border-color: #df5d55;
  background: #c74740;
  font-weight: 800;
}

.admin-notice {
  position: sticky;
  top: 8px;
  z-index: 5;
  margin: 10px 0;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 11px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.admin-notice.success { color: #05685e; background: #dff8f2; }
.admin-notice.error { color: #a12f2a; background: #fee8e6; }

#adminLoginError {
  display: block;
  min-height: 15px;
  margin-top: 8px;
  color: #ffaaa4;
  font-size: 9px;
}

@media (max-width: 900px) {
  .admin-tools { grid-template-columns: 1fr; }
  .admin-session-tools { grid-template-columns: 1fr; }
  .admin-group-grid { grid-template-columns: repeat(5, 1fr); }
  .onsite-add-student { grid-template-columns: 130px 1fr 1fr auto; }
  .onsite-roster-row { grid-template-columns: 1fr 100px 1fr 90px auto; }
}

@media (max-width: 620px) {
  .reset-actions {
    grid-template-columns: 1fr;
  }

  .admin-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .admin-header { padding: 17px; }
  .admin-header h1 { font-size: 24px; }
  .admin-group-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-card-title > b { display: none; }
  .roster-manager footer { flex-direction: column; }
  .assistant-pin-form { grid-template-columns: 1fr; }
  .admin-group-detail-head { align-items: flex-start; }
  .admin-group-detail-head > div { align-items: flex-start; flex-direction: column; gap: 3px; }
  .onsite-roster-toolbar,
  .onsite-add-student,
  .onsite-roster-row { grid-template-columns: 1fr; }
  .onsite-roster-row .save-student { width: 100%; }
}