@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════
   student-features.css
   Shared styles for:
     assignments.html
     quiz.html
     results.html
     course-detail-enrolled.html

   Extends academy.css + leaderboard.css
   Load order: academy.css → leaderboard.css → student-features.css
═══════════════════════════════════════════════════════ */

:root {
  --purple:   #6b53a3;
  --purple-l: #8b6fc7;
  --purple-d: #4a3878;
  --black:    #000;
  --d1:       #0a0a0a;
  --d2:       #111;
  --d3:       #1a1a1a;
  --d4:       #222;
  --white:    #fff;
  --soft:     #c8c8c8;
  --muted:    #777;
  --red:      #ff3532;
  --green:    #14a800;
  --gold:     #E8B84B;
  --orange:   #f59e0b;
  --display:  'Syne', sans-serif;
  --body:     'DM Sans', sans-serif;
  --ease:     cubic-bezier(.16,1,.3,1);
  --nav-h:    68px;
  --sb-w:     260px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--soft); background: var(--black); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1.1; }

/* ── LAYOUT ─────────────────────────────────────────── */
.dashboard { display: flex; min-height: 100vh; }
.db-main   { flex: 1; overflow-x: hidden; min-width: 0; }
.db-inner  { padding: 28px 32px; }
.section-eye {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--purple-l); margin-bottom: 6px;
}

/* ── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  width: var(--sb-w); flex-shrink: 0;
  background: var(--d2); border-right: 1px solid rgba(107,83,163,.18);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 100;
  scrollbar-width: thin; scrollbar-color: rgba(107,83,163,.2) transparent;
}
.sidebar__logo { padding: 22px 20px 18px; border-bottom: 1px solid rgba(107,83,163,.18); display: flex; align-items: center; gap: 10px; }
.sidebar__logo-mark { width: 34px; height: 34px; background: var(--purple); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 14px; font-weight: 800; color: var(--white); flex-shrink: 0; }
.sidebar__logo-text { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: -.03em; }
.sidebar__logo-sub  { font-size: 10px; color: var(--purple-l); font-weight: 600; letter-spacing: .06em; }
.sidebar__user { padding: 16px 20px; border-bottom: 1px solid rgba(107,83,163,.1); display: flex; align-items: center; gap: 12px; }
.sidebar__av { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 13px; font-weight: 800; color: var(--white); flex-shrink: 0; position: relative; }
.sidebar__av-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--d2); }
.sidebar__user-name  { font-size: 13px; font-weight: 600; color: var(--white); }
.sidebar__user-email { font-size: 11px; color: var(--muted); }
.sidebar__nav { padding: 12px 10px; flex: 1; }
.sidebar__nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: all .2s; margin-bottom: 2px; position: relative;
  text-decoration: none;
}
.sidebar__nav-item:hover { background: rgba(255,255,255,.04); color: var(--soft); }
.sidebar__nav-item.active { background: rgba(107,83,163,.16); color: var(--white); font-weight: 600; }
.sidebar__nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--purple-l); border-radius: 2px; }
.sidebar__nav-icon { font-size: 15px; flex-shrink: 0; }
.sidebar__nav-badge { margin-left: auto; min-width: 20px; height: 20px; background: var(--red); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--white); padding: 0 5px; }
.sidebar__bottom { padding: 10px; border-top: 1px solid rgba(107,83,163,.1); }
.sidebar__signout { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; transition: all .2s; }
.sidebar__signout:hover { color: var(--red); background: rgba(255,53,50,.06); }

/* ── TOPBAR ──────────────────────────────────────────── */
.db-topbar {
  height: 64px; background: var(--d2);
  border-bottom: 1px solid rgba(107,83,163,.18);
  display: flex; align-items: center; padding: 0 32px; gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.db-topbar__back { font-size: 13px; color: var(--purple-l); display: flex; align-items: center; gap: 6px; transition: gap .2s; white-space: nowrap; }
.db-topbar__back:hover { gap: 10px; }
.db-topbar__title { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--white); }
.db-topbar__sub   { font-size: 12px; color: var(--muted); margin-top: 1px; }
.db-topbar__bell  { position: relative; cursor: pointer; }
.db-topbar__bell-btn { width: 38px; height: 38px; background: var(--d3); border: 1px solid rgba(107,83,163,.2); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: background .2s; }
.db-topbar__bell-btn:hover { background: rgba(107,83,163,.15); }
.db-topbar__bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: var(--red); border-radius: 9px; font-size: 10px; font-weight: 700; color: var(--white); display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ── STAT CARDS ROW ─────────────────────────────────── */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
.stat-card { background: var(--d3); border: 1px solid rgba(255,255,255,.06); border-radius: 13px; padding: 18px 18px 14px; transition: border-color .3s; }
.stat-card:hover { border-color: rgba(107,83,163,.25); }
.stat-card__icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 10px; }
.stat-card__val  { font-family: var(--display); font-size: 24px; font-weight: 800; color: var(--white); line-height: 1; }
.stat-card__lbl  { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── COURSE FILTER PILLS ────────────────────────────── */
.course-filter { margin-bottom: 24px; }
.course-filter__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1.5px solid rgba(107,83,163,.28); color: var(--muted);
  background: transparent; font-family: var(--body); transition: all .2s; white-space: nowrap;
}
.filter-pill:hover { border-color: rgba(107,83,163,.55); color: var(--soft); }
.filter-pill.active { background: var(--purple); border-color: var(--purple); color: var(--white); font-weight: 600; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--body); font-weight: 600; font-size: 13px; padding: 10px 20px; border-radius: 8px; border: 1.5px solid transparent; transition: all .25s var(--ease); white-space: nowrap; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn-primary   { background: var(--purple); color: var(--white); border-color: var(--purple); }
.btn-primary:hover { background: var(--purple-l); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(107,83,163,.3); }
.btn-red       { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-red:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,53,50,.3); }
.btn-orange    { background: var(--orange); color: #000; border-color: var(--orange); font-weight: 700; }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,.3); }
.btn-green     { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-ghost     { background: rgba(255,255,255,.04); color: var(--soft); border-color: rgba(255,255,255,.1); }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--white); }
.btn-outline   { background: transparent; color: var(--purple-l); border-color: rgba(107,83,163,.35); }
.btn-outline:hover { background: rgba(107,83,163,.1); }
.btn-sm  { padding: 7px 14px; font-size: 12px; border-radius: 7px; }
.btn-lg  { padding: 14px 28px; font-size: 15px; border-radius: 10px; }
.btn-full { width: 100%; justify-content: center; }

/* ── STATUS BADGES ──────────────────────────────────── */
.status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 100px; border: 1px solid;
  white-space: nowrap; letter-spacing: .03em;
}
.status-graded    { background: rgba(232,184,75,.12); border-color: rgba(232,184,75,.4); color: var(--gold); }
.status-submitted { background: rgba(107,83,163,.15); border-color: rgba(107,83,163,.45); color: var(--purple-l); }
.status-pending   { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: var(--orange); }
.status-awaiting  { background: rgba(107,83,163,.12); border-color: rgba(107,83,163,.35); color: var(--purple-l); }
.status-locked    { background: rgba(119,119,119,.1); border-color: rgba(119,119,119,.2); color: var(--muted); }
.status-completed { background: rgba(20,168,0,.12); border-color: rgba(20,168,0,.35); color: var(--green); }
.status-available { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.4); color: var(--orange); }

/* ── PROGRESS BAR ───────────────────────────────────── */
.prog-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden; }
.prog-bar--sm { height: 4px; }
.prog-bar__fill { height: 100%; border-radius: 3px; transition: width .7s var(--ease); }
.prog-bar__fill--purple { background: var(--purple); }
.prog-bar__fill--green  { background: var(--green); }
.prog-bar__fill--orange { background: var(--orange); }
.prog-bar__fill--gold   { background: var(--gold); }

/* ══════════════════════════════════════════════════════
   ASSIGNMENTS PAGE
══════════════════════════════════════════════════════ */
.assign-card {
  background: var(--d3); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(107,83,163,.18); margin-bottom: 20px;
  transition: border-color .3s, box-shadow .3s;
}
.assign-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.3); }
.assign-card--graded    { border-color: rgba(232,184,75,.42); }
.assign-card--submitted { border-color: rgba(107,83,163,.35); }
.assign-card--pending   { border-color: rgba(255,53,50,.32); }

.assign-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.04);
}
.assign-card--graded   .assign-card__header { background: rgba(232,184,75,.06); }
.assign-card--submitted .assign-card__header { background: rgba(107,83,163,.06); }
.assign-card--pending  .assign-card__header { background: rgba(255,53,50,.05); }

.assign-card__num   { font-size: 12px; font-weight: 600; }
.assign-card--graded   .assign-card__num { color: var(--gold); }
.assign-card--submitted .assign-card__num { color: var(--purple-l); }
.assign-card--pending  .assign-card__num { color: var(--red); }

.assign-card__body { padding: 20px; display: flex; gap: 20px; }
.assign-card__main { flex: 1; min-width: 0; }
.assign-card__title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 8px; line-height: 1.35; }
.assign-card__desc  { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 14px; }

/* Deadline row */
.assign-deadline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 5px 12px; border-radius: 8px;
  background: var(--d4); color: var(--muted); margin-bottom: 14px;
}
.assign-deadline--urgent { background: rgba(255,53,50,.1); border: 1px solid rgba(255,53,50,.3); color: var(--red); }

/* Guidelines chips */
.guideline-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.guideline-chip { font-size: 11px; color: var(--soft); padding: 4px 10px; background: var(--d4); border-radius: 6px; border: 1px solid rgba(255,255,255,.06); }

/* Submission form */
.submission-form {
  background: var(--d4); border: 1px solid rgba(107,83,163,.22);
  border-radius: 12px; padding: 18px; margin-top: 4px;
}
.submission-form__title { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.submission-form__sub   { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.submission-form__row   { display: flex; gap: 10px; align-items: stretch; }
.submission-input {
  flex: 1; background: var(--d2); border: 1.5px solid rgba(107,83,163,.3);
  border-radius: 9px; color: var(--white); font-size: 14px; padding: 11px 16px;
  font-family: var(--body); transition: all .2s;
}
.submission-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(107,83,163,.14); }
.submission-input::placeholder { color: rgba(119,119,119,.5); }
.submission-form__note { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* Submitted link row */
.submitted-link {
  display: flex; align-items: center; gap: 8px;
  background: var(--d4); border: 1px solid rgba(107,83,163,.2);
  border-radius: 8px; padding: 7px 14px; margin-top: 12px;
  font-size: 12px; color: var(--purple-l);
}
.submitted-link a { color: var(--purple-l); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Grade panel (right side of graded card) */
.grade-panel {
  min-width: 220px; background: rgba(232,184,75,.06);
  border: 1px solid rgba(232,184,75,.28); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.grade-panel__lbl   { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.grade-panel__score { font-family: var(--display); font-size: 38px; font-weight: 800; color: var(--gold); line-height: 1; }
.grade-panel__den   { font-size: 16px; font-weight: 400; color: var(--muted); }
.grade-panel__div   { height: 1px; background: rgba(232,184,75,.18); }
.grade-panel__note  { font-size: 12px; color: var(--soft); font-style: italic; line-height: 1.55; }

/* Awaiting panel */
.awaiting-panel {
  min-width: 200px; background: rgba(107,83,163,.07);
  border: 1px solid rgba(107,83,163,.25); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.awaiting-panel__icon  { font-size: 24px; }
.awaiting-panel__title { font-size: 14px; font-weight: 700; color: var(--white); }
.awaiting-panel__sub   { font-size: 12px; color: var(--muted); }

/* All submissions table */
.submissions-table-wrap { background: var(--d3); border: 1px solid rgba(107,83,163,.18); border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.submissions-table { width: 100%; border-collapse: collapse; }
.submissions-table thead tr { background: rgba(107,83,163,.12); }
.submissions-table th { padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.submissions-table td { padding: 16px 16px; font-size: 13px; color: var(--soft); border-top: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.submissions-table .td-title { font-size: 13px; font-weight: 600; color: var(--white); }
.submissions-table .td-mod   { font-size: 11px; color: var(--muted); }
.submissions-table .td-mark  { font-family: var(--display); font-size: 15px; font-weight: 800; }
.submissions-table .td-note  { font-size: 12px; color: var(--muted); font-style: italic; max-width: 220px; }

/* Guidelines panel */
.guidelines-panel {
  background: rgba(107,83,163,.06); border: 1px solid rgba(107,83,163,.2);
  border-radius: 14px; padding: 20px; margin-bottom: 20px;
}
.guidelines-panel__title { font-size: 14px; font-weight: 700; color: var(--white); margin-bottom: 14px; }
.guidelines-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guideline-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--soft); line-height: 1.5; }
.guideline-item::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-l); flex-shrink: 0; margin-top: 7px; }

/* ══════════════════════════════════════════════════════
   QUIZ PAGE
══════════════════════════════════════════════════════ */

/* Quiz list card */
.quiz-card {
  background: var(--d3); border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(107,83,163,.2); margin-bottom: 14px;
  display: flex; transition: all .3s;
}
.quiz-card:hover:not(.quiz-card--locked) { border-color: rgba(107,83,163,.4); transform: translateY(-2px); }
.quiz-card--completed { border-color: rgba(20,168,0,.25); }
.quiz-card--available { border-color: rgba(245,158,11,.35); box-shadow: 0 4px 20px rgba(245,158,11,.08); }
.quiz-card--locked { opacity: .55; }

.quiz-card__stripe { width: 4px; flex-shrink: 0; }
.quiz-card--completed .quiz-card__stripe { background: var(--green); }
.quiz-card--available .quiz-card__stripe { background: var(--orange); }
.quiz-card--locked    .quiz-card__stripe { background: var(--muted); opacity: .3; }

.quiz-card__body { flex: 1; padding: 18px 20px; display: flex; align-items: center; gap: 16px; min-width: 0; }
.quiz-card__info { flex: 1; min-width: 0; }
.quiz-card__mod   { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.quiz-card__title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.quiz-card--locked .quiz-card__title { color: var(--muted); }
.quiz-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.quiz-meta-chip { font-size: 11px; color: var(--soft); padding: 4px 10px; background: var(--d4); border-radius: 6px; }

/* Score bar (completed quizzes) */
.quiz-score-bar { min-width: 200px; }
.quiz-score-val { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--green); }
.quiz-score-den { font-size: 13px; color: var(--muted); }

/* Active quiz layout */
.quiz-active-wrap { max-width: 900px; margin: 0 auto; }

/* Quiz top info bar */
.quiz-info-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--d3); border: 1px solid rgba(107,83,163,.18);
  border-radius: 12px; padding: 14px 20px; margin-bottom: 20px; gap: 16px;
}
.quiz-timer {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,53,50,.1); border: 1px solid rgba(255,53,50,.35);
  border-radius: 9px; padding: 8px 16px;
}
.quiz-timer__val { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--red); }
.quiz-timer__lbl { font-size: 10px; color: var(--red); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* Progress dots */
.quiz-dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 320px; }
.quiz-dot {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(119,119,119,.25);
  background: var(--d4); transition: all .2s;
}
.quiz-dot--done    { background: var(--green); border-color: var(--green); }
.quiz-dot--current { background: var(--purple); border-color: var(--purple-l); box-shadow: 0 0 0 3px rgba(107,83,163,.2); }

/* Question card */
.question-card {
  background: var(--d3); border: 1px solid rgba(107,83,163,.22);
  border-radius: 18px; overflow: hidden; margin-bottom: 20px;
}
.question-card__header {
  padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; align-items: center; gap: 10px;
}
.question-num-badge {
  display: inline-flex; align-items: center;
  background: rgba(107,83,163,.18); border: 1px solid rgba(107,83,163,.4);
  color: var(--purple-l); font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 100px;
}
.question-pts-badge {
  display: inline-flex; align-items: center;
  background: rgba(232,184,75,.1); border: 1px solid rgba(232,184,75,.35);
  color: var(--gold); font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 100px;
}
.question-card__text { padding: 20px 24px 8px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.45; }

/* Answer options */
.answer-options { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.answer-option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border-radius: 12px; border: 1.5px solid rgba(119,119,119,.2);
  background: transparent; cursor: pointer; transition: all .2s; text-align: left;
  font-family: var(--body); width: 100%;
}
.answer-option:hover:not(.selected):not(.correct):not(.wrong) { border-color: rgba(107,83,163,.4); background: rgba(107,83,163,.04); }
.answer-option.selected { border-color: rgba(107,83,163,.65); background: rgba(107,83,163,.1); }
.answer-option.correct  { border-color: rgba(20,168,0,.55); background: rgba(20,168,0,.08); }
.answer-option.wrong    { border-color: rgba(255,53,50,.45); background: rgba(255,53,50,.06); }
.answer-option__letter {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(119,119,119,.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--muted);
  flex-shrink: 0; transition: all .2s;
}
.answer-option.selected .answer-option__letter { border-color: var(--purple-l); background: rgba(107,83,163,.25); color: var(--purple-l); }
.answer-option.correct  .answer-option__letter { border-color: var(--green); background: rgba(20,168,0,.2); color: var(--green); }
.answer-option.wrong    .answer-option__letter { border-color: var(--red); background: rgba(255,53,50,.15); color: var(--red); }
.answer-option__text { font-size: 14px; color: var(--soft); line-height: 1.55; padding-top: 7px; flex: 1; }
.answer-option.selected .answer-option__text { color: var(--white); }

/* Quiz nav */
.quiz-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 16px; }
.quiz-nav__count { font-size: 13px; color: var(--muted); text-align: center; flex: 1; }

/* Quiz completion screen */
.quiz-complete-card {
  background: var(--d3); border: 1px solid rgba(232,184,75,.38);
  border-radius: 20px; overflow: hidden; text-align: center;
}
.quiz-complete-card__header { background: rgba(232,184,75,.07); padding: 14px; font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid rgba(232,184,75,.15); }
.quiz-complete-card__body { padding: 36px 40px; }
.quiz-complete-card__trophy { font-size: 52px; margin-bottom: 12px; }
.quiz-complete-card__title { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--white); margin-bottom: 6px; }
.quiz-complete-card__sub   { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.quiz-score-ring { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50%; background: rgba(232,184,75,.07); border: 2px solid rgba(232,184,75,.35); margin: 0 auto 28px; }
.quiz-score-ring__val { font-family: var(--display); font-size: 52px; font-weight: 800; color: var(--gold); line-height: 1; }
.quiz-score-ring__den { font-size: 16px; color: var(--muted); }
.quiz-score-ring__pass { font-size: 12px; font-weight: 700; color: var(--green); margin-top: 6px; }
.quiz-breakdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 28px; }
.quiz-breakdown-item { background: var(--d4); border-radius: 12px; padding: 14px; border: 1px solid rgba(255,255,255,.06); }
.quiz-breakdown-item__lbl { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.quiz-breakdown-item__val { font-family: var(--display); font-size: 18px; font-weight: 800; }
.quiz-complete-actions { display: flex; gap: 12px; justify-content: center; }

/* Review answers */
.review-question {
  background: var(--d3); border-radius: 14px; padding: 20px;
  border: 1px solid rgba(255,255,255,.06); margin-bottom: 14px;
  border-left: 3px solid;
}
.review-question--correct { border-left-color: var(--green); }
.review-question--wrong   { border-left-color: var(--red); }
.review-question__q    { font-size: 14px; font-weight: 600; color: var(--white); margin: 10px 0; line-height: 1.5; }
.review-question__your { font-size: 13px; margin-top: 10px; }
.review-question__correct-ans { font-size: 13px; color: var(--green); font-weight: 600; margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   MY RESULTS PAGE
══════════════════════════════════════════════════════ */

/* Overall score hero */
.results-hero {
  background: rgba(107,83,163,.07); border: 1px solid rgba(107,83,163,.28);
  border-radius: 18px; padding: 24px 28px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.results-hero::before { content: ''; position: absolute; left: 0; top: 0; width: 400px; height: 100%; background: radial-gradient(ellipse at left, rgba(107,83,163,.08) 0%, transparent 70%); pointer-events: none; }
.results-hero__label { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-l); margin-bottom: 6px; }
.results-hero__title { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.results-hero__sub   { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.results-hero__score-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.results-hero__big-score { font-family: var(--display); font-size: 52px; font-weight: 800; color: var(--purple-l); line-height: 1; }
.results-hero__big-den   { font-size: 20px; color: var(--muted); align-self: flex-end; margin-bottom: 8px; }
.results-hero__badges    { display: flex; gap: 10px; flex-wrap: wrap; }
.results-hero__badge {
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(107,83,163,.1); border: 1px solid rgba(107,83,163,.25);
  border-radius: 10px; padding: 10px 14px; min-width: 120px;
}
.results-hero__badge-lbl { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.results-hero__badge-val { font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--white); }

/* Results tables */
.results-table-wrap { background: var(--d3); border: 1px solid rgba(107,83,163,.18); border-radius: 16px; overflow: hidden; margin-bottom: 28px; }
.results-table { width: 100%; border-collapse: collapse; }
.results-table thead tr { background: rgba(107,83,163,.12); }
.results-table th { padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.results-table td { padding: 16px; font-size: 13px; color: var(--soft); border-top: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.results-table .td-title { font-size: 13px; font-weight: 600; color: var(--white); }
.results-table .td-avg   { background: rgba(107,83,163,.08); font-weight: 600; color: var(--purple-l); }

/* Grade badge */
.grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; border-radius: 7px; font-size: 12px; font-weight: 800; border: 1px solid; }
.grade-a-plus  { background: rgba(20,168,0,.12); border-color: rgba(20,168,0,.4); color: var(--green); }
.grade-a       { background: rgba(20,168,0,.1);  border-color: rgba(20,168,0,.3); color: var(--green); }
.grade-b-plus  { background: rgba(107,83,163,.15); border-color: rgba(107,83,163,.4); color: var(--purple-l); }
.grade-b       { background: rgba(107,83,163,.12); border-color: rgba(107,83,163,.3); color: var(--purple-l); }

/* LB contribution visual */
.lb-contrib { background: rgba(107,83,163,.07); border: 1px solid rgba(107,83,163,.25); border-radius: 18px; padding: 24px; margin-bottom: 28px; }
.lb-contrib__formula { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.lb-contrib__box {
  flex: 1; min-width: 180px; border-radius: 14px; padding: 18px 20px; border: 1px solid;
}
.lb-contrib__box--quiz   { background: rgba(107,83,163,.1); border-color: rgba(107,83,163,.3); }
.lb-contrib__box--assign { background: rgba(20,168,0,.07); border-color: rgba(20,168,0,.25); }
.lb-contrib__box-lbl { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.lb-contrib__box-val { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.lb-contrib__box--quiz   .lb-contrib__box-val { color: var(--purple-l); }
.lb-contrib__box--assign .lb-contrib__box-val { color: var(--green); }
.lb-contrib__box-sub { font-size: 12px; color: var(--muted); }
.lb-contrib__op { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--muted); }
.lb-contrib__total { text-align: center; }
.lb-contrib__total-val  { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--purple-l); }
.lb-contrib__total-rank { font-size: 14px; font-weight: 700; color: var(--gold); margin-top: 4px; }

/* Pending items */
.pending-item {
  background: var(--d3); border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(255,255,255,.06); margin-bottom: 10px; transition: border-color .3s;
}
.pending-item:hover { border-color: rgba(107,83,163,.25); }
.pending-item__icon-wrap { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pending-item__title { font-size: 14px; font-weight: 600; color: var(--white); }
.pending-item__sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pending-item__pts   { margin-left: auto; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 100px; border: 1px solid; white-space: nowrap; }

/* Batch comparison */
.batch-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.batch-card { background: var(--d3); border: 1px solid rgba(107,83,163,.18); border-radius: 14px; padding: 18px; transition: all .3s; }
.batch-card:hover { transform: translateY(-3px); }
.batch-card--current { border-color: rgba(232,184,75,.4); background: rgba(232,184,75,.04); }
.batch-card__label  { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.batch-card__score  { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.batch-card__rank   { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.batch-card__change { font-size: 12px; color: var(--green); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   COURSE DETAIL (ENROLLED)
══════════════════════════════════════════════════════ */

/* Course hero strip */
.course-hero {
  background: var(--d3); border-bottom: 1px solid rgba(107,83,163,.18);
  display: flex; overflow: hidden;
}
.course-hero__thumb {
  width: 220px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 60px;
}
.course-hero__info { flex: 1; padding: 24px 28px; }
.course-hero__cat   { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.course-hero__title { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--white); margin-bottom: 6px; letter-spacing: -.025em; }
.course-hero__batch { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.course-hero__prog-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.course-hero__prog-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.course-hero__prog-pct   { font-size: 12px; font-weight: 700; color: var(--purple-l); white-space: nowrap; }
.course-hero__stats { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.04); }
.course-hero__stat-item { text-align: center; }
.course-hero__stat-val   { font-family: var(--display); font-size: 16px; font-weight: 800; }
.course-hero__stat-lbl   { font-size: 10px; color: var(--muted); margin-top: 2px; }
.course-hero__actions { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 24px 0; justify-content: center; }

/* Two-column layout for course detail */
.course-detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.course-detail-sticky { position: sticky; top: calc(64px + 16px); }

/* Module card */
.module-card {
  background: var(--d3); border: 1px solid rgba(107,83,163,.18);
  border-radius: 14px; overflow: hidden; margin-bottom: 14px;
  transition: border-color .3s;
}
.module-card--current { border-color: rgba(107,83,163,.5); }
.module-card--locked  { opacity: .6; }
.module-card__header { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.module-card__num {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; font-weight: 800;
  background: var(--d4); border: 1px solid rgba(107,83,163,.3); color: var(--purple-l);
}
.module-card--current .module-card__num { background: rgba(107,83,163,.25); border-color: rgba(107,83,163,.55); }
.module-card--locked  .module-card__num { border-color: rgba(119,119,119,.2); color: var(--muted); }
.module-card__title { font-size: 15px; font-weight: 700; color: var(--white); flex: 1; line-height: 1.35; }
.module-card--locked .module-card__title { color: var(--muted); }
.module-card__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.module-card__current-tag { font-size: 10px; font-weight: 700; background: rgba(107,83,163,.2); border: 1px solid rgba(107,83,163,.45); color: var(--purple-l); padding: 3px 10px; border-radius: 100px; }

/* Lesson dots strip */
.lesson-dots { display: flex; gap: 5px; padding: 0 18px 10px; }
.lesson-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--d4); border: 1px solid rgba(255,255,255,.08); }
.lesson-dot--done { background: var(--green); border-color: var(--green); }
.lesson-dot--current { background: var(--purple); border-color: var(--purple-l); }

/* Module inline actions */
.module-inline-actions { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.04); flex-wrap: wrap; }

/* Lesson list (expanded) */
.lesson-list { border-top: 1px solid rgba(255,255,255,.04); }
.lesson-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .2s;
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover:not(.lesson-item--locked) { background: rgba(107,83,163,.04); }
.lesson-item--current { background: rgba(107,83,163,.07); }
.lesson-item__play {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  background: var(--d4); border: 1px solid rgba(255,255,255,.08);
}
.lesson-item--done    .lesson-item__play { background: rgba(20,168,0,.2); border-color: rgba(20,168,0,.4); color: var(--green); }
.lesson-item--current .lesson-item__play { background: rgba(107,83,163,.25); border-color: rgba(107,83,163,.5); color: var(--purple-l); }
.lesson-item__num   { font-size: 10px; color: var(--muted); font-weight: 600; min-width: 52px; }
.lesson-item__title { flex: 1; font-size: 13px; color: var(--soft); line-height: 1.4; }
.lesson-item--done    .lesson-item__title { color: var(--muted); }
.lesson-item--current .lesson-item__title { color: var(--white); font-weight: 600; }
.lesson-item__dur   { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Quick actions panel */
.quick-actions {
  background: var(--d3); border: 1px solid rgba(107,83,163,.22);
  border-radius: 16px; overflow: hidden;
}
.quick-actions__title { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--white); padding: 16px 18px; border-bottom: 1px solid rgba(107,83,163,.12); }
.quick-action-item { padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.quick-action-item:last-child { border-bottom: none; }
.quick-action-item__label { font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.quick-action-item__sub   { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.rank-mini { background: rgba(232,184,75,.07); border: 1px solid rgba(232,184,75,.25); border-radius: 12px; padding: 14px; }
.rank-mini__label { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.rank-mini__row   { display: flex; align-items: baseline; gap: 8px; }
.rank-mini__rank  { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--gold); }
.rank-mini__pts   { font-size: 16px; font-weight: 700; color: var(--white); }
.rank-mini__sub   { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── REVEAL ANIMATION ───────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.vis { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; } .rv.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .course-detail-layout { grid-template-columns: 1fr; }
  .course-detail-sticky { position: static; }
}
@media (max-width: 900px) {
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .quiz-breakdown { grid-template-columns: repeat(2,1fr); }
  .batch-cards { grid-template-columns: 1fr; }
  .guidelines-list { grid-template-columns: 1fr; }
  .sidebar { width: 100%; height: auto; position: static; }
  .dashboard { flex-direction: column; }
  .course-hero { flex-direction: column; }
  .course-hero__thumb { width: 100%; height: 140px; }
}
@media (max-width: 600px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .db-inner { padding: 20px 18px; }
  .lb-contrib__formula { flex-direction: column; }
}