/**
 * =============================================================================
 * Sanye Hub — 组件库（`components.css`）：首页布局、氛围层、搜索与工具卡片
 * =============================================================================
 *
 * -----------------------------------------------------------------------------
 * 全站字色与排版（契约：`style.css` `:root` 为唯一数据源）
 * 颜色：半透明白 / 中性描边 / 遮罩 / 搜索专用边线 / 页脚透明字等见 `style.css` 的 `--color-on-dark-*`、`--color-surface-*`、`--color-stroke-*`、`--color-border-search*`、`--color-neutral-page-fill-rgb` 等；本文件 `--home-*` 尽量引用上述令牌而非重复 hex。
 * -----------------------------------------------------------------------------
 * - 主题正文「墨」：`--color-text` = `#2f3742`；禁止正文/说明使用 `#000`、`#0f172a`、纯黑。
 * - 同源 RGB：`--color-text-rgb` = `47, 55, 66`，用于阴影、磨砂遮罩、滚动条拇指等：`rgba(var(--color-text-rgb), α)`。
 * - 字色层级：`--color-text-secondary` 次级正文；`--color-text-tertiary` 标签/辅助；`--color-text-placeholder` 占位；`--color-text-footer` 页脚弱文。
 * - 例外：顶栏反白 `--topbar-link*` / `--color-on-dark-*`；反白字 `--color-text-inverse`；状态色 `--color-primary` / `--color-error` / `--color-success`；媒体黑底 `--color-media-black`。
 * - 字号：`xs`12 · `sm`14 · `base`/`body`/`md`16 · `lg`18 · `xl`20 · `xxl`32 · `card`13 · `h1-mobile`24（变量名 `--font-size-*`，见 `style.css`）。
 * - 字重：`body`400 · `medium`500 · `heading`600 · `strong`700（`--font-weight-*`）。
 * - 字体：正文随 `style.css` 的 `--font-family-sans`（`ui-sans-serif, system-ui, sans-serif`）；等宽用 `--font-family-mono`（`ui-monospace, monospace`）。均为 CSS 泛族，无具名字体栈。
 * - 行高：`body`1.5 · `heading`1.25 · `card`/`snug`1.45（`--line-height-*`）。
 *
 * 【加载顺序】须先于本文件引入 `style.css`，以便继承并引用其 `:root` 设计令牌：
 *   - 间距 / 字阶 / 字重（如 `--font-weight-medium`：全站 `.btn` / `.chip` 与 `.c-outline-field` 内 `.videocompress-combo__label` 一致）/ z-index
 *   - 全站主题：`--color-primary*`、`--color-primary-rgb`、`--color-brand-mint*`、`--color-brand-teal*`、`--color-focus-ring` 等
 *   - 栅格：`--spacing-card-grid`（与 12 栏 gutter 对齐）
 *
 * 【本文件 :root `--home-*` 归纳】（首页专用；工具子页上传区见 `style.css` 的 `.upload-dropzone`）
 *   氛围与页壳底色
 *     `--home-ambient-base-fallback` — 图/视频未显示或媒体透明度为 0 时，氛围层露出的中性浅灰底
 *     `--home-ambient-media-opacity` — 默认 0.16；运行时由设置写入 `--home-ambient-media-opacity`（script-core）
 *     `--home-ambient-scrim` — 叠色遮罩，默认 transparent；由设置页写入
 *     `--home-page-root-fill` — 首页时 html/body 等漏边填充，与 fallback 同族中性灰
 *   办公风卡片区（搜索条 + 白底工具卡片 + 灰裁切槽）
 *     `--home-office-*` — 搜索条/卡片边框、卡片白底（无渐变）、阴影（`--home-office-shadow-search*`、`--home-office-shadow-card*`）
 *     `--home-tool-panel-radius` / `--home-tool-grid-padding-*` / `--home-scroll-cue-offset-bottom`（下滑钮距版心底）
 *   搜索条主题联动
 *     `--home-search-focus-ring` / `--home-search-focus-glow` — 聚焦环，使用 `--color-primary-rgb`
 *     `--home-search-shine-*` — `.c-home-search::before` 边框扫光 conic 色标，与品牌 mint/teal 同族
 *   排版
 *     `--home-typo-card-title-size`（lg 18px）、`--home-typo-card-hint-size`（sm）、hero / 搜索输入字阶等
 *   大标题「Sanye Hub」
 *     `.c-home-title` — 玻璃胶囊 + logo 端点与全站 `--color-brand-mint` / `--color-brand-teal` 混色（略偏蓝青）；字色分层；默认可被 `--home-hero-title-color` 覆盖（script-core）
 *
 * 【主要类模块索引】
 *   `#designlib-page` / `.c-designlib*` — 组件库可视化展厅（色板、字阶、间距、圆角阴影、版心栅格、输入/下拉/滑块与真实控件；`.c-designlib-copy-snippet` 复制 Markdown/HTML 片段，见 `script-core.js` `DESIGNLIB_SNIPPETS`；含简洁确认弹窗示意 `.c-designlib-dialog-preview` + `demoDialogConfirm`）
 *   `.home-page` / `.home-ambient-layer*` / `.home-ambient-scrim` — 背景图、视频、兜底色、遮罩
 *   `.c-home-hero` / `.c-home-title-block` / `.c-home-title` / `.c-home-tagline` — 首屏胶囊标题 + 胶囊下副标小字
 *   `.c-home-search-section` / `.c-home-search*` / `.c-home-search-input*` / `.c-home-icon-well` — 搜索条与清除按钮
 *   `.c-home-tool-panel*` / `.c-home-tool-grid` — 卡片区裁切与滚动栅格
 *   `.c-home-tool-card*` — 功能入口卡片（白底实色；hover：轻微上浮 + 阴影加深 + 主色描边光晕，强化可点击）
 *   `.c-tool-page-title` — 功能页与静态子页顶栏主标题（叠用于 `.title-section`，与 `.main-title` / `.info-icon` 配套，统一左对齐）
 *   `.c-tool-guide-hint` — 教程图标旁短时自动引导气泡（`script-core.js` 挂载；`#${pageId}-info-icon`，`diff` 为 `#info-icon`）
 *   `.c-home-scroll-cue` — 下滑提示
 *   `.c-card-grid` / `.c-card-grid--cols-2` / `.c-card-grid--cols-3` — 通用宫格（可与首页栅格组合；首页工具区 ≥2560px 为三列）
 *   首页锁滚动、顶栏黏顶阴影等：`:has(#home-page.active)` 与 `.c-home-search-section--stuck` 段落
 *   结果区操作（拆比 / 去重等；依赖 `style.css` 的 `--color-result-copy*`、`--result-action-btn-height`、`--icon-theme-filter`）
 *     `.copy-btn` / `.copy-btn.copy-btn-inside` — 结果区「复制」胶囊；`.result-element-count` 由 `::before`/`::after` 输出括号，文案写「复制」+ span 即可，勿再手写括号
 *     `.dedupe-result-actions` / `.dedupe-sort-btn` / `.dedupe-sort-face--original|--asc|--desc` — 去重排序：原序 `Icon/order-play-line.svg`，升/降 `sort-asc` / `sort-desc`，图标均走 `--icon-theme-filter`
 *   `.c-tool-image-preview*` — 工具页上传后图片预览外框（灰底槽、虚线舞台、720×560 媒体上限）；裁剪 / 加水印等叠用，见「工具页 · 图片上传后预览外框」
 *   应用壳中间主列
 *     `.app-shell__column` + `.c-app-main`（同节点）— 与 `style.css` 中 shell 栅格第 2 列对齐；`--c-app-main-*` 供后续断点 / safe-area 扩展
 *   多行文本
 *     `.c-text-input` — 叠用于 `<textarea>`；禁止拖拽增高，高度由 `clamp` / `min-height` 控制（见 `style.css` `.text-input`、`.result-textarea`）
 *     `.c-textarea-field` — 业务页「多行 + 脚条」：`textarea` + `.c-textarea-field__meta-row`（内为可选 `.error-message.c-textarea-field__error` 左对齐 + `.char-counter` 右对齐，同行）；校验失败给 `textarea` 叠 `.error`；只读叠 `.c-textarea-field--readonly`。JSON 脚条与 `.c-textarea-field-footer` 叠用（报错左、字数右，见 `#jsonfmt-page`）
 *   工具页按钮（定义在 `style.css`，此处为索引）
 *     `.btn` / `.btn-primary` / `.btn-clear` / `.btn-primary--copied` — 见 `style.css`「组件库：工具页按钮」注释块（约 `.button-section` 上方）；字重均为 `var(--font-weight-medium)`；左右内边距为 `:root` 的 `--btn-padding-inline`（默认 24px）；文本类与「提取关键帧」等页主操作 `min-width` 见 `style.css` `:root` 的 `--btn-text-action-min-width` 及配套 `:is(#…-page) .btn` / `.modal-footer .btn` 规则
 *     线稿图标与字色一致：`.c-line-icon` + `.c-line-icon--*`（`Icon/` 同名资源，`mask` + `currentColor`）；全量类名见组件库「线稿图标」栅格与本文件 `.c-line-icon--*` 段落
 *     命中结果区悬浮条：`.c-hit-floater-anchor` + `.c-hit-floater`（计数 + 线标按钮 + 全屏切换；见本文件「命中悬浮工具条」）
 *     工具页内联搜索：`.c-inline-search` + `__label` / `__input` / `__trailing`（与 `--c-outline-field-*`、`.btn` 高度一致；线标 `--search-line`）
 *     符号/字符格：`.c-glyph-card` + `--tile`（方格卡片）/ `--list-thumb`（列表左侧缩略格）
 *     非模态悬浮说明：`.c-floating-popover` + `__heading` / `__text`（挂 `body` 的 `position:fixed`；内边距与视口留白按 8px 体系）
 *     模态确认（无顶栏、正文 + 右下操作）：叠用于全站 `.modal` / `.modal-content`（`style.css`），面板修饰 `.modal-content.c-dialog-confirm`，正文 `.c-dialog-confirm__text`，操作区沿用 `.modal-footer` + `.btn.btn-clear` / `.btn.btn-primary`；拼长图第二张提示等见 `index.html`
 *     一体框参数行：`.c-outline-field`（`style.css` `:root` 的 `--c-outline-field-*`）；与 `.videocompress-combo`、`.imgcompress-format.imgcompress-format--combo`、裁剪 `label.videocompress-combo` 等叠用同节点；工具栏左侧：随内容收缩见 `--imgcompress-combo-toolbar-max-width` + `.imgcompress-format--combo-w-fit`；整框定宽见 `.imgcompress-format--combo-toolbar-doc` / `.imgcompress-format--combo-toolbar-media`（`style.css`：`--imgcompress-doc-toolbar-combo-width*`、`--imgcompress-media-toolbar-combo-width`）
 *     HSB 颜色编辑器：`.c-color-editor-popover`（固定浮层壳）+ `.c-color-editor`（SV 色板、色相条、HSB 数字列、底栏吸管 + HEX + 透明度）；一体框输入修饰 `videocompress-combo__input--color-editor-*`；参考 `#imgpixelateMaskPopover`（`script-features.js` · `initImgPixelate`）
 *     遮罩颜色触发：`button.videocompress-combo--mask` 内 `.imgpixelate-mask-trigger__value` 中顺序为 **HEX → 色块**（`__hex` · `__swatch`）；样式见本文件 `.imgpixelate-mask-trigger__*`
 *     预设色下拉 + 色块：一体框叠 `.c-outline-field--color-swatch-select`，内层 `.c-color-swatch-select`（名称 → 色块 → Chevron + 透明原生 `select`）；业务页见证件照「底色」、加水印「颜色」；组件库仅文字引用，不重复 HTML 示意
 *     关键字检索：`.keywordsearch-controls` 内 `.c-keywordsearch-fields` + `.c-outline-field` 叠 `.imgcompress-format.imgcompress-format--combo`（`.c-keywordsearch-combo`）
 *     钮内行前导线标：子节点叠 `.btn-lead-icon`（或旧名 `.btn-primary-lead-icon`）+ `.c-line-icon--*`（`.btn-primary` / `.btn-clear` 均可；线标为 `mask` + `currentColor`，与按钮字色同步）；`style.css` 中 `.btn:has(.btn-lead-icon)` 统一 `gap`
 *     工具页单选 / 多选：`.c-choice-row`（项间距 `--spacing-lg` 16px）+ `.c-choice` + `__input` / `__control` / `__text`；修饰 `.c-choice--radio` / `.c-choice--checkbox`、mask 与 `:has(:checked)` 契约见本文件「工具页单选 / 多选」；可选 `.c-choice-group-surface`
 *     SEO 收录检测：`#seoindex-page` 使用 `.chargen-form` + `.chargen-field` + `.transcribe-toolbar` + 单行 `.text-input`（无顶栏标签；`script-features.js` `applyLiveValidation` 实时正则；失败时 `#seoindexDomainHint` 用 `--color-error`；引擎卡片阴影/锁态底等仅用 `:root` 令牌，见 `style.css` `#seoindex-page`）
 *     工具页数字（下划线短输入）：`.chargen-input-align.chargen-input-align--quantity`（宽约 80px）+ `.chargen-underline-wrap` + `input.chargen-input-underline`（`inputmode="numeric"`、`maxlength` 等由页内脚本约束）；字符生成「位数」步进器见 `style.css` 的 `.number-stepper--chargen`
 *     工具页可选文案（全宽下划线）：`.chargen-input-align`（不配 `--quantity`）+ `.chargen-underline-wrap` + `input.chargen-input-underline`；默认提示用 `placeholder` / `title`（例：邮箱生成「输入前缀」）
 *     日期生成原生下拉：`chargen-input-align` + `.chargen-underline-wrap` + `select.dategen-select`（`style.css`：与 `input.chargen-input-underline` 同契约——透明底、仅底边线、右侧 Chevron、`--parts` / `--format` 修饰与错误态；未选首项「请选择」与下划线输入占位同为 `--color-text-placeholder`）
 *     字符生成：`c-choice-row` + `c-choice--radio`（固定字符 / 生成位数）；承接区叠 `.c-underline-field` + `.chargen-fixed-input-host` / `.chargen-digits-input-host`（`__label` / `__body` 与业务类同源）；生成字符为 `.chargen-type-group` 内并列 `c-choice--checkbox`（单层 flex、`gap: --spacing-lg`，无二次分组）
 *     多行生成结果列表：`c-gen-result-list` + `c-gen-result-empty` + `c-gen-result-row` + `c-gen-result-text` + `c-gen-row-copy`（字符 / 日期 / 名字 / 邮箱 / 文件名生成共用；脚本建行列与此契约一致）
 *     工具页图片上传后预览外框 `.c-tool-image-preview` / `__stage` / `__media`（灰底槽 + 虚线舞台 + 媒体 720×560 上限）：`index.html` 中图片裁剪、图片加水印等叠用；裁剪舞台 `touch-action` / `user-select` 见 `style.css` 中 `.imgcrop-stage.c-tool-image-preview__stage`
 *     媒体工作区 `c-tool-media`（上传后预览 + 参数 + 操作栏，当前为视频压缩）：见本文件「工具页 · 媒体工作区」段落；含 `.videocompress-combo` 与 `.c-outline-field` 叠用、`.c-tool-actions--media`、`.c-tool-actions__run`
 *     工具栏 / 一体框下拉（浅色列表面板）：`.c-imgcompress-select-dropdown` 包裹 `select.imgcompress-format__select`，由 `script-features.js` 在页末增强；勿包 `select.c-color-swatch-select__select-native`（预设色仍用原生叠层）
 *     媒体预览浮层（全站共用）：根节点 `#cImagePreviewModal.c-image-preview-modal` 叠 `.imgcompress-preview-modal`，内含 `.imgcompress-preview-dl` / `.imgcompress-preview-reset` / `.imgcompress-preview-close`（与 `style.css` 配套；脚本 `openCImagePreview` / `closeCImagePreview`）
 *     图片 / PDF / PPT 压缩任务列表：组件根 `.c-media-task-list` 与 `.imgcompress-list` 叠用；行 `.imgcompress-row`、状态 `.imgcompress-status-line*`（色用 `--color-primary` / `--color-success` / `--color-error` / `--color-text-*`）；PDF 翻译页叠加 `--color-pdftranslate-processing` / `--color-pdftranslate-done`（见 `style.css` :root）
 *     操作按钮行：`.c-tool-actions` — 与本文件下方定义一致；与 `.transcribe-actions` 同契约；媒体类工具叠用 `.c-tool-actions--media`（`.btn` 左右内边距仍用 `style.css` 的 `--btn-padding-inline`，与全站一致）
 *     文本排序：`#textsort-page` 内 `.textsort-sort-btn.btn-primary` 与 `.active` 描边/实心配对，与「复制全部」主色一致
 *
 * 【与 script-core.js 的契约】
 *   `readHomeAmbientPrefs` / `applyHomeAmbientPrefsToRoot` 写入 `--home-ambient-media-opacity`、`--home-ambient-scrim`
 *   `applyHomeHeroTitleColorToRoot` 可选写入 `--home-hero-title-color`
 *   面包屑等其它首页逻辑不在本文件
 */

/* =============================================================================
 * 应用壳 · 中间主列（与 `index.html` 中 `.app-shell__column.c-app-main` 对应）
 * - `style.css` 仅负责 `.app-shell__column { grid-column; grid-row }` 落在 shell 栅格上
 * - 此处负责纵向 flex 栈、背景与 z-index；`--c-app-main-padding-inline` 预留给响应式与安全区
 * - 子节点顺序：`main.main-content` → `#result-page`（拆比结果）→ `footer.site-footer`
 * ============================================================================= */
.app-shell__column.c-app-main {
    position: relative;
    z-index: var(--c-app-main-z);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--c-app-main-bg);
    box-sizing: border-box;
    padding-inline: var(--c-app-main-padding-inline);
}

/* =============================================================================
 * 多行文本输入 `.c-text-input`（与 `style.css` 的 `.text-input` / `.result-textarea` 等叠用）
 * - 主内容区凡 `<textarea>` 须带此类，便于响应式与主题统一收口
 * - `resize: none` 在 `style.css` 基类已统一；此处再次约束 `textarea.c-text-input` 便于审计与后续覆盖
 * ============================================================================= */
textarea.c-text-input {
    resize: none;
}

/* =============================================================================
 * 多行输入域 `.c-textarea-field`（`textarea` + `.c-textarea-field__meta-row`）
 * - 与 `.input-group` 及 `.transcribe-toolbar` 并列：先包一层再放下栏操作区
 * - 空态：无报错节点或 `:empty`；占位符见 `textarea::placeholder`
 * - 校验：`textarea.text-input.error`（边框）；脚条内报错左、计数右同行
 * - 计数：`.char-counter` / `--warn` / `--danger`（`script-core.js` · `updateCounter` 等）
 * ============================================================================= */
.c-textarea-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: var(--spacing-sm);
}

/* 脚条：报错（左）与字数（右）同一行；仅字数时靠右 */
.c-textarea-field__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
}

.c-textarea-field__meta-row .error-message,
.c-textarea-field__meta-row .c-textarea-field__error {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
    min-height: 0;
    text-align: left;
}

.c-textarea-field__meta-row .error-message:empty {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    flex: 0 0 0 !important;
}

.c-textarea-field__meta-row .char-counter {
    margin-top: 0;
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
}

.c-textarea-field__meta-row .error-message:not(:empty) ~ .char-counter {
    margin-left: 0;
}

.c-textarea-field--readonly textarea[readonly] {
    background-color: var(--color-bg-muted);
    cursor: default;
    color: var(--color-text-secondary);
}

.c-textarea-field--readonly textarea[readonly]:focus {
    box-shadow: none;
    border-color: var(--color-border);
}

/* 与 JSON 页脚条叠用：标识「计数 + 纵向报错」语义（布局见 `style.css` #jsonfmt-page .jsonfmt-meta-row--input-footer） */
.c-textarea-field-footer {
    box-sizing: border-box;
    width: 100%;
}

/* =============================================================================
 * 下划线字段 `.c-underline-field`（标签 + `chargen-underline-wrap` / 步进器等）
 * - 与 `chargen-form` 内 `.chargen-fixed-input-host` / `.chargen-digits-input-host` 叠用；`input.chargen-input-underline::placeholder` 与 `.dategen-select--parts` 未选态同为 `--color-text-placeholder`
 * ============================================================================= */
.c-underline-field {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}

/* 作者样式 `display:flex` 会盖掉 UA 对 `[hidden]` 的 `display:none`（与 `style.css` 中 `.chargen-underline-wrap[hidden]` 同理） */
.c-underline-field[hidden] {
    display: none !important;
}

.c-underline-field__label {
    display: block;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.c-underline-field__body {
    width: 100%;
    min-width: 0;
}

/* =============================================================================
 * 工具页操作按钮行 `.c-tool-actions`
 * - 与 `style.css` 中 `.transcribe-actions` 布局一致，便于与 `.btn` / `.btn-primary` / `.btn-clear` 组合
 * - 典型：独占一行（如视频压缩）；或与 `.transcribe-toolbar` 搭配为左侧一组操作
 * - 修饰 `.c-tool-actions--media`：媒体工具底栏（与 `.btn` / `.c-tool-actions__run` 搭配）；`.btn` 左右内边距见 `:root` `--btn-padding-inline`，小屏见 `style.css` 内 `@media`
 * ============================================================================= */
.c-tool-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

/* =============================================================================
 * 工具页 · 页面标题 `.c-tool-page-title`
 * - 叠用于 `.page > .title-section`（与既有 `.title-section` margin / z-index 契约并存）
 * - 内含 `.main-title` + 可选 `.info-icon`；全站功能页与静态子页默认左对齐（含 `#seoindex-page`）
 * ============================================================================= */
.c-tool-page-title {
    text-align: left;
}

.c-tool-page-title .main-title {
    justify-content: flex-start;
}

/* =============================================================================
 * 教程入口短时引导气泡 `.c-tool-guide-hint`
 * - `script-core.js` `scheduleToolGuideHintForPage`：进入工具页约 3s 后首次挂载；不透明约 1.5s 后缓慢淡出，淡出结束再间隔约 20s 进入下一轮（`TOOL_GUIDE_HINT_*` 常量）
 * - 图标 ID：`#${pageId}-info-icon`；文本拆比页为 `#info-icon`
 * - 可见期内 `.c-tool-guide-hint__bubble` 依次「中→偏左→中→偏左→中」后静止；`prefers-reduced-motion` 关闭动画
 * ============================================================================= */
.c-tool-guide-hint {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.c-tool-guide-hint__bubble {
    display: block;
    position: relative;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    white-space: nowrap;
    box-shadow:
        var(--shadow-md),
        0 6px 22px rgba(var(--color-primary-rgb), 0.42);
    opacity: 0;
    visibility: hidden;
    /* 收起时：慢淡出；出现时为 `--visible` 内更短的 transition 覆盖 */
    transition:
        opacity 0.65s ease-out,
        visibility 0s linear 0.65s;
}

.c-tool-guide-hint__bubble::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-right-color: var(--color-primary);
}

.c-tool-guide-hint--visible .c-tool-guide-hint__bubble {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    /* 中→偏左→中→偏左→中，末段保持静止 */
    animation: c-tool-guide-hint-nudge 0.85s ease-in-out 1 forwards;
}

@keyframes c-tool-guide-hint-nudge {
    0% {
        transform: translateX(0);
    }

    18% {
        transform: translateX(-4px);
    }

    36% {
        transform: translateX(0);
    }

    54% {
        transform: translateX(-4px);
    }

    72%,
    100% {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-tool-guide-hint__bubble {
        transition: none;
    }

    .c-tool-guide-hint--visible .c-tool-guide-hint__bubble {
        animation: none;
    }
}

/* =============================================================================
 * 线稿图标 `.c-line-icon`（与父级 `color` 一致）
 * - 用 `mask-image` + `background-color: currentColor`，避免 `img` + `filter` 与正文/禁用字色脱节
 * - 父级须设字色：`.upload-dropzone__icon { color: var(--color-text) }`；`.btn-primary` 启用为白字、禁用为 `--color-disabled-text`
 * ============================================================================= */
.c-line-icon {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.c-line-icon--upload-line {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-mask-image: url("Icon/upload-line.svg");
    mask-image: url("Icon/upload-line.svg");
}

.c-line-icon--crop-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/crop-line.svg");
    mask-image: url("Icon/crop-line.svg");
}

.c-line-icon--file-copy-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/file-copy-line.svg");
    mask-image: url("Icon/file-copy-line.svg");
}

.c-line-icon--download-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/download-line.svg");
    mask-image: url("Icon/download-line.svg");
}

.c-line-icon--search-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/search-line.svg");
    mask-image: url("Icon/search-line.svg");
}

.c-line-icon--chat-search-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/chat-search-line.svg");
    mask-image: url("Icon/chat-search-line.svg");
}

.c-line-icon--arrow-drop-down-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/arrow-drop-down-line.svg");
    mask-image: url("Icon/arrow-drop-down-line.svg");
}

.c-line-icon--arrow-drop-up-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/arrow-drop-up-line.svg");
    mask-image: url("Icon/arrow-drop-up-line.svg");
}

.c-line-icon--arrow-left-s-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/arrow-left-s-line.svg");
    mask-image: url("Icon/arrow-left-s-line.svg");
}

.c-line-icon--arrow-right-s-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/arrow-right-s-line.svg");
    mask-image: url("Icon/arrow-right-s-line.svg");
}

.c-line-icon--arrow-right-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/arrow-right-line.svg");
    mask-image: url("Icon/arrow-right-line.svg");
}

.c-line-icon--link-m {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/link-m.svg");
    mask-image: url("Icon/link-m.svg");
}

.c-line-icon--external-link-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/external-link-line.svg");
    mask-image: url("Icon/external-link-line.svg");
}

.c-line-icon--zoom-in-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/zoom-in-line.svg");
    mask-image: url("Icon/zoom-in-line.svg");
}

.c-line-icon--zoom-out-line {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/zoom-out-line.svg");
    mask-image: url("Icon/zoom-out-line.svg");
}

/* 图片打码遮罩 · 屏幕吸管（Icon/sip-line.svg） */
.c-line-icon--sip-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/sip-line.svg");
    mask-image: url("Icon/sip-line.svg");
}

/* 弹窗 / 浮层关闭（Icon/close-line.svg；与 `.modal-close` 等搭配，`currentColor` 随字色） */
.c-line-icon--close-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/close-line.svg");
    mask-image: url("Icon/close-line.svg");
}

/* 视频压缩主操作：对角收拢示意「压缩」（Icon/collapse-diagonal-fill.svg） */
.c-line-icon--collapse-diagonal-fill {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/collapse-diagonal-fill.svg");
    mask-image: url("Icon/collapse-diagonal-fill.svg");
}

/* 对角展开示意「全屏 / 放大视区」（Icon/expand-diagonal-s-line.svg） */
.c-line-icon--expand-diagonal-s-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/expand-diagonal-s-line.svg");
    mask-image: url("Icon/expand-diagonal-s-line.svg");
}

.c-line-icon--radio-button-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/radio-button-line.svg");
    mask-image: url("Icon/radio-button-line.svg");
}

.c-line-icon--checkbox-blank-circle-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/checkbox-blank-circle-line.svg");
    mask-image: url("Icon/checkbox-blank-circle-line.svg");
}

.c-line-icon--checkbox-blank-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/checkbox-blank-line.svg");
    mask-image: url("Icon/checkbox-blank-line.svg");
}

.c-line-icon--checkbox-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/checkbox-line.svg");
    mask-image: url("Icon/checkbox-line.svg");
}

.c-line-icon--time-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/time-line.svg");
    mask-image: url("Icon/time-line.svg");
}

.c-line-icon--information-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/information-line.svg");
    mask-image: url("Icon/information-line.svg");
}

.c-line-icon--refresh-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/refresh-line.svg");
    mask-image: url("Icon/refresh-line.svg");
}

.c-line-icon--calendar-check-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/calendar-check-line.svg");
    mask-image: url("Icon/calendar-check-line.svg");
}

.c-line-icon--heart-add-2-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/heart-add-2-line.svg");
    mask-image: url("Icon/heart-add-2-line.svg");
}

.c-line-icon--share-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/share-line.svg");
    mask-image: url("Icon/share-line.svg");
}

.c-line-icon--order-play-line {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/order-play-line.svg");
    mask-image: url("Icon/order-play-line.svg");
}

.c-line-icon--sort-asc {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/sort-asc.svg");
    mask-image: url("Icon/sort-asc.svg");
}

.c-line-icon--sort-desc {
    width: 18px;
    height: 18px;
    -webkit-mask-image: url("Icon/sort-desc.svg");
    mask-image: url("Icon/sort-desc.svg");
}

.c-line-icon--chevron-down {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/chevron-down.svg");
    mask-image: url("Icon/chevron-down.svg");
}

.c-line-icon--chevron-down-disabled {
    width: 16px;
    height: 16px;
    -webkit-mask-image: url("Icon/chevron-down-disabled.svg");
    mask-image: url("Icon/chevron-down-disabled.svg");
}

.c-line-icon--circle-fill {
    width: 8px;
    height: 8px;
    -webkit-mask-image: url("Icon/circle-fill.svg");
    mask-image: url("Icon/circle-fill.svg");
}

/* =============================================================================
 * 工具页单选 / 多选（原生 input + 线标控件面，mask 与 `.c-line-icon` 同源）
 * - 行容器：`.c-choice-row`（`role="radiogroup"` 或 `group`），项间距 `--spacing-lg`（16px）
 * - 每项：`<label class="c-choice c-choice--radio|c-choice--checkbox">` + `input.c-choice__input` +
 *   `span.c-choice__control` + `span.c-choice__text`；选中换图标用 `:has(.c-choice__input:checked) .c-choice__control`（勿用 `input + .control`，避免 label 内空白文本节点打断相邻兄弟选择器）
 * - 单选：未选 `checkbox-blank-circle-line.svg`，选中 `radio-button-line.svg`；多选：未选 `checkbox-blank-line.svg`，选中 `checkbox-line.svg`
 * - 字色：默认 `--color-text-secondary`，悬停 `--color-text` + `--color-bg-hover`，选中 `--color-primary`、选中悬停 `--color-primary-hover`，选中无实色底
 * ============================================================================= */
.c-choice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
}

/* 选项组容器：4px 体系内边距 + 浅底，与表单项区分 */
.c-choice-group-surface {
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    padding: var(--spacing-xs);
    border-radius: var(--spacing-xs);
    background-color: var(--color-surface-raised);
}

.c-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 30px;
    padding: 2px var(--spacing-sm);
    margin: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.c-choice:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
}

.c-choice:has(.c-choice__input:checked) {
    color: var(--color-primary);
    background-color: transparent;
}

.c-choice:has(.c-choice__input:checked):hover {
    color: var(--color-primary-hover);
    background-color: transparent;
}

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

.c-choice:focus-within {
    outline: none;
}

.c-choice:focus-within .c-choice__control {
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
    border-radius: 4px;
}

.c-choice__control {
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* 与 `.c-choice--radio` 未选一致；多选见下条 `.c-choice--checkbox .c-choice__control` */
    -webkit-mask-image: url("Icon/checkbox-blank-circle-line.svg");
    mask-image: url("Icon/checkbox-blank-circle-line.svg");
}

.c-choice--checkbox .c-choice__control {
    -webkit-mask-image: url("Icon/checkbox-blank-line.svg");
    mask-image: url("Icon/checkbox-blank-line.svg");
}

/* 不用 input + .control：label 内 input 与 span 之间的空白文本节点会破坏相邻兄弟选择器 */
.c-choice--radio:has(.c-choice__input:checked) .c-choice__control {
    -webkit-mask-image: url("Icon/radio-button-line.svg");
    mask-image: url("Icon/radio-button-line.svg");
}

.c-choice--checkbox:has(.c-choice__input:checked) .c-choice__control {
    -webkit-mask-image: url("Icon/checkbox-line.svg");
    mask-image: url("Icon/checkbox-line.svg");
}

.c-choice__text {
    line-height: 1.35;
}

/* =============================================================================
 * 工具页 · 多行生成结果列表（字符 / 日期 / 名字 / 邮箱 / 文件名生成共用）
 * - 容器 `.c-gen-result-list`（`role="list"`）+ 空态 `.c-gen-result-empty`
 * - 行 `.c-gen-result-row`（`role="listitem"`）+ 文案 `.c-gen-result-text` + 行内复制 `.c-gen-row-copy`
 * - 精细指针设备上复制钮默认淡出，悬停/聚焦行内时出现（与 `style.css` 原 `.dategen-result-*` 行为一致）
 * ============================================================================= */
.c-gen-result-list {
    margin-top: var(--spacing-md);
    min-height: 12rem;
    max-height: min(40vh, 22rem);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    transition: var(--transition-base);
}

.c-gen-result-list:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.c-gen-result-empty {
    padding: var(--spacing-md);
    text-align: start;
    color: var(--color-text-placeholder);
    font-size: var(--font-size-base);
}

.c-gen-result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
}

.c-gen-result-text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    width: max-content;
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}

.c-gen-row-copy {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s ease, color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .c-gen-row-copy {
        opacity: 0;
        pointer-events: none;
    }

    .c-gen-result-row:hover .c-gen-row-copy,
    .c-gen-result-row:focus-within .c-gen-row-copy {
        opacity: 1;
        pointer-events: auto;
    }
}

.c-gen-row-copy:hover {
    color: var(--color-primary-hover);
    background-color: var(--color-bg-hover);
}

.c-gen-row-copy:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =============================================================================
 * 工具页「生成数量」等：下划线数字短列（宽约 80px）
 * - 叠在 `.chargen-input-align` 上，与 `style.css` 中 `.chargen-input-underline` 错误态等配套
 * ============================================================================= */
.chargen-input-align.chargen-input-align--quantity {
    width: 80px;
    max-width: 100%;
    box-sizing: border-box;
}

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

.chargen-input-align.chargen-input-align--quantity .chargen-input-underline {
    width: 100%;
    max-width: none;
}

/* =============================================================================
 * 命中悬浮工具条 `.c-hit-floater` + 锚区 `.c-hit-floater-anchor`
 * - 锚区：包住只读结果区与工具条，`position: relative`；工具条绝对定位于右上，不挤占正文流
 * - 子节点：`.c-hit-floater__counter` + `.btn.c-hit-floater__icon-btn`（线标-only）+ `.c-hit-floater__fullscreen-btn`（`expand-diagonal-s-line` / `collapse-diagonal-fill` 切换）
 * - 页级外边距：`style.css` 内 `#keywordsearch-page .c-hit-floater-anchor { margin-top }`
 * ============================================================================= */
.c-hit-floater-anchor {
    position: relative;
    width: 100%;
    min-width: 0;
}

.c-hit-floater {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: var(--z-local-controls);
    max-width: calc(100% - var(--spacing-md) * 2);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: 3px;
    white-space: nowrap;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    box-shadow: var(--color-shadow-floater);
}

.c-hit-floater > * + * {
    border-inline-start: 1px solid var(--color-border);
}

.c-hit-floater__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-body);
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: 1;
}

.c-hit-floater > .c-hit-floater__icon-btn {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-width: 30px;
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.c-hit-floater > .c-hit-floater__icon-btn:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
    border-color: transparent;
    color: var(--color-primary);
}

.c-hit-floater > .c-hit-floater__icon-btn:focus-visible {
    outline: none;
    outline-offset: 0;
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--color-focus-ring);
}

.c-hit-floater > .c-hit-floater__icon-btn:disabled {
    background: transparent;
}

.c-hit-floater .c-hit-floater__icon-btn .c-line-icon {
    width: 16px;
    height: 16px;
}

.c-hit-floater__fullscreen-btn .c-line-icon--expand-diagonal-s-line,
.c-hit-floater__fullscreen-btn .c-line-icon--collapse-diagonal-fill {
    width: 17px;
    height: 17px;
}

.c-hit-floater > .c-hit-floater__fullscreen-btn.c-hit-floater__icon-btn {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
}

.c-hit-floater__fullscreen-icon.c-line-icon {
    opacity: 0.88;
}

.c-hit-floater__fullscreen-icon--collapse {
    display: none;
}

.c-hit-floater__fullscreen-btn.is-active .c-hit-floater__fullscreen-icon--expand {
    display: none;
}

.c-hit-floater__fullscreen-btn.is-active .c-hit-floater__fullscreen-icon--collapse {
    display: block;
}

/* =============================================================================
 * 内联搜索 `.c-inline-search`
 * - 与一体框同源：`--c-outline-field-border` / `--c-outline-field-bg`；高度对齐 `--btn-min-height`
 * - 后缀区放 `.c-line-icon--search-line`；`focus-within` 时输入框主色描边 + 聚焦环
 * - 页级宽度：由外层叠用类控制（如 `#symchar-page .symchar-toolbar__search`）
 * ============================================================================= */
.c-inline-search {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.c-inline-search__label {
    position: relative;
    display: block;
    width: 100%;
}

.c-inline-search__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    max-height: var(--btn-min-height);
    margin: 0;
    padding: 0 var(--spacing-md);
    padding-right: calc(var(--spacing-md) + 1.125rem + var(--spacing-sm));
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-body);
    line-height: calc(var(--btn-min-height) - 2px);
    font-family: inherit;
    border: 1px solid var(--c-outline-field-border);
    border-radius: var(--radius-md);
    background-color: var(--c-outline-field-bg);
    color: var(--color-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.c-inline-search__input::placeholder {
    color: var(--color-text-placeholder);
}

.c-inline-search__input:hover {
    border-color: var(--color-border);
}

.c-inline-search__input:focus {
    outline: none;
}

.c-inline-search:focus-within .c-inline-search__input {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.c-inline-search__trailing {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-inline-search__trailing .c-line-icon--search-line {
    width: 18px;
    height: 18px;
    opacity: 0.88;
}

/* =============================================================================
 * 符号格 `.c-glyph-card`
 * - 轻描边 + 极浅阴影；悬停略抬阴影、不用重灰框
 * - `--tile`：等比方格（依赖祖先 `container-type: inline-size` 时字阶可用 cqw）
 * - `--list-thumb`：列表行内固定边长的符号预览
 * ============================================================================= */
.c-glyph-card {
    box-sizing: border-box;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: 0 1px 2px rgba(var(--color-text-rgb), 0.05);
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.c-glyph-card:hover {
    border-color: var(--color-border);
    background-color: var(--color-bg-hover);
    box-shadow: 0 2px 10px rgba(var(--color-text-rgb), 0.07);
}

.c-glyph-card:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg-active);
    box-shadow:
        0 0 0 var(--focus-ring-size) var(--color-focus-ring),
        0 2px 10px rgba(var(--color-text-rgb), 0.06);
}

.c-glyph-card--tile {
    aspect-ratio: 1 / 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(var(--font-size-sm), 2.2cqw, var(--font-size-lg));
    font-weight: var(--font-weight-body);
    line-height: 1;
    color: var(--color-text);
    user-select: none;
    cursor: pointer;
}

.c-glyph-card--list-thumb {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    min-width: 3.25rem;
    min-height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(var(--font-size-md), 1.1rem, var(--font-size-xl));
    font-weight: var(--font-weight-medium);
    line-height: 1;
    color: var(--color-text);
    pointer-events: none;
}

/* =============================================================================
 * 悬浮说明 `.c-floating-popover`（非模态、无指针事件）
 * - 内边距：`--spacing-sm`（8px）× `--spacing-lg`（16px），与全站 8px 步进一致
 * - 圆角：`--radius-lg`（8px）；视口水平留白 `2 × --spacing-lg`
 * - 子块：`__heading`（类目）与 `__text`（说明）间距 `--spacing-sm`
 * - 由脚本设 `left`/`top`；显隐可叠用 `--visible` + 行内 `visibility`
 * ============================================================================= */
.c-floating-popover {
    position: fixed;
    z-index: var(--z-floating-popover);
    box-sizing: border-box;
    max-width: min(20rem, calc(100vw - 2 * var(--spacing-lg)));
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    box-shadow:
        0 4px 16px rgba(var(--color-text-rgb), 0.08),
        0 1px 2px rgba(var(--color-text-rgb), 0.04);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.c-floating-popover--visible {
    opacity: 1;
}

.c-floating-popover__heading {
    margin: 0 0 var(--spacing-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.c-floating-popover__text {
    margin: 0;
    color: var(--color-text-secondary);
    word-break: break-word;
}

/* =============================================================================
 * 模态 · 简洁确认 `.c-dialog-confirm`（叠用 `style.css` 的 `.modal` / `.modal-content` / `.modal-body` / `.modal-footer`）
 * - 无 `.modal-header`：仅一段说明 + 右下「取消 / 确认」等；遮罩与 z-index 仍由 `.modal` 承担（`--color-overlay`、`--z-modal`）
 * - 面板：收窄 `max-width`、正文区不拉伸（`flex: 0`），字色用 `--color-text`（勿用纯黑 hex）
 * - 操作钮：全站 `.btn` 契约（`btn-clear` + `btn-primary`）；`.modal-footer .btn` 的 `min-width` 仍由 `style.css` 统一
 * - 组件库静态示意：`.c-designlib-dialog-preview`（浅底槽，非真实 `position:fixed` 遮罩）
 * ============================================================================= */
.modal-content.c-dialog-confirm {
    max-width: min(26rem, calc(100vw - 2 * var(--spacing-xl)));
}

.modal-content.c-dialog-confirm > .modal-body:first-of-type {
    flex: 0 0 auto;
    padding: var(--spacing-xl);
    overflow: visible;
}

.modal-content.c-dialog-confirm > .modal-footer {
    padding: 0 var(--spacing-xl) var(--spacing-xl);
    border-top: none;
    gap: var(--spacing-md);
}

.c-dialog-confirm__text {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text);
}

.c-designlib-dialog-preview {
    box-sizing: border-box;
    min-height: 11rem;
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border-light);
    background: rgba(var(--color-text-rgb), 0.06);
}

.c-designlib-dialog-preview .modal-content.c-dialog-confirm {
    position: relative;
    width: 100%;
    max-height: none;
    animation: none;
    box-shadow: var(--shadow-lg);
}

/* =============================================================================
 * 关键字检索 · 双字段行 `.c-keywordsearch-fields`（置于 `style.css` `#keywordsearch-page .keywordsearch-controls` 内与按钮同排）
 * - 与 `.videocompress-fields` 对齐：`flex` + `gap: var(--spacing-md)` + `align-items: flex-end`；列宽 `max-width` 收敛，列内一体框 `width:100%`
 * - 标签：`.imgcompress-format__label--combo`（「关键字」「类型」等纯文案；与下拉同排时值与 chevron 靠右见 `style.css`）；需线标时再叠 `.c-field-label--with-icon`
 * ============================================================================= */
.c-keywordsearch-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-end;
    margin-top: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.c-keywordsearch-fields .keywordsearch-field-col {
    min-width: 0;
}

/* 与按钮同排时控制总宽：关键字略宽、类型下拉固定上限 */
.c-keywordsearch-fields .keywordsearch-field-col:first-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(20rem, 100%);
}

.c-keywordsearch-fields .keywordsearch-field-col:last-child {
    flex: 0 0 auto;
    min-width: 0;
    max-width: min(11rem, 100%);
}

/* 与 PDF 一体框同构（`.c-outline-field`）；框内「标签—控件」间隙同 `.videocompress-combo.c-outline-field` */
.c-keywordsearch-fields .imgcompress-format.imgcompress-format--combo.c-outline-field.c-keywordsearch-combo {
    width: 100%;
    max-width: 100%;
    gap: var(--videocompress-label-value-gap, 4px);
}

/* 带线标的 `.c-field-label--with-icon`：线标与标签文案间距（关键字「类型」等） */
.imgcompress-format__label--combo.c-field-label--with-icon {
    gap: var(--spacing-xs);
}

.c-field-label--with-icon .c-line-icon {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .c-keywordsearch-fields .keywordsearch-field-col:first-child,
    .c-keywordsearch-fields .keywordsearch-field-col:last-child {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* =============================================================================
 * 一体框参数行 `.c-outline-field`（标签 + 值/输入，单外描边、白底、圆角）
 * - 令牌：`style.css` `:root` 的 `--c-outline-field-*`；工具栏「标签—值区」固定 24px 等可叠 `imgcompress-format--combo-toolbar-label-value` 覆写 `--c-outline-field-gap`（见 `--imgcompress-combo-label-value-gap`）
 * - 叠用：视频 `.videocompress-combo`、PDF/关键字 `.imgcompress-format.imgcompress-format--combo`、裁剪 `label.videocompress-combo` 等（见 `index.html`）
 * - 聚焦：`focus-within` 主色描边 + `--color-focus-ring`；内含 `input:disabled` / `select:disabled` 时整框 muted 底
 * ============================================================================= */
.c-outline-field {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
    min-height: var(--btn-min-height);
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--c-outline-field-pad-inline-end) 0 var(--c-outline-field-pad-inline-start);
    gap: var(--c-outline-field-gap);
    border: 1px solid var(--c-outline-field-border);
    border-radius: var(--radius-md);
    background-color: var(--c-outline-field-bg);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

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

.c-outline-field:has(input:disabled),
.c-outline-field:has(select:disabled),
.c-outline-field:has(button:disabled),
button.c-outline-field:disabled {
    background-color: var(--c-outline-field-bg-muted);
    border-color: var(--color-border-light);
}

/* 关键字等：文本输入一体框 */
.imgcompress-format.imgcompress-format--combo.c-outline-field:has(.imgcompress-format__combo-input) {
    cursor: text;
}

/* 标签 + 下拉一体框：手型；选项文案与 chevron 靠右见 `style.css`（`> .label--combo` + `> .select--combo` 同排） */
.imgcompress-format.imgcompress-format--combo.c-outline-field:has(.imgcompress-format__select) {
    cursor: pointer;
}

/* 一体框 · 标签 + 预设色（名称 → 色块 → Chevron）+ 透明原生 select 叠层（选项 value 为 hex；脚本同步 `.c-color-swatch-select__name` 文案与 `__swatch` 背景） */
.imgcompress-format.imgcompress-format--combo.c-outline-field.c-outline-field--color-swatch-select {
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--c-outline-field-gap);
}

.imgcompress-format.imgcompress-format--combo.c-outline-field.c-outline-field--color-swatch-select > .imgcompress-format__label--combo {
    flex-shrink: 0;
    align-self: center;
}

.c-color-swatch-select {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    align-self: stretch;
}

.c-color-swatch-select__face {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--c-dropdown-value-chevron-gap);
    width: 100%;
    min-height: var(--btn-min-height);
    box-sizing: border-box;
    pointer-events: none;
}

.c-color-swatch-select__name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-color-swatch-select__swatch {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    box-sizing: border-box;
    background-color: #334155;
    box-shadow: inset 0 0 0 1px rgba(var(--color-text-rgb), 0.06);
}

.c-color-swatch-select__chevron {
    flex: 0 0 auto;
    width: var(--select-chevron-bg-size);
    height: var(--select-chevron-bg-size);
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--select-chevron-bg-size) var(--select-chevron-bg-size);
}

/* 透明叠层：保留焦点与无障碍，不参与 flex 排版 */
.c-color-swatch-select .c-color-swatch-select__select-native.imgcompress-format__select.imgcompress-format__select--combo {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    flex: none;
    min-width: 0;
    max-width: none;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* =============================================================================
 * 工具页 · 图片上传后预览外框 `c-tool-image-preview*`（裁剪 / 加水印等）
 * - 根：`.c-tool-image-preview` — 上传前若占位在流中则 `margin-top`；卡片 `--uploaded` 后灰底槽、水平居中舞台
 * - 舞台：`.c-tool-image-preview__stage` — 白底、虚线描边、`inline-block` + `max-width:100%` 防整行撑满
 * - 媒体：`.c-tool-image-preview__media` — `img` / `canvas` 共用 `max-width`/`max-height`（与 `script-features.js` 中 MAX_DISPLAY 一致）
 * ============================================================================= */

.c-tool-image-preview {
    margin-top: var(--c-tool-uploader-toolbar-gap, var(--spacing-lg));
    text-align: center;
}

.imgcrop-card.imgcrop-card--uploaded .c-tool-image-preview,
.imgwatermark-card.imgwatermark-card--uploaded .c-tool-image-preview,
.imgmirror-card.imgmirror-card--uploaded .c-tool-image-preview,
.imgrotate-card.imgrotate-card--uploaded .c-tool-image-preview,
.imgpixelate-card.imgpixelate-card--uploaded .c-tool-image-preview,
#imgcrop-page.imgcrop-card--uploaded .c-tool-image-preview,
#imgwatermark-page.imgwatermark-card--uploaded .c-tool-image-preview,
#imgmirror-page.imgmirror-card--uploaded .c-tool-image-preview,
#imgrotate-page.imgrotate-card--uploaded .c-tool-image-preview,
#imgpixelate-page.imgpixelate-card--uploaded .c-tool-image-preview {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    text-align: center;
    border-radius: var(--radius-md);
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border-light);
    box-sizing: border-box;
}

.c-tool-image-preview__stage {
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
    margin: 0;
    vertical-align: top;
    text-align: left;
    border: 1px dashed var(--color-border-light);
    background: var(--color-bg);
    overflow: hidden;
}

.c-tool-image-preview__media {
    width: auto;
    max-width: min(100%, 720px);
    max-height: 560px;
    height: auto;
    display: block;
    vertical-align: top;
}

/* =============================================================================
 * 工具页 · 媒体工作区 `c-tool-media-*`（当前实现：视频压缩）
 * -----------------------------------------------------------------------------
 * 【复用契约】与 `index.html` 视频压缩块同构即可复用样式（脚本仍可用 `videocompress-*` 类名；提取关键帧页上传后亦同构）：
 *   - 根容器：`.videocompress-uploader.c-tool-media-workspace` — 子序：上传区 → `.error-message` → 预览 → `.videocompress-toolbar`
 *   - 底部操作：`.c-tool-actions.c-tool-actions--media`，主操作钮加 `.c-tool-actions__run`（`fit-content` + `min-width: min-content`，勿脚本写 width）
 *   - 空报错不占位：`.c-tool-media-workspace > .error-message:empty`
 *   - 参数行：`.videocompress-fields` + `.videocompress-combo.c-outline-field` + 内层 `__label` / `__input`（脚本切换 `--empty` / `--single-na` 等）；仅 `#videocompress-page` 在卡片未加 `.videocompress-card--uploaded` 时隐藏该行
 *   - 【页根状态】`#videocompress-page.videocompress-page--{uploading|busy|compressing}` 留在 `style.css`「视频压缩」短注释下方
 * ============================================================================= */

.c-tool-media-workspace > .error-message:empty {
    margin-top: 0;
    min-height: 0;
    height: 0;
    overflow: hidden;
}

.videocompress-page-inner {
    width: 100%;
    max-width: 100%;
}

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

.videocompress-dropzone {
    position: relative;
}

.videocompress-card.videocompress-card--uploaded .videocompress-dropzone {
    display: none !important;
}

.videocompress-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--color-surface-glass-soft);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    z-index: var(--z-decor-overlay);
    pointer-events: none;
}

.videocompress-loading__spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    animation: videocompress-spin 0.85s linear infinite;
}

@keyframes videocompress-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 与标题间距：仅依赖全站 .title-section 的 margin-bottom: var(--title-content-gap)（32px），此处不再叠加 margin-top，避免出现 32px+16px */
.videocompress-preview-wrap {
    margin-top: 0;
    display: flex;
    justify-content: center;
    position: relative;
}

/* 上传完成后：不再套整块灰底「背景框」，与页面白底一体 */
.videocompress-card.videocompress-card--uploaded .videocompress-uploader {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-sizing: border-box;
}

.videocompress-card.videocompress-card--uploaded .videocompress-preview-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: none;
    border-radius: 0;
}

.videocompress-card.videocompress-card--uploaded .videocompress-preview {
    width: 100%;
    max-width: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-media-black);
    object-fit: contain;
}

.videocompress-card.videocompress-card--uploaded .videocompress-processing {
    border-radius: var(--radius-md);
}

.videocompress-card.videocompress-card--uploaded .videocompress-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap, var(--spacing-lg));
    padding: 0;
    border-top: none;
    background: transparent;
}

/* 视频压缩：未成功载入视频前隐藏码率/帧率/像素（与脚本在 `.videocompress-card--uploaded` 上的切换一致） */
#videocompress-page .videocompress-card:not(.videocompress-card--uploaded) .videocompress-toolbar > .videocompress-fields {
    display: none;
}

#videocompress-page .videocompress-card:not(.videocompress-card--uploaded) .videocompress-toolbar {
    justify-content: flex-end;
}

/* 上传区仍显示且预览已展开时，在上传框与预览之间保留一段间距（上传完成后上传框隐藏，本规则不生效） */
.videocompress-card:not(.videocompress-card--uploaded) .videocompress-preview-wrap:not([hidden]) {
    margin-top: var(--spacing-lg);
}

.videocompress-preview {
    width: min(100%, 720px);
    max-height: 420px;
    display: block;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-media-black);
}

.videocompress-processing {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: rgba(var(--color-text-rgb), 0.46);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-medium);
    pointer-events: none;
    border-radius: var(--radius-md);
    flex-direction: column;
}

.videocompress-processing__spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--color-stroke-on-dark-strong);
    border-top-color: var(--color-text-inverse);
    animation: videocompress-spin 0.85s linear infinite;
}

.videocompress-processing__progress {
    width: min(280px, 72%);
    height: 6px;
    border-radius: 999px;
    background: var(--color-fill-on-dark-frost);
    overflow: hidden;
}

.videocompress-processing__progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-bg);
    transition: width 0.2s ease;
}

.videocompress-processing__progress-text {
    font-size: var(--font-size-xs);
    color: var(--color-on-dark-subtle);
}

.videocompress-preview-wrap[hidden],
.videocompress-loading[hidden],
.videocompress-processing[hidden] {
    display: none !important;
}

.videocompress-toolbar {
    margin-top: var(--c-tool-uploader-toolbar-gap, var(--spacing-lg));
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: nowrap;
    align-items: flex-end;
    min-width: 0;
}

.videocompress-toolbar .videocompress-fields {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 媒体工具底部操作行：左右内边距与全站 `.btn` 一致（`--btn-padding-inline`）；主钮勿设 min-width:0，避免首帧被 flex 压扁与「清除」重叠（不依赖脚本测宽） */
.c-tool-actions.c-tool-actions--media {
    flex: 0 0 auto;
    align-self: flex-end;
}

.c-tool-actions.c-tool-actions--media .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding-inline: var(--btn-padding-inline);
}

/* 次要「清除」与文本工具一致最小宽度 */
.c-tool-actions.c-tool-actions--media .btn.btn-clear {
    min-width: var(--btn-text-action-min-width);
}

.c-tool-actions.c-tool-actions--media .c-tool-actions__run {
    box-sizing: border-box;
    min-width: min-content;
    width: fit-content;
    max-width: 100%;
    flex-shrink: 0;
    white-space: nowrap;
}

/* =============================================================================
 * 工具栏 / 一体框 · `c-imgcompress-select-dropdown`（浅色自定义列表，`position:fixed`）
 * - 初始 HTML：`.c-imgcompress-select-dropdown` 唯一直接子节点为 `select.imgcompress-format__select`（可叠 `idphoto-select` 等）；脚本注入 `button.__trigger`（继承原 select 的 class）+ 子节点 `.c-line-icon--chevron-down`（`currentColor` 与字色一致）+ `.__panel` + 隐藏 `select`；值与 Chevron 间距为 `:root` 的 `--c-dropdown-value-chevron-gap`（默认 4px）
 * - `label[for]` 仍写原 `select.id`；增强后脚本改为指向 `__trigger`（`id` = 原 id + `-display`）
 * - 排除：`select` 在 `.c-color-swatch-select` 内不增强
 * ============================================================================= */
.c-imgcompress-select-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    min-width: 0;
}

.c-imgcompress-select-dropdown__trigger {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--c-dropdown-value-chevron-gap);
    width: 100%;
    margin: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 不用 `background-image` 箭头，改用子节点 `.c-line-icon--chevron-down`（`currentColor` 与字色一致） */
.c-imgcompress-select-dropdown__trigger.imgcompress-format__select {
    background-image: none !important;
}

/* 证件照 `.idphoto-select` 为原生 select 预留了 SVG Chevron；增强为 `button.__trigger` 后须去掉，避免与线标叠影或产生「竖线」感 */
.c-imgcompress-select-dropdown__trigger.idphoto-select {
    background-image: none !important;
}

.c-imgcompress-select-dropdown__trigger.idphoto-select:disabled {
    background-image: none !important;
}

/* 与 `--select-chevron-bg-size` 对齐；线稿图标用 mask，着色随触发钮 `color` */
.c-imgcompress-select-dropdown__chevron.c-line-icon--chevron-down {
    flex-shrink: 0;
    width: var(--select-chevron-bg-size);
    height: var(--select-chevron-bg-size);
}

/* 一体框内：当前值与 Chevron 紧挨，整体靠触发区右侧；间距 `--c-dropdown-value-chevron-gap` */
.c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo {
    justify-content: flex-end;
    padding-right: var(--c-outline-field-pad-inline-end);
}

.c-imgcompress-select-dropdown__trigger.imgcompress-format__select--combo .c-imgcompress-select-dropdown__value {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

/* 工具栏仅下拉（无 `--combo`）：当前值与 Chevron 紧挨，整体靠左 */
.c-imgcompress-select-dropdown__trigger.imgcompress-format__select:not(.imgcompress-format__select--combo) {
    justify-content: flex-start;
}

.c-imgcompress-select-dropdown__trigger.imgcompress-format__select:not(.imgcompress-format__select--combo) .c-imgcompress-select-dropdown__value {
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
}

.c-imgcompress-select-dropdown__trigger:disabled {
    cursor: not-allowed;
    color: var(--color-text-placeholder);
}

.c-imgcompress-select-dropdown__value {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-imgcompress-select-dropdown__panel {
    position: fixed;
    z-index: var(--z-floating-popover);
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-xs);
    min-width: 0;
    max-height: min(16rem, calc(100vh - 2 * var(--spacing-lg)));
    overflow-y: auto;
    list-style: none;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg);
    box-shadow:
        0 4px 16px rgba(var(--color-text-rgb), 0.08),
        0 1px 2px rgba(var(--color-text-rgb), 0.04);
}

.c-imgcompress-select-dropdown__panel[hidden] {
    display: none !important;
}

.c-imgcompress-select-dropdown__option {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    font: inherit;
    font-size: var(--font-size-base);
    line-height: 1.35;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.c-imgcompress-select-dropdown__option:hover,
.c-imgcompress-select-dropdown__option:focus-visible {
    outline: none;
    background: var(--color-bg-hover);
}

.c-imgcompress-select-dropdown__option--selected {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.c-imgcompress-select-dropdown__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================================================
 * 媒体 · 任务列表组件 `c-media-task-list`（图片压缩 / 图片转格式 / PDF / PPT 等脚本渲染）
 * - 根节点：`class="imgcompress-list c-media-task-list"`（`.imgcompress-list` 保留横向滚动与宽度；叠用本组件得纵排 gap、无行间分割线）
 * - 与 `style.css` `.imgcompress-toolbar`（格式一体框可叠 `.imgcompress-format--combo-toolbar-media` 等）、`.imgcompress-card` 同页配套；状态点/文案色用 :root 令牌
 * ============================================================================= */
.imgcompress-list-wrap {
    margin-top: var(--spacing-lg);
    border-top: none;
    padding-top: 0;
}

.imgcompress-list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* 组件根：纵栈 + 行间间距，替代相邻行 border 分割线 */
.imgcompress-list.c-media-task-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.imgcompress-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 0.6fr;
    column-gap: var(--spacing-sm);
    row-gap: 0;
    align-items: center;
    min-width: 48rem;
    width: max(100%, 48rem);
    padding: var(--spacing-sm) 0;
    border-top: none;
    font-size: var(--font-size-base);
}

.imgcompress-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    justify-self: start;
    max-width: 100%;
    color: var(--color-text);
}

.imgcompress-size-cell {
    text-align: left;
    justify-self: start;
    min-width: 5rem;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.imgcompress-size-cell--after {
    text-align: left;
    justify-self: start;
    min-width: 5rem;
}

.imgcompress-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.imgcompress-error-inline {
    color: var(--color-error);
    font-size: var(--font-size-xs);
    line-height: 1.2;
    word-break: break-all;
    max-width: 18rem;
}

.imgcompress-empty {
    color: var(--color-text-placeholder);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) 0;
    text-align: center;
}

.imgcompress-status-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
}

.imgcompress-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.imgcompress-status-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
}

.imgcompress-status-line--queued .imgcompress-status-dot {
    background: var(--color-border-strong);
}

.imgcompress-status-line--queued .imgcompress-status-text {
    color: var(--color-text-tertiary);
}

.imgcompress-status-line--processing .imgcompress-status-dot {
    background: var(--color-primary);
    animation: imgcompressDotPulse 1s ease-in-out infinite;
}

.imgcompress-status-line--processing .imgcompress-status-text {
    color: var(--color-primary);
}

.imgcompress-status-line--done .imgcompress-status-dot {
    background: var(--color-success);
}

.imgcompress-status-line--done .imgcompress-status-text {
    color: var(--color-success);
}

.imgcompress-status-line--fail .imgcompress-status-dot {
    background: var(--color-error);
}

.imgcompress-status-line--fail .imgcompress-status-text {
    color: var(--color-error);
}

@keyframes imgcompressDotPulse {
    0% {
        transform: scale(0.72);
        opacity: 0.45;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.72);
        opacity: 0.45;
    }
}

.imgcompress-actions-cell {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    white-space: nowrap;
}

.imgcompress-mini-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    cursor: pointer;
}

.imgcompress-mini-btn:hover:not(:disabled) {
    color: var(--color-primary);
    text-decoration: underline;
}

.imgcompress-mini-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

/* PDF 翻译列表：预览/下载用锚点，与按钮同款字色与 hover */
a.imgcompress-mini-btn.imgcompress-mini-btn--link {
    text-decoration: none;
}

a.imgcompress-mini-btn.imgcompress-mini-btn--link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.imgcompress-mini-btn--dead {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

/* PDF 翻译 · 固定「简体中文」展示（与下拉一体框对齐，无原生 select） */
.imgcompress-format.imgcompress-format--pdftranslate-fixed {
    cursor: default;
}

.imgcompress-lang-fixed {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: var(--imgcompress-select-font-size, 0.9375rem);
    line-height: 1.35;
    color: var(--color-text-primary);
    padding-block: 0.35rem;
}

/* 功能页：script-features.js 拉取完成前遮罩，避免上传区未绑定却可点 */
.c-page--features-loading {
    position: relative;
}

.c-features-load-gate {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.88);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    pointer-events: auto;
}

/* PDF 翻译 · 状态行配色（圆点 + 文案；失败仍用 `--color-error`） */
.imgcompress-status-line--pdftranslate-processing .imgcompress-status-dot {
    background: var(--color-pdftranslate-processing);
    animation: imgcompressDotPulse 1s ease-in-out infinite;
}

.imgcompress-status-line--pdftranslate-processing .imgcompress-status-text {
    color: var(--color-pdftranslate-processing);
}

.imgcompress-status-line--pdftranslate-done .imgcompress-status-dot {
    background: var(--color-pdftranslate-done);
}

.imgcompress-status-line--pdftranslate-done .imgcompress-status-text {
    color: var(--color-pdftranslate-done);
}

/* =============================================================================
 * 媒体预览浮层 · 右上角图标按钮（下载 / 重置 / 关闭）
 * - 与 `style.css` 中 `.imgcompress-preview-modal` / `.imgcompress-preview-panel` 配套
 * - Hover / focus 与 `.chip:hover:not(:disabled)` 同族：`--color-primary`、`--color-bg-hover`、`--color-focus-ring`
 * - DOM 顺序建议：下载 → 重置 → 关闭（视觉上从右到左为关闭、重置、下载）
 * ============================================================================= */
.imgcompress-preview-close,
.imgcompress-preview-reset,
.imgcompress-preview-dl {
    position: absolute;
    top: var(--spacing-md);
    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--color-border-light);
    background-color: var(--color-bg);
    color: var(--color-text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-local-controls);
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}

.imgcompress-preview-close {
    right: var(--spacing-md);
}

.imgcompress-preview-reset {
    right: calc(var(--spacing-md) + 2.25rem + var(--spacing-sm));
}

.imgcompress-preview-dl {
    right: calc(var(--spacing-md) + 2.25rem + var(--spacing-sm) + 2rem + var(--spacing-sm));
}

.imgcompress-preview-close:hover,
.imgcompress-preview-reset:hover,
.imgcompress-preview-dl:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

.imgcompress-preview-close:focus-visible,
.imgcompress-preview-reset:focus-visible,
.imgcompress-preview-dl:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 var(--focus-ring-size) var(--color-focus-ring);
}

.imgcompress-preview-close:active,
.imgcompress-preview-reset:active,
.imgcompress-preview-dl:active {
    border-color: var(--color-primary-hover);
    background-color: var(--color-bg-hover);
}

.imgcompress-preview-close img,
.imgcompress-preview-reset img,
.imgcompress-preview-dl img {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: block;
    filter: var(--icon-theme-filter);
}

/* 提取关键帧：关键帧卡片栅格（预览弹层按钮见上方「媒体预览浮层 · 右上角图标按钮」） */
.keyframeextract-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0 0;
    padding: 0;
}

.keyframeextract-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.keyframeextract-card__frame {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background: var(--color-text);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.keyframeextract-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.keyframeextract-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-text-rgb), 0.42);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}

.keyframeextract-card:hover .keyframeextract-card__overlay,
.keyframeextract-card:focus-within .keyframeextract-card__overlay {
    opacity: 1;
    pointer-events: auto;
}

.keyframeextract-card__preview,
.keyframeextract-card__del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-sizing: border-box;
    background: var(--color-surface-glass-strong);
    color: var(--color-text);
    box-shadow: var(--color-shadow-xs);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.keyframeextract-card__preview {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
}

.keyframeextract-card__preview img,
.keyframeextract-card__del img {
    width: 14px;
    height: 14px;
    display: block;
    filter: var(--icon-theme-filter);
}

.keyframeextract-card__del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
}

.keyframeextract-card__preview:hover,
.keyframeextract-card__del:hover {
    background: var(--color-bg);
    transform: scale(1.05);
}

.keyframeextract-card__preview:focus-visible,
.keyframeextract-card__del:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
}

.keyframeextract-card__meta {
    min-width: 0;
    padding: 0 2px;
    text-align: center;
}

.keyframeextract-card__caption {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1.35;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.videocompress-fields {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    align-items: flex-end;
}

.videocompress-field {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

/* 码率 / 帧率 / 像素：标签 + 数值一体框；数字在脚本量宽后于框内靠右（`text-align: right`） */
.videocompress-field--combo {
    align-self: flex-end;
}

/* 外框描边/背景/聚焦见 `.c-outline-field`（须与 `videocompress-combo` 同节点叠用） */
.videocompress-combo.c-outline-field {
    cursor: text;
    /* 与 `.c-outline-field` 一致：左略松、右略紧，标签贴左缘、数值/箭头区可贴右缘（勿用两侧同 `--c-outline-field-pad-inline-start`，否则一体框右侧显空） */
    padding: 0 var(--c-outline-field-pad-inline-end) 0 var(--c-outline-field-pad-inline-start);
    /* 与历史脚本测宽逻辑一致：标签—数值略紧于 PDF 一体框时可用变量覆盖 */
    gap: var(--videocompress-label-value-gap, 4px);
}

.videocompress-combo.c-outline-field:has(.videocompress-combo__input:disabled) {
    cursor: default;
}

/* 前缀「码率」「帧率」「像素」等（无冒号，与控件间距由 `.c-outline-field` / `--videocompress-label-value-gap` 承担）；字重同 `.btn` */
.videocompress-combo__label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    user-select: none;
    margin: 0;
    padding: 0;
}

.videocompress-combo__input {
    flex: 0 0 auto;
    min-width: 0;
    width: 3.25rem;
    margin: 0;
    padding: 0;
    text-align: right;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--btn-min-height);
    height: var(--btn-min-height);
    color: var(--color-text);
    outline: none;
    box-shadow: none;
    transition: color 0.15s ease;
}

.videocompress-combo__input::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
    text-align: right;
}

.videocompress-combo__input:disabled {
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}

.videocompress-combo__input::-webkit-outer-spin-button,
.videocompress-combo__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.videocompress-combo__input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* 一体框尾缀（单位 %、px 等），与 `.videocompress-combo__label` 同色阶 */
.videocompress-combo__suffix {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    user-select: none;
    margin: 0;
    padding: 0;
}

/* =============================================================================
 * HSB 颜色编辑器 `.c-color-editor-popover` / `.c-color-editor`
 * - 用途：固定悬浮层内 SV 方图 + 色相条 + HSB 数字 + 底栏（吸管 + HEX + 透明度）；与 `.videocompress-combo.c-outline-field` 叠用。
 * - 脚本契约：`canvas` id、输入 id 由业务页自定义；样式仅依赖本组件类名与 `videocompress-combo__input--color-editor-*` 修饰符。
 * - 令牌：宽度可通过 `.c-color-editor` 上 `--c-color-editor-hsb-col-w` / `--c-color-editor-hex-min` / `--c-color-editor-opacity-w` 覆盖。
 * - 参考实现：`index.html` 图片打码 `#imgpixelateMaskPopover`（逻辑见 `script-features.js` · `initImgPixelate`）。
 * ============================================================================= */

.c-color-editor-popover {
    position: fixed;
    z-index: var(--z-floating-popover);
    box-sizing: border-box;
    max-width: min(calc(100vw - 1rem), 26rem);
    filter: drop-shadow(0 8px 24px rgba(15, 23, 42, 0.12));
}

.c-color-editor-popover[hidden] {
    display: none !important;
}

.c-color-editor-popover__inner {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    background-color: var(--color-bg);
    overflow: hidden;
}

.c-color-editor {
    --c-color-editor-hsb-col-w: 7.375rem;
    --c-color-editor-hex-min: 10.25rem;
    --c-color-editor-opacity-w: 6.5rem;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    box-sizing: border-box;
}

.c-color-editor__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--c-color-editor-hsb-col-w);
    gap: var(--spacing-md);
    align-items: start;
}

.c-color-editor__picker {
    min-width: 0;
}

.c-color-editor__sv-hue {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-sm);
    max-width: 100%;
}

.c-color-editor__sv-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 14rem;
    aspect-ratio: 200 / 176;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    touch-action: none;
    background-color: var(--color-bg-muted);
}

.c-color-editor__sv {
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    cursor: crosshair;
}

.c-color-editor__sv-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.35),
        inset 0 0 0 1px rgba(15, 23, 42, 0.15);
    pointer-events: none;
    left: 0;
    top: 0;
}

.c-color-editor__hue-wrap {
    position: relative;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    min-height: 6rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    touch-action: none;
    align-self: stretch;
}

.c-color-editor__hue {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 6rem;
    vertical-align: top;
    cursor: ns-resize;
}

.c-color-editor__hue-thumb {
    position: absolute;
    left: 50%;
    width: calc(100% + 6px);
    height: 4px;
    margin-left: calc(-50% - 3px);
    margin-top: -2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.45),
        inset 0 0 0 1px rgba(15, 23, 42, 0.12);
    pointer-events: none;
    top: 0;
}

.c-color-editor__hsb-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    align-items: stretch;
    width: var(--c-color-editor-hsb-col-w);
    max-width: var(--c-color-editor-hsb-col-w);
}

.c-color-editor__hsb-head {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-heading);
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
}

.c-color-editor__hsb-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.c-color-editor__hsb-rows .videocompress-combo.c-outline-field {
    width: var(--c-color-editor-hsb-col-w);
    min-width: var(--c-color-editor-hsb-col-w);
    max-width: var(--c-color-editor-hsb-col-w);
    box-sizing: border-box;
    justify-content: space-between;
}

.c-color-editor__hsb-rows .videocompress-combo__input--color-editor-hsb-h {
    flex: 0 0 auto;
    width: 3rem;
    text-align: right;
}

.c-color-editor__hsb-rows .videocompress-combo__input--color-editor-hsb-sb {
    flex: 0 0 auto;
    width: 2.5rem;
    text-align: right;
}

.c-color-editor__footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    padding-top: var(--spacing-sm);
    margin-top: 1px;
    border-top: 1px solid var(--color-border-light);
}

.c-color-editor__footer-hex-combo {
    flex: 1 1 auto;
    width: var(--c-color-editor-hex-min);
    min-width: min(var(--c-color-editor-hex-min), 100%);
    max-width: none;
    box-sizing: border-box;
    justify-content: space-between;
}

.c-color-editor__footer-hex-combo .videocompress-combo__input--color-editor-hex {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.c-color-editor__footer-opacity-combo {
    flex: 0 0 auto;
    width: var(--c-color-editor-opacity-w);
    min-width: var(--c-color-editor-opacity-w);
    max-width: var(--c-color-editor-opacity-w);
    box-sizing: border-box;
    justify-content: space-between;
}

.c-color-editor__footer-opacity-combo .videocompress-combo__input--color-editor-opacity {
    flex: 0 0 auto;
    width: 2.5rem;
    text-align: right;
}

.c-color-editor__eyedropper.btn.btn-clear {
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--btn-min-height);
    min-width: var(--btn-min-height);
    height: var(--btn-min-height);
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-outline-field-border);
    border-radius: var(--radius-md);
    background-color: var(--c-outline-field-bg);
    color: var(--color-text);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.c-color-editor__eyedropper.btn.btn-clear:hover:not(:disabled) {
    border-color: var(--color-primary-muted);
}

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

.c-color-editor__eyedropper.btn.btn-clear:disabled {
    opacity: 1;
    cursor: not-allowed;
    background-color: var(--c-outline-field-bg-muted);
    border-color: var(--color-border-light);
    color: var(--color-text-placeholder);
}

@media (max-width: 520px) {
    .c-color-editor__body {
        grid-template-columns: 1fr;
    }

    .c-color-editor__footer {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .c-color-editor__footer-hex-combo {
        flex: 1 0 var(--c-color-editor-hex-min);
        min-width: 9rem;
    }
}

/* 图片打码 · 遮罩颜色触发钮右侧值区：HEX（等宽）→ 色块；与 `button.videocompress-combo--mask` 内叠用 */
.imgpixelate-mask-trigger__value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    flex: 1 1 auto;
    min-width: 0;
}

.imgpixelate-mask-trigger__swatch {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d1d9e3 25%, transparent 25%),
        linear-gradient(-45deg, #d1d9e3 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d9e3 75%),
        linear-gradient(-45deg, transparent 75%, #d1d9e3 75%);
    background-size: 8px 8px;
    background-position:
        0 0,
        0 4px,
        4px -4px,
        -4px 0;
}

.imgpixelate-mask-trigger__hex {
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    text-align: right;
}

/* 组件库展厅：与打码工具栏同宽（10rem） */
#designlib-page .c-designlib-mask-color-trigger-wrap > button.videocompress-combo.c-outline-field.videocompress-combo--mask {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
    box-sizing: border-box;
    justify-content: space-between;
    /* 与打码工具栏遮罩钮一致：`space-between` 时左右同 `--c-outline-field-pad-inline-start`，避免 HEX/色块贴右线 */
    padding: 0 var(--c-outline-field-pad-inline-start);
}

/* 标签 + 原生下拉：与码率一体框同叠 `.c-outline-field`，当前值与 Chevron 靠右（见 `style.css` `.imgcompress-format__select`） */
.videocompress-combo.c-outline-field.videocompress-combo--select {
    cursor: pointer;
    gap: var(--videocompress-label-value-gap, 4px);
    justify-content: flex-start;
    align-items: stretch;
}

.videocompress-combo.c-outline-field.videocompress-combo--select:has(.imgcompress-format__select:disabled) {
    cursor: default;
}

.videocompress-combo.videocompress-combo--select > .videocompress-combo__label {
    align-self: center;
}

.videocompress-combo.videocompress-combo--select > .imgcompress-format__select.imgcompress-format__select--combo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: right;
    text-align-last: right;
}

/* 像素：宽 x 高（外框见 `.c-outline-field`；标签—数值间距与码率/帧率一致） */
.videocompress-combo--resolution {
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    gap: var(--videocompress-label-value-gap, 4px);
    justify-content: flex-start;
    align-self: flex-start;
}

/* 宽 x 高：两格数字均在各自框内靠右（脚本按位数设 `--videocompress-input-w` / 行内 width） */
.videocompress-resolution-dims {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    flex: 0 0 auto;
    min-width: 0;
}

.videocompress-resolution-single-na {
    display: none;
    flex: 0 0 auto;
    align-self: center;
    min-height: var(--btn-min-height);
    line-height: var(--btn-min-height);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-placeholder);
    text-align: left;
}

.videocompress-combo--resolution.videocompress-combo--single-na .videocompress-resolution-single-na {
    display: block;
}

.videocompress-combo--resolution.videocompress-combo--single-na .videocompress-resolution-dims {
    display: none !important;
}

.videocompress-resolution-dims .videocompress-combo__sep {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    margin: 0;
    padding: 0;
    user-select: none;
    color: var(--color-text-tertiary);
}

.videocompress-combo__input--resolution {
    flex: 0 0 auto;
    width: var(--videocompress-input-w, 3.5ch);
    min-width: 0;
    max-width: 7.5rem;
    padding: 0;
    text-align: right;
}

.videocompress-number {
    width: var(--videocompress-input-w, 104px);
    min-width: 96px;
    max-width: 190px;
    height: var(--btn-min-height);
    min-height: var(--btn-min-height);
    max-height: var(--btn-min-height);
    padding: 0 var(--spacing-md);
    transition: width 0.16s ease;
}

.videocompress-number:disabled {
    background: var(--color-bg-hover);
    color: var(--color-text-placeholder);
    cursor: not-allowed;
}


/* ---------- 首页：设计变量（供 .c-home-* / 氛围层共用）---------- */
:root {
    --c-app-main-z: var(--z-raised);
    --c-app-main-bg: var(--color-bg);
    --c-app-main-padding-inline: 0;
    /* 首页情感驿站：括号内长文案横向滚动周期（过短时由脚本略拉长，避免闪得太快） */
    --home-emotional-marquee-duration: 16s;
    /* 走马灯水平速度（px/s），用于按文案长度换算动画时长 */
    --home-emotional-marquee-px-per-sec: 42;
    /* 首页搜索框：大圆角（胶囊形，随高度自动对称） */
    --home-search-radius: 9999px;
    /* 首页：搜索条下缘 → 工具卡片栅格上缘（略收紧，避免首屏过于松散） */
    --home-search-to-cards-gap: 44px;
    /* 首页：工具栅格与灰底裁切区四边留白（与卡片背景间距 8px） */
    --home-tool-grid-padding-block-start: var(--spacing-sm);
    --home-tool-grid-padding-inline: var(--spacing-sm);
    --home-tool-grid-padding-block-end: var(--spacing-sm);
    /* 下滑提示距 `.home-page` 版心底（页脚上方可视留白），与安全区叠加 */
    --home-scroll-cue-offset-bottom: 32px;
    --home-scroll-cue-icon-opacity: 0.26;
    --home-scroll-cue-icon-opacity-hover: 0.62;
    /* 首页：搜索框与卡片区共用宽度（默认 724px；≥1920→880；≥2560→1080，与版心断点配套） */
    --home-search-cards-width: 724px;
    /* `logo.svg` 线性渐变端点（与顶栏圆形标几何一致；首页胶囊/字色再与全站 --color-brand-* 混用，略加重蓝青） */
    --home-logo-mint: #64ecd4;
    --home-logo-teal: #2eb8d2;
    --home-logo-deep: #32bad3;
    /* 未写入 `--home-hero-title-color` 时：字色偏蓝青（与 --color-brand-teal 同系），Hub 略亮 */
    /* 略提亮 + 偏青：避免过闷的深藏青 */
    --home-title-word-color: #0e4a66;
    --home-title-hub-color: #258daa;
    /*
     * 首页搜索条 / 工具卡：实色分层——搜索最亮、卡片略灰，叠在视频上轮廓更清晰。
     */
    /* 与全站 `--color-border-light` / `--color-border-muted-hover` / 搜索专用边线归并，减少近邻灰阶 */
    --home-office-border: var(--color-border-light);
    --home-office-border-hover: var(--color-border-muted-hover);
    /* 搜索条：与全站玻璃面 / 搜索描边令牌一致 */
    --home-office-search-bg: var(--color-surface-glass-strong);
    --home-office-search-bg-hover: var(--color-surface-search-hover);
    --home-office-search-border: var(--color-border-search);
    --home-office-search-border-hover: var(--color-border-search-hover);
    --home-office-card-border: var(--color-border-light);
    --home-office-card-border-hover: var(--color-border-muted-hover);
    /* 功能卡片：默认白底；hover 略提亮灰底 + 阴影加深，强化「可点击」感知 */
    --home-office-card-bg: var(--color-bg);
    --home-office-card-bg-hover: var(--color-bg-muted);
    /* 氛围底层实色（图片/视频未加载或透明度为 0 时露出；中性浅灰，避免偏冷蓝灰） */
    --home-ambient-base-fallback: rgba(var(--color-neutral-page-fill-rgb), 0.92);
    /* 首页背景图与背景视频（就绪后）共用不透明度；略降使前景更跳 */
    --home-ambient-media-opacity: 0.2;
    /* 首页氛围遮罩：由 JS 写入 rgba，默认透明 */
    --home-ambient-scrim: transparent;
    /* 首页：栅格外侧、body 漏出区域；与氛围 fallback 同族中性灰 */
    --home-page-root-fill: rgb(var(--color-neutral-page-fill-rgb));
    /* 与 .c-home-tool-card 同一套浅阴影，无额外彩色光晕 */
    --home-office-shadow-search:
        0 1px 2px rgba(var(--color-text-rgb), 0.07),
        0 4px 18px rgba(var(--color-text-rgb), 0.09),
        0 14px 40px rgba(var(--color-text-rgb), 0.1),
        inset 0 1px 0 var(--color-surface-inset-highlight);
    --home-office-shadow-search-hover:
        0 2px 8px rgba(var(--color-text-rgb), 0.08),
        0 10px 28px rgba(var(--color-text-rgb), 0.1),
        0 22px 48px rgba(var(--color-text-rgb), 0.11),
        inset 0 1px 0 var(--color-surface-inset-highlight-strong);
    /* 功能卡片：默认态加重对比，blur 上限约 12px，扩散仍收在卡片周边 */
    --home-office-shadow-card:
        0 1px 2px rgba(var(--color-text-rgb), 0.14),
        0 2px 6px rgba(var(--color-text-rgb), 0.1),
        0 4px 12px rgba(var(--color-text-rgb), 0.06);
    --home-office-shadow-card-hover:
        0 3px 8px rgba(var(--color-text-rgb), 0.06),
        0 10px 26px rgba(var(--color-text-rgb), 0.1),
        0 18px 48px rgba(var(--color-text-rgb), 0.09),
        0 28px 64px rgba(var(--color-text-rgb), 0.06);
    /*
     * 首页前景字色：功能卡片标题用正文墨（最深档）；副文仍次级灰，与标题字重形成层级。
     */
    --home-text-hero: var(--color-text);
    --home-text-primary: var(--color-text);
    --home-text-secondary: var(--color-text-secondary);
    --home-text-muted: var(--color-text-placeholder);
    /* 情感驿站叠字：占位提示档，明显轻于用户输入（搜索框 `--home-text-primary`） */
    --home-text-emotional: var(--color-text-tertiary);
    /* 前缀 + 时间：提示感，勿与正文墨同级 */
    --home-text-emotional-prefix: rgba(var(--color-text-rgb), 0.28);
    --home-text-emotional-clock: rgba(var(--color-text-rgb), 0.28);
    /* 括号内滚动语录：与前缀、时钟同色 */
    --home-text-emotional-joke: var(--home-text-emotional-prefix);
    --home-text-card: var(--color-text-secondary);
    /* 首页工具卡片标题：与全站正文「墨」同级（--color-text） */
    --home-text-tool-card-title: var(--color-text);
    --home-text-card-hint: var(--home-text-card);
    --home-icon-well-bg: var(--color-slate-650-a07);
    /* 首页搜索框 focus / 外环：与全站主色一致 */
    --home-search-focus-ring: rgba(var(--color-primary-rgb), 0.22);
    --home-search-focus-glow: rgba(var(--color-primary-rgb), 0.12);
    /*
     * 搜索框边框扫光 conic-gradient 色标（原 Tailwind 蓝系已换为品牌 mint/teal 同族）
     * 依赖 style.css 的 --color-brand-mint-rgb / --color-brand-teal-rgb
     */
    --home-search-shine-edge: rgba(var(--color-brand-mint-rgb), 0.52);
    --home-search-shine-pale: #c8ebf7;
    --home-search-shine-core: rgba(var(--color-brand-teal-rgb), 0.92);
    --home-search-shine-mid: #a9dff4;
    --home-search-shine-fade: rgba(var(--color-brand-mint-rgb), 0.44);
    /* 首页排版（搜索与氛围条用 body；工具卡片标题 18px、副文 sm） */
    /* 首屏字标：略大一档 + 略紧字距，大屏更舒展 */
    --home-typo-hero-size: clamp(1.6875rem, 1.42rem + 1.35vw, 2.65rem);
    --home-typo-hero-tracking: -0.02em;
    --home-typo-search-input-size: var(--font-size-body);
    --home-typo-emotional-size: var(--font-size-body);
    --home-typo-card-title-size: var(--font-size-lg);
    --home-typo-card-title-tracking: -0.005em;
    --home-typo-card-hint-size: var(--font-size-sm);
    --home-typo-empty-size: var(--font-size-body);
    /* 首页工具卡片：内边距与圆角（四边一致、四角同径） */
    --home-tool-card-padding: var(--spacing-xxl);
    --home-tool-card-radius: 8px;
    /* 标题与副标题间距 12px，与全站 --spacing-md 一致 */
    --home-tool-card-gap: var(--spacing-md);
    /* 工具面板与灰底裁切区圆角 */
    --home-tool-panel-radius: 12px;
    /* 首页页脚：正文墨降透明 */
    --home-footer-text: rgba(var(--color-text-rgb), 0.4);
    --home-footer-text-hover: rgba(var(--color-text-rgb), 0.72);
}

@supports (color: color-mix(in srgb, white, black)) {
    :root {
        --home-text-emotional: color-mix(in srgb, var(--color-text-tertiary) 36%, var(--color-surface-raised));
        --home-text-emotional-prefix: color-mix(in srgb, var(--home-text-emotional) 90%, var(--color-text) 10%);
        --home-text-emotional-clock: color-mix(in srgb, var(--home-text-emotional) 88%, var(--color-text) 12%);
        --home-text-emotional-joke: var(--home-text-emotional-prefix);
        --home-title-word-color: color-mix(in srgb, var(--color-brand-teal) 58%, var(--color-text) 42%);
        --home-title-hub-color: color-mix(in srgb, var(--color-brand-mint) 34%, var(--color-brand-teal) 66%);
    }
}

/* 与 `style.css` 中间栏版心对齐：首页搜索条 + 工具卡片区宽度 */
@media (min-width: 1920px) {
    :root {
        --home-search-cards-width: 880px;
    }
}

@media (min-width: 2560px) {
    :root {
        --home-search-cards-width: 1080px;
    }
}

/* 搜索条边框扫光：供 conic-gradient(from …) 插值，勿对 ::before 整体 rotate */
@property --c-home-search-shine-from {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* ---------- 卡片宫格（通用） ---------- */

.c-card-grid {
    display: grid;
    gap: var(--spacing-card-grid);
    min-width: 0;
    align-content: start;
}

.c-card-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-card-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- 首页：标题区 ---------- */

.c-home-hero {
    text-align: center;
    margin-bottom: 52px;
}

/* 胶囊与副标纵向成组：副标在胶囊外、正下方；语言见 script-core STATIC_TEXT_I18N.homeTagline* */
.c-home-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58em;
    width: 100%;
    max-width: 100%;
}

/* 胶囊下副标：两段小字 + Icon/circle-fill.svg */
.c-home-tagline {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.42em;
    margin: 0;
    padding: 0 0.75rem;
    box-sizing: border-box;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    letter-spacing: 0.055em;
    color: var(--home-text-secondary);
    max-width: min(var(--home-search-cards-width), 100%);
    text-shadow: none;
    width: max-content;
}

.c-home-tagline__part {
    flex: 0 1 auto;
    min-width: 0;
}

.c-home-tagline__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: var(--home-text-secondary);
}

.c-home-tagline__dot img {
    display: block;
    width: 7px;
    height: 7px;
    object-fit: contain;
    opacity: 0.72;
    filter: var(--icon-theme-filter);
}

@supports (color: color-mix(in srgb, white, black)) {
    .c-home-tagline {
        color: color-mix(in srgb, var(--home-text-secondary) 94%, var(--color-brand-teal) 6%);
    }

    .c-home-tagline__dot {
        color: color-mix(in srgb, var(--home-text-secondary) 94%, var(--color-brand-teal) 6%);
    }
}

.c-home-title {
    margin: 0;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.26em;
    padding: 0.46em 1.38em;
    box-sizing: border-box;
    text-align: center;
    font-size: var(--home-typo-hero-size);
    font-weight: var(--font-weight-heading);
    /* 可由设置页写入 `:root` `--home-hero-title-color`；未设置时与 logo 同族青绿字色（见 `--home-title-word-color`） */
    color: var(--home-hero-title-color, var(--home-title-word-color));
    line-height: var(--line-height-heading);
    letter-spacing: var(--home-typo-hero-tracking);
    border-radius: 9999px;
    /* 玻璃层：logo 青绿 + 全站品牌蓝青（--color-brand-mint-rgb / primary）；rgba 基底兼容旧引擎 */
    border: 1px solid rgba(var(--color-primary-rgb), 0.38);
    background:
        linear-gradient(168deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0.1) 100%),
        linear-gradient(
            118deg,
            rgba(var(--color-brand-mint-rgb), 0.26) 0%,
            rgba(var(--color-primary-rgb), 0.22) 52%,
            rgba(var(--color-primary-rgb), 0.14) 100%
        );
    backdrop-filter: blur(22px) saturate(1.28);
    -webkit-backdrop-filter: blur(22px) saturate(1.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -0.5px 0 rgba(var(--color-primary-rgb), 0.12),
        0 1px 2px rgba(var(--color-text-rgb), 0.03),
        0 12px 32px -10px rgba(var(--color-primary-rgb), 0.14),
        0 22px 48px -18px rgba(var(--color-text-rgb), 0.05);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.c-home-title__brand {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.26em;
}

@supports (color: color-mix(in srgb, white, black)) {
    .c-home-title {
        border: 1px solid color-mix(in srgb, var(--color-brand-teal) 38%, transparent);
        background:
            linear-gradient(168deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 46%, rgba(255, 255, 255, 0.1) 100%),
            linear-gradient(
                118deg,
                color-mix(
                        in srgb,
                        color-mix(in srgb, var(--home-logo-mint) 40%, var(--color-brand-mint) 60%) 28%,
                        transparent
                    )
                    0%,
                color-mix(
                        in srgb,
                        color-mix(in srgb, var(--home-logo-teal) 45%, var(--color-brand-teal) 55%) 26%,
                        transparent
                    )
                    50%,
                color-mix(
                        in srgb,
                        color-mix(in srgb, var(--home-logo-deep) 42%, var(--color-brand-teal) 58%) 18%,
                        transparent
                    )
                    100%
            );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.72),
            inset 0 -0.5px 0 color-mix(in srgb, var(--color-brand-teal) 14%, transparent),
            0 1px 2px rgba(var(--color-text-rgb), 0.03),
            0 12px 32px -10px color-mix(in srgb, var(--color-brand-teal) 16%, transparent),
            0 22px 48px -18px rgba(var(--color-text-rgb), 0.05);
    }
}

.c-home-title__word {
    display: inline-block;
    font-weight: 700;
    letter-spacing: -0.028em;
}

/* 后缀略轻一字重 + 更亮青；Hub 色见 `--home-title-hub-color`（自定义 `--home-hero-title-color` 时与主词一致） */
.c-home-title__word--hub {
    font-weight: 600;
    font-size: 0.92em;
    letter-spacing: 0.085em;
    text-transform: none;
    color: var(--home-hero-title-color, var(--home-title-hub-color));
}

/* ---------- 首页：搜索条 ---------- */

.c-home-search-section {
    position: static;
    margin: 0 0 var(--home-search-to-cards-gap);
    width: min(var(--home-search-cards-width), 100%);
    max-width: 100%;
    min-width: 0;
    /* 与 .c-home-tool-grid 横向内边距一致，胶囊外沿与卡片内容区对齐 */
    padding: 0 var(--home-tool-grid-padding-inline);
    justify-self: center;
    box-sizing: border-box;
    background: transparent;
}

.c-home-search {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 48px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--home-office-search-border);
    border-radius: var(--home-search-radius);
    background: var(--home-office-search-bg);
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    box-shadow: var(--home-office-shadow-search);
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.22s ease,
        background-color 0.18s ease;
}

.c-home-search:hover:not(:focus-within) {
    border-color: var(--home-office-search-border-hover);
    background: var(--home-office-search-bg-hover);
    box-shadow: var(--home-office-shadow-search-hover);
}

.c-home-search:focus-within {
    border-color: var(--color-primary);
    background: var(--home-office-search-bg);
    box-shadow:
        0 0 0 3px var(--home-search-focus-ring),
        var(--home-office-shadow-search);
}

/*
 * 边框光影：mask 只保留外缘环；动画只改 conic 的 from 角度（无外发光，光晕仅靠环上高亮）。
 */
.c-home-search::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    box-sizing: border-box;
    padding: 3px;
    pointer-events: none;
    background: conic-gradient(
        from var(--c-home-search-shine-from, 0deg),
        rgba(255, 255, 255, 0) 0deg,
        rgba(255, 255, 255, 0) 196deg,
        var(--home-search-shine-edge) 214deg,
        var(--color-bg) 228deg,
        var(--home-search-shine-pale) 242deg,
        var(--home-search-shine-core) 258deg,
        var(--home-search-shine-mid) 268deg,
        var(--color-surface-inset-highlight-strong) 282deg,
        var(--home-search-shine-fade) 296deg,
        rgba(255, 255, 255, 0) 312deg,
        rgba(255, 255, 255, 0) 360deg
    );
    -webkit-mask: linear-gradient(var(--color-bg) 0 0) content-box, linear-gradient(var(--color-bg) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--color-bg) 0 0) content-box, linear-gradient(var(--color-bg) 0 0);
    mask-composite: exclude;
    animation: c-home-search-shine 2s linear infinite;
}

.c-home-search > * {
    position: relative;
    z-index: 2;
}

@keyframes c-home-search-shine {
    from {
        --c-home-search-shine-from: 0deg;
    }

    to {
        --c-home-search-shine-from: 360deg;
    }
}

/* 圆形图标槽：与首页搜索图标共用 */
.c-home-icon-well {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--home-text-secondary);
    background: var(--home-icon-well-bg);
    box-shadow: inset 0 1px 0 var(--color-surface-inset-warm);
}

.c-home-icon-well img {
    width: 18px;
    height: 18px;
    display: block;
    opacity: 1;
    filter: var(--icon-theme-filter) brightness(0.9) contrast(1.05);
}

/* 清除搜索：与左侧圆形槽一致的可点区域，替代原生 webkit 小叉 */
.c-home-search-clear {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    cursor: pointer;
    align-self: center;
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}

/*
 * .c-home-icon-well 含 display:inline-flex，会盖掉 [hidden] 的 display:none，
 * 必须在有实质搜索内容、去掉 hidden 之前保持不可见。
 */
.c-home-search-clear[hidden] {
    display: none !important;
}

.c-home-search-clear:hover {
    background: var(--color-slate-650-a14);
    box-shadow:
        inset 0 1px 0 var(--color-surface-inset-line),
        0 1px 2px rgba(var(--color-text-rgb), 0.06);
}

.c-home-search-clear:active {
    transform: scale(0.96);
}

.c-home-search-clear:focus {
    outline: none;
}

.c-home-search-clear:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.c-home-search-clear img {
    filter: var(--icon-theme-filter) brightness(0.88) contrast(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .c-home-search-clear {
        transition: background-color 0.18s ease, box-shadow 0.18s ease;
    }

    .c-home-search-clear:active {
        transform: none;
    }
}

.c-home-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* ---------- 首页：情感驿站（叠在输入下方） ---------- */

.c-home-emotional {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: var(--z-base);
    overflow: hidden;
    white-space: nowrap;
    font-size: var(--home-typo-emotional-size);
    font-weight: var(--font-weight-body);
    color: var(--home-text-emotional);
    line-height: var(--line-height-body);
}

.c-home-emotional[hidden] {
    display: none !important;
}

.c-home-emotional__line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 0;
}

.c-home-emotional__main {
    display: inline;
    min-width: 0;
}

/* 时段主题旁白：与时间同档（稍深于括号语录） */
#homeEmotionalPrefix {
    color: var(--home-text-emotional-prefix);
}

.c-home-emotional__joke-wrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0;
    color: var(--home-text-emotional-joke);
}

.c-home-emotional__joke-wrap[hidden] {
    display: none !important;
}

.c-home-emotional__clock {
    display: inline-block;
    /* 与 script 中 HH:MM:SS（及 pad2 倒计时）宽度一致；9ch 会多留约 1 字空白，语录显得离时间很远 */
    min-width: 8ch;
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: baseline;
    color: var(--home-text-emotional-clock);
}

.c-home-emotional__paren {
    flex-shrink: 0;
}

/* 宽度 = min(剩余栏宽, 文案固有宽)：短句随内容收紧；过长时顶满剩余区域并由脚本开跑马灯 */
.c-home-emotional__joke-outer {
    flex: 0 1 auto;
    min-width: 0;
    width: min(100%, max-content);
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.c-home-emotional__marquee {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    overflow: hidden;
    min-width: 0;
}

.c-home-emotional__track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

.c-home-emotional__marquee--loop .c-home-emotional__track {
    animation: c-home-emotional-marquee var(--home-emotional-marquee-duration) linear infinite;
}

@keyframes c-home-emotional-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-home-emotional__marquee--loop .c-home-emotional__track {
        animation: none;
    }
}

.c-home-emotional__joke-sep {
    display: inline-block;
    padding: 0 1.25em;
}

.c-home-search-input {
    position: relative;
    z-index: var(--z-raised);
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: var(--home-typo-search-input-size);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-medium);
    color: var(--home-text-primary);
    outline: none;
}

.c-home-search-input--ghost {
    color: transparent;
    caret-color: var(--color-primary);
}

.c-home-search-input--ghost::placeholder {
    color: transparent;
}

.c-home-search-input::placeholder {
    color: var(--home-text-muted);
    opacity: 0.62;
}

/* ---------- 首页：工具区圆角裁切 + 栅格与卡片 ---------- */

/*
 * 外层 flex：上方 __body 吃满剩余高度并裁切圆角，下方滚动提示固定占位。
 * `overflow` 非 visible 时 grid 子项的 automatic min-size 按 0 计，避免第三行被卡片 min-content 顶破、外层 .home-page 裁切底部；内部栅格用 overflow-y:auto 承接滚动。
 * 下滑图标 nudge 仅约 4px，按钮自带 padding，一般不会被面板圆角裁切。
 */
.c-home-tool-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: min(var(--home-search-cards-width), 100%);
    max-width: 100%;
    margin: 0;
    justify-self: center;
    box-sizing: border-box;
    border-radius: var(--home-tool-panel-radius);
    overflow: hidden;
    /* 吃满 grid 第三行行盒高度，便于列向 flex 把可滚区压到有限高度 */
    height: 100%;
    max-height: 100%;
    /* 与版心底间距由 `.home-page` 的 `padding-bottom` 统一承担 */
    padding-bottom: 0;
    position: relative;
    isolation: isolate;
}

.c-home-tool-panel__body {
    flex: 1 1 0;
    flex-basis: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--home-tool-panel-radius);
    overflow: hidden;
    /* 工具区灰底裁切：中性灰 4%（标题胶囊为白 12%，分层更清晰） */
    background-color: rgba(var(--color-text-rgb), 0.04);
}

.c-home-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-card-grid);
    align-content: start;
    justify-items: stretch;
    min-width: 0;
    /* 在 __body 内占满剩余高度，多出的卡片在栅格内滚动 */
    flex: 1 1 0;
    flex-basis: 0;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* proximity：多列时每行多块 snap 目标，mandatory 易把末行卡在可视区外造成「缺一块」 */
    scroll-snap-type: y proximity;
    scroll-padding-block-end: max(8px, env(safe-area-inset-bottom, 0px));
    scroll-padding-block-start: var(--home-tool-grid-padding-block-start);
    /* 与 .c-home-tool-panel__body 四边各 8px 间距 */
    padding: var(--home-tool-grid-padding-block-start) var(--home-tool-grid-padding-inline)
        var(--home-tool-grid-padding-block-end);
}

@media (min-width: 2560px) {
    /* 提高优先级，避免与 `.c-card-grid--cols-2` 叠用时误保留两列 */
    #homeToolGrid.c-home-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 手机单列：与 `#homeToolGrid` 三列规则同级优先级，互斥视口宽度 */
@media (max-width: 639px) {
    #homeToolGrid.c-home-tool-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.c-home-tool-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media (prefers-reduced-motion: reduce) {
    .c-home-tool-grid {
        scroll-snap-type: y proximity;
    }

    .c-home-tool-card {
        transition:
            border-color 0.2s ease,
            box-shadow 0.22s ease,
            background-color 0.22s ease;
    }
}

.c-home-tool-card {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    gap: var(--home-tool-card-gap);
    margin: 0;
    padding: var(--home-tool-card-padding);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    align-self: start;
    contain: layout style;
    border: 1px solid var(--home-office-card-border);
    border-radius: var(--home-tool-card-radius);
    background: var(--home-office-card-bg);
    cursor: pointer;
    font: inherit;
    color: inherit;
    line-height: var(--line-height-card);
    transition:
        border-color 0.2s ease,
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
    transform: translateY(0);
    box-sizing: border-box;
    overflow: visible;
    box-shadow: var(--home-office-shadow-card);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.c-home-tool-card[hidden] {
    display: none !important;
}

.c-home-tool-card:hover {
    border-color: var(--color-primary);
    background: var(--home-office-card-bg-hover);
    transform: translateY(-4px);
    box-shadow:
        var(--home-office-shadow-card-hover),
        0 0 0 1px rgba(var(--color-primary-rgb), 0.22),
        0 10px 28px rgba(var(--color-primary-rgb), 0.09),
        0 20px 44px rgba(var(--color-text-rgb), 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .c-home-tool-card:hover {
        transform: none;
    }
}

.c-home-tool-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.c-home-tool-card__title {
    font-size: var(--home-typo-card-title-size);
    font-weight: var(--font-weight-heading);
    color: var(--home-text-tool-card-title);
    letter-spacing: var(--home-typo-card-title-tracking);
    line-height: var(--line-height-heading);
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

.c-home-tool-card__title::after {
    content: none;
    display: none;
}

.c-home-tool-card__hint {
    font-size: var(--home-typo-card-hint-size);
    font-weight: var(--font-weight-body);
    color: var(--home-text-card-hint);
    line-height: var(--line-height-body);
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-home-empty {
    width: min(var(--home-search-cards-width), 100%);
    justify-self: center;
    text-align: center;
    padding: var(--spacing-huge);
    color: var(--home-text-secondary);
    font-size: var(--home-typo-empty-size);
    line-height: var(--line-height-body);
    box-sizing: border-box;
}

/* ---------- 首页：下滑提示 ---------- */

/* 下滑箭头：默认低开销半透明，hover / focus 再提亮，贴近毛玻璃低饱和前景 */
.c-home-scroll-cue {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: min(var(--home-search-cards-width), 100%);
    max-width: 100%;
    margin: 0;
    margin-top: 6px;
    /* 底部略多留，避免 nudge 动画向下时被裁切 */
    padding: 6px var(--home-tool-grid-padding-inline) 14px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    color: var(--home-text-secondary);
    box-sizing: border-box;
    transition:
        opacity 0.28s ease,
        color 0.22s ease,
        filter 0.28s ease;
    position: relative;
    z-index: var(--z-local-controls);
    overflow: visible;
}

.c-home-scroll-cue:hover {
    color: var(--home-text-secondary);
}

.c-home-scroll-cue:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.c-home-scroll-cue[hidden] {
    display: none !important;
}

.c-home-scroll-cue__icon {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: var(--icon-home-scroll-cue-filter);
    opacity: var(--home-scroll-cue-icon-opacity, 0.46);
    transition: opacity 0.28s ease, filter 0.28s ease;
    animation: c-home-scroll-cue-nudge 1.35s ease-in-out infinite;
    pointer-events: none;
}

.c-home-scroll-cue:hover .c-home-scroll-cue__icon,
.c-home-scroll-cue:focus-visible .c-home-scroll-cue__icon {
    filter: var(--icon-home-scroll-cue-filter-hover);
    opacity: var(--home-scroll-cue-icon-opacity-hover, 0.92);
}

@keyframes c-home-scroll-cue-nudge {
    0%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(4px);
    }
    55% {
        transform: translateY(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-home-scroll-cue__icon {
        animation: none;
        opacity: 0.34;
    }

    .c-home-scroll-cue:hover .c-home-scroll-cue__icon,
    .c-home-scroll-cue:focus-visible .c-home-scroll-cue__icon {
        opacity: 0.68;
    }

    .c-home-search::before {
        animation: none;
    }
}

/* ---------- 首页：黏顶态（script-core.js initHomeSearchStickyShadow） ---------- */

.c-home-search-section--stuck .c-home-search:not(:focus-within) {
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-rgb), 0.26),
        var(--home-office-shadow-search);
}

.c-home-search-section--stuck .c-home-search:hover:not(:focus-within) {
    border-color: var(--home-office-search-border-hover);
    background: var(--home-office-search-bg-hover);
    box-shadow: var(--home-office-shadow-search-hover);
}

/*
 * 首页组件响应式（原 style.css 中与 .c-home-* 混写的断点，迁入组件库）。
 * 注：与全站其它 @media (max-width: 0px) 占位断点一致，启用时请改为真实 px。
 */
@media (max-width: 0px) {
    .c-home-tool-grid.c-card-grid--cols-2 {
        grid-template-columns: 1fr;
    }

    .c-home-search-section {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
        /* 与窄顶栏单行导航对齐；若搜索区改为 position: sticky 时生效 */
        top: var(--nav-height);
    }

    .c-home-title {
        font-size: 1.55rem;
        padding: 0.4em 1.12em 0.42em;
    }

    .c-home-tool-card {
        padding: var(--spacing-md);
        min-height: 76px;
    }

    .c-home-tool-card__title {
        font-size: var(--home-typo-card-title-size);
        line-height: var(--line-height-heading);
    }

    .c-home-tool-card__hint {
        font-size: var(--home-typo-card-hint-size);
        line-height: var(--line-height-body);
    }
}

/* ========== 首页：页壳 / 氛围 / 版心（由 style.css 迁入）========== */

/* 首页：整页固定在视口内不滚动，仅工具卡片栅格内部可纵向滚动 */
html:has(#home-page.active) {
    height: 100dvh;
    overflow: hidden;
    background-color: var(--home-page-root-fill);
}

body:has(#home-page.active) {
    height: 100%;
    overflow: hidden;
    background-color: var(--home-page-root-fill);
}

body:has(#home-page.active) .app-shell {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    background-color: var(--home-page-root-fill);
}

.c-app-main:has(#home-page.active) {
    min-height: 0;
    overflow: hidden;
}

/* 首页：栅格覆盖层（对齐到全局 12 栏 / gap=24 / side=24） */
#home-page {
    position: relative;
}

body.show-grid #home-page::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-debug-grid);
    opacity: var(--grid-overlay-opacity);

    /* 计算容器宽度（与 app-shell 中间列一致） */
    --grid-container-w: min(var(--layout-max-width), calc(100vw - 2 * var(--grid-side-padding)));
    --grid-left: calc((100vw - var(--grid-container-w)) / 2 + var(--grid-side-padding));
    --grid-col-w: calc(
        (var(--grid-container-w) - (var(--grid-columns) - 1) * var(--grid-column-gap)) /
            var(--grid-columns)
    );
    --grid-step: calc(var(--grid-col-w) + var(--grid-column-gap));

    background-image:
        /* 每列轻底色 */
        repeating-linear-gradient(
            to right,
            var(--grid-overlay-color) 0,
            var(--grid-overlay-color) var(--grid-col-w),
            var(--grid-overlay-gap) var(--grid-col-w),
            var(--grid-overlay-gap) var(--grid-step)
        ),
        /* 列边界细线（更像设计稿标注） */
        repeating-linear-gradient(
            to right,
            var(--grid-overlay-stroke) 0,
            var(--grid-overlay-stroke) 1px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0) var(--grid-step)
        );
    background-size: var(--grid-container-w) 100%, var(--grid-container-w) 100%;
    background-position: var(--grid-left) 0, var(--grid-left) 0;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

/*
 * 首页主区氛围：占 grid 第 2～3 行（主内容 + 页脚）整行宽。
 * 页脚仅 row 3 时背后会是 body 实色，透明 footer 也会像「一条底栏」；延伸一层后视频/渐变铺满底部。
 */
.home-ambient-layer {
    grid-column: 1 / -1;
    grid-row: 2 / span 2;
    position: relative;
    z-index: var(--z-base);
    align-self: stretch;
    min-height: 0;
    min-width: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background-color: var(--home-ambient-base-fallback);
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.app-shell:has(#home-page.active) .home-ambient-layer {
    opacity: 1;
    visibility: visible;
}

.home-ambient-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--home-ambient-media-opacity);
    filter: saturate(1.02) contrast(1.02);
}

/* 仅在有动效偏好时：视频就绪后隐藏默认图，避免 JPG+MP4 双层半透明；减动效时视频被关，图始终保留 */
@media (prefers-reduced-motion: no-preference) {
    .home-ambient-layer:has(.home-ambient-video--ready) .home-ambient-image {
        display: none;
    }
}

.home-ambient-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(1) contrast(1);
    transition:
        opacity 1.05s ease,
        filter 0.85s ease;
}

.home-ambient-video.home-ambient-video--ready {
    opacity: var(--home-ambient-media-opacity);
    filter: saturate(1.03) contrast(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .home-ambient-video {
        display: none;
    }
}

.home-ambient-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: var(--home-ambient-scrim);
}

.app-shell:has(#home-page.active) .c-app-main {
    background-color: transparent;
}

/* 首页：页脚叠在氛围层之上；字色与 hover 略弱于工具页，避免抢主内容 */
.app-shell:has(#home-page.active) .site-footer {
    position: relative;
    z-index: var(--z-raised);
    color: var(--home-footer-text);
    border-top-color: rgba(var(--color-text-rgb), 0.07);
    background-color: transparent;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
}

.app-shell:has(#home-page.active) .site-footer .site-footer__oss-note {
    color: var(--home-footer-text);
    opacity: 1;
}

.app-shell:has(#home-page.active) .site-footer__link:hover,
.app-shell:has(#home-page.active) .site-footer__icp:hover {
    color: var(--home-footer-text-hover);
}

/* 首页：顶栏下沿 →「Sanye Hub」间距由 .home-page padding-top 单独控制为 160px */
.main-content:has(#home-page.active) {
    padding-top: 0;
    /* 底部留白由 .home-page 的 `--home-scroll-cue-offset-bottom` 统一控制，避免再叠一层 main 默认 padding */
    padding-bottom: 0;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#home-page.page.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    /* 与 flex:1 一并把主列分配高度传到 .home-page，避免部分引擎下 fr 行高未下传导致栅格不滚动 */
    height: 100%;
    overflow: hidden;
}

/*
 * 首页版心：标题/搜索固定高度；第三行 `minmax(0,1fr)` 吃满视口剩余高度，内为工具面板（可滚栅格 + 下滑钮）；
 * 版心底 `padding-bottom` = `--home-scroll-cue-offset-bottom` + 安全区，使下滑钮与底栏留白固定。第四行为空状态。
 */
.home-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 160px 0 calc(var(--home-scroll-cue-offset-bottom) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    position: relative;
    z-index: var(--z-raised);
    flex: 1 1 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 0;
    row-gap: 0;
}

/* 平板及以下：双列卡片、收紧左右内边距 */
@media (max-width: 1280px) {
    .home-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        column-gap: 0;
        row-gap: 0;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
        padding-top: 160px;
    }
}

/* =============================================================================
 * 结果区：复制（.copy-btn）与去重排序（.dedupe-sort-btn）
 * 依赖 style.css :root：`--color-result-copy*`、`--result-action-btn-height*`、`--icon-theme-filter`
 * ============================================================================= */

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-base);
    font-weight: var(--font-weight-medium);
}

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

.copy-btn.disabled,
.copy-btn:disabled {
    opacity: 1;
    color: var(--color-disabled-text);
    background-color: var(--color-disabled-bg);
    cursor: not-allowed;
    pointer-events: none;
}

.copy-btn svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
}

.result-element-count {
    font-size: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-medium);
    line-height: inherit;
    pointer-events: none;
    user-select: none;
}

.result-element-count::before {
    content: '(';
    font-weight: var(--font-weight-medium);
}

.result-element-count::after {
    content: ')';
    font-weight: var(--font-weight-medium);
}

/* 结果区：复制与数量合一为胶囊按钮（蓝字 + 浅灰底，拆比/去重结果页统一） */
.copy-btn.copy-btn-inside {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: var(--z-decor-overlay);
    gap: var(--spacing-xs);
    height: var(--result-action-btn-height);
    min-height: var(--result-action-btn-height);
    padding: 0 var(--spacing-10);
    border: none;
    border-radius: 999px;
    background-color: var(--color-result-copy-bg);
    color: var(--color-result-copy);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    box-shadow: none;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: calc(100% - var(--spacing-md));
    opacity: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.copy-btn.copy-btn-inside:hover:not(.disabled):not(:disabled),
.copy-btn.copy-btn-inside:focus-visible:not(.disabled):not(:disabled) {
    color: var(--color-result-copy-hover);
    background-color: var(--color-result-copy-bg-hover);
}

.copy-btn.copy-btn-inside .result-element-count {
    color: var(--color-result-copy);
    font-weight: var(--font-weight-medium);
}

.copy-btn.copy-btn-inside:hover:not(.disabled):not(:disabled) .result-element-count,
.copy-btn.copy-btn-inside:focus-visible:not(.disabled):not(:disabled) .result-element-count {
    color: var(--color-result-copy-hover);
}

.copy-btn-inside.disabled,
.copy-btn-inside:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.copy-btn.copy-btn--copied-state {
    color: var(--color-primary);
}

.dedupe-result-textarea-wrap {
    position: relative;
}

.dedupe-result-actions {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: var(--z-decor-overlay);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    max-width: calc(100% - var(--spacing-md));
}

.dedupe-sort-btn {
    width: var(--result-action-btn-height);
    height: var(--result-action-btn-height);
    padding: 0;
    border: none;
    border-radius: 999px;
    background-color: var(--color-result-copy-bg);
    color: var(--color-result-copy);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
    box-shadow: none;
}

.dedupe-sort-btn:hover {
    background-color: var(--color-result-copy-bg-hover);
}

.dedupe-sort-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* 单槽叠层：仅当前 `data-sort-mode` 对应的一层 opacity:1，避免两枚 sort 图同时露出 */
.dedupe-sort-arrows {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    line-height: 0;
}

.dedupe-sort-face {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dedupe-sort-btn[data-sort-mode="original"] .dedupe-sort-face--original,
.dedupe-sort-btn[data-sort-mode="asc"] .dedupe-sort-face--asc,
.dedupe-sort-btn[data-sort-mode="desc"] .dedupe-sort-face--desc {
    opacity: 1;
}

.dedupe-sort-icon {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    filter: var(--icon-theme-filter);
}

.dedupe-sort-icon--mode {
    width: 14px;
    height: 14px;
}

.dedupe-result-textarea-wrap .dedupe-result-textarea {
    padding-right: 9rem;
}

.dedupe-result-actions .copy-btn.copy-btn-inside {
    position: static;
    right: auto;
    top: auto;
    max-width: none;
}

@media (max-width: 0px) {
    .copy-btn.copy-btn-inside {
        top: var(--spacing-6);
        right: var(--spacing-6);
        height: var(--result-action-btn-height-sm);
        min-height: var(--result-action-btn-height-sm);
        padding: 0 var(--spacing-sm);
        font-size: var(--font-size-xs);
    }

    .dedupe-result-textarea-wrap .dedupe-result-textarea {
        padding-right: 5.5rem;
    }

    .dedupe-result-actions {
        top: var(--spacing-6);
        right: var(--spacing-6);
        gap: var(--spacing-6);
    }

    .dedupe-sort-btn {
        width: var(--result-action-btn-height-sm);
        height: var(--result-action-btn-height-sm);
    }
}

@media (max-width: 1280px) {
    .imgcompress-row {
        grid-template-columns: repeat(5, minmax(88px, 1fr));
        column-gap: var(--spacing-sm);
        min-width: 42rem;
        width: max(100%, 42rem);
    }
}

/* =============================================================================
 * 组件库页 · 可视化展厅（`#designlib-page`）
 * - 仅用于展示令牌与真实类名，勿把本段选择器当作全站默认
 * ============================================================================= */
#designlib-page .c-designlib {
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding-bottom: var(--spacing-huge);
    color: var(--color-text);
}

#designlib-page .c-designlib__lead {
    margin: 0 0 var(--spacing-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}

#designlib-page .c-designlib__lead code {
    font-family: var(--font-family-mono);
    font-size: 0.92em;
    color: var(--color-text-tertiary);
}

#designlib-page .c-designlib-section {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    box-shadow: var(--color-shadow-xs);
}

#designlib-page .c-designlib-section__title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

#designlib-page .c-designlib-section__desc {
    margin: 0 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
}

#designlib-page .c-designlib-section__desc code {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

#designlib-page .c-designlib-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

#designlib-page .c-designlib-demo {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

#designlib-page .c-designlib-demo:first-of-type {
    margin-top: var(--spacing-md);
    padding-top: 0;
    border-top: none;
}

#designlib-page .c-designlib-demo__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

#designlib-page .c-designlib-demo__toolbar .c-designlib-subtitle {
    margin: 0;
    flex: 1 1 12rem;
}

#designlib-page .c-designlib-demo__toolbar .c-designlib-copy-snippet {
    flex-shrink: 0;
    align-self: flex-start;
}

#designlib-page .c-designlib-toolbar-demo {
    margin-top: 0;
}

#designlib-page .c-designlib-demo .chargen-field {
    margin-bottom: 0;
}

#designlib-page .c-designlib-range-demo {
    max-width: min(520px, 100%);
}

#designlib-page .c-designlib-range-demo__label {
    display: block;
    margin-bottom: var(--spacing-sm);
}

#designlib-page .c-designlib-range-demo__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* 滑杆外观见 `style.css` · `input[type="range"].c-range-input`；此处仅演示区 flex 内占比 */
#designlib-page .c-designlib-range-demo__row .c-designlib-range-input {
    flex: 1 1 auto;
    min-width: 0;
}

#designlib-page .c-designlib-range-demo__value {
    flex-shrink: 0;
    min-width: 3rem;
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
}

/* HSB 颜色编辑器展厅：渐变块代替画布，无交互逻辑 */
#designlib-page .c-designlib-color-editor-demo {
    max-width: min(26rem, 100%);
}

#designlib-page .c-designlib-color-editor-demo .c-designlib-color-editor-demo__fake-sv {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)),
        linear-gradient(to right, rgb(255, 255, 255), hsl(220, 100%, 50%));
}

#designlib-page .c-designlib-color-editor-demo .c-designlib-color-editor-demo__fake-hue {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 6rem;
    background: linear-gradient(
        to bottom,
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
}

#designlib-page .c-designlib-subtitle {
    margin: var(--spacing-xl) 0 var(--spacing-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

#designlib-page .c-designlib-subtitle:first-of-type {
    margin-top: var(--spacing-md);
}

#designlib-page .c-designlib-subtitle code {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

#designlib-page .c-designlib-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--spacing-md);
}

#designlib-page .c-designlib-swatch-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--color-surface-raised);
}

#designlib-page .c-designlib-swatch-card__chip {
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#designlib-page .c-designlib-swatch-card__chip--focus-ring {
    box-sizing: border-box;
    border: 3px solid var(--color-bg);
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 0;
    background: var(--color-bg);
}

#designlib-page .c-designlib-swatch-card__inverse {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-heading);
    line-height: 1.2;
}

#designlib-page .c-designlib-swatch-card__token {
    display: block;
    margin: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: 1.35;
    word-break: break-all;
    background: var(--color-bg);
}

#designlib-page .c-designlib-topbar-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    background-color: var(--topbar-bg);
    color: var(--topbar-link-active);
    border: 1px solid var(--topbar-border);
}

#designlib-page .c-designlib-topbar-strip__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-heading);
}

#designlib-page .c-designlib-topbar-strip__token {
    font-size: var(--font-size-xs);
    color: var(--topbar-link);
}

#designlib-page .c-designlib-topbar-strip__token code {
    font-family: var(--font-family-mono);
    font-size: inherit;
    color: var(--topbar-link-hover);
}

#designlib-page .c-designlib-type-rows {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

#designlib-page .c-designlib-type-row {
    display: grid;
    grid-template-columns: minmax(0, 220px) 1fr;
    gap: var(--spacing-lg);
    align-items: baseline;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

#designlib-page .c-designlib-type-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

#designlib-page .c-designlib-type-row__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-family: var(--font-family-mono);
    line-height: var(--line-height-body);
}

#designlib-page .c-designlib-type-row__sample {
    color: var(--color-text);
    line-height: var(--line-height-heading);
}

#designlib-page .c-designlib-type-row__sample--weights {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    font-size: var(--font-size-base);
}

#designlib-page .c-designlib-type-row__sample--lh {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

#designlib-page .c-designlib-mono {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

#designlib-page .c-designlib-space-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    align-items: flex-end;
}

#designlib-page .c-designlib-space-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

#designlib-page .c-designlib-space-item__bar {
    height: 40px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--color-brand-mint), var(--color-primary));
}

#designlib-page .c-designlib-space-item code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

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

#designlib-page .c-designlib-layout-demo {
    margin-top: var(--spacing-sm);
}

#designlib-page .c-designlib-layout-demo__bar {
    height: 8px;
    max-width: 100%;
    width: min(var(--layout-max-width), calc(100vw - 2 * var(--grid-side-padding)));
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-brand-mint), var(--color-primary));
}

#designlib-page .c-designlib-icon-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-start;
}

#designlib-page .c-designlib-icon-sample {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    min-width: 5.75rem;
    max-width: 7.5rem;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    background-color: var(--color-bg);
}

#designlib-page .c-designlib-icon-sample code {
    font-family: var(--font-family-mono);
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    word-break: break-all;
    color: var(--color-text-tertiary);
}

#designlib-page .c-designlib-row--wrap {
    row-gap: var(--spacing-sm);
}

#designlib-page .c-designlib-chip-toggle-demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
}

#designlib-page .c-designlib-row--align-end {
    align-items: flex-end;
}

#designlib-page .c-designlib-inline-search {
    max-width: 22rem;
}

#designlib-page .c-designlib-textarea {
    min-height: 5.5rem;
    resize: none;
}

#designlib-page .c-designlib-result-wrap {
    min-height: 0;
}

#designlib-page .c-designlib-result-ta {
    min-height: 7rem;
    /* 与拆比/去重结果区一致：为绝对定位的 .copy-btn-inside 预留右侧空间 */
    padding: var(--spacing-md) 6.25rem var(--spacing-md) var(--spacing-md);
    font-size: var(--font-size-sm);
}

#designlib-page .c-designlib-result-wrap .copy-btn.copy-btn-inside:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#designlib-page .c-gen-result-list {
    max-height: 12rem;
}

#designlib-page .c-designlib-micro {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    line-height: var(--line-height-body);
}

#designlib-page .c-designlib-micro code {
    font-family: var(--font-family-mono);
    font-size: 1em;
}

#designlib-page .c-designlib-home-slot {
    max-width: 22rem;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background: rgb(var(--color-neutral-page-fill-rgb));
    border: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-md);
}

#designlib-page .c-designlib-dropzone.upload-dropzone {
    margin-top: 0;
    min-height: var(--upload-dropzone-min-height-sm);
    pointer-events: none;
    cursor: default;
    margin-bottom: var(--spacing-md);
}

#designlib-page .c-designlib-shape-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: flex-end;
}

#designlib-page .c-designlib-shape-card {
    min-width: 5.5rem;
    min-height: 4.5rem;
    padding: var(--spacing-md);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

#designlib-page .c-designlib-shape-card--lg {
    min-width: 7rem;
    min-height: 5rem;
    border-radius: var(--radius-lg);
}

#designlib-page .c-designlib-gen-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    align-items: start;
}

#designlib-page .c-designlib-gen-split__col .c-designlib-micro {
    margin-bottom: var(--spacing-xs);
}

#designlib-page .c-designlib-gen-list--short {
    max-height: 9rem;
    min-height: 5rem;
}

#designlib-page .c-designlib-dedupe-demo .dedupe-sort-btn {
    position: relative;
}