/* ============================================
   悦读 - 全局主题协调设计系统
   核心原则：所有颜色从 --c-bg 派生，保证视觉协调
   ============================================ */

/* ---------- 基础令牌 ---------- */
:root {
    /* 根元素声明 color-scheme，浏览器在文档创建瞬间即用它决定默认画布底色；
        夜间主题由 <html> 内联 color-scheme:dark 覆盖（见 index.html 首帧引导脚本） */
    color-scheme: light;
    --reader-bg: #ffffff;
    --reader-text: #1f2937;
    --reader-font-size: 15px;
    --reader-line-height: 1.8;
    --app-font-scale: 1;
    /* 跨端渲染补偿系数：由 utils.normalizeRootFontSize() 测量后写入，使两端字号实际渲染高度一致 */
    --sys-comp: 1;

    /* 设置按钮统一变量 - 阅读器和我的页面共用 */
    --settings-btn-bg: #e5e7eb;
    --settings-btn-bg-hover: #d1d5db;
    --settings-btn-text: #6366f1;
    --settings-btn-font-size: 14px;
    --settings-btn-radius: 8px;

    /* 默认白色主题 - 背景是根基 */
    --c-bg: #f9fafb;
    --c-text: #1f2937;
    --c-text-secondary: #4b5563;
    --c-text-tertiary: #6b7280;
    --c-text-muted: #9ca3af;
    --c-primary: #6366f1;
    --c-primary-hover: #4f46e5;
    --c-primary-text: #ffffff;
    --c-danger: #ef4444;
    --c-danger-hover: #dc2626;
    --c-success: #22c55e;
    --c-warning: #f59e0b;
    /* 表面色 & 强调色（从主题派生）*/
    --c-bg-input: color-mix(in srgb, var(--c-bg) 88%, var(--c-text) 12%);
    --c-accent: var(--c-primary);
}
body { --app-font-scale: 1; }

/* 首次加载禁用过渡：避免「样式到达瞬间 body 背景从默认色过渡到主题色」产生白/亮闪。
   该 class 由 index.html body 引导脚本挂载，window load 后下一帧移除。 */
html.no-transition,
html.no-transition body,
html.no-transition #topNav,
html.no-transition #bottomNav,
html.no-transition main {
    transition: none !important;
}

/* ---------- 主题变体：背景是根，所有表面色从背景派生 ---------- */

/* 白色主题 */
body.app-theme-white {
    color-scheme: light;
    --c-bg: #f9fafb;
    --c-text: #1f2937;
    --c-text-secondary: #4b5563;
    --c-text-tertiary: #6b7280;
    --c-text-muted: #9ca3af;
    --c-primary: #6366f1;
    --c-primary-hover: #4f46e5;
    --c-primary-text: #ffffff;
    --c-danger: #ef4444;
    --c-danger-hover: #dc2626;
    --c-success: #22c55e;
    --c-warning: #f59e0b;
    --settings-btn-bg: #e5e7eb;
    --settings-btn-bg-hover: #d1d5db;
    --settings-btn-text: #6366f1;
    --c-bg-input: color-mix(in srgb, var(--c-bg) 88%, var(--c-text) 12%);
    --c-accent: var(--c-primary);
    --anki-kw-color: #7c3aed;
}

/* 护眼绿色主题 */
body.app-theme-green {
    color-scheme: light;
    --c-bg: #c7edcc;
    --c-text: #2d3436;
    --c-text-secondary: #4a5568;
    --c-text-tertiary: #5f6c70;
    --c-text-muted: #7d8a8e;
    --c-primary: #2d6a4f;
    --c-primary-hover: #1b4332;
    --c-primary-text: #ffffff;
    --c-danger: #c53030;
    --c-danger-hover: #9b2c2c;
    --c-success: #276749;
    --c-warning: #b7791f;
    --settings-btn-bg: #b8e5bf;
    --settings-btn-bg-hover: #a8d5b0;
    --settings-btn-text: #2d6a4f;
    --c-bg-input: color-mix(in srgb, var(--c-bg) 88%, var(--c-text) 12%);
    --c-accent: var(--c-primary);
    --anki-kw-color: #1e7a4e;
}

/* 米黄色主题 */
body.app-theme-yellow {
    color-scheme: light;
    --c-bg: #f5e6c8;
    --c-text: #3d2f1f;
    --c-text-secondary: #5c4a32;
    --c-text-tertiary: #7d6650;
    --c-text-muted: #a08a70;
    --c-primary: #8b6914;
    --c-primary-hover: #6b4e0e;
    --c-primary-text: #ffffff;
    --c-danger: #b91c1c;
    --c-danger-hover: #991b1b;
    --c-success: #166534;
    --c-warning: #b45309;
    --settings-btn-bg: #ead9b4;
    --settings-btn-bg-hover: #dcc9a0;
    --settings-btn-text: #8b6914;
    --c-bg-input: color-mix(in srgb, var(--c-bg) 88%, var(--c-text) 12%);
    --c-accent: var(--c-primary);
    --anki-kw-color: #92400e;
}

/* 夜间主题 */
body.app-theme-night {
    color-scheme: dark;
    --c-bg: #1a1a2e;
    --c-text: #e0e0e0;
    --c-text-secondary: #b8b8c8;
    --c-text-tertiary: #9898aa;
    --c-text-muted: #6c6c7c;
    --c-primary: #818cf8;
    --c-primary-hover: #6366f1;
    --c-primary-text: #1a1a2e;
    --c-danger: #f87171;
    --c-danger-hover: #ef4444;
    --c-success: #4ade80;
    --c-warning: #fbbf24;
    --settings-btn-bg: #2a2a40;
    --settings-btn-bg-hover: #3a3a55;
    --settings-btn-text: #818cf8;
    --c-bg-input: color-mix(in srgb, var(--c-bg) 88%, var(--c-text) 12%);
    --c-accent: var(--c-primary);
    --anki-kw-color: #fbbf24;
}

/* ---------- 基础 html/body 样式 ---------- */
html {
    overflow-x: visible;
    /* 共享 CJK 字体栈：尽量让 iOS/安卓退到度量更接近的中文字体，减小两端光学字号差异 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    /* 固定根字号：归一化 rem 基准，确保所有终端 1rem = 16px */
    font-size: 16px;
    /* 禁止浏览器（iOS Safari / Android）自动放大文本，保证字号跨终端一致 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    font-size: calc(16px * var(--app-font-scale) * var(--sys-comp, 1) * var(--platform-scale, 1));
    -webkit-tap-highlight-color: transparent;
    background-color: var(--c-bg);
    color: var(--c-text);
    transition: background-color 0.3s, color 0.3s, font-size 0.2s;
    overflow-x: visible;
    min-height: 100vh;
    width: 100%;
    /* 显式声明，覆盖可能的浏览器默认文本自动调整 */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- 核心机制：所有表面/边框/悬停色 从 --c-bg 派生 ---------- */

/* 表面 = 背景 + 少量白色混合（与主题背景相近） */
.bg-white,
.bg-white\/90 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
    transition: background-color 0.2s, color 0.2s;
}

/* 次表面 - 更接近背景 */
.bg-gray-50 {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    color: var(--c-text);
}

/* 更深的次表面 */
.bg-gray-100 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
}

.bg-gray-200 {
    background-color: color-mix(in srgb, var(--c-bg) 84%, white) !important;
    color: var(--c-text);
}

/* 半透明白（渐变头部按钮/用户头像） */
.bg-white\/20 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
}
.bg-white\/30 {
    background-color: color-mix(in srgb, var(--c-bg) 84%, white) !important;
}

/* 边框 = 背景 + 深色混合 */
.border-gray-100 {
    border-color: color-mix(in srgb, var(--c-bg) 85%, black) !important;
}
.border-gray-200 {
    border-color: color-mix(in srgb, var(--c-bg) 75%, black) !important;
}
.border-gray-300 {
    border-color: color-mix(in srgb, var(--c-bg) 65%, black) !important;
}
.border-gray-800 {
    border-color: color-mix(in srgb, var(--c-bg) 55%, black) !important;
}
.border-white\/30 {
    border-color: color-mix(in srgb, var(--c-bg) 70%, white) !important;
}

/* 悬停 - 轻微变深（从背景派生，加少量黑色） */
.hover\:bg-gray-50:hover {
    background-color: color-mix(in srgb, var(--c-bg) 90%, black) !important;
}
.hover\:bg-gray-100:hover {
    background-color: color-mix(in srgb, var(--c-bg) 86%, black) !important;
}
.hover\:bg-gray-50\/50:hover {
    background-color: color-mix(in srgb, var(--c-bg) 95%, black) !important;
}
.hover\:bg-white\/30:hover {
    background-color: color-mix(in srgb, var(--c-bg) 84%, white) !important;
}

/* 分隔线 */
.divide-gray-100 > * + * {
    border-color: color-mix(in srgb, var(--c-bg) 85%, black) !important;
}
.divide-gray-200 > * + * {
    border-color: color-mix(in srgb, var(--c-bg) 75%, black) !important;
}

/* ---------- 文字颜色层级 ---------- */
.text-gray-300 { color: var(--c-text-muted) !important; opacity: 0.55; }
.text-gray-400 { color: var(--c-text-muted) !important; }
.text-gray-500 { color: var(--c-text-muted) !important; }
.text-gray-600 { color: var(--c-text-tertiary) !important; }
.text-gray-700 { color: var(--c-text-secondary) !important; }
.text-gray-800 { color: var(--c-text) !important; }
.text-gray-900 { color: var(--c-text) !important; }

.text-white\/70 { color: color-mix(in srgb, var(--c-text) 70%, transparent) !important; }
.text-white\/80 { color: color-mix(in srgb, var(--c-text) 80%, transparent) !important; }

/* ---------- 品牌主色 ---------- */
.bg-primary {
    background-color: var(--c-primary) !important;
    color: var(--c-primary-text) !important;
    transition: background-color 0.2s;
}
.bg-primary:hover,
.hover\:bg-primaryDark:hover {
    background-color: var(--c-primary-hover) !important;
}
.bg-primary\/10 {
    background-color: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)) !important;
}
.bg-primary\/20 {
    background-color: color-mix(in srgb, var(--c-primary) 20%, var(--c-bg)) !important;
}
.bg-primary\/30 {
    background-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-bg)) !important;
}
.text-primary { color: var(--c-primary) !important; }
.border-primary { border-color: var(--c-primary) !important; }
.hover\:border-primary:hover { border-color: var(--c-primary) !important; }
.hover\:text-primary:hover { color: var(--c-primary) !important; }

/* ---------- 功能色 ---------- */
/* 红色/危险 */
.bg-red-50 { background-color: color-mix(in srgb, var(--c-danger) 10%, var(--c-bg)) !important; }
.bg-red-100 { background-color: color-mix(in srgb, var(--c-danger) 15%, var(--c-bg)) !important; }
.bg-red-400 { background-color: var(--c-danger) !important; }
.bg-red-500 { background-color: var(--c-danger) !important; }
.bg-red-500:hover { background-color: var(--c-danger-hover) !important; }
.text-red-500, .text-red-600 { color: var(--c-danger) !important; }
.hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--c-danger) 10%, var(--c-bg)) !important; }
.hover\:bg-red-200:hover { background-color: color-mix(in srgb, var(--c-danger) 22%, var(--c-bg)) !important; }
.hover\:text-red-500:hover { color: var(--c-danger) !important; }
.border-red-500 { border-color: var(--c-danger) !important; }

/* 绿色/成功 */
.bg-green-100 { background-color: color-mix(in srgb, var(--c-success) 12%, var(--c-bg)) !important; }
.bg-green-300 { background-color: color-mix(in srgb, var(--c-success) 30%, var(--c-bg)) !important; }
.text-green-300 { color: var(--c-success) !important; opacity: 0.6; }
.text-green-500, .text-green-600 { color: var(--c-success) !important; }
.text-green-700 { color: color-mix(in srgb, var(--c-success) 70%, black) !important; }
.bg-green-600 { background-color: var(--c-success) !important; }
.hover\:bg-green-50:hover { background-color: color-mix(in srgb, var(--c-success) 10%, var(--c-bg)) !important; }
.hover\:bg-green-200:hover { background-color: color-mix(in srgb, var(--c-success) 22%, var(--c-bg)) !important; }

/* 琥珀/警告 */
.bg-amber-100 { background-color: color-mix(in srgb, var(--c-warning) 15%, var(--c-bg)) !important; }
.text-amber-400, .text-amber-500, .text-amber-600, .text-amber-700 { color: var(--c-warning) !important; }
.hover\:bg-amber-200:hover { background-color: color-mix(in srgb, var(--c-warning) 25%, var(--c-bg)) !important; }

/* ---------- 紫色图标容器 -> 派生自 primary ---------- */
.bg-purple-100 {
    background-color: color-mix(in srgb, var(--c-primary) 12%, var(--c-bg)) !important;
}
.text-purple-500 { color: var(--c-primary) !important; }

/* 文档图标渐变 */
.bg-gradient-to-br.from-indigo-100.to-purple-100,
.from-indigo-100 {
    background: linear-gradient(to bottom right,
        color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)),
        color-mix(in srgb, var(--c-primary) 22%, var(--c-bg))) !important;
}
.to-purple-100 {
    background-color: color-mix(in srgb, var(--c-primary) 18%, var(--c-bg)) !important;
}

/* 蓝色文字 -> 用 primary */
.text-blue-500, .text-blue-600 { color: var(--c-primary) !important; }

/* 渐变头部 -> 从背景派生，混入主色以保证协调 */
.bg-gradient-to-r.from-primary.to-secondary,
.bg-gradient-to-r.from-primary {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--c-bg) 35%, var(--c-primary)),
        color-mix(in srgb, var(--c-bg) 55%, var(--c-primary))) !important;
    color: var(--c-primary-text) !important;
    transition: background 0.3s, color 0.3s;
}

/* ---------- 输入框/下拉框 ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* !important 锁死：防 iOS Safari focus 自动放大（≥16px 阈值） */
    background-color: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text);
    border-color: color-mix(in srgb, var(--c-bg) 75%, black);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
/* contenteditable 元素 iOS Safari 也会自动放大，单独锁定 font-size */
[contenteditable="true"],
[contenteditable="plaintext-only"] {
    font-size: 16px !important;
}
input::placeholder, textarea::placeholder {
    color: var(--c-text-muted);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent);
    outline: none;
}
select option {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text);
}
label, .form-label, .block.text-sm.font-medium {
    color: var(--c-text-secondary) !important;
}

/* 让原生下拉列表（弹窗 option）也跟随应用主题变量，避免出现白色下拉板 + 暗色文字不兼容等问题 */
@supports (not (selector(:has(*)))) { select option { background-color: var(--c-bg); color: var(--c-text); } }
select.ce-tb-select option,
select.ce-tb-select optgroup {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white);
    color: var(--c-text);
}
select.ce-tb-select option:checked {
    background-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-bg));
    color: var(--c-text);
}


/* ---------- 导航栏 ---------- */
#topNav {
    top: 0;                                      /* 普通浏览器贴顶；PWA standalone 用 padding 让位状态栏 */
    padding-top: env(safe-area-inset-top, 0);    /* 全屏 PWA 下背景延伸到状态栏下方，内层 h-12 仍在其下 */
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--c-bg) 75%, black) !important;
    color: var(--c-text);
    transition: background-color 0.3s, color 0.3s;
}
#bottomNav {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    border-top: 1px solid color-mix(in srgb, var(--c-bg) 75%, black) !important;
    color: var(--c-text);
    transition: background-color 0.3s, color 0.3s;
}

/* 导航链接 */
#topNav .text-gray-800 { color: var(--c-text) !important; }
#topNav .nav-link { color: var(--c-text-secondary) !important; }
#topNav .nav-link.text-primary { color: var(--c-primary) !important; }
#topNav .nav-link:hover { color: var(--c-primary) !important; }

#bottomNav .nav-link,
#bottomNav a.nav-link { color: var(--c-text-muted) !important; }
#bottomNav .nav-link:hover { color: var(--c-primary) !important; }
#bottomNav .nav-link.text-primary,
#bottomNav a.nav-link.text-primary { color: var(--c-primary) !important; }

#userBadge { color: var(--c-text-muted) !important; }

/* 「我的」页顶部导航「扫一扫」入口：红色闪动，提示可扫码登录新设备 */
#qrScanBtn {
    background: transparent;
    border: none;
    padding: 2px;
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
    color: #ef4444;
    animation: qrScanPulse 1.4s ease-in-out infinite;
}
#qrScanBtn i { pointer-events: none; }
@keyframes qrScanPulse {
    0%, 100% { opacity: 1;    transform: scale(1);   }
    50%      { opacity: 0.35; transform: scale(0.9); }
}
/* 尊重系统「减少动态效果」：改为常亮红色，不闪动 */
@media (prefers-reduced-motion: reduce) {
    #qrScanBtn { animation: none; }
}

/* ---------- 文档卡片 ---------- */
.doc-card {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
    border-color: color-mix(in srgb, var(--c-bg) 80%, black) !important;
    transition: all 0.2s;
}
.doc-card:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--c-text) 10%, transparent);
}

/* 收藏列表条目移除：慢动作折叠动画（max-height + opacity + margin + padding 同步过渡） */
.fav-collapsing {
    overflow: hidden !important;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1),
                opacity .3s ease,
                margin .45s cubic-bezier(.4, 0, .2, 1),
                padding .45s cubic-bezier(.4, 0, .2, 1) !important;
    transform: none !important;
}

/* 收藏条目置顶：FLIP 动画的 transform 过渡 */
.fav-moving {
    transition: transform .4s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 10;
}

/* ---------- 复习卡片 ---------- */
.review-card,
.flip-card .flip-card-front,
.flip-card .flip-card-back {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
    border-color: color-mix(in srgb, var(--c-bg) 80%, black);
}

/* ---------- 上传拖拽区 ---------- */
.upload-zone {
    border: 2px dashed color-mix(in srgb, var(--c-bg) 65%, black);
    border-radius: 16px;
    padding: 0.4rem 1rem;
    text-align: center;
    /* 只过渡视觉态（hover/dragover 改的是边框与底色）；上下内边距由一屏自适应实时改写，不能过渡 */
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    cursor: pointer;
    color: var(--c-text-tertiary);
    background-color: color-mix(in srgb, var(--c-bg) 92%, var(--c-text));
}
@media (min-width: 768px) {
    .upload-zone {
        padding: 0.65rem 1rem;
    }
}
.upload-zone:hover,
.upload-zone.dragover {
    border-color: var(--c-primary);
    background-color: color-mix(in srgb, var(--c-primary) 6%, var(--c-bg));
    color: var(--c-text);
}

/* ---------- 上传页：上下间距自适应（--uf-scale 由 upload.js 计算写入，1 = 原始间距） ---------- */
.upload-page {
    --uf-scale: 1;
    --uf-zone-pad-base: 6.4px;                        /* 拖拽区上下内边距基准（移动端 0.4rem） */
    --uf-zone-pad: calc(var(--uf-zone-pad-base) * var(--uf-scale));
    --uf-gap: calc(12px * var(--uf-scale));           /* 常规区块间距（原 mb-3） */
    --uf-gap-md: calc(16px * var(--uf-scale));        /* 提交按钮上间距（原 mt-4） */
    --uf-gap-lg: calc(24px * var(--uf-scale));        /* 文件信息/进度卡片间距（原 mb-6 / mt-6） */
    --uf-micro: calc(4px * var(--uf-scale));          /* 拖拽区内部小间距（原 mb-1 / mt-1） */
    --uf-pad: calc(16px * var(--uf-scale));           /* 卡片上下内边距（原 p-4） */
    --uf-row-gap: calc(12px * var(--uf-scale));       /* 表单行间距（原 space-y-3） */
    --uf-btn-pad: calc(10px * var(--uf-scale));       /* 提交按钮上下内边距（原 py-2.5） */
    padding-top: calc(11px * var(--uf-scale));        /* 原 mt-[6px] + py-[5px] */
    padding-bottom: calc(5px * var(--uf-scale));
}
@media (min-width: 768px) {
    .upload-page { --uf-zone-pad-base: 10.4px; }      /* 桌面端拖拽区 0.65rem 基准 */
}
/* 用类选择器（特异性 0,2,0）覆盖 Tailwind 工具类：scale=1 时与改动前的视觉完全一致 */
.upload-page .uf-gap { margin-bottom: var(--uf-gap); }
.upload-page .uf-gap-lg-b { margin-bottom: var(--uf-gap-lg); }
.upload-page .uf-gap-lg { margin-top: var(--uf-gap-lg); }
.upload-page .uf-card {
    /* 上下间距随 scale 收缩，左右保持原 p-4 的 16px 不变 */
    padding-top: var(--uf-pad);
    padding-bottom: var(--uf-pad);
    padding-left: 16px;
    padding-right: 16px;
}
.upload-page .uf-row + .uf-row { margin-top: var(--uf-row-gap); }
.upload-page .uf-micro-b { margin-bottom: var(--uf-micro); }
.upload-page .uf-micro-t { margin-top: var(--uf-micro); }
.upload-page .uf-submit {
    margin-top: var(--uf-gap-md);
    padding-top: var(--uf-btn-pad);
    padding-bottom: var(--uf-btn-pad);
}
.upload-page .upload-zone { padding-top: var(--uf-zone-pad); padding-bottom: var(--uf-zone-pad); }
/* 极限紧凑：间距压到下限仍放不下时，精简拖拽区装饰元素（不改变任何字号） */
.upload-page.uf-compact #zoneOr,
.upload-page.uf-compact #formatHint { display: none; }
.upload-page.uf-compact #zoneIcon { font-size: 1.25rem; }

/* ---------- 设置面板 ---------- */
/* ---------- 设置面板折叠 ---------- */
.settings-list {
    display: none;
}
#settingsRoot.expanded .settings-list {
    display: block;
}
.settings-panel-body {
    display: none;
}
.settings-panel.open .settings-panel-body {
    display: block;
}
.settings-chevron {
    transition: transform 0.2s;
}
.settings-panel.open .settings-chevron {
    transform: rotate(90deg);
}
#settingsRoot:not(.expanded) .settings-chevron {
    display: none;
}
#settingsRoot.expanded .settings-list .settings-chevron {
    display: inline-block;
}
#settingsRoot.expanded .settings-list .settings-panel-header {
    cursor: pointer;
}

.settings-panel-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}
.settings-panel-header:hover {
    background-color: color-mix(in srgb, var(--c-bg) 90%, white);
}

/* ---------- 统一设置按钮样式（阅读器 + 我的页面共用） ---------- */
.settings-btn-header {
    background-color: var(--settings-btn-bg);
    transition: background-color 0.2s;
}
.settings-btn-header:hover {
    background-color: var(--settings-btn-bg-hover);
}
.settings-btn-icon {
    color: var(--settings-btn-text);
    font-size: var(--settings-btn-font-size);
}
.settings-btn-text {
    font-size: var(--settings-btn-font-size);
    color: var(--c-text);
}

/* 记忆间隔占位 */
.memory-placeholder {
    background: color-mix(in srgb, var(--c-bg) 90%, white);
    border: 1px dashed color-mix(in srgb, var(--c-bg) 65%, black);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s;
}

/* ===== iOS 分组式设置列表（设置/账户/设备）===== */
.set-group {
    position: relative;
}
.set-group-toggle {
    appearance: none;
    -webkit-appearance: none;
}
.set-group-chevron {
    transition: transform 0.2s;
}
.set-group.open .set-group-chevron {
    transform: rotate(0deg) !important; /* 覆盖内联 rotate(-90)，与 .section-chevron 展开一致 */
}
.set-group-body {
    display: none;
}
.inline-set-card {
    background-color: var(--c-bg-card, var(--c-bg));
}
.set-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s;
}
.set-row:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, var(--c-primary));
}
.set-row-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.set-row-long {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--c-text);
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.set-row-long small {
    font-size: 12px;
    font-weight: 400;
    color: color-mix(in srgb, var(--c-text) 45%, transparent);
    margin-top: 1px;
}
.set-row-chip {
    font-size: 10px;
    font-weight: 500;
    color: var(--c-text-secondary, #888);
    background-color: var(--c-bg-input, #f3f4f6);
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.set-row-divider {
    height: 1px;
    background-color: var(--c-border, rgba(128, 128, 128, 0.2));
    margin: 0 16px;
}
.set-panel-body {
    background-color: var(--c-bg-muted, color-mix(in srgb, var(--c-bg) 95%, white));
}
.set-panel-body-inner {
    background-color: var(--c-bg-muted, color-mix(in srgb, var(--c-bg) 95%, white));
}
.set-red-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    color: #dc2626;
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
}
.set-red-row:hover {
    background-color: rgba(220, 38, 38, 0.06);
}
body.theme-night .set-red-row,
body.app-theme-night .set-red-row {
    color: #f87171;
}

/* 字体步进器 */
.memory-placeholder:hover {
    background: color-mix(in srgb, var(--c-bg) 92%, white);
}
.memory-placeholder .bg-white,
.memory-placeholder .bg-gray-100 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-color: color-mix(in srgb, var(--c-bg) 75%, black) !important;
    color: var(--c-text-secondary);
}

/* 字体步进器 */
.fs-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fs-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--c-bg) 75%, black);
    background: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text);
    cursor: pointer;
    transition: all 0.2s;
}
.fs-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg));
    border-color: var(--c-primary);
}
.fs-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fs-display {
    min-width: 80px;
    text-align: center;
    font-weight: 500;
    color: var(--c-text);
}

/* 字号按钮组（直接显示 5 档大小） */
.fs-levels {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.fs-level-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 56px;
    padding: 8px 4px;
    border: 2px solid color-mix(in srgb, var(--c-bg) 70%, black);
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.fs-level-btn:hover {
    transform: translateY(-1px);
    border-color: var(--c-primary);
}
.fs-level-btn.active {
    border-color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 8%, var(--c-bg));
    color: var(--c-primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--c-primary) 18%, transparent);
}
.fs-level-btn .fs-letter {
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 2px;
    color: inherit;
}
.fs-level-btn .fs-px {
    font-size: 10px;
    color: var(--c-text-muted);
}
.fs-level-btn.active .fs-px {
    color: var(--c-primary);
    opacity: 0.85;
}

/* 紧凑设置头内置：主题芯片 */
.theme-chip {
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.theme-chip:hover {
    transform: scale(1.08);
}
.theme-chip.active {
    border-color: var(--c-primary) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 22%, transparent),
                0 1px 3px rgba(0,0,0,0.1);
    transform: scale(1.06);
}

/* 紧凑设置头内置：字号芯片 */
.fs-chip {
    cursor: pointer;
    background: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text-secondary);
    transition: all 0.15s;
    user-select: none;
}
.fs-chip:hover {
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.fs-chip.active {
    background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--c-primary) 18%, transparent);
    transform: scale(1.05);
}
.fs-chip-active {
    background: color-mix(in srgb, var(--c-primary) 10%, var(--c-bg)) !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
    font-weight: 600;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--c-primary) 18%, transparent);
}

/* ---------- 字号精细滑条 ---------- */
.fs-slider-container {
    position: relative;
    width: 120px;
    height: 28px;
    display: flex;
    align-items: center;
}

.fs-range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--c-primary) 0%,
        var(--c-primary) var(--fs-progress, 50%),
        color-mix(in srgb, var(--c-bg) 75%, black) var(--fs-progress, 50%),
        color-mix(in srgb, var(--c-bg) 75%, black) 100%);
    outline: none;
    cursor: pointer;
    transition: height 0.15s;
    margin: 0;
}
.fs-range-slider:hover {
    height: 6px;
}
.fs-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fs-range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.fs-range-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}
.fs-range-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fs-range-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}
.fs-range-slider::-moz-range-thumb:active {
    cursor: grabbing;
}
.fs-range-slider::-moz-range-track {
    background: transparent;
    border: none;
}

/* 浮动字号显示窗 */
.fs-value-bubble {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    left: 50%;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--c-primary);
    color: white;
    font-size: 10px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}
.fs-value-bubble::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--c-primary);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 1px;
}
.fs-value-bubble.fs-bubble-visible {
    opacity: 1;
}

/* ---------- 进度条 ---------- */
.progress-bar {
    background: color-mix(in srgb, var(--c-bg) 75%, black);
    border-radius: 2px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 65%, var(--c-primary-hover)));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ---------- 复习排序按钮 ---------- */
.sort-btn {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text-secondary);
    border-color: color-mix(in srgb, var(--c-bg) 75%, black);
}
.sort-btn:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white);
}
.sort-btn.sort-btn-active {
    background-color: var(--c-primary) !important;
    color: var(--c-primary-text) !important;
    border-color: var(--c-primary) !important;
}

/* ---------- 复习会话弹窗 ---------- */
#reviewSession .bg-white\/90 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
    border-bottom: 1px solid color-mix(in srgb, var(--c-bg) 75%, black);
}

/* ---------- 管理员页面 ---------- */
.admin-tabs .text-gray-500 {
    color: var(--c-text-muted) !important;
}

/* ---------- 弹窗/Toast ---------- */
#modalContainer #modalContent {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-bg) 75%, black);
}

/* ---------- 阴影 ---------- */
.shadow-sm { box-shadow: 0 1px 2px color-mix(in srgb, var(--c-text) 5%, transparent); }
.shadow, .shadow-md { box-shadow: 0 4px 12px color-mix(in srgb, var(--c-text) 8%, transparent); }
.shadow-xl { box-shadow: 0 8px 24px color-mix(in srgb, var(--c-text) 12%, transparent); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c-bg) 55%, black);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c-bg) 40%, black);
}

/* 文本选中（全局） */
::selection {
    background: color-mix(in srgb, var(--c-primary) 30%, transparent);
    color: var(--c-text);
}

/* ============================================
   阅读器文本选中 - 动态适配主题背景
   浅色主题：半透明强调色作背景，保留深色文字
   深色主题：半透明白色作背景，深色文字
   ============================================ */
.reader-mode ::selection,
.reader-mode ::-moz-selection {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 35%, transparent);
    color: var(--reader-text);
}

/* 白色主题：淡紫底 + 深色文字 */
body.theme-white .reader-mode ::selection {
    background: rgba(99, 102, 241, 0.28);
    color: #1f2937;
}

/* 护眼主题：深绿底 + 深色文字 */
body.theme-green .reader-mode ::selection {
    background: rgba(45, 106, 79, 0.35);
    color: #1a3324;
}

/* 米黄主题：深棕底 + 深色文字 */
body.theme-yellow .reader-mode ::selection {
    background: rgba(139, 105, 20, 0.32);
    color: #3d2f1f;
}

/* 夜间主题：淡紫底 + 深色文字（在深背景上对比明显） */
body.theme-night .reader-mode ::selection {
    background: rgba(129, 140, 248, 0.45);
    color: #e0e0e0;
}

/* Anki 复习会话：文本选中样式与阅读器一致 */
.anki-session ::selection,
.anki-session ::-moz-selection {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 35%, transparent);
    color: var(--reader-text);
}

/* 复习会话内禁用双击缩放，保证整屏单击/三连击判定可靠 */
.anki-session {
    touch-action: manipulation;
}

body.theme-white .anki-session ::selection {
    background: rgba(99, 102, 241, 0.28);
    color: #1f2937;
}

body.theme-green .anki-session ::selection {
    background: rgba(45, 106, 79, 0.35);
    color: #1a3324;
}

body.theme-yellow .anki-session ::selection {
    background: rgba(139, 105, 20, 0.32);
    color: #3d2f1f;
}

body.theme-night .anki-session ::selection {
    background: rgba(129, 140, 248, 0.45);
    color: #e0e0e0;
}

/* ============================================
   阅读器专属（不受全局主题影响）
   ============================================ */
body.reader-mode-bg {
    background-color: var(--reader-bg) !important;
    color: var(--reader-text);
}
body.theme-white.reader-mode-bg { --reader-bg: #f9fafb; --reader-text: #1f2937; --reader-accent: #6366f1; --settings-btn-bg: #e5e7eb; --settings-btn-bg-hover: #d1d5db; --settings-btn-text: #6366f1; }
body.theme-green.reader-mode-bg { --reader-bg: #c7edcc; --reader-text: #2d3436; --reader-accent: #2d6a4f; --settings-btn-bg: #b8e5bf; --settings-btn-bg-hover: #a8d5b0; --settings-btn-text: #2d6a4f; }
body.theme-yellow.reader-mode-bg { --reader-bg: #f5e6c8; --reader-text: #3d2f1f; --reader-accent: #8b6914; --settings-btn-bg: #ead9b4; --settings-btn-bg-hover: #dcc9a0; --settings-btn-text: #8b6914; }
body.theme-night.reader-mode-bg { --reader-bg: #1a1a2e; --reader-text: #e0e0e0; --reader-accent: #818cf8; --settings-btn-bg: #2a2a40; --settings-btn-bg-hover: #3a3a55; --settings-btn-text: #818cf8; }

body.reader-mode-bg #topNav,
body.reader-mode-bg #bottomNav {
    background-color: var(--reader-bg) !important;
}

.reader-mode { padding: 0 !important; margin: 0 !important; min-height: 100vh; }
.reader-container { min-height: 100vh; background-color: var(--reader-bg); }
.reader-content {
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: var(--reader-text);
    background-color: transparent;
    padding: 3px 5px;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: justify;
    text-justify: inter-ideograph;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    /* 全终端手势仲裁：允许平移滚动与双指捏合缩放，仅禁用双击/三连原生缩放，
       保证双击提句与长按框选在所有移动浏览器（含三星/QQ/UC/Firefox）不被系统手势竞争 */
    touch-action: manipulation;
    /* 边缘安全区：避让 iOS 左边缘返回手势，正文两侧留出系统手势通道 */
    padding-left: max(env(safe-area-inset-left, 0px), 20px);
    padding-right: max(env(safe-area-inset-right, 0px), 12px);
}

/* 拖拽框选期间临时锁定滚动，让 pointermove 完全可控 */
.reader-content.dragging {
    touch-action: none;
}

/* ===== 文档正文编辑态 ===== */
.reader-content.reader-editing p[contenteditable="true"] {
    background-color: rgba(99, 102, 241, 0.06);
    border-radius: 4px;
    outline: 1px dashed transparent;
    transition: background-color 0.15s, outline-color 0.15s;
    cursor: text;
}
.reader-content.reader-editing p[contenteditable="true"]:focus {
    background-color: rgba(99, 102, 241, 0.12);
    outline-color: rgba(99, 102, 241, 0.5);
}
/* 夜间主题：编辑态用更柔和的对比 */
body.theme-dark .reader-content.reader-editing p[contenteditable="true"] {
    background-color: rgba(129, 140, 248, 0.10);
}
body.theme-dark .reader-content.reader-editing p[contenteditable="true"]:focus {
    background-color: rgba(129, 140, 248, 0.18);
    outline-color: rgba(129, 140, 248, 0.6);
}
/* 编辑按钮激活（保存态） */
#editDocBtn.editing {
    background-color: rgba(16, 185, 129, 0.18);
    color: #10b981;
}
#editDocBtn.editing:hover {
    background-color: rgba(16, 185, 129, 0.28);
}

/* 触摸设备（手机/平板/触屏笔记本/折叠屏展开态，按指针能力判定而非视口宽度）：
   禁止原生长按选词、选区手柄与 iOS 呼叫条，文本交互统一走双击提句/三连提段/长按框选；
   桌面鼠标与手写笔（hover:hover, pointer:fine）仍可正常拖选文本。
   max-width:767px 作为不支持 pointer 媒体查询的旧浏览器兜底（逗号列表逐条独立判定）。 */
@media (hover: none) and (pointer: coarse), (max-width: 767px) {
    .reader-content {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* 安卓终极兜底：全页面禁用原生拖选/长按菜单（排除输入框与可编辑区）。
   不依赖 selectstart；任何元素长按都不再出现原生选词/手柄 */
html.android-reader,
html.android-reader * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}
html.android-reader input,
html.android-reader textarea,
html.android-reader [contenteditable="true"],
html.android-reader [contenteditable=""] {
    user-select: text !important;
    -webkit-user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* 滚动模式：内容连续显示，跟随页面滚动 */
.reader-mode-scroll {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    /* 禁下拉刷新 + 禁边界回弹带动整页，CSS 层面比 JS preventDefault 更可靠 */
    overscroll-behavior: none;
}
.reader-mode-scroll .reader-container {
    min-height: 100vh;
}
.reader-mode-scroll .reader-content {
    overflow: visible;
    cursor: text;
}

/* ===== 阅读页区域框选（长按 2 秒 → 拖拽划定矩形）===== */
/* 浮层挂 body、absolute + 文档坐标（随正文滚动）；layer/box 永不拦截事件，只有手柄/删除按钮可交互 */
.reader-region-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 35; /* 高于正文与浮层滚动条(30)，低于上下导航(40)/阅读顶栏(60)/选区工具栏(9990) */
}
.reader-region-layer .reader-region-box {
    position: absolute;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid var(--reader-accent, #6366f1);
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 8%, transparent);
    pointer-events: none;
}
/* 未选中：淡虚线弱化显示，不遮挡阅读 */
.reader-region-layer .reader-region-box:not(.is-selected) {
    border-style: dashed;
    background: transparent;
    opacity: 0.55;
}
.reader-region-layer .reader-region-handle { display: none; }
.reader-region-layer .reader-region-box.is-selected .reader-region-handle { display: block; }
.reader-region-layer .reader-region-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.5px solid transparent;   /* 视觉透明 */
    background: transparent;            /* 去掉白色填充 */
    opacity: 0;                        /* 彻底不可见，但 pointer-events 仍生效 */
    pointer-events: auto;              /* 保留 hit area */
    touch-action: none;
}
.reader-region-layer .reader-region-handle[data-dir="nw"] { left: 0;    top: 0; }
.reader-region-layer .reader-region-handle[data-dir="n"]  { left: 50%;  top: 0; }
.reader-region-layer .reader-region-handle[data-dir="ne"] { left: 100%; top: 0; }
.reader-region-layer .reader-region-handle[data-dir="e"]  { left: 100%; top: 50%; }
.reader-region-layer .reader-region-handle[data-dir="se"] { left: 100%; top: 100%; }
.reader-region-layer .reader-region-handle[data-dir="s"]  { left: 50%;  top: 100%; }
.reader-region-layer .reader-region-handle[data-dir="sw"] { left: 0;    top: 100%; }
.reader-region-layer .reader-region-handle[data-dir="w"]  { left: 0;    top: 50%; }
.reader-region-seed {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--reader-accent, #6366f1);
    pointer-events: none;
}
/* 长按就绪 / 拖拽期间压制原生选字（桌面端） */
html.reader-arming,
html.reader-arming body {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 触摸放大镜（loupe）：手指上方长方形放大区，划区/缩放时出现 */
#readerLoupe {
    position: fixed;
    left: 0;
    top: 0;
    width: 210px;
    height: 138px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .12);
    background: var(--reader-bg, #fff);
    z-index: 10000;
    pointer-events: none;
    display: none;
    transform: translate(-50%, -50%);
    will-change: left, top;
}
#readerLoupe.is-on { display: block; }
#readerLoupe .reader-loupe-content {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    background: var(--reader-bg, #fff);
}
/* 放大镜内选中的区域边框（随克隆内容一起 scale；细线不加粗） */
#readerLoupe .reader-loupe-region {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid var(--reader-accent, #6366f1);      /* 细线：放大 1.5 倍后约 1.5px */
    border-radius: 1px;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 8%, transparent); /* 轻底色便于识别范围，不算加粗 */
    pointer-events: none;
    z-index: 1;
}
#readerLoupe .reader-loupe-cross {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
#readerLoupe .reader-loupe-cross::before,
#readerLoupe .reader-loupe-cross::after {
    content: '';
    position: absolute;
    background: var(--reader-accent, #6366f1);
}
#readerLoupe .reader-loupe-cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
#readerLoupe .reader-loupe-cross::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }

/* 顶栏「听书」按钮：点亮时仅耳机图标变绿（开启态），背景保持不变 */
#ttsTopBtn.tts-on,
#reviewTtsTopBtn.tts-on {
    color: #16a34a;
}

/* 朗读已读文字高亮：逐字累积、长期保留（停止/刷新/重开/换设备后回放），随主题 accent 自适应 */
.reader-content .tts-done {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent);
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* 朗读当前字（稍深，仅播放期间） */
.reader-content .tts-kara-cur {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 26%, transparent);
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 滚动模式：彻底隐藏原生滚动条（不挤压内容宽度） */
html.reader-mode-scroll,
html.reader-mode-scroll body,
body.reader-mode-scroll,
body.reader-mode-scroll html,
.reader-mode-scroll {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge legacy */
}
html.reader-mode-scroll::-webkit-scrollbar,
html.reader-mode-scroll body::-webkit-scrollbar,
body.reader-mode-scroll::-webkit-scrollbar,
.reader-mode-scroll *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important; /* Chrome/Safari/Edge */
    background: transparent !important;
}

/* 浮动滚动条（漂浮在内容上方，不占宽度） */
.reader-float-scroll {
    position: fixed;
    top: 0;
    right: 0;
    width: 6px;
    height: 100vh;
    z-index: 30;
    pointer-events: none; /* 默认不阻挡内容点击 */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.reader-mode-scroll .reader-float-scroll {
    opacity: 1;
}
.reader-float-scroll-track {
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 3px;
}
.reader-float-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: color-mix(in srgb, var(--reader-text) 35%, transparent);
    border-radius: 3px;
    pointer-events: auto; /* 可拖动 */
    cursor: pointer;
    transition: background 0.2s ease;
}
.reader-float-scroll-thumb:hover,
.reader-float-scroll-thumb.dragging {
    background: color-mix(in srgb, var(--reader-text) 50%, transparent);
}

.theme-white { --reader-bg: #f9fafb; --reader-text: #1f2937; --reader-accent: #6366f1; --settings-btn-bg: #e5e7eb; --settings-btn-bg-hover: #d1d5db; --settings-btn-text: #6366f1; --anki-kw-color: #7c3aed; --kp-color: color-mix(in srgb, #6366f1 50%, #1f2937); --kp-underline: color-mix(in srgb, var(--reader-accent) 65%, transparent); }
.theme-green { --reader-bg: #c7edcc; --reader-text: #2d3436; --reader-accent: #2d6a4f; --settings-btn-bg: #b8e5bf; --settings-btn-bg-hover: #a8d5b0; --settings-btn-text: #2d6a4f; --anki-kw-color: #1e7a4e; --kp-color: color-mix(in srgb, #2d6a4f 90%, #2d3436); --kp-underline: var(--reader-accent); }
.theme-yellow { --reader-bg: #f5e6c8; --reader-text: #3d2f1f; --reader-accent: #8b6914; --settings-btn-bg: #ead9b4; --settings-btn-bg-hover: #dcc9a0; --settings-btn-text: #8b6914; --anki-kw-color: #92400e; --kp-color: color-mix(in srgb, #8b6914 90%, #3d2f1f); --kp-underline: var(--reader-accent); }
.theme-night { --reader-bg: #1a1a2e; --reader-text: #e0e0e0; --reader-accent: #818cf8; --settings-btn-bg: #2a2a40; --settings-btn-bg-hover: #3a3a55; --settings-btn-text: #818cf8; --anki-kw-color: #fbbf24; --kp-color: color-mix(in srgb, #818cf8 22%, #e0e0e0); --kp-underline: color-mix(in srgb, var(--reader-accent) 65%, transparent); }

.reader-mode .sticky .text-gray-600,
.reader-mode .sticky .text-gray-800,
.reader-mode .sticky button i,
.reader-mode .fixed.bottom-0 .text-gray-500 {
    color: var(--reader-text) !important;
}
.reader-mode .progress-bar {
    background: color-mix(in srgb, var(--reader-text) 20%, transparent);
}

.reader-top-bar,
.reader-bottom-bar {
    background-color: var(--reader-bg);
    border-color: color-mix(in srgb, var(--reader-text) 10%, transparent);
}
.reader-top-bar {
    border-bottom: 1px solid;
    position: sticky;
    top: 0;
    z-index: 60;
    will-change: transform;
    transition: transform 0.5s ease-out;  /* compositor 层过渡，丝滑 */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.reader-bottom-bar { padding-bottom: env(safe-area-inset-bottom, 0); }

/* ===== PWA standalone（添加到主屏）：阅读页顶部固定 40px 时间信号栏条带 ===== */
/* 固定视口最顶、永不随顶栏隐藏/滚走；普通浏览器下 0 高不生效 */
.reader-status-band { height: 0; }
html.pwa-standalone .reader-status-band {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 61;                 /* 顶栏 z-index 60，条带在其上方 */
    background: var(--reader-bg);/* 跟随主题背景，与阅读页无缝 */
    pointer-events: none;        /* 穿透触摸，不阻塞下方顶栏/内容 */
}
/* standalone 下顶栏下移 40px 让位给条带，清掉安全区上内边距（条带已覆盖状态栏区域） */
html.pwa-standalone .reader-top-bar {
    top: 40px;
    padding-top: 0;
}
@media (max-width: 640px) {
    html.pwa-standalone .reader-top-bar { padding-top: 6px; }
}
/* standalone 下顶栏 sticky top:40px 被视觉下移 40px，但其流内位置仍在文档顶，正文看齐流内位置导致首行
   被顶栏盖住；margin-top:40px 精确补偿该 40px 偏移（顶栏流内/视觉盒高随 padding 同步增长，差值恒为 40px） */
html.pwa-standalone .reader-content { margin-top: 40px; }

/* 阅读器顶栏内层：返回按钮距左缘 5px、右组距右缘 5px */
.reader-topbar-inner {
    padding-left: 5px;
    padding-right: 5px;
}

/* 阅读器目录面板（☰）——跟随主题背景 */
.reader-toc-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 8px;
    min-width: 160px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px); /* 移动端动态视口（地址栏收起也准确） */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
    overscroll-behavior: contain;      /* 目录滑到边界不带动页面滚动 */
    scrollbar-width: thin;             /* 桌面细滚动条 */
    z-index: 70;
    background: color-mix(in srgb, var(--reader-bg, #fff) 96%, var(--reader-text, #111));
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
}
.reader-toc-panel::-webkit-scrollbar { width: 5px; }
.reader-toc-panel::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--reader-text) 6%, transparent);
    border-radius: 3px;
}
.reader-toc-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--reader-text) 28%, transparent);
    border-radius: 3px;
}
.reader-toc-panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 55%, transparent);
}
/* Firefox 滚动条主题化 */
.reader-toc-panel {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--reader-text) 28%, transparent)
                     color-mix(in srgb, var(--reader-text) 6%, transparent);
}
.reader-toc-panel.hidden { display: none; }
.reader-toc-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--reader-text, #1f2937);
    background: transparent;
    border: none;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.reader-toc-item:hover,
.reader-toc-item:focus {
    background: color-mix(in srgb, var(--reader-text) 6%, var(--reader-bg));
}
.reader-toc-empty { padding: 12px; text-align: center; color: var(--reader-text, #999); opacity: .6; font-size: 13px; }
.reader-toc-btn { position: relative; }

/* 目录分组容器 */
.toc-group { display: block; }

/* 一级目录（L0）：特粗 + hover 左侧强调色竖条 + 底部虚线分隔 */
.reader-toc-item.toc-l0 {
    font-size: 14px;
    font-weight: 700;
    color: var(--reader-text, #111);
    padding: 6px 10px 4px;
    margin: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px dashed color-mix(in srgb, var(--reader-text) 15%, transparent);
    letter-spacing: 0.02em;
}
.reader-toc-item.toc-l0:hover,
.reader-toc-item.toc-l0:focus {
    background: color-mix(in srgb, var(--reader-text) 10%, var(--reader-bg));
    border-left-color: var(--reader-accent, #6366f1);
}

/* 二级目录（L1）：缩进更深 + 更小更淡 + 嵌套树状线 */
.reader-toc-item.toc-l1 {
    padding: 4px 10px 4px 14px;
    font-size: 12.5px;
    font-weight: 400;
    color: color-mix(in srgb, var(--reader-text, #1f2937) 78%, transparent);
    border-left: none;
    line-height: 1.35;
}
.reader-toc-item.toc-l1:hover,
.reader-toc-item.toc-l1:focus {
    background: color-mix(in srgb, var(--reader-text) 6%, var(--reader-bg));
    color: var(--reader-text, #1f2937);
}

/* 二级容器：左边 2px 嵌套树状线 + 左边距 */
.toc-children {
    display: block;
    border-left: 2px solid color-mix(in srgb, var(--reader-text) 14%, transparent);
    margin-left: 12px;
    padding-left: 2px;
}
.toc-children.hidden { display: none; }

/* 阅读器底部进度条 - 贴底全宽 */
.reader-bottom-bar {
    background-color: transparent !important;
    border: none !important;
    z-index: 50;
}
/* 阅读器打开时彻底隐藏 bottomNav */
body.reader-mode-bg #bottomNav { display: none !important; }
/* 阅读器隐藏两个导航栏时，移除主内容区上下留白 */
body.reader-mode-bg #mainContent {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.reader-bottom-bar .progress-bar {
    background-color: color-mix(in srgb, var(--reader-text) 15%, transparent);
    border-radius: 0;
    height: 4px !important;
}
.reader-bottom-bar .progress-bar-fill {
    background: var(--reader-accent, var(--c-primary)) !important;
    border-radius: 0;
    height: 100% !important;
    transition: width 0.2s ease;
}
.reader-icon-btn {
    color: var(--settings-btn-text);
    background-color: var(--settings-btn-bg);
    font-size: var(--settings-btn-font-size);
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--settings-btn-radius);
    transition: background-color 0.2s, color 0.2s;
}
/* 修复：.reader-icon-btn 的 display:inline-flex 会覆盖 Tailwind .hidden 的 display:none
   （style.css 后加载、优先级相同），导致带 hidden 的按钮仍显示。此处用 !important 兜底。 */
.reader-icon-btn.hidden { display: none !important; }
.reader-icon-btn:hover {
    background-color: var(--settings-btn-bg-hover);
    color: var(--settings-btn-text);
}
/* TTS 播放态：几乎透明背景，喇叭主体静止，三个弧形依次点亮 */
.reader-icon-btn.tts-playing {
    background-color: rgba(99, 102, 241, 0.15);
    color: var(--c-primary, #6366f1);
    animation: none;
}
/* TTS 合成等待（弱网/断网重试）：FAB 图标旋转，明确区分“加载中”与“卡死” */
.reader-icon-btn.tts-buf-loading i,
.reader-icon-btn.tts-waiting i {
    animation: ttsFabSpin 0.9s linear infinite;
}
.reader-icon-btn.tts-waiting {
    background-color: #d97706;
    color: #fff;
    animation: none;
}
@keyframes ttsFabSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .reader-icon-btn.tts-buf-loading i,
    .reader-icon-btn.tts-waiting i { animation-duration: 1.8s; }
}
/* 朗读悬浮按钮：位于屏幕下方 3/4 位置（距顶 75%，距底 25vh） */
.reader-tts-fab {
    position: fixed;
    right: 24px;
    bottom: 25vh;
    z-index: 40;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;   /* 上滑手势：避免移动端把按钮上的垂直滑动判定为页面滚动而触发 pointercancel */
    background-color: rgba(99, 102, 241, 0.12);
    color: var(--c-primary, #6366f1);
}
.reader-tts-fab:hover {
    background-color: rgba(99, 102, 241, 0.25);
    color: var(--c-primary-hover, #4f46e5);
}
/* Waiting 态（弱网合成中）：FAB 也要半透明橙色 */
.reader-tts-fab.tts-waiting {
    background-color: rgba(217, 119, 6, 0.25);
    color: #d97706;
}

/* ==== 喇叭三弧形信号 — 停止态常亮 / 播放态依次点亮 ==== */
/* 默认（停止）：三个弧形与喇叭主体同色常亮 */
.reader-tts-fab .speaker-signal {
    opacity: 1;
    transition: opacity 0.25s ease;
}
/* 播放态：依次跳变点亮（间隔 800ms）→ 三弧全亮 → 同时跳灭 → 循环
   时间轴（3.2s 循环，绝对时刻）:
   0ms     s1 亮（0%）
   800ms   s2 亮（25%）
   1600ms  s3 亮（50%）
   2400ms  三弧同时灭（75%）
   2400~3200ms 全灭窗口（800ms）
   3200ms  循环 */
.reader-tts-fab.tts-playing .speaker-s1 {
    animation: speakerAccumS1 3.2s linear infinite;
}
.reader-tts-fab.tts-playing .speaker-s2 {
    animation: speakerAccumS2 3.2s linear infinite;
}
.reader-tts-fab.tts-playing .speaker-s3 {
    animation: speakerAccumS3 3.2s linear infinite;
}
/* s1: 0% 跳亮, 75% 跳灭 */
@keyframes speakerAccumS1 {
    0%    { opacity: 1;    }
    74.9% { opacity: 1;    }
    75%   { opacity: 0.15; }
    100%  { opacity: 0.15; }
}
/* s2: 25% 跳亮, 75% 跳灭 */
@keyframes speakerAccumS2 {
    0%    { opacity: 0.15; }
    24.9% { opacity: 0.15; }
    25%   { opacity: 1;    }
    74.9% { opacity: 1;    }
    75%   { opacity: 0.15; }
    100%  { opacity: 0.15; }
}
/* s3: 50% 跳亮, 75% 跳灭 */
@keyframes speakerAccumS3 {
    0%    { opacity: 0.15; }
    49.9% { opacity: 0.15; }
    50%   { opacity: 1;    }
    74.9% { opacity: 1;    }
    75%   { opacity: 0.15; }
    100%  { opacity: 0.15; }
}
/* reduced-motion 降级：三个弧形同时常亮，无动画 */
@media (prefers-reduced-motion: reduce) {
    .reader-tts-fab.tts-playing .speaker-signal {
        opacity: 1;
        animation: none;
    }
}

.reader-title {
    color: var(--reader-text);
    margin-left: 5px;
    margin-right: 5px;
}

/* 设置面板遮罩层 - 仅用半透明，不使用任何模糊或虚化 */
.reader-mode #settingsPanel.reader-settings-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 白色主题 - 浅灰遮罩 */
body.theme-white .reader-mode #settingsPanel.reader-settings-overlay {
    background-color: rgba(20, 20, 20, 0.35);
}
/* 护眼主题 - 深绿遮罩 */
body.theme-green .reader-mode #settingsPanel.reader-settings-overlay {
    background-color: rgba(30, 50, 35, 0.45);
}
/* 米黄主题 - 深棕遮罩 */
body.theme-yellow .reader-mode #settingsPanel.reader-settings-overlay {
    background-color: rgba(55, 42, 22, 0.45);
}
/* 夜间主题 - 深黑遮罩 */
body.theme-night .reader-mode #settingsPanel.reader-settings-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

/* 语音共享额度弹窗 + 鉴权失败弹窗 + 开页预读失败弹窗 —— 挂载于 body 下，禁用 backdrop-filter 避免半透明 */
#ttsQuotaModal, #ttsAuthErrorModal, #ttsOpenErrModal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* 额度弹窗 + 鉴权失败弹窗 + 开页预读失败弹窗：不透明遮罩，主题背景色完全一致 */
body.theme-white #ttsQuotaModal, body.theme-white #ttsAuthErrorModal, body.theme-white #ttsOpenErrModal {
    background-color: #f9fafb;
}
body.theme-green #ttsQuotaModal, body.theme-green #ttsAuthErrorModal, body.theme-green #ttsOpenErrModal {
    background-color: #c7edcc;
}
body.theme-yellow #ttsQuotaModal, body.theme-yellow #ttsAuthErrorModal, body.theme-yellow #ttsOpenErrModal {
    background-color: #f5e6c8;
}
body.theme-night #ttsQuotaModal, body.theme-night #ttsAuthErrorModal, body.theme-night #ttsOpenErrModal {
    background-color: #1a1a2e;
}
/* 额度弹窗面板 */
#ttsQuotaModal .reader-settings-panel,
#ttsAuthErrorModal .reader-settings-panel,
#ttsOpenErrModal .reader-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg) 95%, white);
    color: var(--reader-text);
    border: 1px solid color-mix(in srgb, var(--reader-text) 10%, transparent);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--reader-text) 12%, transparent);
    max-height: 85vh;
    overflow-y: auto;
}
body.theme-night #ttsQuotaModal .reader-settings-panel,
body.theme-night #ttsAuthErrorModal .reader-settings-panel,
body.theme-night #ttsOpenErrModal .reader-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg) 88%, white);
}
#ttsQuotaModal .reader-settings-panel h3,
#ttsQuotaModal .reader-settings-panel label,
#ttsAuthErrorModal .reader-settings-panel h3,
#ttsAuthErrorModal .reader-settings-panel label,
#ttsOpenErrModal .reader-settings-panel h3,
#ttsOpenErrModal .reader-settings-panel label {
    color: var(--reader-text);
}
#ttsQuotaModal .reader-settings-panel button,
#ttsAuthErrorModal .reader-settings-panel button,
#ttsOpenErrModal .reader-settings-panel button {
    background-color: color-mix(in srgb, var(--reader-bg) 60%, var(--reader-text));
    color: var(--reader-text);
    border-color: color-mix(in srgb, var(--reader-text) 25%, transparent);
}
#ttsQuotaModal .reader-settings-panel button:hover,
#ttsAuthErrorModal .reader-settings-panel button:hover,
#ttsOpenErrModal .reader-settings-panel button:hover {
    background-color: color-mix(in srgb, var(--reader-bg) 45%, var(--reader-text));
}
#ttsQuotaModal .reader-settings-panel button.border-primary,
#ttsAuthErrorModal .reader-settings-panel button.border-primary,
#ttsOpenErrModal .reader-settings-panel button.border-primary {
    background-color: color-mix(in srgb, var(--reader-accent) 15%, var(--reader-bg));
    color: var(--reader-accent);
    border-color: var(--reader-accent);
}

/* 阅读设置打开时：锁定阅读器背景，禁止上下滑动（iOS 触摸兜底由 reader.js 处理） */
html.reader-settings-lock,
body.reader-settings-lock {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 双击选区工具栏弹窗打开期间：锁定阅读页背景滚动（弹窗内部预览区仍可滚动） */
html.reader-toolbar-lock,
body.reader-toolbar-lock {
    overflow: hidden;
    overscroll-behavior: none;
}

/* 手机端：overflow:hidden 在安卓国产浏览器/PWA WebView 上无法可靠锁住文档滚动，
   body 脱离文档流（position:fixed）彻底锁定；滚动位置由 reader.js 用 body.style.top 补偿，关闭时还原 */
@media (max-width: 767px) {
    body.reader-toolbar-lock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
}

/* 阅读设置弹窗：「更多语音设置」虚线链接式跳转按钮（颜色跟随四套阅读主题）
   选择器需带 #settingsPanel 前缀，否则会被 .reader-mode #settingsPanel ... button 的通用按钮规则覆盖 */
.tts-more-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border: 1px dashed var(--reader-accent, #6366f1);
    border-radius: 8px;
    background: transparent;
    color: var(--reader-accent, #6366f1);
    font-size: 13px;
    line-height: 1.4;
    transition: background-color 0.15s ease;
}
.reader-mode #settingsPanel .reader-settings-panel button.tts-more-link {
    background-color: transparent;
    color: var(--reader-accent, #6366f1);
    border: 1px dashed var(--reader-accent, #6366f1);
}
.reader-mode #settingsPanel .reader-settings-panel button.tts-more-link:hover {
    background-color: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent);
}
/* ===== 所有音色下拉：全局统一覆盖（快捷面板 + 设置面板 + 复习页）===== */
/* !important 覆盖 Tailwind text-sm(14px) / border-gray-200 / bg-transparent 等 */

/* --- select 本体：字号对齐 label + 主题化背景边框 + 统一宽度 --- */
select#ttsVoiceZh,
select#ttsVoiceEn,
select#ttsVoiceZhFull,
select#ttsVoiceEnFull,
select.usp-voice-select {
    font-size: 14px !important;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px !important;
    line-height: 1.4;
    color: var(--reader-text) !important;
    background-color: color-mix(in srgb, var(--reader-bg) 60%, var(--reader-accent, #6366f1) 8%) !important;
    border: 1px solid color-mix(in srgb, var(--reader-text) 22%, transparent) !important;
    border-radius: 8px !important;
    /* 统一下拉箭头外观（部分浏览器） */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%236366f1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    cursor: pointer;
}
select#ttsVoiceZh:focus, select#ttsVoiceEn:focus,
select#ttsVoiceZhFull:focus, select#ttsVoiceEnFull:focus,
select.usp-voice-select:focus {
    outline: none;
    border-color: var(--reader-accent, #6366f1) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--reader-accent, #6366f1) 25%, transparent);
}

/* --- option：左对齐 + 选中/hover 背景色（桌面浏览器有效；iOS 原生 wheel 忽略）--- */
select#ttsVoiceZh option,
select#ttsVoiceEn option,
select#ttsVoiceZhFull option,
select#ttsVoiceEnFull option,
select.usp-voice-select option {
    font-size: 14px !important;
    text-align: left;
    padding: 3px 10px !important;
    white-space: nowrap;
    background-color: var(--reader-bg);
    color: var(--reader-text);
}
select#ttsVoiceZh option:hover,
select#ttsVoiceEn option:hover,
select#ttsVoiceZhFull option:hover,
select#ttsVoiceEnFull option:hover,
select.usp-voice-select option:hover {
    background-color: color-mix(in srgb, var(--reader-accent, #6366f1) 18%, transparent) !important;
}
select#ttsVoiceZh option:checked,
select#ttsVoiceEn option:checked,
select#ttsVoiceZhFull option:checked,
select#ttsVoiceEnFull option:checked,
select.usp-voice-select option:checked {
    background-color: color-mix(in srgb, var(--reader-accent, #6366f1) 22%, transparent) !important;
    color: var(--reader-text);
}

/* 字号滑块样式 */
.font-size-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px; /* 与 thumb 同高，使轨道居中 */
    border-radius: 3px;
    background: transparent;
    outline: none;
    cursor: pointer;
}
.font-size-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--reader-text) 15%, transparent);
    margin-top: 8px; /* (22-6)/2 = 8px 使轨道在输入框内垂直居中 */
}
.font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--reader-accent, #6366f1);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.15s ease;
    margin-top: -8px; /* 使 thumb 与轨道垂直居中 */
}
.font-size-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}
.font-size-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--reader-text) 15%, transparent);
}
.font-size-slider::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--reader-accent, #6366f1);
}
.font-size-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--reader-accent, #6366f1);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.font-size-value {
    display: inline-block;
    min-width: 3.5em;
    text-align: center;
    font-weight: 600;
    color: var(--reader-accent, #6366f1);
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 12%, transparent);
    border-radius: 6px;
    padding: 2px 8px;
}

/* 主题选择滑条：轨道 4 段固定主题色（white→green→yellow→night） */
.theme-select-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 22px;
    border-radius: 3px;
    background: transparent;
    outline: none;
    cursor: pointer;
}
.theme-select-slider::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        #f9fafb 0%, #f9fafb 25%,
        #c7edcc 25%, #c7edcc 50%,
        #f5e6c8 50%, #f5e6c8 75%,
        #1a1a2e 75%, #1a1a2e 100%
    );
    margin-top: 7px;
    border: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.theme-select-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--reader-accent, #6366f1);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.15s ease;
    margin-top: -9px;
}
.theme-select-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.15);
}
.theme-select-slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        #f9fafb 0%, #f9fafb 25%,
        #c7edcc 25%, #c7edcc 50%,
        #f5e6c8 50%, #f5e6c8 75%,
        #1a1a2e 75%, #1a1a2e 100%
    );
    border: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.theme-select-slider::-moz-range-progress { display: none; }
.theme-select-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--reader-accent, #6366f1);
    cursor: grab;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* 设置面板内容 - 与阅读背景高度相似 */
.reader-mode #settingsPanel .reader-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg) 95%, white);
    color: var(--reader-text);
    border: 1px solid color-mix(in srgb, var(--reader-text) 10%, transparent);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--reader-text) 12%, transparent);
    /* 背景锁定后，面板内容（如 TTS 设置）超高时在面板内部滚动 */
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior: contain; /* 面板滚到边界不连锁带动背景 */
    -webkit-overflow-scrolling: touch;
}

/* 夜间主题下面板稍微提亮便于区分 */
body.theme-night .reader-mode #settingsPanel .reader-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg) 88%, white);
}

/* 设置面板内的文字和标签 */
.reader-mode #settingsPanel .reader-settings-panel h3,
.reader-mode #settingsPanel .reader-settings-panel label {
    color: var(--reader-text);
}

/* 设置面板内的关闭按钮 */
.reader-mode #settingsPanel .reader-settings-panel #closeSettings {
    color: color-mix(in srgb, var(--reader-text) 50%, transparent);
}
.reader-mode #settingsPanel .reader-settings-panel #closeSettings:hover {
    color: var(--reader-text);
}

/* 设置面板内的按钮样式 */
.reader-mode #settingsPanel .reader-settings-panel button {
    background-color: color-mix(in srgb, var(--reader-bg) 60%, var(--reader-text));
    color: var(--reader-text);
    border-color: color-mix(in srgb, var(--reader-text) 25%, transparent);
}
.reader-mode #settingsPanel .reader-settings-panel button:hover {
    background-color: color-mix(in srgb, var(--reader-bg) 45%, var(--reader-text));
}
.reader-mode #settingsPanel .reader-settings-panel button.border-primary {
    background-color: color-mix(in srgb, var(--reader-accent) 15%, var(--reader-bg));
    color: var(--reader-accent);
    border-color: var(--reader-accent);
}

/* 段落间距 = 行距 × 1.03（始终比行距大3%） */
.reader-content p { margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3); text-indent: 2em; }
.reader-content p:last-child { margin-bottom: 0; }
.reader-content .pdf-page { display: flex; justify-content: center; margin-bottom: 1rem; }

/* 标注效果零排版影响：仅视觉，禁止改变布局 */
.reader-content span[data-annotation-type] {
    display: inline;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    vertical-align: baseline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.annotation-highlight { background-color: #fef08a; border-radius: 2px; padding: 1px 2px; }
.annotation-highlight.green { background-color: #bbf7d0; }
.annotation-highlight.blue { background-color: #bfdbfe; }
.annotation-highlight.pink { background-color: #fbcfe8; }

/* 卡片标记：accent 色文字 + 下划线（左右各缩 1.5px） */
.reader-content span[data-annotation-type="card"] {
    color: var(--kp-color, color-mix(in srgb, var(--reader-accent, #6366f1) 70%, var(--reader-text, #1f2937)));
    background-image: linear-gradient(to right,
        transparent 1.5px, var(--kp-underline, var(--reader-accent, #6366f1)) 1.5px,
        var(--kp-underline, var(--reader-accent, #6366f1)) calc(100% - 1.5px), transparent calc(100% - 1.5px));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: center bottom;
    padding: 0 !important;
    display: inline;
    cursor: pointer;
}

/* 卡片内联浮窗样式 - 主题自适应 */
.cdp-floating {
    position: absolute;
    z-index: 9999;
    background: color-mix(in srgb, var(--reader-bg, #fff) 92%, var(--reader-text, #111));
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
    border-radius: 10px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--reader-text, #111) 20%, transparent), 0 2px 6px color-mix(in srgb, var(--reader-text, #111) 10%, transparent);
    /* 仅受屏幕宽度限制，不设固定宽度 */
    max-width: calc(100vw - 32px);
    width: max-content;
    min-width: 180px;
    font-size: calc(var(--reader-font-size, 18px) - 1px);
    line-height: 1.6;
    overflow: visible;
    animation: cdpFadeIn 0.15s ease-out;
    /* 移动端优化 */
    -webkit-overflow-scrolling: touch;
}
/* 换行模式：当弹窗宽度达到屏幕宽度限制时，切换为换行 */
.cdp-floating.cdp-wrap {
    width: auto;
}
.cdp-floating.cdp-wrap .cdp-block {
    white-space: normal;
    word-break: break-word;
}
/* 换行模式下，标签也允许换行 */
.cdp-floating.cdp-wrap .cdp-tags {
    flex-wrap: wrap;
}
@keyframes cdpFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.cdp-floating.cdp-above {
    animation: cdpFadeInAbove 0.15s ease-out;
}
@keyframes cdpFadeInAbove {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 操作行（WP6）：阅读页卡片浮窗底部 编辑/朗读/复制/删除；:not(.kp-review-popup) 限定，不影响复习页弹窗 */
.cdp-floating:not(.kp-review-popup) {
    min-width: 228px;
}
.cdp-floating:not(.kp-review-popup) .cdp-actions {
    display: flex;
    align-items: stretch;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    padding: 3px;
}
.cdp-floating:not(.kp-review-popup) .cdp-act {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    padding: 8px 4px;
    border: none;
    background: transparent;
    border-radius: 7px;
    color: color-mix(in srgb, var(--reader-text, #111) 72%, transparent);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s, color 0.15s;
}
.cdp-floating:not(.kp-review-popup) .cdp-act i {
    font-size: 12px;
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-edit {
    color: var(--reader-accent, #6366f1);
    font-weight: 600;
}
.cdp-floating:not(.kp-review-popup) .cdp-act:hover {
    background: color-mix(in srgb, var(--reader-text, #111) 8%, transparent);
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-edit:hover {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 14%, transparent);
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-del {
    color: #dc2626;
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-del:hover {
    background: rgba(220, 38, 38, 0.1);
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-hide {
    color: #d97706;
}
.cdp-floating:not(.kp-review-popup) .cdp-act.cdp-act-hide:hover {
    background: rgba(217, 119, 6, 0.1);
}
@media (max-width: 480px) {
    .cdp-floating:not(.kp-review-popup) { min-width: 212px; }
    .cdp-floating:not(.kp-review-popup) .cdp-act { gap: 4px; font-size: 12px; padding: 9px 2px; }
}
/* 内容主体 */
.cdp-body {
    padding: 12px 14px;
}
/* 字段块 - 默认单行显示，不换行 */
.cdp-block {
    margin-bottom: 8px;
    line-height: var(--reader-line-height, 1.6);
    white-space: nowrap;
    color: var(--reader-text, #111);
    font-size: 14px;
}
.cdp-block:last-child {
    margin-bottom: 0;
}
/* 弹窗内字段块字号跟随阅读器内容（正文 - 1px），不作用于复习页复用的 .cdp-block */
/* 行高与字段块间距与复习页背面 .anki-answer-fields .cdp-block 完全一致 */
.cdp-floating .cdp-block {
    font-size: calc(var(--reader-font-size, 18px) - 1px);
    line-height: calc(var(--reader-line-height) + 0.3);
    margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3);
}
.cdp-floating .cdp-block table {
    font-size: calc(var(--reader-font-size, 18px) - 1px);
}
/* 换行模式下的字段块 - 恢复换行 */
.cdp-floating.cdp-wrap .cdp-block {
    white-space: normal;
    word-break: break-word;
}
/* 富文本内容 - 允许 HTML 格式化 */
.cdp-block p {
    margin: 2px 0;
}
.cdp-block br {
    display: block;
    margin: calc(0.1em * var(--reader-line-height, 1.6)) 0;
}
.cdp-block ul,
.cdp-block ol {
    margin: 2px 0;
    padding-left: 20px;
}
.cdp-block li {
    margin: 1px 0;
}
.cdp-block div {
    margin: 1px 0;
}
.cdp-block strong,
.cdp-block b {
    font-weight: 600;
}
.cdp-block em,
.cdp-block i {
    font-style: italic;
}
.cdp-block u {
    text-decoration: underline;
}
.cdp-block span {
    display: inline;
}
.cdp-block table {
    border-collapse: collapse;
    margin: 6px 0;
    width: auto;
    max-width: 100%;
    font-size: 13px;
}
.cdp-block table td,
.cdp-block table th {
    border: 1px solid color-mix(in srgb, var(--reader-text, #333) 25%, transparent);
    padding: 4px 8px;
    vertical-align: top;
}
.cdp-block table th {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 8%, transparent);
    font-weight: 600;
}
.cdp-block blockquote {
    border-left: 3px solid color-mix(in srgb, var(--reader-accent, #6366f1) 40%, transparent);
    margin: 6px 0;
    padding: 4px 10px;
    color: color-mix(in srgb, var(--reader-text, #333) 70%, transparent);
}
.cdp-block pre, .cdp-block code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    background: color-mix(in srgb, var(--reader-text, #333) 6%, transparent);
    border-radius: 3px;
}
.cdp-block pre {
    padding: 8px 10px;
    overflow-x: auto;
    white-space: pre-wrap;
}
.cdp-block code {
    padding: 1px 4px;
}
.cdp-block img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.cdp-block hr {
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #333) 15%, transparent);
    margin: 8px 0;
}
.cdp-block h1, .cdp-block h2, .cdp-block h3,
.cdp-block h4, .cdp-block h5, .cdp-block h6 {
    font-weight: 600;
    margin: 6px 0 4px;
    line-height: 1.4;
}
.cdp-block h1 { font-size: 1.3em; }
.cdp-block h2 { font-size: 1.2em; }
.cdp-block h3 { font-size: 1.1em; }
.cdp-block a {
    color: var(--reader-accent, #6366f1);
    text-decoration: underline;
}
.cdp-block mark {
    background: #fef08a;
    padding: 0 2px;
    border-radius: 2px;
}
.cdp-block sub, .cdp-block sup {
    font-size: 0.75em;
}
/* 富文本中 AI 高亮样式 - 与编辑器一致，主题自适应 */
.cdp-block .ce-ai-hl {
    color: #e74c3c;
    font-weight: 700;
    background: linear-gradient(transparent 65%, rgba(231,76,60,0.18) 65%);
    padding: 0 2px;
    border-radius: 3px;
}
.cdp-block .ce-ai-hl-diff {
    color: #2980b9;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #2980b9;
    text-underline-offset: 3px;
    padding: 0 2px;
}
/* AI 加粗标题（如 **释义：**）：阅读弹窗中同样只加粗不着色 */
.cdp-block .ce-ai-hl-title {
    font-weight: 700;
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
}
/* 标签 - 主题自适应 */
.cdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 10%, transparent);
}
.cdp-tag {
    display: inline-block;
    padding: 2px 10px;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 12%, var(--reader-bg, #fff));
    color: var(--reader-accent, #6366f1);
    border-radius: 12px;
    font-size: 12px;
}

/* ============ 响应式适配 ============ */
/* 平板 */
@media (max-width: 768px) {
    .cdp-floating {
        max-width: calc(100vw - 24px);
        font-size: calc(var(--reader-font-size, 18px) - 1px);
    }
    .cdp-block {
        font-size: 13px;
    }
    .cdp-body {
        padding: 10px 12px;
    }
}
/* 手机 */
@media (max-width: 480px) {
    .cdp-floating {
        max-width: calc(100vw - 16px);
        min-width: calc(100vw - 16px);
        /* 手机端默认换行模式：屏幕太窄，单行不可行 */
        width: auto;
        font-size: calc(var(--reader-font-size, 18px) - 1px);
        border-radius: 8px;
    }
    /* 手机端强制换行模式 */
    .cdp-floating .cdp-block {
        white-space: normal;
        word-break: break-word;
    }
    .cdp-block {
        font-size: 13px;
        line-height: 1.55;
    }
    .cdp-body {
        padding: 10px 12px;
    }
    .cdp-edit-btn {
        padding: 0;
        font-size: 13px;
        opacity: 1;
    }
    .cdp-edit-btn i {
        font-size: 10px;
    }
}
/* 横屏/矮屏优化 */
@media (max-height: 500px) {
    .cdp-floating {
        max-height: calc(100vh - 20px);
        overflow-y: auto;
    }
}
/* 亮色主题（护眼/纸米黄）弹窗背景稍淡 */
body.theme-green .cdp-floating {
    background: color-mix(in srgb, #ffffff 30%, var(--reader-bg, #c7edcc));
}
body.theme-yellow .cdp-floating {
    background: color-mix(in srgb, #ffffff 30%, var(--reader-bg, #f5e6c8));
}
body.theme-green .cdp-edit-btn,
body.theme-yellow .cdp-edit-btn {
    background: rgba(255, 255, 255, 0.75);
}
/* 暗色主题特殊处理 */
body.theme-night .cdp-floating {
    background: color-mix(in srgb, var(--reader-bg, #1a1a2e) 88%, var(--reader-text, #e0e0e0));
}
body.theme-night .cdp-edit-btn {
    background: color-mix(in srgb, var(--reader-bg, #1a1a2e) 60%, transparent);
}

/* 卡片/翻页/弹窗动画 */
.flip-card { perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
    position: absolute; width: 100%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-card-back { transform: rotateY(180deg); }

/* 主内容区 - 确保全宽 */
#mainContent {
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    /* 各页面高度自动填充视口：100vh 兜底 + 100dvh 适配移动端动态视口 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 顶部留白 = 固定顶栏 48px + 状态栏安全区（普通浏览器安全区为 0，即从 48px 开始） */
    padding-top: calc(env(safe-area-inset-top, 0) + 48px);
}

/* ============ Anki 复习界面（主题自适应） ============ */
.anki-session {
    font-family: inherit;
    background: var(--reader-bg, #f9fafb);
    color: var(--reader-text, #1f2937);
    width: 100vw;
    height: 100vh;  /* 兜底：不支持 dvh 的浏览器 */
    height: 100dvh; /* 动态视口：移动端地址栏收起/展开时始终贴合可视区，
                       使评分/答案按钮栏(.anki-answer-bar)恒在屏内 */
}

/* ---- 顶部工具栏 ---- */
.anki-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 5px;
    padding-top: calc(env(safe-area-inset-top, 0) + 2px);
    background: var(--reader-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text) 15%, transparent);
    flex-shrink: 0;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .anki-toolbar {
        padding-top: calc(env(safe-area-inset-top, 0) + 4px);
        padding-bottom: 4px;
    }
}

/* 复习计数提示 popover —— 外观对齐复习设置面板 */
.review-count-popover {
    position: absolute;
    background-color: color-mix(in srgb, var(--reader-bg, #ffffff) 96%, white);
    color: var(--reader-text, #1f2937);
    border: 1px solid color-mix(in srgb, var(--reader-text, #1f2937) 12%, transparent);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 10px 32px color-mix(in srgb, var(--reader-text, #1f2937) 18%, transparent);
    white-space: nowrap;
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.review-count-popover.show { opacity: 1; }
body.theme-night .review-count-popover { background-color: color-mix(in srgb, var(--reader-bg, #111827) 90%, white); }

.anki-toolbar-left,
.anki-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}
.anki-toolbar-right { gap: 8px; }  /* 对齐阅读页 gap-2：设置/关闭钮间隔 8px */

.anki-toolbar-text {
    font-size: 13px;
    color: var(--reader-text);
    opacity: 0.65;
    white-space: nowrap;
}

/* Anki 复习计数 */
.anki-toolbar-text b {
    color: var(--reader-accent, #6366f1);
    font-weight: bold;
}
.anki-toolbar-text .cnt-due {
    color: #ef4444;
    font-weight: bold;
}
.anki-toolbar-text .cnt-new {
    color: #3b82f6;
    font-weight: bold;
}

/* 复习页卡片目录面板（☰）——跟随主题背景 */
.review-toc-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 4px;
    min-width: 200px;
    max-width: min(360px, calc(100vw - 16px));
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    z-index: 70;
    background: color-mix(in srgb, var(--reader-bg, #fff) 96%, var(--reader-text, #111));
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
}
.review-toc-panel.hidden { display: none; }

/* 面板内的工具栏（排序 + 筛选）——固定在顶部，不随列表滚动 */
.review-toc-toolbar {
    display: flex;
    gap: 4px;
    padding: 4px 6px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text, #111) 10%, transparent);
    margin-bottom: 4px;
    flex-shrink: 0;
}
.review-toc-select {
    flex: 1;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
    background: var(--reader-bg, #fff);
    color: var(--reader-text, #333);
    min-width: 0;
}

/* 卡片列表区：唯一可滚动区域，工具栏与分页固定 */
.review-toc-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    scrollbar-width: thin;
}
.review-toc-list::-webkit-scrollbar { width: 4px; }
.review-toc-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--reader-text) 25%, transparent); border-radius: 2px; }

/* 卡片列表项 */
.review-toc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--reader-text, #1f2937);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.review-toc-item:hover,
.review-toc-item:focus {
    background: color-mix(in srgb, var(--reader-text) 6%, var(--reader-bg));
}
.review-toc-item.review-toc-active {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 12%, var(--reader-bg));
    font-weight: 600;
}
.review-toc-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.review-toc-item-dot.due { background: #ef4444; }
.review-toc-item-dot.normal { background: #d1d5db; }
.review-toc-item-dot.all { background: #94a3b8; }         /* 全部：灰 */
.review-toc-item-dot.task { background: #8b5cf6; }        /* 任务：紫 */
.review-toc-item-dot.new { background: #3b82f6; }      /* 新卡：蓝 */
.review-toc-item-dot.done { background: #22c55e; }     /* 已学：绿 */
.review-toc-item-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-toc-item-doc {
    font-size: 11px;
    opacity: 0.5;
    flex-shrink: 0;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-toc-empty { padding: 12px; text-align: center; color: var(--reader-text, #999); opacity: .6; font-size: 13px; }

/* 状态点颜色图例（可点击筛选） */
.review-toc-legend {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 4px;
    padding: 2px 4px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text, #111) 8%, transparent);
    margin-bottom: 4px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.review-toc-legend::-webkit-scrollbar { height: 2px; }
.review-toc-legend::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 2px; }
.review-toc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--reader-text, #1f2937);
    opacity: .62;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
    transition: background .15s, opacity .15s;
}
.review-toc-legend-item:hover {
    opacity: .9;
    background: color-mix(in srgb, var(--reader-text, #111) 6%, transparent);
}
.review-toc-legend-item.active {
    opacity: 1;
    font-weight: 600;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 14%, transparent);
}
.review-toc-legend-count {
    font-size: 10px;
    opacity: .7;
    font-variant-numeric: tabular-nums;
}

/* 目录分页控件 */
.review-toc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px 4px;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 10%, transparent);
    margin-top: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.review-toc-pager-btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
    background: var(--reader-bg, #fff);
    color: var(--reader-text, #333);
    cursor: pointer;
    white-space: nowrap;
}
.review-toc-pager-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--reader-text) 6%, var(--reader-bg));
}
.review-toc-pager-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.review-toc-pager-info {
    font-size: 12px;
    color: var(--reader-text, #666);
    opacity: .7;
    white-space: nowrap;
}

/* ---- 卡片区域 ---- */
.anki-card-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    background: var(--reader-bg, #f9fafb);
    padding: 0;
}

/* Anki 卡片：与阅读器内容显示一致 */
.anki-card {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: var(--reader-font-size, 18px);
    line-height: var(--reader-line-height, 1.8);
    text-align: justify;
    text-justify: inter-ideograph;
    color: var(--reader-text, #1f2937);
    padding: 3px 5px;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
    box-sizing: border-box;
    position: relative;
}

/* 卡片工具栏 */
.anki-card-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    user-select: none;
    -webkit-user-select: none;
}
.anki-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--reader-text, #d1d5db);
    border-radius: 6px;
    background: transparent;
    color: var(--reader-text, #6b7280);
    cursor: pointer;
    transition: all 0.15s ease;
}
.anki-tool-btn:hover {
    background: color-mix(in srgb, var(--reader-accent) 10%, transparent);
    border-color: var(--reader-accent, #6366f1);
    color: var(--reader-accent, #6366f1);
}
.anki-tool-btn.active {
    background: color-mix(in srgb, var(--reader-accent) 15%, transparent);
    border-color: var(--reader-accent, #6366f1);
    color: var(--reader-accent, #6366f1);
}
.anki-tool-btn i {
    font-size: 11px;
}
.anki-tool-btn span {
    font-size: 12px;
}
@media (max-width: 640px) {
    .anki-tool-btn span { display: none; }
    .anki-tool-btn { padding: 4px 8px; }
}

.anki-card.hidden {
    display: none;
}

.anki-card-q {
    padding: 0;
    word-break: break-word;
}

.anki-q-line {
    display: block;
    margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3);
    text-indent: 2em;
    white-space: pre-wrap;
}

.anki-q-line:last-child {
    margin-bottom: 0;
}

.anki-card-a.hidden {
    display: none;
}

/* 复习页答案区关键字高亮：加粗 + 斜体 + 主题适应颜色 */
.anki-answer-fields .anki-kw-hl {
    font-weight: 700 !important;
    font-style: italic !important;
    color: var(--anki-kw-color) !important;
    border-radius: 2px;
    padding: 0 1px;
    background-color: color-mix(in srgb, var(--anki-kw-color) 15%, transparent);
}

/* Anki 答案分隔线（<hr id=answer>） */
.anki-hr {
    border: none;
    margin: calc(var(--reader-font-size) * var(--reader-line-height) * 0.5) 0;
    height: 1px;
    background: color-mix(in srgb, var(--reader-text) 20%, transparent);
}

.anki-answer-fields {
    position: relative;
    text-align: justify;
    text-justify: inter-ideograph;
    padding: 12px 16px;
    background: color-mix(in srgb, var(--reader-bg, #fff) 95%, var(--reader-text, #1f2937));
    border-radius: 8px;
}
/* 复习页答案区复用阅读器弹窗的 .cdp-block 字段样式：强制换行，允许长文展示；段落间距与阅读页一致 */
.anki-answer-fields .cdp-block {
    white-space: normal;
    word-break: break-word;
    margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3);
    /* 等效于阅读页 <p> 的 line-height(1) + margin-bottom(0.3em)，使 <br> 换行行距一致 */
    line-height: calc(var(--reader-line-height) + 0.3);
}
.anki-answer-fields .cdp-block:last-child {
    margin-bottom: 0;
}
/* 正面区域与答案区域的间距 */
.anki-card-q + .anki-card-a {
    margin-top: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3);
}
/* 正面区域使用 ce-field-content 时的间距 */
.anki-card-q .ce-field-content.ce-field-readonly {
    margin-bottom: 0;
}
/* 复习页所有字段字号统一：跟随阅读器字号设置，覆盖编辑器/弹窗移动端媒体查询对复用类的波及 */
.anki-session .ce-field-content.ce-field-readonly,
.anki-session .cdp-block {
    font-size: var(--reader-font-size, 18px);
    /* 等效于阅读页 <p> 的 line-height + margin-bottom，使 <br> 换行行距一致 */
    line-height: calc(var(--reader-line-height, 1.8) + 0.3);
}

.anki-field {
    margin: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3) 0;
}

.anki-field-label {
    font-size: calc(var(--reader-font-size) * 0.78);
    color: var(--reader-text);
    opacity: 0.6;
    margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.15);
}

.anki-field-text {
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: var(--reader-text);
    white-space: pre-wrap;
    word-break: break-word;
    text-indent: 2em;
}

.anki-field-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    text-align: justify;
    text-justify: inter-ideograph;
}

.anki-field-list li {
    font-size: var(--reader-font-size);
    line-height: var(--reader-line-height);
    color: var(--reader-text);
    margin-bottom: calc(var(--reader-font-size) * var(--reader-line-height) * 0.3);
    text-indent: 2em;
}

.anki-field-list li:last-child {
    margin-bottom: 0;
}

.anki-muted {
    color: var(--reader-text);
    opacity: 0.5;
}

/* ---- 底部按钮栏 ---- */
.anki-answer-bar {
    background: color-mix(in srgb, var(--reader-bg) 92%, var(--reader-text));
    border-top: none;
    padding: 0;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
}

/* 复习页水印：三连击屏幕可以编辑卡片 */
.review-watermark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 64px; /* sessionControls(44px) + 20px gap */
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--reader-text) 6%, var(--reader-bg));
    border: 1px solid color-mix(in srgb, var(--reader-text) 12%, transparent);
    border-radius: 20px;
    color: color-mix(in srgb, var(--reader-text) 65%, transparent);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
    opacity: 1;
    transition: opacity 0.8s ease;
    user-select: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--reader-text) 8%, transparent);
}
.review-watermark i {
    font-size: 12px;
}
.review-watermark.wm-hidden {
    opacity: 0;
    pointer-events: none;
}

/* 通栏"显示答案"按钮（主题自适应） */
.anki-show-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    background: var(--reader-bg);
    border: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    color: var(--reader-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.anki-show-btn:hover {
    background: color-mix(in srgb, var(--reader-text) 8%, var(--reader-bg));
    border-color: var(--reader-accent, #6366f1);
}

/* 快捷键小徽章 */
/* 四个等宽评分按钮 + 编辑按钮（Anki 样式，紧凑单行） */
.anki-grades {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.anki-grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 100%;
    height: 100%;
    background: var(--reader-bg);
    border: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
    border-left: none;
    border-radius: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    box-sizing: border-box;
}

/* 第一个按钮保留左边框 */
.anki-grade:first-child {
    border-left: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
}

/* Anki 风格按钮配色 */
.anki-grade[data-feedback="again"] {
    background: #e74c3c;
    border-color: #c0392b;
}
.anki-grade[data-feedback="again"]:hover {
    background: #c0392b;
    border-color: #a93226;
}

.anki-grade[data-feedback="hard"] {
    background: #f39c12;
    border-color: #d68910;
}
.anki-grade[data-feedback="hard"]:hover {
    background: #d68910;
    border-color: #b9770e;
}

.anki-grade[data-feedback="good"] {
    background: #2ecc71;
    border-color: #27ae60;
}
.anki-grade[data-feedback="good"]:hover {
    background: #27ae60;
    border-color: #1e8449;
}

.anki-grade[data-feedback="easy"] {
    background: #3498db;
    border-color: #2980b9;
}
.anki-grade[data-feedback="easy"]:hover {
    background: #2980b9;
    border-color: #2471a3;
}

.anki-grade:active {
    transform: scale(0.98);
}

/* 评分请求在途：禁用全部按钮，防止快速连点导致重复记账/跳卡 */
.anki-grade:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
    pointer-events: none;
}

.anki-grade-pressed {
    filter: brightness(0.85);
}

.anki-grade-name {
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    transform: translateY(2px);
}

.anki-grade-next {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
}

/* 编辑卡片按钮（底部栏第5个按钮） */
.anki-grade-edit {
    background: color-mix(in srgb, #6366f1 75%, #4f46e5);
    border-left: 1px solid color-mix(in srgb, #ffffff 30%, transparent);
}

.anki-grade-edit:hover {
    background: color-mix(in srgb, #6366f1 85%, #4f46e5);
}

/* 卡片内编辑按钮（浮动在卡片右下角） */
.anki-edit-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 12%, var(--reader-bg));
    color: var(--reader-accent, #6366f1);
    border: 1px solid color-mix(in srgb, var(--reader-accent, #6366f1) 35%, transparent);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

.anki-card:hover .anki-edit-btn {
    opacity: 1;
}

.anki-edit-btn:hover {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 25%, var(--reader-bg));
    opacity: 1;
}

/* 卡片内编辑按钮需要 relative 定位 */
.anki-card {
    position: relative;
}

/* ============================================
   统一 Anki 风格卡片编辑器 (.ce-* 前缀)
   ============================================ */

#ce-dialog {
    position: relative;
    width: fit-content;
    min-width: 0;
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: 95vh;
    transition: height 0.2s ease, max-height 0.2s ease;
    background: var(--reader-bg, #f9fafb);
    color: var(--reader-text, #1f2937);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
}

.ce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text, #111827) 18%, transparent);
    flex-shrink: 0;
}
.ce-header-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--reader-text, #111827);
}
.ce-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ce-header-mode-group {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
}
.ce-header-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111827) 20%, transparent);
    background: transparent;
    color: var(--reader-text, #111827);
    cursor: pointer;
    transition: all .15s ease;
}
.ce-header-mode-btn:hover {
    border-color: color-mix(in srgb, var(--reader-accent, #6366f1) 50%, transparent);
}
.ce-header-mode-btn.is-active {
    background: var(--reader-accent, #6366f1);
    color: #fff;
    border-color: var(--reader-accent, #6366f1);
}
.ce-ai-header-btn {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent);
    color: var(--reader-accent, #6366f1);
    border: 1px solid color-mix(in srgb, var(--reader-accent, #6366f1) 25%, transparent);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s, transform 0.15s, background-color 0.15s;
}
.ce-ai-header-btn:hover { background: color-mix(in srgb, var(--reader-accent, #6366f1) 18%, transparent); }
.ce-ai-header-btn:active { transform: translateY(1px); }
.ce-ai-header-btn.ce-ai-primary-btn {
    background: var(--reader-accent, #6366f1);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.ce-ai-header-btn.ce-ai-primary-btn:hover { filter: brightness(1.08); background: var(--reader-accent, #6366f1); }
.ce-ai-settings-btn {
    background: transparent;
    color: var(--c-text, #1f2937);
    border: 1px solid var(--c-border, #e5e7eb);
    box-shadow: none;
}
.ce-ai-settings-btn:hover {
    background: color-mix(in srgb, var(--c-text, #1f2937) 8%, transparent);
    filter: none;
}

/* === AI 设置弹窗 === */
.ce-confirm-mask.ce-ai-settings-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    overscroll-behavior: contain;
    align-items: flex-start;   /* 全屏顶对齐，配合下方 margin-top 留出 25px */
    border-radius: 0;          /* 遮罩层无圆角 */
}
.ce-confirm-box.ce-ai-settings-modal {
    width: 100%;
    max-width: none;
    height: calc(100vh - 25px);
    max-height: none;
    margin-top: 25px;
    padding: 0 5px;            /* 左右边距 5px；上下 0，间距由内部元素控制 */
    border-radius: 0;          /* 全屏不再圆角 */
    box-shadow: none;          /* 全屏不再投影 */
    display: flex;
    flex-direction: column;
    position: relative;   /* 「保存记录」浮层窗口的定位基准 */
    overflow: visible !important;  /* 覆盖 .ce-confirm-box 的 overflow-y:auto，阻止外层成为滚动容器 */
}
/* 标题栏右侧动作区：「保存记录」按钮 + × */
.ce-modal-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ce-ai-settings-modal .ce-modal-history-btn {
    height: 26px;
    padding: 0 10px;
    display: flex; align-items: center; gap: 5px;
    border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 35%, transparent);
    background: color-mix(in srgb, var(--c-primary, #2563eb) 10%, transparent);
    color: var(--c-primary, #2563eb);
    font-size: 13px; font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.ce-ai-settings-modal .ce-modal-history-btn:hover {
    background: color-mix(in srgb, var(--c-primary, #2563eb) 20%, transparent);
}
/* 「保存记录」浮层小窗口：默认 display:none（JS 控制），点击标题栏按钮展开 */
.ce-ai-history-win {
    position: absolute;
    top: 54px; right: 16px;
    width: min(280px, calc(100% - 32px));
    max-height: min(320px, 60vh);
    display: flex;
    flex-direction: column;
    padding: 8px 8px 6px;
    background: var(--c-bg-input, #fff);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    z-index: 30;
}
.ce-ai-history-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; margin-bottom: 6px;
    color: var(--c-text, #1f2937); flex-shrink: 0;
}
.ce-ai-history-hint {
    font-size: 12px;
    line-height: 1.5;
    color: #dc2626;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.ce-ai-history-close {
    width: 20px; height: 20px;
    border: none; background: transparent;
    cursor: pointer; border-radius: 4px;
    color: var(--c-text-muted, #6b7280);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.ce-ai-history-close:hover { background: color-mix(in srgb, var(--c-text) 10%, transparent); }
.ce-ai-history-list {
    flex: 1; overflow-y: auto; min-height: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.ce-ai-history-item {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 26px 6px 8px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 6px;
    cursor: pointer;
    background: var(--c-bg-input, #fff);
    overflow: hidden;   /* 配合摘要单行截断 */
}
.ce-ai-history-item:hover { background: color-mix(in srgb, var(--c-text) 6%, transparent); }
/* label（可编辑） */
.ce-ai-history-label {
    flex-shrink: 0;
    min-width: 28px;
    font-size: 12px; font-weight: 600;
    color: var(--c-primary, #4f46e5);
    cursor: text;
    padding: 0 2px;
    border-radius: 3px;
    line-height: 1.45;
}
.ce-ai-history-label:hover { background: color-mix(in srgb, var(--c-primary) 10%, transparent); }
.ce-ai-settings-modal .ce-ai-history-label-input {
    flex-shrink: 0;
    min-width: 40px; max-width: 100px;
    font-size: 10px !important; font-weight: 600;
    color: var(--c-primary, #4f46e5);
    border: 1px solid var(--c-primary, #4f46e5);
    border-radius: 3px;
    padding: 0 3px;
    background: var(--c-bg-input, #fff);
    outline: none;
    line-height: 1.45;
    font-family: inherit;
}
/* 摘要一行（各字段名）：不换行、超出省略号，完整内容见 title 悬停 */
.ce-ai-history-sum {
    flex: 1; min-width: 0;
    font-size: 12px; color: var(--c-text, #1f2937); line-height: 1.45;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ce-ai-history-del {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px; border: none; background: transparent;
    cursor: pointer; border-radius: 4px;
    color: var(--c-text-muted, #6b7280);
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.ce-ai-history-del:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 12%, transparent); }
.ce-ai-history-empty { font-size: 12px; color: var(--c-text-muted, #6b7280); padding: 6px 2px; }

@media (max-width: 720px) {
    .ce-ai-history-win { width: calc(100% - 24px); right: 12px; max-height: 50vh; }
}

/* === 字段组标签行（位于三参数行上方）=== */
.ce-ai-settings-modal .ce-ai-field-groups {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 1px 0;
    /* 底部横线由下方内容框的顶边框承担；-1px 让整行（含标签）下压 1px 贴住框顶边框，
       激活标签不透明会盖住这一层线，未选中标签透明则线从其后穿过 */
    margin-bottom: -1px;
}
.ce-ai-settings-modal .ce-ai-field-group-tab {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1px 12px;
    font-size: 13px;
    border: 1px solid var(--c-border-muted, #e5e7eb);
    border-radius: 6px;
    background: transparent;   /* 未选中：无填充，自动跟随弹窗底色 */
    color: var(--c-text, #1f2937);
    cursor: pointer;
    user-select: none;
}
.ce-ai-settings-modal .ce-ai-field-group-tab.is-active {
    background: var(--c-primary, #2563eb);   /* 不透明，用于盖住内容框顶边框 */
    color: #fff;
    border-color: color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-bottom: none;                     /* 标签与内容之间不画边框 */
    border-radius: 6px 6px 0 0;              /* 上圆下方的台阶凸角 */
    z-index: 2;                              /* 盖住内容框顶边框 */
}
/* 激活标签底部覆盖块：向下伸出 1px 压住内容框的顶边框，让标签与内容框连成一体。
   用绝对定位实现，不依赖 flex 的拉伸/负边距行为（实测负边距不会让标签变高） */
.ce-ai-settings-modal .ce-ai-field-group-tab.is-active::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 2px;
    background: var(--c-primary, #2563eb);
    pointer-events: none;
}
/* === 字段组内容框：与激活标签共用一个外框 === */
.ce-ai-settings-modal .ce-ai-field-group-panel {
    position: relative;
    z-index: 1;
    border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-radius: 6px;
    padding: 3px 8px 0;
}
/* 激活标签正好是行内第一个标签时，其左边框与外框左边框同列，
   故左上角改为直角，让「标签左边框 + 外框左边框」连成一条不断开的竖线 */
.ce-ai-settings-modal .ce-ai-panel:has(> .ce-ai-field-groups > .ce-ai-field-group-tab.is-active:first-child) .ce-ai-field-group-panel {
    border-top-left-radius: 0;
}
.ce-ai-settings-modal .ce-ai-field-group-name {
    pointer-events: none;
}
.ce-ai-settings-modal .ce-ai-field-group-del {
    margin-left: 6px;
    font-size: 14px;
    line-height: 1;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
}
.ce-ai-settings-modal .ce-ai-field-group-del:hover {
    color: #fff;
}
.ce-ai-settings-modal .ce-ai-field-group-name-input {
    font-size: 13px !important;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    width: 80px;
    padding: 0;
    text-align: center;
}
.ce-ai-settings-modal .ce-ai-field-group-tab.is-active .ce-ai-field-group-name-input {
    color: #fff;
}
.ce-ai-settings-modal .ce-ai-field-group-add {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px dashed var(--c-border-muted, #e5e7eb);
    border-radius: 6px;
    color: var(--c-text-muted, #6b7280);
    cursor: pointer;
    user-select: none;
}
.ce-ai-settings-modal .ce-ai-field-group-add:hover {
    color: var(--c-primary, #2563eb);
    border-color: var(--c-primary, #2563eb);
}

.ce-ai-setting-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0;
    height: 27px;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    margin: 3px 0;
}
.ce-ai-setting-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 4px;
    font-size: 13px;
    color: var(--c-text-muted, #6b7280);
}
.ce-ai-setting-field > span {
    font-weight: 600;
    color: var(--c-text, #1f2937);
    font-size: 13px;
}
.ce-ai-setting-field small {
    font-size: 12px;
    color: var(--c-text-muted, #9ca3af);
}
/* AI 设置字段水平布局：label 放前，input 放后同一行 */
.ce-ai-setting-field-row {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    justify-content: center;
}
.ce-ai-setting-field-row > span {
    font-weight: 600;
    color: var(--c-text, #1f2937);
    font-size: 13px;
    white-space: nowrap;
}
.ce-ai-search-row {
    display: flex;
    align-items: center;
    height: 27px;
    padding: 0 6px;
    margin: 3px 0;
}
.ce-ai-settings-modal .ce-ai-num-input {
    width: 80px;
    height: 24px;
    padding: 0 6px;
    box-sizing: border-box;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 6px;
    font-size: 11px !important;
    font-weight: 400;
    text-align: center;
    background: var(--c-bg-input, #fff);
    color: var(--c-text, #1f2937);
    font-family: inherit;
    -moz-appearance: textfield;
}
.ce-ai-settings-modal .ce-ai-num-input::-webkit-outer-spin-button,
.ce-ai-settings-modal .ce-ai-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ce-ai-settings-modal .ce-ai-num-input:focus {
    outline: none;
    border-color: var(--c-accent, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent, #6366f1) 20%, transparent);
}
.ce-ai-num-input-temp { width: 80px; }
.ce-ai-settings-modal .ce-modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text, #1f2937);
}
.ce-ai-settings-modal .ce-modal-close {
    width: 28px; height: 28px;
    border: none; background: transparent;
    cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text-muted, #6b7280);
}
.ce-ai-settings-modal .ce-modal-close:hover {
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
}
.ce-ai-settings-modal .ce-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.ce-ai-settings-modal .ce-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 3px;
    margin-top: 0;
    border-top: 1px solid var(--c-border, #e5e7eb);
}
.ce-ai-settings-modal .ce-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    cursor: pointer;
    border: 1px solid var(--c-border, #e5e7eb);
    background: var(--c-bg-input, #fff);
    color: var(--c-text, #1f2937);
}
.ce-ai-settings-modal .ce-btn.ce-primary {
    background: var(--c-accent, #6366f1);
    color: #fff;
    border-color: transparent;
}
.ce-ai-settings-modal .ce-btn.ce-primary:hover { filter: brightness(1.08); }
.ce-ai-setting-reqs-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text, #1f2937);
    height: 27px;
    margin: 3px 0;
}
.ce-ai-settings-modal .ce-ai-setting-reqs {
    width: 100%;
    padding: 3px 6px !important;
    min-height: 27px;
    /* 高度由 JS(autoGrowKp / autoGrowReqs) 按内容设置，不能写死：
       写死会盖掉内联 height，导致多行内容被裁在 27px */
    height: auto;
    overflow: hidden;          /* 与 .ce-ai-field-req-input 一致：高度由 JS 撑足，不出现滚动条 */
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    font-size: 11px !important;
    /* 19px：border-box 下 27px 的内容区正好 19px，单行不裁切（20px 会让单行最小变 28px） */
    line-height: 19px;
    box-sizing: border-box;
    font-family: inherit;
    background: var(--c-bg-input, #fff);
    color: var(--c-text, #1f2937);
    resize: none;
    margin: 3px 0;
}
/* === AI 设置弹窗内字段配置 === */
.ce-ai-fields-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2px;
}
.ce-ai-field-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 2px 10px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 6px;
    background: var(--c-bg-input, #fff);
}
.ce-ai-field-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.ce-ai-settings-modal .ce-ai-field-req-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px !important;
    line-height: 20px;
    padding: 1px 6px;
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 6px;
    background: var(--c-bg, #fff);
    color: var(--c-text, #1f2937);
    outline: none;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    min-height: 24px;
}
.ce-ai-settings-modal .ce-ai-field-req-input::placeholder {
    color: var(--c-text-muted, #9ca3af);
}
.ce-ai-settings-modal .ce-ai-field-req-input:focus {
    border-color: var(--c-primary, #2563eb);
}
.ce-ai-field-label {
    font-size: 13px;
    color: var(--c-text, #1f2937);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ce-ai-field-label:hover { color: var(--c-primary, #2563eb); }
.ce-ai-settings-modal .ce-ai-field-label-input {
    flex: 1;
    font-size: 11px !important;
    padding: 2px 6px;
    border: 1px solid var(--c-primary, #2563eb);
    border-radius: 4px;
    font-family: inherit;
    min-width: 0;
}
.ce-ai-field-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}
.ce-ai-field-btn {
    width: 26px; height: 26px;
    border: none;
    background: transparent;
    color: var(--c-text-muted, #6b7280);
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ce-ai-field-btn:hover { background: var(--c-bg-hover, #f3f4f6); color: var(--c-text, #1f2937); }
.ce-ai-field-del:hover { color: #dc2626; background: #fef2f2; }
/* 复习显示「开启」态的眼睛按钮：主色（选择器带 :hover 以免被 .ce-ai-field-btn:hover 覆盖） */
.ce-ai-field-eye-on, .ce-ai-field-eye-on:hover { color: var(--c-primary, #2563eb); }
.ce-ai-field-add {
    font-size: 13px;
    padding: 6px 12px;
    border: 1px dashed var(--c-border, #d1d5db);
    background: transparent;
    color: var(--c-text-muted, #6b7280);
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}
.ce-ai-field-add:hover { color: var(--c-primary, #2563eb); border-color: var(--c-primary, #2563eb); }
/* 手机端：三参数行与制卡要求 textarea 等宽，输入框自适应避免溢出 */
@media (max-width: 767px) {
    .ce-ai-setting-row { gap: 8px; }
    .ce-ai-setting-field-row { min-width: 0; gap: 4px; }
    .ce-ai-settings-modal .ce-ai-num-input { width: 100%; min-width: 0; }
}
.ce-close-btn {
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--reader-text, #111827);
    opacity: 0.7;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ce-close-btn:hover { opacity: 1; background: color-mix(in srgb, var(--reader-text, #111) 8%, transparent); }

/* 工具栏 */
.ce-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    flex-shrink: 0;
    flex-wrap: nowrap;          /* 关键：工具栏永不换行 */
}
.ce-toolbar-left, .ce-toolbar-right {
    display: flex; align-items: center; gap: 2px;
    flex-wrap: nowrap;          /* 关键：工具按钮永不换行 */
    flex-shrink: 0;
    min-width: 0;
}
.ce-tb-btn {
    height: 30px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--reader-text, #111827);
    opacity: 0.85;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    position: relative;
}
.ce-tb-btn:hover { background: color-mix(in srgb, var(--reader-text, #111) 10%, transparent); opacity: 1; }
.ce-tb-btn:active { transform: translateY(1px); }
.ce-tb-btn.ce-primary {
    background: var(--reader-accent, #6366f1);
    color: #fff; opacity: 1;
    padding: 0 10px; gap: 6px; font-weight: 600;
    box-shadow: 0 2px 6px rgba(99,102,241,0.22);
}
.ce-tb-btn.ce-primary:hover { filter: brightness(1.1); }
.ce-tb-sep {
    width: 1px; height: 18px; margin: 0 4px;
    background: color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
}
.ce-tb-select {
    height: 30px; padding: 0 28px 0 8px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #1f2937) 22%, transparent);
    background:
        linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--reader-text, #1f2937) 65%, transparent) 50%) no-repeat calc(100% - 14px) 50% / 6px 6px,
        linear-gradient(135deg, color-mix(in srgb, var(--reader-text, #1f2937) 65%, transparent) 50%, transparent 50%) no-repeat calc(100% - 10px) 50% / 6px 6px,
        var(--reader-bg, #ffffff);
    background-color: var(--reader-bg, #ffffff);
    color: var(--reader-text, #1f2937);
    border-radius: 6px;
    /* 去掉浏览器原生下拉箭头，替换为主题色友好的自定义箭头 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ce-tb-select:hover {
    border-color: color-mix(in srgb, var(--reader-text, #1f2937) 38%, transparent);
}
.ce-tb-select:focus {
    border-color: var(--reader-accent, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-accent, #6366f1) 28%, transparent);
}
/* 原生 <option> / <optgroup> 下拉面板样式：从 select 继承 bg/text，保证深浅主题一致 */
.ce-tb-select,
.ce-tb-select option,
.ce-tb-select optgroup {
    background-color: var(--reader-bg, #ffffff);
    color: var(--reader-text, #1f2937);
}
.ce-tb-select option:checked {
    background-color: color-mix(in srgb, var(--reader-accent, #6366f1) 30%, var(--reader-bg, #ffffff));
    color: var(--reader-text, #1f2937);
}
.ce-tb-select optgroup {
    font-weight: 600;
    border: none;
    background-color: color-mix(in srgb, var(--reader-text, #1f2937) 6%, var(--reader-bg, #ffffff));
}
.ce-tb-btn[data-role="field-menu"]::after,
.ce-tb-btn[data-role="help"]::after {
    /* 下拉指示 */
}
.ce-popover {
    position: absolute;
    z-index: 100;
    background: var(--reader-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 18%, transparent);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    min-width: 160px;
    max-width: calc(100% - 16px);
    max-height: 50vh;
    overflow: auto;
    overflow-x: hidden;
}
.ce-popover-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: 13px;
    color: var(--reader-text, #111);
}
.ce-popover-item:hover { background: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent); }
.ce-color-grid {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px;
    padding: 8px;
}
.ce-color-grid div {
    width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08);
}
.ce-color-grid div:hover { transform: scale(1.15); }

/* 卡片类型行（已移除；保留占位注释） */
.ce-type-row { display: none; }


/* 字段区 */
.ce-fields {
    padding: 8px 16px 4px 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ce-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 0;
    cursor: default;
    user-select: none;
}
.ce-field.ce-dragging {
    opacity: 0.45;
}
.ce-field.ce-drag-over-top {
    position: relative;
}
.ce-field.ce-drag-over-top::before {
    content: '';
    position: absolute;
    top: -4px; left: 0; right: 0;
    height: 3px;
    background: var(--reader-accent, #0077c8);
    border-radius: 2px;
}
.ce-field.ce-drag-over-bottom {
    position: relative;
}
.ce-field.ce-drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 3px;
    background: var(--reader-accent, #0077c8);
    border-radius: 2px;
}
.ce-field-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--reader-muted, #9ca3af);
    cursor: grab;
    flex-shrink: 0;
    transition: color 0.12s;
    opacity: 0;
    font-size: 14px;
}
.ce-field-drag:active { cursor: grabbing; }
.ce-field:hover .ce-field-drag,
.ce-field.ce-active .ce-field-drag {
    opacity: 1;
}
.ce-field-drag:hover {
    color: var(--reader-accent, #0077c8);
}
.ce-field.ce-active {
    /* active indicator removed; label highlighted below */
}
.ce-field.ce-active .ce-field-label {
    color: color-mix(in srgb, var(--reader-accent, #6366f1) 85%, #000);
}
.ce-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    order: 1;
    margin-bottom: 3px;
}
.ce-field-label {
    font-size: 12px;
    color: var(--reader-text, #111);
    opacity: 0.8;
    font-weight: 600;
    padding: 1px 4px;
    margin-left: -4px;
    word-break: break-all;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, opacity 0.12s;
    -webkit-tap-highlight-color: transparent;
    flex: 1;
    min-width: 0;
}
.ce-field-label:hover {
    opacity: 1;
    background: rgba(0,0,0,0.04);
}
.ce-field-del {
    display: none;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--reader-muted, #9ca3af);
    border-radius: 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}
.ce-field:hover .ce-field-del,
.ce-field.ce-active .ce-field-del {
    display: flex;
}
.ce-field-del:hover {
    color: #ef4444;
    background: rgba(239,68,68,0.1);
}
/* 字段复习显示开关 */
.ce-field-toggle {
    position: relative;
    width: 34px;
    height: 18px;
    flex-shrink: 0;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 9px;
    background: var(--reader-border, #d0d4da);
    cursor: pointer;
    transition: background 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ce-field-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.ce-field-toggle.is-on {
    background: var(--reader-accent, #6366f1);
}
.ce-field-toggle.is-on::after {
    transform: translateX(16px);
}
/* 序号徽章 */
.ce-field-order-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--reader-accent, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.ce-field-order-badge.is-visible {
    display: inline-flex;
}
.ce-add-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 9px 12px;
    border: 1.5px dashed var(--reader-border, #d0d4da);
    border-radius: 8px;
    color: var(--reader-accent, #0077c8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.ce-add-field:hover {
    background: rgba(0,119,200,0.06);
    border-color: var(--reader-accent, #0077c8);
}
.ce-add-field:active {
    background: rgba(0,119,200,0.12);
    transform: scale(0.99);
}
.ce-field-content {
    box-sizing: border-box;
    min-height: calc(1.6em + 10px);   /* 单行最小高度：行高 + 上下内边距 + 边框 */
    max-height: 240px;
    overflow-y: auto;
    outline: none;
    padding: 4px 6px;
    line-height: 1.6;
    color: var(--reader-text, #111);
    background: color-mix(in srgb, var(--reader-bg, #fff) 80%, var(--reader-text, #111));
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
    border-radius: 6px;
    font-size: 14px;
    word-break: break-word;
    order: 2;
}
/* 字段开关关闭时隐藏内容区域 */
.ce-field.is-off .ce-field-content {
    display: none;
}
.ce-field-content:empty::before {
    content: attr(data-placeholder);
    color: color-mix(in srgb, var(--reader-text, #111) 40%, transparent);
}
/* 只读模式下不显示 placeholder */
.ce-field-content.ce-field-readonly:empty::before {
    content: '';
}
/* 复习页/预览页只读字段样式（与编辑器完全一致，去除编辑器交互属性） */
.ce-field-content.ce-field-readonly {
    min-height: auto;
    max-height: none;
    overflow-y: visible;
    outline: none;
    cursor: default;
    user-select: text;
    -webkit-user-select: text;
    background: color-mix(in srgb, var(--reader-bg, #fff) 92%, var(--reader-text, #1f2937));
    color: var(--reader-text, #1f2937);
    border: none;
    border-radius: 0;
    padding: 4px 6px;
}
.ce-field-content.ce-field-readonly:hover {
    background: color-mix(in srgb, var(--reader-bg, #fff) 92%, var(--reader-text, #1f2937));
}
/* 复习卡片正面内容居中、加粗、字号+2px */
.anki-card-q .ce-field-content.ce-field-readonly {
    text-align: center;
    font-weight: 700;
    font-size: calc(var(--reader-font-size, 18px) + 2px);
}
.ce-field-content.ce-field-readonly.ce-field-pinyin {
    opacity: 0.8;
    font-size: calc(var(--reader-font-size, 18px) * 0.85);
}
/* 复习页只读字段标签样式（与编辑器 ce-field-label 一致） */
.ce-field-label.ce-field-readonly-label {
    font-size: 12px;
    color: var(--reader-text, #111);
    opacity: 0.8;
    font-weight: 600;
    padding: 1px 4px;
    margin-left: 0;
    margin-top: calc(var(--reader-font-size) * var(--reader-line-height) * 0.2);
    margin-bottom: 2px;
    word-break: break-all;
    cursor: default;
    border-radius: 4px;
    background: transparent;
}
.ce-field-label.ce-field-readonly-label:hover {
    opacity: 0.8;
    background: transparent;
}
/* AI 生成内容高亮样式 */
.ce-field-content .ce-ai-hl {
    color: #e74c3c;
    font-weight: 700;
    background: linear-gradient(transparent 65%, rgba(231,76,60,0.18) 65%);
    padding: 0 2px;
    border-radius: 3px;
}
/* AI 加粗标题（如 **释义：**）：只加粗不着色，是否加粗以 AI制卡要求为准 */
.ce-field-content .ce-ai-hl-title,
.ce-preview .ce-ai-hl-title {
    font-weight: 700;
    color: inherit;
    background: none;
    padding: 0;
    border-radius: 0;
}
/* 复习页只读字段中的分隔线样式 */
.ce-field-content.ce-field-readonly hr {
    border: none;
    border-top: 1px dashed color-mix(in srgb, var(--reader-text, #111) 25%, transparent);
    margin: 8px 0;
}
.ce-field-content .ce-ai-hl-diff {
    color: #2980b9;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #2980b9;
    text-underline-offset: 3px;
    padding: 0 2px;
}
/* 预览面板中的高亮同步 */
.ce-preview .ce-ai-hl {
    color: #e74c3c;
    font-weight: 700;
    background: linear-gradient(transparent 65%, rgba(231,76,60,0.18) 65%);
    padding: 0 2px;
    border-radius: 3px;
}
.ce-preview .ce-ai-hl-diff {
    color: #2980b9;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #2980b9;
    text-underline-offset: 3px;
    padding: 0 2px;
}

/* AI 三段式小节标签：译 / 释 / 要点 / 重点 / 难点 / 技巧（编辑器字段 + 预览 + 只读字段共用） */
.ce-field-content .ce-ai-seg,
.ce-preview .ce-ai-seg {
    font-weight: 700;
    padding: 0 2px;
    border-radius: 3px;
    white-space: nowrap;
}
.ce-field-content .ce-ai-seg-label { color: #e67e22; }       /* 译/释/要点 通用暖色 */
.ce-field-content .ce-ai-seg-pt    { color: #e74c3c; }      /* 重点：红 */
.ce-field-content .ce-ai-seg-diff  { color: #2980b9; }      /* 难点：蓝 */
.ce-field-content .ce-ai-seg-tip   { color: #27ae60; }      /* 技巧：绿 */
.ce-preview .ce-ai-seg-label { color: #e67e22; }
.ce-preview .ce-ai-seg-pt    { color: #e74c3c; }
.ce-preview .ce-ai-seg-diff  { color: #2980b9; }
.ce-preview .ce-ai-seg-tip   { color: #27ae60; }

/* AI 内容块级元素样式（编辑器字段 + 预览 + 只读字段共用） */
.ce-field-content ul, .ce-field-content ol, .ce-preview ul, .ce-preview ol {
    margin: 4px 0;
    padding-left: 22px;
}
.ce-field-content li, .ce-preview li { margin: 2px 0; }
.ce-field-content h1, .ce-field-content h2, .ce-field-content h3,
.ce-field-content h4, .ce-field-content h5, .ce-field-content h6,
.ce-preview h1, .ce-preview h2, .ce-preview h3,
.ce-preview h4, .ce-preview h5, .ce-preview h6 {
    margin: 8px 0 4px;
    line-height: 1.4;
}
.ce-field-content h1, .ce-preview h1 { font-size: 1.25em; }
.ce-field-content h2, .ce-preview h2 { font-size: 1.15em; }
.ce-field-content h3, .ce-preview h3 { font-size: 1.08em; }
.ce-field-content h4, .ce-preview h4 { font-size: 1.02em; }
.ce-field-content code, .ce-preview code {
    background: rgba(127,127,127,.12);
    border: 1px solid rgba(127,127,127,.25);
    border-radius: 4px;
    padding: 0 4px;
    font-size: .9em;
    font-family: ui-monospace, Consolas, 'Courier New', monospace;
}
.ce-field-content blockquote, .ce-preview blockquote {
    margin: 4px 0;
    padding: 2px 10px;
    border-left: 3px solid color-mix(in srgb, var(--reader-text, #111) 25%, transparent);
    opacity: .85;
}
.ce-field-content hr, .ce-preview hr {
    border: none;
    border-top: 1px dashed color-mix(in srgb, var(--reader-text, #111) 25%, transparent);
    margin: 8px 0;
}

/* 卡片字段内的重点字词标记：主题 kp 色文字 + 下划线（左右各缩 1.5px） */
.mark-keypoint {
    padding: 0;
    display: inline;
    color: var(--kp-color, color-mix(in srgb, var(--reader-accent, #6366f1) 70%, var(--reader-text, #1f2937)));
    background-image: linear-gradient(to right,
        transparent 1.5px, var(--kp-underline, var(--reader-accent, #6366f1)) 1.5px,
        var(--kp-underline, var(--reader-accent, #6366f1)) calc(100% - 1.5px), transparent calc(100% - 1.5px));
    background-size: 100% 1.5px;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* 复习页背面重点字词可点击 */
#reviewSession .mark-keypoint {
    cursor: pointer;
}

/* 预览 */
.ce-preview {
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: color-mix(in srgb, var(--reader-bg, #fff) 94%, var(--reader-text, #111));
    flex-shrink: 0;
    max-height: 38vh;
    overflow-y: auto;
}
.ce-preview.hidden { display: none; }
.ce-preview-box {
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 20%, transparent);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--reader-bg, #fff);
    color: var(--reader-text, #111);
    font-size: var(--reader-font-size, 18px);
    line-height: var(--reader-line-height, 1.8);
    text-align: justify;
    text-justify: inter-ideograph;
}
.ce-preview-title {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 600;
    margin-bottom: 4px;
}

/* 标签行 */
.ce-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 10%, transparent);
    position: relative;
    flex-shrink: 0;
}
.ce-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 18%, transparent);
    color: color-mix(in srgb, var(--reader-accent, #6366f1) 85%, #000);
    font-size: 12px;
    font-weight: 500;
}
.ce-tag button {
    all: unset; cursor: pointer; font-size: 11px; opacity: 0.7;
}
.ce-tag button:hover { opacity: 1; }
.ce-tag-input {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    padding: 4px 2px;
    color: var(--reader-text, #111);
}
.ce-tag-suggest {
    position: absolute; bottom: 100%; left: 16px; right: 16px;
    max-height: 180px; overflow-y: auto;
    background: var(--reader-bg, #fff);
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 20%, transparent);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
    z-index: 20;
    display: none;
}
.ce-tag-suggest.ce-show { display: block; }
.ce-tag-suggest div {
    padding: 6px 10px; cursor: pointer; font-size: 13px;
    color: var(--reader-text, #111);
}
.ce-tag-suggest div:hover { background: color-mix(in srgb, var(--reader-accent, #6366f1) 12%, transparent); }

/* 底部 */
.ce-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    flex-shrink: 0;
}
.ce-footer-left, .ce-footer-right { display: flex; align-items: center; gap: 10px; }
.ce-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 25%, transparent);
    background: var(--reader-bg, #fff);
    color: var(--reader-text, #111);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.ce-btn:hover { background: color-mix(in srgb, var(--reader-text, #111) 6%, var(--reader-bg, #fff)); }
.ce-btn.ce-primary {
    background: var(--reader-accent, #6366f1);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}
.ce-btn.ce-primary:hover { filter: brightness(1.08); background: var(--reader-accent, #6366f1); }

/* 按钮禁用态：AI 制卡中 / 批量生成中保存按钮置灰不可点 */
.ce-btn:disabled,
.ce-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
}
.ce-btn.ce-primary:disabled,
.ce-btn.ce-primary[disabled] {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 55%, #9ca3af);
}

/* 脏数据确认 */
.ce-confirm-mask {
    position: absolute; inset: 0;
    background: rgba(15,23,42,0.35);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; border-radius: 12px;
}
/* body 级浮层输入弹窗（用于 AI 设置等 body 挂载的弹窗内调用） */
.ce-confirm-mask.ce-confirm-mask-fixed {
    position: fixed;
    inset: 0;
    z-index: 10060;
    border-radius: 0;
}
.ce-confirm-box {
    background: var(--reader-bg, #fff);
    padding: 20px 24px;
    border-radius: 12px;
    min-width: 320px;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0,0,0,0.2);
}
.ce-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ce-confirm-msg { font-size: 14px; line-height: 1.55; color: var(--reader-text, #111); white-space: pre-wrap; }
.ce-input-dialog-box { min-width: 340px; }
.ce-input-dialog-input {
    width: 100%;
    margin-top: 14px;
    padding: 9px 12px;
    font-size: 14px;
    border: 1.5px solid var(--reader-border, #d0d4da);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.ce-input-dialog-input:focus {
    border-color: var(--reader-accent, #0077c8);
    box-shadow: 0 0 0 3px rgba(0,119,200,0.12);
}
.ce-table-dialog {
    min-width: 320px;
    max-width: 96vw;
    width: auto;
}
.ce-table-rows {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    flex-wrap: wrap;
}
.ce-table-rows label {
    font-size: 13px;
    color: var(--reader-muted, #6b7280);
    white-space: nowrap;
}
.ce-table-rows input {
    width: 60px;
    padding: 7px 8px;
    font-size: 13px;
    text-align: center;
}

/* AI 设置与制卡 统一弹窗 */
.ce-ai-reqs-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--reader-accent, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-family: inherit;
}
.ce-ai-reqs-reset-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.45);
}
.ce-ai-reqs-reset-btn:active {
    transform: translateY(1px);
}
/* 紧凑信息行 */
.ce-ai-preview-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--c-bg, #f9fafb) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-bg, #e5e7eb) 60%, transparent);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
}
.ce-ai-preview-info-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}
.ce-ai-preview-info-k {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--c-text-muted, #6b7280);
    width: 48px;
}
.ce-ai-preview-info-v {
    flex: 1;
    min-width: 0;
    color: var(--c-text, #111);
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ce-ai-preview-info-v.ce-ai-preview-info-orig {
    color: var(--c-accent, #6366f1);
    font-weight: 500;
}
.ce-ai-preview-info-v.ce-ai-preview-info-ctx {
    font-size: 12px;
    color: var(--c-text-muted, #6b7280);
    -webkit-line-clamp: 2;
}

/* 表格样式选择器 */
.ce-table-style-section {
    margin-top: 16px;
}
.ce-table-style-title {
    font-size: 12px;
    color: var(--reader-muted, #6b7280);
    margin-bottom: 8px;
    font-weight: 500;
}
.ce-table-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
}
.ce-table-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 6px 6px;
    border: 1.5px solid var(--reader-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.12s;
    background: var(--reader-bg, #fff);
}
.ce-table-style-card:hover {
    border-color: var(--reader-accent, #0077c8);
    background: color-mix(in srgb, var(--reader-accent, #0077c8) 4%, var(--reader-bg, #fff));
    transform: translateY(-1px);
}
.ce-table-style-card.active {
    border-color: var(--reader-accent, #0077c8);
    background: color-mix(in srgb, var(--reader-accent, #0077c8) 8%, var(--reader-bg, #fff));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--reader-accent, #0077c8) 20%, transparent);
}
.ce-table-style-preview {
    width: 100%;
    height: 42px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 6px;
    background: var(--reader-bg, #fafbfc);
    padding: 3px;
}
.ce-table-style-preview table {
    width: 100%;
    max-width: 100%;
}
.ce-table-style-label {
    font-size: 11px;
    color: var(--reader-text, #111);
    font-weight: 500;
    text-align: center;
}

/* 窄屏适配 */
@media (max-width: 640px) {
    .ce-table-dialog { min-width: unset; width: calc(100vw - 32px); max-height: 85vh; }
    .ce-table-rows { gap: 6px; }
    .ce-table-rows input { width: 52px; padding: 6px; }
    .ce-table-style-grid { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
    .ce-table-style-card { padding: 6px 4px 5px; border-radius: 8px; }
    .ce-table-style-preview { height: 34px; padding: 2px; }
    .ce-table-style-label { font-size: 10px; }
}

@media (max-width: 380px) {
    .ce-table-style-grid { grid-template-columns: repeat(3, 1fr); }
    .ce-table-style-preview { height: 30px; }
}

.ce-inserted-table td {
    min-width: 30px;
}
.ce-inserted-table td:focus {
    outline: 2px solid var(--reader-accent, #0077c8);
    outline-offset: -2px;
}
.ce-field-content table.ce-inserted-table {
    margin: 4px 0;
}

/* 表格边框悬停控制（增删行/列） */
.ce-table-row-controls,
.ce-table-col-controls {
    display: flex;
    background: #ffffff;
    border: 1px solid #c8ccd2;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    user-select: none;
    overflow: hidden;
}

.ce-table-row-controls {
    flex-direction: column;
    width: 22px;
    height: 40px;
}

.ce-table-col-controls {
    flex-direction: row;
    width: 40px;
    height: 22px;
}

.ce-table-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.12s, color 0.12s;
    flex: 1;
}

.ce-table-ctrl-minus {
    background: #fef2f2;
    color: #ef4444;
    border-right: 1px solid #e5e7eb;
}

.ce-table-ctrl-plus {
    background: #f0fdf4;
    color: #22c55e;
}

.ce-table-col-controls .ce-table-ctrl-minus {
    border-right: 1px solid #e5e7eb;
}

.ce-table-row-controls .ce-table-ctrl-minus {
    border-bottom: 1px solid #e5e7eb;
    border-right: none;
}

.ce-table-ctrl:hover {
    filter: brightness(0.95);
}

.ce-table-ctrl i {
    pointer-events: none;
}

/* 当 body.card-editor-open 时，全局快捷被宿主层屏蔽（样式不直接参与） */

/* 卡片编辑器打开时锁定背景滚动（body 是页面滚动容器） */
body.card-editor-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ---- 响应式：手机端适配 ---- */
@media (max-width: 640px) {
    /* 手机端软键盘弹出时 overflow:hidden 无法锁住文档滚动，改为 position:fixed 彻底锁定（top 由 JS 补偿） */
    body.card-editor-open {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    #ce-dialog {
        min-width: unset;
        max-width: 100%;
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        border-radius: 12px 12px 0 0;
        margin: 0;
    }
    .ce-header {
        padding: 10px 12px;
        gap: 6px;
    }
    .ce-header-title { font-size: 15px; flex: 1; min-width: 0; }
    .ce-ai-header-btn { padding: 5px 9px; font-size: 12px; border-radius: 7px; }
    .ce-ai-header-btn span,
    .ce-ai-header-btn .ce-ai-label { display: none; }
    .ce-close-btn { width: 36px; height: 36px; }

    .ce-toolbar {
        padding: 6px 8px;
        gap: 4px;
        overflow-x: visible;
        flex-wrap: nowrap;                     /* 覆盖旧的 wrap：工具栏强制单行 */
    }
    .ce-toolbar-left, .ce-toolbar-right { gap: 1px; flex-wrap: nowrap; flex-shrink: 0; }
    .ce-tb-btn { height: 34px; padding: 0 5px; font-size: 13px; }
    .ce-tb-btn.ce-primary { padding: 0 8px; }
    .ce-tb-sep { height: 16px; margin: 0 2px; }
    .ce-tb-select { height: 36px; padding: 0 6px; }

    .ce-fields { padding: 6px 10px 4px 10px; gap: 10px; }
    .ce-field-content {
        min-height: calc(1.5em + 14px);   /* 单行最小高度：15px×1.5 行高 + 上下内边距 12px + 边框 2px */
        padding: 6px 8px;
        font-size: 15px;
        line-height: 1.5;
    }
    .ce-field-drag { opacity: 1; width: 24px; height: 24px; font-size: 15px; }
    .ce-field-label { font-size: 13px; }
    .ce-field-del { width: 26px; height: 26px; display: flex; }
    .ce-field-del i { font-size: 13px; }
    .ce-add-field { padding: 12px; font-size: 14px; min-height: 44px; }
    .ce-add-field i { font-size: 14px; }
    .ce-footer-tpl-btn { padding: 0 6px; }
    .ce-template-popover { max-width: calc(100vw - 24px); right: 12px !important; }

    .ce-preview { padding: 8px 10px; }
    .ce-preview-box { padding: 8px 10px; font-size: 16px; }

    .ce-tags { padding: 8px 10px; gap: 5px; }
    .ce-tag-input { min-width: 80px; font-size: 14px; }

    .ce-footer { padding: 10px 12px; }
    .ce-footer-left, .ce-footer-right { gap: 8px; }
    .ce-btn { padding: 10px 20px; font-size: 15px; min-height: 27px; }
}

/* 小屏适配：按钮图标优先、隐藏次要文字 */
@media (max-width: 380px) {
    .ce-tb-btn[data-role="undo"],
    .ce-tb-btn[data-role="redo"] { display: none; }
    /* 极窄屏：进一步压缩，保证工具栏单行放下 */
    .ce-tb-btn { padding: 0 4px; font-size: 12px; }
    .ce-tb-sep { margin: 0 1px; }
    .ce-tag-input { min-width: 60px; }
}

/* 模板选择弹窗 */
.ce-template-popover {
    min-width: 260px;
    max-width: 320px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.ce-tpl-header {
    padding: 10px 12px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--reader-text, #111);
    border-bottom: 1px solid var(--reader-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.ce-tpl-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--reader-muted, #6b7280);
}
.ce-tpl-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
    max-height: 220px;
}
.ce-tpl-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    gap: 8px;
}
.ce-tpl-item:last-child { border-bottom: none; }
.ce-tpl-item:hover { background: rgba(0,119,200,0.06); }
.ce-tpl-info { flex: 1; min-width: 0; }
.ce-tpl-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--reader-text, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ce-tpl-meta {
    font-size: 11px;
    color: var(--reader-muted, #6b7280);
    margin-top: 2px;
}
.ce-tpl-del {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--reader-muted, #6b7280);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.ce-tpl-item:hover .ce-tpl-del { opacity: 1; }
.ce-tpl-del:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
.ce-tpl-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--reader-muted, #6b7280);
    font-size: 13px;
}
.ce-tpl-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--reader-border, #e5e7eb);
    font-size: 13px;
    font-weight: 500;
    color: var(--reader-accent, #0077c8);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.ce-tpl-save:hover { background: rgba(0,119,200,0.06); }

/* 页脚模板按钮 */
.ce-footer-tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
}
.ce-tpl-btn-label {
    font-size: 12px;
    font-weight: 500;
}

/* ---- 复习完成画面 ---- */
.anki-done {
    max-width: 600px;
    margin: auto;
    text-align: center;
    padding: 40px 0;
}

.anki-done-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.anki-done-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--reader-text);
    margin-bottom: 10px;
}

.anki-done-sub {
    font-size: 16px;
    color: var(--reader-text);
    opacity: 0.6;
    margin-bottom: 28px;
}

.anki-done-btn {
    padding: 10px 36px;
    background: var(--reader-bg);
    border: 1px solid color-mix(in srgb, var(--reader-text) 25%, transparent);
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    color: var(--reader-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.anki-done-btn:hover {
    background: color-mix(in srgb, var(--reader-text) 8%, var(--reader-bg));
    border-color: var(--reader-accent, #6366f1);
}

/* ---- 复习列表中的复习按钮 ---- */
.review-btn {
    white-space: nowrap;
}

.review-btn:disabled {
    cursor: not-allowed;
}

/* ---- 暗色主题特殊覆盖 ---- */
body.app-theme-night .anki-grade-name {
    color: #ffffff;
}

body.app-theme-night .anki-grade-next {
    color: rgba(255, 255, 255, 0.8);
}

/* ---- 响应式：按钮栏自适应 ---- */

.modal-enter { animation: modalFadeIn 0.25s ease-out; }
@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.page-transition { animation: fadeIn 0.15s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

.color-dot {
    width: 20px; height: 20px;
    border-radius: 50%; cursor: pointer;
    border: 2px solid transparent;
}
.color-dot.active { border-color: var(--c-primary); }

@media (max-width: 768px) {
    .reader-content { padding: 3px 5px; font-size: var(--reader-font-size); }
}

/* 选区工具栏 - 完整样式 */
.selection-toolbar {
    position: fixed;
    z-index: 9990;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    background: var(--c-bg, #ffffff);
    color: var(--c-text, #1f2937);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    border: 1px solid color-mix(in srgb, var(--c-text) 10%, transparent);
    /* 禁止动画和过渡，避免闪动 */
    transition: none;
    animation: none;
    will-change: left, top;
    transform: none !important;
    opacity: 1 !important;
}

.selection-toolbar.frozen {
    /* 冻结状态：按钮操作期间完全禁止位置变化 */
    pointer-events: auto;
}

.selection-toolbar button {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 4px;
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.1s ease;
    font-size: 14px;
    position: relative;
    transform: none !important;
}
.selection-toolbar button:hover {
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
}
.selection-toolbar button:active {
    background: color-mix(in srgb, var(--c-text) 20%, transparent);
    transform: none !important;
}
.selection-toolbar button.tb-active {
    background: color-mix(in srgb, var(--c-text, #1f2937) 14%, transparent);
}
.selection-toolbar button i {
    font-size: 14px;
    line-height: 1;
}

/* ============ 移动端 UI 优化 ============ */

/* ---- 阅读器手势 onboarding 浮条（首次进入显示 3 秒自动消失）----
   多端兼容：桌面/移动/PWA standalone 均生效；
   位置避开顶栏（桌面 57px / 移动 44px / PWA +40px 状态栏条带） */
.reader-tap-onboard {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 11000;
    padding: 10px 18px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c-text, #1f2937) 88%, #000);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
    max-width: min(340px, 90vw);
    white-space: pre-line;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.reader-tap-onboard.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* 移动端字号略小，避开 44px 顶栏 */
@media (max-width: 767px) {
    .reader-tap-onboard {
        font-size: 13px;
        padding: 9px 14px;
        top: calc(env(safe-area-inset-top, 0) + 56px);
    }
}
/* PWA standalone：顶部 40px 时间信号栏条带 + 顶栏 */
html.pwa_standalone .reader-tap-onboard {
    top: calc(40px + 64px);
}
@media (max-width: 767px) {
    html.pwa_standalone .reader-tap-onboard {
        top: calc(40px + 56px);
    }
}

/* 浮条四主题共用背景 —— body 主题 + onboarding/play-hint 同时匹配 */
body.theme-white .reader-tap-onboard,
body.theme-white .play-gesture-hint {
    background: color-mix(in srgb, var(--reader-bg, #f9fafb) 92%, var(--reader-text, #1f2937));
    color: var(--reader-text, #1f2937);
}
body.theme-green .reader-tap-onboard,
body.theme-green .play-gesture-hint {
    background: color-mix(in srgb, var(--reader-bg, #c7edcc) 90%, var(--reader-text, #2d3436));
    color: var(--reader-text, #2d3436);
}
body.theme-yellow .reader-tap-onboard,
body.theme-yellow .play-gesture-hint {
    background: color-mix(in srgb, var(--reader-bg, #f5e6c8) 90%, var(--reader-text, #3d2f1f));
    color: var(--reader-text, #3d2f1f);
}
body.theme-night .reader-tap-onboard,
body.theme-night .play-gesture-hint {
    background: color-mix(in srgb, var(--reader-bg, #1a1a2e) 92%, var(--reader-text, #e0e0e0));
    color: var(--reader-text, #e0e0e0);
}

/* 播放按钮手势提示浮条 —— 复用 onboarding 全部视觉，按钮上方锚定 */
.play-gesture-hint {
    position: fixed;
    z-index: 11000;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.16);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s ease, transform 0.32s ease;
    max-width: min(360px, 92vw);
    white-space: pre-line;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    /* 默认顶部位置（后备） */
    top: 64px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
}
.play-gesture-hint.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* 按钮上方锚定模式：JS 内联 top/left，初始整体向上隐藏 → visible 滑入 */
.play-gesture-hint.floating {
    transform: translateY(-100%);   /* 仅向上悬浮，水平位置由 JS 精确控制 */
}
.play-gesture-hint.floating.visible {
    transform: translateY(0);        /* 归位显示 */
}
@media (max-width: 767px) {
    .play-gesture-hint { font-size: 13px; padding: 9px 14px; }
}

/* iPhone 刘海屏安全区 */
.safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-area-top    { padding-top:    env(safe-area-inset-top,    0); }

/* PWA/添加到主屏后状态栏安全区：避免顶部(时间栏)与底部(Home条)重叠；
   普通浏览器与 chrome 下 env() 均为 0，不产生任何位移，仅独立窗口兜底生效。
   顶部导航 fixed 贴顶(top:0)，由 #topNav 的 padding-top:env(safe-area-inset-top)
   在全屏 PWA 下让位状态栏；#mainContent 的 padding-top 负责内容与顶栏的间距 */
body {
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.reader-top-bar {
    padding-top: env(safe-area-inset-top, 0);
}

/* 底部导航触摸目标优化 */
#bottomNav .nav-link { min-height: 48px; padding: 4px 0; }
#bottomNav i         { font-size: 18px; }
#bottomNav span      { font-size: 14px; margin-top: 1px; }

/* 底部安全区兜底（无 viewport-fit=cover 时通常为 0，不产生位移；兼容 iOS 11 constant） */
#bottomNav,
.reader-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-bottom: constant(safe-area-inset-bottom, 0); /* 兼容 iOS 11 */
}

/* 阅读器底部留白 — 手机上别那么多 */
@media (max-width: 640px) {
    .reader-content {
        padding: 3px 5px !important;
    }
    .reader-bottom-bar {
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 6px) !important;
    }
    /* 选区工具栏 — 窄屏自动换行 + 纵向排列（图标在上、标签在下） */
    .selection-toolbar {
        gap: 2px;
        padding: 3px;
        flex-wrap: wrap;
        max-width: calc(100vw - 16px);
    }
    .selection-toolbar button {
        min-width: 48px;
        height: auto;
        padding: 4px 3px;
        flex-direction: column;
    }
    .selection-toolbar button i { font-size: 14px; }
    .selection-toolbar .tb-label {
        display: inline;
        font-size: 10px;
        margin-top: 1px;
        opacity: 0.85;
        white-space: nowrap;
    }
    /* Modal 弹窗 — 手机全宽 */
    #modalContent {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 32px) !important;
    }
    .reader-top-bar { padding: 6px 0; gap: 6px; }
    #ce-dialog { max-width: calc(100vw - 16px) !important; }
}

/* 超小屏 iPhone SE / 320px */
@media (max-width: 380px) {
    .selection-toolbar button { min-width: 42px; padding: 3px 2px; }
    .selection-toolbar .tb-label { font-size: 9px; }
    #bottomNav i { font-size: 16px; }
}

/* bottomNav 防误触双击缩放（全局底导航，非阅读器）；阅读器内元素保持浏览器原生手势 */
#bottomNav {
    touch-action: manipulation;
}
.selection-toolbar button .tb-label {
    font-size: 10px;
    line-height: 1;
    opacity: 0.8;
    white-space: nowrap; /* 中文按钮文案（人工制卡/AI 设置/AI 批量）不换行 */
}

/* ============ 双击句子复合弹窗：上工具栏 + 下句子 ============ */
.selection-toolbar.has-sentence {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-width: calc(100vw - 16px);
}
.selection-toolbar.has-sentence .tb-btn-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
    justify-content: center;
}
.selection-toolbar .tb-sentence-preview {
    margin-top: 5px;
    padding: 8px 4px 2px;
    border-top: 1px solid color-mix(in srgb, var(--c-text) 12%, transparent);
    font-size: 14px;
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
    text-align: justify;
    max-height: calc(100vh - 200px); /* 兜底值：JS 定位时按工具栏 top 动态覆盖，最大化下方显示区 */
    overflow-y: auto;
    /* 选区完全由 JS 自绘（.tb-sel），禁用原生选择与系统长按菜单 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none; /* JS 接管全部触摸交互：任意方向滑动选中文本，长预览靠边缘自动滚动 */
    cursor: text;
    -webkit-tap-highlight-color: transparent;
}
/* 用户选中片段：保持淡色，不抢眼 */
.selection-toolbar .tb-sentence-preview .tb-sel {
    background: color-mix(in srgb, var(--c-text) 22%, transparent);
    border-radius: 2px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 22%, transparent);
}
/* AI 重点字词预览：主题 kp 色文字 + 加粗（仅加粗，无下划线无背景） */
.selection-toolbar .tb-sentence-preview .tb-kp {
    color: var(--kp-color, color-mix(in srgb, var(--reader-accent, #6366f1) 70%, var(--reader-text)));
    font-weight: 700;
}
.selection-toolbar .tb-sentence-preview br {
    line-height: 1;
}

.sel-toolbar-item {
    background: color-mix(in srgb, var(--c-bg) 88%, white);
    color: var(--c-text);
}
.sel-toolbar-item:hover {
    background: color-mix(in srgb, var(--c-bg) 92%, white);
}

/* ============================================
   夜间主题表面修正
   浅色公式（背景+白）会让夜间表面变浅灰，
   夜间模式的表面应为"深色基底 + 少量提亮"
   ============================================ */

/* 卡片主表面 */
body.app-theme-night .bg-white,
body.app-theme-night .bg-white\/90 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
}

/* 次表面 */
body.app-theme-night .bg-gray-50 {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    color: var(--c-text);
}
body.app-theme-night .bg-gray-100 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    color: var(--c-text);
}
body.app-theme-night .bg-gray-200 {
    background-color: color-mix(in srgb, var(--c-bg) 84%, white) !important;
    color: var(--c-text);
}

/* 半透明白（渐变头部按钮/头像底） */
body.app-theme-night .bg-white\/20 { background-color: rgba(255, 255, 255, 0.12) !important; }
body.app-theme-night .bg-white\/30 { background-color: rgba(255, 255, 255, 0.18) !important; }

/* 边框：夜间向白色混合保证可见 */
body.app-theme-night .border-gray-100 { border-color: color-mix(in srgb, var(--c-bg) 86%, white) !important; }
body.app-theme-night .border-gray-200 { border-color: color-mix(in srgb, var(--c-bg) 78%, white) !important; }
body.app-theme-night .border-gray-300 { border-color: color-mix(in srgb, var(--c-bg) 68%, white) !important; }

/* 分隔线 */
body.app-theme-night .divide-gray-100 > * + * { border-color: color-mix(in srgb, var(--c-bg) 86%, white) !important; }
body.app-theme-night .divide-gray-200 > * + * { border-color: color-mix(in srgb, var(--c-bg) 78%, white) !important; }

/* 悬停：轻微提亮 */
body.app-theme-night .hover\:bg-gray-50:hover { background-color: color-mix(in srgb, var(--c-bg) 90%, white) !important; }
body.app-theme-night .hover\:bg-gray-100:hover { background-color: color-mix(in srgb, var(--c-bg) 86%, white) !important; }
body.app-theme-night .hover\:bg-gray-50\/50:hover { background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important; }
body.app-theme-night .hover\:bg-white\/30:hover { background-color: rgba(255, 255, 255, 0.24) !important; }

/* 导航栏（阅读器模式除外，阅读器有自己的背景体系） */
body.app-theme-night:not(.reader-mode-bg) #topNav {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--c-bg) 78%, white) !important;
}
body.app-theme-night:not(.reader-mode-bg) #bottomNav {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
    border-top: 1px solid color-mix(in srgb, var(--c-bg) 78%, white) !important;
}

/* 文档卡片 */
body.app-theme-night .doc-card {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-color: color-mix(in srgb, var(--c-bg) 76%, white) !important;
}
body.app-theme-night .doc-card:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white) !important;
}

/* 复习翻面卡片 */
body.app-theme-night .review-card,
body.app-theme-night .flip-card .flip-card-front,
body.app-theme-night .flip-card .flip-card-back {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-color: color-mix(in srgb, var(--c-bg) 76%, white) !important;
}

/* 输入框/下拉框 */
body.app-theme-night input[type="text"],
body.app-theme-night input[type="email"],
body.app-theme-night input[type="password"],
body.app-theme-night input[type="number"],
body.app-theme-night input[type="search"],
body.app-theme-night textarea,
body.app-theme-night select:not(.ce-tb-select) {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white);
    border-color: color-mix(in srgb, var(--c-bg) 76%, white);
}
body.app-theme-night select:not(.ce-tb-select) option {
    background-color: #262638;
    color: var(--c-text);
}
/* ce-tb-select（卡片编辑工具栏上的模板选择框）全部统一走 CSS 变量体系，不再单独硬编码颜色 */
body.app-theme-night select.ce-tb-select,
body.app-theme-green select.ce-tb-select,
body.app-theme-yellow select.ce-tb-select,
body.app-theme-white select.ce-tb-select {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white);
    color: var(--c-text);
    border-color: color-mix(in srgb, var(--c-text) 22%, transparent);
}
body.app-theme-night select.ce-tb-select option,
body.app-theme-night select.ce-tb-select optgroup,
body.app-theme-green select.ce-tb-select option,
body.app-theme-green select.ce-tb-select optgroup,
body.app-theme-yellow select.ce-tb-select option,
body.app-theme-yellow select.ce-tb-select optgroup,
body.app-theme-white select.ce-tb-select option,
body.app-theme-white select.ce-tb-select optgroup {
    background-color: color-mix(in srgb, var(--c-bg) 96%, white);
    color: var(--c-text);
}

/* 设置面板 */
body.app-theme-night .settings-panel-header:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white);
}

/* 记忆间隔占位 */
body.app-theme-night .memory-placeholder {
    background: color-mix(in srgb, var(--c-bg) 90%, white);
    border-color: color-mix(in srgb, var(--c-bg) 74%, white);
}
body.app-theme-night .memory-placeholder:hover {
    background: color-mix(in srgb, var(--c-bg) 88%, white);
}
body.app-theme-night .memory-placeholder .bg-white,
body.app-theme-night .memory-placeholder .bg-gray-100 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-color: color-mix(in srgb, var(--c-bg) 76%, white) !important;
}

/* 字体步进器 */
body.app-theme-night .fs-btn {
    background: color-mix(in srgb, var(--c-bg) 88%, white);
    border-color: color-mix(in srgb, var(--c-bg) 76%, white);
}

/* 进度条轨道 */
body.app-theme-night .progress-bar {
    background: color-mix(in srgb, var(--c-bg) 72%, white);
}

/* 复习排序按钮 */
body.app-theme-night .sort-btn {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white);
    border-color: color-mix(in srgb, var(--c-bg) 76%, white);
}
body.app-theme-night .sort-btn:hover {
    background-color: color-mix(in srgb, var(--c-bg) 92%, white);
}

/* 复习会话顶栏 */
body.app-theme-night #reviewSession .bg-white\/90 {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--c-bg) 76%, white);
}

/* 弹窗 */
body.app-theme-night #modalContainer #modalContent {
    background-color: color-mix(in srgb, var(--c-bg) 88%, white) !important;
    border-color: color-mix(in srgb, var(--c-bg) 76%, white) !important;
}

/* 滚动条 */
body.app-theme-night ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--c-bg) 60%, white); }
body.app-theme-night ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--c-bg) 45%, white); }

/* 选区工具栏 */
body.app-theme-night .selection-toolbar,
body.app-theme-night .sel-toolbar-item {
    background: color-mix(in srgb, var(--c-bg) 88%, white);
}
body.app-theme-night .sel-toolbar-item:hover {
    background: color-mix(in srgb, var(--c-bg) 92%, white);
}

/* ---------- 夜间：彩色浅表面（语义徽章/图标块/提示块）转深色半透明彩底 ----------
   文字色已全局映射到变量（--c-danger/--c-success/--c-warning/--c-primary），
   此处仅处理 bg-{color}-50/100/200 浅底、彩色边框与对应 hover，
   不动彩色实心按钮（bg-*-500/600 配白字，夜间同样清晰）。 */
body.app-theme-night .bg-red-50,
body.app-theme-night .bg-red-100 { background-color: rgba(248, 113, 113, 0.14) !important; }
body.app-theme-night .bg-red-200 { background-color: rgba(248, 113, 113, 0.28) !important; }
body.app-theme-night .bg-amber-50,
body.app-theme-night .bg-amber-100 { background-color: rgba(251, 191, 36, 0.14) !important; }
body.app-theme-night .bg-amber-200 { background-color: rgba(251, 191, 36, 0.28) !important; }
body.app-theme-night .bg-blue-50,
body.app-theme-night .bg-blue-100 { background-color: rgba(96, 165, 250, 0.14) !important; }
body.app-theme-night .bg-blue-200 { background-color: rgba(96, 165, 250, 0.28) !important; }
body.app-theme-night .bg-green-50,
body.app-theme-night .bg-green-100 { background-color: rgba(74, 222, 128, 0.14) !important; }
body.app-theme-night .bg-green-200 { background-color: rgba(74, 222, 128, 0.28) !important; }
body.app-theme-night .bg-purple-50,
body.app-theme-night .bg-purple-100 { background-color: rgba(192, 132, 252, 0.14) !important; }
body.app-theme-night .bg-purple-200 { background-color: rgba(192, 132, 252, 0.28) !important; }
/* Tailwind 透明度变体（bg-*-50/60 等） */
body.app-theme-night .bg-red-50\/60 { background-color: rgba(248, 113, 113, 0.10) !important; }
body.app-theme-night .bg-green-50\/60 { background-color: rgba(74, 222, 128, 0.10) !important; }
/* hover 浅彩底 */
body.app-theme-night .hover\:bg-red-50:hover { background-color: rgba(248, 113, 113, 0.20) !important; }
body.app-theme-night .hover\:bg-amber-50:hover { background-color: rgba(251, 191, 36, 0.20) !important; }
body.app-theme-night .hover\:bg-green-50:hover { background-color: rgba(74, 222, 128, 0.20) !important; }
/* 彩色边框（公开/提示块） */
body.app-theme-night .border-amber-200 { border-color: rgba(251, 191, 36, 0.35) !important; }
body.app-theme-night .border-green-200 { border-color: rgba(74, 222, 128, 0.35) !important; }

/* ---------- 夜间：卡片内容中「插入表格」模板的中性色适配 ----------
   表格模板内联了浅色表头/边框（#f5f6f8/#f0f1f3/#fafbfc/#c8ccd2/#e5e7eb/#111），
   保存进卡片后夜间会出现亮块；ce-inserted-table 类在插入时固定写入，据此覆盖。 */
body.app-theme-night .ce-table-basic td,
body.app-theme-night .ce-table-striped td,
body.app-theme-night .ce-table-compact td { border-color: rgba(255, 255, 255, 0.18) !important; }
body.app-theme-night .ce-table-minimal td { border-color: rgba(255, 255, 255, 0.22) !important; }
body.app-theme-night .ce-table-colored tr:not(:first-child) td { border-color: rgba(255, 255, 255, 0.18) !important; }
body.app-theme-night .ce-table-grid,
body.app-theme-night .ce-table-grid td { border-color: rgba(255, 255, 255, 0.5) !important; }
/* 浅灰表头/条纹底：属性选择器精确命中模板固定写入的内联底色 */
body.app-theme-night .ce-inserted-table td[style*="background:#f5f6f8"],
body.app-theme-night .ce-inserted-table td[style*="background:#f0f1f3"] { background-color: #2a2a44 !important; }
body.app-theme-night .ce-inserted-table td[style*="background:#fafbfc"] { background-color: rgba(255, 255, 255, 0.05) !important; }

/* ---------- card-editor 弹窗内部元素自适应 ---------- */
/* 解除 #ce-dialog 的 min-width:720px 硬约束，让它随 modalContent 宽度收缩 */
#modalContent #ce-dialog {
    min-width: 0 !important;
    width: 100%;
}
#modalContent .ce-editor,
#modalContent .ce-editor * {
    max-width: 100%;
    box-sizing: border-box;
}
#modalContent .ce-editor textarea,
#modalContent .ce-editor [contenteditable="true"],
#modalContent .ce-editor input[type="text"],
#modalContent .ce-editor input:not([type]),
#modalContent .ce-editor select {
    width: 100%;
    max-width: 100%;
}
#modalContent .ce-editor table {
    width: 100% !important;
    table-layout: fixed;
}
#modalContent .ce-editor img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   复制他人笔记副本的共享按钮锁定样式
   未改动/改动不足的副本共享按钮显示「未共享」，禁用视觉（悬停/点击均有提示）
   ============================================ */
.copy-share-lock {
    cursor: not-allowed !important;
    opacity: 0.75;
}

/* ============================================
   英文句子朗读喇叭（复习页 + 阅读器弹窗）
   ============================================ */
.en-sentence {
    white-space: pre-wrap;
}
.en-speaker,
.en-field-speaker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: none;
    background: transparent;
    color: var(--c-primary, #6366f1);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.8em;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
}
.en-speaker:hover,
.en-field-speaker:hover {
    color: var(--c-primary-hover, #4f46e5);
}
.en-speaker {
    margin-left: 3px;
}
.en-field-speaker {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 4px 6px;
    z-index: 5;
}
/* 复习页答案区首个字段的整体喇叭：抵消 .anki-answer-fields 的 12px/16px 内边距，贴灰色卡片右上角（与正面字段一致）*/
.anki-answer-fields .en-field-speaker.en-field-speaker-corner {
    top: -12px;
    right: -16px;
}
/* 复习页喇叭斜体（限定复习会话；图标字体需 skewX 才有可见倾斜，
   同时用 font-style:normal 抵消 .cdp-block i 的 italic，保证各字段喇叭与正面一致）*/
.anki-session .en-speaker i,
.anki-session .en-field-speaker i {
    font-style: normal;
    transform: skewX(-12deg);
    transform-origin: center;
}
/* 喇叭联网合成等待：图标旋转（复习页旋转时临时取消斜体倾斜） */
.en-speaker.tts-loading i,
.en-field-speaker.tts-loading i {
    animation: ttsSpeakerSpin 0.9s linear infinite;
    opacity: 0.75;
}
.anki-session .en-speaker.tts-loading i,
.anki-session .en-field-speaker.tts-loading i {
    transform: none;
}
@keyframes ttsSpeakerSpin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .en-speaker.tts-loading i,
    .en-field-speaker.tts-loading i { animation-duration: 1.8s; }
}

/* ===== 复习页 音/译 漂浮按钮 ===== */
.py-trans-btns {
    position: absolute;
    top: -32px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 5;
}
.py-trans-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--reader-text, #333) 30%, transparent);
    background: color-mix(in srgb, var(--reader-bg, #fff) 90%, var(--reader-text, #333));
    color: var(--reader-text, #333);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    line-height: 1;
    padding: 0;
}
.py-trans-btn:hover { opacity: 1; }
.py-trans-btn.active {
    opacity: 1;
    background: var(--reader-accent, #6366f1);
    color: #fff;
    border-color: var(--reader-accent, #6366f1);
}
.cdp-block.py-trans-host {
    position: relative;
    padding-top: 4px;
}

/* 拼音：ruby 逐字标注（原生 ruby，换行时拼音始终对齐汉字） */
.cdp-block.py-pinyin-on ruby {
    vertical-align: baseline;
    ruby-align: center;
}
.cdp-block.py-pinyin-on rt {
    font-size: 0.6em;
    line-height: 1.1;
    color: color-mix(in srgb, var(--reader-text, #333) 80%, transparent);
    margin-bottom: 1px;
    font-family: inherit;
    padding: 0 1px;
}
.cdp-block.py-pinyin-on rp { display: none; }

/* 译文：每行下方显示译文 */
.cdp-block.py-trans-on .py-line { display: block; }
.cdp-block.py-trans-on .py-trans-text {
    display: block;
    font-size: 0.82em;
    line-height: var(--reader-line-height, 1.8);
    color: color-mix(in srgb, var(--reader-text, #333) 60%, transparent);
    margin-top: calc((var(--reader-line-height, 1.8) - 1.0) * 1em);
    margin-bottom: calc(5px + (var(--reader-line-height, 1.8) - 1.0) * 1em);
}

/* 复习页顶部喇叭开关 + 字段目录菜单 */
.speaker-toggle-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
#speakerToggleBtn.active {
    color: var(--c-primary, #6366f1);
}
.speaker-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 200px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--c-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
}
.speaker-menu-head {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    opacity: 0.6;
}
.speaker-menu-empty {
    font-size: 12px;
    padding: 10px;
    opacity: 0.6;
}
/* 朗读字段：AI 字段组 Tab 条 */
.speaker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.speaker-tab {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--c-border, #d1d5db);
    background: transparent;
    color: var(--c-text, #1f2937);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.speaker-tab:hover {
    border-color: var(--c-primary, #6366f1);
    color: var(--c-primary, #6366f1);
}
.speaker-tab.active {
    background: var(--c-primary, #6366f1);
    color: #fff;
    border-color: var(--c-primary, #6366f1);
    font-weight: 600;
}
.speaker-menu-field {
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.speaker-menu-field:hover {
    background: rgba(99, 102, 241, 0.08);
}
.speaker-menu-field.selected {
    background: rgba(99, 102, 241, 0.1);
}
.speaker-menu-fname {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text, #1f2937);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.speaker-menu-modes {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}
.speaker-menu-modes button {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 9999px;
    cursor: pointer;
    border: 1px solid var(--c-primary, #6366f1);
    color: var(--c-primary, #6366f1);
    background: transparent;
    transition: background 0.12s, color 0.12s;
}
.speaker-menu-modes button:hover {
    background: var(--c-primary, #6366f1);
    color: #fff;
}
.speaker-menu-modes button.selected {
    background: var(--c-primary, #6366f1);
    color: #fff;
    font-weight: 600;
}
.speaker-menu-footer {
    padding: 8px 10px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: flex-end;
}
.speaker-menu-confirm {
    font-size: 13px;
    padding: 6px 22px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: var(--c-primary, #6366f1);
    color: #fff;
    transition: opacity 0.12s;
}
.speaker-menu-confirm:hover {
    opacity: 0.88;
}

/* ===== 复习设置弹窗（#reviewSettingsModal）===== */
#reviewSettingsModal {
    position: fixed;
    inset: 0;
    z-index: 200; /* 置于复习会话（z-100）之上，保证弹窗最前 */
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#reviewSettingsModal[hidden] { display: none; }
#reviewSettingsModal:not([hidden]) { display: flex; }
body.theme-white #reviewSettingsModal { background-color: rgba(20, 20, 20, 0.35); }
body.theme-green  #reviewSettingsModal { background-color: rgba(30, 50, 35, 0.45); }
body.theme-yellow #reviewSettingsModal { background-color: rgba(55, 42, 22, 0.45); }
body.theme-night  #reviewSettingsModal { background-color: rgba(0, 0, 0, 0.6); }

#reviewSettingsModal .review-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg, #ffffff) 96%, white);
    color: var(--reader-text, #1f2937);
    border: 1px solid color-mix(in srgb, var(--reader-text, #1f2937) 12%, transparent);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--reader-text, #1f2937) 18%, transparent);
    max-height: 90vh;
    overflow-y: auto;
}
body.theme-night #reviewSettingsModal .review-settings-panel {
    background-color: color-mix(in srgb, var(--reader-bg, #111827) 90%, white);
}
#reviewSettingsModal .review-settings-title,
#reviewSettingsModal h3,
#reviewSettingsModal label {
    color: var(--reader-text, #1f2937);
}
#reviewSettingsModal .review-settings-close {
    color: var(--reader-text, #1f2937);
    opacity: 0.7;
    padding: 4px 6px;
    cursor: pointer;
}
#reviewSettingsModal .review-settings-close:hover { opacity: 1; }
#reviewSettingsModal .review-speaker-fields {
    max-height: 26vh;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--reader-text, #1f2937) 10%, transparent);
    border-radius: 10px;
    padding: 4px;
}
/* 取消按钮（镜像确认按钮外观，主题自适应） */
#reviewSettingsModal .speaker-menu-cancel {
    font-size: 13px;
    padding: 6px 22px;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #1f2937) 25%, transparent);
    color: var(--reader-text, #1f2937);
    background: transparent;
    cursor: pointer;
    transition: opacity 0.12s;
}
#reviewSettingsModal .speaker-menu-cancel:hover { opacity: 0.8; }

/* ===== 手机端：资源/上传/我的/复习 页面锁定整页滚动，内容在 #mainContent 内滚动 ===== */
@media (max-width: 767px) {
    html.lock-body-scroll,
    body.lock-body-scroll {
        height: 100dvh;
        height: 100vh; /* 兜底：不支持 dvh 的浏览器 */
        overflow: hidden; /* 禁止整页上下滚动 */
    }
    body.lock-body-scroll #mainContent {
        min-height: 0; /* 覆盖全局 min-height:100dvh，使高度精确等于视口可用区 */
        /* 顶部预留 = 状态栏安全区 + 48px 顶栏；底部预留 = 48px 底栏 + 底部安全区 */
        height: calc(100dvh - env(safe-area-inset-top, 0) - 48px - 48px - env(safe-area-inset-bottom, 0));
        height: calc(100vh - env(safe-area-inset-top, 0) - 48px - 48px - env(safe-area-inset-bottom, 0)); /* 兜底 */
        margin-top: calc(env(safe-area-inset-top, 0) + 48px); /* 顶部导航 fixed 脱离文档流，用 margin 留出位置 */
        padding-top: 0 !important;  /* 位置由 margin/height 控制，覆盖 #mainContent 的 padding-top */
        padding-bottom: 0 !important; /* 覆盖 HTML 的 pb-12 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
        overscroll-behavior: contain;      /* 边界回弹只作用于本容器，不再带动整页 */
    }
}

/* ===== 手机端复习全屏会话：隐藏全局顶部导航（复习自带 .anki-toolbar；桌面端保留全局顶栏） ===== */
@media (max-width: 767px) {
    body.review-active #topNav {
        display: none !important;
    }
}

/* ===== 电脑端：资源/上传/我的/复习 页面锁定整页滚动，内容在 #mainContent 内滚动 ===== */
@media (min-width: 768px) {
    html.lock-body-scroll,
    body.lock-body-scroll {
        height: 100dvh;
        height: 100vh; /* 兜底：不支持 dvh 的浏览器 */
        overflow: hidden; /* 禁止整页上下滚动 */
    }
    /* 顶部导航 fixed 脱离文档流，#mainContent 用固定高度 + margin-top 定位 */
    body.lock-body-scroll #mainContent {
        min-height: 0; /* 覆盖全局 #mainContent 的 min-height:100dvh，允许收缩 */
        height: calc(100dvh - env(safe-area-inset-top, 0) - 48px - 48px - env(safe-area-inset-bottom, 0));
        height: calc(100vh - env(safe-area-inset-top, 0) - 48px - 48px - env(safe-area-inset-bottom, 0)); /* 兜底 */
        margin-top: calc(env(safe-area-inset-top, 0) + 48px);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow-y: scroll; /* 内容多时页内滚动；scroll 永久保留滚动条槽位，
                               与 body 原有 overflow-y-scroll 一致，避免页面间横向抖动 */
        overscroll-behavior: contain; /* 到边界不连锁带动整页/浏览器手势（含触控板回弹） */
    }
}

/* ==================== AI 批量制卡：弹窗内逐张生成状态条 ==================== */
.ce-batch-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 15%, transparent);
    background: color-mix(in srgb, var(--reader-bg, #fff) 94%, var(--reader-text, #111));
    font-size: 14px;
    color: var(--reader-text, #111);
    overflow-wrap: anywhere;
}
.ce-batch-status.hidden { display: none !important; }
/* 放在 header 标题后方时的紧凑样式 */
.ce-header .ce-batch-status {
    padding: 4px 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    flex: 0 1 auto;
}
.ce-header .ce-batch-status .ce-batch-status-retry {
    margin-left: 6px;
}
.ce-batch-status .ce-batch-status-text { flex: 1; min-width: 0; }
.ce-batch-status .ce-batch-status-retry {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 25%, transparent);
    background: transparent;
    color: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
/* 生成中：隐藏字段区，只显示状态条 */
.ce-fields.hidden { display: none !important; }

/* 单卡 AI 生成状态条：显示「制卡中…」（放在「添加卡片」头部内，与批量状态条 .ce-batch-status 风格一致） */
.ce-gen-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--reader-text, #111);
    flex: 0 1 auto;
}
.ce-gen-status.hidden { display: none !important; }
.ce-gen-status .ce-gen-status-text { flex: 1; min-width: 0; }

/* 手机端：批量模式新增按钮加大到可点区域 */
@media (max-width: 640px) {
    .ce-batch-auto,
    .ce-batch-skip {
        padding: 10px 14px;
        font-size: 15px;
        min-height: 44px;
    }
}

/* ==================== 三端统一设置面板（utils.settingsPanel：阅读/复习/我的） ==================== */
.usp-hidden { display: none !important; }

/* 弹窗外壳：内边距统一（原模板内 p-6 已移除），宽度与滚动由场景规则负责 */
.usp-shell {
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}
.usp {
    color: var(--reader-text, #1f2937);
    font-size: 14px;
    line-height: 1.5;
}

/* 标题栏（我的页 showHead=false 时不存在） */
.usp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.usp-title {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}
.usp-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .12s, background .12s;
}
.usp-close:hover { opacity: 1; background: color-mix(in srgb, var(--reader-text, #111) 8%, transparent); }
/* 阅读面板有一条高优先级的 button 通用刷色规则，关闭按钮需打平 */
#settingsPanel .usp-shell button.usp-close,
#reviewSettingsModal .usp-shell button.usp-close {
    background: transparent;
    border: none;
    color: var(--reader-text, #1f2937);
    box-shadow: none;
}

/* 手风琴分组 */
.usp-group,
.usp-subgroup {
    margin-top: 8px;
}
.usp-group {
    border: 1px solid color-mix(in srgb, var(--reader-text, #111) 12%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--reader-bg, #fff) 96%, var(--reader-text, #111) 4%);
    overflow: hidden;
}
.usp-group:first-of-type { margin-top: 2px; }
.usp-sum {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    user-select: none;
}
.usp-sum::-webkit-details-marker { display: none; }
.usp-chev {
    flex: 0 0 auto;
    font-size: 11px;
    font-style: normal;
    opacity: 0.55;
    transition: transform .18s ease;
}
.usp-group[open] > .usp-sum .usp-chev,
.usp-subgroup[open] > .usp-sum-sub .usp-chev { transform: rotate(180deg); }
.usp-group-body { padding: 2px 14px 12px; }

/* 「API 密钥与共享额度」一级组：红色标题（夜间提亮保证对比） */
.usp-sum-api { color: #dc2626; }
.usp-sum-api .usp-chev { color: #dc2626; opacity: .85; }
body.theme-night .usp-sum-api,
body.app-theme-night .usp-sum-api { color: #f87171; }
body.theme-night .usp-sum-api .usp-chev,
body.app-theme-night .usp-sum-api .usp-chev { color: #f87171; }

/* 语音服务：组内二级折叠 */
.usp-subgroup {
    border-top: 1px dashed color-mix(in srgb, var(--reader-text, #111) 16%, transparent);
    padding-top: 6px;
}
.usp-sum-sub {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 2px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.85;
    color: inherit;
    user-select: none;
}
.usp-sum-sub::-webkit-details-marker { display: none; }
.usp-subgroup-body { padding: 2px 0 6px; }
/* voicefull 自带一个「🔊 语音大模型 API 设置」label，与二级折叠标题重复，隐藏 */
.usp-voicefull > label:first-child { display: none; }
.usp-voicefull { color: var(--reader-text, #1f2937); }
.usp-voicefull summary,
.usp-voicefull p { color: var(--reader-text, #1f2937); }
.usp-voicefull .tts-apply-link { color: var(--reader-accent, #6366f1); }

/* 行布局：标签 + 控件 + 值 */
.usp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.usp-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: inherit;
    white-space: nowrap;
}
.usp-flex { flex: 1 1 auto; min-width: 0; }
.usp-val {
    flex: 0 0 auto;
    min-width: 46px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--reader-accent, #6366f1);
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent);
}
.mt-usp { margin-top: 10px; }

/* TTS 状态行 */
.usp-status {
    font-size: 12px;
    line-height: 1.5;
    opacity: 0.68;
    margin: 8px 2px 2px;
    word-break: break-word;
}
.usp-status-primary {
    opacity: 1;
    color: var(--reader-accent, #6366f1);
}
/* 免费档说明小字（朗读组：免费音色 + 1.0 语速的额度口径提示） */
.usp-free-note {
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.62;
    margin: 6px 2px 2px;
    word-break: break-word;
}
/* 朗读组标题「仅本文档」小标签 + 文档级生效提示 */
.usp-sum-tag {
    font-size: 10px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 6px;
    opacity: 0.75;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 14%, transparent);
    color: var(--reader-accent, #6366f1);
}
/* 「仅设置当前文档」标签仅在朗读组展开时显示，收起时隐藏 */
.usp-group:not([open]) > .usp-sum .usp-sum-tag { display: none; }
.usp-speech-note {
    font-size: 11px;
    line-height: 1.5;
    opacity: 0.62;
    margin: 0 2px 8px;
    word-break: break-word;
}
.usp-speech-note.is-locked {
    opacity: 0.85;
    color: #b45309;
}

/* 危险操作按钮（删除缓存等） */
.usp-danger-btn {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
    background: color-mix(in srgb, #dc2626 7%, transparent);
    color: #dc2626;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}
.usp-danger-btn:hover { background: color-mix(in srgb, #dc2626 14%, transparent); }
.usp-page-row { margin-top: 8px; }

/* voicefull 文本输入框在弹窗（阅读/复习）内跟随主题 */
.usp-shell input[type="text"],
.usp-shell input[type="password"],
.usp-shell input[type="number"] {
    color: var(--reader-text, #1f2937);
    border-color: color-mix(in srgb, var(--reader-text, #111) 22%, transparent);
    background-color: color-mix(in srgb, var(--reader-bg, #fff) 70%, var(--reader-accent, #6366f1) 6%);
    border-radius: 8px;
}
.usp-shell input::placeholder { color: color-mix(in srgb, var(--reader-text, #111) 45%, transparent); }

/* 复习弹窗：按钮（voicefull 测试/保存等）跟随主题——与阅读弹窗一致；
   .speaker-menu-modes 胶囊在下方还原，避免被通用规则覆盖 */
#reviewSettingsModal .usp-shell button:not(.usp-close) {
    color: var(--reader-text, #1f2937);
    border-color: color-mix(in srgb, var(--reader-text, #111) 22%, transparent);
}
#reviewSettingsModal .usp-shell .speaker-menu-modes button {
    border: 1px solid var(--c-primary, #6366f1);
    color: var(--c-primary, #6366f1);
    background: transparent;
}
#reviewSettingsModal .usp-shell .speaker-menu-modes button:hover {
    background: var(--c-primary, #6366f1);
    color: #fff;
}
#reviewSettingsModal .usp-shell .speaker-menu-modes button.selected {
    background: var(--c-primary, #6366f1);
    color: #fff;
    font-weight: 600;
}

/* 我的页：内嵌设置区域跟随四主题（白/护眼绿/米黄/夜间），夜间不再出现白底深字 */
.pf-usp-mount { padding: 6px 8px 10px; }
.usp-profile {
    --reader-bg: var(--c-bg, #ffffff);
    --reader-text: var(--c-text, #1f2937);
    --reader-accent: var(--c-primary, #6366f1);
    color: var(--c-text, #1f2937);
}
.usp-profile .usp-group {
    border-color: color-mix(in srgb, var(--c-text, #1f2937) 12%, transparent);
    background: color-mix(in srgb, var(--c-bg, #ffffff) 96%, var(--c-text, #1f2937) 4%);
}
.usp-profile label,
.usp-profile .usp-label,
.usp-profile .usp-voicefull,
.usp-profile .usp-voicefull summary,
.usp-profile .usp-voicefull p { color: var(--c-text, #1f2937); }
/* voicefull 内 tailwind 灰字在夜间/护眼主题下统一跟随主文字色 */
.usp-profile .text-gray-400,
.usp-profile .text-gray-500,
.usp-profile .text-gray-600,
.usp-profile .text-gray-700,
.usp-profile .text-gray-800 { color: var(--c-text, #1f2937) !important; opacity: .82; }
.usp-profile input:not([type="checkbox"]):not([type="range"]),
.usp-profile select,
.usp-profile textarea {
    background: color-mix(in srgb, var(--c-bg, #fff) 92%, var(--c-text, #111) 8%);
    color: var(--c-text, #1f2937);
    border-color: color-mix(in srgb, var(--c-text, #1f2937) 18%, transparent);
}

/* 弹窗：手机端底部抽屉（仅设置面板；额度/鉴权弹窗保持居中） */
@media (max-width: 767px) {
    .usp-overlay-sheet {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .usp-overlay-sheet .usp-shell {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 88vh;
    }
}
@media (min-width: 768px) {
    .usp-overlay-sheet .usp-shell { border-radius: 16px; }
}

/* ==================== AI 布局精简：选区工具栏分隔条 / 重点提示 / 智能制卡按钮 ==================== */
/* 长按按钮接管为手势入口：禁止系统长按菜单与文字选中 */
.selection-toolbar button {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}
/* 按钮组之间的竖向分隔（随按钮行一起换行） */
.tb-sep {
    display: inline-block;
    width: 1px;
    align-self: center;
    height: 18px;
    margin: 0 1px;
    background: color-mix(in srgb, var(--c-text, #1f2937) 18%, transparent);
    flex: 0 0 auto;
}
/* 重点编辑模式提示条 */
.tb-kp-tip {
    margin: 5px 2px 0;
    padding: 5px 8px;
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
    border-radius: 6px;
    color: color-mix(in srgb, var(--reader-accent, #6366f1) 82%, var(--c-text, #1f2937));
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 10%, transparent);
}
.tb-kp-tip.hidden { display: none !important; }
/* 智能 AI 制卡按钮：无重点时淡 accent 文案；有重点（显示「批量 N」）时实色醒目 */
.selection-toolbar .tb-ai-btn {
    color: color-mix(in srgb, var(--reader-accent, #6366f1) 82%, var(--c-text, #1f2937));
}
.selection-toolbar .tb-ai-btn.tb-has-kp,
.selection-toolbar .tb-ai-btn.tb-has-kp:hover {
    color: #fff;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 70%, #000);
    position: relative;
    isolation: isolate;
}
/* 图标与文字置于背景层之上，确保背景永远在图标、文字后面 */
.selection-toolbar .tb-ai-btn.tb-has-kp > i,
.selection-toolbar .tb-ai-btn.tb-has-kp > .tb-label {
    position: relative;
    z-index: 1;
}
.selection-toolbar .tb-ai-btn.tb-has-kp:active {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 60%, #000);
}
/* 重点态按钮文字不再半透明，保证白字对比度 */
.selection-toolbar .tb-ai-btn.tb-has-kp .tb-label { opacity: 1; }
body.theme-night .selection-toolbar .tb-ai-btn {
    color: color-mix(in srgb, var(--reader-accent, #818cf8) 90%, #fff);
}
/* 夜间主题重点态：强制白字，压过上方 .tb-ai-btn 的浅紫蓝覆盖，保证与深靛底高对比 */
body.theme-night .selection-toolbar .tb-ai-btn.tb-has-kp,
body.theme-night .selection-toolbar .tb-ai-btn.tb-has-kp:hover,
body.app-theme-night .selection-toolbar .tb-ai-btn.tb-has-kp,
body.app-theme-night .selection-toolbar .tb-ai-btn.tb-has-kp:hover {
    color: #fff;
}
@media (max-width: 380px) {
    .tb-sep { margin: 0 1px; height: 18px; }
    .tb-kp-tip { font-size: 10.5px; }
}

/* ==================== 工具条：5+更多面板 / 就地选色带 / 桌面小三角（WP2/WP3/WP4） ==================== */
/* 「更多」第二行：与一级按钮行同构，默认隐藏 */
.selection-toolbar .tb-more-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    margin-top: 2px;
    padding: 4px 2px 2px;
    border-top: 1px solid color-mix(in srgb, var(--c-text, #1f2937) 10%, transparent);
}
.selection-toolbar .tb-more-panel[hidden] { display: none !important; }

/* 就地选色带：一排圆形色点 + 尾部收起按钮 */
.selection-toolbar .tb-color-band {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 4px 0;
    padding: 7px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--c-text, #1f2937) 6%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}
.selection-toolbar .tb-color-band::-webkit-scrollbar { display: none; }
.selection-toolbar .tb-color-band[hidden] { display: none !important; }
.selection-toolbar .tb-color-dot {
    flex: 0 0 auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--c-bg, #ffffff) 65%, #9ca3af);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    background: transparent;
}
.selection-toolbar .tb-color-dot span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.selection-toolbar .tb-color-dot:active { background: transparent; transform: scale(0.9); }
.selection-toolbar .tb-color-close {
    flex: 0 0 auto;
    margin-left: auto;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    font-size: 13px;
}

/* 桌面端（精细指针）：工具条朝向选区的小三角，水平位置由 JS 写入 --tb-arrow-x */
@media (pointer: fine) {
    .selection-toolbar:not(.tb-docked)::before {
        content: '';
        position: absolute;
        left: var(--tb-arrow-x, 50%);
        top: -6px;
        width: 12px;
        height: 12px;
        background: var(--c-bg, #ffffff);
        border-left: 1px solid color-mix(in srgb, var(--c-text, #1f2937) 10%, transparent);
        border-top: 1px solid color-mix(in srgb, var(--c-text, #1f2937) 10%, transparent);
        border-radius: 2px;
        transform: translateX(-50%) rotate(45deg);
        pointer-events: none;
    }
    /* 工具条翻到选区下方：三角翻转向下 */
    .selection-toolbar:not(.tb-docked).tb-below::before {
        top: auto;
        bottom: -6px;
        transform: translateX(-50%) rotate(225deg);
    }
}

/* ==================== 选区工具条：选页粒度固定为底部底纸（全页面显示） ==================== */
/* 底纸定位在所有屏幕尺寸生效（选句/选段/区域走浮动气泡） */
.selection-toolbar.tb-docked,
.selection-toolbar.tb-docked.has-sentence {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 8px);
}
/* 底纸形态按钮行：自动换行居中，全部工具可见，不横向折叠 */
.selection-toolbar.tb-docked .tb-btn-row {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
}
.selection-toolbar.tb-docked .tb-btn-row button {
    flex: 0 0 auto;
    min-width: 46px;
}
/* 预览区撑满底纸剩余高度（按钮行之外全部空间），超出滚动 */
.selection-toolbar.tb-docked .tb-sentence-preview {
    flex: 1 1 auto;
    min-height: 0;       /* 允许 flex 子项收缩，触发内部 overflow-y 滚动 */
    max-height: none;    /* 覆盖基础规则 calc(100vh - 200px) */
}
@media (max-width: 767px) {
    /* 移动端底纸按钮更小，适配窄屏 */
    .selection-toolbar.tb-docked .tb-btn-row button {
        min-width: 42px;
    }
}

/* ==================== Reader snackbar（WP5：成功反馈 + 撤销操作） ==================== */
.reader-snackbar {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 60px);
    left: 50%;
    transform: translate(-50%, -10px);
    z-index: 10500;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 9px 10px 9px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-text, #111827) 92%, #000);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.3;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.reader-snackbar.rs-show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}
.reader-snackbar.rs-leave {
    opacity: 0;
    transform: translate(-50%, -10px);
    pointer-events: none;
}
.reader-snackbar .rs-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reader-snackbar .rs-action {
    flex: 0 0 auto;
    border: none;
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 88%, #000);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    touch-action: manipulation;
}
.reader-snackbar .rs-action:active {
    background: color-mix(in srgb, var(--reader-accent, #6366f1) 70%, #000);
}
@media (max-width: 767px) {
    .reader-snackbar {
        top: calc(env(safe-area-inset-top, 0px) + 52px);
        font-size: 13px;
        padding: 8px 8px 8px 14px;
        gap: 10px;
    }
    .reader-snackbar .rs-action { padding: 6px 12px; }
}

/* ==================== AI 设置弹窗：分区 Tab（左右排列，点击切换） ==================== */
.ce-ai-tabs {
    display: flex;
    gap: 6px;
}
.ce-ai-tab {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-text, #1f2937);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 8px;
    background: var(--c-bg, #fff);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ce-ai-tab.is-active {
    background: var(--c-bg, #fff);   /* 不透明，遮住下方 panel 顶边框 */
    border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-bottom: none;             /* Tab 与内容之间不画边框 */
    border-radius: 8px 8px 0 0;      /* 台阶凸角圆角 */
    margin-bottom: -1px;             /* 下移 1px，盖住 panel 顶边框 */
    z-index: 2;
}
/* 面板与激活 Tab 相接的那一侧顶角改为直角：
   让 Tab 的侧边框与 Panel 的侧边框连成一条不断开的竖线（否则圆角处会露出 bg 色断线） */
.ce-modal-body:has(.ce-ai-tab.is-active:first-child) .ce-ai-panel.is-active {
    border-top-left-radius: 0;
}
.ce-modal-body:has(.ce-ai-tab.is-active:last-child) .ce-ai-panel.is-active {
    border-top-right-radius: 0;
}
/* 台阶凹角圆弧：AI划重点（第一子）选中 → 弧在右下 */
.ce-ai-tab.is-active:first-child::after {
    content: "";
    position: absolute;
    left: 100%;   /* padding box 右边缘 = Tab 右边框笔画位置，竖笔画完全重合 */
    bottom: 0;    /* border-box 底边 = padding box 底边，底笔画与 Panel 顶边框完全重合 */
    width: 6px; height: 8px;
    border-bottom-left-radius: 6px;
    border-left: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-bottom: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    background: var(--reader-bg, #fff);  /* 与 tabs 间隙底色一致 */
    pointer-events: none;
    z-index: 1;
}
/* 台阶凹角圆弧：AI制卡（末子）选中 → 弧在左下 */
.ce-ai-tab.is-active:last-child::after {
    content: "";
    position: absolute;
    right: 100%;  /* padding box 左边缘 = Tab 左边框笔画位置，竖笔画完全重合 */
    bottom: 0;    /* border-box 底边 = padding box 底边，底笔画与 Panel 顶边框完全重合 */
    width: 6px; height: 8px;
    border-bottom-right-radius: 6px;
    border-right: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-bottom: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    background: var(--reader-bg, #fff);
    pointer-events: none;
    z-index: 1;
}
.ce-ai-tab-head {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.ce-ai-collapse-title { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ce-ai-collapse-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--c-text-muted, #6b7280);
    line-height: 1.3;
}
/* 字段组按钮：仅 AI制卡设置 Tab 激活时显示，绝对定位右上角与标题同行 */
.ce-ai-tab .ce-modal-history-btn { display: none; }
.ce-ai-tab.is-active .ce-modal-history-btn {
    display: inline-flex;
    position: absolute;
    top: 6px;
    right: 8px;
    margin-left: 0;
}
.ce-ai-panel { display: none; padding: 8px 10px 6px; }
.ce-ai-panel.is-active {
    display: block;
    border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 40%, var(--c-border, #e5e7eb));
    border-radius: 8px;              /* 被遮挡角的缺口由上方的覆盖块盖住 */
    background: var(--c-bg, #fff);
    position: relative;
    z-index: 1;
}
/* 字段行内「单 / 批」模式标记 */
.ce-field-mode-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ce-field-mode-tag.is-on {
    color: var(--c-primary, #2563eb);
    background: color-mix(in srgb, var(--c-primary, #2563eb) 13%, transparent);
    border-color: color-mix(in srgb, var(--c-primary, #2563eb) 35%, transparent);
}
.ce-field-mode-tag.is-off {
    color: var(--c-text-muted, #9ca3af);
    border-color: var(--c-border, #d1d5db);
    background: transparent;
}

/* ==================== 选重点规则迷你弹窗（长按/右键「重点」） ==================== */
.ce-confirm-box.ce-kp-rule-modal {
    width: min(440px, 92vw);
    min-width: 0;
}
.ce-kp-rule-modal .ce-modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--c-border, #e5e7eb);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-text, #1f2937);
}
.ce-kp-rule-modal .ce-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ce-kp-rule-modal .ce-modal-close {
    width: 28px; height: 28px;
    border: none; background: transparent;
    cursor: pointer;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text-muted, #6b7280);
}
.ce-kp-rule-modal .ce-modal-close:hover {
    background: color-mix(in srgb, var(--c-text) 10%, transparent);
}
.ce-kp-rule-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 76px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.6;
    color: var(--reader-text, #111827);
    background: color-mix(in srgb, var(--reader-bg, #fff) 92%, var(--reader-text, #111) 4%);
    border: 1px solid var(--reader-border, #d0d4da);
    border-radius: 8px;
    outline: none;
    resize: vertical;
}
.ce-kp-rule-input:focus { border-color: var(--reader-accent, #0077c8); }
.ce-kp-rule-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--reader-text, #111) 60%, transparent);
}

/* ===== 登录页（#/profile 未登录）：竖向居中 + 间距随可视高度自适应，任意屏幕一屏内显示 ===== */
.login-page {
    --login-h: calc(100vh - 96px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;                 /* #mainContent 高度确定，100% 即撑满可用区实现垂直居中 */
    padding-top: clamp(4px, calc(var(--login-h) * 0.013), 32px);
    padding-bottom: clamp(4px, calc(var(--login-h) * 0.013), 32px);
    box-sizing: border-box;
}
.login-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2px, calc(var(--login-h) * 0.008), 10px);
    margin-bottom: clamp(4px, calc(var(--login-h) * 0.028), 32px);
}
.login-logo  { font-size: clamp(22px, calc(var(--login-h) * 0.075), 60px); line-height: 1; }
.login-title { font-size: clamp(15px, calc(var(--login-h) * 0.04), 24px); line-height: 1.3; }
.login-card  { padding: clamp(8px, calc(var(--login-h) * 0.022), 24px); }
.login-tabs  { margin-bottom: clamp(4px, calc(var(--login-h) * 0.015), 16px); padding: clamp(1px, calc(var(--login-h) * 0.005), 4px); }
.login-fields > * + * { margin-top: clamp(4px, calc(var(--login-h) * 0.014), 16px); }
.login-label { font-size: clamp(11px, calc(var(--login-h) * 0.02), 14px); margin-bottom: clamp(1px, calc(var(--login-h) * 0.008), 8px); }
.login-input { padding-top: clamp(3px, calc(var(--login-h) * 0.010), 8px); padding-bottom: clamp(3px, calc(var(--login-h) * 0.010), 8px); }
.login-submit { padding-top: clamp(4px, calc(var(--login-h) * 0.014), 12px); padding-bottom: clamp(4px, calc(var(--login-h) * 0.014), 12px); }
.login-links { margin-top: clamp(4px, calc(var(--login-h) * 0.02), 24px); }
.login-qr-box { width: clamp(96px, calc(var(--login-h) * 0.38), 208px); height: clamp(96px, calc(var(--login-h) * 0.38), 208px); flex-shrink: 0; }
.login-qr-status { margin-top: clamp(2px, calc(var(--login-h) * 0.013), 12px); }
.login-qr-count { margin-top: clamp(1px, calc(var(--login-h) * 0.006), 4px); }
.login-qr-refresh { margin-top: clamp(2px, calc(var(--login-h) * 0.01), 8px); }
.login-hint { font-size: clamp(10px, calc(var(--login-h) * 0.018), 11px); margin-top: clamp(2px, calc(var(--login-h) * 0.013), 12px); }