/* MandarinMiles · 自测定级测验
   页面级作用域 .mm-level-check；配色走 --fl-* 令牌（跟随主题亮/暗）。 */

/* ---------- 横幅插画（远眺群山 + 登山者） ---------- */
.mm-level-check {
	/* 亮色：品牌蓝阶 + 品牌绿晕染 */
	--fl-sky-a: #E8F1FE;
	--fl-sky-b: #D3E3FB;
	--fl-sky-c: #C2D8F7;
	--fl-sun-a: rgba(255, 255, 255, .70);
	--fl-sun-b: rgba(255, 255, 255, .30);
	--fl-sun-c: rgba(255, 255, 255, 0);
	--fl-disc: rgba(255, 255, 255, .82);
	--fl-r1: #B9CFE8;
	--fl-r2: #96B6DC;
	--fl-r3: #6E93C8;
	--fl-r4: #3E6BAE;
	--fl-r5: #23457C;
	--fl-haze-a: rgba(233, 241, 253, .58);
	--fl-haze-b: rgba(233, 241, 253, 0);
	--fl-figure: #12243F;
	--fl-figure-edge: rgba(255, 255, 255, .55);
	--fl-trail: rgba(255, 255, 255, .5);
	--fl-bird: rgba(18, 36, 63, .42);
}

:root[data-theme="dark"] .mm-level-check {
	--fl-sky-a: #07142B;
	--fl-sky-b: #0C2244;
	--fl-sky-c: #123059;
	--fl-sun-a: rgba(150, 190, 245, .20);
	--fl-sun-b: rgba(150, 190, 245, .08);
	--fl-sun-c: rgba(150, 190, 245, 0);
	--fl-disc: rgba(196, 220, 252, .70);
	--fl-r1: #16305A;
	--fl-r2: #12274A;
	--fl-r3: #0F1F3A;
	--fl-r4: #0C1829;
	--fl-r5: #08111F;
	--fl-haze-a: rgba(16, 38, 74, .5);
	--fl-haze-b: rgba(16, 38, 74, 0);
	--fl-figure: #0A1526;
	--fl-figure-edge: rgba(196, 220, 252, .85);
	--fl-trail: rgba(154, 167, 188, .34);
	--fl-bird: rgba(200, 214, 236, .38);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mm-level-check {
		--fl-sky-a: #07142B;
		--fl-sky-b: #0C2244;
		--fl-sky-c: #123059;
		--fl-sun-a: rgba(91, 151, 249, .22);
		--fl-sun-b: rgba(91, 151, 249, .09);
		--fl-sun-c: rgba(91, 151, 249, 0);
		--fl-r1: #16305A;
		--fl-r2: #12274A;
		--fl-r3: #0F1F3A;
		--fl-r4: #0C1829;
		--fl-r5: #08111F;
		--fl-haze-a: rgba(16, 38, 74, .5);
		--fl-haze-b: rgba(16, 38, 74, 0);
		--fl-figure: #0A1526;
	--fl-figure-edge: rgba(196, 220, 252, .85);
		--fl-trail: rgba(154, 167, 188, .34);
		--fl-bird: rgba(200, 214, 236, .38);
	}
}

.mm-lc-banner {
	position: relative;
	width: 100%;
	height: 112px; /* 与站点统一横幅 --pb-h 对齐 */
	overflow: hidden;
	background: var(--fl-sky-a);
}
.mm-lc-banner .mm-fl-art { display: block; width: 100%; height: 100%; }

/* 模板里的横幅：紧贴导航栏的全宽带（突破正文容器宽度） */
.mm-fl-page { margin: 0; }
.mm-fl-banner {
	position: relative;
	width: 100%;
	height: 112px; /* 与站点统一横幅 --pb-h 对齐 */
	overflow: hidden;
	background: var(--fl-sky-a);
}
.mm-fl-banner .mm-fl-art { display: block; width: 100%; height: 100%; }
/* 横幅的配色令牌要作用在 .mm-fl-page 上（横幅不在 .mm-level-check 内） */
.mm-fl-page {
	--fl-sky-a: #E8F1FE;
	--fl-sky-b: #D3E3FB;
	--fl-sky-c: #C2D8F7;
	--fl-sun-a: rgba(255, 255, 255, .70);
	--fl-sun-b: rgba(255, 255, 255, .30);
	--fl-sun-c: rgba(255, 255, 255, 0);
	--fl-disc: rgba(255, 255, 255, .82);
	--fl-r1: #B9CFE8;
	--fl-r2: #96B6DC;
	--fl-r3: #6E93C8;
	--fl-r4: #3E6BAE;
	--fl-r5: #23457C;
	--fl-haze-a: rgba(233, 241, 253, .58);
	--fl-haze-b: rgba(233, 241, 253, 0);
	--fl-figure: #12243F;
	--fl-figure-edge: rgba(255, 255, 255, .55);
	--fl-trail: rgba(255, 255, 255, .5);
	--fl-bird: rgba(18, 36, 63, .42);
}
:root[data-theme="dark"] .mm-fl-page {
	--fl-sky-a: #07142B;
	--fl-sky-b: #0C2244;
	--fl-sky-c: #123059;
	--fl-sun-a: rgba(150, 190, 245, .20);
	--fl-sun-b: rgba(150, 190, 245, .08);
	--fl-sun-c: rgba(150, 190, 245, 0);
	--fl-disc: rgba(196, 220, 252, .70);
	--fl-r1: #16305A;
	--fl-r2: #12274A;
	--fl-r3: #0F1F3A;
	--fl-r4: #0C1829;
	--fl-r5: #08111F;
	--fl-haze-a: rgba(16, 38, 74, .5);
	--fl-haze-b: rgba(16, 38, 74, 0);
	--fl-figure: #0A1526;
	--fl-figure-edge: rgba(196, 220, 252, .85);
	--fl-trail: rgba(154, 167, 188, .34);
	--fl-bird: rgba(200, 214, 236, .38);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) .mm-fl-page {
		--fl-sky-a: #07142B;
		--fl-sky-b: #0C2244;
		--fl-sky-c: #123059;
		--fl-sun-a: rgba(91, 151, 249, .22);
		--fl-sun-b: rgba(91, 151, 249, .09);
		--fl-sun-c: rgba(91, 151, 249, 0);
		--fl-r1: #16305A;
		--fl-r2: #12274A;
		--fl-r3: #0F1F3A;
		--fl-r4: #0C1829;
		--fl-r5: #08111F;
		--fl-haze-a: rgba(16, 38, 74, .5);
		--fl-haze-b: rgba(16, 38, 74, 0);
		--fl-figure: #0A1526;
	--fl-figure-edge: rgba(196, 220, 252, .85);
		--fl-trail: rgba(154, 167, 188, .34);
		--fl-bird: rgba(200, 214, 236, .38);
	}
}
.mm-fl-art .fl-sky-a { stop-color: var(--fl-sky-a); }
.mm-fl-art .fl-sky-b { stop-color: var(--fl-sky-b); }
.mm-fl-art .fl-sky-c { stop-color: var(--fl-sky-c); }
.mm-fl-art .fl-sun-a { stop-color: var(--fl-sun-a); }
.mm-fl-art .fl-sun-b { stop-color: var(--fl-sun-b); }
.mm-fl-art .fl-sun-c { stop-color: var(--fl-sun-c); }
.mm-fl-art .fl-haze-a { stop-color: var(--fl-haze-a); }
.mm-fl-art .fl-haze-b { stop-color: var(--fl-haze-b); }
.mm-fl-art .fl-r1 { fill: var(--fl-r1); }
.mm-fl-art .fl-r2 { fill: var(--fl-r2); }
.mm-fl-art .fl-r3 { fill: var(--fl-r3); }
.mm-fl-art .fl-r4 { fill: var(--fl-r4); }
.mm-fl-art .fl-r5 { fill: var(--fl-r5); }
.mm-fl-art .fl-figure {
	fill: var(--fl-figure);
	stroke: var(--fl-figure-edge);
	stroke-width: 1.1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.mm-fl-art .fl-disc { fill: var(--fl-disc); }
.mm-fl-art .fl-trail { stroke: var(--fl-trail); stroke-width: 2.5; stroke-dasharray: 5 7; }
.mm-fl-art .fl-birds { stroke: var(--fl-bird); stroke-width: 1.6; }

/* ---------- 主体 ---------- */
.mm-level-check { display: block; }
/* 主体区由外层 .mm-fl-columns 负责排版（两栏 + 左对齐），
   这里只保留纵向留白，去掉 max-width/margin 居中，
   否则题目会在主栏里再居中一次、左侧多出空白。 */
.mm-lc-shell {
	max-width: none;
	margin: 0;
	padding: 26px 0 64px;
}
.mm-lc-head { text-align: center; margin-bottom: 26px; }
.mm-lc-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--primary);
	background: var(--brand-tint);
	border-radius: 999px;
	padding: 5px 13px;
	margin-bottom: 14px;
}
.mm-lc-head h1 {
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.15;
	margin: 0 0 10px;
	color: var(--primary-dark);
	letter-spacing: -.02em;
}
.mm-lc-sub {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 auto;
	max-width: 560px;
}
.mm-lc-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin: 18px 0 0;
	padding: 0;
	font-size: 13px;
	color: var(--muted);
}
.mm-lc-facts b { color: var(--text); font-weight: 800; }

/* ---------- 进度条 ---------- */
.mm-lc-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}
.mm-lc-progress-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--border);
	overflow: hidden;
}
.mm-lc-progress-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--primary), var(--accent));
	transition: width .25s ease;
}
/* 未作答时进度条整体降低存在感，避免空槽抢视线 */
.mm-lc-progress[data-idle="1"] .mm-lc-progress-bar { background: var(--border); opacity: .5; }
.mm-lc-progress-text {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- 题目 ----------
   方案 A：框内标题 + 分隔线
   · 题头是普通 div（不是 legend），稳稳落在卡片框内；
   · 题头独占一行，底部 1px 线与选项区隔开；
   · 编号圆点 + HSK 级别标签保持原有识别度。 */
.mm-lc-form { display: grid; gap: 14px; }
.mm-lc-q {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 0;
	margin: 0;
	background: var(--card);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.mm-lc-q-head {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 15px 17px 13px;
	margin: 0;
	border-bottom: 1px solid var(--border);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--text);
}
.mm-lc-q-no {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
}
.mm-lc-q-text { flex: 1 1 auto; min-width: 0; }
/* 题干内联考点高亮（题库 HTML：<code>脱颖而出</code>） */
.mm-lc-q-text code {
	font-family: var(--font-zh, inherit);
	font-size: 1.05em;
	font-weight: 800;
	background: var(--brand-soft, rgba(17, 102, 240, .08));
	color: var(--primary, #1166F0);
	padding: 1px 7px;
	border-radius: 6px;
	white-space: nowrap;
}
.mm-lc-q-lv {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--accent-strong);
	background: var(--teal-tint);
	border-radius: 999px;
	padding: 3px 9px;
	margin-top: 3px;
}
.mm-lc-opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	padding: 15px 17px 17px;
}
.mm-lc-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
	font-size: 14.5px;
	color: var(--text);
	transition: background .15s ease, border-color .15s ease;
}
.mm-lc-opt:hover { background: var(--bg); border-color: var(--aux); }
.mm-lc-opt input { accent-color: var(--primary); width: 16px; height: 16px; flex: 0 0 auto; }
.mm-lc-opt-t { min-width: 0; overflow-wrap: anywhere; }

/* ---------- 分页 ---------- */
.mm-lc-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 22px 0 4px;
}
.mm-lc-page-btn,
.mm-lc-page-num {
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	padding: 8px 14px;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--text);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mm-lc-page-btn:hover,
.mm-lc-page-num:hover { background: var(--bg); border-color: var(--aux); }
.mm-lc-page-num { min-width: 38px; text-align: center; padding: 8px 10px; }
.mm-lc-page-num.on {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.mm-lc-page-nums { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mm-lc-page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- 提交与结果 ---------- */
.mm-lc-actions { margin: 24px 0 8px; text-align: center; }
.mm-lc-actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
.mm-lc-result { margin-top: 24px; text-align: center; }
.mm-lc-verdict {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 22px 26px;
	margin-bottom: 16px;
}
.mm-lc-badge {
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	background: linear-gradient(150deg, #1166F0, #2A9D8F);
	border-radius: 999px;
	padding: 8px 22px;
}
.mm-lc-verdict p { margin: 0; font-size: 15px; color: var(--text); line-height: 1.6; }
.mm-lc-saved { display: inline-block; margin-left: 10px; font-size: 13px; color: var(--accent-strong); font-weight: 700; }

/* ---------- v2 自适应结果页 ---------- */
.mm-lc-cefr {
	display: inline-block; margin-left: 6px;
	font-size: 12.5px; font-weight: 700; color: var(--accent-strong);
	background: var(--teal-tint); border-radius: 999px; padding: 2px 10px;
}
.mm-lc-note { max-width: 56ch; margin: 4px auto 0; font-size: 14px; color: var(--muted); line-height: 1.65; }
.mm-lc-skills {
	display: flex; flex-direction: column; gap: 8px;
	background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
	padding: 16px 20px; margin: 0 auto 16px; max-width: 420px;
}
.mm-lc-skill { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mm-lc-skill-name { flex: 0 0 84px; text-align: left; font-weight: 600; color: var(--text); }
.mm-lc-skill-bar {
	flex: 1 1 auto; height: 8px; border-radius: 999px;
	background: var(--border); overflow: hidden; position: relative;
}
.mm-lc-skill-bar span {
	display: block; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #1166F0, #2A9D8F);
	transition: width .5s ease;
}
.mm-lc-skill b { flex: 0 0 42px; text-align: right; color: var(--primary-dark); font-family: var(--mm-font-latin); }
.mm-lc-weak { margin: 0 auto 18px; max-width: 52ch; font-size: 13.5px; color: #B36D00; background: #FFF4E0; border-radius: 10px; padding: 9px 14px; line-height: 1.6; }
.mm-lc-hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.mm-lc-verdict strong { color: var(--primary-dark); }

/* ---------- 响应式 ---------- */
@media (max-width: 700px) {
	.mm-lc-shell { padding: 26px 16px 52px; }
	.mm-lc-opts { grid-template-columns: 1fr; }
	.mm-lc-banner { height: clamp(124px, 26vw, 168px); }
	.mm-lc-facts { gap: 8px 16px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-lc-progress-bar span { transition: none; }
}