/* IELTS Tests — exam player
 *
 * Layout follows the familiar online-test convention: a thin control strip,
 * a part header carrying the instructions, then a draggable split with the
 * text on the left and the answer sheet on the right.
 *
 * Colour is spent almost entirely on two things — the question navigator and
 * the highlighter — because those are the only places a student needs to be
 * pulled somewhere. Everything else stays out of the way of reading.
 */

.ielts-app {
	--ink:      #101828;
	--ink-soft: #667085;
	--paper:    #ffffff;
	--wash:     #f7f8fa;
	--rule:     #e4e7ec;
	--rule-2:   #d0d5dd;
	--accent:   #1358d6;
	--accent-d: #0f47ad;
	--accent-w: #eef4ff;
	--accent-t: #1b3a6e;
	--right:    #087443;
	--wrong:    #c01a26;
	--urgent:   #b42318;
	--mark-1:   #fff29a;
	--mark-2:   #ffc9c9;

	--passage-size: 16.5px;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	font-family: var(--sans);
	color: var(--ink);
	line-height: 1.5;
	margin: 0 auto;
	max-width: 1500px;
	box-sizing: border-box;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 10px;
	overflow: hidden;
}

/*
 * Themes wrap post content in a narrow column, which leaves an exam squeezed
 * into half the screen. This breaks the player out to the full viewport width
 * without needing a custom page template.
 */
.ielts-app.is-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	border-left: none;
	border-right: none;
}

/* ---------------- Title bar ---------------- */
.ielts-titlebar {
	background: var(--wash);
	border-bottom: 1px solid var(--rule);
	padding: 15px 20px;
	text-align: center;
}
.ielts-titlebar h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ink);
}
.ielts-app *,
.ielts-app *::before,
.ielts-app *::after { box-sizing: inherit; }
.ielts-app button { font-family: inherit; }
.ielts-app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fullscreen "focus" mode */
.ielts-app:fullscreen {
	border-radius: 0;
	border: none;
	max-width: none;
	height: 100%;
	overflow-y: auto;
}

/* ---------------- Buttons ---------------- */
.ielts-btn {
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	border-radius: 7px;
	padding: 11px 24px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .14s ease;
}
.ielts-btn:hover { background: var(--accent-d); border-color: var(--accent-d); }
.ielts-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.ielts-btn-ghost:hover { background: var(--wash); }

.ielts-chip {
	background: var(--paper);
	border: 1px solid var(--rule-2);
	border-radius: 6px;
	color: var(--ink);
	cursor: pointer;
	font-size: 12.5px;
	font-weight: 600;
	padding: 6px 11px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ielts-chip:hover { background: var(--wash); border-color: var(--ink-soft); }
.ielts-chip svg { width: 14px; height: 14px; }

/* ---------------- Start screen ---------------- */
.ielts-start { padding: 52px 32px; text-align: center; }
.ielts-start h2 {
	font-family: var(--serif);
	font-size: 31px;
	line-height: 1.2;
	margin: 0 0 8px;
}
.ielts-start-sub { color: var(--ink-soft); margin: 0 0 28px; font-size: 15px; }
.ielts-facts {
	display: inline-flex;
	flex-wrap: wrap;
	margin: 0 0 28px;
	border: 1px solid var(--rule);
	border-radius: 10px;
	overflow: hidden;
}
.ielts-fact { padding: 16px 32px; border-right: 1px solid var(--rule); }
.ielts-fact:last-child { border-right: none; }
.ielts-fact b {
	display: block;
	font-size: 27px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.ielts-fact span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ink-soft);
}
.ielts-rules {
	text-align: left;
	max-width: 470px;
	margin: 0 auto 28px;
	font-size: 14px;
	color: var(--ink-soft);
	padding-left: 20px;
}
.ielts-rules li { margin: 7px 0; }

/* ---------------- Control strip ---------------- */
.ielts-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
	position: sticky;
	top: 0;
	z-index: 40;
}
.ielts-strip-mid {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.ielts-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42%;
}
.ielts-timer {
	font-variant-numeric: tabular-nums;
	font-size: 19px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ielts-timer svg { width: 17px; height: 17px; opacity: .55; }
.ielts-timer.is-urgent { color: var(--urgent); }
.ielts-timer.is-urgent svg { opacity: 1; }

.ielts-menu-wrap { position: relative; }
.ielts-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: var(--paper);
	border: 1px solid var(--rule-2);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16,24,40,.12);
	min-width: 230px;
	padding: 6px;
	z-index: 60;
}
.ielts-menu[hidden] { display: none; }
.ielts-menu button {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 9px 12px;
	font-size: 13.5px;
	color: var(--ink);
	cursor: pointer;
	border-radius: 5px;
}
.ielts-menu button:hover { background: var(--wash); }
.ielts-menu hr { border: none; border-top: 1px solid var(--rule); margin: 5px 2px; }

/* ---------------- Part header ---------------- */
.ielts-parthead {
	padding: 11px 16px;
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}
.ielts-parthead-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ielts-partbadge {
	background: var(--ink);
	color: #fff;
	border-radius: 5px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 5px 12px;
}
.ielts-parttabs { display: flex; gap: 5px; }
.ielts-parttab {
	background: var(--wash);
	border: 1px solid var(--rule-2);
	border-radius: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	padding: 5px 12px;
	cursor: pointer;
}
.ielts-parttab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ielts-font { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ielts-font-btn {
	width: 27px;
	height: 27px;
	border: 1px solid var(--rule-2);
	background: var(--paper);
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	color: var(--ink);
}
.ielts-font-btn:hover { background: var(--wash); }
.ielts-parthead-sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; }

/* ---------------- Navigator ---------------- */
.ielts-nav {
	background: var(--wash);
	border-bottom: 1px solid var(--rule);
	padding: 9px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	position: sticky;
	top: 48px;
	z-index: 35;
}
/* When placed at the bottom (engnovate-style), don't stick to the top. */
.ielts-nav-bottom {
	position: sticky;
	top: auto;
	bottom: 0;
	border-bottom: none;
	border-top: 1px solid var(--rule);
	z-index: 35;
}
.ielts-nav-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ielts-nav-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--ink-soft);
	font-weight: 700;
	margin-right: 3px;
}
.ielts-dot {
	width: 28px;
	height: 28px;
	border: 1px solid var(--rule-2);
	background: var(--paper);
	border-radius: 5px;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	cursor: pointer;
	padding: 0;
	transition: background .12s ease, border-color .12s ease;
}
.ielts-dot:hover { border-color: var(--accent); color: var(--accent); }
.ielts-dot.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.ielts-dot.is-right { background: var(--right); border-color: var(--right); color: #fff; }
.ielts-dot.is-wrong { background: var(--wrong); border-color: var(--wrong); color: #fff; }
.ielts-progress {
	margin-left: auto;
	font-size: 12.5px;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

/* ---------------- Split panes ---------------- */
.ielts-panes {
	display: grid;
	grid-template-columns: 1fr 9px 1fr;
	min-height: 520px;
}
.ielts-pane {
	padding: 24px 26px;
	max-height: calc(100vh - 190px);
	overflow-y: auto;
}
.ielts-pane-questions { background: #fdfdfe; }

.ielts-split {
	background: var(--wash);
	border-left: 1px solid var(--rule);
	border-right: 1px solid var(--rule);
	cursor: col-resize;
	position: relative;
}
.ielts-split::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3px;
	height: 34px;
	border-left: 1px solid var(--rule-2);
	border-right: 1px solid var(--rule-2);
}
.ielts-split:hover { background: var(--accent-w); }
.ielts-app.is-dragging { user-select: none; cursor: col-resize; }

/* ---------------- Passage ---------------- */
.ielts-passage {
	font-size: var(--passage-size);
	line-height: 1.78;
	color: var(--ink);
	max-width: 78ch;
}
.ielts-passage h2 { font-size: 1.42em; line-height: 1.25; margin: 0 0 18px; font-weight: 700; }
.ielts-passage h3 { font-size: 1.1em; margin: 22px 0 10px; font-weight: 700; }
.ielts-passage p { margin: 0 0 17px; }
.ielts-passage strong { font-weight: 700; }
.ielts-passage table { border-collapse: collapse; width: 100%; margin-bottom: 17px; }
.ielts-passage th,
.ielts-passage td { border: 1px solid var(--rule); padding: 8px 10px; text-align: left; }
.ielts-passage mark { background: var(--mark-1); padding: 1px 0; border-radius: 2px; }
.ielts-passage mark.m2 { background: var(--mark-2); }

/* Selection toolbar */
.ielts-marker-bar {
	position: absolute;
	z-index: 70;
	display: flex;
	gap: 3px;
	background: var(--ink);
	padding: 4px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(16,24,40,.24);
}
.ielts-marker-bar[hidden] { display: none; }
.ielts-marker-bar button {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	background: rgba(255,255,255,.12);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ielts-marker-bar button:hover { background: rgba(255,255,255,.26); }
.ielts-marker-bar .sw { width: 15px; height: 15px; border-radius: 3px; display: block; }
.ielts-marker-bar .sw-1 { background: var(--mark-1); }
.ielts-marker-bar .sw-2 { background: var(--mark-2); }

/* ---------------- Question groups ---------------- */
.ielts-group { margin-bottom: 30px; }
.ielts-group-title { font-size: 21px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
.ielts-group-instructions {
	background: var(--accent-w);
	border-left: 3px solid var(--accent);
	border-radius: 0 6px 6px 0;
	padding: 11px 14px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--accent-t);
	margin-bottom: 16px;
}
.ielts-group-instructions p { margin: 0 0 8px; }
.ielts-group-instructions p:last-child { margin-bottom: 0; }

/* ---------------- Questions ---------------- */
.ielts-q { padding: 15px 0; border-bottom: 1px solid var(--rule); }
.ielts-q:last-child { border-bottom: none; }
.ielts-q-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 11px; }
.ielts-q-num {
	flex: none;
	min-width: 27px;
	height: 27px;
	padding: 0 6px;
	border: 1px solid var(--rule-2);
	border-radius: 5px;
	background: var(--paper);
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ielts-q.is-answered .ielts-q-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.ielts-q-text { font-size: 14.8px; line-height: 1.55; padding-top: 3px; }

.ielts-opts { display: grid; gap: 6px; padding-left: 38px; }
.ielts-opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border: 1px solid var(--rule);
	border-radius: 7px;
	padding: 9px 12px;
	cursor: pointer;
	background: var(--paper);
	font-size: 14.3px;
	line-height: 1.45;
	transition: border-color .12s ease, background .12s ease;
}
.ielts-opt:hover { border-color: var(--accent); background: var(--accent-w); }
.ielts-opt input { margin: 3px 0 0; flex: none; accent-color: var(--accent); }
.ielts-opt.is-picked { border-color: var(--accent); background: var(--accent-w); }
.ielts-opt-marker {
	font-weight: 700;
	color: var(--ink-soft);
	flex: none;
	min-width: 18px;
	font-size: 13px;
	padding-top: 1px;
}
.ielts-opt.is-picked .ielts-opt-marker { color: var(--accent); }

.ielts-text-in {
	margin-left: 38px;
	width: calc(100% - 38px);
	border: 1px solid var(--rule-2);
	border-bottom-width: 2px;
	border-radius: 6px;
	padding: 9px 12px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--ink);
	background: var(--paper);
}
.ielts-text-in:focus { outline: none; border-color: var(--accent); background: var(--accent-w); }

/* Inline blank: a content-sized field that sits inside the sentence flow
   (used for note-completion and summary-completion questions). */
.ielts-q-inline .ielts-q-text {
	display: inline;
	line-height: 2.1;
}
.ielts-q-inline .ielts-q-text > span { white-space: normal; }
.ielts-blank-in {
	width: 11ch;
	min-width: 8ch;
	max-width: 60%;
	margin: 0 4px;
	padding: 2px 8px;
	border: 1px solid var(--rule-2);
	border-bottom-width: 2px;
	border-radius: 5px;
	font-size: 14.5px;
	font-family: inherit;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper);
	vertical-align: baseline;
}
.ielts-blank-in:focus { outline: none; border-color: var(--accent); background: var(--accent-w); }
.ielts-q-inline.is-answered .ielts-q-num { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Drag & drop (summary with word bank) ---- */
.ielts-q-drag .ielts-q-text { line-height: 2.4; }
.ielts-slot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 92px;
	min-height: 30px;
	margin: 0 5px;
	padding: 3px 10px;
	border: 1px dashed var(--rule-2);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink-soft, #888);
	font-size: 13px;
	font-style: italic;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	transition: border-color .12s, background .12s;
}
.ielts-slot.is-filled {
	border-style: solid;
	border-color: var(--accent);
	background: var(--accent-w);
	color: var(--ink);
	font-style: normal;
	font-weight: 600;
}
.ielts-slot.is-over { border-color: var(--accent); background: var(--accent-w); }
.ielts-slot-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 3px;
	border-radius: 4px;
	background: var(--accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
}
.ielts-bank-hint {
	margin: 18px 0 8px;
	font-size: 12.5px;
	font-style: italic;
	color: var(--ink-soft, #777);
}
.ielts-bank {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 14px;
	border: 1px solid var(--rule);
	border-radius: 8px;
	background: var(--paper);
}
.ielts-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid var(--rule-2);
	border-radius: 7px;
	background: var(--paper);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: grab;
	user-select: none;
	transition: border-color .12s, background .12s, opacity .12s, transform .05s;
}
.ielts-chip:hover { border-color: var(--accent); }
.ielts-chip:active { cursor: grabbing; transform: scale(.98); }
.ielts-chip.is-armed { border-color: var(--accent); background: var(--accent-w); box-shadow: 0 0 0 2px var(--accent-w); }
.ielts-chip.is-used { opacity: .35; pointer-events: none; }
.ielts-chip-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 3px;
	border-radius: 4px;
	background: var(--muted, #eee);
	color: var(--ink-soft, #555);
	font-size: 11px;
	font-weight: 700;
}

/* ---- Heading drag (boxes inside the passage) ---- */
.ielts-hslot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 14px;
	padding: 10px 14px;
	border: 1px dashed var(--rule-2);
	border-radius: 7px;
	background: var(--paper);
	cursor: pointer;
	min-height: 44px;
	transition: border-color .12s, background .12s;
}
.ielts-hslot.is-filled { border-style: solid; border-color: var(--accent); background: var(--accent-w); }
.ielts-hslot.is-over { border-color: var(--accent); background: var(--accent-w); }
.ielts-hslot-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	border: 1px solid var(--rule-2);
	border-radius: 5px;
	background: var(--paper);
	font-size: 13px;
	font-weight: 700;
}
.ielts-hslot-text { font-size: 14px; font-style: italic; color: var(--ink-soft, #888); }
.ielts-hslot.is-filled .ielts-hslot-text { font-style: normal; font-weight: 600; color: var(--ink); }

.ielts-hlist { display: flex; flex-direction: column; gap: 10px; }
.ielts-hopt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border: 1px solid var(--rule-2);
	border-radius: 8px;
	background: var(--paper);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	cursor: grab;
	user-select: none;
	transition: border-color .12s, background .12s, opacity .12s;
}
.ielts-hopt:hover { border-color: var(--accent); }
.ielts-hopt:active { cursor: grabbing; }
.ielts-hopt.is-armed { border-color: var(--accent); background: var(--accent-w); box-shadow: 0 0 0 2px var(--accent-w); }
.ielts-hopt.is-used { opacity: .35; pointer-events: none; }
.ielts-hopt-mark {
	flex: none;
	min-width: 26px;
	font-weight: 700;
	color: var(--ink-soft, #555);
}

/* Matrix: several matching questions sharing one set of options */
.ielts-matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
.ielts-matrix th, .ielts-matrix td { border: 1px solid var(--rule); }
.ielts-matrix thead th {
	background: var(--wash);
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 6px;
	text-align: center;
	width: 46px;
}
.ielts-matrix thead th:first-child { width: auto; }
.ielts-matrix td { padding: 10px; vertical-align: middle; }
.ielts-matrix td.ielts-matrix-cell { text-align: center; padding: 8px 4px; }
.ielts-matrix tr.is-answered td:first-child { background: #fbfdff; }
.ielts-matrix-stmt { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ielts-matrix input { accent-color: var(--accent); width: 17px; height: 17px; cursor: pointer; }

/* ---------------- Footer actions ---------------- */
.ielts-foot {
	padding: 22px 0 4px;
	border-top: 2px solid var(--ink);
	margin-top: 22px;
	text-align: center;
}
.ielts-foot-note { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; }

/* ---------------- Results ---------------- */
.ielts-score { background: var(--ink); color: #fff; padding: 36px 28px; text-align: center; }
.ielts-score-band {
	font-size: 60px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ielts-score-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .13em;
	opacity: .65;
	margin-top: 6px;
}
.ielts-score-raw { margin-top: 15px; font-size: 15px; opacity: .92; font-variant-numeric: tabular-nums; }

.ielts-review { padding: 24px 28px; }
.ielts-review h3 { font-size: 19px; margin: 0 0 14px; }
.ielts-review-row {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 14px;
}
.ielts-review-row:last-child { border-bottom: none; }
.ielts-review-num {
	flex: none;
	width: 27px;
	height: 27px;
	border-radius: 5px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.ielts-review-num.is-right { background: var(--right); }
.ielts-review-num.is-wrong { background: var(--wrong); }
.ielts-review-body { flex: 1 1 auto; min-width: 0; }
.ielts-review-q { margin-bottom: 5px; line-height: 1.5; }
.ielts-review-a { font-size: 13px; color: var(--ink-soft); }
.ielts-review-a .yours-wrong { color: var(--wrong); font-weight: 600; }
.ielts-review-a .theirs { color: var(--right); font-weight: 600; }
.ielts-actions { padding: 0 28px 26px; display: flex; gap: 10px; flex-wrap: wrap; }

.ielts-empty { color: #667085; font-style: italic; padding: 20px; }
.ielts-error {
	background: #fef3f2;
	border-left: 4px solid var(--wrong);
	padding: 12px 16px;
	color: #912018;
	font-size: 14px;
	margin: 16px;
	border-radius: 0 6px 6px 0;
}

/* ---------------- Mobile ---------------- */
.ielts-mobtabs { display: none; }
@media (max-width: 900px) {
	.ielts-mobtabs { display: flex; border-bottom: 1px solid var(--rule); }
	.ielts-mobtab {
		flex: 1 1 50%;
		background: var(--wash);
		border: none;
		border-right: 1px solid var(--rule);
		padding: 11px;
		font-size: 13px;
		font-weight: 600;
		color: var(--ink-soft);
		cursor: pointer;
	}
	.ielts-mobtab:last-child { border-right: none; }
	.ielts-mobtab.is-on { background: var(--paper); color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }

	.ielts-panes { grid-template-columns: 1fr !important; }
	.ielts-split { display: none; }
	.ielts-pane { max-height: none; overflow: visible; }
	.ielts-panes[data-show="questions"] .ielts-pane-passage { display: none; }
	.ielts-panes[data-show="passage"] .ielts-pane-questions { display: none; }
	.ielts-nav { position: static; }
	.ielts-opts, .ielts-text-in { padding-left: 0; margin-left: 0; width: 100%; }
	.ielts-matrix thead th { width: 34px; font-size: 11.5px; padding: 7px 3px; }
	.ielts-matrix td { padding: 8px 6px; font-size: 13.5px; }
	.ielts-fact { padding: 14px 20px; }
	.ielts-titlebar { padding: 12px 14px; }
	.ielts-titlebar h2 { font-size: 16px; }
	.ielts-passage { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ielts-app * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
	.ielts-strip, .ielts-nav, .ielts-mobtabs, .ielts-actions, .ielts-split { display: none; }
	.ielts-pane { max-height: none; overflow: visible; }
	.ielts-panes { grid-template-columns: 1fr; }
}

/* Diagram / image-label questions */
.ielts-q-with-image { margin-bottom: 18px; }
.ielts-q-image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 0 14px;
	border: 1px solid #e3e7ee;
	border-radius: 8px;
	background: #fff;
}

/* Pointer-drag (works across panes + touch) */
.ielts-drag-ghost {
	box-shadow: 0 8px 24px rgba(0,0,0,.22);
	border-radius: 8px;
	background: #fff;
	opacity: .95;
}
.ielts-hopt.is-dragging,
.ielts-chip.is-dragging { opacity: .4; }
.ielts-hopt, .ielts-chip { cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; }
.ielts-hopt:active, .ielts-chip:active { cursor: grabbing; }