/* =========================================
   EXAM / MOCK TEST STYLES
   ========================================= */

/* Auth Pages */
.auth-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 40px 16px;
}
.auth-card {
  background: #fff; border-radius: 6px; border: 1px solid #e8e8e8;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  width: 100%; max-width: 460px; overflow: hidden;
}
.auth-header {
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  padding: 32px 28px 24px; text-align: center; color: #fff;
}
.auth-header i { font-size: 40px; color: #f23071; margin-bottom: 10px; display: block; }
.auth-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.auth-header p { color: #aaa; font-size: 13px; }
.auth-form { padding: 24px 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.input-icon { position: relative; }
.input-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 14px; }
.input-icon input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1.5px solid #e0e0e0; border-radius: 4px;
  font-size: 14px; color: #333; outline: none;
  transition: border-color 0.2s;
}
.input-icon input:focus { border-color: #f23071; }
.field-error { color: #ef4444; font-size: 11px; display: block; margin-top: 4px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: #f23071; color: #fff; border: none; border-radius: 4px;
  padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background 0.2s;
}
.btn-primary:hover { background: #c81a5a; color: #fff; }
.btn-full { width: 100%; justify-content: center; padding: 12px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  border: 2px solid #f23071; color: #f23071; background: #fff;
  border-radius: 4px; padding: 10px 20px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: all 0.2s;
}
.btn-outline:hover { background: #f23071; color: #fff; }
.auth-footer { padding: 16px 28px; text-align: center; background: #fafafa; border-top: 1px solid #eee; font-size: 13px; color: #666; }
.auth-footer a { color: #f23071; font-weight: 600; }

/* Alerts */
.alert { padding: 12px 16px; border-radius: 4px; margin: 0 28px 4px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* Mock Test Hero */
.test-hero {
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border-left: 4px solid #f23071;
  color: #fff; padding: 24px 28px;
  border-radius: 4px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.test-hero h1 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.test-hero p { color: #bbb; font-size: 13px; }

/* Category Filter */
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cat-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1.5px solid #ddd; color: #555; text-decoration: none;
  transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px;
}
.cat-btn:hover, .cat-btn.active { background: #f23071; border-color: #f23071; color: #fff; }
.cat-btn .cnt { background: rgba(255,255,255,0.25); border-radius: 10px; padding: 0 6px; font-size: 10px; }

/* Test Cards Grid */
.tests-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.test-card {
  flex: 1 1 280px; background: #fff; border: 1px solid #e8e8e8;
  border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.test-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.12); transform: translateY(-2px); }
.test-card-head { padding: 20px 20px 0; display: flex; justify-content: space-between; align-items: flex-start; }
.test-icon {
  width: 48px; height: 48px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff;
}
.test-icon.cat-engineering { background: #2563eb; }
.test-icon.cat-medical     { background: #16a34a; }
.test-icon.cat-mba         { background: #7c3aed; }
.test-icon.cat-aptitude    { background: #ea580c; }
.attempted-badge { background: #dcfce7; color: #166534; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.test-card-body { padding: 14px 20px; flex: 1; }
.test-cat-label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 6px; }
.test-card-body h3 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; line-height: 1.4; }
.test-card-body p { font-size: 12px; color: #888; line-height: 1.6; margin-bottom: 12px; }
.test-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.test-meta span { font-size: 11px; color: #666; display: flex; align-items: center; gap: 4px; }
.test-meta i { color: #f23071; }
.test-card-foot { padding: 14px 20px; border-top: 1px solid #f5f5f5; }
.btn-start {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #f23071; color: #fff; border-radius: 4px;
  padding: 10px 0; font-size: 13px; font-weight: 700; text-decoration: none;
  transition: background 0.2s;
}
.btn-start:hover { background: #c81a5a; color: #fff; }
.empty-state { text-align: center; padding: 40px; color: #aaa; }
.empty-state i { font-size: 48px; margin-bottom: 12px; display: block; }
.empty-state p { margin-bottom: 16px; }

/* ── EXAM INTERFACE ── */
body.exam-body { background: #f0f2f5; margin: 0; }

.exam-topbar {
  background: #1a1a1a; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  height: 54px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.exam-title { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 14px; font-weight: 600; }
.exam-title .sep { color: #444; }
.exam-topbar-right { display: flex; align-items: center; gap: 12px; }
.timer-box {
  background: #2d2d2d; color: #fff; padding: 6px 14px;
  border-radius: 4px; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; min-width: 90px;
}
.timer-box.urgent { background: #ef4444; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.btn-submit-top {
  background: #f23071; color: #fff; border: none; border-radius: 4px;
  padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: background 0.2s;
}
.btn-submit-top:hover { background: #c81a5a; }

.exam-layout { display: flex; gap: 16px; padding: 16px; max-width: 1200px; margin: 0 auto; align-items: flex-start; }
.exam-main { flex: 1; min-width: 0; }

/* Question block */
.question-block { background: #fff; border-radius: 6px; border: 1px solid #e8e8e8; padding: 24px; margin-bottom: 12px; }
.q-number-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.q-num { font-size: 13px; font-weight: 700; color: #555; }
.q-marks { font-size: 12px; color: #f23071; font-weight: 700; }
.q-text { font-size: 15px; color: #1a1a1a; line-height: 1.7; margin-bottom: 20px; font-weight: 500; }

.options-list { display: flex; flex-direction: column; gap: 10px; }
.option-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border: 1.5px solid #e8e8e8; border-radius: 6px; cursor: pointer;
  transition: all 0.15s; position: relative;
}
.option-item:hover { border-color: #f23071; background: #fff5f8; }
.option-item input[type="radio"] { display: none; }
.option-item input[type="radio"]:checked ~ .opt-letter { background: #f23071; color: #fff; border-color: #f23071; }
.option-item:has(input:checked) { border-color: #f23071; background: #fff5f8; }
.opt-letter {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #555; flex-shrink: 0;
  transition: all 0.15s;
}
.opt-text { font-size: 14px; color: #333; padding-top: 3px; }

.q-actions { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.btn-mark {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid #ddd; border-radius: 4px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; color: #666; cursor: pointer;
  transition: all 0.2s;
}
.btn-mark:hover, .btn-mark.active { border-color: #f97316; color: #f97316; }
.btn-clear {
  background: none; border: 1.5px solid #ddd; border-radius: 4px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; color: #666; cursor: pointer;
  display: flex; align-items: center; gap: 6px; transition: all 0.2s;
}
.btn-clear:hover { border-color: #999; color: #333; }

/* Nav buttons */
.q-nav-btns { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.btn-prev, .btn-next {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1a1a; color: #fff; border: none; border-radius: 4px;
  padding: 10px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.2s;
}
.btn-prev:hover, .btn-next:hover { background: #333; }
.btn-submit-main {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: #f23071; color: #fff; border: none; border-radius: 4px;
  padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background 0.2s;
}
.btn-submit-main:hover { background: #c81a5a; }

/* Palette */
.exam-sidebar { width: 240px; flex-shrink: 0; }
.palette-card, .summary-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 16px; margin-bottom: 12px; }
.palette-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #555; letter-spacing: 0.5px; margin-bottom: 12px; }
.palette-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.leg { font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.leg-answered   { background: #dcfce7; color: #166534; }
.leg-marked     { background: #ffedd5; color: #9a3412; }
.leg-notvisited { background: #f3f4f6; color: #6b7280; }
.leg-notanswered{ background: #fee2e2; color: #991b1b; }

.palette-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-btn {
  width: 34px; height: 34px; border-radius: 4px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s;
}
.pal-btn.notvisited  { background: #f3f4f6; color: #6b7280; }
.pal-btn.notanswered { background: #fee2e2; color: #991b1b; }
.pal-btn.answered    { background: #dcfce7; color: #166534; }
.pal-btn.marked      { background: #ffedd5; color: #9a3412; }
.pal-btn.current     { outline: 3px solid #f23071; outline-offset: 1px; }

.summary-rows { display: flex; flex-direction: column; gap: 8px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; padding: 6px 0; border-bottom: 1px solid #f5f5f5; }
.sum-row:last-child { border-bottom: none; }
.sum-row strong { font-weight: 700; color: #1a1a1a; }

/* Confirm modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.modal-box { background: #fff; border-radius: 10px; padding: 32px; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.modal-icon { font-size: 48px; color: #f23071; margin-bottom: 12px; }
.modal-box h3 { font-size: 20px; color: #1a1a1a; margin-bottom: 8px; }
.modal-box p { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.modal-btns { display: flex; gap: 12px; justify-content: center; }
.btn-cancel { padding: 10px 24px; border: 1.5px solid #ddd; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; }
.btn-confirm { padding: 10px 24px; background: #f23071; border: none; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ── RESULT PAGE ── */
.result-header {
  text-align: center; padding: 36px 20px 28px;
  border-radius: 6px; margin-bottom: 20px; color: #fff;
}
.result-header.pass { background: linear-gradient(135deg, #166534, #15803d); }
.result-header.fail { background: linear-gradient(135deg, #7f1d1d, #991b1b); }
.result-icon { font-size: 48px; margin-bottom: 10px; }
.result-header h1 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.result-header > p { color: rgba(255,255,255,0.8); font-size: 14px; margin-bottom: 16px; }
.result-score-big { margin: 12px 0; }
.score-num { font-size: 64px; font-weight: 900; }
.score-denom { font-size: 28px; opacity: 0.7; }
.grade-badge { display: inline-block; padding: 6px 24px; border-radius: 30px; font-size: 20px; font-weight: 800; background: rgba(255,255,255,0.2); margin-top: 8px; }

.result-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.rstat {
  flex: 1 1 120px; background: #fff; border: 1px solid #e8e8e8;
  border-radius: 6px; padding: 16px; text-align: center;
}
.rstat i { font-size: 24px; margin-bottom: 6px; display: block; }
.rstat.correct i { color: #22c55e; }
.rstat.wrong   i { color: #ef4444; }
.rstat.skipped i { color: #94a3b8; }
.rstat.percent i { color: #f23071; }
.rstat.time    i { color: #3b82f6; }
.rstat-num { display: block; font-size: 28px; font-weight: 800; color: #1a1a1a; }
.rstat-lbl { display: block; font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-top: 2px; }

.score-bar-wrap { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px; margin-bottom: 20px; }
.score-bar-track { height: 20px; background: #f3f4f6; border-radius: 10px; position: relative; overflow: visible; }
.score-bar-fill { height: 100%; border-radius: 10px; transition: width 1s ease; }
.score-bar-fill.pass { background: linear-gradient(90deg, #22c55e, #16a34a); }
.score-bar-fill.fail { background: linear-gradient(90deg, #ef4444, #dc2626); }
.pass-marker { position: absolute; top: -20px; transform: translateX(-50%); }
.pass-marker span { font-size: 11px; color: #666; white-space: nowrap; background: #fff; padding: 2px 6px; border-radius: 3px; border: 1px solid #ddd; }

.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }

/* Review cards */
.review-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px; margin-bottom: 14px; border-left: 4px solid #e8e8e8; }
.review-card.correct { border-left-color: #22c55e; }
.review-card.wrong   { border-left-color: #ef4444; }
.review-card.skipped { border-left-color: #94a3b8; }
.review-qnum { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rq-badge { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.rq-badge.correct { background: #22c55e; }
.rq-badge.wrong   { background: #ef4444; }
.rq-badge.skipped { background: #94a3b8; }
.rq-status { font-size: 12px; font-weight: 700; }
.review-card.correct .rq-status { color: #166534; }
.review-card.wrong .rq-status   { color: #991b1b; }
.review-card.skipped .rq-status { color: #6b7280; }
.review-q { font-size: 14px; color: #1a1a1a; line-height: 1.7; margin-bottom: 14px; font-weight: 500; }
.review-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rev-opt { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1.5px solid #e8e8e8; border-radius: 5px; }
.rev-opt.is-correct { border-color: #22c55e; background: #f0fdf4; }
.rev-opt.is-wrong   { border-color: #ef4444; background: #fef2f2; }
.rev-opt-letter { width: 24px; height: 24px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #555; flex-shrink: 0; }
.rev-opt.is-correct .rev-opt-letter { background: #22c55e; color: #fff; }
.rev-opt.is-wrong   .rev-opt-letter { background: #ef4444; color: #fff; }
.review-explanation { background: #fffbeb; border: 1px solid #fde68a; border-radius: 4px; padding: 10px 14px; font-size: 13px; color: #78350f; }
.review-explanation i { margin-right: 6px; color: #d97706; }

/* ── DASHBOARD ── */
.dash-header {
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border-left: 4px solid #f23071; border-radius: 6px;
  padding: 24px 28px; margin-bottom: 20px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.dash-avatar i { font-size: 56px; color: #f23071; }
.dash-user-info { flex: 1; }
.dash-user-info h1 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.dash-user-info p { color: #aaa; font-size: 13px; margin-bottom: 3px; }
.dash-user-info i { color: #f23071; margin-right: 4px; }
.dash-join { font-size: 11px; color: #666; }
.btn-logout {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #444; color: #ccc; padding: 8px 16px;
  border-radius: 4px; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: all 0.2s;
}
.btn-logout:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08); }

.dash-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.dstat-card {
  flex: 1 1 160px; background: #fff; border: 1px solid #e8e8e8;
  border-radius: 6px; padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.dstat-icon { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; flex-shrink: 0; }
.dstat-icon.tests { background: #2563eb; }
.dstat-icon.avg   { background: #7c3aed; }
.dstat-icon.best  { background: #d97706; }
.dstat-icon.avail { background: #16a34a; }
.dstat-num { display: block; font-size: 26px; font-weight: 800; color: #1a1a1a; }
.dstat-lbl { display: block; font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }

.dash-grid { display: flex; gap: 20px; align-items: flex-start; }
.dash-left { flex: 1; min-width: 0; }
.dash-right { width: 300px; flex-shrink: 0; }
.dash-section { background: #fff; border: 1px solid #e8e8e8; border-radius: 6px; padding: 20px; }

/* History table */
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table th { background: #f8f9fa; color: #555; font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 2px solid #e8e8e8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.history-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #444; }
.history-table tr:last-child td { border-bottom: none; }
.cat-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.cat-tag.cat-engineering { background: #dbeafe; color: #1e40af; }
.cat-tag.cat-medical     { background: #dcfce7; color: #166534; }
.cat-tag.cat-mba         { background: #ede9fe; color: #5b21b6; }
.cat-tag.cat-aptitude    { background: #ffedd5; color: #9a3412; }
.pct-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.pct-badge.pass { background: #dcfce7; color: #166534; }
.pct-badge.fail { background: #fee2e2; color: #991b1b; }
.link-view { color: #f23071; font-weight: 600; font-size: 12px; }

/* Available tests list */
.avail-tests-list { display: flex; flex-direction: column; gap: 0; }
.avail-tests-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.avail-tests-list li:last-child { border-bottom: none; }
.avail-test-icon { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.avail-test-info { flex: 1; min-width: 0; }
.avail-title { display: block; font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.3; }
.avail-meta { display: block; font-size: 11px; color: #999; margin-top: 2px; }
.avail-start { width: 28px; height: 28px; background: #f23071; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; transition: background 0.2s; }
.avail-start:hover { background: #c81a5a; color: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .exam-layout { flex-direction: column; padding: 10px; }
  .exam-sidebar { width: 100%; }
  .palette-grid { justify-content: flex-start; }
  .q-nav-btns { flex-wrap: wrap; }
  .exam-topbar { padding: 0 12px; }
  .exam-title span { display: none; }

  .result-stats { gap: 8px; }
  .rstat { flex: 1 1 calc(50% - 8px); }

  .dash-grid { flex-direction: column; }
  .dash-right { width: 100%; }
  .dash-header { gap: 12px; }
  .dash-avatar { display: none; }

  .form-row { flex-direction: column; }
  .result-actions { gap: 8px; }
  .tests-grid .test-card { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .dstat-card { flex: 1 1 calc(50% - 14px); }
  .result-header { padding: 24px 16px; }
  .score-num { font-size: 48px; }
}