@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

/* Same scoping approach as lecture-viewer.css: everything hangs off the
   #lv-quiz-app id with !important so theme/page-builder defaults for
   button/select/input never leak in. */

#lv-quiz-app {
	--lvq-bg: #10151b;
	--lvq-bg-raised: #171e26;
	--lvq-line: #262f3a;
	--lvq-paper: #f6f3ea;
	--lvq-text: #e7ecef;
	--lvq-text-dim: #8b96a3;
	--lvq-accent: #34d399;
	--lvq-accent-dim: #1f7a5c;
	--lvq-warn: #d99a4e;
	--lvq-bad: #e0645a;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	background: var(--lvq-bg) !important;
	color: var(--lvq-text) !important;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important;
	max-width: 100%;
	line-height: normal;
}

#lv-quiz-app *, #lv-quiz-app *::before, #lv-quiz-app *::after {
	box-sizing: border-box !important;
	text-transform: none !important;
	letter-spacing: normal;
}

/* ---------- Light theme override ---------- */
/* Same variable names, different values — every rule above already reads
   colors off these custom properties, so flipping this one block re-skins
   the whole app without touching a single other rule. */
#lv-quiz-app.lv-theme-light {
	--lvq-bg: #f7f8fa;
	--lvq-bg-raised: #ffffff;
	--lvq-line: #e1e5ea;
	--lvq-text: #1c232c;
	--lvq-text-dim: #647084;
	--lvq-accent: #0f9d68;
	--lvq-accent-dim: #bfe9d7;
	--lvq-warn: #b3722a;
	--lvq-bad: #c94a3f;
	box-shadow: 0 10px 30px rgba(20,30,45,0.10) !important;
}
#lv-quiz-app.lv-theme-light .lvq-answer-correct { background: rgba(15,157,104,0.10) !important; }
#lv-quiz-app.lv-theme-light .lvq-answer-wrong { background: rgba(201,74,63,0.08) !important; }
#lv-quiz-app.lv-theme-light .lvq-feedback-correct { background: rgba(15,157,104,0.10) !important; }
#lv-quiz-app.lv-theme-light .lvq-feedback-wrong { background: rgba(201,74,63,0.08) !important; }
#lv-quiz-app.lv-theme-light .lvq-crumb { background: rgba(15,157,104,0.08) !important; }
#lv-quiz-app.lv-theme-light .lvq-btn-primary { color: #ffffff !important; }
#lv-quiz-app.lv-theme-light .lvq-btn-primary:hover:not(:disabled) { background: #0c7f55 !important; color: #ffffff !important; }

/* ---------- Theme toggle switch ---------- */

#lv-quiz-app .lvq-theme-toggle {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	margin-left: auto;
	border-radius: 8px !important;
	border: 1px solid var(--lvq-line) !important;
	background: var(--lvq-bg) !important;
	color: var(--lvq-text) !important;
	cursor: pointer;
	font-size: 16px !important;
	line-height: 1 !important;
	flex-shrink: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
}
#lv-quiz-app .lvq-theme-toggle:hover { border-color: var(--lvq-accent-dim) !important; }
#lv-quiz-app .lvq-theme-toggle .lvq-theme-icon-dark { display: inline; }
#lv-quiz-app .lvq-theme-toggle .lvq-theme-icon-light { display: none; }
#lv-quiz-app.lv-theme-light .lvq-theme-toggle .lvq-theme-icon-dark { display: none; }
#lv-quiz-app.lv-theme-light .lvq-theme-toggle .lvq-theme-icon-light { display: inline; }

.lvq-app-error {
	padding: 16px 20px;
	border-radius: 8px;
	background: rgba(217, 154, 78, 0.12);
	color: #a8632a;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	border: 1px solid rgba(217, 154, 78, 0.4);
}

#lv-quiz-app .lvq-locked {
	background: var(--lvq-bg-raised) !important;
	color: #e7ecef !important;
	padding: 30px !important;
	border-radius: 10px !important;
	text-align: center;
}
#lv-quiz-app .lvq-locked a { color: var(--lvq-accent) !important; }

/* ---------- Member greeting bar ---------- */

#lv-quiz-app .lv-member-bar {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 14px 24px !important;
	background: linear-gradient(90deg, rgba(52, 211, 153, 0.07), rgba(52, 211, 153, 0)) !important;
	border-bottom: 1px solid var(--lvq-line) !important;
}

#lv-quiz-app .lv-member-avatar-wrap {
	position: relative;
	flex-shrink: 0;
	line-height: 0;
}

#lv-quiz-app .lv-member-avatar {
	border-radius: 50% !important;
	display: block !important;
	border: 2px solid var(--lvq-line) !important;
}

#lv-quiz-app .lv-member-dot {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--lvq-text-dim);
	border: 2px solid var(--lvq-bg-raised);
}

#lv-quiz-app .lv-member-dot-online {
	background: var(--lvq-accent);
	box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}

#lv-quiz-app .lv-member-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

#lv-quiz-app .lv-member-name {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--lvq-text) !important;
}

#lv-quiz-app .lv-member-meta {
	font-size: 12.5px !important;
	color: var(--lvq-text-dim) !important;
	font-weight: 400 !important;
}

#lv-quiz-app .lv-member-sep {
	margin: 0 6px;
	opacity: 0.6;
}

/* ---------- Toolbar / picker ---------- */

#lv-quiz-app .lvq-toolbar {
	background: var(--lvq-bg-raised) !important;
	padding: 22px 24px !important;
	display: flex !important;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--lvq-line) !important;
	margin: 0 !important;
}
#lv-quiz-app .lvq-toolbar[hidden] { display: none !important; }

#lv-quiz-app .lvq-crumb {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 11px 16px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	border: 1px solid var(--lvq-accent-dim) !important;
	background: rgba(52, 211, 153, 0.08) !important;
	color: var(--lvq-accent) !important;
}
#lv-quiz-app .lvq-crumb::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lvq-accent);
	flex-shrink: 0;
}

#lv-quiz-app .lvq-picker { display: flex !important; gap: 14px; flex-wrap: wrap; align-items: center; }

#lv-quiz-app .lvq-select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	padding: 11px 32px 11px 16px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	font-weight: 400 !important;
	line-height: normal !important;
	border-radius: 8px !important;
	border: 1px solid var(--lvq-line) !important;
	background-color: var(--lvq-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b96a3'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%238b96a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 11px 11px !important;
	color: var(--lvq-text) !important;
	box-shadow: none !important;
	height: auto !important;
	width: auto;
	max-width: 100%;
}

#lv-quiz-app .lvq-empty {
	color: var(--lvq-text-dim) !important;
	font-size: 14px !important;
	margin: 0 !important;
}

/* ---------- Buttons (shared look with the lecture viewer) ---------- */

#lv-quiz-app .lvq-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 11px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: normal !important;
	border-radius: 8px !important;
	border: 1px solid var(--lvq-line) !important;
	background: transparent !important;
	color: var(--lvq-text) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	height: auto !important;
}
#lv-quiz-app .lvq-btn:hover:not(:disabled) { border-color: var(--lvq-accent-dim) !important; background: rgba(52,211,153,0.08) !important; }
#lv-quiz-app .lvq-btn:disabled { opacity: 0.4 !important; cursor: not-allowed; }

#lv-quiz-app .lvq-btn-primary {
	background: var(--lvq-accent) !important;
	color: #06231a !important;
	border-color: var(--lvq-accent) !important;
}
#lv-quiz-app .lvq-btn-primary:hover:not(:disabled) { background: #3fe3a8 !important; color: #06231a !important; }
#lv-quiz-app .lvq-btn-primary:disabled { background: var(--lvq-line) !important; color: var(--lvq-text-dim) !important; border-color: var(--lvq-line) !important; }

/* ---------- Quiz-taking view ---------- */

#lv-quiz-app .lvq-quiz { padding: 26px !important; }
#lv-quiz-app .lvq-quiz[hidden] { display: none !important; }

#lv-quiz-app .lvq-quiz-header {
	display: flex !important;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}
#lv-quiz-app .lvq-quiz-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 0 4px !important; color: var(--lvq-text) !important; letter-spacing: -0.01em; }
#lv-quiz-app .lvq-quiz-desc { font-size: 14px !important; color: var(--lvq-text-dim) !important; margin: 0 !important; max-width: 60ch; }
#lv-quiz-app .lvq-quiz-desc[hidden] { display: none !important; }

#lv-quiz-app .lvq-progress-track {
	height: 6px;
	border-radius: 999px;
	background: var(--lvq-line) !important;
	overflow: hidden;
	margin-bottom: 8px;
}
#lv-quiz-app .lvq-progress-fill {
	height: 100%;
	background: var(--lvq-accent) !important;
	border-radius: 999px;
	transition: width 0.25s ease;
	width: 0%;
}
#lv-quiz-app .lvq-progress-label {
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 12px !important;
	color: var(--lvq-text-dim) !important;
	margin-bottom: 20px;
}

#lv-quiz-app .lvq-question-card {
	background: var(--lvq-bg-raised) !important;
	border: 1px solid var(--lvq-line) !important;
	border-radius: 12px !important;
	padding: 24px !important;
	margin-bottom: 20px;
}

#lv-quiz-app .lvq-q-meta {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--lvq-accent) !important;
	font-weight: 600 !important;
	margin-bottom: 10px;
}
#lv-quiz-app .lvq-q-desc {
	font-size: 14px !important;
	color: var(--lvq-text-dim) !important;
	background: rgba(255,255,255,0.03) !important;
	border-left: 3px solid var(--lvq-accent-dim) !important;
	padding: 10px 14px !important;
	border-radius: 4px !important;
	margin-bottom: 14px;
}
#lv-quiz-app .lvq-q-text {
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	margin-bottom: 18px;
	color: var(--lvq-text) !important;
}

/* ---------- Question stem image ---------- */
/* The visual the student needs to interpret to answer (ECG, X-ray, clinical
   photo, etc). Kept modest by default and click-to-zoom for a closer look. */
#lv-quiz-app .lvq-q-image {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	margin-bottom: 18px;
	cursor: zoom-in !important;
	border-radius: 10px !important;
	overflow: hidden;
	border: 1px solid var(--lvq-line) !important;
	background: rgba(255,255,255,0.02) !important;
}
#lv-quiz-app .lvq-q-image img {
	max-width: 100% !important;
	max-height: 380px !important;
	width: auto !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
}
#lv-quiz-app .lvq-q-image-zoom {
	position: absolute !important;
	bottom: 8px !important;
	right: 8px !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: rgba(0,0,0,0.6) !important;
	color: #fff !important;
	font-size: 15px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none;
}

/* ---------- Fullscreen image lightbox (question + explanation images) ---------- */
.lvq-lightbox {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(0,0,0,0.88) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 999999 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.15s ease !important;
	cursor: zoom-out !important;
	padding: 24px !important;
}
.lvq-lightbox.lvq-lightbox-open {
	opacity: 1 !important;
	visibility: visible !important;
}
.lvq-lightbox-img {
	max-width: 100% !important;
	max-height: 100% !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
.lvq-lightbox-close {
	position: absolute !important;
	top: 18px !important;
	right: 22px !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	border: none !important;
	background: rgba(255,255,255,0.12) !important;
	color: #fff !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
}
.lvq-lightbox-close:hover { background: rgba(255,255,255,0.22) !important; }

#lv-quiz-app .lvq-answers { display: flex !important; flex-direction: column; gap: 10px; margin-bottom: 18px; }

#lv-quiz-app .lvq-answer {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 13px 16px !important;
	border-radius: 8px !important;
	border: 1px solid var(--lvq-line) !important;
	background: var(--lvq-bg) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	position: relative;
}
#lv-quiz-app .lvq-answer:hover { border-color: var(--lvq-accent-dim) !important; }
#lv-quiz-app .lvq-answer input { accent-color: var(--lvq-accent); width: 16px !important; height: 16px !important; flex-shrink: 0; }
#lv-quiz-app .lvq-answer-text { font-size: 14.5px !important; color: var(--lvq-text) !important; flex: 1; }

#lv-quiz-app .lvq-answer-correct {
	border-color: var(--lvq-accent) !important;
	background: rgba(52,211,153,0.12) !important;
}
#lv-quiz-app .lvq-answer-correct .lvq-answer-icon::after { content: '\2713'; color: var(--lvq-accent); font-weight: 700; }

#lv-quiz-app .lvq-answer-wrong {
	border-color: var(--lvq-bad) !important;
	background: rgba(224,100,90,0.12) !important;
}
#lv-quiz-app .lvq-answer-wrong .lvq-answer-icon::after { content: '\2717'; color: var(--lvq-bad); font-weight: 700; }

#lv-quiz-app .lvq-answer-icon { font-size: 15px !important; flex-shrink: 0; }

#lv-quiz-app .lvq-check-btn { width: 100%; }

#lv-quiz-app .lvq-shake { animation: lvq-shake 0.4s ease; }
@keyframes lvq-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

#lv-quiz-app .lvq-feedback {
	padding: 14px 16px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	display: flex !important;
	flex-direction: column;
	gap: 6px;
}
#lv-quiz-app .lvq-feedback-correct { background: rgba(52,211,153,0.12) !important; color: var(--lvq-accent) !important; border: 1px solid var(--lvq-accent-dim) !important; }
#lv-quiz-app .lvq-feedback-wrong { background: rgba(224,100,90,0.12) !important; color: var(--lvq-bad) !important; border: 1px solid rgba(224,100,90,0.4) !important; }
#lv-quiz-app .lvq-feedback-explain { font-weight: 400 !important; font-size: 13.5px !important; color: var(--lvq-text-dim) !important; line-height: 1.55 !important; }
#lv-quiz-app .lvq-feedback-explain p { margin: 0 0 8px !important; }
#lv-quiz-app .lvq-feedback-explain p:last-child { margin-bottom: 0 !important; }
#lv-quiz-app .lvq-feedback-explain ul,
#lv-quiz-app .lvq-feedback-explain ol { margin: 0 0 8px 20px !important; padding: 0 !important; }
#lv-quiz-app .lvq-feedback-explain li { margin-bottom: 4px !important; }
#lv-quiz-app .lvq-feedback-explain a { color: var(--lvq-accent) !important; text-decoration: underline !important; }
#lv-quiz-app .lvq-feedback-explain strong,
#lv-quiz-app .lvq-feedback-explain b { color: var(--lvq-text) !important; font-weight: 700 !important; }
#lv-quiz-app .lvq-feedback-explain em,
#lv-quiz-app .lvq-feedback-explain i { font-style: italic !important; }
#lv-quiz-app .lvq-feedback-explain h1,
#lv-quiz-app .lvq-feedback-explain h2,
#lv-quiz-app .lvq-feedback-explain h3,
#lv-quiz-app .lvq-feedback-explain h4,
#lv-quiz-app .lvq-feedback-explain h5,
#lv-quiz-app .lvq-feedback-explain h6 {
	color: var(--lvq-text) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 12px 0 6px !important;
}
#lv-quiz-app .lvq-feedback-explain h1:first-child,
#lv-quiz-app .lvq-feedback-explain h2:first-child,
#lv-quiz-app .lvq-feedback-explain h3:first-child,
#lv-quiz-app .lvq-feedback-explain h4:first-child { margin-top: 0 !important; }
#lv-quiz-app .lvq-feedback-explain h1 { font-size: 18px !important; }
#lv-quiz-app .lvq-feedback-explain h2 { font-size: 16.5px !important; }
#lv-quiz-app .lvq-feedback-explain h3 { font-size: 15px !important; }
#lv-quiz-app .lvq-feedback-explain h4,
#lv-quiz-app .lvq-feedback-explain h5,
#lv-quiz-app .lvq-feedback-explain h6 { font-size: 13.5px !important; }
#lv-quiz-app .lvq-feedback-explain blockquote {
	margin: 8px 0 !important;
	padding: 6px 14px !important;
	border-left: 3px solid var(--lvq-accent-dim) !important;
	background: rgba(255,255,255,0.03) !important;
	border-radius: 4px !important;
	color: var(--lvq-text-dim) !important;
	font-style: italic !important;
}
#lv-quiz-app .lvq-feedback-explain hr {
	border: none !important;
	border-top: 1px solid var(--lvq-line) !important;
	margin: 12px 0 !important;
}
#lv-quiz-app .lvq-feedback-explain code {
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 12.5px !important;
	background: rgba(255,255,255,0.08) !important;
	padding: 1px 5px !important;
	border-radius: 3px !important;
	color: var(--lvq-text) !important;
}
#lv-quiz-app .lvq-feedback-explain pre {
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 12.5px !important;
	background: rgba(255,255,255,0.06) !important;
	padding: 10px 12px !important;
	border-radius: 6px !important;
	overflow-x: auto !important;
	margin: 0 0 8px !important;
}
#lv-quiz-app .lvq-feedback-explain pre code { background: none !important; padding: 0 !important; }
#lv-quiz-app .lvq-feedback-explain img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 6px !important;
	margin: 6px 0 !important;
	display: block !important;
}
#lv-quiz-app .lvq-feedback-explain table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 6px 0 10px !important;
	font-size: 13px !important;
}
#lv-quiz-app .lvq-feedback-explain th,
#lv-quiz-app .lvq-feedback-explain td {
	border: 1px solid var(--lvq-line) !important;
	padding: 6px 9px !important;
	text-align: left !important;
}
#lv-quiz-app .lvq-feedback-explain th {
	background: rgba(255,255,255,0.05) !important;
	color: var(--lvq-text) !important;
	font-weight: 600 !important;
}

/* ---------- Explanation image gallery / slider ---------- */
/* Scroll-snap handles touch swipe natively; the prev/next buttons and dots
   are a progressive enhancement on top for mouse/keyboard users. */
#lv-quiz-app .lvq-gallery {
	position: relative !important;
	margin-top: 4px;
	align-self: stretch;
}
#lv-quiz-app .lvq-gallery-track {
	display: flex !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory !important;
	-webkit-overflow-scrolling: touch !important;
	scrollbar-width: none !important;
	border-radius: 8px !important;
}
#lv-quiz-app .lvq-gallery-track::-webkit-scrollbar { display: none !important; }
#lv-quiz-app .lvq-gallery-slide {
	flex: 0 0 100% !important;
	scroll-snap-align: center !important;
	display: flex !important;
	justify-content: center !important;
}
#lv-quiz-app .lvq-gallery-slide img {
	max-width: 100% !important;
	max-height: 340px !important;
	width: auto !important;
	height: auto !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	object-fit: contain !important;
}
#lv-quiz-app.lv-theme-light .lvq-gallery-slide img { border-color: rgba(0,0,0,0.1) !important; }
#lv-quiz-app .lvq-gallery-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	border: none !important;
	background: rgba(0,0,0,0.55) !important;
	color: #fff !important;
	font-size: 13px !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2 !important;
}
#lv-quiz-app .lvq-gallery-prev { left: 8px !important; }
#lv-quiz-app .lvq-gallery-next { right: 8px !important; }
#lv-quiz-app .lvq-gallery-nav:hover { background: rgba(0,0,0,0.75) !important; }
#lv-quiz-app .lvq-gallery-dots {
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
	margin-top: 8px !important;
}
#lv-quiz-app .lvq-gallery-dot {
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	border: none !important;
	padding: 0 !important;
	background: rgba(255,255,255,0.25) !important;
	cursor: pointer !important;
}
#lv-quiz-app.lv-theme-light .lvq-gallery-dot { background: rgba(0,0,0,0.18) !important; }
#lv-quiz-app .lvq-gallery-dot.active { background: var(--lvq-accent) !important; }

#lv-quiz-app .lvq-quiz-nav { display: flex !important; justify-content: space-between; gap: 12px; }

/* ---------- Results ---------- */

#lv-quiz-app .lvq-results { padding: 40px 26px !important; text-align: center; }
#lv-quiz-app .lvq-results[hidden] { display: none !important; }

#lv-quiz-app .lvq-results-ring {
	--lvq-pct: 0;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: conic-gradient(var(--lvq-accent) calc(var(--lvq-pct) * 1%), var(--lvq-line) 0);
	position: relative;
}
#lv-quiz-app .lvq-results-ring::before {
	content: '';
	position: absolute;
	inset: 10px;
	border-radius: 50%;
	background: var(--lvq-bg);
}
#lv-quiz-app .lvq-results-ring span {
	position: relative;
	z-index: 1;
	font-family: 'IBM Plex Mono', monospace !important;
	font-size: 24px !important;
	font-weight: 500 !important;
	color: var(--lvq-text) !important;
}

#lv-quiz-app #lvq-results-heading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; margin: 0 0 6px !important; color: var(--lvq-text) !important; letter-spacing: -0.01em; }
#lv-quiz-app #lvq-results-sub { font-size: 14px !important; color: var(--lvq-text-dim) !important; margin: 0 0 24px !important; }
#lv-quiz-app .lvq-results-actions { display: flex !important; justify-content: center; gap: 12px; flex-wrap: wrap; }

#lv-quiz-app .lvq-warning {
	background: linear-gradient(135deg, #b8562f, #8f3a1f) !important;
	color: #fdf2ec !important;
	padding: 16px 20px !important;
	text-align: center;
	font-size: 13px !important;
	letter-spacing: 0.2px;
	margin: 0 !important;
}

@media print { #lv-quiz-app { display: none !important; } }

@media (max-width: 640px) {
	#lv-quiz-app .lvq-toolbar, #lv-quiz-app .lvq-quiz { padding: 16px !important; }
	#lv-quiz-app .lvq-toolbar { flex-direction: column; align-items: stretch; }
	#lv-quiz-app .lvq-picker { flex-direction: column; align-items: stretch; }
	#lv-quiz-app .lvq-select { width: 100%; }
	#lv-quiz-app #lvq-load { width: 100%; }
	#lv-quiz-app .lvq-quiz-header { flex-direction: column; }
}