.question-html-content {
	line-height: 1.6;
	word-break: break-word;
}

.question-html-content pre {
	white-space: pre-wrap;
	font-family: Consolas, "Courier New", monospace;
	background: #f8fafc;
	padding: 8px;
	border-radius: 6px;
	overflow-x: auto;
	margin: 0.5em 0;
}

.question-html-content p {
	margin: 0 0 0.5em;
}

.question-html-content p:last-child {
	margin-bottom: 0;
}

.question-title .question-number {
	flex-shrink: 0;
	font-weight: 600;
}

.question-title {
	display: flex;
	gap: 0.35em;
	align-items: flex-start;
	flex-wrap: wrap;
}

.question-list-html {
	max-width: 360px;
	max-height: 140px;
	overflow: auto;
}

.selected-text.question-html-content {
	flex: 1;
	min-width: 0;
}

/*
 * Theme css/new/style.css sets:
 *   input, select, textarea { width: 100%; }
 *   input { height: 40px; }
 *   select { height: 60px; width: 100%; }
 *   input[type=radio/checkbox] { opacity: 0; position: absolute; }
 * Override strongly inside quiz containers.
 */
.quiz-ui input[type=checkbox],
.quiz-ui input[type=radio],
.test-container input[type=checkbox],
.test-container input[type=radio],
.content-container input[type=checkbox],
.content-container input[type=radio],
.quiz-ui .answer-option input[type=checkbox],
.quiz-ui .answer-option input[type=radio],
.test-container .answer-option input[type=checkbox],
.test-container .answer-option input[type=radio] {
	opacity: 1 !important;
	position: static !important;
	width: 18px !important;
	max-width: 18px !important;
	min-width: 18px !important;
	height: 18px !important;
	max-height: 18px !important;
	margin: 2px 8px 0 0 !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	background: none !important;
	border: initial !important;
	box-shadow: none !important;
}

.quiz-ui input[type=checkbox] ~ label::before,
.quiz-ui input[type=checkbox] ~ label::after,
.quiz-ui input[type=radio] ~ label::before,
.quiz-ui input[type=radio] ~ label::after,
.test-container input[type=checkbox] ~ label::before,
.test-container input[type=checkbox] ~ label::after,
.test-container input[type=radio] ~ label::before,
.test-container input[type=radio] ~ label::after,
.content-container input[type=checkbox] ~ label::before,
.content-container input[type=checkbox] ~ label::after,
.content-container input[type=radio] ~ label::before,
.content-container input[type=radio] ~ label::after {
	content: none !important;
	display: none !important;
}

.quiz-ui input[type=checkbox] ~ label,
.quiz-ui input[type=radio] ~ label,
.test-container input[type=checkbox] ~ label,
.test-container input[type=radio] ~ label,
.content-container input[type=checkbox] ~ label,
.content-container input[type=radio] ~ label {
	padding-left: 0 !important;
}

.answer-option {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	background: #fff;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.answer-option:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

.answer-option:has(input:checked) {
	background: #eff6ff;
	border-color: #93c5fd;
}

.answer-option .answer-option-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
}

.answer-option .answer-option-body .question-html-content,
.cloze-option-line .question-html-content,
.matching-option-line .question-html-content,
.result-option-body .question-html-content {
	display: inline;
}

.answer-option .answer-option-body .question-html-content p,
.cloze-option-line .question-html-content p,
.matching-option-line .question-html-content p,
.result-option-body .question-html-content p {
	display: inline;
	margin: 0;
}

.option-label {
	font-weight: 700;
	min-width: 1.5em;
	display: inline-block;
	margin-right: 6px;
	flex-shrink: 0;
}

.essay-input {
	width: 100% !important;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 10px !important;
	min-height: 120px !important;
	height: auto !important;
}

.cloze-blank-row,
.matching-row,
.ordering-row {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	margin-bottom: 8px;
	flex-wrap: nowrap !important;
}

.cloze-blank-label,
.ordering-position-label {
	font-weight: 700;
	min-width: 2em;
	flex-shrink: 0;
}

.quiz-ui select.cloze-select,
.quiz-ui select.matching-select,
.quiz-ui select.ordering-select,
.test-container select.cloze-select,
.test-container select.matching-select,
.test-container select.ordering-select,
.content-container select.cloze-select,
.content-container select.matching-select,
.content-container select.ordering-select {
	width: auto !important;
	max-width: 160px !important;
	min-width: 88px !important;
	height: 36px !important;
	line-height: 1.2 !important;
	padding: 4px 32px 4px 10px !important;
	margin: 0 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	background-image: none !important;
	appearance: auto !important;
	-webkit-appearance: menulist !important;
	-moz-appearance: menulist !important;
	font-size: 14px !important;
	flex: 0 0 auto !important;
}

.cloze-options-title,
.matching-options-title {
	font-weight: 700;
	margin: 10px 0 6px;
}

.cloze-option-line,
.matching-option-line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
	padding: 4px 0;
}

.ordering-hint {
	margin-bottom: 10px;
}

.result-options {
	list-style: none;
	padding-left: 0;
	margin: 8px 0 0;
}

.result-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	margin-bottom: 6px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}

.result-option.is-correct {
	background: #f0fdf4;
	border-color: #86efac;
}

.result-option.is-wrong-selected {
	background: #fef2f2;
	border-color: #fca5a5;
}

.result-option-body {
	flex: 1;
	min-width: 0;
}

.cloze-result-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 8px;
	border: 1px solid #e5e7eb;
}

.cloze-result-correct {
	background: #f0fdf4;
	border-color: #86efac;
}

.cloze-result-wrong {
	background: #fef2f2;
	border-color: #fca5a5;
}

.cloze-result-detail {
	flex: 1;
	min-width: 0;
}

.cloze-result-line {
	margin-bottom: 4px;
}

.cloze-result-key {
	font-weight: 600;
	margin-right: 6px;
}

.cloze-result-mark {
	font-size: 1.2rem;
	min-width: 1.5em;
}

.mark-correct {
	color: #16a34a;
}

.mark-wrong {
	color: #dc2626;
}

.matching-left-block {
	min-width: 120px;
	max-width: 40%;
}