@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;
}

.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;
}

#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; }

#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; }
}