@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ---------- Theme isolation ----------
   Themes sometimes apply their own global styling to <a>, <button>,
   headings etc (gradient/clip-path text effects, custom hover/focus
   states, colored underlines, focus outlines/box-shadows) that bleeds
   into whatever we render, since we're just regular HTML on the page
   like anything else. This resets the handful of properties themes
   most commonly hijack, scoped to our own containers only — including
   explicitly on :hover/:focus/:active, since that's exactly where
   theme button styling usually kicks in — so our actual component
   styles (further down this file, which come after this in the
   cascade) are what actually show, in every state, not whatever the
   active theme happens to do with a plain <a>/<button> tag. */
.tetp-quiz a, .tetp-quiz button,
.tetp-account a, .tetp-account button,
.tetp-paywall a, .tetp-paywall button,
.tetp-product-page a, .tetp-product-page button,
.tetp-quiz a:hover, .tetp-quiz a:focus, .tetp-quiz a:active, .tetp-quiz a:visited,
.tetp-quiz button:hover, .tetp-quiz button:focus, .tetp-quiz button:active,
.tetp-account a:hover, .tetp-account a:focus, .tetp-account a:active, .tetp-account a:visited,
.tetp-account button:hover, .tetp-account button:focus, .tetp-account button:active,
.tetp-paywall a:hover, .tetp-paywall a:focus, .tetp-paywall a:active, .tetp-paywall a:visited,
.tetp-paywall button:hover, .tetp-paywall button:focus, .tetp-paywall button:active,
.tetp-product-page a:hover, .tetp-product-page a:focus, .tetp-product-page a:active, .tetp-product-page a:visited,
.tetp-product-page button:hover, .tetp-product-page button:focus, .tetp-product-page button:active {
	-webkit-text-fill-color: unset;
	background-clip: unset;
	-webkit-background-clip: unset;
	text-shadow: none !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none;
	letter-spacing: normal;
	text-transform: none;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.tetp-quiz h1, .tetp-quiz h2, .tetp-quiz h3, .tetp-quiz h4,
.tetp-account h1, .tetp-account h2, .tetp-account h3, .tetp-account h4,
.tetp-paywall h1, .tetp-paywall h2, .tetp-paywall h3, .tetp-paywall h4,
.tetp-product-page h1, .tetp-product-page h2, .tetp-product-page h3, .tetp-product-page h4 {
	-webkit-text-fill-color: unset;
	background: none;
	background-clip: unset;
	-webkit-background-clip: unset;
	text-shadow: none;
	border: none;
	letter-spacing: normal;
}

:root {
	--tetp-ink: #1B2A4A;
	--tetp-ink-soft: #3C4A6B;
	--tetp-paper: #F4F6FB;
	--tetp-card: #FFFFFF;
	--tetp-line: #D7DCE8;
	--tetp-gold: #C68A2E;
	--tetp-correct: #2E7D5B;
	--tetp-correct-bg: #E7F5EE;
	--tetp-wrong: #B0392C;
	--tetp-wrong-bg: #FBEBE8;
	--tetp-muted: #6B7385;
}

.tetp-quiz {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--tetp-ink);
	background: var(--tetp-paper);
	border: 1px solid var(--tetp-line);
	border-radius: 10px;
	max-width: 780px;
	margin: 16px auto;
	box-shadow: 0 1px 0 rgba(27,42,74,0.04);
	overflow: hidden;
}

.tetp-quiz * { box-sizing: border-box; }

.tetp-quiz .tetp-mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Header strip: looks like an admit-card header ---------- */
.tetp-head {
	background: var(--tetp-ink);
	color: #fff;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.tetp-head h3 {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 20px;
	margin: 0;
	letter-spacing: 0.2px;
	color: #fff;
}
.tetp-head .tetp-seal {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--tetp-gold);
	border: 1px solid rgba(198,138,46,0.6);
	border-radius: 20px;
	padding: 4px 8px;
	white-space: nowrap;
}
.tetp-head-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Item-type badge (Mock Test / Previous Year Paper / MCQ / Practice Set).
   Default variant sits on the dark .tetp-head strip; the --muted variant
   is for use on light backgrounds like the account dashboard table. */
.tetp-type-badge {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--tetp-gold) !important;
	background: transparent !important;
	border: 1px solid rgba(198,138,46,0.6) !important;
	border-radius: 20px;
	padding: 3px 8px;
	white-space: nowrap;
}
.tetp-type-badge--muted {
	color: var(--tetp-ink-soft) !important;
	background: var(--tetp-paper) !important;
	border: 1px solid var(--tetp-line) !important;
}

/* ---------- Intro / start screen ---------- */
.tetp-intro { padding: 17px 16px; }
.tetp-intro p { color: var(--tetp-ink-soft); line-height: 1.6; }
.tetp-intro-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px,1fr));
	gap: 8px;
	margin: 12px 0 14px;
}
.tetp-intro-stats div {
	background: var(--tetp-card);
	border: 1px solid var(--tetp-line);
	border-radius: 8px;
	padding: 8px 10px;
}
.tetp-intro-stats .tetp-stat-num {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--tetp-ink);
	display: block;
}
.tetp-intro-stats .tetp-stat-label {
	font-size: 12px;
	color: var(--tetp-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tetp-resume-banner {
	background: #FFF8E6;
	border: 1px solid #F0C36D;
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 14px;
}
.tetp-resume-banner p { margin: 0 0 10px; color: #7A5A12; font-size: 14px; }
.tetp-resume-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tetp-mode-choice { margin: 12px 0; }
.tetp-mode-choice legend {
	font-weight: 600;
	margin-bottom: 6px;
}
.tetp-mode-choice label {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 8px;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 8px;
	margin-bottom: 6px;
	cursor: pointer;
	background: var(--tetp-card) !important;
	color: var(--tetp-ink) !important;
}
.tetp-mode-choice input { accent-color: var(--tetp-ink); }

.tetp-btn {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	border: none !important;
	border-radius: 7px;
	padding: 8px 13px;
	box-sizing: border-box;
	cursor: pointer;
	transition: transform 0.05s ease, opacity 0.15s ease;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-btn:active { transform: scale(0.98); }
.tetp-btn-primary,
a.tetp-btn.tetp-btn-primary,
button.tetp-btn.tetp-btn-primary {
	background: var(--tetp-ink) !important;
	background-color: var(--tetp-ink) !important;
	color: #ffffff !important;
	border: none !important;
	-webkit-text-fill-color: #ffffff !important;
	background-clip: initial !important;
	-webkit-background-clip: initial !important;
	text-shadow: none !important;
	opacity: 1 !important;
}
.tetp-btn-primary:hover,
a.tetp-btn.tetp-btn-primary:hover,
button.tetp-btn.tetp-btn-primary:hover {
	opacity: 0.9 !important;
	background: var(--tetp-ink) !important;
	background-color: var(--tetp-ink) !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
.tetp-btn-gold { background: var(--tetp-gold) !important; color: #fff !important; }
.tetp-btn-gold:hover { opacity: 0.9 !important; background: var(--tetp-gold) !important; color: #fff !important; }
.tetp-btn-ghost { background: transparent !important; color: var(--tetp-ink) !important; border: 1px solid var(--tetp-line) !important; }
.tetp-btn-ghost:hover { background: #fff !important; }
/* On a dark background (the coupon "Apply" button, inside the price
   box), the regular ghost hover above would swap in a WHITE background
   under WHITE text — invisible again. Give it its own hover instead: a
   soft translucent white tint that still reads against the dark card. */
.tetp-btn-ghost-ondark:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: #fff !important; }
.tetp-btn-ghost-ondark:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tetp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Running test layout ---------- */
.tetp-run { display: grid; grid-template-columns: 1fr 172px; }
@media (max-width: 640px) {
	.tetp-run { grid-template-columns: 1fr; }
	.tetp-nav-panel { order: 2; border-top: 1px solid var(--tetp-line); border-left: none !important; }
}

.tetp-run-main { padding: 14px 16px; border-right: 1px solid var(--tetp-line); }

.tetp-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 11px;
}
.tetp-progress-text {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: var(--tetp-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.tetp-timer {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 15px;
	font-weight: 600;
	background: var(--tetp-card);
	border: 1px solid var(--tetp-line);
	border-radius: 6px;
	padding: 4px 8px;
	color: var(--tetp-ink);
}
.tetp-timer.tetp-timer-low { color: var(--tetp-wrong); border-color: var(--tetp-wrong); }

.tetp-q-text {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.5;
	margin: 4px 0 12px;
}

/* ---------- OMR-style bubble options ---------- */
.tetp-options { display: flex; flex-direction: column; gap: 8px; }
.tetp-option {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 8px;
	background: var(--tetp-card) !important;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.tetp-option:hover { border-color: var(--tetp-ink-soft) !important; }
.tetp-option .tetp-bubble {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--tetp-ink-soft) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--tetp-ink-soft) !important;
	background: transparent !important;
	flex-shrink: 0;
}
.tetp-option.tetp-selected { border-color: var(--tetp-ink) !important; background: #EEF1FA !important; }
.tetp-option.tetp-selected .tetp-bubble { background: var(--tetp-ink) !important; color: #fff !important; border-color: var(--tetp-ink) !important; }
.tetp-option .tetp-option-text { font-size: 14.5px; line-height: 1.5; color: var(--tetp-ink) !important; }

.tetp-option.tetp-correct { border-color: var(--tetp-correct) !important; background: var(--tetp-correct-bg) !important; }
.tetp-option.tetp-correct .tetp-bubble { background: var(--tetp-correct) !important; color: #fff !important; border-color: var(--tetp-correct) !important; }
.tetp-option.tetp-wrong { border-color: var(--tetp-wrong) !important; background: var(--tetp-wrong-bg) !important; }
.tetp-option.tetp-wrong .tetp-bubble { background: var(--tetp-wrong) !important; color: #fff !important; border-color: var(--tetp-wrong) !important; }

.tetp-explain {
	margin-top: 8px;
	padding: 8px 8px;
	background: #FBF7EE;
	border-left: 3px solid var(--tetp-gold);
	border-radius: 4px;
	font-size: 16px;
	color: var(--tetp-ink-soft);
	line-height: 1.55;
}
.tetp-explain-text {
	margin-top: 8px;
}

/* ---------- Question/option images (both exam-run and review screens) ---------- */
.tetp-option-body,
.tetp-exam-option .tetp-option-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.tetp-q-image {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 340px;
	border-radius: 8px;
	margin: 8px 0;
	object-fit: contain;
}
.tetp-option-image {
	display: block;
	max-width: 260px;
	width: auto;
	height: auto;
	max-height: 100px;
	border-radius: 6px;
	object-fit: contain;
}

.tetp-run-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}
.tetp-run-footer .tetp-right-actions { display: flex; gap: 6px; }

/* ---------- Roll-number style question navigator ---------- */
.tetp-nav-panel { padding: 12px 10px; }
.tetp-nav-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--tetp-muted);
	margin-bottom: 8px;
	font-weight: 600;
}
.tetp-nav-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
}
.tetp-nav-cell {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	border: 1px solid var(--tetp-line) !important;
	background: var(--tetp-card) !important;
	color: var(--tetp-ink-soft) !important;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-nav-cell.tetp-nav-answered { background: var(--tetp-ink) !important; border-color: var(--tetp-ink) !important; color: #fff !important; }
.tetp-nav-cell.tetp-nav-current { outline: 2px solid var(--tetp-gold); outline-offset: 1px; }

.tetp-nav-legend { margin-top: 10px; font-size: 11.5px; color: var(--tetp-muted); }
.tetp-nav-legend div { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.tetp-nav-legend span.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- Results screen ---------- */
.tetp-results { padding: 12px 11px; }
.tetp-score-banner {
	text-align: center;
	padding: 16px 13px;
	border-radius: 10px;
	background: var(--tetp-card);
	border: 1px solid var(--tetp-line);
	margin-bottom: 13px;
}
.tetp-score-banner .tetp-score-num {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 44px;
	color: var(--tetp-ink);
}
.tetp-score-banner .tetp-score-pct { font-size: 16px; color: var(--tetp-muted); margin-top: 4px; }
.tetp-score-banner .tetp-verdict {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 20px;
}
.tetp-verdict.pass { background: var(--tetp-correct-bg); color: var(--tetp-correct); }
.tetp-verdict.fail { background: var(--tetp-wrong-bg); color: var(--tetp-wrong); }

.tetp-summary-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 14px;
}
.tetp-summary-row div {
	text-align: center;
	padding: 8px 6px;
	border-radius: 8px;
	border: 1px solid var(--tetp-line);
	background: var(--tetp-card);
}
.tetp-summary-row .num { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 20px; display: block; }
.tetp-summary-row .lbl { font-size: 11px; color: var(--tetp-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.tetp-summary-row .correct .num { color: var(--tetp-correct); }
.tetp-summary-row .wrong .num { color: var(--tetp-wrong); }

/* Rank/percentile/accuracy card — starts as a "calculating…" placeholder
   (renderResults() in quiz.js) and is filled in by renderRankCard() once
   the save-result AJAX call returns with the real numbers. */
.tetp-rank-card {
	margin-bottom: 14px;
	padding: 12px 11px;
	border-radius: 10px;
	border: 1px solid var(--tetp-line);
	background: var(--tetp-card);
}
.tetp-rank-card--loading {
	text-align: center;
	padding: 16px 11px;
}
.tetp-rank-loading-text {
	font-size: 13px;
	color: var(--tetp-muted);
}
.tetp-rank-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
}
.tetp-rank-tiles .tetp-rank-tile {
	text-align: center;
	padding: 8px 6px;
	border-radius: 8px;
	border: 1px solid var(--tetp-line);
	background: var(--tetp-paper);
}
.tetp-rank-tile-num {
	display: block;
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	font-size: 19px;
	color: var(--tetp-gold);
}
.tetp-rank-tile-label {
	font-size: 10.5px;
	color: var(--tetp-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.tetp-rank-tile-label small { text-transform: none; letter-spacing: 0; display: block; font-size: 10px; }

.tetp-top-scorers { margin-top: 12px; }
.tetp-top-scorers-title {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--tetp-ink);
	margin-bottom: 6px;
}
.tetp-top-scorers ol {
	list-style: decimal;
	margin: 0;
	padding-left: 20px;
}
.tetp-top-scorers li {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 3px 0;
	border-bottom: 1px dashed var(--tetp-line);
}
.tetp-top-scorers li:last-child { border-bottom: none; }
.tetp-top-scorer-score { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--tetp-ink); }

/* "My Results" history table: compact rank chip next to the percentile pill */
.tetp-rank-chip {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tetp-ink-soft) !important;
	margin-right: 4px;
	white-space: nowrap;
}

/* Standalone "Leaderboard" dashboard tab: pill picker to switch between the
   student's attempted tests, plus a full ranked table per test. */
.tetp-lb-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	max-height: 220px;
	overflow-y: auto;
	padding: 2px 2px 2px 0;
}
.tetp-lb-search {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 8px 12px;
	margin-bottom: 10px;
	border: 1.5px solid var(--tetp-line) !important;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--tetp-ink) !important;
	background: #fff !important;
	box-sizing: border-box;
}
.tetp-lb-search:focus { outline: none; border-color: var(--tetp-ink) !important; }
.tetp-lb-search-empty { font-size: 13px; color: var(--tetp-ink-soft) !important; padding: 8px 0; }
.tetp-lb-pick {
	font: inherit;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--tetp-line) !important;
	background: var(--tetp-paper) !important;
	color: var(--tetp-ink-soft) !important;
	text-decoration: none !important;
	cursor: pointer;
}
.tetp-lb-pick.active { background: var(--tetp-ink) !important; border-color: var(--tetp-ink) !important; color: #fff !important; }
.tetp-lb-pick:not(.active):hover { background: #DCE3F2 !important; color: var(--tetp-ink-soft) !important; }

/* Subject tabs sit above the test picker — a short, fixed-length row (one
   per Subject term, plus "Other" for untagged tests) that stays the same
   size no matter how many tests a student has attempted, so the picker
   below it never grows into a long wall of pills again. Only one
   .tetp-lb-picker-group (the active subject's test list) is shown at a
   time; switching tabs just toggles which one, same as .tetp-lb-board. */
.tetp-lb-subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tetp-line);
}
.tetp-lb-subject-tab {
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid var(--tetp-line) !important;
	background: #fff !important;
	color: var(--tetp-ink) !important;
	text-decoration: none !important;
	cursor: pointer;
}
.tetp-lb-subject-tab.active { background: var(--tetp-gold, #C9971C) !important; border-color: var(--tetp-gold, #C9971C) !important; color: #fff !important; }
.tetp-lb-subject-tab:not(.active):hover { background: var(--tetp-paper) !important; color: var(--tetp-ink) !important; }

.tetp-lb-picker-group { display: none; }
.tetp-lb-picker-group.active { display: block; }

.tetp-lb-board { display: none; }
.tetp-lb-board.active { display: block; }

.tetp-lb-mine {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tetp-ink);
	background: var(--tetp-gold-bg, #FBF3DC);
	border: 1px solid var(--tetp-gold, #C9971C);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 10px;
}

.tetp-lb-table tr.tetp-lb-row--me { background: var(--tetp-gold-bg, #FBF3DC); font-weight: 600; }
.tetp-lb-you-tag {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: var(--tetp-gold, #C9971C);
	color: #fff;
	border-radius: 4px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: middle;
}

/* Final results screen: per-section score breakdown table (Full Mock
   Tests only — reuses the same table look as the pre-submit summary
   modal, .tetp-submit-table, for visual consistency). */
.tetp-section-results { margin-bottom: 14px; }
.tetp-section-results-title {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--tetp-ink);
	text-align: center;
	background: #EAF3FB;
	padding: 6px 8px;
	border-radius: 6px;
	margin-bottom: 8px;
}
.tetp-section-results .tetp-submit-table-wrap { padding: 0; border: 1px solid var(--tetp-line); border-radius: 8px; }
.tetp-sr-correct { color: var(--tetp-correct); font-weight: 600; }
.tetp-sr-wrong { color: var(--tetp-wrong); font-weight: 600; }

.tetp-results-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 4px; }

.tetp-review-list { margin-top: 10px; display: none; }
.tetp-review-list.tetp-open { display: block; }
.tetp-review-item {
	padding: 8px 0;
	border-top: 1px solid var(--tetp-line);
}
.tetp-review-item:first-child { border-top: none; }
.tetp-review-item .tetp-q-text { font-size: 15px; margin: 0 0 6px; }

.tetp-review-heading {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--tetp-ink);
	margin-bottom: 8px;
}
.tetp-review-section-tabs { border-bottom: none; border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; }
.tetp-review-section-body .tetp-review-item:first-child { border-top: none; }

/* =====================================================================
   Exam interface — question-paper style layout (palette, timer, etc.)
   ===================================================================== */
.tetp-quiz.tetp-quiz { max-width: none; border-radius: 10px; }

/* ---------- Fullscreen mode: make the element itself scrollable ---------- */
/* Without this, mobile browsers put the fullscreen element in a fixed-size
   box with no scroll context, trapping content (e.g. the Submit button)
   below the visible area. */
.tetp-quiz:fullscreen,
.tetp-quiz:-webkit-full-screen,
.tetp-quiz:-moz-full-screen,
.tetp-quiz:-ms-fullscreen {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	height: 100%;
	background: var(--tetp-paper);
}
.tetp-quiz:fullscreen .tetp-exam-body,
.tetp-quiz:-webkit-full-screen .tetp-exam-body,
.tetp-quiz:-moz-full-screen .tetp-exam-body,
.tetp-quiz:-ms-fullscreen .tetp-exam-body {
	min-height: 0;
}
.tetp-quiz::backdrop { background: var(--tetp-paper); }

/* Fallback for browsers without the Fullscreen API (notably iOS Safari) */
.tetp-quiz.tetp-fake-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 0;
	margin: 0;
}

.tetp-exam {
	background: var(--tetp-paper);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--tetp-ink);
}

/* ---------- Top bar: brand, countdown, fullscreen/pause ---------- */
.tetp-exam-topbar {
	background: var(--tetp-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 13px;
	flex-wrap: wrap;
}
.tetp-exam-brand {
	font-family: 'Zilla Slab', serif;
	font-weight: 700;
	font-size: 17px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tetp-exam-timewrap { display: flex; align-items: center; gap: 6px; }
.tetp-exam-timelabel { font-size: 12.5px; color: #C7CEE0; white-space: nowrap; }
.tetp-exam-timebox {
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
}
.tetp-exam-timebox.tetp-timer-low { background: var(--tetp-wrong); border-color: var(--tetp-wrong); }
.tetp-exam-topbtns { display: flex; gap: 6px; }
.tetp-exam-topbtn {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.4) !important;
	border-radius: 6px;
	padding: 5px 8px;
	cursor: pointer;
	white-space: nowrap;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-exam-topbtn:hover { background: rgba(255,255,255,0.12) !important; }
.tetp-exam-pausebtn { background: var(--tetp-gold) !important; border-color: var(--tetp-gold) !important; }
.tetp-exam-pausebtn:hover { opacity: 0.9; background: var(--tetp-gold) !important; }

/* ---------- Question meta bar: Question No. / Marks / Time ---------- */
.tetp-exam-qbar {
	background: #fff;
	border-bottom: 1px solid var(--tetp-line);
	padding: 8px 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.tetp-exam-qno { font-weight: 700; font-size: 15px; }
.tetp-exam-qmeta { display: flex; align-items: center; gap: 14px; }
.tetp-exam-meta-block { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tetp-muted); }
.tetp-exam-meta-block .tetp-mono { color: var(--tetp-ink); font-weight: 600; font-size: 13.5px; }
.tetp-pill {
	display: inline-block;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	color: #fff !important;
	border-radius: 20px;
	padding: 2px 7px;
}
.tetp-pill-pos { background: var(--tetp-correct) !important; }
.tetp-pill-neg { background: var(--tetp-wrong) !important; }

/* ---------- Body: main question panel + right sidebar ---------- */
.tetp-exam-body {
	display: grid;
	grid-template-columns: 1fr 300px;
	align-items: start;
}
@media (max-width: 780px) {
	.tetp-exam-body { grid-template-columns: 1fr; }
	.tetp-exam-side { border-left: none !important; border-top: 1px solid var(--tetp-line); }
}

/* ---------- Mobile: tighter padding everywhere + smaller palette ---------- */
@media (max-width: 480px) {
	.tetp-exam-topbar { padding: 8px 8px; gap: 6px; }
	.tetp-exam-brand { font-size: 14px; }
	.tetp-exam-timelabel { display: none; }
	.tetp-exam-timebox { font-size: 12.5px; padding: 4px 6px; }
	.tetp-exam-topbtn { font-size: 11px; padding: 4px 6px; }

	.tetp-exam-qbar { padding: 8px 8px; }
	.tetp-exam-qno { font-size: 13.5px; }
	.tetp-exam-qmeta { gap: 8px; }

	.tetp-exam-main { padding: 8px 4px 10px; min-height: 0; }
	.tetp-exam-qtext { font-size: 15.5px; margin-bottom: 10px; }
	.tetp-exam-options { gap: 2px; }
	.tetp-exam-option { padding: 6px 2px; gap: 8px; }
	.tetp-exam-option .tetp-option-text { font-size: 17px; }

	.tetp-exam-footer { gap: 6px; margin-top: 12px; padding-top: 8px; }
	.tetp-exam-btn { padding: 7px 8px; font-size: 12px; }
	.tetp-exam-footer-right { gap: 4px; }

	.tetp-exam-side { padding: 8px 8px; }
	.tetp-exam-candidate { margin-bottom: 8px; }
	.tetp-exam-avatar { width: 30px; height: 30px; font-size: 11px; }
	.tetp-exam-cname { font-size: 13px; }

	.tetp-exam-counts { margin-bottom: 8px; }
	.tetp-exam-count-row { gap: 4px 8px; margin-bottom: 4px; }
	.tetp-count-item { font-size: 11px; }
	.tetp-count-item b { font-size: 12px; }
	.tetp-count-dot, .tetp-count-box { width: 10px; height: 10px; }

	.tetp-section-tabs { gap: 4px; padding: 6px 8px; }
	.tetp-section-tab { font-size: 10.5px; padding: 4px 6px !important; }
	.tetp-section-tabs-label { font-size: 10.5px; width: 100%; margin-bottom: 2px; }

	.tetp-exam-testtype { padding: 6px 8px; font-size: 11.5px; margin-bottom: 8px; }

	/* Palette already compact by default; just tighten a touch further on very small screens */
	.tetp-exam-palette-wrap { max-height: 300px; margin-bottom: 8px; }
	.tetp-palette-section-head { font-size: 10px; padding: 4px 2px 4px; margin-bottom: 4px; }
	.tetp-exam-palette { gap: 4px; margin-bottom: 8px; }
	.tetp-palette-cell { height: 24px; }
	.tetp-pc-shape { font-size: 10px; }
	.tetp-pc-shape.tetp-pc-marked-answered::after { width: 7px; height: 7px; top: -2px; right: -2px; }

	.tetp-exam-side-bottom { gap: 4px; margin-bottom: 8px; }
	.tetp-exam-side-btn { font-size: 11px; padding: 6px 4px; }
	.tetp-exam-submit-btn { padding: 8px; font-size: 13px; }

	.tetp-intro { padding: 12px 10px; }
	.tetp-intro-stats { gap: 6px; margin: 8px 0 11px; }

	.tetp-results { padding: 10px 8px; }
	.tetp-review-list { margin-top: 8px; }
	.tetp-review-item { padding: 8px 0; }
	.tetp-review-item .tetp-q-text { font-size: 14.5px; margin-bottom: 4px; }
	.tetp-explain { margin-top: 6px; padding: 6px 8px; font-size: 14px; }

	.tetp-qpaper-overlay { padding: 0; }
	.tetp-qpaper-box { max-height: 100vh; border-radius: 0; }
	.tetp-qpaper-header { padding: 8px 8px; }
	.tetp-qpaper-body { padding: 8px 8px; }
	.tetp-qpaper-body .tetp-review-item { padding: 8px 0; }

	.tetp-submit-overlay { padding: 0; align-items: flex-end; }
	.tetp-submit-box { max-height: 92vh; border-radius: 12px 12px 0 0; }
	.tetp-submit-header { padding: 8px 8px; font-size: 14.5px; }
	.tetp-submit-tiles { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px 8px; }
	.tetp-submit-tile { padding: 6px 8px; }
	.tetp-submit-tile-num { font-size: 16px; }
	.tetp-submit-tile-label { font-size: 10.5px; }
	.tetp-submit-table-wrap { padding: 0 8px 8px; }
	.tetp-submit-table { min-width: 420px; font-size: 12px; }
	.tetp-submit-table th, .tetp-submit-table td { padding: 4px 6px; }
	.tetp-submit-actions { padding: 8px 8px; }
}

.tetp-exam-main { padding: 16px 10px 14px; border-right: 1px solid var(--tetp-line); background: #fff; min-height: 340px; }

.tetp-exam-qtext {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 14px;
}

.tetp-exam-options { display: flex; flex-direction: column; gap: 4px; }
.tetp-exam-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 4px;
	cursor: pointer;
	border-radius: 6px;
}
.tetp-exam-option:hover { background: #F4F6FB; }
.tetp-exam-option:focus-visible,
.tetp-palette-cell:focus-visible,
.tetp-section-tab:focus-visible {
	outline: 2px solid #2563EB;
	outline-offset: 2px;
}
.tetp-exam-option .tetp-radio {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #9AA3BD;
	position: relative;
	flex-shrink: 0;
	margin-top: 4px;
}
.tetp-exam-option.tetp-selected .tetp-radio { border-color: var(--tetp-ink); }
.tetp-exam-option.tetp-selected .tetp-radio::after,
.tetp-exam-option.tetp-correct .tetp-radio::after,
.tetp-exam-option.tetp-wrong .tetp-radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--tetp-ink);
}
.tetp-exam-option .tetp-option-text { font-size: 17px; line-height: 1.5; }
.tetp-exam-option.tetp-correct .tetp-radio { border-color: var(--tetp-correct); }
.tetp-exam-option.tetp-correct .tetp-radio::after { background: var(--tetp-correct); }
.tetp-exam-option.tetp-correct { background: var(--tetp-correct-bg); }
.tetp-exam-option.tetp-wrong .tetp-radio { border-color: var(--tetp-wrong); }
.tetp-exam-option.tetp-wrong .tetp-radio::after { background: var(--tetp-wrong); }
.tetp-exam-option.tetp-wrong { background: var(--tetp-wrong-bg); }

.tetp-exam-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 17px;
	padding-top: 12px;
	border-top: 1px solid var(--tetp-line);
}
.tetp-exam-footer-right { display: flex; gap: 6px; margin-left: auto; }
.tetp-exam-btn {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	border-radius: 6px;
	padding: 8px 11px;
	cursor: pointer;
	border: 1px solid var(--tetp-line) !important;
	background: #EEF1FA !important;
	color: var(--tetp-ink) !important;
	white-space: nowrap;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-exam-btn:hover { opacity: 0.85; }
.tetp-exam-btn-ghost { background: #EEF1FA !important; }
.tetp-exam-btn-primary { background: var(--tetp-ink) !important; color: #fff !important; border-color: var(--tetp-ink) !important; }

/* ---------- Sidebar: candidate, counts, palette, actions ---------- */
.tetp-exam-side { background: #EAF3FB; padding: 12px 11px; }
.tetp-exam-candidate { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.tetp-exam-avatar {
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--tetp-ink);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 13px;
	flex-shrink: 0;
}
.tetp-exam-cname { font-weight: 700; font-size: 14.5px; }

.tetp-exam-counts { margin-bottom: 11px; }
.tetp-exam-count-row { display: flex; flex-wrap: wrap; gap: 8px 11px; margin-bottom: 6px; }
.tetp-count-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tetp-ink-soft); }
.tetp-count-item b { color: var(--tetp-ink); font-size: 13px; }
.tetp-count-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.tetp-count-box { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: #fff; border: 1px solid #9AA3BD; flex-shrink: 0; }
.tetp-dot-green { background: #3EA45E; }
.tetp-dot-purple { background: #7B4FA6; }
.tetp-dot-red { background: #D8453B; }
.tetp-dot-purple-green {
	background: #7B4FA6;
	position: relative;
}
.tetp-dot-purple-green::after {
	content: '';
	position: absolute;
	right: -2px; bottom: -2px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #3EA45E;
	border: 1px solid #fff;
}

.tetp-section-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	background: #EAF3FB;
	border-bottom: 1px solid var(--tetp-line);
	padding: 8px 10px;
}
.tetp-section-tabs-label {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--tetp-ink);
	margin-right: 2px;
	flex-shrink: 0;
}
.tetp-section-tab {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--tetp-ink-soft) !important;
	background: #DCE8F5 !important;
	border: 1px solid transparent !important;
	border-radius: 4px;
	padding: 6px 10px !important;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
	outline: none !important;
}
.tetp-section-tab:hover,
.tetp-section-tab:focus {
	background: #CBDCF0 !important;
	color: var(--tetp-ink-soft) !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}
.tetp-section-tab-active,
.tetp-section-tab-active:hover,
.tetp-section-tab-active:focus,
.tetp-section-tab-active:active {
	background: var(--tetp-ink) !important;
	color: #fff !important;
	border-color: var(--tetp-ink) !important;
	box-shadow: none !important;
	outline: none !important;
}

.tetp-exam-testtype {
	background: #EAF3FB;
	border: 1px solid #CBDCF0;
	border-radius: 6px;
	padding: 8px 8px;
	margin-bottom: 8px;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
}
.tetp-exam-testtype-label { font-weight: 700; color: var(--tetp-ink-soft); }
.tetp-exam-testtype-value { font-weight: 700; color: var(--tetp-ink); }

/* Whole-test palette: every section's questions, stacked and directly
   clickable, in one scrollable panel — no need to click a section tab
   first just to reach a question that belongs to a different section. */
.tetp-exam-palette-wrap {
	max-height: 360px;
	overflow-y: auto;
	margin-bottom: 10px;
	padding-right: 2px;
}
.tetp-palette-section-head {
	font-family: 'Inter', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--tetp-ink-soft);
	padding: 4px 2px 4px;
	border-bottom: 1px solid #CBDCF0;
	margin-bottom: 4px;
}
.tetp-palette-section-head:first-child { padding-top: 0; }
.tetp-palette-section-head-active { color: var(--tetp-ink); }

.tetp-exam-palette {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin-bottom: 12px;
}
.tetp-exam-palette-wrap .tetp-exam-palette { margin-bottom: 10px; }
.tetp-exam-palette-wrap .tetp-exam-palette:last-child { margin-bottom: 0; }
.tetp-palette-cell {
	width: 100%;
	height: 28px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	border-radius: 4px;
	position: relative;
}
.tetp-palette-cell:hover .tetp-pc-shape { filter: brightness(0.96); }
.tetp-pc-current { box-shadow: 0 0 0 2px var(--tetp-gold); border-radius: 4px; }


.tetp-pc-shape {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--tetp-ink) !important;
	position: relative;
	border-radius: 4px;
	border: 1px solid #C4CEE0 !important;
	background: #fff !important;
}
.tetp-pc-shape.tetp-pc-not-visited { background: #fff !important; color: var(--tetp-ink) !important; }
.tetp-pc-shape.tetp-pc-answered { background: #3EA45E !important; border-color: #3EA45E !important; color: #fff !important; }
.tetp-pc-shape.tetp-pc-not-answered { background: #D8453B !important; border-color: #D8453B !important; color: #fff !important; }
.tetp-pc-shape.tetp-pc-marked { background: #7B4FA6 !important; border-color: #7B4FA6 !important; color: #fff !important; }
.tetp-pc-shape.tetp-pc-marked-answered { background: #7B4FA6 !important; border-color: #7B4FA6 !important; color: #fff !important; }
.tetp-pc-shape.tetp-pc-marked-answered::after {
	content: '';
	position: absolute;
	top: -3px; right: -3px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #3EA45E;
	border: 1.5px solid #fff;
}

.tetp-exam-side-bottom { display: flex; gap: 6px; margin-bottom: 10px; }
.tetp-exam-side-btn {
	flex: 1;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	font-weight: 600;
	background: #fff !important;
	border: 1px solid #C4CEE0 !important;
	color: var(--tetp-ink) !important;
	border-radius: 6px;
	padding: 7px 4px;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-exam-side-btn:hover { background: #F4F6FB !important; }

.tetp-exam-submit-btn {
	width: 100%;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14px;
	background: var(--tetp-gold) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 6px;
	padding: 8px;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
}
.tetp-exam-submit-btn:hover { opacity: 0.9; background: var(--tetp-gold) !important; }

/* ---------- Pause overlay ---------- */
.tetp-exam-pause-overlay {
	position: absolute;
	inset: 0;
	background: rgba(27,42,74,0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.tetp-exam-pause-box {
	background: #fff;
	border-radius: 10px;
	padding: 17px 20px;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	color: var(--tetp-ink);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
.tetp-exam-is-paused { position: relative; }

.tetp-report-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	border-radius: 6px;
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.tetp-report-icon-btn:hover { opacity: 1; background: #FBEBE8 !important; }

/* ---------- Report-a-question modal ---------- */
.tetp-report-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27,42,74,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 11px;
	box-sizing: border-box;
}
.tetp-report-box {
	background: #fff;
	border-radius: 10px;
	padding: 16px;
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
}
.tetp-report-box h4 {
	margin: 0 0 11px;
	font-family: 'Zilla Slab', serif;
	font-size: 17px;
	color: var(--tetp-ink);
}
.tetp-report-label {
	display: block;
	margin-bottom: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tetp-ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.tetp-report-select,
.tetp-report-textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px 8px;
	border: 1.5px solid var(--tetp-line) !important;
	border-radius: 8px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--tetp-ink) !important;
	background: #fff !important;
	box-sizing: border-box;
}
.tetp-report-textarea { resize: vertical; }
.tetp-report-msg { min-height: 18px; font-size: 12.5px; margin-bottom: 4px; }
.tetp-report-msg-error { color: var(--tetp-wrong); font-weight: 600; }
.tetp-report-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.tetp-report-thanks { font-size: 14.5px; color: var(--tetp-correct); font-weight: 600; margin: 0 0 11px; }

/* ---------- Question Paper modal ---------- */
.tetp-qpaper-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27,42,74,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 11px;
	box-sizing: border-box;
}
.tetp-qpaper-box {
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 680px;
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
}
.tetp-qpaper-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 11px;
	border-bottom: 1px solid var(--tetp-line);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.tetp-qpaper-header h4 {
	margin: 0;
	font-family: 'Zilla Slab', serif;
	font-size: 16px;
	color: var(--tetp-ink);
}
.tetp-qpaper-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tetp-qpaper-body { padding: 10px 11px; }
.tetp-qpaper-body .tetp-review-item { padding: 8px 0; margin-bottom: 0; }

/* ---------- Submit-summary modal ---------- */
.tetp-submit-overlay {
	position: fixed;
	inset: 0;
	background: rgba(27,42,74,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
	padding: 11px;
	box-sizing: border-box;
}
.tetp-submit-box {
	background: #fff;
	border-radius: 10px;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	overflow-y: auto;
	box-sizing: border-box;
}
.tetp-submit-header {
	padding: 10px 12px;
	border-bottom: 1px solid var(--tetp-line);
	font-family: 'Zilla Slab', serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--tetp-ink);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}
.tetp-submit-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
	padding: 10px 12px;
}
.tetp-submit-tile {
	background: #F4F6FB;
	border-radius: 8px;
	padding: 8px 8px;
	display: flex;
	flex-direction: column;
}
.tetp-submit-tile-num { font-size: 20px; font-weight: 700; color: var(--tetp-ink); line-height: 1.2; }
.tetp-submit-tile-label { font-size: 11px; color: var(--tetp-ink-soft); margin-top: 2px; }
.tetp-submit-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 12px 10px;
}
.tetp-submit-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 13px; }
.tetp-submit-table th {
	background: #DCE8F5 !important;
	text-align: left;
	padding: 6px 8px;
	font-weight: 700;
	color: var(--tetp-ink) !important;
	white-space: nowrap;
}
.tetp-submit-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--tetp-line);
	white-space: nowrap;
	color: var(--tetp-ink) !important;
}
.tetp-submit-actions {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 10px 12px;
	border-top: 1px solid var(--tetp-line);
}

/* Subject-wise breakdown, collapsed by default, under a row in My
   Results — reuses .tetp-submit-table for the inner table so it looks
   identical to the post-test summary modal. */
.tetp-results-detail-row td { padding: 0 !important; border-bottom: 1px solid var(--tetp-line); background: var(--tetp-bg-soft, #F7F9FC); }
.tetp-results-detail { padding: 6px 12px 10px; }
.tetp-results-detail summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	color: var(--tetp-accent, #1B2A4A) !important;
	padding: 6px 0;
	list-style: none;
}
.tetp-results-detail summary::-webkit-details-marker { display: none; }
.tetp-results-detail summary::before { content: '▸ '; }
.tetp-results-detail[open] summary::before { content: '▾ '; }
.tetp-results-detail .tetp-submit-table-wrap { padding: 4px 0 8px; }



/* ---------- AdSense slots ---------- */
.tetp-ad-slot {
	margin: 10px 0;
	padding: 4px 0;
	overflow: hidden;
	text-align: center;
	min-height: 0;
	min-width: 250px;
}
.tetp-ad-slot::before {
	content: 'Advertisement';
	display: block;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #99a1b3;
	margin-bottom: 4px;
}
.tetp-quiz-ad-static,
.tetp-quiz-ad-refresh {
	margin: 8px 0;
}

/* ---------- Paywall ---------- */
.tetp-paywall {
	max-width: 520px;
	margin: 18px auto;
	padding: 19px 16px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--tetp-line);
	border-radius: 10px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--tetp-ink);
}
.tetp-paywall-icon { font-size: 34px; margin-bottom: 4px; }
.tetp-paywall h3 { margin: 4px 0 8px; font-family: 'Zilla Slab', serif; }
.tetp-paywall a.tetp-btn { display: inline-block; text-decoration: none; }
.tetp-paywall-msg { margin: 16px 0; }

/* ---------- Live Test gate screens (countdown / ended / already-attempted) ----------
   These reuse .tetp-paywall for the card shell (white card, centered),
   then layer on their own header (status pill + title + start/end
   window), and — only for the countdown state — a dark countdown box,
   a live clock line, and a tip box. */
.tetp-live-gate { position: relative; padding-top: 26px; overflow: hidden; }
.tetp-live-gate::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--tetp-gold);
}
.tetp-live-gate--accent-ended::before { background: var(--tetp-ink-soft); }
.tetp-live-gate--accent-done::before { background: var(--tetp-correct); }

.tetp-live-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	background: #F1F2F6;
	color: var(--tetp-ink);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 10px;
}
.tetp-live-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tetp-gold); flex: none; }
.tetp-live-status-pill--upcoming .tetp-live-status-dot { background: var(--tetp-gold); }
.tetp-live-status-pill--ended .tetp-live-status-dot { background: var(--tetp-ink-soft); }
.tetp-live-status-pill--done .tetp-live-status-dot { background: var(--tetp-correct); }
.tetp-live-status-pill--urgent { background: #FEF1F1; color: #B42318; }
.tetp-live-status-pill--urgent .tetp-live-status-dot { background: #B42318; }

.tetp-live-gate-title {
	margin: 4px 0 12px;
	font-family: 'Zilla Slab', serif;
	font-size: 21px;
	color: var(--tetp-ink) !important;
}

.tetp-live-window { display: flex; align-items: stretch; justify-content: center; gap: 20px; margin-bottom: 18px; }
.tetp-live-window-col { display: flex; flex-direction: column; gap: 3px; }
.tetp-live-window-label { font-size: 12.5px; color: var(--tetp-ink-soft); }
.tetp-live-window-value { font-size: 14.5px; font-weight: 700; color: var(--tetp-ink); }
.tetp-live-window-divider { width: 1px; background: var(--tetp-line); }

.tetp-live-countdown-box {
	background: var(--tetp-ink);
	border-radius: 10px;
	padding: 16px 12px;
	margin-bottom: 14px;
}
.tetp-live-countdown-label { font-size: 13px; color: rgba(255, 255, 255, 0.75); margin-bottom: 8px; }
.tetp-live-countdown-digits { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tetp-live-countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; }
.tetp-live-countdown-num {
	font-size: 34px;
	font-weight: 700;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.tetp-live-countdown-unit-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.tetp-live-countdown-sep { font-size: 28px; font-weight: 700; color: rgba(255, 255, 255, 0.35); margin-bottom: 16px; }

.tetp-live-nowline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	color: var(--tetp-ink-soft);
	margin: 0 0 16px;
}
.tetp-live-now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tetp-correct); flex: none; }

.tetp-live-tip-box {
	background: #F8F9FC;
	border: 1px solid var(--tetp-line);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tetp-ink-soft);
	text-align: left;
}
.tetp-live-tip-box strong { color: var(--tetp-ink); }

.tetp-live-footer-note { font-size: 12.5px; color: var(--tetp-ink-soft); margin: 12px 0 0; }

/* The plain explanatory sentence on the ended / already-attempted
   screens (no dark countdown box there) — softened the same way as
   every other secondary-explanation line in the plugin (e.g.
   .tetp-danger-note) instead of falling back to the card's plain base
   text, which read as undesigned next to the header above it. */
.tetp-live-gate p {
	max-width: 400px;
	margin: 8px auto 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tetp-ink-soft);
}
.tetp-live-gate h3 { color: var(--tetp-ink) !important; }

/* ---------- Paywall: locked-test box (top card with the 🔒 icon) ----------
   Given its own gradient background so it stays visually "highlighted" and
   reads as a single, self-contained block. The inner <p> tags were also
   swapped for plain <div>s (see class-shortcode.php) — AdSense Auto ads
   leans on paragraph-like text blocks to decide where to slot an in-page
   ad, so a container with no <p> tags is a somewhat less attractive
   target. NOTE: this is a mitigation, not a guarantee — Google's Auto
   ads script scans the rendered page itself and there is no CSS class or
   data attribute it honors to hard-exclude one element. See the reply in
   chat for the actual supported ways to stop it appearing in this exact
   spot (Ad review center / turning off in-page auto ad formats). */
.tetp-paywall-lock {
	background: linear-gradient(135deg, #16224a 0%, #2a4d9c 55%, #3f68c9 100%);
	border: none;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(22, 34, 74, 0.25);
}
.tetp-paywall-lock h3 { color: #ffffff !important; }
.tetp-paywall-lock .tetp-paywall-msg { color: rgba(255, 255, 255, 0.92); }
.tetp-paywall-lock .tetp-paywall-msg.description { color: rgba(255, 255, 255, 0.75); font-size: 13px; }
.tetp-paywall-lock .tetp-paywall-price { color: #FFD98A; }
.tetp-paywall-lock .tetp-paywall-duration { color: rgba(255, 255, 255, 0.75); }
.tetp-paywall-lock .tetp-paywall-product {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* The small "part of <product>" callout, right under the heading and
   above the login/buy content — sits on top of the gradient like a
   translucent chip so the product name (linked to its own page) stands
   out immediately. No extra label here — the h3 above already says
   "This test is part of a paid series", so this box is just the name(s). */
.tetp-paywall-series-box {
	margin: 10px auto 4px;
	padding: 10px 14px;
	max-width: 400px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 8px;
}
.tetp-paywall-series-names {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}
.tetp-paywall-series-name {
	font-weight: 700;
	font-size: 14.5px;
	color: #ffffff !important;
	font-family: 'Zilla Slab', serif;
	text-decoration: none;
}
/* Explicit color on every interactive state — themes commonly style their
   own a:hover/a:focus/a:active/a:visited with a link-blue color that has
   higher effective priority than our plain, non-!important base rule
   above, so without this the product name can flash the theme's link
   color against our dark gradient card on hover instead of staying
   readable white. */
.tetp-paywall-series-name:hover,
.tetp-paywall-series-name:focus,
.tetp-paywall-series-name:active,
.tetp-paywall-series-name:visited {
	color: #ffffff !important;
	text-decoration: underline !important;
}
.tetp-paywall-series-name:not(:last-child)::after {
	content: '•';
	margin-left: 8px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
}

/* Live Tests dashboard tab — simple stacked cards, one per scheduled test. */
.tetp-live-list { display: flex; flex-direction: column; gap: 10px; }
.tetp-live-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	border: 1px solid var(--tetp-line);
	border-radius: 8px;
	background: #fff;
}
.tetp-live-card-title { font-weight: 600; flex: 1 1 200px; }
.tetp-live-card-time { font-size: 13px; color: #667085; flex: 1 1 220px; }
.tetp-paywall-products {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	text-align: left;
}
.tetp-paywall-product {
	border: 1px solid var(--tetp-line);
	border-radius: 8px;
	padding: 10px 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.tetp-paywall-product strong { flex: 1 1 100%; }
.tetp-paywall-price { font-weight: 700; color: var(--tetp-gold); }
.tetp-paywall-duration { color: var(--tetp-ink-soft); font-size: 13px; flex: 1; }
.tetp-paywall-product .tetp-btn { margin-left: auto; }

/* ---------- Paywall: "This Test Is Part Of" / "Browse Other Test
   Series" boxes — new, additive cards shown below the existing
   .tetp-paywall lock box above. Same card look (reuses .tetp-paywall
   itself for the shared border/background/font), just left-aligned
   since these hold a table instead of a short centered message. */
.tetp-paywall-box {
	text-align: left;
}
.tetp-paywall-box-header { text-align: center; margin-bottom: 12px; }
.tetp-paywall-box-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.tetp-paywall-box-header h4 {
	margin: 0 0 4px;
	font-family: 'Zilla Slab', serif;
	font-size: 19px;
}
.tetp-paywall-box-desc {
	margin: 0 auto;
	max-width: 480px;
	font-size: 13.5px;
	color: var(--tetp-ink-soft);
	line-height: 1.4;
}
.tetp-paywall-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tetp-paywall-table td { padding: 8px 6px; border-bottom: 1px solid var(--tetp-line); vertical-align: middle; font-size: 13.5px; }
.tetp-paywall-table tr:last-child td { border-bottom: none; }
.tetp-paywall-table tbody tr:hover { background: var(--tetp-paper); }
.tetp-paywall-table-name { text-align: left; width: 42%; }
.tetp-paywall-table-name a { color: var(--tetp-ink) !important; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.tetp-paywall-table-name a:hover { text-decoration: underline !important; }
.tetp-paywall-table-price { text-align: center; font-weight: 700; color: var(--tetp-gold); white-space: nowrap; width: 16%; }
.tetp-paywall-table-expiry { text-align: center; font-size: 12.5px; color: var(--tetp-ink-soft); white-space: nowrap; width: 16%; }
.tetp-paywall-table-action { text-align: right; white-space: nowrap; padding-left: 8px; width: 26%; }

@media (max-width: 600px) {
	.tetp-paywall-table { table-layout: auto; }
	.tetp-paywall-table td { padding: 8px 4px; font-size: 12.5px; }
	.tetp-paywall-table-action { padding-left: 4px; }
}

/* ---------- Account (login/register) ---------- */
.tetp-account { max-width: 440px; margin: 28px auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--tetp-ink); }
.tetp-account-notice {
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 500;
}
.tetp-account-notice-success { background: var(--tetp-correct-bg); color: #1c5e33; }
.tetp-account-notice-error { background: var(--tetp-wrong-bg); color: #9c2b2b; }
.tetp-account-notice-info { background: #FFF6E5; color: #7A5300; border: 1px solid #F0DBA0; }

.tetp-account-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.tetp-notice-action {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid currentColor;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}
.tetp-notice-action:hover { background: rgba(255, 255, 255, 0.9); }

/* ---------- Flash toast (login/logout/register result) ----------
   Temporary, auto-dismissing — replaces the old permanent banner that
   used to sit glued above the login form / dashboard. */
.tetp-toast-viewport {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: calc(100% - 36px);
	max-width: 380px;
	pointer-events: none;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.tetp-toast {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--tetp-line);
	border-left: 4px solid var(--tetp-correct);
	border-radius: 10px;
	padding: 13px 32px 15px 14px;
	box-shadow: 0 10px 30px rgba(27, 42, 74, 0.16);
	overflow: hidden;
	animation: tetp-toast-in 0.25s ease;
}
.tetp-toast-error { border-left-color: var(--tetp-wrong); }
.tetp-toast-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.tetp-toast-body { flex: 1; min-width: 0; }
.tetp-toast-message { display: block; font-size: 13.5px; font-weight: 600; color: var(--tetp-ink) !important; line-height: 1.45; }
.tetp-toast-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tetp-toast-action {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--tetp-paper) !important;
	border: 1px solid var(--tetp-line);
	font-size: 12px;
	font-weight: 600;
	color: var(--tetp-ink) !important;
	text-decoration: none !important;
}
.tetp-toast-action:hover { background: #fff !important; border-color: var(--tetp-ink); }
.tetp-toast-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border: none !important;
	background: transparent !important;
	color: var(--tetp-ink-soft) !important;
	font-size: 17px;
	cursor: pointer;
	border-radius: 50%;
	padding: 0;
}
.tetp-toast-close:hover { background: var(--tetp-paper) !important; color: var(--tetp-ink) !important; }
.tetp-toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--tetp-correct);
	opacity: 0.4;
	transform-origin: left;
	animation: tetp-toast-progress linear forwards;
	animation-duration: 4200ms;
}
.tetp-toast-error .tetp-toast-progress { background: var(--tetp-wrong); }
.tetp-toast-hide { animation: tetp-toast-out 0.2s ease forwards; }

@keyframes tetp-toast-in {
	from { opacity: 0; transform: translateY(-8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tetp-toast-out {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes tetp-toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

@media (max-width: 560px) {
	.tetp-toast-viewport { top: 10px; right: 10px; left: 10px; max-width: none; width: auto; }
}

.tetp-account-card {
	background: #fff;
	border: 1px solid var(--tetp-line);
	border-radius: 14px;
	padding: 28px 26px;
	box-shadow: 0 4px 24px rgba(27, 42, 74, 0.06);
	box-sizing: border-box;
}

/* --- Login/register ---
   The brand block (icon + heading + subtext) gets the same blue-gradient
   "highlight" treatment as the paywall lock box, so it reads as one clear
   focal point instead of blending into a plain white card — everything
   below it (Google button, divider, email form) is untouched. */
.tetp-account-brand {
	text-align: center;
	margin: 0 0 20px;
	padding: 24px 18px 20px;
	background: linear-gradient(135deg, #16224a 0%, #2a4d9c 55%, #3f68c9 100%);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(22, 34, 74, 0.2);
}
.tetp-account-brand-icon {
	font-size: 32px;
	width: 56px;
	height: 56px;
	line-height: 56px;
	margin: 0 auto 10px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.tetp-account-brand h3 { font-family: 'Zilla Slab', serif; margin: 0 0 4px; font-size: 22px; color: #ffffff !important; }
.tetp-account-brand p { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 14px; }

.tetp-google-btn-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.tetp-account-divider {
	display: flex;
	align-items: center;
	text-align: center;
	color: var(--tetp-ink-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 6px 0 16px;
}
.tetp-account-divider::before,
.tetp-account-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--tetp-line);
}
.tetp-account-divider span { padding: 0 10px; }

.tetp-account-divider-soft {
	text-transform: none;
	letter-spacing: normal;
	font-size: 12px;
	color: var(--tetp-ink-soft);
	opacity: 0.85;
}

.tetp-google-badge {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #0C447C;
	margin: 0 0 8px;
}

.tetp-google-highlight {
	background: #D5E9FC;
	border: 1.5px solid #378ADD;
	border-radius: 10px;
	padding: 10px 6px;
	margin-bottom: 4px;
}
.tetp-google-highlight .tetp-google-btn-wrap {
	margin-bottom: 0;
	transform: scale(1.03);
	transform-origin: center;
}
@media (min-width: 400px) {
	.tetp-google-highlight .tetp-google-btn-wrap { transform: scale(1.08); }
}

.tetp-email-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none !important;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--tetp-ink-soft) !important;
	text-decoration: none !important;
	cursor: pointer;
	margin-bottom: 8px;
}
.tetp-email-toggle-chevron { transition: transform 0.2s ease; }
.tetp-email-collapse:not(.is-collapsed) .tetp-email-toggle-chevron { transform: rotate(180deg); }

.tetp-email-collapse-body {
	overflow: hidden;
	max-height: 800px;
	transition: max-height 0.25s ease;
}
.tetp-email-collapse.is-collapsed .tetp-email-collapse-body { max-height: 0; }

.tetp-account-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: #F4F6FB; padding: 4px; border-radius: 9px; }
.tetp-account-tab {
	flex: 1;
	padding: 9px 7px;
	min-height: 40px;
	border: none !important;
	background: transparent !important;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--tetp-ink-soft) !important;
	transition: all 0.15s ease;
}
.tetp-account-tab.active { background: #fff !important; color: var(--tetp-ink) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.tetp-field { display: block; margin-bottom: 14px; }
.tetp-field span { display: block; font-size: 12.5px; font-weight: 600; color: var(--tetp-ink-soft); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.tetp-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--tetp-line) !important;
	border-radius: 8px;
	font-size: 15px;
	min-height: 42px;
	color: var(--tetp-ink) !important;
	background: #fff !important;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}
.tetp-field input:focus { outline: none; border-color: var(--tetp-ink) !important; }

.tetp-pw-wrap { position: relative; }
.tetp-pw-wrap input { padding-right: 40px !important; }
.tetp-pw-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	background: none !important;
	border: none !important;
	color: inherit !important;
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1;
	padding: 6px;
	cursor: pointer;
	opacity: 0.6;
}
.tetp-pw-toggle:hover { opacity: 1; }

/* Honeypot: kept in normal layout flow and visually rendered (so form-filling
   bots that skip display:none/visibility:hidden fields still fill it in),
   but moved far off-screen so no real visitor ever sees or tabs into it. */
.tetp-hp-field {
	position: absolute;
	left: -5000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tetp-account-submit { width: 100%; padding: 11px; font-size: 15px; margin-top: 6px; min-height: 44px; }

.tetp-account-forgot-link {
	display: block;
	text-align: right;
	margin: -4px 0 14px;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 0;
	color: var(--tetp-ink-soft) !important;
	text-decoration: none;
}
.tetp-account-forgot-link:hover { color: var(--tetp-ink) !important; text-decoration: underline; }

.tetp-account-forgot-intro { font-size: 13.5px; color: var(--tetp-ink-soft); margin: 0 0 14px; line-height: 1.5; }

.tetp-account-back-link {
	display: block;
	text-align: center;
	margin-top: 14px;
	padding: 4px 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tetp-ink-soft) !important;
	text-decoration: none;
}
.tetp-account-back-link:hover { color: var(--tetp-ink) !important; text-decoration: underline; }

@media (max-width: 480px) {
	.tetp-account { margin: 14px auto; }
	.tetp-account-card { padding: 20px 16px; }
}

/* --- Dashboard (logged in): sidebar + tab layout --- */
.tetp-dash {
	max-width: 920px;
	margin: 28px auto;
	display: grid;
	grid-template-columns: 224px 1fr;
	gap: 0;
	background: #fff;
	border: 1px solid var(--tetp-line);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(27, 42, 74, 0.06);
	box-sizing: border-box;
}
.tetp-dash-side {
	background: #F4F6FB;
	border-right: 1px solid var(--tetp-line);
	padding: 24px 18px;
	display: flex;
	flex-direction: column;
}
.tetp-dash-profile { text-align: center; margin-bottom: 18px; }
.tetp-dash-profile .tetp-account-avatar { margin: 0 auto 10px; }
.tetp-dash-name { font-weight: 700; font-size: 14.5px; }
.tetp-dash-email { color: var(--tetp-ink-soft); font-size: 12px; word-break: break-all; }
.tetp-dash-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; flex: 1; }
.tetp-dash-nav-item {
	text-align: left;
	background: transparent !important;
	border: none !important;
	padding: 11px 12px;
	min-height: 42px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tetp-ink-soft) !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.tetp-dash-nav-item.active { background: var(--tetp-ink) !important; color: #fff !important; }
.tetp-dash-nav-item:not(.active):hover { background: #DCE3F2 !important; color: var(--tetp-ink) !important; }
.tetp-dash-nav-item:not(.active):focus-visible { outline: 2px solid var(--tetp-ink); outline-offset: 1px; }
.tetp-dash-logout { width: 100%; min-height: 42px; }

.tetp-dash-main { padding: 26px 30px; min-width: 0; box-sizing: border-box; }
.tetp-dash-panel { display: none; }
.tetp-dash-panel.active { display: block; }
.tetp-dash-panel h3 { font-family: 'Zilla Slab', serif; margin: 0 0 16px; font-size: 21px; }
.tetp-dash-panel h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tetp-ink-soft); margin: 22px 0 10px; }
.tetp-dash-panel h4:first-of-type { margin-top: 18px; }
.tetp-dash-section-gap { margin-top: 26px; }
.tetp-danger-heading { color: #B42318; }
.tetp-danger-note { font-size: 13px; color: #6B7280; max-width: 520px; }
.tetp-btn-danger {
	background: #fff;
	color: #B42318 !important;
	border: 1px solid #B42318;
}
.tetp-btn-danger:hover { background: #FEF3F2; }

/* ---------- Dashboard: quick action tiles (Overview) ---------- */
.tetp-dash-quick-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 4px 0 22px;
}
.tetp-quick-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 16px 8px;
	min-height: 90px;
	box-sizing: border-box;
	background: var(--tetp-paper) !important;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 12px;
	text-decoration: none !important;
	color: var(--tetp-ink) !important;
	transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tetp-quick-tile:hover { background: #fff !important; border-color: var(--tetp-ink) !important; transform: translateY(-2px); }
.tetp-quick-tile:focus-visible { outline: 2px solid var(--tetp-ink); outline-offset: 2px; }
.tetp-quick-tile-icon {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--tetp-line);
	font-size: 17px;
}
.tetp-quick-tile-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }

@media (max-width: 700px) {
	.tetp-dash-quick-actions { grid-template-columns: repeat(2, 1fr); }
}

.tetp-dash-stats { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.tetp-dash-stat {
	flex: 1 1 140px;
	background: #F4F6FB;
	border-radius: 10px;
	padding: 14px 16px;
	text-align: center;
}
.tetp-dash-stat-num { display: block; font-family: 'Zilla Slab', serif; font-size: 24px; font-weight: 700; color: var(--tetp-ink); }
.tetp-dash-stat-label { font-size: 12px; color: var(--tetp-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.tetp-account-avatar {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tetp-ink);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
.tetp-account-purchases { list-style: none; margin: 0 0 10px; padding: 0; text-align: left; }
.tetp-account-purchases li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 4px;
	gap: 8px;
	padding: 10px 12px;
	background: #F4F6FB;
	border-radius: 8px;
	margin-bottom: 8px;
	font-size: 14px;
}
.tetp-account-purchase-name { font-weight: 600; }
.tetp-account-purchase-expiry { color: var(--tetp-ink-soft); font-size: 12.5px; white-space: nowrap; margin-left: auto; }
.tetp-account-empty { text-align: left; color: var(--tetp-ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }

/* ---------- Student Support tab: video-guide accordion + email row ---------- */
.tetp-support-videos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.tetp-support-video { border: 1px solid var(--tetp-line); border-radius: 8px; overflow: hidden; }
.tetp-support-video-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	padding: 12px 14px;
	background: #F8F9FC;
	border: none;
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tetp-ink);
}
.tetp-support-video-chevron { display: inline-block; transition: transform 0.15s ease; color: var(--tetp-ink-soft); }
.tetp-support-video.is-open .tetp-support-video-chevron { transform: rotate(90deg); }
.tetp-support-video.is-open .tetp-support-video-toggle { background: #EFF2F9; }
.tetp-support-video-body:empty { display: none; }
.tetp-support-video-embed { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; }
.tetp-support-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tetp-support-email-row { font-size: 14px; color: var(--tetp-ink-soft); }
.tetp-support-email { color: var(--tetp-ink) !important; font-weight: 700; text-decoration: underline; margin-left: 4px; }

.tetp-dash-posts { list-style: none; margin: 0; padding: 0; }
.tetp-dash-posts li { margin-bottom: 8px; }
.tetp-dash-posts a { color: var(--tetp-ink) !important; font-weight: 600; font-size: 14px; text-decoration: underline; text-decoration-color: var(--tetp-line); }

.tetp-dash-table-wrap { overflow-x: auto; margin: 0 -2px; padding: 0 2px; -webkit-overflow-scrolling: touch; }
.tetp-dash-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tetp-dash-table th, .tetp-dash-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--tetp-line); white-space: nowrap; color: var(--tetp-ink) !important; }
.tetp-dash-table th { color: var(--tetp-ink-soft) !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; }
.tetp-dash-table tbody tr:last-child td { border-bottom: none; }
/* Test-name column wraps instead of forcing horizontal scroll on the whole
   table over one long title — every other column (Type, Score, Percent,
   Date, Action) stays nowrap so numbers/badges/buttons don't break
   awkwardly. Applies at every width now (this used to be phone-only,
   inside the 700px media query below — but a long title forces the same
   unnecessary scroll on desktop too, where there's if anything more
   spare width to wrap into, so there's no reason to limit the fix to
   narrow screens). */
.tetp-results-table td:first-child,
.tetp-purchase-tests-table td:first-child { white-space: normal; word-break: break-word; }

.tetp-dash-browse-list { display: flex; flex-direction: column; gap: 10px; }
.tetp-dash-browse-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 4px;
	gap: 10px;
	padding: 13px 15px;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 9px;
	text-decoration: none;
	color: var(--tetp-ink) !important;
	transition: border-color 0.15s ease;
}
.tetp-dash-browse-item:hover { border-color: var(--tetp-ink) !important; }
.tetp-dash-browse-name { font-weight: 600; font-size: 14.5px; }
.tetp-dash-browse-price { font-weight: 700; color: var(--tetp-gold); font-size: 14px; white-space: nowrap; margin-left: auto; }
.tetp-dash-browse-price s { color: var(--tetp-ink-soft); font-weight: 400; margin-right: 4px; }

.tetp-dash-form { max-width: 400px; }

@media (max-width: 900px) {
	.tetp-dash { max-width: 100%; margin: 20px 16px; }
}

@media (max-width: 700px) {
	.tetp-dash { grid-template-columns: 1fr; margin: 12px; border-radius: 12px; }
	.tetp-dash-side { border-right: none; border-bottom: 1px solid var(--tetp-line); flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 14px; }
	.tetp-dash-profile { text-align: left; margin-bottom: 0; margin-right: auto; display: flex; align-items: center; gap: 10px; }
	.tetp-dash-profile .tetp-account-avatar { margin: 0; }
	.tetp-dash-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; order: 3; margin-top: 12px; margin-bottom: 0; }
	.tetp-dash-nav-item { flex: 1 1 auto; text-align: center; padding: 10px 8px; }
	.tetp-dash-logout { width: auto; order: 2; }
	.tetp-dash-main { padding: 18px 16px; }
	.tetp-dash-panel h3 { font-size: 19px; margin-bottom: 14px; }
	.tetp-dash-stats { gap: 8px; margin-bottom: 16px; }
	.tetp-dash-stat { padding: 12px 10px; flex: 1 1 46%; }
	.tetp-dash-table th, .tetp-dash-table td { padding: 8px 10px; font-size: 12.5px; }
}

@media (max-width: 420px) {
	.tetp-dash { margin: 8px; }
	.tetp-dash-main { padding: 16px 12px; }
	.tetp-dash-stat { flex: 1 1 100%; }
	.tetp-dash-nav-item { font-size: 13px; padding: 10px 6px; }
}
/* ---------- Product / Series landing page ---------- */
.tetp-product-page { max-width: 640px; margin: 0 auto; padding: 0 20px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--tetp-ink); }

.tetp-product-hero { text-align: center; margin-bottom: 4px; }
.tetp-product-hero-icon {
	font-size: 34px;
	width: 64px;
	height: 64px;
	line-height: 64px;
	margin: 0 auto 8px;
	background: var(--tetp-paper);
	border-radius: 50%;
}
.tetp-product-eyebrow {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--tetp-gold);
	font-weight: 600;
	margin-bottom: 12px;
}

.tetp-product-description { margin-bottom: 14px; color: var(--tetp-ink-soft); line-height: 1.65; text-align: center; }
.tetp-product-description p { margin: 0 0 8px; }

.tetp-product-price-box {
	background: var(--tetp-ink);
	border-radius: 14px;
	padding: 17px 16px;
	text-align: center;
	margin-bottom: 14px;
}
.tetp-product-price-row { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tetp-product-price-old { font-size: 18px; color: rgba(255,255,255,0.55); text-decoration: line-through; }
.tetp-product-price-now { font-family: 'Zilla Slab', serif; font-size: 40px; font-weight: 700; color: #fff; }
.tetp-product-price-off {
	background: var(--tetp-gold);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 20px;
	align-self: center;
}
.tetp-product-validity { display: block; color: rgba(255,255,255,0.75); font-size: 13.5px; margin-bottom: 13px; }

.tetp-coupon-box { margin: 10px 0; }
.tetp-coupon-row { display: flex; gap: 8px; }
.tetp-coupon-input {
	flex: 1;
	padding: 8px 10px;
	background: #fff !important;
	color: var(--tetp-ink) !important;
	border: 1px solid var(--tetp-border, #D8DEE9);
	border-radius: 6px;
	font-size: 13px;
}
.tetp-coupon-input::placeholder { color: var(--tetp-ink-soft) !important; opacity: 1; }
.tetp-coupon-message { margin: 6px 0 0; font-size: 13px; min-height: 16px; }
/* Sits inside the dark price box, so the usual dark-green/dark-red
   success/error text (fine on a white card elsewhere) would be very
   low-contrast here — lightened specifically for this on-dark spot. */
.tetp-coupon-message--success { color: #6FE3A6 !important; }
.tetp-coupon-message--error { color: #FF9B9B !important; }
.tetp-product-buy {
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
/* The box's Buy button gets its gold on-dark contrast fill from the
   TETP_MT_BTN_PRIMARY_ONDARK_STYLE inline style (see class-products.php)
   rather than from a class rule here — an external stylesheet rule,
   even with !important, can never override the button's own inline
   !important style, so a CSS-only override for this can't work. This
   just handles the hover state on top of that inline fill. */
.tetp-product-price-box .tetp-btn-primary:hover {
	opacity: 0.9 !important;
}

.tetp-product-trust {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 17px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tetp-line);
}
.tetp-product-trust-item { font-size: 13.5px; color: var(--tetp-ink-soft); white-space: nowrap; }

.tetp-product-scope { font-size: 15px; margin-bottom: 14px; }

.tetp-product-page h3 { font-family: 'Zilla Slab', serif; font-size: 19px; margin: 0 0 10px; text-align: center; }
.tetp-product-included { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.tetp-product-group {
	border: 1px solid var(--tetp-line);
	border-radius: 10px;
	padding: 11px 12px;
}
.tetp-product-group h4 {
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tetp-gold);
	margin: 0 0 8px;
	text-align: center;
}
.tetp-product-group h4 span { color: var(--tetp-ink-soft); text-transform: none; letter-spacing: 0; font-weight: 400; }
.tetp-product-group ul { margin: 0; padding-left: 13px; }
.tetp-product-group li { font-size: 14.5px; margin-bottom: 4px; }

.tetp-product-cta { text-align: center; padding-top: 6px; }
.tetp-product-cta-bottom { padding-top: 4px; padding-bottom: 6px; }
.tetp-btn-lg { padding: 10px 19px; font-size: 16px; }
.tetp-product-owned {
	background: var(--tetp-correct-bg);
	color: #1c5e33;
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 600;
	margin: 0;
}

/* ---------- Reading passage box (comprehension-style questions) ---------- */
.tetp-passage-box {
	background: #FBF7EE;
	border: 1px solid #E8D3A0;
	border-left: 3px solid var(--tetp-gold);
	border-radius: 6px;
	padding: 10px 11px;
	margin-bottom: 13px;
}
.tetp-passage-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--tetp-gold);
	margin-bottom: 6px;
}
.tetp-passage-text {
	font-family: 'Zilla Slab', serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--tetp-ink-soft);
	white-space: pre-wrap;
	max-height: 260px;
	overflow-y: auto;
	padding-right: 4px;
}
.tetp-passage-progress {
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--tetp-muted);
	font-family: 'IBM Plex Mono', monospace;
}

/* ---------- Included-tests table (product/series page) ---------- */
.tetp-product-included-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.tetp-product-included-table th,
.tetp-product-included-table td { width: 50%; text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--tetp-line); color: var(--tetp-ink) !important; }
.tetp-product-included-table th {
	color: var(--tetp-ink-soft) !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 600;
	text-align: center;
}
.tetp-product-included-table td:last-child { text-align: center; }
.tetp-product-included-table tbody tr:last-child td { border-bottom: none; }

.tetp-included-status { display: inline-block; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tetp-included-status--locked { color: var(--tetp-ink-soft) !important; }
.tetp-included-status--unlocked {
	color: var(--tetp-correct) !important;
	text-decoration: none;
}
.tetp-included-status--unlocked:hover { text-decoration: underline; }
.tetp-included-status--free {
	color: var(--tetp-gold) !important;
	text-decoration: none;
}
.tetp-included-status--free:hover { text-decoration: underline; }

/* Included-tests table: collapsible Subject accordion, used only when a
   Type group (Mock Test / PYQ / etc.) has 2+ distinct subjects among its
   tests — a single-subject or untagged group stays a plain flat table. */
.tetp-product-subject {
	border: 1px solid var(--tetp-line);
	border-radius: 6px;
	margin-bottom: 8px;
	padding: 0 10px;
}
.tetp-product-subject summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tetp-ink) !important;
	text-decoration: none !important;
	list-style: none;
	padding: 9px 0;
}
.tetp-product-subject summary::-webkit-details-marker { display: none; }
.tetp-product-subject summary::before { content: '▸ '; color: var(--tetp-gold) !important; }
.tetp-product-subject[open] summary::before { content: '▾ '; }
.tetp-product-subject summary span { color: var(--tetp-ink-soft) !important; font-weight: 400; }
.tetp-product-subject .tetp-product-included-table { margin-bottom: 10px; }

.tetp-product-social-proof {
	text-align: center;
	font-size: 13.5px;
	color: var(--tetp-ink-soft);
	background: var(--tetp-paper);
	border: 1px solid var(--tetp-line);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 14px;
}
.tetp-product-social-proof strong { color: var(--tetp-ink); }

/* ---------- My Purchases: grouped by series / whole-site ---------- */
.tetp-whatsapp-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: #E7F8EE;
	border: 1px solid #B7E4C7;
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 16px;
}
.tetp-whatsapp-banner span {
	font-size: 14px;
	color: var(--tetp-ink);
}
.tetp-whatsapp-banner .tetp-btn {
	flex-shrink: 0;
}
.tetp-purchase-groups { display: flex; flex-direction: column; gap: 16px; }
.tetp-purchase-group {
	border: 1px solid var(--tetp-line);
	border-radius: 10px;
	padding: 16px 18px;
	box-sizing: border-box;
}
.tetp-purchase-group-title {
	font-family: 'Zilla Slab', serif;
	font-size: 16px;
	line-height: 1.4;
	margin: 0 0 12px;
	color: var(--tetp-ink);
}
.tetp-purchase-tests-table td:last-child { text-align: right; }
.tetp-purchase-tests-table th:last-child { text-align: right; }

/* My Purchases: Type group ("Mock Test (150)") + per-Subject accordion —
   same auto-switch rule and visual language as .tetp-product-group /
   .tetp-product-subject on the product page, so a single big product
   (every test, every subject) doesn't turn this panel into one giant
   flat table. */
.tetp-purchase-type-group + .tetp-purchase-type-group { margin-top: 14px; }
.tetp-purchase-type-title {
	font-family: 'Inter', sans-serif;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tetp-gold);
	margin: 0 0 8px;
}
.tetp-purchase-type-title span { color: var(--tetp-ink-soft); text-transform: none; letter-spacing: 0; font-weight: 400; }

.tetp-purchase-subject {
	border: 1px solid var(--tetp-line);
	border-radius: 6px;
	margin-bottom: 8px;
	padding: 0 10px;
}
.tetp-purchase-subject summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tetp-ink) !important;
	text-decoration: none !important;
	list-style: none;
	padding: 9px 0;
}
.tetp-purchase-subject summary::-webkit-details-marker { display: none; }
.tetp-purchase-subject summary::before { content: '▸ '; color: var(--tetp-gold) !important; }
.tetp-purchase-subject[open] summary::before { content: '▾ '; }
.tetp-purchase-subject summary span { color: var(--tetp-ink-soft) !important; font-weight: 400; }
.tetp-purchase-subject .tetp-dash-table-wrap { margin-bottom: 10px; }

.tetp-purchase-browse-links { display: flex; flex-direction: column; gap: 8px; }
.tetp-purchase-browse-link {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 4px;
	gap: 8px;
	padding: 11px 13px;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid var(--tetp-line) !important;
	border-radius: 8px;
	text-decoration: none;
	color: var(--tetp-ink) !important;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.15s ease;
}
.tetp-purchase-browse-link:hover { border-color: var(--tetp-ink) !important; }
.tetp-purchase-browse-link span:last-child { margin-left: auto; color: var(--tetp-ink-soft) !important; }

.tetp-btn-sm { display: inline-block; padding: 6px 12px !important; min-height: 32px; box-sizing: border-box; font-size: 12.5px !important; border-radius: 6px !important; text-decoration: none !important; }

.tetp-results-table td:nth-child(2),
.tetp-results-table td:nth-child(3),
.tetp-results-table td:nth-child(4) { white-space: nowrap; }
.tetp-results-pct {
	display: inline-block;
	font-weight: 700;
	font-size: 12.5px;
	padding: 4px 8px;
	border-radius: 20px;
}
.tetp-results-pct--good { color: var(--tetp-correct); background: var(--tetp-correct-bg); }
.tetp-results-pct--low { color: var(--tetp-wrong); background: var(--tetp-wrong-bg); }

@media (max-width: 700px) {
	.tetp-product-page { padding: 0 14px; }
	.tetp-product-included-table { font-size: 13px; }
	.tetp-purchase-group { padding: 14px; }
}

/* ---------- Block text selection across the quiz ---------- */
/* Deterrent only — CSS can't stop screenshots, OCR, or someone disabling
   styles via devtools. Form fields (report-a-question modal) are excluded
   so users can still type/select their own input there. */
.tetp-quiz,
.tetp-quiz * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.tetp-quiz input,
.tetp-quiz textarea,
.tetp-quiz select {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* ---------- Printing: quiz/review always blocked, Question Paper opt-in ---------- */
/* Applies no matter how print is triggered (Ctrl+P, right-click > Print,
   browser menu, or "Save as PDF"), since all of these render using the
   print stylesheet. It cannot stop screenshots or screen recording —
   nothing running in the browser can.

   Nothing under `.tetp-quiz` is printable by default — this covers the
   running exam, the results/review-answers screen, and the report modal.
   The one opt-in exception is the Question Paper overlay, and only when
   `tetp-qpaper-print-ok` is present on the `.tetp-quiz` container (added
   by quiz.js only when the admin has turned printing on for this specific
   test AND the student currently has that overlay open). Note: because
   `display: none` on an ancestor hides descendants unconditionally, the
   base rule hides specific children rather than `.tetp-quiz` itself — that
   leaves room for the exception below to re-show just the one part that's
   allowed to print. */
@media print {
	.tetp-quiz-dynamic,
	.tetp-report-overlay,
	.tetp-quiz-ad-static {
		display: none !important;
	}
	#tetp-qpaper-overlay {
		display: none !important;
	}

	.tetp-quiz.tetp-qpaper-print-ok #tetp-qpaper-overlay {
		display: block !important;
		position: static !important;
		background: none !important;
		padding: 0 !important;
	}
	.tetp-quiz.tetp-qpaper-print-ok #tetp-qpaper-overlay .tetp-qpaper-box {
		box-shadow: none !important;
		max-height: none !important;
		overflow: visible !important;
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	.tetp-quiz.tetp-qpaper-print-ok #tetp-qpaper-overlay .tetp-qpaper-actions {
		display: none !important;
	}

	body.tetp-print-blocked::before {
		content: 'Printing of this test is disabled.';
		display: block;
		text-align: center;
		font-size: 16px;
		padding: 24px 0;
	}
}