body {  font-family: Arial, sans-serif;  margin: 0;  background: #f5f5f5;  color: #222;}
.container {  max-width: 980px;  margin: 0 auto;  padding: 24px;  background: #fff;  min-height: 100vh;}
form {  display: grid;  gap: 12px;  margin-bottom: 24px;}
input,select,textarea,button {  padding: 10px;  font-size: 16px;}
button {  cursor: pointer;}
button:disabled {  opacity: 0.7;  cursor: not-allowed;}
.question-card {  border: 1px solid #ddd;  padding: 16px;  margin-bottom: 16px;  border-radius: 8px;}
.question-image {  max-width: 100%;  height: auto;  margin: 12px 0;}
.answers {  display: grid;  gap: 8px;}
.answer-option {  display: flex;  gap: 8px;  align-items: center;  padding: 10px;  border: 1px solid #e3e3e3;  border-radius: 6px;}
.test-header {  margin-bottom: 20px;}
.question-nav {  display: flex;  justify-content: space-between;  gap: 12px;}
.question-palette {  margin: 16px 0 20px;}
.palette-grid {  display: flex;  flex-wrap: wrap;  gap: 8px;}
.palette-item {  min-width: 44px;  height: 44px;  border: 1px solid #bbb;  background: #f0f0f0;  border-radius: 6px;  font-weight: bold;}
.palette-item.answered {  background: #cfeecd;  border-color: #4caf50;}
.palette-item.active {  outline: 3px solid #2d6cdf;}
.timer-box {  margin: 12px 0 16px;}
.timer {  font-size: 20px;  font-weight: bold;}
.timer.expired {  color: #b00020;}
.error {  color: #b00020;}
.success {  color: #0a7a2f;}
.stack-md {  display: grid;  gap: 16px;}
.stack-lg {  display: grid;  gap: 24px;}
.data-table {  width: 100%;  border-collapse: collapse;  margin-top: 16px;}
.data-table th,.data-table td {  border: 1px solid #ddd;  padding: 10px;  text-align: left;  vertical-align: top;}
.data-table th {  background: #f1f4f8;}
.button-link {  display: inline-block;  padding: 10px 14px;  background: #2d6cdf;  color: #fff;  text-decoration: none;  border-radius: 6px;}
.button-link-secondary {  background: #666;}
.info-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));  gap: 16px;}
.info-card {  border: 1px solid #ddd;  border-radius: 8px;  padding: 16px;  background: #fafafa;}
.info-card-success {  border-color: #b9dfc0;  background: #f3fbf4;}
.info-card-warning {  border-color: #efd38c;  background: #fffaf0;}
.review-card {  background: #fff;}
.question-head {  display: flex;  justify-content: space-between;  gap: 12px;  align-items: flex-start;  margin-bottom: 12px;}
.badge {  display: inline-block;  padding: 6px 10px;  border-radius: 999px;  font-size: 14px;  font-weight: bold;  white-space: nowrap;}
.badge-success {  background: #d9f2de;  color: #166534;}
.badge-danger {  background: #fde2e2;  color: #991b1b;}
.badge-muted {  background: #ececec;  color: #555;}
.badge-warning {  background: #fff3cd;  color: #8a6d3b;}
.badge-info {  background: #d8ebff;  color: #0b5394;}
.answers-list {  display: grid;  gap: 10px;  margin: 12px 0;}
.answer-review-row {  display: flex;  justify-content: space-between;  gap: 12px;  border: 1px solid #ddd;  border-radius: 8px;  padding: 12px;  background: #f8f8f8;}
.answer-selected {  border-color: #2d6cdf;  background: #eef4ff;}
.answer-correct {  background: #eef8ef;}
.answer-flags {  display: flex;  flex-wrap: wrap;  gap: 8px;  align-items: flex-start;}
.mini-badge {  display: inline-block;  padding: 4px 8px;  border-radius: 999px;  background: #e7ecf4;  font-size: 13px;}
.mini-badge-success {  background: #d9f2de;}
.open-answer-box {  border: 1px solid #ddd;  border-radius: 8px;  padding: 12px;  background: #f9fafc;}
.actions-row {  display: flex;  gap: 12px;  flex-wrap: wrap;  align-items: center;}
@media (max-width: 700px) {
  .container {    padding: 16px;  }
  .question-nav,  .question-head,  .answer-review-row,  .actions-row {    flex-direction: column;    align-items: stretch;  }
}

/* admin_panel.html */
.admin-shell {max-width: 1400px; margin: 0 auto;      padding: 24px;    }
.topbar { display: flex; justify-content: space-between; align-items: center;gap: 12px;margin-bottom: 24px;flex-wrap: wrap;    }
.topbar-left {     display: flex;      flex-direction: column;      gap: 4px;    }
.muted {      opacity: 0.75;      font-size: 0.95rem;    }
.section-card {      border: 1px solid #ddd;      border-radius: 12px;      padding: 20px;      margin-bottom: 20px;      background: #fff;    }
.section-card h2 {      margin-top: 0;    }
.grid-2 {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr));      gap: 16px;    }
.grid-3 {      display: grid;      grid-template-columns: repeat(3, minmax(0, 1fr));      gap: 16px;    }
.full-width {      grid-column: 1 / -1;    }
label {      display: block;      margin-bottom: 6px;      font-weight: 600;    }
input[type="text"],input[type="number"],input[type="datetime-local"],input[type="email"],textarea,select { 
	width: 100%; box-sizing: border-box;padding: 10px 12px;border-radius: 8px;border: 1px solid #ccc;margin-bottom: 12px;font: inherit;}
textarea {      min-height: 110px;      resize: vertical;    }
.actions-row {      display: flex;      gap: 10px;      flex-wrap: wrap;      align-items: center;    }
button {      padding: 10px 14px;      border: 0;      border-radius: 8px;      cursor: pointer;      font: inherit;    }
.secondary-btn {      background: #e9ecef;      color: #222;    }
.danger-btn {      background: #c0392b;      color: #fff;    }
.success-btn {      background: #2d8a4b;      color: #fff;    }
.status-badge {display: inline-flex;align-items: center;padding: 4px 10px;border-radius: 999px; font-size: 0.85rem;font-weight: 700;    }
.status-active {      background: #dff6e5;      color: #146c2e;    }
.status-scheduled {      background: #e8f0ff;      color: #1f57b3;    }
.status-ended {      background: #f1f3f5;      color: #555;    }
.status-disabled {      background: #fde8e8;      color: #b42318;    }
.table-wrap {      overflow-x: auto;    }
table.admin-table {      width: 100%;      border-collapse: collapse;    }
table.admin-table th, table.admin-table td {padding: 12px 10px;border-bottom: 1px solid #e5e5e5;vertical-align: top;text-align: left;    }
table.admin-table th {      background: #fafafa;      font-weight: 700;    }
.test-row-actions {      display: flex;      gap: 8px;      flex-wrap: wrap;    }
.small-btn {      padding: 7px 10px;      font-size: 0.92rem;    }
.inline-link-box {      display: flex;      gap: 8px;      align-items: center;      flex-wrap: wrap;    }
.inline-link-box input {      margin-bottom: 0;      min-width: 280px;      flex: 1;    }
.info-box {      border-radius: 10px;      background: #f8f9fa;      padding: 12px 14px;      margin-top: 10px;    }
.message-item {      border: 1px solid #e5e5e5;      border-radius: 10px;      padding: 12px 14px;      margin-bottom: 10px;      background: #fff;    }
.message-meta {      font-size: 0.9rem;      opacity: 0.75;      margin-bottom: 6px;    }
.empty-state {      padding: 14px 0;      opacity: 0.75;    }
.modal-backdrop {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.45);display: none;align-items: center;justify-content: center;z-index: 9999;padding: 16px;}
.modal-backdrop.open {      display: flex;    }
.modal-card {width: 100%;max-width: 560px;background: white;border-radius: 12px;padding: 20px;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);    }
.modal-card h3 {      margin-top: 0;      margin-bottom: 12px;    }
.modal-actions {      display: flex;      gap: 10px;      justify-content: flex-end;      margin-top: 18px;      flex-wrap: wrap;    }

.flash-modal-card { max-width: 520px; }
.flash-modal-message { line-height: 1.5; }
.flash-modal-success { border-top: 6px solid #2d8a4b; }
.flash-modal-error { border-top: 6px solid #c0392b; }
.flash-modal-warning { border-top: 6px solid #d39e00; }

.warning-list {      margin: 10px 0 0 18px;      padding: 0;    }
.warning-list li {      margin-bottom: 4px;    }
 @media (max-width: 900px) {
   .grid-2,      .grid-3 {        grid-template-columns: 1fr;      }
}
/* end admin_panel.html */
/* add_question */
.question-item {      border: 1px solid #ddd;      border-radius: 10px;      padding: 14px;      margin-bottom: 14px;      background: #fff;    }
.question-item h3 {      margin-top: 0;      margin-bottom: 8px;    }
.question-actions {      display: flex;      gap: 8px;      flex-wrap: wrap;      margin-top: 10px;    }
.danger-btn {      background: #c0392b;      color: #fff;    }
.secondary-btn {      background: #e9ecef;      color: #222;    }
.success-btn {      background: #2d8a4b;      color: #fff;    }
.answer-row {      display: grid;      grid-template-columns: 1fr auto auto;      gap: 10px;      align-items: center;      margin-bottom: 8px;    }
.notice-box {      border: 1px solid #ddd;      border-radius: 10px;      padding: 12px;      margin-bottom: 16px;      background: #fafafa;    }

@media (max-width: 720px) {
	.answer-row {       grid-template-columns: 1fr;      }
    .question-actions {        flex-direction: column;        align-items: stretch;      }
    .question-actions button {        width: 100%;      }
}
/* end add_question */
/* classes */
.class-row {display: flex; gap: 8px;align-items: center;justify-content: space-between;padding: 12px 0;      border-bottom: 1px solid #e5e5e5;    }
.class-actions {      display: flex;      gap: 8px;      flex-wrap: wrap;    }
.class-actions button {      width: auto;      margin: 0;    }
.meta {      color: #666;      font-size: 0.95rem;      margin-bottom: 12px;    }
.danger-btn {      background: #c0392b;      color: #fff;    }
.success-btn {      background: #2d8a4b;      color: #fff;    }
.notice-box {      border: 1px solid #ddd;      border-radius: 10px;      padding: 12px;      margin-bottom: 16px;      background: #fafafa;    }
 @media (max-width: 720px) {
	.class-row {        flex-direction: column;        align-items: stretch;      }
	.class-actions {        flex-direction: column;        align-items: stretch;      }
	.class-actions button {        width: 100%;      }
    }
/* end classes */
/* grade_categories */
.threshold-row {      display: grid;      grid-template-columns: 1fr 1fr auto;      gap: 10px;      align-items: center;      margin-bottom: 10px;    }
.category-card {      border: 1px solid #ddd;      border-radius: 10px;      padding: 14px;      margin-bottom: 14px;      background: #fff;    }
.category-card h3 {      margin-top: 0;      margin-bottom: 8px;    }
.category-meta {      color: #666;      font-size: 0.95rem;      margin-bottom: 10px;    }
.category-actions {      display: flex;      gap: 8px;      flex-wrap: wrap;      margin-top: 12px;    }
.threshold-list {      margin: 10px 0 0 18px;      padding: 0;    }
.threshold-list li {      margin-bottom: 4px;    }
@media (max-width: 720px) {
	.threshold-row {        grid-template-columns: 1fr;}
	.category-actions {        flex-direction: column;        align-items: stretch;}
    .category-actions button {        width: 100%;      }	
}
/* end grade_categories */
/* result_summary */

/* end result_summary */
/* results.html */
.page-shell {      max-width: 1400px;      margin: 0 auto;      padding: 24px;    }
.summary-grid {      display: grid;      grid-template-columns: repeat(4, minmax(0, 1fr));      gap: 12px;    }
.summary-box {      border: 1px solid #e5e5e5;      border-radius: 10px;      padding: 12px;      background: #fafafa;    }
table.results-table {      width: 100%;      border-collapse: collapse;    }
table.results-table th,table.results-table td {padding: 12px 10px;border-bottom: 1px solid #e5e5e5;text-align: left;vertical-align: top;}
table.results-table th {      background: #fafafa;      font-weight: 700;    }
.row-actions {      display: flex;      gap: 8px;      flex-wrap: wrap;    }
.small-btn {      padding: 7px 10px;      font-size: 0.92rem;      border: 0;      border-radius: 8px;      cursor: pointer;    }
.muted {      opacity: 0.75;      font-size: 0.92rem;    }
@media (max-width: 900px) {
    .summary-grid {        grid-template-columns: 1fr 1fr;      }
}
@media (max-width: 640px) {
    .summary-grid {        grid-template-columns: 1fr;      }
}
/* end results */


.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.teacher-header {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.teacher-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.teacher-header__brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.teacher-header__logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  text-decoration: none;
}

.teacher-header__logo:hover { text-decoration: underline; }
.teacher-header__meta { display: grid; gap: 3px; }

.teacher-nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: #eef2f7;
  border: 1px solid #d8e0ea;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.teacher-nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #1f2937;
  border-radius: 999px;
}

.teacher-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.teacher-nav__link,
.teacher-nav__menu-link {
  text-decoration: none;
  color: #1f2937;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.teacher-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
}

.teacher-nav__link:hover,
.teacher-nav__link:focus-visible,
.teacher-nav__link.is-active {
  background: #eef4ff;
  color: #194da8;
}

.teacher-nav__link--button { appearance: none; }
.teacher-nav__caret { font-size: 0.85rem; }

.teacher-nav__dropdown {
  position: relative;
}

.teacher-nav__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  padding: 8px;
  display: none;
  z-index: 30;
}

.teacher-nav__dropdown.is-open .teacher-nav__menu { display: block; }

.teacher-nav__menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
}

.teacher-nav__menu-link:hover,
.teacher-nav__menu-link:focus-visible,
.teacher-nav__menu-link.is-active {
  background: #eef4ff;
  color: #194da8;
}

.teacher-nav__menu-link--danger:hover,
.teacher-nav__menu-link--danger:focus-visible {
  background: #fde8e8;
  color: #9f1d1d;
}

@media (max-width: 900px) {
  .teacher-header { padding: 14px; }
  .teacher-nav-toggle { display: inline-flex; }
  .teacher-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eceff3;
  }
  .teacher-nav.is-open { display: flex; }
  .teacher-nav__link,
  .teacher-nav__link--button { width: 100%; justify-content: space-between; border-radius: 12px; }
  .teacher-nav__dropdown { width: 100%; }
  .teacher-nav__menu {
    position: static;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 12px;
    background: #f8fafc;
  }
}