/* ==========================================================
   MAXZEETON.NG — STUDENT ASSIGNMENTS / QUIZZES PAGES
   Shares tokens from dashboard.css / my-courses.css — additive only
   ========================================================== */

#sqListView,
#sqTakeView,
#sqResultView,
#scListView,
#scViewView {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#sqListView[hidden],
#sqTakeView[hidden],
#sqResultView[hidden],
#scListView[hidden],
#scViewView[hidden] {
  display: none !important;
}

.sw-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sw-list[hidden] { display: none !important; }

/* ── Skeleton loader (shown while loading, same shimmer as dashboard/my-courses) ── */
.sw-skel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 4px;
}
.sw-skel-stats[hidden] { display: none !important; }
.sw-skel-stat { height: 100px; border-radius: var(--r-xl); }

.sw-skel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sw-skel-list[hidden] { display: none !important; }
.sw-skel-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 18px 20px;
}
.sw-skel-icon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sw-skel-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sw-skel-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sw-skel-pill { width: 76px; height: 22px; border-radius: var(--r-pill); }
.sw-skel-btn  { width: 96px; height: 30px; border-radius: var(--r-pill); }

.sw-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  transition: box-shadow .15s;
}

.sw-item:hover {
  box-shadow: var(--sh-md);
}

.sw-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.sw-item-icon.quiz       { background: #EDE9FE; color: var(--purple); }
.sw-item-icon.assignment { background: #DBEAFE; color: #3B82F6; }

.sw-item-body {
  flex: 1;
  min-width: 0;
}

.sw-item-title {
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.3;
}

.sw-item-meta {
  font-size: 12.5px;
  color: var(--t3);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.sw-item-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sw-status-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.sw-status-pill.pending    { background: #FEF3C7; color: #B45309; }
.sw-status-pill.submitted  { background: #DBEAFE; color: #1D4ED8; }
.sw-status-pill.graded,
.sw-status-pill.passed     { background: #DCFCE7; color: #15803D; }
.sw-status-pill.failed     { background: #FEE2E2; color: #B91C1C; }
.sw-status-pill.overdue    { background: #FEE2E2; color: #B91C1C; }

.sw-item-score {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--t1);
}

/* ── Assignment submit accordion ── */
.sw-submit-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sw-submit-panel[hidden] {
  display: none !important;
}

.sw-submit-panel textarea,
.sw-submit-panel input[type="url"] {
  width: 100%;
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-family: var(--f-body);
  font-size: 13.5px;
  color: var(--t1);
  background: var(--bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.sw-submit-panel textarea:focus,
.sw-submit-panel input[type="url"]:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(232,25,44,.08);
}

.sw-item-full {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sw-item-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* ── Quiz-taking view ── */
.sw-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--t3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
}

.sw-back-btn:hover {
  color: var(--brand);
}

.sw-take-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 24px;
  max-width: 720px;
}

.sw-take-card h2 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--t1);
}

.sw-take-meta {
  font-size: 13px;
  color: var(--t3);
  margin-top: 4px;
}

.sw-question {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bdr);
}

.sw-question:first-of-type {
  border-top: none;
  margin-top: 18px;
  padding-top: 0;
}

.sw-question-prompt {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 12px;
}

.sw-question-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sw-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--t2);
  transition: border-color .15s, background .15s;
}

.sw-option-label:hover {
  border-color: var(--brand-bdr);
  background: var(--brand-bg);
}

.sw-option-label input {
  accent-color: var(--brand);
  flex-shrink: 0;
}

.sw-option-label.selected {
  border-color: var(--brand);
  background: var(--brand-bg);
  color: var(--t1);
  font-weight: 600;
}

.sw-take-card .btn-explore {
  margin-top: 24px;
}

.sw-form-message {
  font-size: 13px;
  min-height: 18px;
  margin-top: 10px;
}

.sw-form-message[data-state="success"] { color: var(--green); }
.sw-form-message[data-state="error"]   { color: var(--brand); }

/* ── Result view ── */
.sw-result-card {
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 40px;
  max-width: 480px;
  margin: 20px auto 0;
  text-align: center;
}

.sw-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 16px;
  background: #DCFCE7;
  color: var(--green);
}

.sw-result-icon.failed {
  background: #FEE2E2;
  color: var(--brand);
}

.sw-result-card h2 {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--t1);
}

.sw-result-score {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 800;
  color: var(--t1);
  margin: 10px 0;
}

.sw-result-card .btn-explore {
  margin-top: 20px;
}

@media (max-width: 640px) {
  .sw-item {
    flex-wrap: wrap;
  }
  .sw-item-row {
    flex-wrap: wrap;
  }
  .sw-item-side {
    width: 100%;
    justify-content: space-between;
    margin-top: 8px;
  }
  .sw-skel-stats { grid-template-columns: repeat(2, 1fr); }
  .sw-skel-row { flex-wrap: wrap; }
  .sw-skel-side { width: 100%; justify-content: space-between; margin-top: 8px; }
}

/* ==========================================================
   /student/certificates — card grid + printable certificate view
   ========================================================== */

/* This page only ever has 2 real stats (unlike quizzes/assignments' 4), so
   .courses-stats's shared repeat(4,1fr) grid stretched each card to a
   quarter-width column and left a large empty gap on the right — sized to
   content here instead. Also gives #scStatLatest its own smaller size since
   a full date ("September 15, 2026") badly overflows the standard 36px
   .stat-value treatment built for a short number like "1" or "8". */
[data-student-certificates-page] .courses-stats {
  grid-template-columns: repeat(2, minmax(0, 320px));
}

[data-student-certificates-page] #scStatLatest {
  font-size: 20px;
  white-space: nowrap;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cert-grid[hidden] { display: none !important; }

.cert-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 22px 20px;
  transition: box-shadow .15s, transform .15s;
}

.cert-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

/* Same soft-gradient-circle badge language as the dashboard's streak badge,
   in amber to read as "achievement" rather than the brand-red used elsewhere. */
.cert-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(160deg, #FFF7E6, #FFE4B8);
  border: 2px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12), inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--amber);
  font-size: 20px;
  flex-shrink: 0;
}

.cert-card-title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.3;
}

.cert-card-meta {
  font-size: 12.5px;
  color: var(--t3);
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cert-card .btn-explore-sm {
  align-self: flex-start;
}

/* ── Printable certificate view ── */
.cert-print-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Scale-to-fit stage: the certificate keeps its fixed 980x693 design size and is
   scaled down with a transform (set from JS via --cert-scale) so the WHOLE
   certificate is visible as a small card on phones (Coursera-style preview) —
   no horizontal panning. The PDF export lifts the transform in html2canvas's
   onclone so the download is always full size. */
.cert-stage {
  position: relative;
  width: 100%;
  max-width: 980px;
  aspect-ratio: 297 / 210;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: 0 12px 32px rgba(13,17,23,.18);
}

.cert-stage .cert-doc {
  position: absolute;
  top: 0;
  left: 0;
  width: 980px;
  max-width: none;
  margin: 0;
  transform-origin: top left;
  transform: scale(var(--cert-scale, 1));
  box-shadow: none;
}

.cert-meta {
  width: 100%;
  max-width: 980px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}

.cert-meta h2 {
  font-family: var(--f-display);
  font-size: 17px;
  margin: 0;
  overflow-wrap: anywhere;
}

.cert-meta dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 20px;
  margin: 0;
}

.cert-meta dt { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--t3); }
.cert-meta dd { margin: 2px 0 0; color: var(--t1); overflow-wrap: anywhere; }

.cert-print-actions {
  flex-wrap: wrap;
}

/* Dark, "techy" certificate — matches the brand's own hero/marketing aesthetic
   (grid overlay + red glow) rather than a traditional cream/gold certificate.
   Sized to an A4-landscape ratio (297:210) so it prints/exports as a real
   landscape certificate rather than a tall card. */
.cert-doc {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 297 / 210;
  border-radius: var(--r-xl);
  padding: 3px;
  background: linear-gradient(135deg, rgba(232,25,44,.9), rgba(232,25,44,.15) 45%, rgba(245,158,11,.5));
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.cert-doc-border {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(165deg, #0b0d14, #12141d 55%, #171a24);
  border-radius: calc(var(--r-xl) - 3px);
  padding: 36px 56px;
  text-align: center;
  color: rgba(255,255,255,0.92);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Subtle grid overlay, same pattern as the marketing site's .bg-grid, scoped
   absolute here (not fixed) so it stays inside the card. */
.cert-doc-border::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,25,44,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,25,44,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.cert-doc-border > * {
  position: relative;
}

.cert-doc-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto 18px;
  display: block;
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(232,25,44,.55));
}

/* Single, non-inset box-shadow deliberately — html2canvas (used for the PDF
   download) renders multiple/inset shadows on a border-radius:50% element
   inconsistently with the browser's own painting, which is exactly why the
   badge looked different in the exported PDF. One plain shadow renders
   identically in both, so web and PDF can't drift apart on this again.
   The award icon itself is now an inline <svg> (see certificates.html)
   rather than a Font Awesome <i> glyph, for the same reason: html2canvas
   paints icon-webfont glyphs via its own text-layout approximation, which
   doesn't reproduce the browser's real glyph centering — the icon rendered
   visibly off-center inside this circle in the exported PDF even after the
   shadow fix, while the on-screen browser view (real font rendering) looked
   correct. An inline SVG path is real vector geometry, not a font glyph, so
   html2canvas paints it the same way the browser does. */
.cert-doc-seal {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFF7E6, #FFE4B8);
  border: 2px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
  color: #B45309;
  font-size: 26px;
  line-height: 1;
}

.cert-doc-seal i,
.cert-doc-seal svg {
  display: block;
}

.cert-doc-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--amber);
}

.cert-doc-org {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-top: 4px;
}

.cert-doc-line {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-top: 14px;
}

.cert-doc-name {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  margin-top: 6px;
  text-shadow: 0 0 24px rgba(232,25,44,.35);
}

.cert-doc-course {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: #FF5A6B;
  margin-top: 8px;
}

/* ── Signature + QR row ── */
.cert-doc-sign-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  text-align: left;
}

.cert-doc-signature {
  flex: 1;
  min-width: 0;
}

.cert-doc-sign-name {
  font-family: 'Syne', cursive;
  font-style: italic;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.cert-doc-sign-line {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.25);
  margin: 8px 0 6px;
}

.cert-doc-sign-title {
  font-size: 11.5px;
  color: rgba(255,255,255,0.5);
  letter-spacing: .3px;
}

.cert-doc-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cert-doc-qr-box {
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  line-height: 0;
}

.cert-doc-qr-box img,
.cert-doc-qr-box canvas {
  display: block;
  width: 84px;
  height: 84px;
}

.cert-doc-qr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.cert-doc-footer {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.cert-doc-footer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.cert-doc-footer-value {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-top: 4px;
}

.cert-print-actions {
  display: flex;
  gap: 12px;
}

@media print {
  body * {
    visibility: hidden;
  }
  .cert-doc,
  .cert-doc * {
    visibility: visible;
  }
  .cert-stage { overflow: visible; box-shadow: none; }
  .cert-doc, .cert-stage .cert-doc {
    position: fixed;
    inset: 0;
    margin: 0;
    max-width: none;
    width: auto;
    transform: none;
    box-shadow: none;
    border-radius: 0;
  }
  .cert-print-actions,
  .sw-back-btn {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .cert-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   /student/messages
   ========================================================== */

/* Only 2 real stats here too (see the same fix for certificates above). */
[data-student-messages-page] .courses-stats {
  grid-template-columns: repeat(2, minmax(0, 320px));
}

.sw-item-icon.msg-info    { background: #DBEAFE; color: #3B82F6; }
.sw-item-icon.msg-warning { background: #FEF3C7; color: var(--amber); }
.sw-item-icon.msg-success { background: #DCFCE7; color: var(--green); }

.sw-item.msg-unread {
  border-left: 3px solid var(--brand);
  background: var(--brand-bg);
}

.sw-item.msg-unread .sw-item-title {
  font-weight: 800;
}

/* ==========================================================
   Achievement badges — /student/certificates + reused for the
   dashboard's Achievements section styling reference
   ========================================================== */

.sw-section-head {
  margin-top: 8px;
}
.sw-section-head[hidden] { display: none !important; }
.sw-section-head h2 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
}
.sw-section-head p {
  font-size: 12.5px;
  color: var(--t3);
  margin-top: 2px;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.badge-grid[hidden] { display: none !important; }

.badge-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--bdr);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  transition: box-shadow .15s, transform .15s;
}
.badge-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.badge-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #FFF7E6, #FFE4B8);
  border: 2px solid rgba(245, 158, 11, 0.3);
  color: #B45309;
  font-size: 18px;
}

.badge-card-body {
  min-width: 0;
}
.badge-card-title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.badge-card-meta {
  font-size: 12px;
  color: var(--t3);
  margin-top: 3px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.badge-card-score {
  font-weight: 800;
  color: var(--amber);
}


/* ==========================================================
   Mobile hardening for every student list page
   ========================================================== */
.sw-item-body,
.sw-item-title,
.sw-item-meta,
.sw-item-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .courses-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-student-certificates-page] .courses-stats,
  [data-student-messages-page] .courses-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .courses-stats .stat-value { font-size: 26px; }
  [data-student-certificates-page] #scStatLatest { font-size: 15px; white-space: normal; }
  .cert-print-actions { width: 100%; }
  .cert-print-actions .btn-explore,
  .cert-print-actions .btn-explore-sm { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================
   Markdown (GitHub look) inside student pages
   ========================================================== */
.markdown-body {
  background: transparent;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--t1);
  overflow-wrap: anywhere;
  max-width: 100%;
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body pre { max-width: 100%; overflow-x: auto; }
.markdown-body table { display: block; max-width: 100%; overflow-x: auto; }
.markdown-body img { max-width: 100%; height: auto; }

/* ==========================================================
   Answer editor (CodeMirror) — /student/assignment
   ========================================================== */
.ae {
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}
.ae:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,25,44,.08); }
.ae-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #FAFAFC; border-bottom: 1px solid var(--bdr); }
.ae-lang { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--t2); }
.ae-lang select { font: inherit; font-size: 13px; border: 1px solid var(--bdr2); border-radius: 8px; padding: 5px 8px; background: #fff; color: var(--t1); }
.ae-tabs { display: flex; gap: 2px; }
.ae-tab { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--t2); cursor: pointer; }
.ae-tab.active { background: #fff; color: var(--brand); box-shadow: var(--sh-sm); }
.ae-tools { display: flex; gap: 4px; }
.ae-tool { width: 32px; height: 32px; border: 1px solid var(--bdr); border-radius: 8px; background: #fff; color: var(--t2); cursor: pointer; }
.ae-tool:hover { color: var(--brand); border-color: var(--brand-bdr); }
.ae-body { min-height: 200px; position: relative; }
.ae-body .CodeMirror { height: 100%; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.55; }
.ae-textarea-fallback { display: block; width: 100%; height: 100%; border: 0; padding: 12px; resize: none; font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.55; }
.ae-preview { padding: 14px 16px; overflow: auto; max-height: 70vh; }
.ae-grip { height: 20px; display: grid; place-items: center; cursor: ns-resize; background: #FAFAFC; border-top: 1px solid var(--bdr); touch-action: none; }
.ae-grip span { width: 48px; height: 4px; border-radius: 999px; background: var(--bdr2); }
.ae-grip.dragging span, .ae-grip:hover span { background: var(--brand); }
.ae-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 6px 12px; font-size: 12px; color: var(--t3); border-top: 1px solid var(--bdr); }
.ae.ae-full { position: fixed; inset: 0; z-index: 2000; border-radius: 0; display: flex; flex-direction: column; }
.ae.ae-full .ae-body { flex: 1; height: auto !important; }
.ae.ae-full .ae-preview { flex: 1; max-height: none; }
body.ae-lock { overflow: hidden; }

/* Light, GitHub-flavoured code colours as the student types */
.cm-s-mz.CodeMirror { color: #24292f; background: #fff; }
.cm-s-mz .CodeMirror-gutters { background: #F6F8FA; border-right: 1px solid var(--bdr); }
.cm-s-mz .CodeMirror-linenumber { color: #8c959f; }
.cm-s-mz .CodeMirror-cursor { border-left: 2px solid var(--brand); }
.cm-s-mz .CodeMirror-selected { background: #B6D6FD; }
.cm-s-mz.CodeMirror-focused .CodeMirror-selected { background: #B6D6FD; }
.cm-s-mz span.cm-keyword, .cm-s-mz span.cm-operator { color: #cf222e; }
.cm-s-mz span.cm-atom, .cm-s-mz span.cm-number, .cm-s-mz span.cm-builtin { color: #0550ae; }
.cm-s-mz span.cm-def, .cm-s-mz span.cm-meta { color: #8250df; }
.cm-s-mz span.cm-variable-2, .cm-s-mz span.cm-variable-3, .cm-s-mz span.cm-type { color: #953800; }
.cm-s-mz span.cm-string, .cm-s-mz span.cm-string-2 { color: #0a3069; }
.cm-s-mz span.cm-comment { color: #6e7781; font-style: italic; }
.cm-s-mz span.cm-property, .cm-s-mz span.cm-attribute, .cm-s-mz span.cm-tag { color: #116329; }
.cm-s-mz span.cm-header { color: #0550ae; font-weight: 700; }
.cm-s-mz span.cm-strong { font-weight: 700; }
.cm-s-mz span.cm-em { font-style: italic; }
.cm-s-mz span.cm-link, .cm-s-mz span.cm-url { color: #0969da; }
.cm-s-mz span.cm-quote { color: #116329; }
.cm-s-mz span.cm-error { color: #cf222e; }
.cm-s-mz .CodeMirror-matchingbracket { background: #d0ebff; color: inherit !important; }

/* ==========================================================
   /student/assignment (single assignment)
   ========================================================== */
#sadRoot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sad-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--r-lg); padding: 20px; min-width: 0; }
.sad-card h2 { font-family: var(--f-display); font-size: 16px; margin: 0 0 12px; }
.sad-head h1 { font-family: var(--f-display); font-size: 24px; margin: 6px 0 8px; overflow-wrap: anywhere; }
.sad-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sad-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--t2); font-size: 12.5px; font-weight: 500; }
.sad-chip.warn { background: #FEF3C7; color: #B45309; }
.sad-chip.late { background: var(--brand-bg); color: var(--brand); }
.sad-result { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sad-score { font-family: var(--f-display); font-size: 34px; font-weight: 800; color: var(--green); line-height: 1; }
.sad-score small { font-size: 16px; color: var(--t3); font-weight: 600; }
.sad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.sad-link { width: 100%; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 10px 14px; font: inherit; font-size: 14px; background: var(--bg); }
.sad-link:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,25,44,.08); }
.sad-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--t3); margin: 14px 0 6px; }
.sad-note { font-size: 12.5px; color: var(--t3); }
.sad-readonly { border: 1px solid var(--bdr); border-radius: var(--r-md); background: #FAFAFC; padding: 12px 14px; max-height: 480px; overflow: auto; }

/* ==========================================================
   Quiz question types (student)
   ========================================================== */
.sq-q-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sq-q-num { font-weight: 800; color: var(--brand); }
.sq-q-meta { font-size: 12px; color: var(--t3); }
.sq-q-prompt { margin-bottom: 12px; }
.sq-hint { font-size: 12.5px; color: var(--t3); margin: 0 0 8px; }
.sq-blank-line { line-height: 2.4; overflow-wrap: anywhere; }
.sq-blank { display: inline-block; width: 140px; max-width: 100%; margin: 0 4px; border: 0; border-bottom: 2px solid var(--brand); background: var(--brand-bg); border-radius: 6px 6px 0 0; padding: 4px 8px; font: inherit; font-size: 16px; text-align: center; }
.sq-blank:focus { outline: none; background: #fff; }
.sq-short { width: 100%; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 10px 14px; font: inherit; font-size: 16px; background: var(--bg); }
.sq-short:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,25,44,.08); }
.sq-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sq-order li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bdr); border-radius: var(--r-md); background: var(--card); cursor: grab; min-width: 0; }
.sq-order li.dragging { opacity: .5; }
.sq-order .sq-order-n { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--brand-bg); color: var(--brand); font-size: 12px; font-weight: 700; }
.sq-order .sq-order-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sq-order button { width: 32px; height: 32px; border: 1px solid var(--bdr); border-radius: 8px; background: #fff; color: var(--t2); cursor: pointer; flex-shrink: 0; }
.sq-order button:disabled { opacity: .3; cursor: default; }
.sq-match { display: grid; gap: 10px; }
.sq-match-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.sq-match-row select { width: 100%; border: 1px solid var(--bdr); border-radius: var(--r-md); padding: 9px 10px; font: inherit; font-size: 16px; background: var(--bg); }
.sq-review { border-left: 4px solid var(--bdr2); }
.sq-review.correct { border-left-color: var(--green); }
.sq-review.partial { border-left-color: var(--amber); }
.sq-review.wrong { border-left-color: var(--brand); }
.sq-review-line { font-size: 13.5px; color: var(--t2); margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .sq-match-row { grid-template-columns: minmax(0, 1fr); }
  .sad-head h1 { font-size: 20px; }
  .sad-actions .btn-explore { width: 100%; justify-content: center; }
  input, select, textarea { font-size: 16px; }
}

.sw-item-link { color: inherit; text-decoration: none; }
.sw-item-link:hover { color: var(--brand); }
a.btn-explore-sm, a.btn-explore { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }