.assessment-attempt-toolbar,
.assessment-question-heading,
.assessment-attempt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.student-choice-kind,
.student-choice-course-detail > span,
.student-choice-lesson > div > span {
  color: var(--purple);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.student-choice-course-card { cursor: pointer; }
.student-choice-course-card .button { margin-top: 16px; }
.student-choice-course-detail { margin-bottom: 18px; }
.student-choice-course-detail h2 { margin: 8px 0 4px; }
.student-choice-back { display: block; margin-bottom: 20px; color: var(--purple); font-weight: 700; }
.student-choice-course-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
.student-choice-course-tabs a { flex: 0 0 auto; padding: 11px 15px; border: 1px solid #e3e6eb; border-radius: 12px; background: #fff; font-weight: 700; }
.student-choice-course-tabs a.is-active { color: #fff; border-color: var(--purple); background: var(--purple); }
[data-choice-content] { display: grid; gap: 14px; }
.extra-material-lesson-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.student-choice-lesson-card { overflow: hidden; padding: 0; }
.student-choice-lesson-card .extra-material-card-image,
.student-choice-lesson-card .extra-material-card-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.student-choice-lesson-card-copy { padding: 18px; }
.student-choice-lesson-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.student-choice-lesson-card h3 { margin: 10px 0 7px; }
.student-choice-lesson-card p { min-height: 42px; margin: 0 0 14px; color: #667085; font-size: 13px; }
.student-choice-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #ece9f2; }
.student-choice-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #714ee7, #9b72ee); }
.student-choice-lesson-card small { display: block; margin-top: 7px; color: #746d81; }
.student-choice-lesson-card .button { width: 100%; margin-top: 15px; }
.student-choice-lesson { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.student-choice-lesson .extra-material-card-image,
.student-choice-lesson .extra-material-card-placeholder {
  flex: 0 0 220px;
  width: 220px;
  height: 124px;
  aspect-ratio: auto;
  border-radius: 14px;
  object-fit: cover;
}
.student-choice-lesson h3 { margin: 7px 0; }
.student-choice-lesson p { margin: 0 0 7px; color: #667085; }

@media (max-width: 640px) {
  .extra-material-lesson-grid { grid-template-columns: 1fr; }
  .student-choice-lesson { align-items: stretch; flex-direction: column; }
  .student-choice-lesson .extra-material-card-image,
  .student-choice-lesson .extra-material-card-placeholder {
    flex-basis: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .student-choice-lesson .button { width: 100%; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .extra-material-lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.assessment-attempt-form {
  display: grid;
  gap: 1rem;
}
.assessment-attempt-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 1rem;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #dbe2ea);
}
.assessment-question {
  padding: 1rem;
  border: 1px solid var(--border-color, #dbe2ea);
  border-radius: 12px;
}
.assessment-question p {
  margin: 0.75rem 0;
}
.assessment-options {
  display: grid;
  gap: 0.65rem;
}
.assessment-options label {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border-color, #dbe2ea);
  border-radius: 10px;
  cursor: pointer;
}
.assessment-question textarea {
  width: 100%;
  resize: vertical;
}
.assessment-attempt-actions {
  justify-content: flex-end;
}

/* =========================================================
   Assessment security preview
   ========================================================= */

.student-assessment-preview {
  display: grid;
  gap: 16px;
}
.student-assessment-preview-topline {
  display: flex;
  align-items: center;
}
.assessment-integrity-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}
.assessment-integrity-badge > span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  font-size: 0.65rem;
}
.assessment-integrity-badge.is-secure {
  border: 1px solid #c9c5ff;
  color: #5142e8;
  background: #f2f1ff;
}
.assessment-integrity-badge.is-secure > span {
  color: #fff;
  background: #5749ed;
}
.assessment-integrity-badge.is-locked {
  border: 1px solid #f3b8b5;
  color: #b42318;
  background: #fff2f1;
}
.assessment-integrity-badge.is-locked > span {
  color: #fff;
  background: #d92d20;
}
.assessment-security-summary {
  padding: 16px;
  border: 1px solid #e2e3f4;
  border-radius: 16px;
  background: linear-gradient(180deg, #fafaff, #f6f7ff);
}
.assessment-security-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.assessment-security-summary-heading strong {
  color: #222638;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
}
.assessment-security-summary-heading p {
  margin: 3px 0 0;
  color: #7b8090;
  font-size: 0.78rem;
}
.assessment-security-summary-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #9a6700;
  background: #fff1c7;
  font-size: 0.7rem;
  font-weight: 800;
}
.assessment-security-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.assessment-security-rule {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px;
  border: 1px solid #e8e9f4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}
.assessment-security-rule > span {
  display: grid;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  color: #5142e8;
  background: #eeecff;
  font-size: 0.72rem;
  font-weight: 900;
}
.assessment-security-rule p {
  display: grid;
  gap: 2px;
  margin: 0;
}
.assessment-security-rule strong {
  color: #303445;
  font-size: 0.76rem;
}
.assessment-security-rule small {
  color: #838896;
  font-size: 0.7rem;
  line-height: 1.4;
}
.assessment-integrity-lock-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid #f3b8b5;
  border-radius: 15px;
  background: #fff4f3;
}
.assessment-integrity-lock-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: #d92d20;
  font-weight: 900;
}
.assessment-integrity-lock-card strong {
  color: #a6261c;
  font-size: 0.86rem;
}
.assessment-integrity-lock-card p {
  margin: 3px 0;
  color: #a83d35;
  font-size: 0.76rem;
  line-height: 1.5;
}
.assessment-integrity-lock-card small,
.assessment-lock-message {
  color: #b42318;
  font-size: 0.75rem;
  font-weight: 700;
}
.assessment-disqualified-score {
  color: #b42318 !important;
  font-weight: 800;
}

/* =========================================================
   Secure assessment preflight
   ========================================================= */

.assessment-preflight {
  display: grid;
  gap: 18px;
}
.assessment-preflight-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e4e3fa;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at top right,
      rgba(87, 73, 237, 0.1),
      transparent 40%
    ),
    #fafaff;
}
.assessment-preflight-shield {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  background: var(--my-gradient, linear-gradient(145deg, #5142e8, #10bdc9));
  box-shadow: 0 12px 26px rgba(81, 66, 232, 0.2);
}
.assessment-preflight-eyebrow {
  color: #5749ed;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}
.assessment-preflight-hero h3 {
  margin: 2px 0 3px;
  font-family: "Manrope", sans-serif;
  font-size: 1.05rem;
}
.assessment-preflight-hero p {
  margin: 0;
  color: #777d8e;
  font-size: 0.78rem;
  line-height: 1.5;
}
.assessment-preflight-rules {
  display: grid;
  gap: 8px;
}
.assessment-preflight-rules article {
  display: flex;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e8e9ef;
  border-radius: 13px;
  background: #fff;
}
.assessment-preflight-rules article > span {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #5142e8;
  background: #eeecff;
  font-size: 0.75rem;
  font-weight: 900;
}
.assessment-preflight-rules strong {
  color: #2e3241;
  font-size: 0.8rem;
}
.assessment-preflight-rules p {
  margin: 2px 0 0;
  color: #7c8291;
  font-size: 0.73rem;
  line-height: 1.45;
}
.assessment-preflight-confirm {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px;
  border: 1px solid #dddff0;
  border-radius: 13px;
  cursor: pointer;
  background: #f8f9fc;
}
.assessment-preflight-confirm input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #5749ed;
}
.assessment-preflight-confirm > span {
  display: grid;
  gap: 2px;
}
.assessment-preflight-confirm strong {
  color: #303443;
  font-size: 0.8rem;
}
.assessment-preflight-confirm small {
  color: #7b8090;
  font-size: 0.72rem;
  line-height: 1.45;
}
.assessment-preflight-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.assessment-preflight-actions .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   Secure assessment system check
   ========================================================= */

.assessment-preflight-system {
  padding: 14px;
  border: 1px solid #e3e5ee;
  border-radius: 14px;
  background: #fafbfc;
}

.assessment-preflight-system-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.assessment-preflight-system-heading strong {
  color: #353948;
  font-size: 0.8rem;
}

.assessment-preflight-system-heading p {
  margin: 2px 0 0;
  color: #858a98;
  font-size: 0.7rem;
}

.assessment-preflight-system-heading > span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #777d8c;
  background: #eceef3;
  font-size: 0.65rem;
  font-weight: 800;
}

.assessment-preflight-system-heading > span.is-ready {
  color: #087443;
  background: #eaf8f1;
}

.assessment-preflight-system-heading > span.is-error {
  color: #b42318;
  background: #fff0ef;
}

.assessment-preflight-system-grid {
  display: grid;
  gap: 7px;
  margin-top: 11px;
}

.assessment-preflight-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border-radius: 10px;
  background: #ffffff;
}

.assessment-preflight-check-mark {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 900;
}

.assessment-preflight-check.is-ready .assessment-preflight-check-mark {
  color: #087443;
  background: #eaf8f1;
}

.assessment-preflight-check.is-warning .assessment-preflight-check-mark {
  color: #8b5d00;
  background: #fff0c3;
}

.assessment-preflight-check.is-error .assessment-preflight-check-mark {
  color: #b42318;
  background: #fff0ef;
}

.assessment-preflight-check > div {
  display: grid;
  gap: 1px;
}

.assessment-preflight-check strong {
  color: #414655;
  font-size: 0.72rem;
}

.assessment-preflight-check small {
  color: #8a8f9c;
  font-size: 0.65rem;
  line-height: 1.4;
}

.assessment-preflight-check > span:last-child {
  color: #717787;
  font-size: 0.65rem;
  font-weight: 800;
}

/* =========================================================
   Secure assessment network state
   ========================================================= */

.secure-exam-connection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 28px;
  border-bottom: 1px solid #ebd89b;
  background: #fff9e9;
}

.secure-exam-connection[hidden] {
  display: none;
}

.secure-exam-connection.is-error {
  border-bottom-color: #efbbb7;
  background: #fff4f3;
}

.secure-exam-connection.is-reconnecting {
  border-bottom-color: #dcdaf8;
  background: #f6f5ff;
}

.secure-exam-connection-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 9px;
  color: #8a5b00;
  background: #ffeab2;
  font-size: 0.75rem;
  font-weight: 900;
}

.secure-exam-connection.is-error .secure-exam-connection-icon {
  color: #b42318;
  background: #ffe1df;
}

.secure-exam-connection.is-reconnecting .secure-exam-connection-icon {
  color: #5142e8;
  background: #e9e7ff;
  animation: secureReconnectSpin 900ms linear infinite;
}

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

.secure-exam-connection > div {
  display: grid;
  gap: 1px;
}

.secure-exam-connection strong {
  color: #4b4f5d;
  font-size: 0.74rem;
}

.secure-exam-connection small {
  color: #7e8390;
  font-size: 0.67rem;
  line-height: 1.4;
}

.secure-exam-connection .button {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 0.68rem;
}

.assessment-resume-confirm {
  display: grid;
  justify-items: center;
  gap: 11px;
  text-align: center;
}

.assessment-resume-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 15px;
  color: #5749ed;
  background: #eceaff;
  font-size: 1.05rem;
  font-weight: 900;
}

.assessment-resume-confirm h3 {
  margin: 2px 0 0;
  color: #292d3c;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
}

.assessment-resume-confirm > p {
  margin: 0;
  color: #7d8290;
  font-size: 0.76rem;
}

.assessment-resume-facts {
  display: grid;
  width: 100%;
  gap: 6px;
  margin-top: 3px;
}

.assessment-resume-facts article {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #e4e5ee;
  border-radius: 10px;
  background: #fafbfc;
}

.assessment-resume-facts span {
  color: #858a98;
  font-size: 0.67rem;
}

.assessment-resume-facts strong {
  color: #414655;
  font-size: 0.68rem;
}

.assessment-resume-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 5px;
}

/* =========================================================
   Secure assessment workspace
   ========================================================= */

body.assessment-secure-mode {
  overflow: hidden;
}
.secure-assessment-shell {
  --exam-purple: #5749ed;
  --exam-ink: #171b2a;
  --exam-border: #e5e7f0;
  --exam-bg: #f5f7fb;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  color: var(--exam-ink);
  background:
    radial-gradient(
      circle at 85% -10%,
      rgba(87, 73, 237, 0.11),
      transparent 28%
    ),
    var(--exam-bg);
  animation: secureAssessmentEnter 220ms ease-out;
}
@keyframes secureAssessmentEnter {
  from {
    opacity: 0;
    transform: scale(0.995);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.secure-assessment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--exam-border);
  background: rgba(255, 255, 255, 0.96);
}
.secure-assessment-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}
.secure-assessment-brand img {
  display: block;
  width: 108px;
  height: auto;
}
.secure-assessment-divider {
  width: 1px;
  height: 34px;
  background: #e2e4ed;
}
.secure-assessment-brand > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.secure-assessment-label {
  color: var(--exam-purple);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.secure-assessment-brand strong {
  max-width: min(480px, 40vw);
  overflow: hidden;
  color: #232737;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.secure-assessment-header-status {
  display: flex;
  align-items: center;
  gap: 18px;
}
.secure-assessment-session-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #17774c;
  font-size: 0.73rem;
  font-weight: 800;
}
.secure-assessment-session-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #13a765;
  box-shadow: 0 0 0 5px rgba(19, 167, 101, 0.1);
}
.secure-assessment-timer {
  display: grid;
  min-width: 104px;
  padding: 8px 13px;
  border: 1px solid #e2e4ec;
  border-radius: 12px;
  background: #f8f9fc;
}
.secure-assessment-timer small {
  color: #7d8290;
  font-size: 0.64rem;
  font-weight: 700;
}
.secure-assessment-timer strong {
  color: #252938;
  font:
    800 1rem/1.2 "Manrope",
    sans-serif;
}
.secure-assessment-integrity-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 9px 28px;
  border-bottom: 1px solid #e4e6ee;
  background: #fff;
}
.secure-assessment-integrity-state {
  display: flex;
  align-items: center;
  gap: 9px;
}
.secure-assessment-integrity-state > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 900;
}
.secure-assessment-integrity-state.is-safe > span {
  color: #087443;
  background: #eaf8f1;
}
.secure-assessment-integrity-state > div {
  display: grid;
  gap: 1px;
}
.secure-assessment-integrity-state strong {
  color: #333746;
  font-size: 0.74rem;
}
.secure-assessment-integrity-state small {
  color: #858a98;
  font-size: 0.67rem;
}
.secure-assessment-save-state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #717788;
  font-size: 0.72rem;
  font-weight: 700;
}
.secure-save-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #13a765;
}
.secure-assessment-main {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  min-height: 0;
}
.secure-assessment-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-right: 1px solid var(--exam-border);
  background: rgba(250, 251, 254, 0.92);
}
.secure-assessment-progress-card,
.secure-assessment-policy-card {
  padding: 15px;
  border: 1px solid #e3e5ee;
  border-radius: 15px;
  background: #fff;
}
.secure-assessment-progress-card > span {
  color: #8b909e;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.secure-assessment-progress-card > strong {
  display: block;
  margin-top: 5px;
  color: #2b2f40;
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
}
.secure-assessment-progress-card > small {
  display: block;
  margin-top: 7px;
  color: #888e9c;
  font-size: 0.68rem;
}
.secure-assessment-progress-track {
  height: 6px;
  margin-top: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #eceef5;
}
.secure-assessment-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--my-gradient);
  transition: width 240ms ease;
}
.secure-assessment-policy-card strong {
  color: #343847;
  font-size: 0.75rem;
}
.secure-assessment-policy-card ul {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}
.secure-assessment-policy-card li {
  position: relative;
  padding-left: 14px;
  color: #7d8391;
  font-size: 0.69rem;
  line-height: 1.45;
}
.secure-assessment-policy-card li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5749ed;
}
.secure-assessment-stage {
  min-width: 0;
  overflow: auto;
  padding: clamp(22px, 4vw, 48px);
}
.secure-assessment-question-region {
  width: min(850px, 100%);
  margin: 0 auto;
}
.secure-assessment-loading {
  display: grid;
  justify-items: center;
  padding: 90px 20px;
  text-align: center;
}
.secure-assessment-loading strong {
  margin-top: 15px;
  color: #272b3a;
  font-family: "Manrope", sans-serif;
}
.secure-assessment-loading p {
  margin: 5px 0 0;
  color: #818696;
  font-size: 0.8rem;
}
.secure-assessment-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid #e4e5f7;
  border-top-color: #5749ed;
  border-radius: 50%;
  animation: secureAssessmentSpin 700ms linear infinite;
}
@keyframes secureAssessmentSpin {
  to {
    transform: rotate(360deg);
  }
}
.secure-assessment-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 28px;
  border-top: 1px solid #e2e4ec;
  color: #969aa7;
  background: #fff;
  font-size: 0.65rem;
}

@media (max-width: 860px) {
  .secure-assessment-main {
    grid-template-columns: 1fr;
  }
  .secure-assessment-side {
    display: none;
  }
  .secure-assessment-header {
    padding: 12px 16px;
  }
  .secure-assessment-header-status {
    gap: 10px;
  }
  .secure-assessment-session-status,
  .secure-assessment-divider {
    display: none;
  }
  .secure-assessment-brand img {
    width: 82px;
  }
  .secure-assessment-brand strong {
    max-width: 42vw;
  }
  .secure-assessment-integrity-strip {
    padding: 8px 16px;
  }
  .secure-assessment-integrity-state small {
    display: none;
  }
  .secure-assessment-stage {
    padding: 20px 16px;
  }
  .secure-assessment-footer {
    padding: 8px 16px;
  }
}

@media (max-width: 560px) {
  .assessment-security-rule-grid,
  .assessment-preflight-actions {
    grid-template-columns: 1fr;
  }
  .assessment-preflight-actions {
    display: grid;
  }
  .assessment-preflight-actions .button {
    width: 100%;
  }
  .secure-assessment-header {
    align-items: flex-start;
  }
  .secure-assessment-brand img,
  .secure-assessment-save-state > span:last-child,
  .secure-assessment-footer span:last-child {
    display: none;
  }
  .secure-assessment-brand strong {
    max-width: 50vw;
  }
  .secure-assessment-footer {
    justify-content: center;
  }
}

/* =========================================================
   Secure assessment question
   ========================================================= */

.secure-question-form {
  display: grid;
  gap: 22px;
}
.secure-question-card {
  overflow: hidden;
  border: 1px solid #e1e4ee;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 45px rgba(35, 40, 63, 0.06);
}
.secure-question-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #eceef4;
  background: linear-gradient(180deg, #fbfbff, #f8f9fd);
}
.secure-question-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.secure-question-number,
.secure-question-type,
.secure-question-required,
.secure-question-points {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
}
.secure-question-number {
  color: #5142e8;
  background: #efedff;
}
.secure-question-type {
  color: #555c6f;
  background: #eceff4;
}
.secure-question-required {
  color: #9a6700;
  background: #fff0c3;
}
.secure-question-points {
  flex: 0 0 auto;
  color: #3b4153;
  border: 1px solid #e1e4ec;
  background: #ffffff;
}
.secure-question-body {
  padding: clamp(22px, 4vw, 36px);
}
.secure-question-prompt {
  max-width: 760px;
  margin: 0 0 28px;
  color: #202435;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  font-weight: 700;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* =========================================================
   Secure answer options
   ========================================================= */

.secure-question-options {
  display: grid;
  gap: 11px;
}
.secure-option-choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.secure-option-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.secure-option-surface {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 12px 15px;
  border: 1px solid #e1e4ec;
  border-radius: 15px;
  color: #333848;
  background: #ffffff;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}
.secure-option-choice:hover .secure-option-surface {
  border-color: #c4c0fa;
  background: #fafaff;
  transform: translateY(-1px);
}
.secure-option-choice > input:focus-visible + .secure-option-surface {
  outline: 3px solid rgba(87, 73, 237, 0.16);
  outline-offset: 2px;
}
.secure-option-choice > input:checked + .secure-option-surface {
  border-color: #6759ee;
  background: linear-gradient(180deg, #f8f7ff, #f2f1ff);
  box-shadow: 0 0 0 3px rgba(87, 73, 237, 0.09);
}
.secure-option-letter {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #dadee9;
  border-radius: 11px;
  color: #616779;
  background: #f6f7fa;
  font-size: 0.78rem;
  font-weight: 900;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}
.secure-option-choice
  > input:checked
  + .secure-option-surface
  .secure-option-letter {
  border-color: #5749ed;
  color: #ffffff;
  background: #5749ed;
}
.secure-option-text {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.55;
}
.secure-option-check {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  font-size: 0.7rem;
  font-weight: 900;
}
.secure-option-choice
  > input:checked
  + .secure-option-surface
  .secure-option-check {
  color: #ffffff;
  background: #5749ed;
}

/* =========================================================
   Written answers and file answers
   ========================================================= */

.secure-text-answer {
  display: grid;
  gap: 8px;
}
.secure-text-answer textarea {
  width: 100%;
  min-height: 130px;
  padding: 16px;
  border: 1px solid #dfe2eb;
  border-radius: 15px;
  outline: none;
  color: #262b3b;
  background: #fbfcfe;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.65;
  resize: vertical;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}
.secure-essay-answer textarea {
  min-height: 280px;
}
.secure-text-answer textarea:focus {
  border-color: #6759ee;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(87, 73, 237, 0.09);
}
.secure-answer-hint {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #8a8f9c;
  font-size: 0.68rem;
}
.secure-file-answer {
  display: grid;
  gap: 13px;
}
.secure-file-dropzone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border: 1.5px dashed #cfd2e8;
  border-radius: 16px;
  cursor: pointer;
  background: #fafaff;
  transition:
    border-color 140ms ease,
    background 140ms ease;
}
.secure-file-dropzone:hover {
  border-color: #6759ee;
  background: #f6f5ff;
}
.secure-file-dropzone > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.secure-file-drop-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #5749ed;
  background: #ebe9ff;
  font-size: 1rem;
  font-weight: 900;
}
.secure-file-drop-copy {
  display: grid;
  gap: 3px;
}
.secure-file-drop-copy strong {
  color: #303547;
  font-size: 0.84rem;
}
.secure-file-drop-copy small {
  color: #838997;
  font-size: 0.71rem;
  line-height: 1.45;
}
.secure-file-list {
  display: grid;
  gap: 8px;
}
.secure-file-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #e2e5ed;
  border-radius: 12px;
  background: #ffffff;
}
.secure-file-item-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  color: #5749ed;
  background: #efedff;
  font-weight: 900;
}
.secure-file-item > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.secure-file-item strong {
  overflow: hidden;
  color: #343949;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.secure-file-item small {
  color: #9297a4;
  font-size: 0.65rem;
}
.secure-file-remove {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: #b42318;
  background: #fff0ef;
  font-size: 1rem;
}
.secure-file-empty {
  margin: 0;
  color: #9297a4;
  font-size: 0.73rem;
}

/* =========================================================
   Question navigation and transient states
   ========================================================= */

.secure-question-navigation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.secure-nav-button,
.secure-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  gap: 8px;
}
.secure-question-navigation-center {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.secure-question-navigation-center > span {
  color: #53596b;
  font-size: 0.74rem;
  font-weight: 800;
}
.secure-question-navigation-center > small {
  color: #9398a5;
  font-size: 0.65rem;
}
.secure-question-form.is-busy {
  pointer-events: none;
  opacity: 0.72;
}
.secure-assessment-save-state .secure-save-dot {
  transition:
    background 150ms ease,
    box-shadow 150ms ease;
}
.secure-assessment-save-state.is-saving .secure-save-dot {
  background: #d99b0b;
  box-shadow: 0 0 0 4px rgba(217, 155, 11, 0.1);
  animation: secureSavePulse 900ms ease-in-out infinite;
}
.secure-assessment-save-state.is-saved .secure-save-dot {
  background: #13a765;
}
.secure-assessment-save-state.is-error {
  color: #b42318;
}
.secure-assessment-save-state.is-error .secure-save-dot {
  background: #d92d20;
}
@keyframes secureSavePulse {
  50% {
    opacity: 0.45;
  }
}
.secure-assessment-timer {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}
.secure-assessment-timer.is-warning {
  border-color: #ebcf8e;
  background: #fff9e9;
}
.secure-assessment-timer.is-warning strong {
  color: #946200;
}
.secure-assessment-timer.is-danger {
  border-color: #f2aaa6;
  background: #fff1f0;
  box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.06);
}
.secure-assessment-timer.is-danger strong {
  color: #b42318;
}
.secure-assessment-question-region.is-entering-next .secure-question-card {
  animation: secureQuestionNext 220ms ease-out;
}
.secure-assessment-question-region.is-entering-previous .secure-question-card {
  animation: secureQuestionPrevious 220ms ease-out;
}
@keyframes secureQuestionNext {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes secureQuestionPrevious {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.secure-question-error {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 70px 24px;
  border: 1px solid #efc1bd;
  border-radius: 18px;
  text-align: center;
  background: #fff6f5;
}
.secure-question-error strong {
  color: #a9271e;
  font-family: "Manrope", sans-serif;
}
.secure-question-error p {
  margin: 0;
  color: #a85b55;
  font-size: 0.78rem;
}

@media (max-width: 680px) {
  .secure-question-card {
    border-radius: 16px;
  }
  .secure-question-card-header {
    align-items: flex-start;
    padding: 13px;
  }
  .secure-question-body {
    padding: 18px 14px;
  }
  .secure-question-prompt {
    margin-bottom: 20px;
    font-size: 1rem;
  }
  .secure-option-surface {
    min-height: 58px;
    padding: 10px;
  }
  .secure-option-letter {
    width: 32px;
    height: 32px;
  }
  .secure-question-navigation {
    grid-template-columns: 1fr 1fr;
  }
  .secure-question-navigation-center {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .secure-nav-button,
  .secure-submit-button {
    width: 100%;
    min-width: 0;
  }
  .secure-file-dropzone {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .secure-file-dropzone .button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .secure-answer-hint {
    flex-direction: column;
  }
}

.student-course-certificate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  background: #f8fafc;
}

.student-course-certificate > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.student-course-certificate span {
  color: #667085;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.student-course-certificate strong {
  color: #172033;
  font-size: 14px;
}

.student-course-certificate small {
  color: #667085;
  line-height: 1.45;
}

.student-course-certificate.is-issued {
  border-color: #a9dec4;
  background: #effbf5;
}

.student-course-certificate.is-issued strong {
  color: #087443;
}

.student-course-certificate.is-pending {
  border-color: #f2d69b;
  background: #fff9eb;
}

.student-course-certificate.is-pending strong {
  color: #9a6700;
}

.student-course-certificate.is-revoked {
  border-color: #f2b8b5;
  background: #fff2f1;
}

.student-course-certificate.is-revoked strong {
  color: #b42318;
}

.student-course-certificate-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  .student-course-certificate {
    align-items: stretch;
    flex-direction: column;
  }

  .student-course-certificate-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .student-course-certificate-actions .button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .assessment-attempt-toolbar,
  .assessment-attempt-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .assessment-attempt-actions .button {
    width: 100%;
  }
}
/* Student dashboard - scoped under .student-dashboard */
.student-dashboard {
  --student-purple: #5548ed;
  --student-bg: #f5f8fa;
  color: #0b1020;
  background: var(--student-bg);
}

.student-dashboard .dashboard-shell {
  grid-template-columns: 260px 1fr;
}

.student-dashboard .dashboard-sidebar {
  width: 260px;
  padding: 24px 16px 14px;
  border-color: #e3e7eb;
}

.student-dashboard .sidebar-brand {
  width: 180px;
  height: 52px;
  margin: 0 8px 20px;
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.student-dashboard .sidebar-brand img {
  width: 180px;
  height: 52px;
  max-height: none;
  object-fit: cover;
  object-position: center 48%;
}

.student-dashboard .sidebar-section-label {
  margin: 0 16px 9px;
  color: #667080;
  font-size: 10px;
  letter-spacing: 1.1px;
}

.student-dashboard .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.student-dashboard .sidebar-nav::-webkit-scrollbar {
  display: none;
}

.student-dashboard .nav-item {
  min-height: 47px;
  padding: 0 15px;
  gap: 14px;
  border-radius: 16px;
  color: #232a38;
  font-size: 15px;
  font-weight: 500;
}

.student-dashboard .nav-item.active {
  color: var(--student-purple);
  background: #eeecff;
}

.student-dashboard .nav-icon {
  width: 20px;
  height: 20px;
}

.student-dashboard .nav-icon svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.student-dashboard .nav-feature-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-primary, #6d5dfc);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.student-dashboard .nav-feature-badge[hidden] {
  display: none;
}

.student-dashboard .student-recordings-grid {
  display: grid;
  gap: 16px;
}

.student-dashboard .student-recording-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}

.student-dashboard .student-recording-card .api-record-thumbnail {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 16px;
}

.student-dashboard .student-session-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 190px;
  padding: 34px 24px;
  border: 1px dashed #c9d2e3;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f7ff 100%);
  text-align: center;
}

.student-dashboard .student-session-empty-state strong {
  color: #5548ed;
  font:
    800 22px/1.2 Manrope,
    sans-serif;
}

.student-dashboard .student-session-empty-state p {
  max-width: 460px;
  margin: 0;
  color: #687180;
  font-size: 14px;
  line-height: 1.55;
}

.student-dashboard .sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

.student-dashboard .sidebar-user {
  margin: 0;
  padding: 12px 13px;
  border: 0;
  border-radius: 20px;
  background: #f0f2f5;
}

.student-dashboard .user-avatar,
.student-dashboard .topbar-profile .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #fff;
  background: #5146e8;
  font-size: 13px;
}

.student-dashboard .sidebar-user strong {
  max-width: none;
  font-size: 13px;
}

.student-dashboard .sidebar-user small {
  max-width: none;
  font-size: 11px;
}

.student-dashboard .dashboard-topbar {
  height: 64px;
  padding: 0 32px;
  background: #fafbfc;
  border-color: #e5e8ec;
}

.student-dashboard .topbar-search {
  width: min(560px, 65vw);
}

.student-dashboard .topbar-search input {
  height: 42px;
  border: 0;
  border-radius: 20px;
  background: #f1f3f6;
  font-size: 14px;
}

.student-dashboard .icon-button {
  border: 0;
  background: transparent;
  font-size: 19px;
}

.student-dashboard .topbar-profile {
  padding: 0;
  border: 0;
}

.student-dashboard .topbar-profile div {
  display: none;
}

.student-dashboard .dashboard-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 24px 80px;
}

.student-dashboard .academic-hierarchy-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.student-dashboard .academic-hierarchy-tabs {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  margin-bottom: 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #e4e2f5;
  border-radius: 16px;
  background: #f4f2ff;
  scrollbar-width: none;
}

.student-dashboard .academic-hierarchy-tabs::-webkit-scrollbar {
  display: none;
}

.student-dashboard .academic-hierarchy-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 9px 13px;
  border-color: transparent;
  border-radius: 11px;
  background: transparent;
  color: #5f6675;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.student-dashboard .academic-hierarchy-tab:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.72);
  color: var(--student-purple);
}

.student-dashboard .academic-hierarchy-tab.is-active {
  border-color: var(--student-purple);
  background: var(--student-purple);
  color: #fff;
  box-shadow: 0 5px 14px rgba(85, 72, 237, 0.24);
}

.student-dashboard .academic-hierarchy-tab-count,
.student-dashboard .academic-hierarchy-tab.is-active .academic-hierarchy-tab-count {
  background: rgba(255, 255, 255, 0.88);
  color: var(--student-purple);
}

.student-dashboard .academic-hierarchy-course-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.student-dashboard .academic-hierarchy-course-action {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--student-purple);
  border-radius: 12px;
  background: var(--student-purple);
  color: #fff;
  font:
    700 13px/1 Manrope,
    sans-serif;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(85, 72, 237, 0.2);
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.student-dashboard .academic-hierarchy-course-action:hover {
  background: #493ddb;
  box-shadow: 0 7px 18px rgba(85, 72, 237, 0.28);
  transform: translateY(-1px);
}

.student-dashboard .progress-course-grid > .academic-hierarchy-dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.student-dashboard .academic-hierarchy-card {
  grid-template-areas:
    "media media"
    "header actions"
    "path actions";
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 13px 20px;
  min-width: 0;
  padding: 22px;
  border: 1px solid #e2e4ee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(32, 38, 75, 0.05);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.student-dashboard .academic-hierarchy-card:hover {
  border-color: #cbc6ff;
  box-shadow: 0 14px 30px rgba(56, 48, 139, 0.09);
  transform: translateY(-2px);
}

.student-dashboard .academic-hierarchy-card.is-expanded {
  grid-column: 1 / -1;
  grid-template-areas:
    "header actions"
    "path actions"
    "detail detail";
  transform: none;
}

.student-dashboard .academic-hierarchy-course-image,
.student-dashboard .student-course-image {
  display: grid;
  place-items: center;
  min-height: 132px;
  overflow: hidden;
  border-radius: 15px;
  color: rgba(24, 32, 51, 0.58);
}

.student-dashboard .course-image-variant-1 {
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(135deg, rgba(76, 201, 240, 0.38), rgba(67, 170, 139, 0.24));
}

.student-dashboard .course-image-variant-2 {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(135deg, rgba(255, 183, 77, 0.38), rgba(255, 112, 67, 0.24));
}

.student-dashboard .course-image-variant-3 {
  background:
    radial-gradient(circle at 25% 78%, rgba(255, 255, 255, 0.74), transparent 38%),
    linear-gradient(135deg, rgba(244, 143, 177, 0.36), rgba(255, 202, 40, 0.22));
}

.student-dashboard .course-image-variant-4 {
  background:
    radial-gradient(circle at 75% 72%, rgba(255, 255, 255, 0.74), transparent 40%),
    linear-gradient(135deg, rgba(129, 199, 132, 0.4), rgba(38, 198, 218, 0.22));
}

.student-dashboard .course-image-variant-5 {
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.76), transparent 36%),
    linear-gradient(135deg, rgba(100, 181, 246, 0.38), rgba(77, 208, 225, 0.22));
}

.student-dashboard .course-image-variant-6 {
  background:
    radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(135deg, rgba(255, 213, 79, 0.4), rgba(102, 187, 106, 0.22));
}

.student-dashboard .academic-hierarchy-course-image {
  grid-area: media;
}

.student-dashboard .academic-hierarchy-course-image span,
.student-dashboard .student-course-image span {
  font:
    700 12px/1 Manrope,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-dashboard .academic-hierarchy-card.is-expanded .academic-hierarchy-course-image {
  display: none;
}

.student-dashboard .academic-hierarchy-card-header {
  grid-area: header;
  align-items: flex-start;
}

.student-dashboard .academic-hierarchy-card-identity {
  gap: 0;
}

.student-dashboard .academic-hierarchy-card-identity > .academic-hierarchy-status {
  display: none;
}

.student-dashboard .academic-hierarchy-card-identity h3 {
  font:
    800 17px/1.35 Manrope,
    sans-serif;
}

.student-dashboard .academic-hierarchy-card-identity p {
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: #70798a;
  font-size: 12px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.student-dashboard .academic-hierarchy-card-header > .academic-hierarchy-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ecf9f0;
  color: #237a45;
  font-size: 10px;
}

.student-dashboard .academic-hierarchy-card-header > .academic-hierarchy-status.is-inactive {
  background: #fff0f1;
  color: #9c2731;
}

.student-dashboard .academic-hierarchy-card-path {
  grid-area: path;
  font-size: 11px;
}

.student-dashboard .academic-hierarchy-card-actions {
  grid-area: actions;
  align-self: center;
}

.student-dashboard .academic-hierarchy-expander {
  min-width: 92px;
  min-height: 42px;
  border-color: var(--student-purple);
  border-radius: 12px;
  background: var(--student-purple);
  color: #fff;
}

.student-dashboard .academic-hierarchy-expander:hover {
  border-color: #493ddb;
  background: #493ddb;
}

.student-dashboard .academic-hierarchy-detail {
  grid-area: detail;
}

@media (max-width: 1150px) {
  .student-dashboard .progress-course-grid > .academic-hierarchy-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.student-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.student-header h1 {
  margin: 0 0 6px;
  font: 800 31px/1.15 Manrope;
  letter-spacing: -1.2px;
}

.student-header p {
  margin: 0;
  color: #687180;
  font-size: 16px;
}

.student-card {
  border: 1px solid #dfe3e7;
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

.student-welcome {
  min-height: 174px;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 35px 45px;
  margin-bottom: 32px;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(115deg, #5542e9 0%, #514aeb 48%, #16b6ad 100%);
}

.welcome-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.18);
  font: 800 24px Manrope;
}

.student-welcome > div:first-of-type {
  flex: 1;
}

.student-welcome small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.student-welcome h1 {
  margin: 5px 0;
  font: 800 29px Manrope;
}

.student-welcome p {
  margin: 0;
  color: #dedcff;
  font-size: 14px;
}

.welcome-stat {
  min-width: 90px;
  text-align: left;
}

.welcome-stat strong,
.welcome-stat span {
  display: block;
}

.welcome-stat strong {
  font: 800 28px Manrope;
}

.welcome-stat span {
  margin-top: 2px;
  color: #e5e4ff;
  font-size: 11px;
  letter-spacing: 1px;
}

.student-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(230px, 1fr);
  align-items: stretch;
  gap: 24px;
  margin-bottom: 32px;
}

.notifications-card {
  display: flex;
  max-height: 360px;
  flex-direction: column;
  overflow: hidden;
}

.notifications-card .api-record-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
}

.task-center,
.notifications-card,
.planner-card {
  padding: 27px;
}

.student-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.student-card-title h2,
.notifications-card h2,
.planner-card h2 {
  margin: 0;
  font: 800 18px Manrope;
}

.student-card-title p,
.planner-card > div > p {
  margin: 3px 0 0;
  color: #717a88;
  font-size: 12px;
}

.student-card-title button {
  border: 0;
  color: #5a4df0;
  background: none;
  font-weight: 700;
}

.task-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 9px;
  padding: 13px 18px;
  border: 1px solid;
  border-radius: 20px;
}

.task-row > b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 50%;
}

.task-row > div {
  flex: 1;
}

.task-row strong,
.task-row small {
  display: block;
}

.task-row strong {
  font-size: 14px;
}

.task-row small {
  margin-top: 2px;
  color: #687180;
  font-size: 12px;
}

.task-row time {
  color: #687180;
  font: 600 11px monospace;
}

.task-row.red {
  color: #ff3f4b;
  border-color: #ffbcc0;
  background: #fff0f1;
}

.task-row.amber {
  color: #ff9829;
  border-color: #ffd5a7;
  background: #fff7ed;
}

.task-row.green {
  color: #2fbd67;
  border-color: #bde7cc;
  background: #eefaf2;
}

.task-row strong,
.task-row small,
.task-row time {
  color: #17202f;
}

.task-row small,
.task-row time {
  color: #697180;
}

.notifications-card h2 {
  margin-bottom: 21px;
}

.student-notice {
  display: flex;
  gap: 12px;
  margin: 17px 0;
}

.student-notice > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: #5a4df0;
  background: #f0f2f6;
}

.student-notice div {
  min-width: 0;
}

.student-notice strong,
.student-notice p,
.student-notice small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.student-notice strong {
  font-size: 13px;
}

.student-notice p {
  margin: 3px 0;
  color: #687180;
  font-size: 11px;
}

.student-notice small {
  color: #697180;
  font: 9px monospace;
  letter-spacing: 1px;
}

.planner-card {
  position: relative;
  margin-bottom: 34px;
}

.planner-icon {
  position: absolute;
  right: 27px;
  top: 28px;
  font-size: 20px;
}

.planner-list {
  margin: 25px 0 0 15px;
  border-left: 2px solid #e3e6eb;
}

.planner-row {
  position: relative;
  display: grid;
  grid-template-columns: 70px max-content 1fr;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding-left: 24px;
}

.planner-row:before {
  content: "";
  position: absolute;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5548ed;
}

.planner-row.cyan:before {
  background: #05b8c5;
}

.planner-row.gray:before {
  background: #6c7480;
}

.planner-row.orange:before {
  background: #ff9829;
}

.planner-row.green:before {
  background: #32bd69;
}

.planner-row time {
  color: #687180;
  font: 600 12px monospace;
}

.planner-row strong {
  font-size: 14px;
}

.planner-row span {
  color: #687180;
  font-size: 11px;
}

.course-progress-heading {
  margin: 0 0 28px;
}

.course-progress-heading h2 {
  margin: 0;
  font: 800 27px Manrope;
}

.course-progress-heading p {
  margin: 5px 0 0;
  color: #687180;
  font-size: 15px;
}

.progress-course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.progress-course {
  padding: 20px;
  border-radius: 22px;
}

.student-thumb {
  height: 112px;
  border-radius: 20px;
  background: linear-gradient(135deg, #d9d8ff, #c1f6fa);
}

.student-thumb.yellow {
  background: linear-gradient(135deg, #ffe6a9, #ffebca);
}

.student-thumb.mint {
  background: linear-gradient(135deg, #c9f5e8, #bff3f6);
}

.student-thumb.lilac {
  background: linear-gradient(135deg, #e5c9ff, #f6d8ff);
}

.student-thumb.peach {
  background: linear-gradient(135deg, #ffd9df, #fff0bd);
}

.student-thumb.sky {
  background: linear-gradient(135deg, #bff1f1, #dddfff);
}

.progress-course > small {
  display: block;
  margin-top: 17px;
  color: #5a4df0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.progress-course h3 {
  min-height: 62px;
  margin: 7px 0 3px;
  font: 800 17px/1.25 Manrope;
}

.progress-course p {
  margin: 0 0 19px;
  color: #687180;
  font-size: 11px;
}

.progress-course > div:not(.student-thumb) {
  display: flex;
  justify-content: space-between;
  color: #687180;
  font-size: 11px;
}

.progress-course i {
  display: block;
  height: 6px;
  margin-top: 7px;
  border-radius: 5px;
  background: #edf0f4;
  overflow: hidden;
}

.progress-course i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #594bee, #06bdc4);
}

.student-tabs {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  border-bottom: 1px solid #dfe3e8;
}

.student-tabs button {
  padding: 12px 18px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #697180;
  background: none;
  font-size: 14px;
  font-weight: 700;
}

.student-tabs button.active {
  color: #5a4df0;
  border-color: #5a4df0;
}

.student-course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.student-course {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 25px;
  padding: 25px;
}

.student-course .student-thumb {
  height: 130px;
}

.student-course-info {
  min-width: 0;
}

.student-course-info > small {
  color: #687180;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.student-course-info > small b {
  color: #5a4df0;
}

.student-course-info h2 {
  margin: 10px 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 18px Manrope;
}

.student-course-info p {
  margin: 0;
  color: #687180;
  font-size: 12px;
}

.course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.course-actions button,
.certificate-bottom button {
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 18px;
  color: #171e2c;
  background: #f0f2f5;
  font-size: 11px;
  font-weight: 700;
}

.course-actions button.primary {
  color: #fff;
  background: #5749ed;
}

.section-heading {
  margin: 0 0 20px;
  font: 800 19px Manrope;
}

.exam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.exam-card {
  min-height: 205px;
  padding: 24px;
}

.exam-card > small {
  color: #5a4df0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.exam-card h2 {
  min-height: 48px;
  margin: 12px 0 15px;
  font: 800 18px/1.35 Manrope;
}

.exam-card p {
  color: #687180;
  font: 12px monospace;
}

.exam-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 23px;
}

.exam-card b {
  color: #ff9829;
  font-size: 11px;
  letter-spacing: 1px;
}

.exam-card button {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #5749ed;
  font-weight: 700;
}

.history-title {
  margin-top: 36px;
}

.student-table {
  overflow: hidden;
}

.student-tr {
  display: grid;
  grid-template-columns: 1.4fr 1.5fr 0.6fr 0.4fr;
  align-items: center;
  min-height: 67px;
  padding: 0 20px;
  border-top: 1px solid #e3e6ea;
  font-size: 13px;
}

.student-tr:first-child {
  border: 0;
}

.student-tr span {
  color: #687180;
}

.student-tr.table-head {
  min-height: 52px;
  color: #697180;
  background: #fafafd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.grades-top {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(245px, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.grade-chart {
  padding: 28px;
}

.grade-chart h2,
.glance-card h2,
.course-grades > h2 {
  margin: 0;
  font: 800 19px Manrope;
}

.grade-chart > p {
  margin: 6px 0 0;
  color: #687180;
  font-size: 12px;
}

.student-line-chart {
  height: 315px;
  display: grid;
  grid-template-columns: 45px 1fr;
  padding-top: 30px;
}

.student-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
  color: #687180;
  font-size: 11px;
}

.student-plot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 24px;
}

.student-plot > i {
  border-top: 1px dashed #dfe3e8;
}

.student-plot svg {
  position: absolute;
  inset: 0 0 24px;
  width: 100%;
  height: calc(100% - 24px);
}

.student-plot path.line {
  fill: none;
  stroke: #5147ed;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.student-plot path.area {
  fill: url(#scoreFill);
}

.student-x {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  color: #687180;
  font-size: 11px;
}

.glance-card {
  padding: 28px 24px;
}

.glance-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 77px;
  border-bottom: 1px solid #e3e6ea;
}

.glance-card > div:last-child {
  border: 0;
}

.glance-card span {
  max-width: 100px;
  color: #687180;
  font-size: 14px;
}

.glance-card strong {
  font: 800 22px Manrope;
}

.course-grades {
  overflow: hidden;
}

.course-grades > h2 {
  padding: 28px 25px;
}

.grade-tr {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 0.75fr);
  align-items: center;
  min-height: 67px;
  padding: 0 25px;
  border-top: 1px solid #e3e6ea;
  font-size: 13px;
}

.grade-head {
  min-height: 50px;
  color: #687180;
  background: #fafafd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}

.schedule-control {
  display: flex;
  padding: 4px;
  border-radius: 24px;
  background: #f0f2f6;
}

.schedule-control button {
  height: 34px;
  padding: 0 22px;
  border: 0;
  border-radius: 18px;
  color: #687180;
  background: none;
  font-weight: 700;
}

.schedule-control button.active {
  color: #171e2c;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 25, 35, 0.08);
}

.week-calendar {
  overflow: hidden;
}

.calendar-days {
  display: grid;
  grid-template-columns: 70px repeat(7, 1fr);
  height: 52px;
  border-bottom: 1px solid #dfe3e8;
}

.calendar-days > * {
  display: grid;
  place-items: center;
  border-right: 1px solid #e3e6ea;
  color: #697180;
  font-size: 11px;
  letter-spacing: 1px;
}

.calendar-body {
  display: grid;
  grid-template-columns: 70px 1fr;
  height: 730px;
}

.calendar-times {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
}

.calendar-times span {
  padding: 9px 10px;
  border-bottom: 1px solid #e3e6ea;
  color: #687180;
  text-align: right;
  font: 10px monospace;
}

.calendar-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.calendar-grid > i {
  border-right: 1px solid #e3e6ea;
  border-bottom: 1px solid #e3e6ea;
}

.cal-event {
  position: absolute;
  padding: 13px 10px;
  border: 1px solid;
  border-radius: 17px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.purple-event {
  color: #5749ed;
  border-color: #bdb8ff;
  background: #dedcff;
}

.cyan-event {
  color: #02adbb;
  border-color: #83dfe3;
  background: #caf1f2;
}

.green-event {
  color: #2db965;
  border-color: #a6dfbb;
  background: #d9f1e2;
}

.orange-event {
  color: #ff952b;
  border-color: #ffca91;
  background: #fff0dc;
}

.cal-event.math {
  left: calc(0% + 6px);
  top: 5px;
  width: calc(14.285% - 12px);
  height: 62px;
}

.cal-event.react {
  left: calc(28.57% + 6px);
  top: 5px;
  width: calc(14.285% - 12px);
  height: 128px;
}

.cal-event.office {
  left: calc(71.43% + 6px);
  top: 78px;
  width: calc(14.285% - 12px);
  height: 62px;
}

.cal-event.spanish {
  left: calc(57.14% + 6px);
  top: 220px;
  width: calc(14.285% - 12px);
  height: 128px;
}

.cal-event.physics {
  left: calc(28.57% + 6px);
  top: 512px;
  width: calc(14.285% - 12px);
  height: 62px;
}

.question-form {
  padding: 30px;
  margin-bottom: 36px;
}

.question-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.question-form select,
.question-form textarea {
  width: 100%;
  border: 0;
  border-radius: 18px;
  color: #17202f;
  background: #f0f2f6;
  font: 14px inherit;
}

.question-form select {
  height: 50px;
  padding: 0 20px;
}

.question-form textarea {
  height: 135px;
  margin-top: 20px;
  padding: 22px;
  resize: vertical;
}

.question-form > button {
  display: block;
  height: 48px;
  margin: 20px 0 0 auto;
  padding: 0 24px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: #5749ed;
  font-weight: 700;
}

.question-history-title {
  margin-bottom: 22px;
}

.question-history {
  display: grid;
  gap: 15px;
}

.question-card {
  padding: 25px;
}

.question-card > div {
  display: flex;
  align-items: center;
}

.question-card span {
  color: #687180;
}

.question-card b {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 9px;
  letter-spacing: 1px;
}

.question-card b.answered {
  color: #31bd69;
  background: #eaf9ef;
}

.question-card b.pending {
  color: #ff9829;
  background: #fff3e5;
}

.question-card p {
  margin: 16px 0;
  font-size: 14px;
}

.question-card small {
  color: #687180;
  font: 9px monospace;
  letter-spacing: 1.5px;
}

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.certificate-card {
  overflow: hidden;
}

.certificate-top {
  min-height: 225px;
  position: relative;
  padding: 30px;
  color: #fff;
  background: linear-gradient(135deg, #5544e9, #6f4bd2 50%, #08b7bb);
}

.certificate-top > span {
  font-size: 31px;
}

.certificate-top > small {
  position: absolute;
  right: 30px;
  top: 35px;
  font-size: 9px;
  letter-spacing: 2px;
}

.certificate-top p {
  margin: 7px 0 12px;
  color: #dedcff;
  font-size: 11px;
  letter-spacing: 1px;
}

.certificate-top h2 {
  margin: 0;
  font: 800 21px/1.25 Manrope;
}

.certificate-top b {
  display: block;
  margin-top: 10px;
  color: #dedcff;
  font: 12px monospace;
}

.certificate-bottom {
  padding: 25px;
}

.certificate-bottom > span,
.certificate-bottom > strong {
  display: block;
}

.certificate-bottom > span {
  color: #687180;
  font-size: 12px;
}

.certificate-bottom > strong {
  margin-top: 9px;
  font-size: 15px;
}

.certificate-bottom > div {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.question-form select,
.question-form textarea {
  font-family: inherit;
  font-size: 14px;
}

@media (max-width: 1050px) {
  .student-dashboard .dashboard-content {
    padding-inline: 20px;
  }

  .student-dashboard-grid,
  .grades-top {
    grid-template-columns: 1fr;
  }

  .progress-course-grid {
    grid-template-columns: 1fr 1fr;
  }

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

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

@media (max-width: 780px) {
  .student-dashboard .progress-course-grid > .academic-hierarchy-dashboard {
    grid-template-columns: 1fr;
  }

  .student-dashboard .academic-hierarchy-card {
    grid-template-areas:
      "media"
      "header"
      "path"
      "actions"
      "detail";
    grid-template-columns: minmax(0, 1fr);
  }

  .student-dashboard .academic-hierarchy-card.is-expanded {
    grid-template-areas:
      "header"
      "path"
      "actions"
      "detail";
  }

  .student-dashboard .academic-hierarchy-card-actions {
    width: 100%;
  }

  .student-dashboard .academic-hierarchy-expander {
    width: 100%;
  }

  .student-dashboard .academic-hierarchy-tab-row {
    align-items: stretch;
    flex-direction: column;
  }

  .student-dashboard .academic-hierarchy-tabs {
    width: 100%;
  }

  .student-dashboard .academic-hierarchy-course-actions {
    width: 100%;
  }

  .student-dashboard .academic-hierarchy-course-action {
    flex: 1 1 0;
  }

  .student-dashboard .dashboard-shell {
    display: block;
  }

  .student-dashboard .dashboard-sidebar {
    width: min(86vw, 280px);
  }

  .student-dashboard .dashboard-content {
    padding: 20px 14px 52px;
  }

  .student-header {
    align-items: flex-start;
  }

  .student-header h1 {
    font-size: 26px;
  }

  .student-header p {
    font-size: 14px;
  }

  .student-welcome {
    flex-wrap: wrap;
    padding: 28px;
  }

  .student-welcome > div:first-of-type {
    min-width: 60%;
  }

  .exam-grid,
  .certificate-grid {
    grid-template-columns: 1fr;
  }

  .student-course {
    grid-template-columns: 100px 1fr;
  }

  .student-course .student-thumb {
    height: 110px;
  }

  .week-calendar {
    overflow-x: auto;
  }

  .calendar-days,
  .calendar-body {
    min-width: 850px;
  }

  .student-table,
  .course-grades {
    overflow-x: auto;
  }

  .student-tr,
  .grade-tr {
    min-width: 700px;
  }
}

@media (max-width: 520px) {
  .student-dashboard .academic-hierarchy-course-actions {
    flex-direction: column;
  }

  .student-dashboard .academic-hierarchy-course-action {
    width: 100%;
  }

  .student-header {
    flex-direction: column;
  }

  .student-dashboard-grid,
  .progress-course-grid {
    grid-template-columns: 1fr;
  }

  .welcome-stat {
    min-width: 70px;
  }

  .student-welcome h1 {
    font-size: 23px;
  }

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

  .student-course .student-thumb {
    height: 150px;
  }

  .question-form > div {
    grid-template-columns: 1fr;
  }

  .planner-row {
    grid-template-columns: 55px 1fr;
  }

  .planner-row span {
    grid-column: 2;
  }

  .student-tabs {
    overflow-x: auto;
  }

  .student-tabs button {
    white-space: nowrap;
  }
}

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

.student-course-section {
  margin-top: 24px;
}

.student-course-section-heading {
  margin-bottom: 12px;
}

.student-course-section-heading h2 {
  margin: 0;
  color: #172033;
  font-size: 17px;
}

.student-course-section-heading p {
  margin: 5px 0 0;
  color: #737c8b;
  font-size: 12px;
}

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

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

@media (max-width: 700px) {
  .student-course-grid {
    grid-template-columns: 1fr;
  }
}

.student-course-card {
  display: grid;
  align-content: start;
  gap: 16px;
}

.student-course-teacher {
  display: grid;
  gap: 4px;
  margin: 0;
}

.student-course-teacher span {
  color: #7b8492;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.student-course-teacher strong {
  color: #303949;
  font-size: 12px;
}

.student-course-card.is-unavailable {
  opacity: 0.84;
  border-color: #e4d7d8;
  background: #fffafa;
}

.student-course-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.student-course-card-header h3 {
  margin: 0;
  color: #172033;
  font-size: 16px;
}

.student-course-card-header p {
  margin: 5px 0 0;
  color: #7a8391;
  font-size: 11px;
}

.student-course-access-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
}

.student-course-access-status.status-available {
  color: #16733d;
  background: #e7f7ed;
}

.student-course-access-status.status-not-started {
  color: #7b5b0a;
  background: #fff5d6;
}

.student-course-access-status.status-expired,
.student-course-access-status.status-enrollment-inactive,
.student-course-access-status.status-course-inactive {
  color: #9c2731;
  background: #fff0f1;
}

.student-course-path {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: #596273;
  font-size: 11px;
}

.student-course-path b {
  color: #a3aab4;
}

.student-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.student-course-meta span {
  padding: 6px 8px;
  border-radius: 8px;
  color: #596273;
  background: #f1f3f5;
  font-size: 10px;
  font-weight: 700;
}

.student-course-description {
  margin: 0;
  color: #687181;
  font-size: 12px;
  line-height: 1.65;
}

.student-course-access-period {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #f7f8fa;
}

.student-course-access-period span {
  color: #7b8492;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.student-course-access-period strong {
  color: #303949;
  font-size: 11px;
}

.student-course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.student-course-unavailable-message {
  padding: 11px 12px;
  border-radius: 10px;
  color: #8f3039;
  background: #fff1f2;
  font-size: 11px;
  line-height: 1.55;
}

.parent-child-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.parent-child-card {
  display: grid;
  gap: 14px;
}

.parent-child-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.parent-child-card-header h2 {
  margin: 0;
  font-size: 16px;
}

.parent-child-card-header p {
  margin: 5px 0 0;
  color: #7a8391;
  font-size: 11px;
}

.parent-child-grade {
  display: grid;
  gap: 4px;
}

.parent-child-grade span {
  color: #7a8391;
  font-size: 10px;
}

.parent-child-grade strong {
  color: #303949;
  font-size: 13px;
}

.parent-child-statistics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.parent-child-statistics span {
  padding: 6px 8px;
  border-radius: 8px;
  color: #596273;
  background: #f1f3f5;
  font-size: 10px;
  font-weight: 700;
}

.parent-child-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.student-dashboard .planner-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 38px;
}

.student-dashboard .planner-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-dashboard .planner-heading-actions button,
.student-dashboard .planner-heading-actions a {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid #dce1e7;
  border-radius: 9px;
  color: #5749ed;
  background: #fff;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

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

.student-dashboard .planner-row > div {
  min-width: 0;
}

.student-dashboard .planner-row > div strong,
.student-dashboard .planner-row > div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-dashboard .planner-reminder {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.student-dashboard .planner-reminder > span {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.student-dashboard .planner-reminder .is-live {
  color: #b4232c;
  background: #ffe9eb;
}

.student-dashboard .planner-reminder .is-soon {
  color: #955700;
  background: #fff0d8;
}

.student-dashboard .planner-reminder .is-upcoming {
  color: #5749ed;
  background: #f0efff;
}

.student-dashboard .planner-reminder .is-waiting {
  color: #5d6674;
  background: #eef1f4;
}

.student-dashboard .planner-reminder .is-completed {
  color: #16733d;
  background: #e7f7ed;
}

.student-dashboard .planner-reminder button {
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #5749ed;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.student-dashboard .planner-empty {
  padding: 24px;
  text-align: center;
}

.student-dashboard .planner-empty p {
  margin: 5px 0 0;
  color: #737c8a;
  font-size: 12px;
}

/* =========================================
   Assessments and Grades
   ========================================= */

.student-dashboard .student-assessment-workspace {
  display: grid;
  gap: 20px;
}

.student-dashboard .student-assessment-tabs,
.student-dashboard .student-announcement-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid #e0e4e9;
  border-radius: 16px;
  background: #f4f5f8;
}

.student-dashboard .student-assessment-tabs button,
.student-dashboard .student-assessment-tabs a,
.student-dashboard .student-announcement-tabs button,
.student-dashboard .student-announcement-tabs a {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 43px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #687181;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.student-dashboard .student-assessment-tabs button.is-active,
.student-dashboard .student-assessment-tabs a.is-active,
.student-dashboard .student-announcement-tabs button.is-active,
.student-dashboard .student-announcement-tabs a.is-active {
  color: #5749ed;
  border-color: #d6d2ff;
  background: #fff;
  box-shadow: 0 5px 18px rgba(57, 53, 118, 0.08);
}

.student-dashboard .student-assessment-panel,
.student-dashboard .student-announcement-panel {
  display: grid;
  gap: 14px;
}

.student-dashboard .student-assessment-panel[hidden],
.student-dashboard .student-announcement-panel[hidden] {
  display: none;
}

.student-dashboard .student-assessment-list,
.student-dashboard .student-grade-list {
  padding: 22px;
}

/* =========================================
   Compact Announcements
   ========================================= */

.student-dashboard .student-announcement-workspace {
  display: grid;
  gap: 20px;
}

.student-dashboard .student-announcements-compact {
  padding: 17px;
}

.student-dashboard .student-announcements-compact .announcements-toolbar {
  gap: 9px;
  margin-bottom: 14px;
}

.student-dashboard .student-announcements-compact .announcements-toolbar label {
  min-width: 150px;
}

.student-dashboard .student-announcements-compact .announcements-list {
  gap: 10px;
}

.student-dashboard .student-announcements-compact .announcement-card {
  padding: 14px 15px;
  border-radius: 12px;
}

.student-dashboard .student-announcements-compact .announcement-card-header h3 {
  margin-bottom: 6px;
  font-size: 14px;
}

.student-dashboard .student-announcements-compact .announcement-card > p {
  display: -webkit-box;
  margin: 9px 0;
  overflow: hidden;
  color: #66707f;
  font-size: 11px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.student-dashboard .student-announcements-compact .announcement-meta {
  margin-top: 8px;
  font-size: 10px;
}

.student-dashboard .student-announcements-compact .announcement-actions {
  margin-top: 10px;
}

.student-dashboard .student-announcements-compact .announcement-actions button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 10px;
}

.student-dashboard .reschedule-vote-introduction,
.student-dashboard .student-reschedule-feed {
  padding: 18px;
}

.student-dashboard .reschedule-vote-introduction p {
  margin: 6px 0 0;
  color: #737c8a;
  font-size: 12px;
  line-height: 1.6;
}

/* =========================================
   Live and Recorded
   ========================================= */

.student-dashboard .student-live-section,
.student-dashboard .student-recorded-section {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.student-dashboard .student-live-session-grid {
  display: grid;
  gap: 12px;
}

.student-dashboard .student-live-session-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.student-dashboard .student-live-session-card > div {
  min-width: 0;
}

.student-dashboard .student-live-session-card h3 {
  margin: 5px 0;
  font-size: 15px;
}

.student-dashboard .student-live-session-card p,
.student-dashboard .student-live-session-card small {
  display: block;
  margin: 0;
  color: #737c8a;
  font-size: 11px;
}

.student-dashboard .student-live-course-subject {
  color: #5749ed;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.student-dashboard .student-live-session-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  color: #5d6674;
  background: #eef1f4;
  font-size: 10px;
  font-weight: 750;
}

.student-dashboard .student-live-session-status.status-live {
  color: #b4232c;
  background: #ffe9eb;
}

@media (max-width: 700px) {
  .student-dashboard .planner-heading {
    display: grid;
    padding-right: 30px;
  }

  .student-dashboard .planner-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 9px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .student-dashboard .planner-reminder {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .student-dashboard .student-live-session-card {
    align-items: stretch;
    flex-direction: column;
  }

  .student-dashboard .student-live-session-card .button {
    width: 100%;
  }

  .student-dashboard .student-assessment-tabs,
  .student-dashboard .student-announcement-tabs {
    overflow-x: auto;
  }

  .student-dashboard .student-assessment-tabs button,
  .student-dashboard .student-assessment-tabs a,
  .student-dashboard .student-announcement-tabs button,
  .student-dashboard .student-announcement-tabs a {
    flex: 0 0 auto;
  }
}

.student-curriculum-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid #dcd9ff;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f4ff, #fbfbff);
}

.student-curriculum-context > div {
  min-width: 0;
}

.student-curriculum-context span {
  display: block;
  color: #7469e9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.9px;
}

.student-curriculum-context strong {
  display: block;
  margin-top: 5px;
  color: #272f40;
  font-size: 18px;
}

.student-curriculum-context p {
  margin: 5px 0 0;
  color: #6d7684;
  font-size: 12px;
}

.student-curriculum-sync-status {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  color: #157540 !important;
  background: #e6f8ed;
  font-size: 10px !important;
  letter-spacing: 0 !important;
}

.student-curriculum-context-error {
  color: #a02732;
}

.student-course-payment-notice {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #f1d49f;
  border-radius: 11px;
  color: #82500a;
  background: #fff7e8;
}

.student-course-payment-notice strong {
  font-size: 11px;
}

.student-course-payment-notice span {
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .student-curriculum-context {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================
   Student workspace consistency layer
   Keeps shared Admin/Teacher features visually aligned while preserving
   the Student dashboard's purple identity.
   ========================================= */

.student-dashboard {
  --student-ink: #172033;
  --student-muted: #687181;
  --student-line: #e1e5ea;
  --student-soft: #f6f7fa;
  --student-purple-soft: #f1efff;
}

.student-dashboard .dashboard-view {
  min-width: 0;
}

.student-dashboard .dashboard-view:not([hidden]) {
  animation: student-view-enter 180ms ease-out;
}

@keyframes student-view-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.student-dashboard .dashboard-page-header,
.student-dashboard .student-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.student-dashboard .dashboard-page-header > div,
.student-dashboard .student-header > div {
  min-width: 0;
}

.student-dashboard .dashboard-page-eyebrow {
  margin: 0 0 8px;
  color: var(--student-purple);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.student-dashboard .dashboard-page-header h1,
.student-dashboard .student-header h1 {
  margin: 0;
  color: var(--student-ink);
  font:
    800 31px/1.15 Manrope,
    sans-serif;
  letter-spacing: -1.1px;
}

.student-dashboard .dashboard-page-header h1 + p,
.student-dashboard .student-header h1 + p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--student-muted);
  font-size: 15px;
  line-height: 1.6;
}

.student-dashboard .dashboard-page-header > .button,
.student-dashboard .student-header > .button {
  flex: 0 0 auto;
}

.student-dashboard .student-card,
.student-dashboard .dashboard-view .admin-card {
  border-color: var(--student-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(24, 32, 51, 0.04);
}

.student-dashboard .student-feature-panel {
  display: grid;
  min-height: 260px;
  padding: 20px;
  place-items: center;
  text-align: center;
}

.student-dashboard .student-assessment-panel {
  min-height: 320px;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(87, 73, 237, 0.08), transparent 34%),
    #fff;
}

.student-assessment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  text-align: left;
}

.student-assessment-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e6e8f2;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 36px rgba(20, 28, 45, 0.07);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.student-assessment-card:hover,
.student-assessment-card:focus {
  transform: translateY(-2px);
  border-color: rgba(87, 73, 237, 0.32);
  box-shadow: 0 18px 42px rgba(20, 28, 45, 0.11);
  outline: none;
}

.student-assessment-card-top,
.student-assessment-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.student-assessment-type,
.student-assessment-status,
.student-assessment-secure-dot,
.student-assessment-card-score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.student-assessment-type {
  padding: 7px 10px;
  color: #5749ed;
  background: #f1f0ff;
}

.student-assessment-status {
  padding: 7px 10px;
  color: #475467;
  background: #f3f5f8;
}

.student-assessment-status.is-ready,
.student-assessment-status.is-resume {
  color: #087443;
  background: #eafaf2;
}

.student-assessment-status.is-scheduled {
  color: #875a00;
  background: #fff3cf;
}

.student-assessment-status.is-locked,
.student-assessment-status.is-closed {
  color: #b42318;
  background: #fff1f0;
}

.student-assessment-card h3 {
  margin: 0;
  color: #12182b;
  font: 800 19px/1.25 Manrope, sans-serif;
}

.student-assessment-card p {
  margin: -6px 0 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.55;
}

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

.student-assessment-meta-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #edf0f6;
  border-radius: 14px;
  color: #667085;
  font-size: 12px;
}

.student-assessment-meta-grid strong {
  color: #101828;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-assessment-secure-dot {
  color: #344054;
}

.student-assessment-secure-dot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.student-assessment-card-score {
  color: #667085;
}

.student-assessment-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(560px, 100%);
  margin: auto;
  padding: 34px 18px;
  text-align: center;
}

.student-assessment-state strong {
  color: #111827;
  font: 800 18px/1.2 Manrope, sans-serif;
}

.student-assessment-state p {
  max-width: 440px;
  margin: 0;
  color: #667085;
  line-height: 1.55;
}

.student-assessment-state-icon,
.student-assessment-spinner {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #5749ed, #05b8c5);
  box-shadow: 0 14px 30px rgba(87, 73, 237, 0.2);
}

.student-assessment-spinner {
  border: 3px solid rgba(87, 73, 237, 0.18);
  border-top-color: #5749ed;
  background: transparent;
  box-shadow: none;
  animation: spin 800ms linear infinite;
}

.student-dashboard .student-assessment-tabs,
.student-dashboard .student-announcement-tabs {
  margin-bottom: 18px;
}

.student-dashboard .student-feature-panel .api-record-list {
  width: 100%;
  text-align: left;
}

.student-dashboard .student-feature-panel > .empty-state,
.student-dashboard .task-center > .empty-state,
.student-dashboard .notifications-card > .empty-state,
.student-dashboard .planner-list > .empty-state,
.student-dashboard .progress-course-grid > .empty-state {
  width: 100%;
  margin: 0;
}

.student-dashboard .student-feature-panel > .empty-state {
  padding: 32px 12px;
}

.student-dashboard .student-error-state {
  color: #7f1d1d;
  background: #fff7f7;
}

.student-dashboard .student-error-state strong {
  display: block;
  margin-bottom: 7px;
  color: #991b1b;
}

.student-dashboard .student-error-state p {
  color: #7f1d1d;
}

.student-dashboard .student-course-summary .dashboard-stat-card {
  min-height: 118px;
  padding: 18px;
  border: 1px solid var(--student-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 32, 51, 0.035);
}

.student-dashboard .student-course-summary .dashboard-stat-card span {
  color: var(--student-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.student-dashboard .student-course-summary .dashboard-stat-card strong {
  display: block;
  margin-top: 10px;
  color: var(--student-ink);
  font:
    800 28px/1 Manrope,
    sans-serif;
}

.student-dashboard .student-course-section {
  margin-top: 26px;
}

.student-dashboard .student-course-section-heading {
  margin-bottom: 16px;
}

.student-dashboard .student-course-section-heading h2 {
  font:
    800 19px/1.3 Manrope,
    sans-serif;
}

.student-dashboard .student-course-card,
.student-dashboard .student-recording-card {
  padding: 18px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.student-dashboard .student-course-card:hover,
.student-dashboard .student-recording-card:hover {
  border-color: #cbc6ff;
  box-shadow: 0 14px 32px rgba(56, 48, 139, 0.09);
  transform: translateY(-2px);
}

.student-dashboard .student-course-card.is-unavailable:hover {
  border-color: #e4d7d8;
  box-shadow: 0 10px 26px rgba(83, 50, 54, 0.06);
  transform: none;
}

.student-dashboard .student-course-actions .button {
  width: 100%;
  min-height: 42px;
}

.student-dashboard .curriculum-loading-card,
.student-dashboard .curriculum-state-card,
.student-dashboard .curriculum-error-card {
  grid-column: 1 / -1;
  min-height: 150px;
  padding: 20px;
}

.student-dashboard .curriculum-loading-card,
.student-dashboard .curriculum-state-card {
  display: grid;
  place-items: center;
  color: var(--student-muted);
  text-align: center;
}

.student-dashboard .curriculum-error-card {
  border-color: #f2c8cc;
  background: #fff8f8;
}

.student-dashboard .curriculum-error-card strong {
  color: #991b1b;
}

.student-dashboard .student-recordings-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}

.student-dashboard .student-recording-card {
  min-height: 100%;
  padding: 22px;
}

.student-dashboard .student-recording-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.student-dashboard .student-recording-copy strong {
  color: var(--student-ink);
  font:
    800 16px/1.45 Manrope,
    sans-serif;
}

.student-dashboard .student-recording-copy p {
  margin: 0;
  color: var(--student-muted);
  line-height: 1.55;
}

.student-dashboard .student-recording-actions {
  display: flex;
  margin-top: auto;
  padding-top: 2px;
}

.student-dashboard .student-recording-actions .button {
  min-width: 112px;
  min-height: 42px;
}

.student-dashboard .student-recording-card .api-record-thumbnail {
  aspect-ratio: 16 / 9;
  max-height: none;
  border: 1px solid var(--student-line);
  background: var(--student-soft);
}

.student-dashboard .session-report-feed,
.student-dashboard .teacher-feedback-root,
.student-dashboard .library-root,
.student-dashboard .announcements-root,
.student-dashboard .notifications-root,
.student-dashboard .certificate-feed-root {
  min-height: 320px;
  padding: 16px;
}

.student-dashboard .teacher-feedback-root,
.student-dashboard .announcements-root,
.student-dashboard .poll-panel {
  padding: 14px;
}

.student-dashboard .student-course-detail-card,
.student-dashboard .student-course-detail-sidebar,
.student-dashboard .student-course-recordings-card {
  min-width: 0;
  padding: 24px;
}

.student-dashboard .student-course-detail-layout {
  gap: 22px;
  margin-bottom: 22px;
}

.student-dashboard .student-course-detail-card {
  display: grid;
  align-content: start;
  gap: 18px;
}

.student-dashboard .student-course-detail-card .student-course-description,
.student-dashboard .student-course-detail-card .student-course-meta,
.student-dashboard .student-course-detail-card .student-course-access-period {
  margin: 0;
}

.student-dashboard .student-course-detail-actions {
  gap: 10px;
  padding-top: 2px;
}

.student-dashboard .student-course-detail-actions .button {
  min-width: 138px;
  min-height: 42px;
}

.student-dashboard .student-course-recordings-card .api-record-list {
  gap: 12px;
  margin-top: 18px;
}

.student-dashboard .student-course-recording-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
}

.student-dashboard .student-course-recording-item .api-record-thumbnail {
  grid-column: 1 / -1;
  width: 100%;
  max-height: 320px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
}

.student-dashboard .student-course-recording-action {
  display: flex;
}

.student-dashboard .student-course-recording-action .button {
  min-width: 104px;
  min-height: 40px;
}

.student-dashboard .week-timetable {
  min-height: 360px;
  border-color: var(--student-line);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(24, 32, 51, 0.04);
}

.student-dashboard .week-timetable-head {
  padding: 20px 22px;
  border-bottom: 1px solid var(--student-line);
}

.student-dashboard .ask-teacher-root {
  min-height: 0;
  overflow: visible;
}

.student-dashboard .course-chat-root {
  min-height: min(620px, calc(100vh - 210px));
  overflow: hidden;
}

.student-dashboard .course-chat-root {
  padding: 0;
}

.student-dashboard .teacher-feedback-card,
.student-dashboard .announcement-card,
.student-dashboard .poll-card,
.student-dashboard .session-report-card,
.student-dashboard .certificate-feed-card,
.student-dashboard .resource-item.library-item,
.student-dashboard .notification-item {
  border-color: var(--student-line);
  border-radius: 16px;
  box-shadow: none;
}

.student-dashboard .poll-tabs {
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--student-line);
  border-radius: 14px;
  background: var(--student-soft);
}

.student-dashboard .poll-tabs button {
  border: 0;
  border-radius: 10px;
  color: var(--student-muted);
  background: transparent;
}

.student-dashboard .poll-tabs button.is-active {
  color: var(--student-purple);
  border-color: transparent;
  background: #fff;
  box-shadow: 0 4px 14px rgba(42, 38, 91, 0.09);
}

.student-dashboard .poll-panel {
  min-height: 300px;
}

.student-dashboard .button:focus-visible,
.student-dashboard button:focus-visible,
.student-dashboard a:focus-visible,
.student-dashboard input:focus-visible,
.student-dashboard select:focus-visible,
.student-dashboard textarea:focus-visible {
  outline: 3px solid rgba(85, 72, 237, 0.22);
  outline-offset: 2px;
}

@media (max-width: 780px) {
  .student-dashboard .dashboard-page-header,
  .student-dashboard .student-header {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 18px;
  }

  .student-dashboard .dashboard-page-header h1,
  .student-dashboard .student-header h1 {
    font-size: 26px;
    letter-spacing: -0.7px;
  }

  .student-dashboard .dashboard-page-header h1 + p,
  .student-dashboard .student-header h1 + p {
    font-size: 14px;
  }

  .student-dashboard .dashboard-page-header > .button,
  .student-dashboard .student-header > .button {
    width: 100%;
  }

  .student-dashboard .student-feature-panel,
  .student-dashboard .session-report-feed,
  .student-dashboard .library-root,
  .student-dashboard .notifications-root,
  .student-dashboard .certificate-feed-root {
    padding: 14px;
    border-radius: 17px;
  }

  .student-dashboard .teacher-feedback-root,
  .student-dashboard .announcements-root,
  .student-dashboard .poll-panel {
    padding: 12px;
    border-radius: 17px;
  }

  .student-dashboard .student-course-detail-card,
  .student-dashboard .student-course-detail-sidebar,
  .student-dashboard .student-course-recordings-card {
    padding: 18px;
  }

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

  .student-dashboard .student-course-recording-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .student-dashboard .student-course-recording-status {
    justify-self: end;
  }

  .student-dashboard .student-course-recording-action {
    grid-column: 1 / -1;
  }

  .student-dashboard .student-course-recording-action .button,
  .student-dashboard .student-recording-actions .button {
    width: 100%;
  }

  .student-dashboard .poll-tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
  }

  .student-dashboard .poll-tabs button {
    flex: 1 0 auto;
  }

  .student-dashboard .course-chat-root {
    min-height: 540px;
  }
}

@media (max-width: 520px) {
  .student-dashboard .student-course-card,
  .student-dashboard .student-recording-card {
    padding: 16px;
  }

  .student-dashboard .student-course-summary .dashboard-stat-card {
    min-height: 100px;
    padding: 16px;
  }

  .student-dashboard .student-feature-panel > .empty-state {
    padding-inline: 0;
  }
}

/* =========================================================
   Secure assessment integrity states
   ========================================================= */

.secure-assessment-integrity-state {
  transition:
    color 160ms ease,
    background 160ms ease;
}

.secure-assessment-integrity-state.is-warning > span {
  color: #946200;
  background: #fff0bd;
}

.secure-assessment-integrity-state.is-warning strong {
  color: #8a5b00;
}

.secure-assessment-integrity-state.is-danger > span {
  color: #ffffff;
  background: #d92d20;
}

.secure-assessment-integrity-state.is-danger strong {
  color: #b42318;
}

.secure-assessment-integrity-state.is-shortcut > span {
  color: #5749ed;
  background: #ebe9ff;
}

.secure-assessment-integrity-state.is-shortcut strong {
  color: #5142e8;
}

.secure-assessment-integrity-state.is-syncing strong {
  color: #52596b;
}

.secure-integrity-mini-spinner {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  border: 2px solid #dddff0;
  border-top-color: #5749ed;
  border-radius: 50% !important;
  background: transparent !important;
  animation: secureIntegritySpin 700ms linear infinite;
}

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

/* =========================================================
   First integrity warning
   ========================================================= */

.secure-integrity-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 23, 35, 0.54);
  backdrop-filter: blur(6px);
  animation: secureIntegrityOverlayIn 180ms ease-out;
}

@keyframes secureIntegrityOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.secure-integrity-warning-card {
  display: grid;
  justify-items: center;
  width: min(510px, 100%);
  padding: 30px;
  border: 1px solid #f0d08a;
  border-radius: 22px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(20, 24, 40, 0.22);
  animation: secureIntegrityCardIn 220ms ease-out;
}

@keyframes secureIntegrityCardIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.secure-integrity-warning-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #8d5c00;
  background: linear-gradient(145deg, #ffe9aa, #ffd778);
  font:
    900 1.4rem/1 "Manrope",
    sans-serif;
  box-shadow: 0 12px 25px rgba(224, 160, 31, 0.17);
}

.secure-integrity-warning-eyebrow {
  color: #a16c00;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.secure-integrity-warning-card h2 {
  margin: 5px 0 7px;
  color: #252938;
  font-family: "Manrope", sans-serif;
  font-size: 1.22rem;
}

.secure-integrity-warning-card > p {
  max-width: 410px;
  margin: 0;
  color: #777d8b;
  font-size: 0.82rem;
  line-height: 1.6;
}

.secure-integrity-warning-policy {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid #f0d28e;
  border-radius: 13px;
  text-align: left;
  background: #fff9e9;
}

.secure-integrity-warning-policy strong {
  color: #865900;
  font-size: 0.76rem;
}

.secure-integrity-warning-policy span {
  color: #936b1a;
  font-size: 0.73rem;
  line-height: 1.5;
}

.secure-integrity-warning-progress {
  width: 100%;
  margin: 17px 0;
}

.secure-integrity-warning-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #6e7484;
  font-size: 0.7rem;
}

.secure-integrity-warning-progress-label strong {
  color: #895d00;
}

.secure-integrity-warning-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0eee8;
}

.secure-integrity-warning-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f5bd35, #e99a17);
}

.secure-integrity-warning-card .button {
  width: 100%;
  margin-top: 3px;
}

.secure-integrity-warning-note {
  margin-top: 10px;
  color: #9397a3;
  font-size: 0.66rem;
}

/* =========================================================
   Assessment disqualification
   ========================================================= */

.secure-assessment-shell.is-disqualified {
  background:
    radial-gradient(circle at 80% 0%, rgba(217, 45, 32, 0.08), transparent 30%),
    #f8f7f7;
}

.secure-assessment-shell.is-disqualified .secure-assessment-integrity-strip {
  border-bottom-color: #efd3d0;
  background: #fff7f6;
}

.secure-assessment-session-status.is-ended {
  color: #b42318;
}

.secure-assessment-session-status.is-ended i {
  background: #d92d20;
  box-shadow: 0 0 0 5px rgba(217, 45, 32, 0.09);
}

.secure-disqualified-side-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 20px 14px;
  border: 1px solid #efc3bf;
  border-radius: 16px;
  text-align: center;
  background: #fff5f4;
}

.secure-disqualified-side-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #ffffff;
  background: #d92d20;
  font-size: 1rem;
  font-weight: 900;
}

.secure-disqualified-side-card strong {
  color: #a92a20;
  font-size: 0.82rem;
}

.secure-disqualified-side-card p {
  margin: 0;
  color: #a85d56;
  font-size: 0.7rem;
  line-height: 1.5;
}

.secure-disqualified-card {
  display: grid;
  justify-items: center;
  width: min(650px, 100%);
  margin: 30px auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid #edc3c0;
  border-radius: 24px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 20px 55px rgba(68, 29, 26, 0.08);
}

.secure-disqualified-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 19px;
  color: #ffffff;
  background: linear-gradient(145deg, #e4473a, #bf251a);
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(217, 45, 32, 0.19);
}

.secure-disqualified-eyebrow {
  color: #b42318;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.secure-disqualified-card h1 {
  margin: 5px 0 8px;
  color: #292d3c;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.secure-disqualified-card > p {
  max-width: 490px;
  margin: 0;
  color: #777c8a;
  font-size: 0.82rem;
  line-height: 1.6;
}

.secure-disqualified-score {
  display: grid;
  justify-items: center;
  min-width: 140px;
  margin: 22px 0;
  padding: 15px 24px;
  border: 1px solid #edc0bc;
  border-radius: 16px;
  background: #fff4f3;
}

.secure-disqualified-score small {
  color: #a8615a;
  font-size: 0.66rem;
  font-weight: 700;
}

.secure-disqualified-score strong {
  color: #b42318;
  font:
    900 2rem/1.1 "Manrope",
    sans-serif;
}

.secure-disqualified-score span {
  color: #a8615a;
  font-size: 0.66rem;
}

.secure-disqualified-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.secure-disqualified-details article {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid #e7e8ed;
  border-radius: 12px;
  background: #fafbfc;
}

.secure-disqualified-details span {
  color: #878c99;
  font-size: 0.64rem;
}

.secure-disqualified-details strong {
  color: #343847;
  font-size: 0.75rem;
}

.secure-disqualified-notice {
  width: 100%;
  margin: 15px 0 18px;
  padding: 13px;
  border: 1px solid #e5e6ec;
  border-radius: 13px;
  background: #f8f9fb;
}

.secure-disqualified-notice strong {
  display: block;
  color: #3d4251;
  font-size: 0.75rem;
}

.secure-disqualified-notice p {
  margin: 3px 0 0;
  color: #838895;
  font-size: 0.7rem;
}

/* =========================================================
   Assessment session lock
   ========================================================= */

.assessment-session-lock {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.assessment-session-lock-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  color: #5749ed;
  background: #eeecff;
  font-size: 1.2rem;
  font-weight: 900;
}

.assessment-session-lock h3 {
  margin: 3px 0 0;
  color: #282c3b;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
}

.assessment-session-lock > p {
  margin: 0;
  color: #777d8c;
  font-size: 0.78rem;
  line-height: 1.55;
}

.assessment-session-lock-note {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e1f2;
  border-radius: 12px;
  text-align: left;
  background: #f8f8ff;
}

.assessment-session-lock-note strong {
  color: #5142e8;
  font-size: 0.73rem;
}

.assessment-session-lock-note span {
  color: #777d8c;
  font-size: 0.7rem;
  line-height: 1.45;
}

.assessment-session-lock .button {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 680px) {
  .secure-integrity-overlay {
    padding: 14px;
  }

  .secure-integrity-warning-card {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .secure-disqualified-card {
    margin: 10px auto;
    padding: 26px 17px;
    border-radius: 18px;
  }

  .secure-disqualified-details {
    grid-template-columns: 1fr;
  }
}
/* Extra Material */
.extra-material-view {
  --extra-purple: #6d4ae6;
}

.extra-material-tabs {
  display: inline-flex;
  gap: 6px;
  margin: 8px 0 24px;
  padding: 6px;
  border: 1px solid #e6e1f1;
  border-radius: 16px;
  background: #f7f5fb;
}

.extra-material-tabs button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #70697e;
  font-weight: 800;
  cursor: pointer;
}

.extra-material-tabs button.is-active {
  background: linear-gradient(135deg, #7454e8, #8a62df);
  color: #fff;
  box-shadow: 0 8px 20px rgba(109, 74, 230, .22);
}

.extra-material-search {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 780px;
  margin-bottom: 10px;
}

.extra-material-search label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
  border: 1px solid #ded9ea;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(45, 35, 77, .06);
}

.extra-material-search label:focus-within {
  border-color: var(--extra-purple);
  box-shadow: 0 0 0 3px rgba(109, 74, 230, .12);
}

.extra-material-search svg {
  width: 20px;
  fill: none;
  stroke: #786e8c;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.extra-material-search input {
  width: 100%;
  min-height: 50px;
  border: 0;
  outline: 0;
}

.extra-material-search > button {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--extra-purple);
  font-weight: 800;
  cursor: pointer;
}

.extra-material-result-count {
  min-height: 20px;
  margin: 0 0 16px;
  color: #756d82;
  font-size: 13px;
  font-weight: 700;
}

.extra-material-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.extra-material-card {
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.extra-material-card:hover,
.extra-material-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(44, 34, 72, .12);
}

.extra-material-card-image,
.extra-material-card-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.extra-material-card-placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #e8ddff, #d9f2ee);
  color: #5d5273;
  font-weight: 900;
}

.extra-material-card-copy { padding: 20px; }
.extra-material-card-copy h2 { margin: 0 0 5px; font-size: 19px; }
.extra-material-card-copy p { margin: 0; color: #746d81; font-size: 13px; }
.extra-material-match { margin-top: 9px !important; color: #5e4bb2 !important; }
.extra-material-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  color: #554d64;
  font-size: 11px;
}
.extra-material-card-progress {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece9f2;
}
.extra-material-card-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #714ee7, #a06ee7);
}
.extra-material-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}
.extra-material-pagination span { color: #746d81; font-size: 13px; font-weight: 700; }
.extra-material-live-placeholder {
  padding: 64px 24px;
  border: 1px dashed #d8d1e6;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(239, 233, 255, .72), rgba(230, 248, 244, .72));
  text-align: center;
}
.extra-material-live-placeholder > span {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 18px;
  background: #7553e7;
  color: #fff;
}
.extra-material-live-placeholder h2 { margin: 0 0 8px; }
.extra-material-live-placeholder p { margin: 0 auto 18px; color: #756d82; }
.extra-material-live-placeholder strong {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  color: #6848d5;
}

@media (max-width: 1050px) {
  .extra-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .extra-material-tabs { display: flex; }
  .extra-material-tabs button { flex: 1; padding-inline: 10px; }
  .extra-material-grid { grid-template-columns: 1fr; }
  .extra-material-search { align-items: stretch; flex-direction: column; }
  .extra-material-search > button { align-self: flex-start; }
}
.student-access-summary{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;margin:1rem 0;padding:1.25rem 1.5rem;border-left:4px solid #5b4bff}.student-access-summary h2{margin:.15rem 0}.student-access-summary p{margin:.25rem 0;color:#667085}.student-access-metrics{display:flex;gap:.75rem}.student-access-metrics article{min-width:170px;padding:.8rem 1rem;border-radius:12px;background:#f6f5ff;display:grid;gap:.25rem}.student-access-metrics span{font-size:.78rem;color:#667085}.student-access-guidance{max-width:300px;color:#b54708!important;font-weight:700}@media(max-width:850px){.student-access-summary,.student-access-metrics{align-items:stretch;flex-direction:column}.student-access-metrics article{min-width:0}}
.extra-credit-pill{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid #ded8f5;border-radius:999px;background:#f7f4ff;color:#5543bd;font-size:12px;font-weight:700;white-space:nowrap}.extra-credit-pill-icon{display:grid;width:21px;height:21px;place-items:center;border-radius:50%;background:#6d4ee8;color:#fff;font-size:11px}.extra-credit-pill strong{font-size:14px;color:#37258e}@media(max-width:680px){.extra-credit-pill{padding:0 8px}.extra-credit-pill-label{display:none}}