:root {
	--lqod-ink: #152536;
	--lqod-muted: #5b6977;
	--lqod-border: #d8e0e7;
	--lqod-surface: #ffffff;
	--lqod-bg: #f4f7fa;
	--lqod-primary: #17324d;
	--lqod-primary-hover: #0c2238;
	--lqod-correct: #17643a;
	--lqod-correct-bg: #eaf7ef;
	--lqod-incorrect: #9e2f2f;
	--lqod-incorrect-bg: #fff0f0;
}

.lqod-app,
.lqod-history {
	box-sizing: border-box;
	width: min(100%, 44rem);
	margin: 1.25rem auto;
	padding: clamp(1.1rem, 4vw, 2rem);
	color: var(--lqod-ink);
	background: var(--lqod-surface);
	border: 1px solid var(--lqod-border);
	border-radius: 1rem;
	box-shadow: 0 0.65rem 2rem rgba(21, 37, 54, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.55;
}

.lqod-app *,
.lqod-history * {
	box-sizing: border-box;
}

.lqod-app .screen-reader-text,
.lqod-history .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lqod-header {
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--lqod-border);
}

.lqod-kicker {
	margin: 0 0 0.25rem;
	color: var(--lqod-primary);
	font-size: 0.8rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lqod-app h2,
.lqod-history h2 {
	margin: 0;
	font-size: clamp(1.45rem, 6vw, 2rem);
	line-height: 1.2;
}

.lqod-question {
	margin: 1.4rem 0;
	font-size: clamp(1.08rem, 4vw, 1.3rem);
	font-weight: 600;
}

.lqod-question > :first-child,
.lqod-explanation > :first-child,
.lqod-history-question > :first-child { margin-top: 0; }
.lqod-question > :last-child,
.lqod-explanation > :last-child,
.lqod-history-question > :last-child { margin-bottom: 0; }

.lqod-answer-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.lqod-option {
	display: flex;
	position: relative;
	align-items: center;
	gap: 0.8rem;
	min-height: 3.5rem;
	margin: 0.7rem 0;
	padding: 0.8rem;
	cursor: pointer;
	background: var(--lqod-surface);
	border: 2px solid var(--lqod-border);
	border-radius: 0.75rem;
	transition: border-color 120ms ease, background-color 120ms ease;
}

.lqod-option:hover { border-color: #8899a8; }
.lqod-option:focus-within { outline: 3px solid rgba(23, 50, 77, 0.25); outline-offset: 2px; }
.lqod-option input { position: absolute; opacity: 0; pointer-events: none; }
.lqod-option:has(input:checked),
.lqod-option.is-selected { border-color: var(--lqod-primary); background: #edf3f8; }

.lqod-option-letter {
	display: grid;
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	place-items: center;
	color: var(--lqod-primary);
	background: #e8eef3;
	border-radius: 50%;
	font-weight: 800;
}

.lqod-option-text { flex: 1; font-weight: 600; }
.lqod-option.is-locked { cursor: default; }
.lqod-option.is-answer-correct { border-color: var(--lqod-correct); background: var(--lqod-correct-bg); }
.lqod-option.is-answer-correct .lqod-option-letter { color: white; background: var(--lqod-correct); }
.lqod-choice-note { color: var(--lqod-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }

.lqod-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.25rem;
	margin-top: 1rem;
	padding: 0.75rem 1.25rem;
	cursor: pointer;
	color: #fff !important;
	background: var(--lqod-primary);
	border: 0;
	border-radius: 0.7rem;
	font: inherit;
	font-weight: 750;
	text-decoration: none !important;
}

.lqod-submit:hover { background: var(--lqod-primary-hover); }
.lqod-submit:focus-visible { outline: 3px solid rgba(23, 50, 77, 0.35); outline-offset: 3px; }
.lqod-submit:disabled { cursor: wait; opacity: 0.7; }
.lqod-form-message { min-height: 1.5rem; color: var(--lqod-incorrect); font-weight: 650; }
.lqod-login-note { color: var(--lqod-muted); }
.lqod-guest-intro,
.lqod-guest-cta {
	margin: 1rem 0;
	padding: 1rem;
	color: var(--lqod-ink);
	background: #f2f6fa;
	border: 1px solid var(--lqod-border);
	border-radius: 0.75rem;
}
.lqod-guest-intro p,
.lqod-guest-cta p { margin: 0.35rem 0; }
.lqod-guest-intro a,
.lqod-guest-cta a:not(.lqod-submit) { color: var(--lqod-primary); font-weight: 700; }
.lqod-reward-banner {
	margin: 1rem 0;
	padding: 0.8rem 1rem;
	color: #5a3b00;
	background: #fff7df;
	border: 1px solid #e8c66c;
	border-radius: 0.7rem;
	font-weight: 700;
}
.lqod-reward-reminder { color: #5a3b00; font-weight: 700; }

.lqod-result-card,
.lqod-score-card {
	margin-top: 1.25rem;
	padding: 1.1rem;
	border-radius: 0.75rem;
}

.lqod-result-card { border-left: 0.35rem solid; }
.lqod-result-card.is-correct { color: var(--lqod-correct); background: var(--lqod-correct-bg); border-color: var(--lqod-correct); }
.lqod-result-card.is-incorrect { color: var(--lqod-incorrect); background: var(--lqod-incorrect-bg); border-color: var(--lqod-incorrect); }
.lqod-result-card h3 { margin: 0 0 0.7rem; font-size: 1.35rem; }
.lqod-result-card h4 { margin: 1rem 0 0.35rem; color: var(--lqod-ink); }
.lqod-explanation { color: var(--lqod-ink); }
.lqod-score-card { background: var(--lqod-bg); }
.lqod-score-card p { margin: 0.25rem 0; }
.lqod-score-card p:first-child { font-size: 1.1rem; font-weight: 800; }

.lqod-history-list { display: grid; gap: 0.9rem; margin-top: 1.25rem; }
.lqod-history-item { padding: 1rem; border: 1px solid var(--lqod-border); border-radius: 0.75rem; }
.lqod-history-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.lqod-history-summary time { display: block; font-weight: 750; }
.lqod-history-summary span { display: block; color: var(--lqod-muted); font-size: 0.9rem; }
.lqod-history-summary .is-correct { color: var(--lqod-correct); }
.lqod-history-summary .is-incorrect { color: var(--lqod-incorrect); }
.lqod-history details { margin-top: 0.8rem; }
.lqod-history summary { cursor: pointer; color: var(--lqod-primary); font-weight: 700; }
.lqod-history details[open] summary { margin-bottom: 1rem; }
.lqod-history-options { margin: 0.75rem 0 1.25rem; padding: 0; list-style: none; }
.lqod-history-markers { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.lqod-history-marker { color: var(--lqod-primary); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; text-align: right; text-transform: uppercase; }
.lqod-history-marker.is-correct-marker { color: var(--lqod-correct); }

@media (max-width: 30rem) {
	.lqod-app,
	.lqod-history { margin: 0.5rem auto; border-radius: 0.7rem; }
	.lqod-history-summary { display: block; }
	.lqod-history-summary strong { display: inline-block; margin-top: 0.5rem; }
	.lqod-choice-note { display: none; }
	.lqod-history .lqod-option { align-items: flex-start; }
	.lqod-history-markers { width: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.lqod-option { transition: none; }
}