/* Override these on .stwq to match the theme. */
.stwq {
	--stwq-accent: #f26552;
	--stwq-btn-text: #ffffff;
	--stwq-correct: #2e7d4f;
	--stwq-wrong: #b3392f;
	--stwq-border: #d9dde3;
	--stwq-bg: #fff;
	--stwq-muted: #5f6b7a;
	max-width: 760px;
	margin: 0 auto 2rem;
	font: inherit;
	color: inherit;
}
.stwq-issue { margin: 0 0 .25rem; color: var(--stwq-muted); font-size: .95em; }
.stwq-card {
	background: var(--stwq-bg);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 0 15px 1px rgba(201, 201, 201, .4);
	padding: 1.5rem 1.5rem 60px;
	min-height: 450px;
	box-sizing: border-box;
}
.stwq-count { font-size: .85em; font-weight: 600; letter-spacing: .04em; color: var(--stwq-muted); margin-bottom: .5rem; }
.stwq-q { font-size: 1.15em; font-weight: 600; line-height: 1.4; margin: 0 0 1rem; }
.stwq-options { display: grid; gap: .6rem; }
.stwq-opt {
	display: block; width: 100%; text-align: left;
	padding: .85rem 1rem;
	font: inherit; line-height: 1.4; color: inherit;
	background: var(--stwq-bg);
	border: 1.5px solid var(--stwq-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.stwq-opt:hover:not(:disabled), .stwq-opt:focus-visible { border-color: var(--stwq-accent); outline: none; }
.stwq-opt:disabled { cursor: default; }
.stwq-opt.is-correct { border-color: var(--stwq-correct); background: color-mix(in srgb, var(--stwq-correct) 10%, transparent); }
.stwq-opt.is-wrong { border-color: var(--stwq-wrong); background: color-mix(in srgb, var(--stwq-wrong) 10%, transparent); }
.stwq-opt.is-correct::after { content: " ✓"; color: var(--stwq-correct); font-weight: 700; }
.stwq-opt.is-wrong::after { content: " ✗"; color: var(--stwq-wrong); font-weight: 700; }
.stwq-after:empty { display: none; }
.stwq-after { margin-top: 1.1rem; }
.stwq-exp { margin: 0 0 .75rem; padding-left: .9rem; border-left: 3px solid var(--stwq-accent); line-height: 1.55; }
.stwq-next {
	margin-top: .5rem;
	padding: .7rem 1.4rem;
	font: inherit; font-weight: 600;
	color: var(--stwq-btn-text); background: var(--stwq-accent);
	border: 0; border-radius: 8px; cursor: pointer;
}
.stwq-next:hover, .stwq-next:focus-visible { filter: brightness(1.1); }
.stwq-card.stwq-result {
	text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding-bottom: 1.5rem; /* equal top/bottom so the content sits at true center */
}
.stwq-result-label { margin: 0; color: var(--stwq-muted); }
.stwq-result-pct { margin: .25rem 0; font-size: 3em; font-weight: 700; color: var(--stwq-accent); line-height: 1.1; }
.stwq-result-raw, .stwq-avg { margin: .25rem 0; color: var(--stwq-muted); }
@media (max-width: 480px) { .stwq-card { padding: 1.1rem 1.1rem 40px; min-height: 360px; } }

/* Start screen — matches the original quiz's start page */
.stwq-card.stwq-start {
	text-align: center;
	min-height: 450px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 0 15px 1px rgba(201, 201, 201, .4);
	padding: 2rem 1rem;
}
.stwq-start-title { margin: 0; padding: 0 10px; font-size: 20px; font-weight: 400; text-transform: uppercase; line-height: 1.3; }
.stwq-start-btn { padding: 14px 36px; font-size: 18px; font-weight: 700; margin-top: 0; }