/* ==================== 设计系统变量 ==================== */
:root {
    /*
     * 颜色系统：品牌渐变（偏蓝的青蓝色，首页标题等同源）
     * --color-brand-mint → --color-brand-teal（较前一版略向蓝色偏移，减轻「过青」）
     */
    --color-brand-mint: #5ec8ec;
    --color-brand-teal: #2d9ecf;
    --color-brand-mint-rgb: 94, 200, 236;
    --color-brand-teal-rgb: 45, 158, 207;
    /* 与 --color-brand-teal 同通道，供 rgba(var(--color-primary-rgb), a) 使用 */
    --color-primary-rgb: 45, 158, 207;
    --color-primary: var(--color-brand-teal);
    --color-primary-hover: #2686b0;
    /* hover 描边淡化主色（一体框按钮、颜色编辑器吸管等）；勿留未定义 var 以免整条声明失效 */
    --color-primary-muted: rgba(var(--color-primary-rgb), 0.42);
    /* PDF 翻译任务列表：翻译中（紫）/ 完成（与品牌青同系，略加重区分成功态） */
    --color-pdftranslate-processing: #7c3aed;
    --color-pdftranslate-done: #0d9488;
    --color-focus-ring: rgba(var(--color-primary-rgb), 0.18);
    /* 正文「墨」#2F3742：全站禁止用 #000 / 极黑作字色；次级/辅助略提亮以分阶 */
    --color-text: #2f3742;
    --color-text-rgb: 47, 55, 66;
    --color-text-secondary: #5c6673;
    --color-text-tertiary: #6d7782;
    --color-text-placeholder: #94a3b8;
    /* 历史别名（部分页仍引用，映射到正式字色令牌） */
    --color-text-muted: var(--color-text-tertiary);
    --color-text-primary: var(--color-text);
    --color-surface-muted: var(--color-bg-muted);
    /* 预留：下划线控件占位已与 `--color-text-placeholder` 对齐；可再用于其它极轻提示 */
    --color-text-hint: #b9c5d4;
    /* 与 placeholder 同色阶；页脚弱文复用，避免重复定义 */
    --color-text-footer: var(--color-text-placeholder);
    --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    /* 输入框、一体框下拉、次级按钮等表单控件共用描边（与 --color-border 同源，便于一处调整） */
    --color-control-border: var(--color-border);
    /*
     * 强调描边：介于默认边框与正文色之间。
     * 首页工具卡片用 --color-text 形成「格架」；首页搜索框等需略强于表单、又轻于卡片时，用此色保持全局一致。
     */
    --color-border-strong: #9ca3af;
    --color-bg: #fff;
    --color-bg-hover: #f3f4f6;
    --color-bg-active: rgba(var(--color-brand-mint-rgb), 0.14);
    --color-surface-raised: #f8fafc;
    --color-error: #dc2626;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-warning-rgb: 217, 119, 6;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-toast-bg: rgba(0, 0, 0, 0.82);
    /* 结果区复制按钮与数量：主题色 + 浅灰底 */
    --color-result-copy: var(--color-primary);
    --color-result-copy-hover: var(--color-primary-hover);
    --color-result-copy-bg: #f3f4f6;
    --color-result-copy-bg-rgb: 243, 244, 246;
    --color-result-copy-bg-hover: rgba(var(--color-brand-mint-rgb), 0.12);
    /* 与浅灰结果底一致：信息条、提示块背景 */
    --color-bg-muted: var(--color-result-copy-bg);
    --color-disabled-bg: var(--color-bg-hover);
    --color-disabled-border: var(--color-border-light);
    --color-disabled-text: var(--color-text-placeholder);
    /* 关键字检索：与品牌青同系（mint / primary），命中词底 + 整句底 + 当前态；勿用孤立黄系 hex */
    --keywordsearch-mark-bg: rgba(var(--color-brand-mint-rgb), 0.28);
    --keywordsearch-mark-current-bg: rgba(var(--color-primary-rgb), 0.22);
    --keywordsearch-mark-underline: rgba(var(--color-primary-rgb), 0.5);
    --keywordsearch-sentence-hit-bg: rgba(var(--color-brand-mint-rgb), 0.12);
    --keywordsearch-sentence-current-bg: rgba(var(--color-primary-rgb), 0.14);
    /* 文本对比：差异行底与变更字色（warning 系，与关键字检索分轨） */
    --textcompare-diff-bg: rgba(var(--color-warning-rgb), 0.22);
    --textcompare-diff-bg-linked: rgba(var(--color-warning-rgb), 0.36);
    --textcompare-diff-ring: rgba(var(--color-warning-rgb), 0.45);
    --textcompare-diff-text: var(--color-warning);
    --textcompare-diff-text-linked: color-mix(in srgb, var(--color-warning) 72%, var(--color-text));
    /* 差异行底、锥形连线、行缝分割：同色填充，视觉闭合 */
    --textcompare-bridge-fill: var(--textcompare-diff-bg);
    --textcompare-bridge-fill-linked: var(--textcompare-diff-bg-linked);
    --textcompare-connector-stroke: rgba(var(--color-warning-rgb), 0.78);
    --textcompare-connector-stroke-linked: rgba(var(--color-warning-rgb), 0.92);
    /* 文本对比 · 结果区（左右比对视图）固定高度 */
    --textcompare-result-view-height: 600px;
    /* 结果行/差异块水平内边距；分线与之对齐（见 #textcompare-page .c-textcompare-gap::after） */
    --textcompare-result-inset-x: 6px;
    /* 结果区：复制胶囊与排序按钮统一高度 */
    --result-action-btn-height: 28px;
    --result-action-btn-height-sm: 26px;
    /* 全站主按钮（.btn / .chip）统一最小高度与圆角 */
    --btn-min-height: 40px;
    /* 工具页 `.btn` 左右内边距（组件库契约：固定 24px，勿用更小值覆盖主钮） */
    --btn-padding-inline: 24px;
    /* 文本类 / JSON / 提取关键帧等工具页主操作 `.btn` 最小宽度（与下方 :is(...) 规则配套；其它媒体工具 `.c-tool-actions--media .btn` 仍用 min-width:0） */
    --btn-text-action-min-width: 80px;
    --color-tooltip: #1f2937;
    /*
     * 半透明白 / 中性描边 / 遮罩：顶栏、浮层、上传、首页阴影等复用，减少散落 rgba 与 #fff。
     * 与 --color-bg（#fff）同值的反白字用 --color-text-inverse，避免与「正文墨」混淆。
     */
    --color-on-dark-muted: rgba(255, 255, 255, 0.82);
    --color-on-dark-subtle: rgba(255, 255, 255, 0.9);
    --color-surface-glass-strong: rgba(255, 255, 255, 0.95);
    --color-surface-glass-mid: rgba(255, 255, 255, 0.92);
    --color-surface-glass-soft: rgba(255, 255, 255, 0.72);
    --color-surface-search-hover: rgba(255, 255, 255, 0.99);
    --color-surface-inset-highlight: rgba(255, 255, 255, 0.78);
    --color-surface-inset-highlight-strong: rgba(255, 255, 255, 0.88);
    --color-surface-inset-warm: rgba(255, 255, 255, 0.65);
    --color-surface-inset-line: rgba(255, 255, 255, 0.55);
    --color-stroke-on-dark: rgba(255, 255, 255, 0.35);
    --color-stroke-on-dark-strong: rgba(255, 255, 255, 0.45);
    --color-fill-on-dark-weak: rgba(255, 255, 255, 0.12);
    --color-fill-on-dark-frost: rgba(255, 255, 255, 0.22);
    --color-stroke-on-dark-hairline: rgba(255, 255, 255, 0.06);
    --color-stroke-neutral-soft: rgba(0, 0, 0, 0.08);
    --color-stroke-neutral: rgba(0, 0, 0, 0.1);
    --color-shadow-ambient: rgba(0, 0, 0, 0.18);
    --color-shadow-soft: rgba(0, 0, 0, 0.05);
    --color-scrim-backdrop: rgba(0, 0, 0, 0.42);
    --color-border-on-surface-weak: rgba(226, 232, 240, 0.9);
    --color-text-placeholder-rgb: 148, 163, 184;
    --color-text-keyword-current: var(--color-primary);
    --color-text-inverse: var(--color-bg);
    --color-border-muted-hover: #d1dbe8;
    --color-border-search: #9eb0c9;
    --color-border-search-hover: #8a9db8;
    --color-scrim-selection: rgba(17, 24, 39, 0.28);
    --color-neutral-page-fill-rgb: 232, 232, 233;
    --topbar-flyout-bg-rgb: 48, 58, 72;
    --color-primary-tint-10: rgba(var(--color-primary-rgb), 0.1);
    --color-focus-ring-outer: rgba(191, 219, 254, 0.45);
    --color-media-black: #000000;
    --color-error-ring: rgba(220, 38, 38, 0.42);
    --color-error-border-soft: rgba(220, 38, 38, 0.35);
    --color-slate-650-a07: rgba(51, 65, 85, 0.07);
    --color-slate-650-a14: rgba(51, 65, 85, 0.14);
    --color-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1);
    --color-shadow-floater: 0 2px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    /* JSON / CodeMirror 语法高亮（`script-features.js` 读取 `--color-syntax-*`） */
    --color-syntax-property: var(--color-pdftranslate-processing);
    --color-syntax-string: #059669;
    --color-syntax-number: #0284c7;
    --color-syntax-literal: var(--color-warning);
    --color-syntax-punctuation: var(--color-text-tertiary);
    --color-syntax-bracket: var(--color-tooltip);
    /* 色板下拉默认展示色、Canvas 铺底、编辑舞台灰 */
    --color-swatch-default: #334155;
    --color-canvas-fill: var(--color-bg);
    --color-editor-stage-fill: #f0f2f5;
    --color-watermark-sample: #e63946;
    /* 首页 hero / logo / 搜索扫光（仅首页，略亮于全站 brand） */
    --color-home-title-word: #0e4a66;
    --color-home-title-hub: #258daa;
    --color-home-logo-mint: #64ecd4;
    --color-home-logo-teal: #2eb8d2;
    --color-home-logo-deep: #32bad3;
    --color-home-search-shine-pale: #c8ebf7;
    --color-home-search-shine-mid: #a9dff4;
    --color-home-results-shell-bg: rgba(255, 255, 255, 0.82);
    --color-home-results-shell-border: rgba(255, 255, 255, 0.68);
    --color-home-results-shell-border-outer: rgba(255, 255, 255, 0.42);
    --color-home-hero-glass-start: rgba(255, 255, 255, 0.58);
    --color-home-hero-glass-mid: rgba(255, 255, 255, 0.22);
    --color-home-hero-glass-end: rgba(255, 255, 255, 0.1);
    --color-home-hero-inset-highlight: rgba(255, 255, 255, 0.72);
    --color-home-hero-text-shadow: rgba(255, 255, 255, 0.62);
    --color-stroke-scrim-weak: rgba(17, 24, 39, 0.18);
    --color-stroke-scrim-mid: rgba(17, 24, 39, 0.35);
    --color-stroke-scrim-strong: rgba(17, 24, 39, 0.45);
    --color-stroke-scrim-soft: rgba(17, 24, 39, 0.15);
    --color-stroke-scrim-hairline: rgba(17, 24, 39, 0.12);
    --color-stroke-scrim-faint: rgba(17, 24, 39, 0.04);
    --color-surface-glass-upload: rgba(255, 255, 255, 0.88);
    /* PNG 透明棋盘格、占位骨架渐变 */
    --color-checker-tile: #d1d9e3;
    --color-placeholder-gradient-start: #cbd5e1;
    --color-placeholder-gradient-mid: var(--color-text-placeholder);
    --color-placeholder-gradient-end: #64748b;
    /* 桌面萌宠（`desk-pet.css` 仅引用） */
    --color-desk-pet-surface: var(--color-bg);
    --color-desk-pet-surface-mid: #e8f2f9;
    --color-desk-pet-surface-deep: #b8d0e4;
    --color-desk-pet-accent: var(--color-primary);
    --color-desk-pet-accent-deep: var(--color-primary-hover);
    --color-desk-pet-accent-soft: #9fd4ef;
    --color-desk-pet-ink: #141c28;
    --color-desk-pet-line-rgb: 20, 28, 40;
    --color-desk-pet-bag-rgb: 20, 28, 40;
    --color-desk-pet-shadow-rgb: 20, 40, 64;
    --color-desk-pet-pie-crust: #e8a83a;
    --color-desk-pet-pie-cheese: #ffe9a8;
    --color-desk-pet-pie-highlight: #fff8dc;
    --color-desk-pet-pie-pepper: #e85d4a;
    --color-desk-pet-sky-tint: #eef8ff;
    --color-desk-pet-body-tint: #f0f9ff;
    --color-desk-pet-body-tint-deep: #e3f3fc;
    --color-desk-pet-muted-surface-start: #f4f7fa;
    --color-desk-pet-muted-surface-mid: #e4eaf0;
    --color-desk-pet-muted-surface-end: #d2dae4;
    --color-desk-pet-horn-light: #8ed4ef;
    --color-desk-pet-face-tint: #e8f7ff;
    --color-desk-pet-face-tint-deep: #d4efff;
    --color-desk-pet-badge-start: #45b8e8;
    --color-desk-pet-badge-end: #94a3b8;
    /* 统一下拉箭头（固定色：避免 background-image 下 currentColor 不生效） */
    --icon-chevron-down: url("Icon/chevron-down.svg");
    --icon-chevron-down-disabled: url("Icon/chevron-down-disabled.svg");
    /*
     * 原生 <select> 等：Chevron 用 `Icon/chevron-down.svg` 作 background（`appearance: none`）。
     * 三令牌控制「字—箭头—右缘」光学留白；`--select-padding-inline-end` 须保持为三者之和，勿单独改 padding 破坏对齐。
     * SVG 在方格内偏中，略缩小绘制尺寸并略收 gap/inset，避免箭头在框内「漂」。
     */
    --select-chevron-bg-size: 20px;
    --select-chevron-inset-end: 8px;
    --select-chevron-content-gap: 0.1875rem;
    --select-padding-inline-end: calc(
        var(--select-chevron-inset-end) + var(--select-chevron-bg-size) + var(--select-chevron-content-gap)
    );
    /* 两端对齐一体框：标签 ↔ 值区 24px（`--imgcompress-combo-label-value-gap`）；值区内文案 ↔ Chevron 8px */
    --imgcompress-select-value-chevron-gap: 8px;
    /* 浅色自定义下拉触发钮、预设色 `__face`（`components.css`） */
    --c-dropdown-value-chevron-gap: var(--imgcompress-select-value-chevron-gap);
    /* 单色图标着色为品牌主色（近似 #2d9ecf，略偏蓝） */
    --icon-theme-filter: invert(54%) sepia(48%) saturate(720%) hue-rotate(168deg) brightness(96%) contrast(92%);
    --icon-disabled-filter: grayscale(1) brightness(0.78) contrast(0.9);
/* 下滑箭头：Icon/chevron-down.svg 原色 100% 显示 */
    --icon-home-scroll-cue-filter: none;
    --icon-home-scroll-cue-filter-hover: none;
    
    /* 间距系统 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    /* 工具页：上传框 ↔ 底栏按钮（图片 / 文档 / 视频等）；固定 24px */
    --c-tool-uploader-toolbar-gap: 24px;
    /* 有上传框：操作栏 → 下方任务/文件列表（与文本工具「按钮 → 结果」一致） */
    --c-tool-toolbar-list-gap: 32px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 30px;
    --spacing-huge: 40px;
    /* 配置区 / 输入区 与 主操作按钮行 之间的统一间距 */
    --main-action-gap: var(--spacing-lg);
    /* 工具页 / 静态页：主标题区（.title-section）与下方主内容（.input-section 等）之间纵向间距 */
    --title-content-gap: 32px;
    /* 上传拖放区：全站统一最小高度（原图片压缩区 12.5rem；视频/裁剪此前 168px，已对齐至此） */
    --upload-dropzone-min-height: 12.5rem;
    --upload-dropzone-min-height-sm: 9.5rem;
    --upload-dropzone-min-height-compact: 10rem;
    /* 上传图片后预览区底色（证件照 / Base64 / 裁剪舞台 / 弹层预览 / 长图拼接等共用） */
    --upload-image-bg: var(--color-bg-muted);
    /* 工具页上传图预览：外槽宽随上传区；内区上限宽 720、高 560（与 script-features.js 一致） */
    --tool-image-preview-max-w: 720px;
    --tool-image-preview-max-h: 560px;
    /* 外槽实线框 → 图片/舞台：全站统一内边距 12px */
    --tool-image-preview-pad: 12px;
    --tool-image-preview-inner-w: calc(var(--tool-image-preview-max-w) - 2 * var(--tool-image-preview-pad));
    --tool-image-preview-inner-h: calc(var(--tool-image-preview-max-h) - 2 * var(--tool-image-preview-pad));
    --spacing-6: 6px;
    --spacing-10: 10px;
    --spacing-15: 15px;
    /* 12 列栅格系统（全局统一组件） */
    --grid-columns: 12;
    --grid-max-width: 100%;
    --grid-gutter: 24px;
    --grid-column-gap: 24px;
    /* 组件库：卡片/宫格上下左右统一间隙（与栅格 gutter 一致，常用 24px） */
    --spacing-card-grid: var(--grid-column-gap);
    --grid-side-padding: 24px;
    /*
     * 全站中间内容最大宽度：默认 912px；≥1920px 为 1200px；≥2560px 为 1440px。
     * 窄屏时用 calc(100vw - 2*侧栏 padding) 防止溢出（与 min() 共同生效）。
     */
    --home-content-max: min(912px, calc(100vw - 2 * var(--grid-side-padding)));
    /* 主内容列 / 顶栏中间列与版心同宽 */
    --layout-max-width: var(--home-content-max);
    /* 栅格可视化（仅用于对齐校验，可调透明度/颜色） */
    --grid-overlay-color: rgba(244, 114, 182, 0.14);
    --grid-overlay-gap: rgba(255, 255, 255, 0);
    --grid-overlay-stroke: rgba(244, 114, 182, 0.18);
    --grid-overlay-opacity: 1;
    
    --layout-modal-max-width: 600px;
    --nav-height: 40px;
    /*
     * 顶栏：深灰系条带 + 浅字分层；底边略加深与主内容白底区分。
     * 下拉菜单仍用白底（--color-bg），与顶栏对比清晰。
     */
    --topbar-bg: #252b36;
    --topbar-border: #343c4a;
    /* 未选中项略提亮，深底上对比充足（便于可读 / 无障碍审查） */
    --topbar-link: var(--color-on-dark-muted);
    --topbar-link-hover: #f1f5f9;
    --topbar-link-active: var(--color-text-inverse);
    --topbar-link-indicator: #6ecae8;
    /* 顶栏选中：品牌浅色端点，与全站主色同族 */
    --topbar-link-selected-accent: var(--color-brand-mint);
    /* 顶栏下拉悬浮层深色铺色 alpha（0～1，越小越透） */
    --top-nav-flyout-fill-alpha: 0.4;
    /* 顶栏标签之间的间距 */
    --nav-links-gap: 48px;
    /* Logo 与中间菜单列之间的间距（过大会在左栏较窄时撑破顶栏） */
    --logo-nav-gap: 24px;

    /*
     * 字体：全站仅用 CSS 泛族（不写 PingFang / 微软雅黑 / Roboto 等具名字体、不 @font-face、不引入 UI 用网络字体）。
     * 正文由浏览器映射到各端默认界面无衬线体；代码区用默认等宽泛族。唯一例外：PDF 译中文稿生成时按需嵌入 SIL OFL 思源黑体（见 script-features · initPdfTranslate）。
     */
    --font-family-sans: ui-sans-serif, system-ui, sans-serif;
    --font-family-mono: ui-monospace, monospace;

    /* 字体大小与行高（组件库规范；正文 16px/1.5，标题 h1–h3 为 1.25，卡片内 13px/1.45） */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    /* 全站正文基准：与 body 一致，可改为 14px 作密排 */
    --font-size-body: 16px;
    --font-size-base: var(--font-size-body);
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 32px;
    --font-size-h1-mobile: 24px;
    /* 卡片、工具栏副文等 */
    --font-size-card: 13px;
    --line-height-body: 1.5;
    /* 工具页多行输入 / 只读输出（排版与框线一致；JSON CodeMirror 等代码区除外） */
    --tool-text-io-font-family: inherit;
    --tool-text-io-font-size: var(--font-size-base);
    --tool-text-io-font-weight: var(--font-weight-body);
    --tool-text-io-line-height: var(--line-height-body);
    --tool-text-io-color: var(--color-text);
    --tool-text-io-bg: var(--color-bg);
    --tool-text-io-output-bg: rgba(var(--color-result-copy-bg-rgb), 0.38);
    --tool-text-io-border: 1px solid var(--color-control-border);
    --tool-text-io-radius: var(--radius-md);
    --tool-text-io-padding-block: var(--spacing-md);
    --tool-text-io-padding-inline: var(--spacing-md);
    --line-height-heading: 1.25;
    --line-height-card: 1.45;
    /* 与卡片正文同倍率，供副标题/叠字等复用 */
    --line-height-snug: var(--line-height-card);
    /*
     * 字重层级（全站请用变量，勿写裸数字）：
     * --font-weight-body(400)：页面默认正文、大段 textarea 继承 body，优先保障跨端可读性。
     * --font-weight-medium(500)：标签、表单控件、按钮/chip、导航、说明行、结果区标签等。
     * --font-weight-heading(600)：页内主标题、首页大标题与卡片标题、统计强调。
     * --font-weight-strong(700)：法务侧栏标题、关键字导航当前命中、极少数高强调短语。
     * 全站避免裸数字 font-weight；`b`/`strong` 默认用 medium，法务列表等场景可用更具体选择器覆盖为 body。
     * 字色见 --color-text / secondary / tertiary / placeholder。
     */
    --font-weight-body: 400;
    --font-weight-medium: 500;
    --font-weight-heading: 600;
    --font-weight-strong: 700;
    
    /* 图标常用尺寸 */
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 20px;
    /* 线稿图标 `.c-line-icon--*` 默认槽位（按钮前导、工具栏等） */
    --line-icon-size: 20px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    
    /* 过渡 */
    --transition-base: all 0.2s ease;
    --focus-ring-size: 2px;
    /* 原生 range：轨道 / 拖块（设置页、组件库 `.c-range-input` 共用） */
    --range-control-height: 28px;
    --range-track-height: 6px;
    --range-thumb-size: 18px;
    --range-track-bg: var(--color-border-light);
    --range-track-radius: 999px;
    --range-thumb-bg: var(--color-bg);
    --range-thumb-border: 1px solid var(--color-border-strong);
    --range-thumb-shadow: 0 1px 3px var(--color-shadow-soft);
    /* 一体框参数行 `.c-outline-field`（视频压缩码率/帧率/像素、PDF 质量、关键字检索、裁剪长宽等共用） */
    --c-outline-field-border: var(--color-control-border);
    --c-outline-field-bg: var(--color-bg);
    --c-outline-field-bg-muted: var(--color-bg-hover);
    --c-outline-field-pad-inline-start: 0.75rem;
    --c-outline-field-pad-inline-end: 0.35rem;
    --c-outline-field-gap: 0.35rem;
    /* 一体框左侧属性标签（「格式」「间距」等）：弱于正文、轻于占位，B 端表单辅助文案 */
    --c-outline-field-label-color: var(--color-text-placeholder);
    --c-outline-field-label-font-weight: var(--font-weight-body);
    /*
     * 工具栏一体框「标签 ↔ 值区」：证件照「尺寸 / 底色」等需 24px 时叠
     * `.imgcompress-format--combo-toolbar-label-value`：标签↔值区仅 `gap` 24px、框宽随内容；定宽列例外见 `#splitModal`。
     */
    --imgcompress-combo-label-value-gap: 24px;
    --imgcompress-combo-label-min-width: 2.75rem;
    /* 一体框「标签 + 下拉 / 仅下拉」：随当前选项文案收缩的上限（工具栏、证件照、表单内下拉共用） */
    --imgcompress-combo-toolbar-max-width: 17.5rem;
    /* 图片加水印：水印文字一体框固定宽 */
    --imgwatermark-text-combo-width: 280px;
    /* 一体框定宽文本（加水印文字等），默认等同 --imgwatermark-text-combo-width */
    --c-outline-field-combo-text-width: var(--imgwatermark-text-combo-width);

    /*
     * 层叠等级（全局只用变量，避免 9999/100001 等散装值）
     * 基准 < 页内 sticky < 顶栏 < 顶栏下拉 < 悬浮气泡 < 媒体预览遮罩 < 主模态 < 全屏工具层 < 日期浮层 < 提示气泡 < Toast
     */
    --z-base: 0;
    --z-raised: 1;
    --z-decor-overlay: 2;
    --z-debug-grid: 6;
    --z-page-sticky: 40;
    --z-topbar: 200;
    --z-nav-flyout: 380;
    --z-floating-popover: 1600;
    --z-media-preview: 2200;
    --z-modal: 5000;
    --z-maximized-pane: 5050;
    --z-datepicker: 5500;
    --z-tooltip: 6000;
    --z-tooltip-arrow: 6001;
    --z-toast: 7000;
    /* 遮罩/预览层内部控件叠放（相对父级定位上下文） */
    --z-local-controls: 3;
}

@media (min-width: 1920px) {
    :root {
        --home-content-max: min(1200px, calc(100vw - 2 * var(--grid-side-padding)));
    }
}

@media (min-width: 2560px) {
    :root {
        --home-content-max: min(1440px, calc(100vw - 2 * var(--grid-side-padding)));
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--font-family-sans);
}

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: var(--line-height-body);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* 中英文混排：正常断行，由 UA 按语言选择规则 */
    line-break: auto;
    word-break: normal;
    overflow-wrap: break-word;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

/* 原生 range：挂类 `.c-range-input`（设置页、组件库与设计稿复用） */
input[type="range"].c-range-input {
    display: block;
    width: 100%;
    height: var(--range-control-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: transparent;
    accent-color: var(--color-primary);
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"].c-range-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

input[type="range"].c-range-input::-webkit-slider-runnable-track {
    height: var(--range-track-height);
    border-radius: var(--range-track-radius);
    background: var(--range-track-bg);
    border: none;
}

input[type="range"].c-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    margin-top: calc(var(--range-track-height) / 2 - var(--range-thumb-size) / 2);
    box-sizing: border-box;
    border: var(--range-thumb-border);
    border-radius: 50%;
    background: var(--range-thumb-bg);
    box-shadow: var(--range-thumb-shadow);
    cursor: pointer;
}

input[type="range"].c-range-input:hover:not(:disabled)::-webkit-slider-thumb {
    border-color: var(--color-primary);
}

input[type="range"].c-range-input::-moz-range-track {
    height: var(--range-track-height);
    border-radius: var(--range-track-radius);
    background: var(--range-track-bg);
    border: none;
}

input[type="range"].c-range-input::-moz-range-thumb {
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    box-sizing: border-box;
    border: var(--range-thumb-border);
    border-radius: 50%;
    background: var(--range-thumb-bg);
    box-shadow: var(--range-thumb-shadow);
    cursor: pointer;
}

input[type="range"].c-range-input:hover:not(:disabled)::-moz-range-thumb {
    border-color: var(--color-primary);
}

input[type="range"].c-range-input::-moz-range-progress {
    height: var(--range-track-height);
    border-radius: var(--range-track-radius);
    background-color: var(--color-primary);
}

input[type="range"].c-range-input:focus {
    outline: none;
}

input[type="range"].c-range-input:focus-visible::-webkit-slider-thumb {
    box-shadow:
        var(--range-thumb-shadow),
        0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

input[type="range"].c-range-input:focus-visible::-moz-range-thumb {
    box-shadow:
        var(--range-thumb-shadow),
        0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

/* 页内标题层级行高（与内容区 1.5 区分） */
h1,
h2,
h3 {
    line-height: var(--line-height-heading);
}

:where(b, strong) {
    font-weight: var(--font-weight-medium);
}

body.keywordsearch-fullscreen-lock {
    overflow: hidden;
}

/*
 * 关键字检索伪全屏：`#keywordsearchPreviewPane` 为 `position:fixed` 但位于主列内，
 * 主列 `--c-app-main-z` 低于顶栏时整块预览会被标签栏压住；锁定时抬高主列叠放顺序。
 */
body.keywordsearch-fullscreen-lock .app-shell__column.c-app-main {
    z-index: var(--z-maximized-pane);
}

/* 全局 12 栏栅格统一组件 */
.grid-12-container {
    width: min(var(--layout-max-width), calc(100vw - 2 * var(--grid-side-padding)));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--grid-side-padding);
    padding-right: var(--grid-side-padding);
    box-sizing: border-box;
}

.grid-12 {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    column-gap: var(--grid-column-gap);
}

/* 与正文一致：继承 body（泛族无衬线），避免控件单独一套 UI 字体 */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* 原型布局：左栏 Logo | 居中内容列（首项导航与标题、输入区左缘对齐） */
.app-shell {
    display: grid;
    grid-template-columns:
        minmax(var(--grid-side-padding), 1fr)
        minmax(0, min(var(--layout-max-width), calc(100% - 2 * var(--grid-side-padding))))
        minmax(var(--grid-side-padding), 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
    /* stretch：中间列在第二行 1fr 内拉满视口剩余高度，短页面时页脚贴在视口底 */
    align-items: stretch;
}

/* 顶栏：跨三列整屏宽，底部分割线一条连续线 */
.app-shell__topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns:
        minmax(var(--grid-side-padding), 1fr)
        minmax(0, min(var(--layout-max-width), calc(100% - 2 * var(--grid-side-padding))))
        minmax(var(--grid-side-padding), 1fr);
    align-items: stretch;
    min-height: var(--nav-height);
    border-bottom: 1px solid var(--topbar-border);
    background-color: var(--topbar-bg);
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    box-sizing: border-box;
}

.app-shell__brand {
    grid-column: 1;
    justify-self: start;
    display: flex;
    align-items: center;
    min-height: var(--nav-height);
    padding-left: var(--grid-side-padding);
    padding-right: 0;
    margin-right: var(--logo-nav-gap);
    box-sizing: border-box;
}

/* 栅格占位：具体栈式布局见 components.css `.c-app-main` */
.app-shell__column {
    grid-column: 2;
    grid-row: 2;
}

/*
 * 全站页脚：默认 --color-text-footer；链接 hover 用正文色，略强于默认、仍低于主内容。
 */
.site-footer {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: var(--spacing-sm) var(--grid-side-padding) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-footer);
    line-height: 1.5;
    letter-spacing: 0.01em;
    opacity: 1;
    transition: opacity 0.2s ease, color 0.2s ease;
    border-top: 1px solid rgba(var(--color-text-placeholder-rgb), 0.1);
    background-color: transparent;
}

.site-footer__inner {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.site-footer__inner::-webkit-scrollbar {
    height: 4px;
}

.site-footer__inner::-webkit-scrollbar-thumb {
    background: rgba(152, 162, 179, 0.45);
    border-radius: 999px;
}

.site-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md) var(--spacing-lg);
    min-width: max(100%, fit-content);
}

.site-footer__copy {
    color: inherit;
    white-space: nowrap;
}

.site-footer__link {
    color: inherit;
    text-decoration: none;
    opacity: 1;
    font-weight: var(--font-weight-body);
    white-space: nowrap;
}

.site-footer__link:hover {
    color: var(--color-text-secondary);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 工具页脚注等仍可复用原名 */
.site-footer__icp {
    color: inherit;
    text-decoration: none;
    opacity: 1;
    font-weight: var(--font-weight-body);
}

.site-footer__icp:hover {
    color: var(--color-text-secondary);
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.site-footer__oss-note {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-placeholder);
    line-height: 1.45;
    opacity: 0.88;
}

/* 其他 - 法务/联系静态页面 */
.legal-page .legal-card {
    display: block;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

.legal-page .legal-card h3 {
    margin: var(--spacing-lg) 0 var(--spacing-xs);
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heading);
}

.legal-page .legal-card p {
    margin: 0 0 var(--spacing-sm);
}

.legal-page .legal-card ul {
    margin: 0 0 var(--spacing-sm);
    padding-left: 1.25em;
    color: inherit;
}

.legal-page .legal-card li {
    margin: 0 0 var(--spacing-xs);
}

.legal-page .legal-card a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-page .legal-card a:hover {
    text-decoration: underline;
}

/*
 * 设置页：与全站 .input-label / 间距变量 / 主色一致；表单项最大宽度便于扫读。
 */
#settings-page .settings-page__lead {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

#settings-page .settings-page__section-title {
    margin: var(--spacing-lg) 0 var(--spacing-lg);
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    line-height: var(--line-height-heading);
}

#settings-page .settings-page__field {
    margin-bottom: var(--spacing-xxl);
    max-width: min(520px, 100%);
}

#settings-page .settings-page__field:has(+ .settings-page__actions) {
    margin-bottom: var(--spacing-lg);
}

#settings-page .input-label.settings-page__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: nowrap;
}

#settings-page .settings-page__label-text {
    min-width: 0;
}

#settings-page .settings-page__value {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
    letter-spacing: 0.02em;
}

#settings-page .settings-page__range {
    max-width: 520px;
}

#settings-page .settings-page__color {
    display: block;
    width: 100%;
    max-width: 120px;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    padding: var(--spacing-6);
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#settings-page .settings-page__color:hover {
    border-color: var(--color-border-strong);
}

#settings-page .settings-page__color:focus,
#settings-page .settings-page__color:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

#settings-page .settings-page__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border-light);
    max-width: min(520px, 100%);
}

.guide-list {
    display: grid;
    gap: var(--spacing-xxl);
    margin-top: var(--spacing-sm);
    max-width: 980px;
}

.guide-anchor-nav {
    position: fixed;
    right: calc((100vw - min(var(--layout-max-width), calc(100vw - 2 * var(--grid-side-padding)))) / 2 + 18px);
    top: 132px;
    width: 188px;
    max-height: calc(100vh - 160px);
    overflow: auto;
    padding: 10px 10px 12px;
    border-radius: 10px;
    background: var(--color-surface-glass-mid);
    border: 1px solid var(--color-border-on-surface-weak);
    backdrop-filter: blur(6px);
    z-index: var(--z-page-sticky);
}

.guide-anchor-nav__title {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--font-weight-strong);
}

.guide-anchor-nav__list {
    display: grid;
    gap: 8px;
}

.guide-anchor-nav__group {
    display: grid;
    gap: 5px;
}

.guide-anchor-nav__sublist {
    display: grid;
    gap: 4px;
    padding-left: 8px;
}

.guide-anchor-nav__link {
    display: block;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.guide-anchor-nav__link:hover {
    color: var(--color-primary);
}

.guide-anchor-nav__link.is-active {
    color: var(--color-primary-hover);
    background: var(--color-primary-tint-10);
    border-radius: 4px;
    padding: 1px 4px;
}

.lang-settings {
    margin-top: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.lang-settings__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.lang-settings__option input {
    accent-color: var(--color-primary-hover);
}

.guide-anchor-nav__link--chapter {
    color: var(--color-text);
    font-weight: var(--font-weight-heading);
}

.guide-anchor-nav__link--top {
    color: var(--color-primary-hover);
    font-weight: var(--font-weight-heading);
}

.guide-rules {
    border: none;
    border-left: none;
    border-radius: 0;
    background: transparent;
    padding: 4px 0 2px;
    margin-top: var(--spacing-sm);
    margin-bottom: 22px;
}

.legal-page .legal-card .guide-rules h3 {
    margin: 0 0 8px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.legal-page .legal-card .guide-rules p {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.guide-rules ul {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: var(--spacing-sm);
}

.guide-rules li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.guide-item {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 16px;
    box-shadow: none;
}

.guide-item + .guide-item {
    border-top: none;
    padding-top: var(--spacing-xl);
}

.legal-page .legal-card .guide-item__title {
    margin: 0 0 var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.01em;
    line-height: var(--line-height-heading);
}

.guide-chapter {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.guide-chapter__title {
    margin: 0 0 var(--spacing-lg);
    padding: 0;
    border-bottom: none;
    border-left: none;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
    letter-spacing: -0.015em;
}

.guide-chapter__body {
    display: grid;
    gap: var(--spacing-xl);
}

.guide-item__list {
    margin: 0;
    padding-left: 1.15em;
    display: grid;
    gap: var(--spacing-md);
}

.legal-page .legal-card .guide-item__list li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
}

.legal-page .legal-card .guide-item__list li strong {
    color: inherit;
    font-weight: var(--font-weight-body);
}

@media (max-width: 1280px) {
    .guide-anchor-nav {
        display: none;
    }
}

/* 窄屏隐藏顶栏 Logo，为导航留出横向空间 */
@media (max-width: 1199px) {
    .app-shell__brand {
        display: none;
    }
}

/* 顶部导航栏：仅占内容列宽度；正文桌面端左右顶齐导航「首页」左缘（见下方工具区内边距）；≤1280px 与顶栏同为 --spacing-lg */
.top-nav {
    grid-column: 2;
    background-color: transparent;
    padding: 0;
    min-height: var(--nav-height);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    /* 横向滚动在内层，避免整列被撑宽；fixed 下拉不受此处裁剪 */
    overflow: visible;
}

/*
 * 内层：grid 单格叠放 —— .top-nav__scroll-track 负责横向滚动，
 * .top-nav__fade 叠在上层，避免 flex 容器上用伪元素时被标签盖住、右侧渐隐不生效。
 */
.top-nav__scroll {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--nav-height);
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
    box-sizing: border-box;
}

.top-nav__scroll-track {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
    /* 与版心左缘对齐（--layout-max-width）：不再用假偏移顶到「第 2 栅格列」 */
    padding-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.top-nav__scroll-track::-webkit-scrollbar {
    display: none;
}

/* 未滑到头时由 JS 加 .top-nav__scroll--fade-left / --fade-right */
.top-nav__fade {
    grid-area: 1 / 1;
    display: none;
    pointer-events: none;
    z-index: var(--z-decor-overlay);
    width: clamp(1.5rem, 6vw, 2.75rem);
    min-height: 100%;
    align-self: stretch;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.top-nav__fade--left {
    justify-self: start;
    background: linear-gradient(to right, var(--topbar-bg), transparent);
    background: linear-gradient(
        to right,
        var(--topbar-bg) 0%,
        color-mix(in srgb, var(--topbar-bg) 35%, transparent) 72%,
        transparent 100%
    );
}

.top-nav__fade--right {
    justify-self: end;
    background: linear-gradient(to left, var(--topbar-bg), transparent);
    background: linear-gradient(
        to left,
        var(--topbar-bg) 0%,
        color-mix(in srgb, var(--topbar-bg) 35%, transparent) 72%,
        transparent 100%
    );
}

.top-nav__scroll--fade-left .top-nav__fade--left {
    opacity: 1;
}

.top-nav__scroll--fade-right .top-nav__fade--right {
    opacity: 1;
}

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-base);
    gap: var(--spacing-6);
    position: relative;
}

.logo:hover {
    opacity: 0.88;
}

.logo:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.logo-image {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.logo-text {
    display: none !important;
}

/* 顶栏品牌：默认展示 logo 图标（文字永不展示）；视口 <1200px 整栏隐藏见上方 @media (max-width: 1199px) */

.nav-links {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--nav-links-gap);
    flex: 0 0 auto;
    min-width: min-content;
    min-height: 100%;
}

.nav-link {
    text-decoration: none;
    color: var(--topbar-link);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    padding: 0;
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    position: relative;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
    height: var(--nav-height);
}

.nav-link:hover {
    color: var(--topbar-link-hover);
}

/* 非当前页：悬停时白色下划线从中间展开 */
.nav-link:not(.active)::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--color-surface-glass-strong);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.nav-link:not(.active):hover::before {
    transform: translateX(-50%) scaleX(1);
}

.nav-link:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring-outer);
}

.nav-link.active {
    color: var(--topbar-link-selected-accent);
    font-weight: var(--font-weight-heading);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: auto;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    transform: translateX(-50%);
    background-color: var(--color-surface-glass-strong);
}

.nav-link.nav-link--open {
    color: var(--topbar-link-active);
}

@media (prefers-reduced-motion: reduce) {
    .nav-link:not(.active)::before {
        transition-duration: 0.01ms;
    }

    .top-nav-flyout__item {
        transition: color 0.18s ease, background-size 0.01ms;
    }
}

.top-nav-flyout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: var(--spacing-md) var(--grid-side-padding) var(--spacing-lg);
    border: none;
    border-radius: 0;
    border-top: 1px solid var(--color-stroke-on-dark-hairline);
    background-color: rgba(var(--topbar-flyout-bg-rgb), var(--top-nav-flyout-fill-alpha));
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    box-shadow: none;
    z-index: var(--z-nav-flyout);
}

.top-nav-flyout[hidden] {
    display: none !important;
}

.top-nav-flyout__list {
    display: grid;
    width: 100%;
    max-width: min(var(--layout-max-width), 100%);
    margin: 0 auto;
    /* 固定最小列宽 + 自动换行：窄屏降列（总数不变，仅增加行数） */
    --top-nav-flyout-item-width: 128px;
    /* 最多 6 列；宽屏不再继续增列，只增加行数 */
    grid-template-columns: repeat(6, minmax(var(--top-nav-flyout-item-width), 1fr));
    grid-auto-flow: row;
    justify-content: start;
    row-gap: var(--spacing-xs);
    column-gap: clamp(8px, 2vw, 16px);
}

@media (max-width: 1280px) {
    .top-nav-flyout__list {
        grid-template-columns: repeat(5, minmax(var(--top-nav-flyout-item-width), 1fr));
    }
}

@media (max-width: 0px) {
    .top-nav-flyout__list {
        grid-template-columns: repeat(4, minmax(var(--top-nav-flyout-item-width), 1fr));
    }
}

@media (max-width: 0px) {
    .top-nav-flyout__list {
        grid-template-columns: repeat(3, minmax(var(--top-nav-flyout-item-width), 1fr));
    }
}

@media (max-width: 0px) {
    .top-nav-flyout__list {
        grid-template-columns: repeat(2, minmax(var(--top-nav-flyout-item-width), 1fr));
    }
}

.top-nav-flyout__item {
    width: 100%;
    border: none;
    background-color: transparent;
    background-image: linear-gradient(var(--color-surface-glass-strong), var(--color-surface-glass-strong));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 2px;
    text-align: left;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 0;
    color: var(--color-on-dark-subtle);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    letter-spacing: 0.01em;
    line-height: 1.35;
    cursor: pointer;
    text-shadow: none;
    transition:
        color 0.18s ease,
        background-size 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

.top-nav-flyout__item:hover,
.top-nav-flyout__item:active {
    color: var(--color-on-dark-subtle);
    background-size: 100% 2px;
}

.top-nav-flyout__item:focus-visible {
    outline: 2px solid var(--color-stroke-on-dark);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    background-size: 100% 2px;
}

/* 主内容区域：位于 `.c-app-main`（中间列）内，与导航同列宽 */
.main-content {
    flex: 1;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 24px 0;
    position: relative;
    overflow: visible;
}

.page {
    display: none;
}

.page.active {
    display: block;
    overflow: visible;
}

#result-page.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: visible;
    /* 避免 .result-content 被 flex:1 撑满视区，在正文与底栏之间拉出大块留白 */
    justify-content: flex-start;
}

#result-page.active > .result-content {
    flex: 0 1 auto;
    min-height: 0;
}

#result-page .result-footer-bar {
    flex-shrink: 0;
    margin-top: var(--spacing-lg);
}

/* 结果页：顶栏与「拆分结果」之间尽量贴紧（主区默认 padding-top 较大） */
.main-content.main-content--result-active {
    padding-top: 0;
}

/* 拆比结果页在中间主列内、与 <main> 并列 */
.c-app-main:has(#result-page.active) .main-content {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
}

/* 与 .main-content 上内边距一致，避免结果页导航与正文贴得过紧 */
.c-app-main:has(#result-page.active) .result-content,
.main-content.main-content--result-active .result-content {
    padding-top: var(--spacing-huge);
}

/* 去重页内联结果区 */
#dedupe-page .dedupe-toolbar {
    margin-top: var(--spacing-xxl);
}

#dedupe-page .dedupe-inline-result:not([hidden]) {
    margin-top: var(--title-content-gap);
    width: 100%;
}

#dedupe-page .dedupe-inline-result[hidden] {
    display: none !important;
}

/* 去重：无重复元素时以 placeholder 展示提示 */
#dedupe-page #dedupeDupText[data-dedupe-dup-empty="true"]::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

/* 结果页底部：当前规则摘要 + 操作按钮 */
.result-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: var(--spacing-md) 0;
    box-sizing: border-box;
    margin-bottom: calc(var(--spacing-xxl) + var(--nav-height));
    background-color: var(--color-bg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    flex-shrink: 0;
}

/* 文本拆分：输入框 → 按钮 24px；按钮 → 结果区 32px（见下方 .split-toolbar / .punct-result-wrap） */
#split-page .input-group > .c-textarea-field + .split-toolbar {
    margin-top: var(--spacing-xxl);
}

/* 规则摘要：结果框下 8px，字阶/色与组件库 .c-designlib-micro 一致 */
#split-page .punct-result-wrap .split-rule-summary,
#diff-page .diff-inline-result .split-rule-summary {
    width: 100%;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-body);
}

#split-page .punct-result-wrap .split-rule-summary .result-footer-bar,
#diff-page .diff-inline-result .split-rule-summary .result-footer-bar {
    display: block;
    margin: 0;
    margin-inline: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    background-color: transparent;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

#split-page .punct-result-wrap .split-rule-summary .result-footer-meta,
#diff-page .diff-inline-result .split-rule-summary .result-footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-lg);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: start;
    justify-content: flex-start;
}

#split-page .punct-result-wrap .split-rule-summary .result-footer-label,
#split-page .punct-result-wrap .split-rule-summary .result-footer-value,
#diff-page .diff-inline-result .split-rule-summary .result-footer-label,
#diff-page .diff-inline-result .split-rule-summary .result-footer-value {
    color: var(--color-text-tertiary);
    font-size: inherit;
    font-weight: inherit;
}

.result-footer-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-xxl);
    flex: 1;
    min-width: 0;
    width: 100%;
}

.result-footer-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.result-footer-label {
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.result-footer-value {
    color: var(--color-text);
    word-break: break-word;
}

.result-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
}

.result-footer-actions .btn {
    font-weight: var(--font-weight-medium);
}

/* 文本去重：底部与拆比结果区样式一致；收紧与正文间距、底部留白 */
.dedupe-result-footer.result-footer-bar {
    justify-content: flex-end;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
}

.dedupe-result-footer .result-footer-actions {
    flex-shrink: 0;
}

#dedupe-page .dedupe-inline-result .result-content {
    flex: 0 1 auto;
    min-height: 0;
    /* 与上方待去重文本域同宽：不再叠加 .result-content 默认左右内边距 */
    padding: 0;
    margin: 0;
}

#dedupe-page .dedupe-inline-result .result-layout {
    gap: var(--title-content-gap);
}

.dedupe-result-footer .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 0px) {
    .result-footer-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .result-footer-actions {
        justify-content: flex-end;
    }
}

/* ---------- 证件照换底 ---------- */
.idphoto-page-inner {
    width: 100%;
    max-width: 100%;
}

.idphoto-dropzone {
    position: relative;
    overflow: hidden;
}

#idphoto-page.idphoto-page--busy .idphoto-dropzone > .c-upload-progress.c-upload-progress--overlay:not([hidden]) {
    display: flex;
}

#idphoto-page.idphoto-page--busy .idphoto-dropzone {
    cursor: progress;
}

.idphoto-dropzone.has-image .upload-dropzone__icon,
.idphoto-dropzone.has-image .upload-dropzone__hint,
.idphoto-dropzone.has-image .upload-dropzone__subhint {
    display: none;
}

.idphoto-zoom-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-text-rgb), 0.38);
    color: var(--color-text-inverse);
    pointer-events: none;
    transition: opacity 0.15s ease;
    opacity: 0;
}

.idphoto-preview-wrap {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    line-height: 0;
}

.idphoto-zoom-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--color-stroke-on-dark);
    background: var(--color-fill-on-dark-weak);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px var(--color-shadow-ambient);
}

.idphoto-zoom-icon__img {
    display: block;
    width: var(--line-icon-size);
    height: var(--line-icon-size);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.idphoto-dropzone.has-image {
    cursor: pointer;
}

/* 证件照：内层舞台由脚本 layoutIdphotoStylePreview 定尺寸（外槽高度见 components.css） */
#idphoto-page .idphoto-dropzone.has-image .idphoto-preview-wrap {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
}

#idphoto-page .idphoto-dropzone.has-image .idphoto-preview-wrap:hover .idphoto-zoom-overlay {
    display: flex;
    opacity: 1;
}

.idphoto-dropzone.has-image .idphoto-preview-wrap:not(:hover) .idphoto-zoom-overlay {
    display: none;
    opacity: 0;
}

#idphoto-page .idphoto-dropzone.has-image #idphotoDropzonePreview {
    order: 1;
}

#idphoto-page .idphoto-dropzone.has-image #idphotoUploadSubhint {
    order: 2;
    margin-top: var(--spacing-sm);
    font-weight: var(--font-weight-heading);
    color: var(--color-success);
}

/* 证件照拖放区预览：浅灰槽内 img contain（宽或高 100% 顶满） */
.idphoto-preview-wrap > img.idphoto-preview-img,
.idphoto-preview-wrap > img.idphoto-preview-canvas {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: var(--tool-image-preview-inner-h, calc(var(--tool-image-preview-max-h, 560px) - 2 * var(--tool-image-preview-pad, 12px)));
    object-fit: contain;
    object-position: center center;
    box-sizing: border-box;
}

.idphoto-preview-wrap > canvas.idphoto-preview-canvas {
    display: none;
}

.idphoto-card {
    width: 100%;
    background: transparent;
    padding: 0;
    min-width: 0;
}

.idphoto-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.idphoto-selects {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.idphoto-select {
    --select-chevron-content-gap: var(--imgcompress-select-value-chevron-gap);
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    max-height: var(--btn-min-height);
    padding: 0 calc(
        var(--select-chevron-inset-end) + var(--select-chevron-bg-size) + var(--select-chevron-content-gap)
    ) 0 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    /* 与叠用的 `.imgcompress-format__select`、工具栏 `.btn` 字阶一致 */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: calc(var(--btn-min-height) - 2px);
    box-shadow: none;
    background-image: var(--icon-chevron-down);
    background-position: right var(--select-chevron-inset-end) center;
    background-size: var(--select-chevron-bg-size) var(--select-chevron-bg-size);
    background-repeat: no-repeat;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition-base);
}

.idphoto-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.idphoto-select:disabled {
    background-color: var(--color-bg-hover);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
    border-color: var(--color-disabled-border);
    opacity: 1;
    background-image: var(--icon-chevron-down-disabled);
}

.idphoto-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    align-items: center;
}

.idphoto-page--busy .idphoto-dropzone {
    cursor: progress;
    opacity: 0.92;
}

/*
 * 证件照工具栏：`.idphoto-toolbar`（非 `.imgcompress-toolbar`）内尺寸一体框与压缩页一致；
 * 底色叠 `.c-outline-field--color-swatch-select` + `.c-color-swatch-select`（`components.css`），脚本同步名称与色块（`script-features.js` · `initIdPhoto`）。
 */
.idphoto-toolbar > .idphoto-selects > .imgcompress-format.imgcompress-format--combo.c-outline-field {
    flex: 0 1 auto;
    min-width: 0;
    width: fit-content;
    max-width: min(100%, var(--imgcompress-combo-toolbar-max-width));
}

.idphoto-toolbar
    > .idphoto-selects
    > .imgcompress-format.imgcompress-format--combo.c-outline-field:has(> .imgcompress-format__label--combo):has(> .c-imgcompress-select-dropdown)
    > .c-imgcompress-select-dropdown
    .c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo.idphoto-select {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    text-align: right;
    text-align-last: right;
}

/* 底栏右侧「分辨率 / DPI」：与左侧「尺寸」同源一体框 + 浅色自定义面板 */
#idphoto-page .idphoto-actions > .imgcompress-format.imgcompress-format--combo.c-outline-field {
    flex: 0 1 auto;
    min-width: 0;
    width: fit-content;
    max-width: min(100%, var(--imgcompress-combo-toolbar-max-width));
}

#idphoto-page
    .idphoto-actions
    > .imgcompress-format.imgcompress-format--combo.c-outline-field:has(> .imgcompress-format__label--combo):has(> .c-imgcompress-select-dropdown)
    > .c-imgcompress-select-dropdown
    .c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo.idphoto-select {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    text-align: right;
    text-align-last: right;
}

@media (max-width: 0px) {
    .idphoto-selects {
        width: 100%;
    }
    .idphoto-selects .idphoto-select {
        min-width: 0;
        flex: 1;
    }
    .idphoto-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 功能页面包屑：上沿与 .main-content padding-top(24px) 对齐；与下方标题区相隔 48px；14px 与正文色一致 */
.page-breadcrumb {
    margin: 0 0 48px;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    color: var(--color-text);
    flex-shrink: 0;
}

.page-breadcrumb__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
}

.page-breadcrumb__trail {
    min-width: 0;
    flex: 1 1 auto;
}

.page-breadcrumb__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.page-breadcrumb__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin: 0;
    padding: 0.25em 0.5em;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-primary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.page-breadcrumb__action:hover {
    color: var(--color-primary-hover);
    background-color: var(--color-bg-hover);
}

.page-breadcrumb__action:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.page-breadcrumb__action .c-line-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.88;
}

.page-breadcrumb__action:hover .c-line-icon {
    opacity: 1;
}

.page-breadcrumb__action-label {
    white-space: nowrap;
}

.page-breadcrumb__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.35em;
    row-gap: 0.25em;
}

.page-breadcrumb__sep {
    color: var(--color-text-tertiary);
    user-select: none;
}

.page-breadcrumb__home {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-primary);
    cursor: pointer;
    text-align: left;
}

.page-breadcrumb__home:hover {
    color: var(--color-primary-hover);
}

.page-breadcrumb__home:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.page-breadcrumb__mid {
    color: var(--color-primary);
}

.page-breadcrumb__current {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

/* 拆比结果页在 <main> 外：无主区内边距时由面包屑自带上边距 24px */
#result-page > .page-breadcrumb {
    margin-top: 24px;
}

/* 标题区域 */
.title-section {
    text-align: left;
    margin-bottom: var(--title-content-gap);
    position: relative;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    z-index: var(--z-page-sticky);
}

.main-title {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.info-icon {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    transition: var(--transition-base);
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.info-icon:hover {
    color: var(--color-text-tertiary);
    transform: none;
}

.info-icon:focus-visible {
    outline: none;
    border-radius: 50%;
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.info-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.info-icon .c-line-icon--information-line {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-md));
    left: 50%;
    transform: translateX(-50%) translateY(var(--spacing-md));
    background-color: var(--color-tooltip);
    color: var(--color-bg);
    padding: var(--spacing-md) var(--spacing-xxl);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
    z-index: var(--z-tooltip);
    max-width: 500px;
    min-width: 300px;
    white-space: normal;
    line-height: 1.5;
    box-shadow: var(--shadow-md);
}

.tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-tooltip);
    z-index: var(--z-tooltip-arrow);
}

.tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 输入区域 */
.input-section {
    display: flex;
    gap: var(--spacing-xxxl);
    margin-bottom: var(--spacing-xxxl);
    flex-wrap: wrap;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    /* 文本框高度：与双栏时「单列」44cqw+1.75rem 等价 → 整栏宽度下用 22cqw+1.75rem */
    container-type: inline-size;
    container-name: input-section;
}

.input-section--dedupe-single {
    flex-direction: column;
    margin-bottom: var(--spacing-huge);
}

.input-section--dedupe-single .input-group {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}

/* 待去重页：避免 input-group 被 flex 撑满视区，导致按钮视觉上叠在文本框上 */
#dedupe-page .input-section.input-section--dedupe-single .input-group.input-group--dedupe {
    flex: 0 1 auto;
    min-height: 0;
}

#dedupe-page .button-section--dedupe {
    padding: 0;
    margin-top: var(--main-action-gap);
    margin-bottom: 0;
}

.input-group {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.input-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.text-input {
    width: 100%;
    padding: var(--tool-text-io-padding-block) var(--tool-text-io-padding-inline);
    border: var(--tool-text-io-border);
    border-radius: var(--tool-text-io-radius);
    font-family: var(--tool-text-io-font-family);
    font-size: var(--tool-text-io-font-size);
    font-weight: var(--tool-text-io-font-weight);
    line-height: var(--tool-text-io-line-height);
    resize: none;
    box-sizing: border-box;
    /* 高度随视口宽度变化，并限制最大高度以免占满屏幕（无容器查询时的回退） */
    min-height: clamp(8rem, 22vw + 3rem, 22rem);
    height: clamp(8rem, 22vw + 3rem, 22rem);
    max-height: min(50vh, 24rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    overflow: auto;
    background-color: var(--tool-text-io-bg);
    color: var(--tool-text-io-color);
}

/* 全站：工具页多行输入与只读输出 — 排版与框线一致（JSON CodeMirror 等代码区除外） */
:is(
    .text-input,
    textarea.c-text-input,
    .result-textarea,
    .c-textarea-field__panel,
    #transcribe-page .transcribe-output-textarea,
    #textcompare-page .textcompare-view,
    #keywordsearch-page .keywordsearch-result
) {
    font-family: var(--tool-text-io-font-family);
    font-size: var(--tool-text-io-font-size);
    font-weight: var(--tool-text-io-font-weight);
    line-height: var(--tool-text-io-line-height);
    color: var(--tool-text-io-color);
}

/* 只读 / 结果区：半透明浅灰底（与 `--tool-text-io-output-bg` 同源） */
:is(
    .result-textarea,
    .c-textarea-field__panel,
    #transcribe-page .transcribe-output-textarea,
    #numupper-page .numupper-output-text,
    #textcompare-page .textcompare-view,
    #keywordsearch-page .keywordsearch-result,
    .text-input[readonly],
    textarea.c-text-input[readonly],
    .c-gen-result-list
) {
    background-color: var(--tool-text-io-output-bg);
}

:is(.text-input, textarea.c-text-input, #transcribe-page .transcribe-output-textarea):not(.result-textarea) {
    border: var(--tool-text-io-border);
    border-radius: var(--tool-text-io-radius);
    padding: var(--tool-text-io-padding-block) var(--tool-text-io-padding-inline);
}

:is(.c-textarea-field__panel, #textcompare-page .textcompare-view, #keywordsearch-page .keywordsearch-result) {
    border: var(--tool-text-io-border);
    border-radius: var(--tool-text-io-radius);
    padding: var(--tool-text-io-padding-block) var(--tool-text-io-padding-inline);
}

:is(.text-input, textarea.c-text-input)[readonly] {
    -webkit-text-fill-color: var(--tool-text-io-color);
    cursor: default;
}

/* 与整栏 .input-section 宽度关联：22cqw+1.75rem ≡ 双栏时每列 44cqw+1.75rem，拆比/去重/英文大小写高度一致 */
@container input-section (min-width: 0) {
    .text-input:not(.chargen-output) {
        min-height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
        height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
    }
}

/* 字符生成：生成结果已改用 `.c-gen-result-list`，页面内不再出现 `.chargen-output` textarea */

.text-input:focus,
.text-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.text-input::placeholder {
    color: var(--color-text-placeholder);
}

.text-input.error {
    border-color: var(--color-error);
}

.text-input.error::placeholder {
    color: var(--color-error);
}

.char-counter {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: right;
}

.char-counter.char-counter--warn {
    color: var(--color-warning);
}

.char-counter.char-counter--danger {
    color: var(--color-error);
}

/* =============================================================================
 * 组件库：工具页按钮（`.btn*`）
 * -----------------------------------------------------------------------------
 * 【基类】`.btn`
 *   - 默认：白底 + `--color-control-border` 描边 + `--color-text` 字色；`min-height: var(--btn-min-height)`（见 :root）；左右内边距固定 `padding-inline: var(--btn-padding-inline)`（默认 24px）。
 *   - `:hover:not(:disabled)`：描边与字色切至主色，底 `--color-bg-hover`。
 *   - `:disabled`：灰底/灰边/占位字色，不透明（避免误读为可点）。
 *
 * 【主操作】`.btn.btn-primary`
 *   - 实心主色（`--color-primary` / `--color-primary-hover`），用于「提交 / 一键执行 / 复制结果」等主路径。
 *   - 一体框左标签：`--c-outline-field-label-*`（常规字重 + 占位色阶）；值区仍为 `font-weight-medium`（见 `components.css`）。
 *   - 内行前导线稿图标：子节点叠用 `.btn-lead-icon`（推荐）或 `.btn-primary-lead-icon`（旧名，语义同上）+ `components.css` 的 `.c-line-icon--*`（`mask` + `currentColor`；与钮内字色一致：主钮启用白、禁用 `--color-disabled-text`；次钮 `.btn-clear` 同理跟字色）。
 *   - 可选修饰：`.btn-primary--copied` — 复制成功短反馈（成功绿，避免蓝底蓝字）。
 *
 * 【次级】`.btn.btn-clear`
 *   - 与基类视觉一致，保留类名表达「重置 / 次要操作」语义；与 `.btn-primary` 并排时常在左侧或次位。
 *
 * 【互斥双主操作 · 文本排序】`#textsort-page .textsort-toolbar .textsort-sort-btn.btn-primary`
 *   - 升序 / 降序均为 **实心主色**（全局 `.btn-primary`）；脚本为当前方向加 `.active` 时略深（`--color-primary-hover`）便于区分。
 *   - 无输入时升序/降序/重置禁用逻辑见 `script-features.js` `initTextsort`。
 *
 * 【布局】工具栏常用 `.transcribe-toolbar` / `.textsort-toolbar` 等：左组 `.transcribe-actions`（或 `components.css` 的 `.c-tool-actions`）、右组单颗主钮；小屏 `flex-wrap` 见文件内 `@media` 段。
 *
 * 【文本类工具 · 主操作宽度】`:root` 中 `--btn-text-action-min-width`（默认 80px）
 *   - 适用于：拆分/拆比/去重/去空行/英文大小写/排序/混排/标点/生成器类/简繁/关键字/字符统计/JSON 格式化、拆比结果页、提取关键帧与音视频分离（底栏虽为 `.c-tool-actions--media`，仍以 `#keyframeextract-page` / `#audiovideosplit-page` 显式纳入 80px），以及文本相关弹窗 `.modal-footer .btn`。
 *   - 不适用：图片/文档/视频压缩等其它媒体工具页内的 `.btn`（其 `.c-tool-actions--media .btn` 对次要钮保持 `min-width:0`；主钮 `.c-tool-actions__run` 在 `components.css` 单独 `min-width: min-content` + `fit-content`，避免与「清除」重叠）。
 * ============================================================================= */

/* 按钮区域 */
.button-section {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-huge);
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* 文本拆比：输入框 → 按钮 24px；按钮 → 结果区 32px；主操作靠左 */
#diff-page .input-section {
    margin-bottom: 0;
}

#diff-page .button-section {
    margin-top: var(--spacing-xxl);
    margin-bottom: 0;
    justify-content: flex-start;
}

/* 拆比结果内嵌在按钮下方（与去重页 `.dedupe-inline-result` 同思路） */
#diff-page .diff-inline-result:not([hidden]) {
    margin-top: var(--title-content-gap);
    width: 100%;
}

#diff-page .diff-inline-result[hidden] {
    display: none !important;
}

#diff-page .diff-inline-result .result-content {
    padding: 0;
    margin: 0;
}

#diff-page .diff-inline-result .result-layout {
    gap: 0;
}

#diff-page .diff-inline-result .result-row {
    gap: var(--title-content-gap);
    margin-bottom: var(--title-content-gap);
}

#diff-page .diff-inline-result .result-row:last-child {
    margin-bottom: 0;
}

#diff-page .diff-inline-result .result-box-header {
    margin-bottom: var(--spacing-xxl);
}

/* 文本对比：双栏等高、比对视图与行级高亮；输入框 → 按钮 24px；按钮 → 结果区 32px */
#textcompare-page .textcompare-input-section {
    margin-bottom: 0;
}

#textcompare-page .textcompare-panels--input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: textcompare-panel;
}

#textcompare-page .textcompare-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: textcompare-panel;
    position: relative;
}

#textcompare-page .textcompare-connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

#textcompare-page.textcompare-page--result .textcompare-connectors:not([hidden]) {
    display: block;
}

#textcompare-page .textcompare-connector-path {
    fill: var(--textcompare-bridge-fill);
    stroke: none;
    pointer-events: none;
}

#textcompare-page .textcompare-connectors {
    z-index: 2;
}

#textcompare-page .textcompare-connector-path--linked {
    fill: var(--textcompare-bridge-fill-linked);
    stroke: none;
}

#textcompare-page .textcompare-panels .c-textarea-field {
    min-width: 0;
}

/* 输入区：与拆比/去重同源高度 */
@container textcompare-panel (min-width: 0) {
    #textcompare-page .textcompare-panels--input .c-textarea-field__stack > .text-input {
        min-height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
        height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
    }
}

#textcompare-page .textcompare-view {
    white-space: pre-wrap;
    word-break: break-word;
    contain: strict;
}

#textcompare-page .textcompare-virtual-inner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

#textcompare-page .textcompare-virtual-window {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    will-change: transform;
}

#textcompare-page .textcompare-view--busy {
    pointer-events: none;
    opacity: 0.72;
}

#textcompare-page .textcompare-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#textcompare-page .textcompare-result-wrap[hidden] {
    display: none !important;
}

#textcompare-page .textcompare-result-wrap .c-textarea-field__stack > .textcompare-view {
    display: block;
    overflow: auto;
    min-height: var(--textcompare-result-view-height);
    height: var(--textcompare-result-view-height);
    max-height: var(--textcompare-result-view-height);
    box-sizing: border-box;
}

#textcompare-page .c-textcompare-line {
    min-height: calc(1em * var(--tool-text-io-line-height));
    padding: 2px var(--textcompare-result-inset-x);
    margin: 0 calc(-1 * var(--textcompare-result-inset-x));
}

#textcompare-page .c-textcompare-block--diff {
    margin: 0 calc(-1 * var(--textcompare-result-inset-x));
    padding: 2px var(--textcompare-result-inset-x);
}

/* 行缝分线与差异背景同宽（抵消行内 padding，与 margin 负边距对齐） */
#textcompare-page .c-textcompare-gap::after {
    left: calc(-1 * var(--textcompare-result-inset-x));
    right: calc(-1 * var(--textcompare-result-inset-x));
}

#textcompare-page .c-textcompare-block--diff .c-textcompare-line {
    min-height: calc(1em * var(--tool-text-io-line-height));
    margin: 0;
    padding: 0;
}

#textcompare-page .textcompare-actions.button-section {
    margin-top: 24px;
    margin-bottom: 0;
    justify-content: flex-start;
}

@media (max-width: 720px) {
    #textcompare-page .textcompare-panels,
    #textcompare-page .textcompare-panels--input {
        grid-template-columns: 1fr;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--btn-min-height);
    padding-block: var(--spacing-sm);
    padding-inline: var(--btn-padding-inline);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

/* 文本类与编程文本工具：工具栏 / 主操作区 `.btn` 最小宽度（令牌见 :root `--btn-text-action-min-width`） */
:is(
        #split-page,
        #diff-page,
        #dedupe-page,
        #stripline-page,
        #linemerge-page,
        #stripspace-page,
        #transcribe-page,
        #textsort-page,
        #mixlayout-page,
        #punct-page,
        #numupper-page,
        #chargen-page,
        #dategen-page,
        #namegen-page,
        #emailgen-page,
        #filegen-page,
        #seoindex-page,
        #cht-page,
        #symchar-page,
        #jsonfmt-page,
        #qrcodegen-page,
        #colorconvert-page,
        #charcount-page,
        #keywordsearch-page,
        #keyframeextract-page,
        #videoconvert-page,
        #audiovideosplit-page,
        #result-page
    )
    .btn,
.modal-footer .btn {
    min-width: var(--btn-text-action-min-width);
}

/* 提取关键帧列表：删除「×」保持紧凑，不受页级 80px 约束 */
.btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

.btn:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.btn:disabled {
    opacity: 1;
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-border);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg);
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* 主钮 / 次钮：前导线标与文案间距（`.btn-clear` / `.btn-primary` 均可；槽位类见 `.btn-lead-icon`） */
.btn:has(.btn-primary-lead-icon),
.btn:has(.btn-lead-icon) {
    gap: var(--spacing-sm);
}

.btn-primary-lead-icon,
.btn-lead-icon {
    flex-shrink: 0;
}

/* 复制去重结果：复制成功后的短暂反馈（白字，避免蓝底蓝字） */
.btn-primary.btn-primary--copied {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
}

.btn-primary.btn-primary--copied:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-bg);
}

.btn-clear {
    /* 与 .btn 次级样式一致，保留类名便于语义区分 */
    background-color: var(--color-bg);
}

/* 英文大小写：生成内容在按钮下方；无内容时不占位 */
.transcribe-status {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    word-break: break-word;
    max-height: 12rem;
    overflow-y: auto;
}

.transcribe-status:has(#transcribeStatusResult:not(:empty)) {
    margin-top: var(--spacing-md);
    margin-bottom: 0;
}

/* 英文大小写结果：仅用主题色字重强调，无背景色块 */
.transcribe-status-result {
    display: inline;
    color: var(--color-primary);
    font-weight: var(--font-weight-heading);
}

.transcribe-status-suffix {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* 英文大小写页：输入框 → 按钮 24px；按钮 → 生成内容 32px；结果字号加大 */
#transcribe-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#transcribe-page .c-textarea-field--transcribe-input .transcribe-input-textarea {
    min-height: 5.5rem;
    height: 5.5rem;
    max-height: 8rem;
    resize: none;
}

#transcribe-page .transcribe-output-wrap[hidden] {
    display: none !important;
}

#transcribe-page .transcribe-output-wrap:not([hidden]) {
    width: 100%;
    box-sizing: border-box;
}

#transcribe-page .transcribe-output-textarea {
    display: block;
    width: 100%;
    min-height: 5.5rem;
    height: 5.5rem;
    max-height: 8rem;
    margin: 0;
    resize: none;
    cursor: default;
}

#transcribe-page .transcribe-output-textarea:focus,
#transcribe-page .transcribe-output-textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

#transcribe-page .transcribe-copy-error {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

#transcribe-page .transcribe-copy-error[hidden] {
    display: none !important;
}

/* 英文大小写等页：主操作条（与配置/输入区之间统一为 --main-action-gap） */
.transcribe-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--main-action-gap);
    width: 100%;
}

/* 英文大小写：输入区（含字数脚条）→ 按钮 24px；按钮 → 输出 32px */
#transcribe-page .input-group > .c-textarea-field + .transcribe-toolbar {
    margin-top: 24px;
}

#transcribe-page .input-group > .transcribe-toolbar + .transcribe-output-wrap:not([hidden]) {
    margin-top: 32px;
}

#transcribe-page .c-textarea-field--transcribe-input .char-counter {
    margin-top: var(--spacing-xs);
}

.transcribe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

/* 文本拆分：拆分规则信息区域样式 */
.split-rule-info {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-md);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.split-rule-info .rule-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: center;
}

.split-rule-info .rule-info {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

/* 文本排序：错误紧贴输入框；计数器与按钮区间距收紧 */
#textsort-page .textsort-error:empty {
    display: none;
}

#textsort-page .textsort-error:not(:empty) {
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

#textsort-page .textsort-char-counter {
    margin-top: var(--spacing-xs);
}

/* 与 `.c-textarea-field` 内 `gap` 合一，避免与外壳间距叠床架屋 */
#textsort-page .c-textarea-field .textsort-error:not(:empty),
#textsort-page .c-textarea-field .textsort-char-counter {
    margin-top: 0;
}

/* 升序/降序：实心主色（继承 .btn-primary）；当前排序方向略深 */
#textsort-page .textsort-toolbar .textsort-sort-btn.btn-primary.active:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

#textsort-page .textsort-toolbar .textsort-sort-btn.btn-primary.active:not(:disabled):hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg);
}

#textsort-page .textsort-toolbar {
    margin-top: var(--spacing-xxl);
}

#textsort-page .textsort-result-wrap:not([hidden]) {
    margin-top: var(--title-content-gap);
    width: 100%;
}

.textsort-result-wrap[hidden] {
    display: none !important;
}

#textsortOutput {
    min-height: 12rem;
    cursor: default;
}

/* 标点转换、关键字检索（主文本区共用 .punct-text-input） */
#punct-page .punct-char-counter,
#keywordsearch-page .punct-char-counter {
    margin-top: var(--spacing-xs);
}

/* 标点转换：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#punct-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#punct-page .input-group > .c-textarea-field + .punct-toolbar {
    margin-top: 24px;
}

#punct-page .input-group > .punct-toolbar + .punct-result-wrap:not([hidden]) {
    margin-top: 32px;
}

/* 数字转大写：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#numupper-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#numupper-page .input-group > .c-textarea-field + .numupper-toolbar {
    margin-top: 24px;
}

#numupper-page .input-group > .numupper-toolbar + .numupper-result-wrap:not([hidden]) {
    margin-top: 32px;
}

#numupper-page .c-textarea-field--numupper-input .numupper-text-input {
    min-height: 5.5rem;
    height: 5.5rem;
    max-height: 8rem;
    resize: none;
}

#numupper-page .numupper-result-wrap[hidden] {
    display: none !important;
}

#numupper-page .numupper-result-wrap:not([hidden]) {
    width: 100%;
    box-sizing: border-box;
}

#numupper-page .numupper-output-text {
    display: block;
    width: 100%;
    min-height: 5.5rem;
    height: 5.5rem;
    max-height: 8rem;
    margin: 0;
    resize: none;
    cursor: default;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

#numupper-page .numupper-output-text:focus,
#numupper-page .numupper-output-text:focus-visible {
    outline: none;
    box-shadow: none;
}

#numupper-page .c-textarea-field--numupper-input .numupper-char-counter {
    margin-top: var(--spacing-xs);
}

/* 去空行：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#stripline-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#stripline-page .stripline-toolbar {
    margin-top: 24px;
}

#stripline-page .stripline-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#stripline-page .stripline-char-counter {
    margin-top: var(--spacing-xs);
}

#stripline-page .stripline-result-wrap[hidden] {
    display: none !important;
}

#stripline-page .stripline-result-textarea {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

/* 行合并：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#linemerge-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#linemerge-page .linemerge-toolbar {
    margin-top: 24px;
}

#linemerge-page .linemerge-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

#linemerge-page .linemerge-sep-field {
    flex: 0 1 auto;
    min-width: 0;
}

#linemerge-page .linemerge-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#linemerge-page .linemerge-char-counter {
    margin-top: var(--spacing-xs);
}

#linemerge-page .linemerge-result-wrap[hidden] {
    display: none !important;
}

#linemerge-page .linemerge-result-textarea {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

/* 去空格：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#stripspace-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#stripspace-page .stripspace-toolbar {
    margin-top: 24px;
}

#stripspace-page .stripspace-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#stripspace-page .stripspace-char-counter {
    margin-top: var(--spacing-xs);
}

#stripspace-page .stripspace-result-wrap[hidden] {
    display: none !important;
}

#stripspace-page .stripspace-result-textarea {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

/* ==================== 段落加空行：输入框 → 按钮 24px；按钮 → 处理结果 32px ==================== */
#paraspacing-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#paraspacing-page .paraspacing-toolbar {
    margin-top: 24px;
}

#paraspacing-page .paraspacing-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#paraspacing-page .paraspacing-result-wrap[hidden] {
    display: none !important;
}

#paraspacing-page .paraspacing-result-textarea {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

/* ==================== 句子自动换行：输入框 → 按钮 24px；按钮 → 处理结果 32px ==================== */
#sentlinebreak-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#sentlinebreak-page .sentlinebreak-toolbar {
    margin-top: 24px;
}

#sentlinebreak-page .sentlinebreak-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#sentlinebreak-page .sentlinebreak-result-wrap[hidden] {
    display: none !important;
}

#sentlinebreak-page .sentlinebreak-result-textarea {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

/* ==================== 时间戳转换：轻量分组 + 单行输入（覆盖 .text-input / 容器查询的大块高度） ==================== */
/* 当前时间戳 ↔ 下方双栏 32px；双栏内两卡片 24px */
#timestamp-page .timestamp-page-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
}

#timestamp-page .timestamp-panel {
    box-sizing: border-box;
    width: 100%;
}

/* 三块功能区：浅底 + 细边，与全站 token 一致 */
#timestamp-page .timestamp-block {
    padding: var(--spacing-lg);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* 顶部「当前时间戳」：仅用全局 token 的浅蓝灰层次，与下方卡片同一色系 */
#timestamp-page .timestamp-block--current {
    position: relative;
    isolation: isolate;
    padding: var(--spacing-xl) var(--spacing-lg);
    border: 1px solid var(--color-border);
    background: linear-gradient(
        165deg,
        var(--color-bg-active) 0%,
        var(--color-bg) 42%,
        var(--color-bg-hover) 100%
    );
    box-shadow: var(--shadow-sm);
}

/* 点阵纹理：与 placeholder 同阶灰、低透明度 */
#timestamp-page .timestamp-block--current::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: radial-gradient(rgba(var(--color-text-placeholder-rgb), 0.1) 1px, transparent 1px);
    background-size: 11px 11px;
    opacity: 0.55;
    pointer-events: none;
    z-index: var(--z-base);
}

#timestamp-page .timestamp-block--current > * {
    position: relative;
    z-index: var(--z-raised);
}

#timestamp-page .timestamp-block--current .timestamp-panel__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: 32px;
}

#timestamp-page .timestamp-block--current .timestamp-current-rows {
    gap: var(--spacing-md);
}

#timestamp-page .timestamp-block--current .timestamp-current-row {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: none;
}

#timestamp-page .timestamp-block--current .timestamp-field-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

#timestamp-page .timestamp-block--current .timestamp-field-value.timestamp-current-value {
    font-family: var(--font-family-mono);
    font-size: clamp(1.125rem, 3.2vw, 1.625rem);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}

#timestamp-page .timestamp-block--current .timestamp-copy-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-result-copy);
    background: var(--color-result-copy-bg);
    border-radius: var(--radius-md);
}

#timestamp-page .timestamp-block--current .timestamp-copy-btn:hover:not(:disabled) {
    color: var(--color-result-copy-hover);
    background: var(--color-result-copy-bg-hover);
    text-decoration: none;
}

#timestamp-page .timestamp-block--current .timestamp-copy-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#timestamp-page .timestamp-panel__heading {
    margin: 0 0 var(--spacing-lg) 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: left;
}

/* 底部两栏：标题与输入行之间略加大 */
#timestamp-page .timestamp-two-col .timestamp-panel__heading {
    margin-bottom: var(--spacing-xl);
}

/* 单行文本框：必须高于 @container 内 .text-input 的 min-height 规则 */
#timestamp-page .input-section .text-input.timestamp-input {
    display: block;
    min-height: var(--btn-min-height);
    height: var(--btn-min-height);
    max-height: var(--btn-min-height);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.35;
    resize: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
}

/* 两栏内：左为单独 input，右为「输入+日历」整行，上下外边距一致 */
#timestamp-page .timestamp-two-col .timestamp-block > .text-input.timestamp-input {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-huge);
}

#timestamp-page .timestamp-two-col .timestamp-datetime-field {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-huge);
}

#timestamp-page .timestamp-two-col .timestamp-datetime-field .text-input.timestamp-input {
    margin: 0;
}

#timestamp-page .timestamp-current-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

#timestamp-page .timestamp-current-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

#timestamp-page .timestamp-current-main {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

/* 字段名固定列宽，数值列左对齐（当前时间戳 / 转换结果共用） */
#timestamp-page {
    --timestamp-label-col: 4.5rem;
}

#timestamp-page .timestamp-field-label {
    flex: 0 0 var(--timestamp-label-col);
    width: var(--timestamp-label-col);
    min-width: var(--timestamp-label-col);
    max-width: var(--timestamp-label-col);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-align: left;
}

#timestamp-page .timestamp-field-value {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    color: var(--color-text-secondary);
    text-align: left;
    word-break: break-all;
}

#timestamp-page .timestamp-result-main {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
}

/* 原型：复制为文本按钮（无描边、无填充） */
#timestamp-page .timestamp-copy-btn {
    flex-shrink: 0;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    background: none;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.4;
    min-height: auto;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
}

#timestamp-page .timestamp-copy-btn:hover:not(:disabled) {
    color: var(--color-primary);
    text-decoration: underline;
}

#timestamp-page .timestamp-copy-btn:disabled {
    color: var(--color-text-placeholder);
    cursor: not-allowed;
    opacity: 0.7;
    text-decoration: none;
}

#timestamp-page .timestamp-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#timestamp-page .timestamp-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
}

#timestamp-page .timestamp-two-col > .timestamp-block {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#timestamp-page .timestamp-two-col .timestamp-result-lines {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 0px) {
    #timestamp-page .timestamp-two-col {
        grid-template-columns: 1fr;
    }

    #timestamp-page .timestamp-two-col > .timestamp-block {
        height: auto;
    }

    #timestamp-page .timestamp-two-col .timestamp-result-lines {
        flex: none;
    }
}

#timestamp-page .timestamp-field-error {
    margin: var(--spacing-sm) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-error);
}

#timestamp-page .timestamp-field-error[hidden] {
    display: none !important;
}

#timestamp-page .timestamp-result-lines {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#timestamp-page .timestamp-result-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

#timestamp-page .timestamp-datetime-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    overflow: visible;
}

#timestamp-page .timestamp-datetime-field .timestamp-input {
    flex: 1;
    min-width: 0;
}

#timestamp-page .timestamp-picker-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-min-height);
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
}

#timestamp-page .timestamp-picker-btn:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-border);
    color: var(--color-primary);
}

#timestamp-page .timestamp-picker-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* Flatpickr 挂到 body，需高于顶栏/主内容，略低于主模态内嵌时可被盖住 */
.flatpickr-calendar {
    z-index: var(--z-datepicker) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
}

#punct-page .punct-text-input,
#keywordsearch-page .punct-text-input {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

#cht-page .punct-result-wrap:not([hidden]) {
    margin-top: var(--spacing-lg);
    width: 100%;
}

#punct-page .punct-result-wrap,
#cht-page .punct-result-wrap {
    width: 100%;
}

#split-page .punct-result-wrap:not([hidden]) {
    margin-top: var(--title-content-gap);
    width: 100%;
}

#punct-page .punct-result-wrap[hidden],
#cht-page .punct-result-wrap[hidden],
#split-page .punct-result-wrap[hidden] {
    display: none !important;
}

/* 文本拆分：无数据时以 placeholder 展示「暂无内容」 */
#split-page .split-output-textarea[data-split-empty="true"]::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

/* 拆比弹窗：定宽列一体框见 `components.css` · `.c-outline-field--combo-fill` */
#splitModal .c-outline-field.error {
    border-color: var(--color-error);
}

#splitModal .c-outline-field.error:focus-within {
    border-color: var(--color-error);
}

#splitModal .c-imgcompress-select-dropdown__panel {
    /* 下拉列表须高于弹窗层（全站 panel 默认 z-index 低于 .modal） */
    z-index: calc(var(--z-modal) + 20);
}

/* 字符统计：输入框 → 按钮/模式 24px；按钮 → 统计区 32px */
#charcount-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#charcount-page .charcount-toolbar {
    margin-top: 24px;
}

#charcount-page .charcount-stats-bar {
    margin-top: 32px;
}

#charcount-page .punct-char-counter {
    margin-top: var(--spacing-xs);
}

#charcount-page .charcount-toolbar .charcount-mode-group {
    margin-top: 0;
    margin-bottom: 0;
}

/* 中文计数字方式：未选中为「主题色描边 + 主色字」，选中仍为实心主色（.chip.active） */
#charcount-page .charcount-mode-group .chip:not(.active):not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-bg);
}

#charcount-page .charcount-mode-group .chip:not(.active):not(:disabled):hover {
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
    background-color: var(--color-bg-hover);
}

#charcount-page .charcount-text-input {
    min-height: 12rem;
    resize: none;
    max-height: min(70vh, 36rem);
}

.charcount-stats-bar {
    padding: var(--spacing-lg) var(--spacing-md);
    background-color: var(--color-bg-muted);
    border: none;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
}

/* 一行撑满、无滚动：前六项随内容变窄；剩余宽度给「= + 统计」；统计格优先完整显示数字 */
.charcount-stats-formula {
    width: 100%;
    box-sizing: border-box;
}

.charcount-stats-items-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* 前六项统计格：统一最小宽度，避免数字位数不同时忽宽忽窄 */
.charcount-stats-items-inner > .charcount-stat-cell {
    min-width: 5.5rem;
}

.charcount-stat-equals-tail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--spacing-sm);
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

.charcount-stat-equals-tail .charcount-stat-op {
    flex: 0 0 auto;
    padding: 0 var(--spacing-xs);
    align-self: center;
}

.charcount-stat-equals-tail .charcount-stat-cell {
    flex: 1 1 auto;
    min-width: 7rem;
    max-width: none;
    overflow: visible;
}

.charcount-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: min(9.5rem, 28vw);
    padding: var(--spacing-md) var(--spacing-sm);
    overflow: hidden;
    background: var(--color-bg);
    border: none;
    border-radius: var(--radius-lg);
    box-sizing: border-box;
}

/* 与其它统计格同底色，不高亮 */
.charcount-stat-cell--total {
    overflow: visible;
}

/* 统计：占满尾段剩余空间，数字尽量完整展示 */
.charcount-stat-cell--total .charcount-stat-value {
    overflow: visible;
    max-width: none;
}

.charcount-stat-cell--total .charcount-stat-value > span:first-child {
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
}

.charcount-stat-cell--total .charcount-stat-label {
    overflow: visible;
    text-overflow: clip;
}

.charcount-stat-value {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-xs);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    line-height: var(--line-height-snug);
}

.charcount-stat-value > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 分类计数为 0 时：数字行（含 ×1/×2）用灰色，有数据后恢复正文色 */
.charcount-stat-value.charcount-stat-value--zero {
    color: var(--color-text-placeholder);
}

.charcount-stat-value.charcount-stat-value--zero .charcount-stat-mult {
    color: var(--color-text-placeholder);
}

/* 分类计数非 0：数字行（含 ×1/×2）用主题色高亮 */
.charcount-stat-value.charcount-stat-value--highlight {
    color: var(--color-primary);
}

.charcount-stat-value.charcount-stat-value--highlight .charcount-stat-mult {
    color: var(--color-primary);
    opacity: 0.92;
}

.charcount-stat-mult {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.charcount-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: var(--line-height-snug);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.charcount-stat-op {
    display: inline-flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    padding: 0 var(--spacing-xs);
    user-select: none;
}

#punctOutput {
    cursor: default;
}

/* 中英混排：输入框 → 按钮 24px；按钮 → 处理结果 32px */
#mixlayout-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#mixlayout-page .mixlayout-toolbar {
    margin-top: 24px;
}

#mixlayout-page .mixlayout-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#mixlayout-page .mixlayout-error:empty {
    display: none;
}

#mixlayout-page .mixlayout-error:not(:empty) {
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

#mixlayout-page .mixlayout-char-counter {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

#mixlayout-page .c-textarea-field .mixlayout-error:not(:empty),
#mixlayout-page .c-textarea-field .mixlayout-char-counter {
    margin-top: 0;
}

.mixlayout-result-wrap {
    width: 100%;
}

.mixlayout-result-wrap[hidden] {
    display: none !important;
}

#mixlayoutOutput {
    min-height: 12rem;
    cursor: default;
}

#mixlayoutRulesBtn.mixlayout-rules-btn--active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-bg-active);
}

.mixlayout-modal-content {
    max-width: 28rem;
}

.mixlayout-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.chargen-rules-modal-content {
    max-width: 28rem;
}

.chargen-rules-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    overflow-y: auto;
}

.chargen-rules-modal-body.chargen-form .chargen-field {
    margin-bottom: 0;
}

.chargen-rules-modal-body.chargen-form .chargen-field .error-message:empty {
    display: none;
}

#chargen-page .input-group > .c-gen-result-list,
#dategen-page .input-group > .c-gen-result-list,
#namegen-page .input-group > .c-gen-result-list,
#emailgen-page .input-group > .c-gen-result-list,
#filegen-page .input-group > .c-gen-result-list {
    margin-top: 0;
}

#dategen-page .input-group > .dategen-main-actions,
#namegen-page .input-group > .namegen-main-actions,
#emailgen-page .input-group > .emailgen-main-actions,
#filegen-page .input-group > .filegen-main-actions,
#chargen-page .input-group > .chargen-main-actions {
    margin-bottom: 0;
}

.mixlayout-rule-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--color-text);
    cursor: pointer;
    line-height: 1.5;
}

.mixlayout-rule-line input[type='checkbox'] {
    margin: 0;
    flex-shrink: 0;
    width: 1.125em;
    height: 1.125em;
    accent-color: var(--color-primary);
}

.mixlayout-rule-sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md) var(--spacing-xxl);
    padding-left: var(--spacing-xl);
    margin-top: var(--spacing-sm);
}

.mixlayout-rule-sub[hidden] {
    display: none !important;
}

.mixlayout-rule-sub-item {
    font-size: var(--font-size-base);
}

.mixlayout-rule-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* 字符生成 */
.chargen-form .input-label {
    margin-bottom: var(--spacing-md);
}

.chargen-field {
    margin-bottom: var(--spacing-xxl);
}

/*
 * 文件名生成 / 邮箱生成 / 名字生成 / 日期生成 / 字符生成：字段块之间净距 24px（--spacing-xxl）
 * - 相邻 .chargen-field 仅用上 margin-top，本块 margin-bottom:0
 * - 无文案的 .error-message 不占位
 * - 选项区去掉与标签叠用的 margin-top；下划线输入与 .input-label / .chargen-field-label 下边距衔接
 * - 字符生成：`#chargen-page .input-group.chargen-form` 使用 flex `gap: 24px` 统一字段块 / 操作条 / 结果列表间距；承接区仍为 `.c-choice-row + .chargen-input-align { margin-top: 24px }`
 */
#filegen-page .chargen-field,
#emailgen-page .chargen-field,
#namegen-page .chargen-field,
#dategen-page .chargen-field,
#chargen-page .chargen-field {
    margin-bottom: 0;
}

#filegen-page .input-group > .chargen-field ~ .chargen-field,
#emailgen-page .input-group > .chargen-field ~ .chargen-field,
#namegen-page .input-group > .chargen-field ~ .chargen-field,
#dategen-page .input-group > .chargen-field ~ .chargen-field {
    margin-top: var(--spacing-xxl);
}

/* 字符生成：弹窗/旧主表单字段块纵向节奏 24px；主区 workspace 用 32px（见 .chargen-workspace） */
#chargen-page .input-group.chargen-form:not(.chargen-workspace) {
    gap: var(--spacing-xxl);
}

#chargen-page .input-group.chargen-form.chargen-workspace,
#dategen-page .input-group.dategen-form.dategen-workspace,
#namegen-page .input-group.chargen-form.namegen-workspace,
#emailgen-page .input-group.chargen-form.emailgen-workspace,
#filegen-page .input-group.chargen-form.filegen-workspace {
    gap: var(--c-tool-toolbar-list-gap);
}

#chargen-page .input-group > .chargen-field ~ .chargen-field {
    margin-top: 0;
}

#filegen-page .input-group > .transcribe-toolbar,
#emailgen-page .input-group > .transcribe-toolbar,
#namegen-page .input-group > .transcribe-toolbar,
#dategen-page .input-group > .transcribe-toolbar {
    margin-top: var(--spacing-xxl);
}

#chargen-page .input-group > .transcribe-toolbar {
    margin-top: 0;
}

#filegen-page .chargen-field .error-message:empty,
#emailgen-page .chargen-field .error-message:empty,
#namegen-page .chargen-field .error-message:empty,
#dategen-page .chargen-field .error-message:empty,
#chargen-page .chargen-field .error-message:empty {
    display: none;
}

#filegen-page .chargen-field .c-choice-row,
#filegen-page .chargen-field .filegen-format-group,
#emailgen-page .chargen-field .c-choice-row,
#namegen-page .chargen-field .c-choice-row,
#dategen-page .chargen-field .c-choice-row,
#chargen-page .chargen-field .c-choice-row {
    margin-top: 0;
}

#filegen-page .chargen-field .chargen-underline-wrap,
#emailgen-page .chargen-field .chargen-underline-wrap,
#namegen-page .chargen-field .chargen-underline-wrap,
#dategen-page .chargen-field .chargen-underline-wrap,
#chargen-page .chargen-field .chargen-underline-wrap {
    margin-top: 0;
}

/* 字符生成：单选行与下方承接区（位数等）净距 24px */
#chargen-page .chargen-field .c-choice-row + .chargen-input-align {
    margin-top: var(--spacing-xxl);
}

/* 「固定字符」与「固定前缀/后缀」承接区间距略加大，与副标题 + 下划线的视觉呼吸一致 */
#chargen-page .chargen-field .chargen-segment--fixed + .chargen-input-align {
    margin-top: var(--spacing-xxxl);
}

/* 无固定前后缀时承接区折叠，避免与下一字段之间出现「承接区空白 + 字段间距」双份 */
#chargen-page .chargen-field:has(#chargenFixedHost[hidden]) .chargen-segment--fixed + .chargen-input-align {
    margin-top: 0;
}

/* 承接区标签 / 正文区：版式见 `components.css` · `.c-underline-field__label` / `__body`（与 `.chargen-*-input-host__*` 叠用） */

.chargen-field-label {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.chargen-field-label-block {
    margin-top: 0;
}

/* 单选分段与弹窗规则区一致，使用 .chip / .chip-group */
.chargen-segment--fixed,
.chargen-segment--digits {
    margin-bottom: 0;
}

/* 字符生成页内选项：次级样式（选中为浅底+主题描边/字色），尺寸小于全站默认 chip */
.chargen-form .chip {
    min-height: 30px;
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
}

.chargen-form .chip.active {
    background-color: var(--color-bg-active);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.chargen-form .chip.active:hover:not(:disabled) {
    background-color: var(--color-result-copy-bg-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

.chargen-form .chip-group {
    gap: var(--spacing-sm);
}

.chargen-underline-wrap {
    margin-top: var(--spacing-sm);
    max-width: 100%;
}

/* 固定字符 / 生成位数 / 生成数量：同一列宽，左右对齐；「生成数量」短列见 `components.css` 的 `.chargen-input-align--quantity` */
.chargen-input-align {
    width: 100%;
    max-width: 15rem;
}

.chargen-input-align .chargen-underline-wrap {
    width: 100%;
}

.chargen-input-align .chargen-input-underline,
.chargen-input-align .chargen-underline-wrap .dategen-select {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.chargen-input-align .chargen-digits-range {
    width: 100%;
    gap: var(--spacing-sm);
}

.chargen-input-align .chargen-digits-range .number-stepper--chargen {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

/* 字符生成：下划线 + 右侧面性三角（与输入文字垂直居中对齐） */
.number-stepper--chargen {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    transition: border-color 0.2s ease;
}

.number-stepper--chargen:focus-within {
    border-bottom-color: var(--color-primary);
}

.number-stepper--chargen:has(.number-stepper__field.error) {
    border-bottom-color: var(--color-error);
}

.number-stepper--chargen .number-stepper__spin {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 0;
    align-self: center;
    pointer-events: none;
}

.number-stepper--chargen .number-stepper__spin .number-stepper__arrow {
    pointer-events: auto;
}

.number-stepper--chargen .number-stepper__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-height: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.number-stepper--chargen .number-stepper__arrow:hover {
    color: var(--color-text);
    background-color: var(--color-bg-hover);
}

.number-stepper--chargen .number-stepper__arrow:active {
    color: var(--color-primary);
}

.number-stepper--chargen .number-stepper__arrow:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
    position: relative;
    z-index: var(--z-raised);
}

.number-stepper--chargen .number-stepper__icon {
    display: block;
    flex-shrink: 0;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.number-stepper--chargen .number-stepper__field {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    text-align: start;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

.number-stepper--chargen .number-stepper__field:focus {
    outline: none;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}

.chargen-input-underline {
    width: 100%;
    padding: var(--spacing-sm) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-size: var(--font-size-base);
    font-family: inherit;
    background: transparent;
    color: var(--color-text);
    transition: var(--transition-base);
}

.chargen-input-underline:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}

/* 下划线文本框占位：与下划线下拉「请选择」同为 `--color-text-placeholder` */
.chargen-input-underline::placeholder {
    color: var(--color-text-placeholder);
}

.chargen-digits-range {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-top: 0;
    width: 100%;
}

/* 字符生成 · 承接区内「最小～最大」与副标题间距已由 __title 下边距承担 */
#chargen-page .chargen-digits-input-host .chargen-digits-range {
    margin-top: 0;
}

/* 固定位数单行 / 非固定位数最小·最大：输入区宽度 80px（与生成数量一致） */
#chargen-page .chargen-digits-input-host__body > .chargen-underline-wrap {
    width: 80px;
    max-width: 100%;
    box-sizing: border-box;
}

#chargen-page .chargen-digits-range > .chargen-underline-wrap {
    flex: 0 0 auto;
    width: 80px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0;
}

/* 与 display:flex 同优先级时，作者样式会盖住 [hidden] 的默认 display:none，需显式隐藏 */
.chargen-digits-range[hidden],
.chargen-underline-wrap[hidden] {
    display: none !important;
}

/* 生成字符：六选一屏同行展示，项间距统一（与文件名扩展名行 `--spacing-lg` 一致） */
.chargen-form .chargen-type-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    width: fit-content;
    max-width: 100%;
}

.chargen-form .chargen-type-group.error {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
}

/* 文件名生成 · 生成格式：三行复选框横向排列，无分组标题与浅底容器 */
.chargen-form .filegen-format-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    width: fit-content;
    max-width: 100%;
}

/* 组内间距与「无固定 / 固定前缀 / 固定后缀」等 .chip-group 一致 */
.chargen-form .chargen-type-row {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 文件名生成：扩展名行内选项间距 16px（叠在 `.chargen-type-row` 之上） */
.chargen-form .chargen-type-row.filegen-format-row {
    gap: var(--spacing-lg);
}

/* 底部操作条与英文大小写页 .transcribe-toolbar 共用布局 */
.chargen-main-actions {
    margin-bottom: var(--spacing-lg);
}

/* 日期生成 · 原生下拉（与 `input.chargen-input-underline` 同契约：仅底边线 + 透明底） */
.dategen-select {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm) var(--select-padding-inline-end) var(--spacing-sm) 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    font-size: var(--font-size-base);
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4;
    color: var(--color-text);
    background-color: transparent;
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right var(--select-chevron-inset-end) center;
    background-size: var(--select-chevron-bg-size) var(--select-chevron-bg-size);
}

.dategen-select:hover:not(:disabled) {
    border-bottom-color: var(--color-primary);
}

.dategen-select:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    box-shadow: none;
}

.dategen-select:disabled {
    color: var(--color-text-placeholder);
    border-bottom-color: var(--color-border-light);
    cursor: not-allowed;
    background-image: var(--icon-chevron-down-disabled);
    opacity: 0.85;
}

.dategen-select--parts.error,
.dategen-select--format.error {
    border-bottom-color: var(--color-error);
}

/* 未选择「生成内容」预设时：与 `input.chargen-input-underline::placeholder` 同色（`--color-text-placeholder`） */
.dategen-select--parts.dategen-select--placeholder,
.dategen-select--parts:has(option[value='']:checked) {
    color: var(--color-text-placeholder);
}

.dategen-select--parts.dategen-select--placeholder option:not([value='']),
.dategen-select--parts:has(option[value='']:checked) option:not([value='']) {
    color: var(--color-text);
}

/* 与 [hidden] 的 flex 子项等冲突时保证隐藏 */
#dategenFormatWrap[hidden] {
    display: none !important;
}

/* 多行生成结果列表：见 `components.css` `.c-gen-result-*` */

/* 打赏页面 */
.reward-content {
    max-width: none;
    margin: 0;
    padding: var(--spacing-huge) 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xxxl);
    width: 100%;
    flex: 1;
    box-sizing: border-box;
}

.reward-text {
    font-size: var(--font-size-md);
    line-height: 1.8;
    color: var(--color-text);
    text-align: center;
    max-width: 42rem;
}

.reward-qr-box {
    width: 300px;
    height: 300px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md);
    overflow: hidden;
}

.reward-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.reward-qr-placeholder {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.reward-thanks {
    font-size: var(--font-size-md);
    color: var(--color-text);
    text-align: center;
}

#reward-page.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: visible;
    position: relative;
}

/* 平板及以下：正文与顶栏导航同一左右边距（与 .top-nav 一致） */
@media (max-width: 640px) {
    .page-breadcrumb__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-breadcrumb__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 1280px) {
    .page-breadcrumb,
    .title-section,
    .input-section,
    .button-section {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .result-footer-bar {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .result-content {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    }

    .reward-content {
        padding: var(--spacing-huge) var(--spacing-lg);
    }

    #symchar-page .symchar-scroll-inner {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .top-nav {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

/* 响应式设计 */
@media (max-width: 0px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-shell__topbar {
        grid-template-columns: 1fr;
    }

    .app-shell__brand {
        grid-column: 1;
        width: 100%;
        box-sizing: border-box;
        margin-right: 0;
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
    }

    .top-nav {
        grid-column: 1;
        width: 100%;
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    .app-shell__column {
        grid-column: 1;
        grid-row: 2;
    }

    .logo-text {
        font-size: var(--font-size-md);
    }

    .input-section {
        flex-direction: column;
    }

    .input-group {
        min-width: 100%;
    }

    .main-title {
        font-size: var(--font-size-h1-mobile);
    }

    .nav-link {
        font-size: var(--font-size-base);
    }

    .main-content {
        padding: var(--spacing-xl) 0;
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    .site-footer {
        padding-left: max(var(--grid-side-padding), var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--grid-side-padding), var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    .title-section,
    .input-section,
    .button-section {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    .top-nav-flyout {
        max-width: none;
        left: 0;
        right: 0;
        width: 100%;
        padding-left: max(var(--grid-side-padding), var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--grid-side-padding), var(--spacing-md), env(safe-area-inset-right, 0px));
    }

    .top-nav-flyout__list {
        --top-nav-flyout-item-width: 120px;
        grid-template-columns: repeat(2, minmax(var(--top-nav-flyout-item-width), 1fr));
        justify-content: start;
        row-gap: var(--spacing-sm);
    }

    .button-section {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--spacing-sm);
    }

    .transcribe-toolbar,
    .dedupe-toolbar,
    .mixlayout-toolbar,
    .chargen-main-actions,
    .dategen-main-actions,
    #textsort-page .textsort-toolbar,
    #punct-page .punct-toolbar,
    #charcount-page .charcount-toolbar {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .modal {
        padding: var(--spacing-md);
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom, 0px));
    }

    .tooltip {
        max-width: calc(100vw - 32px);
        min-width: min(300px, calc(100vw - 32px));
        left: 50%;
        transform: translateX(-50%) translateY(10px);
    }

    .tooltip.show {
        transform: translateX(-50%) translateY(0);
    }

    .tooltip::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 小屏手机：字符统计一行过宽时换行 */
@media (max-width: 0px) {
    .charcount-stats-items-inner {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: var(--spacing-sm);
    }

    .charcount-stat-equals-tail {
        flex-basis: 100%;
        flex-grow: 1;
        justify-content: center;
        margin-top: var(--spacing-xs);
    }
}

/* 弹窗样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: var(--layout-modal-max-width);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border-light);
}

.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-tertiary);
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    color: var(--color-text);
    background-color: var(--color-bg-hover);
}

.modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.modal-close .c-line-icon--close-line {
    display: block;
}

.modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--color-border-light);
}

.tool-guide-modal {
    max-width: min(40rem, calc(100vw - 2 * var(--spacing-xl)));
}

/* 教程弹窗：纯排版（留白 + 字阶），无装饰；关闭钮见 `.c-line-icon--close-line` */
.modal-content.tool-guide-modal .modal-header {
    border-bottom-color: var(--color-border-light);
}

.modal-content.tool-guide-modal .modal-footer {
    border-top-color: var(--color-border-light);
}

.modal-content.tool-guide-modal .modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    letter-spacing: -0.01em;
}

/* 正文区内栏宽与上下留白：内容块栈居中，阅读宽度受限 */
.modal-content.tool-guide-modal .modal-body.tool-guide-modal__body {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xxl);
}

.tool-guide-doc {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxxl);
    max-width: 36rem;
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

.tool-guide-block {
    margin: 0;
    padding: 0;
}

.tool-guide-block__title {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    line-height: 1.4;
    letter-spacing: 0;
}

.tool-guide-block__text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.tool-guide-list {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    list-style-position: outside;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.tool-guide-list li {
    margin: 0;
    padding-inline-start: 0.35em;
}

.tool-guide-list--ordered {
    padding-inline-start: 1.65rem;
    list-style-type: decimal;
}

.tool-guide-list--bullets {
    padding-inline-start: 1.25rem;
    list-style-type: disc;
}

/* 规则设置区域 */
.rule-section {
    margin-bottom: var(--spacing-xxl);
}

.rule-section:last-child {
    margin-bottom: 0;
}

.rule-section-header {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    position: relative;
    max-width: 100%;
}

/* 标签与说明图标同一行垂直居中（避免 .chargen-field-label 的 block + margin-bottom 把图标挤偏） */
.rule-section-header .chargen-field-label,
.rule-section-header .rule-label {
    display: inline-block;
    margin: 0;
    line-height: var(--line-height-heading);
}

.rule-section-header .rule-info-icon {
    flex-shrink: 0;
    align-self: center;
}

.rule-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.rule-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: var(--transition-base);
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    position: relative;
}

.rule-info-icon:hover {
    color: var(--color-primary);
}

.rule-info-icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.rule-info-icon .c-line-icon--information-line,
.rule-info-icon__graphic {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
}

.rule-tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-md));
    left: 0;
    right: auto;
    width: max-content;
    max-width: min(440px, calc(100vw - 24px));
    min-width: min(280px, calc(100vw - 24px));
    background-color: var(--color-tooltip);
    color: var(--color-bg);
    padding: var(--spacing-md) var(--spacing-xxl);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    white-space: normal;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-tooltip);
    box-shadow: var(--shadow-md);
    transform: translateY(-5px);
    pointer-events: none;
}

.rule-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 9px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-tooltip);
    z-index: var(--z-tooltip-arrow);
}

/* 靠下的表单项：气泡在图标上方展开，避免挡住下方输入区 */
.rule-tooltip--above {
    top: auto;
    bottom: calc(100% + var(--spacing-md));
    transform: translateY(5px);
}

.rule-tooltip--above::before {
    bottom: auto;
    top: 100%;
    left: 9px;
    border-bottom-color: transparent;
    border-top-color: var(--color-tooltip);
}

.rule-info-icon:hover .rule-tooltip,
.rule-info-icon:focus .rule-tooltip,
.rule-info-icon:focus-within .rule-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rule-info-icon:focus {
    outline: none;
}

.rule-info-icon:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 按钮组（Chip）：选中 `.active`：图片镜像独立翻转开关、字符统计模式等共用 */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--btn-min-height);
    padding: 0 var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition-base);
    outline: none;
    font-weight: var(--font-weight-medium);
}

.chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chip:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

.chip:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.chip.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

.chip.active:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg);
}

.chip-group.error {
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* 额外输入区域 */
.rule-extra {
    margin-top: var(--spacing-md);
}

/* 同时勾选「字母」与「其他字符」时：收紧两栏默认间距 */
#specialCharExtra.rule-extra--tight-follow {
    margin-top: var(--spacing-xs);
}

/* 拆比时两项均未填写：拉开间距，便于展示两行错误提示 */
#specialCharExtra.rule-extra--tight-follow.rule-extra--dual-error-gap {
    margin-top: var(--spacing-lg);
}

.rule-select,
.rule-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-body);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    background-color: var(--color-bg);
    color: var(--color-text);
}

.rule-select:focus,
.rule-select:focus-visible,
.rule-input:focus,
.rule-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.rule-select.error,
.rule-input.error {
    border-color: var(--color-error);
}

.rule-input::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.rule-input::-webkit-input-placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.rule-input::-moz-placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.rule-input:-ms-input-placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

.rule-select {
    cursor: pointer;
    appearance: none;
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: right var(--select-chevron-inset-end) center;
    background-size: var(--select-chevron-bg-size) var(--select-chevron-bg-size);
    padding-right: var(--select-padding-inline-end);
}

.rule-select:disabled {
    cursor: not-allowed;
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-border);
    color: var(--color-disabled-text);
    background-image: var(--icon-chevron-down-disabled);
}

.rule-select option[value=""] {
    color: var(--color-text-placeholder);
}

.rule-select:has(option[value=""]:checked) {
    color: var(--color-text-placeholder);
    font-weight: var(--font-weight-body);
}

/* 错误提示 */
.error-message {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-md);
    min-height: 18px;
}

/*
 * 图片压缩 / PDF 压缩、证件照与本地图片工具：无报错文案时折叠占位，
 * 避免全局 .error-message 的 margin-top + min-height 叠在「上传框 ↔ 底栏」之间（目标为 --c-tool-uploader-toolbar-gap）。
 * 视频类见 components.css `.c-tool-media-workspace > .error-message:empty`。
 */
.imgcompress-uploader > .error-message,
.idphoto-uploader > .error-message,
.videocompress-uploader.c-tool-media-workspace > .error-message,
.imgblur-card > .error-message,
.imgdewm-card > .error-message {
    margin-top: 0;
    margin-bottom: 0;
}

.imgcompress-uploader > .error-message:empty,
.idphoto-uploader > .error-message:empty,
.videocompress-uploader.c-tool-media-workspace > .error-message:empty,
.imgcrop-card > .error-message:empty,
.imgwatermark-card > .error-message:empty,
.imgdewm-card > .error-message:empty,
.imgmirror-card > .error-message:empty,
.imgrotate-card > .error-message:empty,
.imgpixelate-card > .error-message:empty,
.imgblur-card > .error-message:empty,
.imgstitchh-uploader > .error-message:empty,
.imgstitchv-uploader > .error-message:empty {
    display: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* 上传区首块拖放框：顶距由标题区承担，勿叠 upload-dropzone 默认 margin-top */
.imgcompress-uploader > .upload-dropzone:first-child,
.imgcompress-uploader > .videocompress-dropzone:first-child,
.idphoto-uploader > .upload-dropzone:first-child,
.videocompress-uploader.c-tool-media-workspace > .upload-dropzone:first-child,
.videocompress-uploader.c-tool-media-workspace > .videocompress-dropzone:first-child {
    margin-top: 0;
}

/* 上传框（含空 error 行已移除）→ 操作栏：仅 24px */
.imgcompress-uploader > .imgcompress-toolbar,
.idphoto-uploader > .idphoto-toolbar,
.videocompress-uploader.c-tool-media-workspace > .videocompress-toolbar {
    margin-top: 24px;
}

/* 有上传框：操作栏 → 下方任务列表 / PDF 预览网格 32px */
.imgcompress-uploader > .imgcompress-toolbar + .imgcompress-list-wrap,
.imgcompress-uploader > .imgcompress-toolbar + .pdftoimg-grid-wrap {
    margin-top: var(--c-tool-toolbar-list-gap);
}

/* 提取关键帧：操作栏 → 关键帧网格 32px */
.videocompress-uploader.c-tool-media-workspace > .videocompress-toolbar + .keyframeextract-grid {
    margin-top: var(--c-tool-toolbar-list-gap);
}

/* 字符生成：与拆比弹窗一致，错误文案与输入列宽对齐 */
.chargen-form .error-message {
    max-width: 15rem;
}

.chargen-input-underline.error {
    border-bottom-color: var(--color-error);
}

/* 步进器内输入无边框，错误态由 .number-stepper--chargen:has(.error) 体现 */
.number-stepper--chargen .number-stepper__field.error {
    border-bottom-color: transparent !important;
}

.chargen-input-underline.error::placeholder {
    color: var(--color-error);
}

/* 结果页面 */
.result-content {
    padding: var(--spacing-md) 0 var(--spacing-lg);
    max-width: none;
    width: 100%;
    margin: 0;
    flex: 1;
    box-sizing: border-box;
}

.result-layout {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-huge) + var(--spacing-xxl));
}

.result-section {
    margin-bottom: 0;
}

.result-section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xxl) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

/* 去重结果：标题行内「？」与拆比结果区说明图标一致 */
.result-section-title--with-help {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

#dedupe-page .dedupe-inline-result .result-section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--spacing-xxl);
}

#result-page .result-section-title {
    border-bottom: none;
    padding-bottom: 0;
}

.result-row {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.result-row:last-child {
    margin-bottom: 0;
}

.result-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg);
    padding: 0;
    overflow: visible;
}

.result-box-full {
    width: 100%;
}

.result-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.result-box-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.result-textarea-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    border: var(--tool-text-io-border);
    border-radius: var(--tool-text-io-radius);
    overflow: hidden;
    background-color: var(--tool-text-io-output-bg);
}

.result-textarea {
    flex: 1;
    width: 100%;
    min-height: 200px;
    padding: var(--tool-text-io-padding-block) 6.25rem var(--tool-text-io-padding-block)
        var(--tool-text-io-padding-inline);
    border: none;
    border-radius: 0;
    resize: none;
    overflow-y: auto;
}

.result-textarea:focus {
    outline: none;
}

/* 响应式设计 - 弹窗 */
@media (max-width: 0px) {
    .modal-content {
        max-width: 100%;
        margin: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 95vh;
    }

    .chip-group {
        flex-direction: column;
    }

    .chip {
        width: 100%;
        text-align: center;
    }

    /* 字符生成「生成字符」：单行/折行统一项间距 */
    .chargen-form .chargen-type-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .chargen-form .filegen-format-group {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-lg);
        width: fit-content;
        max-width: 100%;
    }

    .chargen-form .chargen-type-group .c-choice {
        width: auto;
    }

    .rule-tooltip {
        max-width: calc(100vw - 48px);
        min-width: min(280px, calc(100vw - 48px));
    }
}

/* 响应式设计 - 结果页面 */
@media (max-width: 0px) {
    .result-row {
        flex-direction: column;
    }

    .result-box {
        width: 100%;
    }

    .result-textarea {
        min-height: 150px;
        padding: var(--spacing-md) 5.75rem var(--spacing-md) var(--spacing-md);
    }

    .reward-content {
        padding: var(--spacing-xxxl) var(--spacing-15);
        gap: var(--spacing-xxl);
    }

    .reward-text {
        font-size: var(--font-size-base);
    }

    .reward-qr-box {
        width: 250px;
        height: 250px;
    }

    .reward-qr-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .reward-qr-placeholder {
        font-size: var(--font-size-md);
    }

    .reward-thanks {
        font-size: var(--font-size-base);
    }
}

/* 全局复制成功 toast（由 #global-copy-toast 使用）：顶端居中 */
.app-toast {
    position: fixed;
    left: 50%;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    transform: translateX(-50%) translateY(calc(-100% - 1.25rem));
    z-index: var(--z-toast);
    padding: var(--spacing-sm) var(--grid-side-padding);
    min-width: 9rem;
    max-width: min(90vw, 22rem);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-bg);
    background-color: var(--color-toast-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.app-toast.app-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 关键字检索：主操作行 + 预览卡片内顶栏检索（句子/段落） */

/* 输入框 → 主操作行 24px */
#keywordsearch-page .input-section--dedupe-single {
    margin-bottom: 0;
}

#keywordsearch-page .keywordsearch-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
    margin-top: 24px;
    width: 100%;
    box-sizing: border-box;
}

#keywordsearch-page .keywordsearch-controls__actions {
    justify-content: space-between;
    align-items: center;
    margin-top: 0;
    width: 100%;
}

#keywordsearch-page .keywordsearch-main-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

#keywordsearch-page .keywordsearch-extract-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-tertiary);
    min-height: 1.25em;
}

/* 一体框内控件走 `components.css` 的 `.imgcompress-format__combo-input` / `__select--combo`，勿叠用正文行高以免撑破 `.c-outline-field` */
#keywordsearch-page .c-textarea-field--keywordsearch-input .punct-text-input {
    min-height: 14rem;
}

#keywordsearch-page .c-textarea-field__meta-row--keywordsearch-counter {
    justify-content: flex-end;
}

/* 与上列 display:flex 同优先级时 [hidden] 会被盖住（见 .chargen-underline-wrap[hidden]） */
#keywordsearch-page #keywordsearchPreviewPane[hidden],
#keywordsearch-page #keywordsearchResult[hidden] {
    display: none !important;
}

#keywordsearch-page .keywordsearch-main-toolbar {
    flex-wrap: wrap;
    min-width: 0;
    gap: var(--spacing-sm) var(--spacing-md);
}

#keywordsearch-page .keywordsearch-preview-pane {
    margin-top: var(--spacing-md);
}

#keywordsearch-page .keywordsearch-preview-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    padding: var(--spacing-md);
}

#keywordsearch-page .keywordsearch-preview-toolbar {
    width: 100%;
    min-width: 0;
}

#keywordsearch-page .keywordsearch-result-anchor {
    margin-top: var(--spacing-md);
    min-height: 0;
}

#keywordsearch-page #keywordsearchHitNav .c-keywordsearch-toolbar-row__nav .btn {
    min-width: 4.5rem;
}

/* 顶栏粘贴：方形 icon btn，不受页级 `--btn-text-action-min-width` 约束；一体框同源描边，悬停与页级 `.btn:hover` 主色描边区分 */
#keywordsearch-page #keywordsearchHitNav .c-keywordsearch-main-paste-btn.btn {
    min-width: var(--btn-min-height);
    max-width: var(--btn-min-height);
}

#keywordsearch-page #keywordsearchHitNav .c-keywordsearch-main-paste-btn.btn:hover:not(:disabled) {
    border-color: var(--color-border);
    background-color: var(--color-bg-hover);
    color: var(--color-text);
}

/*
 * 检索结果：视觉与 .text-input 一致（边框、圆角、聚焦环），
 * 行为为只读区域故使用 cursor: default（同 #textsortOutput）
 */
#keywordsearch-page .keywordsearch-result {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: normal;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text);
    min-height: 12rem;
    max-height: min(70vh, 36rem);
    overflow: auto;
    transition: var(--transition-base);
    cursor: default;
}

#keywordsearch-page .keywordsearch-preview-pane:fullscreen,
#keywordsearch-page .keywordsearch-preview-pane:-webkit-full-screen,
#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen {
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    padding-top: max(var(--spacing-lg), calc(env(safe-area-inset-top, 0px) + var(--spacing-md)));
}

#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen {
    position: fixed;
    inset: 0;
    z-index: var(--z-maximized-pane);
}

#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen .keywordsearch-preview-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: none;
    padding: 0;
}

#keywordsearch-page .keywordsearch-preview-pane:fullscreen .keywordsearch-result-anchor,
#keywordsearch-page .keywordsearch-preview-pane:-webkit-full-screen .keywordsearch-result-anchor,
#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen .keywordsearch-result-anchor {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

#keywordsearch-page .keywordsearch-preview-pane:fullscreen #keywordsearchHitNav.c-keywordsearch-toolbar-row,
#keywordsearch-page .keywordsearch-preview-pane:-webkit-full-screen #keywordsearchHitNav.c-keywordsearch-toolbar-row,
#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen #keywordsearchHitNav.c-keywordsearch-toolbar-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
}

#keywordsearch-page .keywordsearch-preview-pane:fullscreen .c-keywordsearch-toolbar-row__view,
#keywordsearch-page .keywordsearch-preview-pane:-webkit-full-screen .c-keywordsearch-toolbar-row__view,
#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen .c-keywordsearch-toolbar-row__view {
    margin-left: auto;
}

#keywordsearch-page .keywordsearch-preview-pane:fullscreen .keywordsearch-result,
#keywordsearch-page .keywordsearch-preview-pane:-webkit-full-screen .keywordsearch-result,
#keywordsearch-page .keywordsearch-preview-pane.keywordsearch-preview-pane--fullscreen .keywordsearch-result {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    background: var(--color-bg);
    border-radius: 0;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    padding: var(--spacing-lg);
}

#keywordsearch-page .keywordsearch-result:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#keywordsearch-page .keywordsearch-result-empty {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-base);
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
}

#keywordsearch-page .keywordsearch-result .kw-unit--dim {
    color: var(--color-text-placeholder);
    font-weight: var(--font-weight-body);
}

/* 含关键词的整句：浅青铺底 + 轻圆角 */
#keywordsearch-page .keywordsearch-result .kw-unit--hit {
    color: var(--color-text);
    font-weight: var(--font-weight-body);
    background-color: var(--keywordsearch-sentence-hit-bg);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.14em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.06);
}

/* 当前定位句：主色略加重 + 外环聚焦态 */
#keywordsearch-page .keywordsearch-result .kw-unit.kw-unit--hit.kw-unit--current {
    background-color: var(--keywordsearch-sentence-current-bg);
    color: var(--color-text);
    font-weight: var(--font-weight-strong);
    box-shadow:
        inset 0 0 0 1px rgba(var(--color-primary-rgb), 0.12),
        0 0 0 2px var(--color-focus-ring);
    border-left: none;
}

/* 关键词：令牌浅底 + 主色下划线；当前命中略加重底 */
#keywordsearch-page .keywordsearch-result mark,
#keywordsearch-page .keywordsearch-result .kw-mark {
    display: inline;
    background-color: var(--keywordsearch-mark-bg);
    color: var(--color-text);
    font-weight: inherit;
    padding: 0.06em 0.12em;
    border: none;
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
    text-decoration: underline solid var(--keywordsearch-mark-underline);
    text-decoration-thickness: max(1px, 0.09em);
    text-underline-offset: 0.14em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

#keywordsearch-page .keywordsearch-result mark.kw-mark--current,
#keywordsearch-page .keywordsearch-result .kw-mark.kw-mark--current {
    background-color: var(--keywordsearch-mark-current-bg);
    box-shadow: none;
    color: var(--color-text-keyword-current);
    font-weight: var(--font-weight-strong);
    text-decoration-color: var(--color-primary);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 符号字符：与其它页同列宽/内边距；仅 .symchar-scroll-body 纵向滚动，主列不双滚动 ---------- */
/* 中间列 flex 链：本页占满主区域剩余高度，内部再分给滚动区 */
.main-content:has(#symchar-page.active) {
    display: flex;
    flex-direction: column;
    /* basis 用 0：否则 auto 会按子项内容撑高，中间列无法限高，内部滚动条不出现 */
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

#symchar-page.page.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

#symchar-page.page.active > .title-section {
    flex-shrink: 0;
}

/* 仅负责纵向 flex + 滚动区高度，不加整页外框 */
#symchar-page .symchar-page-shell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* 工具条 → 符号内容区：24px */
#symchar-page .symchar-sticky-header {
    flex: 0 0 auto;
    width: 100%;
    background: var(--color-bg);
    z-index: var(--z-page-sticky);
    box-sizing: border-box;
    padding-bottom: 24px;
}

/* 无上方面包屑/大输入框时，不保留 .transcribe-toolbar 与「主输入」之间的 --main-action-gap */
#symchar-page .symchar-toolbar.transcribe-toolbar {
    margin-top: 0;
    width: 100%;
}

#symchar-page .symchar-view-toggle.btn {
    gap: var(--spacing-sm);
    padding-inline: var(--spacing-lg);
    min-width: 0;
    width: auto;
    max-width: none;
}

#symchar-page .symchar-view-toggle__face {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#symchar-page .symchar-view-toggle__face[hidden] {
    display: none !important;
}

#symchar-page .symchar-view-toggle .c-line-icon {
    width: var(--line-icon-size);
    height: var(--line-icon-size);
    flex-shrink: 0;
}

#symchar-page .symchar-view-toggle__label {
    line-height: 1.4;
    white-space: nowrap;
}

#symchar-page .symchar-sticky-header .input-section--dedupe-single {
    margin-bottom: 0;
}

/* 数据区：仅用纵向滚动；不用 100vw（会出现底部横向滚动条）。滚动条在列右缘，默认隐藏，由 JS 在滚动时加类短暂显示 */
#symchar-page .symchar-scroll-body {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 var(--spacing-huge);
    overflow-y: auto;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#symchar-page .symchar-scroll-body::-webkit-scrollbar {
    width: 10px;
}

#symchar-page .symchar-scroll-body::-webkit-scrollbar-track {
    background: transparent;
}

#symchar-page .symchar-scroll-body::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
}

#symchar-page .symchar-scroll-body.symchar-scroll-body--scrolling {
    scrollbar-color: rgba(var(--color-text-rgb), 0.38) transparent;
}

#symchar-page .symchar-scroll-body.symchar-scroll-body--scrolling::-webkit-scrollbar-thumb {
    background-color: rgba(var(--color-text-rgb), 0.3);
}

/* 与全站 .title-section / .input-section 同宽的内层；min-width:0 防止网格把横向撑出滚动条 */
#symchar-page .symchar-scroll-inner {
    max-width: min(var(--layout-max-width), 100%);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
    container-type: inline-size;
    container-name: symchar-scroll;
}

/* 内联搜索组件：`.c-inline-search` 见 `components.css`；此处仅控制工具栏内占位宽 */
#symchar-page .symchar-toolbar__search {
    flex: 0 1 min(22rem, 100%);
    min-width: 0;
    max-width: min(22rem, 48%);
    margin-left: auto;
}

.symchar-card-view:not([hidden]),
.symchar-list-view:not([hidden]) {
    width: 100%;
    min-width: 0;
    min-height: 10rem;
}

.symchar-card-grid {
    display: grid;
    /* 列数略增使单格略小，gap 加大使卡片之间留白更明显 */
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
}

@media (max-width: 0px) {
    .symchar-card-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 0px) {
    .symchar-toolbar {
        flex-wrap: wrap;
    }

    #symchar-page .symchar-toolbar__search {
        max-width: 100%;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .symchar-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
}

@media (max-width: 0px) {
    .symchar-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-md);
    }
}

/* 符号卡片：`.c-glyph-card` / `--tile` 见 `components.css`；格内字形放大（cqw 相对 .symchar-scroll-inner） */
#symchar-page .c-glyph-card--tile {
    font-size: clamp(var(--font-size-md), 4cqw, var(--font-size-xxl));
    font-weight: var(--font-weight-medium);
}

#symchar-page .c-glyph-card--list-thumb {
    width: 4.25rem;
    height: 4.25rem;
    min-width: 4.25rem;
    min-height: 4.25rem;
    font-size: clamp(var(--font-size-xl), 1.65rem, var(--font-size-xxl));
    font-weight: var(--font-weight-medium);
}

/* 卡片悬停说明浮层：`.c-floating-popover` 见 `components.css` */

.symchar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-xl);
    row-gap: var(--spacing-md);
    width: 100%;
}

@media (max-width: 0px) {
    .symchar-list {
        grid-template-columns: 1fr;
    }
}

/* 整行可点：四周与「符号—文案」间距统一用 --spacing-md，悬停块圆角略大、轻阴影 */
.symchar-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-md);
    min-height: calc(4.25rem + 2 * var(--spacing-md));
    padding: var(--spacing-md);
    border: 0;
    border-radius: var(--radius-lg);
    outline: none;
    box-shadow: none;
    background: transparent;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-snug);
    color: var(--color-text);
    min-width: 0;
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.symchar-list-item:hover {
    background-color: var(--color-bg-hover);
    box-shadow:
        0 0 0 1px var(--color-border-light),
        0 4px 14px rgba(var(--color-text-rgb), 0.06);
}

.symchar-list-item:focus-visible {
    outline: none;
    background-color: var(--color-bg-hover);
    box-shadow:
        0 0 0 2px var(--color-focus-ring),
        0 4px 14px rgba(var(--color-text-rgb), 0.06);
}

/* 列表左侧符号格：`.c-glyph-card--list-thumb` 见 `components.css` */
#symchar-page .symchar-list-item:hover .c-glyph-card--list-thumb {
    border-color: var(--color-primary);
    background-color: var(--color-bg);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.12);
}

#symchar-page .symchar-list-item:focus-visible .c-glyph-card--list-thumb {
    border-color: var(--color-primary);
    background-color: var(--color-bg);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.12);
}

.symchar-list-meta {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-snug);
    word-break: break-word;
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color 0.2s ease;
}

.symchar-list-item:hover .symchar-list-meta {
    color: var(--color-text);
}

.symchar-empty {
    box-sizing: border-box;
    text-align: center;
    color: var(--color-text-placeholder);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xl) var(--spacing-md);
    margin: 0;
}

.symchar-empty:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(14rem, 45vh);
}

@media (max-width: 1280px) {
    #symchar-page .symchar-scroll-inner {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }
}

@media (max-width: 0px) {
    #symchar-page .symchar-scroll-inner {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right, 0px));
    }
}

/* ---------- JSON 格式化：编辑器区 → 按钮 24px ---------- */
#jsonfmt-page .jsonfmt-page-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jsonfmt-page-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* 单栏编辑区高度 */
#jsonfmt-page {
    --jsonfmt-editor-column-height: 22rem;
    /* 行号列与文本区必须共用同一字号与行高，否则滚动时逐行错位 */
    --jsonfmt-code-font-size: var(--font-size-sm);
    --jsonfmt-code-line-height: 1.55;
}

.jsonfmt-panes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
}

.jsonfmt-panes--single {
    max-width: 100%;
}

.jsonfmt-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--spacing-sm);
}

.jsonfmt-editor-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* 固定高度：内容在编辑器内滚动 */
    height: var(--jsonfmt-editor-column-height, 22rem);
    min-height: var(--jsonfmt-editor-column-height, 22rem);
    max-height: var(--jsonfmt-editor-column-height, 22rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    min-width: 0;
}

.jsonfmt-cm-mount {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.jsonfmt-cm-mount--error {
    /* 保留 class 以便 JS 标记，但不在内部画边框，避免被编辑器内容遮挡 */
}

/* 错误高亮画在外层 shell，避免被内容遮挡 */
.jsonfmt-editor-shell--error {
    outline: 2px solid var(--color-error-ring);
    outline-offset: 2px;
    border-color: var(--color-error-border-soft);
}

#jsonfmt-page .jsonfmt-cm-mount .cm-editor {
    flex: 1;
    min-height: 0;
    border-radius: 0;
}

#jsonfmt-page .jsonfmt-cm-mount .cm-scroller {
    font-family: var(--font-family-mono);
    font-size: var(--jsonfmt-code-font-size, var(--font-size-sm));
    line-height: var(--jsonfmt-code-line-height, 1.55);
}

#jsonfmt-page .jsonfmt-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    /* 与上方编辑器间距仅由 `.jsonfmt-pane` 的 `column-gap` 承担，勿再叠 `margin-top` */
    margin-top: 0;
    min-height: 1.5rem;
}

#jsonfmt-page .jsonfmt-meta-row--end {
    justify-content: flex-end;
}

/* 脚条：报错（左）与字数（右）同行（与 `components.css` · `.c-textarea-field__meta-row` 一致） */
#jsonfmt-page .jsonfmt-meta-row--input-footer {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

#jsonfmt-page .jsonfmt-meta-row--input-footer .jsonfmt-error:not(:empty) {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

#jsonfmt-page .jsonfmt-meta-row--input-footer .jsonfmt-counter {
    flex-shrink: 0;
    margin-left: auto;
}

#jsonfmt-page .jsonfmt-meta-row--input-footer .jsonfmt-error:not(:empty) ~ .jsonfmt-counter {
    margin-left: 0;
}

/* 脚条内抵消全局 `.error-message` / `.char-counter` 的上外边距 */
#jsonfmt-page .jsonfmt-meta-row .error-message,
#jsonfmt-page .jsonfmt-meta-row .char-counter {
    margin-top: 0;
}

#jsonfmt-page .jsonfmt-error:empty {
    display: none;
}

.jsonfmt-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: 0;
    width: 100%;
}

.jsonfmt-action-bar__left,
.jsonfmt-action-bar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

/* ---------- 图片压缩 ---------- */
.imgcompress-page-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.imgcompress-card {
    width: 100%;
    background: transparent;
    padding: 0;
    min-width: 0;
}

.imgcompress-uploader__title {
    font-size: 1rem;
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

.imgcompress-uploader__desc {
    margin-top: var(--spacing-xs);
    color: var(--color-text-placeholder);
    font-size: var(--font-size-sm);
}

/* 上传拖放外壳：图片 / PDF / PPT / 裁剪 / 视频 / 证件照等工具共用（勿再叠用独立虚线变体） */
.upload-dropzone {
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-xxl) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--color-bg);
    cursor: pointer;
    user-select: none;
    min-height: var(--upload-dropzone-min-height);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    position: relative;
}

.upload-dropzone::before {
    content: none;
}

.upload-dropzone:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.16);
}

.upload-dropzone.dragover {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

/* 已选图预览态：拖放区作为预览外槽（高度见 components.css 图片工具统一 560px） */
.idphoto-dropzone.has-image:not(.dragover),
.upload-dropzone.has-image.idphoto-dropzone:not(.dragover) {
    cursor: default;
}

.upload-dropzone__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-stroke-neutral-soft);
    box-shadow: 0 2px 8px var(--color-shadow-soft);
}

.upload-dropzone__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.upload-dropzone__icon .c-line-icon {
    opacity: 0.98;
}

#timestamp-page .timestamp-picker-btn img {
    width: var(--line-icon-size);
    height: var(--line-icon-size);
    display: block;
    opacity: 0.95;
    filter: var(--icon-theme-filter);
}

/*
 * 复选框：SVG 作 mask，用 background-color 控制未选/选中色（未选灰、选中主题色）
 * — 中英混排弹窗
 */
#mixlayoutModal input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: var(--line-icon-size);
    height: var(--line-icon-size);
    margin: 0;
    border: 0;
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    background-color: var(--color-text-placeholder);
    transition: background-color 0.15s ease, opacity 0.15s ease;
    -webkit-mask: url("Icon/checkbox-blank-line.svg") center / var(--line-icon-size) var(--line-icon-size) no-repeat;
    mask: url("Icon/checkbox-blank-line.svg") center / var(--line-icon-size) var(--line-icon-size) no-repeat;
}

#mixlayoutModal input[type="checkbox"]:hover:not(:disabled) {
    background-color: var(--color-text-tertiary);
}

#mixlayoutModal input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    -webkit-mask: url("Icon/checkbox-line.svg") center / var(--line-icon-size) var(--line-icon-size) no-repeat;
    mask: url("Icon/checkbox-line.svg") center / var(--line-icon-size) var(--line-icon-size) no-repeat;
}

#mixlayoutModal input[type="checkbox"]:checked:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

#mixlayoutModal input[type="checkbox"]:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

#mixlayoutModal input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* 图片压缩「下载全部」：仅用钮内 `.c-line-icon--download-line.btn-primary-lead-icon`（勿再叠 `::before`，与其它工具页主钮一致） */

.imgcompress-file-input {
    display: none;
}

.upload-dropzone__hint {
    color: var(--color-text);
    font-weight: var(--font-weight-heading);
    letter-spacing: 0.01em;
    font-size: var(--font-size-base);
}

.upload-dropzone__subhint {
    color: var(--color-text-placeholder);
    font-size: var(--font-size-sm);
}

.upload-dropzone > .c-upload-progress.c-upload-progress--inline:not([hidden]) {
    margin-top: var(--spacing-md);
    flex-shrink: 0;
}

.imgcompress-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.imgcompress-toolbar > .imgcompress-actions {
    flex-shrink: 0;
}

/* 图片压缩：无左侧格式一体框时，操作钮仍靠右 */
.imgcompress-toolbar > .imgcompress-actions:only-child {
    margin-left: auto;
}

/* 工具栏/一体框下拉组件：见 `components.css`「工具栏 / 一体框下拉组件」；`.imgcompress-toolbar` 底栏布局仍在本文件 */

/* PDF 压缩底栏操作：与图片压缩一致，使用全站 `.btn` / `.btn-primary`（`--btn-padding-inline`、`.c-line-icon--download-line`） */

.imgcompress-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* 压缩任务列表：见 `components.css`「媒体 · 压缩任务列表」 */

.imgcompress-preview-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-media-preview);
    background: var(--color-scrim-backdrop);
}

.imgcompress-preview-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.imgcompress-preview-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: none;
    background: transparent;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--spacing-lg), env(safe-area-inset-top, 0px))
        max(var(--spacing-lg), env(safe-area-inset-right, 0px))
        max(var(--spacing-lg), env(safe-area-inset-bottom, 0px))
        max(var(--spacing-lg), env(safe-area-inset-left, 0px));
    overflow: hidden;
    cursor: default;
    isolation: isolate;
}

.imgcompress-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: var(--upload-image-bg);
    border-radius: var(--radius-md);
    transform-origin: center center;
    transition: transform 0.06s linear;
    pointer-events: none;
    will-change: transform;
    user-select: none;
}

/* 预览全屏层右上角按钮（下载 / 关闭）：`components.css`「媒体预览浮层 · 右上角图标按钮」 */

/* 视频页：上传遮罩由 `.c-upload-progress--overlay` + `[hidden]` 控制，不再依赖页根覆写 display */

#videocompress-page.videocompress-page--busy .videocompress-dropzone,
#keyframeextract-page.keyframeextract-page--busy .videocompress-dropzone,
#videoconvert-page.videoconvert-page--busy .videocompress-dropzone,
#audiovideosplit-page.audiovideosplit-page--busy #audiovideosplitDropzone {
    cursor: progress;
}

#videocompress-page.videocompress-page--compressing .videocompress-preview-wrap .videocompress-processing {
    display: inline-flex;
}


#audiovideosplit-page #audiovideosplitListWrap[hidden] {
    display: none !important;
}

#videoconvert-page #videoconvertListWrap[hidden] {
    display: none !important;
}

#imgbase64-page .idphoto-dropzone.has-image:not(.dragover) {
    cursor: default;
}

/* ==================== 图片转 Base64 ==================== */
/* 预览外槽 / 舞台 / 媒体见 `components.css` `.c-tool-image-preview*` */

/* 上传区 → 按钮 24px；按钮 → 输出文本框 32px */
#imgbase64-page .idphoto-uploader > .idphoto-toolbar {
    margin-top: 24px;
}

#imgbase64-page .idphoto-uploader > .idphoto-toolbar + .imgbase64-result-wrap:not([hidden]) {
    margin-top: 32px;
    width: 100%;
}

#imgbase64-page .imgbase64-result-wrap[hidden] {
    display: none !important;
}

/* 输出文本框：与去空行等 `*-result-textarea` 同源固定高度与排版 */
#imgbase64-page .imgbase64-result-textarea {
    min-height: clamp(8rem, 22vw + 3rem, 22rem);
    height: clamp(8rem, 22vw + 3rem, 22rem);
    max-height: min(50vh, 24rem);
    resize: none;
    overflow-y: auto;
}

@container input-section (min-width: 0) {
    #imgbase64-page .imgbase64-result-textarea {
        min-height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
        height: clamp(8rem, calc(22cqw + 1.75rem), 22rem);
    }
}

#imgbase64-page .c-textarea-field__meta-row .imgbase64-meta {
    margin: 0;
    margin-left: auto;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ==================== Base64 转图片 ==================== */
.base64toimg-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.base64toimg-card {
    width: 100%;
    min-width: 0;
}

/* 输入区（含字数脚条）→ 按钮 24px；按钮 → 预览输出区 32px */
#base64toimg-page .base64toimg-card > .c-textarea-field + .base64toimg-toolbar {
    margin-top: 24px;
}

#base64toimg-page .base64toimg-card > .base64toimg-toolbar + .base64toimg-preview-shell {
    margin-top: 32px;
}

#base64toimg-page .base64toimg-char-counter {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

#base64toimg-page .base64toimg-preview-shell {
    margin-top: 0;
}

#base64toimg-page .base64toimg-preview-shell[hidden] {
    display: none !important;
}

/* 与证件照同源：悬停显示放大镜遮罩，指针手势（见 `.idphoto-zoom-overlay`） */
#base64toimg-page .base64toimg-preview-shell:not([hidden]) .idphoto-preview-wrap {
    position: relative;
    cursor: pointer;
}

#base64toimg-page .base64toimg-preview-shell:not([hidden]) .idphoto-preview-wrap:hover .idphoto-zoom-overlay {
    display: flex;
    opacity: 1;
}

#base64toimg-page .base64toimg-meta {
    margin: var(--spacing-sm) 0 0;
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* ==================== 图片裁剪 ==================== */
.imgcrop-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgcrop-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgcrop-card.imgcrop-card--uploaded .imgcrop-dropzone {
    display: none !important;
}

/* 裁剪预览：外框 / 舞台 / 媒体尺寸见 `components.css` `.c-tool-image-preview*` */

/* 无报错时去掉错误行占位，标题底到灰框顶 = .title-section 的 margin-bottom（--title-content-gap 32px） */
#imgcrop-page.imgcrop-card--uploaded #imgcropError:empty,
.imgcrop-card.imgcrop-card--uploaded #imgcropError:empty {
    display: none;
}

/* 图片预览外槽：12px 留白、随图增高，见 `components.css` `.c-tool-image-preview--frame-pad` */

.imgcrop-selection {
    position: absolute;
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 9999px var(--color-scrim-selection);
    box-sizing: border-box;
    cursor: move;
}

.imgcrop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    box-sizing: border-box;
}

.imgcrop-handle--nw { left: -6px; top: -6px; cursor: nwse-resize; }
.imgcrop-handle--ne { right: -6px; top: -6px; cursor: nesw-resize; }
.imgcrop-handle--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.imgcrop-handle--se { right: -6px; bottom: -6px; cursor: nwse-resize; }

.imgcrop-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: nowrap;
    min-width: 0;
}

.imgcrop-toolbar .imgcrop-size-inputs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.imgcrop-toolbar .imgcrop-actions {
    flex-shrink: 0;
    flex-wrap: nowrap !important;
}

/* 未上传：隐藏长/宽（无意义占位）；上传后见脚本为 `.imgcrop-card` 添加的 `imgcrop-card--uploaded` */
.imgcrop-card:not(.imgcrop-card--uploaded) .imgcrop-size-inputs {
    display: none !important;
}

.imgcrop-card:not(.imgcrop-card--uploaded) .imgcrop-toolbar {
    justify-content: flex-end;
}

.imgcrop-size-inputs {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: center;
}

/*
 * 裁剪「长/宽」：仅数字输入、无下拉箭头；此处左右用同一内边距，避免继承 `.videocompress-combo.c-outline-field` 的「左松右紧」导致框内左右留白不一致。
 * 限定在 `#imgcrop-page .imgcrop-size-inputs`，不影响打码/视频等带 Chevron 的 `videocompress-combo--select` 或其它页。
 */
#imgcrop-page .imgcrop-size-inputs .videocompress-combo.c-outline-field {
    padding: 0 var(--c-outline-field-pad-inline-start);
}

/* 与视频压缩同款 .videocompress-combo（components.css）；上传前仅占「-」，有图后常见 3～5 位像素 */
#imgcrop-page .imgcrop-size-inputs .videocompress-combo__input--imgcrop-dim {
    width: clamp(3.25rem, 6.5ch + 0.5rem, 5.25rem);
    min-width: 3.25rem;
    max-width: 5.5rem;
    box-sizing: border-box;
    /* 避免部分 WebKit 下 number 仍绘出类似下拉的 stepper，与「长/宽」一体框误认 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.imgcrop-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.imgcrop-guide {
    margin-top: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--color-surface-raised);
}

.imgcrop-guide > summary {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.imgcrop-guide__content {
    margin-top: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
}

.imgcrop-guide__content p {
    margin: 0 0 var(--spacing-md);
}

.imgcrop-guide__content p:last-child {
    margin-bottom: 0;
}

/* 图片加水印（与裁剪页同版心、本地 Canvas） */
.imgwatermark-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgwatermark-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgwatermark-card.imgwatermark-card--uploaded .imgwatermark-dropzone {
    display: none !important;
}

/* 加水印预览：与裁剪共用 `components.css` `.c-tool-image-preview*` */

#imgwatermark-page.imgwatermark-card--uploaded #imgwatermarkError:empty,
.imgwatermark-card.imgwatermark-card--uploaded #imgwatermarkError:empty {
    display: none;
}

/* 加水印预览：悬停放大镜 + 点击全屏（与证件照 / Base64 转图同源） */
#imgwatermark-page .imgwatermark-workspace:not([hidden]) {
    cursor: pointer;
}

#imgwatermark-page .imgwatermark-workspace:not([hidden]) .idphoto-preview-wrap {
    position: relative;
}

#imgwatermark-page .imgwatermark-workspace:not([hidden]) .idphoto-preview-wrap:hover .idphoto-zoom-overlay {
    display: flex;
    opacity: 1;
}

#imgwatermark-page .imgwatermark-workspace:not([hidden]) .idphoto-preview-wrap:not(:hover) .idphoto-zoom-overlay {
    display: none;
    opacity: 0;
}

.imgwatermark-controls {
    margin-top: var(--c-tool-uploader-toolbar-gap);
}

/* 加水印：第一行左水印文字 280px + 字体左对齐、颜色·间距右对齐；第二行左角度·字号·透明度 + 右重置/下载 */
.imgwatermark-fields-split {
    display: grid;
    grid-template-columns: var(--imgwatermark-text-combo-width) minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: end;
}

.imgwatermark-fields-split__col {
    min-width: 0;
}

.imgwatermark-fields-split__col--text {
    width: var(--imgwatermark-text-combo-width);
    max-width: 100%;
}

#imgwatermark-page .imgwatermark-fields-split__col--typography {
    display: flex;
    min-width: 0;
    width: 100%;
}

.imgwatermark-fields-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
}

/* 字体：第一行左对齐 */
.imgwatermark-fields-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--spacing-md);
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

/* 颜色 / 间距：第一行统一右对齐 */
.imgwatermark-fields-trailing {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-left: auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

#imgwatermark-page .imgwatermark-fields-split__col--text .imgcompress-format.imgcompress-format--combo.c-outline-field {
    box-sizing: border-box;
    max-width: min(100%, var(--imgwatermark-text-combo-width));
}

#imgwatermark-page .imgwatermark-fields-stack .videocompress-field--combo,
#imgwatermark-page .imgwatermark-fields-trailing .videocompress-field--combo {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

.imgwatermark-row--params {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#imgwatermark-page .imgwatermark-params {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

#imgwatermark-page .imgwatermark-params .videocompress-field--combo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
}


#imgwatermark-page .imgwatermark-row__actions.imgwatermark-toolbar {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: auto;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .imgwatermark-fields-split {
        grid-template-columns: 1fr;
    }

    #imgwatermark-page .imgwatermark-fields-split__col--text {
        width: 100%;
        max-width: 100%;
    }

    #imgwatermark-page .imgwatermark-fields-split__col--text .imgcompress-format.imgcompress-format--combo.c-outline-field {
        max-width: 100%;
    }

    #imgwatermark-page .imgwatermark-fields-trailing {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    #imgwatermark-page .imgwatermark-row--params {
        flex-direction: column;
        align-items: stretch;
    }

    #imgwatermark-page .imgwatermark-row__actions.imgwatermark-toolbar {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* 图片镜像：与裁切/加水印同版心；底栏左翻转 / 右重置+下载 */
.imgmirror-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgmirror-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgmirror-card.imgmirror-card--uploaded .imgmirror-dropzone {
    display: none !important;
}

#imgmirror-page.imgmirror-card--uploaded #imgmirrorError:empty,
.imgmirror-card.imgmirror-card--uploaded #imgmirrorError:empty {
    display: none;
}

.imgmirror-toolbar--split {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    min-width: 0;
}

.imgmirror-toolbar--split .imgmirror-toolbar__left {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.imgmirror-toolbar--split .imgmirror-toolbar__right {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.imgmirror-toolbar__left,
.imgmirror-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

/* 镜像方向：主题色按钮；开启镜像时 `.active` 实心，未开启时描边主色 */
#imgmirror-page .imgmirror-toolbar__left .imgmirror-flip-btn.btn-primary:not(.active):not(:disabled) {
    background-color: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

#imgmirror-page .imgmirror-toolbar__left .imgmirror-flip-btn.btn-primary:not(.active):not(:disabled):hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

#imgmirror-page .imgmirror-toolbar__left .imgmirror-flip-btn.btn-primary.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-bg);
}

#imgmirror-page .imgmirror-toolbar__left .imgmirror-flip-btn.btn-primary.active:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-bg);
}

#imgmirror-page .imgmirror-toolbar__left .imgmirror-flip-btn.btn-primary.active:focus-visible {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#imgmirror-page .imgmirror-workspace.c-tool-image-preview[hidden] {
    display: none !important;
}

.imgrotate-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgrotate-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgrotate-card.imgrotate-card--uploaded .imgrotate-dropzone {
    display: none !important;
}

#imgrotate-page.imgrotate-card--uploaded #imgrotateError:empty,
.imgrotate-card.imgrotate-card--uploaded #imgrotateError:empty {
    display: none;
}

.imgrotate-toolbar--split {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    min-width: 0;
}

.imgrotate-toolbar__left,
.imgrotate-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.imgrotate-toolbar--split .imgrotate-toolbar__left {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.imgrotate-toolbar--split .imgrotate-toolbar__right {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* 图片旋转 · 步长下拉：与压缩页工具栏下拉同高 */
#imgrotate-page .imgrotate-step-field {
    min-width: 0;
    flex: 0 1 auto;
}

#imgrotate-page .imgrotate-workspace.c-tool-image-preview[hidden] {
    display: none !important;
}

/* 预览 Canvas 等比缩放见 components.css `.c-tool-image-preview__stage > canvas` 与脚本 aspect-ratio */

/* ==================== 图片打码 ==================== */
.imgpixelate-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgpixelate-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgpixelate-card.imgpixelate-card--uploaded .imgpixelate-dropzone {
    display: none !important;
}

#imgpixelate-page.imgpixelate-card--uploaded #imgpixelateError:empty,
.imgpixelate-card.imgpixelate-card--uploaded #imgpixelateError:empty {
    display: none;
}

.imgpixelate-stage.c-tool-image-preview__stage {
    user-select: none;
    touch-action: none;
}

.imgcrop-stage.c-tool-image-preview__stage {
    user-select: none;
    touch-action: none;
}

.imgpixelate-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.imgpixelate-selection {
    position: absolute;
    z-index: 2;
    border: 2px dashed var(--color-primary);
    box-sizing: border-box;
    cursor: move;
    background: rgba(var(--color-primary-rgb), 0.07);
}

.imgpixelate-selection:focus-visible {
    outline: 2px solid rgba(var(--color-primary-rgb), 0.35);
    outline-offset: 2px;
}

.imgpixelate-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-sizing: border-box;
}

.imgpixelate-handle:hover {
    background: rgba(var(--color-primary-rgb), 0.14);
    border-color: var(--color-primary);
}

.imgpixelate-handle--nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}

.imgpixelate-handle--n {
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.imgpixelate-handle--ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}

.imgpixelate-handle--e {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.imgpixelate-handle--se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

.imgpixelate-handle--s {
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

.imgpixelate-handle--sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

.imgpixelate-handle--w {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.imgpixelate-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-width: 0;
}

/* ==================== 图片去水印 ==================== */
.imgdewm-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgdewm-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgdewm-card.imgdewm-card--uploaded .imgdewm-dropzone {
    display: none !important;
}

#imgdewm-page.imgdewm-card--uploaded #imgdewmError:empty,
.imgdewm-card.imgdewm-card--uploaded #imgdewmError:empty {
    display: none;
}

.imgdewm-stage.c-tool-image-preview__stage {
    user-select: none;
    touch-action: none;
}

.imgdewm-stage--full {
    cursor: default;
}

.imgdewm-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.imgdewm-selection {
    position: absolute;
    z-index: 2;
    border: 2px dashed var(--color-primary);
    box-sizing: border-box;
    cursor: move;
    background: rgba(var(--color-primary-rgb), 0.07);
}

.imgdewm-region-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(var(--color-text-rgb), 0.08);
}

.imgdewm-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-sizing: border-box;
}

.imgdewm-handle--nw { left: -6px; top: -6px; cursor: nwse-resize; }
.imgdewm-handle--n { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.imgdewm-handle--ne { right: -6px; top: -6px; cursor: nesw-resize; }
.imgdewm-handle--e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.imgdewm-handle--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.imgdewm-handle--s { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.imgdewm-handle--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.imgdewm-handle--w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.imgdewm-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-width: 0;
}

.imgdewm-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

.imgdewm-toolbar__right {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-left: auto;
}

#imgdewm-page .imgdewm-toolbar-combo {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

#imgdewm-page .imgdewm-workspace.c-tool-image-preview[hidden] {
    display: none !important;
}

/* ==================== 图片分割 ==================== */
.imgsplit-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgsplit-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgsplit-uploader.c-tool-media-workspace > .error-message:empty {
    display: none;
}

#imgsplit-page .idphoto-preview-wrap.c-tool-image-preview__stage > .imgsplit-lines-overlay,
#imgsplit-page .idphoto-preview-wrap.c-tool-image-preview__stage > .imgsplit-free-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

#imgsplit-page .idphoto-preview-wrap.c-tool-image-preview__stage.imgsplit-stage--free {
    cursor: crosshair;
}

#imgsplit-page .idphoto-dropzone.has-image:not(.dragover),
#imgsplit-page .upload-dropzone.has-image.idphoto-dropzone:not(.dragover) {
    cursor: default;
}

#imgsplit-page .idphoto-preview-wrap.c-tool-image-preview__stage.imgsplit-stage--free > .imgsplit-free-layer {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}

#imgsplit-page .idphoto-preview-wrap.c-tool-image-preview__stage.imgsplit-stage--free > .imgsplit-free-layer .imgsplit-free-handle {
    pointer-events: none;
}

.imgsplit-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.imgsplit-line--v {
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}

.imgsplit-line--h {
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

.imgsplit-free-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

.imgsplit-free-line--v {
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
}

.imgsplit-free-line--h {
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-50%);
}

.imgsplit-free-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    padding: 0;
    border: 2px solid var(--color-text);
    border-radius: 2px;
    background: var(--color-bg);
    cursor: crosshair;
    touch-action: none;
    z-index: 2;
}

.imgsplit-free-handle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.imgsplit-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-width: 0;
}

.imgsplit-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

.imgsplit-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

#imgsplit-page .imgsplit-toolbar-combo {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

#imgsplit-page #imgsplitListWrap[hidden] {
    display: none !important;
}

/* ==================== 图片模糊 ==================== */
.imgblur-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgblur-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgblur-card.imgblur-card--uploaded .imgblur-dropzone {
    display: none !important;
}

#imgblur-page.imgblur-card--uploaded #imgblurError:empty,
.imgblur-card.imgblur-card--uploaded #imgblurError:empty {
    display: none;
}

.imgblur-card > .c-tool-image-preview[hidden] {
    display: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.imgblur-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    min-width: 0;
}

.imgblur-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

.imgblur-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

#imgblur-page .imgblur-toolbar-combo {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

/* ==================== 拼长图（横版） ==================== */
.imgstitchh-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgstitchh-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgstitchh-card.imgstitchh-card--uploaded #imgstitchhDropzone {
    display: none !important;
}

#imgstitchh-page.imgstitchh-card--uploaded #imgstitchhError:empty,
.imgstitchh-card.imgstitchh-card--uploaded #imgstitchhError:empty {
    display: none;
}

.imgstitchh-uploader.c-tool-media-workspace > .upload-dropzone {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

#imgstitchhDropzone {
    position: relative;
}

.imgstitchh-card.imgstitchh-card--uploaded .imgstitchh-uploader {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-sizing: border-box;
}

#imgstitchh-page .imgstitchh-workspace {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 未上传：上传框 → 底栏仅 24px（勿叠 workspace margin + actions-bar margin） */
#imgstitchh-page .imgstitchh-workspace--idle {
    margin-top: 24px;
}

/** 未上传图：仅展示底部操作栏（按钮禁用），裁剪区/缩略图隐藏 */
#imgstitchh-page:not(.imgstitchh-card--uploaded) .imgstitchh-main.c-tool-image-preview,
.imgstitchh-card:not(.imgstitchh-card--uploaded) .imgstitchh-main.c-tool-image-preview {
    display: none !important;
}

#imgstitchh-page .imgstitchh-workspace--idle .imgstitchh-section--thumbs {
    display: none !important;
}

/**
 * 空闲态若保留 `.imgstitchh-actions-bar` 默认样式（边框+渐变底），整行会像一块空卡片；
 * 与已上传时拆边框后的底栏对齐，只保留右侧按钮。
 */
#imgstitchh-page .imgstitchh-workspace--idle .imgstitchh-actions-bar {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-uploader {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-main.c-tool-image-preview {
    margin-top: 0;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-workspace {
    margin-top: var(--c-tool-uploader-toolbar-gap, 24px);
    gap: 0;
}

/* 已上传：编辑区↔缩略图 24px；缩略图↔操作栏 32px */
#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-workspace > .imgstitchh-section {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: var(--spacing-md) 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-workspace > .imgstitchh-section--editor {
    margin-bottom: 24px;
    padding: 0;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-workspace > .imgstitchh-section--thumbs {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#imgstitchh-page.imgstitchh--multi.imgstitchh-card--uploaded .imgstitchh-workspace > .imgstitchh-section--editor {
    padding-left: 0;
    padding-right: 0;
}

/* 多图：横向条带工作台（首张铺满高度，其余垂直居中留白）；隐藏侧栏 ghost */
#imgstitchh-page.imgstitchh--multi .imgstitchh-ghost {
    display: none !important;
}

/* 多图：外槽/内舞台见 components.css `.c-tool-image-preview*` */

#imgstitchh-page.imgstitchh--multi .imgstitchh-move-hit {
    position: absolute;
    top: 0;
    z-index: 1;
    touch-action: none;
    box-sizing: border-box;
    height: 100%;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-move-hit:not([hidden]) {
    cursor: move;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handles {
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-main.c-tool-image-preview {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-viewport.c-tool-image-preview__stage {
    overflow: visible;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-scroll-inner {
    position: relative;
    height: 100%;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-scroll-inner .imgstitchh-handles,
#imgstitchh-page.imgstitchh--multi .imgstitchh-scroll-inner .imgstitchh-move-hit {
    position: absolute;
    width: auto;
}

/* 仅首张：区块标题/说明视觉隐藏（仍可被读屏拾取） */
#imgstitchh-page.imgstitchh--single .imgstitchh-workspace .imgstitchh-section__title,
#imgstitchh-page.imgstitchh--single .imgstitchh-workspace .imgstitchh-section__lead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#imgstitchh-page.imgstitchh--single.imgstitchh-card--uploaded .imgstitchh-workspace {
    gap: 0;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-viewport.c-tool-image-preview__stage {
    overflow: visible;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-view-canvas.c-tool-image-preview__media {
    pointer-events: none;
    object-fit: unset;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-ghost {
    display: none !important;
}

/* 首张：与图片裁剪一致 — 拖选区（move）平移裁剪框，画布不接指针避免「拖图片」手感 */
#imgstitchh-page.imgstitchh--single .imgstitchh-move-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    touch-action: none;
    box-sizing: border-box;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-move-hit:not([hidden]) {
    cursor: move;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-handles {
    z-index: 2;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-handle {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: var(--color-bg);
    box-sizing: border-box;
}

#imgstitchh-page.imgstitchh--single .imgstitchh-handle:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
}

/* 单图：handles 层 = 选区框，角/边手柄相对选区定位（与 imgcrop 一致） */
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--nw { left: -6px; top: -6px; cursor: nwse-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--ne { right: -6px; top: -6px; cursor: nesw-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--n { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--s { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
#imgstitchh-page.imgstitchh--single .imgstitchh-handle--w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* 已上传：缩略图行 ↔ 底栏按钮 32px；勿再叠加 uploader-toolbar-gap */
#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-uploader .imgstitchh-actions-bar.transcribe-toolbar {
    margin-top: var(--c-tool-toolbar-list-gap);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* `hidden` 默认会被本段 `display:flex` 盖掉，须显式恢复为不展示 */
#imgstitchh-page .imgstitchh-workspace[hidden] {
    display: none !important;
}

#imgstitchh-page .imgstitchh-section {
    margin: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

#imgstitchh-page .imgstitchh-section__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    line-height: var(--line-height-heading);
}

#imgstitchh-page .imgstitchh-section__lead {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    max-width: 42rem;
}

#imgstitchh-page .imgstitchh-section--editor .imgstitchh-section__lead {
    margin-bottom: var(--spacing-lg);
}

#imgstitchh-page .imgstitchh-main:not(.c-tool-image-preview) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgb(var(--color-neutral-page-fill-rgb, 247 248 250));
    border: 1px dashed var(--color-border-light);
    box-sizing: border-box;
}

#imgstitchh-page.imgstitchh-card--uploaded .imgstitchh-main.c-tool-image-preview {
    gap: 0;
    margin-top: 0;
}

#imgstitchh-page .imgstitchh-ghost {
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    flex-shrink: 0;
    align-self: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

#imgstitchh-page .imgstitchh-viewport:not(.c-tool-image-preview__stage) {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    align-self: center;
}

#imgstitchh-page .imgstitchh-view-canvas:not(.c-tool-image-preview__media) {
    display: block;
    max-width: 100%;
    height: auto;
    touch-action: none;
    cursor: grab;
}

#imgstitchh-page .imgstitchh-view-canvas:not(.c-tool-image-preview__media):active {
    cursor: grabbing;
}

#imgstitchh-page .imgstitchh-handles {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2;
}

#imgstitchh-page .imgstitchh-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-sizing: border-box;
    pointer-events: auto;
}

#imgstitchh-page .imgstitchh-handle:hover {
    background: rgba(var(--color-primary-rgb), 0.14);
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--n {
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--e {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--s {
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

#imgstitchh-page.imgstitchh--multi .imgstitchh-handle--w {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

#imgstitchh-page .imgstitchh-section--thumbs {
    min-width: 0;
    overflow-x: auto;
}

#imgstitchh-page .imgstitchh-thumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm) 0;
    min-height: 5.5rem;
}

#imgstitchh-page .imgstitchh-thumb {
    position: relative;
    padding: 3px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md, 8px);
    overflow: visible;
    background: var(--color-bg);
    cursor: pointer;
    line-height: 0;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
    box-sizing: border-box;
}

#imgstitchh-page .imgstitchh-thumb__canvas-wrap {
    overflow: hidden;
    border-radius: calc(var(--radius-md, 8px) - 3px);
    line-height: 0;
}

#imgstitchh-page .imgstitchh-thumb__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease;
}

/* 精确指针 + 支持悬停：默认隐藏，悬停或键盘焦点在缩略图内时再显示 */
@media (hover: hover) and (pointer: fine) {
    #imgstitchh-page .imgstitchh-thumb:not(:hover):not(:focus-within) .imgstitchh-thumb__remove {
        opacity: 0;
        pointer-events: none;
    }

    #imgstitchh-page .imgstitchh-thumb:hover .imgstitchh-thumb__remove,
    #imgstitchh-page .imgstitchh-thumb:focus-within .imgstitchh-thumb__remove {
        opacity: 1;
        pointer-events: auto;
    }
}

#imgstitchh-page .imgstitchh-thumb__remove:hover {
    background: rgba(17, 24, 39, 0.92);
}

#imgstitchh-page .imgstitchh-thumb__remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#imgstitchh-page .imgstitchh-thumb__remove-icon {
    font-size: 14px;
    line-height: 1;
}

#imgstitchh-page .imgstitchh-thumb:hover {
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#imgstitchh-page .imgstitchh-thumb--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

#imgstitchh-page .imgstitchh-thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#imgstitchh-page .imgstitchh-thumb canvas {
    display: block;
    vertical-align: top;
}

#imgstitchh-page .imgstitchh-thumb--add {
    min-width: 5.5rem;
    min-height: 5.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border);
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-text-secondary);
}

#imgstitchh-page .imgstitchh-thumb--add:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

#imgstitchh-page .imgstitchh-thumb-add-icon {
    opacity: 0.85;
}

/* 添图坑位内上传标略大于工具栏默认 20px，与大方格视觉匹配 */
#imgstitchh-page .imgstitchh-thumb-add-icon.c-line-icon--upload-line {
    width: 1.5rem;
    height: 1.5rem;
}

/** 固定 8 坑位中未满时的占位，不可点击、不可上传 */
#imgstitchh-page .imgstitchh-thumb--placeholder {
    min-width: 5.5rem;
    min-height: 5.5rem;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-md, 8px);
    background: rgba(0, 0, 0, 0.03);
    pointer-events: none;
    cursor: default;
    opacity: 0.55;
}

#imgstitchh-page .imgstitchh-uploader .imgstitchh-actions-bar.transcribe-toolbar {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

#imgstitchh-page .imgstitchh-actions-bar {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(var(--color-primary-rgb), 0.03) 100%);
    box-sizing: border-box;
}

#imgstitchh-page .imgstitchh-actions-bar.transcribe-toolbar {
    justify-content: flex-end;
}

#imgstitchh-page .imgstitchh-actions-bar__inner {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* 拼长图：左「重置」、右「预览 + 拼接并下载」整行拉伸 */
#imgstitchh-page .imgstitchh-actions-bar.transcribe-toolbar .imgstitchh-actions-bar__inner {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

#imgstitchh-page .imgstitchh-actions-bar__group-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

/* 拼长图（竖版）：与横版同源样式，前缀 imgstitchv */
.imgstitchv-page-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.imgstitchv-card {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
}

.imgstitchv-card.imgstitchv-card--uploaded #imgstitchvDropzone {
    display: none !important;
}

#imgstitchv-page.imgstitchv-card--uploaded #imgstitchvError:empty,
.imgstitchv-card.imgstitchv-card--uploaded #imgstitchvError:empty {
    display: none;
}

.imgstitchv-uploader.c-tool-media-workspace > .upload-dropzone {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

#imgstitchvDropzone {
    position: relative;
}

.imgstitchv-card.imgstitchv-card--uploaded .imgstitchv-uploader {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-sizing: border-box;
}

#imgstitchv-page .imgstitchv-workspace {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 未上传：上传框 → 底栏仅 24px */
#imgstitchv-page .imgstitchv-workspace--idle {
    margin-top: 24px;
}

/** 未上传：隐藏预览外槽与缩略图，仅保留底部操作栏 */
#imgstitchv-page:not(.imgstitchv-card--uploaded) .imgstitchv-main.c-tool-image-preview,
.imgstitchv-card:not(.imgstitchv-card--uploaded) .imgstitchv-main.c-tool-image-preview {
    display: none !important;
}

#imgstitchv-page .imgstitchv-workspace--idle .imgstitchv-section--thumbs {
    display: none !important;
}

/**
 * 空闲态若保留 `.imgstitchv-actions-bar` 默认样式（边框+渐变底），整行会像一块空卡片；
 * 与已上传时拆边框后的底栏对齐，只保留右侧按钮。
 */
#imgstitchv-page .imgstitchv-workspace--idle .imgstitchv-actions-bar {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-uploader {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-main.c-tool-image-preview {
    margin-top: 0;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-workspace {
    margin-top: var(--c-tool-uploader-toolbar-gap, 24px);
    gap: 0;
}

/* 已上传：编辑区↔缩略图 24px；缩略图↔操作栏 32px */
#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-workspace > .imgstitchv-section {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: var(--spacing-md) 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-workspace > .imgstitchv-section--editor {
    margin-bottom: 24px;
    padding: 0;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-workspace > .imgstitchv-section--thumbs {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#imgstitchv-page.imgstitchv--multi.imgstitchv-card--uploaded .imgstitchv-workspace > .imgstitchv-section--editor {
    padding-left: 0;
    padding-right: 0;
}

/* 多图：横向条带工作台（首张铺满高度，其余垂直居中留白）；隐藏侧栏 ghost */
#imgstitchv-page.imgstitchv--multi .imgstitchv-ghost {
    display: none !important;
}

/* 多图：外槽/内舞台尺寸见 components.css `.c-tool-image-preview*` + 脚本 `computeToolPreviewFit` */

#imgstitchv-page.imgstitchv--multi .imgstitchv-move-hit {
    position: absolute;
    top: 0;
    z-index: 1;
    touch-action: none;
    box-sizing: border-box;
    height: 100%;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-move-hit:not([hidden]) {
    cursor: move;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handles {
    z-index: 2;
    height: 100%;
    box-sizing: border-box;
}

/* 多图竖版：在外槽 .main 上滚动，内层 stage 随内容增高 */
#imgstitchv-page.imgstitchv--multi .imgstitchv-main.c-tool-image-preview {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-viewport.c-tool-image-preview__stage {
    overflow: visible;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-scroll-inner {
    position: relative;
    width: 100%;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-scroll-inner .imgstitchv-handles,
#imgstitchv-page.imgstitchv--multi .imgstitchv-scroll-inner .imgstitchv-move-hit {
    position: absolute;
    height: auto;
}

/* 仅首张：区块标题/说明视觉隐藏（仍可被读屏拾取） */
#imgstitchv-page.imgstitchv--single .imgstitchv-workspace .imgstitchv-section__title,
#imgstitchv-page.imgstitchv--single .imgstitchv-workspace .imgstitchv-section__lead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#imgstitchv-page.imgstitchv--single.imgstitchv-card--uploaded .imgstitchv-workspace {
    gap: 0;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-ghost {
    display: none !important;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-viewport.c-tool-image-preview__stage {
    overflow: visible;
}

/* 首张：与图片裁剪一致 — 拖选区（move）平移裁剪框，画布不接指针避免「拖图片」手感 */
#imgstitchv-page.imgstitchv--single .imgstitchv-move-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
    touch-action: none;
    box-sizing: border-box;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-move-hit:not([hidden]) {
    cursor: move;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-view-canvas.c-tool-image-preview__media {
    pointer-events: none;
    object-fit: unset;
}

#imgstitchv-page .imgstitchv-view-canvas.c-tool-image-preview__media,
#imgstitchh-page .imgstitchh-view-canvas.c-tool-image-preview__media {
    object-fit: unset;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-handles {
    z-index: 2;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-handle {
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    background: var(--color-bg);
    box-sizing: border-box;
}

#imgstitchv-page.imgstitchv--single .imgstitchv-handle:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
}

/* 单图：handles 层 = 选区框，角/边手柄相对选区定位（与 imgcrop 一致） */
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--nw { left: -6px; top: -6px; cursor: nwse-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--ne { right: -6px; top: -6px; cursor: nesw-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--se { right: -6px; bottom: -6px; cursor: nwse-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--n { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--s { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
#imgstitchv-page.imgstitchv--single .imgstitchv-handle--w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

/* 已上传：缩略图行 ↔ 底栏按钮 32px；勿再叠加 uploader-toolbar-gap */
#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-uploader .imgstitchv-actions-bar.transcribe-toolbar {
    margin-top: var(--c-tool-toolbar-list-gap);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* `hidden` 默认会被本段 `display:flex` 盖掉，须显式恢复为不展示 */
#imgstitchv-page .imgstitchv-workspace[hidden] {
    display: none !important;
}

#imgstitchv-page .imgstitchv-section {
    margin: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

#imgstitchv-page .imgstitchv-section__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
    line-height: var(--line-height-heading);
}

#imgstitchv-page .imgstitchv-section__lead {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-body);
    max-width: 42rem;
}

#imgstitchv-page .imgstitchv-section--editor .imgstitchv-section__lead {
    margin-bottom: var(--spacing-lg);
}

/* 未上传 ghost 预览槽（上传后外槽改由 `.c-tool-image-preview` 接管） */
#imgstitchv-page .imgstitchv-main:not(.c-tool-image-preview) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: rgb(var(--color-neutral-page-fill-rgb, 247 248 250));
    border: 1px dashed var(--color-border-light);
    box-sizing: border-box;
}

#imgstitchv-page.imgstitchv-card--uploaded .imgstitchv-main.c-tool-image-preview {
    gap: 0;
    margin-top: 0;
}

#imgstitchv-page .imgstitchv-ghost {
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    flex-shrink: 0;
    align-self: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* 未上传：ghost 旁主舞台高亮框（上传后见 `.c-tool-image-preview__stage`） */
#imgstitchv-page .imgstitchv-viewport:not(.c-tool-image-preview__stage) {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--color-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    align-self: center;
}

#imgstitchv-page .imgstitchv-view-canvas:not(.c-tool-image-preview__media) {
    display: block;
    max-width: 100%;
    height: auto;
    touch-action: none;
    cursor: grab;
}

#imgstitchv-page .imgstitchv-view-canvas:not(.c-tool-image-preview__media):active {
    cursor: grabbing;
}

#imgstitchv-page .imgstitchv-handles {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2;
}

#imgstitchv-page .imgstitchv-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    box-sizing: border-box;
    pointer-events: auto;
}

#imgstitchv-page .imgstitchv-handle:hover {
    background: rgba(var(--color-primary-rgb), 0.14);
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--nw {
    left: -6px;
    top: -6px;
    cursor: nwse-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--n {
    left: 50%;
    top: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--ne {
    right: -6px;
    top: -6px;
    cursor: nesw-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--e {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--se {
    right: -6px;
    bottom: -6px;
    cursor: nwse-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--s {
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    cursor: ns-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--sw {
    left: -6px;
    bottom: -6px;
    cursor: nesw-resize;
}

#imgstitchv-page.imgstitchv--multi .imgstitchv-handle--w {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

#imgstitchv-page .imgstitchv-section--thumbs {
    min-width: 0;
    overflow-x: auto;
}

#imgstitchv-page .imgstitchv-thumbs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: var(--spacing-sm) 0;
    min-height: 5.5rem;
}

#imgstitchv-page .imgstitchv-thumb {
    position: relative;
    padding: 3px;
    border: 2px solid var(--color-border-light);
    border-radius: var(--radius-md, 8px);
    overflow: visible;
    background: var(--color-bg);
    cursor: pointer;
    line-height: 0;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
    box-sizing: border-box;
}

#imgstitchv-page .imgstitchv-thumb__canvas-wrap {
    overflow: hidden;
    border-radius: calc(var(--radius-md, 8px) - 3px);
    line-height: 0;
}

#imgstitchv-page .imgstitchv-thumb__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transition:
        opacity 0.15s ease,
        background-color 0.15s ease;
}

/* 精确指针 + 支持悬停：默认隐藏，悬停或键盘焦点在缩略图内时再显示 */
@media (hover: hover) and (pointer: fine) {
    #imgstitchv-page .imgstitchv-thumb:not(:hover):not(:focus-within) .imgstitchv-thumb__remove {
        opacity: 0;
        pointer-events: none;
    }

    #imgstitchv-page .imgstitchv-thumb:hover .imgstitchv-thumb__remove,
    #imgstitchv-page .imgstitchv-thumb:focus-within .imgstitchv-thumb__remove {
        opacity: 1;
        pointer-events: auto;
    }
}

#imgstitchv-page .imgstitchv-thumb__remove:hover {
    background: rgba(17, 24, 39, 0.92);
}

#imgstitchv-page .imgstitchv-thumb__remove:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#imgstitchv-page .imgstitchv-thumb__remove-icon {
    font-size: 14px;
    line-height: 1;
}

#imgstitchv-page .imgstitchv-thumb:hover {
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#imgstitchv-page .imgstitchv-thumb--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

#imgstitchv-page .imgstitchv-thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

#imgstitchv-page .imgstitchv-thumb canvas {
    display: block;
    vertical-align: top;
}

#imgstitchv-page .imgstitchv-thumb--add {
    min-width: 5.5rem;
    min-height: 5.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border);
    background: rgba(var(--color-primary-rgb), 0.04);
    color: var(--color-text-secondary);
}

#imgstitchv-page .imgstitchv-thumb--add:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.08);
}

#imgstitchv-page .imgstitchv-thumb-add-icon {
    opacity: 0.85;
}

#imgstitchv-page .imgstitchv-thumb-add-icon.c-line-icon--upload-line {
    width: 1.5rem;
    height: 1.5rem;
}

/** 固定 8 坑位中未满时的占位，不可点击、不可上传 */
#imgstitchv-page .imgstitchv-thumb--placeholder {
    min-width: 5.5rem;
    min-height: 5.5rem;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 2px dashed var(--color-border-light);
    border-radius: var(--radius-md, 8px);
    background: rgba(0, 0, 0, 0.03);
    pointer-events: none;
    cursor: default;
    opacity: 0.55;
}

#imgstitchv-page .imgstitchv-uploader .imgstitchv-actions-bar.transcribe-toolbar {
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}

#imgstitchv-page .imgstitchv-actions-bar {
    margin: 0;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: linear-gradient(180deg, var(--color-bg) 0%, rgba(var(--color-primary-rgb), 0.03) 100%);
    box-sizing: border-box;
}

#imgstitchv-page .imgstitchv-actions-bar.transcribe-toolbar {
    justify-content: flex-end;
}

#imgstitchv-page .imgstitchv-actions-bar__inner {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* 拼长图：左「重置」、右「预览 + 拼接并下载」整行拉伸 */
#imgstitchv-page .imgstitchv-actions-bar.transcribe-toolbar .imgstitchv-actions-bar__inner {
    margin-left: 0;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

#imgstitchv-page .imgstitchv-actions-bar__group-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

.imgpixelate-toolbar__left {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

.imgpixelate-toolbar__right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
}

/* 形状 / 颗粒 / 遮罩：一体框固定同宽，选项与色值靠右 */
#imgpixelate-page .imgpixelate-toolbar-combo {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}

/* 遮罩色值：固定 200px（非下拉；形状/颗粒下拉走全局 fit-content） */
#imgpixelate-page .imgpixelate-toolbar-combo:has(.videocompress-combo--mask) > .videocompress-combo.c-outline-field {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 var(--c-outline-field-pad-inline-start);
}

/* 遮罩：与下拉同款一体框 + 悬浮色盘（挂 body，见 script-features.js）
 * 注意：勿在无伪类的规则里写死底色，否则 ID 选择器会压过 components 里 button:disabled 的 muted 底 */
#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask,
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask,
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field {
    font: inherit;
    margin: 0;
    cursor: pointer;
    text-align: left;
    align-items: center;
    color: var(--color-text);
    /* 覆盖 UA button 默认 outset/粗描边，与 label 一体框同源 1px 浅描边 */
    border: 1px solid var(--c-outline-field-border);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:not(:disabled),
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:not(:disabled),
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field:not(:disabled) {
    background-color: var(--c-outline-field-bg);
}

/* 鼠标按下后仅 :focus 时去掉系统默认粗轮廓；键盘 Tab 仍走下方 :focus-visible */
#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:focus:not(:focus-visible),
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:focus:not(:focus-visible),
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field:focus:not(:focus-visible) {
    outline: none;
}

/* 与左侧形状/颗粒一体框一致：仅未聚焦时悬浮略提亮底；已聚焦时勿覆盖 `.c-outline-field:focus-within` 主色描边 */
#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:hover:not(:disabled):not(:focus-within),
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:hover:not(:disabled):not(:focus-within),
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field:hover:not(:disabled):not(:focus-within) {
    background-color: var(--color-bg-hover);
    border-color: var(--c-outline-field-border);
}

#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:focus-visible,
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:focus-visible,
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

#imgpixelate-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:disabled,
#designlib-page button.videocompress-combo.c-outline-field.videocompress-combo--mask:disabled,
#qrcodegen-page button.imgcompress-format.imgcompress-format--combo-color-trigger.c-outline-field:disabled {
    cursor: not-allowed;
    background-color: var(--c-outline-field-bg-muted);
    border-color: var(--color-border-light);
}

#imgpixelate-page .imgpixelate-workspace.c-tool-image-preview[hidden] {
    display: none !important;
}

@media (max-width: 0px) {
    .upload-dropzone {
        min-height: var(--upload-dropzone-min-height-compact);
        padding: var(--spacing-xl) var(--spacing-md);
    }
    .imgcompress-toolbar {
        align-items: stretch;
    }
    .imgcompress-format {
        width: 100%;
        justify-content: space-between;
    }
    .imgcompress-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 超窄屏（手机）统一优化：导航、卡片、工具栏、弹窗与按钮可点性 */
@media (max-width: 0px) {
    :root {
        --btn-min-height: 38px;
        --nav-links-gap: 18px;
    }

    .top-nav {
        min-height: 44px;
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right, 0px));
    }

    .nav-link {
        font-size: 13px;
        line-height: 1.2;
    }

    .top-nav-flyout {
        max-width: none;
        left: 0;
        right: 0;
        width: 100%;
        padding-top: var(--spacing-xs);
        padding-bottom: var(--spacing-sm);
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right, 0px));
    }

    .top-nav-flyout__item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-xs);
    }

    .main-content {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }

    .title-section {
        margin-bottom: var(--title-content-gap);
    }

    .main-title {
        font-size: 1.55rem;
        gap: var(--spacing-sm);
    }

    .input-section {
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .button-section {
        gap: var(--spacing-xs);
    }

    .btn {
        padding-block: var(--spacing-xs);
        padding-inline: var(--btn-padding-inline);
        font-size: var(--font-size-sm);
    }

    .c-tool-actions.c-tool-actions--media .btn {
        padding-inline: var(--btn-padding-inline);
    }

    .transcribe-actions,
    .c-tool-actions,
    .dedupe-actions,
    .mixlayout-actions,
    .chargen-main-actions,
    .dategen-main-actions,
    .imgcompress-actions,
    .idphoto-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .imgcompress-toolbar,
    .idphoto-toolbar,
    .videocompress-toolbar,
    .c-tool-media-toolbar {
        gap: var(--spacing-sm);
    }

    .imgcompress-format,
    .idphoto-selects {
        width: 100%;
    }

    .imgcompress-format__select,
    .c-imgcompress-select-dropdown__trigger.idphoto-select,
    .idphoto-select,
    .dategen-select,
    .rule-select,
    .rule-input {
        font-size: var(--font-size-sm);
    }

    .upload-dropzone,
    .idphoto-dropzone {
        min-height: var(--upload-dropzone-min-height-sm);
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .upload-dropzone__hint {
        font-size: var(--font-size-sm);
        text-align: center;
    }

    .upload-dropzone__subhint {
        font-size: var(--font-size-xs);
        text-align: center;
    }

    #idphoto-page .idphoto-preview-wrap {
        min-height: min(var(--tool-image-preview-max-h, 560px), 50vh);
        max-height: min(var(--tool-image-preview-max-h, 560px), 50vh);
    }

    #idphoto-page .idphoto-preview-wrap > img.idphoto-preview-canvas,
    #idphoto-page .idphoto-preview-wrap > canvas.idphoto-preview-canvas {
        max-width: 100%;
        max-height: 100%;
    }

    .modal {
        padding: var(--spacing-sm);
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left, 0px));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right, 0px));
        padding-bottom: max(var(--spacing-sm), env(safe-area-inset-bottom, 0px));
    }

    .modal-content {
        max-height: 88vh;
    }

    .site-footer {
        font-size: var(--font-size-xs);
        line-height: 1.45;
    }
}

/* =============================================================================
 * SEO 收录检测 `#seoindex-page`
 * - 字段块：`.chargen-field`（无顶栏 `.input-label`）+ `.transcribe-toolbar`
 * - 首行操作：`.transcribe-toolbar` + `.btn`（与组件库「工具栏」契约一致）
 * - 单行输入：覆盖全局 `.text-input` 多行 min-height（对齐 `#timestamp-page .timestamp-input`）
 * - 与中间栏内容区等宽铺满：`width: 100%`（不再收窄 `40rem`，输入行与引擎栅格左右齐组件）
 * - 颜色与阴影：仅用 `:root` 设计令牌（`--color-*`、`--shadow-*`、`--color-shadow-*`），勿写散落 hex/rgba
 * ============================================================================= */
#seoindex-page .seoindex-form {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}

/* 单列 dedupe 契约里 `.input-group--dedupe` 为 `flex: 0 1 auto`，本页需撑满整栏以便与组件两端对齐 */
#seoindex-page .input-section.input-section--dedupe-single .input-group.seoindex-form {
    flex: 1 1 100%;
    align-self: stretch;
    width: 100%;
}

#seoindex-page .seoindex-form .chargen-field:first-child {
    margin-bottom: var(--spacing-xxl);
    width: 100%;
}

/* 输入 + 主操作钮：宽屏两列（输入 | 主钮），窄屏换行；`.transcribe-actions` 与全站工具栏契约一致 */
#seoindex-page .seoindex-input-toolbar.transcribe-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-md);
    align-items: center;
    margin-top: 0;
    width: 100%;
}

#seoindex-page .seoindex-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    min-width: 0;
}

@media (max-width: 640px) {
    #seoindex-page .seoindex-input-toolbar.transcribe-toolbar {
        grid-template-columns: 1fr;
    }

    #seoindex-page .seoindex-toolbar-actions {
        justify-content: flex-end;
        width: 100%;
    }
}

#seoindex-page .seoindex-input-toolbar__field {
    min-width: 0;
    display: flex;
    align-items: center;
}

#seoindex-page .seoindex-domain-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

#seoindex-page .seoindex-domain-field__icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    color: var(--color-text-tertiary);
    pointer-events: none;
}

/* 有输入且悬停整块域名栏时显示右侧清除（`components.css` `.c-line-icon--close-line`） */
#seoindex-page .seoindex-domain-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-tertiary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.15s ease,
        color 0.15s ease,
        background-color 0.15s ease;
}

#seoindex-page .seoindex-domain-field--has-value:hover .seoindex-domain-clear {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#seoindex-page .seoindex-domain-clear:hover {
    color: var(--color-text-secondary);
    background-color: var(--color-bg-hover);
}

#seoindex-page .seoindex-domain-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* 单行：覆盖 `.text-input` 默认多行高度与容器查询 min-height */
#seoindex-page .seoindex-domain-input.text-input {
    display: block;
    width: 100%;
    min-height: var(--btn-min-height);
    height: var(--btn-min-height);
    max-height: var(--btn-min-height);
    padding: var(--spacing-sm) var(--spacing-md);
    padding-left: calc(var(--spacing-md) + var(--line-icon-size) + var(--spacing-sm));
    line-height: calc(var(--btn-min-height) - 2px);
    resize: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#seoindex-page .seoindex-domain-field--has-value .seoindex-domain-input.text-input {
    padding-right: calc(var(--spacing-md) + 2rem);
}

#seoindex-page .seoindex-domain-input:hover:not(:disabled) {
    border-color: var(--color-border-strong);
}

#seoindex-page .seoindex-domain-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#seoindex-page .seoindex-domain-input--invalid {
    border-color: var(--color-error);
}

#seoindex-page .seoindex-domain-input--invalid:focus {
    border-color: var(--color-error);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-error-ring);
}

#seoindex-page .seoindex-field-hint {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-card);
    color: var(--color-error);
    font-weight: var(--font-weight-medium);
    text-align: left;
}

#seoindex-page .seoindex-engine-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-sm);
}

@media (max-width: 720px) {
    #seoindex-page .seoindex-engine-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 引擎卡片：横向紧凑、细边与轻阴影；锁态弱对比；解锁后 hover 克制抬升 */
#seoindex-page .seoindex-engine-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    min-height: 2.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: not-allowed;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--color-shadow-xs);
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
    box-sizing: border-box;
}

#seoindex-page.seoindex-page--engines-ready .seoindex-engine-card:not(:disabled) {
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}

#seoindex-page.seoindex-page--engines-ready .seoindex-engine-card:not(:disabled):hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-tint-10);
    box-shadow: var(--color-shadow-floater);
    transform: translateY(-1px);
}

#seoindex-page.seoindex-page--engines-ready .seoindex-engine-card:not(:disabled):active {
    transform: translateY(0);
    box-shadow: var(--color-shadow-xs);
}

#seoindex-page .seoindex-engine-card:focus-visible:not(:disabled) {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

#seoindex-page .seoindex-engine-card:disabled {
    cursor: not-allowed;
    box-shadow: none;
    color: var(--color-text-tertiary);
    border-color: var(--color-border-light);
    background-color: var(--color-surface-raised);
}

#seoindex-page .seoindex-engine-card__name {
    line-height: 1.35;
}

#seoindex-page .seoindex-engine-card__icon {
    flex-shrink: 0;
    color: inherit;
    opacity: 0.88;
    width: 15px;
    height: 15px;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#seoindex-page .seoindex-engine-card:disabled .seoindex-engine-card__icon {
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    #seoindex-page .seoindex-engine-card {
        transition:
            border-color 0.15s ease,
            background-color 0.15s ease,
            box-shadow 0.15s ease,
            color 0.15s ease;
    }

    #seoindex-page.seoindex-page--engines-ready .seoindex-engine-card:not(:disabled):hover,
    #seoindex-page.seoindex-page--engines-ready .seoindex-engine-card:not(:disabled):active {
        transform: none;
    }
}

/* ========== 看板（用量演示）：分类为分段 chip + chip-group（radiogroup / aria-pressed），右侧 c-outline-field 时间下拉 ========== */
#dashboard-page {
    /* Chart.js 读 computed 值，与组件库主色 / 中性色一致 */
    --dashboard-chart-line: var(--color-primary);
    --dashboard-chart-fill: rgba(var(--color-primary-rgb), 0.14);
    --dashboard-chart-point-fill: var(--color-bg);
    --dashboard-chart-point-stroke: var(--color-text);
    --dashboard-chart-tick: var(--color-text-tertiary);
    --dashboard-chart-axis-line: var(--color-border-strong);
    --dashboard-chart-grid: rgba(var(--color-text-placeholder-rgb), 0.18);
    --dashboard-tooltip-bg: var(--color-bg);
    --dashboard-tooltip-fg: var(--color-text);
    --dashboard-tooltip-border: var(--color-border);
    --dashboard-tooltip-padding: var(--spacing-md);
}

#dashboard-page .dashboard-layout {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 var(--spacing-xxl);
    box-sizing: border-box;
}

#dashboard-page .dashboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    box-sizing: border-box;
}

/* 左侧：列表态为 Tab 组；详情态为工具页同款 title-section + main-title（无分类 Tab） */
#dashboard-page .dashboard-header__leading {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

#dashboard-page .dashboard-header__tabs-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

/* chip-group 默认带上下 margin，工具栏内清零 */
#dashboard-page .dashboard-header__tabs-wrap .dashboard-header__tabs.chip-group {
    margin: 0;
    min-width: 0;
    justify-content: flex-start;
    gap: var(--spacing-sm);
}

/* 详情顶栏叠用 `.title-section.c-tool-page-title`，与全站工具页标题契约一致；此处取消与下方图表之间的双倍外边距 */
#dashboard-page .dashboard-header .dashboard-detail-toolbar.title-section {
    margin-bottom: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

#dashboard-page .dashboard-range-field.videocompress-combo.c-outline-field {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    align-self: center;
}

#dashboard-page .dashboard-range-field .videocompress-combo__label {
    flex-shrink: 0;
}

#dashboard-page .dashboard-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-card-grid);
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* 「全部」下五大分类汇总：整行铺满中间栏 */
#dashboard-page .dashboard-cards__grid--summary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#dashboard-page .dashboard-cards__grid--ready {
    opacity: 1;
}

@media (max-width: 900px) {
    #dashboard-page .dashboard-cards__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #dashboard-page .dashboard-cards__grid--summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #dashboard-page .dashboard-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #dashboard-page .dashboard-cards__grid--summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    #dashboard-page .dashboard-cards__grid {
        grid-template-columns: 1fr;
    }

    #dashboard-page .dashboard-cards__grid--summary {
        grid-template-columns: 1fr;
    }
}

#dashboard-page .dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-md);
    min-height: calc(var(--spacing-xxl) * 4 + var(--spacing-lg));
    padding: var(--spacing-lg);
    text-align: left;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition-base);
    box-sizing: border-box;
}

#dashboard-page .dashboard-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--color-shadow-xs);
    background-color: var(--color-primary-tint-10);
}

#dashboard-page .dashboard-card:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow:
        var(--color-shadow-xs),
        0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

#dashboard-page .dashboard-card__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: var(--line-height-body);
}

#dashboard-page .dashboard-card__num {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: var(--font-weight-strong);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: var(--line-height-heading);
    margin-top: auto;
}

/* 详情：顶栏内「左箭头 + `.main-title`」，与时间筛选同一行（见 `.dashboard-header`） */
#dashboard-page .dashboard-detail__head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0;
    min-width: 0;
    width: 100%;
}

#dashboard-page .dashboard-detail__back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease;
}

#dashboard-page .dashboard-detail__back-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

#dashboard-page .dashboard-detail__back-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

/* 与全站 `.main-title`（--font-size-xxl / `.c-tool-page-title`）一致 */
#dashboard-page .dashboard-detail__main-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

#dashboard-page .dashboard-detail {
    margin: 0;
    padding: 0;
}

#dashboard-page .dashboard-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 320px;
    height: min(52vh, 440px);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
    box-shadow: var(--color-shadow-xs);
    box-sizing: border-box;
}

#dashboard-page .dashboard-chart-wrap canvas {
    display: block;
}

/* ---------- 色值转换（契约：`timestamp-block` + `transcribe-toolbar` + `imgcompress-format--combo`） ---------- */
#colorconvert-page {
    --colorconvert-block-pad: var(--spacing-xxl);
    /* HSB / RGB / HSL 行距 */
    --colorconvert-formats-gap: var(--spacing-xxl);
    /* HEX 与上方三色格式区块的额外间距（大于行内 24px） */
    --colorconvert-hex-section-gap: var(--title-content-gap);
    --colorconvert-picker-size: 400px;
    --colorconvert-editor-min-height: 400px;
    --colorconvert-hue-strip-width: 40px;
    --colorconvert-picker-sv-hue-gap: var(--spacing-xxl);
    --colorconvert-editor-columns-gap: var(--title-content-gap);
    --colorconvert-picker-row-w: calc(
        var(--colorconvert-picker-size) + var(--colorconvert-picker-sv-hue-gap) + var(--colorconvert-hue-strip-width)
    );
    /* 右栏色值：标签列与数值区内边距统一（与 `script-features.js` · `initColorConvert` 展示格式一致） */
    --colorconvert-value-pad-x: 0;
    --colorconvert-row-label-w: calc(var(--imgcompress-combo-label-min-width) + var(--imgcompress-combo-label-value-gap));
    /* 固定列宽（ch + 余量）：三通道同宽对齐；总值右对齐，与复制 icon 间距 8px */
    --colorconvert-ch-col-w: 5.5ch;
    --colorconvert-ch-col1: var(--colorconvert-ch-col-w);
    --colorconvert-ch-col2: var(--colorconvert-ch-col-w);
    --colorconvert-ch-col3: var(--colorconvert-ch-col-w);
    --colorconvert-inp-w-h: var(--colorconvert-ch-col-w);
    --colorconvert-inp-w-byte: var(--colorconvert-ch-col-w);
    --colorconvert-inp-w-pct: var(--colorconvert-ch-col-w);
    --colorconvert-inp-w-hex: 2.75ch;
    --colorconvert-total-copy-gap: var(--spacing-sm);
}

#colorconvert-page .colorconvert-page-inner {
    width: 100%;
    min-width: 0;
}

/* 标题 ↔ 背景框：沿用全站 --title-content-gap（32px）；框内区块间距见 --colorconvert-block-pad */
#colorconvert-page .input-section--dedupe-single {
    margin-bottom: 0;
}

/* 主内容区：与工具输出区同底（--tool-text-io-output-bg） */
#colorconvert-page .colorconvert-block {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--colorconvert-block-pad);
    width: 100%;
    padding: var(--colorconvert-block-pad);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-lg);
    background-color: var(--tool-text-io-output-bg);
    overflow: visible;
}

#colorconvert-page .colorconvert-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--colorconvert-block-pad);
    margin: 0;
}

#colorconvert-page .colorconvert-mode-field {
    flex: 0 0 auto;
    min-width: 0;
}

#colorconvert-page .colorconvert-mode-field > .videocompress-combo.c-outline-field {
    width: fit-content;
    max-width: 100%;
}

#colorconvert-page .colorconvert-editor {
    width: 100%;
    min-width: 0;
    padding: 0;
    container-type: inline-size;
    container-name: colorconvert-editor;
}

#colorconvert-page .c-color-editor__body.colorconvert-editor__body {
    display: grid;
    /* 左列随取色区自然宽度（464px）；右列吃满剩余，避免 40% 上限把色值区压扁 */
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    /* 取色区 ↔ 右栏色值：32px；工作区始终左右布局（取色 | 色值） */
    gap: var(--colorconvert-editor-columns-gap);
    align-items: stretch;
    min-width: 0;
}

#colorconvert-page .colorconvert-editor__picker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: var(--colorconvert-editor-min-height);
}

/* 左侧 400px（圆盘或 SV）+ 中间 24px 间距 + 右侧 40px 色相条，径向/线性共用 */
#colorconvert-page .colorconvert-picker-sv-hue-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    box-sizing: border-box;
    width: min(100%, var(--colorconvert-picker-row-w));
    height: var(--colorconvert-picker-size);
    max-width: 100%;
    gap: var(--colorconvert-picker-sv-hue-gap);
}

#colorconvert-page .colorconvert-picker-primary {
    position: relative;
    flex: 0 0 var(--colorconvert-picker-size);
    width: var(--colorconvert-picker-size);
    height: var(--colorconvert-picker-size);
    min-width: 0;
    box-sizing: border-box;
}

#colorconvert-page .colorconvert-picker-hue-strip {
    flex: 0 0 var(--colorconvert-hue-strip-width);
    width: var(--colorconvert-hue-strip-width);
    min-width: var(--colorconvert-hue-strip-width);
    height: var(--colorconvert-picker-size);
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
}

#colorconvert-page .colorconvert-hue-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    min-width: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    touch-action: none;
    align-self: stretch;
}

#colorconvert-page .colorconvert-hue-wrap .c-color-editor__hue {
    min-height: 100%;
    cursor: ns-resize;
}

#colorconvert-page .colorconvert-linear-sv-panel {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

#colorconvert-page .colorconvert-linear-sv-inner {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    aspect-ratio: auto;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    touch-action: none;
    background-color: var(--color-bg-muted);
}

#colorconvert-page .colorconvert-loupe {
    position: fixed;
    z-index: 100;
    width: 112px;
    height: 112px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background-color: var(--color-bg);
    box-shadow:
        0 0 0 1px rgba(var(--color-text-rgb), 0.08),
        0 8px 28px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    overflow: hidden;
}

#colorconvert-page .colorconvert-loupe__canvas {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

#colorconvert-page #colorconvertCircleWrap[hidden],
#colorconvert-page #colorconvertLinearWrap[hidden] {
    display: none !important;
}

#colorconvert-page .colorconvert-wheel-wrap {
    position: relative;
    box-sizing: border-box;
    width: var(--colorconvert-picker-size);
    height: var(--colorconvert-picker-size);
    max-width: var(--colorconvert-picker-size);
    flex-shrink: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    touch-action: none;
}

#colorconvert-page .colorconvert-wheel-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: crosshair;
}

#colorconvert-page .colorconvert-wheel-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 1px rgba(var(--color-text-rgb), 0.45);
    transform: translate(-50%, -50%);
    pointer-events: none;
    left: 50%;
    top: 50%;
}

#colorconvert-page .colorconvert-editor__values {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    width: 100%;
    min-height: var(--colorconvert-picker-size);
    box-sizing: border-box;
    container-type: inline-size;
    container-name: colorconvert-values;
}

#colorconvert-page .colorconvert-values-stack--primary {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0;
    width: 100%;
}

#colorconvert-page .colorconvert-values-formats-group {
    display: flex;
    flex-direction: column;
    gap: var(--colorconvert-formats-gap);
    width: 100%;
    min-width: 0;
}

#colorconvert-page .colorconvert-values-stack--primary > .colorconvert-value-combo--hex {
    margin-top: var(--colorconvert-hex-section-gap);
}

#colorconvert-page .colorconvert-values-stack--tools {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 0;
    width: 100%;
    margin-top: 0;
}

#colorconvert-page .colorconvert-values-formats-group > .imgcompress-format.colorconvert-value-combo,
#colorconvert-page .colorconvert-values-stack--primary > .imgcompress-format.colorconvert-value-combo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* 右栏一体框：每行同一套固定列宽网格，value-slot 展平后通道/总值直接占列 */
#colorconvert-page .colorconvert-value-combo.imgcompress-format--combo.c-outline-field {
    display: grid;
    grid-template-columns:
        var(--colorconvert-row-label-w)
        var(--colorconvert-ch-col1)
        var(--colorconvert-ch-col2)
        var(--colorconvert-ch-col3)
        minmax(0, 1fr)
        var(--btn-min-height);
    column-gap: 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 0;
    cursor: default;
}

#colorconvert-page .colorconvert-value-combo > .imgcompress-format__label--combo {
    grid-column: 1;
    flex: none;
    width: var(--imgcompress-combo-label-min-width);
    min-width: var(--imgcompress-combo-label-min-width);
    max-width: var(--imgcompress-combo-label-min-width);
    text-align: left;
}

#colorconvert-page .colorconvert-value-combo:hover:not(:focus-within):not(:disabled) {
    background-color: var(--c-outline-field-bg-muted);
    border-color: var(--color-border);
}

/* 吸色器 + 历史色块：同一行 */
#colorconvert-page .colorconvert-tools-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#colorconvert-page .colorconvert-tools-row__eyedropper.btn {
    flex: 0 0 auto;
    min-width: var(--btn-min-height);
    width: var(--btn-min-height);
    height: var(--btn-min-height);
    padding: 0;
}

#colorconvert-page .colorconvert-tools-row .colorconvert-history-bar {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* 色值行：标签 | 三段通道 + 总值（只读）| 复制（列轨道由 stack subgrid 统一定义） */
#colorconvert-page
    .imgcompress-format.imgcompress-format--combo.c-outline-field:has(> .imgcompress-format__label--combo):has(> .colorconvert-format-value-slot) {
    justify-content: flex-start;
    align-items: center;
    gap: 0;
}

#colorconvert-page
    .imgcompress-format.imgcompress-format--combo.c-outline-field:has(> .imgcompress-format__label--combo):has(> .colorconvert-format-value-slot)
    > .imgcompress-format__label--combo {
    flex-shrink: 0;
    align-self: center;
}

/* 数值区占标签右侧四列；内层网格对齐三通道 + 总值（避免 display:contents 在部分浏览器下错位） */
#colorconvert-page .colorconvert-format-value-slot {
    grid-column: 2 / 6;
    display: grid;
    grid-template-columns:
        var(--colorconvert-ch-col1)
        var(--colorconvert-ch-col2)
        var(--colorconvert-ch-col3)
        minmax(0, 1fr);
    column-gap: 0;
    align-items: center;
    min-width: 0;
}

#colorconvert-page .colorconvert-format-value-slot > .colorconvert-channel-segment:nth-child(1) {
    grid-column: 1;
}

#colorconvert-page .colorconvert-format-value-slot > .colorconvert-channel-segment:nth-child(3) {
    grid-column: 2;
}

#colorconvert-page .colorconvert-format-value-slot > .colorconvert-channel-segment:nth-child(5) {
    grid-column: 3;
}

#colorconvert-page .colorconvert-format-value-slot > .colorconvert-format-total-inp {
    grid-column: 4;
}

#colorconvert-page .colorconvert-value-combo > .colorconvert-inline-copy-btn {
    grid-column: 6;
    justify-self: end;
}

#colorconvert-page .colorconvert-channel-segment {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    cursor: text;
}

#colorconvert-page .colorconvert-channel-segment--pct {
    gap: 0;
}

#colorconvert-page .colorconvert-format-value-slot--hex > .colorconvert-channel-segment:nth-child(1) {
    grid-column: 1;
}

#colorconvert-page .colorconvert-format-value-slot--hex > .colorconvert-channel-segment:nth-child(2) {
    grid-column: 2;
}

#colorconvert-page .colorconvert-format-value-slot--hex > .colorconvert-channel-segment:nth-child(3) {
    grid-column: 3;
}

#colorconvert-page .colorconvert-format-value-slot--hex > .colorconvert-format-total-inp {
    grid-column: 4;
}

/* 行内不展示逗号与 %（完整格式见右侧总值 / 复制） */
#colorconvert-page .colorconvert-channel-sep,
#colorconvert-page .colorconvert-channel-unit {
    display: none;
}

#colorconvert-page .colorconvert-channel-inp {
    box-sizing: border-box;
    height: var(--btn-min-height);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: calc(var(--btn-min-height) - 2px);
    color: var(--color-text);
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    flex: 0 0 auto;
    cursor: text;
    pointer-events: auto;
}

#colorconvert-page .colorconvert-channel-inp--h {
    width: var(--colorconvert-inp-w-h);
    min-width: var(--colorconvert-inp-w-h);
    max-width: var(--colorconvert-inp-w-h);
    text-align: left;
}

#colorconvert-page .colorconvert-channel-inp--byte {
    width: var(--colorconvert-inp-w-byte);
    min-width: var(--colorconvert-inp-w-byte);
    max-width: var(--colorconvert-inp-w-byte);
    text-align: left;
}

#colorconvert-page .colorconvert-channel-inp--pct {
    width: var(--colorconvert-inp-w-pct);
    min-width: var(--colorconvert-inp-w-pct);
    max-width: var(--colorconvert-inp-w-pct);
    text-align: left;
}

#colorconvert-page .colorconvert-channel-inp--hex {
    width: var(--colorconvert-inp-w-hex);
    min-width: var(--colorconvert-inp-w-hex);
    max-width: var(--colorconvert-inp-w-hex);
    text-transform: uppercase;
    text-align: left;
    padding-inline: 0;
}

#colorconvert-page .colorconvert-format-value-slot .colorconvert-channel-inp::-webkit-outer-spin-button,
#colorconvert-page .colorconvert-format-value-slot .colorconvert-channel-inp::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

#colorconvert-page .colorconvert-format-value-slot .colorconvert-channel-inp:focus {
    outline: none;
}

#colorconvert-page .colorconvert-channel-inp.colorconvert-value-input--invalid {
    color: var(--color-error);
}

#colorconvert-page .colorconvert-format-total-inp {
    box-sizing: border-box;
    width: 100%;
    flex: none;
    min-width: 0;
    height: var(--btn-min-height);
    margin: 0;
    padding: 0 var(--colorconvert-total-copy-gap) 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: calc(var(--btn-min-height) - 2px);
    color: var(--color-text-secondary);
    text-align: right;
    outline: none;
    cursor: text;
    pointer-events: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#colorconvert-page .colorconvert-format-total-inp.colorconvert-value-input--invalid {
    color: var(--color-error);
}

#colorconvert-page .colorconvert-format-value-slot .colorconvert-format-total-inp:focus {
    outline: none;
    color: var(--color-text);
}

#colorconvert-page .colorconvert-inline-copy-btn {
    grid-column: 6;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--btn-min-height);
    min-width: var(--btn-min-height);
    height: var(--btn-min-height);
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.15s ease,
        background-color 0.15s ease;
}

#colorconvert-page .colorconvert-inline-copy-btn:hover {
    color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

#colorconvert-page .colorconvert-inline-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

#colorconvert-page .colorconvert-inline-copy-btn__icons {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
}

#colorconvert-page .colorconvert-inline-copy-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#colorconvert-page .colorconvert-inline-copy-btn__icon--done {
    display: none;
}

#colorconvert-page .colorconvert-inline-copy-btn--copied {
    color: var(--color-success);
    background-color: rgba(22, 163, 74, 0.12);
    background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
}

#colorconvert-page .colorconvert-inline-copy-btn--copied:hover {
    color: var(--color-success);
    background-color: rgba(22, 163, 74, 0.18);
    background-color: color-mix(in srgb, var(--color-success) 18%, transparent);
}

#colorconvert-page .colorconvert-inline-copy-btn--copied .colorconvert-inline-copy-btn__icon--copy {
    display: none;
}

#colorconvert-page .colorconvert-inline-copy-btn--copied .colorconvert-inline-copy-btn__icon--done {
    display: inline-flex;
}

#colorconvert-page .colorconvert-history-bar {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

#colorconvert-page .colorconvert-history-host {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
    min-height: var(--btn-min-height);
    max-width: 100%;
    overflow: hidden;
}

#colorconvert-page .colorconvert-history-slot {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

#colorconvert-page .colorconvert-history-slot--placeholder {
    background: var(--color-border-light);
    border-style: dashed;
    pointer-events: none;
}

#colorconvert-page .colorconvert-history-swatch {
    padding: 0;
    cursor: pointer;
}

#colorconvert-page .colorconvert-history-swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

/* 视口 < 1920：隐藏合并总值；复制 icon 仍靠行右（1fr 占位） */
@media (max-width: 1919px) {
    #colorconvert-page .colorconvert-format-total-inp {
        display: none;
    }
}

/* 工作区偏窄：取色与色值上下堆叠，避免右栏被压扁 */
@container colorconvert-editor (max-width: 920px) {
    #colorconvert-page .c-color-editor__body.colorconvert-editor__body {
        grid-template-columns: minmax(0, 1fr);
    }

    #colorconvert-page .colorconvert-editor__picker {
        align-items: center;
        width: 100%;
    }

    #colorconvert-page .colorconvert-picker-sv-hue-row {
        margin-inline: auto;
    }
}

/* 极窄容器（最低档）：取色盘等比收缩 */
@container colorconvert-editor (max-width: 560px) {
    #colorconvert-page {
        --colorconvert-picker-size: min(
            400px,
            calc(100cqi - var(--colorconvert-hue-strip-width) - var(--colorconvert-picker-sv-hue-gap))
        );
        --colorconvert-ch-col-w: 4.5ch;
        --colorconvert-ch-col1: var(--colorconvert-ch-col-w);
        --colorconvert-ch-col2: var(--colorconvert-ch-col-w);
        --colorconvert-ch-col3: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-h: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-byte: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-pct: var(--colorconvert-ch-col-w);
    }
}

/* 色值栏偏窄（非最低档）：略压缩通道列宽，总值仍展示 */
@container colorconvert-values (max-width: 680px) {
    #colorconvert-page {
        --colorconvert-ch-col-w: 4.5ch;
        --colorconvert-ch-col1: var(--colorconvert-ch-col-w);
        --colorconvert-ch-col2: var(--colorconvert-ch-col-w);
        --colorconvert-ch-col3: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-h: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-byte: var(--colorconvert-ch-col-w);
        --colorconvert-inp-w-pct: var(--colorconvert-ch-col-w);
    }
}

/* ---------- 二维码生成 ---------- */
/* 预览区 / 输入行 / 按钮行：块间距 24px */
#qrcodegen-page .qrcodegen-page-inner {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
    gap: 24px;
}

#qrcodegen-page .qrcodegen-preview-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    margin-bottom: 0;
}

#qrcodegen-page .qrcodegen-preview {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 11.5rem;
    border-radius: var(--radius-lg);
    background: var(--upload-image-bg);
    border: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    box-sizing: border-box;
}

#qrcodegen-page .qrcodegen-preview > .c-upload-progress--host-attached {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-sm);
    transform: translateX(-50%);
    max-width: min(18rem, 92%);
    margin: 0;
    z-index: 2;
}

#qrcodegen-page .qrcodegen-preview__stage {
    width: min(248px, 56vw);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    background: var(--upload-image-bg);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    box-sizing: border-box;
}

#qrcodegen-page .qrcodegen-preview__inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qrcodegen-page .qrcodegen-preview__inner .qrcodegen-preview__stack {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    line-height: 0;
}

#qrcodegen-page .qrcodegen-preview__inner .qrcodegen-preview__stack > svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
}

#qrcodegen-page .qrcodegen-preview__stack .qrcodegen-logo-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 29.2%;
    max-width: 9.5rem;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    box-sizing: border-box;
    padding: 2.6%;
    background-color: var(--qrcodegen-logo-surface, var(--color-bg));
    border-radius: 18%;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

#qrcodegen-page .qrcodegen-preview--empty .qrcodegen-preview__inner::before {
    content: '';
    width: 46%;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    border: 2px dashed var(--color-border);
    background: var(--color-surface-raised);
    box-sizing: border-box;
}

#qrcodegen-page .qrcodegen-preview-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-error);
    text-align: center;
    max-width: 36rem;
    align-self: center;
}

#qrcodegen-page .qrcodegen-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    box-sizing: border-box;
}

/* 单行 URL：内联搜索壳 + 框内清除（components.css · `.c-inline-search__clear`） */
#qrcodegen-page .qrcodegen-input-field {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
}

#qrcodegen-page .qrcodegen-input-field .c-inline-search {
    width: 100%;
}

#qrcodegen-page .qrcodegen-inline-search .c-inline-search__input {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 清除钮与输入区右侧留白对齐（一体框内边距同源）；未聚焦不展示 */
#qrcodegen-page .qrcodegen-inline-search .c-inline-search__clear {
    right: var(--spacing-md);
}

#qrcodegen-page .qrcodegen-inline-search:not(:focus-within) .c-inline-search__clear {
    display: none !important;
    pointer-events: none;
}

#qrcodegen-page .qrcodegen-ecc-field {
    flex: 0 0 auto;
    min-width: 0;
}

#qrcodegen-page .qrcodegen-ecc-field.imgcompress-format.imgcompress-format--combo.c-outline-field {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--imgcompress-combo-label-value-gap, var(--c-outline-field-gap));
    align-self: center;
    box-sizing: border-box;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    max-height: var(--btn-min-height);
}

#qrcodegen-page .qrcodegen-ecc-field.imgcompress-format--combo.c-outline-field > .imgcompress-format__label--combo {
    align-self: center;
}

#qrcodegen-page .qrcodegen-ecc-field .c-imgcompress-select-dropdown {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

#qrcodegen-page .qrcodegen-ecc-field .c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    max-height: none;
    line-height: calc(var(--btn-min-height) - 2px);
}

#qrcodegen-page .qrcodegen-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    row-gap: var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
}

#qrcodegen-page .qrcodegen-actions-bar__left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    flex: 1 1 auto;
}

/* 格式 + 下载：同组贴齐，避免与左侧 space-between 被拆到两行错位 */
#qrcodegen-page .qrcodegen-actions-bar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
    min-width: 0;
}

/* 抵消 `.imgcompress-toolbar` 默认 `margin-top`（上传区工具栏用），与左侧按钮同一基线 */
#qrcodegen-page .qrcodegen-download-toolbar.imgcompress-toolbar {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
    min-width: 0;
}

#qrcodegen-page .qrcodegen-download-toolbar > .imgcompress-format.imgcompress-format--combo.c-outline-field {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--imgcompress-combo-label-value-gap, var(--c-outline-field-gap));
    box-sizing: border-box;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    max-height: var(--btn-min-height);
}

#qrcodegen-page .qrcodegen-download-toolbar .c-imgcompress-select-dropdown {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

#qrcodegen-page .qrcodegen-download-toolbar .c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo {
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    max-height: none;
    line-height: calc(var(--btn-min-height) - 2px);
}

#qrcodegen-page .qrcodegen-actions-bar .qrcodegen-download-btn {
    flex: 0 0 auto;
    align-self: center;
}

/* 背景 / 码色：一体框触发钮，定宽 120px，标签与色块两端对齐（组件见 components.css · `--combo-color-trigger`） */
#qrcodegen-page button.qrcodegen-color-combo.imgcompress-format--combo-color-trigger {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    justify-content: space-between;
    padding: 0 var(--c-outline-field-pad-inline-start);
}

#qrcodegen-page button.qrcodegen-color-combo.imgcompress-format--combo-color-trigger > .imgcompress-format__label--combo {
    flex: 0 0 auto;
}

#qrcodegen-page button.qrcodegen-color-combo.imgcompress-format--combo-color-trigger > .imgcompress-format--combo-color-trigger__value {
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    #qrcodegen-page .qrcodegen-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #qrcodegen-page .qrcodegen-actions-bar__left {
        width: 100%;
    }

    #qrcodegen-page .qrcodegen-actions-bar__right {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    #qrcodegen-page .qrcodegen-actions-bar__right .qrcodegen-download-toolbar {
        width: 100%;
    }

    #qrcodegen-page .qrcodegen-actions-bar .qrcodegen-download-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 文章 / 看板 ==================== */
#articles-page.page,
#article-page.page {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#articles-page > .page-breadcrumb,
#article-page > .page-breadcrumb {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.c-article-page {
    width: 100%;
}

#articles-page .input-section.input-section--dedupe-single .input-group.input-group--dedupe,
#article-page .input-section.input-section--dedupe-single .input-group.input-group--dedupe {
    flex: 1 1 100%;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#articles-page .c-article-panel,
#articles-page .c-article-list,
#article-page .c-article-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.c-article-panel.legal-card {
    padding: var(--spacing-xxl);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

/* 文章列表 / 详情：无外框容器 */
#articles-page .c-article-panel.legal-card,
#article-page .c-article-panel.c-article-detail.legal-card {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.c-article-empty {
    margin: 0;
    padding: var(--spacing-lg) 0;
    color: var(--color-text-placeholder);
    font-size: var(--font-size-base);
}

.c-article-error {
    margin: 0 0 var(--spacing-md);
}

.c-article-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
}

.c-article-card {
    --c-article-card-figure-gap: 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--c-article-card-figure-gap);
    width: 100%;
    margin: 0;
    padding: var(--spacing-lg);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.c-article-card:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-light);
    box-shadow: 0 4px 16px rgba(var(--color-text-rgb), 0.06);
}

.c-article-card:active {
    background: var(--color-bg-muted);
}

.c-article-card:focus-visible {
    outline: none;
    border-color: var(--color-border-light);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

/* 列表配图：左侧，由 front matter 的 listImage 单独维护 */
.c-article-card__figure {
    flex: 0 0 auto;
    width: min(28%, 220px);
    min-width: 120px;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-md);
    background: var(--tool-text-io-output-bg);
}

.c-article-card__figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 有配图时：右侧文本块与左侧图片垂直居中 */
.c-article-card--has-figure {
    align-items: center;
}

.c-article-prose__img--broken {
    display: none;
}

.c-article-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.c-article-card__title {
    margin: 0;
    flex: 0 0 auto;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text);
}

/* 标题 ↔ 简介 24px */
.c-article-card__summary {
    margin: var(--spacing-xxl) 0 0;
    flex: 0 0 auto;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 简介 ↔ 日期 16px */
.c-article-card__gap {
    flex: 0 0 var(--spacing-lg);
    height: var(--spacing-lg);
    min-height: var(--spacing-lg);
    margin: 0;
    padding: 0;
}

.c-article-card__date {
    margin: 0;
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    color: var(--color-text-placeholder);
}

.c-article-detail__header {
    margin-bottom: calc(var(--spacing-huge) + var(--spacing-xxl));
}

.c-article-detail__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text);
}

.c-article-detail__date {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-placeholder);
}

.c-article-prose {
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

.c-article-prose p,
.c-article-prose li,
.c-article-prose th,
.c-article-prose td,
.c-article-prose h2,
.c-article-prose h3,
.c-article-prose h4,
.c-article-prose blockquote {
    white-space: pre-wrap;
}

.c-article-prose > :first-child {
    margin-top: 0;
}

.c-article-prose > :last-child {
    margin-bottom: 0;
}

.c-article-prose h2,
.c-article-prose h3,
.c-article-prose h4 {
    margin: var(--spacing-xxl) 0 var(--spacing-md);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    color: var(--color-text);
}

.c-article-prose p {
    margin: 0 0 var(--spacing-md);
}

.c-article-prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.c-article-prose a:hover {
    color: var(--color-primary-hover);
}

.c-article-prose table {
    width: 100%;
    margin: var(--spacing-lg) 0;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.c-article-prose th,
.c-article-prose td {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    text-align: left;
}

.c-article-prose th {
    background: var(--tool-text-io-output-bg);
    font-weight: var(--font-weight-medium);
}

.c-article-prose ul,
.c-article-prose ol {
    margin: 0 0 var(--spacing-md);
    padding-left: 1.25rem;
}

.c-article-media {
    margin: var(--spacing-lg) 0;
}

.c-article-media img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--tool-text-io-output-bg);
}

.c-article-media--single {
    display: flex;
    justify-content: center;
}

.c-article-media--single img {
    width: auto;
    max-width: 100%;
}

.c-article-media--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.c-article-detail__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-huge);
    padding-top: 0;
    border-top: none;
}

/* 与 SEO 收录检测引擎卡片同风格的描边按钮 */
.c-article-tool-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    min-height: 2.875rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    font-family: inherit;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: var(--color-shadow-xs);
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.c-article-tool-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-primary-tint-10);
    box-shadow: var(--color-shadow-floater);
    transform: translateY(-1px);
}

.c-article-tool-link:active {
    transform: translateY(0);
    box-shadow: var(--color-shadow-xs);
}

.c-article-tool-link:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.c-article-tool-link__icon {
    flex-shrink: 0;
    color: inherit;
    opacity: 0.88;
    width: 15px;
    height: 15px;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 720px) {
    #articles-page .c-article-panel.legal-card,
    #article-page .c-article-panel.c-article-detail.legal-card {
        padding: 0;
    }

    .c-article-card {
        padding: var(--spacing-md);
    }

    .c-article-card--has-figure {
        flex-direction: column;
        align-items: stretch;
        gap: var(--c-article-card-figure-gap, 32px);
    }

    .c-article-card__figure {
        width: 100%;
        max-width: none;
    }

    .c-article-card__gap {
        flex: 0 0 var(--spacing-lg);
        height: var(--spacing-lg);
    }

    .c-article-media--pair {
        grid-template-columns: 1fr;
    }
}