.exam-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-lg); margin-bottom: 28px; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px); box-shadow: var(--shadow-sm) }
.exam-timer { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--text-primary) }
.exam-timer.warning { color: var(--danger); animation: timerPulse 1s infinite }
@keyframes timerPulse { 0%, 100% { opacity: 1 } 50% { opacity: .5 } }
.exam-timer i { font-size: 20px }
.exam-progress-text { font-size: 13px; color: var(--text-secondary); font-weight: 500 }
.eq-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; transition: all .2s var(--ease); box-shadow: var(--shadow-sm) }
.eq-card:hover { border-color: #cbd5e1 }
.eq-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.eq-num { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; color: #fff }
.eq-text { font-size: 15px; font-weight: 600; color: var(--text-primary) }

.exam-hero { text-align: center; padding: 40px 0 }
.exam-hero-icon { width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 36px; margin: 0 auto 24px }
.exam-hero-icon.exam { background: linear-gradient(135deg, var(--primary), #3b82f6); color: #fff }
.exam-hero-icon.trophy { background: linear-gradient(135deg, var(--accent), #f59e0b); color: #fff }
.exam-hero-icon.fail { background: linear-gradient(135deg, var(--danger), #f87171); color: #fff }
.exam-hero-icon.lock { background: #f1f5f9; color: var(--text-muted) }
.exam-hero h2 { margin-bottom: 14px; font-size: 24px; color: var(--text-primary) }
.exam-hero p { color: var(--text-secondary); margin-bottom: 28px; line-height: 1.7; max-width: 480px; margin-left: auto; margin-right: auto }
.exam-tags { display: flex; gap: 10px; justify-content: center; margin-bottom: 28px; flex-wrap: wrap }
.exam-tag { padding: 6px 14px; background: rgba(37, 99, 235, .06); border: 1px solid rgba(37, 99, 235, .15); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 6px }
.result-score { font-size: 52px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; margin: 16px 0 }

.exam-start-card { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-lg); padding: 48px; position: relative; overflow: hidden; transition: all .3s var(--ease); box-shadow: var(--shadow-sm) }
.exam-start-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 30% 20%, rgba(37, 99, 235, .04), transparent 60%); pointer-events: none }
.exam-start-card:hover { border-color: #93c5fd; box-shadow: var(--shadow-md) }

@media (max-width: 768px) {
  .exam-bar { padding: 12px 14px; margin-bottom: 20px }
  .exam-timer { font-size: 18px; gap: 6px }
  .exam-timer i { font-size: 16px }
  .exam-progress-text { font-size: 12px }
  .eq-card { padding: 16px; margin-bottom: 14px }
  .eq-text { font-size: 14px }
  .exam-hero { padding: 24px 0 }
  .exam-hero-icon { width: 64px; height: 64px; font-size: 28px; border-radius: 16px; margin-bottom: 16px }
  .exam-hero h2 { font-size: 20px; margin-bottom: 10px }
  .exam-hero p { font-size: 14px; margin-bottom: 20px }
  .exam-tags { gap: 6px; margin-bottom: 20px }
  .exam-tag { padding: 5px 10px; font-size: 11px }
  .result-score { font-size: 40px }
  .exam-start-card { padding: 28px 20px }
}