/* Basic-quiz card styling. Shared by lesson pages (via base.html) and the
   supervisor's single-question preview page, so both style the generated
   quiz block from one source. Extracted from core/_quiz_page_css.html. */
        /* ── Basic Quiz (generated by Edit Basic Quiz) ───────────────────── */
        .quiz-card {
            background: #fff;
            border-radius: 20px;
            padding: 32px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.07);
            max-width: 820px;
            margin: 0 auto 40px;
            font-family: 'Nunito', sans-serif;
        }
        .quiz-progress {
            font-size: 14px;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 16px;
        }
        .quiz-question {
            font-size: calc(24px * var(--content-scale));
            font-weight: 900;
            color: #1e293b;
            margin-bottom: 24px;
        }
        .quiz-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .quiz-option {
            background: #f8fafc;
            border: 2px solid #cbd5e1;
            border-radius: 12px;
            padding: 14px 20px;
            font-size: calc(18px * var(--content-scale));
            font-family: 'Nunito', sans-serif;
            font-weight: 700;
            color: #1e293b;
            cursor: pointer;
            transition: all 0.15s;
            text-align: left;
        }
        /* :not(.picked) so a lingering hover (the mouse sits right where the
           student just clicked) can't outrank .picked's border-color below —
           it would otherwise win on specificity (0,3,0 vs 0,2,0) and make a
           multiSelect toggle look like it didn't take. */
        .quiz-option:hover:not(:disabled):not(.picked) { border-color: #818cf8; background: #eef2ff; }
        .quiz-option.correct { border-color: #22c55e; background: #dcfce7; color: #166534; }
        .quiz-option.wrong   { border-color: #ef4444; background: #fee2e2; color: #991b1b; }
        .quiz-option:disabled { cursor: default; }
        /* "Select all that apply" (multiSelect mc): a toggled-but-not-yet-submitted
           option, distinct from .correct/.wrong which only apply after Submit. */
        .quiz-option.picked  { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
        .quiz-option .qo-check {
            display: inline-block; width: 18px; height: 18px; margin-right: 10px;
            border: 2px solid #94a3b8; border-radius: 5px; vertical-align: -3px;
            transition: all 0.15s;
        }
        .quiz-option.picked .qo-check {
            background: #6366f1; border-color: #6366f1;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.7 3.3a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4L6 9.6l6.3-6.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
            background-size: 12px; background-repeat: no-repeat; background-position: center;
        }
        .quiz-option.correct .qo-check { background: #22c55e; border-color: #22c55e; }
        .quiz-option.wrong .qo-check   { background: #ef4444; border-color: #ef4444; }
        .quiz-feedback {
            margin-top: 20px;
            font-size: 20px;
            font-weight: 700;
            min-height: 30px;
        }
        /* Quiz action buttons (Next / Blur / Reset) — shared base + variants */
        .quiz-btn {
            padding: 14px 32px;
            border: none;
            color: #fff;
            font-family: 'Nunito', sans-serif;
            font-size: 16px;
            font-weight: 900;
            border-radius: 999px;
            cursor: pointer;
        }
        .quiz-btn--next  { background: #818cf8; box-shadow: 0 4px 16px rgba(129,140,248,.4); }
        .quiz-btn--blur  { background: #0891b2; box-shadow: 0 4px 16px rgba(8,145,178,.4); align-self: flex-start; }
        .quiz-btn--reset { background: #64748b; box-shadow: 0 4px 16px rgba(100,116,139,.4); }