/* ===== 金相大会备考学习系统 样式 ===== */
/* 书法体（阿里妈妈数黑体，免费商用，jsdelivr CDN）：仅用于 H1 大标题，正文统一系统字体；断网时自动回退系统字体 */
@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url("https://cdn.jsdelivr.net/npm/@fontpkg/alimama-shu-hei-ti@1.0.5/AlimamaShuHeiTi-Bold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ===== Design Tokens ===== */
  /* -- 主色（唯一品牌色；界面其余为中性灰阶 + 语义色） -- */
  /* 默认即清华紫（新用户默认主题），避免首帧先渲染蓝色再切换 */
  --primary: #82318e;
  --primary-dk: #662571;
  --primary-bg: #f5ecf8;
  --info-1: var(--primary);   /* 主色同值，仅作兼容 */
  --info-2: #a455b0;          /* 主色亮阶：仅用于主色渐变的过渡 */
  /* -- 中性灰阶（无色偏：金相图本身是黑白灰，界面保持中性，让图片成为视觉焦点） -- */
  --g-0: #ffffff;
  --g-1: #fafafa;
  --g-2: #f4f4f5;
  --g-3: #e9e9ea;
  --g-4: #d8d8da;
  --g-5: #a6a7ab;
  --g-6: #6f7075;
  --g-7: #4b4c50;
  --g-8: #333438;
  --g-9: #1f2023;
  /* -- 表面 / 文字 / 分隔线（灰阶映射） -- */
  --bg: var(--g-2);
  --card: var(--g-0);
  --ink: var(--g-8);
  --ink-2: var(--g-6);
  --line: var(--g-3);
  --soft-bg: var(--g-1);
  --tag-bg: var(--g-2);
  --field-bg: var(--g-0);
  --hover-bg: var(--g-1);
  --track-bg: var(--g-3);
  /* -- 语义色（对错/警示/收藏，非装饰色） -- */
  --ok: #2e9e5b;
  --ok-bg: #e7f6ee;
  --bad: #d64545;
  --bad-bg: #fdeaea;
  --warn: #d98a1f;
  --warn-bg: #fdf4e3;
  --gold: #e8a33d;
  --multi-bg: #f3e9fb;
  --mask-shadow: rgba(31, 32, 35, .65);
  /* -- 侧栏（主色系深色渐变区） -- */
  --side: #201224;
  --side-2: #3a1c42;
  --side-ink: #b8c4d2;
  /* -- 圆角：小元素 / 控件 / 容器 -- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --radius: var(--r-lg); /* 兼容别名 */
  /* -- 阴影：静置 / 悬浮 / 弹层 -- */
  --shadow-1: 0 1px 2px rgba(31, 32, 35, .05), 0 6px 18px rgba(31, 32, 35, .05);
  --shadow-2: 0 4px 16px rgba(31, 32, 35, .12);
  --shadow-3: 0 12px 32px rgba(31, 32, 35, .18);
  --shadow: var(--shadow-1); /* 兼容别名 */
  /* -- 间距（4 的倍数节奏） -- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 32px;
  --img-bg: #ececf1; /* v2.8.7：题图 letterbox 底色（深色主题覆写为 #0d1117） */
  /* -- 字体：书法体仅用于 H1，正文统一 -- */
  --font-body: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --font-display: "Alimama ShuHeiTi", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}
html[data-theme="dark"] {
  --bg: #151619;
  --card: #1f2024;
  --ink: #e3e4e8;
  --ink-2: #9a9ba0;
  --line: #33353a;
  --primary: #bd7ecb;
  --primary-dk: #d1a3dc;
  --primary-bg: #372240;
  --info-1: #5a2450;
  --info-2: #7a3a6e;
  --ok: #3fbf77;
  --ok-bg: #1e3a2c;
  --bad: #e06c6c;
  --bad-bg: #402323;
  --warn: #e0a84f;
  --warn-bg: #403520;
  --gold: #e8a33d;
  --side: #150c17;
  --side-2: #271529;
  --side-ink: #9a9ba0;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
  --soft-bg: #26272c;
  --tag-bg: #2a2c31;
  --field-bg: #1f2024;
  --hover-bg: #26282d;
  --track-bg: #2a2c31;
  --multi-bg: #3a2c4a;
  --img-bg: #0d1117;
  --mask-shadow: rgba(220, 228, 238, .6);
}
html[data-fs="sm"] { font-size: 14px; }
html[data-fs="md"] { font-size: 16px; }
html[data-fs="lg"] { font-size: 18px; }

/* ---- 主题色方案（浅色值；深色组合见下方高优先级规则） ---- */
/* v2.3 默认改紫时 :root 由蓝改紫，靛蓝曾作为"默认值"无独立规则，此处补回，否则切换蓝色无效 */
html[data-accent="blue"] { --primary: #1f66b5; --primary-dk: #16518f; --primary-bg: #ecf2fa; --info-1: #1f66b5; --info-2: #4a87c9; --side: #0f1c29; --side-2: #1c3650; }
html[data-accent="purple"] { --primary: #82318e; --primary-dk: #662571; --primary-bg: #f5ecf8; --info-1: #82318e; --info-2: #a455b0; --side: #201224; --side-2: #3a1c42; }
html[data-accent="teal"] { --primary: #0e8f84; --primary-dk: #0a6f66; --primary-bg: #e6f5f3; --info-1: #0e8f84; --info-2: #2bab9f; --side: #102020; --side-2: #163b37; }
html[data-accent="green"] { --primary: #2e7d4f; --primary-dk: #23603d; --primary-bg: #e9f5ee; --info-1: #2e7d4f; --info-2: #43996a; --side: #122018; --side-2: #1c3a29; }
html[data-accent="orange"] { --primary: #cf6a1a; --primary-dk: #a55415; --primary-bg: #fcf1e5; --info-1: #cf6a1a; --info-2: #e08a3c; --side: #231a10; --side-2: #3f2c15; }
html[data-accent="rose"] { --primary: #c14e6a; --primary-dk: #9d3b53; --primary-bg: #faecef; --info-1: #c14e6a; --info-2: #d76d86; --side: #221218; --side-2: #3f1c26; }
html[data-theme="dark"][data-accent="blue"] { --primary: #6ea6dd; --primary-dk: #94bce8; --primary-bg: #1d3247; --info-1: #1e4468; --info-2: #2c5d88; --side: #0b1119; --side-2: #142437; }
html[data-theme="dark"][data-accent="purple"] { --primary: #bd7ecb; --primary-dk: #d1a3dc; --primary-bg: #372240; --info-1: #5a2450; --info-2: #7a3a6e; --side: #150c17; --side-2: #271529; }
html[data-theme="dark"][data-accent="teal"] { --primary: #3fc3b5; --primary-dk: #6ad4c8; --primary-bg: #1b3634; --info-1: #134a44; --info-2: #1e6a60; --side: #0c1514; --side-2: #153029; }
html[data-theme="dark"][data-accent="green"] { --primary: #5cb887; --primary-dk: #7fcba3; --primary-bg: #1d3427; --info-1: #1e4d34; --info-2: #2c6a47; --side: #0e150f; --side-2: #17281d; }
html[data-theme="dark"][data-accent="orange"] { --primary: #e39a52; --primary-dk: #edb27e; --primary-bg: #38271a; --info-1: #5c3a14; --info-2: #7d5423; --side: #171009; --side-2: #2e2113; }
html[data-theme="dark"][data-accent="rose"] { --primary: #e087a1; --primary-dk: #eaa8bb; --primary-bg: #3a2129; --info-1: #57202f; --info-2: #753046; --side: #160e11; --side-2: #2a181e; }

* { box-sizing: border-box; }
/* 移动端字体放大防溢出兜底：禁用移动浏览器自动文字膨胀 + 横向溢出不撑开整页 */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
.hidden { display: none !important; }

/* ---- 布局 ---- */
#layout { display: flex; min-height: 100vh; }
#sidebar { width: 216px; background: linear-gradient(175deg, var(--side) 0%, var(--side-2) 100%); color: var(--side-ink); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 20; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-size: 1.12rem; font-weight: 700; color: #fff; padding: 28px 16px 22px; letter-spacing: 3px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.logo svg { width: 44px; height: 50px; color: rgba(255, 255, 255, .92); flex: none; }
.logo svg .hcp-mid { fill: var(--info-2); stroke: none; }
#nav { display: flex; flex-direction: column; padding: 10px 10px 6px; gap: 5px; flex: 1; }
#nav a { position: relative; color: var(--side-ink); padding: 11px 12px; border-radius: var(--r-md); font-size: .92rem; transition: background .18s, color .18s, transform .18s, box-shadow .18s; }
#nav a svg { width: 15px; height: 15px; margin-right: 9px; vertical-align: -2.5px; opacity: .8; }
#nav a.active svg, #nav a:hover svg { opacity: 1; }
#nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; transform: translateX(3px); }
#nav a::before { content: ''; position: absolute; left: 4px; top: 50%; width: 3px; height: 52%; border-radius: 2px; background: rgba(255, 255, 255, .9); opacity: 0; transform: translateY(-50%) scaleY(.3); transition: opacity .18s, transform .18s; }
#nav a.active { background: linear-gradient(120deg, var(--primary), var(--info-2)); color: #fff; font-weight: 600; box-shadow: var(--shadow-2); }
#nav a.active::before { opacity: 1; transform: translateY(-50%) scaleY(1); }
#side-foot { margin-top: auto; padding: 14px 16px; font-size: .78rem; color: #7c8a9a; display: flex; flex-direction: column; }
/* 侧栏收放手柄：贴侧栏右缘、垂直居中的小 ‹ 图标（电脑端；手机平板隐藏） */
#side-toggle { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 25; width: 22px; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-left: none; border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--side-2); color: var(--side-ink); cursor: pointer; box-shadow: var(--shadow-2); transition: background .18s, color .18s; }
#side-toggle:hover { background: var(--primary); color: #fff; }
#side-toggle svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
body.side-mini #side-toggle svg { transform: rotate(180deg); }
.side-tip { margin: 8px 0 0; line-height: 1.6; }
#main { flex: 1; margin-left: 216px; padding: var(--sp-5) var(--sp-6) 60px; min-width: 0; }

/* ---- 通用 ---- */
.page-title { font-family: var(--font-display); font-size: 2.05rem; font-weight: 700; margin: 10px 0 8px; letter-spacing: .02em; line-height: 1.25; }
.page-sub { color: var(--ink-2); font-size: .92rem; margin: 0 0 26px; line-height: 1.7; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); transition: box-shadow .22s ease, background .22s ease; }
/* 全局圆角卡片 · 悬停加亮：抬升阴影 + 主题色细描边（inset 不占布局） */
.card:hover { box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.card h3 { margin: 0 0 12px; font-size: 1.28rem; letter-spacing: .02em; }
.btn { display: inline-block; border: none; border-radius: var(--r-md); padding: var(--sp-2) var(--sp-5); font-size: .9rem; cursor: pointer; background: var(--primary); color: #fff; transition: background .15s, transform .15s ease, box-shadow .15s ease; max-width: 100%; text-align: center; }
.btn:hover { background: var(--primary-dk); transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 32%, transparent); }
.btn:active { transform: translateY(0) scale(.96); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn.ghost { background: var(--field-bg); color: var(--primary); border: 1px solid var(--primary); }
.btn.ghost:hover { background: var(--primary-bg); }
.btn.gray { background: #8b98a8; }
.btn.gray:hover { background: #74818f; }
.btn.danger { background: var(--bad); }
.btn.sm { padding: 5px 12px; font-size: .82rem; border-radius: var(--r-sm); }
select, input[type="text"], input[type="number"] { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: .9rem; background: var(--field-bg); color: var(--ink); font-family: inherit; max-width: 100%; }
select:focus, input:focus { outline: 2px solid var(--primary-bg); border-color: var(--primary); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .74rem; font-weight: 600; }
.t-single { background: var(--primary-bg); color: var(--primary); }
.t-multi { background: var(--multi-bg); color: #8248b8; }
.t-tf { background: var(--warn-bg); color: var(--warn); }
.tag { display: inline-block; background: var(--tag-bg); color: var(--ink-2); border-radius: var(--r-sm); padding: 2px 8px; font-size: .74rem; margin-right: 6px; }
/* ---- 知识点胶囊（按维度分色：材料蓝/组织紫/工艺橙/理论绿/制样仪器硬度灰）---- */
.kp-tag { display: inline-block; border: 0; border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 600; white-space: nowrap; font-family: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.kp-tag:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(31, 32, 35, .14); }
.kp-tag:active { transform: scale(.94); }
.kp-tag.on { outline: 2px solid currentColor; outline-offset: 1px; }
/* 剧透遮蔽态：未作答时替代可能泄露答案的标签 */
.kp-tag.masked { background: var(--tag-bg); color: var(--ink-2); font-weight: 500; cursor: default; }
.kp-tag.masked:hover { transform: none; box-shadow: none; }
.kp-tag.masked:active { transform: none; }
.kp-tag.mat { background: var(--primary-bg); color: var(--primary); }
.kp-tag.org { background: var(--multi-bg); color: #8248b8; }
.kp-tag.proc { background: var(--warn-bg); color: var(--warn); }
.kp-tag.th { background: var(--ok-bg); color: var(--ok); }
.kp-tag.lab { background: var(--tag-bg); color: var(--ink-2); }
.progress { background: var(--track-bg); border-radius: var(--r-lg); height: 9px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--info-2)); border-radius: var(--r-lg); transition: width .3s; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

/* ---- 仪表盘 · Hero（居中标题 + 背景轮播） ---- */
.hero { position: relative; overflow: hidden; background: var(--soft-bg); padding: 40px 24px 64px; text-align: center; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-6)) 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 22%, color-mix(in srgb, var(--bg) 42%, transparent) 50%, color-mix(in srgb, var(--bg) 62%, transparent) 78%, var(--bg) 100%); pointer-events: none; z-index: 1; }
.hero-copy { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.hero-eyebrow { color: var(--primary); font-size: .9rem; font-weight: 600; letter-spacing: .3em; margin: 0 0 14px; }
.hero-title { font-family: var(--font-display); font-size: 4.6rem; font-weight: 700; margin: 0; letter-spacing: .06em; line-height: 1.15; }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; margin: 28px 0 0; }
.h-stat { padding: 0 26px; }
.h-stat b { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.h-stat span { font-size: .7rem; color: var(--ink-2); letter-spacing: .06em; }
/* 金相组织图 · 背景层轮播 */
.hero-carousel { position: absolute; inset: 0; opacity: .85; filter: saturate(.95); pointer-events: none; }
/* 16 张样品照构图统一偏左（试样圆心 cx≈47%）：整体右移 3% 并放大 7% 补边，使试样圆面在画面中视觉居中 */
.hc-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1.4s ease; transform: translateX(3%) scale(1.07); }
.hc-slide.on { opacity: 1; }
.hc-dots { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; z-index: 2; }
/* 照片底上的圆点：未激活为浅主题色半透明小圆，激活为同色胶囊（仅长度与不透明度区分）；宽度用回弹曲线，切换更灵巧 */
.hc-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: color-mix(in srgb, var(--primary) 70%, #fff); opacity: .38; cursor: pointer; transition: width .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, background .3s ease; }
.hc-dot:hover { opacity: .7; }
.hc-dot.on { width: 26px; opacity: 1; }
/* 轮播当前图片金相名称 · 右下角主题色细线标注 */
.hc-cap { position: absolute; right: 20px; bottom: 18px; z-index: 2; margin: 0; padding: 0; display: flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 600; letter-spacing: .08em; color: var(--primary-dk); }
.hc-cap::before { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--info-2)); }
.mod-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); padding: 24px 18px 22px; }
.mod-card .mc-info { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mod-card .card-btns { display: flex; gap: var(--sp-3); justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.mod-card .mc-sub { margin: 0; color: var(--ink-2); font-size: .8rem; letter-spacing: .05em; }
.hero-cards .card h3 { font-size: 1.45rem; margin: 0; }
/* Hero 内三入口卡片 · 磨砂玻璃（半透明卡片面 + 背景模糊，叠于轮播背景之上） */
.hero-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); width: 100%; max-width: 1020px; margin: 34px auto 0; text-align: center; }
.hero-cards .card.mod-card { background: color-mix(in srgb, var(--card) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); border: 1px solid color-mix(in srgb, var(--card) 45%, transparent); box-shadow: 0 8px 24px rgba(31, 32, 35, .10), inset 0 1px 0 rgba(255, 255, 255, .35); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.hero-cards .card.mod-card:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--card) 78%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .45); }
/* 卡片内按钮：主/次按钮同尺寸同圆角成对出现（画风统一）——两颗均为深色底白字：主题色实心 + 中性深灰实心 */
.hero-cards .btn { font-size: .95rem; padding: 10px 24px; border-radius: var(--r-md); border: 1px solid transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); transition: background .15s, border-color .15s, box-shadow .15s, transform .15s, color .15s; }
.hero-cards .btn:hover { transform: translateY(-1px); }
.hero-cards .btn.ghost { background: var(--g-8); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(31, 32, 35, .24); }
.hero-cards .btn.ghost:hover { background: var(--g-9); border-color: transparent; }
/* 官方流程文件链接 · 居中置于卡片下方 */
.hero-docs { position: relative; z-index: 2; margin: 26px 0 0; font-size: .82rem; color: var(--ink-2); }
.hero-docs a { color: var(--primary-dk); font-weight: 600; border-bottom: 1px dashed var(--primary-dk); padding-bottom: 1px; text-decoration: none; }
.hero-docs a:hover { border-bottom-style: solid; }
.info-banner { background-color: var(--primary-bg); background-image: linear-gradient(180deg, var(--primary-bg) 0%, color-mix(in srgb, var(--primary) 26%, var(--primary-bg)) 100%); color: var(--ink); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5); font-size: .92rem; line-height: 1.8; }
.info-banner b { color: var(--primary-dk); }
.doc-banner { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.doc-banner a { color: var(--primary-dk); font-weight: 600; border-bottom: 1px dashed var(--primary-dk); padding-bottom: 1px; }
.doc-banner a:hover { border-bottom-style: solid; }
.tip-list { margin: 0; padding-left: 18px; line-height: 2; color: var(--ink); font-size: .9rem; }

/* ---- 题目 ---- */
.q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.q-no { font-weight: 700; font-size: 1.05rem; }
.q-stem { font-size: 1rem; line-height: 1.85; margin: 6px 0 14px; }
.q-imgs { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.q-imgs img { max-height: 260px; border-radius: var(--r-md); border: 1px solid var(--line); cursor: zoom-in; }
.opt { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: var(--sp-2); cursor: pointer; line-height: 1.7; font-size: .93rem; transition: all .12s; background: var(--card); }
.opt:hover { border-color: var(--primary); background: var(--hover-bg); }
.opt .opt-letter { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--tag-bg); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; margin-top: 2px; }
.opt.picked { border-color: var(--primary); background: var(--primary-bg); animation: opt-pop .2s ease; }
@keyframes opt-pop { 0% { transform: scale(.985); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } }
.opt.picked .opt-letter { background: var(--primary); color: #fff; }
.opt.was { border-color: var(--primary); border-style: dashed; opacity: .8; }
.opt.correct { border-color: var(--ok); background: var(--ok-bg); }
.opt.correct .opt-letter { background: var(--ok); color: #fff; }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.wrong .opt-letter { background: var(--bad); color: #fff; }
.opt.locked { cursor: default; }
.explain { border-left: 4px solid var(--primary); background: var(--primary-bg); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 12px 16px; margin-top: 14px; font-size: .9rem; line-height: 1.9; }
.explain.ok { border-color: var(--ok); background: var(--ok-bg); }
.explain.bad { border-color: var(--bad); background: var(--bad-bg); }
.explain .ans-line { font-weight: 700; margin-bottom: 4px; }
.filter-bar { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; margin-bottom: 16px; font-size: .88rem; }
.filter-bar label { color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.q-nav { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; }
.q-pos { color: var(--ink-2); font-size: .9rem; }
.jump-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-top: 14px; }
.jump-grid button { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 6px 0; font-size: .8rem; cursor: pointer; color: var(--ink-2); }
.jump-grid button.cur { border-color: var(--primary); color: #fff; background: var(--primary); font-weight: 700; }
.jump-grid button.right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.jump-grid button.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.jump-grid button.fav::after { content: "★"; color: var(--gold); margin-left: 2px; }

/* ---- 机考二 · 答题卡（数字圆圈点阵：41列，656题整好16行） ---- */
.ans-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ans-head h3 { margin: 0; }
.ans-head .ans-sub { color: var(--ink-2); font-size: .78rem; }
.ans-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: .76rem; color: var(--ink-2); margin: 10px 0 14px; }
.ans-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ans-legend i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); }
.ans-legend i.lg-right { background: var(--ok-bg); border-color: var(--ok); }
.ans-legend i.lg-wrong { background: var(--bad-bg); border-color: var(--bad); }
.ans-legend i.lg-cur { background: var(--primary); border-color: var(--primary); }
.ans-legend i.lg-fav { position: relative; border-color: var(--gold); }
.ans-legend i.lg-fav::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--card); }
.ans-scroll { overflow-x: auto; padding-bottom: 6px; }
.ans-foot { display: flex; justify-content: center; padding: 12px 0 2px; }
.ans-grid { display: grid; grid-template-columns: repeat(41, minmax(22px, 1fr)); gap: 4px; }
.ans-grid button { position: relative; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font-size: clamp(8px, .48vw, 12px); line-height: 1; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; padding: 0; min-width: 0; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ans-grid button:hover { transform: scale(1.22); z-index: 3; border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-2); }
.ans-grid button.right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.ans-grid button.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.ans-grid button.fav::after { content: ""; position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--card); }
.ans-grid button.cur { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent); }
.ans-grid button.cur.fav::after { border-color: var(--primary); }
.fav-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #c3ccd8; padding: 0 2px; transition: color .2s ease, transform .2s ease; }
.fav-btn:hover { transform: scale(1.15); }
.fav-btn.on { color: var(--gold); animation: star-pop .35s ease; }
@keyframes star-pop { 0% { transform: scale(.6) rotate(-30deg); } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } }

/* ---- 模拟考 ---- */
.mock-timer { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 8px 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-3) var(--sp-5); margin-bottom: 16px; position: sticky; top: 10px; z-index: 10; }
.mock-timer .time { font-size: 1.5rem; font-weight: 700; font-family: Consolas, monospace; color: var(--primary); }
.mock-timer .time.urgent { color: var(--bad); }
.score-hero { text-align: center; padding: 26px 0 10px; }
.score-hero .big { font-size: 3.2rem; font-weight: 800; color: var(--primary); }
.score-hero .sub { color: var(--ink-2); }
.cfg-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0; font-size: .92rem; }
/* 模拟考启动面板：去掉重复标题，标签居中 + 加大主按钮 */
.mock-start { text-align: center; padding: 28px var(--sp-5); }
.mock-start .cfg-row { justify-content: center; margin: 0 0 20px; }
.mock-start .btn { font-size: 1.05rem; padding: 10px 48px; }
.cfg-row label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.history-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.history-table th, .history-table td { border-bottom: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); text-align: left; }
.history-table th { color: var(--ink-2); font-weight: 600; }

/* ---- 图谱 ---- */
.atlas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-4); }
.atlas-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
/* 图谱浏览网格卡片：悬浮轻微上浮 + 主色描边光晕 + 图片缓放（与全局 .card 悬浮呼应；限时训练大图卡不加） */
.atlas-grid .atlas-card { transition: transform .2s ease, box-shadow .2s ease; }
.atlas-grid .atlas-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.atlas-grid .atlas-card img { transition: transform .3s ease; }
.atlas-grid .atlas-card:hover img { transform: scale(1.04); }
.atlas-card .img-wrap { position: relative; background: var(--img-bg); }
.atlas-card img { width: 100%; height: 230px; object-fit: cover; cursor: zoom-in; display: block; }
/* 训练模式 · 左侧大图按原比例完整显示，不裁剪；v2.8.5 限高——全库唯一竖幅图（低碳钢焊缝 a37，285×318）会把卡片拉得过长，超限 letterbox 居中，点图仍可看原图 */
.atlas-card img.train-img { height: auto; max-height: 430px; object-fit: contain; }
/* v2.6：倍数切换按钮组（右下，就地切换不落盘）；v2.7.1 图片区仅右上★收藏挂饰（考察/扩展两档色）＋右下倍数按钮，类别挪正文首行胶囊 */
.atlas-card .mag-switch { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; }
.atlas-card .mag-btn { background: rgba(20, 30, 44, .75); color: #fff; border: none; border-radius: var(--r-sm); padding: 2px 8px; font-size: .78rem; cursor: pointer; transition: background .15s; }
.atlas-card .mag-btn:hover { background: rgba(20, 30, 44, .95); }
.atlas-card .mag-btn.on { background: var(--primary); cursor: default; }
.atlas-card .atlas-peg { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; border-radius: var(--r-sm); overflow: hidden; }
.atlas-card .atlas-peg.exam { background: var(--primary); }
.atlas-card .atlas-peg.ext { background: rgba(20, 30, 44, .75); }
.atlas-card .atlas-peg .fav-btn { border: 0; background: none; color: #fff; opacity: .82; padding: 2px 8px; font-size: .88rem; line-height: 1.2; cursor: pointer; }
.atlas-card .atlas-peg .fav-btn:hover { opacity: 1; }
.atlas-card .atlas-peg .fav-btn.on { color: #ffd24a; opacity: 1; }
/* v2.7.1：类别胶囊并入知识点胶囊行首位（复用 kp-tag 灰色，纯展示禁用点击交互） */
.atlas-card .cat-chip { cursor: default; }
.atlas-card .cat-chip:hover { transform: none; box-shadow: none; }
.atlas-card .body { padding: 12px 14px; }
.kv { display: flex; font-size: .86rem; line-height: 1.9; }
/* v2.6：图谱卡片知识点胶囊行（复用 kp-tag 配色；隐藏答案自测时不渲染）；过多时折叠为「+N」防卡片参差 */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.tag-extra { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag-more { border: 0; border-radius: 999px; padding: 2px 10px; font-size: .72rem; font-weight: 600; white-space: nowrap; font-family: inherit; cursor: pointer; background: var(--tag-bg); color: var(--ink-2); }
.tag-more:hover { color: var(--ink); }
/* v2.6：卡片等高 + 自评按钮组贴卡片底部——同一行卡片的「掌握/模糊/不会」水平对齐 */
.atlas-grid .atlas-card { display: flex; flex-direction: column; }
.atlas-card .body { flex: 1; display: flex; flex-direction: column; }
.atlas-card .body .rate-row { margin-top: auto; padding-top: 10px; }
/* v2.6：筛选栏已选检索条件胶囊（点 ✕ 移除） */
.fchip { border: 0; border-radius: 999px; padding: 2px 10px; font-size: .74rem; font-weight: 600; white-space: nowrap; font-family: inherit; cursor: pointer; background: var(--primary-bg); color: var(--primary); }
.fchip:hover { outline: 2px solid var(--primary); outline-offset: 1px; }
.kv b { flex: none; min-width: 3.8em; color: var(--ink-2); font-weight: 600; }
.kv.masked span { color: transparent; text-shadow: 0 0 8px var(--mask-shadow); border-radius: 4px; cursor: pointer; user-select: none; }
.rate-row { display: flex; gap: 6px; margin-top: 10px; }
.rate-row button { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 6px 0; font-size: .8rem; cursor: pointer; color: var(--ink-2); transition: transform .15s ease, box-shadow .15s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.rate-row button:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(31, 32, 35, .14); }
.rate-row button:active { transform: translateY(0) scale(.94); box-shadow: none; }
.rate-row button.good.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); font-weight: 700; animation: rate-pop .25s ease; }
.rate-row button.fuzzy.on { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); font-weight: 700; animation: rate-pop .25s ease; }
.rate-row button.bad.on { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); font-weight: 700; animation: rate-pop .25s ease; }
/* 取消自评：窄按钮，悬停转警示红示意「清除」 */
.rate-row button.unrate { flex: 0 0 auto; padding: 6px 12px; }
.rate-row button.unrate:hover { border-color: var(--bad); color: var(--bad); }
@keyframes rate-pop { 0% { transform: scale(.92); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
/* ---- v2.8：图谱训练 · 填空作答与自动批改 ---- */
.qtype-chip { font-size: .74rem; font-weight: 600; color: var(--primary); background: var(--primary-bg); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
/* v2.8.4：训练题卡加大加舒展——已知行/填空/判分行字号上调、行距拉开；提示行与作答区隔开（用户反馈太挤） */
.train-hint { margin: 16px 0 12px; font-size: .8rem; line-height: 1.7; color: var(--ink-2); border-top: 1px dashed var(--line); padding-top: 10px; }
/* v2.8.7：五行统一「标签列＋值框」版式——已知行渲染为与输入框同构的只读值框（软底色示只读），
   挖空仅换盒子内容（文本/输入/判分），不换行结构，版式稳定；行距仍由 .q-rows gap 恒定 */
.q-rows .kv { display: flex; align-items: center; gap: 10px; font-size: 1.04rem; }
.q-rows .kv b { flex: none; min-width: 3.8em; font-size: .98rem; color: var(--ink-2); font-weight: 600; }
.q-rows .kv .q-given { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft-bg); line-height: 1.55; }
.q-rows { display: grid; gap: 13px; } /* v2.8.7：已知/填空/判分行统一等距——间距由容器 gap 恒定，不再各行自带 margin */
.q-rows .fill-row, .q-rows .grade-row { margin: 0; }
.train-card .fill-row b { font-size: .98rem; }
.train-card .fill-in { font-size: 1.04rem; padding: 9px 12px; line-height: 1.55; }
.train-card .grade-row > b { font-size: .98rem; }
.train-card .g-line { font-size: .96rem; line-height: 1.9; }
.fill-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.fill-row b { flex: none; min-width: 3.8em; color: var(--ink-2); font-weight: 600; font-size: .86rem; }
.fill-row .fill-in { flex: 1; min-width: 0; }
.grade-row { display: flex; gap: 10px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.grade-row > b { flex: none; min-width: 3.8em; color: var(--ink-2); font-weight: 600; font-size: .86rem; padding-top: 2px; }
.grade-row.g-ok { border-color: var(--ok); background: var(--ok-bg); }
.grade-row.g-half { border-color: var(--warn); background: var(--warn-bg); }
.grade-row.g-bad { border-color: var(--bad); background: var(--bad-bg); }
.g-line { font-size: .86rem; line-height: 1.8; }
.g-mark { font-weight: 700; margin-right: 2px; }
.g-ok .g-mark { color: var(--ok); } .g-half .g-mark { color: var(--warn); } .g-bad .g-mark { color: var(--bad); }
.oc-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.oc { font-size: .76rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); white-space: nowrap; }
.oc.hit { border-color: var(--ok); color: var(--ok); }
.oc.miss { border-color: var(--bad); color: var(--bad); }
.oc.opt { opacity: .85; }
.oc.extra { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.score-line { margin-top: 12px; font-size: .9rem; color: var(--ink-2); }
.score-line b { color: var(--ink); font-size: 1.05rem; }
/* 训练报告：分字段正确率 + 错题清单 */
.rep-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rep-field { flex: 1 1 140px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; text-align: center; }
.rep-field span { display: block; font-size: .8rem; color: var(--ink-2); }
.rep-field b { display: block; font-size: 1.5rem; margin: 2px 0; }
.rep-field small { display: block; font-size: .72rem; color: var(--ink-2); }
.wrong-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 12px; }
.wrong-item { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .85rem; }
.wrong-item:last-child { border-bottom: 0; }
.wrong-item .w-mat { font-weight: 600; }
.wf { color: var(--ink-2); }
.wf.ok { color: var(--ok); } .wf.half { color: var(--warn); } .wf.bad { color: var(--bad); }
.tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.tabs button { border: none; background: none; padding: 9px 16px; font-size: .92rem; cursor: pointer; color: var(--ink-2); border-bottom: 2.5px solid transparent; margin-bottom: -2px; font-family: inherit; transition: color .18s ease, border-bottom-color .18s ease; }
.tabs button.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }

/* ---- 机考一 ---- */
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.sample-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sample-card .img-wrap { background: #0d1117; position: relative; }
.sample-card img { width: 100%; height: 220px; object-fit: cover; cursor: zoom-in; display: block; }
.sample-card .head { padding: 12px 16px 0; font-weight: 700; font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.sample-card .head .n { color: var(--primary); }
.sample-card .body { padding: 10px 16px 14px; }
.sec { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden; }
.sec > .sec-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--soft-bg); font-size: .86rem; font-weight: 700; color: var(--primary-dk); cursor: pointer; }
.sec > .sec-b { padding: 10px 14px; font-size: .86rem; line-height: 1.9; white-space: pre-wrap; }
.sec:not(.open) > .sec-b { display: none; }
.flow-p { font-size: .92rem; line-height: 2; margin: 0 0 12px; text-align: justify; }
.score-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.score-table th, .score-table td { border: 1px solid var(--line); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; line-height: 1.7; }
.score-table th { background: var(--soft-bg); }
.score-table .sc { color: var(--primary); font-weight: 700; white-space: nowrap; }
.guess { cursor: pointer; color: var(--primary); font-weight: 700; }
.guess:hover { text-decoration: underline; }

/* ---- 设置 / 弹层 ---- */
#lightbox { position: fixed; inset: 0; background: rgba(10, 16, 24, .88); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--r-md); }
/* v2.6：灯箱倍数切换条 */
#lb-mags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 92vw; }
.lb-mag { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 5px 15px; font-size: .85rem; cursor: pointer; transition: background .15s, border-color .15s; }
.lb-mag:hover { background: rgba(255, 255, 255, .22); }
.lb-mag.on { background: var(--primary); border-color: var(--primary); }
#toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(24, 36, 48, .92); color: #fff; padding: 10px 22px; border-radius: 30px; font-size: .88rem; z-index: 110; }

/* ---- 深色模式补充 ---- */
html[data-theme="dark"] .t-multi { color: #c9a0ec; }

/* ---- 确认弹框 ---- */
#confirm-box { position: fixed; inset: 0; background: rgba(10, 16, 24, .45); z-index: 120; display: flex; align-items: center; justify-content: center; }
#confirm-box .cb-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px 24px; max-width: 380px; width: 88%; }
#confirm-box .cb-card p { margin: 0 0 16px; font-size: .95rem; line-height: 1.7; }
#confirm-box .cb-btns { display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; }

/* ---- 更新日志弹层 ---- */
.ver-link { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ver-link:hover { color: var(--primary); }
#changelog-box { position: fixed; inset: 0; background: rgba(10, 16, 24, .45); z-index: 120; display: flex; align-items: center; justify-content: center; }
#changelog-box .cl-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); width: min(560px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
#changelog-box .cl-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 8px; }
#changelog-box .cl-head h3 { margin: 0; font-size: 1.05rem; }
#changelog-box .cl-x { border: none; background: none; cursor: pointer; color: var(--ink-2); font-size: .95rem; padding: 4px 8px; border-radius: var(--r-sm); }
#changelog-box .cl-x:hover { color: var(--ink); background: var(--soft-bg); }
#changelog-box .cl-body { overflow-y: auto; padding: 0 20px 18px; }
.cl-item { padding: 12px 0; border-top: 1px solid var(--line); }
.cl-item:first-child { border-top: none; }
.cl-ver { font-weight: 700; color: var(--primary); }
.cl-date { color: var(--ink-2); font-size: .78rem; margin-left: 8px; }
.cl-item ul { margin: 8px 0 0; padding-left: 1.15em; font-size: .88rem; line-height: 1.9; color: var(--ink-2); }

/* ---- 备考模式 ---- */
.note-line { font-size: .82rem; color: var(--ink-2); margin: -4px 0 12px; }
.known-hv { font-size: .84rem; color: var(--ink-2); font-weight: 400; margin-top: 5px; line-height: 1.6; }
.known-hv b { color: var(--primary-dk); }
.prep-sec { margin-bottom: 12px; }
.prep-sec > label { display: block; font-size: .86rem; font-weight: 700; color: var(--primary-dk); margin-bottom: 5px; }
.prep-ta { width: 100%; min-height: 72px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: .88rem; font-family: inherit; background: var(--field-bg); color: var(--ink); resize: vertical; line-height: 1.7; }
.prep-ta:focus { outline: 2px solid var(--primary-bg); border-color: var(--primary); }
.prep-ref { border-left: 3px solid var(--primary); background: var(--primary-bg); padding: 8px 12px; font-size: .82rem; line-height: 1.8; white-space: pre-wrap; margin-top: 6px; border-radius: 0 var(--r-md) var(--r-md) 0; }
/* 备考模式双栏：左列图片弹性撑满卡片高度（contain 完整显示组织），不再被右侧答题卡拉出大片空白 */
.prep-grid { grid-template-columns: minmax(300px, 2fr) 3fr; }
.prep-grid .sample-card { display: flex; flex-direction: column; }
.prep-grid .sample-card .img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 320px; padding: 14px; background: var(--soft-bg); }
.prep-grid .sample-card img { width: auto; height: auto; max-width: 100%; max-height: 64vh; object-fit: contain; }

/* ---- 空状态 ---- */
.empty { text-align: center; padding: 46px 20px; color: var(--ink-2); }
.empty .empty-ico { opacity: .4; margin-bottom: 12px; }
.empty .empty-ico svg { width: 46px; height: 46px; }
.empty p { margin: 0 0 5px; font-size: 1rem; font-weight: 700; color: var(--ink); }
.empty span { font-size: .84rem; }

/* ---- 页脚 ---- */
#site-foot { margin-left: 216px; padding: 16px 40px 26px; color: var(--ink-2); font-size: .78rem; border-top: 1px solid var(--line); }

/* ---- 页面过渡 / 回到顶部 / 主题色选择 ---- */
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#main.anim { animation: pageIn .3s ease; }
#to-top { position: fixed; right: 22px; bottom: 26px; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; background: var(--primary); color: #fff; font-size: 1.15rem; line-height: 1; box-shadow: var(--shadow); z-index: 90; transition: background .15s, transform .15s; }
#to-top:hover { background: var(--primary-dk); transform: translateY(-3px); }
.accent-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.accent-dot { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; font-family: inherit; }
.accent-dot i { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--c); transition: transform .15s, box-shadow .15s; }
.accent-dot:hover i { transform: scale(1.15); }
.accent-dot.on i { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--c); }
@media (prefers-reduced-motion: reduce) { #main.anim, #nav a, #nav a .nav-txt, #nav a svg, #to-top, .hc-slide, .hc-dot, .atlas-grid .atlas-card, .atlas-grid .atlas-card img, .rate-row button, .btn, .opt, .fav-btn, .tabs button, .kp-tag, #sidebar, #main, #side-toggle svg, .logo span, #side-progress, .side-tip { animation: none !important; transition: none !important; } }

/* ---- 电脑端（>900px）· 侧栏收起为纯图标窄栏：两态共用同一水平定位，图标收放全程零位移；进度条换进度环 ---- */
@media (min-width: 901px) {
  #sidebar { transition: width .3s cubic-bezier(.4, 0, .2, 1); }
  #main { transition: margin-left .3s cubic-bezier(.4, 0, .2, 1); }
  #nav { padding: 10px 11px 6px; overflow: hidden; }
  #nav a { white-space: nowrap; padding: 12px 12px 12px 16px; transition: background .18s, color .18s, transform .18s, box-shadow .18s, padding .3s cubic-bezier(.4, 0, .2, 1); }
  #nav a svg { width: 18px; height: 18px; margin-right: 11px; }
  #nav a .nav-txt { transition: opacity .22s ease .16s; }
  .logo { overflow: hidden; }
  .logo span { white-space: nowrap; transition: opacity .22s ease .16s; }
  #side-progress, .side-tip { max-height: 6em; overflow: hidden; transition: max-height .25s ease, opacity .18s ease, margin .25s ease; }
  /* 进度环（仅收起态显示，背景为 conic-gradient 进度弧） */
  #side-ring { display: none; width: 40px; height: 40px; border-radius: 50%; margin: 2px auto 6px; align-items: center; justify-content: center; }
  #side-ring i { width: 30px; height: 30px; border-radius: 50%; background: var(--side-2); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .66rem; font-weight: 600; color: #fff; }
  body.side-mini #sidebar { width: 72px; }
  body.side-mini #main { margin-left: 72px; }
  body.side-mini .logo { padding: 20px 0 12px; }
  body.side-mini .logo span { opacity: 0; transition: opacity .1s ease; }
  body.side-mini #nav a { padding: 21px 12px 23px 16px; }
  body.side-mini #nav a .nav-txt { opacity: 0; transition: opacity .1s ease; }
  body.side-mini #nav a:hover { transform: none; }
  body.side-mini #nav a::before { display: none; }
  body.side-mini #side-foot { padding: 12px 8px; }
  body.side-mini #side-progress, body.side-mini .side-tip { max-height: 0; opacity: 0; margin: 0; }
  body.side-mini #side-ring { display: flex; }
}

/* ---- 响应式 ---- */
@media (max-width: 900px) {
  #layout { flex-direction: column; }
  #sidebar { position: static; width: 100%; flex-direction: row; align-items: center; }
  #nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  #side-foot { display: none; }
  #side-toggle { display: none; }
  #main { margin-left: 0; padding: 16px 14px 40px; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .logo { flex-direction: row; padding: 10px 14px; border-bottom: none; }
  .logo svg { display: none; }
  #nav a:hover { transform: none; }
  #site-foot { margin-left: 0; padding: 14px 18px 22px; }
  .hero { margin: -16px -14px 0; padding: 34px 18px 58px; min-height: auto; }
  .hero-title { font-size: 2.5rem; }
  .h-stat { padding: 0 16px; }
  .h-stat b { font-size: 1.15rem; }
  /* 入口卡片 · 横向紧凑行卡（左标题+副标题，右按钮） */
  .hero-cards { grid-template-columns: 1fr; margin: 26px 0 0; max-width: 620px; gap: 12px; }
  .hero-cards .card.mod-card { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; gap: 8px 12px; padding: 13px 16px; background: color-mix(in srgb, var(--card) 62%, transparent); }
  .mod-card .mc-info { align-items: flex-start; gap: 1px; }
  .hero-cards .card h3 { font-size: 1.12rem; }
  .mod-card .mc-sub { font-size: .74rem; }
  .mod-card .card-btns { margin: 0 0 0 auto; }
  .hero-cards .btn { padding: 8px 18px; font-size: .86rem; box-shadow: none; }
  .hero-docs { margin: 20px 0 0; }
  .hc-cap { top: 12px; right: 12px; bottom: auto; max-width: 72%; font-size: .74rem; }
}

/* ---- 手机（≤640px）· 专门布局 ---- */
@media (max-width: 640px) {
  /* 顶栏只保留大标题；导航改为底部固定栏（图标放大 + 短标签） */
  #sidebar { flex-direction: column; }
  .logo { flex-direction: row; justify-content: center; padding: 11px 12px; font-size: 1.08rem; letter-spacing: 3px; }
  #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-direction: row; flex-wrap: nowrap; gap: 2px; padding: 5px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(175deg, var(--side) 0%, var(--side-2) 100%); box-shadow: 0 -3px 14px rgba(0, 0, 0, .14); }
  #nav a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border-radius: var(--r-lg); font-size: .68rem; white-space: nowrap; }
  #nav a svg { width: 22px; height: 22px; margin: 0; opacity: .85; }
  #nav a .nav-txt { display: none; }
  #nav a::after { content: attr(data-short); }
  #nav a::before { left: 50%; top: 0; width: 26%; height: 3px; border-radius: 0 0 3px 3px; transform: translateX(-50%) scaleY(.3); }
  #nav a.active::before { transform: translateX(-50%) scaleY(1); }
  #main { padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
  #site-foot { padding: 14px 18px calc(92px + env(safe-area-inset-bottom, 0px)); }
  #to-top { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  #toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  /* 移动端精简：隐藏各页顶部说明小字（限时/占比/操作提示等） */
  .page-sub { display: none; }
  /* 选项卡：大字体下收紧内边距，减少换行溢出 */
  .tabs { gap: 2px 4px; }
  .tabs button { padding: var(--sp-2) var(--sp-3); font-size: .84rem; }
  /* 筛选条：大字体下收紧间距 */
  .filter-bar { gap: 8px; font-size: .84rem; }
  /* 模拟考计时条：换行后不留大间距 */
  .mock-timer { padding: 10px 12px; row-gap: 6px; }
  /* Hero：紧凑间距 */
  .hero { margin: -12px -12px 0; padding: 28px 16px 50px; }
  .hero-eyebrow { font-size: .78rem; letter-spacing: .22em; margin: 0 0 10px; }
  .hero-title { font-size: 2.1rem; letter-spacing: .04em; }
  /* 数据统计：2×2 网格 */
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 0; margin: 20px 0 0; }
  .h-stat { padding: 0 10px; }
  .h-stat b { font-size: 1.2rem; }
  /* 入口卡片行卡再收紧 */
  .hero-cards { gap: var(--sp-3); margin: 20px 0 0; }
  .hero-cards .card.mod-card { padding: 12px 14px; }
  .hero-cards .btn { padding: 8px 14px; font-size: .82rem; }
  .hero-docs { font-size: .76rem; }
  /* 轮播圆点与标注 */
  .hc-dots { bottom: 13px; gap: 6px; }
  .hc-dot { width: 6px; height: 6px; }
  .hc-dot.on { width: 18px; }
  .hc-cap { top: 10px; right: 10px; font-size: .7rem; }
}

/* ---- 打印（Ctrl+P 导出纸质复习材料） ---- */
@media print {
  @page { margin: 10mm; }
  body { background: #fff; }
  #sidebar, #to-top, #site-foot, #toast, #lightbox, #lb-mags, #confirm-box, #changelog-box,
  .tabs, .filter-bar, .q-nav, .btn, .mock-timer, .jump-grid, #p-jump, .fav-btn, .rate-row, .info-banner, .hero-carousel, .hc-dots, .hc-cap, .mag-switch { display: none !important; }
  #main { margin: 0; padding: 0; }
  .hero { margin: 0; min-height: auto; }
  .card, .sample-card, .atlas-card { box-shadow: none !important; border: 1px solid #cfd6df; break-inside: avoid; }
  .sec, .prep-sec, .opt { break-inside: avoid; }
  a { color: inherit; }
  /* 刷题整组打印：两种版式共用的基础规则（原版 .plain 走默认大字样式） */
  body.p-printing .page-title, body.p-printing .page-sub { display: none !important; } /* 打印期间隐藏页面标题与说明 */
  .print-exam .card { break-inside: auto; } /* 允许题卡跨页，防止整卡高于一页时内容被裁掉（图片丢失即此因） */
  .print-exam .q-imgs img { break-inside: avoid; }
  .print-exam h3 { font-size: 1em; margin: 8px 0 6px; }
  .print-exam .history-table { font-size: .85em; }
  .print-exam .history-table th, .print-exam .history-table td { padding: 2px 6px; }
  /* 紧凑版（非 .plain）：无外框、选项双栏、一页尽量多题；题号/题型/题干/选项统一左缘与基线对齐 */
  .print-exam:not(.plain) { font-size: 10.5pt; }
  .print-exam:not(.plain) > div:first-child { font-size: .8em !important; margin: 2px 0 8px !important; }
  .print-exam:not(.plain) .card { border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 10px 0 !important; }
  .print-exam:not(.plain) .q-head { align-items: baseline; margin-bottom: 2px !important; gap: 5px; }
  .print-exam:not(.plain) .q-no { font-size: .95em; }
  .print-exam:not(.plain) .badge, .print-exam:not(.plain) .tag { font-size: .7em; padding: 1px 6px; margin-right: 2px; }
  .print-exam:not(.plain) .q-stem { font-size: .95em !important; line-height: 1.65 !important; margin: 2px 0 5px !important; }
  .print-exam:not(.plain) .q-imgs { gap: 6px; margin: 5px 0 !important; }
  .print-exam:not(.plain) .q-imgs img { max-height: 36mm; border-radius: 2px; }
  .print-exam:not(.plain) .p-opts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 2px; }
  .print-exam:not(.plain) .p-opts.one { grid-template-columns: 1fr; }
  .print-exam:not(.plain) .p-opts .opt { align-items: baseline; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 2px !important; font-size: .9em !important; line-height: 1.65 !important; gap: 4px; }
  .print-exam:not(.plain) .p-opts .opt .opt-letter { width: auto; min-width: 1.5em; height: auto; background: none; font-size: .85em; margin: 0; }
  .print-exam:not(.plain) .p-opts .opt .opt-letter::after { content: '.'; }
}