body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: #f6f8fa; color: #1f2937; }
.container { max-width: 900px; margin: 0 auto; background: #ffffff; padding: 24px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.btn { background: #2563eb; color: white; padding: 10px 14px; text-decoration: none; border-radius: 6px; border: none; cursor: pointer; display: inline-block; }
.exam-card { border: 1px solid #e5e7eb; padding: 16px; margin-bottom: 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; background: #f9fafb; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.question-box { background: #f9fafb; padding: 16px; margin-bottom: 16px; border: 1px solid #e5e7eb; border-radius: 8px; }
.question-img { max-width: 100%; max-height: 320px; margin: 8px 0; display: block; border-radius: 6px; }
.options label { display: block; margin: 6px 0; cursor: pointer; }
.footer { margin-top: 40px; text-align: center; color: #6b7280; font-size: 12px; }
.timer { position: fixed; top: 10px; right: 10px; background: #dc2626; color: white; padding: 10px; font-weight: 600; border-radius: 8px; z-index: 1000; }

@media (max-width: 768px) {
  .container { padding: 16px; border-radius: 8px; }
  .exam-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 480px) {
  .container { padding: 12px; }
  .btn { padding: 8px 12px; font-size: 14px; }
  .question-box { padding: 12px; }
  .timer { top: auto; right: 10px; bottom: 10px; }
}
