/* ==========================================================================
小芳试卷 · 极简主题
- 亮色：纯白清纯 · 蓝灰边 · 电光蓝 accent（Linear / Vercel 工业感）
- 暗色：科技风 · 深空黑 · 电光蓝 + 玻璃拟态
- 字体：Inter（正文，带工业感）+ JetBrains Mono（题号 / 分数 / 代码）
- 侧边栏可折叠，折叠状态记忆在 localStorage
- 亮/暗主题由 [data-theme="light" | "dark"] 双套显式定义，避免变量锁死
========================================================================== */
/* ── 字体（亮色与暗色共享） ───────────────────────────────── */
:root {
--font: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
"Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
sans-serif;
/* 展示体：中文标题用宋体（教材 / 试卷 / 公文的气质），
英文与数字回落到 Inter，金额/题号等数据仍走等宽体 */
--font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC",
"SimSun", Georgia, "Times New Roman", serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
Menlo, Consolas, monospace;
/* ── 节奏 ─────────────────────────────────────────────── */
--sidebar-w: 260px;
--sidebar-w-min:64px;
/* 分层柔和阴影：商业版靠纵深而不是边框 */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
--shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 6px 16px rgba(15, 23, 42, .06);
--shadow-lg: 0 4px 8px rgba(15, 23, 42, .05), 0 16px 40px rgba(15, 23, 42, .09);
--shadow-xl: 0 8px 16px rgba(15, 23, 42, .06), 0 28px 64px rgba(15, 23, 42, .11);
/* ── 字号阶梯（唯一来源，代码里不再写死 px） ───────────── */
/* 站内字号档位（用户可调）；1 = 跟随浏览器默认字号 */
--font-scale: 1;
--fz-3xs: 0.6875rem; /* 角标 / 极小标签 */
--fz-2xs: 0.75rem; /* 微标签 */
--fz-xs: 0.84375rem; /* 小字 / 按钮文字 */
--fz-sm: 0.9375rem; /* 次要正文 */
--fz: 1rem; /* 正文 */
--fz-lg: 1.1875rem;
--fz-xl: 1.4375rem;
--fz-2xl: 1.9375rem;
--fz-3xl: 2.5rem;
/* ── 圆角（唯一来源） ─────────────────────────────────── */
--r-sm: 8px; /* 小控件：按钮 sm / 图标块 / 徽章 */
--r: 12px; /* 标准：按钮 md / 卡片 / 输入框 */
--r-lg: 16px; /* 大件：大按钮 / 大卡片 */
--r-pill: 999px; /* 药丸：分段控件 / 进度条 */
/* ── 按钮尺寸（三档，全站统一） ───────────────────────── */
--btn-h-sm: 30px;
--btn-h-md: 38px;
--btn-h-lg: 46px;
--btn-px-sm: 12px;
--btn-px-md: 18px;
--btn-px-lg: 24px;
--container: 1120px;
--topbar-h: 56px;
}
/* ── 亮色主题（纯白清纯） ───────────────────────────────── */
:root,
[data-theme="light"] {
--bg: #ffffff;
--surface: #ffffff;
--surface-2: #fafafa;
--text: #0a0a0a;
--text-soft: #525252;
--text-muted: #a3a3a3;
--border: #e5e5e5;
--border-strong:#d4d4d4;
--brand: #0066ff;
--brand-hover: #0052cc;
--brand-fg: #ffffff;
--brand-soft: rgba(0,102,255,0.08);
--brand-soft-2: rgba(0,102,255,0.14);
--success: #16a34a;
--success-soft: rgba(22,163,74,0.16);
--warn: #d97706;
--danger: #dc2626;
--danger-soft: rgba(220,38,38,0.10);
--warn-soft: rgba(217,119,6,0.10);
}
/* ── 暗色主题（科技风 · 深空黑 + 电光蓝） ─────────────── */
[data-theme="dark"] {
--bg: #050509; /* 深空黑（带蓝调） */
--surface: #0e0f15;
--surface-2: #15171f;
--text: #fafafa;
--text-soft: #a1a1aa;
--text-muted: #71717a;
--border: #1f2029;
--border-strong:#2d2e3a;
/* 电光蓝 + 青色科技 accent */
--brand: #3b82f6;
--brand-hover: #60a5fa;
--brand-fg: #ffffff;
--brand-soft: rgba(59,130,246,0.15);
--brand-soft-2: rgba(59,130,246,0.25);
--success: #22c55e;
--warn: #f59e0b;
--danger: #f87171;
--danger-soft: rgba(248,113,113,0.12);
--success-soft: rgba(34,197,94,0.12);
--warn-soft: rgba(245,158,11,0.14);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
--shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
/* 科技感：细网格背景 */
--grid: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
}
/* ==========================================================================
基础
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
font-family: var(--font);
font-size: calc(100% * var(--font-scale));
line-height: 1.55;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* 永久预留纵向滚动条位置：长短页面切换时主区宽度不会顶掉 15px 而导致横向位移 */
scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
html { overflow-y: scroll; }
}
/* 细滚动条：与 12px 圆角语言一致，不抢占额外宽度 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: var(--r-pill);
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] html, html { background: var(--bg); }
body { min-height: 100vh; display: flex; flex-direction: column; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
button { font: inherit; cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
::selection { background: var(--brand-soft-2); color: var(--text); }
/* hidden 属性必须压过组件自己的 display（例如 .empty-state 的 flex），
否则 el.hidden = true 不会真的隐藏 —— 这里统一兜底 */
[hidden] { display: none !important; }
/* ==========================================================================
签名元素（亮色：纯白清纯；暗色：科技风）
========================================================================== */
/* ── h1：衬线展示体 + 紧凑字距（商业版的气质来源） ───────── */
.page-header h1,
.dash-header h1,
.center-hero-content h1,
.result-title,
.exam-title,
h1.display {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
/* ── 题号：等宽 mono + 小标签 ─────────────────────────── */
.q-no {
font-family: var(--font-mono) !important;
font-weight: 600 !important;
font-size: var(--fz-2xs) !important;
letter-spacing: 0.04em;
color: var(--text-soft) !important;
background: var(--surface-2);
border: 1px solid var(--border);
padding: 2px 7px;
border-radius: var(--r-sm);
text-transform: none;
}
/* ── 卡片：极细边线 + 微悬停 ─────────────────────────── */
.l1-card,
.card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
box-shadow: var(--shadow-sm) !important;
transition: border-color .15s, transform .15s, box-shadow .15s !important;
}
.l1-card:hover,
.card:hover {
border-color: var(--brand) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow) !important;
}
.l1-card .l1-icon {
/* background 由 .l1-icon-XX 类控制，保持纯色图标 */
}
.card .icon {
background: var(--brand-soft) !important;
color: var(--brand) !important;
border: 1px solid transparent;
}
/* ── 答题卡 qcard：左 3px 状态彩条 ─────────────────────── */
.qcard {
position: relative;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface);
}
.qcard.result { border-left-width: 3px !important; }
.qcard.result.correct { border-left-color: var(--success) !important; }
.qcard.result.wrong { border-left-color: var(--danger) !important; }
.qcard.fav-important { border-color: var(--brand) !important; }
/* ── 进度条：电光蓝渐变（科技感） ──────────────────────── */
.progress-fill,
.progress-bar-fill {
background: linear-gradient(90deg, var(--brand), var(--brand-hover)) !important;
}
/* ── 大数字（统计 / 分数）：等宽 mono ─────────────────── */
.trace-card .num,
.stat-num {
font-family: var(--font-mono);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* ── chip / tag：浅边浅底 ─────────────────────────────── */
.meta-chip,
.card-chip,
.q-type {
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
font-weight: 500;
}
.q-type {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
letter-spacing: 0.04em;
}
/* ── 暗色科技风：网格底纹 + 微光描边 ───────────────────── */
[data-theme="dark"] body::before {
content: "";
position: fixed; inset: 0;
background-image: var(--grid, none);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
[data-theme="dark"] .app-shell,
[data-theme="dark"] .main,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .l1-card,
[data-theme="dark"] .card,
[data-theme="dark"] .qcard,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .center-hero {
position: relative;
z-index: 1;
}
[data-theme="dark"] .sidebar {
background: color-mix(in srgb, var(--bg) 70%, transparent);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-right: 1px solid var(--border);
}
[data-theme="dark"] .btn.primary {
box-shadow: 0 0 0 1px var(--brand) inset, 0 4px 12px rgba(59,130,246,0.30);
}
/* ── 主内容：暗色玻璃 ────────────────────────────────── */
[data-theme="dark"] .main { background: transparent !important; }
/* 兼容老 class 名 */
.center-hero { color: var(--text); }
/* ==========================================================================
顶栏
========================================================================== */
.topbar {
position: sticky; top: 0; z-index: 50;
height: var(--topbar-h);
background: color-mix(in srgb, var(--bg) 80%, transparent);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
padding: 0 24px;
gap: 16px;
}
.brand {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 1rem;
letter-spacing: -0.01em;
}
.brand-icon {
font-size: 1.0625rem; line-height: 1; width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
}
.brand-name {
background: none !important;
-webkit-text-fill-color: currentColor !important;
color: var(--text) !important;
font-weight: 700;
font-size: var(--fz);
letter-spacing: -0.02em;
}
.mainnav {
display: flex; align-items: center; gap: 4px;
margin-left: 16px;
}
.mainnav a {
font-size: var(--fz-sm); color: var(--text-soft);
padding: 6px 10px; border-radius: var(--r-sm);
transition: background .15s, color .15s;
}
.mainnav a:hover { background: var(--surface-2); color: var(--text); }
.mainnav a.active { color: var(--text); background: var(--surface-2); }
/* 顶栏右侧 */
.userchip {
margin-left: auto;
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fz-sm); color: var(--text-soft);
padding: 4px 6px 4px 4px;
border-radius: var(--r-pill);
}
.avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: var(--fz-xs);
}
.userchip a { padding: 4px 8px; border-radius: var(--r-sm); }
.userchip a:hover { background: var(--surface-2); color: var(--text); }
/* ── 主题切换按钮（深色 / 浅色） ─────────────────────── */
.theme-toggle {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-muted);
cursor: pointer;
transition: color .14s, border-color .14s, background .14s;
}
.theme-toggle:hover {
color: var(--brand);
border-color: var(--brand);
background: var(--brand-soft);
}
/* ==========================================================================
容器
========================================================================== */
/* ==========================================================================
学习进度仪表盘（test.html）
- 参考截图：极简仪表盘标题 / 小程序介绍条 / 4 列训练卡 / 4 列数据卡 / 渐变考试横幅
- 图标：彩色圆角方形 + SVG 内嵌图形（无 emoji）
- 进度条：4px 高度，彩色渐变填充
========================================================================== */
/* ── 顶部：仪表盘标题 + 切换科目按钮 ───────────────── */
.dash-head {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
margin: 4px 0 28px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.dash-head-left { flex: 1; min-width: 0; }
.dash-title {
margin: 0 0 4px;
font-family: var(--font);
font-size: var(--fz-xl); font-weight: 600;
letter-spacing: 0;
line-height: 1.3;
color: var(--text);
}
.dash-subject {
margin: 8px 0 0;
font-size: var(--fz-sm);
line-height: 1.5;
color: var(--text-soft);
}
.dash-subject-tag {
margin-left: 6px;
color: var(--text-muted);
}
.dash-switch {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--text-soft);
font-size: var(--fz-sm);
text-decoration: none;
transition: border-color .15s, color .15s;
flex-shrink: 0;
}
.dash-switch:hover {
border-color: var(--brand);
color: var(--brand);
}
/* ── 小程序介绍条 ──────────────────────────────────── */
.dash-intro {
display: flex; align-items: center; gap: 16px;
padding: 14px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
margin-bottom: 18px;
}
.dash-intro-icon {
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
display: grid; place-items: center;
color: #fff;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}
.dash-intro-body { flex: 1; min-width: 0; }
.dash-intro-title {
font-size: var(--fz); font-weight: 600;
color: var(--text);
margin-bottom: 3px;
}
.dash-intro-desc {
font-size: var(--fz-xs);
color: var(--text-muted);
line-height: 1.55;
}
.dash-intro-action {
flex-shrink: 0;
font-size: var(--fz-xs);
padding: 6px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
color: var(--text-soft);
cursor: pointer;
transition: border-color .15s, color .15s;
}
.dash-intro-action:hover {
border-color: var(--brand);
color: var(--brand);
}
/* ── 4 列卡片网格 ──────────────────────────────────── */
.dash-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 20px;
}
/* ── 训练卡（8 个都走这个基础样式） ─────────────────── */
.dash-card {
display: flex; flex-direction: column; gap: 14px;
padding: 22px 22px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--text);
text-decoration: none;
min-height: 150px;
transition: border-color .15s, transform .12s, box-shadow .12s;
}
.dash-card:hover {
border-color: var(--brand);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.dash-card-head { display: flex; align-items: center; gap: 14px; }
.dash-card-icon {
width: 40px; height: 40px;
border-radius: var(--r-sm);
display: grid; place-items: center;
color: #fff;
flex-shrink: 0;
}
.dash-card-title-block { min-width: 0; flex: 1; }
.dash-card-title {
font-size: var(--fz); font-weight: 600;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.35;
}
.dash-card-sub {
font-size: var(--fz-xs);
color: var(--text-muted);
margin-top: 4px;
line-height: 1.4;
}
/* ── 进度条（彩色渐变填充） ────────────────────────── */
.dash-progress {
height: 4px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.dash-progress-fill {
height: 100%; border-radius: var(--r-pill);
transition: width .3s;
}
.color-blue-fill { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.color-purple-fill { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.color-orange-fill { background: linear-gradient(90deg, #f97316, #fb923c); }
.color-cyan-fill { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.color-green-fill { background: linear-gradient(90deg, #10b981, #34d399); }
/* ── 专项练习：题型切换条 ───────────────────────────── */
.qtype-switch {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
margin-bottom: 14px;
padding: 8px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
}
.qtype-switch-label {
font-size: var(--fz-xs); color: var(--text-muted); font-weight: 600;
margin-right: 2px;
}
.qtype-switch-btn {
padding: 4px 12px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
color: var(--text-soft);
text-decoration: none;
transition: background .12s, color .12s;
}
.qtype-switch-btn:hover { background: var(--surface-2); color: var(--brand); }
.qtype-switch-btn.active {
background: var(--brand);
color: var(--brand-fg);
font-weight: 600;
}
/* ── 卡片脚：左 meta + 右 stat ─────────────────────── */
.dash-card-foot {
display: flex; align-items: center; justify-content: space-between;
font-size: var(--fz-xs);
margin-top: auto;
gap: 10px;
padding-top: 4px;
}
.dash-card-foot-solo { margin-top: auto; }
.dash-card-meta { color: var(--text-muted); }
.dash-card-stat { font-weight: 600; }
.dash-card-stat.ok { color: #10b981; }
.dash-card-stat.warn { color: #ef4444; }
.dash-card-stat.neutral { color: var(--text-soft); font-weight: 500; }
/* ── 8 种彩色图标背景（与截图配色一致） ───────────── */
.color-blue .dash-card-icon { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); box-shadow: 0 2px 6px rgba(59,130,246,0.30); }
.color-purple .dash-card-icon { background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); box-shadow: 0 2px 6px rgba(139,92,246,0.30); }
.color-orange .dash-card-icon { background: linear-gradient(135deg, #f97316 0%, #fb923c 100%); box-shadow: 0 2px 6px rgba(249,115,22,0.30); }
.color-cyan .dash-card-icon { background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); box-shadow: 0 2px 6px rgba(6,182,212,0.30); }
.color-green .dash-card-icon { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); box-shadow: 0 2px 6px rgba(16,185,129,0.30); }
.color-blue-2 .dash-card-icon { background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); box-shadow: 0 2px 6px rgba(14,165,233,0.30); }
.color-red .dash-card-icon { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); box-shadow: 0 2px 6px rgba(239,68,68,0.30); }
.color-yellow .dash-card-icon { background: linear-gradient(135deg, #eab308 0%, #facc15 100%); box-shadow: 0 2px 6px rgba(234,179,8,0.30); }
/* ── KPI 数字 + 链接/动作按钮 ────────────────────── */
.dash-card-stat-block {
display: flex; align-items: baseline; gap: 8px;
}
.dash-card-stat-num {
font-size: 1.5rem; font-weight: 700;
font-family: var(--font-mono);
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.015em;
line-height: 1;
}
.dash-card-stat-label {
font-size: var(--fz-xs);
color: var(--text-muted);
}
.dash-card-link {
font-size: var(--fz-xs);
padding: 5px 12px;
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--text-soft);
border: 1px solid var(--border);
white-space: nowrap;
}
.dash-card-action {
font-size: var(--fz-xs);
padding: 5px 14px;
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--text-soft);
border: 1px solid var(--border);
white-space: nowrap;
transition: background .15s, color .15s, border-color .15s;
}
.dash-card-action.danger {
background: linear-gradient(135deg, #ef4444, #f87171);
color: #fff;
border-color: transparent;
box-shadow: 0 2px 6px rgba(239,68,68,0.30);
}
.dash-card:hover .dash-card-action:not(.danger) {
background: var(--brand);
color: var(--brand-fg);
border-color: var(--brand);
}
/* ── 模拟考试横幅（蓝紫渐变） ──────────────────── */
.dash-exam {
position: relative;
display: flex; align-items: center; gap: 28px;
padding: 28px 36px;
margin-top: 24px;
border-radius: var(--r-lg);
background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
color: #fff;
overflow: hidden;
}
.dash-exam::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10) 0%, transparent 35%);
pointer-events: none;
}
.dash-exam-icon {
width: 56px; height: 56px;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.18);
backdrop-filter: blur(8px);
display: grid; place-items: center;
flex-shrink: 0;
position: relative; z-index: 1;
}
.dash-exam-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dash-exam-title {
font-size: 1.25rem; font-weight: 700;
margin-bottom: 4px;
letter-spacing: -0.005em;
}
.dash-exam-desc { font-size: var(--fz-sm); opacity: 0.92; }
.dash-exam-sub { font-size: var(--fz-xs); opacity: 0.70; margin-top: 6px; }
.dash-exam-stats {
display: flex; gap: 32px;
position: relative; z-index: 1;
flex-shrink: 0;
}
.dash-exam-stat { text-align: center; }
.dash-exam-stat-num {
font-size: 1.5625rem; font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1;
}
.dash-exam-stat-label {
font-size: var(--fz-2xs); opacity: 0.85;
margin-top: 4px;
letter-spacing: 0.04em;
}
.dash-exam-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: #fff;
color: #2563eb;
border-radius: var(--r-pill);
font-size: var(--fz); font-weight: 600;
text-decoration: none;
flex-shrink: 0;
position: relative; z-index: 1;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.dash-exam-btn:hover {
transform: translateX(2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.16);
}
/* ── 仪表盘顶部行（连击 + 每日一题） ────────────────── */
.dash-top-row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 800px) { .dash-top-row { grid-template-columns: 1fr; } }
.dash-top-card {
display: flex; align-items: center; gap: 16px;
padding: 20px 22px;
min-height: 100px;
}
.dash-streak-icon,
.dash-daily-icon {
width: 48px; height: 48px;
border-radius: var(--r);
display: inline-flex; align-items: center; justify-content: center;
color: white;
flex-shrink: 0;
}
.dash-streak-icon {
background: linear-gradient(135deg, #f59e0b, #ef4444);
box-shadow: 0 4px 12px rgba(245,158,11,0.30);
}
.dash-daily-icon {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
box-shadow: 0 4px 12px rgba(59,130,246,0.30);
}
.dash-streak-body, .dash-daily-body { flex: 1; min-width: 0; }
.dash-streak-label, .dash-daily-label {
font-size: var(--fz-xs); color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.04em;
font-weight: 600;
margin-bottom: 4px;
}
.dash-streak-num {
font-size: 1.9375rem; font-weight: 700;
font-family: var(--font-mono);
color: var(--text);
line-height: 1;
}
.dash-streak-unit { font-size: var(--fz); color: var(--text-muted); margin-left: 4px; font-weight: 500; }
.dash-streak-meta {
font-size: var(--fz-xs); color: var(--text-soft); margin-top: 6px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.dash-streak-meta b { color: var(--text); font-family: var(--font-mono); }
.dash-streak-sep { color: var(--text-muted); }
.dash-streak-status {
font-size: var(--fz-xs);
padding-left: 12px; border-left: 1px solid var(--border);
flex-shrink: 0;
min-width: 140px;
text-align: right;
}
.dash-streak-hint { color: var(--text-muted); }
.dash-streak-hint a { color: var(--brand); font-weight: 600; }
.dash-streak-hint.ok { color: var(--success, #16a34a); font-weight: 500; }
.dash-streak-hint.warn { color: var(--warn, #d97706); font-weight: 500; }
/* ── 今日一题：每日一练任务条（票根版式，呼应首页「准考证」） ── */
.dash-daily {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
margin-bottom: 16px;
padding: 16px 22px;
background: linear-gradient(112deg, #eaf2ff 0%, #f6faff 54%, #ffffff 100%);
border: 1px solid rgba(0, 102, 255, .16);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
/* 左侧票根：撕口分隔 + 当天日期 */
.dd-stub {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
padding-right: 20px;
border-right: 1px dashed rgba(0, 102, 255, .30);
}
.dd-stub-day {
font-family: var(--font-mono);
font-size: 1.875rem; font-weight: 700; line-height: 1;
letter-spacing: -.02em;
color: var(--brand);
}
.dd-stub-week { font-size: var(--fz-2xs); color: var(--text-muted); }
.dd-main { min-width: 0; }
.dd-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.dd-eyebrow-label {
font-size: var(--fz-xs); font-weight: 700; letter-spacing: .06em;
color: var(--brand);
}
.dd-pool {
display: inline-block;
padding: 1px 8px;
background: var(--brand-soft);
color: var(--brand);
border-radius: var(--r-pill);
font-size: var(--fz-2xs);
font-weight: 600;
}
.dd-question {
margin: 0 0 5px;
font-size: 1rem; line-height: 1.55; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.dd-src { font-size: var(--fz-xs); color: var(--text-muted); }
.dd-cta {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 11px 20px;
border-radius: var(--r-sm);
background: var(--brand); color: var(--brand-fg);
font-size: var(--fz-sm); font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background .12s;
}
.dd-cta:hover { background: var(--brand-hover); color: var(--brand-fg); }
[data-theme="dark"] .dash-daily {
background: linear-gradient(112deg, rgba(0, 102, 255, .14) 0%, var(--surface) 62%);
border-color: rgba(0, 102, 255, .26);
}
[data-theme="dark"] .dd-stub { border-right-color: rgba(0, 102, 255, .38); }
/* ==========================================================================
学习进度仪表盘
① 总览带（环形进度 + 关键指标 + 连击）
② 学习曲线（柱=每日题量，线=正确率）
========================================================================== */
.dash-overview {
padding: 20px 24px;
margin-bottom: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.dash-ov-grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 26px;
padding-bottom: 18px;
}
.dash-ov-ring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.dash-ring { width: 116px; height: 116px; display: block; }
.dash-ring-bg { fill: none; stroke: #eef1f5; stroke-width: 10; }
.dash-ring-fg {
fill: none; stroke: url(#xfRingGrad); stroke-width: 10; stroke-linecap: round;
transition: stroke-dashoffset .7s cubic-bezier(.22,.8,.3,1);
}
.dash-ov-ring-txt {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
}
.dash-ov-ring-txt b {
font-family: var(--font-mono);
font-size: 1.5625rem; font-weight: 700; line-height: 1;
letter-spacing: -.03em; color: var(--text);
font-variant-numeric: tabular-nums;
}
.dash-ov-ring-txt span { font-size: var(--fz-2xs); color: var(--text-muted); }
.dash-ov-body { min-width: 0; }
.dash-ov-title { font-size: var(--fz); color: var(--text-soft); margin-bottom: 10px; }
.dash-ov-title b {
font-family: var(--font-mono); font-size: 1.1875rem; font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
}
.dash-ov-bar {
height: 8px; border-radius: var(--r-pill); overflow: hidden;
background: #eef1f5; margin-bottom: 16px;
}
.dash-ov-bar-fill {
height: 100%; border-radius: var(--r-pill);
background: linear-gradient(90deg, #0066ff, #60a5fa);
transition: width .6s cubic-bezier(.22,.8,.3,1);
}
.dash-ov-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.dash-ov-stat { display: flex; flex-direction: column; gap: 3px; }
.dash-ov-stat b {
font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700;
line-height: 1.1; color: var(--text);
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dash-ov-stat span { font-size: var(--fz-2xs); color: var(--text-muted); }
.dash-ov-side {
padding-left: 24px;
border-left: 1px solid var(--border);
min-width: 196px;
}
.dash-ov-side-label { font-size: var(--fz-xs); color: var(--text-muted); }
.dash-ov-side-num { display: flex; align-items: baseline; gap: 3px; margin: 2px 0 4px; }
.dash-ov-side-num > span:first-child {
font-family: var(--font-mono); font-size: 1.875rem; font-weight: 700; line-height: 1;
color: var(--text); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.dash-ov-side-unit { font-size: var(--fz-xs); color: var(--text-muted); }
.dash-ov-side-meta { font-size: var(--fz-2xs); color: var(--text-muted); margin-bottom: 8px; }
.dash-ov-side-meta b { font-family: var(--font-mono); color: var(--text-soft); }
/* ── 学习分析区 ── */
.dash-analysis { margin-bottom: 26px; }
.dash-analysis-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.dash-curve-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 13px 16px 11px;
position: relative;
display: flex;
flex-direction: column;
}
/* 图表在卡片内垂直居中（右侧两块会把它撑高） */
.dash-curve { position: relative; flex: 1; display: flex; align-items: center; }
.dash-an-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
padding: 14px 16px 15px;
}
.dash-an-title {
font-size: var(--fz-xs); font-weight: 700; color: var(--text-muted);
margin-bottom: 12px;
}
/* 月度活跃圆环 */
.dash-mo { display: flex; align-items: center; gap: 16px; }
.dash-mo-ring { position: relative; width: 88px; height: 88px; flex-shrink: 0; }
.dash-mo-ring svg { width: 88px; height: 88px; display: block; }
.dash-mo-ring-fg {
fill: none; stroke: url(#xfMoGrad); stroke-width: 9; stroke-linecap: round;
transition: stroke-dashoffset .7s cubic-bezier(.22,.8,.3,1);
}
.dash-mo-txt {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.dash-mo-txt b {
font-family: var(--font-mono); font-size: 1.3125rem; font-weight: 700;
line-height: 1; color: var(--text); letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.dash-mo-txt span { font-size: var(--fz-3xs); color: var(--text-muted); }
.dash-mo-pct {
font-family: var(--font-mono); font-size: 1.1875rem; font-weight: 700;
color: var(--text); letter-spacing: -.02em;
}
.dash-mo-sub { font-size: var(--fz-2xs); color: var(--text-muted); margin-top: 3px; }
/* 题型掌握 */
.dash-qtypes { display: flex; flex-direction: column; gap: 9px; }
.mo-qt {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) 38px 40px;
align-items: center; gap: 8px;
font-size: var(--fz-2xs);
}
.mo-qt-label { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-qt-bar { height: 6px; border-radius: var(--r-pill); background: #eef1f5; overflow: hidden; }
.mo-qt-bar i {
display: block; height: 100%; border-radius: var(--r-pill);
background: linear-gradient(90deg, #0066ff, #60a5fa);
}
.mo-qt-acc {
font-family: var(--font-mono); font-weight: 700; color: var(--text);
text-align: right; font-variant-numeric: tabular-nums;
}
.mo-qt-n {
font-family: var(--font-mono); color: var(--text-muted);
text-align: right; font-size: var(--fz-2xs);
}
.mo-empty { font-size: var(--fz-xs); padding: 8px 0; }
.dash-curve-legend { display: flex; gap: 14px; margin-left: 16px; }
.dash-curve-legend .lg {
display: inline-flex; align-items: center; gap: 5px;
font-size: var(--fz-2xs); color: var(--text-muted);
}
.dash-curve-legend .lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dash-curve-legend .lg-bar { background: rgba(0, 102, 255, .55); }
.dash-curve-legend .lg-line {
background: linear-gradient(90deg, #0066ff, #f59e0b);
height: 3px !important; width: 14px !important; border-radius: 2px !important;
}
.dash-curve { position: relative; }
/* 固定高度 + viewBox 宽度=容器宽 → 1:1 绘制，坐标轴字号不会被放大 */
.dash-curve-svg { width: 100%; height: 138px; flex-shrink: 0; display: block; overflow: visible; }
.dash-curve-empty { padding: 60px 0; text-align: center; font-size: var(--fz-xs); }
.cx-grid { stroke: #eef1f5; stroke-width: 1; }
.cx-axis { font-family: var(--font-mono); font-size: var(--fz-3xs); fill: var(--text-muted); }
.cx-axis-r { fill: #cbd5e1; }
.cx-bar { transition: opacity .15s; }
.cx-area { fill: rgba(0, 102, 255, .07); }
.cx-line { fill: none; stroke: url(#xfLineG); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cx-dot { fill: #fff; stroke: #0066ff; stroke-width: 1.6; }
.cx-hit { fill: transparent; cursor: crosshair; }
.cx-hit:hover { fill: rgba(0, 102, 255, .05); }
.dash-curve-tip {
position: absolute;
padding: 5px 10px;
background: var(--text);
color: #fff;
font-size: var(--fz-2xs);
border-radius: 6px;
white-space: nowrap;
pointer-events: none;
z-index: 5;
box-shadow: var(--shadow);
}
.dash-curve-tip[hidden] { display: none; }
.dash-curve-tip b { font-family: var(--font-mono); }
@media (max-width: 1200px) {
/* 两列：曲线通栏 + 两块分析并排 */
.dash-analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-analysis-grid .dash-curve-card { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
.dash-ov-grid { grid-template-columns: auto minmax(0, 1fr); }
.dash-ov-side {
grid-column: 1 / -1; border-left: 0;
border-top: 1px solid var(--border); padding: 14px 0 0; min-width: 0;
}
.dash-main-row { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
.dash-ov-grid { grid-template-columns: 1fr; justify-items: start; }
.dash-ov-stats { gap: 22px; }
}
@media (max-width: 720px) {
.dash-analysis-grid { grid-template-columns: 1fr; }
.dash-daily { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 16px; }
.dd-stub { padding-right: 14px; }
.dd-stub-day { font-size: 1.5rem; }
.dd-cta { grid-column: 1 / -1; justify-self: start; }
.dash-curve-legend { display: none; }
.dash-ov-stats { gap: 18px; }
.dash-ov-stat b { font-size: 1.125rem; }
}
/* ── 仪表盘区块标题 ─────────────────────────────── */
.dash-section-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.dash-section-title {
display: flex; align-items: center; gap: 8px;
font-size: 1rem; font-weight: 600;
color: var(--text);
margin: 0;
}
.dash-section-title svg { color: var(--brand); }
.dash-section-meta {
font-size: var(--fz-xs); color: var(--text-soft);
}
.dash-section-meta b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
/* ── 会员中心 ─────────────────────────────────────── */
.mem-section-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
margin: 0 0 14px;
}
.mem-section-title {
font-size: 1.0625rem; font-weight: 700; color: var(--text);
margin: 0;
}
.mem-section-sub { font-size: var(--fz-xs); color: var(--text-muted); }
/* 当前权益：通行证（左侧蓝条压印 + 右侧三格数据） */
.mem-pass {
position: relative;
display: flex; align-items: center; justify-content: space-between;
gap: 30px; flex-wrap: wrap;
padding: 22px 26px 22px 30px;
margin-bottom: 24px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.mem-pass::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 5px;
background: linear-gradient(180deg, var(--brand) 0%, #60a5fa 100%);
}
.mem-pass.is-free::before { background: var(--border); }
.mem-pass-main { flex: 1; min-width: 280px; }
.mem-pass-label {
font-size: var(--fz-2xs); font-weight: 700;
color: var(--text-muted);
letter-spacing: .08em;
margin-bottom: 6px;
}
.mem-pass-plan {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 1.6875rem; font-weight: 700; color: var(--text);
line-height: 1.2;
}
.mem-badge {
display: inline-block;
padding: 2px 10px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 700;
}
.mem-badge-active { background: rgba(22, 163, 74, .12); color: #15803d; }
.mem-badge-free { background: var(--surface-2); color: var(--text-muted); }
.mem-pass-meta {
font-size: var(--fz-xs); color: var(--text-soft);
margin-top: 9px;
}
.mem-pass-meta b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.mem-pass-stats {
display: flex; align-items: center; gap: 30px;
padding-left: 30px;
border-left: 1px solid var(--border);
}
.mem-pass-stat { display: flex; flex-direction: column; gap: 4px; min-width: 76px; }
.mem-pass-big {
font-family: var(--font-mono);
font-size: 1.5625rem; font-weight: 700; line-height: 1.05;
letter-spacing: -.02em;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.mem-pass-big.is-text {
font-family: var(--font);
font-size: 1.375rem;
letter-spacing: 0;
}
.mem-pass-stat span { font-size: var(--fz-xs); color: var(--text-muted); }
/* ── 套餐卡：左对齐，价格同一起始线便于横向比价 ────────── */
.mem-plans {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
gap: 14px;
margin-bottom: 26px;
}
.mem-plan {
position: relative;
display: flex; flex-direction: column;
padding: 22px 20px 20px;
text-align: left;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mem-plan:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--border-strong);
}
/* 主推套餐：抬起来 + 蓝色压边，商业版只给一个主角 */
.mem-plan.is-hot {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-lg);
transform: translateY(-6px);
}
.mem-plan.is-hot:hover { transform: translateY(-9px); }
/* 有卡被选中时，主推卡退居次要位：不再抬升、不再蓝边、顶条转灰。
避免「主推」比「当前选中」还抢眼。 */
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected) {
border-color: var(--border);
box-shadow: var(--shadow-sm);
transform: none;
}
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected):hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected) .mem-plan-name { color: var(--text); }
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected) .mem-plan-band {
background: var(--surface-2);
color: var(--text-muted);
}
/* 当前选中的卡片：标题也跟着变蓝，焦点唯一 */
.mem-plan.is-selected .mem-plan-name { color: var(--brand); }
.mem-plan-band {
margin: -22px -20px 16px;
padding: 7px 20px;
background: linear-gradient(90deg, var(--brand), var(--brand-hover));
color: var(--brand-fg);
font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .1em;
border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.mem-plan-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 3px;
}
.mem-plan-name {
font-family: var(--font-display);
font-size: 1.1875rem; font-weight: 700; color: var(--text);
}
.mem-plan.is-hot .mem-plan-name { color: var(--brand); }
.mem-plan-note {
padding: 1px 8px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: var(--fz-2xs); font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.mem-plan-days {
font-family: var(--font-mono);
font-size: var(--fz-xs); color: var(--text-muted);
margin-bottom: 12px;
}
.mem-plan-price {
display: flex; align-items: baseline; gap: 2px;
color: var(--brand);
margin-bottom: 4px;
}
.mem-plan-price .cur { font-size: 1.125rem; font-weight: 600; }
.mem-plan-price .num {
font-size: 2.375rem; font-weight: 700;
font-family: var(--font-mono);
line-height: 1;
letter-spacing: -.03em;
}
.mem-plan-perday {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--fz-xs); color: var(--text-soft);
padding: 2px 9px;
margin-bottom: 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
}
.mem-plan-desc {
flex: 1;
margin: 0 0 16px;
padding: 14px 0 0;
border-top: 1px dashed var(--border);
list-style: none;
font-size: var(--fz-xs); line-height: 1.75; color: var(--text-soft);
}
.mem-plan-desc li { position: relative; padding-left: 15px; }
.mem-plan-desc li::before {
content: '';
position: absolute; left: 1px; top: 9px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--brand);
}
.mem-plan-buy {
appearance: none;
width: 100%;
padding: 12px 18px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--r);
font: inherit; font-size: var(--fz); font-weight: 700;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.mem-plan-buy:hover {
background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}
.mem-plan.is-hot .mem-plan-buy {
background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
box-shadow: 0 6px 16px rgba(0, 102, 255, .24);
}
.mem-plan.is-hot .mem-plan-buy:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.mem-plan-buy:disabled { opacity: .6; cursor: wait; }
/* ── 区块标题：衬线体，全站统一 ─────────────────────── */
.dash-section-title,
.mem-section-title,
.exam-rules-title {
font-family: var(--font-display);
letter-spacing: -.01em;
}
/* ── 积分区 ───────────────────────────────────────────── */
.mem-pt {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 18px 22px;
margin-bottom: 18px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
}
.mem-pt-label {
font-size: var(--fz-xs); color: var(--text-muted); margin-bottom: 2px;
font-weight: 600; letter-spacing: .04em;
}
.mem-pt-num {
font-family: var(--font-mono);
font-size: 2.125rem; font-weight: 700; line-height: 1.1;
letter-spacing: -.03em; color: var(--text);
font-variant-numeric: tabular-nums;
}
.mem-pt-sub { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 4px; }
.mem-pt-ops { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mem-pt-ops-label { font-size: var(--fz-xs); color: var(--text-muted); }
.mem-pt-redeem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* ── 支付方式 ─────────────────────────────────────────── */
.mem-pay {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 12px 16px; margin-bottom: 18px;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface-2);
}
.mem-pay-label { font-size: var(--fz-xs); color: var(--text-muted); }
.mem-pay-opt { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fz-xs); cursor: pointer; }
.mem-pay-opt input { accent-color: var(--brand); width: 15px; height: 15px; }
/* ── 购买记录 ─────────────────────────────────────────── */
.mem-history { margin-bottom: 22px; }
.mem-history-list {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
}
.mem-history-row {
display: grid;
grid-template-columns: 110px 1fr 90px 200px 86px 140px;
align-items: center; gap: 12px;
padding: 11px 16px;
border-bottom: 1px solid var(--border);
font-size: var(--fz-xs);
color: var(--text-soft);
}
.mem-history-row:last-child { border-bottom: 0; }
.mem-history-row.is-head {
background: var(--surface-2);
font-size: var(--fz-2xs);
font-weight: 700;
color: var(--text-muted);
letter-spacing: .04em;
padding: 9px 16px;
}
.mem-h-plan { color: var(--text); font-weight: 600; }
.mem-h-order { font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--text-muted); }
.mem-h-amount { font-family: var(--font-mono); color: var(--brand); font-weight: 600; }
.mem-h-range { font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--text-muted); }
@media (max-width: 860px) {
.mem-history-row { grid-template-columns: 1fr 1fr; }
.mem-h-order, .mem-h-range { grid-column: span 2; }
.mem-history-row.is-head { display: none; }
}
@media (max-width: 900px) {
.mem-pass-stats {
width: 100%;
padding-left: 0; border-left: 0;
padding-top: 14px; border-top: 1px solid var(--border);
}
}
@media (max-width: 760px) {
.mem-pass-stats { gap: 22px; }
}
.mem-note {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px;
margin-bottom: 14px;
background: var(--surface-2);
border-radius: var(--r);
font-size: var(--fz-xs);
color: var(--text-muted);
}
.mem-note svg { flex-shrink: 0; color: var(--brand); }
/* ── 意见反馈页 ───────────────────────────────────── */
.fb-form {
padding: 22px 24px;
margin-bottom: 26px;
}
.fb-form-head { margin-bottom: 16px; }
.fb-form-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 1rem; font-weight: 600;
color: var(--text);
}
.fb-form-title svg { color: var(--brand); }
.fb-label {
display: block;
font-size: var(--fz-xs); font-weight: 600;
color: var(--text-muted);
margin-bottom: 7px;
}
.fb-types {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 16px;
}
.fb-type {
appearance: none;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--surface-2);
color: var(--text-soft);
font: inherit; font-size: var(--fz-sm);
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.fb-type:hover { border-color: var(--brand); color: var(--brand); }
.fb-type.active {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-fg);
font-weight: 600;
}
.fb-form textarea,
.fb-form input[type=text] {
width: 100%;
padding: 11px 13px;
font: inherit; font-size: var(--fz);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
margin-bottom: 6px;
resize: vertical;
}
.fb-form textarea:focus,
.fb-form input[type=text]:focus {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.fb-count {
font-size: var(--fz-xs);
color: var(--text-muted);
text-align: right;
font-family: var(--font-mono);
margin-bottom: 14px;
}
.fb-actions { margin-top: 6px; }
.fb-actions .btn { padding: 10px 22px; }
/* ── 账号设置页（修改密码 / 修改邮箱 / 注销账号）──────────────── */
.acct-form {
padding: 22px 24px;
max-width: 520px;
}
.acct-form.danger {
border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.acct-form-head { margin-bottom: 16px; }
.acct-form-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 1rem; font-weight: 600;
color: var(--text);
}
.acct-form-title svg { color: var(--brand); }
.acct-form.danger .acct-form-title svg { color: var(--danger); }
.acct-label {
display: block;
font-size: var(--fz-xs); font-weight: 600;
color: var(--text-muted);
margin-bottom: 7px;
}
.acct-form input[type=password],
.acct-form input[type=text],
.acct-form input[type=email] {
width: 100%;
padding: 11px 13px;
font: inherit; font-size: var(--fz);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
margin-bottom: 6px;
}
.acct-form input:focus {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.acct-form input::placeholder { color: var(--text-muted); }
.acct-hint {
font-size: var(--fz-xs);
color: var(--text-muted);
margin-bottom: 14px;
}
.acct-hint.is-ok { color: var(--success, #16a34a); }
.acct-hint.is-bad { color: var(--danger); }
.acct-err {
display: none;
margin: 0 0 12px;
font-size: var(--fz-sm);
color: var(--danger);
}
.acct-err.on { display: block; }
.acct-actions { margin-top: 4px; }
.acct-actions .btn { padding: 10px 22px; }
/* 当前绑定值展示条 */
.acct-current {
display: flex; align-items: center; gap: 10px;
padding: 10px 13px;
margin-bottom: 16px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
}
.acct-current .k {
flex: none;
font-size: var(--fz-xs);
color: var(--text-muted);
}
.acct-current .v {
font-family: var(--font-mono);
font-size: var(--fz-sm);
color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-current .v.empty { font-family: inherit; color: var(--text-muted); }
/* 验证码行：输入框 + 发送按钮 */
.acct-code-row { display: flex; gap: 10px; align-items: stretch; }
.acct-code-row .acct-field { flex: 1; min-width: 0; }
.acct-code-row input { margin-bottom: 0; }
.acct-send {
flex: none;
padding: 0 16px;
font: inherit; font-size: var(--fz-sm); font-weight: 600;
color: var(--brand);
background: var(--brand-soft);
border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
border-radius: var(--r-sm);
cursor: pointer;
white-space: nowrap;
transition: background .12s ease, opacity .12s ease;
}
.acct-send:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.acct-send:disabled { opacity: .55; cursor: default; }
/* 注销页：风险提示 + 将被清除的内容清单 */
.acct-warn {
display: flex; gap: 10px;
padding: 12px 14px;
margin-bottom: 14px;
border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
border-radius: var(--r-sm);
background: var(--danger-soft);
font-size: var(--fz-sm);
line-height: 1.6;
color: var(--text);
}
.acct-warn svg { flex: none; color: var(--danger); margin-top: 2px; }
.acct-warn b { color: var(--danger); }
.acct-list {
margin: 0 0 18px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
list-style: none;
}
.acct-list li {
display: flex; align-items: center; gap: 8px;
padding: 5px 0;
font-size: var(--fz-sm);
color: var(--text-soft);
}
.acct-list li .n {
margin-left: auto;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text);
font-weight: 600;
}
.acct-list li.member { color: var(--danger); }
.acct-list li.member .n { color: var(--danger); }
.fb-mine { margin-bottom: 22px; }
.fb-card { padding: 16px 20px; margin-bottom: 12px; }
.fb-card-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.fb-cat {
display: inline-block;
padding: 2px 10px;
background: var(--brand-soft);
color: var(--brand);
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 600;
}
.fb-card-content {
font-size: var(--fz);
color: var(--text);
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
}
.fb-card-contact { margin-top: 8px; }
.fb-card-reply {
margin-top: 10px;
padding: 10px 14px;
background: var(--brand-soft);
border-left: 3px solid var(--brand);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: var(--text);
line-height: 1.6;
}
/* ── 用户提交解析 / 会员标识 ───────────────────────────── */
.xf-exp-btn {
margin-top: 8px;
align-self: flex-start;
border-style: dashed !important;
color: var(--brand) !important;
background: var(--brand-soft) !important;
}
.xf-exp-btn:hover {
border-style: solid !important;
background: var(--brand) !important;
color: var(--brand-fg) !important;
}
.xf-expl-nobox { margin-top: 10px; }
.xf-exp-q {
margin-bottom: 14px;
padding: 10px 14px;
background: var(--surface-2);
border-radius: var(--r-sm);
max-height: 120px;
overflow-y: auto;
}
.xf-exp-q-content {
font-size: var(--fz-sm);
color: var(--text);
line-height: 1.65;
}
.xf-exp-mine {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border);
color: var(--warn, #d97706) !important;
}
#xf-exp-content {
width: 100%;
padding: 11px 13px;
font: inherit; font-size: var(--fz);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
resize: vertical;
line-height: 1.7;
}
#xf-exp-content:focus {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.xf-exp-tip { margin-top: 8px; line-height: 1.6; }
.ue-list { display: flex; flex-direction: column; gap: 12px; }
.ue-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px 20px;
box-shadow: var(--shadow-sm);
transition: border-color .16s, box-shadow .16s;
}
.ue-item:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-lg);
}
.ue-item-head {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.ue-qid {
font-family: var(--font-mono);
font-size: var(--fz-xs); font-weight: 700;
color: var(--text);
}
.ue-time { margin-left: auto; font-family: var(--font-mono); }
.ue-flag {
font-size: var(--fz-2xs); font-weight: 600;
padding: 1px 8px;
border-radius: var(--r-pill);
}
.ue-flag.ok { background: rgba(16, 185, 129, .14); color: #10b981; }
.ue-q {
font-size: var(--fz-sm);
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 8px;
padding-left: 10px;
border-left: 2px solid var(--border);
}
.ue-content {
font-size: var(--fz);
color: var(--text);
line-height: 1.75;
white-space: pre-wrap;
word-break: break-word;
padding: 11px 14px;
background: var(--surface-2);
border-radius: var(--r-sm);
}
.ue-admin {
margin-top: 8px;
padding: 9px 13px;
font-size: var(--fz-sm);
color: var(--text-soft);
background: var(--brand-soft);
border-left: 3px solid var(--brand);
border-radius: var(--r-sm);
}
/* .sb-ico-exp 已并入 .sb-ico 单色体系 */
/* ── 我的考试记录（me_exams） ─────────────────────────── */
.exam-rec-list {
display: flex; flex-direction: column;
gap: 12px;
}
.exam-rec {
display: grid;
grid-template-columns: minmax(220px, 2.2fr) 150px minmax(260px, 2fr) auto;
align-items: center;
gap: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px 20px;
box-shadow: var(--shadow-sm);
transition: border-color .16s, box-shadow .16s, transform .16s;
}
.exam-rec:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.exam-rec-main { min-width: 0; }
.exam-rec-head {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.exam-rec-title {
font-size: var(--fz-sm); font-weight: 600;
color: var(--text);
text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
.exam-rec-title:hover { color: var(--brand); }
.exam-rec-kemu {
font-size: var(--fz-xs); color: var(--text-muted);
padding: 1px 7px;
background: var(--surface-2);
border-radius: var(--r-pill);
white-space: nowrap;
}
.exam-rec-lv {
font-size: var(--fz-xs); font-weight: 700;
padding: 1px 9px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.exam-rec-flag {
font-size: var(--fz-2xs); font-weight: 600;
padding: 1px 8px;
border-radius: var(--r-pill);
white-space: nowrap;
}
.exam-rec-flag.warn { background: rgba(217, 119, 6, .14); color: #d97706; }
.exam-rec-time {
font-size: var(--fz-xs); color: var(--text-muted);
font-family: var(--font-mono);
}
.exam-rec-time b { color: var(--text-soft); font-weight: 600; }
.exam-rec-score {
display: flex; flex-direction: column;
align-items: center;
gap: 3px;
}
.exam-rec-score-num {
font-size: 2.0625rem; font-weight: 700;
font-family: var(--font-mono);
line-height: 1;
}
.exam-rec-score-sub {
font-size: var(--fz-2xs); color: var(--text-muted);
margin-top: -2px;
}
.exam-rec-bar {
position: relative;
width: 100%; height: 6px;
background: var(--surface-2);
border-radius: var(--r-pill);
margin-top: 5px;
}
.exam-rec-bar-fill {
display: block; height: 100%;
border-radius: var(--r-pill);
transition: width .3s;
}
.exam-rec-bar-pass {
position: absolute; top: -2px;
width: 2px; height: 10px;
background: var(--text-muted);
border-radius: 2px;
transform: translateX(-1px);
}
.exam-rec-score-raw {
font-size: var(--fz-2xs); color: var(--text-muted);
font-family: var(--font-mono);
}
.exam-rec-stats {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.exam-rec-stat {
min-width: 46px;
padding: 5px 8px;
border-radius: var(--r-sm);
text-align: center;
background: var(--surface-2);
}
.exam-rec-stat b {
display: block;
font-size: 1.0625rem; font-weight: 700;
font-family: var(--font-mono);
line-height: 1.15;
}
.exam-rec-stat span {
font-size: var(--fz-2xs);
color: var(--text-muted);
}
.exam-rec-stat.ok { background: rgba(16, 185, 129, .13); }
.exam-rec-stat.ok b { color: #10b981; }
.exam-rec-stat.partial { background: rgba(245, 158, 11, .15); }
.exam-rec-stat.partial b { color: #d97706; }
.exam-rec-stat.no { background: rgba(239, 68, 68, .11); }
.exam-rec-stat.no b { color: #ef4444; }
.exam-rec-stat.mute { background: var(--surface-2); }
.exam-rec-stat.mute b { color: var(--text-muted); }
.exam-rec-accuracy {
margin-left: 4px;
text-align: center;
min-width: 52px;
}
.exam-rec-accuracy b {
display: block;
font-size: 1rem; font-weight: 700;
font-family: var(--font-mono);
color: var(--text);
line-height: 1.15;
}
.exam-rec-accuracy span {
font-size: var(--fz-2xs);
color: var(--text-muted);
}
.exam-rec-go { white-space: nowrap; }
@media (max-width: 900px) {
.exam-rec {
grid-template-columns: 1fr auto;
gap: 14px;
}
.exam-rec-main { grid-column: 1 / -1; }
.exam-rec-score { align-items: flex-start; }
.exam-rec-stats { grid-column: 1 / -1; }
.exam-rec-go { grid-column: 1 / -1; text-align: center; }
}
/* ── 题目纠错反馈弹窗 ───────────────────────────────── */
.xf-modal {
position: fixed; inset: 0;
z-index: 300;
display: flex; align-items: center; justify-content: center;
}
.xf-modal[hidden] { display: none; }
.xf-modal-mask {
position: absolute; inset: 0;
background: rgba(2, 6, 23, .40);
animation: xf-mask-in .18s ease-out;
}
.xf-modal-card {
position: relative;
background: var(--surface);
border-radius: var(--r-lg);
width: min(480px, calc(100vw - 32px));
max-height: calc(100vh - 80px);
overflow: hidden;
box-shadow: 0 16px 48px rgba(15,23,42,.20), 0 4px 12px rgba(15,23,42,.10);
display: flex; flex-direction: column;
animation: xf-modal-in .22s ease-out;
}
@keyframes xf-modal-in {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.xf-modal-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.xf-modal-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 1rem; font-weight: 600;
color: var(--text);
}
.xf-modal-title svg { color: var(--brand); }
.xf-modal-close {
appearance: none; border: 0;
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text-soft);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.xf-modal-close:hover { background: var(--brand-soft); color: var(--brand); }
.xf-modal-body {
padding: 16px 20px;
overflow-y: auto;
}
.xf-modal-sub { margin: 0 0 14px; }
.xf-modal-sub b { color: var(--brand); font-family: var(--font-mono); }
.xf-field-label {
display: block;
font-size: var(--fz-xs); color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
.xf-report-types {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.xf-radio {
display: flex; align-items: center; gap: 6px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
cursor: pointer;
font-size: var(--fz-sm);
color: var(--text-soft);
transition: border-color .12s, background .12s;
}
.xf-radio:hover { border-color: var(--brand); }
.xf-radio input { accent-color: var(--brand); cursor: pointer; }
.xf-radio:has(input:checked) {
border-color: var(--brand);
background: var(--brand-soft);
color: var(--brand);
font-weight: 600;
}
#xf-report-desc {
width: 100%;
padding: 10px 12px;
font: inherit; font-size: var(--fz-sm);
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
resize: vertical;
min-height: 60px;
}
#xf-report-desc:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.xf-modal-foot {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border);
}
/* 报告按钮变体（练习页 / 每日一题页共用） */
.q-report-btn,
#q-report {
/* 已通过 .btn ghost 控制基础样式，下面加 SVG 与文字间距 */
}
#q-report svg, #daily-report svg { vertical-align: -2px; margin-right: 2px; }
/* 快捷键提示块 */
.qnav-shortcuts {
margin-top: 16px;
font-size: var(--fz-xs);
color: var(--text-muted);
}
.qnav-shortcuts summary {
cursor: pointer;
font-weight: 500;
user-select: none;
outline: none;
}
.qnav-shortcuts summary::-webkit-details-marker { display: none; }
.qnav-shortcuts summary::before {
content: "▸ ";
display: inline-block;
transition: transform .12s;
}
.qnav-shortcuts[open] summary::before { content: "▾ "; }
.qnav-shortcuts-grid {
display: flex; flex-wrap: wrap;
gap: 8px 18px;
padding: 10px 0 4px;
}
.qnav-shortcuts-grid span {
display: inline-flex; align-items: center; gap: 6px;
}
.qnav-shortcuts-grid kbd {
display: inline-block;
padding: 2px 6px;
font: 11px var(--font-mono);
background: var(--surface-2);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 4px;
color: var(--text-soft);
min-width: 18px;
text-align: center;
}
/* ── 我的反馈页面 ───────────────────────────────── */
.report-card { padding: 16px 20px; margin-bottom: 12px; }
.report-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.report-type {
display: inline-block;
padding: 3px 10px;
background: var(--brand-soft);
color: var(--brand);
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 600;
}
.report-time { flex: 1; min-width: 0; }
.report-qid {
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-muted);
padding: 2px 8px;
border-radius: var(--r-sm);
background: var(--surface-2);
text-decoration: none;
}
.report-qid:hover { color: var(--brand); background: var(--brand-soft); }
.report-desc {
font-size: var(--fz-sm);
color: var(--text);
line-height: 1.6;
padding: 10px 14px;
background: var(--surface-2);
border-radius: var(--r-sm);
margin-bottom: 8px;
}
.report-admin {
font-size: var(--fz-xs);
color: var(--text-soft);
padding: 10px 14px;
background: var(--brand-soft);
border-left: 3px solid var(--brand);
border-radius: var(--r-sm);
}
.xf-status {
display: inline-block;
padding: 2px 10px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 600;
}
.xf-status-warn { background: rgba(217, 119, 6, .12); color: #d97706; }
.xf-status-ok { background: rgba(22, 163, 74, .12); color: #16a34a; }
.xf-status-no { background: rgba(220, 38, 38, .10); color: #dc2626; }
.xf-status-neutral { background: var(--surface-2); color: var(--text-muted); }
/* ── 收藏夹 UI 增强（搜索框 + 排序 + 来源） ───────── */
.fav-search {
position: relative;
display: flex; align-items: center;
height: 34px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
padding: 0 32px 0 30px;
min-width: 220px;
flex: 1; max-width: 360px;
transition: border-color .12s, background .12s;
}
.fav-search:focus-within {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.fav-search > svg {
position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
color: var(--text-muted);
}
.fav-search input {
flex: 1; min-width: 0;
border: 0; outline: 0;
background: transparent;
color: var(--text);
font: inherit; font-size: var(--fz-sm);
height: 100%;
padding: 0;
}
.fav-search input::placeholder { color: var(--text-muted); }
.fav-search-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
appearance: none; border: 0;
width: 22px; height: 22px;
background: var(--border);
color: var(--text-soft);
border-radius: 50%;
cursor: pointer;
font-size: var(--fz); line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.fav-search-clear:hover { background: var(--brand); color: white; }
.fav-sort select {
appearance: none;
height: 34px;
padding: 0 28px 0 12px;
font: inherit; font-size: var(--fz-sm);
color: var(--text);
background: var(--surface-2) url("data:image/svg+xml;utf8,") no-repeat right 10px center;
border: 1px solid var(--border);
border-radius: var(--r-sm);
outline: none;
cursor: pointer;
transition: border-color .12s;
}
.fav-sort select:focus { border-color: var(--brand); }
.float-q-sources {
display: inline-flex; align-items: center; gap: 5px;
flex: 1; min-width: 0;
overflow: hidden;
font-size: var(--fz-xs);
color: var(--text-muted);
}
.float-q-source {
color: var(--text-soft);
text-decoration: none;
padding: 2px 6px;
background: var(--surface-2);
border-radius: var(--r-sm);
white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
max-width: 200px;
transition: color .12s, background .12s;
}
.float-q-source:hover {
color: var(--brand);
background: var(--brand-soft);
}
.float-q-sources .sep-dot {
color: var(--text-muted);
font-weight: 600;
}
/* ── 题目纠错反馈弹窗 ───────────────────────────────── */
.daily-wrap { max-width: 760px; margin: 0 auto; }
.daily-card {
padding: 24px 26px;
margin-bottom: 16px;
}
.daily-card-head {
display: flex; align-items: center; gap: 10px;
font-size: var(--fz-xs); color: var(--text-soft);
margin-bottom: 16px; flex-wrap: wrap;
}
.daily-pool {
display: inline-block;
padding: 3px 10px;
background: var(--brand-soft);
color: var(--brand);
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 600;
}
.daily-source {
color: var(--text-muted);
font-size: var(--fz-xs);
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.daily-q-content {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--text);
margin-bottom: 18px;
word-break: break-word;
}
.daily-options {
list-style: none; padding: 0; margin: 0 0 16px;
display: flex; flex-direction: column; gap: 10px;
}
.daily-opt {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: var(--r);
cursor: pointer;
transition: border-color .12s, background .12s;
}
.daily-opt:hover:not(.disabled) { border-color: var(--brand); }
.daily-opt.selected {
border-color: var(--brand);
background: var(--brand-soft);
}
.daily-opt.correct {
border-color: var(--success, #16a34a);
background: rgba(22, 163, 74, .10);
}
.daily-opt.disabled { cursor: default; }
.daily-opt-key {
font-family: var(--font-mono);
font-weight: 600;
color: var(--brand);
width: 22px; flex-shrink: 0;
}
.daily-opt-text { color: var(--text); font-size: var(--fz); line-height: 1.6; }
.daily-q-fill {
margin-bottom: 16px;
display: none;
}
.daily-q-fill input {
width: 100%;
padding: 12px 14px;
font: inherit; font-size: 1rem;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
outline: none;
}
.daily-q-fill input:focus {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.daily-actions {
display: flex; gap: 10px;
margin-top: 16px;
}
.daily-feedback {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
display: none;
}
.daily-feedback:not(:empty) { display: block; }
.daily-feedback-head {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border-radius: var(--r-pill);
font-weight: 600;
font-size: var(--fz);
margin-bottom: 12px;
}
.daily-feedback-head.ok {
background: rgba(22, 163, 74, .12);
color: #16a34a;
}
.daily-feedback-head.no {
background: rgba(220, 38, 38, .10);
color: #dc2626;
}
.daily-feedback-row {
font-size: var(--fz-sm);
color: var(--text-soft);
margin-bottom: 6px;
line-height: 1.7;
}
.daily-feedback-row b { font-weight: 600; color: var(--text); font-family: var(--font-mono); }
.daily-feedback-row .ok-text { color: #16a34a; }
.daily-explain {
margin-top: 4px;
padding: 12px 14px;
background: var(--surface-2);
border-radius: var(--r);
font-size: var(--fz-sm);
line-height: 1.7;
word-break: break-word;
}
.daily-loading {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px;
padding: 80px 0;
color: var(--text-muted);
}
.daily-back {
text-align: center;
margin: 24px 0;
}
/* ── chapter.html 顶部进度条 ───────────────────────── */
.ch-progress {
margin: 16px 0 18px;
padding: 16px 20px;
}
.ch-progress-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.ch-progress-title {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fz-sm); font-weight: 600;
color: var(--text-soft);
}
.ch-progress-title svg { color: var(--brand); }
.ch-progress-stats {
font-size: var(--fz-xs); color: var(--text-soft);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ch-progress-stats b { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
.ch-progress-sep { color: var(--text-muted); }
.ch-progress-bar {
height: 8px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
margin-bottom: 10px;
}
.ch-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--brand), #60a5fa);
border-radius: var(--r-pill);
transition: width .3s;
}
.ch-progress-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
font-size: var(--fz-xs);
color: var(--text-muted);
}
.ch-progress-pct {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
}
/* ── 暗色微调 ────────────────────────────────────── */
[data-theme="dark"] .dash-intro-icon,
[data-theme="dark"] .dash-card-icon,
[data-theme="dark"] .dash-exam-icon {
/* 渐变在暗背景下更亮，调一点点亮度 */
filter: brightness(1.05);
}
[data-theme="dark"] .dash-link,
[data-theme="dark"] .dash-card-link,
[data-theme="dark"] .dash-card-action:not(.danger) {
background: rgba(255,255,255,0.05);
border-color: rgba(255,255,255,0.08);
color: var(--text-soft);
}
/* ── 响应式 ──────────────────────────────────────── */
@media (max-width: 1080px) {
.dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.dash-grid { grid-template-columns: 1fr; }
.dash-head { flex-direction: column; gap: 12px; align-items: stretch; }
.dash-switch { align-self: flex-start; }
.dash-intro { flex-wrap: wrap; }
.dash-intro-action { width: 100%; margin-top: 4px; }
.dash-exam { flex-direction: column; align-items: flex-start; gap: 16px; }
.dash-exam-stats { width: 100%; justify-content: flex-start; gap: 24px; }
}
/* ==========================================================================
应用框架：左侧 sidebar + 右侧 main
========================================================================== */
.app-shell {
display: flex;
min-height: 100vh;
align-items: stretch;
/* 整个外壳居中收口：宽屏下侧栏不再和内容之间裂开一大片空白。
注意 body 是 column flex，auto margin 会让外壳收缩包裹，所以必须显式 width:100% */
width: 100%;
max-width: 1680px;
margin: 0 auto;
}
.sidebar {
position: sticky; top: 0; align-self: flex-start;
width: 220px; flex-shrink: 0;
height: 100vh;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 14px 0;
overflow-y: auto;
transition: width .2s ease;
}
/* 顶部行：brand + 折叠按钮 */
.sidebar-top {
display: flex; align-items: center; gap: 4px;
padding: 0 14px 4px;
}
.sidebar-brand {
display: flex; align-items: center; gap: 8px;
padding: 4px 0 14px;
text-decoration: none;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
flex: 1; min-width: 0;
}
.sidebar-brand .brand-icon {
font-size: 1.25rem; line-height: 1; width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
flex-shrink: 0;
}
.sidebar-brand .brand-name {
font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em;
color: var(--text);
white-space: nowrap; overflow: hidden;
}
.sidebar-collapse {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-soft);
font-family: var(--font-mono);
font-size: var(--fz-sm); line-height: 1;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
}
.sidebar-collapse:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
/* ── 侧栏顶部搜索框 ───────────────────────────────── */
.sidebar-search-form {
position: relative;
display: flex; align-items: center;
margin: 10px 14px 14px;
height: 36px;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface-2);
transition: border-color .12s, background .12s, box-shadow .12s;
}
.sidebar-search-form:focus-within {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.sidebar-search-ico {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 100%;
color: var(--text-muted);
flex-shrink: 0;
}
.sidebar-search-input {
flex: 1; min-width: 0;
border: 0; outline: 0;
background: transparent;
color: var(--text);
font: inherit; font-size: var(--fz-sm);
padding: 0 4px;
height: 100%;
}
.sidebar-search-input::placeholder { color: var(--text-muted); }
.sidebar-search-input::-webkit-search-cancel-button { cursor: pointer; }
.sidebar-search-go {
appearance: none; border: 0; background: transparent;
width: 30px; height: 100%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-muted);
cursor: pointer;
border-left: 1px solid var(--border);
transition: color .12s, background .12s;
border-radius: 0 var(--r) var(--r) 0;
}
.sidebar-search-go:hover { color: var(--brand); background: var(--brand-soft); }
/* 折叠态：保留图标按钮样式（搜索触发器） */
[data-sidebar="collapsed"] .sidebar-search-form {
margin: 10px 14px 8px;
height: 36px;
cursor: pointer;
}
[data-sidebar="collapsed"] .sidebar-search-input { display: none; }
[data-sidebar="collapsed"] .sidebar-search-go {
width: 100%;
border-left: 0;
border-radius: var(--r);
}
[data-sidebar="collapsed"] .sidebar-search-ico { width: 100%; }
.sidebar-section { padding: 4px 0 8px; }
.sidebar-section-title {
padding: 9px 18px 5px;
font-size: var(--fz-xs); font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
.sb-item {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 7px 11px;
margin: 0 8px;
border-radius: var(--r-sm);
color: var(--text-soft);
font-size: var(--fz);
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
transition: background .12s, color .12s;
}
.sb-item:hover { background: var(--surface-2); color: var(--text); }
.sb-item.active {
background: var(--brand-soft);
color: var(--brand);
font-weight: 600;
}
.sb-item.active::before {
content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
width: 3px; background: var(--brand); border-radius: 0 3px 3px 0;
}
.sb-item.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sb-ico {
width: 24px; height: 24px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: #fff;
box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
.sb-ico svg { width: 15px; height: 15px; stroke: currentColor; }
/* 11 色系渐变 — 与右侧 dash-card icon 一致 */
/* .sb-ico-dash 已并入 .sb-ico 单色体系 */
/* .sb-ico-seq 已并入 .sb-ico 单色体系 */
/* .sb-ico-random 已并入 .sb-ico 单色体系 */
/* .sb-ico-special 已并入 .sb-ico 单色体系 */
/* .sb-ico-unfilled 已并入 .sb-ico 单色体系 */
/* .sb-ico-recite 已并入 .sb-ico 单色体系 */
/* .sb-ico-exam 已并入 .sb-ico 单色体系 */
/* .sb-ico-record 已并入 .sb-ico 单色体系 */
/* .sb-ico-wrong 已并入 .sb-ico 单色体系 */
/* .sb-ico-fav 已并入 .sb-ico 单色体系 */
/* .sb-ico-subj 已并入 .sb-ico 单色体系 */
/* .sb-ico-fb 已并入 .sb-ico 单色体系 */
/* .sb-ico-member 已并入 .sb-ico 单色体系 */
.sb-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1; min-width: 0;
}
/* ── 折叠态 ───────────────────────────────────────── */
.sidebar.collapsed { width: 64px; padding: 14px 0; }
.sidebar.collapsed .sidebar-top {
flex-direction: column;
gap: 10px;
padding: 0 8px 4px;
}
.sidebar.collapsed .sidebar-brand {
padding: 4px 0 10px;
justify-content: center;
border-bottom: none;
margin-bottom: 0;
}
.sidebar.collapsed .brand-name,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sb-label,
.sidebar.collapsed .sb-badge,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sf-checkin,
.sidebar.collapsed .sidebar-user-foot {
display: none !important;
}
.sidebar.collapsed .sb-item {
justify-content: center;
padding: 9px 0;
margin: 0 6px;
}
.sidebar.collapsed .sb-item.active::before { left: -6px; }
.sidebar.collapsed .sidebar-user {
grid-template-columns: 1fr;
justify-items: center;
gap: 8px;
padding: 10px 0;
}
/* 折叠态：头像与主题按钮竖排居中，别被挤成一条缝 */
.sidebar.collapsed .sidebar-user-top {
flex-direction: column;
justify-content: center;
gap: 10px;
width: 100%;
}
.sidebar.collapsed .theme-toggle { margin-left: 0; }
.sidebar.collapsed .sidebar-bottom-row { justify-content: center; padding: 4px 0 0; }
.sb-badge {
margin-left: auto;
min-width: 18px; height: 18px;
background: var(--danger); color: white;
font-size: 11px; font-weight: 700;
line-height: 1;
border-radius: 999px; /* 胶囊圆角 */
display: inline-flex; align-items: center; justify-content: center;
padding: 0 5px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* 徽章配色跟随对应图标色，避免一排红 */
.sb-badge-fav { background: var(--warn); color: #fff; }
.sb-badge-exp { background: #0891b2; color: #fff; }
/* 会员徽章（侧栏「会员中心」） */
/* 额度提醒（免费用户剩余题数不足时显示） */
.sb-badge-quota {
background: rgba(217, 119, 6, .14);
color: #b45309;
border: 1px solid rgba(217, 119, 6, .38);
height: 18px;
font-size: 11px;
font-weight: 700;
line-height: 1;
border-radius: 999px;
padding: 0 7px;
}
.sidebar-spacer { flex: 1; min-height: 20px; }
/* ── 侧栏底部：用户身份区（三栏网格） ─────────────────── */
.sidebar-user {
display: flex; flex-direction: column; gap: 7px;
padding: 10px 12px 12px;
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sidebar-user-top { display: flex; align-items: flex-start; gap: 10px; }
.sidebar-user .avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--brand); color: var(--brand-fg);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: var(--fz); letter-spacing: .02em;
flex-shrink: 0;
margin-top: 1px;
}
/* 会员：头像加一圈金环 */
.sidebar-user .avatar.is-member {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px rgba(217, 119, 6, .55);
}
.sidebar-user-info { min-width: 0; }
.sidebar-user-name {
display: flex; align-items: center; gap: 6px;
min-width: 0;
line-height: 1.3;
}
.sidebar-user-name-text {
font-size: var(--fz); font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-name-text.is-member {
background: linear-gradient(90deg, #d97706 0%, #f59e0b 55%, #fbbf24 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: #d97706;
}
.sidebar-user-action {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 32px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-muted);
font-size: var(--fz-xs); font-weight: 600;
text-decoration: none;
transition: color .14s, border-color .14s, background .14s;
}
.sidebar-user-action:hover {
color: #dc2626;
border-color: rgba(220, 38, 38, .40);
background: rgba(220, 38, 38, .06);
}
.sidebar-user-action svg { flex-shrink: 0; }
.sidebar-user-foot { display: flex; }
.sidebar-user-foot .sidebar-user-action { flex: 1; }
/* 侧栏：每日签到（整宽主按钮，未签到带红点 + 呼吸提示） */
.sf-checkin {
width: 100%;
height: 34px;
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
font-family: inherit;
font-size: var(--fz-xs); font-weight: 700;
color: var(--brand-fg);
background: var(--brand);
border: 1px solid var(--brand);
border-radius: var(--r-sm);
cursor: pointer;
transition: filter .12s, background .12s, border-color .12s, color .12s;
}
.sf-checkin:hover:not(:disabled) { filter: brightness(1.08); }
.sf-checkin:disabled { cursor: default; }
.sf-checkin svg { flex-shrink: 0; }
.sf-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #ff5252;
box-shadow: 0 0 0 3px rgba(255, 82, 82, .30);
flex-shrink: 0;
}
.sf-checkin.is-done {
background: var(--surface);
border-color: var(--border);
color: var(--text-muted);
}
@media (prefers-reduced-motion: no-preference) {
.sf-checkin:not(.is-done) { animation: sf-checkin-pulse 2.4s ease-in-out infinite; }
}
@keyframes sf-checkin-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 102, 255, .34); }
50% { box-shadow: 0 0 0 6px rgba(0, 102, 255, 0); }
}
/* ── 会员徽章：金色描边 chip（套餐全称见 title） ───────── */
.member-badge-inline {
display: inline-flex; align-items: center; gap: 3px;
flex-shrink: 0;
padding: 1px 8px 1px 6px;
border-radius: var(--r-pill);
border: 1px solid rgba(217, 119, 6, .42);
background: rgba(217, 119, 6, .10);
color: #b45309 !important;
-webkit-text-fill-color: #b45309 !important;
font-size: var(--fz-2xs);
font-weight: 700;
line-height: 1.65;
white-space: nowrap;
}
.member-badge-inline svg { flex-shrink: 0; }
[data-theme="dark"] .member-badge-inline {
border-color: rgba(245, 158, 11, .45);
background: rgba(245, 158, 11, .14);
color: #fbbf24 !important;
-webkit-text-fill-color: #fbbf24 !important;
}
[data-theme="dark"] .sidebar-user .avatar.is-member {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px rgba(245, 158, 11, .60);
}
.sidebar-bottom-row {
display: flex; align-items: center; justify-content: flex-end;
padding: 4px 16px 0;
}
.main {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
min-height: 100vh;
padding: 0 28px;
}
/* 版心：内容不贴视口边，商业排版的呼吸感 */
.main-inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 30px 0 44px;
flex: 1;
}
.main > .container { max-width: 1180px; }
@media (max-width: 768px) {
.app-shell { flex-direction: column; }
.sidebar { width: 100%; height: auto; position: relative; }
}
/* ==========================================================================
全局 Toast（xfToast / xfAlert）
—— 容器定位见文末「Toast 右下角」那段，这里只管外观
========================================================================== */
.xf-toast {
pointer-events: auto;
position: relative;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: var(--r);
padding: 12px 14px;
box-shadow: 0 6px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
display: flex; align-items: flex-start; gap: 10px;
font-size: var(--fz-sm);
line-height: 1.5;
animation: xf-toast-in .22s ease-out;
}
.xf-toast-info { border-left-color: var(--brand); }
.xf-toast-info .xf-toast-icon { color: var(--brand); }
.xf-toast-success { border-left-color: #10b981; }
.xf-toast-success .xf-toast-icon { color: #10b981; }
.xf-toast-warn { border-left-color: #f59e0b; background: linear-gradient(0deg, var(--surface), color-mix(in srgb, #fef3c7 30%, var(--surface))); }
.xf-toast-warn .xf-toast-icon { color: #d97706; }
.xf-toast-error { border-left-color: #ef4444; background: linear-gradient(0deg, var(--surface), color-mix(in srgb, #fee2e2 30%, var(--surface))); }
.xf-toast-error .xf-toast-icon { color: #ef4444; }
.xf-toast-icon {
flex-shrink: 0;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.xf-toast-body { flex: 1; min-width: 0; }
.xf-toast-title { font-weight: 600; margin-bottom: 2px; }
.xf-toast-msg { color: var(--text-soft); }
.xf-toast-msg:empty { display: none; }
.xf-toast-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.xf-toast-btn {
appearance: none;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font-size: var(--fz-xs); font-weight: 500;
padding: 6px 14px;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.xf-toast-btn:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }
.xf-toast-btn-primary {
background: var(--brand); color: var(--brand-fg); border-color: var(--brand);
}
.xf-toast-btn-primary:hover {
background: var(--brand); color: var(--brand-fg);
filter: brightness(0.95);
}
.xf-toast-btn-ghost { background: transparent; }
.xf-toast-btn-danger {
background: #ef4444; color: #fff; border-color: #ef4444;
}
.xf-toast-btn-danger:hover { filter: brightness(0.95); color: #fff; }
.xf-toast-close {
appearance: none;
background: transparent;
border: 0;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 4px;
margin-left: 4px;
flex-shrink: 0;
transition: color .15s, background .15s;
}
.xf-toast-close:hover { color: var(--text); background: var(--surface-2); }
.xf-toast-out { animation: xf-toast-out .22s ease-in forwards; }
@keyframes xf-toast-in {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes xf-toast-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-6px); }
}
[data-theme="dark"] .xf-toast-warn { background: linear-gradient(0deg, var(--surface), color-mix(in srgb, #422006 50%, var(--surface))); }
[data-theme="dark"] .xf-toast-error { background: linear-gradient(0deg, var(--surface), color-mix(in srgb, #450a0a 50%, var(--surface))); }
.container {
width: 100%; max-width: var(--container);
margin: 0 auto;
padding: 32px 24px 48px;
flex: 1;
}
.footer {
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: var(--fz-xs);
text-align: center;
padding: 24px;
}
/* ==========================================================================
Hero 条 — 考试试卷样式（index 首页）
- Subject：真实学校试卷 / 准考证 / 答题卡
- 元素：抬头信息表（双线分割）+ 题号 + 衬线标题 + 4 项成绩 + 红色印章
========================================================================== */
/* ── 试卷框（双线边框 + 印刷米黄纸感） ────────────────── */
.hero-strip.hero-modern {
margin: 0 0 32px;
padding: 28px 32px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
position: relative;
}
.hero-grid {
display: flex; flex-direction: column; gap: 28px;
}
.hero-meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface-2);
overflow: hidden;
}
.hero-ak {
padding: 14px 18px;
border-right: 1px solid var(--border);
}
.hero-ak:last-child { border-right: 0; }
.hero-ak-label {
display: block;
font-family: var(--font-mono);
font-size: var(--fz-2xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--text-muted);
margin-bottom: 6px;
}
.hero-ak-val {
display: block;
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
}
.hero-main {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
}
.hero-question { min-width: 0; }
.hero-stage {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 12px;
display: inline-flex; align-items: center; gap: 10px;
}
.hero-stage::before {
content: "";
display: inline-block;
width: 22px; height: 2px;
background: var(--brand);
}
.hero-title {
margin: 0 0 12px;
font-family: var(--font-serif);
font-size: 2.0625rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
}
.hero-sub {
margin: 0 0 18px;
color: var(--text-soft);
font-size: var(--fz);
line-height: 1.6;
max-width: 560px;
}
.hero-sub b {
color: var(--text);
font-weight: 600;
}
.hero-cta {
display: flex; gap: 10px;
margin-top: 4px;
}
.hero-foot {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.hero-meta-row {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fz-sm);
color: var(--text-soft);
}
.hero-tag {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--text-muted);
background: var(--surface-2);
padding: 3px 8px;
border-radius: var(--r-sm);
}
.hero-tag-val { font-weight: 600; color: var(--text); }
.hero-tag-sep { color: var(--text-muted); margin: 0 4px; }
/* ── KPI 成绩栏：4 等分（紧凑工业感） ────────────────── */
.kpi-row {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
border: 1px solid var(--border);
border-radius: var(--r);
background: var(--surface);
overflow: hidden;
}
.kpi {
display: flex; flex-direction: column; justify-content: center;
align-items: center;
padding: 18px 28px;
min-width: 96px;
border-right: 1px solid var(--border);
position: relative;
}
.kpi:last-child { border-right: 0; }
.kpi-num {
font-family: var(--font-mono);
font-size: 1.9375rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
font-variant-numeric: tabular-nums;
line-height: 1.0;
}
.kpi-label {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
color: var(--text-muted);
margin-top: 8px;
letter-spacing: 0.04em;
}
.kpi-warn .kpi-num { color: var(--warn); }
.kpi-warn::after {
content: "";
position: absolute;
top: 8px; right: 8px;
width: 12px; height: 12px;
background: var(--warn);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ── 暗色试卷纸 ──────────────────────────────────────── */
[data-theme="dark"] .hero-strip.hero-paper {
background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--brand) 8%) 100%);
border-color: rgba(59,130,246,0.35);
outline-color: rgba(59,130,246,0.20);
box-shadow: 0 0 0 1px rgba(59,130,246,0.10), 0 8px 24px rgba(0,0,0,0.3);
}
[data-theme="dark"] .hcell { border-color: var(--border-strong); }
[data-theme="dark"] .kpi {
background: color-mix(in srgb, var(--surface) 70%, transparent);
}
[data-theme="dark"] .paper-seal {
box-shadow: 0 0 16px rgba(232,120,100,0.25);
}
/* ── 响应式 ──────────────────────────────────────────── */
@media (max-width: 880px) {
.paper-header { grid-template-columns: repeat(2, 1fr); }
.hcell:nth-child(2) { border-right: 0; }
.hcell:nth-child(1), .hcell:nth-child(2) { border-bottom: 1px dashed var(--border-strong); }
.paper-body { grid-template-columns: 1fr; padding: 22px; }
.kpi-row { justify-self: start; }
.paper-footer { padding: 14px 22px; }
.paper-seal { width: 56px; height: 56px; margin-left: 0; }
.seal-text { font-size: 1.5625rem; }
}
@media (max-width: 560px) {
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.kpi { border-bottom: 1px solid var(--border); }
.kpi:nth-child(2) { border-right: 0; }
.kpi:nth-child(3), .kpi:nth-child(4) { border-bottom: 0; padding-top: 10px; }
.hero-title { font-size: 1.625rem; }
}
/* ── 老的 page-header / .hero-strip（其它模板用）保留 ── */
.page-header {
padding: 32px 0 24px;
border-bottom: 1px solid var(--border);
margin-bottom: 32px;
}
.page-header h1 {
margin: 0 0 6px;
font-size: var(--fz-2xl); font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.page-header p { margin: 0; color: var(--text-soft); font-size: var(--fz); }
.crumbs {
display: flex; align-items: center; gap: 6px;
font-size: var(--fz-sm); color: var(--text-muted);
margin-bottom: 12px;
}
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--text-muted); }
.meta-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 12px;
}
.meta-chip {
font-size: var(--fz-xs); color: var(--text-soft);
background: var(--surface-2);
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid var(--border);
}
/* ==========================================================================
区块标题
========================================================================== */
.section-title {
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: 700;
margin: 40px 0 20px;
letter-spacing: -.01em;
color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.section-title::before {
content: "";
width: 4px; height: 18px;
background: var(--brand);
border-radius: 2px;
flex-shrink: 0;
}
.section-title:first-child { margin-top: 0; }
.section-count {
font-size: var(--fz-xs);
font-weight: 500;
color: var(--text-muted);
margin-left: 8px;
padding: 2px 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
}
/* ── 考试列表（列形式表格） ───────────────────────────── */
.exam-table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.exam-thead {
display: grid;
grid-template-columns: 60px 1fr 160px 90px 100px 110px;
gap: 0;
padding: 12px 18px;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
font-size: var(--fz-xs);
font-weight: 600;
color: var(--text-soft);
letter-spacing: 0.04em;
}
.exam-th-no { text-align: center; }
.exam-th-num { text-align: center; }
.exam-th-act { text-align: center; }
.exam-tbody {
display: flex;
flex-direction: column;
}
.exam-row {
display: grid;
grid-template-columns: 60px 1fr 160px 90px 100px 110px;
gap: 0;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
align-items: center;
text-decoration: none;
color: inherit;
transition: background .12s, border-color .12s;
}
.exam-row:last-child { border-bottom: 0; }
.exam-row:hover {
background: var(--surface-2);
color: inherit;
}
.exam-row:hover .exam-td-title { color: var(--brand); }
.exam-row:hover .exam-go { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.exam-td-no {
text-align: center;
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.exam-td-title {
font-size: var(--fz);
font-weight: 500;
color: var(--text);
transition: color .12s;
}
.exam-td-sub {
font-size: var(--fz-sm);
color: var(--text-soft);
}
.exam-td-num { text-align: center; }
.exam-num-badge {
display: inline-block;
min-width: 40px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-family: var(--font-mono);
font-size: var(--fz-xs);
font-weight: 600;
text-align: center;
}
.exam-num-badge.purple {
background: var(--brand-soft-2); color: #1d4ed8;
}
.exam-num-badge.green {
background: var(--success-soft); color: #047857;
}
[data-theme="dark"] .exam-num-badge.purple { color: #93c5fd; }
[data-theme="dark"] .exam-num-badge.green { color: #6ee7b7; }
.exam-td-act { text-align: center; }
.exam-go {
display: inline-block;
padding: 5px 14px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 500;
color: var(--text-soft);
background: var(--surface);
transition: background .12s, color .12s, border-color .12s;
}
@media (max-width: 720px) {
.exam-thead { display: none; }
.exam-row {
grid-template-columns: 1fr auto;
gap: 6px 12px;
padding: 12px 14px;
}
.exam-td-no { display: none; }
.exam-td-sub,
.exam-td-num { font-size: var(--fz-xs); color: var(--text-muted); }
.exam-td-name { grid-column: 1 / -1; }
.exam-td-num { text-align: left; }
.exam-td-act { text-align: right; }
.exam-num-badge { padding: 2px 8px; }
}
/* ==========================================================================
卡片
========================================================================== */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 20px;
transition: border-color .15s, box-shadow .15s, transform .15s;
position: relative;
}
.card:hover { border-color: var(--border-strong); }
.card-title {
font-size: var(--fz); font-weight: 600;
color: var(--text); margin-bottom: 6px;
display: flex; align-items: center; gap: 8px;
}
.card-meta { font-size: var(--fz-sm); color: var(--text-muted); margin-bottom: 12px; }
.card-row { display: flex; gap: 8px; flex-wrap: wrap; }
.card-cta { display: none; }
.card-chip {
display: inline-flex; align-items: center;
font-size: var(--fz-xs);
padding: 2px 8px; border-radius: var(--r-pill);
background: var(--surface-2); color: var(--text-soft);
border: 1px solid var(--border);
}
/* 网格容器 */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ==========================================================================
大类卡（简洁版）
========================================================================== */
.l1-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 22px 24px;
display: flex; align-items: center; gap: 16px;
transition: border-color .15s, box-shadow .15s, transform .15s;
overflow: hidden;
}
.l1-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow);
transform: translateY(-1px);
}
.l1-icon {
width: 44px; height: 44px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
.l1-icon-57 { background: linear-gradient(135deg, #2563eb, #3b82f6); } /* 三类安管 - 蓝 */
.l1-icon-95 { background: linear-gradient(135deg, #ea580c, #f97316); } /* 建筑工程 - 橙 */
.l1-icon-96 { background: linear-gradient(135deg, #7c3aed, #8b5cf6); } /* 八大员 - 紫 */
.l1-icon-97 { background: linear-gradient(135deg, #dc2626, #ef4444); } /* 消防安全 - 红 */
.l1-icon-98 { background: linear-gradient(135deg, #d97706, #f59e0b); } /* 财会经济 - 黄 */
.l1-icon-99 { background: linear-gradient(135deg, #0891b2, #06b6d4); } /* 医药健康 - 青 */
.l1-icon-100 { background: linear-gradient(135deg, #be185d, #ec4899); } /* 职业资格 - 粉 */
.l1-icon-101 { background: linear-gradient(135deg, #059669, #10b981); } /* 安全生产 - 绿 */
.l1-icon-104 { background: linear-gradient(135deg, #475569, #64748b); } /* 特种作业 - 灰 */
.l1-icon-196 { background: linear-gradient(135deg, #4f46e5, #6366f1); } /* 其他 - 靛蓝 */
.l1-text { flex: 1; min-width: 0; }
.l1-name {
font-family: var(--font-display);
font-weight: 700; font-size: 1.09375rem; color: var(--text);
}
.l1-meta { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 4px; }
.l1-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border);
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.l1-card:hover .l1-arrow {
background: var(--brand); color: #fff; border-color: transparent;
transform: translateX(2px);
}
/* ==========================================================================
训练痕迹 / 统计卡
========================================================================== */
.trace-grid {
display: grid; gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.trace-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 22px 22px 20px;
text-decoration: none;
color: var(--text);
transition: border-color .15s, box-shadow .15s, transform .12s;
position: relative;
display: block;
}
.trace-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.trace-icon {
width: 36px; height: 36px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.18);
}
.trace-color-red .trace-icon { background: linear-gradient(135deg, #dc2626, #ef4444); }
.trace-color-yellow .trace-icon { background: linear-gradient(135deg, #d97706, #f59e0b); }
.trace-color-blue .trace-icon { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.trace-color-green .trace-icon { background: linear-gradient(135deg, #059669, #10b981); }
.trace-num {
font-size: 1.9375rem; font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1;
font-family: var(--font-mono);
}
.trace-label { color: var(--text-soft); font-size: var(--fz-sm); margin-top: 8px; }
.trace-meta {
font-size: var(--fz-xs); color: var(--text-muted);
margin-top: 12px;
}
/* ==========================================================================
训练入口
========================================================================== */
.training-entries {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.entry-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
position: relative;
display: flex; align-items: center; gap: 12px;
transition: border-color .15s, box-shadow .15s;
}
.entry-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.entry-card .icon {
width: 32px; height: 32px;
background: var(--brand-soft); color: var(--brand);
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.0625rem; flex-shrink: 0;
}
.entry-card .name { font-weight: 600; font-size: var(--fz); color: var(--text); }
.entry-card .desc { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 2px; }
.entry-card .arrow { display: none; }
.entry-strip {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
margin: 8px 0 24px;
}
.entry-strip-sep {
color: var(--text-muted);
font-size: var(--fz-xs);
margin: 0 4px 0 8px;
border-left: 1px solid var(--border);
padding-left: 12px;
height: 18px; line-height: 18px;
}
/* quick-start：开始训练 — 2 张大卡 */
.quick-start {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 8px 0 20px;
}
.qs-card {
display: flex; align-items: center; gap: 16px;
padding: 20px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-decoration: none;
color: var(--text);
transition: border-color .15s, box-shadow .15s, transform .05s;
min-height: 96px;
}
.qs-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow);
color: var(--text);
}
.qs-card:active { transform: translateY(1px); }
.qs-icon {
font-size: 2.5rem; line-height: 1;
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-soft); color: var(--brand);
border-radius: var(--r);
flex-shrink: 0;
}
.qs-body { flex: 1; min-width: 0; }
.qs-title { font-size: var(--fz-lg); font-weight: 600; color: var(--text); line-height: 1.3; }
.qs-desc { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 4px; }
.qs-go {
font-size: var(--fz-sm);
color: var(--text-muted);
font-weight: 500;
white-space: nowrap;
}
.qs-card:hover .qs-go { color: var(--brand); }
.qs-card.qs-primary {
background: var(--brand);
border-color: var(--brand);
color: var(--brand-fg);
}
.qs-card.qs-primary:hover {
background: var(--brand-hover);
border-color: var(--brand-hover);
color: var(--brand-fg);
box-shadow: 0 6px 20px rgba(91,91,214,0.25);
}
.qs-card.qs-primary .qs-icon {
background: rgba(255,255,255,0.18);
color: var(--brand-fg);
}
.qs-card.qs-primary .qs-desc { color: rgba(255,255,255,0.78); }
.qs-card.qs-primary .qs-go { color: rgba(255,255,255,0.85); }
.qs-card.qs-primary:hover .qs-go { color: var(--brand-fg); }
@media (max-width: 640px) {
.quick-start { grid-template-columns: 1fr; }
}
/* 题型 chip 行（纯文字，不用 emoji） */
.type-chips {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 24px;
padding: 0 2px;
}
.type-chips-label {
font-size: var(--fz-sm); color: var(--text-muted);
margin-right: 4px;
}
.type-chip {
display: inline-flex; align-items: center; justify-content: center;
padding: 6px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: var(--text-soft);
text-decoration: none;
transition: all .15s;
}
.type-chip:hover {
border-color: var(--brand);
color: var(--brand);
background: var(--brand-soft);
text-decoration: none;
}
/* 章节列表：扁平、清晰 */
.chap-list {
list-style: none; padding: 0; margin: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.chap-item {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-top: 1px solid var(--border);
transition: background .12s;
}
.chap-item:first-child { border-top: 0; }
.chap-item:hover { background: var(--surface-2); }
.chap-item.depth-1 { padding-left: 36px; }
.chap-item.depth-2 { padding-left: 54px; }
.chap-item.depth-3 { padding-left: 72px; }
.chap-item.depth-0 .chap-name { font-weight: 600; color: var(--text); }
.chap-name {
flex: 1; min-width: 0;
color: var(--text);
text-decoration: none;
font-size: var(--fz);
line-height: 1.4;
}
.chap-name:hover { color: var(--brand); text-decoration: none; }
.chap-meta {
display: flex; align-items: center; gap: 6px;
flex-shrink: 0;
}
.chap-qcount {
font-family: var(--font-mono);
font-size: var(--fz-xs);
background: var(--surface-2);
color: var(--text-soft);
padding: 3px 8px;
border-radius: var(--r-sm);
}
.chap-go { flex-shrink: 0; }
/* ==========================================================================
题目卡
========================================================================== */
.qcard {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 20px;
margin-bottom: 12px;
}
.qcard-head {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
font-size: var(--fz-sm);
}
.q-no { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fz-xs); }
.q-content {
color: var(--text); line-height: 1.65;
font-size: var(--fz); margin-bottom: 12px;
}
.q-options { list-style: none; padding: 0; margin: 8px 0; }
.q-options li {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
margin-bottom: 8px;
background: var(--surface);
font-size: var(--fz);
cursor: pointer;
transition: border-color .12s, background .12s, box-shadow .12s;
user-select: none;
}
.q-options.static li { cursor: default; }
.q-options li:hover {
border-color: var(--border-strong);
background: var(--surface-2);
}
.q-options li.selected {
border-color: var(--brand);
background: var(--brand-soft);
box-shadow: 0 0 0 1px var(--brand) inset;
}
.q-options li.selected .text { color: var(--text); font-weight: 500; }
.q-options.readonly li { cursor: default; }
.q-options li.correct {
border-color: var(--success);
background: var(--success-soft);
color: var(--text);
box-shadow: inset 3px 0 0 var(--success);
}
.q-options li.correct .text { color: var(--text); font-weight: 500; }
.q-options li.wrong {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--text);
box-shadow: inset 3px 0 0 var(--danger);
}
.q-options li.wrong .text { color: var(--text); font-weight: 500; }
.q-options .key {
font-family: var(--font-mono); font-size: var(--fz-xs);
background: var(--surface-2); color: var(--text-soft);
border-radius: var(--r-sm);
padding: 3px 8px; flex-shrink: 0;
font-weight: 600;
min-width: 22px; text-align: center;
border: 1px solid transparent;
}
.q-options li.selected .key {
background: var(--brand); color: var(--brand-fg);
border-color: var(--brand);
}
.q-options li.correct .key { background: var(--success); color: white; }
.q-options li.wrong .key { background: var(--danger); color: white; }
.q-options .text { flex: 1; line-height: 1.5; }
.q-content img,
.q-options .text img,
.float-q-content img,
.float-q-options .text img,
.float-q-ans img {
max-width: 100%; height: auto;
display: block; margin: 6px 0;
border-radius: var(--r-sm);
}
/* 题目 / 选项 / 解析里的内联小图（公式、下标、占位符）：
通常 ≤ 80px，目的是做下标或符号，必须留在文本流里。*/
.q-content img.xf-img-tiny,
.q-options .text img.xf-img-tiny,
.float-q-content img.xf-img-tiny,
.float-q-options .text img.xf-img-tiny,
.float-q-ans img.xf-img-tiny,
.explain-text img.xf-img-tiny {
display: inline-block !important;
vertical-align: middle;
max-height: 1.4em;
width: auto;
margin: 0 0.15em;
border-radius: 2px;
background: var(--surface-2);
}
/* 真实题图（图a/图b/结构图等）：保留块级布局，居中显示，给个外框 */
.q-content img.xf-img-figure,
.float-q-content img.xf-img-figure {
display: block;
margin: 10px auto;
max-width: min(520px, 100%);
max-height: 360px;
background: var(--surface-2);
padding: 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
/* 题型徽章（保留 5 套色彩，加深色适配） */
.q-type {
font-size: var(--fz-xs); font-weight: 500;
padding: 2px 8px; border-radius: var(--r-sm);
background: var(--surface-2); color: var(--text-soft);
border: 1px solid var(--border);
}
.q-type.t1 { color: var(--brand); background: var(--brand-soft); border-color: transparent; }
.q-type.t2 { color: #b45309; background: var(--warn-soft); border-color: transparent; }
.q-type.t3 { color: #be185d; background: rgba(236,72,153,0.10); border-color: transparent; }
.q-type.t4 { color: #047857; background: var(--success-soft); border-color: transparent; }
.q-type.t5 { color: #0e7490; background: rgba(14,165,233,0.10); border-color: transparent; }
[data-theme="dark"] .q-type.t2 { color: #fbbf24; }
[data-theme="dark"] .q-type.t3 { color: #f472b6; }
[data-theme="dark"] .q-type.t4 { color: #34d399; }
[data-theme="dark"] .q-type.t5 { color: #67e8f9; }
.ans-line { font-size: var(--fz-sm); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 10px; }
.ans-line b { color: var(--text); }
.explain-box {
margin-top: 10px; padding: 10px 14px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fz-sm); color: var(--text-soft);
}
.explain-box ul { padding-left: 18px; margin: 4px 0 0; }
.explain-empty {
margin-top: 4px;
color: var(--text-muted);
font-style: italic;
letter-spacing: 0.02em;
}
.explain-img { margin: 8px 0; text-align: center; }
.explain-img img {
max-width: 100%; height: auto;
display: block; margin: 0 auto;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface);
}
.explain-text { white-space: pre-wrap; line-height: 1.7; }
.badge-tiny { font-size: var(--fz-2xs); padding: 1px 6px; border-radius: var(--r-sm); margin-left: 6px; }
.badge-tiny.ok { background: var(--success-soft); color: var(--success); }
.badge-tiny.no { background: var(--danger-soft); color: var(--danger); }
.q-mark { margin-left: auto; font-weight: 600; font-size: var(--fz); }
.q-mark.correct { color: var(--success); }
.q-mark.wrong { color: var(--danger); }
/* ==========================================================================
统计卡 / Segmented Tabs / 复选卡片 / 收藏专属
========================================================================== */
.stat-row {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px; margin: 0 0 20px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 4px;
transition: border-color .15s;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-num {
font-size: 1.9375rem; font-weight: 600;
color: var(--text); line-height: 1.1;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
}
.stat-label { color: var(--text-soft); font-size: var(--fz-sm); }
.seg-tabs {
display: inline-flex;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 2px;
gap: 2px;
}
.seg {
appearance: none; background: transparent;
border: 0; cursor: pointer;
font-size: var(--fz-sm); color: var(--text-soft);
padding: 6px 12px; border-radius: var(--r-sm);
font-family: inherit;
transition: background .15s, color .15s;
}
.seg:hover { color: var(--text); }
.seg.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--border);
font-weight: 500;
}
.toolbar-right {
display: inline-flex; gap: 6px; align-items: center;
margin-left: auto;
}
.qcheck {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; cursor: pointer;
}
.qcheck input[type=checkbox] {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; margin: 0;
border: 1.5px solid var(--border-strong); border-radius: 4px;
background: var(--surface); cursor: pointer;
position: relative;
transition: all .15s;
}
.qcheck input[type=checkbox]:hover { border-color: var(--brand); }
.qcheck input[type=checkbox]:checked {
background: var(--brand); border-color: var(--brand);
}
.qcheck input[type=checkbox]:checked::after {
content: ''; position: absolute;
left: 4px; top: 1px;
width: 5px; height: 9px;
border: solid var(--brand-fg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.btn.ghost.danger { color: var(--danger); border-color: var(--border); }
.btn.ghost.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.qcard {
position: relative;
}
.qcard.fav-important {
border-color: var(--brand);
background: var(--brand-soft);
box-shadow: 0 0 0 1px var(--brand) inset, 0 1px 3px rgba(91,91,214,0.06);
}
[data-theme="dark"] .qcard.fav-important {
background: rgba(139,133,255,0.10);
}
.fav-star {
appearance: none; background: transparent; border: 0; cursor: pointer;
font-size: 1.25rem; line-height: 1; padding: 2px 4px;
margin-left: 6px; color: var(--text-muted);
transition: transform .15s, color .15s;
}
.fav-star:hover { transform: scale(1.15); }
.fav-star.on { color: #f59e0b; }
.fav-group {
background: transparent;
margin-bottom: 18px;
}
.fav-group-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 4px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
.fav-group-title {
font-size: var(--fz); font-weight: 600; color: var(--text);
}
.fav-note {
margin-top: 10px;
padding: 8px 12px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: var(--text-soft);
display: flex; align-items: center; gap: 8px;
border-left: 3px solid var(--brand);
}
.fav-note.empty {
background: transparent;
border: 1px dashed var(--border);
color: var(--text-muted);
justify-content: flex-end;
padding: 6px 10px;
border-left-width: 1px;
}
.fav-note-text { flex: 1; line-height: 1.5; }
.fav-note.editing { padding: 0; background: transparent; border: 0; }
.fav-note-editor { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.fav-note-editor textarea {
width: 100%;
font-family: inherit; font-size: var(--fz-sm);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 8px 10px;
color: var(--text);
resize: vertical;
min-height: 56px;
outline: none;
transition: border-color .15s;
}
.fav-note-editor textarea:focus { border-color: var(--brand); }
.fav-note-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-mini {
display: inline-flex; align-items: center; justify-content: center;
gap: 4px;
font-size: var(--fz-xs); font-weight: 500;
padding: 4px 10px; border-radius: var(--r-sm);
border: 1px solid var(--border);
background: var(--surface); color: var(--text-soft);
cursor: pointer;
font-family: inherit;
transition: background .15s, color .15s, border-color .15s;
}
.btn-mini:hover { color: var(--text); border-color: var(--border-strong); }
.btn-mini.primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
.btn-mini.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-mini.ghost { background: transparent; }
.btn-mini.danger { color: var(--danger); border-color: var(--border); }
.btn-mini.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
@media (max-width: 640px) {
.stat-row { grid-template-columns: 1fr; }
.toolbar-right { margin-left: 0; width: 100%; }
}
/* ==========================================================================
按钮系统 v2 —— 圆润、有质感、不用渐变
规则：大圆角 · 纯色不渐变 · 内高光 · 轻阴影 · hover 微上浮
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 7px;
font-size: var(--fz); font-weight: 600;
padding: 9px 18px;
border-radius: var(--r);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .12s ease;
white-space: nowrap;
}
.btn:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--text);
box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--brand-soft-2); outline-offset: 2px; }
.btn.sm {
padding: 6px 13px; font-size: var(--fz-xs); border-radius: var(--r-sm); gap: 5px;
}
.btn.lg,
.btn-lg {
padding: 13px 26px; font-size: var(--fz-lg); border-radius: var(--r-lg);
}
/* 主按钮：纯色 + 内高光 + 蓝阴影 */
.btn.primary,
.btn-primary {
background: var(--brand);
border-color: transparent;
color: var(--brand-fg);
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn.primary:hover,
.btn-primary:hover {
background: var(--brand-hover);
border-color: transparent;
color: var(--brand-fg);
box-shadow: 0 8px 22px rgba(0, 102, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .26);
transform: translateY(-1px);
}
/* 鬼灵按钮：无填充 */
.btn.ghost {
background: transparent; color: var(--text-soft);
border-color: var(--border);
box-shadow: none;
}
.btn.ghost:hover {
background: var(--surface-2); color: var(--text);
border-color: var(--border-strong);
box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
transform: translateY(-1px);
}
.btn.warn { background: var(--warn); color: #fff; border-color: transparent;
box-shadow: 0 2px 6px rgba(217, 119, 6, .22), inset 0 1px 0 rgba(255,255,255,.22); }
.btn.danger { background: var(--danger); color: #fff; border-color: transparent;
box-shadow: 0 2px 6px rgba(220, 38, 38, .22), inset 0 1px 0 rgba(255,255,255,.22); }
.btn.danger:hover { background: #b91c1c; color: #fff; }
.btn.warm {
background: var(--warn-soft); color: #b45309;
border-color: transparent;
}
[data-theme="dark"] .btn.warm { color: #fbbf24; }
/* 小型强调按钮 */
.btn-mini {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px; font-size: var(--fz-xs); font-weight: 600;
background: var(--brand); color: var(--brand-fg);
border: 1px solid transparent; border-radius: var(--r-sm);
box-shadow: 0 1px 4px rgba(0, 102, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
cursor: pointer;
transition: background .15s ease, box-shadow .15s ease, transform .12s ease,
border-color .15s ease, color .15s ease;
}
.btn-mini:hover {
background: var(--brand-hover); color: var(--brand-fg);
box-shadow: 0 5px 14px rgba(0, 102, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
transform: translateY(-1px);
}
.btn-mini.ghost {
background: var(--surface); color: var(--text-soft);
border-color: var(--border);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.btn-mini.ghost:hover {
background: var(--surface-2); color: var(--text);
border-color: var(--border-strong);
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
/* 登录 / 注册 大按钮：去掉渐变，改纯色 + 内高光 */
.btn-submit,
.auth-submit {
display: flex;
align-items: center; justify-content: center;
gap: 8px;
width: 100%;
margin: 18px 0 4px;
padding: 16px 20px;
font-size: 1rem;
font-weight: 600;
letter-spacing: .03em;
color: #fff;
background: var(--brand);
border: 0;
border-radius: var(--r-lg);
box-shadow:
0 2px 6px rgba(0, 102, 255, .20),
inset 0 1px 0 rgba(255, 255, 255, .22);
cursor: pointer;
transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
-webkit-appearance: none;
appearance: none;
}
.btn-submit:hover,
.auth-submit:hover {
background: var(--brand-hover);
transform: translateY(-1px);
box-shadow:
0 8px 22px rgba(0, 102, 255, .30),
inset 0 1px 0 rgba(255, 255, 255, .26);
color: #fff;
}
.btn-submit:active,
.auth-submit:active { transform: translateY(0); }
.btn-submit:disabled,
.auth-submit:disabled {
opacity: .65; cursor: not-allowed; transform: none;
}
[data-theme="dark"] .btn-submit,
[data-theme="dark"] .auth-submit {
box-shadow:
0 2px 6px rgba(59, 130, 246, .34),
inset 0 1px 0 rgba(255, 255, 255, .10);
}
/* ==========================================================================
表单
========================================================================== */
input, textarea, select {
font: inherit; color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 9px 12px;
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
label { display: block; font-size: var(--fz-sm); color: var(--text-soft); margin-bottom: 6px; }
label > input, label > select, label > textarea { margin-top: 4px; }
select { appearance: none; padding-right: 32px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.err { color: var(--danger); font-size: var(--fz-sm); }
/* ==========================================================================
登录 / 注册
========================================================================== */
.auth-page {
min-height: calc(100vh - var(--topbar-h));
display: flex; align-items: center; justify-content: center;
padding: 48px 20px;
background: var(--bg);
position: relative;
}
.auth-page::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 600px 300px at 50% 0%, var(--brand-soft) 0%, transparent 70%);
pointer-events: none;
}
.auth-back {
position: absolute; top: 20px; left: 24px;
color: var(--text-muted); font-size: var(--fz-sm);
}
.auth-back:hover { color: var(--text); }
.auth-card {
width: 100%; max-width: 380px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 32px;
box-shadow: var(--shadow-lg);
position: relative;
z-index: 1;
}
.auth-brand {
display: flex; align-items: center; gap: 10px;
font-size: 1.25rem; font-weight: 600;
margin-bottom: 6px;
}
.auth-brand span:first-child {
width: 36px; height: 36px;
border-radius: var(--r);
background: var(--brand-soft); color: var(--brand);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem;
}
.auth-tagline { color: var(--text-soft); margin: 0 0 24px; font-size: var(--fz); }
.auth-form label { font-size: var(--fz-sm); color: var(--text-soft); }
.auth-form .btn { width: 100%; margin-top: 8px; padding: 11px; font-size: var(--fz); }
.auth-foot { margin: 16px 0 0; font-size: var(--fz-sm); color: var(--text-muted); text-align: center; }
.auth-foot a { color: var(--brand); font-weight: 500; }
/* ── 新版邮箱登录（电光蓝现代风） ──────────────────────── */
.auth-modern .auth-card {
max-width: 420px;
padding: 36px 36px 28px;
}
.auth-modern .auth-brand { margin-bottom: 22px; }
.auth-brand-mark {
width: 42px; height: 42px;
border-radius: var(--r-sm);
background: var(--brand-soft);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.auth-brand-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.auth-brand-tag { font-size: var(--fz-xs); color: var(--text-muted); margin-top: 2px; letter-spacing: 0.04em; }
.auth-h1 {
font-size: 1.5625rem; font-weight: 700;
margin: 0 0 6px;
letter-spacing: -0.02em;
color: var(--text);
}
.auth-sub { color: var(--text-soft); font-size: var(--fz-sm); margin: 0 0 22px; line-height: 1.5; }
.auth-modern .auth-form .field { margin-bottom: 16px; }
.auth-modern .auth-form .field-label {
display: block;
font-size: var(--fz-xs); font-weight: 500;
color: var(--text-soft);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.auth-modern .auth-form .field-label .field-forgot {
float: right;
font-size: var(--fz-xs);
font-weight: 400;
color: var(--brand);
text-decoration: none;
letter-spacing: 0;
}
.auth-modern .auth-form .field-label .field-forgot:hover { text-decoration: underline; }
.auth-modern .auth-form .field-input {
display: flex; align-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 0 12px;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-modern .auth-form .field-input:focus-within {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.auth-modern .auth-form .field-input-flex { flex: 1; min-width: 0; }
.auth-modern .auth-form .field-icon {
color: var(--text-muted);
flex-shrink: 0;
display: inline-flex;
margin-right: 8px;
}
.auth-modern .auth-form .field-input input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 11px 0;
font-size: var(--fz);
color: var(--text);
outline: none;
font-family: inherit;
letter-spacing: 0.02em;
}
.auth-modern .auth-form .field-input input::placeholder { color: var(--text-muted); }
.auth-modern .auth-form .field-row { display: flex; gap: 8px; align-items: stretch; }
.btn-send {
flex-shrink: 0;
appearance: none;
background: var(--brand);
color: var(--brand-fg);
border: 0;
border-radius: var(--r-sm);
padding: 0 16px;
height: 44px; /* 与 field-input 等高 */
font-size: var(--fz-sm); font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background .15s, filter .15s, transform .1s;
}
.btn-send:hover { filter: brightness(1.05); }
.btn-send:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; filter: none; }
.btn-send.sending { background: var(--surface-2); color: var(--text-muted); }
.field-hint {
font-size: var(--fz-xs);
color: var(--text-muted);
margin-top: 6px;
line-height: 1.4;
}
/* 邮箱实时体检的结果提示 */
.field-hint.is-ok { color: var(--success, #16a34a); }
.field-hint.is-bad { color: var(--danger); }
.auth-err {
font-size: var(--fz-sm);
color: var(--danger);
background: var(--danger-soft);
border-radius: var(--r-sm);
padding: 8px 12px;
margin: 8px 0 12px;
display: none;
border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.auth-err.on { display: block; }
/* .auth-submit 样式在 按钮区 统一定义（见 .btn-submit, .auth-submit） */
.auth-divider {
display: flex; align-items: center; gap: 12px;
margin: 18px 0 14px;
color: var(--text-muted);
font-size: var(--fz-xs);
letter-spacing: 0.04em;
}
.auth-divider::before, .auth-divider::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-help {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
font-size: var(--fz-xs);
color: var(--text-soft);
}
.auth-help-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.auth-help-row svg { color: var(--text-muted); flex-shrink: 0; }
.auth-help-row a { color: var(--brand); font-weight: 500; }
.auth-foot { font-size: var(--fz-sm); }
.auth-foot-sep { margin: 0 6px; color: var(--text-muted); }
.auth-foot-legacy { color: var(--text-muted); font-weight: 400; }
.auth-foot-legacy:hover { color: var(--text); }
/* ==========================================================================
答题 / 考试
========================================================================== */
.quiz-wrap { padding: 0; }
.quiz-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
.quiz-title h1 { font-size: var(--fz-xl); font-weight: 600; margin: 0 0 4px; }
.quiz-title p { margin: 0; color: var(--text-soft); font-size: var(--fz-sm); }
.quiz-progress {
display: flex; align-items: center; gap: 12px;
font-size: var(--fz-sm); color: var(--text-soft);
}
.timer {
font-family: var(--font-mono);
background: var(--surface-2); color: var(--text);
padding: 4px 10px; border-radius: var(--r-sm);
border: 1px solid var(--border);
}
.progress-bar {
width: 100%; height: 4px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden; margin-bottom: 16px;
}
.progress-bar-fill {
/* 必须给默认宽度：否则空题组时 JS 不会赋值，block 元素被撑成 100%，
看起来像「已经做完了」 */
width: 0;
height: 100%; background: var(--brand);
border-radius: inherit;
transition: width .25s ease-out;
}
.qcard-wrap { margin-bottom: 16px; }
.qnav {
display: flex; align-items: center; gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--border);
margin-top: 8px;
flex-wrap: wrap;
}
.qnav-extra { margin-left: auto; display: flex; gap: 8px; }
/* 考试：左卡片导航 */
.exam-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
@media (max-width: 720px) {
.exam-grid { grid-template-columns: 1fr; }
}
.exam-cardnav {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px;
position: sticky; top: calc(var(--topbar-h) + 16px);
max-height: calc(100vh - var(--topbar-h) - 32px);
overflow-y: auto;
}
.cn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-cell, .cbtn {
width: 30px; height: 30px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text-soft);
font-size: var(--fz-xs);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
font-family: var(--font-mono);
text-decoration: none;
transition: all .15s;
}
.cn-cell:hover, .cbtn:hover { border-color: var(--border-strong); }
.cn-cell.answered, .cbtn.answered { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.cn-cell.marked, .cbtn.marked { background: var(--warn-soft); color: #b45309; border-color: transparent; }
[data-theme="dark"] .cn-cell.marked, [data-theme="dark"] .cbtn.marked { color: #fbbf24; }
.cn-cell.current, .cbtn.current { background: var(--brand); color: var(--brand-fg); border-color: transparent; }
/* exam.js 用的 .cbtn 系列（兼容旧 class 名） */
.cardnav-title {
font-size: var(--fz-sm); font-weight: 600;
color: var(--text);
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.cardnav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 6px;
}
.cardnav-legend {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 12px; padding-top: 10px;
border-top: 1px solid var(--border);
font-size: var(--fz-xs); color: var(--text-soft);
}
.cardnav-legend .dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 2px;
margin-right: 4px;
vertical-align: -1px;
}
.cardnav-legend .dot.answered { background: var(--brand); }
.cardnav-legend .dot.marked { background: var(--warn); }
/* 答题卡题型分组标题（同题型连续，分组间留白） */
.cardnav-group {
grid-column: 1 / -1;
display: flex; align-items: baseline; gap: 8px;
margin: 6px 0 2px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
.cardnav-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cardnav-group-label {
font-size: var(--fz-xs); font-weight: 600;
color: var(--text-soft);
}
.cardnav-group-count {
font-size: var(--fz-2xs); color: var(--text-muted);
font-family: var(--font-mono);
}
/* 简答题 textarea */
.essay-input {
font: inherit; color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 12px 14px;
width: 100%;
resize: vertical;
font-family: inherit;
line-height: 1.6;
transition: border-color .15s, box-shadow .15s;
}
.essay-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.exam-qarea { min-width: 0; }
/* ==========================================================================
表格
========================================================================== */
.stat-table {
width: 100%; border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
}
.stat-table th, .stat-table td {
text-align: left; padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-size: var(--fz);
}
.stat-table th {
background: var(--surface-2);
color: var(--text-soft); font-weight: 500;
font-size: var(--fz-sm);
}
.stat-table tr:last-child td { border-bottom: 0; }
.stat-table td.muted { color: var(--text-muted); }
/* ==========================================================================
章节树
========================================================================== */
.tree { list-style: none; padding: 0; margin: 0; }
.tree li {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.tree li:last-child { border-bottom: 0; }
.tree li.depth-0 { font-weight: 600; }
.tree li.depth-1 { padding-left: 28px; }
.tree li.depth-2 { padding-left: 42px; color: var(--text-soft); }
.tree li.depth-3 { padding-left: 56px; color: var(--text-soft); font-size: var(--fz-sm); }
.tree li a:hover { color: var(--brand); }
/* ==========================================================================
杂项
========================================================================== */
.empty {
text-align: center; color: var(--text-muted);
padding: 48px 0;
font-size: var(--fz);
}
.muted { color: var(--text-muted); }
.small { font-size: var(--fz-sm); }
.qlist { margin-bottom: 16px; }
.pager {
display: flex; align-items: center; justify-content: center;
gap: 12px;
margin-top: 16px;
padding: 16px;
}
/* ── 题目搜索抽屉（侧栏内联输入 + 主区覆盖层） ───────────── */
.xf-search-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
left: var(--sidebar-w, 240px);
background: var(--surface);
display: flex; flex-direction: column;
z-index: 200;
box-shadow: -16px 0 40px rgba(15, 23, 42, .12);
animation: xf-drawer-in .22s ease-out;
}
/* 关键：[hidden] UA 默认 display:none 被 .xf-search-drawer 的 display:flex 覆盖，
必须显式提高优先级，否则 drawer.hidden = true 不会真的隐藏 */
.xf-search-drawer[hidden] { display: none !important; }
.xf-search-drawer-mask[hidden] { display: none !important; }
@keyframes xf-drawer-in {
from { transform: translateX(8px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
[data-sidebar="collapsed"] .xf-search-drawer { left: var(--sidebar-w-min, 64px); }
.xf-search-drawer-mask {
position: fixed;
top: 0; right: 0; bottom: 0;
left: var(--sidebar-w, 240px);
background: rgba(2, 6, 23, .25);
z-index: 195;
animation: xf-mask-in .18s ease-out;
}
[data-sidebar="collapsed"] .xf-search-drawer-mask { left: var(--sidebar-w-min, 64px); }
@keyframes xf-mask-in { from { opacity: 0; } to { opacity: 1; } }
.xf-search-drawer-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 22px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.xf-search-drawer-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fz); font-weight: 600;
color: var(--text);
}
.xf-search-drawer-title svg { color: var(--brand); }
.xf-search-drawer-meta {
flex: 1; min-width: 0;
font-size: var(--fz-xs); color: var(--text-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xf-search-drawer-close {
appearance: none; border: 0;
width: 30px; height: 30px;
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text-soft);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .12s, color .12s;
}
.xf-search-drawer-close:hover { background: var(--brand-soft); color: var(--brand); }
.xf-search-drawer-list {
flex: 1; min-height: 0;
overflow-y: auto;
padding: 18px 22px;
display: flex; flex-direction: column; gap: 14px;
}
.xf-search-drawer-foot {
display: flex; align-items: center; justify-content: center;
gap: 12px;
padding: 14px 22px;
border-top: 1px solid var(--border);
background: var(--surface-2);
flex-shrink: 0;
}
/* 抽屉内的搜索结果卡片（继承 .float-card 风格，复用 .q-fav-btn） */
.xf-search-card { padding: 18px 22px; }
.xf-search-card-head {
display: flex; align-items: center; gap: 10px;
font-size: var(--fz-xs);
color: var(--text-soft);
margin-bottom: 10px;
flex-wrap: wrap;
}
.xf-search-card-source {
color: var(--text-muted);
font-size: var(--fz-xs);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.xf-search-card-content {
font-size: var(--fz); line-height: 1.7;
color: var(--text);
margin-bottom: 10px;
word-break: break-word;
}
.xf-search-card-options {
list-style: none; padding: 8px 12px; margin: 0 0 12px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
}
.xf-search-card-options li {
display: flex; gap: 10px;
padding: 3px 0;
color: var(--text-soft);
}
.xf-search-card-options .opt-key {
font-family: var(--font-mono);
color: var(--brand); font-weight: 600;
width: 18px; flex-shrink: 0;
}
.xf-search-card-actions { display: flex; gap: 8px; }
/* 搜索结果：点题干查看答案与解析 */
.xf-search-card-content.is-clickable { cursor: pointer; }
.xf-search-card-content.is-clickable:hover { color: var(--brand); }
.xf-search-card-options li.is-correct {
color: var(--text);
font-weight: 600;
background: rgba(22, 163, 74, .10);
border-radius: 5px;
padding-left: 6px; margin-left: -6px;
}
.xf-search-card-options li.is-correct .opt-key { color: #15803d; }
.xf-search-answer {
margin: 0 0 12px;
padding: 13px 15px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.xf-sa-row {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.xf-sa-row + .xf-sa-row { margin-top: 10px; }
.xf-sa-label {
font-size: var(--fz-xs); color: var(--text-muted);
padding-top: 2px;
}
.xf-sa-val {
font-family: var(--font-mono);
font-size: var(--fz-sm); font-weight: 700;
color: #15803d;
word-break: break-word;
}
.xf-sa-text { font-size: var(--fz-xs); line-height: 1.75; color: var(--text-soft); }
.xf-sa-text ul { margin: 0; padding-left: 18px; }
.xf-sa-text li { margin-bottom: 4px; }
.xf-search-loading-inline { font-size: var(--fz-xs); color: var(--text-muted); }
/* 收藏按钮（xf-search-card 复用） */
.q-fav-btn {
margin-left: auto;
appearance: none; border: 1px solid var(--border);
background: var(--surface);
color: var(--text-soft);
font: inherit; font-size: var(--fz-xs);
padding: 4px 10px; border-radius: var(--r-pill);
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.q-fav-btn:hover { border-color: var(--warn); color: var(--warn); }
.q-fav-btn.on { background: var(--warn); color: white; border-color: var(--warn); }
/* 抽屉打开时锁定主区滚动 */
body.xf-search-open { overflow: hidden; }
/* 小屏：抽屉全宽 */
@media (max-width: 720px) {
.xf-search-drawer, .xf-search-drawer-mask { left: 0; }
}
/* ── 抽屉内部状态视图（tip / loading / empty） ───────── */
.xf-search-tip, .xf-search-loading, .xf-search-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 80px 32px;
color: var(--text-muted);
gap: 14px;
min-height: 320px;
}
.xf-search-tip svg, .xf-search-loading svg, .xf-search-empty svg {
color: var(--text-muted);
opacity: .55;
}
.xf-search-tip-title, .xf-search-empty-title {
font-size: 1rem;
color: var(--text-soft);
font-weight: 500;
}
.xf-search-tip-sub, .xf-search-empty-sub {
font-size: var(--fz-sm);
color: var(--text-muted);
display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center;
}
.xf-search-empty { color: var(--text-soft); }
.xf-spinner {
width: 28px; height: 28px;
border: 2.5px solid var(--border);
border-top-color: var(--brand);
border-radius: 50%;
animation: xf-spin .8s linear infinite;
}
@keyframes xf-spin { to { transform: rotate(360deg); } }
/* 抽屉内 chip 按钮（tip / empty 共用） */
.search-hint-chip {
appearance: none;
padding: 5px 11px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--text-soft);
font: inherit; font-size: var(--fz-xs);
cursor: pointer;
transition: border-color .12s, color .12s, background .12s;
}
.search-hint-chip:hover {
border-color: var(--brand);
color: var(--brand);
background: var(--brand-soft);
}
mark.xf-mark {
background: linear-gradient(transparent 60%, #fef08a 60%);
color: inherit; padding: 0 1px;
font-weight: 500;
}
[data-theme="dark"] mark.xf-mark {
background: linear-gradient(transparent 60%, #facc15 60%);
color: #facc15;
}
.result-card { padding: 0; }
/* 考试结果 — 3 张 trace-card 横向 */
.score-grid {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
margin-bottom: 24px;
}
.score-grid .trace-card .num {
font-size: 2rem; /* 比默认的 trace-card (28px) 略大 */
}
/* 旧 score-card / big-num 兼容旧模板，已不推荐使用 */
.score-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 24px;
text-align: center;
}
.big-num {
font-size: 2rem; font-weight: 600;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--brand);
margin: 8px 0;
}
.badge-count {
display: inline-block;
background: var(--danger); color: white;
font-size: var(--fz-2xs); line-height: 1;
padding: 2px 5px; border-radius: var(--r-pill);
margin-left: 4px;
min-width: 16px;
text-align: center;
}
/* ==========================================================================
滚动条 / 可访问性
========================================================================== */
@media (max-width: 720px) {
.topbar { padding: 0 16px; gap: 8px; }
.mainnav { gap: 0; }
.mainnav a { padding: 6px 8px; }
.container { padding: 24px 16px 32px; }
.page-header h1 { font-size: var(--fz-xl); }
.l1-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* 旧 center-hero 兼容：转为 page-header 样式 */
.center-hero {
padding: 32px 0 24px;
border-bottom: 1px solid var(--border);
margin-bottom: 32px;
}
.center-hero-content { color: var(--text); }
.center-hero h1 { color: var(--text); }
.center-hero p { color: var(--text-soft); }
.center-hero.violet, .center-hero.cyan { background: transparent; }
/* ==========================================================================
悬浮卡片（floating card）
- 多层叠加阴影营造漂浮感
- hover 上升 + 阴影加深
- 用于：考试结果页、错题本等"卡片列表"页面
========================================================================== */
/* ── 基础悬浮卡 ──────────────────────────────── */
.float-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 20px 22px;
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 12px rgba(0,0,0,0.04),
0 12px 32px rgba(0,0,0,0.04);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.float-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(0,0,0,0.05),
0 8px 24px rgba(0,0,0,0.06),
0 24px 56px rgba(0,0,0,0.06);
}
[data-theme="dark"] .float-card {
box-shadow:
0 1px 2px rgba(0,0,0,0.45),
0 4px 12px rgba(0,0,0,0.32),
0 12px 32px rgba(0,0,0,0.20);
border-color: rgba(255,255,255,0.06);
background: #15171f;
}
[data-theme="dark"] .float-card:hover {
box-shadow:
0 2px 4px rgba(0,0,0,0.5),
0 8px 24px rgba(0,0,0,0.45),
0 24px 56px rgba(0,0,0,0.30);
border-color: rgba(255,255,255,0.10);
}
/* ── 错题 hero（顶部）──────────────────────── */
.result-hero {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 32px;
margin: 4px 0 24px;
}
.result-hero-body { flex: 1; min-width: 0; }
.crumbs {
font-size: var(--fz-xs); color: var(--text-muted);
margin-bottom: 10px;
}
.crumbs a { color: var(--text-soft); }
.crumbs a:hover { color: var(--brand); }
.crumbs .sep { margin: 0 6px; color: var(--text-muted); }
.result-title {
margin: 0;
font-size: 1.9375rem; font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
}
.result-sub {
margin: 6px 0 0;
font-size: var(--fz-sm);
color: var(--text-soft);
}
.result-hero-small .result-title { font-size: 1.5625rem; }
/* ── 大分数环（conic gradient 进度环）─────── */
.result-score { flex-shrink: 0; }
.score-ring {
width: 120px; height: 120px;
border-radius: 50%;
background: conic-gradient(var(--brand) 0deg 360deg, var(--surface-2) 360deg 360deg);
display: grid; place-items: center;
position: relative;
box-shadow:
0 4px 16px rgba(0,0,0,0.06),
0 12px 32px rgba(0,0,0,0.04);
transition: background .4s;
}
.score-ring::before {
content: "";
position: absolute; inset: 8px;
background: var(--surface);
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.score-num {
position: relative;
font-size: 2.5rem; font-weight: 700;
font-family: var(--font-mono);
color: var(--brand);
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
}
.score-num::after {
content: "%";
font-size: var(--fz); font-weight: 500;
margin-left: 2px;
}
.score-label {
position: relative;
margin-top: 4px;
font-size: var(--fz-2xs);
letter-spacing: 0.06em;
color: var(--text-muted);
}
/* ── 3 列 KPI 悬浮卡 ──────────────────────── */
.float-row {
display: grid; gap: 16px;
margin-bottom: 24px;
}
.float-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .float-3 { grid-template-columns: 1fr; } }
.float-card-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px;
}
.float-card-icon {
width: 36px; height: 36px;
border-radius: var(--r-sm);
display: grid; place-items: center;
color: #fff;
flex-shrink: 0;
}
.float-card-title {
font-size: var(--fz-sm);
color: var(--text-soft);
font-weight: 500;
letter-spacing: 0.02em;
}
.float-card-num {
font-size: 2.5rem; font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
color: var(--text);
}
.float-card-unit {
font-size: 1.0625rem; font-weight: 500;
color: var(--text-muted);
margin-left: 2px;
}
.float-card-meta {
margin-top: 6px;
font-size: var(--fz-xs);
color: var(--text-muted);
}
/* 3 种 KPI 配色 */
.float-card-correct .float-card-icon { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 2px 8px rgba(16,185,129,0.30); }
.float-card-total .float-card-icon { background: linear-gradient(135deg, #0ea5e9, #38bdf8); box-shadow: 0 2px 8px rgba(14,165,233,0.30); }
.float-card-acc .float-card-icon { background: linear-gradient(135deg, #8b5cf6, #a78bfa); box-shadow: 0 2px 8px rgba(139,92,246,0.30); }
.float-card-warn .float-card-icon { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 2px 8px rgba(239,68,68,0.30); }
.float-card-ok .float-card-icon { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 2px 8px rgba(16,185,129,0.30); }
/* ── 各题型正确率（按行进度条）───────────── */
.float-section {
margin-bottom: 28px;
}
.float-section-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 12px;
}
.qtype-list { display: flex; flex-direction: column; gap: 10px; }
.qtype-row {
display: grid;
grid-template-columns: 1fr 280px 56px;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
transition: border-color .15s, box-shadow .15s;
}
.qtype-row:hover {
border-color: var(--border-strong);
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.qtype-row-name {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.qtype-row-stat {
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.qtype-row-bar {
height: 6px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.qtype-row-fill {
height: 100%; border-radius: var(--r-pill);
transition: width .4s;
}
.qtype-row-pct {
font-family: var(--font-mono);
font-size: var(--fz); font-weight: 600;
text-align: right;
color: var(--text);
font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
.qtype-row { grid-template-columns: 1fr; }
.qtype-row-bar { width: 100%; }
.qtype-row-pct { text-align: left; }
}
/* ── 答题详情栈 / 错题列表栈 ─────────────── */
.float-stack {
display: flex; flex-direction: column; gap: 14px;
margin-bottom: 24px;
}
/* ── 题目悬浮卡（共享 exam_result / wrongbook） ── */
.float-q {
padding: 18px 22px;
}
.float-q-head {
display: flex; align-items: center; gap: 10px;
font-size: var(--fz-xs);
color: var(--text-muted);
margin-bottom: 12px;
flex-wrap: wrap;
}
.float-q-meta { font-size: var(--fz-xs); color: var(--text-muted); }
.float-q-time {
margin-left: auto;
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.float-q-mark {
display: inline-grid; place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
color: #fff;
}
.float-q-mark.float-q-correct { background: linear-gradient(135deg, #10b981, #34d399); }
.float-q-mark.float-q-wrong { background: linear-gradient(135deg, #ef4444, #f87171); }
.float-q-content {
font-size: var(--fz-sm);
line-height: 1.65;
color: var(--text);
margin-bottom: 10px;
}
/* 错的题目红色左边框 */
.float-q.float-q-wrong {
border-left: 3px solid #ef4444;
padding-left: 19px;
}
.float-q.float-q-correct {
border-left: 3px solid #10b981;
padding-left: 19px;
}
/* 答案对比行 */
.float-q-ans {
display: flex; flex-wrap: wrap;
gap: 24px;
padding: 12px 14px;
margin-top: 10px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
}
.float-q-ans .ans-row {
display: flex; align-items: center; gap: 8px;
}
.ans-val {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
.ans-val.ok b { color: var(--success); font-weight: 700; }
.ans-val.no { color: var(--danger); font-weight: 600; }
.ans-val.warn { color: var(--warn, #d97706); font-weight: 600; }
/* ══════════════════════════════════════════════════════════
考试计分 v2（见《考试计分规则.txt》）
══════════════════════════════════════════════════════════ */
/* 考试页：试卷结构 chips */
.exam-plan-line {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
font-size: var(--fz-xs);
}
.exam-plan-label {
color: var(--text-muted);
font-weight: 600;
}
.exam-plan-chip {
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 600;
font-family: var(--font-mono);
background: var(--surface-2);
color: var(--text-soft);
border: 1px solid var(--border);
}
.exam-plan-chip.t1 { background: rgba(59, 130, 246, .12); color: #2563eb; border-color: transparent; }
.exam-plan-chip.t2 { background: rgba(139, 92, 246, .12); color: #7c3aed; border-color: transparent; }
.exam-plan-chip.t5 { background: rgba(16, 185, 129, .12); color: #059669; border-color: transparent; }
.exam-plan-chip.t3 { background: rgba(245, 158, 11, .12); color: #d97706; border-color: transparent; }
.exam-plan-chip.t4 { background: rgba(239, 68, 68, .12); color: #dc2626; border-color: transparent; }
.exam-plan-hint {
color: var(--text-muted);
font-size: var(--fz-xs);
}
/* 考试页：卷面信息条 */
.exam-score-line {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
font-size: var(--fz-xs);
color: var(--text-soft);
}
.exam-score-line b { font-family: var(--font-mono); color: var(--text); font-weight: 700; }
.exam-score-line .sep { color: var(--text-muted); }
/* ══ 模拟考试中心：标题 → 差距尺 → 开考 → 成绩表 ═══════════════════ */
/* 页头：与练习页同一套 .quiz-head / .quiz-title / .quiz-progress，
这里只补差异（凭证编号与会员点） */
.quiz-progress .ebt-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--success); display: inline-block;
margin-right: 5px; vertical-align: middle;
}
.quiz-progress a { color: var(--brand); font-weight: 600; text-decoration: none; }
.quiz-progress a:hover { text-decoration: underline; }
.quiz-progress b { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
/* ── 差距尺：你最好的成绩 vs 合格线 ── */
.gap-scale { margin: 18px 0 20px; }
.gap-row {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin-bottom: 12px;
}
.gap-label {
font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .16em;
color: var(--text-muted);
}
.gap-score {
font-family: var(--font-mono);
font-size: 1.25rem; font-weight: 700; line-height: 1;
letter-spacing: -.02em; color: var(--text);
font-variant-numeric: tabular-nums;
}
.gap-score.is-empty { color: var(--text-muted); font-weight: 500; font-size: 1rem; }
.gap-unit { font-size: var(--fz-xs); color: var(--text-muted); }
.gap-date {
font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--text-muted);
padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px;
}
.gap-msg { margin-left: 16px; font-size: var(--fz-xs); color: var(--text-soft); }
.gap-msg b {
font-family: var(--font-mono); font-size: var(--fz-sm); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.gap-msg b.warn { color: var(--warn); }
.gap-msg b.ok { color: var(--success); }
.gap-track {
position: relative; height: 3px;
background: var(--border-strong); border-radius: 2px;
}
.gap-tick {
position: absolute; top: -8px; width: 1px; height: 19px;
background: var(--warn); z-index: 2;
}
.gap-conn {
position: absolute; top: -2px; height: 7px; border-radius: 2px; z-index: 1;
}
.gap-conn.is-short { background: var(--warn); }
.gap-conn.is-ok { background: var(--success); }
.gap-dot {
position: absolute; top: 50%; width: 13px; height: 13px;
margin-left: -6.5px; margin-top: -6.5px; border-radius: 50%;
}
.gap-dot.is-short { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.gap-dot.is-ok { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.gap-dot.is-none { background: var(--bg); border: 2px solid var(--border-strong); }
.gap-foot {
display: flex; justify-content: space-between; gap: 16px;
margin-top: 9px;
font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--text-muted);
}
/* ── 齿孔撕口 ── */
.exam-perf {
position: relative;
height: 11px;
margin: 4px 0 20px;
}
.exam-perf::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0; height: 11px;
background-image: radial-gradient(circle at 7px 6px, rgba(10, 10, 10, .12) 4.5px, transparent 4.7px);
background-size: 14px 11px;
background-repeat: repeat-x;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .95));
}
[data-theme="dark"] .exam-perf::before {
background-image: radial-gradient(circle at 7px 6px, rgba(255, 255, 255, .13) 4.5px, transparent 4.7px);
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
.exam-perf::after {
content: "";
position: absolute;
left: 0; right: 0; top: 10px;
border-top: 1px dashed var(--border);
}
/* ── 字段区（证件字段格） ── */
.exam-ticket { }
.exam-fields {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-bottom: 22px;
}
.exam-field {
padding: 0 20px;
border-left: 1px solid var(--border);
display: flex; flex-direction: column; gap: 6px;
}
.exam-field:first-child { padding-left: 0; border-left: 0; }
.exam-field > span {
font-size: var(--fz-2xs); font-weight: 600; letter-spacing: .1em;
color: var(--text-muted);
}
.exam-field > b {
display: flex; align-items: baseline; gap: 3px;
font-family: var(--font-mono);
font-size: 1.25rem; font-weight: 700; line-height: 1;
letter-spacing: -.02em; color: var(--text);
font-variant-numeric: tabular-nums;
}
.exam-field > b i {
font-style: normal; font-family: var(--font);
font-size: var(--fz-xs); font-weight: 400; color: var(--text-muted);
}
.exam-field.is-pass > b { color: var(--brand); }
/* ── 开考行动 ── */
.exam-actions {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
margin-top: 24px;
}
.eab-field { display: inline-flex; align-items: center; gap: 10px; }
.eab-field label { font-size: var(--fz-xs); color: var(--text-soft); white-space: nowrap; }
.eab-field select {
font-family: var(--font); font-size: var(--fz-sm); color: var(--text);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
padding: 9px 12px; min-width: 112px;
cursor: pointer;
}
.eab-field select:focus { outline: 2px solid var(--brand-soft-2); outline-offset: 1px; border-color: var(--brand); }
.exam-form { display: inline-flex; align-items: center; gap: 12px; }
.exam-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font); font-size: var(--fz); font-weight: 600;
letter-spacing: .02em;
color: var(--brand-fg);
background: var(--brand);
border: 0; border-radius: var(--r-sm);
padding: 12px 26px;
cursor: pointer;
transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
box-shadow: 0 8px 22px rgba(0, 102, 255, .26);
}
.exam-cta:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,102,255,.34); }
.exam-cta:active { transform: translateY(0); }
.exam-cta:disabled { opacity: .62; cursor: default; transform: none; box-shadow: none; }
.exam-cta:focus-visible { outline: 3px solid var(--brand-soft-2); outline-offset: 2px; }
.exam-back { font-size: var(--fz-xs); color: var(--text-soft); text-decoration: none; }
.exam-back:hover { color: var(--brand); }
#exam-err { font-size: var(--fz-xs); color: var(--danger); }
.exam-scale-info { font-size: var(--fz-xs); line-height: 1.6; color: var(--warn); }
.exam-scale-info a { color: var(--brand); }
.exam-notes {
margin: 24px 0 0;
font-size: var(--fz-xs); line-height: 1.7; color: var(--text-muted);
}
/* ── 成绩表 ── */
.exam-transcript { margin-top: 44px; scroll-margin-top: 20px; }
.exam-transcript-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
padding-bottom: 12px;
border-bottom: 1px solid var(--text);
margin-bottom: 4px;
}
.exam-block-title {
margin: 0;
font-family: var(--font-display);
font-size: var(--fz-lg); font-weight: 700; letter-spacing: .01em;
color: var(--text);
}
.exam-note {
margin: 16px 0 0;
font-size: var(--fz-xs); line-height: 1.7;
color: var(--text-muted);
}
.xt-tabs {
display: inline-flex; gap: 2px; padding: 3px;
border: 1px solid var(--border); border-radius: var(--r-sm);
}
.xt-tab {
font-family: var(--font); font-size: var(--fz-xs); font-weight: 600;
color: var(--text-soft);
background: transparent; border: 0; border-radius: var(--r-sm);
padding: 6px 15px; cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.xt-tab:hover { color: var(--text); }
.xt-tab.is-on { background: var(--brand-soft); color: var(--brand); }
.xt-table-wrap { margin-top: 6px; overflow-x: auto; }
.xt-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.xt-c-time { width: 108px; }
.xt-c-test { width: auto; }
.xt-c-score { width: 84px; }
.xt-c-bar { width: 26%; }
.xt-c-acc { width: 82px; }
.xt-c-dur { width: 112px; }
.xt-c-state { width: 88px; }
.xt-c-go { width: 96px; }
.xt-table th {
font-size: var(--fz-2xs); font-weight: 600; letter-spacing: .08em;
color: var(--text-muted); text-align: left;
padding: 12px 0 9px;
border-bottom: 1px solid var(--text);
white-space: nowrap;
}
.xt-table td {
padding: 13px 0;
border-bottom: 1px dashed var(--border);
vertical-align: middle;
}
.xt-row:last-child td { border-bottom: 0; }
.xt-row.is-pending td { color: var(--text-muted); }
.xt-time b {
display: block;
font-family: var(--font-mono); font-size: var(--fz-sm); font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
.xt-time span {
display: block; margin-top: 3px;
font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--text-muted);
}
.xt-test a {
font-size: var(--fz-sm); font-weight: 600; color: var(--text);
text-decoration: none; line-height: 1.4; display: block;
}
.xt-test a:hover { color: var(--brand); }
.xt-test span { display: block; margin-top: 3px; font-size: var(--fz-2xs); color: var(--text-muted); }
.xt-score b {
font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; line-height: 1;
color: var(--text); font-variant-numeric: tabular-nums;
}
.xt-score span { font-size: var(--fz-2xs); color: var(--text-muted); margin-left: 2px; }
.xt-score b.is-none, .xt-acc b.is-none { color: var(--text-muted); font-weight: 500; }
.xt-bar-track {
position: relative; height: 6px; border-radius: 3px;
background: var(--border);
}
.xt-bar-track i {
position: absolute; left: 0; top: 0; height: 100%;
border-radius: 3px; background: var(--brand);
}
.xt-bar-track i.is-ok { background: var(--success); }
.xt-bar-track i.is-no { background: var(--danger); }
.xt-bar-track .xt-tick {
position: absolute; top: -4px; width: 1px; height: 14px;
background: var(--text);
}
.xt-bar-num {
display: block; margin-top: 7px;
font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.xt-acc b {
font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums;
}
.xt-acc span { font-size: var(--fz-2xs); color: var(--text-muted); margin-left: 1px; }
.xt-dur {
font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.xt-dur span { color: var(--text-muted); font-size: var(--fz-2xs); }
.xt-dur .is-none { color: var(--text-muted); }
.xt-state span {
display: inline-block;
font-size: var(--fz-2xs); font-weight: 600; line-height: 1.4;
padding: 3px 9px; border-radius: 4px;
border: 1px solid currentColor;
}
.xt-state .is-ok { color: var(--success); }
.xt-state .is-no { color: var(--danger); }
.xt-state .is-pending { color: var(--warn); }
.xt-go { text-align: right; }
.xt-go a {
font-size: var(--fz-xs); font-weight: 600; color: var(--brand);
text-decoration: none; white-space: nowrap;
}
.xt-go a:hover { text-decoration: underline; }
.xt-none {
margin: 0; padding: 26px 0; text-align: center;
font-size: var(--fz-xs); color: var(--text-muted);
}
/* 空状态：不是一只空盒子，是一次行动邀请 */
.xt-empty {
display: flex; align-items: center; justify-content: space-between;
gap: 28px; flex-wrap: wrap;
margin-top: 18px;
padding: 30px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.xt-empty-text b {
display: block; margin-bottom: 7px;
font-family: var(--font-display); font-size: 1.0625rem; color: var(--text);
}
.xt-empty-text span { font-size: var(--fz-xs); color: var(--text-soft); }
.xt-empty-btn { flex: none; width: auto; }
/* ── 响应式 ── */
@media (max-width: 900px) {
.exam-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; }
.exam-field:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.exam-field:nth-child(n + 4) { margin-top: 4px; }
.gap-msg { margin-left: 0; flex: 0 0 100%; }
.exam-actions { gap: 14px; }
.xt-table { min-width: 720px; }
}
@media (max-width: 620px) {
.gap-score { font-size: 1.125rem; }
.exam-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exam-field { padding: 0 14px; }
.exam-field:nth-child(3n + 1) { padding-left: 14px; border-left: 1px solid var(--border); }
.exam-field:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
.quiz-progress { font-size: var(--fz-2xs); }
.quiz-progress .muted.small { flex: 0 0 100%; }
.exam-head-top { gap: 10px; }
.exam-meta { font-size: var(--fz-xs); }
.gap-score { font-size: 1.4375rem; }
.exam-actions { flex-direction: column; align-items: stretch; gap: 14px; }
.eab-field { justify-content: space-between; }
.xf-select { width: auto; flex: 1; }
.exam-form { justify-content: stretch; }
.exam-cta { width: 100%; }
.exam-transcript { margin-top: 48px; }
.exam-transcript-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.xt-table-wrap { overflow-x: visible; }
.xt-table { min-width: 0; display: block; table-layout: auto; }
.xt-table thead { display: none; }
.xt-table tbody { display: block; }
.xt-row {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"time score"
"test test"
"bar bar"
"acc dur"
"state go";
gap: 7px 12px;
padding: 18px 0;
border-bottom: 1px dashed var(--border);
}
.xt-row:last-child { border-bottom: 0; }
.xt-table td { display: block; border: 0; padding: 0; }
.xt-time { grid-area: time; }
.xt-time b { display: inline; margin-right: 8px; }
.xt-time span { display: inline; margin-top: 0; }
.xt-score { grid-area: score; text-align: right; }
.xt-test { grid-area: test; }
.xt-bar { grid-area: bar; display: flex; align-items: center; gap: 10px; }
.xt-bar-track { flex: 1; }
.xt-bar-num { margin-top: 0; }
.xt-acc { grid-area: acc; }
.xt-acc b { font-size: var(--fz-xs); }
.xt-dur { grid-area: dur; text-align: right; font-size: var(--fz-2xs); }
.xt-state { grid-area: state; }
.xt-go { grid-area: go; text-align: right; }
.xt-empty { flex-direction: column; align-items: flex-start; }
.xt-empty-btn { width: 100%; }
}
/* 成绩页：说明条 */
.exam-note.warn { color: var(--warn, #d97706); font-weight: 500; }
/* 成绩页：大分数旁的元信息 */
.exam-score-meta {
display: flex; flex-direction: column; align-items: center; gap: 6px;
margin-top: 10px;
font-size: var(--fz-xs);
color: var(--text-soft);
}
.exam-score-meta b { font-family: var(--font-mono); color: var(--text); }
.exam-pass-tag {
display: inline-block;
padding: 2px 12px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 700;
}
.exam-pass-tag.ok { background: rgba(16, 185, 129, .14); color: #10b981; }
.exam-pass-tag.no { background: rgba(239, 68, 68, .12); color: #ef4444; }
/* 成绩页：合格线进度条 */
.exam-pass-bar-wrap { margin-bottom: 22px; }
.exam-pass-bar {
position: relative;
height: 10px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-pill);
overflow: visible;
}
.exam-pass-fill {
height: 100%;
border-radius: var(--r-pill);
transition: width .4s ease;
}
.exam-pass-mark {
position: absolute; top: -4px;
width: 2px; height: 18px;
background: var(--text);
border-radius: 2px;
transform: translateX(-1px);
}
.exam-pass-mark::after {
content: "合格线";
position: absolute; top: 20px; left: 50%;
transform: translateX(-50%);
font-size: var(--fz-2xs);
color: var(--text-muted);
white-space: nowrap;
}
.exam-pass-legend {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
font-size: var(--fz-sm);
color: var(--text-soft);
}
.exam-pass-legend b { font-family: var(--font-mono); color: var(--text); font-weight: 600; }
.exam-pass-legend .sep { color: var(--text-muted); }
/* 成绩页：题型得分明细表 */
.exam-type-table-wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow-x: auto;
}
.exam-type-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fz-sm);
}
.exam-type-table th {
text-align: left;
font-size: var(--fz-xs);
font-weight: 600;
color: var(--text-muted);
padding: 10px 14px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
background: var(--surface-2);
}
.exam-type-table td {
padding: 11px 14px;
border-bottom: 1px solid var(--border);
color: var(--text-soft);
vertical-align: middle;
}
.exam-type-table tr:last-child td { border-bottom: 0; }
.exam-type-table .ta-r { text-align: right; font-family: var(--font-mono); }
.exam-type-table .ta-r b { color: var(--text); font-weight: 700; }
.exam-type-table .exam-t-total td {
background: var(--surface-2);
font-weight: 600;
color: var(--text);
border-bottom: 0;
}
.exam-t-bar {
display: block;
min-width: 100px;
height: 6px;
background: var(--surface-2);
border-radius: var(--r-pill);
overflow: hidden;
}
.exam-t-bar-fill {
display: block; height: 100%;
border-radius: var(--r-pill);
transition: width .3s;
}
/* 成绩页：逐题得分徽章 */
.exam-pt-badge {
display: inline-block;
padding: 2px 10px;
border-radius: var(--r-pill);
font-size: var(--fz-xs);
font-weight: 700;
font-family: var(--font-mono);
white-space: nowrap;
}
.exam-pt-badge.full { background: rgba(16, 185, 129, .14); color: #10b981; }
.exam-pt-badge.partial { background: rgba(245, 158, 11, .16); color: #d97706; }
.exam-pt-badge.zero { background: rgba(239, 68, 68, .12); color: #ef4444; }
/* 部分得分卡片样式 */
.float-q-partial {
border-left: 3px solid var(--warn, #d97706) !important;
}
.float-q-partial .float-q-mark { color: var(--warn, #d97706); }
/* 解析（折叠） */
.float-q-explain {
margin-top: 12px;
padding: 10px 14px;
background: var(--brand-soft);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: var(--text-soft);
}
.float-q-explain summary {
cursor: pointer;
font-weight: 600;
color: var(--brand);
list-style: none;
display: inline-flex; align-items: center; gap: 6px;
}
.float-q-explain summary::before {
content: "▸";
display: inline-block;
transition: transform .15s;
}
.float-q-explain[open] summary::before { transform: rotate(90deg); }
.float-q-explain summary::-webkit-details-marker { display: none; }
.float-q-explain ul { padding-left: 18px; margin: 8px 0 0; }
.float-q-explain li { margin: 3px 0; line-height: 1.55; }
/* ── 考试结果操作栏 ───────────────────────── */
.result-actions {
display: flex;
gap: 10px;
margin-top: 8px;
padding-top: 24px;
border-top: 1px solid var(--border);
}
.result-actions .btn { padding: 10px 18px; font-size: var(--fz); }
.result-actions .btn.lg { padding: 12px 22px; font-size: var(--fz-sm); }
.result-actions .btn svg { vertical-align: -3px; margin-right: 4px; }
/* ── 错题页工具栏 ───────────────────────── */
.result-toolbar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.result-toolbar .btn.primary {
padding: 9px 16px;
}
.result-toolbar .btn.primary svg { vertical-align: -3px; margin-right: 4px; }
.result-toolbar-right { margin-left: auto; }
.seg-count {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
font-size: var(--fz-2xs);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
background: var(--surface-2);
border-radius: var(--r-pill);
color: var(--text-muted);
min-width: 20px;
text-align: center;
}
.seg.active .seg-count {
background: var(--brand-soft);
color: var(--brand);
}
.btn.ghost svg { vertical-align: -3px; margin-right: 4px; }
/* ── 空状态 ────────────────────────────────── */
.float-card.empty-state {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
gap: 16px;
padding: 48px 24px;
}
.empty-icon {
width: 80px; height: 80px;
border-radius: 50%;
background: var(--surface-2);
display: grid; place-items: center;
color: var(--text-muted);
}
.empty-text {
font-size: var(--fz);
color: var(--text-soft);
}
/* ── 分页 ──────────────────────────────────── */
.result-pager {
display: flex; align-items: center; justify-content: center;
gap: 16px;
margin-bottom: 24px;
}
.result-pager .btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 14px;
}
.page-info {
font-family: var(--font-mono);
font-size: var(--fz-xs);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
/* ── 响应式 ────────────────────────────────── */
@media (max-width: 720px) {
.result-hero { flex-direction: column; gap: 16px; align-items: stretch; }
.result-score { align-self: flex-start; }
.score-ring { width: 96px; height: 96px; }
.score-num { font-size: 1.9375rem; }
.float-card { padding: 16px 18px; }
.float-card-num { font-size: 1.9375rem; }
}
/* ── 4 列 KPI 变体（me_exams / me_stats 顶部）──────── */
.float-4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1080px) { .float-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .float-4 { grid-template-columns: 1fr; } }
/* ── 考试记录卡（me_exams + me_stats）──────────── */
.float-exam {
padding: 16px 20px;
}
.float-exam-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 12px;
}
.float-exam-title-block { flex: 1; min-width: 0; }
.float-exam-link {
color: var(--text);
text-decoration: none;
font-weight: 600;
border-bottom: 1px dashed transparent;
transition: border-color .15s;
}
.float-exam-link:hover {
color: var(--brand);
border-bottom-color: var(--brand);
}
.float-exam-score {
display: grid; place-items: center;
width: 56px; height: 56px;
border-radius: var(--r-lg);
box-shadow: none;
border: 1px solid transparent;
position: relative;
flex-shrink: 0;
}
/* 分数徽章：柔和底 + 语义色数字，不再是厚重实心色块 */
.float-exam-score.is-good { background: var(--success-soft); color: var(--success); border-color: rgba(22, 163, 74, .22); }
.float-exam-score.is-pass { background: var(--brand-soft); color: var(--brand); border-color: rgba(0, 102, 255, .22); }
.float-exam-score.is-low { background: var(--danger-soft); color: var(--danger); border-color: rgba(220, 38, 38, .22); }
.float-exam-score-num {
font-size: 1.5625rem; font-weight: 700;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.02em;
}
.float-exam-score-label {
font-size: var(--fz-2xs);
letter-spacing: 0.06em;
opacity: 0.75;
margin-top: 1px;
}
.float-exam-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: var(--fz-xs);
}
.float-exam-time {
font-family: var(--font-mono);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
/* ── 章节/分组标题（me_favorites） ──────────── */
.float-section-title {
font-size: var(--fz-lg);
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin: 0;
}
.float-section-link {
color: var(--text);
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color .15s;
}
.float-section-link:hover {
color: var(--brand);
border-bottom-color: var(--brand);
}
/* ── 收藏卡：重点色左边框 + 笔记区 ──────────── */
.float-q.fav-important {
border-left: 3px solid #f59e0b;
padding-left: 19px;
background: linear-gradient(180deg, rgba(245,158,11,0.05), transparent 30%);
}
.float-q-fav {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: var(--r-sm);
color: var(--text-muted);
margin-left: auto;
transition: background .15s, color .15s;
}
.float-q-fav:hover { background: var(--surface-2); color: #f59e0b; }
.float-q-fav.on { color: #f59e0b; }
/* 笔记区 */
.float-q-note {
margin-top: 10px;
padding: 10px 14px;
background: var(--surface-2);
border-radius: var(--r-sm);
font-size: var(--fz-sm);
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
}
.float-q-note.empty { color: var(--text-muted); }
.float-q-note-editor textarea {
width: 100%;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font-family: inherit;
font-size: var(--fz);
resize: vertical;
}
.float-q-note-actions {
display: flex; gap: 8px;
margin-top: 8px;
}
.btn-mini {
appearance: none;
background: transparent;
border: 1px solid var(--border);
padding: 4px 12px;
font-size: var(--fz-xs);
border-radius: var(--r-sm);
color: var(--text-soft);
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
}
.btn-mini:hover { color: var(--text); border-color: var(--border-strong); }
.btn-mini.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-mini.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.primary.sm {
padding: 6px 12px;
font-size: var(--fz-xs);
}
/* ==========================================================================
移动端适配（≤768px）
- 顶部信息条改两格，避免横向溢出
- 侧栏导航改横向滑动条，不再占满整屏
========================================================================== */
@media (max-width: 768px) {
/* 顶部四格 → 两格 */
.hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-ak { padding: 12px 14px; }
.hero-ak:nth-child(2n) { border-right: 0; }
.hero-ak:nth-child(n+3) { border-top: 1px solid var(--border); }
.hero-ak-label { font-size: var(--fz-2xs); letter-spacing: .06em; margin-bottom: 4px; }
.hero-ak-val { font-size: var(--fz); }
/* 标题与成绩栏改为上下排，标题不再被挤成竖排 */
.hero-strip.hero-modern { padding: 20px 16px 16px; }
.hero-main { grid-template-columns: 1fr; gap: 20px; }
.kpi-row { justify-self: stretch; }
/* 侧栏：导航改横向滑动 */
.sidebar { width: 100%; height: auto; position: relative; padding: 10px 0 6px; }
.sidebar.collapsed { width: 100%; }
.sidebar-top { padding: 0 14px 6px; }
.sidebar-search-form { margin: 8px 14px 10px; }
.sidebar-section {
display: flex; align-items: center; gap: 8px;
padding: 0 0 4px;
}
.sidebar-section-title {
flex: 0 0 auto;
padding: 0 0 0 14px;
font-size: var(--fz-2xs);
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: .08em;
}
.sidebar-nav {
flex-direction: row;
flex: 1; min-width: 0;
gap: 4px;
overflow-x: auto;
padding: 2px 14px 6px 0;
scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sb-item { margin: 0; flex-shrink: 0; padding: 8px 10px; }
.sb-label { flex: 0 0 auto; }
.sb-badge { margin-left: 5px; }
.sidebar-spacer { display: none; }
.sidebar-user { border-top: 1px solid var(--border); }
}
/* ==========================================================================
错题本 ·「批改稿」
每道错题 = 一张被批改过的卷面条目：
左侧批改色条 → 批注栏 → 卷面(题干) → 落款(答案) → 展开详情
========================================================================== */
.wb-head { margin-bottom: 16px; }
.wb-head-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.wb-title {
font-size: 1.6875rem; font-weight: 700; margin: 0 0 5px;
letter-spacing: -.015em; color: var(--text);
}
.wb-sub { font-size: var(--fz-xs); color: var(--text-muted); margin: 0; }
.wb-redo { flex-shrink: 0; }
/* 控制条 */
.wb-bar {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 12px; margin-bottom: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
}
.wb-bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wb-sort {
display: inline-flex; align-items: center; gap: 7px;
font-size: var(--fz-xs); color: var(--text-muted); white-space: nowrap;
}
.wb-sort select {
height: 32px;
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 0 8px; font-size: var(--fz-xs);
background: var(--surface); color: var(--text); outline: none;
}
.wb-sort select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* 批量操作条 */
.wb-bulk {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; margin-bottom: 14px;
background: var(--brand-soft);
border: 1px solid rgba(0, 102, 255, .22);
border-radius: var(--r);
font-size: var(--fz-xs);
}
.wb-bulk[hidden] { display: none; }
.wb-bulk-n { color: var(--text); font-weight: 600; }
.wb-bulk-n b { font-family: var(--font-mono); color: var(--brand); }
/* ── 卷面条目 ── */
.wb-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.wb-card {
position: relative;
padding: 0 0 0 50px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
transition: border-color .16s, box-shadow .16s, background .16s;
}
/* 批改色条：错得越多越红 */
.wb-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--wb-rail, #cbd5e1);
}
.wb-card.sev-cool { --wb-rail: #94a3b8; }
.wb-card.sev-warm { --wb-rail: #f59e0b; }
.wb-card.sev-hot { --wb-rail: #ef4444; }
.wb-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 10px rgba(16, 24, 40, .05); }
.wb-card.is-open { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.wb-card.is-picked { background: var(--brand-soft); border-color: var(--brand); }
.wb-card.is-done { opacity: .8; }
/* 批注栏 */
.wb-meta {
display: flex; align-items: center; gap: 9px;
padding: 12px 14px 0 0;
}
/* 复选框：自定义成看得见的方块 */
.wb-pick { position: absolute; left: 16px; top: 12px; display: flex; }
.wb-pick input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
width: 18px; height: 18px;
margin: 0;
border: 1.5px solid #cbd5e1;
border-radius: 5px;
background: #fff;
cursor: pointer;
position: relative;
transition: border-color .12s, background .12s, box-shadow .12s;
}
.wb-pick input[type=checkbox]:hover {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.wb-pick input[type=checkbox]:checked {
background: var(--brand);
border-color: var(--brand);
}
.wb-pick input[type=checkbox]:checked::after {
content: '';
position: absolute; left: 5px; top: 1.5px;
width: 4px; height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(42deg);
}
.wb-pick input[type=checkbox]:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
.wb-no {
font-family: var(--font-mono); font-size: var(--fz-2xs); font-weight: 700;
color: var(--text-muted); letter-spacing: .04em;
white-space: nowrap;
}
.wb-meta .q-type { white-space: nowrap; }
.wb-sev {
font-family: var(--font-mono); font-size: var(--fz-2xs); font-weight: 700;
padding: 1px 7px; border-radius: var(--r-pill);
}
.wb-sev.cool { background: var(--surface-2); color: var(--text-muted); }
.wb-sev.warm { background: var(--warn-soft); color: var(--warn); }
.wb-sev.hot { background: var(--danger-soft); color: var(--danger); }
.wb-flag {
font-size: var(--fz-2xs); font-weight: 600;
padding: 1px 7px; border-radius: var(--r-pill);
background: rgba(217, 119, 6, .12); color: #b45309;
border: 1px solid rgba(217, 119, 6, .28);
}
.wb-flag.is-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.wb-time {
margin-left: auto;
font-family: var(--font-mono); font-size: var(--fz-xs); color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
/* 操作按钮：编成一组，删除常驻红色 */
.wb-ops {
display: inline-flex; align-items: center;
margin-left: 4px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
overflow: hidden;
}
.wb-icon {
appearance: none; border: 0; background: transparent;
width: 32px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-soft); cursor: pointer;
transition: color .12s, background .12s;
}
.wb-icon + .wb-icon { border-left: 1px solid var(--border); }
.wb-icon:hover { color: var(--brand); background: var(--brand-soft); }
.wb-icon svg { transition: transform .18s; }
.wb-icon.is-up svg { transform: rotate(180deg); }
.wb-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* 删除：常驻浅红底，一眼能看出是危险操作 */
.wb-icon-x {
color: #dc2626;
background: rgba(220, 38, 38, .07);
}
.wb-icon-x:hover { color: #fff; background: #dc2626; }
/* 卷面：题干 */
.wb-stem {
padding: 9px 14px 0 0;
font-size: 1rem; line-height: 1.68; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.wb-card.is-open .wb-stem { display: block; -webkit-line-clamp: unset; overflow: visible; }
.wb-stem img { max-width: 100%; height: auto; display: block; margin: 6px 0; border-radius: var(--r-sm); }
/* 落款：答案 */
.wb-foot { display: flex; align-items: center; gap: 14px; padding: 11px 14px 13px 0; }
.wb-ans { display: inline-flex; align-items: center; gap: 8px; }
.wb-ans i { font-style: normal; font-size: var(--fz-2xs); color: var(--text-muted); letter-spacing: .04em; }
.wb-ans b {
font-family: var(--font-mono); font-size: var(--fz-sm); font-weight: 700;
color: var(--success);
background: var(--success-soft);
border: 1px solid rgba(22, 163, 74, .28);
border-radius: 6px;
padding: 1px 9px;
}
/* 展开入口：整行可点，这里只做明确标注 */
.wb-hint {
margin-left: auto;
display: inline-flex; align-items: center; gap: 4px;
appearance: none; border: 0; background: transparent;
padding: 3px 8px;
border-radius: var(--r-pill);
font-family: inherit; font-size: var(--fz-2xs);
color: var(--text-muted);
cursor: pointer;
transition: color .14s ease, background .14s ease;
}
.wb-hint:hover { color: var(--brand); background: var(--brand-soft); }
.wb-hint-caret { transition: transform .18s ease; }
.wb-hint.is-up .wb-hint-caret { transform: rotate(180deg); }
.wb-hint.is-up { color: var(--text-soft); }
/* 详情面板 */
.wb-detail {
border-top: 1px dashed var(--border);
padding: 15px 14px 17px 0;
display: grid; gap: 15px;
}
.wb-detail[hidden] { display: none; }
.wb-detail-sec { display: grid; gap: 8px; }
.wb-sec-title {
font-size: var(--fz-2xs); font-weight: 700; letter-spacing: .02em;
color: var(--text-muted);
}
.wb-opts {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.wb-opt {
position: relative;
display: flex; align-items: flex-start; gap: 9px;
padding: 10px 34px 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: var(--fz-xs); line-height: 1.55; color: var(--text-soft);
}
.wb-opt .key {
font-family: var(--font-mono); font-size: var(--fz-2xs); font-weight: 700;
color: var(--text-muted); flex-shrink: 0; padding-top: 1px;
}
.wb-opt .text { flex: 1; min-width: 0; }
.wb-opt .text img { max-width: 100%; height: auto; display: block; margin: 4px 0; border-radius: 4px; }
.wb-opt.is-right { background: var(--success-soft); border-color: rgba(22, 163, 74, .34); color: var(--text); }
.wb-opt.is-right .key { color: var(--success); }
.wb-opt .tick {
position: absolute; right: 11px; top: 9px;
color: var(--success); font-size: var(--fz-xs); font-weight: 700;
}
/* 解析 */
.wb-exp {
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--brand);
border-radius: var(--r-sm);
font-size: var(--fz-sm); line-height: 1.65; color: var(--text-soft);
}
.wb-exp.is-missing {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: rgba(217, 119, 6, .07);
border-color: rgba(217, 119, 6, .24);
border-left-color: #d97706;
color: #92400e;
font-size: var(--fz-xs);
}
.wb-exp-item + .wb-exp-item { margin-top: 8px; }
.wb-exp .explain-img { margin: 6px 0; }
.wb-exp .explain-img img { max-width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.wb-exp .explain-text { white-space: pre-wrap; }
/* 「提交解析」按钮由全局注入器自动挂上，这里微调位置 */
.wb-exp.is-missing .xf-exp-btn { margin-top: 0; align-self: center; }
.xf-expl-marker { display: none; }
@media (max-width: 860px) {
.wb-opts { grid-template-columns: 1fr; }
.wb-bar-right { margin-left: 0; width: 100%; }
.wb-card { padding-left: 46px; }
.wb-meta, .wb-stem, .wb-foot, .wb-detail { padding-right: 12px; }
}
@media (max-width: 640px) {
/* 批注栏在窄屏换行排布：标签不折行，操作按钮靠右，时间另起一行 */
.wb-meta { flex-wrap: wrap; row-gap: 7px; }
.wb-sev, .wb-flag { white-space: nowrap; }
.wb-ops { order: 8; margin-left: auto; }
.wb-time { order: 9; margin-left: 0; }
.wb-hint { display: none; }
.wb-stem { font-size: var(--fz); }
}
/* ==========================================================================
首页 Hero ·「准考证」
一张准考证：左半是主张与行动，右半是成绩，中间一道撕口；
身份信息（考号 / 科目 / 时间）收到票根，不再抢占首屏。
========================================================================== */
.hero-strip.hero-modern {
margin: 0 0 28px;
padding: 30px 34px 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 30px auto;
align-items: center;
gap: 0 26px;
padding-bottom: 28px;
}
.hero-main {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
min-width: 0;
}
/* 主张 */
.hero-stage {
font-family: var(--font-mono);
font-size: var(--fz-xs); font-weight: 700;
letter-spacing: .02em;
text-transform: none;
color: var(--brand);
margin-bottom: 14px;
display: inline-flex; align-items: center; gap: 9px;
}
.hero-stage::before {
content: ""; display: inline-block;
width: 18px; height: 2px; background: var(--brand);
}
.hero-title {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: 2.125rem; font-weight: 700;
letter-spacing: -.015em; line-height: 1.2;
color: var(--text);
}
.hero-sub {
margin: 0 0 22px;
color: var(--text-soft); font-size: var(--fz); line-height: 1.65;
max-width: 560px;
}
.hero-sub b { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-btn { padding: 10px 22px; font-size: var(--fz-sm); border-radius: var(--r-sm); }
/* 准考证撕口 */
.hero-perf {
position: relative;
align-self: stretch;
border-left: 1.5px dashed var(--border-strong);
margin: 6px 0;
}
.hero-perf::before,
.hero-perf::after {
content: "";
position: absolute; left: -7px;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
/* 光环把虚线断开，读起来才像「打孔」，而不是画歪的圆圈 */
box-shadow: 0 0 0 3px var(--surface);
}
.hero-perf::before { top: -7px; }
.hero-perf::after { bottom: -7px; }
/* 成绩栏 */
.hero-score { display: flex; align-items: stretch; justify-self: end; }
.hs-item {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 2px 24px;
position: relative;
min-width: 92px;
}
.hs-item + .hs-item { border-left: 1px solid var(--border); }
.hs-num {
font-family: var(--font-mono);
font-size: 1.875rem; font-weight: 700; line-height: 1.05;
letter-spacing: -.03em;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.hs-item.is-warn .hs-num { color: var(--warn); }
.hs-label { font-size: var(--fz-2xs); color: var(--text-muted); }
/* 票根 */
.hero-ticket {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
margin: 0 -34px;
padding: 13px 34px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.hero-ident { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hi-item { display: inline-flex; align-items: baseline; gap: 7px; }
.hi-item i {
font-style: normal; font-size: var(--fz-2xs); color: var(--text-muted);
letter-spacing: .02em;
}
.hi-item b {
font-family: var(--font-mono); font-size: var(--fz-xs); font-weight: 600;
color: var(--text); letter-spacing: .01em;
}
.hero-ticket .hero-meta-row { margin-left: auto; }
.hero-ticket .hero-tag {
text-transform: none; letter-spacing: .02em; font-size: var(--fz-2xs);
}
.hero-ticket .hero-tag-val {
font-family: var(--font-mono); font-weight: 700; color: var(--text);
}
@media (max-width: 1080px) {
.hero-grid { grid-template-columns: 1fr; }
.hero-perf {
border-left: 0; border-top: 1.5px dashed #d4d4d4;
height: 0; margin: 26px 0;
}
.hero-perf::before, .hero-perf::after { display: none; }
.hero-score { justify-self: start; }
.hs-item { padding: 2px 18px; }
.hs-item:first-child { padding-left: 0; }
}
@media (max-width: 860px) {
.hero-strip.hero-modern { padding: 22px 18px 0; }
.hero-title { font-size: 1.6875rem; }
.hero-ticket { margin: 0 -18px; padding: 12px 18px; }
.hero-ident { gap: 12px; }
.hs-item { padding: 2px 12px; min-width: 70px; }
.hs-num { font-size: 1.5rem; }
}
/* ==========================================================================
按钮收口 —— 全站零散按钮统一到这套语言
（放在文件末尾，保证覆盖后面各处的旧规则）
========================================================================== */
/* 首页主按钮 */
.hero-btn {
padding: 11px 24px; font-size: var(--fz-sm); font-weight: 600;
border-radius: var(--r);
}
/* 分页 */
.pager-btn {
border-radius: var(--r-sm);
min-width: 36px;
transition: background .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .12s ease;
}
.pager-btn:hover:not(:disabled) {
border-color: var(--border-strong);
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
/* 反馈页发送 */
.btn-send {
border-radius: var(--r);
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.btn-send:hover {
background: var(--brand-hover);
box-shadow: 0 8px 20px rgba(0, 102, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .26);
transform: translateY(-1px);
}
/* 收藏小按钮 */
.q-fav-btn {
padding: 5px 12px; border-radius: var(--r-sm); font-weight: 600;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .15s, color .15s, background .15s,
box-shadow .15s, transform .12s;
}
.q-fav-btn:hover {
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.q-fav-btn.on {
background: var(--warn); border-color: var(--warn); color: #fff;
box-shadow: 0 2px 6px rgba(217, 119, 6, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* 题型切换（分段控件，保留 pill 但加质感） */
.qtype-switch-btn {
padding: 5px 13px; font-weight: 600;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.qtype-switch-btn:hover { background: var(--surface-2); color: var(--text); }
.qtype-switch-btn.active {
background: var(--brand); color: var(--brand-fg);
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .2);
}
/* 侧栏签到 */
.sf-checkin {
height: 36px;
font-size: var(--fz-xs); font-weight: 600;
border-radius: var(--r);
border: 1px solid transparent;
background: var(--brand);
color: var(--brand-fg);
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.sf-checkin:hover:not(:disabled) {
background: var(--brand-hover);
box-shadow: 0 6px 16px rgba(0, 102, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .26);
transform: translateY(-1px);
}
.sf-checkin.is-done {
background: var(--surface-2);
border-color: var(--border);
color: var(--text-muted);
box-shadow: none;
}
/* 仪表盘「切换科目」 */
.dash-switch {
padding: 9px 18px;
font-size: var(--fz-sm); font-weight: 600;
border-radius: var(--r-pill);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .12s ease;
}
.dash-switch:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--text);
box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
/* 侧栏退出登录 */
.sidebar-user-action {
border-radius: var(--r-sm);
transition: background .15s ease, color .15s ease;
}
.sidebar-user-action:hover { background: var(--surface-2); }
/* 分段控件（成绩单筛选） */
.xt-tab {
padding: 6px 16px;
font-weight: 600;
}
.xt-tab.is-on {
background: var(--brand-soft); color: var(--brand);
box-shadow: inset 0 0 0 1px var(--brand-soft-2);
}
/* ══ 模考页：开考按钮 + 返回按钮 + 下拉 ══ */
.exam-cta {
height: 44px;
padding: 0 26px;
border-radius: var(--r);
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
transition: background .16s ease, box-shadow .16s ease, transform .12s ease;
}
.exam-cta:hover {
box-shadow: 0 8px 22px rgba(0, 102, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .26);
}
.exam-back {
display: inline-flex; align-items: center; gap: 6px;
height: 44px;
padding: 0 18px;
border: 1px solid var(--border-strong);
border-radius: var(--r);
background: var(--surface);
color: var(--text-soft);
font-size: var(--fz-sm); font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .12s ease;
}
.exam-back:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--text);
box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
/* 明显的下拉控件 */
.xf-select { position: relative; display: inline-block; width: 168px; }
.xf-select::after {
content: "";
position: absolute; right: 15px; top: 50%;
width: 8px; height: 8px;
margin-top: -6px;
border-right: 1.8px solid var(--text-muted);
border-bottom: 1.8px solid var(--text-muted);
transform: rotate(45deg);
pointer-events: none;
transition: border-color .16s ease, transform .16s ease;
}
.xf-select:hover::after { border-color: var(--brand); }
.xf-select:focus-within::after { border-color: var(--brand); }
.xf-select select {
appearance: none; -webkit-appearance: none;
width: 100%;
background-color: var(--surface);
background-image: none;
border: 1px solid var(--border-strong);
border-radius: var(--r);
height: 44px;
padding: 0 40px 0 16px;
font-family: var(--font);
font-size: var(--fz-sm);
color: var(--text);
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.xf-select select:hover {
border-color: var(--brand);
background-color: var(--surface-2);
}
.xf-select select:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 4px var(--brand-soft);
}
[data-theme="dark"] .xf-select select:hover { background-color: var(--surface-2); }
/* 小型按钮收口（文件内其他处还有旧定义，这里最后压一次） */
.btn-mini {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 6px 13px; font-size: var(--fz-xs); font-weight: 600;
background: var(--brand); color: var(--brand-fg);
border: 1px solid transparent; border-radius: var(--r-sm);
box-shadow: 0 1px 4px rgba(0, 102, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .2);
cursor: pointer; text-decoration: none;
transition: background .15s ease, box-shadow .15s ease, transform .12s ease,
border-color .15s ease, color .15s ease;
}
.btn-mini:hover {
background: var(--brand-hover); color: var(--brand-fg);
box-shadow: 0 5px 14px rgba(0, 102, 255, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
transform: translateY(-1px);
}
.btn-mini.primary { background: var(--brand); border-color: transparent; color: var(--brand-fg); }
.btn-mini.primary:hover { background: var(--brand-hover); }
.btn-mini.ghost {
background: var(--surface); color: var(--text-soft);
border-color: var(--border);
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.btn-mini.ghost:hover {
background: var(--surface-2); color: var(--text);
border-color: var(--border-strong);
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
.btn-mini.danger {
background: var(--danger); color: #fff; border-color: transparent;
box-shadow: 0 2px 6px rgba(220, 38, 38, .22), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn-mini.danger:hover { background: #b91c1c; color: #fff; }
/* ==========================================================================
成绩单：分布卡片（可点击复盘）+ 题型小卡 + 题目筛选
========================================================================== */
/* 可点击的 KPI 卡（button 需要重置原生样式） */
button.float-card {
width: 100%;
font: inherit;
text-align: left;
color: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
button.float-card:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow:
0 2px 4px rgba(0,0,0,0.05),
0 10px 28px rgba(0,0,0,0.07),
0 20px 44px rgba(0,0,0,0.05);
}
button.float-card:focus-visible {
outline: 3px solid var(--brand-soft-2);
outline-offset: 2px;
}
button.float-card.is-on {
border-color: var(--brand);
box-shadow:
0 0 0 3px var(--brand-soft),
0 10px 28px rgba(0,0,0,0.07);
}
button.float-card .float-card-head,
button.float-card .float-card-num,
button.float-card .float-card-meta { display: block; }
button.float-card .float-card-num { margin-bottom: 0; }
.result-kpi { margin-bottom: 14px; }
/* 题型小卡（替代旧的大表格） */
.qtype-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 232px));
gap: 12px;
margin-bottom: 24px;
}
.qtype-card {
display: flex; flex-direction: column; gap: 9px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
font: inherit; text-align: left; color: inherit;
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .16s ease, box-shadow .16s ease, transform .14s ease, background .16s ease;
}
.qtype-card:hover {
border-color: var(--border-strong);
box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
transform: translateY(-2px);
}
.qtype-card:focus-visible { outline: 3px solid var(--brand-soft-2); outline-offset: 2px; }
.qtype-card.is-on {
border-color: var(--brand);
background: var(--brand-soft);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.qc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qc-rate {
font-family: var(--font-mono); font-size: var(--fz); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.qc-score { display: flex; align-items: baseline; gap: 4px; }
.qc-score b {
font-family: var(--font-mono); font-size: 1.375rem; font-weight: 700; line-height: 1;
color: var(--text); font-variant-numeric: tabular-nums;
}
.qc-score i { font-style: normal; font-size: var(--fz-2xs); color: var(--text-muted); }
.qc-bar {
display: block; height: 5px; border-radius: 3px;
background: var(--border); overflow: hidden;
}
.qc-bar i { display: block; height: 100%; border-radius: 3px; }
.qc-meta { font-size: var(--fz-2xs); color: var(--text-muted); }
/* 题目筛选条 */
.detail-filter {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-bottom: 16px;
}
.df-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
font-family: var(--font); font-size: var(--fz-sm); font-weight: 600;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .16s ease, border-color .16s ease, color .16s ease,
box-shadow .16s ease, transform .12s ease;
}
.df-btn:hover {
border-color: var(--border-strong);
color: var(--text);
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.df-btn.is-on {
background: var(--brand); color: var(--brand-fg); border-color: transparent;
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.df-btn b {
font-family: var(--font-mono); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.df-current {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fz-sm); color: var(--text-soft);
}
.df-clear {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--surface-2);
color: var(--text-muted);
font-style: normal; font-size: var(--fz-xs); line-height: 1;
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.df-clear:hover { background: var(--brand); color: var(--brand-fg); }
/* 批量加载哨兵 */
.df-sentinel {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 6px 0 4px;
}
.df-more {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 20px;
font-family: var(--font); font-size: var(--fz-sm); font-weight: 600;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.df-more:hover {
border-color: var(--border-strong); color: var(--text);
box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
transform: translateY(-1px);
}
.df-none,
.df-end {
margin: 0; padding: 8px 0 4px;
text-align: center;
font-size: var(--fz-sm); color: var(--text-muted);
}
.df-end { letter-spacing: .04em; }
/* 未作答的题卡额外标记 */
.float-q.is-unanswered { border-left-color: var(--text-muted); }
.float-q.is-unanswered .float-q-mark { color: var(--text-muted); }
.float-q .exam-pt-badge.zero.is-blank {
color: var(--text-muted); border-color: var(--border-strong);
}
/* ==========================================================================
设计系统 v3 —— 统一收口层（2026-10-30）
放在文件末尾以覆盖前面各组件的散装定义。目标：
① 按钮：三档尺寸 × 三种角色（primary / ghost / danger），高度、圆角、
字号、hover 反馈全站一致；
② 图标：侧栏图标改单色（不再 13 套渐变），行内图标线宽统一 2；
③ Toast：改到右下角，不再压住页面标题；
④ 未登录落地页侧栏；
⑤ 404 / 500 页。
规则：圆角只有 8 / 12 / 16 / pill 四档，字号只走 :root 阶梯。
========================================================================== */
/* ── 1. 统一色板：右侧卡片图标与侧栏导航图标共用 ───────────────────── */
.color-blue { --ico-grad: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); --ico-shadow: 0 2px 6px rgba(59, 130, 246, .30); }
.color-purple { --ico-grad: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%); --ico-shadow: 0 2px 6px rgba(139, 92, 246, .30); }
.color-orange { --ico-grad: linear-gradient(135deg, #f97316 0%, #fb923c 100%); --ico-shadow: 0 2px 6px rgba(249, 115, 22, .30); }
.color-cyan { --ico-grad: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%); --ico-shadow: 0 2px 6px rgba(6, 182, 212, .30); }
.color-green { --ico-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%); --ico-shadow: 0 2px 6px rgba(16, 185, 129, .30); }
.color-red { --ico-grad: linear-gradient(135deg, #ef4444 0%, #f87171 100%); --ico-shadow: 0 2px 6px rgba(239, 68, 68, .30); }
.color-yellow { --ico-grad: linear-gradient(135deg, #eab308 0%, #facc15 100%); --ico-shadow: 0 2px 6px rgba(234, 179, 8, .30); }
.color-blue-2 { --ico-grad: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%); --ico-shadow: 0 2px 6px rgba(14, 165, 233, .30); }
.color-indigo { --ico-grad: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%); --ico-shadow: 0 2px 6px rgba(79, 70, 229, .30); }
.color-pink { --ico-grad: linear-gradient(135deg, #be185d 0%, #ec4899 100%); --ico-shadow: 0 2px 6px rgba(190, 24, 93, .30); }
.color-slate { --ico-grad: linear-gradient(135deg, #475569 0%, #64748b 100%); --ico-shadow: 0 2px 6px rgba(71, 85, 105, .30); }
/* 类别色：与首页方向卡 .l1-icon-* 同一套渐变，侧栏目录沿用 */
.cat-57 { --ico-grad: linear-gradient(135deg, #2563eb, #3b82f6); --ico-shadow: 0 2px 6px rgba(37, 99, 235, .30); }
.cat-95 { --ico-grad: linear-gradient(135deg, #ea580c, #f97316); --ico-shadow: 0 2px 6px rgba(234, 88, 12, .30); }
.cat-96 { --ico-grad: linear-gradient(135deg, #7c3aed, #8b5cf6); --ico-shadow: 0 2px 6px rgba(124, 58, 237, .30); }
.cat-97 { --ico-grad: linear-gradient(135deg, #dc2626, #ef4444); --ico-shadow: 0 2px 6px rgba(220, 38, 38, .30); }
.cat-98 { --ico-grad: linear-gradient(135deg, #d97706, #f59e0b); --ico-shadow: 0 2px 6px rgba(217, 119, 6, .30); }
.cat-99 { --ico-grad: linear-gradient(135deg, #0891b2, #06b6d4); --ico-shadow: 0 2px 6px rgba(8, 145, 178, .30); }
.cat-100 { --ico-grad: linear-gradient(135deg, #be185d, #ec4899); --ico-shadow: 0 2px 6px rgba(190, 24, 93, .30); }
.cat-101 { --ico-grad: linear-gradient(135deg, #059669, #10b981); --ico-shadow: 0 2px 6px rgba(5, 150, 105, .30); }
.cat-104 { --ico-grad: linear-gradient(135deg, #475569, #64748b); --ico-shadow: 0 2px 6px rgba(71, 85, 105, .30); }
.cat-196 { --ico-grad: linear-gradient(135deg, #4f46e5, #6366f1); --ico-shadow: 0 2px 6px rgba(79, 70, 229, .30); }
/* 侧栏导航图标：与右侧卡片图标同一种「彩色瓷砖 + 白色字形 + 同色投影」 */
.sb-ico {
width: 26px; height: 26px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: #fff;
background: var(--ico-grad, linear-gradient(135deg, #2563eb, #3b82f6));
box-shadow: var(--ico-shadow, 0 2px 6px rgba(37, 99, 235, .30));
transition: transform .14s ease, box-shadow .14s ease;
}
.sb-ico svg { width: 15px; height: 15px; stroke: currentColor; }
.sb-item:hover .sb-ico { transform: translateY(-1px); }
/* ── 2. 按钮系统：统一三档尺寸 ─────────────────────────────────────── */
.btn {
min-height: var(--btn-h-md);
padding: 8px var(--btn-px-md);
border-radius: var(--r);
font-size: var(--fz);
font-weight: 600;
gap: 7px;
}
.btn.sm {
min-height: var(--btn-h-sm);
padding: 4px var(--btn-px-sm);
font-size: var(--fz-xs);
border-radius: var(--r-sm);
gap: 5px;
}
.btn.lg,
.btn-lg {
min-height: var(--btn-h-lg);
padding: 12px var(--btn-px-lg);
font-size: var(--fz-lg);
border-radius: var(--r-lg);
}
/* 各家族按钮统一到 .btn 的度量上（保留各自的角色形态） */
.btn-mini {
min-height: var(--btn-h-sm);
padding: 4px var(--btn-px-sm);
font-size: var(--fz-xs);
font-weight: 600;
border-radius: var(--r-sm);
gap: 5px;
}
.df-btn {
min-height: var(--btn-h-sm);
padding: 4px var(--btn-px-sm);
font-size: var(--fz-xs);
border-radius: var(--r-pill);
}
.dash-card-action,
.dash-card-link {
min-height: 28px;
padding: 4px 12px;
font-size: var(--fz-xs);
border-radius: var(--r-pill);
}
.pager-btn {
min-height: var(--btn-h-sm);
padding: 4px 10px;
font-size: var(--fz-xs);
border-radius: var(--r-sm);
}
.q-fav-btn {
min-height: 28px;
padding: 4px 10px;
font-size: var(--fz-xs);
border-radius: var(--r-pill);
}
.qtype-switch-btn {
min-height: 28px;
padding: 4px 12px;
font-size: var(--fz-xs);
border-radius: var(--r-pill);
}
.btn-send {
height: 44px;
padding: 0 16px;
font-size: var(--fz-sm);
font-weight: 600;
border-radius: var(--r-sm);
}
.hero-btn {
min-height: var(--btn-h-lg);
padding: 11px var(--btn-px-lg);
font-size: var(--fz-sm);
font-weight: 600;
border-radius: var(--r-lg);
}
.btn-submit,
.auth-submit {
min-height: 48px;
padding: 13px 20px;
font-size: var(--fz);
font-weight: 600;
letter-spacing: .02em;
border-radius: var(--r-lg);
}
/* hover 反馈统一：抬起 1px + 阴影，不用 brightness */
.btn-send:hover { filter: none; background: var(--brand-hover); transform: translateY(-1px); }
/* 按钮角色：中性 / 主 / 提示（标记）/ 危险（交卷） */
.btn.amber {
color: #b45309;
background: var(--warn-soft);
border-color: rgba(217, 119, 6, .28);
box-shadow: none;
}
.btn.amber:hover {
color: #92400e;
background: rgba(217, 119, 6, .16);
border-color: var(--warn);
box-shadow: 0 4px 12px rgba(217, 119, 6, .12);
}
[data-theme="dark"] .btn.amber { color: #fbbf24; }
[data-theme="dark"] .btn.amber:hover { color: #fcd34d; }
/* 焦点态：所有按钮家族统一 */.btn-mini:focus-visible,
.df-btn:focus-visible,
.dash-card-action:focus-visible,
.dash-card-link:focus-visible,
.pager-btn:focus-visible,
.q-fav-btn:focus-visible,
.qtype-switch-btn:focus-visible,
.btn-send:focus-visible,
.hero-btn:focus-visible,
.btn-submit:focus-visible,
.auth-submit:focus-visible {
outline: 3px solid var(--brand-soft-2);
outline-offset: 2px;
}
/* 按钮不用渐变（与「按钮系统 v2」的纯色原则一致） */
.dash-card-action.danger {
background: var(--danger);
color: #fff;
border-color: transparent;
box-shadow: 0 2px 6px rgba(220, 38, 38, .22), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.dash-card-action.danger:hover { background: #b91c1c; color: #fff; }
/* ── 3. Toast：改右下角，不再压住页面标题 ──────────────────────────── */
#xf-toast-stack {
position: fixed;
top: auto; left: auto; right: 24px; bottom: 24px;
transform: none;
display: flex; flex-direction: column; gap: 10px;
align-items: stretch;
z-index: 9999;
pointer-events: none;
width: min(420px, calc(100vw - 48px));
}
.xf-toast { font-size: var(--fz-sm); }
@keyframes xf-toast-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 4. 未登录落地页侧栏 ───────────────────────────────────────────── */
.sidebar-public {
display: flex; flex-direction: column;
padding-bottom: 4px;
}
.sidebar-public-cta {
display: flex; flex-direction: column; gap: 3px;
margin: 10px 8px 0; padding: 14px 16px;
border-radius: var(--r);
background: linear-gradient(135deg, #2563eb, #0066ff);
color: #fff; text-decoration: none;
box-shadow: 0 6px 18px rgba(0, 102, 255, .22);
transition: transform .14s ease, box-shadow .14s ease;
}
.sidebar-public-cta:hover {
color: #fff;
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(0, 102, 255, .28);
}
.sidebar-public-cta-title { font-size: var(--fz); font-weight: 700; line-height: 1.3; }
.sidebar-public-cta-sub { font-size: var(--fz-xs); opacity: .82; line-height: 1.3; }
.sidebar-public-register {
margin: 10px 8px 2px; text-align: center;
font-size: var(--fz-xs); font-weight: 600;
color: var(--brand); text-decoration: none;
}
.sidebar-public-register:hover { text-decoration: underline; }
.sidebar-bank {
display: flex; flex-direction: column;
padding: 2px 18px 4px;
}
.sidebar-bank-item {
display: flex; align-items: baseline; gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.sidebar-bank-item:last-child { border-bottom: 0; }
.sidebar-bank-item b {
font-family: var(--font-mono); font-size: var(--fz); font-weight: 600;
color: var(--text); line-height: 1.2;
min-width: 62px; text-align: right;
font-variant-numeric: tabular-nums;
}
.sidebar-bank-item span { font-size: var(--fz-xs); color: var(--text-muted); }
.sidebar-steps {
list-style: none; margin: 0;
padding: 4px 18px 8px;
display: flex; flex-direction: column; gap: 10px;
}
.sidebar-steps li {
display: flex; align-items: flex-start; gap: 9px;
font-size: var(--fz-xs); color: var(--text-soft); line-height: 1.5;
}
.sidebar-steps i {
flex-shrink: 0;
width: 18px; height: 18px; margin-top: 1px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--brand-soft); color: var(--brand);
font-style: normal; font-weight: 700;
font-family: var(--font-mono); font-size: var(--fz-3xs);
}
.sidebar-public-foot {
margin-top: auto;
padding: 12px 16px 16px;
display: flex; align-items: center; gap: 8px;
}
.sidebar-public-support {
flex: 1; min-width: 0;
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fz-2xs); color: var(--text-muted); text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-public-support:hover { color: var(--brand); }
.sidebar-public-support svg { flex-shrink: 0; }
/* 折叠态：落地页侧栏收成一个图标块 */
[data-sidebar="collapsed"] .sidebar-public-cta {
margin: 8px auto 0; padding: 0;
width: 34px; height: 34px;
align-items: center; justify-content: center;
border-radius: var(--r-sm);
}
[data-sidebar="collapsed"] .sidebar-public-cta-title { font-size: var(--fz-xs); }
[data-sidebar="collapsed"] .sidebar-public-cta-sub,
[data-sidebar="collapsed"] .sidebar-public-register,
[data-sidebar="collapsed"] .sidebar-bank,
[data-sidebar="collapsed"] .sidebar-steps,
[data-sidebar="collapsed"] .sidebar-public-support { display: none; }
[data-sidebar="collapsed"] .sidebar-public .sidebar-section { display: none; }
[data-sidebar="collapsed"] .sidebar-public-foot { justify-content: center; padding: 12px 0 16px; }
/* ── 5. 404 / 500 ──────────────────────────────────────────────────── */
.err-page {
max-width: 520px; margin: 12vh auto 0;
text-align: center;
}
.err-code {
font-family: var(--font-mono);
font-size: var(--fz-3xl); font-weight: 700; line-height: 1;
color: var(--brand); letter-spacing: .02em;
}
.err-title {
margin: 14px 0 0;
font-family: var(--font-display);
font-size: var(--fz-xl); font-weight: 700; color: var(--text);
}
.err-desc {
margin: 10px 0 0;
font-size: var(--fz-sm); line-height: 1.7; color: var(--text-soft);
}
.err-actions {
margin-top: 22px;
display: flex; gap: 10px; justify-content: center;
}
/* ── 6. 错题本行内操作按钮降噪（默认中性，hover 才变红） ───────────── */
.wb-ops {
border: 0;
background: transparent;
border-radius: var(--r-sm);
}
.wb-icon-x {
color: var(--text-muted);
background: transparent;
transition: color .14s ease, background .14s ease;
}
.wb-icon-x:hover {
color: #fff;
background: var(--danger);
}
/* ── 7. 开发态提示条（只在 DEBUG 下渲染，带虚线边一眼可辨） ─────────── */
.mem-note-dev {
border-style: dashed;
border-color: var(--warn);
background: var(--warn-soft);
color: #92400e;
}
[data-theme="dark"] .mem-note-dev { color: #fbbf24; }
/* ── 8. 未登录看仪表盘：把用户数据位换成入口，不出现「加载失败」 ─────── */
.dash-ov-side-num-plain {
display: block;
font-family: var(--font-display);
font-size: var(--fz-lg); font-weight: 700; line-height: 1.25;
color: var(--text);
}
.dash-ov-side-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-an-block-full { grid-column: 1 / -1; }
.dash-an-block-full .mo-empty { padding: 18px 0 6px; }
/* ==========================================================================
登录 / 注册 / 找回密码 —— 独立落地页布局
左：深色课程条（品牌 + 主张 + 真实题库数据 + 方向目录）
右：浅色区 + 居中表单卡
不再套 app-shell 侧栏：登录页是获客页，不是后台页。
========================================================================== */
.auth-split {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
min-height: 100vh;
background: var(--surface-2);
}
/* ── 左：深色课程条 ─────────────────────────────────────────────── */
.auth-panel {
position: relative;
display: flex; flex-direction: column;
padding: 40px 54px 26px;
color: #fff;
background: linear-gradient(158deg, #0b1220 0%, #14243d 58%, #0d1a2e 100%);
overflow: hidden;
}
.auth-panel::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(680px 420px at 16% 6%, rgba(0, 102, 255, .32) 0%, transparent 64%),
radial-gradient(560px 360px at 92% 92%, rgba(0, 102, 255, .14) 0%, transparent 68%);
pointer-events: none;
}
.auth-panel::after {
/* 票根齿孔：右侧一条虚线 + 小圆孔，和首页准考证同一套语汇 */
content: '';
position: absolute; top: 0; bottom: 0; right: 30px;
width: 1px;
background-image: linear-gradient(to bottom, rgba(255,255,255,.22) 50%, transparent 50%);
background-size: 1px 10px;
opacity: .5;
pointer-events: none;
}
.auth-panel-inner {
position: relative;
z-index: 1;
flex: 1;
display: flex; flex-direction: column;
max-width: 620px;
width: 100%;
margin: 0 auto;
justify-content: center;
}
.auth-panel-brand {
display: inline-flex; align-items: center; gap: 11px;
align-self: flex-start;
}
.auth-panel-mark {
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.auth-panel-brand-name {
font-family: var(--font-display);
font-size: 1.1875rem; font-weight: 700; letter-spacing: .01em;
}
.auth-panel-eyebrow {
margin: 40px 0 0;
font-size: var(--fz-xs); font-weight: 600;
color: #7fb2ff;
letter-spacing: .16em;
}
.auth-panel-title {
margin: 12px 0 0;
font-family: var(--font-display);
font-size: 2.625rem; line-height: 1.22; font-weight: 700;
letter-spacing: -.01em;
color: #fff;
}
.auth-panel-sub {
margin: 16px 0 0;
max-width: 460px;
font-size: var(--fz); line-height: 1.75;
color: rgba(226, 232, 240, .72);
}
/* 票根式数据条 */
.auth-panel-stats {
margin-top: 34px;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(255, 255, 255, .13);
border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.auth-panel-stat {
padding: 18px 20px 18px 0;
display: flex; flex-direction: column; gap: 4px;
}
.auth-panel-stat + .auth-panel-stat {
border-left: 1px solid rgba(255, 255, 255, .13);
padding-left: 20px;
}
.auth-panel-stat b {
font-family: var(--font-mono);
font-size: 1.6875rem; font-weight: 700; line-height: 1.1;
color: #fff;
font-variant-numeric: tabular-nums;
}
.auth-panel-stat span { font-size: var(--fz-xs); color: rgba(226, 232, 240, .58); }
/* 方向目录 */
.auth-panel-dirs { margin-top: 30px; }
.auth-panel-dirs-title {
font-size: var(--fz-2xs); font-weight: 600;
color: rgba(226, 232, 240, .45);
letter-spacing: .14em;
margin-bottom: 12px;
}
.auth-panel-dirs-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 18px;
}
.auth-dir {
display: flex; align-items: center; gap: 9px;
padding: 7px 10px 7px 8px;
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: rgba(226, 232, 240, .82);
}
.auth-dir-dot {
width: 12px; height: 12px; border-radius: 4px;
background: var(--ico-grad, var(--brand));
flex-shrink: 0;
}
.auth-dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-panel-foot {
position: relative;
z-index: 1;
margin-top: 34px;
display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.auth-panel-support {
display: inline-flex; align-items: center; gap: 7px;
font-size: var(--fz-2xs);
color: rgba(226, 232, 240, .48);
text-decoration: none;
}
.auth-panel-support:hover { color: #7fb2ff; }
.auth-panel-tools {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.font-size-ctl-dark {
flex: none;
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
}
.font-size-ctl-dark .font-size-btn { color: rgba(226, 232, 240, .72); }
.font-size-ctl-dark .font-size-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.font-size-ctl-dark .font-size-btn.is-on { background: var(--brand); color: var(--brand-fg); }
.theme-toggle-dark {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
color: rgba(226, 232, 240, .72);
flex-shrink: 0;
}
.theme-toggle-dark:hover {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .28);
color: #fff;
}
/* ── 右：表单区 ─────────────────────────────────────────────────── */
.auth-main {
display: flex; align-items: center; justify-content: center;
padding: 44px 40px;
background: var(--surface-2);
}
.auth-main-inner { width: 100%; max-width: 420px; }
.auth-main .auth-card {
max-width: 420px;
padding: 34px 34px 26px;
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
border-color: var(--border);
}
/* 暗色下卡片要比周围更亮，否则深色卡贴在深色底上看不出来 */
[data-theme="dark"] .auth-main { background: var(--bg); }
[data-theme="dark"] .auth-main .auth-card {
background: var(--surface-2);
border-color: rgba(255, 255, 255, .08);
}
.auth-main .auth-h1 { font-size: 1.6875rem; }
.auth-main .auth-sub { margin-bottom: 24px; }
/* 窄屏兜底（不做移动端优化，只保证不塌） */
@media (max-width: 1080px) {
.auth-split { grid-template-columns: 1fr; }
.auth-panel { padding: 30px 28px 22px; }
.auth-panel::after { display: none; }
.auth-panel-title { font-size: 2rem; }
.auth-panel-dirs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.auth-panel-dirs-grid { grid-template-columns: 1fr; }
.auth-panel-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-panel-stat b { font-size: 1.3125rem; }
}
/* ==========================================================================
侧栏「账户面板」 + 用户字号控制
========================================================================== */
/* ── 用户资料触发器 ─────────────────────────────────────────────── */
.user-trigger {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 0;
appearance: none; border: 0; background: transparent;
font-family: inherit; text-align: left;
cursor: pointer;
border-radius: var(--r-sm);
transition: opacity .14s ease;
}
.user-trigger:hover { opacity: .82; }
.user-trigger:focus-visible { outline: 3px solid var(--brand-soft-2); outline-offset: 2px; }
.user-trigger .sidebar-user-info { flex: 1; min-width: 0; }
.user-trigger-caret {
flex-shrink: 0;
color: var(--text-muted);
transition: transform .18s ease;
}
.user-trigger[aria-expanded="true"] .user-trigger-caret { transform: rotate(180deg); }
/* ── 工具行：字号 + 主题 ────────────────────────────────────────── */
.sidebar-user-tools {
display: flex; align-items: center; gap: 8px;
}
.font-size-ctl {
flex: 1;
display: inline-flex; align-items: center; gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
}
.font-size-ctl-label {
padding: 0 6px 0 4px;
font-size: var(--fz-2xs);
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: -.02em;
}
.font-size-btn {
appearance: none; border: 0; background: transparent;
padding: 3px 7px;
border-radius: 6px;
font-family: var(--font);
font-size: var(--fz-2xs);
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
line-height: 1.3;
transition: background .14s ease, color .14s ease;
}
.font-size-btn:hover { background: var(--surface-2); color: var(--text); }
.font-size-btn.is-on {
background: var(--brand);
color: var(--brand-fg);
}
.font-size-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.font-size-ctl-wide { flex: none; }
/* ── 账户面板浮层 ───────────────────────────────────────────────── */
.user-panel {
position: fixed;
z-index: 220;
width: 268px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-xl);
overflow: hidden;
animation: user-panel-in .16s ease-out;
}
.user-panel[hidden] { display: none !important; }
@keyframes user-panel-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.user-panel-head {
padding: 14px 15px 12px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.user-panel-id { display: flex; align-items: center; gap: 10px; }
.user-panel-id .avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--brand); color: var(--brand-fg);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; flex-shrink: 0;
}
.user-panel-idtext { min-width: 0; }
.user-panel-name {
font-size: var(--fz); font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-panel-email {
margin-top: 1px;
font-size: var(--fz-2xs); color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-panel-member {
margin-top: 10px;
display: flex; align-items: center; gap: 8px;
}
.user-panel-member[hidden] { display: none !important; }
.user-panel-expires { font-size: var(--fz-2xs); color: var(--text-muted); }
.user-panel-nav {
padding: 6px;
/* 条目变多后（加账号设置）短屏会顶出浮层，这里让它自己滚 */
max-height: min(52vh, 430px);
overflow-y: auto;
}
.user-panel-item {
display: flex; align-items: center; gap: 9px;
padding: 8px 9px;
border-radius: var(--r-sm);
font-size: var(--fz-sm);
color: var(--text-soft);
transition: background .12s ease, color .12s ease;
}
.user-panel-item:hover { background: var(--surface-2); color: var(--text); }
.upi-ico { display: inline-flex; color: var(--text-muted); flex-shrink: 0; }
.user-panel-item:hover .upi-ico { color: var(--brand); }
.upi-text { flex: 1; min-width: 0; }
.upi-val {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.user-panel-foot {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.up-foot-label { font-size: var(--fz-2xs); color: var(--text-muted); }
/* 退出登录在面板底部的危险操作条 */
.user-panel-logout {
padding: 4px 6px 6px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.user-panel-logout .sidebar-user-action {
justify-content: flex-start;
width: 100%;
padding: 7px 8px;
}
/* 折叠态：只留头像，隐藏资料文字 */
.sidebar.collapsed .user-trigger .sidebar-user-info,
.sidebar.collapsed .user-trigger-caret { display: none; }
.sidebar.collapsed .user-trigger { justify-content: center; }
.sidebar.collapsed .sidebar-user-tools { flex-direction: column; }
.sidebar.collapsed .font-size-ctl { width: 100%; justify-content: center; }
.sidebar.collapsed .font-size-ctl-label { display: none; }
/* ==========================================================================
会员中心 · 选套餐 + 确认开通浮层
========================================================================== */
/* ── 卡片可点 + 选中态 ─────────────────────────────────────────── */
.mem-plan { cursor: pointer; }
.mem-plan:focus-visible {
outline: 3px solid var(--brand-soft-2);
outline-offset: 3px;
}
/* 右上角对勾徽标（选中才出现） */
.mem-plan-check {
position: absolute;
top: 14px; right: 14px;
width: 24px; height: 24px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand);
color: var(--brand-fg);
box-shadow: 0 2px 8px rgba(0, 102, 255, .35);
opacity: 0;
transform: scale(.7);
pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
}
/* 主推套餐的顶条占了左上角，对勾放右上角不冲突 */
.mem-plan.is-selected .mem-plan-check { opacity: 1; transform: scale(1); }
.mem-plan.is-selected {
border-color: var(--brand);
background: var(--brand-soft);
box-shadow: 0 0 0 3px var(--brand-soft-2), var(--shadow-lg);
transform: translateY(-4px);
}
.mem-plan.is-selected:hover { transform: translateY(-7px); }
.mem-plan.is-selected .mem-plan-buy {
background: var(--brand);
color: var(--brand-fg);
border-color: transparent;
box-shadow: 0 2px 6px rgba(0, 102, 255, .20), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.mem-plan.is-selected .mem-plan-buy:hover {
background: var(--brand-hover);
box-shadow: 0 8px 22px rgba(0, 102, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .26);
}
/* 实心主按钮只给「当前选中」的那一张：
选了别的套餐后，主推套餐的按钮退回描边，避免页面上同时出现两个实心蓝按钮。 */
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected) .mem-plan-buy {
background: var(--surface);
color: var(--text);
border-color: var(--border-strong);
box-shadow: none;
}
.mem-plans.has-selection .mem-plan.is-hot:not(.is-selected) .mem-plan-buy:hover {
background: var(--surface-2);
border-color: var(--brand);
color: var(--brand);
}
/* ── 确认开通浮层（叠在当前页上）───────────────────────────────── */
.mem-modal {
position: fixed;
inset: 0;
z-index: 260;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.mem-modal[hidden] { display: none !important; }
.mem-modal-mask {
position: absolute; inset: 0;
background: rgba(2, 6, 23, .42);
backdrop-filter: blur(2px);
animation: mem-modal-fade .16s ease-out;
}
.mem-modal-card {
position: relative;
width: 100%; max-width: 400px;
padding: 28px 28px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xl);
animation: mem-modal-in .18s ease-out;
}
@keyframes mem-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mem-modal-in {
from { opacity: 0; transform: translateY(10px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mem-modal-close {
position: absolute; top: 14px; right: 14px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
appearance: none; border: 0; border-radius: var(--r-sm);
background: transparent; color: var(--text-muted);
cursor: pointer;
transition: background .14s ease, color .14s ease;
}
.mem-modal-close:hover { background: var(--surface-2); color: var(--text); }
.mem-modal-eyebrow {
font-size: var(--fz-2xs); font-weight: 700;
color: var(--brand); letter-spacing: .12em;
}
.mem-modal-title {
margin: 6px 0 0;
font-family: var(--font-display);
font-size: 1.375rem; font-weight: 700; color: var(--text);
}.mem-modal-price {
margin-top: 14px;
display: flex; align-items: baseline; gap: 2px;
font-family: var(--font-mono);
}
.mem-modal-price .cur { font-size: var(--fz); color: var(--text-soft); }
.mem-modal-price .num {
font-size: 2rem; font-weight: 700; line-height: 1; color: var(--text);
letter-spacing: -.02em;
}.mem-modal-pay {
margin-top: 16px; padding: 11px 13px;
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface-2);
}
.mem-modal-pay-label { font-size: var(--fz-xs); color: var(--text-muted); }
.mem-modal-pay-chip {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fz-sm); font-weight: 600; color: var(--text);
}
.mem-modal-pay-chip svg { color: #1677ff; }
[data-theme="dark"] .mem-modal-pay-chip svg { color: #4d9bff; }
.mem-modal-actions {
margin-top: 20px;
display: flex; gap: 10px; justify-content: flex-end;
}
.mem-modal-actions .btn { min-height: 40px; }
/* ── 会员权益清单（所有套餐共有，不再每张卡重复） ────────────── */
.mem-perks {
list-style: none; margin: -6px 0 18px;
padding: 0;
display: flex; flex-wrap: wrap; gap: 8px;
}
.mem-perk {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px 5px 9px;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background: var(--surface);
font-size: var(--fz-xs); font-weight: 600;
color: var(--text-soft);
}
.mem-perk svg { color: var(--brand); flex-shrink: 0; }
/* ── 待支付订单 ───────────────────────────────────────────── */
.mem-pending {
margin-bottom: 26px;
padding: 16px 18px 14px;
border: 1px solid var(--warn);
border-radius: var(--r-lg);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.mem-pending .mem-section-head { margin-bottom: 12px; }
.mem-pending-row {
display: flex; align-items: center; gap: 14px;
padding: 11px 0;
border-top: 1px solid var(--border);
}
.mem-pending-row:first-of-type { border-top: 0; }
.mem-pending-info { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.mem-pending-plan { font-size: var(--fz); font-weight: 700; color: var(--text); }
.mem-pending-no {
font-family: var(--font-mono); font-size: var(--fz-2xs); color: var(--text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mem-pending-amount {
font-family: var(--font-mono); font-size: var(--fz); font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
}
.mem-pending-ops { display: flex; gap: 8px; }
.mem-pending-ops .btn-mini { white-space: nowrap; }
/* ── 兑换码 ─────────────────────────────────────────────── */
.mem-code {
margin-bottom: 26px;
padding: 15px 18px 14px;
border: 1px dashed var(--border-strong);
border-radius: var(--r-lg);
background: var(--surface);
}
.mem-code .mem-pt-label { margin-bottom: 10px; }
.mem-code-row { display: flex; gap: 10px; align-items: stretch; }
.mem-code-input {
flex: 1; min-width: 0;
height: 38px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface-2);
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fz-sm);
letter-spacing: .02em;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.mem-code-input::placeholder {
color: var(--text-muted); letter-spacing: 0;
font-family: var(--font);
}
.mem-code-input:focus {
border-color: var(--brand);
background: var(--surface);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.mem-code-row .btn { min-height: 38px; padding: 0 22px; }
.mem-code .field-hint { margin-top: 9px; }
/* ── 顶部：当前权益 + 我的积分 合成一张卡 ─────────────────────────── */
.mem-top {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 14px;
margin-bottom: 22px;
align-items: stretch;
}
.mem-top > .mem-pass,
.mem-top > .mem-pt { margin-bottom: 0; }
/* 右侧积分卡：竖排，撑满高度 */
.mem-pt-inline {
display: flex; flex-direction: column; align-items: stretch;
justify-content: flex-start;
margin-bottom: 0;
gap: 0;
}
.mem-pt-inline .mem-pt-main { flex: 1; }
.mem-pt-inline .mem-pt-num { font-size: 2.25rem; }
.mem-pt-inline .mem-pt-ops {
margin-top: 16px; padding-top: 14px;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.mem-pt-inline .mem-pt-redeem { display: flex; flex-wrap: wrap; gap: 6px; }
/* ── 购买记录：兑换码列 ─────────────────────────────────────────── */
.mem-h-code {
font-family: var(--font-mono);
font-size: var(--fz-2xs);
color: var(--text-muted);
white-space: nowrap;
}
/* ==========================================================================
移动端适配（≤768px）
—— 桌面端是「左侧固定侧栏 + 右侧内容」，手机宽度下侧栏会占掉半屏，
顶部横向导航条又会把右边的入口裁掉（用户根本不知道能滑）。
所以移动端改成：顶栏（菜单 + 品牌）+ 抽屉式侧栏，主内容整屏宽。
—— 断点 768px 与 base.html 里的设备判断脚本保持一致。
========================================================================== */
.mobile-bar { display: none; }
.sidebar-mask { display: none; }
.mobile-close-btn { display: none; }
@media (max-width: 768px) {
/* ── 顶栏 ─────────────────────────────────────────────────────── */
.mobile-bar {
display: flex; align-items: center; gap: 10px;
position: sticky; top: 0; z-index: 90;
height: 52px; padding: 0 10px;
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: saturate(1.6) blur(12px);
-webkit-backdrop-filter: saturate(1.6) blur(12px);
border-bottom: 1px solid var(--border);
}
.mobile-brand {
font-size: var(--fz); font-weight: 700; color: var(--text);
text-decoration: none; letter-spacing: .01em;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-icon-btn {
width: 40px; height: 40px; flex: none;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--text);
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mobile-icon-btn:active { background: var(--surface-2); }
.mobile-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--brand); color: var(--brand-fg);
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--fz-xs); font-weight: 700;
}
.mobile-avatar.is-member { background: var(--warn); color: #fff; }
/* ── 侧栏 → 抽屉 ─────────────────────────────────────────────── */
.app-shell { flex-direction: column; }
.sidebar {
position: fixed; inset: 0 auto 0 0; z-index: 210;
width: 288px; max-width: 84vw; height: 100dvh;
overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
background: var(--surface);
border-right: 1px solid var(--border);
box-shadow: 10px 0 40px rgba(15, 23, 42, .18);
transform: translateX(-102%);
transition: transform .24s cubic-bezier(.4, 0, .2, 1);
padding: 10px 0 24px;
align-self: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }
/* 抽屉打开时锁住背景滚动 */
body.sidebar-open { overflow: hidden; }
.sidebar-mask {
display: block; position: fixed; inset: 0; z-index: 205;
background: rgba(15, 23, 42, .42);
opacity: 0; pointer-events: none;
transition: opacity .24s ease;
}
body.sidebar-open .sidebar-mask { opacity: 1; pointer-events: auto; }
/* 抽屉里恢复桌面端的竖排分组 */
.sidebar-section { display: block; padding: 4px 0 8px; }
.sidebar-section-title {
writing-mode: horizontal-tb; text-orientation: mixed;
padding: 9px 18px 5px;
}
.sidebar-nav {
flex-direction: column; flex: none; min-width: 0;
overflow-x: visible; padding: 0;
}
.sb-item { flex-shrink: 1; margin: 0 8px; padding: 10px 11px; min-height: 44px; }
.sb-label { flex: 1; min-width: 0; }
.sidebar-spacer { display: block; }
.sidebar-top { padding: 0 14px 4px; }
.sidebar-search-form { margin: 8px 14px 10px; }
.sidebar-collapse { display: none; }
.mobile-close-btn { display: inline-flex; }
/* 抽屉里的账号面板：不再粘底 */
.sidebar-user { border-top: 1px solid var(--border); }
/* 移动端的账户面板改成贴底整宽抽屉（place() 在移动端会清掉 inline 定位） */
.user-panel {
left: 12px; right: 12px; width: auto;
top: auto; bottom: 12px;
max-height: 72vh; overflow-y: auto;
}
/* ── 主内容整屏宽 ─────────────────────────────────────────────── */
.main { padding: 0 14px; min-height: 0; }
.main-inner { padding: 18px 0 32px; }
.container { padding-left: 0; padding-right: 0; }
/* ── 触控目标 ≥ 44px ──────────────────────────────────────────── */
.btn { min-height: 42px; padding: 10px 16px; }
.q-options li { padding: 13px 14px; min-height: 46px; }
.qnav .btn { flex: 1 1 auto; min-width: 30%; }
.sb-item { min-height: 44px; }
.sidebar-search-input { height: 42px; }
.wf-legend, .qtype-switch-btn { min-height: 38px; }
/* ── 练习页头部：进度数字窄屏会竖排，这里锁住单行 ─────────────── */
.quiz-head { gap: 8px 14px; padding-bottom: 12px; margin-bottom: 14px; }
.quiz-title h1 { font-size: 1.375rem; }
.quiz-progress { flex-wrap: nowrap; white-space: nowrap; gap: 8px; }
.quiz-progress > span { white-space: nowrap; }
.quiz-progress #qp-total { display: inline; }
/* ── 题卡 ─────────────────────────────────────────────────────── */
.qcard { padding: 14px 13px; }
.qcard-head { gap: 8px; }
/* ── Toast：手机上放顶部 ───────────────────────────────────────
原来固定右下角，在练习页正好压住「收藏 / 跳过 / 报告错误」那排按钮；
改成顶部，但要落在移动端顶栏（52px）下面，别盖住品牌名。 */
#xf-toast-stack {
left: 12px; right: 12px; top: 62px; bottom: auto;
width: auto; max-width: none;
flex-direction: column-reverse;
align-items: stretch;
}
.xf-toast { width: 100%; }
@keyframes xf-toast-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── 表格类：横向滚动，不挤成竖排 ─────────────────────────────── */
.mem-history-list, .xt-table-wrap, .table-wrap { overflow-x: auto; }
.mem-history-row { min-width: 620px; }
.xt-table-wrap::-webkit-scrollbar { height: 6px; }
.xt-table-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
/* ── 大标题在手机上收一档（商业感保留，只是别占满屏）─────────── */
.result-hero { gap: 16px; flex-direction: column; }
.result-title { font-size: 1.5rem; }
.hero-strip.hero-modern { padding: 18px 14px 14px; }
.dash-hero-title, .mem-hero-title { font-size: 1.5rem; }
/* ── 网格：手机上全部单列 ─────────────────────────────────────── */
.float-2, .float-3, .float-4 { grid-template-columns: 1fr !important; }
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ── 底部安全区（iPhone 底部横条）────────────────────────────── */
.qnav { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.main-inner { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}
/* 超窄屏（≤400px）再收一档 */
@media (max-width: 400px) {
.main { padding: 0 10px; }
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quiz-title h1 { font-size: 1.25rem; }
.qcard { padding: 12px 11px; }
.q-options li { padding: 12px 12px; }
.qnav .btn { padding: 10px 10px; font-size: var(--fz-sm); }
}