<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{TITLE}} — Quiz Preview</title>
{{TOKEN_META}}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --canvas-bg: #f5f5f5;
      --canvas-surface: #ffffff;
      --canvas-text: #2d3b45;
      --canvas-text-secondary: #6a7883;
      --canvas-link: #0374b5;
      --canvas-border: #c7cdd1;
      --correct: #16a34a;
      --correct-bg: #f0fdf4;
      --incorrect: #dc2626;
      --incorrect-bg: #fef2f2;
      --feedback-bg: #f0f7ff;
      --feedback-border: #bfdbfe;
      --tag-bg: #ede9fe;
      --tag-text: #5b21b6;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px; line-height: 1.6;
      color: var(--canvas-text); background: var(--canvas-bg);
      padding: 24px;
    }
    .quiz-container {
      max-width: 980px; margin: 0 auto;
    }
    .quiz-header {
      background: linear-gradient(135deg, #8C1D40 0%, #4A0A24 70%, #2D0618 100%);
      color: white; padding: 24px 32px; border-radius: 8px 8px 0 0;
    }
    .quiz-header h1 { font-size: 1.5em; font-weight: 500; margin-bottom: 4px; }
    .quiz-meta { font-size: 13px; color: #e0d0d6; }
    .quiz-meta span { margin-right: 16px; }
    .quiz-settings {
      background: var(--canvas-surface);
      border: 1px solid var(--canvas-border); border-top: none;
      padding: 12px 32px; font-size: 13px; color: var(--canvas-text-secondary);
      display: flex; gap: 24px; flex-wrap: wrap;
    }
    .quiz-settings span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--canvas-border); margin-right: 6px; vertical-align: middle; }
    .question-card {
      background: var(--canvas-surface);
      border: 1px solid var(--canvas-border); border-radius: 8px;
      margin-top: 16px; overflow: hidden;
    }
    .question-header {
      padding: 16px 24px; border-bottom: 1px solid var(--canvas-border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .question-header h3 { font-size: 14px; font-weight: 500; }
    .question-tags { display: flex; gap: 6px; }
    .tag {
      font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
      text-transform: uppercase; letter-spacing: 0.5px;
    }
    .tag-type { background: #e0f2fe; color: #075985; }
    .tag-blooms { background: var(--tag-bg); color: var(--tag-text); }
    .tag-points { background: #fef3c7; color: #92400e; }
    .question-body { padding: 20px 24px; }
    .question-text { margin-bottom: 16px; }
    .answer-list { list-style: none; padding: 0; }
    .answer-item {
      padding: 10px 14px; margin-bottom: 6px;
      border: 1px solid var(--canvas-border); border-radius: 6px;
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px;
    }
    .answer-item.correct { border-color: var(--correct); background: var(--correct-bg); }
    .answer-item.incorrect { border-color: #e5e7eb; }
    .answer-marker {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; margin-top: 1px;
    }
    .answer-marker.correct { background: var(--correct); color: white; }
    .answer-marker.incorrect { background: #e5e7eb; color: #9ca3af; }
    .answer-content { flex: 1; }
    .answer-comment {
      font-size: 12px; color: var(--canvas-text-secondary);
      margin-top: 4px; font-style: italic;
    }
    .feedback-section {
      margin-top: 16px; padding: 12px 16px; border-radius: 6px;
      font-size: 13px;
    }
    .feedback-correct { background: var(--correct-bg); border: 1px solid #bbf7d0; }
    .feedback-incorrect { background: var(--incorrect-bg); border: 1px solid #fecaca; }
    .feedback-label { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
    .feedback-correct .feedback-label { color: var(--correct); }
    .feedback-incorrect .feedback-label { color: var(--incorrect); }
    .matching-table { width: 100%; border-collapse: collapse; }
    .matching-table th, .matching-table td { padding: 8px 12px; border: 1px solid var(--canvas-border); text-align: left; font-size: 14px; }
    .matching-table th { background: var(--canvas-bg); font-weight: 500; font-size: 12px; text-transform: uppercase; }
    .preview-label {
      text-align: center; color: var(--canvas-text-secondary);
      font-size: 12px; padding: 12px; margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <div class="preview-label">Staging Preview — Quiz</div>
    {{CONTENT}}
  </div>
</body>
</html>
