/* ============================================================
   Page Learning — Mock Test Platform
   Redesigned UI | Reference: Playful Quiz App
   Inter Tight Font | Purple + Yellow + Sky Blue
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:              #DBF0FF;
  --bg-alt:          #C8E8FF;
  --bg-card:         #FFFFFF;

  /* Purple System */
  --purple:          #7C5CFC;
  --purple-dark:     #6344E5;
  --purple-mid:      #9B7EFF;
  --purple-soft:     #EDE8FF;
  --purple-glow:     rgba(124, 92, 252, 0.25);

  /* Yellow Accent */
  --yellow:          #FFD93D;
  --yellow-dark:     #FABB00;
  --yellow-text:     #1A1A2E;
  --yellow-glow:     rgba(255, 217, 61, 0.40);

  /* Other Accents */
  --green:           #51CF66;
  --green-soft:      #E6FAE9;
  --red:             #FF6B6B;
  --red-soft:        #FFE8E8;
  --teal:            #3DD9CB;
  --orange:          #FF9F43;
  --pink:            #F06292;

  /* Text */
  --text:            #1A1A2E;
  --text-secondary:  #5A607A;
  --text-muted:      #9CA3AF;
  --white:           #FFFFFF;

  /* Question Palette States */
  --s-not-visited:   rgba(255,255,255,0.35);
  --s-not-answered:  #FF6B6B;
  --s-answered:      #51CF66;
  --s-marked:        #FFD93D;
  --s-ans-marked:    #FF9F43;

  /* Shadows */
  --shadow-xs:   0 1px 4px rgba(124,92,252,.08);
  --shadow-sm:   0 4px 16px rgba(124,92,252,.12);
  --shadow-md:   0 8px 32px rgba(124,92,252,.18);
  --shadow-lg:   0 16px 48px rgba(124,92,252,.22);
  --shadow-card: 0 4px 24px rgba(0,0,0,.07);
  --shadow-y:    0 6px 24px rgba(255,217,61,.45);

  /* Layout */
  --navbar-h: 64px;
  --r-xs:   6px;
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --r-2xl:  48px;
  --r-pill: 100px;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .2s;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter Tight', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul, ol { list-style: none; }

/* ── Typography ────────────────────────────────────────────── */
h1 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; line-height: 1.15; letter-spacing: -1px; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { color: var(--text-secondary); }

/* ── Utility ───────────────────────────────────────────────── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 14px; font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}
.btn-primary:hover { background: var(--purple-dark); border-color: var(--purple-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn-yellow {
  background: var(--yellow);
  color: var(--yellow-text);
  border-color: var(--yellow);
}
.btn-yellow:hover { background: var(--yellow-dark); border-color: var(--yellow-dark); box-shadow: var(--shadow-y); transform: translateY(-1px); }

.btn-white {
  background: var(--white);
  color: var(--purple);
  border-color: var(--white);
}
.btn-white:hover { background: var(--purple-soft); border-color: var(--purple-soft); }

.btn-outline-purple {
  background: transparent;
  color: var(--purple);
  border-color: var(--purple);
}
.btn-outline-purple:hover { background: var(--purple-soft); }

.btn-outline-white {
  background: rgba(255,255,255,0.15);
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-white:hover { background: rgba(255,255,255,0.25); }

.btn-ghost {
  background: var(--bg-alt);
  color: var(--text-secondary);
  border-color: transparent;
}
.btn-ghost:hover { background: #B9D9F5; color: var(--text); }

.btn-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  color: var(--yellow-text);
  font-size: 15px; font-weight: 800;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-y);
  border: none;
}
.btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,217,61,.55); }

.btn-danger {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn-danger:hover { background: #e55555; box-shadow: 0 4px 16px rgba(255,107,107,.4); }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
  height: var(--navbar-h);
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  border-bottom: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 4px 20px rgba(124,92,252,.35);
}

.navbar-logo {
  display: flex; align-items: center; gap: 10px;
}
.navbar-logo img {
  height: 38px; width: auto; object-fit: contain;
  /* Keep logo visible on dark bg — add a white tint if needed */
  filter: brightness(0) invert(1);
}
.logo-text-fallback {
  font-size: 20px; font-weight: 900; color: var(--white); letter-spacing: -.5px;
}
.logo-text-fallback span { color: var(--yellow); }

.navbar-exam-name {
  font-size: 12px; font-weight: 800;
  color: var(--yellow-text);
  letter-spacing: .8px; text-transform: uppercase;
  background: var(--yellow);
  padding: 7px 18px;
  border-radius: var(--r-pill);
  border: none;
  box-shadow: var(--shadow-y);
}

/* ═══════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════ */

/* Hero Header */
.home-header {
  padding: 40px 0 32px;
}
.home-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.home-greeting {
  display: flex; flex-direction: column; gap: 6px;
}
.home-greeting-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700;
  color: var(--purple);
  background: var(--purple-soft);
  padding: 5px 14px; border-radius: var(--r-pill);
  width: fit-content;
}
.home-greeting h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: var(--text);
}
.home-greeting h1 span { color: var(--purple); }
.home-greeting p {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 480px;
}

.home-stats-card {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 20px 28px;
  box-shadow: var(--shadow-card);
  display: flex; gap: 24px;
  flex-shrink: 0;
}
.home-stat {
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.home-stat-num {
  font-size: 28px; font-weight: 900; color: var(--purple); line-height: 1;
}
.home-stat-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* Category Tabs */
.category-tabs-wrap {
  margin-bottom: 28px;
}
.category-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.cat-tab {
  font-size: 14px; font-weight: 700;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 2px solid rgba(124,92,252,.2);
  background: var(--white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.cat-tab:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-soft); }
.cat-tab.active {
  background: var(--purple); color: var(--white); border-color: var(--purple);
  box-shadow: var(--shadow-sm);
}

/* Exam Section */
.exam-section { margin-bottom: 52px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.section-title { font-size: 18px; font-weight: 800; color: var(--text); }
.section-meta {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--white);
  padding: 4px 12px; border-radius: var(--r-pill);
}

/* Exam Cards Grid */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

/* Exam Card */
.exam-card {
  background: linear-gradient(145deg, var(--purple) 0%, var(--purple-mid) 100%);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  cursor: pointer; text-decoration: none; color: var(--white);
  position: relative; overflow: hidden;
  transition: all var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.exam-card::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.exam-card::after {
  content: '';
  position: absolute; bottom: -20px; left: -20px;
  width: 80px; height: 80px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}
.exam-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-md);
}

/* NMMS card - different gradient */
.exam-card.nmms-card {
  background: linear-gradient(145deg, #2ECC71 0%, #1ABC9C 100%);
}

.exam-card-icon {
  font-size: 36px;
  width: 56px; height: 56px;
  background: rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.exam-card-body { flex: 1; }
.exam-card h3 {
  font-size: 17px; font-weight: 800;
  color: var(--white); margin-bottom: 6px;
}

.exam-card-meta {
  display: flex; flex-direction: column; gap: 3px;
}
.exam-card-meta span {
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,.75);
}

.exam-card-progress {
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.exam-card-progress-fill {
  height: 100%;
  background: rgba(255,255,255,.7);
  border-radius: var(--r-pill);
  width: 0%;
  transition: width .6s var(--ease);
}

.exam-card .btn-yellow {
  font-size: 13px; padding: 10px 20px;
  align-self: flex-start;
  position: relative; z-index: 1;
}

/* Category badge on card */
.card-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 10px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.25);
}

/* Home footer */
.home-footer {
  background: var(--white);
  border-top: 1px solid rgba(124,92,252,.08);
  padding: 24px;
  text-align: center;
  margin-top: 40px;
}
.home-footer p { font-size: 13px; color: var(--text-muted); }
.home-footer a { color: var(--purple); font-weight: 700; }

/* ═══════════════════════════════════════
   QUIZ PAGE
═══════════════════════════════════════ */
.quiz-layout {
  display: grid;
  grid-template-columns: 1fr 296px;
  height: calc(100vh - var(--navbar-h));
  overflow: hidden;
}

/* ── Purple Main Area ─────────────────── */
.quiz-main {
  background: linear-gradient(160deg, var(--purple) 0%, #5B3DD8 100%);
  display: flex; flex-direction: column;
  overflow-y: auto; position: relative;
}

/* Decorative circles */
.quiz-main::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px;
  background: rgba(255,255,255,.06);
  border-radius: 50%; pointer-events: none;
}
.quiz-main::after {
  content: '';
  position: absolute; bottom: -60px; left: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.04);
  border-radius: 50%; pointer-events: none;
}

/* Question Top Bar */
.question-topbar {
  padding: 20px 28px 16px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.q-info {
  display: flex; flex-direction: column; gap: 4px;
}
.q-counter-label {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: 1px;
}
.q-counter-num {
  font-size: 28px; font-weight: 900;
  color: var(--white); line-height: 1;
}
.q-counter-num span { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.55); }

.q-marks-badges {
  display: flex; gap: 8px; align-items: flex-start; flex-direction: column;
}
.badge {
  font-size: 11px; font-weight: 800;
  padding: 5px 12px; border-radius: var(--r-pill);
  letter-spacing: .3px;
}
.badge-pos {
  background: rgba(81,207,102,.2);
  color: #A8F0B0;
  border: 1px solid rgba(81,207,102,.3);
}
.badge-neg {
  background: rgba(255,107,107,.2);
  color: #FFB5B5;
  border: 1px solid rgba(255,107,107,.3);
}

/* Progress bar */
.q-progress-wrap {
  padding: 0 28px 20px;
  position: relative; z-index: 1;
}
.q-progress-track {
  height: 5px;
  background: rgba(255,255,255,.15);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.q-progress-fill {
  height: 100%;
  background: var(--yellow);
  border-radius: var(--r-pill);
  transition: width .4s var(--ease);
}

/* Question Content */
.question-content {
  flex: 1;
  padding: 0 28px 20px;
  position: relative; z-index: 1;
}

.question-label {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 16px;
}

.question-text {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Options Grid — 2 columns */
.options-label {
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 14px;
}

.options-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.option-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--white);
  font-size: 14px; font-weight: 600;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.option-item:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.4);
  transform: translateY(-1px);
}
.option-item.selected {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--yellow-text);
  box-shadow: var(--shadow-y);
  transform: translateY(-2px);
}

/* Result state options on quiz review */
.option-item.correct-answer {
  background: rgba(81,207,102,.25);
  border-color: var(--green);
  color: var(--white);
}
.option-item.wrong-answer {
  background: rgba(255,107,107,.25);
  border-color: var(--red);
  color: var(--white);
}

.option-badge {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.option-item.selected .option-badge {
  background: rgba(0,0,0,.12);
  color: var(--yellow-text);
}
.option-text { font-size: 14px; font-weight: 600; line-height: 1.4; }

/* Quiz Nav Buttons */
.quiz-nav-buttons {
  padding: 16px 28px 20px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,.12);
}
.quiz-nav-buttons .btn-prev-wrap { margin-right: auto; }

/* ── White Sidebar ────────────────────── */
.quiz-sidebar {
  background: var(--white);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,.06);
}

/* Timer */
.timer-section {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  padding: 22px 20px;
  text-align: center;
}
.timer-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,.65);
  margin-bottom: 8px;
}
.timer-display {
  font-size: 40px; font-weight: 900;
  color: var(--white); letter-spacing: -2px;
  line-height: 1; font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.timer-display.warning { color: var(--yellow); animation: timerPulse 1s ease infinite; }
.timer-display.danger  { color: var(--red);    animation: timerPulse .5s ease infinite; }

@keyframes timerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(.97); }
}

.timer-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.timer-bar {
  height: 100%;
  background: var(--white);
  border-radius: var(--r-pill);
  transition: width 1s linear, background .5s;
}
.timer-bar.warning { background: var(--yellow); }
.timer-bar.danger  { background: var(--red); }

/* Palette */
.palette-section {
  padding: 18px 16px;
  flex: 1;
}
.palette-title {
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.palette-legend {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; margin-bottom: 16px;
}
.legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
}
.legend-dot {
  width: 14px; height: 14px; border-radius: var(--r-xs);
  flex-shrink: 0;
}
.legend-dot.not-visited  { background: #D1D5DB; }
.legend-dot.not-answered { background: var(--s-not-answered); }
.legend-dot.answered     { background: var(--s-answered); }
.legend-dot.marked       { background: var(--s-marked); }
.legend-dot.ans-marked   { background: var(--s-ans-marked); }

/* Palette Summary */
.palette-summary {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 14px;
}
.pal-sum-item {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 10px;
  text-align: center;
}
.pal-sum-count {
  font-size: 22px; font-weight: 900; line-height: 1;
}
.pal-sum-label {
  font-size: 9px; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
  margin-top: 2px;
}
.pal-sum-item.answered   .pal-sum-count { color: var(--green); }
.pal-sum-item.unanswered .pal-sum-count { color: var(--red); }
.pal-sum-item.marked     .pal-sum-count { color: var(--yellow-dark); }
.pal-sum-item.unvisited  .pal-sum-count { color: var(--text-muted); }

/* Palette Grid */
.palette-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.palette-btn {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r-xs);
  font-size: 12px; font-weight: 800;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease);
  cursor: pointer; border: 2px solid transparent;
}
.palette-btn:hover { transform: scale(1.12); filter: brightness(1.15); }
.palette-btn.state-not_visited        { background: #D1D5DB; color: var(--text-secondary); }
.palette-btn.state-not_answered       { background: var(--s-not-answered); }
.palette-btn.state-answered           { background: var(--s-answered); }
.palette-btn.state-marked_for_review  { background: var(--s-marked); color: var(--yellow-text); }
.palette-btn.state-answered_and_marked { background: var(--s-ans-marked); }
.palette-btn.current {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
  transform: scale(1.08);
}

/* Sidebar Submit */
.sidebar-submit {
  padding: 16px;
  border-top: 1px solid rgba(124,92,252,.1);
  background: var(--bg);
}

/* ── Submit Modal ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26,26,46,.6);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  padding: 36px;
  max-width: 420px; width: 100%;
  box-shadow: var(--shadow-lg);
  transform: scale(.94) translateY(20px);
  transition: transform .3s var(--ease);
}
.modal-overlay.active .modal { transform: scale(1) translateY(0); }

.modal-icon {
  width: 60px; height: 60px;
  background: var(--purple-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin-bottom: 20px;
}
.modal h3 { margin-bottom: 6px; color: var(--text); }
.modal > p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }

.modal-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 24px;
}
.modal-stat {
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.modal-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.modal-stat-val   { font-size: 26px; font-weight: 900; }
.modal-stat.answered   .modal-stat-val { color: var(--green); }
.modal-stat.unanswered .modal-stat-val { color: var(--red); }
.modal-stat.marked     .modal-stat-val { color: var(--yellow-dark); }
.modal-stat.unvisited  .modal-stat-val { color: var(--text-muted); }

.modal-buttons { display: flex; gap: 10px; }
.modal-buttons .btn { flex: 1; padding: 13px 16px; }

/* ═══════════════════════════════════════
   RESULT PAGE
═══════════════════════════════════════ */
.result-page { padding: 0 0 80px; }

/* Score Hero */
.result-hero {
  background: linear-gradient(160deg, var(--purple) 0%, #5B3DD8 100%);
  padding: 52px 24px 64px;
  text-align: center;
  position: relative; overflow: hidden;
  margin-bottom: 32px;
}
.result-hero::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 240px; height: 240px;
  background: rgba(255,255,255,.07);
  border-radius: 50%; pointer-events: none;
}
.result-hero::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.05);
  border-radius: 50%; pointer-events: none;
}

.score-ring {
  width: 168px; height: 168px;
  margin: 0 auto 20px;
  position: relative;
}
.score-ring svg {
  position: absolute; top: 0; left: 0;
  transform: rotate(-90deg);
}
.score-circle-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 10; }
.score-circle-fill  {
  fill: none; stroke: var(--yellow);
  stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.score-ring-inner {
  position: absolute; inset: 18px;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.score-value { font-size: 40px; font-weight: 900; color: var(--white); line-height: 1; }
.score-total-label { font-size: 13px; color: rgba(255,255,255,.65); font-weight: 600; }

.result-hero h2 { color: var(--white); font-size: 1.8rem; margin-bottom: 6px; position: relative; z-index: 1; }
.result-hero .exam-subtitle { font-size: 13px; color: rgba(255,255,255,.65); position: relative; z-index: 1; }

/* Stats */
.result-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 24px;
}
.stat-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 22px 16px;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: all var(--dur) var(--ease);
  border: 2px solid transparent;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.stat-icon { font-size: 26px; margin-bottom: 10px; }
.stat-number { font-size: 30px; font-weight: 900; line-height: 1; margin-bottom: 4px; }
.stat-label  { font-size: 12px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.stat-card.correct  { border-color: var(--green);       } .stat-card.correct  .stat-number { color: var(--green); }
.stat-card.wrong    { border-color: var(--red);         } .stat-card.wrong    .stat-number { color: var(--red); }
.stat-card.skipped  { border-color: var(--yellow-dark); } .stat-card.skipped  .stat-number { color: var(--yellow-dark); }
.stat-card.time-card { border-color: var(--purple-mid); } .stat-card.time-card .stat-number { color: var(--purple); }

/* Score Breakdown */
.score-breakdown {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-xs);
}
.score-breakdown h3 { margin-bottom: 16px; }
.breakdown-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--bg-alt);
  font-size: 14px;
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-label { color: var(--text-secondary); }
.breakdown-val { font-weight: 800; color: var(--text); }
.breakdown-val.pos { color: var(--green); }
.breakdown-val.neg { color: var(--red); }

/* Review Section */
.review-section {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-xs);
}
.review-section h3 { margin-bottom: 20px; }

.review-item {
  border: 2px solid var(--bg-alt);
  border-radius: var(--r-md);
  margin-bottom: 14px; overflow: hidden;
}
.review-item-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--bg-alt);
}
.review-q-num {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--white);
  flex-shrink: 0;
}
.review-q-num.correct  { background: var(--green); }
.review-q-num.wrong    { background: var(--red); }
.review-q-num.skipped  { background: var(--yellow-dark); }
.review-status-badge {
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: var(--r-pill);
  margin-left: auto;
}
.review-status-badge.correct  { background: var(--green-soft); color: #2B9348; }
.review-status-badge.wrong    { background: var(--red-soft);   color: #C0392B; }
.review-status-badge.skipped  { background: #FFF8E1; color: #D97706; }

.review-item-body { padding: 16px; }
.review-q-text { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--text); }

/* Review options - normal bg on result page */
.review-options .option-item {
  background: var(--bg);
  border-color: var(--bg-alt);
  color: var(--text);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}
.review-options .option-item:hover { transform: none; background: var(--bg); }
.review-options .option-badge {
  background: var(--bg-alt);
  color: var(--text-secondary);
}
.review-options .option-item.correct-answer {
  background: var(--green-soft);
  border-color: var(--green);
  color: #2B9348;
}
.review-options .option-item.correct-answer .option-badge { background: var(--green); color: var(--white); }
.review-options .option-item.wrong-answer {
  background: var(--red-soft);
  border-color: var(--red);
  color: #C0392B;
}
.review-options .option-item.wrong-answer .option-badge { background: var(--red); color: var(--white); }

/* Result Actions */
.result-actions {
  display: flex; gap: 12px; justify-content: center;
}
.result-actions .btn { padding: 14px 32px; font-size: 15px; }

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(124,92,252,.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple-mid); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-in    { animation: fadeInUp .4s var(--ease) both; }
.anim-in-d1 { animation-delay: .08s; }
.anim-in-d2 { animation-delay: .16s; }
.anim-in-d3 { animation-delay: .24s; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 920px) {
  .quiz-layout {
    grid-template-columns: 1fr;
    height: auto; overflow: visible;
  }
  .quiz-main { min-height: 70vh; overflow: visible; }
  .quiz-sidebar {
    order: -1;
    flex-direction: row; flex-wrap: wrap;
    box-shadow: none; border-bottom: 1px solid rgba(124,92,252,.1);
  }
  .timer-section { flex: 1; border-radius: 0; }
  .palette-section { display: none; }
  .sidebar-submit { width: 100%; border-top: none; }
  .options-list { grid-template-columns: 1fr 1fr; }
  .result-stats { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .navbar { padding: 0 16px; }
  .home-header .container { flex-direction: column; align-items: flex-start; }
  .home-stats-card { display: none; }
  .options-list { grid-template-columns: 1fr; }
  .exam-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .question-content { padding: 0 18px 16px; }
  .question-topbar { padding: 16px 18px 12px; }
  .q-progress-wrap { padding: 0 18px 16px; }
  .quiz-nav-buttons { padding: 12px 18px 16px; gap: 8px; }
  .quiz-nav-buttons .btn { font-size: 12px; padding: 9px 14px; }
  .result-stats { grid-template-columns: repeat(2,1fr); }
  .modal { padding: 24px; }
}