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

/* Scoped through .lvqp-app / #lvqp-modal the same way the lecture preview
   is scoped through #lvp-app — !important throughout so page builder/theme
   defaults never win the cascade. Its own namespace (lvqp-) so nothing
   here can collide with either the main quiz app (lvq-) or the lecture
   preview (lvp-), even when both appear on the same page. */

.lvqp-app {
	--lvqp-bg: #10151b;
	--lvqp-bg-raised: #171e26;
	--lvqp-line: #262f3a;
	--lvqp-text: #e7ecef;
	--lvqp-text-dim: #8b96a3;
	--lvqp-accent: #34d399;
	--lvqp-accent-dim: #1f7a5c;
	--lvqp-bad: #e0645a;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	max-width: 100%;
}

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

.lvqp-app .lvqp-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--lvqp-text) !important;
	margin: 0 0 20px !important;
	letter-spacing: -0.01em;
}

.lvqp-app.lvqp-app-error {
	padding: 14px 16px !important;
	border-radius: 8px !important;
	border: 1px solid var(--lvqp-line, #262f3a) !important;
	color: #b3722a !important;
	font-size: 14px !important;
}

.lvqp-app .lvqp-empty {
	color: var(--lvqp-text-dim) !important;
	font-size: 14px !important;
}

/* ---------- Card grid ---------- */

.lvqp-app .lvqp-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.lvqp-app .lvqp-grid-single {
	grid-template-columns: minmax(200px, 320px);
}

.lvqp-app .lvqp-card {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 18px !important;
	border-radius: 12px !important;
	border: 1px solid var(--lvqp-line) !important;
	background: var(--lvqp-bg-raised) !important;
	color: var(--lvqp-text) !important;
	text-align: left;
	cursor: pointer;
	font-family: inherit !important;
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.lvqp-app .lvqp-card:hover {
	border-color: var(--lvqp-accent) !important;
	background: rgba(52,211,153,0.08) !important;
	transform: translateY(-2px);
}
.lvqp-app .lvqp-card-category {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--lvqp-accent) !important;
}
.lvqp-app .lvqp-card-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}
.lvqp-app .lvqp-card-meta {
	font-size: 12.5px !important;
	color: var(--lvqp-text-dim) !important;
}

/* ---------- Modal shell ---------- */

.lvqp-modal[hidden] { display: none !important; }

.lvqp-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	background: rgba(6,9,12,0.72) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 20px !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.lvqp-modal-inner {
	--lvqp-bg: #10151b;
	--lvqp-bg-raised: #171e26;
	--lvqp-line: #262f3a;
	--lvqp-text: #e7ecef;
	--lvqp-text-dim: #8b96a3;
	--lvqp-accent: #34d399;
	--lvqp-accent-dim: #1f7a5c;
	--lvqp-bad: #e0645a;

	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	display: flex !important;
	flex-direction: column;
	background: var(--lvqp-bg) !important;
	border: 1px solid var(--lvqp-line) !important;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}
.lvqp-modal-inner *, .lvqp-modal-inner *::before, .lvqp-modal-inner *::after {
	box-sizing: border-box !important;
	text-transform: none !important;
	letter-spacing: normal;
}

.lvqp-modal-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px !important;
	border-bottom: 1px solid var(--lvqp-line) !important;
	flex-shrink: 0;
}
.lvqp-modal-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--lvqp-text) !important;
	margin-right: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lvqp-close {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: none !important;
	border: none !important;
	color: var(--lvqp-text-dim) !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer;
	padding: 4px !important;
}
.lvqp-close:hover { color: var(--lvqp-text) !important; }

.lvqp-modal-body {
	position: relative;
	flex: 1 1 auto;
	overflow: auto;
	padding: 24px !important;
}

.lvqp-loading {
	color: var(--lvqp-text-dim) !important;
	font-size: 13.5px !important;
	text-align: center;
	padding: 30px 0 !important;
}

/* ---------- Quiz-taking view (ported from lecture-viewer-quiz.css) ---------- */

.lvqp-quiz[hidden] { display: none !important; }

.lvqp-quiz-desc { font-size: 14px !important; color: var(--lvqp-text-dim) !important; margin: 0 0 16px !important; max-width: 60ch; }
.lvqp-quiz-desc:empty { display: none !important; }

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

.lvqp-question-card {
	background: var(--lvqp-bg-raised) !important;
	border: 1px solid var(--lvqp-line) !important;
	border-radius: 12px !important;
	padding: 22px !important;
	margin-bottom: 20px;
}

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

/* ---------- Question stem image ---------- */
.lvqp-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(--lvqp-line) !important;
	background: rgba(255,255,255,0.02) !important;
}
.lvqp-q-image img {
	max-width: 100% !important;
	max-height: 340px !important;
	width: auto !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
}
.lvqp-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) ---------- */
.lvqp-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;
}
.lvqp-lightbox.lvqp-lightbox-open {
	opacity: 1 !important;
	visibility: visible !important;
}
.lvqp-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;
}
.lvqp-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;
}
.lvqp-lightbox-close:hover { background: rgba(255,255,255,0.22) !important; }

.lvqp-answers { display: flex !important; flex-direction: column; gap: 10px; margin-bottom: 18px; }

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

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

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

.lvqp-answer-icon { font-size: 15px !important; flex-shrink: 0; }

.lvqp-check-btn { width: 100%; }

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

.lvqp-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;
}
.lvqp-feedback-correct { background: rgba(52,211,153,0.12) !important; color: var(--lvqp-accent) !important; border: 1px solid var(--lvqp-accent-dim) !important; }
.lvqp-feedback-wrong { background: rgba(224,100,90,0.12) !important; color: var(--lvqp-bad) !important; border: 1px solid rgba(224,100,90,0.4) !important; }
.lvqp-feedback-explain { font-weight: 400 !important; font-size: 13.5px !important; color: var(--lvqp-text-dim) !important; line-height: 1.55 !important; }
.lvqp-feedback-explain p { margin: 0 0 8px !important; }
.lvqp-feedback-explain p:last-child { margin-bottom: 0 !important; }
.lvqp-feedback-explain ul,
.lvqp-feedback-explain ol { margin: 0 0 8px 20px !important; padding: 0 !important; }
.lvqp-feedback-explain li { margin-bottom: 4px !important; }
.lvqp-feedback-explain a { color: var(--lvqp-accent) !important; text-decoration: underline !important; }
.lvqp-feedback-explain strong,
.lvqp-feedback-explain b { color: var(--lvqp-text) !important; font-weight: 700 !important; }
.lvqp-feedback-explain em,
.lvqp-feedback-explain i { font-style: italic !important; }
.lvqp-feedback-explain h1,
.lvqp-feedback-explain h2,
.lvqp-feedback-explain h3,
.lvqp-feedback-explain h4,
.lvqp-feedback-explain h5,
.lvqp-feedback-explain h6 {
	color: var(--lvqp-text) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 12px 0 6px !important;
}
.lvqp-feedback-explain h1:first-child,
.lvqp-feedback-explain h2:first-child,
.lvqp-feedback-explain h3:first-child,
.lvqp-feedback-explain h4:first-child { margin-top: 0 !important; }
.lvqp-feedback-explain h1 { font-size: 18px !important; }
.lvqp-feedback-explain h2 { font-size: 16.5px !important; }
.lvqp-feedback-explain h3 { font-size: 15px !important; }
.lvqp-feedback-explain h4,
.lvqp-feedback-explain h5,
.lvqp-feedback-explain h6 { font-size: 13.5px !important; }
.lvqp-feedback-explain blockquote {
	margin: 8px 0 !important;
	padding: 6px 14px !important;
	border-left: 3px solid var(--lvqp-accent-dim) !important;
	background: rgba(255,255,255,0.03) !important;
	border-radius: 4px !important;
	color: var(--lvqp-text-dim) !important;
	font-style: italic !important;
}
.lvqp-feedback-explain hr {
	border: none !important;
	border-top: 1px solid var(--lvqp-line) !important;
	margin: 12px 0 !important;
}
.lvqp-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(--lvqp-text) !important;
}
.lvqp-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;
}
.lvqp-feedback-explain pre code { background: none !important; padding: 0 !important; }
.lvqp-feedback-explain img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 6px !important;
	margin: 6px 0 !important;
	display: block !important;
}
.lvqp-feedback-explain table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 6px 0 10px !important;
	font-size: 13px !important;
}
.lvqp-feedback-explain th,
.lvqp-feedback-explain td {
	border: 1px solid var(--lvqp-line) !important;
	padding: 6px 9px !important;
	text-align: left !important;
}
.lvqp-feedback-explain th {
	background: rgba(255,255,255,0.05) !important;
	color: var(--lvqp-text) !important;
	font-weight: 600 !important;
}

/* ---------- Explanation image gallery / slider ---------- */
.lvqp-gallery {
	position: relative !important;
	margin-top: 4px;
	align-self: stretch;
}
.lvqp-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;
}
.lvqp-gallery-track::-webkit-scrollbar { display: none !important; }
.lvqp-gallery-slide {
	flex: 0 0 100% !important;
	scroll-snap-align: center !important;
	display: flex !important;
	justify-content: center !important;
}
.lvqp-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;
}
.lvqp-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;
}
.lvqp-gallery-prev { left: 8px !important; }
.lvqp-gallery-next { right: 8px !important; }
.lvqp-gallery-nav:hover { background: rgba(0,0,0,0.75) !important; }
.lvqp-gallery-dots {
	display: flex !important;
	justify-content: center !important;
	gap: 6px !important;
	margin-top: 8px !important;
}
.lvqp-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;
}
.lvqp-gallery-dot.active { background: var(--lvqp-accent) !important; }

.lvqp-quiz-nav { display: flex !important; justify-content: space-between; gap: 12px; }

/* ---------- Buttons ---------- */

.lvqp-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(--lvqp-line) !important;
	background: transparent !important;
	color: var(--lvqp-text) !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
	height: auto !important;
}
.lvqp-btn:hover:not(:disabled) { border-color: var(--lvqp-accent-dim) !important; background: rgba(52,211,153,0.08) !important; }
.lvqp-btn:disabled { opacity: 0.4 !important; cursor: not-allowed; }

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

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

.lvqp-results { padding: 30px 10px 10px !important; text-align: center; }
.lvqp-results[hidden] { display: none !important; }

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

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

body.lvqp-modal-open {
	overflow: hidden !important;
}

@media (max-width: 640px) {
	.lvqp-app .lvqp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}