.qpf-quiz {
	--qpf-accent: #2f7d32;
	--qpf-accent-soft: #e8f3e8;
	--qpf-wrong: #c62828;
	--qpf-wrong-soft: #fdecea;
	--qpf-border: #d9dcd6;
	--qpf-muted: #666;
	max-width: 760px;
	margin: 1.5em auto;
	padding: 1.25em;
	border: 1px solid var(--qpf-border);
	border-radius: 10px;
	background: #fff;
	color: #222;
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;
}
.qpf-quiz *, .qpf-quiz *::before, .qpf-quiz *::after { box-sizing: border-box; }
.qpf-title { margin: 0 0 .5em; }

.qpf-btn {
	display: inline-block;
	padding: .6em 1.2em;
	border: 1px solid var(--qpf-accent);
	border-radius: 6px;
	background: var(--qpf-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.qpf-btn:hover { filter: brightness(1.08); }
.qpf-btn:disabled { opacity: .45; cursor: default; }
.qpf-btn-ghost { background: #fff; color: var(--qpf-accent); }

.qpf-head { display: flex; justify-content: space-between; font-weight: 600; color: var(--qpf-muted); }
.qpf-timer { font-variant-numeric: tabular-nums; }
.qpf-timer-low { color: var(--qpf-wrong); }
.qpf-progress { height: 6px; margin: .5em 0 1em; background: #eee; border-radius: 3px; overflow: hidden; }
.qpf-progress-fill { height: 100%; background: var(--qpf-accent); transition: width .2s; }
.qpf-section { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--qpf-muted); margin-bottom: .3em; }
.qpf-question { font-weight: 600; font-size: 1.08em; margin: 0 0 .8em; }

.qpf-options { display: flex; flex-direction: column; gap: .5em; }
.qpf-option {
	display: flex; gap: .7em; align-items: flex-start;
	width: 100%; padding: .7em .9em;
	border: 1px solid var(--qpf-border); border-radius: 8px;
	background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.qpf-option:hover { border-color: var(--qpf-accent); }
.qpf-option.is-selected { border-color: var(--qpf-accent); background: var(--qpf-accent-soft); }
.qpf-letter {
	flex: 0 0 1.7em; height: 1.7em; line-height: 1.7em; text-align: center;
	border-radius: 50%; background: #eee; font-weight: 700; text-transform: uppercase; font-size: .85em;
}
.qpf-option.is-selected .qpf-letter { background: var(--qpf-accent); color: #fff; }

.qpf-nav { display: flex; gap: .5em; justify-content: flex-end; flex-wrap: wrap; margin-top: 1.2em; }
.qpf-nav .qpf-btn:first-child { margin-right: auto; }

.qpf-map { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1.2em; }
.qpf-dot {
	width: 2.1em; height: 2.1em; padding: 0;
	border: 1px solid var(--qpf-border); border-radius: 4px;
	background: #fff; color: var(--qpf-muted); font: inherit; font-size: .8em; cursor: pointer;
}
.qpf-dot.is-done { background: var(--qpf-accent-soft); border-color: var(--qpf-accent); color: var(--qpf-accent); }
.qpf-dot.is-current { outline: 2px solid var(--qpf-accent); outline-offset: 1px; }

.qpf-result { text-align: center; padding: 1em 0 1.5em; border-bottom: 1px solid var(--qpf-border); margin-bottom: 1em; }
.qpf-score-num { font-size: 3.2em; font-weight: 800; color: var(--qpf-accent); }
.qpf-score-tot { font-size: 1.6em; color: var(--qpf-muted); margin-left: .2em; }
.qpf-score-sub { color: var(--qpf-muted); margin: .2em 0 .8em; }
.qpf-verdict { font-weight: 700; font-size: 1.15em; padding: .5em; border-radius: 6px; }
.qpf-verdict.is-pass { background: var(--qpf-accent-soft); color: var(--qpf-accent); }
.qpf-verdict.is-fail { background: var(--qpf-wrong-soft); color: var(--qpf-wrong); }
.qpf-expired, .qpf-error { color: var(--qpf-wrong); font-weight: 600; }

.qpf-filter { display: block; margin-bottom: .8em; cursor: pointer; }
.qpf-review { padding-left: 1.4em; margin: 0; }
.qpf-review-item { margin-bottom: 1.3em; padding-left: .3em; }
.qpf-review.only-wrong .is-right { display: none; }
.qpf-review-item.is-wrong::marker { color: var(--qpf-wrong); font-weight: 700; }
.qpf-review-item.is-right::marker { color: var(--qpf-accent); font-weight: 700; }
.qpf-review-opt { display: flex; gap: .6em; padding: .35em .6em; border-radius: 6px; margin-bottom: 3px; }
.qpf-review-opt.is-correct { background: var(--qpf-accent-soft); }
.qpf-review-opt.is-correct .qpf-letter { background: var(--qpf-accent); color: #fff; }
.qpf-review-opt.is-chosen-wrong { background: var(--qpf-wrong-soft); text-decoration: line-through; }
.qpf-review-opt.is-chosen-wrong .qpf-letter { background: var(--qpf-wrong); color: #fff; }
.qpf-noanswer { color: var(--qpf-wrong); font-style: italic; font-size: .9em; margin: .2em 0 0; }

@media (max-width: 520px) {
	.qpf-quiz { padding: 1em; }
	.qpf-nav .qpf-btn { flex: 1 1 auto; }
}
