置于浅灰裁切槽上，与首页卡片区同源 Office 变量（--home-office-*）。

与全站工具页同源；下方教程图标为静态示意（tabindex="-1"），不挂载弹窗。线上工具页在带教程图标时由脚本挂载 .c-tool-guide-hint（样式见 components.css）：首轮约 3s 后出现，不透明停留约 1.5s 后缓慢淡出，淡出结束后再间隔约 20s 进入下一轮；常量见 script-core.js（含 TOOL_GUIDE_HINT_FADE_OUT_MS）。

叠用全站 .modal（遮罩）与 .modal-content（圆角白卡片）；无顶栏时面板加 c-dialog-confirm，正文用 c-dialog-confirm__text，底部 .modal-footer 内 btn-clear + btn-primary。样式见 components.css。

静态示意，不含文件选择逻辑。

mask-image + background-color: currentColor，与父级字色一致；修饰类与 Icon/ 下 SVG 同名（定义见 components.css）。

带线稿图标：前导槽位 .btn-lead-icon（与旧名 .btn-primary-lead-icon 等价）+ .c-line-icon.c-line-icon--*；线标为 currentColor，与按钮字色、hover、禁用态一致。

选中态 .chip.active，配套 aria-pressed；互斥单选可用 role="radiogroup"（例：字符统计）。独立开关、可多选叠加（例：图片镜像「水平 / 垂直反转」）同样使用 .chip，由脚本切换 .active。

独立双开关示意（可同时为「选中」）：

外壳 .c-textarea-field：textarea.text-input.c-text-input + .c-textarea-field__meta-row（内为可选左对齐 .error-message.c-textarea-field__error 与右对齐 .char-counter，同一行）；校验失败给 textarea 叠 .error（边框）；字数预警仍用 .char-counter--warn / --danger。

报错 + 边框错误态（示意）：

只读浅底（结果区等可叠 .c-textarea-field--readonly）：

JSON 格式化等「编辑器 + 脚条」：报错与字数同一行（左 / 右），容器叠 .c-textarea-field-footer（与 #jsonfmt-page .jsonfmt-meta-row--input-footer 叠用）。

与图片压缩 / PDF / PPT / 证件照同源：工具栏左侧一体框（.imgcompress-format--combo.c-outline-field）与右侧操作钮；select.imgcompress-format__select 外包 .c-imgcompress-select-dropdown，由 script-features.js 增强为浅色列表面板；触发钮内 Chevron 为子节点 .c-imgcompress-select-dropdown__chevron 与当前值间距为 :root 的 --c-dropdown-value-chevron-gap（默认 4px）；线标尺寸仍由 --select-chevron-* 与 --select-padding-inline-end 等）。一体框在工具栏左侧随内容收缩，上限 --imgcompress-combo-toolbar-max-width；固定整框宽叠 .imgcompress-format--combo-toolbar-doc / --combo-toolbar-media（见 style.css 令牌）。非工具栏一体框若用 input.imgcompress-format__combo-input（关键字、加水印等），占位符与输入仍靠右，见各业务页。 证件照「尺寸 / 底色」等需标签与值区间距 24px且相邻框标签列对齐时，一体框叠 imgcompress-format--combo-toolbar-label-value，并依赖 :root 的 --imgcompress-combo-label-value-gap（默认 24px）与 --imgcompress-combo-label-min-width（默认 2.75rem，按较长标签如「底色」预留）。

证件照工具栏同源（尺寸 + 底色）：.idphoto-selects 内两个一体框均叠 imgcompress-format--combo-toolbar-label-value。

不在此重复独立 HTML 示意（与上一节「证件照 · 尺寸 + 底色」中的底色同源）。请直接对照 证件照换底（#idphotoBgSelect）与 图片加水印（#imgwatermarkColor）页面结构；样式见 components.css 中 .c-color-swatch-select；勿将 c-color-swatch-select__select-native 包在 .c-imgcompress-select-dropdown 内。

日期生成等：透明底、仅底边线、右侧 Chevron（见 style.css 与 chargen-form）。首项「请选择」与下划线输入占位一致：脚本在未选时叠 dategen-select--placeholder，字色为 --color-text-placeholder（与 input.chargen-input-underline::placeholder 同源）。

副标题 + 仅底边线输入（字符生成「固定位数 / 固定前后缀」承接区与此同源，叠 .chargen-fixed-input-host / .chargen-digits-input-host）。input.chargen-input-underline::placeholder 与下划线下拉「请选择」均为 --color-text-placeholder。

外观与轨道/拖块尺寸由 style.css 中 :root 的 --range-* 与 input[type="range"].c-range-input 统一控制；组件库仅保留演示区排版（#designlib-page .c-designlib-range-demo*）。

与视频压缩码率/帧率/像素同款：span.videocompress-combo__label 固定左侧， input.videocompress-combo__input 宽度由脚本按位数计算后，数值与占位符在框内靠右。 框体左右内边距与通用 .c-outline-field 同源：padding: 0 var(--c-outline-field-pad-inline-end) 0 var(--c-outline-field-pad-inline-start)（左略松、右略紧），标签贴左、数值或下拉箭头区可视觉上贴右，与 PDF/打码一体框一致。

SV 与色相条下方用渐变块示意画布；业务页使用 canvas 与脚本绘制（例：#imgpixelateMaskPopover · initImgPixelate）。 一体框输入须带 videocompress-combo__input--color-editor-* 修饰类。

工具栏打开浮层的触发钮：button.videocompress-combo--mask，右侧值区 .imgpixelate-mask-trigger__value 内顺序为色值 # → 色块（先 __hex 后 __swatch），与图片打码页一致。

与去重结果页一致：单钮内用 .dedupe-sort-arrows 叠三层图标，由 data-sort-mode 控制可见层。