/**
 * 集学 · 网页端统一设计系统
 * 适用于：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 设计令牌
 * ======================================================== */

/* ---------- 石墨灰主题（默认）
 * 配色逻辑：60% 中性冷灰背景 + 30% 纯白容器 + 10% 科技靛蓝强调
 * 全局只有一个品牌色 --primary（同一色相带的深浅派生），
 * 大面积保持中性留白，靛蓝只出现在「可操作 / 已选中 / 首屏品牌面」上
 * ---------- */
:root {
    color-scheme: light;

    /* 主色：科技靛蓝 —— 全站唯一的品牌色出口（可操作元素 / 选中态 / 进度）
       所有派生蓝都收敛在同一条色相带上，避免多个蓝并存造成的杂乱感 */
    --primary: #3355E9;
    --primary-dark: #2743C4;
    --primary-contrast: #FFFFFF;
    --primary-soft: #EEF2FF;
    --primary-bg-btn: #3355E9;
    --primary-ring: rgba(51, 85, 233, .18);

    /* 辅助色：主色同相位的亮阶，用于链接 / 图表 / 次级点缀（非操作主色） */
    --accent: #5B86F5;

    /* 状态色：干净可辨的三色，饱和度与主色同量级，不抢主色戏份 */
    --success: #0E9C6B;
    --success-bg: #EAF7F1;
    --success-border: #A6DEC6;
    --danger: #D9453E;
    --danger-bg: #FDF0EF;
    --danger-border: #F3C5C2;
    --warning: #B8791F;
    --warning-bg: #FDF6E7;

    /* 中性层级：全部带同一蓝灰倾向（与主色同色相），避免出现"纯灰 + 孤立蓝"的割裂 */
    --bg: #F5F7FB;
    --bg-alt: #EDF1F8;
    --card: #FFFFFF;
    --card-bg: #FFFFFF;
    /* ↓ 表面色阶：同一条冷蓝灰轴向上的 4 级，卡片 / 分组 / 芯片 / 图标瓦片共用，
         保证图标与卡片同源，不会出现"各自一块颜色"的割裂感 */
    --card-alt: #F8FAFD;
    --input-bg: #F7FAFE;
    --text: #141C2B;
    --text-secondary: #4C5A72;
    --text-tertiary: #77839A;
    --border: #E9EEF7;
    --border-strong: #D7E0EE;
    --soft: #F2F5FB;
    --soft-border: #E5EBF5;
    --icon-border: #E3EAF6;
    --overlay: rgba(16, 24, 42, .45);

    /* 头部：半透明白 + 毛玻璃（滚动时与内容自然分层，不与卡片抢边界） */
    --header-bg: rgba(255, 255, 255, .82);
    --header-text: var(--text);
    --header-shadow: rgba(16, 24, 42, .06);
    /* Hero：极浅的品牌色渐层面 + 深靛文字 + 白色磨砂统计格，
       与整体浅色环境同一明度带，柔和地承担首屏视觉重心 */
    --hero-bg: linear-gradient(135deg, #EDF2FF 0%, #E3EBFF 55%, #D9E5FF 100%);
    --hero-shadow: rgba(51, 85, 233, .14);
    --hero-soft: rgba(255, 255, 255, .72);
    --hero-soft-border: rgba(255, 255, 255, .95);
    --hero-text: #1D3577;
    --hero-text-muted: #55618A;
    --hero-icon: var(--primary);

    /* 科目色条：靛蓝渐层（唯一的大面积品牌色出口）；「全部科目」用同色相浅灰蓝区分
       图标瓦片：走"卡面色阶的更深一级"的中性面（--icon-grad），与卡片同源，
       品牌色不扩散到图标，避免蓝色块与中性卡并置产生割裂 */
    --bar: linear-gradient(90deg, #3355E9 0%, #7B9DF7 100%);
    --bar-all: linear-gradient(90deg, #C8D5F3 0%, #AFC3E9 100%);
    /* 纯色版色条：--bar 是渐变，不能用于 border-color / box-shadow / 小圆点，
       这些场景必须用 --bar-solid，否则整条声明会被浏览器判为非法而丢弃 */
    --bar-solid: #3355E9;
    --icon-grad: linear-gradient(160deg, #F5F8FE 0%, #E8EFF9 100%);

    /* 背景纹理：点阵墨色与整体强度（数值刻意压低，仅提供质感不抢内容） */
    --tex-dot: rgba(51, 85, 233, .07);
    --tex-grain: .32;

    /* 笔记区：中性便签底（与卡内二级面同色阶）+ 靛蓝标题呼应主色，
       不再用额外的蓝色块，避免与图标瓦片、卡片抢色 */
    --note-bg: #F7FAFE;
    --note-border: #E9EEF7;
    --note-title: #2743C4;
    --note-text: #38445C;

    /* 圆角体系 */
    --r-xs: 8px;
    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-full: 999px;

    /* 阴影体系：以极浅的多层投影塑造层次，避免生硬描边感 */
    /* 阴影统一用同一组冷调墨色 rgba(16,24,42)，避免纯黑阴影在冷灰底上发脏 */
    --sh-1: 0 1px 2px rgba(16, 24, 42, .04);
    --sh-card: 0 1px 2px rgba(16, 24, 42, .04), 0 6px 16px -6px rgba(16, 24, 42, .09);
    --sh-pop: 0 2px 6px rgba(16, 24, 42, .06), 0 18px 40px -12px rgba(16, 24, 42, .18);
    --sh-float: 0 -6px 20px rgba(16, 24, 42, .06);
    /* 按钮投影：同色系轻投影，不做发光，保证与中性底融合 */
    --shadow-btn: 0 4px 12px rgba(51, 85, 233, .24);
    --shadow-btn-hover: 0 8px 22px rgba(51, 85, 233, .32);

    /* 字号体系 */
    --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;

    /* 行高体系 */
    --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;

    --bg: #F7F5FE;
    --bg-alt: #F1EDFE;
    --card: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-alt: #FAF8FF;
    --input-bg: #F8F6FF;
    --text: #221C33;
    --text-secondary: #6F6885;
    --text-tertiary: #9A93AE;
    --border: #F0EBFB;
    --border-strong: #E2D9F8;
    --soft: #F7F4FE;
    --soft-border: #EDE7FB;
    --overlay: rgba(31, 36, 48, .44);

    --header-bg: linear-gradient(135deg, #7C5CFF 0%, #8E6DFF 55%, #A585FF 100%);
    --header-text: #FFFFFF;
    --header-shadow: rgba(124, 92, 255, .28);
    --hero-bg: linear-gradient(135deg, #7C5CFF 0%, #9B6BFF 55%, #C46BF0 100%);
    --hero-shadow: rgba(124, 92, 255, .30);
    --hero-soft: rgba(255, 255, 255, .16);
    --hero-soft-border: rgba(255, 255, 255, .26);
    --hero-text: #FFFFFF;
    --hero-text-muted: rgba(255, 255, 255, .86);
    --hero-icon: rgba(255, 255, 255, .92);

    --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;

    --sh-1: 0 1px 2px rgba(124, 92, 255, .05);
    --sh-card: 0 1px 2px rgba(124, 92, 255, .05), 0 8px 24px rgba(124, 92, 255, .09);
    --sh-pop: 0 16px 38px rgba(124, 92, 255, .18);
    --sh-float: 0 -6px 22px rgba(124, 92, 255, .08);
    --shadow-btn: 0 6px 16px rgba(124, 92, 255, .26);
    --shadow-btn-hover: 0 10px 24px rgba(124, 92, 255, .34);
}

/* ==========================================================
 * 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);
}

/* 石墨灰主题：背景加一层极淡的主色光晕，配合纹理避免大面积平灰 */
html:not([data-theme="color"]) body {
    background:
        radial-gradient(1000px 420px at 12% -10%, rgba(51, 85, 233, .07), transparent 60%),
        radial-gradient(760px 380px at 100% 4%, rgba(91, 134, 245, .06), transparent 58%),
        var(--bg);
    background-attachment: fixed;
}

/* 彩色主题：页面背景加一层柔和的品牌光晕，避免大面积灰平 */
html[data-theme="color"] body {
    background:
        radial-gradient(1100px 460px at 10% -8%, rgba(124, 92, 255, .10), transparent 62%),
        radial-gradient(860px 420px at 106% 2%, rgba(196, 107, 240, .08), 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 带来的杂色，配色自然统一。
 * 用法：静态 <i data-ic="home"></i>；动态 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 2px rgba(16, 24, 42, .03);
}
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: #fff;
    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: #fff;
}
.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: #FFE0E0;
}

.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: #fff;
}
.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);
}
.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(--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;
}

/* 卡片标题区 */
.card-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    font-size: var(--fs-md);
    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 4px 12px rgba(51, 85, 233, .14);
}

/* 头像位 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: #FFE1A3;
}

.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: 12px;
    margin-top: 20px;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    padding: 12px 14px;
    border-radius: var(--r-lg);
    background: var(--hero-soft);
    border: 1px solid var(--hero-soft-border);
    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: 20px;
    line-height: 1;
}

.hero-stat .stat-value {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.15;
    color: var(--hero-text);
    white-space: nowrap;
}

.hero-stat .stat-label {
    margin-top: 1px;
    font-size: var(--fs-xs);
    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;
}
.stat-value.good {
    color: var(--success);
}
.stat-value.bad {
    color: var(--danger);
}

.stat-label {
    margin-top: 5px;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}

/* ==========================================================
 * 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(--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(--soft);
    color: var(--text-secondary);
    border-color: var(--border);
}
.tag.medium {
    background: var(--soft-border);
    color: var(--text);
    border-color: var(--border-strong);
}
.tag.hard {
    background: var(--text);
    color: var(--card);
    border-color: var(--text);
}
html[data-theme="color"] .tag.easy {
    background: #E6F7ED;
    color: #2B8A3E;
}
html[data-theme="color"] .tag.medium {
    background: #FFF9DB;
    color: #E67700;
}
html[data-theme="color"] .tag.hard {
    background: #FDEEEE;
    color: #C92A2A;
}

/* ==========================================================
 * 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-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-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(--icon-border);
}
html[data-theme="color"] .m-ic-green  { background: linear-gradient(135deg, #DCF7E8, #B2F0C9); border-color: transparent; }
html[data-theme="color"] .m-ic-yellow { background: linear-gradient(135deg, #FFF6DA, #FFEBAC); border-color: transparent; }
html[data-theme="color"] .m-ic-blue   { background: linear-gradient(135deg, #E3EFFF, #C4DBFF); border-color: transparent; }
html[data-theme="color"] .m-ic-red    { background: linear-gradient(135deg, #FFE5E5, #FFCCCC); border-color: transparent; }
html[data-theme="color"] .m-ic-purple { background: linear-gradient(135deg, #F2E8FF, #E2CFFF); border-color: transparent; }
html[data-theme="color"] .m-ic-cyan   { background: linear-gradient(135deg, #DBF6FF, #B8EDFF); border-color: transparent; }
html[data-theme="color"] .m-ic-gold   { background: linear-gradient(135deg, #FFF3DC, #FFE1A3); border-color: transparent; }
html[data-theme="color"] .m-ic-orange { background: linear-gradient(135deg, #FFECDA, #FFD6AE); border-color: transparent; }
html[data-theme="color"] .m-ic-pink   { background: linear-gradient(135deg, #FFE3F0, #FFC7E2); border-color: transparent; }

.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: 0;
    right: 0;
    height: 3px;
    background: var(--bar);
}
.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);
}

/* ---------- 我的学习横向卡 ---------- */
.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);
}

/* ==========================================================
 * 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;
    max-width: 82vw;
    padding: 13px 22px;
    border-radius: var(--r-full);
    background: rgba(31, 34, 38, .92);
    color: #fff;
    box-shadow: 0 10px 30px rgba(16, 24, 42, .22);
    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: block;
}
@keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -42%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* ==========================================================
 * 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;
}

/* 统一工具按钮：答题卡 / 背题 / 字号 / 收藏 / 笔记 / 主题 */
.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;
}

.question-title {
    margin-bottom: 16px;
    padding-top: 2px;
    font-size: var(--qfont, 16px);
    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(var(--qfont, 16px) - 1px);
    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);
}
.option-item.correct .option-label {
    background: var(--success);
    border-color: var(--success);
    color: var(--primary-contrast);
}

.option-item.wrong {
    border-color: var(--danger);
    background: var(--danger-bg);
}
.option-item.wrong .option-label {
    background: var(--danger);
    border-color: var(--danger);
    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: #fff;
    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 页面专属样式
 * （历史上分散在各页 <style> 中的规则，已统一收拢此处）
 * ======================================================== */

/* ---------- 关于页 ---------- */
.about-hero {
    padding: 28px 16px 10px;
    text-align: center;
}
.about-logo {
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-2xl);
    background: var(--icon-grad);
    border: 1px solid var(--icon-border);
    font-size: 44px;
    line-height: 1;
}
.about-name {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: .5px;
}
.about-ver {
    margin-top: 6px;
    font-size: var(--fs-smd);
    color: var(--text-tertiary);
}
.sec-title {
    margin-bottom: 10px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text);
}
.sec p {
    margin: 0 0 10px;
    font-size: var(--fs-smd);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
}
.sec p:last-child {
    margin-bottom: 0;
}
.sec a {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 1px dashed var(--primary);
}

/* ---------- 我的：关于弹窗 / 昵称编辑 ---------- */
.dlg-mask {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 220;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay);
}
.dlg-mask.show {
    display: flex;
}
.dlg-box {
    width: 100%;
    max-width: 360px;
    padding: 24px 22px 20px;
    background: var(--card-bg);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-pop);
    text-align: center;
    animation: dialogPop var(--t) var(--ease);
}
.dlg-title {
    margin-bottom: 14px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}
.dlg-content {
    margin-bottom: 20px;
    font-size: var(--fs-base);
    line-height: 2;
    color: var(--text-secondary);
}
.about-app {
    display: block;
    margin-bottom: 4px;
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
}
.dlg-content a {
    color: var(--primary);
    font-weight: 600;
}
.dlg-ok {
    width: 100%;
    min-height: 44px;
}
.nick-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--hero-soft);
    border: 1px solid var(--hero-soft-border);
    font-size: 12px;
    opacity: .8;
    cursor: pointer;
    vertical-align: 2px;
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nick-edit:hover,
.nick-edit:active {
    opacity: 1;
    transform: scale(1.06);
}

/* ---------- 错题本 ---------- */
.wrong-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 4px var(--pad-x) 10px;
    font-size: var(--fs-smd);
    color: var(--text-secondary);
}
.wrong-page-head b {
    color: var(--primary);
    font-size: var(--fs-md);
}

.wrong-row {
    position: relative;
    cursor: pointer;
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.wrong-row:active {
    transform: scale(.995);
}
@media (hover: hover) {
    .wrong-row:hover {
        box-shadow: var(--sh-pop);
        border-color: var(--border-strong);
    }
}

.wrong-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.wrong-head-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.wrong-head .question-type {
    margin: 0;
}
.wrong-tag {
    max-width: 140px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wrong-meta {
    flex: none;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
    white-space: nowrap;
}
.wrong-title {
    font-size: var(--fs-base);
    line-height: 1.7;
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
}
.wrong-foot {
    margin-top: 14px;
    text-align: right;
}
.wrong-go {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 7px 14px;
    border-radius: var(--r-full);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--fs-smd);
    font-weight: 600;
}

/* ---------- 收藏题目预览卡 ---------- */
#favList .option-item {
    padding: 12px 14px;
    cursor: default;
}
#favList .option-item .option-text {
    font-size: var(--fs-smd);
    color: var(--text-secondary);
}

/* ---------- 学习记录 ---------- */
.record-stats {
    margin-top: 10px;
}
.record-accuracy {
    flex: none;
    min-width: 62px;
    text-align: right;
}
.record-accuracy-value {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.4px;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.record-accuracy-label {
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}

/* ---------- 意见反馈表单 ---------- */
.fb-label {
    margin: 20px 0 10px;
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
}
.fb-label:first-child {
    margin-top: 0;
}
.fb-label .opt {
    margin-left: 4px;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-tertiary);
}
.fb-types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fb-type {
    padding: 8px 16px;
    border: 1px solid var(--soft-border);
    border-radius: var(--r-full);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: var(--fs-smd);
    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);
}
.fb-type:active {
    transform: scale(.96);
}
@media (hover: hover) {
    .fb-type:hover {
        border-color: var(--border-strong);
        color: var(--text);
    }
}
.fb-type.on {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
    font-weight: 700;
}
.fb-textarea {
    min-height: 128px;
}
.fb-imgs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.fb-img {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--soft);
    border: 1px solid var(--border);
}
.fb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fb-img .rm {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.fb-add {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fb-add:active {
    border-color: var(--primary);
    color: var(--primary);
}
.fb-add b {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}
.fb-tip {
    margin-top: 12px;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-tertiary);
}
.fb-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 24px;
    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);
}
.fb-submit:active {
    transform: scale(.99);
}
@media (hover: hover) {
    .fb-submit:hover:not(:disabled) {
        background: var(--primary-dark);
    }
}
.fb-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---------- 提问识海（AI 助教） ---------- */
body.ai-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.ai-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}
.ai-topbar {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 10px var(--pad-x);
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    overflow-x: auto;
    scrollbar-width: none;
}
.ai-topbar::-webkit-scrollbar {
    display: none;
}
.ai-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: var(--r-full);
    background: var(--soft);
    color: var(--text);
    font-size: var(--fs-smd);
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}
.ai-btn:active {
    transform: scale(.96);
}
.ai-btn.primary {
    background: var(--primary);
    color: var(--primary-contrast);
    box-shadow: var(--shadow-btn);
}
@media (hover: hover) {
    .ai-btn:hover {
        border-color: var(--border-strong);
    }
    .ai-btn.primary:hover {
        background: var(--primary-dark);
    }
}

.ai-history {
    display: none;
    flex: none;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.ai-history.open {
    display: block;
}
.ai-conv {
    position: relative;
    padding: 12px 44px 12px 18px;
    border-bottom: 1px dashed var(--border);
    cursor: pointer;
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--text);
}
.ai-conv:last-child {
    border-bottom: none;
}
@media (hover: hover) {
    .ai-conv:hover {
        background: var(--soft);
    }
}
.ai-conv.on {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.ai-conv small {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-tertiary);
}
.ai-conv .del {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-xs);
    color: var(--text-tertiary);
    font-size: 18px;
    line-height: 1;
}
.ai-conv .del:active {
    background: var(--danger-bg);
    color: var(--danger);
}
@media (hover: hover) {
    .ai-conv .del:hover {
        background: var(--danger-bg);
        color: var(--danger);
    }
}

.ai-msgs {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 16px var(--pad-x);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ai-welcome {
    margin: auto;
    padding: 24px 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: var(--fs-base);
}
.ai-welcome .big {
    font-size: 34px;
    margin-bottom: 10px;
}
.ai-m {
    display: flex;
}
.ai-m.user {
    justify-content: flex-end;
}
.ai-b {
    max-width: 82%;
    padding: 12px 15px;
    border-radius: var(--r-lg);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-m.user .ai-b {
    background: var(--primary);
    color: var(--primary-contrast);
    border-bottom-right-radius: var(--r-xs);
    box-shadow: var(--shadow-btn);
}
.ai-m.ai .ai-b {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-bottom-left-radius: var(--r-xs);
    box-shadow: var(--sh-1);
}
.ai-refs {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: var(--fs-sm);
    color: var(--text-tertiary);
}
.ai-ref {
    display: block;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--soft);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-ref.open {
    white-space: normal;
}
.ai-ref-t {
    margin-left: 4px;
}
.ai-ref-btn {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
}
.ai-ref-detail {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card-bg);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text);
    white-space: normal;
    word-break: break-all;
}
.ai-ref.open .ai-ref-detail {
    display: block;
}
.ai-ref-detail b {
    color: var(--primary);
}
.ai-dots i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--text-tertiary);
    animation: aiBlink 1.2s infinite both;
}
.ai-dots i:nth-child(2) {
    animation-delay: .2s;
}
.ai-dots i:nth-child(3) {
    animation-delay: .4s;
}
@keyframes aiBlink {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}

.ai-input-bar {
    flex: none;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px var(--pad-x) calc(12px + var(--nav-h) + var(--safe-b));
    border-top: 1px solid var(--border);
    background: var(--card-bg);
}
.ai-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    /* 高度上限：JS 读取此值作为自动增高的封顶，超出后输入框内部滚动，不再截断内容 */
    max-height: 168px;
    padding: 11px 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);
    resize: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ai-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.ai-send {
    flex: none;
    min-height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: var(--r-md);
    background: var(--primary-bg-btn);
    color: var(--primary-contrast);
    font-size: var(--fs-base);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-btn-hover);
    transition: transform var(--t-fast) var(--ease);
}
.ai-send:active {
    transform: scale(.96);
}
.ai-send:disabled {
    cursor: not-allowed;
}

/* ==========================================================
 * 18 响应式增强（移动优先 → 平板 → 桌面）
 * ======================================================== */

/* 内容入场：仅极轻的淡入，不位移（尊重「减弱动态效果」偏好） */
@media (prefers-reduced-motion: no-preference) {
    .page .card,
    .page .hero-card {
        animation: cardIn .26s var(--ease) both;
    }
    .page .card:nth-child(2) { animation-delay: .04s; }
    .page .card:nth-child(3) { animation-delay: .08s; }
    .page .card:nth-child(4) { animation-delay: .12s; }
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- ≥400px：紧凑双列宫格 ---------- */
@media (min-width: 400px) {
    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- ≥640px：大屏手机 / 竖屏平板 ---------- */
@media (min-width: 640px) {
    :root {
        --pad-x: 20px;
        --gap: 15px;
        --card-p: 20px 22px;
    }
    .stat-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .sheet-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .filter-bar {
        padding: 12px var(--pad-x);
    }
}

/* ---------- ≥768px：平板 ---------- */
@media (min-width: 768px) {
    :root {
        --page-max: 960px;
        --pad-x: 24px;
        --gap: 16px;
        --card-p: 22px 26px;
        --fs-2xl: 24px;
    }

    .menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .header-title {
        font-size: 17px;
    }
    .hero-card {
        padding: 26px 28px;
    }
    .hero-stats {
        gap: 16px;
        margin-top: 20px;
    }
    .hero-stat {
        padding: 14px 18px;
    }
    .hero-stat .stat-value {
        font-size: var(--fs-2xl);
    }
    .stat-value {
        font-size: 24px;
    }
    .subject-grid,
    .major-grid,
    .major-list {
        grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    }
    .study-item {
        flex-basis: 196px;
    }
    .practice-card {
        padding: 26px 30px;
        border-radius: var(--r-2xl);
    }
    .card-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .option-item:active {
        transform: none;
    }
    .option-item:hover {
        border-color: var(--border-strong);
    }
    .card-panel {
        max-width: 440px;
    }
    .result-ring {
        margin-bottom: 20px;
    }
    .ai-input-bar {
        align-items: flex-end;
    }
}

/* ---------- ≥1024px：桌面 ---------- */
@media (min-width: 1024px) {
    :root {
        --page-max: 1080px;
        --pad-x: 28px;
    }

    .header-inner,
    .filter-bar,
    .wrong-page-head {
        max-width: var(--page-max);
    }

    /* 底部导航：与内容同宽的居中卡片式 Dock */
    .bottom-nav {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: var(--page-max);
        justify-content: center;
        gap: 32px;
        padding: 8px 24px calc(8px + var(--safe-b));
        border-top: 1px solid var(--border);
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        box-shadow: var(--sh-pop);
    }
    .bottom-nav .nav-item {
        flex: none;
        min-width: 92px;
    }

    /* 底部操作栏：同样居中并跟随内容宽度 */
    .action-bar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: var(--page-max);
        border-top: 1px solid var(--border);
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
        box-shadow: var(--sh-pop);
    }
    body.with-bottom-nav .action-bar {
        bottom: var(--nav-h);
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    }

    .practice-card {
        margin: 20px auto calc(var(--action-bar-h) + var(--safe-b) + 40px);
        max-width: 920px;
    }
    .ai-input-bar {
        max-width: 860px;
        margin: 0 auto;
        border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    }
}

/* ---------- ≥1400px：超宽屏收敛内容宽度 ---------- */
@media (min-width: 1400px) {
    :root {
        --page-max: 1160px;
    }
}

/* ---------- ≤380px：超窄屏微调 ---------- */
@media (max-width: 380px) {
    .practice-header {
        padding: 8px;
        gap: 5px;
    }
    .practice-icon,
    .practice-header .theme-toggle,
    .practice-header .font-btn {
        width: 30px;
        height: 30px;
    }
    .hero-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
        padding: 9px 10px;
    }
    .hero-stat-icon {
        font-size: 18px;
    }
    .action-btn {
        padding: 0 16px;
    }
}

/* ---------- 触摸设备：移除依赖 hover 的位移 ---------- */
@media (hover: none) {
    .menu-item:active,
    .subject-card:active,
    .major-card:active,
    .study-item:active,
    .real-item:active {
        box-shadow: var(--sh-card);
    }
}

/* ==========================================================
 * 19 无障碍与动效偏好
 * ======================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* 高对比度模式：强化边框可读性 */
@media (prefers-contrast: more) {
    .card,
    .option-item,
    .subject-card,
    .study-item,
    .real-item,
    .major-select {
        border-color: var(--border-strong);
    }
}