/* ── Exams Quiz — Dark Theme ── */

.eq-wrap {
	max-width: 700px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #F1F5F9;
}

/* ── Progress ── */
.eq-progress { margin-bottom: 28px; }
.eq-prog-lbl { display: block; font-size: 13px; color: #94A3B8; margin-bottom: 8px; }
.eq-prog-lbl strong { color: #F1F5F9; }
.eq-bar { height: 7px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.eq-bar-fill { height: 100%; background: #EAB308; border-radius: 99px; transition: width .35s ease; }

/* ── Question text ── */
.eq-q-text {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.55;
	margin-bottom: 22px;
	color: #F1F5F9;
}

/* ── Inline markdown rendering ── */
.eq-q-text code,
.eq-opt code,
.eq-explanation code {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: .88em;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255,255,255,.08);
	color: #93c5fd;
	border: 1px solid rgba(255,255,255,.1);
	white-space: nowrap;
}

html[data-theme="light"] .eq-q-text code,
html[data-theme="light"] .eq-opt code,
html[data-theme="light"] .eq-explanation code {
	background: rgba(0,0,0,.06);
	color: #1d4ed8;
	border-color: rgba(0,0,0,.1);
}

/* ── Options container ── */
.eq-opts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: none;
}

/* ── Option (button or div) ── */
.eq-opt {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px 16px;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 8px;
	background: rgba(255,255,255,.04);
	cursor: pointer;
	text-align: left;
	font-size: 15px;
	color: #CBD5E1;
	width: 100%;
	transition: border-color .15s, background .15s, transform .12s;
	line-height: 1.4;
}
.eq-opt:hover:not([disabled]):not(.eq-opt-dis) {
	border-color: #EAB308;
	background: rgba(234,179,8,.07);
	color: #F1F5F9;
	transform: translateX(3px);
}
.eq-opt-ltr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	font-weight: 700;
	font-size: 13px;
	color: #94A3B8;
	transition: background .15s, color .15s;
	flex-shrink: 0;
}

/* ── Answer states ── */
.eq-opt-ok  {
	border-color: #2dd4bf !important;
	background: rgba(45,212,191,.10) !important;
	color: #F1F5F9 !important;
	box-shadow: 0 0 0 1px rgba(45,212,191,.25);
}
.eq-opt-ok  .eq-opt-ltr {
	background: linear-gradient(135deg, #0d9488, #2dd4bf);
	color: #fff;
	box-shadow: 0 2px 8px rgba(13,148,136,.4);
}

.eq-opt-err {
	border-color: #fb7185 !important;
	background: rgba(251,113,133,.10) !important;
	color: #F1F5F9 !important;
	box-shadow: 0 0 0 1px rgba(251,113,133,.25);
}
.eq-opt-err .eq-opt-ltr {
	background: linear-gradient(135deg, #e11d48, #fb7185);
	color: #fff;
	box-shadow: 0 2px 8px rgba(225,29,72,.4);
}

.eq-opt-dis { cursor: default; }
.eq-opt-dis:not(.eq-opt-ok):not(.eq-opt-err) { opacity: .4; }

/* ── Feedback ── */
.eq-fb {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
}
.eq-fb-ok  { background: rgba(45,212,191,.10);  color: #2dd4bf; border-left: 4px solid #0d9488; }
.eq-fb-err { background: rgba(251,113,133,.10); color: #fb7185; border-left: 4px solid #e11d48; }

/* ── Explanation ── */
.eq-explanation {
	margin-top: 14px;
	padding: 14px 16px;
	background: rgba(56,189,248,.07);
	border-left: 4px solid #38BDF8;
	border-radius: 0 8px 8px 0;
	font-size: 15px;
	line-height: 1.65;
	color: #BAE6FD;
}
.eq-expl-label {
	display: block;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #38BDF8;
	margin-bottom: 6px;
}

/* ── Navigation ── */
.eq-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	gap: 12px;
}

/* ── Buttons ── */
.eq-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 22px;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, opacity .15s, transform .1s;
	line-height: 1.2;
}
.eq-btn:hover:not(.eq-dis) { transform: translateY(-1px); }
.eq-btn-pri         { background: #EAB308; color: #000; }
.eq-btn-pri:hover:not(.eq-dis) { background: #ca8a04; color: #000; box-shadow: 0 6px 20px rgba(234,179,8,.3); }
.eq-btn-sec         { background: rgba(255,255,255,.08); color: #94A3B8; }
.eq-btn-sec:hover:not(.eq-dis) { background: rgba(255,255,255,.13); color: #F1F5F9; }
.eq-btn-lg          { padding: 14px 32px; font-size: 16px; border-radius: 6px; }
.eq-dis             { opacity: .3; cursor: default; pointer-events: none; }

/* ── Sidebar (timer + score stacked) ── */
.eq-sidebar {
	position: fixed;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}

/* ── Timer widget ── */
.eq-timer {
	/* When inside .eq-sidebar it inherits positioning from the sidebar */
	position: static;
	transform: none;
	top: auto;
	right: auto;
	z-index: auto;
	background: rgba(7,9,15,.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	padding: 18px 22px;
	text-align: center;
	min-width: 108px;
	transition: border-color .4s, box-shadow .4s;
}

/* ── Score widget ── */
.eq-score-widget {
	background: rgba(7,9,15,.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px;
	padding: 18px 22px;
	text-align: center;
	min-width: 108px;
}
.eq-score-widget-num {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 30px;
	font-weight: 500;
	color: #F1F5F9;
	line-height: 1;
	margin-bottom: 12px;
	letter-spacing: .03em;
}
.eq-score-widget-tot {
	font-size: 16px;
	color: #64748B;
	font-weight: 400;
}
.eq-score-widget-fill {
	height: 100%;
	background: #2dd4bf;
	border-radius: 99px;
	transition: width .4s ease;
}
.eq-timer-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #3D4E63;
	margin-bottom: 8px;
}
.eq-timer-display {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 30px;
	font-weight: 500;
	color: #F1F5F9;
	line-height: 1;
	margin-bottom: 12px;
	letter-spacing: .03em;
}
.eq-timer-track {
	height: 3px;
	background: rgba(255,255,255,.08);
	border-radius: 99px;
	overflow: hidden;
}
.eq-timer-fill {
	height: 100%;
	background: #EAB308;
	border-radius: 99px;
	transition: width 1s linear, background .4s;
}

/* Warning — under 25% */
.eq-timer-warn { border-color: rgba(234,179,8,.35); }
.eq-timer-warn .eq-timer-display { color: #EAB308; }
.eq-timer-warn .eq-timer-fill    { background: #EAB308; }

/* Danger — under 10% */
.eq-timer-danger {
	border-color: rgba(239,68,68,.5);
	animation: timerPulse 1.2s ease infinite;
}
.eq-timer-danger .eq-timer-display { color: #f87171; }
.eq-timer-danger .eq-timer-fill    { background: #ef4444; }

@keyframes timerPulse {
	0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
	50%      { box-shadow: 0 0 0 8px rgba(239,68,68,.12); }
}

/* Mobile: sticky top strip */
@media (max-width: 768px) {
	.eq-sidebar {
		position: sticky;
		top: 0;
		right: auto;
		transform: none;
		flex-direction: row;
		width: 100%;
		gap: 0;
		margin-bottom: 24px;
		z-index: 300;
	}
	.eq-timer,
	.eq-score-widget {
		position: static;
		flex: 1;
		border-radius: 0;
		padding: 10px 16px;
		display: flex;
		align-items: center;
		gap: 10px;
		text-align: left;
		border-top: none;
		border-bottom: 1px solid rgba(255,255,255,.08);
		min-width: 0;
	}
	.eq-timer       { border-left: none; border-right: none; }
	.eq-score-widget{ border-left: 1px solid rgba(255,255,255,.08); border-right: none; }
	.eq-timer-label,
	.eq-score-widget .eq-timer-label { margin-bottom: 0; white-space: nowrap; }
	.eq-timer-display  { font-size: 22px; margin-bottom: 0; }
	.eq-score-widget-num { font-size: 22px; margin-bottom: 0; }
	.eq-timer-track,
	.eq-score-widget .eq-timer-track { flex: 1; height: 4px; }
}

/* ── Start screen ── */
.eq-start  { text-align: center; padding: 40px 20px; }
.eq-title  { font-size: 26px; font-weight: 700; margin: 0 0 8px; color: #F1F5F9; }
.eq-meta   { color: #94A3B8; font-size: 15px; margin: 0 0 32px; }

/* ── Results screen ── */
.eq-results    { text-align: center; padding: 40px 20px; }
.eq-res-icon   { font-size: 64px; line-height: 1; margin-bottom: 16px; }
.eq-results h2 { font-size: 28px; margin: 0 0 16px; color: #F1F5F9; }
.eq-score-big  { font-size: 56px; font-weight: 800; color: #EAB308; line-height: 1; margin-bottom: 8px; }
.eq-score-pct  { font-size: 17px; color: #94A3B8; }

/* ── Section shared titles ── */
.eq-section-title {
	font-size: 20px;
	font-weight: 700;
	color: #F1F5F9;
	margin: 0 0 6px;
}
.eq-section-sub {
	font-size: 14px;
	color: #94A3B8;
	margin: 0 0 20px;
	line-height: 1.6;
}

/* ── What to improve ── */
.eq-improve-wrap {
	margin-top: 32px;
	padding: 28px 28px 24px;
	background: rgba(234,179,8,.06);
	border: 1px solid rgba(234,179,8,.18);
	border-radius: 12px;
}
.eq-improve-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.eq-improve-list li {
	padding: 5px 14px;
	background: rgba(234,179,8,.12);
	border: 1px solid rgba(234,179,8,.25);
	border-radius: 99px;
	font-size: 13px;
	color: #EAB308;
	line-height: 1.4;
}

/* ── Answer review ── */
.eq-review-wrap {
	margin-top: 28px;
}
.eq-review-item {
	display: flex;
	gap: 16px;
	padding: 20px;
	margin-bottom: 14px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 10px;
	align-items: flex-start;
}
.eq-review-num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(251,113,133,.15);
	border: 1px solid rgba(251,113,133,.3);
	color: #fb7185;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.eq-review-body { flex: 1; min-width: 0; }
.eq-review-q {
	font-size: 15px;
	font-weight: 600;
	color: #F1F5F9;
	margin: 0 0 14px;
	line-height: 1.55;
}
.eq-review-answers {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}
.eq-review-wrong,
.eq-review-correct {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.eq-review-wrong   { background: rgba(251,113,133,.09); border: 1px solid rgba(251,113,133,.2); color: #F1F5F9; }
.eq-review-correct { background: rgba(45,212,191,.09);  border: 1px solid rgba(45,212,191,.2);  color: #F1F5F9; }
.eq-review-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
}
.eq-review-label-wrong   { color: #fb7185; }
.eq-review-label-correct { color: #2dd4bf; }
.eq-review-expl {
	padding: 12px 14px;
	background: rgba(56,189,248,.07);
	border-left: 3px solid #38BDF8;
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	line-height: 1.65;
	color: #BAE6FD;
}

@media (max-width: 600px) {
	.eq-review-item { flex-direction: column; }
}

/* ── Guest CTA ── */
.eq-cta-wrap  { margin-top: 32px; }
.eq-cta-box {
	background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
	border: 1px solid rgba(99,102,241,.3);
	border-radius: 16px;
	padding: 36px 32px;
	text-align: center;
}
.eq-cta-icon  { font-size: 48px; line-height: 1; margin-bottom: 16px; }
.eq-cta-title {
	font-size: 24px;
	font-weight: 800;
	color: #F1F5F9;
	margin: 0 0 14px;
}
.eq-cta-body {
	font-size: 15px;
	color: #CBD5E1;
	line-height: 1.7;
	max-width: 520px;
	margin: 0 auto 20px;
}
.eq-cta-perks {
	list-style: none;
	margin: 0 auto 28px;
	padding: 0;
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
	font-size: 14px;
	color: #94A3B8;
}
.eq-cta-perks li { color: #CBD5E1; }
.eq-cta-btn {
	background: linear-gradient(135deg, #6366f1, #a855f7) !important;
	color: #fff !important;
	font-size: 16px;
	padding: 14px 36px;
	box-shadow: 0 8px 28px rgba(99,102,241,.35);
}
.eq-cta-btn:hover { opacity: .9; transform: translateY(-2px); }
.eq-cta-login {
	margin-top: 14px;
	font-size: 13px;
	color: #64748B;
}
.eq-cta-login a { color: #818CF8; text-decoration: none; }
.eq-cta-login a:hover { text-decoration: underline; }

/* Light theme overrides for new sections */
html[data-theme="light"] .eq-section-title { color: #0f172a; }
html[data-theme="light"] .eq-improve-wrap  { background: rgba(180,83,9,.05); border-color: rgba(180,83,9,.18); }
html[data-theme="light"] .eq-improve-list li { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.2); color: #92400e; }
html[data-theme="light"] .eq-review-item   { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
html[data-theme="light"] .eq-review-q      { color: #0f172a; }
html[data-theme="light"] .eq-review-wrong  { background: rgba(225,29,72,.06);  border-color: rgba(225,29,72,.15);  color: #0f172a; }
html[data-theme="light"] .eq-review-correct{ background: rgba(13,148,136,.06); border-color: rgba(13,148,136,.15); color: #0f172a; }
html[data-theme="light"] .eq-review-expl   { background: rgba(14,165,233,.07); border-left-color: #0284c7; color: #0369a1; }
html[data-theme="light"] .eq-cta-box       { background: linear-gradient(135deg, rgba(99,102,241,.07), rgba(168,85,247,.05)); border-color: rgba(99,102,241,.2); }
html[data-theme="light"] .eq-cta-title     { color: #0f172a; }
html[data-theme="light"] .eq-cta-body      { color: #334155; }
html[data-theme="light"] .eq-cta-perks li  { color: #334155; }

/* ── Report problem ── */
.eq-report-wrap {
	margin-top: 20px;
	text-align: right;
}
.eq-report-btn {
	background: none;
	border: none;
	padding: 0;
	font-size: 12px;
	color: #475569;
	cursor: pointer;
	font-family: inherit;
	transition: color .15s;
}
.eq-report-btn:hover { color: #f87171; }
.eq-report-sent {
	font-size: 12px;
	color: #4ade80;
	font-style: italic;
}

html[data-theme="light"] .eq-report-btn { color: #94a3b8; }
html[data-theme="light"] .eq-report-btn:hover { color: #dc2626; }
html[data-theme="light"] .eq-report-sent { color: #16a34a; }

/* ── Light Theme overrides ── */
html[data-theme="light"] .eq-wrap    { color: #0f172a; }

html[data-theme="light"] .eq-prog-lbl         { color: #475569; }
html[data-theme="light"] .eq-prog-lbl strong  { color: #0f172a; }
html[data-theme="light"] .eq-bar              { background: rgba(0,0,0,.10); }
html[data-theme="light"] .eq-bar-fill         { background: #b45309; }

html[data-theme="light"] .eq-q-text { color: #0f172a; }

html[data-theme="light"] .eq-opt {
	border-color: rgba(0,0,0,.12);
	background: rgba(0,0,0,.025);
	color: #334155;
}
html[data-theme="light"] .eq-opt:hover:not([disabled]):not(.eq-opt-dis) {
	border-color: #b45309;
	background: rgba(180,83,9,.07);
	color: #0f172a;
}
html[data-theme="light"] .eq-opt-ltr {
	background: rgba(0,0,0,.07);
	color: #64748b;
}
html[data-theme="light"] .eq-opt-ok  { color: #0f172a !important; border-color: #0d9488 !important; background: rgba(13,148,136,.09) !important; box-shadow: 0 0 0 1px rgba(13,148,136,.2); }
html[data-theme="light"] .eq-opt-err { color: #0f172a !important; border-color: #e11d48 !important; background: rgba(225,29,72,.08) !important; box-shadow: 0 0 0 1px rgba(225,29,72,.2); }
html[data-theme="light"] .eq-opt-ok  .eq-opt-ltr { background: linear-gradient(135deg, #0d9488, #2dd4bf); color: #fff; }
html[data-theme="light"] .eq-opt-err .eq-opt-ltr { background: linear-gradient(135deg, #e11d48, #fb7185); color: #fff; }
html[data-theme="light"] .eq-opt-dis:not(.eq-opt-ok):not(.eq-opt-err) { opacity: .45; }

html[data-theme="light"] .eq-fb-ok  { background: rgba(13,148,136,.09); color: #0d9488; border-left-color: #0d9488; }
html[data-theme="light"] .eq-fb-err { background: rgba(225,29,72,.08);  color: #e11d48; border-left-color: #e11d48; }

html[data-theme="light"] .eq-explanation {
	background: rgba(14,165,233,.08);
	border-left-color: #0284c7;
	color: #0369a1;
}
html[data-theme="light"] .eq-expl-label { color: #0284c7; }

html[data-theme="light"] .eq-btn-pri { background: #b45309; color: #fff; }
html[data-theme="light"] .eq-btn-pri:hover:not(.eq-dis) { background: #92400e; color: #fff; box-shadow: 0 6px 20px rgba(180,83,9,.28); }
html[data-theme="light"] .eq-btn-sec { background: rgba(0,0,0,.06); color: #475569; }
html[data-theme="light"] .eq-btn-sec:hover:not(.eq-dis) { background: rgba(0,0,0,.10); color: #0f172a; }

html[data-theme="light"] .eq-title  { color: #0f172a; }
html[data-theme="light"] .eq-meta   { color: #64748b; }
html[data-theme="light"] .eq-results h2    { color: #0f172a; }
html[data-theme="light"] .eq-score-big     { color: #b45309; }
html[data-theme="light"] .eq-score-pct     { color: #64748b; }

html[data-theme="light"] .eq-timer,
html[data-theme="light"] .eq-score-widget {
	background: rgba(255,255,255,.96);
	border-color: rgba(0,0,0,.12);
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
html[data-theme="light"] .eq-score-widget-num { color: #0f172a; }
html[data-theme="light"] .eq-score-widget-tot { color: #94a3b8; }
html[data-theme="light"] .eq-score-widget .eq-timer-label { color: #94a3b8; }
html[data-theme="light"] .eq-timer-label   { color: #94a3b8; }
html[data-theme="light"] .eq-timer-display { color: #0f172a; }
html[data-theme="light"] .eq-timer-track   { background: rgba(0,0,0,.08); }
html[data-theme="light"] .eq-timer-fill    { background: #b45309; }
html[data-theme="light"] .eq-timer-warn    { border-color: rgba(180,83,9,.35); }
html[data-theme="light"] .eq-timer-warn  .eq-timer-display { color: #b45309; }
html[data-theme="light"] .eq-timer-warn  .eq-timer-fill    { background: #b45309; }
html[data-theme="light"] .eq-timer-danger  { border-color: rgba(220,38,38,.5); }
html[data-theme="light"] .eq-timer-danger .eq-timer-display { color: #dc2626; }
html[data-theme="light"] .eq-timer-danger .eq-timer-fill    { background: #dc2626; }