/**
 * Blueprint Exam — NTA-style layout.
 * Matches the official NTA candidate-portal look for JEE / NEET mock tests.
 */

/* ─── Full-screen kiosk mode ─────────────────────────────────── */
/* Applied via body.slms-exam-fullscreen by the minimal page partial —
   single exam pages render without LMS nav, footer, or custom cursor. */
body.slms-exam-fullscreen { background: #f3f5f8; }
.slms-exam-kiosk {
	min-height: 100vh;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* The start-screen card needs breathing room on an otherwise bare page */
body.slms-exam-fullscreen .slms-exam-start-screen {
	margin: 40px auto;
}
/* Small "Exit Exam" pill top-left — visible but not tempting */
.slms-exam-exit-pill {
	position: fixed; top: 10px; left: 10px; z-index: 40;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px 5px 8px;
	background: rgba(0,0,0,.6); color: #fff;
	border-radius: 14px; font-size: 11px; font-weight: 500;
	text-decoration: none; letter-spacing: .02em;
	backdrop-filter: blur(4px);
	transition: background .15s, transform .15s;
}
.slms-exam-exit-pill:hover {
	background: rgba(211,47,47,.85); color: #fff; transform: scale(1.03);
}
.slms-exam-exit-pill svg { flex: 0 0 auto; }
/* Hide during prep phase / when shell is active so it doesn't distract —
   but keep it clickable when student explicitly reaches for it */
body.slms-exam-fullscreen .slms-exam-exit-pill { opacity: .55; }
body.slms-exam-fullscreen .slms-exam-exit-pill:hover,
body.slms-exam-fullscreen .slms-exam-exit-pill:focus { opacity: 1; }

/* ─── Container + reset ─────────────────────────────────────── */
.slms-exam-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2027;
	line-height: 1.55;
	font-size: 15px;
	/* NTA candidate portal palette — orange primary, same status-color codes */
	--slms-blue: #e97827;         /* NTA "primary" orange — kept var name for back-compat */
	--slms-blue-dark: #c95a0f;
	--slms-accent: #1e5db5;       /* blue accents (submit pill, tab active) */
	--slms-green: #4caf50;
	--slms-red: #d32f2f;
	--slms-purple: #8e24aa;
	--slms-orange: #ff9800;
	--slms-gray: #d3d3d3;
}
.slms-exam-app * { box-sizing: border-box; }
.slms-exam-app button { font: inherit; cursor: pointer; }
.slms-exam-app input, .slms-exam-app textarea, .slms-exam-app select {
	font-family: inherit; font-size: inherit;
}
.slms-exam-app [hidden] { display: none !important; }

/* ─── Buttons ───────────────────────────────────────────────── */
.slms-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 8px 16px; border-radius: 4px; border: 1px solid transparent;
	font-weight: 600; font-size: 14px; transition: background .15s, color .15s, border .15s;
}
.slms-btn-primary   { background: var(--slms-blue); color: #fff; border-color: var(--slms-blue); }
.slms-btn-primary:hover { background: var(--slms-blue-dark); border-color: var(--slms-blue-dark); }
.slms-btn-outline   { background: #fff; color: var(--slms-blue); border-color: var(--slms-blue); }
.slms-btn-outline:hover { background: #eef5fd; }
.slms-btn:disabled  { opacity: .6; cursor: not-allowed; }
.slms-btn-submit-header { background: var(--slms-red); color: #fff; border-color: var(--slms-red); padding: 6px 14px; }
.slms-btn-submit-header:hover { background: #a81d1d; }

/* ─── Start screen ──────────────────────────────────────────── */
.slms-exam-start-screen {
	max-width: 820px; margin: 0 auto; padding: 32px;
	background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.slms-exam-start-screen h2 { margin-top: 0; color: var(--slms-blue-dark); }
.slms-exam-start-info p { margin: 6px 0; }
.slms-exam-past-attempts {
	margin: 14px 0 0;
	padding: 8px 14px;
	background: #eef5fd;
	border-left: 4px solid var(--slms-accent, #1e5db5);
	border-radius: 4px;
	color: #2c3e50;
	font-size: 13px;
}
.slms-exam-start-instructions { margin-top: 24px; background: #f7f9fc; border-left: 4px solid var(--slms-blue); padding: 16px 20px; border-radius: 4px; }
.slms-exam-start-instructions h3 { margin-top: 0; font-size: 16px; }
.slms-exam-start-instructions ul { margin: 8px 0 0; padding-left: 20px; }
.slms-exam-start-instructions li { margin: 4px 0; }
.slms-btn-start { margin-top: 24px; padding: 12px 36px; font-size: 16px; }

/* ─── Prep phase (between Start click and exam shell) ──────── */
.slms-exam-prep {
	display: flex; align-items: center; justify-content: center;
	min-height: 480px; padding: 40px 20px;
}
.slms-exam-prep-inner {
	max-width: 540px; width: 100%; text-align: center;
	background: #fff; border: 1px solid #e0e0e0; border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	padding: 40px 36px;
}
.slms-exam-prep-inner h2 {
	margin: 0 0 10px; color: var(--slms-blue-dark); font-size: 22px;
}
.slms-exam-prep-sub {
	color: #555; font-size: 14px; margin: 0 0 24px; line-height: 1.55;
}
.slms-exam-prep-spinner {
	width: 48px; height: 48px; border: 4px solid #e0e7f2; border-top-color: var(--slms-blue);
	border-radius: 50%; margin: 0 auto 20px; animation: slms-prep-spin 0.9s linear infinite;
}
@keyframes slms-prep-spin { to { transform: rotate(360deg); } }
.slms-exam-prep-progress { margin: 20px 0 16px; }
.slms-exam-prep-progress-bar {
	height: 10px; background: #eef2f7; border-radius: 5px; overflow: hidden;
}
.slms-exam-prep-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--slms-blue) 0%, #3b82f6 100%);
	transition: width .4s ease;
}
.slms-exam-prep-progress-label {
	margin-top: 8px; font-size: 13px; color: #4a5568;
}
.slms-exam-prep-progress-label .slms-exam-prep-ready {
	font-weight: 700; color: var(--slms-blue-dark);
}
.slms-exam-prep-countdown {
	margin-top: 14px; font-size: 13px; color: #777;
}
.slms-exam-prep-countdown .slms-exam-prep-seconds {
	font-weight: 700; font-family: "Courier New", monospace; color: var(--slms-blue);
}
.slms-exam-prep-hint {
	margin-top: 16px; font-size: 12px; color: #8a93a0;
}

/* Error state — shown when the initial prep batch fails entirely (e.g. provider 503) */
.slms-exam-prep-error { text-align: center; padding: 10px 0; }
.slms-exam-prep-error-icon { font-size: 44px; margin-bottom: 10px; }
.slms-exam-prep-error h2 { color: #a1282f; margin: 8px 0 10px; }
.slms-exam-prep-error-msg {
	color: #555; font-size: 14px; margin: 0 0 22px; line-height: 1.55;
}
.slms-exam-prep-error .slms-btn { min-width: 180px; }

/* ─── Exam shell (header + tabs + body) ─────────────────────── */
.slms-exam-shell { display: flex; flex-direction: column; min-height: 100vh; background: #f3f5f8; margin: 0 -20px; }

.slms-exam-header {
	display: flex; justify-content: space-between; align-items: center;
	background: linear-gradient(180deg, #f58a2a 0%, var(--slms-blue) 100%);
	color: #fff; padding: 10px 20px;
	position: sticky; top: 0; z-index: 20;
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.slms-exam-title { font-size: 16px; font-weight: 600; }
.slms-exam-header-right { display: flex; align-items: center; gap: 18px; }
.slms-exam-candidate { font-size: 13px; opacity: .9; }
.slms-exam-timer {
	background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 4px;
	display: flex; align-items: center; gap: 8px;
}
.slms-exam-timer-label { font-size: 12px; opacity: .85; }
.slms-exam-timer-value { font-family: "Courier New", monospace; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.slms-exam-timer-value.slms-timer-warn { color: #ffd86b; }
.slms-exam-timer-value.slms-timer-critical { color: #ff5252; animation: slms-flash 1s linear infinite; }
@keyframes slms-flash { 50% { opacity: .4; } }

/* Candidate identity block (avatar + name) — NTA shows student photo top-right */
.slms-exam-candidate {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; opacity: .95;
}
.slms-exam-candidate-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.7);
	background: rgba(255,255,255,.1); overflow: hidden;
}
.slms-exam-candidate-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slms-exam-candidate-name { line-height: 1.2; }
.slms-exam-candidate-name strong { display: block; font-size: 13px; }
.slms-exam-candidate-name small { font-size: 11px; opacity: .8; }

/* Language selector — cosmetic for now, matches NTA look */
.slms-exam-language {
	background: rgba(255,255,255,.15); color: #fff;
	border: 1px solid rgba(255,255,255,.3); border-radius: 4px;
	padding: 5px 10px; font-size: 12px;
	appearance: none; -webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
	padding-right: 24px;
}
.slms-exam-language option { color: #333; }

/* Section tabs */
.slms-exam-tabs {
	display: flex; background: #fff; border-bottom: 1px solid #e0e0e0;
	padding: 0 20px; overflow-x: auto;
}
.slms-exam-tab {
	background: none; border: none; border-bottom: 3px solid transparent;
	padding: 12px 20px; font-weight: 600; color: #555;
	white-space: nowrap;
}
.slms-exam-tab:hover { color: var(--slms-blue); }
.slms-exam-tab.slms-active {
	color: var(--slms-blue); border-bottom-color: var(--slms-blue);
}

/* Body: question pane + sidebar */
.slms-exam-body {
	display: grid; grid-template-columns: 1fr 320px; gap: 16px;
	padding: 16px 20px; flex: 1;
}

/* Horizontal status legend strip — NTA shows this directly above the question pane.
   Duplicates the sidebar legend but in a compact 1-row ribbon so candidates glance
   at it without taking their eyes far from the question. */
.slms-exam-status-strip {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; gap: 14px;
	background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
	padding: 8px 14px; font-size: 12px; color: #4a5568;
}
.slms-exam-status-strip-item {
	display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.slms-exam-status-strip .slms-pal { width: 14px; height: 14px; border-radius: 3px; }

/* Question pane */
.slms-exam-question-pane {
	background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
	padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
	position: relative;
}
.slms-exam-question-meta {
	display: flex; align-items: center; gap: 12px;
	padding-bottom: 10px; border-bottom: 1px dashed #e0e0e0;
}
.slms-exam-qnum { font-size: 18px; font-weight: 700; color: var(--slms-blue-dark); }
.slms-exam-qtype-badge {
	background: #eef5fd; color: var(--slms-blue); padding: 3px 10px;
	border-radius: 12px; font-size: 12px; font-weight: 600;
}
.slms-exam-qmarks { font-size: 13px; color: #666; margin-left: auto; }

.slms-exam-question-body {
	font-size: 16px; line-height: 1.7;
}
.slms-exam-question-body p { margin: 6px 0; }

.slms-exam-question-image { text-align: center; }
.slms-exam-question-image img { max-width: 100%; max-height: 360px; border-radius: 4px; border: 1px solid #e0e0e0; }
.slms-exam-image-placeholder {
	display: inline-block; padding: 30px 60px; background: #f5f7fa; color: #888;
	border-radius: 4px; font-style: italic;
}

/* Options */
.slms-exam-question-options { display: flex; flex-direction: column; gap: 10px; }
.slms-exam-option {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px; border: 1px solid #d0d7e0; border-radius: 6px;
	cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.slms-exam-option:hover { border-color: var(--slms-blue); background: #f7fbff; }
.slms-exam-option input[type="radio"] { margin: 0; accent-color: var(--slms-blue); }
.slms-exam-option input[type="radio"]:checked ~ .slms-option-letter,
.slms-exam-option:has(input:checked) { border-color: var(--slms-blue); background: #e7f1fb; }
.slms-option-letter {
	font-weight: 700; width: 28px; height: 28px; border-radius: 50%;
	background: #f0f0f0; color: #555; display: inline-flex;
	align-items: center; justify-content: center; font-size: 13px;
}
.slms-exam-option:has(input:checked) .slms-option-letter { background: var(--slms-blue); color: #fff; }
.slms-option-text { flex: 1; }
.slms-option-img-desc { font-size: 12px; color: #888; font-style: italic; margin-left: auto; }
.slms-option-img {
	max-width: 160px; max-height: 110px; object-fit: contain;
	display: block; margin-left: auto; background: #fff;
	border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px;
}

.slms-exam-numeric {
	padding: 10px 14px; border: 1px solid #d0d7e0; border-radius: 6px;
	max-width: 320px; font-size: 16px;
}

/* Virtual numeric keypad — mirrors NTA's on-screen 0-9 pad for numerical-value
   questions. Renders only when question_type === 'numerical'. */
.slms-exam-keypad {
	display: grid; grid-template-columns: repeat(3, 56px); gap: 8px;
	margin-top: 14px; padding: 10px; width: max-content;
	background: #f7f9fc; border: 1px solid #d0d7e0; border-radius: 6px;
}
.slms-exam-keypad button {
	height: 44px; font-size: 18px; font-weight: 600;
	background: #fff; border: 1px solid #d0d7e0; border-radius: 4px;
	cursor: pointer; transition: background .1s, border-color .1s;
}
.slms-exam-keypad button:hover { background: #eef2f7; border-color: var(--slms-blue); }
.slms-exam-keypad button:active { background: #dce4ed; transform: scale(.96); }
.slms-exam-keypad .slms-key-wide { grid-column: span 2; }
.slms-exam-keypad .slms-key-clear { color: var(--slms-red); border-color: #f3c2c2; }
.slms-exam-keypad .slms-key-back { color: var(--slms-blue-dark); }
.slms-exam-blank {
	padding: 10px 14px; border: 1px solid #d0d7e0; border-radius: 6px;
	margin: 4px 8px 4px 0; width: 200px;
}

.slms-match-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.slms-match-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; padding: 8px; background: #f7f9fc; border-radius: 4px; }
.slms-match-row select { padding: 6px; border: 1px solid #d0d7e0; border-radius: 4px; }

/* Action bar */
.slms-exam-action-bar {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
	border-top: 1px solid #e0e0e0; padding-top: 14px; margin-top: auto;
}
.slms-exam-action-bar .slms-btn-primary { margin-left: auto; }

/* Sidebar / palette */
.slms-exam-sidebar {
	background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
	padding: 16px; position: sticky; top: 80px; align-self: start;
	max-height: calc(100vh - 100px); overflow-y: auto;
}
.slms-exam-sidebar h4 { margin: 8px 0 10px; font-size: 14px; color: var(--slms-blue-dark); }
.slms-exam-legend-title { margin-top: 16px !important; }
.slms-exam-palette-toggle { display: none; }

.slms-palette-section { margin-bottom: 14px; }
.slms-palette-section h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; color: #555; letter-spacing: .5px; }

.slms-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slms-palette-btn {
	width: 100%; aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 4px;
	font-weight: 600; font-size: 13px; background: var(--slms-gray); color: #333;
	display: inline-flex; align-items: center; justify-content: center;
}
.slms-palette-btn.slms-pal-answered { background: var(--slms-green); color: #fff; }
.slms-palette-btn.slms-pal-not-answered { background: var(--slms-red); color: #fff; }
.slms-palette-btn.slms-pal-marked { background: var(--slms-purple); color: #fff; }
.slms-palette-btn.slms-pal-answered-marked { background: var(--slms-orange); color: #fff; position: relative; }
.slms-palette-btn.slms-pal-answered-marked::after {
	content: ''; position: absolute; right: 2px; top: 2px;
	width: 6px; height: 6px; background: var(--slms-green); border-radius: 50%;
}
.slms-palette-btn.slms-current { outline: 2px solid var(--slms-blue); outline-offset: 1px; }

.slms-exam-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.slms-exam-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #555; }
.slms-pal { width: 16px; height: 16px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.slms-pal.slms-pal-not-visited { background: var(--slms-gray); }
.slms-pal.slms-pal-answered { background: var(--slms-green); }
.slms-pal.slms-pal-not-answered { background: var(--slms-red); }
.slms-pal.slms-pal-marked { background: var(--slms-purple); }
.slms-pal.slms-pal-answered-marked { background: var(--slms-orange); }

/* Loading / error states */
.slms-exam-loading { padding: 40px; text-align: center; color: #888; font-style: italic; }
.slms-exam-error { padding: 14px; background: #fef2f2; border-left: 4px solid var(--slms-red); color: #b42323; border-radius: 4px; }

/* Sticky error card — shown when a question fails AI generation after both retry attempts.
   The palette can be clicked repeatedly; the card stays put until the user hits Retry. */
.slms-exam-error-card {
	display: flex; gap: 16px; padding: 20px 24px; border-radius: 6px;
	background: #fff5f5; border: 1px solid #f5c6c6; align-items: flex-start;
}
.slms-exam-error-icon { font-size: 32px; flex: 0 0 auto; line-height: 1; }
.slms-exam-error-body { flex: 1; }
.slms-exam-error-body strong { display: block; font-size: 15px; color: #a1282f; margin-bottom: 4px; }
.slms-exam-error-body p { margin: 4px 0 12px; color: #6b1f26; font-size: 13px; }
.slms-exam-error-body .slms-btn-retry { min-width: 180px; }

/* Modal */
.slms-exam-modal {
	position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.slms-exam-modal-dialog {
	background: #fff; border-radius: 8px; max-width: 640px; width: 100%;
	padding: 24px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
	max-height: 90vh; overflow-y: auto;
}
.slms-exam-modal-dialog h3 { margin-top: 0; color: var(--slms-blue-dark); }
.slms-exam-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.slms-exam-summary-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.slms-exam-summary-table th, .slms-exam-summary-table td {
	padding: 8px 10px; border: 1px solid #e0e0e0; text-align: center; font-size: 14px;
}
.slms-exam-summary-table th { background: #f5f7fa; }

/* Results screen */
.slms-exam-results { padding: 24px; max-width: 960px; margin: 0 auto; }
.slms-exam-results-card {
	background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
	padding: 24px; margin-bottom: 24px; text-align: center;
}
.slms-exam-results-card h2 { margin-top: 0; color: var(--slms-blue-dark); }
.slms-exam-score { font-size: 20px; margin: 12px 0; }
.slms-exam-score strong { font-size: 32px; color: var(--slms-blue); }
.slms-exam-stat-row { display: flex; justify-content: center; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.slms-exam-stat {
	padding: 14px 24px; border-radius: 6px; background: #f5f7fa;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	min-width: 100px; font-size: 12px; color: #666;
}
.slms-exam-stat span { font-size: 28px; font-weight: 700; }
.slms-stat-correct { background: #e7f6e9; color: var(--slms-green); }
.slms-stat-correct span { color: var(--slms-green); }
.slms-stat-wrong { background: #fdecec; color: var(--slms-red); }
.slms-stat-wrong span { color: var(--slms-red); }
.slms-stat-skipped { background: #f0f0f0; }

.slms-exam-review { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px; }
.slms-exam-review-card {
	border-left: 4px solid #ccc; padding: 12px 16px;
	margin: 10px 0; background: #fafbfc; border-radius: 4px;
}
.slms-exam-review-card.slms-verdict-correct { border-left-color: var(--slms-green); }
.slms-exam-review-card.slms-verdict-wrong { border-left-color: var(--slms-red); }
.slms-exam-review-card.slms-verdict-skip { border-left-color: #999; }
.slms-review-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.slms-review-verdict { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #eee; }
.slms-verdict-correct .slms-review-verdict { background: #e7f6e9; color: var(--slms-green); }
.slms-verdict-wrong .slms-review-verdict { background: #fdecec; color: var(--slms-red); }
.slms-review-body { margin: 6px 0; }
.slms-review-meta { font-size: 13px; color: #555; margin: 6px 0; }
.slms-review-meta code { background: #f0f0f0; padding: 1px 6px; border-radius: 3px; font-size: 12px; }
.slms-review-explanation summary { cursor: pointer; color: var(--slms-blue); font-weight: 600; font-size: 13px; }
.slms-review-explanation > div { margin-top: 8px; padding: 8px 12px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; }
.slms-btn-why-wrong { margin-top: 8px; }

/* Shown above the results card when the submit AJAX could not persist the
   attempt (network error, stale nonce, missing tables, etc). Students still
   see their score but understand it didn't land in the dashboard. */
.slms-exam-submit-warning {
	padding: 10px 14px; margin-bottom: 14px;
	background: #fff3e0; border-left: 4px solid var(--slms-orange);
	color: #ef6c00; border-radius: 4px; font-size: 13px;
}
.slms-wrong-explanation { margin-top: 8px; padding: 10px 14px; background: #fff5e6; border-left: 3px solid var(--slms-orange); border-radius: 4px; font-size: 14px; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1023px) {
	.slms-exam-body { grid-template-columns: 1fr; }
	.slms-exam-sidebar {
		position: fixed; top: 0; right: 0; bottom: 0;
		width: 320px; max-width: 85vw; max-height: 100vh;
		transform: translateX(100%); transition: transform .2s; z-index: 30;
		box-shadow: -4px 0 12px rgba(0,0,0,.2); border-radius: 0;
	}
	.slms-exam-sidebar.slms-open { transform: translateX(0); }
	.slms-exam-palette-toggle {
		display: block; position: fixed; bottom: 20px; right: 20px;
		background: var(--slms-blue); color: #fff; border: none;
		padding: 12px 18px; border-radius: 30px; font-weight: 600;
		box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 25;
	}
}

@media (max-width: 640px) {
	.slms-exam-app { font-size: 14px; }
	.slms-exam-header { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
	.slms-exam-header-right { width: 100%; justify-content: space-between; }
	.slms-exam-timer-value { font-size: 17px; }
	.slms-exam-body { padding: 10px; }
	.slms-exam-question-pane { padding: 14px; }
	.slms-exam-action-bar .slms-btn { flex: 1 1 calc(50% - 5px); font-size: 13px; padding: 10px 8px; }
	.slms-match-wrap { grid-template-columns: 1fr; }
	.slms-palette-grid { grid-template-columns: repeat(6, 1fr); }
}