/**
* 集学 · 网页端统一设计系统
* 适用于：index.html + pages/*.html（H5 / 平板 / 桌面三端自适应）
*
* 设计原则（2026-09 重构）
* 1. 单一数据源：所有颜色/字号/间距/圆角/阴影/动效均由顶部「设计令牌」提供，
* 组件只消费变量，不再散落硬编码色值，保证任意页面观感一致。
* 2. 双主题：默认「石墨灰」（浅灰底 + 白色渐层卡片 + 学术靛蓝点缀，60/30/10 配色），
* 可切换「品牌彩色」，两套令牌一一对应，
* 组件层不写主题分支（个别需要差异的地方集中在「主题特例」小节）。
* 3. 移动优先：基准样式为手机视口，随后按 400 / 640 / 768 / 1024 / 1400 逐级增强。
* 4. 交互四态完整：默认 / 悬停（仅支持 hover 的设备）/ 按压 / 键盘焦点均给出反馈。
*
* 目录
* 01 设计令牌 02 基础重置与排版 03 页面布局
* 04 顶部导航栏 05 底部导航 Dock 06 卡片与分区
* 07 按钮 08 芯片/筛选/标签 09 列表
* 10 宫格与各类卡片 11 表单控件 12 弹窗（底部/居中/抽屉）
* 13 表格 14 提示 Toast 15 刷题练习页
* 16 结果页 17 页面专属样式 18 响应式增强
* 19 无障碍与动效偏好
* ========================================================== */
/* ==========================================================
* 01 设计令牌
* ======================================================== */
/* ---------- 石墨灰主题（默认）
* 配色逻辑（2026-09 简约化）：90% 中性无彩灰阶 + 10% 单一强调蓝
* 中性面彻底去掉蓝味（原先 #F5F7FB 一带蓝），只留一条纯粹的白/灰/近黑轴，
* 蓝色只出现在「可操作 / 已选中 / 关键数字」上 —— 克制才有质感。
* 层次不再靠投影堆叠，而靠 1px 细边框 + 留白（扁平化，详见阴影体系注释）。
* ---------- */
:root {
color-scheme: light;
/* 主色：全站唯一的彩色出口（可操作元素 / 选中态 / 进度）
所有派生蓝都收敛在同一条色相带上，避免多个蓝并存造成的杂乱感 */
--primary: #2563EB;
--primary-dark: #1D4ED8;
--primary-contrast: #FFFFFF;
--primary-soft: #EFF4FF;
--primary-bg-btn: #2563EB;
--primary-ring: rgba(37, 99, 235, .20);
/* 辅助色：主色同相位的亮阶，用于链接 / 图表 / 次级点缀（非操作主色） */
--accent: #3B82F6;
/* 状态色：干净可辨的三色，饱和度与主色同量级，不抢主色戏份 */
--success: #0E9C6B;
--success-bg: #EAF7F1;
--success-border: #A6DEC6;
--danger: #D9453E;
--danger-bg: #FDF0EF;
--danger-border: #F3C5C2;
--warning: #B8791F;
--warning-bg: #FDF6E7;
/* 状态色深档（2026-09-27）：专供「状态色底 + 白字」的场景（判题 ✓ / ✗ 圆章）。
原 --success #0E9C6B 配白字只有 3.51:1，判题结果偏偏最不能读错。 */
--success-strong: #0A7A54;
--danger-strong: #C0332C;
--warning-strong: #8A5A12;
/* 中性层级：纯粹的无彩灰阶（H≈220、S≤4%），不再给中性面上蓝色，
这样强调蓝出现时才真正"跳"出来；边框略加深以承担扁平风格的分层职责 */
--bg: #F4F5F7;
--bg-alt: #ECEEF1;
--card: #FFFFFF;
--card-bg: #FFFFFF;
/* ↓ 表面色阶：同一条中性轴上的 4 级，卡片 / 分组 / 芯片 / 图标瓦片共用，
保证图标与卡片同源，不会出现"各自一块颜色"的割裂感 */
--card-alt: #F8F9FA;
--input-bg: #F7F8FA;
--text: #17191C;
--text-secondary: #52575E;
--text-tertiary: #5F666E; /* 2026-09-27：原 #7C828B 白底仅 3.87:1，低于 AA 4.5:1 */
--border: #DBDEE3; /* 2026-09-27：原 #E5E7EA 与卡面仅 1.16:1，卡片轮廓几乎不可见 */
--border-strong: #D2D6DB;
--soft: #F1F2F4;
--soft-border: #E3E6E9;
--icon-border: #E3E6E9;
--overlay: rgba(16, 18, 22, .45);
/* 头部：半透明白 + 毛玻璃（滚动时与内容自然分层，不与卡片抢边界） */
--header-bg: rgba(255, 255, 255, .88);
--header-text: var(--text);
--header-shadow: rgba(16, 18, 22, .05);
/* Hero：不再用大面积品牌色渐变面 —— 改为与页面同源的浅灰面 + 深色文字，
层次靠字号、留白与底部一道 1px 强调线，桌面宽屏下也不会出现"一大块色" */
--hero-bg: linear-gradient(180deg, #FCFCFD 0%, #F7F8FA 100%);
--hero-shadow: rgba(16, 18, 22, .05);
--hero-soft: #FFFFFF;
--hero-soft-border: var(--border);
--hero-text: var(--text);
--hero-text-muted: var(--text-secondary);
--hero-icon: var(--primary);
/* 科目色条：主色渐层（唯一的大面积品牌色出口）；「全部科目」用中性灰阶区分
图标瓦片：走"卡面色阶的更深一级"的中性面（--icon-grad），与卡片同源，
品牌色不扩散到图标，避免蓝色块与中性卡并置产生割裂 */
--bar: linear-gradient(90deg, #2563EB 0%, #60A5FA 100%);
--bar-all: linear-gradient(90deg, #D7DADE 0%, #C3C7CC 100%);
/* 纯色版色条：--bar 是渐变，不能用于 border-color / box-shadow / 小圆点，
这些场景必须用 --bar-solid，否则整条声明会被浏览器判为非法而丢弃 */
--bar-solid: #2563EB;
--icon-grad: linear-gradient(160deg, #F8F9FA 0%, #EFF1F3 100%);
/* 背景纹理：点阵墨色与整体强度（数值刻意压低，仅提供质感不抢内容） */
--tex-dot: rgba(23, 25, 28, .06);
--tex-grain: .26;
/* 笔记区：中性便签底（与卡内二级面同色阶）+ 深色标题，
不再用额外的蓝色块，避免与图标瓦片、卡片抢色 */
--note-bg: #F7F8FA;
--note-border: #E5E7EA;
--note-title: var(--text);
--note-text: var(--text-secondary);
/* 语义前景色：写在「品牌色底 / 深色浮层 / 状态色底」之上的文字。
组件层禁止直接写 #fff —— 暗色模式下这些底的明度会反向翻转 */
--on-brand: #FFFFFF; /* 品牌渐变底（如彩色主题顶栏） */
--on-brand-danger: #FFE0E0; /* 品牌底上的危险语义（退出登录） */
--on-brand-warning: #FFE1A3; /* 品牌底上的警示语义（临时账号提示） */
--on-dark: #FFFFFF; /* 深色浮层（Toast） */
--on-state: #FFFFFF; /* 状态色底（判题 ✓ / ✗ 圆章） */
--scrim: rgba(0, 0, 0, .55); /* 图片上的局部压暗层 */
--scrim-fg: #FFFFFF;
--toast-bg: rgba(23, 25, 29, .93);
--toast-fg: #FFFFFF;
--toast-shadow: 0 10px 30px rgba(16, 18, 22, .22);
/* Toast 语义图标色（写在深色浮层之上，故取亮色档） */
--toast-ok: #6EE7B7;
--toast-err: #FFA9A2;
--toast-warn: #FFD37A;
/* 页面背景光晕：原先两套 rgba 写死在 body 规则里，收到令牌后由主题统一控制。
简约体系下几乎不可见 —— 只用来避免大面积纯色底显得死板 */
--glow-1: rgba(23, 25, 28, .045);
--glow-2: rgba(23, 25, 28, .035);
/* 难度标签：中性主题走面阶，彩色主题与暗色各自覆盖 */
--tag-easy-bg: var(--soft);
--tag-easy-fg: var(--text-secondary);
--tag-easy-bd: var(--border);
--tag-medium-bg: var(--soft-border);
--tag-medium-fg: var(--text);
--tag-medium-bd: var(--border-strong);
--tag-hard-bg: var(--text);
--tag-hard-fg: var(--card);
--tag-hard-bd: var(--text);
/* 图标瓦片糖果色：默认全部走中性面阶（--icon-grad），
彩色主题与暗色主题在各自块里统一覆盖，组件层不再出现散落色值 */
--m-ic-border: var(--icon-border);
--m-ic-green: var(--icon-grad);
--m-ic-yellow: var(--icon-grad);
--m-ic-blue: var(--icon-grad);
--m-ic-red: var(--icon-grad);
--m-ic-purple: var(--icon-grad);
--m-ic-cyan: var(--icon-grad);
--m-ic-gold: var(--icon-grad);
--m-ic-orange: var(--icon-grad);
--m-ic-pink: var(--icon-grad);
/* 圆角体系（略收敛：扁平语言下过大的圆角会让卡片显得"软而散"） */
--r-xs: 7px;
--r-sm: 9px;
--r-md: 11px;
--r-lg: 14px;
--r-xl: 18px;
--r-2xl: 20px;
--r-full: 999px;
/* 阴影体系（扁平化）：层次改由 1px 边框承担，投影只保留"几乎看不见"的一层，
用于把卡片从背景里轻轻托起；只有真正浮起的弹层（--sh-pop）才给实体投影。
这样宽屏下不会出现一片模糊的灰雾，也是"PC 端显得脏/糊"的主要来源之一 */
--sh-1: 0 1px 2px rgba(16, 18, 22, .03);
--sh-card: 0 1px 2px rgba(16, 18, 22, .035);
--sh-pop: 0 2px 6px rgba(16, 18, 22, .06), 0 18px 40px -12px rgba(16, 18, 22, .16);
--sh-float: 0 1px 3px rgba(16, 18, 22, .06);
/* 按钮：扁平语言下不做发光投影，按压态用底色深浅表达 */
--shadow-btn: 0 1px 2px rgba(16, 18, 22, .10);
--shadow-btn-hover: 0 2px 6px rgba(16, 18, 22, .14);
/* 字号体系 */
--fs-xs: 12px;
--fs-sm: 13px;
--fs-smd: 14px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 22px;
--fs-3xl: 26px;
--fs-4xl: 34px;
/* 用户字号缩放（2026-09-27）：刷题页字号控件写入 html 上的 --font-scale，
阅读类文本（题干 / 选项 / 解析 / 笔记 / 评论 / 列表副文）随之缩放。
此前只作用于题干 --qfont，其他页面完全不跟随，弱视用户只能放大题目。 */
--font-scale: 1;
/* 行高体系 */
--lh-tight: 1.3;
--lh-snug: 1.45;
--lh-normal: 1.6;
--lh-relaxed: 1.75;
/* 动效 */
--ease: cubic-bezier(.22, .61, .36, 1);
--t-fast: .14s;
--t: .22s;
/* 布局尺度 */
--page-max: 720px;
--pad-x: 18px;
--gap: 14px;
--card-p: 18px;
--header-h: 56px;
--nav-h: 62px;
--action-bar-h: 68px;
--safe-b: env(safe-area-inset-bottom, 0px);
/* 兼容旧名（历史写法仍引用） */
--bg-card: var(--card);
--border-color: var(--border);
--text-light: var(--text-tertiary);
--secondary: var(--primary-dark);
--radius: var(--r-lg);
--radius-sm: var(--r-md);
--shadow: var(--sh-card);
}
/* ---------- 品牌彩色主题 ---------- */
html[data-theme="color"] {
--primary: #7C5CFF;
--primary-dark: #6845F0;
--primary-contrast: #FFFFFF;
--primary-soft: #F1ECFF;
--primary-bg-btn: linear-gradient(135deg, #7C5CFF 0%, #A78BFF 100%);
--primary-ring: rgba(124, 92, 255, .28);
--accent: #A78BFF;
--success: #16C47F;
--success-bg: #E9F9F2;
--success-border: #16C47F;
--danger: #F0564D;
--danger-bg: #FDEEEE;
--danger-border: #F0564D;
--warning: #F5A623;
--warning-bg: #FEF6E7;
/* 状态色深档：彩色主题的亮状态色配白字对比更低，必须单独取深档 */
--success-strong: #0A8A5C;
--danger-strong: #C2352E;
--warning-strong: #8A5A12;
/* 中性面：只保留一丝紫味（H≈270、S≤6%），观感与石墨灰同源，
紫只作为强调色出现，不再满屏铺紫底 —— 宽屏下大面积紫会显得廉价 */
--bg: #F6F5F8;
--bg-alt: #EFEDF4;
--card: #FFFFFF;
--card-bg: #FFFFFF;
--card-alt: #F9F8FB;
--input-bg: #F8F7FA;
--text: #1B1824;
--text-secondary: #575263;
--text-tertiary: #6B6675;
--border: #DDD8E6;
--border-strong: #D6D1E0;
--soft: #F3F1F7;
--soft-border: #E5E2EC;
--icon-border: #E5E2EC;
--overlay: rgba(24, 20, 32, .44);
/* 顶栏保留品牌紫渐变：这是该主题唯一的大面积品牌面，也是它与石墨灰的辨识点 */
--header-bg: linear-gradient(135deg, #8F71FF 0%, #9E7DF8 55%, #B391F2 100%);
--header-text: #FFFFFF;
/* 底部 Dock / 操作栏专用底：不沿用顶栏渐变 —— 彩色渐变铺满 Dock 会
把三级行动色（未选中项）压得几乎不可读，浅色毛玻璃才是正解 */
--nav-bg: rgba(255, 255, 255, .92);
--header-shadow: rgba(124, 92, 255, .22);
/* 首屏改为极浅紫面 + 深紫文字（与石墨灰同一套"浅面 + 深字"逻辑），
不再用高饱和紫渐变铺满首屏，桌面宽屏下尤其明显 */
--hero-bg: linear-gradient(180deg, #F7F4FF 0%, #F2EEFC 100%);
--hero-shadow: rgba(124, 92, 255, .10);
--hero-soft: #FFFFFF;
--hero-soft-border: #E7E0FA;
--hero-text: #241C44;
--hero-text-muted: #5C5580;
--hero-icon: var(--primary);
--bar: hsl(var(--cat-hue, 215), 72%, 62%);
--bar-solid: hsl(var(--cat-hue, 215), 72%, 62%);
--icon-border: #EDE7FB;
--bar-all: linear-gradient(90deg, #7C5CFF, #8AB4F8, #7BC9A8, #F6B56A);
/* 背景纹理：紫色主题用同色相点阵 */
--tex-dot: rgba(124, 92, 255, .14);
--tex-grain: .45;
--note-bg: #FFF9E9;
--note-border: #F1E2B6;
--note-title: #96721A;
--note-text: #5E4C1C;
/* 彩色主题顶栏是不透明紫渐变，牌面上的前景与警示色需单独提亮 */
--on-brand: #FFFFFF;
--on-brand-danger: #FFE0E0;
--on-brand-warning: #FFE1A3;
--glow-1: rgba(124, 92, 255, .10);
--glow-2: rgba(196, 107, 240, .08);
--tag-easy-bg: #E6F7ED;
--tag-easy-fg: #2B8A3E;
--tag-easy-bd: transparent;
--tag-medium-bg: #FFF9DB;
--tag-medium-fg: #E67700;
--tag-medium-bd: transparent;
--tag-hard-bg: #FDEEEE;
--tag-hard-fg: #C92A2A;
--tag-hard-bd: transparent;
/* 糖果色图标瓦片（彩色主题专属） */
--m-ic-border: transparent;
--m-ic-green: linear-gradient(135deg, #DCF7E8, #B2F0C9);
--m-ic-yellow: linear-gradient(135deg, #FFF6DA, #FFEBAC);
--m-ic-blue: linear-gradient(135deg, #E3EFFF, #C4DBFF);
--m-ic-red: linear-gradient(135deg, #FFE5E5, #FFCCCC);
--m-ic-purple: linear-gradient(135deg, #F2E8FF, #E2CFFF);
--m-ic-cyan: linear-gradient(135deg, #DBF6FF, #B8EDFF);
--m-ic-gold: linear-gradient(135deg, #FFF3DC, #FFE1A3);
--m-ic-orange: linear-gradient(135deg, #FFECDA, #FFD6AE);
--m-ic-pink: linear-gradient(135deg, #FFE3F0, #FFC7E2);
--sh-1: 0 1px 2px rgba(24, 20, 32, .04);
--sh-card: 0 1px 2px rgba(24, 20, 32, .04);
--sh-pop: 0 2px 6px rgba(24, 20, 32, .06), 0 18px 40px -12px rgba(24, 20, 32, .18);
--sh-float: 0 1px 3px rgba(24, 20, 32, .07);
--shadow-btn: 0 1px 2px rgba(124, 92, 255, .20);
--shadow-btn-hover: 0 2px 6px rgba(124, 92, 255, .28);
}
/* ==========================================================
* 01.1 暗色层（三态：跟随系统 / 强制亮 / 强制暗）
* ------------------------------------------------------------
* 触发：theme.js 在 上写 data-scheme="dark"（另见 02 节的说明）
* 位置：必须排在两套浅色主题之后 —— 同为 html 级选择器，后者覆盖前者，
* 因此暗色只需「改写中性面 + 提亮品牌色」，组件层完全不用改。
* 组合：mono+light / mono+dark / color+light / color+dark 四种，
* 中性面与状态体系在下方公共块统一给出，品牌色分主题微调。
* ======================================================== */
html[data-scheme="dark"] {
color-scheme: dark;
/* 中性面：整体压暗但保留层次 —— 卡片必须比背景亮一档，
否则整屏发黑、卡片边界消失（这也是暗色显得"糊"的主因）。
底色不用纯黑（#000 会让文字边缘发虚、OLED 拖影） */
/* 暗色同样去蓝味：纯中性灰阶轴（与亮色同一套色相逻辑），
强调色在暗底上单独提亮（见分主题块），保证 4.5:1 */
--bg: #111214;
--bg-alt: #17191C;
--card: #1B1D20;
--card-bg: #1B1D20;
--card-alt: #222427;
--input-bg: #17191C;
--text: #ECEDEF;
--text-secondary: #B2B6BB;
--text-tertiary: #868B92;
--border: #292C30;
--border-strong: #3B3F44;
--soft: #232527;
--soft-border: #2E3135;
--icon-border: #2E3135;
--overlay: rgba(0, 0, 0, .68);
/* 顶栏：深色毛玻璃（与浅色一致地保持半透明，滚动时才有分层感） */
--header-bg: rgba(23, 25, 28, .88);
--header-text: var(--text);
--header-shadow: rgba(0, 0, 0, .42);
--nav-bg: rgba(23, 25, 28, .94);
/* Hero：比卡片再亮半档的中性面（扁平语言下靠明度差与边框分层），
不再用深蓝渐变 —— 暗色里渐变最容易显脏 */
--hero-bg: linear-gradient(180deg, #212326 0%, #1D1F22 100%);
--hero-shadow: rgba(0, 0, 0, .38);
--hero-soft: #232528;
--hero-soft-border: var(--border);
--hero-text: #F2F3F4;
--hero-text-muted: #A9AEB4;
--hero-icon: #7EA6FF;
/* 状态色：暗底上需要提亮一档才能维持 4.5:1，同时保留色相辨识度 */
--success: #35C98D;
--success-bg: #12261E;
--success-border: #2C6449;
--danger: #FF6B61;
--danger-bg: #2A1717;
--danger-border: #6B3230;
--warning: #E0A63A;
--warning-bg: #2A2214;
--warning-border: #6B5322;
/* 暗色下状态底提亮、字转深色（--on-state: #0E131C），沿用亮档即可保证对比 */
--success-strong: #35C98D;
--danger-strong: #FF6B61;
--warning-strong: #E0A63A;
/* 便签：暗色下的暖色便签会刺眼，改为中性低饱和 */
--note-bg: #1E2023;
--note-border: #2C2F33;
--note-title: #C8CED8;
--note-text: #B2B7BE;
/* 纹理：暗色下点阵要更淡，否则整屏发灰；同样去蓝味 */
--tex-dot: rgba(200, 205, 212, .08);
--tex-grain: .16;
--glow-1: rgba(160, 170, 190, .07);
--glow-2: rgba(160, 170, 190, .05);
/* 浮层 / 压暗层 */
--toast-bg: rgba(8, 12, 20, .94);
--toast-fg: #EEF2FF;
--toast-shadow: 0 10px 30px rgba(0, 0, 0, .5);
--scrim: rgba(0, 0, 0, .62);
--scrim-fg: #FFFFFF;
--on-dark: #F2F5FB;
--on-state: #0E131C; /* 判题圆章底变亮，字改深色才够对比度 */
--on-brand: #0E131C;
--on-brand-danger: #FFD5D0;
--on-brand-warning: #FFE1A3;
/* 阴影：浅色墨影在深色底上不可见，改用纯黑并提高不透明度。
卡片阴影故意比浅色更重 —— 暗色下没有"亮度差"可用，靠阴影和描边分层 */
--sh-1: 0 1px 2px rgba(0, 0, 0, .28);
--sh-card: 0 1px 2px rgba(0, 0, 0, .24), 0 6px 18px -8px rgba(0, 0, 0, .42);
--sh-pop: 0 2px 6px rgba(0, 0, 0, .38), 0 20px 48px -12px rgba(0, 0, 0, .62);
--sh-float: 0 1px 3px rgba(0, 0, 0, .36);
--shadow-btn: 0 1px 3px rgba(0, 0, 0, .36);
--shadow-btn-hover: 0 2px 8px rgba(0, 0, 0, .46);
/* 图标瓦片：暗色下糖果色降饱和，避免整屏彩块跳动 */
--m-ic-border: transparent;
--m-ic-green: linear-gradient(135deg, #1E3A2C, #2A5540);
--m-ic-yellow: linear-gradient(135deg, #3A3320, #574B2A);
--m-ic-blue: linear-gradient(135deg, #1E2C48, #2A4066);
--m-ic-red: linear-gradient(135deg, #3A2222, #573030);
--m-ic-purple: linear-gradient(135deg, #2E2748, #423869);
--m-ic-cyan: linear-gradient(135deg, #1A3340, #264B5C);
--m-ic-gold: linear-gradient(135deg, #3A3020, #56462C);
--m-ic-orange: linear-gradient(135deg, #3A2A1C, #56402A);
--m-ic-pink: linear-gradient(135deg, #3A2434, #56344C);
}
/* ---------- 暗色 × 石墨灰：品牌蓝提亮一档（原 #3355E9 在深底上不足 4.5:1） ---------- */
html[data-scheme="dark"]:not([data-theme="color"]) {
--primary: #7B9DF7;
--primary-dark: #5B86F5;
--primary-contrast: #0E1318;
--primary-soft: #1F2530;
--primary-bg-btn: #6A8DF3;
--primary-ring: rgba(123, 157, 247, .34);
--accent: #93B4FF;
--bar: linear-gradient(90deg, #4F7BEF 0%, #93B4FF 100%);
--bar-solid: #6A8DF3;
--bar-all: linear-gradient(90deg, #5A6470, #6E7683, #5C7C6E, #8A7350);
--icon-grad: linear-gradient(160deg, #25282C 0%, #1E2124 100%);
}
/* ---------- 暗色 × 品牌彩色：紫提亮并降饱和，避免暗底上发荧光 ---------- */
html[data-scheme="dark"][data-theme="color"] {
--primary: #A78BFF;
--primary-dark: #8E6DFF;
--primary-contrast: #171029;
--primary-soft: #2A2440;
--primary-bg-btn: #9B7DF5;
--primary-ring: rgba(167, 139, 255, .34);
--accent: #C4A9FF;
--bar: linear-gradient(90deg, #8E6DFF 0%, #C4A9FF 100%);
--bar-solid: #9B7DF5;
--bar-all: linear-gradient(90deg, #8E6DFF, #7BA8F5, #4FB98A, #D9A05C);
--icon-grad: linear-gradient(160deg, #272130 0%, #211C2A 100%);
/* 首屏同样收敛为"比卡片亮半档的深紫面"，与亮色彩色主题保持同一套逻辑 */
--hero-bg: linear-gradient(180deg, #2B2541 0%, #252131 100%);
/* 彩色主题在暗色下保留品牌顶栏（深紫而非公共的深灰毛玻璃）——
顶栏是该主题唯一的品牌面，保留可辨识度 */
--header-bg: linear-gradient(135deg, #3A2C63 0%, #43306B 100%);
--header-shadow: rgba(124, 92, 255, .26);
}
/* 暗色下的补充修正：个别在浅色方案里写死的视觉假设 */
/* 1) 顶栏描边高光在深底上过亮，收敛为分隔线 */
html[data-scheme="dark"] .header::after {
background: rgba(255, 255, 255, .06);
}
html[data-scheme="dark"]:not([data-theme="color"]) .header {
box-shadow: 0 1px 2px rgba(0, 0, 0, .34);
}
/* 2) 结果页环形图内圈原本写死 card 白，改由令牌驱动（见 16 节）后无需特例，
此处只压掉暗色下过强的外发光 */
html[data-scheme="dark"] .result-ring {
box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(0, 0, 0, .45);
}
/* ==========================================================
* 02 基础重置与排版
* ======================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Arial, sans-serif;
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--text);
background: var(--bg);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* 页面纹理层：细密点阵 + 极轻噪点，给大面积浅底增加质感
* - position: fixed + z-index: -1：铺在画布背景之上、内容之下，不参与交互
* - 只出现在页面留白区（卡片为纯白不透明，正文可读性不受影响）
* - 纹理强度通过 --tex-dot / --tex-grain 令牌控制，两套主题各自取值 */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(var(--tex-dot) 1px, transparent 1.2px),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
background-size: 22px 22px, 160px 160px;
background-position: 0 0, 0 0;
background-repeat: repeat, repeat;
opacity: var(--tex-grain);
}
/* 页面背景光晕：两层极淡的品牌色晕，避免大面积平灰。
颜色由 --glow-1 / --glow-2 令牌提供（主题与暗色各自定义），此处只管几何 */
body {
background:
radial-gradient(1000px 420px at 12% -10%, var(--glow-1), transparent 60%),
radial-gradient(760px 380px at 100% 4%, var(--glow-2), transparent 58%),
var(--bg);
background-attachment: fixed;
}
a {
color: inherit;
text-decoration: none;
}
button {
border: none;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
}
img {
max-width: 100%;
display: block;
}
input,
textarea,
select {
font: inherit;
color: inherit;
}
::selection {
background: var(--primary);
color: var(--primary-contrast);
}
::placeholder {
color: var(--text-tertiary);
opacity: 1;
}
/* 统计数字、题号、计时器等数值：等宽数字，避免刷新时宽度跳动 */
.stat-value,
.practice-progress,
.exam-timer,
.font-value,
.card-num-idx,
.ai-ref-t,
.result-score {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 统一键盘焦点环 */
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
[data-a11y="1"] {
cursor: pointer;
}
[data-a11y="1"]:focus {
outline: none;
}
[data-a11y="1"]:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--r-xs);
}
/* ==========================================================
* 02.1 图标系统
* 全站图标统一为「单色线性 SVG」（assets/js/icons.js，24×24 线性描边）：
* · 尺寸 = 容器的 font-size（.ic 宽高 1em）
* · 颜色 = currentColor，永远跟随主题主色 / 文字色
* 界面里因此不再出现彩色 Emoji 带来的杂色，配色自然统一。
* 用法：静态 ；动态 el.innerHTML = icIcon('home') + 文本
* ======================================================== */
.ic {
width: 1em;
height: 1em;
flex: none;
display: block;
}
/* 文字流中内嵌的小图标（与文字基线对齐，随文字色变化） */
.ic-inline {
display: inline-block;
vertical-align: -.15em;
}
/* 图标容器统一居中，并按语义指定颜色（不再依赖 Emoji 自带色） */
.nav-icon,
.hero-stat-icon,
.menu-icon,
.empty-icon,
.about-logo,
.practice-icon,
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
}
.hero-stat-icon {
color: var(--hero-icon);
}
.menu-icon,
.empty-icon,
.about-logo,
.ai-welcome .big {
color: var(--primary);
}
/* 文字流中的图标（标题 / 列表 / 按钮文案前缀）：与文字基线对齐 */
.card-title .ic,
.list-title .ic,
.menu-title .ic,
.practice-icon .ic,
.q-report-entry .ic {
display: inline-block;
vertical-align: -.15em;
}
.card-title .ic,
.list-title .ic {
color: var(--primary);
}
/* 收藏态：实心主色星 / 未收藏：主色描边星 */
.practice-icon.fav-on {
color: var(--warning);
}
.practice-icon.fav-on .ic {
fill: currentColor;
}
/* ==========================================================
* 03 页面布局
* ======================================================== */
/* 基准：默认预留「底部操作栏」高度，保证任何页面内容都不会被固定栏遮挡 */
.page {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
padding: 14px var(--pad-x) calc(var(--action-bar-h) + var(--safe-b) + 20px);
}
/* 带底部导航的页面：额外为 Dock 让出安全距离 */
body.with-bottom-nav .page {
padding-bottom: calc(var(--action-bar-h) + var(--nav-h) + var(--safe-b) + 20px);
}
/* 按页面实际存在的固定栏数量精确计算底部留白，避免尾部出现过大空白
（置于 @supports 内：不支持 :has() 的环境继续沿用上面的安全间距） */
@supports selector(:has(*)) {
body:not(:has(.bottom-nav)):not(:has(.action-bar)) .page {
padding-bottom: 28px;
}
body:has(.bottom-nav):not(:has(.action-bar)) .page {
padding-bottom: calc(var(--nav-h) + var(--safe-b) + 24px);
}
}
/* 横向滚动容器统一隐藏滚动条 */
.study-grid,
.major-tabs,
.filter-bar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.study-grid::-webkit-scrollbar,
.major-tabs::-webkit-scrollbar,
.filter-bar::-webkit-scrollbar {
display: none;
}
/* ==========================================================
* 04 顶部导航栏
* 结构：[返回] + 居中标题 + [右侧操作]
* 无返回按钮时标题左对齐（避免与右侧操作区重叠）
* ======================================================== */
.header {
position: sticky;
top: 0;
z-index: 100;
background: var(--header-bg);
color: var(--header-text);
padding: 8px 14px;
min-height: var(--header-h);
box-shadow: 0 2px 12px var(--header-shadow);
background-clip: padding-box;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: rgba(255, 255, 255, .18);
}
html:not([data-theme="color"]) .header {
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(16, 18, 22, .05);
}
html:not([data-theme="color"]) .header::after {
display: none;
}
.header-inner {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
max-width: var(--page-max);
margin: 0 auto;
}
.header-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
max-width: calc(100% - 132px);
min-width: 0;
text-align: center;
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: .3px;
line-height: var(--lh-tight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
/* 无返回按钮的页面：标题靠左排布 */
.header-inner:not(:has(.header-back)) .header-title {
position: static;
left: auto;
transform: none;
max-width: none;
flex: 1 1 auto;
min-width: 0;
text-align: left;
padding: 4px 0;
pointer-events: auto;
}
.header-back {
flex: none;
width: 34px;
height: 34px;
margin-left: -6px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 26px;
font-weight: 300;
line-height: 1;
color: var(--header-text);
background: var(--card-bg);
border: 1px solid var(--soft-border);
cursor: pointer;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
-webkit-user-select: none;
user-select: none;
}
html[data-theme="color"] .header-back {
color: var(--on-brand);
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .32);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.header-back:active {
transform: scale(.9);
background: var(--soft);
}
html[data-theme="color"] .header-back:active {
background: rgba(255, 255, 255, .3);
}
.header-actions {
position: relative;
z-index: 2;
flex: none;
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 68%;
flex-wrap: wrap;
justify-content: flex-end;
}
.header-action {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 14px;
border-radius: var(--r-full);
font-size: var(--fs-smd);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: var(--header-text);
background: var(--soft);
border: 1px solid var(--soft-border);
cursor: pointer;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
html[data-theme="color"] .header-action {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .3);
color: var(--on-brand);
}
.header-action:active {
background: var(--soft-border);
}
html[data-theme="color"] .header-action:active {
background: rgba(255, 255, 255, .32);
}
.header-action.logout {
color: var(--danger);
}
html[data-theme="color"] .header-action.logout {
color: var(--on-brand-danger);
}
.theme-toggle {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
cursor: pointer;
background: var(--soft);
border: 1px solid var(--soft-border);
color: var(--text);
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
html[data-theme="color"] .theme-toggle {
background: rgba(255, 255, 255, .16);
border-color: rgba(255, 255, 255, .3);
color: var(--on-brand);
}
.theme-toggle:active {
transform: rotate(-18deg) scale(.92);
background: var(--soft-border);
}
/* 顶栏品牌 logo */
img.hd-logo {
height: 26px;
width: auto;
vertical-align: -7px;
margin-right: 6px;
border-radius: var(--r-xs);
/* 亮色浅底上轻微加深，弥补 logo 素材本身偏淡 */
filter: contrast(1.18) saturate(1.15);
}
/* 深色底（品牌紫顶栏 / 暗色顶栏）上 logo 反白，避免紫字沉进紫底/黑底里 */
html[data-theme="color"]:not([data-scheme="dark"]) img.hd-logo,
html[data-scheme="dark"] img.hd-logo {
filter: brightness(0) invert(1) opacity(.95);
}
/* Hero 头像位使用同一素材，同样按底色反白 */
html[data-theme="color"] .avatar-logo,
html[data-scheme="dark"] .avatar-logo {
filter: brightness(0) invert(1);
}
.hd-logo {
font-style: normal;
}
/* ==========================================================
* 05 底部导航 Dock
* ======================================================== */
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
justify-content: space-around;
align-items: stretch;
padding: 6px 0 calc(6px + var(--safe-b));
background: var(--nav-bg, var(--header-bg));
border-top: 1px solid var(--border);
box-shadow: var(--sh-float);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.nav-item {
position: relative;
flex: 1;
min-width: 0;
padding: 4px 0 2px;
text-align: center;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-tertiary);
cursor: pointer;
transition: color var(--t-fast) var(--ease);
-webkit-user-select: none;
user-select: none;
}
.nav-icon {
width: 40px;
height: 26px;
margin: 0 auto 1px;
line-height: 26px;
font-size: 22px;
border-radius: var(--r-md);
transition: transform var(--t-fast) var(--ease);
}
.nav-item.active {
color: var(--primary);
font-weight: 700;
}
.nav-item.active .nav-icon {
transform: translateY(-1px);
}
.nav-item.active::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 18px;
height: 3px;
border-radius: 2px;
background: var(--primary);
}
.nav-item:active .nav-icon {
transform: scale(.88);
}
@media (hover: hover) {
.bottom-nav .nav-item:hover {
color: var(--primary);
}
}
/* ==========================================================
* 06 卡片与分区
* ======================================================== */
.card {
position: relative;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-card);
padding: var(--card-p);
margin: 0 0 var(--gap);
}
.card > *:last-child {
margin-bottom: 0;
}
/* 卡片标题区 */
/* 卡片标题：2026-09-27 由 15px 提到 16px —— 原先标题只比正文大 1px，
层级全靠字重撑，扫读时看不出主次 */
.card-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-width: 0;
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: .3px;
line-height: var(--lh-tight);
color: var(--text);
margin-bottom: 12px;
}
.card-title > span,
.card-title > a {
min-width: 0;
}
.card-title > span:first-child,
.card-title > .card-title-main {
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.card-subtitle {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--text-tertiary);
line-height: var(--lh-snug);
}
/* 标题下方的补充说明行（如首页"点击科目进入练习"） */
.card-title + .card-subtitle {
margin-top: -8px;
margin-bottom: 10px;
}
.card-more {
flex: none;
font-size: var(--fs-smd);
font-weight: 600;
color: var(--primary);
cursor: pointer;
white-space: nowrap;
transition: opacity var(--t-fast) var(--ease);
}
.card-more:active {
opacity: .6;
}
/* 步骤标签（① 选择专业 / ② 选择科目） */
.section-label {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 10px;
font-size: var(--fs-smd);
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: .2px;
}
.section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ---------- 用户 / 科目 Hero 卡 ---------- */
/* Hero 卡：黑白主题为纯色平面，无渐变、无装饰光斑 */
.hero-card {
position: relative;
overflow: hidden;
padding: 22px 20px;
margin-bottom: var(--gap);
border-radius: var(--r-2xl);
border: 1px solid var(--hero-soft-border);
background: var(--hero-bg);
color: var(--hero-text);
box-shadow: 0 12px 32px -12px var(--hero-shadow);
}
/* 装饰光斑：仅品牌彩色主题启用 */
.hero-card::before,
.hero-card::after {
content: none;
}
html[data-theme="color"] .hero-card::before,
html[data-theme="color"] .hero-card::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
}
html[data-theme="color"] .hero-card::before {
right: 40px;
bottom: -56px;
width: 110px;
height: 110px;
background: rgba(255, 255, 255, .08);
}
html[data-theme="color"] .hero-card::after {
right: -40px;
top: -40px;
width: 140px;
height: 140px;
background: rgba(255, 255, 255, .10);
}
html[data-theme="color"] .hero-card {
box-shadow: 0 12px 30px var(--hero-shadow);
}
.hero-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.user-avatar {
flex: none;
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 25px;
line-height: 1;
background: var(--hero-soft);
border: 2px solid var(--hero-soft-border);
box-shadow: 0 2px 8px rgba(16, 18, 22, .10);
}
/* 头像位 logo 图片 */
.avatar-logo {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.user-info {
flex: 1 1 auto;
min-width: 0;
}
.user-name {
font-size: var(--fs-xl);
font-weight: 800;
letter-spacing: .3px;
line-height: var(--lh-tight);
word-break: break-word;
}
.user-meta {
margin-top: 5px;
font-size: var(--fs-smd);
line-height: var(--lh-snug);
color: var(--hero-text-muted);
}
/* 临时账号提示：Hero 卡内的强调说明 */
.guest-tip {
color: var(--warning);
font-weight: 500;
}
html[data-theme="color"] .guest-tip {
color: var(--on-brand-warning);
}
.user-summary {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.user-summary > .user-info {
min-width: 0;
}
/* Hero 内嵌三项统计 */
.hero-stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.hero-stat {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
padding: 11px 12px;
border-radius: var(--r-lg);
background: var(--hero-soft);
/* 2026-09-27：白底压在近白渐变上原本几乎看不见边界，改用更深描边 + 极轻投影分层 */
border: 1px solid var(--border-strong);
box-shadow: var(--sh-card);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.hero-stat > div {
flex: 1 1 auto;
min-width: 0;
}
.hero-stat-icon {
flex: none;
font-size: 18px;
line-height: 1;
}
/* 2026-09-27：首页这三个数是最该被看见的信息，此前 18px —— 比次级页面的
统计值（22px）还小，等于把最关键的数据做成了全站最弱的数字。 */
.hero-stat .stat-value {
font-size: clamp(20px, 5.4vw, 26px);
font-weight: 800;
line-height: 1.15;
color: var(--hero-text);
white-space: nowrap;
}
.hero-stat .stat-label {
margin-top: 2px;
font-size: var(--fs-sm);
color: var(--hero-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-stat-link {
cursor: pointer;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hero-stat-link:active {
transform: scale(.98);
}
@media (hover: hover) {
.hero-stat-link:hover {
border-color: var(--hero-soft-border);
filter: brightness(1.04);
}
}
/* ---------- 通用统计格 ---------- */
.stat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.stat-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 卡片内的浅灰统计格：与白卡形成轻微色阶，避免整块纯白发闷 */
.stat-item {
padding: 14px 8px;
text-align: center;
background: var(--card-alt);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.stat-value {
font-size: var(--fs-2xl);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.4px;
color: var(--text);
word-break: break-all;
}
/* 2026-09-27：状态数字改用深档，原色在白底上不到 4.5:1 */
.stat-value.good {
color: var(--success-strong);
}
.stat-value.bad {
color: var(--danger-strong);
}
/* 统计标签不再用三级灰：它是解释数字的，读不清等于数字白给 */
.stat-label {
margin-top: 5px;
font-size: var(--fs-sm);
color: var(--text-secondary);
}
/* ==========================================================
* 06.1 状态体系：加载（骨架屏） / 空 / 错误（可重试）
* ------------------------------------------------------------
* 约定：容器在发起请求前先渲染骨架，成功则替换为内容，失败则替换为错误卡。
* 骨架与错误卡的颜色全部走面阶令牌，暗色模式自动跟随，无需主题分支。
* 用法：
* 加载 container.innerHTML = skeletonQuestion(); // app.js 提供的模板函数
* 空态 container.innerHTML = stateEmpty('star', '暂无收藏');
* 错误 container.innerHTML = stateError('加载失败', 'retryXxx()');
* ======================================================== */
/* ---------- 骨架屏 ---------- */
.skeleton {
position: relative;
overflow: hidden;
background: var(--soft);
border-radius: var(--r-sm);
}
.skeleton::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--soft-border), transparent);
transform: translateX(-100%);
animation: skSweep 1.2s var(--ease) infinite;
}
@keyframes skSweep {
to { transform: translateX(100%); }
}
/* 尊重「减弱动态效果」：去掉扫光，只保留静态底色 */
@media (prefers-reduced-motion: reduce) {
.skeleton::after {
animation: none;
opacity: .45;
transform: none;
}
}
.sk-title {
height: 20px;
width: 46%;
margin-bottom: 16px;
}
.sk-line {
height: 14px;
margin-bottom: 10px;
}
.sk-line.w90 { width: 90%; }
.sk-line.w70 { width: 70%; }
.sk-line.w50 { width: 50%; }
.sk-option {
height: 54px;
margin-bottom: 10px;
border-radius: var(--r-md);
}
.sk-card {
height: 84px;
margin-bottom: 12px;
border-radius: var(--r-lg);
}
/* ---------- 空 / 错误 状态容器 ---------- */
.state-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 30px 18px;
text-align: center;
}
.state-icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
color: var(--text-tertiary);
}
.state-text {
font-size: var(--fs-smd);
font-weight: 600;
color: var(--text-secondary);
line-height: var(--lh-snug);
}
.state-desc {
margin-top: -4px;
font-size: var(--fs-sm);
color: var(--text-tertiary);
line-height: var(--lh-normal);
max-width: 30em;
}
.state-actions {
margin-top: 4px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.state-box.is-error .state-icon {
color: var(--danger);
}
/* ---------- 通用工具类（替代散落在 HTML 里的内联样式） ---------- */
/* 隐藏：刻意不加 !important —— 页面里大量用 el.style.display 做显隐，
加了 !important 会让 JS 永远无法把元素显示回来 */
.is-hidden {
display: none;
}
/* 题干 / 选项中自动渲染的题目图片 */
.q-img {
max-width: 100%;
border-radius: var(--r-md);
margin: 6px 0;
display: block;
}
/* 只读展示的选项（收藏、错题回顾等场景）：不可点选 */
.option-static {
pointer-events: none;
}
/* ==========================================================
* 07 按钮体系
* 统一：尺寸 / 圆角 / 悬停 / 按压 / 禁用 / 键盘焦点
* ======================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 40px;
padding: 0 16px;
border: 1px solid transparent;
border-radius: var(--r-md);
font-size: var(--fs-base);
font-weight: 600;
line-height: 1.2;
letter-spacing: .3px;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.btn:focus {
outline: none;
}
.btn:focus-visible {
box-shadow: 0 0 0 3px var(--primary-ring);
}
.btn:active {
transform: scale(.96);
}
.btn-primary {
background: var(--primary-bg-btn);
border-color: transparent;
color: var(--primary-contrast);
box-shadow: var(--shadow-btn);
}
@media (hover: hover) {
.btn-primary:hover {
background: var(--primary-dark);
box-shadow: var(--shadow-btn-hover);
}
}
.btn-primary:active {
background: var(--primary-dark);
box-shadow: var(--shadow-btn);
}
.btn-ghost {
background: var(--card-bg);
border-color: var(--border-strong);
color: var(--text);
}
@media (hover: hover) {
.btn-ghost:hover {
background: var(--soft);
border-color: var(--border-strong);
}
}
.btn-ghost:active {
background: var(--soft);
}
.btn-sm {
min-height: 34px;
padding: 0 12px;
font-size: var(--fs-smd);
border-radius: var(--r-sm);
box-shadow: none;
}
.btn-sm.btn-primary {
box-shadow: var(--shadow-btn);
}
/* 触屏设备：小按钮加大可点区域 */
@media (pointer: coarse) {
.btn-sm {
min-height: 36px;
padding: 0 13px;
}
}
/* 禁用态统一规则：
* 浅灰底 + 三级灰字 + 去阴影，且不响应悬停/按压（避免"看起来能点"） */
.btn:disabled,
.action-btn:disabled,
.multi-submit:disabled,
.fb-submit:disabled,
.ai-send:disabled,
.ai-btn:disabled {
background: var(--soft-border);
border-color: var(--soft-border);
color: var(--text-tertiary);
box-shadow: none;
opacity: 1;
cursor: not-allowed;
}
.btn:disabled:active,
.action-btn:disabled:active {
transform: none;
}
@media (hover: hover) {
.btn:disabled:hover,
.action-btn:disabled:hover {
background: var(--soft-border);
border-color: var(--soft-border);
color: var(--text-tertiary);
box-shadow: none;
}
}
/* 底部操作栏按钮（上一题 / 交卷 / 错题练习…） */
.action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 0 20px;
border: 1px solid transparent;
border-radius: var(--r-lg);
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: .5px;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.action-btn:focus {
outline: none;
}
.action-btn:focus-visible {
box-shadow: 0 0 0 3px var(--primary-ring);
}
.action-btn:active {
transform: scale(.96);
}
.action-btn.primary {
background: var(--primary-bg-btn);
color: var(--primary-contrast);
box-shadow: var(--shadow-btn-hover);
}
@media (hover: hover) {
.action-btn.primary:hover {
background: var(--primary-dark);
}
}
.action-btn.primary:active {
background: var(--primary-dark);
box-shadow: var(--shadow-btn);
}
.action-btn.default {
background: var(--soft);
border-color: var(--border);
color: var(--text);
}
@media (hover: hover) {
.action-btn.default:hover {
background: var(--soft-border);
}
}
.action-btn.danger {
background: var(--danger-bg);
border-color: var(--danger-border);
color: var(--danger);
}
@media (hover: hover) {
.action-btn.danger:hover {
background: var(--danger-bg);
border-color: var(--danger);
}
}
/* 固定底部操作栏 */
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 88;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px var(--pad-x) calc(10px + var(--safe-b));
background: var(--nav-bg, var(--header-bg));
border-top: 1px solid var(--border);
box-shadow: var(--sh-float);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
/* 同时存在底部导航时：操作栏上移到导航之上，按钮自动两行排布 */
body.with-bottom-nav .action-bar {
bottom: calc(var(--nav-h) + var(--safe-b));
flex-wrap: wrap;
row-gap: 8px;
justify-content: center;
border-top: 1px solid var(--border);
}
body.with-bottom-nav .action-bar .action-btn {
flex: 1 1 30%;
min-width: 92px;
padding: 0 14px;
}
/* ==========================================================
* 08 芯片 / 筛选 / 标签 / 选项卡
* ======================================================== */
.filter-bar {
display: flex;
gap: 8px;
padding: 10px var(--pad-x);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: var(--page-max);
margin: 0 auto;
}
.filter-item {
appearance: none;
-webkit-appearance: none;
flex: none;
padding: 8px 30px 8px 15px;
border: 1px solid var(--soft-border);
border-radius: var(--r-full);
background-color: var(--card);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8F99' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
font-size: var(--fs-smd);
font-weight: 500;
line-height: 1.2;
color: var(--text);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.filter-item option {
background: var(--card-bg);
color: var(--text);
}
@media (hover: hover) {
.filter-item:hover {
border-color: var(--border-strong);
}
}
.filter-item.active {
background-color: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
box-shadow: 0 0 0 2px var(--primary-ring);
}
html[data-theme="color"] .filter-item.active {
background-color: var(--primary);
border-color: var(--primary);
color: var(--primary-contrast);
}
/* 横向选项卡（专业切换） */
.major-tabs {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 2px 0 12px;
}
.major-tab {
flex: none;
padding: 7px 16px;
border-radius: var(--r-full);
background: var(--soft);
border: 1px solid var(--soft-border);
color: var(--text-secondary);
font-size: var(--fs-smd);
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.major-tab.active {
background: var(--card-bg);
border-color: var(--primary);
color: var(--primary);
font-weight: 700;
box-shadow: 0 0 0 2px var(--primary-ring);
}
html[data-theme="color"] .major-tab.active {
background: var(--primary);
color: var(--primary-contrast);
}
/* 难度标签 */
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: var(--r-full);
font-size: var(--fs-xs);
font-weight: 600;
margin-left: 6px;
border: 1px solid transparent;
vertical-align: 1px;
}
.tag.easy {
background: var(--tag-easy-bg);
color: var(--tag-easy-fg);
border-color: var(--tag-easy-bd);
}
.tag.medium {
background: var(--tag-medium-bg);
color: var(--tag-medium-fg);
border-color: var(--tag-medium-bd);
}
.tag.hard {
background: var(--tag-hard-bg);
color: var(--tag-hard-fg);
border-color: var(--tag-hard-bd);
}
/* ==========================================================
* 09 列表（设置项 / 记录 / 章节）
* ======================================================== */
.list-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 34px;
padding: 14px 4px;
border-bottom: 1px solid var(--border);
cursor: pointer;
border-radius: var(--r-md);
transition: background var(--t-fast) var(--ease);
}
.list-item:last-child {
border-bottom: none;
}
.list-item > div:first-child,
.list-item > span.list-title {
flex: 1 1 auto;
min-width: 0;
}
.list-title {
font-size: var(--fs-md);
font-weight: 600;
letter-spacing: .2px;
line-height: var(--lh-snug);
color: var(--text);
word-break: break-word;
}
.list-sub {
margin-top: 4px;
font-size: var(--fs-sm);
color: var(--text-tertiary);
line-height: var(--lh-snug);
}
/* 列表项右侧「当前值」：用于外观设置一类需要回显当前选择的项 */
.list-value {
flex: none;
margin-left: auto;
font-size: var(--fs-smd);
font-weight: 600;
color: var(--primary);
white-space: nowrap;
}
.list-value + .list-arrow {
margin-left: 2px;
}
.list-arrow {
flex: none;
margin-left: auto;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 16px;
font-weight: 600;
color: var(--text-tertiary);
background: transparent;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) {
.list-item:hover .list-arrow {
background: var(--soft);
color: var(--primary);
}
}
.list-item:active .list-arrow {
background: var(--soft);
color: var(--primary);
}
.list-item.logout .list-title,
.list-item.logout .list-arrow {
color: var(--danger);
}
/* 行内图标瓦片 */
.list-item > .menu-icon {
margin-right: 0;
}
/* ==========================================================
* 10 宫格与各类卡片
* ======================================================== */
/* ---------- 功能宫格入口 ---------- */
.menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gap);
}
.menu-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--card-bg);
box-shadow: var(--sh-1);
cursor: pointer;
overflow: hidden;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
border-color var(--t-fast) var(--ease);
}
.menu-item:active {
transform: scale(.985);
}
@media (hover: hover) {
.menu-item:hover {
transform: translateY(-2px);
box-shadow: var(--sh-pop);
border-color: var(--border-strong);
}
}
/* 图标瓦片：与卡内二级面同一条色阶的"更深一级"，描边同轴向，
保证它看起来是从卡片里长出来的，而不是贴上去的色块 */
.menu-icon {
flex: none;
width: 48px;
height: 48px;
border-radius: var(--r-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
background: var(--icon-grad);
border: 1px solid var(--icon-border);
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.list-item .menu-icon {
width: 40px;
height: 40px;
font-size: 19px;
border-radius: var(--r-sm);
}
/* 图标瓦片跟随所属卡片的交互状态一起变化，强化"图标属于这张卡片"的整体感 */
.menu-item:active .menu-icon,
.subject-card:active .menu-icon,
.major-card:active .menu-icon,
.study-item:active .menu-icon,
.real-item:active .menu-icon {
background: var(--soft);
border-color: var(--border-strong);
}
@media (hover: hover) {
.menu-item:hover .menu-icon,
.subject-card:hover .menu-icon,
.major-card:hover .menu-icon,
.study-item:hover .menu-icon,
.real-item:hover .menu-icon {
background: var(--soft);
border-color: var(--border-strong);
}
}
/* 图标瓦片：颜色全部来自 --m-ic-* 令牌。
石墨灰主题=中性面阶；彩色主题=糖果色；暗色=降饱和深色。
组件层不含任何色值，新增主题只需在令牌区补一组 --m-ic-* 。 */
.m-ic-green, .m-ic-yellow, .m-ic-blue, .m-ic-red,
.m-ic-purple, .m-ic-cyan, .m-ic-gold, .m-ic-orange, .m-ic-pink {
background: var(--icon-grad);
border: 1px solid var(--m-ic-border);
}
.m-ic-green { background: var(--m-ic-green); }
.m-ic-yellow { background: var(--m-ic-yellow); }
.m-ic-blue { background: var(--m-ic-blue); }
.m-ic-red { background: var(--m-ic-red); }
.m-ic-purple { background: var(--m-ic-purple); }
.m-ic-cyan { background: var(--m-ic-cyan); }
.m-ic-gold { background: var(--m-ic-gold); }
.m-ic-orange { background: var(--m-ic-orange); }
.m-ic-pink { background: var(--m-ic-pink); }
.menu-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}
.menu-title,
.menu-name {
min-width: 0;
font-size: var(--fs-md);
font-weight: 700;
line-height: var(--lh-snug);
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-desc {
min-width: 0;
font-size: var(--fs-sm);
line-height: 1.4;
color: var(--text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-arrow {
flex: none;
font-size: 20px;
font-weight: 600;
color: var(--text-tertiary);
}
/* ---------- 科目方形网格（题库 / 我的学习列表） ---------- */
.subject-grid,
.major-grid,
.major-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: var(--gap);
}
.subject-grid > .empty-tip,
.major-grid > .empty-tip,
.major-list > .empty-tip {
grid-column: 1 / -1;
}
.subject-card,
.major-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 12px 12px;
text-align: center;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-card);
overflow: hidden;
cursor: pointer;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
border-color var(--t-fast) var(--ease);
}
.subject-card::before,
.major-card::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
border-radius: 0 0 3px 3px;
/* 短圆头色标：颜色跟随卡片自身的 --cat-hue，
一排卡片不再被同一条蓝线横穿，同时保留"按科目区分色相"的语义 */
background: linear-gradient(90deg,
hsl(var(--cat-hue, 224) 78% 62%),
hsl(calc(var(--cat-hue, 224) + 24) 78% 70%));
}
.subject-card:active,
.major-card:active {
transform: scale(.97);
}
@media (hover: hover) {
.subject-card:hover,
.major-card:hover {
transform: translateY(-2px);
box-shadow: var(--sh-pop);
border-color: var(--border-strong);
}
}
/* 选中态沿用全站统一的"主色描边 + 外环"，保证与选项、芯片的选中反馈一致 */
.subject-card.active,
.major-card.active,
.major-item.selected {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-ring);
}
.subject-card.all,
.major-card.all {
border-style: dashed;
}
.subject-card.all::before,
.major-card.all::before {
background: var(--bar-all);
}
.subject-card-top {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}
.subject-card-name {
max-width: 100%;
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.4;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.subject-card-meta {
max-width: 100%;
font-size: var(--fs-xs);
line-height: var(--lh-snug);
color: var(--text-tertiary);
}
.subject-card-actions {
display: flex;
gap: 6px;
width: 100%;
margin-top: auto;
padding-top: 2px;
}
.subject-card-actions .btn {
flex: 1;
min-width: 0;
padding: 0 6px;
}
.major-item {
padding: 16px 12px;
text-align: center;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.major-name {
font-size: var(--fs-md);
font-weight: 700;
}
.major-count {
margin-top: 4px;
font-size: var(--fs-sm);
color: var(--text-tertiary);
}
.major-card-top {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
}
.major-dot {
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--bar-solid);
}
.major-card-name {
font-size: var(--fs-base);
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.major-card-meta {
font-size: var(--fs-xs);
color: var(--text-tertiary);
}
/* ---------- 首页「继续上次练习」续接卡（2026-09-27） ----------
最强的续接动机此前被埋在「点科目 → 选模式 → 服务端协商」四步之后，
现在它就是首屏第一个可行动作。 */
.resume-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.resume-info {
min-width: 0;
}
.resume-subject {
font-size: var(--fs-lg);
font-weight: 700;
color: var(--text);
line-height: var(--lh-snug);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resume-meta {
margin-top: 3px;
font-size: var(--fs-sm);
color: var(--text-secondary);
}
/* ---------- 我的学习横向卡 ---------- */
.study-grid {
display: flex;
gap: 10px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 2px 2px 8px;
}
.study-item {
position: relative;
flex: 0 0 168px;
min-width: 0;
padding: 14px 14px 12px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--sh-card);
overflow: hidden;
cursor: pointer;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.study-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--bar);
}
.study-item:active {
transform: scale(.97);
}
@media (hover: hover) {
.study-item:hover {
box-shadow: var(--sh-pop);
transform: translateY(-2px);
}
}
.study-item-name {
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.4;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.study-item-meta {
margin-top: 6px;
font-size: var(--fs-xs);
color: var(--text-tertiary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- 历年真题列表项 ---------- */
.real-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 15px 14px;
margin-bottom: 10px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-card);
overflow: hidden;
cursor: pointer;
transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
border-color var(--t-fast) var(--ease);
}
.real-item:last-child {
margin-bottom: 0;
}
.real-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--bar);
}
.real-item:active {
transform: scale(.985);
}
@media (hover: hover) {
.real-item:hover {
transform: translateY(-2px);
box-shadow: var(--sh-pop);
border-color: var(--border-strong);
}
}
.real-item-main {
flex: 1 1 auto;
min-width: 0;
padding-left: 2px;
}
.real-item-title {
font-size: var(--fs-md);
font-weight: 700;
line-height: var(--lh-snug);
color: var(--text);
margin-bottom: 4px;
word-break: break-word;
}
.real-item-meta {
font-size: var(--fs-sm);
color: var(--text-tertiary);
}
/* ---------- 空状态 ---------- */
.empty-state {
padding: 48px 20px;
text-align: center;
font-size: var(--fs-smd);
line-height: var(--lh-relaxed);
color: var(--text-tertiary);
}
.empty-icon {
width: 76px;
height: 76px;
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-xl);
background: var(--icon-grad);
border: 1px solid var(--icon-border);
font-size: 36px;
line-height: 1;
}
.empty-tip {
grid-column: 1 / -1;
padding: 28px 12px;
text-align: center;
font-size: var(--fs-smd);
line-height: var(--lh-relaxed);
color: var(--text-tertiary);
/* 横向滚动容器（.study-grid 等）里没有列的概念，需显式占满整行才能居中 */
width: 100%;
}
/* ==========================================================
* 11 表单控件
* 统一：高度 ≥44px、圆角 14、聚焦环、占位色、禁用态
* 输入类字号固定 16px，避免 iOS 聚焦时页面被放大
* ======================================================== */
.input,
.dialog-input,
.fb-input,
.comment-input,
.rep-text,
.note-text,
.subject-search-input,
.sheet-search input,
select.input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--input-bg);
color: var(--text);
font-family: inherit;
font-size: 16px;
line-height: var(--lh-normal);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
-webkit-appearance: none;
appearance: none;
}
textarea.input,
.fb-textarea,
.comment-input,
.rep-text,
.note-text {
resize: vertical;
min-height: 96px;
line-height: var(--lh-relaxed);
}
.input:focus,
.dialog-input:focus,
.fb-input:focus,
.fb-textarea:focus,
.comment-input:focus,
.rep-text:focus,
.subject-search-input:focus,
.sheet-search input:focus {
outline: none;
border-color: var(--primary);
background: var(--card-bg);
box-shadow: 0 0 0 3px var(--primary-ring);
}
.input:disabled,
.fb-input:disabled,
.input[readonly] {
opacity: .6;
cursor: not-allowed;
}
textarea.input {
min-height: 76px;
}
/* 题库检索工具条 */
.subject-toolbar {
display: flex;
gap: 8px;
align-items: center;
margin: 2px 0 10px;
}
.subject-search-input {
flex: 1 1 auto;
min-width: 0;
padding: 11px 16px;
border-radius: var(--r-full);
font-size: 16px;
}
.subject-refresh-btn {
flex: none;
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 42px;
padding: 0 14px;
border: 1px solid var(--soft-border);
border-radius: var(--r-full);
background: var(--card-bg);
color: var(--text);
font-size: var(--fs-smd);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
transform var(--t-fast) var(--ease);
}
.subject-refresh-btn:active {
transform: scale(.95);
background: var(--soft);
}
@media (hover: hover) {
.subject-refresh-btn:hover {
border-color: var(--border-strong);
background: var(--soft);
}
}
.subject-tip {
margin: -2px 0 12px;
font-size: var(--fs-xs);
line-height: var(--lh-normal);
color: var(--text-tertiary);
}
/* 专业选择框（点击弹出底部弹窗） */
.major-select {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 12px 16px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) {
.major-select:hover {
border-color: var(--primary);
}
}
.major-select:active {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-ring);
}
.major-select-text {
flex: 1 1 auto;
min-width: 0;
font-size: var(--fs-md);
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.major-select-arrow {
flex: none;
font-size: 12px;
color: var(--text-tertiary);
}
/* ==========================================================
* 12 弹窗：底部弹层 / 居中对话 / 反馈面板 / 答题卡抽屉
* ======================================================== */
/* ---------- 底部弹层 ---------- */
.sheet-modal {
display: none;
position: fixed;
inset: 0;
z-index: 210;
}
.sheet-modal.show {
display: block;
}
.sheet-mask {
position: absolute;
inset: 0;
background: var(--overlay);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: uiFade var(--t) var(--ease);
}
.sheet-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-height: 76vh;
display: flex;
flex-direction: column;
padding-bottom: var(--safe-b);
background: var(--card-bg);
border-radius: var(--r-2xl) var(--r-2xl) 0 0;
box-shadow: 0 -10px 40px rgba(16, 24, 42, .16);
animation: sheetUp var(--t) var(--ease);
overflow: hidden;
}
.sheet-panel::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--border-strong);
}
@keyframes uiFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes sheetUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex: none;
padding: 20px 18px 12px;
font-size: var(--fs-lg);
font-weight: 700;
color: var(--text);
}
.sheet-close {
flex: none;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--soft);
color: var(--text-secondary);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sheet-close:active {
background: var(--soft-border);
color: var(--text);
}
.sheet-search {
flex: none;
padding: 0 18px 12px;
}
.sheet-search input {
padding: 11px 14px;
border-radius: var(--r-md);
font-size: 16px;
}
.sheet-list {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 4px 18px 22px;
}
.sheet-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 12px 10px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--card-bg);
font-size: var(--fs-base);
line-height: 1.4;
color: var(--text);
text-align: center;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sheet-item.all {
border-style: dashed;
}
.sheet-item:active {
transform: scale(.97);
border-color: var(--primary);
background: var(--primary-soft);
}
@media (hover: hover) {
.sheet-item:hover {
border-color: var(--primary);
color: var(--primary);
}
}
.sheet-item.active {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--primary);
font-weight: 700;
}
.sheet-empty {
grid-column: 1 / -1;
padding: 32px 0;
text-align: center;
font-size: var(--fs-smd);
color: var(--text-tertiary);
}
/* ---------- 居中对话（昵称编辑等） ---------- */
.dialog-modal {
display: none;
position: fixed;
inset: 0;
z-index: 220;
}
.dialog-modal.show {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.dialog-mask {
position: absolute;
inset: 0;
background: var(--overlay);
animation: uiFade var(--t) var(--ease);
}
.dialog-panel {
position: relative;
width: 100%;
max-width: 380px;
padding: 22px 20px 20px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--sh-pop);
animation: dialogPop var(--t) var(--ease);
}
@keyframes dialogPop {
from { transform: scale(.94); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.dialog-title {
margin-bottom: 16px;
font-size: var(--fs-lg);
font-weight: 700;
color: var(--text);
}
.dialog-input {
margin-bottom: 18px;
}
.dialog-btns {
display: flex;
gap: 10px;
}
.dialog-btns .btn {
flex: 1;
min-height: 44px;
}
/* ---------- 反馈 / 笔记面板（居中卡片） ---------- */
.rep-mask {
display: none;
position: fixed;
inset: 0;
z-index: 220;
align-items: center;
justify-content: center;
padding: 16px;
}
.rep-mask.show {
display: flex;
}
.rep-panel {
width: 100%;
max-width: 440px;
max-height: 88vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 18px 18px 20px;
background: var(--card-bg);
border-radius: var(--r-xl);
box-shadow: var(--sh-pop);
animation: dialogPop var(--t) var(--ease);
}
.rep-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: var(--fs-lg);
font-weight: 700;
color: var(--text);
}
.rep-titlebar .sheet-close {
cursor: pointer;
}
.rep-qmeta {
margin-top: 6px;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--text-tertiary);
}
.rep-cats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 14px 0 12px;
}
.rep-cat {
padding: 7px 14px;
border: 1px solid var(--soft-border);
border-radius: var(--r-full);
background: var(--soft);
font-size: var(--fs-smd);
color: var(--text);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.rep-cat:active {
transform: scale(.96);
}
@media (hover: hover) {
.rep-cat:hover {
border-color: var(--primary);
color: var(--primary);
}
}
.rep-cat.on {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-contrast);
font-weight: 600;
}
.rep-text {
min-height: 104px;
}
.rep-actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.rep-actions .action-btn {
flex: 1;
min-width: 0;
padding: 0 16px;
}
/* ---------- 答题卡抽屉 ---------- */
.card-modal {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: var(--overlay);
justify-content: flex-end;
}
.card-modal.show {
display: flex;
}
.card-panel {
width: 86%;
max-width: 380px;
height: 100%;
padding: 22px 18px calc(22px + var(--safe-b));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--card-bg);
box-shadow: -12px 0 40px rgba(16, 24, 42, .16);
animation: slideIn var(--t) var(--ease);
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.card-title-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.card-title-bar h3 {
font-size: var(--fs-xl);
font-weight: 700;
}
.card-title-bar > span {
padding: 6px 14px;
border-radius: var(--r-full);
background: var(--soft);
color: var(--text-secondary);
font-size: var(--fs-smd);
cursor: pointer;
}
.card-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.card-grid .card-group-title {
grid-column: 1 / -1;
margin: 6px 0 -2px;
font-size: var(--fs-smd);
font-weight: 700;
letter-spacing: .3px;
color: var(--text-tertiary);
}
.card-num {
position: relative;
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 2px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: var(--soft);
color: var(--text-secondary);
cursor: pointer;
line-height: 1.15;
text-align: center;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.card-num:active {
transform: scale(.92);
}
.card-num-idx {
font-size: var(--fs-smd);
font-weight: 700;
}
.card-num-type {
font-size: 10px;
opacity: .85;
white-space: nowrap;
}
.card-num.correct {
background: var(--success);
border-color: var(--success);
color: var(--primary-contrast);
}
.card-num.wrong {
background: var(--danger-bg);
border-color: var(--danger-border);
color: var(--danger);
}
.card-num.current {
box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary);
}
/* ==========================================================
* 13 通用表格（列表型数据展示）
* ======================================================== */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--card-bg);
}
table.table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-base);
}
table.table th,
table.table td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
table.table th {
font-size: var(--fs-smd);
font-weight: 700;
color: var(--text-secondary);
background: var(--card-alt);
}
table.table tbody tr:last-child td {
border-bottom: none;
}
@media (hover: hover) {
table.table tbody tr:hover td {
background: var(--soft);
}
}
/* ==========================================================
* 14 全局提示 Toast
* ======================================================== */
.toast {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 300;
display: none;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 82vw;
padding: 13px 22px;
border-radius: var(--r-full);
background: var(--toast-bg);
color: var(--toast-fg);
box-shadow: var(--toast-shadow);
font-size: var(--fs-base);
line-height: var(--lh-snug);
text-align: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: toastIn var(--t) var(--ease);
}
.toast.show {
display: inline-flex;
}
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, -42%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}
/* ---------- 14.1 Toast 语义分型（2026-09-27） ----------
此前成功与失败是同一个中性胶囊，用户分不清操作是否生效。
现在用图标颜色区分语义，底色仍统一为深色浮层，不引入新的视觉语言。 */
.toast .ic {
flex: none;
width: 18px;
height: 18px;
}
.toast-success .ic { color: var(--toast-ok); }
.toast-error .ic { color: var(--toast-err); }
.toast-warn .ic { color: var(--toast-warn); }
/* ---------- 14.2 弹层与按钮的运行时状态（2026-09-27） ----------
openModal/closeModal 打开弹层时给 body 加 .modal-open，锁住背景滚动，
避免移动端「弹层里滚动把整页一起带着滚」。 */
body.modal-open {
overflow: hidden;
}
/* 通用确认弹层（examConfirm）的按钮行 */
.dlg-btns {
display: flex;
gap: 10px;
}
.dlg-btns .action-btn {
flex: 1;
min-width: 0;
padding: 0 16px;
}
/* 按钮加载态（withLoading）：弱网下防止重复提交 */
.btn.is-loading,
.action-btn.is-loading {
opacity: .65;
cursor: progress;
}
/* ---------- 14.3 阅读文本跟随用户字号（2026-09-27） ----------
只放大"读"的文本（解析 / 笔记 / 评论 / 列表副文），
标题、导航、按钮保持不动 —— 否则字号一放大就会把布局挤爆。 */
.analysis-content,
.note-block-body,
.comment-text {
font-size: calc(14px * var(--font-scale, 1));
}
.list-sub,
.card-subtitle,
.menu-desc,
.state-desc {
font-size: calc(13px * var(--font-scale, 1));
}
/* ==========================================================
* 15 刷题练习页
* 结构：吸顶工具条 → 题目卡片（题型/题干/选项/解析/笔记/评论）→ 底部操作栏
* ======================================================== */
.practice-header {
position: sticky;
top: 0;
z-index: 80;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-height: 54px;
padding: 8px var(--pad-x);
background: var(--header-bg);
border-bottom: 1px solid var(--border);
box-shadow: var(--sh-1);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
.practice-header > * {
flex: none;
}
.practice-back {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
background: var(--soft);
border: 1px solid var(--soft-border);
cursor: pointer;
font-size: 24px;
font-weight: 300;
line-height: 1;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
-webkit-user-select: none;
user-select: none;
}
.practice-back:active {
transform: scale(.9);
background: var(--soft-border);
}
.practice-progress {
margin: 0 2px;
padding: 6px 12px;
border-radius: var(--r-full);
background: var(--soft);
font-size: var(--fs-smd);
font-weight: 700;
color: var(--text);
}
.practice-tools {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.practice-tools > * {
flex: none;
}
/* ---------- 15.0 触摸热区补足（2026-09-27） ----------
视觉尺寸保持 32px 不变（顶部工具条放不下 44px 的实心按钮），
但用透明伪元素把可点区域撑到 44×44 —— 单手刷题时不再误触旁边的返回。 */
.practice-header .practice-back,
.practice-header .practice-icon,
.practice-header .theme-toggle,
.practice-header .font-btn {
position: relative;
}
.practice-header .practice-back::after,
.practice-header .practice-icon::after,
.practice-header .theme-toggle::after,
.practice-header .font-btn::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
/* 文字型 chip 只补高度，避免横向热区压到相邻按钮 */
.practice-header .practice-chip,
.practice-header .practice-browse-toggle {
position: relative;
min-height: 36px;
}
.practice-header .practice-chip::after,
.practice-header .practice-browse-toggle::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 44px;
transform: translateY(-50%);
}
/* 统一工具按钮：答题卡 / 背题 / 字号 / 收藏 / 笔记 / 主题 */
.practice-chip,
.practice-header .practice-browse-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 32px;
padding: 6px 13px;
border: 1px solid var(--soft-border);
border-radius: var(--r-full);
background: var(--card-bg);
color: var(--text);
font-size: var(--fs-smd);
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.practice-chip:active,
.practice-header .practice-browse-toggle:active {
transform: scale(.94);
background: var(--soft);
}
@media (hover: hover) {
.practice-chip:hover,
.practice-header .practice-browse-toggle:hover {
border-color: var(--primary);
color: var(--primary);
}
}
.practice-header .practice-browse-toggle.active {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-contrast);
}
.practice-icon,
.practice-header .theme-toggle,
.practice-header .font-btn {
width: 32px;
height: 32px;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--card-bg);
border: 1px solid var(--soft-border);
color: var(--text);
font-size: 15px;
line-height: 1;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.practice-icon:active,
.practice-header .theme-toggle:active,
.practice-header .font-btn:active {
transform: scale(.9);
background: var(--soft);
}
/* 收藏态：金色星标 */
#headerFav.active,
#headerNote.active {
color: var(--warning);
background: var(--warning-bg);
border-color: var(--warning);
}
/* 考试倒计时 */
.exam-timer {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
border-radius: var(--r-full);
background: var(--danger-bg);
border: 1px solid var(--danger-border);
color: var(--danger);
font-size: var(--fs-smd);
font-weight: 700;
}
/* 字号调节浮层 */
.font-ctrl {
position: relative;
flex: none;
}
.font-popover {
display: none;
position: absolute;
top: 40px;
right: 0;
z-index: 130;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-pop);
white-space: nowrap;
animation: dialogPop var(--t-fast) var(--ease);
}
.font-popover.show {
display: flex;
}
.font-popover-label {
font-size: var(--fs-sm);
color: var(--text-secondary);
}
.font-value {
min-width: 46px;
text-align: center;
font-size: var(--fs-smd);
font-weight: 700;
color: var(--primary);
}
/* ---------- 题目主体卡片 ---------- */
.practice-card {
margin: var(--gap) var(--pad-x) calc(var(--action-bar-h) + var(--safe-b) + 28px);
padding: 22px 20px;
min-height: 56vh;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--sh-card);
}
.question-type {
display: inline-flex;
align-items: center;
max-width: 100%;
margin-bottom: 14px;
padding: 5px 12px;
border-radius: var(--r-full);
background: var(--primary-soft);
color: var(--primary);
font-size: var(--fs-smd);
font-weight: 600;
line-height: var(--lh-snug);
letter-spacing: .2px;
word-break: break-word;
}
/* 2026-09-27：字号缩放由局部 --qfont 升级为全局 --font-scale，
其他页面的阅读文本也能一起放大（此前只有题干跟缩放） */
.question-title {
margin-bottom: 16px;
padding-top: 2px;
font-size: calc(16px * var(--font-scale, 1));
font-weight: 600;
line-height: var(--lh-relaxed);
letter-spacing: .2px;
color: var(--text);
word-break: break-word;
overflow-wrap: break-word;
-webkit-hyphens: none;
hyphens: none;
}
.question-title img {
margin: 8px 0 2px;
border-radius: var(--r-sm);
max-width: 100%;
}
/* ---------- 选项 ---------- */
.option-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 10px;
padding: 14px 46px 14px 14px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--card-bg);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.option-item:active {
transform: scale(.995);
}
@media (hover: hover) {
.option-item:hover {
border-color: var(--border-strong);
background: var(--card-alt);
}
.option-item.correct:hover,
.option-item.wrong:hover,
.option-item.selected:hover {
background: inherit;
}
}
.option-label {
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--soft);
border: 1px solid var(--soft-border);
font-size: var(--fs-smd);
font-weight: 700;
line-height: 1;
color: var(--text-secondary);
}
.option-text {
flex: 1 1 auto;
min-width: 0;
font-size: calc(15px * var(--font-scale, 1));
line-height: 1.7;
color: var(--text);
overflow-wrap: break-word;
}
.option-item.selected {
border-color: var(--primary);
background: var(--primary-soft);
}
.option-item.selected .option-label {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-contrast);
}
.option-item.correct {
border-color: var(--success);
background: var(--success-bg);
}
/* 2026-09-27：判题圆章底改用深档状态色 —— 白字压在 #0E9C6B 上只有 3.51:1，
而"对/错"恰恰是最不能读错的信息 */
.option-item.correct .option-label {
background: var(--success-strong);
border-color: var(--success-strong);
color: var(--primary-contrast);
}
.option-item.wrong {
border-color: var(--danger);
background: var(--danger-bg);
}
.option-item.wrong .option-label {
background: var(--danger-strong);
border-color: var(--danger-strong);
color: var(--primary-contrast);
}
/* 作答后右侧对/错徽章 */
.option-item.correct::after,
.option-item.wrong::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
color: var(--on-state);
font-size: 14px;
font-weight: 700;
line-height: 24px;
text-align: center;
}
.option-item.correct::after {
content: '✓';
background: var(--success);
}
.option-item.wrong::after {
content: '✕';
background: var(--danger);
}
/* 背题模式：禁止误触选项 */
.study-mode .option-item {
pointer-events: none;
}
/* ---------- 多选题确认提交 ---------- */
.multi-bar {
margin-top: 14px;
text-align: center;
}
.multi-tip {
margin-bottom: 10px;
font-size: var(--fs-smd);
font-weight: 500;
color: var(--text-tertiary);
}
.multi-submit {
width: 100%;
min-height: 48px;
padding: 12px 18px;
border: none;
border-radius: var(--r-lg);
background: var(--primary-bg-btn);
color: var(--primary-contrast);
font-size: var(--fs-md);
font-weight: 700;
letter-spacing: .5px;
cursor: pointer;
box-shadow: var(--shadow-btn-hover);
transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.multi-submit:active {
transform: scale(.98);
}
@media (hover: hover) {
.multi-submit:hover:not(:disabled) {
background: var(--primary-dark);
}
}
.multi-submit:disabled {
cursor: not-allowed;
}
/* ---------- 解析区 ---------- */
.analysis-box {
margin-top: 18px;
padding: 14px 16px;
border-radius: var(--r-md);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
background: var(--card-alt);
}
.analysis-title {
margin-bottom: 8px;
font-size: var(--fs-base);
font-weight: 700;
color: var(--primary);
}
.analysis-content {
font-size: calc(var(--qfont, 16px) - 2px);
line-height: var(--lh-relaxed);
color: var(--text-secondary);
overflow-wrap: break-word;
}
.analysis-content p + p {
margin-top: 6px;
}
/* ---------- 我的笔记 ---------- */
.note-block {
margin-top: 16px;
padding: 12px 14px;
border-radius: var(--r-md);
background: var(--note-bg);
border: 1px solid var(--note-border);
}
.note-block-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
font-size: var(--fs-smd);
font-weight: 700;
color: var(--note-title);
}
.note-block-head .note-edit {
padding: 3px 10px;
border-radius: var(--r-full);
background: var(--card-bg);
border: 1px solid var(--note-border);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--note-title);
cursor: pointer;
}
.note-block-body {
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--note-text);
white-space: pre-wrap;
word-break: break-word;
}
.note-modal-tip {
margin: 12px 0 10px;
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--text-tertiary);
}
.note-text {
min-height: 128px;
}
/* ---------- 题目讨论 ---------- */
.comment-block {
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed var(--border);
}
.comment-head {
margin-bottom: 8px;
font-size: var(--fs-base);
font-weight: 700;
color: var(--text);
}
.comment-item {
padding: 10px 2px;
border-bottom: 1px dashed var(--border);
}
.comment-item:last-of-type {
border-bottom: none;
}
.comment-meta {
display: flex;
align-items: center;
gap: 10px;
}
.comment-nick {
font-size: var(--fs-smd);
font-weight: 700;
color: var(--accent);
}
.comment-time {
font-size: var(--fs-sm);
color: var(--text-tertiary);
}
.comment-del {
margin-left: auto;
padding: 2px 8px;
border-radius: var(--r-xs);
font-size: var(--fs-sm);
color: var(--danger);
cursor: pointer;
}
.comment-del:active {
background: var(--danger-bg);
}
.comment-text {
margin-top: 4px;
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--text);
white-space: pre-wrap;
word-break: break-word;
}
.comment-empty {
padding: 6px 0;
font-size: var(--fs-smd);
color: var(--text-tertiary);
}
.comment-login-tip {
margin-top: 10px;
padding: 10px 12px;
border-radius: var(--r-sm);
background: var(--soft);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--text-secondary);
}
.comment-editor {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.comment-input {
min-height: 68px;
font-size: 16px;
}
.comment-send-row {
display: flex;
justify-content: flex-end;
}
.comment-send {
min-width: 108px;
}
/* ---------- 题目校错入口 ---------- */
.q-report-entry {
margin-top: 18px;
padding-top: 12px;
border-top: 1px dashed var(--border);
text-align: center;
font-size: var(--fs-smd);
color: var(--text-tertiary);
cursor: pointer;
-webkit-user-select: none;
user-select: none;
transition: color var(--t-fast) var(--ease);
}
.q-report-entry:active {
color: var(--primary);
}
@media (hover: hover) {
.q-report-entry:hover {
color: var(--primary);
}
}
/* ==========================================================
* 16 结果页
* ======================================================== */
.result-card {
padding: 26px 18px 22px;
text-align: center;
}
.result-ring {
position: relative;
width: clamp(148px, 46vw, 186px);
aspect-ratio: 1;
margin: 4px auto 18px;
border-radius: 50%;
background: conic-gradient(var(--primary) calc(var(--acc, 0) * 1%), var(--soft) 0);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-btn-hover);
}
.result-ring::before {
content: '';
position: absolute;
inset: 13px;
border-radius: 50%;
background: var(--card-bg);
box-shadow: inset 0 2px 10px rgba(16, 24, 42, .05);
}
.result-score {
position: relative;
z-index: 1;
font-size: clamp(34px, 9vw, 44px);
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
color: var(--primary);
}
.result-label {
margin-top: 8px;
font-size: var(--fs-smd);
color: var(--text-tertiary);
}
.result-message {
margin-bottom: 6px;
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: .5px;
color: var(--text);
}
.result-message.good {
color: var(--success);
}
/* ==========================================================
* 17 页面专属样式
* （历史上分散在各页