/* Chem-Bio Quiz Ladder v2 — player styles.
   Override the custom properties on .cbq-app in your theme to re-brand. */

.cbq-app {
	--cbq-ink: #1c1c1e;
	--cbq-muted: #6b6b70;
	--cbq-surface: #ffffff;
	--cbq-border: #e6e2e8;
	--cbq-accent: #d81b60;
	--cbq-accent-soft: #fdeef4;
	--cbq-correct: #2e7d32;
	--cbq-correct-soft: #eaf6ec;
	--cbq-wrong: #c62828;
	--cbq-wrong-soft: #fdefee;
	--cbq-gold: #d4a017;
	--cbq-silver: #9aa0a6;
	--cbq-bronze: #b0722c;
	--cbq-radius: 14px;
	max-width: 680px;
	margin: 0 auto;
	color: var(--cbq-ink);
	line-height: 1.55;
}

.cbq-busy { opacity: 0.6; pointer-events: none; }
.cbq-loading, .cbq-locked { text-align: center; padding: 2rem; color: var(--cbq-muted); }

.cbq-card {
	position: relative;
	background: var(--cbq-surface);
	border: 1px solid var(--cbq-border);
	border-radius: var(--cbq-radius);
	padding: 28px;
	box-shadow: 0 2px 10px rgba(28, 28, 30, 0.05);
	overflow: hidden;
}

.cbq-eyebrow { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cbq-accent); }
.cbq-title { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.25; }
.cbq-pct { color: var(--cbq-muted); font-weight: 400; font-size: 1.1rem; }
.cbq-sub { margin: 0 0 20px; color: var(--cbq-muted); }
.cbq-back { background: none; border: none; padding: 0; margin: 0 0 14px; color: var(--cbq-muted); cursor: pointer; font-size: 0.85rem; }
.cbq-back:hover { color: var(--cbq-accent); }

/* Topic picker */
.cbq-topics { display: grid; gap: 10px; }
.cbq-topic {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
	width: 100%; text-align: left; padding: 14px 16px;
	background: var(--cbq-surface); border: 1.5px solid var(--cbq-border); border-radius: 12px;
	cursor: pointer; transition: border-color 0.15s ease, transform 0.1s ease;
}
.cbq-topic:hover { border-color: var(--cbq-accent); transform: translateY(-1px); }
.cbq-topic-name { font-weight: 700; font-size: 1rem; }
.cbq-topic-meta { grid-column: 1; font-size: 0.8rem; color: var(--cbq-muted); }
.cbq-fixdot { color: var(--cbq-accent); font-weight: 700; }
.cbq-badge { grid-row: 1 / span 2; font-size: 1.4rem; line-height: 1; }
.cbq-badge-gold { color: var(--cbq-gold); }
.cbq-badge-silver { color: var(--cbq-silver); }
.cbq-badge-bronze { color: var(--cbq-bronze); }
.cbq-badge-none { color: var(--cbq-border); }
.cbq-new-badge { font-weight: 700; margin: 0 0 10px; }
.cbq-new-badge.cbq-badge-gold { color: var(--cbq-gold); }
.cbq-new-badge.cbq-badge-silver { color: var(--cbq-silver); }
.cbq-new-badge.cbq-badge-bronze { color: var(--cbq-bronze); }

/* Topic hub */
.cbq-hub { display: grid; gap: 10px; margin-top: 14px; }
.cbq-hub-btn {
	display: grid; gap: 2px; text-align: left; width: 100%;
	padding: 14px 16px; border: 1.5px solid var(--cbq-border); border-radius: 12px;
	background: var(--cbq-surface); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.cbq-hub-btn:hover { border-color: var(--cbq-accent); background: var(--cbq-accent-soft); }
.cbq-hub-btn strong { font-size: 1rem; }
.cbq-hub-btn span { font-size: 0.82rem; color: var(--cbq-muted); }
.cbq-hub-fixit { border-color: var(--cbq-accent); }

/* Progress + streak + clock */
.cbq-progress { display: block; margin-bottom: 18px; }
.cbq-progress-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cbq-progress-text { font-size: 0.8rem; color: var(--cbq-muted); white-space: nowrap; margin-right: auto; }
.cbq-progress-track { display: block; flex: none; width: 100%; height: 6px; background: var(--cbq-border); border-radius: 3px; overflow: hidden; }
.cbq-progress-fill { display: block; height: 100%; background: var(--cbq-accent); border-radius: 3px; transition: width 0.3s ease; }
.cbq-flame { font-size: 0.85rem; font-weight: 700; animation: cbq-flicker 0.9s ease-in-out infinite alternate; }
@keyframes cbq-flicker { from { transform: scale(1); } to { transform: scale(1.12); } }
.cbq-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.85rem; padding: 2px 8px; border-radius: 999px; background: var(--cbq-border); }
.cbq-clock-low { background: var(--cbq-wrong-soft); color: var(--cbq-wrong); animation: cbq-flicker 0.5s ease-in-out infinite alternate; }
.cbq-timer-toggle { display: block; margin: 0 0 20px; padding: 12px 14px; border: 1.5px dashed var(--cbq-border); border-radius: 10px; font-size: 0.9rem; cursor: pointer; }

/* Meta */
.cbq-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cbq-level-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.cbq-level-1 { background: #eaf6ec; color: #2e7d32; }
.cbq-level-2 { background: #fdf4e3; color: #9a6b00; }
.cbq-level-3 { background: #fdeee8; color: #b4491f; }
.cbq-level-4 { background: var(--cbq-accent-soft); color: var(--cbq-accent); }
.cbq-command { font-size: 0.8rem; font-style: italic; color: var(--cbq-muted); }
.cbq-marks { font-size: 0.75rem; color: var(--cbq-muted); border: 1px solid var(--cbq-border); border-radius: 999px; padding: 2px 8px; }

.cbq-question { font-size: 1.1rem; font-weight: 600; margin-bottom: 18px; }
.cbq-question p { margin: 0 0 0.6em; }

/* Choices */
.cbq-choices { display: grid; gap: 10px; }
.cbq-choice {
	display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
	padding: 12px 14px; background: var(--cbq-surface);
	border: 1.5px solid var(--cbq-border); border-radius: 10px; cursor: pointer;
	font-size: 0.97rem; color: var(--cbq-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.cbq-choice:hover:not(:disabled) { border-color: var(--cbq-accent); background: var(--cbq-accent-soft); }
.cbq-choice:focus-visible { outline: 3px solid var(--cbq-accent-soft); outline-offset: 1px; border-color: var(--cbq-accent); }
.cbq-choice:disabled { cursor: default; }
.cbq-choice-letter {
	flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--cbq-border); font-weight: 700; font-size: 0.8rem;
}
.cbq-choice.cbq-correct { border-color: var(--cbq-correct); background: var(--cbq-correct-soft); }
.cbq-choice.cbq-correct .cbq-choice-letter { background: var(--cbq-correct); color: #fff; }
.cbq-choice.cbq-wrong { border-color: var(--cbq-wrong); background: var(--cbq-wrong-soft); animation: cbq-shake 0.3s ease; }
.cbq-choice.cbq-wrong .cbq-choice-letter { background: var(--cbq-wrong); color: #fff; }
@keyframes cbq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Fill-blank */
.cbq-fill { display: flex; gap: 10px; flex-wrap: wrap; }
.cbq-input { flex: 1; min-width: 200px; padding: 11px 14px; border: 1.5px solid var(--cbq-border); border-radius: 10px; font-size: 1rem; }
.cbq-input:focus { outline: none; border-color: var(--cbq-accent); box-shadow: 0 0 0 3px var(--cbq-accent-soft); }
.cbq-input.cbq-correct { border-color: var(--cbq-correct); background: var(--cbq-correct-soft); }
.cbq-input.cbq-wrong { border-color: var(--cbq-wrong); background: var(--cbq-wrong-soft); }

/* Feedback */
.cbq-feedback { margin-top: 18px; padding: 16px 18px; border-radius: 10px; }
.cbq-fb-correct { background: var(--cbq-correct-soft); border-left: 4px solid var(--cbq-correct); }
.cbq-fb-wrong { background: var(--cbq-wrong-soft); border-left: 4px solid var(--cbq-wrong); }
.cbq-fb-heading { margin: 0 0 6px; font-weight: 700; font-size: 0.9rem; }
.cbq-fb-correct .cbq-fb-heading { color: var(--cbq-correct); }
.cbq-fb-wrong .cbq-fb-heading { color: var(--cbq-wrong); }
.cbq-correct-answer { margin: 0 0 6px; font-size: 0.92rem; }
.cbq-explanation { font-size: 0.95rem; }
.cbq-explanation p { margin: 0 0 0.5em; }

/* Mascot */
.cbq-mascot { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.cbq-mascot-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--cbq-surface); box-shadow: 0 1px 6px rgba(28,28,30,0.18); }
.cbq-mascot-bubble {
	position: relative; background: var(--cbq-surface); border: 1.5px solid var(--cbq-border);
	border-radius: 14px; padding: 8px 14px; font-size: 0.9rem; font-weight: 600;
}
.cbq-mascot-bubble::before {
	content: ''; position: absolute; left: -7px; top: 50%; margin-top: -6px;
	border: 6px solid transparent; border-right-color: var(--cbq-border); border-left: 0;
}

/* Flashcards */
.cbq-flash { perspective: 1200px; cursor: pointer; margin: 6px 0 18px; outline-offset: 4px; }
.cbq-flash-inner { position: relative; width: 100%; min-height: 220px; transition: transform 0.5s ease; transform-style: preserve-3d; }
.cbq-flipped .cbq-flash-inner { transform: rotateY(180deg); }
.cbq-flash-face {
	position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	padding: 24px; border-radius: 14px; border: 1.5px solid var(--cbq-border); overflow: auto;
}
.cbq-flash-front { background: var(--cbq-accent-soft); font-size: 1.3rem; font-weight: 700; }
.cbq-flash-back { background: var(--cbq-surface); transform: rotateY(180deg); font-size: 0.98rem; text-align: left; justify-content: flex-start; }
.cbq-flip-hint { margin-top: 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cbq-muted); }
.cbq-flash-nav { display: flex; justify-content: space-between; gap: 12px; }

/* Cheat sheet */
.cbq-cheatsheet h3 { margin: 1.2em 0 0.4em; color: var(--cbq-accent); }
.cbq-cheatsheet h4 { margin: 1em 0 0.3em; }
.cbq-cheatsheet table { width: 100%; border-collapse: collapse; margin: 0.6em 0; font-size: 0.9rem; }
.cbq-cheatsheet th, .cbq-cheatsheet td { border: 1px solid var(--cbq-border); padding: 6px 10px; text-align: left; }
.cbq-cheatsheet th { background: var(--cbq-accent-soft); }

/* Results */
.cbq-results { display: grid; gap: 12px; margin: 6px 0 20px; }
.cbq-result-row { display: grid; grid-template-columns: 90px 1fr 48px; gap: 12px; align-items: center; font-size: 0.88rem; }
.cbq-result-label { color: var(--cbq-muted); }
.cbq-bar { height: 10px; background: var(--cbq-border); border-radius: 5px; overflow: hidden; }
.cbq-bar-fill { display: block; height: 100%; border-radius: 5px; transition: width 0.6s ease; }
.cbq-level-bg-1 { background: #9ad0a5; }
.cbq-level-bg-2 { background: #f0c46a; }
.cbq-level-bg-3 { background: #ef8f6e; }
.cbq-level-bg-4 { background: var(--cbq-accent); }
.cbq-result-score { text-align: right; font-weight: 700; }
.cbq-revise-reco { margin: 0 0 20px; padding: 14px 16px; border-radius: 10px; background: var(--cbq-accent-soft); border-left: 4px solid var(--cbq-accent); font-size: 0.92rem; }
.cbq-revise-reco .cbq-fb-heading { color: var(--cbq-accent); }
.cbq-revise-reco ul { margin: 6px 0 0 18px; padding: 0; }
.cbq-missed-n { color: var(--cbq-muted); font-size: 0.82rem; }
.cbq-all-clear { background: var(--cbq-correct-soft); border-left-color: var(--cbq-correct); }
.cbq-end-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cbq-error p { color: var(--cbq-wrong); margin: 0 0 8px; }

/* Buttons */
.cbq-btn {
	display: inline-block; padding: 11px 22px; border-radius: 999px; border: 1.5px solid transparent;
	font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none;
	transition: transform 0.1s ease, background 0.15s ease;
}
.cbq-btn:active { transform: scale(0.98); }
.cbq-btn:disabled { opacity: 0.4; cursor: default; }
.cbq-btn-primary { background: var(--cbq-accent); color: #fff; }
.cbq-btn-primary:hover { background: #b8114f; color: #fff; }
.cbq-btn-secondary { background: transparent; color: var(--cbq-accent); border-color: var(--cbq-accent); }
.cbq-btn-secondary:hover { background: var(--cbq-accent-soft); }
.cbq-nav { margin-top: 18px; text-align: right; }

/* Animations */
.cbq-slide-in { animation: cbq-slide 0.25s ease; }
@keyframes cbq-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cbq-pop { animation: cbq-pop 0.22s ease; }
@keyframes cbq-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Confetti */
.cbq-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cbq-confetti-piece {
	position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
	animation-name: cbq-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes cbq-fall {
	0% { transform: translateY(0) rotate(0deg); opacity: 1; }
	100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

@media (max-width: 520px) {
	.cbq-card { padding: 20px 16px; }
	.cbq-result-row { grid-template-columns: 70px 1fr 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.cbq-progress-fill, .cbq-bar-fill, .cbq-btn, .cbq-flash-inner { transition: none; }
	.cbq-slide-in, .cbq-pop, .cbq-flame, .cbq-clock-low, .cbq-choice.cbq-wrong { animation: none; }
}

@media print {
	.cbq-back, .cbq-end-actions, .cbq-eyebrow { display: none; }
	.cbq-card { border: none; box-shadow: none; }
}

/* ===== Learning path (Duolingo-style topic picker) ===== */
.cbq-path { position: relative; padding: 10px 0 6px; }
.cbq-path::before {
	content: ''; position: absolute; left: 50%; top: 20px; bottom: 20px;
	border-left: 3px dashed var(--cbq-border); transform: translateX(-50%);
}
.cbq-node-row {
	position: relative; display: flex; align-items: center; gap: 14px;
	width: fit-content; max-width: 100%; margin: 22px auto;
}
.cbq-side-left  { transform: translateX(-56px); }
.cbq-side-right { transform: translateX(56px); flex-direction: row-reverse; text-align: right; }
.cbq-node {
	position: relative; flex: 0 0 auto; width: 64px; height: 64px;
	border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%;
	transition: transform 0.15s ease;
}
.cbq-node:hover { transform: scale(1.08); }
.cbq-node:focus-visible { outline: 3px solid var(--cbq-accent-soft); outline-offset: 3px; }
.cbq-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.cbq-ring-bg   { fill: var(--cbq-surface); stroke: var(--cbq-border); stroke-width: 6; }
.cbq-ring-fill { fill: none; stroke: var(--cbq-accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
.cbq-node-gold   .cbq-ring-fill { stroke: var(--cbq-gold); }
.cbq-node-silver .cbq-ring-fill { stroke: var(--cbq-silver); }
.cbq-node-bronze .cbq-ring-fill { stroke: var(--cbq-bronze); }
.cbq-node-core {
	position: absolute; inset: 10px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--cbq-accent-soft); color: var(--cbq-accent);
	font-weight: 800; font-size: 1rem;
}
.cbq-node-gold   .cbq-node-core { background: #fdf4dd; color: var(--cbq-gold); font-size: 1.3rem; }
.cbq-node-silver .cbq-node-core { background: #f1f3f4; color: var(--cbq-silver); }
.cbq-node-bronze .cbq-node-core { background: #f7ebdd; color: var(--cbq-bronze); }
.cbq-node-current .cbq-node::after {
	content: ''; position: absolute; inset: -6px; border-radius: 50%;
	border: 2px solid var(--cbq-accent); opacity: 0.5;
	animation: cbq-pulse 1.6s ease-out infinite;
}
@keyframes cbq-pulse { 0% { transform: scale(0.9); opacity: 0.6; } 100% { transform: scale(1.15); opacity: 0; } }
.cbq-node-info { display: grid; gap: 2px; min-width: 0; }
.cbq-node-info .cbq-topic-name { font-weight: 700; font-size: 0.95rem; }
.cbq-node-info .cbq-topic-meta { font-size: 0.78rem; color: var(--cbq-muted); }
.cbq-path-avatar {
	position: absolute; top: -14px; width: 44px; height: 44px; border-radius: 50%;
	object-fit: cover; border: 2px solid var(--cbq-surface);
	box-shadow: 0 2px 8px rgba(28,28,30,0.25); z-index: 2;
	animation: cbq-bob 1.4s ease-in-out infinite alternate;
}
.cbq-side-left  .cbq-path-avatar { right: -50px; }
.cbq-side-right .cbq-path-avatar { left: -50px; }
@keyframes cbq-bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }

/* Avatar riding the quiz progress bar */
.cbq-progress-track { position: relative; overflow: visible; }
.cbq-progress-fill  { border-radius: 3px; }
.cbq-track-avatar {
	position: absolute; top: 50%; transform: translate(-50%, -50%);
	width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
	border: 2px solid var(--cbq-surface); box-shadow: 0 1px 5px rgba(28,28,30,0.3);
	transition: left 0.4s ease; z-index: 1;
}

@media (max-width: 520px) {
	.cbq-side-left  { transform: translateX(-26px); }
	.cbq-side-right { transform: translateX(26px); }
	.cbq-node-info .cbq-topic-name { font-size: 0.88rem; }
	.cbq-side-left  .cbq-path-avatar { right: -42px; }
	.cbq-side-right .cbq-path-avatar { left: -42px; }
}

@media (prefers-reduced-motion: reduce) {
	.cbq-node-current .cbq-node::after, .cbq-path-avatar { animation: none; }
	.cbq-ring-fill, .cbq-track-avatar { transition: none; }
}

/* ===== Ordering & matching question types ===== */
.cbq-howto { font-size: 0.85rem; color: var(--cbq-muted); margin: 0 0 12px; }

.cbq-order { display: grid; gap: 10px; margin-bottom: 14px; }
.cbq-order-item {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
	padding: 12px 14px; border: 1.5px solid var(--cbq-border); border-radius: 10px;
	background: var(--cbq-surface); cursor: pointer; font-size: 0.97rem; color: var(--cbq-ink);
	transition: border-color 0.15s ease, background 0.15s ease;
}
.cbq-order-item:hover:not(:disabled) { border-color: var(--cbq-accent); background: var(--cbq-accent-soft); }
.cbq-order-item:disabled { cursor: default; }
.cbq-order-pos {
	flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--cbq-border); font-weight: 700; font-size: 0.8rem; color: var(--cbq-ink);
}
.cbq-order-item.cbq-picked { border-color: var(--cbq-accent); background: var(--cbq-accent-soft); }
.cbq-order-item.cbq-picked .cbq-order-pos { background: var(--cbq-accent); color: #fff; }
.cbq-order-item.cbq-correct { border-color: var(--cbq-correct); background: var(--cbq-correct-soft); }
.cbq-order-item.cbq-correct .cbq-order-pos { background: var(--cbq-correct); color: #fff; }
.cbq-order-item.cbq-wrong { border-color: var(--cbq-wrong); background: var(--cbq-wrong-soft); }
.cbq-order-item.cbq-wrong .cbq-order-pos { background: var(--cbq-wrong); color: #fff; }

.cbq-match { display: grid; gap: 10px; margin-bottom: 14px; }
.cbq-match-row {
	display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
	padding: 10px 14px; border: 1.5px solid var(--cbq-border); border-radius: 10px;
}
.cbq-match-left { font-weight: 600; font-size: 0.95rem; }
.cbq-match-select { padding: 8px 10px; border: 1.5px solid var(--cbq-border); border-radius: 8px; font-size: 0.9rem; max-width: 55%; }
.cbq-match-select:focus { outline: none; border-color: var(--cbq-accent); box-shadow: 0 0 0 3px var(--cbq-accent-soft); }
.cbq-match-row.cbq-correct { border-color: var(--cbq-correct); background: var(--cbq-correct-soft); }
.cbq-match-row.cbq-wrong { border-color: var(--cbq-wrong); background: var(--cbq-wrong-soft); }
.cbq-correct-answer ol, .cbq-correct-answer ul { margin: 6px 0 0 18px; padding: 0; }

/* Copy-topic-link button on the hub */
.cbq-copy-link {
	margin-top: 14px; background: none; border: none; padding: 6px 0; cursor: pointer;
	color: var(--cbq-muted); font-size: 0.85rem; font-weight: 600;
}
.cbq-copy-link:hover { color: var(--cbq-accent); }

/* ===== Multiple-response (select all) ===== */
.cbq-choice-multi { align-items: center; }
.cbq-check-box {
	flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
	border: 2px solid var(--cbq-border); background: var(--cbq-surface);
	position: relative; transition: border-color 0.15s ease, background 0.15s ease;
}
.cbq-choice-multi.cbq-picked .cbq-check-box { border-color: var(--cbq-accent); background: var(--cbq-accent); }
.cbq-choice-multi.cbq-picked .cbq-check-box::after {
	content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cbq-choice-multi.cbq-correct .cbq-check-box { border-color: var(--cbq-correct); background: var(--cbq-correct); }
.cbq-choice-multi.cbq-correct .cbq-check-box::after {
	content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cbq-choice-multi.cbq-wrong .cbq-check-box { border-color: var(--cbq-wrong); background: var(--cbq-wrong); }
.cbq-choice-multi.cbq-wrong .cbq-check-box::after {
	content: '\00d7'; position: absolute; left: 4px; top: -3px; color: #fff; font-size: 16px; font-weight: 700;
}
.cbq-choice-multi.cbq-missed { border-style: dashed; border-color: var(--cbq-correct); }
.cbq-choice-multi.cbq-missed .cbq-check-box { border-color: var(--cbq-correct); }

/* ===== Personalised revision plan (spec points + notes extracts) ===== */
.cbq-revise-item { margin: 10px 0 0; padding: 10px 12px; background: var(--cbq-surface); border: 1px solid var(--cbq-border); border-radius: 10px; }
.cbq-revise-item summary { cursor: pointer; font-weight: 600; list-style: none; }
.cbq-revise-item summary::-webkit-details-marker { display: none; }
.cbq-revise-item summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; transition: transform 0.15s ease; color: var(--cbq-accent); }
.cbq-revise-item[open] summary::before { transform: rotate(90deg); }
.cbq-revise-head { color: var(--cbq-accent); }
.cbq-revise-spec { margin: 10px 0 4px; font-size: 0.9rem; }
.cbq-revise-item ul { margin: 4px 0 8px 20px; font-size: 0.9rem; }
.cbq-revise-note { margin: 6px 0; padding: 10px 12px; background: var(--cbq-accent-soft); border-radius: 8px; font-size: 0.9rem; }
.cbq-revise-note p { margin: 0 0 0.4em; }
.cbq-revise-note :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .cbq-revise-item summary::before { transition: none; } }

/* ===== Mascot mood micro-animations ===== */
.cbq-m-bounce { animation: cbq-m-bounce 0.6s ease; }
@keyframes cbq-m-bounce {
	0% { transform: translateY(0) scale(1); }
	30% { transform: translateY(-8px) scale(1.05); }
	55% { transform: translateY(0) scale(1); }
	70% { transform: translateY(-4px) scale(1.02); }
	100% { transform: translateY(0) scale(1); }
}
.cbq-m-cheer { animation: cbq-m-cheer 0.7s ease; }
@keyframes cbq-m-cheer {
	0% { transform: rotate(0) scale(1); }
	20% { transform: rotate(-6deg) scale(1.08); }
	45% { transform: rotate(6deg) scale(1.1); }
	70% { transform: rotate(-4deg) scale(1.05); }
	100% { transform: rotate(0) scale(1); }
}
.cbq-m-wobble { animation: cbq-m-wobble 0.6s ease; }
@keyframes cbq-m-wobble {
	0%,100% { transform: rotate(0); }
	25% { transform: rotate(-4deg); }
	75% { transform: rotate(4deg); }
}

/* ===== Streak banner ===== */
.cbq-streak-banner {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 10px; padding: 6px 14px; border-radius: 999px;
	background: linear-gradient(135deg, #fff0e0, #ffe0ec);
	border: 1.5px solid #f5b8c8; font-weight: 700; font-size: 0.9rem;
	animation: cbq-pop 0.3s ease;
}
.cbq-streak-fire { font-size: 1.1rem; animation: cbq-flicker 0.9s ease-in-out infinite alternate; display: inline-block; }
.cbq-streak-count { color: var(--cbq-accent); }
.cbq-streak-milestone {
	background: linear-gradient(135deg, #ffe9b0, #ffd0e0);
	animation: cbq-streak-burst 0.6s ease;
}
@keyframes cbq-streak-burst {
	0% { transform: scale(0.8); }
	40% { transform: scale(1.15); }
	70% { transform: scale(0.95); }
	100% { transform: scale(1); }
}
.cbq-streak-milestone .cbq-streak-fire { animation: cbq-m-cheer 0.7s ease; }

@media (prefers-reduced-motion: reduce) {
	.cbq-m-bounce, .cbq-m-cheer, .cbq-m-wobble, .cbq-streak-fire, .cbq-streak-milestone { animation: none; }
}

/* ===== Peek at notes (mid-quiz) ===== */
.cbq-peek-btn {
	margin-left: auto; padding: 4px 12px; border-radius: 999px;
	border: 1.5px solid var(--cbq-border); background: var(--cbq-surface);
	font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--cbq-accent);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.cbq-peek-btn:hover { background: var(--cbq-accent-soft); border-color: var(--cbq-accent); }
.cbq-peek-overlay {
	position: fixed; inset: 0; z-index: 9999; display: flex; justify-content: flex-end;
	background: rgba(28,28,30,0); transition: background 0.25s ease;
}
.cbq-peek-overlay.cbq-peek-open { background: rgba(28,28,30,0.4); }
.cbq-peek-panel {
	width: min(440px, 90vw); height: 100%; background: var(--cbq-surface);
	box-shadow: -4px 0 24px rgba(28,28,30,0.2); display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform 0.25s ease;
}
.cbq-peek-open .cbq-peek-panel { transform: translateX(0); }
.cbq-peek-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px; border-bottom: 1px solid var(--cbq-border); flex: 0 0 auto;
}
.cbq-peek-close { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--cbq-muted); line-height: 1; }
.cbq-peek-close:hover { color: var(--cbq-ink); }
.cbq-peek-body { padding: 18px; overflow-y: auto; flex: 1; font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) {
	.cbq-peek-overlay, .cbq-peek-panel { transition: none; }
}

/* ===== Dropdown subject page ===== */
.cbq-dropdown-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cbq-dropdown {
	flex: 1; min-width: 220px; padding: 11px 14px; font-size: 1rem;
	border: 1.5px solid var(--cbq-border); border-radius: 10px; background: var(--cbq-surface); color: var(--cbq-ink);
}
.cbq-dropdown:focus { outline: none; border-color: var(--cbq-accent); box-shadow: 0 0 0 3px var(--cbq-accent-soft); }

/* ---- Copy-link share (topic hub) + wrong-answer redemption ---- */
.cbq-hub-share { margin: 0 0 14px; }
.cbq-hub-share .cbq-copy-link { font-size: 13px; padding: 6px 12px; }
.cbq-redeem-note {
	margin: 14px 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fbe7f0;
	color: #8a1145;
	font-weight: 600;
}
.cbq-redeem { animation: cbq-pop 0.25s ease; }