/* ==============================
   QMP Addon v2 - modern UI
   ============================== */

.qmp {
	--qmp-bg: #f7f9ff;
	--qmp-card: #ffffff;
	--qmp-border: #e1e8ff;
	--qmp-text: #1a2547;
	--qmp-muted: #5b6788;
	--qmp-primary: #1f6feb;
	--qmp-primary-700: #1858c0;
	--qmp-primary-soft: #eaf1ff;
	--qmp-success: #16a34a;
	--qmp-success-soft: #ecfdf5;
	--qmp-danger: #dc2626;
	--qmp-danger-soft: #fef2f2;
	--qmp-warn: #d97706;
	--qmp-warn-soft: #fffbeb;
	--qmp-radius: 14px;
	--qmp-radius-sm: 10px;
	--qmp-shadow: 0 12px 30px rgba(20, 38, 88, 0.08);
	--qmp-shadow-sm: 0 6px 14px rgba(20, 38, 88, 0.06);

	color: var(--qmp-text);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	max-width: 100%;
	overflow-x: clip;
}

/* Prevent layout overflow on small screens (result page, long stems, images). */
.qmp img,
.qmp video,
.qmp iframe,
.qmp svg {
	max-width: 100%;
	height: auto;
}

.qmp table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.qmp-shell {
	min-width: 0;
}

.qmp * {
	box-sizing: border-box;
}

.qmp-shell {
	background: var(--qmp-bg);
	padding: 18px;
	border-radius: 18px;
	box-shadow: var(--qmp-shadow);
}

.qmp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 8px 14px;
	border-bottom: 1px solid var(--qmp-border);
	margin-bottom: 16px;
}

.qmp-brand {
	font-weight: 700;
	font-size: 18px;
}

.qmp-nav-tabs {
	display: flex;
	gap: 4px;
	background: var(--qmp-card);
	border: 1px solid var(--qmp-border);
	border-radius: 999px;
	padding: 4px;
}

.qmp-tab {
	display: inline-block;
	padding: 8px 14px;
	font-size: 14px;
	border-radius: 999px;
	color: var(--qmp-muted);
	text-decoration: none;
}

.qmp-tab.is-active {
	background: var(--qmp-primary);
	color: #fff;
}

.qmp-flash {
	padding: 10px 14px;
	border-radius: var(--qmp-radius-sm);
	margin-bottom: 12px;
	font-size: 14px;
}

.qmp-flash-error {
	background: var(--qmp-danger-soft);
	color: var(--qmp-danger);
	border: 1px solid #fecaca;
}

.qmp-flash-created,
.qmp-flash-submitted {
	background: var(--qmp-success-soft);
	color: var(--qmp-success);
	border: 1px solid #bbf7d0;
}

/* Cards */

.qmp-card {
	background: var(--qmp-card);
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius);
	padding: 18px;
	margin-bottom: 14px;
	box-shadow: var(--qmp-shadow-sm);
}

.qmp-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 14px;
}

.qmp-card-head h3 {
	margin: 0;
	font-size: 18px;
}

.qmp-muted {
	color: var(--qmp-muted);
}

/* Hero */
.qmp-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: linear-gradient(135deg, #1f6feb 0%, #6f8aff 100%);
	color: #fff;
	border-radius: var(--qmp-radius);
	padding: 22px;
	margin-bottom: 18px;
	box-shadow: var(--qmp-shadow);
}

.qmp-hero h2 {
	margin: 0 0 4px;
	font-size: 22px;
}

.qmp-hero p {
	margin: 0;
	opacity: 0.9;
}

.qmp-hero .qmp-btn-primary {
	background: #fff;
	color: var(--qmp-primary);
}

.qmp-hero .qmp-btn-primary:hover {
	background: #fff;
	color: var(--qmp-primary-700);
}

/* Stats */
.qmp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.qmp-stat {
	background: var(--qmp-card);
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius-sm);
	padding: 14px;
}

.qmp-stat-label {
	font-size: 12px;
	color: var(--qmp-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.qmp-stat-value {
	font-size: 24px;
	font-weight: 700;
	margin-top: 4px;
}

.qmp-stat-success {
	background: var(--qmp-success-soft);
	border-color: #bbf7d0;
}

.qmp-stat-danger {
	background: var(--qmp-danger-soft);
	border-color: #fecaca;
}

.qmp-stat-warn {
	background: var(--qmp-warn-soft);
	border-color: #fde68a;
}

/* Buttons */
.qmp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 14px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}

.qmp-btn:hover {
	transform: translateY(-1px);
}

.qmp-btn-primary {
	background: var(--qmp-primary);
	color: #fff;
}

.qmp-btn-primary:hover {
	background: var(--qmp-primary-700);
	color: #fff;
}

.qmp-btn-secondary {
	background: var(--qmp-primary-soft);
	color: var(--qmp-primary-700);
}

.qmp-btn-ghost {
	background: transparent;
	color: var(--qmp-muted);
	border-color: var(--qmp-border);
}

.qmp-btn-lg {
	padding: 12px 18px;
	font-size: 15px;
}

/* Forms */
.qmp-form {
	display: grid;
	gap: 14px;
}

.qmp-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}

.qmp-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}

.qmp-field {
	display: grid;
	gap: 6px;
}

.qmp-field span {
	font-size: 13px;
	color: var(--qmp-muted);
}

.qmp-field input,
.qmp-form input[type="text"],
.qmp-form input[type="number"] {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--qmp-border);
	border-radius: 12px;
	background: #fff;
	font-size: 14px;
	color: var(--qmp-text);
	transition: all 0.15s ease;
}

.qmp-field input::placeholder {
	color: #9aa6c4;
}

.qmp-field input:hover,
.qmp-form input[type="text"]:hover,
.qmp-form input[type="number"]:hover {
	border-color: #c4d3ff;
}

.qmp-field input:focus,
.qmp-form input:focus {
	outline: none;
	border-color: var(--qmp-primary);
	box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.15);
}

.qmp-field span {
	font-weight: 500;
	color: var(--qmp-text);
	font-size: 13px;
}

.qmp-section {
	border: 1px solid var(--qmp-border);
	border-radius: 14px;
	padding: 18px;
	background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
	box-shadow: var(--qmp-shadow-sm);
	margin-bottom: 4px;
}

.qmp-section + .qmp-section {
	margin-top: 4px;
}

.qmp-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--qmp-border);
}

.qmp-section-head h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.qmp-section-head h4::before {
	content: "";
	width: 4px;
	height: 18px;
	background: linear-gradient(180deg, var(--qmp-primary), #6f8aff);
	border-radius: 4px;
}

.qmp-builder {
	background:
		radial-gradient(900px 280px at 0% 0%, rgba(31, 111, 235, 0.14), transparent 60%),
		radial-gradient(700px 260px at 100% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
		radial-gradient(700px 260px at 100% 100%, rgba(34, 197, 94, 0.10), transparent 60%),
		radial-gradient(600px 260px at 0% 100%, rgba(245, 158, 11, 0.10), transparent 60%),
		linear-gradient(180deg, #f8faff 0%, #eff4ff 100%);
	padding: 24px;
	border: 1px solid #d6e0ff;
}

.qmp-builder .qmp-card-head {
	background:
		linear-gradient(135deg, #1f6feb 0%, #6f8aff 50%, #a855f7 100%);
	border: 0;
	padding: 18px 20px;
	border-radius: 16px;
	margin-bottom: 16px;
	color: #fff;
	box-shadow: 0 16px 30px rgba(31, 111, 235, 0.22);
}

.qmp-builder .qmp-card-head h3 {
	font-size: 22px;
	color: #fff;
}

.qmp-builder .qmp-card-head .qmp-muted {
	color: rgba(255, 255, 255, 0.85);
}

.qmp-builder .qmp-section {
	background:
		linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	border: 1px solid #d9e3ff;
	border-radius: 16px;
	padding: 20px;
}

.qmp-builder .qmp-section + .qmp-section {
	margin-top: 12px;
}

.qmp-builder .qmp-section:nth-of-type(1) .qmp-section-head h4::before {
	background: linear-gradient(180deg, #1f6feb, #60a5fa);
}

.qmp-builder .qmp-section:nth-of-type(2) .qmp-section-head h4::before {
	background: linear-gradient(180deg, #a855f7, #ec4899);
}

.qmp-builder .qmp-section:nth-of-type(3) .qmp-section-head h4::before {
	background: linear-gradient(180deg, #f59e0b, #ef4444);
}

.qmp-toggle,
.qmp-radio {
	display: flex;
	gap: 10px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: 12px;
	padding: 12px 14px;
	cursor: pointer;
	transition: all 0.18s ease;
	user-select: none;
	box-shadow: var(--qmp-shadow-sm);
}

.qmp-toggle:hover,
.qmp-radio:hover {
	border-color: #c4d3ff;
	transform: translateY(-1px);
}

.qmp-toggle input[type="checkbox"],
.qmp-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1.5px solid var(--qmp-border);
	border-radius: 5px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
	position: relative;
}

.qmp-radio input[type="radio"] {
	border-radius: 50%;
}

.qmp-toggle input[type="checkbox"]:checked,
.qmp-radio input[type="radio"]:checked {
	background: var(--qmp-primary);
	border-color: var(--qmp-primary);
}

.qmp-toggle input[type="checkbox"]:checked::after {
	content: "✓";
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.qmp-radio input[type="radio"]:checked::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

.qmp-toggle:has(input:checked),
.qmp-radio:has(input:checked) {
	border-color: var(--qmp-primary);
	background: linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
}

/* Tag list */
.qmp-tag-list {
	display: grid;
	gap: 8px;
}

.qmp-tag-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: 12px;
	padding: 14px;
	transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.qmp-tag-row:hover {
	border-color: #c4d3ff;
	box-shadow: var(--qmp-shadow-sm);
}

.qmp-tag-row.is-dragging {
	opacity: 0.6;
	background: #f0f5ff;
	border-style: dashed;
}

.qmp-tag-row.is-drop-target {
	border-color: var(--qmp-primary);
	box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.18);
}

.qmp-tag-meta {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.qmp-tag-title-wrap {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.qmp-tag-rename-input {
	padding: 4px 8px;
	border: 1px solid var(--qmp-primary);
	border-radius: 6px;
	font-size: 14px;
	min-width: 200px;
}

.qmp-tag-rename-btn,
.qmp-drag-handle {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--qmp-muted);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 14px;
	display: none;
}

.qmp-can-manage.is-editing .qmp-tag-rename-btn,
.qmp-can-manage.is-editing .qmp-drag-handle {
	display: inline-block;
}

.qmp-can-manage.is-editing .qmp-drag-handle {
	cursor: grab;
}

.qmp-tag-rename-btn:hover,
.qmp-drag-handle:hover {
	background: var(--qmp-primary-soft);
	color: var(--qmp-primary-700);
}

.qmp-can-manage.is-editing .qmp-tag-row {
	cursor: grab;
}

.qmp-can-manage.is-editing .qmp-tag-row .qmp-tag-controls {
	pointer-events: auto;
}

.qmp-tag-controls {
	display: flex;
	align-items: center;
	gap: 6px;
}

.qmp-stepper {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--qmp-border);
	background: #fff;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	color: var(--qmp-primary);
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qmp-stepper:hover {
	background: var(--qmp-primary-soft);
	border-color: var(--qmp-primary);
}

.qmp-stepper:active {
	transform: scale(0.95);
}

.qmp-tag-controls input {
	width: 72px;
	height: 36px;
	text-align: center;
	padding: 6px 8px;
	border: 1px solid var(--qmp-border);
	border-radius: 10px;
	font-weight: 600;
}

.qmp-section-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.qmp-btn-sm {
	padding: 6px 10px;
	font-size: 13px;
}

.qmp-tag-edit-status {
	font-size: 12px;
	min-height: 16px;
}

.qmp-tag-edit-status.is-ok {
	color: var(--qmp-success);
}

.qmp-tag-edit-status.is-fail {
	color: var(--qmp-danger);
}

/* Pills */
.qmp-pill {
	display: inline-block;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #eee;
	color: #444;
}

.qmp-pill-completed {
	background: var(--qmp-success-soft);
	color: var(--qmp-success);
}

.qmp-pill-in_progress,
.qmp-pill-draft {
	background: var(--qmp-primary-soft);
	color: var(--qmp-primary-700);
}

.qmp-pill-warn {
	background: var(--qmp-warn-soft);
	color: var(--qmp-warn);
}

.qmp-pill-is-correct {
	background: var(--qmp-success-soft);
	color: var(--qmp-success);
}

.qmp-pill-is-wrong {
	background: var(--qmp-danger-soft);
	color: var(--qmp-danger);
}

.qmp-pill-is-skipped {
	background: var(--qmp-warn-soft);
	color: var(--qmp-warn);
}

/* Tables (kept for legacy uses) */
.qmp-table-wrap {
	overflow-x: auto;
}

.qmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.qmp-table th,
.qmp-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--qmp-border);
	text-align: left;
}

.qmp-table th {
	background: #f4f7ff;
	font-weight: 600;
	color: var(--qmp-muted);
}

.qmp-empty {
	text-align: center;
	padding: 24px;
}

/* Quiz card grid (recent quizzes) */

.qmp-quiz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.qmp-quiz-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: 14px;
	padding: 14px;
	box-shadow: var(--qmp-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
	overflow: hidden;
}

.qmp-quiz-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--qmp-primary);
	border-radius: 2px;
}

.qmp-quiz-card-completed::before {
	background: var(--qmp-success);
}

.qmp-quiz-card-in_progress::before,
.qmp-quiz-card-draft::before {
	background: var(--qmp-warn);
}

.qmp-quiz-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(20, 38, 88, 0.10);
	border-color: #c4d3ff;
}

.qmp-quiz-card-head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
}

.qmp-quiz-card-head h4 {
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 1.35;
	word-break: break-word;
}

.qmp-quiz-card-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	font-size: 12px;
}

.qmp-quiz-score {
	--qmp-pct: 0;
	width: 56px;
	height: 56px;
	min-width: 56px;
	border-radius: 50%;
	background: conic-gradient(var(--qmp-primary) calc(var(--qmp-pct) * 1%), #eef2ff 0);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qmp-primary-700);
	font-weight: 700;
	font-size: 13px;
	position: relative;
}

.qmp-quiz-score::after {
	content: "";
	position: absolute;
	inset: 5px;
	background: #fff;
	border-radius: 50%;
}

.qmp-quiz-score span {
	position: relative;
	z-index: 1;
}

.qmp-quiz-card-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	background: #f7f9ff;
	border-radius: 10px;
	padding: 8px;
}

.qmp-quiz-card-stats > div {
	text-align: center;
}

.qmp-stat-value-sm {
	font-size: 16px;
	font-weight: 700;
	color: var(--qmp-text);
}

.qmp-stat-label-success {
	color: var(--qmp-success);
}

.qmp-stat-label-danger {
	color: var(--qmp-danger);
}

.qmp-btn-block {
	width: 100%;
}

/* Player */
.qmp-player {
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
}

.qmp-player-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.qmp-player-meta {
	display: flex;
	gap: 10px;
	align-items: center;
}

.qmp-timer {
	background: var(--qmp-primary-soft);
	border: 1px solid #c7daff;
	color: var(--qmp-primary-700);
	border-radius: 10px;
	padding: 8px 12px;
	display: grid;
	min-width: 96px;
	text-align: center;
}

.qmp-timer span {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.qmp-timer-value {
	font-size: 18px;
	font-weight: 700;
}

.qmp-progress-chip {
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: 10px;
	padding: 8px 12px;
}

.qmp-progress-bar {
	height: 8px;
	background: #eef2ff;
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 14px;
}

.qmp-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--qmp-primary), #6f8aff);
	transition: width 0.3s ease;
}

.qmp-palette-wrap {
	background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
	border: 1px solid var(--qmp-border);
	border-radius: 12px;
	padding: 10px 12px;
	margin-bottom: 14px;
	box-shadow: var(--qmp-shadow-sm);
}

.qmp-palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
	gap: 4px;
	max-height: 168px;
	overflow-y: auto;
	padding: 2px;
	scrollbar-width: thin;
}

.qmp-palette::-webkit-scrollbar {
	width: 6px;
}

.qmp-palette::-webkit-scrollbar-thumb {
	background: #c4d3ff;
	border-radius: 999px;
}

.qmp-dot {
	width: 100%;
	aspect-ratio: 1 / 1;
	min-height: 28px;
	border-radius: 7px;
	border: 1px solid var(--qmp-border);
	background: #fff;
	color: var(--qmp-muted);
	cursor: pointer;
	font-weight: 600;
	font-size: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.qmp-dot:hover {
	border-color: var(--qmp-primary);
	color: var(--qmp-primary);
	transform: translateY(-1px);
}

.qmp-dot.is-active {
	background: var(--qmp-primary);
	color: #fff;
	border-color: var(--qmp-primary);
	box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.18);
}

.qmp-dot.is-answered {
	background: #eaf1ff;
	color: var(--qmp-primary-700);
	border-color: #c4d3ff;
}

.qmp-dot.is-correct {
	background: var(--qmp-success);
	color: #fff;
	border-color: var(--qmp-success);
}

.qmp-dot.is-wrong {
	background: var(--qmp-danger);
	color: #fff;
	border-color: var(--qmp-danger);
}

.qmp-dot.is-skipped {
	background: #fff7d6;
	color: #8a6d1f;
	border-color: #f5d96a;
}

.qmp-dot.is-active.is-correct,
.qmp-dot.is-active.is-wrong {
	box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.45);
}

.qmp-palette-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--qmp-border);
	font-size: 11px;
	color: var(--qmp-muted);
}

.qmp-legend-item {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.qmp-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 4px;
	border: 1px solid var(--qmp-border);
	background: #fff;
	display: inline-block;
}

.qmp-legend-swatch.is-current {
	background: var(--qmp-primary);
	border-color: var(--qmp-primary);
}

.qmp-legend-swatch.is-answered {
	background: #eaf1ff;
	border-color: #c4d3ff;
}

.qmp-legend-swatch.is-correct {
	background: var(--qmp-success);
	border-color: var(--qmp-success);
}

.qmp-legend-swatch.is-wrong {
	background: var(--qmp-danger);
	border-color: var(--qmp-danger);
}

.qmp-legend-swatch.is-skipped {
	background: #fff7d6;
	border-color: #f5d96a;
}

@media (max-width: 720px) {
	.qmp-palette {
		grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
		max-height: 144px;
	}
}

.qmp-question {
	display: none;
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius-sm);
	padding: 16px;
	margin-bottom: 12px;
}

.qmp-question.is-active {
	display: block;
}

.qmp-question-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.qmp-q-number {
	background: var(--qmp-primary-soft);
	color: var(--qmp-primary-700);
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 12px;
}

.qmp-question-stem {
	font-size: 16px;
	margin-bottom: 12px;
	line-height: 1.65;
}

/* Helps scrollIntoView on narrow viewports leave space below fixed headers/top bars. */
@media (max-width: 720px) {
	.qmp-player .qmp-question-stem[data-qmp-stem],
	.qmp-player .qmp-question-stem {
		scroll-margin-top: min(96px, 22vh);
	}
}

@media (min-width: 721px) {
	.qmp-player[data-qmp-explanation="inline"] .qmp-question-stem[data-qmp-stem],
	.qmp-player[data-qmp-explanation="inline"] .qmp-question-stem {
		scroll-margin-top: max(24px, 5vh);
	}
}
.qmp-sentence {
	margin: 0 0 6px;
}

.qmp-sentence:last-child {
	margin-bottom: 0;
}

.qmp-question-stem .qmp-sentence,
.qmp-result-stem .qmp-sentence,
.qmp-explanation .qmp-sentence,
.qmp-inline-feedback-body .qmp-sentence,
.qmp-hint .qmp-sentence {
	margin-bottom: 6px;
}

.qmp-result-stem,
.qmp-explanation > div,
.qmp-inline-feedback-body,
.qmp-hint {
	line-height: 1.65;
}

.qmp-options {
	display: grid;
	gap: 8px;
}

.qmp-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--qmp-border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.qmp-option:hover {
	background: #f7f9ff;
}

.qmp-option input {
	margin-top: 3px;
}

.qmp-option.is-locked {
	opacity: 0.7;
	pointer-events: none;
}

.qmp-option.is-correct-pick {
	border-color: #86efac;
	background: var(--qmp-success-soft);
}

.qmp-option.is-wrong-pick {
	border-color: #fca5a5;
	background: var(--qmp-danger-soft);
}

.qmp-option.is-correct-answer {
	border-color: #86efac;
	box-shadow: inset 0 0 0 1px #86efac;
}

.qmp-hint {
	background: var(--qmp-warn-soft);
	border: 1px solid #fde68a;
	color: var(--qmp-warn);
	padding: 10px 12px;
	border-radius: 10px;
	margin-bottom: 10px;
}

.qmp-inline-feedback {
	margin-top: 12px;
	background: #fafcff;
	border: 1px solid var(--qmp-border);
	border-radius: 10px;
	padding: 10px 12px;
}

.qmp-inline-feedback.is-correct {
	background: var(--qmp-success-soft);
	border-color: #bbf7d0;
}

.qmp-inline-feedback.is-wrong {
	background: var(--qmp-danger-soft);
	border-color: #fecaca;
}

.qmp-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.qmp-actions-split {
	justify-content: space-between;
	border-top: 1px dashed var(--qmp-border);
	padding-top: 14px;
	margin-top: 8px;
}

/* Quiz attempt: Prev + Next grouped; Submit can sit on the right (desktop) or row 2 (mobile). */
.qmp-player-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border-top: 1px dashed var(--qmp-border);
	padding-top: 14px;
	margin-top: 8px;
}

.qmp-player-actions-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
}

.qmp-btn-player-submit {
	flex: 0 1 auto;
}

/* Result page sits outside `.qmp-card`; keep viewport contained on mobile post-submit redirects. */
.qmp-result {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: clip;
}
.qmp-result-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--qmp-card);
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius);
	padding: 22px;
	margin-bottom: 14px;
}

.qmp-result-score {
	text-align: center;
}

.qmp-score-circle {
	--qmp-pct: 0;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background:
		conic-gradient(var(--qmp-primary) calc(var(--qmp-pct) * 1%), #eef2ff 0);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qmp-primary-700);
	font-weight: 700;
	font-size: 18px;
	box-shadow: var(--qmp-shadow-sm);
	position: relative;
}

.qmp-score-circle::after {
	content: "";
	position: absolute;
	inset: 8px;
	background: #fff;
	border-radius: 50%;
}

.qmp-score-circle span {
	position: relative;
	z-index: 1;
}

.qmp-result-list {
	display: grid;
	gap: 10px;
}

.qmp-result-item {
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius-sm);
	padding: 14px;
	background: #fff;
}

.qmp-result-item.is-correct {
	background: var(--qmp-success-soft);
	border-color: #bbf7d0;
}

.qmp-result-item.is-wrong {
	background: var(--qmp-danger-soft);
	border-color: #fecaca;
}

.qmp-result-item.is-skipped {
	background: var(--qmp-warn-soft);
	border-color: #fde68a;
}

.qmp-result-head {
	display: flex;
	gap: 8px;
	margin-bottom: 6px;
	align-items: center;
}

.qmp-result-stem {
	margin-bottom: 8px;
}

.qmp-result-answers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.qmp-result-answer {
	display: flex;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #eef1ff;
}

.qmp-result-answer.is-correct-answer {
	background: #ecfdf5;
	border-color: #bbf7d0;
}

.qmp-result-answer.is-user-pick {
	border-color: #c7d2ff;
	background: #eef2ff;
}

.qmp-result-marker {
	font-weight: 700;
	width: 16px;
}

.qmp-explanation {
	margin-top: 10px;
	background: #fff;
	border: 1px solid var(--qmp-border);
	border-radius: 10px;
	padding: 10px 12px;
}

.qmp-builder-total-summary {
	margin-bottom: 14px;
}

.qmp-builder-note {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.45;
}
.qmp-builder .qmp-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 16px;
	background: #f7f9ff;
	border: 1px solid var(--qmp-border);
	border-radius: 12px;
	margin-top: 4px;
}

/* Quiz name prompt — title is asked when user clicks Create & start (after tags are valid). */
.qmp-modal-quiz-title {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top, 16px))
		max(16px, env(safe-area-inset-right, 16px))
		max(24px, env(safe-area-inset-bottom, 24px))
		max(16px, env(safe-area-inset-left, 16px));
	box-sizing: border-box;
}

.qmp-modal-quiz-title[hidden] {
	display: none !important;
}

.qmp-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	cursor: pointer;
}

.qmp-modal-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: var(--qmp-card);
	border: 1px solid var(--qmp-border);
	border-radius: var(--qmp-radius);
	padding: 22px;
	box-shadow: var(--qmp-shadow);
}

.qmp-modal-panel .qmp-field {
	max-width: 100%;
}

.qmp-modal-panel .qmp-modal-title-field {
	width: 100%;
}

.qmp-modal-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--qmp-text);
}

.qmp-modal-hint {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--qmp-muted);
	line-height: 1.45;
}

.qmp-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
	flex-wrap: wrap;
}

@media (max-width: 720px) {
	.qmp-modal-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.qmp-shell {
		padding: 12px;
	}

	.qmp-topbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.qmp-hero {
		flex-direction: column;
		align-items: flex-start;
		padding: 18px;
	}

	.qmp-hero h2 {
		font-size: 18px;
	}

	.qmp-result-hero {
		flex-direction: column;
		align-items: flex-start;
	}

	.qmp-actions-split {
		flex-direction: column;
		align-items: stretch;
	}

	.qmp-builder {
		padding: 14px;
	}

	.qmp-tag-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.qmp-tag-meta {
		text-align: left;
	}

	.qmp-tag-controls {
		justify-content: space-between;
	}

	.qmp-quiz-grid {
		grid-template-columns: 1fr;
	}

	.qmp-builder .qmp-actions {
		flex-direction: column;
	}

	.qmp-builder .qmp-actions .qmp-btn {
		width: 100%;
	}

	.qmp-question-stem,
	.qmp-result-stem,
	.qmp-explanation {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.qmp-result-score {
		align-self: center;
		flex-shrink: 0;
	}

	.qmp-player-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.qmp-player-actions-nav {
		display: flex;
		width: 100%;
		justify-content: space-between;
		gap: 6px;
	}

	.qmp-btn-player-nav {
		flex: 1 1 0;
		min-width: 0;
		padding: 5px 6px !important;
		font-size: 11px !important;
		font-weight: 600;
		line-height: 1.25;
		border-radius: 8px;
	}

	.qmp-btn-player-submit {
		width: 100%;
		flex: none;
	}

	.qmp-section-head {
		flex-direction: column;
		align-items: flex-start;
	}
}