@q1travel/design-system 0.3.2 → 0.5.0

package/dist-pkg/style.css

@@ -111,9 +111,9 @@
   --q1-color-brand-preview-dark-fg: #ededed;
   --q1-color-mask-visible: #ffffff;
   --q1-color-mask-opaque: #000000;
-  /* 阴影基色恒黑（对标 Geist）：不随主题翻转，暗色下阴影不再泛白晕。 */
+  /* 阴影基色恒黑（对标外部参考）：不随主题翻转，暗色下阴影不再泛白晕。 */
   --q1-color-shadow: #000000;
-  /* 浮层边框（对标 Geist）：亮色=普通边框；暗色=白 14% 发丝 ring——黑影在黑底不可见，浮层清晰度由它承担。 */
+  /* 浮层边框（对标外部参考）：亮色=普通边框；暗色=白 14% 发丝 ring——黑影在黑底不可见，浮层清晰度由它承担。 */
   --q1-color-border-overlay: var(--q1-color-gray-400);
   --q1-color-bg-canvas: var(--q1-color-background-100);
   --q1-color-bg-subtle: var(--q1-color-background-200);
@@ -202,10 +202,14 @@
   --q1-radius-3: 8px;
   --q1-radius-4: 12px;
   --q1-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--q1-color-primary-700) 22%, transparent);
+  /* 浮层阴影两档：popover=菜单/悬浮卡/小浮层，modal=模态级大浮层。方向性面板（drawer/sheet）例外，
+     在组件内自持。恒黑 shadow token 混色，暗色靠 --q1-color-border-overlay 发丝边保证清晰度。 */
+  --q1-shadow-popover: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  --q1-shadow-modal: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
 }
 
 :root[data-theme='dark'] {
-  /* 画布抬灰（对标 Geist 暗色 #0a0a0a）：表面自带浮起感，纯黑仅留给 background-200 底壳。 */
+  /* 画布抬灰（对标外部参考暗色 #0a0a0a）：表面自带浮起感，纯黑仅留给 background-200 底壳。 */
   --q1-color-background-100: #0a0a0a;
   --q1-color-background-200: #000000;
   --q1-color-gray-100: #1a1a1a;
@@ -312,7 +316,7 @@
   --q1-color-bg-subtle: var(--q1-color-gray-100);
   --q1-color-bg-panel: var(--q1-color-background-100);
   --q1-color-border: var(--q1-color-gray-200);
-  /* 降档（对标 Geist 暗色最亮边框 rgb46）：控件描边不再泛白。 */
+  /* 降档（对标外部参考暗色最亮边框 rgb46）：控件描边不再泛白。 */
   --q1-color-border-strong: var(--q1-color-gray-400);
   --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
   --q1-color-text-primary: var(--q1-color-gray-1000);
@@ -367,7 +371,7 @@
   text-decoration: none;
 }
 
-.button:hover {
+.button:not(:disabled):not([aria-disabled='true']):hover {
   border-color: var(--q1-color-text-secondary);
   background: var(--q1-color-bg-subtle);
 }
@@ -383,12 +387,12 @@
   color: var(--q1-color-action-on-primary);
 }
 
-.button--primary:hover {
+.button--primary:not(:disabled):not([aria-disabled='true']):hover {
   border-color: transparent;
   background: var(--q1-color-action-primary-hover);
 }
 
-.button--primary:active {
+.button--primary:not(:disabled):not([aria-disabled='true']):active {
   background: var(--q1-color-action-primary-press);
 }
 
@@ -420,6 +424,12 @@
   animation: button-spin 0.7s linear infinite;
 }
 
+.button__affix {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
 .button--sm {
   min-height: 32px;
   padding: 0 var(--q1-space-3);
@@ -453,7 +463,7 @@
   border-radius: 50%;
 }
 
-/* Rounded（对标 Geist Rounded，营销页/落地页强调用）：药丸形 + 柔和抬起阴影（恒黑 shadow token，暗色不泛白）。 */
+/* Rounded（对标外部参考 Rounded，营销页/落地页强调用）：药丸形 + 柔和抬起阴影（恒黑 shadow token，暗色不泛白）。 */
 .button--rounded {
   border-radius: 9999px;
   box-shadow:
@@ -481,7 +491,7 @@
   line-height: 1;
 }
 
-/* —— 统一着色配方 tone-surface（对标 Geist：oklch 按 hue 参数化，浅底/边框/深文，暗色反相）——
+/* —— 统一着色配方 tone-surface（对标外部参考：oklch 按 hue 参数化，浅底/边框/深文，暗色反相）——
    Banner/Note/ProjectBanner/状态块共享同一套，消除各自 color-mix 配方漂移；主题自适应，消费方无需 dark 块。 */
 :root {
   --q1-tone-bg-info: oklch(from var(--q1-color-status-info) 0.96 0.03 h);
@@ -542,10 +552,10 @@
   color: var(--q1-color-status-danger);
 }
 
-/* 带前后缀的输入外框（对标 Geist 实测结构）：flex 让前后缀占真实布局空间，任意宽度的
+/* 带前后缀的输入外框（对标外部参考实测结构）：flex 让前后缀占真实布局空间，任意宽度的
    字符串/图标几何上都不可能压到输入文字；边框/圆角/焦点环/校验/禁用整体上移到外框，
    内部 input 去皮拉伸填满。绝对定位 + 固定内边距的旧几何只装得下 16px 图标，已废弃。
-   overflow 裁掉病态窄容器下前后缀（flex:none 不收缩）顶出圆角的溢出，Geist 外框同款；
+   overflow 裁掉病态窄容器下前后缀（flex:none 不收缩）顶出圆角的溢出，外部参考外框同款；
    焦点环/错误晕是 box-shadow，不受 overflow 裁剪。 */
 .input-control {
   display: flex;
@@ -618,7 +628,7 @@
   background: transparent;
 }
 
-/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线（Geist 默认极性，实测块 0/12px 内边距、
+/* 前后缀默认带灰块底色 + 朝向 input 一侧的 1px 分隔线（外部参考默认极性，实测块 0/12px 内边距、
    拉满外框高度）；禁用态下外框同为 bg-subtle，块与外框同色成扁平、仅剩分隔线，属本品牌层取舍。 */
 .input-control__prefix {
   flex: none;
@@ -665,7 +675,7 @@
   padding-right: 8px;
 }
 
-/* 药丸形（对标 Geist rounded，实测 9999px 级 pill 半径）；双类压过 :has 尺寸档的圆角设定。 */
+/* 药丸形（对标外部参考 rounded，实测 9999px 级 pill 半径）；双类压过 :has 尺寸档的圆角设定。 */
 .input-control.input-control--rounded {
   border-radius: 9999px;
 }
@@ -696,7 +706,7 @@
   padding-right: 36px;
 }
 
-/* 字段尺寸档（对标 Geist：xs24/sm32/md40/lg48；md=基础 40 不设类）。 */
+/* 字段尺寸档（对标外部参考：xs24/sm32/md40/lg48；md=基础 40 不设类）。 */
 .form-control--xs {
   min-height: 24px;
   border-radius: var(--q1-radius-1);
@@ -720,7 +730,7 @@
 }
 
 /* Textarea 是多行控件，通用尺寸档的单行 min-height/padding 不适用，这里单独覆盖
-   （Geist 官方 xSmall/small/mediumSmall/large 未给出具体像素值，数值按本库既有体系自定）。 */
+   （外部参考官方 xSmall/small/mediumSmall/large 未给出具体像素值，数值按本库既有体系自定）。 */
 .form-control--textarea.form-control--xs {
   min-height: 64px;
   padding: 6px 8px;
@@ -736,6 +746,74 @@
   padding: 12px 14px;
 }
 
+/* Textarea 字符计数外框（#22 决策 5，仿 input-control affix 先例）：maxLength 存在时才渲染，
+   外框承载边框/焦点环/校验/禁用皮肤，内部 textarea 去皮，计数器占真实布局空间、右下角对齐。 */
+.textarea-control {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--q1-color-border-strong);
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+}
+
+.textarea-control:hover:not(:has(.form-control:disabled)) {
+  border-color: var(--q1-color-text-secondary);
+}
+
+.textarea-control:focus-within {
+  border-color: var(--q1-color-action-primary);
+  box-shadow: var(--q1-shadow-focus);
+}
+
+.form-field--error .textarea-control,
+.textarea-control:has(.form-control[aria-invalid='true']) {
+  border-color: var(--q1-color-status-danger);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
+}
+
+.textarea-control:has(.form-control:disabled) {
+  background: var(--q1-color-bg-subtle);
+}
+
+/* 尺寸档圆角随内部控件对齐（同 input-control 的 :has 尺寸档规则）。 */
+.textarea-control:has(.form-control--xs) {
+  border-radius: var(--q1-radius-1);
+}
+
+.textarea-control:has(.form-control--lg) {
+  border-radius: var(--q1-radius-3);
+}
+
+.textarea-control .form-control {
+  border: none;
+  border-radius: inherit;
+  background: transparent;
+}
+
+.textarea-control .form-control:focus,
+.textarea-control .form-control:focus-visible,
+.form-field--error .textarea-control .form-control,
+.textarea-control .form-control[aria-invalid='true'] {
+  box-shadow: none;
+}
+
+.textarea-control .form-control:disabled {
+  background: transparent;
+}
+
+.textarea-control__count {
+  align-self: flex-end;
+  padding: 0 12px 8px;
+  color: var(--q1-color-text-secondary);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.textarea-control:has(.form-control:disabled) .textarea-control__count {
+  color: var(--q1-color-text-muted);
+}
+
 .form-control::placeholder {
   color: var(--q1-color-text-muted);
 }
@@ -750,14 +828,14 @@
   box-shadow: var(--q1-shadow-focus);
 }
 
-/* 错误态（对标 Geist）：纯红 1px 环 + 红 16% 的 4px 外晕，字段家族共享。 */
+/* 错误态（对标外部参考）：纯红 1px 环 + 红 16% 的 4px 外晕，字段家族共享。 */
 .form-field--error .form-control,
 .form-control[aria-invalid='true'] {
   border-color: var(--q1-color-status-danger);
   box-shadow: 0 0 0 4px color-mix(in srgb, var(--q1-color-status-danger) 16%, transparent);
 }
 
-/* 禁用态（对标 Geist）：底色抬灰而非降透明度；opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
+/* 禁用态（对标外部参考）：底色抬灰而非降透明度；opacity:1 归零 Chrome UA 对禁用控件的默认 0.7。 */
 .form-control:disabled {
   background: var(--q1-color-bg-subtle);
   color: var(--q1-color-text-muted);
@@ -769,7 +847,7 @@
 .control-option {
   position: relative;
   display: grid;
-  /* 盒 16px 统一（Checkbox 复核拍板：与 Radio 家族一致 + 对齐 Geist 实测 16×16）。 */
+  /* 盒 16px 统一（Checkbox 复核拍板：与 Radio 家族一致 + 对齐外部参考实测 16×16）。 */
   grid-template-columns: 16px minmax(0, 1fr);
   align-items: start;
   gap: var(--q1-space-3);
@@ -784,6 +862,16 @@
   opacity: 0;
 }
 
+/* 裸形态（#22 §1.3 / #45）：去文本 body 列、仅剩 16px 视觉盒；外层是 span 非 label
+   （业务 <label> 包裹时 label 套 label 非法），保留 .control-option 类复用全部状态选择器
+   （checked/indeterminate/disabled/focus-visible 均以其为父作用域）。inline-grid 便于
+   表格选择列/工具栏内联对齐。 */
+.control-option--bare {
+  display: inline-grid;
+  grid-template-columns: 16px;
+  vertical-align: middle;
+}
+
 .control-option__visual {
   position: relative;
   display: block;
@@ -793,7 +881,7 @@
   border-radius: var(--q1-radius-1);
   background: var(--q1-color-bg-panel);
   transform: translateY(1px);
-  /* 状态切换过渡（Geist 实测 0.2s cubic-bezier(0.4,0,0.2,1)）；颜色过渡非运动类，不需 reduced-motion 门控。 */
+  /* 状态切换过渡（外部参考实测 0.2s cubic-bezier(0.4,0,0.2,1)）；颜色过渡非运动类，不需 reduced-motion 门控。 */
   transition:
     border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
     background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -801,7 +889,7 @@
 
 .control-option__visual--radio {
   border-radius: 999px;
-  /* Radio 对标 Geist：16px 控件、未选中环用更亮的 muted 灰（Geist 143 档）；环色 0.2s 过渡（实测配方）。 */
+  /* Radio 对标外部参考：16px 控件、未选中环用更亮的 muted 灰（外部参考 143 档）；环色 0.2s 过渡（实测配方）。 */
   width: 16px;
   height: 16px;
   border-color: var(--q1-color-text-muted);
@@ -810,7 +898,7 @@
     background 0.2s cubic-bezier(0.4, 0, 1, 1);
 }
 
-/* 圆点常驻、scale 0→1 切换（对标 Geist 实测：0.15s 同 bezier），点击/切换时有生长动效。 */
+/* 圆点常驻、scale 0→1 切换（对标外部参考实测：0.15s 同 bezier），点击/切换时有生长动效。 */
 .control-option__visual--radio::after {
   content: '';
   position: absolute;
@@ -829,7 +917,7 @@
   }
 }
 
-/* Checkbox 选中改前景单色（拍板与 Radio 家族统一，对齐 Geist 实测）：text-primary 填充 + 面板色反色勾，
+/* Checkbox 选中改前景单色（拍板与 Radio 家族统一，对齐外部参考实测）：text-primary 填充 + 面板色反色勾，
    两主题自适应；「选中」是状态非动作，不占用 indigo 动作色。 */
 .control-option input:checked + .control-option__visual {
   border-color: var(--q1-color-text-primary);
@@ -850,7 +938,7 @@
   transform: rotate(45deg);
 }
 
-/* 半选（indeterminate）：视觉态非第三值，由父级逻辑驱动；填充同选中，标记为居中横杠（Geist 同形）。 */
+/* 半选（indeterminate）：视觉态非第三值，由父级逻辑驱动；填充同选中，标记为居中横杠（外部参考同形）。 */
 .control-option input[type='checkbox']:indeterminate + .control-option__visual {
   border-color: var(--q1-color-text-primary);
   background: var(--q1-color-text-primary);
@@ -867,7 +955,7 @@
   content: '';
 }
 
-/* Radio 选中改前景 outline 风（对标 Geist：text-primary 环 + 8px 点、无填充——它未用品牌色，
+/* Radio 选中改前景 outline 风（对标外部参考：text-primary 环 + 8px 点、无填充——它未用品牌色，
    两主题自适应；Checkbox 待其复核实测后再统一）。 */
 .control-option input[type='radio']:checked + .control-option__visual {
   border-color: var(--q1-color-text-primary);
@@ -878,7 +966,7 @@
   transform: scale(1);
 }
 
-/* Radio 禁用改色彩降级（对标 Geist：全灰、不降透明度）。 */
+/* Radio 禁用改色彩降级（对标外部参考：全灰、不降透明度）。 */
 .control-option input[type='radio']:disabled + .control-option__visual {
   opacity: 1;
   border-color: var(--q1-color-gray-500);
@@ -905,7 +993,7 @@
   box-shadow: var(--q1-shadow-focus);
 }
 
-/* Checkbox 禁用改色彩降级（与 Radio 定稿结论一致、对齐 Geist 实测：全灰锚定、不降透明度——
+/* Checkbox 禁用改色彩降级（与 Radio 定稿结论一致、对齐外部参考实测：全灰锚定、不降透明度——
    之前的 opacity 0.56 衰减是 Breadcrumbs/Radio 复核时已定性的违规模式，这里补齐家族最后一块。 */
 .control-option input:disabled + .control-option__visual,
 .control-option input:disabled ~ .control-option__body {
@@ -939,7 +1027,7 @@
 }
 
 .control-option__label {
-  /* 排版跟 Geist 实测（13/400）；标题与描述的层级由颜色区分。 */
+  /* 排版跟外部参考实测（13/400）；标题与描述的层级由颜色区分。 */
   font-size: var(--q1-font-size-label-13);
   font-weight: var(--q1-font-weight-regular);
   line-height: var(--q1-line-height-label-13);
@@ -997,7 +1085,7 @@
 .menu__trigger:hover {
   background: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
 }
-/* 图标-only 触发器（对标 Geist Custom trigger：可访问名称经 aria-label 暴露）。 */
+/* 图标-only 触发器（对标外部参考 Custom trigger：可访问名称经 aria-label 暴露）。 */
 .menu__trigger--icon {
   width: 32px;
   height: 32px;
@@ -1008,7 +1096,7 @@
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-/* 实测 Geist：容器 padding 8px(space-2)/radius 12px(radius-4)；item 固定 40px 高(靠固定高+
+/* 实测外部参考：容器 padding 8px(space-2)/radius 12px(radius-4)；item 固定 40px 高(靠固定高+
    flex 居中，不是 padding 自然撑开)，radius-2(6px) 已一致；禁用项只换色不降 opacity（对标
    Radio/Note/Modal 已建立的「禁用色彩降级、opacity 恒 1」家族规则）。 */
 .menu__popup {
@@ -1020,7 +1108,7 @@
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .menu__popup--start {
   left: 0;
@@ -1124,7 +1212,7 @@
   }
 }
 
-/* 头像：直径由 --q1-avatar-size 驱动（自由数值，对齐 Geist size={n} 模型），字号=直径一半。
+/* 头像：直径由 --q1-avatar-size 驱动（自由数值，对齐外部参考 size={n} 模型），字号=直径一半。
    不设 overflow:hidden——右下角标要越出圆周；需要裁剪的形态各自处理。 */
 .avatar {
   position: relative;
@@ -1155,7 +1243,7 @@
 }
 
 /* 字母/图标回退：实心中性灰盘 + 恒白字。gray-900（亮 4d4d4d／暗 a0a0a0）正好落在
-   Geist 实测值（亮 444／暗 999）上；白字用 oklch 字面量（身份盘前景恒白，同 Geist）。
+   外部参考实测值（亮 444／暗 999）上；白字用 oklch 字面量（身份盘前景恒白，同外部参考）。
    overflow 裁剪兜超长 letter 输入（合法输入 ≤2 字符不受影响）。 */
 .avatar--letter,
 .avatar--glyph {
@@ -1165,7 +1253,7 @@
   overflow: hidden;
 }
 
-/* 占位骨架：微光渐变（Geist 同款三段式，无边框），尊重 prefers-reduced-motion。 */
+/* 占位骨架：微光渐变（外部参考同款三段式，无边框），尊重 prefers-reduced-motion。 */
 .avatar--placeholder {
   overflow: hidden;
   background: var(--q1-color-bg-subtle);
@@ -1200,7 +1288,7 @@
   }
 }
 
-/* 右下角标（对标 Geist With custom icon）：直径=头像一半，外环用面板色与主体分离。 */
+/* 右下角标（对标外部参考 With custom icon）：直径=头像一半，外环用面板色与主体分离。 */
 .avatar__badge {
   position: absolute;
   right: calc(var(--q1-avatar-size, 32px) * -0.06);
@@ -1241,7 +1329,7 @@
   box-shadow: 0 0 0 1px var(--q1-color-bg-panel);
 }
 
-/* +N 收纳芯片：恒定深色、不随主题翻转（Geist 双主题实测同值；同族先例：遮罩恒黑）。 */
+/* +N 收纳芯片：恒定深色、不随主题翻转（外部参考双主题实测同值；同族先例：遮罩恒黑）。 */
 .avatar--overflow {
   background: oklch(0.2 0 0);
   color: oklch(0.94 0 0);
@@ -1250,7 +1338,7 @@
   font-weight: var(--q1-font-weight-semibold);
 }
 
-/* 实测 Geist:胶囊三档 h20/24/32、字号 11/12/14、字重 500、tabular-nums;图标随档 12/14/16,lg gap 6px。 */
+/* 实测外部参考:胶囊三档 h20/24/32、字号 11/12/14、字重 500、tabular-nums;图标随档 12/14/16,lg gap 6px。 */
 .badge {
   display: inline-flex;
   align-items: center;
@@ -1374,13 +1462,24 @@
   color: oklch(from var(--q1-color-status-danger) 0.74 0.16 h);
 }
 
-/* 反转款：深浅互换的强调 badge（实测 Geist inverted：gray-1000 底 / gray-100 字，token 双主题自翻）。 */
+/* quiet 档：低强调元数据形态（SKU/条码/待绑定包裹等），视觉≈neutral-subtle——淡染底、无描边，但不带 tone 语义色。 */
+.badge--quiet {
+  background: oklch(from var(--q1-color-gray-700) 0.95 0 0);
+  color: oklch(from var(--q1-color-gray-700) 0.42 0 0);
+}
+
+:root[data-theme='dark'] .badge--quiet {
+  background: oklch(from var(--q1-color-gray-700) 0.26 0 0);
+  color: oklch(from var(--q1-color-gray-700) 0.84 0 0);
+}
+
+/* 反转款：深浅互换的强调 badge（实测外部参考 inverted：gray-1000 底 / gray-100 字，token 双主题自翻）。 */
 .badge--inverted {
   background: var(--q1-color-gray-1000);
   color: var(--q1-color-gray-100);
 }
 
-/* Pill：基于 Badge 样式的特殊链接（实测 Geist：background-200 底 + 1px 内嵌 hairline 环，悬停提亮到 gray-200）。 */
+/* Pill：基于 Badge 样式的特殊链接（实测外部参考：background-200 底 + 1px 内嵌 hairline 环，悬停提亮到 gray-200）。 */
 .badge--pill {
   background: var(--q1-color-background-200);
   color: var(--q1-color-text-primary);
@@ -1468,7 +1567,7 @@
   border-color: var(--q1-color-border-strong);
 }
 
-/* 页顶公告形态（对齐 Geist demo 实测）：透明底无边框、内容居中、16px 文案；
+/* 页顶公告形态（对齐外部参考 demo 实测）：透明底无边框、内容居中、16px 文案；
    与页内卡条（tone 变体）分工，两种定位见页面使用原则。 */
 .banner--announcement {
   justify-content: center;
@@ -1484,7 +1583,7 @@
   line-height: var(--q1-line-height-copy-16);
 }
 
-/* 公告主操作：恒深药丸，双主题同值（Geist 亮暗实测同为深底浅字；同族先例：Avatar +N 芯片、遮罩恒黑）。 */
+/* 公告主操作：恒深药丸，双主题同值（外部参考亮暗实测同为深底浅字；同族先例：Avatar +N 芯片、遮罩恒黑）。 */
 .banner__cta {
   flex-shrink: 0;
   display: inline-flex;
@@ -1651,7 +1750,7 @@ a.breadcrumb__link:hover {
   font-weight: var(--q1-font-weight-medium);
 }
 
-/* 禁用态：固定 gray-700（双主题同一色值，Geist 实测），不用透明度衰减——
+/* 禁用态：固定 gray-700（双主题同一色值，外部参考实测），不用透明度衰减——
    与 text-muted 在暗色主题会漂到 gray-800 不同，这里刻意锚定 gray-700 原值。 */
 .breadcrumb__link--disabled {
   color: var(--q1-color-gray-700);
@@ -1699,7 +1798,7 @@ a.breadcrumb__link:hover {
   display: none;
 }
 
-/* menu 形态（对标 Geist type="menu" 实测）：独立描边药丸，无分隔符；
+/* menu 形态（对标外部参考 type="menu" 实测）：独立描边药丸，无分隔符；
    尺寸/描边/圆角逐字节对齐（22px 高、2px/6px 内距、1px border-overlay、4px 圆角、12px 字）。 */
 .breadcrumb--menu .breadcrumb__list {
   gap: 6px;
@@ -1749,7 +1848,7 @@ a.breadcrumb__link:hover {
   overflow: hidden;
   border-radius: var(--q1-radius-4);
   background: var(--browser-surface);
-  /* material-small：1px 顶部亮环 + 柔和投影 + 1px 暗边环（对标 Geist 三层叠加）。 */
+  /* material-small：1px 顶部亮环 + 柔和投影 + 1px 暗边环（对标外部参考三层叠加）。 */
   box-shadow:
     inset 0 0 0 1px color-mix(in srgb, white 14%, transparent),
     0 1px 2px color-mix(in srgb, black 40%, transparent),
@@ -1839,7 +1938,7 @@ a.breadcrumb__link:hover {
   border-radius: 9999px;
 }
 
-/* 字面量 macOS 交通灯配色（Geist 实测，双主题同值，与像素级验证过的转换值对齐）：
+/* 字面量 macOS 交通灯配色（外部参考实测，双主题同值，与像素级验证过的转换值对齐）：
    这是操作系统窗口控件的写实模拟，不是语义状态传达，故意不用 --q1-color-status-* token。 */
 .browser__dot--close {
   background: oklch(0.6921 0.1953 26.36);
@@ -1983,7 +2082,7 @@ a.breadcrumb__link:hover {
   object-fit: cover;
 }
 
-/* 窄屏：隐藏导航图标（对标 Geist max-md:hidden）。起始区常驻自适应宽度、
+/* 窄屏：隐藏导航图标（对标外部参考 max-md:hidden）。起始区常驻自适应宽度、
    地址区常驻吃满剩余空间（见 .browser__zone--start/--center），本断点无需再单独处理。 */
 @media (max-width: 640px) {
   .browser__controls {
@@ -1991,7 +2090,7 @@ a.breadcrumb__link:hover {
   }
 }
 
-/* 书籍封面（2026-07-09 双轮实测 Geist）：静止=平面封面（49/60、圆角 6/4/4/6、暗色微光、
+/* 书籍封面（2026-07-09 双轮实测外部参考）：静止=平面封面（49/60、圆角 6/4/4/6、暗色微光、
    双层外阴影随宽度缩放、左缘 8.2% 书脊沟线、排版=宽度线性缩放 0.0836/0.061）；
    悬停=绕 Y 轴翻开（rotateY -20° + scale 1.066 + translateX -16px，0.25s ease-out——
    从冻结的 CSSTransition 关键帧取证；hidden 标签页首测误判"无动效"，用户人眼纠正）。 */
@@ -2098,7 +2197,7 @@ a.breadcrumb__link:hover {
   background: var(--q1-book-sheen);
 }
 
-/* 顶部色带（stripe 变体，Geist 默认形态）：占封面高度 47.8%。 */
+/* 顶部色带（stripe 变体，外部参考默认形态）：占封面高度 47.8%。 */
 .book__band {
   position: relative;
   display: flex;
@@ -2134,7 +2233,7 @@ a.breadcrumb__link:hover {
   color: var(--book-text);
 }
 
-/* 书脊沟线：左缘 8.2% 宽度内一条白 25% 高光渐变（两主题同值，Geist 实测）。 */
+/* 书脊沟线：左缘 8.2% 宽度内一条白 25% 高光渐变（两主题同值，外部参考实测）。 */
 .book__gutter {
   position: absolute;
   inset: 0 auto 0 0;
@@ -2164,7 +2263,7 @@ a.breadcrumb__link:hover {
   object-fit: cover;
 }
 
-/* 纹理（自有配方，Geist 多款纹理样式记 non-goal）：细密交叉底纹叠在封面色上，不糊标题。 */
+/* 纹理（自有配方，外部参考多款纹理样式记 non-goal）：细密交叉底纹叠在封面色上，不糊标题。 */
 .book--textured .book__cover {
   background-image:
     repeating-linear-gradient(
@@ -2235,7 +2334,7 @@ a.breadcrumb__link:hover {
   padding: var(--q1-space-6);
 }
 
-/* 分段控件 Switch（对标 Geist Switch）：一组互斥选项，选中段抬起；底层 q1-sr-only 单选组，方向键原生可用。 */
+/* 分段控件 Switch（对标外部参考 Switch）：一组互斥选项，选中段抬起；底层 q1-sr-only 单选组，方向键原生可用。 */
 .switch-control {
   display: inline-flex;
   align-items: center;
@@ -2311,7 +2410,7 @@ a.breadcrumb__link:hover {
   gap: var(--q1-space-4);
 }
 
-/* 下划线式 Tabs（对标 Geist）：tablist 一条底边基线，选中标签用 2px 前景色底边下划线、透明底、字重 400。 */
+/* 下划线式 Tabs（对标外部参考）：tablist 一条底边基线，选中标签用 2px 前景色底边下划线、透明底、字重 400。 */
 .tabs-control {
   display: flex;
   align-items: center;
@@ -2370,7 +2469,7 @@ a.breadcrumb__link:hover {
   align-items: center;
 }
 
-/* 次级（secondary）变体（对标 Geist Secondary Tabs）：药丸组容器，选中态用前景色填充、无下划线。 */
+/* 次级（secondary）变体（对标外部参考 Secondary Tabs）：药丸组容器，选中态用前景色填充、无下划线。 */
 .tabs-control--secondary {
   gap: var(--q1-space-1);
   border: 1px solid var(--q1-color-border-strong);
@@ -2505,10 +2604,10 @@ a.breadcrumb__link:hover {
   display: flex;
   gap: var(--q1-space-6);
   padding: var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 
 .cal-popover--vertical {
@@ -2601,7 +2700,7 @@ a.breadcrumb__link:hover {
   cursor: pointer;
 }
 
-/* 固定时区：只读文本，去掉可点击暗示（Geist pinnedTimezone——只读文本非 select）。 */
+/* 固定时区：只读文本，去掉可点击暗示（外部参考 pinnedTimezone——只读文本非 select）。 */
 .cal-inputs__tz--pinned {
   cursor: default;
 }
@@ -2784,10 +2883,10 @@ a.breadcrumb__link:hover {
   z-index: 20;
   display: flex;
   min-width: 380px;
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   overflow: hidden;
 }
 
@@ -2874,7 +2973,7 @@ a.breadcrumb__link:hover {
   height: 1px;
 }
 
-/* 竖向随容器拉伸（对标 Geist h-full）；min-height 防非弹性父容器下塌陷成一点。 */
+/* 竖向随容器拉伸（对标外部参考 h-full）；min-height 防非弹性父容器下塌陷成一点。 */
 .separator--vertical {
   width: 1px;
   height: auto;
@@ -2959,7 +3058,7 @@ a.breadcrumb__link:hover {
 .spinner--success { color: var(--q1-color-status-success); }
 .spinner--info { color: var(--q1-color-status-info); }
 
-/* 辐条角度与动画延迟由组件按辐条数内联计算（辐条数随尺寸增减，对标 Geist）。 */
+/* 辐条角度与动画延迟由组件按辐条数内联计算（辐条数随尺寸增减，对标外部参考）。 */
 .spinner__bar {
   position: absolute;
   top: 0;
@@ -3121,7 +3220,7 @@ a.breadcrumb__link:hover {
   color: var(--q1-color-text-primary);
 }
 
-/* 复制按钮 absolute 挂右侧（对标 Geist）：单行高度由文本决定（10px 竖向 padding + 20px 行高 ≈ 42），
+/* 复制按钮 absolute 挂右侧（对标外部参考）：单行高度由文本决定（10px 竖向 padding + 20px 行高 ≈ 42），
    不被按钮撑高；文本区 padding-right 预留按钮位。 */
 .snippet {
   position: relative;
@@ -3134,7 +3233,7 @@ a.breadcrumb__link:hover {
   background: var(--q1-color-bg-subtle);
 }
 
-/* 反色：纯反色一层（对标 Geist Inverted），两主题自适应，无内衬块。 */
+/* 反色：纯反色一层（对标外部参考 Inverted），两主题自适应，无内衬块。 */
 .snippet--inverted {
   border-color: var(--q1-color-text-primary);
   background: var(--q1-color-text-primary);
@@ -3276,7 +3375,7 @@ a.breadcrumb__link:hover {
   100% { transform: rotate(360deg); }
 }
 
-/* 实测 Geist：条高 10px、圆角 radius-2、轨道 gray-200；填充默认中性前景，
+/* 实测外部参考：条高 10px、圆角 radius-2、轨道 gray-200；填充默认中性前景，
    过渡 width/background-color 0.1s ease-in（换色也平滑）。停靠点悬停有气泡，
    故裁剪收进 __track 内层，停靠点留在外层不被 overflow 剪掉。 */
 .progress {
@@ -3377,7 +3476,7 @@ a.breadcrumb__link:hover {
   transform: translate(-50%, 0);
 }
 
-/* 实测 Geist：非填充态背景恒透明，靠边框+图标+正文同色传达类型（不是只图标上色，正文保持中性）；
+/* 实测外部参考：非填充态背景恒透明，靠边框+图标+正文同色传达类型（不是只图标上色，正文保持中性）；
    filled 只加浅色底，图标/正文颜色不变——两态共享同一套 tone-fg/tone-border，复用 Banner 已建立的
    tone-surface 配方（不新开一层浅色阶）。 */
 .note {
@@ -3410,7 +3509,7 @@ a.breadcrumb__link:hover {
   font-weight: var(--q1-font-weight-medium);
 }
 
-/* 行动按钮（实测 Geist：32px 高、radius-2、实心反色 CTA，不是我们原来的浅边框按钮）。 */
+/* 行动按钮（实测外部参考：32px 高、radius-2、实心反色 CTA，不是我们原来的浅边框按钮）。 */
 .note__action {
   flex-shrink: 0;
   display: inline-flex;
@@ -3473,7 +3572,7 @@ a.breadcrumb__link:hover {
 /* secondary 是中性语义，不像其余四档有专属 tone token，填充态用中性 subtle 底。 */
 .note--filled.note--secondary { background: var(--q1-color-bg-subtle); }
 
-/* 禁用态（实测 Geist Disabled 章节：整体降灰，不因类型保留颜色；对标 Radio 的色彩降级配方，
+/* 禁用态（实测外部参考 Disabled 章节：整体降灰，不因类型保留颜色；对标 Radio 的色彩降级配方，
    opacity 恒 1，只换色，源码顺序放在类型规则之后确保覆盖）。
    .note--filled.note--info 等是两类选择器（优先级 0,2,0），比 .note--disabled 单类（0,1,0）更高，
    源码顺序赢不了优先级差——填充+禁用组合必须用同为两类的选择器才能真正盖掉填充色。 */
@@ -3492,7 +3591,7 @@ a.breadcrumb__link:hover {
 }
 
 /* 修正：gray-500 实底 + bg-canvas 深色字在暗色主题几乎不可读（bg-canvas 暗色下是近黑，
-   叠在中灰底上对比度太低）。实测 Geist 的真实禁用配方是「底色几乎不变、只把字调淡」
+   叠在中灰底上对比度太低）。实测外部参考的真实禁用配方是「底色几乎不变、只把字调淡」
    （light 主题测得 bg 几乎同色，字从纯白调淡到中灰），改为对底色加 55% 透明度混合。 */
 .note--disabled .note__action {
   background: var(--q1-color-gray-1000);
@@ -3687,7 +3786,7 @@ a.breadcrumb__link:hover {
   color: var(--q1-color-text-secondary);
 }
 
-/* 语言切换按钮组（对标 Geist Language switcher with tabs）：占 header 左侧文件名位。 */
+/* 语言切换按钮组（对标外部参考 Language switcher with tabs）：占 header 左侧文件名位。 */
 .codeblock__tabs {
   display: inline-flex;
   gap: var(--q1-space-1);
@@ -3992,10 +4091,10 @@ a.breadcrumb__link:hover {
   flex-direction: column;
   gap: var(--q1-space-1);
   padding: var(--q1-space-3) var(--q1-space-4);
-  border: 1px solid var(--q1-color-border);
+  border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-mask-opaque) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
@@ -4014,7 +4113,7 @@ a.breadcrumb__link:hover {
 .context-card-wrap--left .context-card { right: calc(100% + 8px); top: 0; }
 .context-card-wrap--right .context-card { left: calc(100% + 8px); top: 0; }
 
-/* 轴向对齐（对标 Geist Alignment）：默认 start 贴起始边；center 沿轴居中；end 贴结束边。
+/* 轴向对齐（对标外部参考 Alignment）：默认 start 贴起始边；center 沿轴居中；end 贴结束边。
    top/bottom 的轴是水平（left/translateX），left/right 的轴是垂直（top/translateY）。 */
 .context-card-wrap--top.context-card-wrap--align-center .context-card,
 .context-card-wrap--bottom.context-card-wrap--align-center .context-card {
@@ -4108,7 +4207,7 @@ a.breadcrumb__link:hover {
 .rtc-trigger {
   border-bottom: 1px dashed var(--q1-color-border-strong);
   color: var(--q1-color-text-primary);
-  /* 光标铁律：跟 Geist 实测（其 RTC 触发器为 pointer）。 */
+  /* 光标铁律：跟外部参考实测（其 RTC 触发器为 pointer）。 */
   cursor: pointer;
 }
 
@@ -4133,19 +4232,19 @@ a.breadcrumb__link:hover {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
+  box-shadow: var(--q1-shadow-popover);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.12s ease, visibility 0.12s ease;
 }
 
-/* 长格式相对时间标题行（对标 Geist）。 */
+/* 长格式相对时间标题行（对标外部参考）。 */
 .rtc-card__relative {
   font-size: 12px;
   color: var(--q1-color-text-primary);
 }
 
-/* 时区徽章（UTC / GMT+8 小 chip，对标 Geist）。 */
+/* 时区徽章（UTC / GMT+8 小 chip，对标外部参考）。 */
 .rtc-card__zone {
   flex: none;
   padding: 1px var(--q1-space-1);
@@ -4174,8 +4273,8 @@ a.breadcrumb__link:hover {
   color: var(--q1-color-text-secondary);
 }
 
-/* 项目横幅（对标 Geist 实测）：radius 0 贴边通栏条；图标随文字色；CTA 亮一档 + medium。
-   flex-wrap 为窄屏防溢出兜底（有理由偏离：Geist 无，正常宽度不可见）。 */
+/* 项目横幅（对标外部参考实测）：radius 0 贴边通栏条；图标随文字色；CTA 亮一档 + medium。
+   flex-wrap 为窄屏防溢出兜底（有理由偏离：外部参考无，正常宽度不可见）。 */
 .project-banner {
   display: flex;
   flex-wrap: wrap;
@@ -4261,14 +4360,14 @@ a.breadcrumb__link:hover {
   background: var(--q1-color-bg-subtle);
 }
 
-/* 分段卡片给容器 16px 内边距（对齐 Geist p-4）：section 随之内缩，分隔线不贯满卡片边、左端对齐文字。
+/* 分段卡片给容器 16px 内边距（对齐外部参考 p-4）：section 随之内缩，分隔线不贯满卡片边、左端对齐文字。
    这是分隔线"内缩"的来源——不是给线加 inset，而是容器留边、section 无水平 padding，线随 section 内缩。 */
 .q1-card--divided {
   padding: var(--q1-space-4);
 }
 
 .q1-card--divided .q1-card__section {
-  /* 竖排段：只留垂直 padding（对齐 Geist py-2），水平交给容器内边距，分隔线因此内缩对齐文字。 */
+  /* 竖排段：只留垂直 padding（对齐外部参考 py-2），水平交给容器内边距，分隔线因此内缩对齐文字。 */
   padding: var(--q1-space-2) 0;
   font-size: 14px;
   color: var(--q1-color-text-primary);
@@ -4282,7 +4381,7 @@ a.breadcrumb__link:hover {
    特异性用 .q1-card.q1-card--row(0,2,0) 压过可点卡片的 a.q1-card(0,1,1)，否则 <a> 卡片的 display:block 会把 flex 打回竖排。 */
 .q1-card.q1-card--row {
   display: flex;
-  /* 横排指标块并列需要空间，解除默认 400px 限宽，充满容器（对齐 Geist 横排充满 demo 框）。 */
+  /* 横排指标块并列需要空间，解除默认 400px 限宽，充满容器（对齐外部参考横排充满 demo 框）。 */
   max-width: none;
 }
 
@@ -4291,7 +4390,7 @@ a.breadcrumb__link:hover {
 }
 
 .q1-card--divided.q1-card--row .q1-card__section {
-  /* 横排段：垂直 padding 归 0（内缩交给容器）、水平 8px 给文字到竖线的间距（对齐 Geist row section 0 8px）。 */
+  /* 横排段：垂直 padding 归 0（内缩交给容器）、水平 8px 给文字到竖线的间距（对齐外部参考 row section 0 8px）。 */
   padding: 0 var(--q1-space-2);
 }
 
@@ -4319,14 +4418,14 @@ a.breadcrumb__link:hover {
   color: var(--q1-color-text-secondary);
 }
 
-/* 常驻柔和投影（对齐 Geist shadow）：贴地薄影 + 扩散软影两层，让卡片浮于背景。 */
+/* 常驻柔和投影（对齐外部参考 shadow）：贴地薄影 + 扩散软影两层，让卡片浮于背景。 */
 .q1-card--shadow {
   box-shadow:
     0 1px 2px color-mix(in srgb, var(--q1-color-shadow) 6%, transparent),
     0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 8%, transparent);
 }
 
-/* 无框卡片（bordered={false}）：去边框，靠底色/投影表达边界（对齐 Geist border 可选）。 */
+/* 无框卡片（bordered={false}）：去边框，靠底色/投影表达边界（对齐外部参考 border 可选）。 */
 .q1-card--borderless {
   border-color: transparent;
 }
@@ -4496,7 +4595,7 @@ a.q1-card:focus-visible {
   100% { transform: rotate(360deg); }
 }
 
-/* Esc 键帽清除（对标 Geist）：清除入口本身就是快捷键教学；点击或按 Esc 清空。 */
+/* Esc 键帽清除（对标外部参考）：清除入口本身就是快捷键教学；点击或按 Esc 清空。 */
 .search-input__esc {
   position: absolute;
   top: 50%;
@@ -4571,7 +4670,7 @@ a.q1-card:focus-visible {
   background: var(--q1-color-bg-subtle);
 }
 
-/* tone="danger"|"warning" 是整卡状态（对标 Geist Error/Warning Type）：边框着色表达整组处于错误/警告态，
+/* tone="danger"|"warning" 是整卡状态（对标外部参考 Error/Warning Type）：边框着色表达整组处于错误/警告态，
    页脚派生轻染底延续状态可读性——不是只染页脚（原 .fieldset__footer--* 语义提升为整卡 .fieldset--*）。 */
 .fieldset--danger {
   border-color: var(--q1-color-status-danger);
@@ -4657,7 +4756,7 @@ a.q1-card:focus-visible {
   justify-content: center;
 }
 
-/* 药丸触发器（对标 Geist）：h32 / font 14/500 / 全圆角；颜色走家族 panel+border。 */
+/* 药丸触发器（对标外部参考）：h32 / font 14/500 / 全圆角；颜色走家族 panel+border。 */
 .show-more__trigger {
   display: inline-flex;
   align-items: center;
@@ -4725,7 +4824,7 @@ a.q1-card:focus-visible {
   transform: rotate(90deg);
 }
 /* 收起时面板保留在 DOM（grid 0fr），便于页面内查找命中；visibility 把收起内容移出
-   焦点序与读屏树（对齐 Geist closed 用 hidden/visibility）——关闭时随高度动画结束才隐藏，
+   焦点序与读屏树（对齐外部参考 closed 用 hidden/visibility）——关闭时随高度动画结束才隐藏，
    打开时立即可见（visibility 的过渡语义天然如此）。 */
 .collapse__panel {
   display: grid;
@@ -5055,7 +5154,7 @@ a.q1-card:focus-visible {
 .choicebox--checkbox:has(.choicebox__input:disabled:checked) .choicebox__indicator {
   background: var(--q1-color-gray-500);
 }
-/* 实测 Geist:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外；
+/* 实测外部参考:裸轨(无外框/无背景/无 padding),图标抽离文字块、绝对定位在 28px 凹槽外；
    悬停只把文字/图标从 text-secondary 加深到 text-primary,无背景浸染、无品牌色——
    这是页面间的纯导航链(chrome),不是行动号召,indigo 只守「动作」。 */
 .pagination {
@@ -5093,7 +5192,7 @@ a.q1-card:focus-visible {
 .pagination__link:hover .pagination__label {
   color: var(--q1-color-text-primary);
 }
-/* 定位上下文钉在标题文字块（实测 Geist：图标是标题块的子节点，随文字宽度走，
+/* 定位上下文钉在标题文字块（实测外部参考：图标是标题块的子节点，随文字宽度走，
    而不是钉在整条链接上）——否则图标会漂出链接可点/可聚焦的框外。 */
 .pagination__title-frame {
   position: relative;
@@ -5176,7 +5275,7 @@ a.q1-card:focus-visible {
   z-index: 10;
   width: 336px;
   border-color: var(--q1-color-border-overlay);
-  box-shadow: 0 8px 24px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .feedback__head {
   display: flex;
@@ -5329,7 +5428,7 @@ a.q1-card:focus-visible {
   align-items: center;
   gap: var(--q1-space-2);
 }
-/* 纵向带按钮（对标 Geist Vertical with buttons）：上/滚动区/下 纵向堆叠。 */
+/* 纵向带按钮（对标外部参考 Vertical with buttons）：上/滚动区/下 纵向堆叠。 */
 .scroller-buttons--vertical {
   flex-direction: column;
   align-items: stretch;
@@ -5403,7 +5502,7 @@ a.q1-card:focus-visible {
 .theme-switcher:disabled .theme-switcher__option {
   cursor: default;
 }
-/* 实测 Geist(320 框):壳与岛恒黑、键恒灰——拟真设备不随主题翻转;无投影,黑壳对比度即高度感。
+/* 实测外部参考(320 框):壳与岛恒黑、键恒灰——拟真设备不随主题翻转;无投影,黑壳对比度即高度感。
    键位为 675 框高的实测百分比换算:静音 15%、音量 23.4%/32.4%、电源(右)28.2%。 */
 .phone {
   position: relative;
@@ -5457,7 +5556,7 @@ a.q1-card:focus-visible {
   overflow: hidden;
   background: var(--q1-color-bg-canvas);
 }
-/* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(Geist 灰占位屏上为恒白)。 */
+/* iOS home 条:设备铬,叠在屏内容底部;我们的屏底色随主题翻转,故取前景色保持可见(外部参考灰占位屏上为恒白)。 */
 .phone__home {
   position: absolute;
   bottom: 1.8%;
@@ -5662,7 +5761,7 @@ a.q1-card:focus-visible {
   transform: translateY(var(--y, 0px)) scale(1);
   opacity: 1;
 }
-/* 状态 q1-toast：实心 tone 底色 + 浅色文字（对标 Geist 的 success/warning/error） */
+/* 状态 q1-toast：实心 tone 底色 + 浅色文字（对标外部参考的 success/warning/error） */
 .q1-toast--success,
 .q1-toast--warning,
 .q1-toast--error {
@@ -5793,7 +5892,7 @@ a.q1-card:focus-visible {
   border-radius: 999px;
   background: var(--q1-color-bg-subtle);
 }
-/* 竖条拇指（对标 Geist）：6×14 白色小竖条 + 定义环；action-on-primary 两主题恒白（拇指骑在 primary 填充上）。 */
+/* 竖条拇指（对标外部参考）：6×14 白色小竖条 + 定义环；action-on-primary 两主题恒白（拇指骑在 primary 填充上）。 */
 .slider-input::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 6px;
@@ -5854,7 +5953,7 @@ a.q1-card:focus-visible {
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   text-align: center;
-  /* 隐藏原生步进箭头（对标 Geist）：键盘 ↑↓ 步进不受影响，粗调交给滑块。 */
+  /* 隐藏原生步进箭头（对标外部参考）：键盘 ↑↓ 步进不受影响，粗调交给滑块。 */
   -moz-appearance: textfield;
   appearance: textfield;
 }
@@ -5932,7 +6031,7 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-secondary);
   font-size: 14px;
   text-align: center;
-  /* 光标铁律：Geist 右键触发区无 cursor 声明（auto），照抄不自建。 */
+  /* 光标铁律：外部参考右键触发区无 cursor 声明（auto），照抄不自建。 */
   user-select: none;
 }
 .context-menu__area:focus-visible {
@@ -6031,7 +6130,7 @@ a.q1-card:focus-visible {
 .split-button--secondary .split-button__toggle {
   background: var(--q1-color-bg-panel);
 }
-/* 尺寸（与 Button 家族共享 Geist 刻度：高 32/40/48、radius 6/6/8、字号 14/14/16） */
+/* 尺寸（与 Button 家族共享外部参考刻度：高 32/40/48、radius 6/6/8、字号 14/14/16） */
 .split-button--sm .split-button__primary {
   min-height: 32px;
   padding: 0 var(--q1-space-3);
@@ -6107,6 +6206,10 @@ a.q1-card:focus-visible {
 .combobox--disabled .combobox__control {
   opacity: 0.55;
 }
+.combobox--readonly .combobox__input {
+  caret-color: transparent;
+  cursor: default;
+}
 .combobox__leading {
   flex: none;
   color: var(--q1-color-text-secondary);
@@ -6143,7 +6246,7 @@ a.q1-card:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
 }
-.combobox__listbox {
+.combobox__popup {
   position: absolute;
   top: calc(100% + var(--q1-space-1));
   left: 0;
@@ -6157,7 +6260,12 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
+}
+.combobox__listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 .combobox__option {
   display: flex;
@@ -6170,7 +6278,7 @@ a.q1-card:focus-visible {
   cursor: pointer;
 }
 
-/* 选项前后图标（对标 Geist With Prefix/Suffix Icons）：前缀随文本、后缀推到行尾。 */
+/* 选项前后图标（对标外部参考 With Prefix/Suffix Icons）：前缀随文本、后缀推到行尾。 */
 .combobox__option-prefix,
 .combobox__option-suffix {
   display: inline-flex;
@@ -6186,15 +6294,31 @@ a.q1-card:focus-visible {
 .combobox__option--active {
   background: color-mix(in srgb, var(--q1-color-text-primary) 6%, transparent);
 }
+.combobox__option--disabled {
+  color: var(--q1-color-text-secondary);
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .combobox__option[aria-selected='true'] {
   color: var(--q1-color-action-primary);
   font-weight: 500;
 }
+/* 选中项对勾（对标外部参考选中标记）：推到行尾，随选中色。 */
+.combobox__option-check {
+  flex: none;
+  margin-left: auto;
+  color: var(--q1-color-action-primary);
+}
 .combobox__empty {
   padding: var(--q1-space-3);
   font-size: 13px;
   color: var(--q1-color-text-secondary);
 }
+.combobox__empty :focus-visible {
+  outline: none;
+  border-radius: var(--q1-radius-1);
+  box-shadow: var(--q1-shadow-focus);
+}
 .combobox__error-text {
   margin: var(--q1-space-2) 0 0;
   font-size: 13px;
@@ -6231,7 +6355,7 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-secondary);
   font-weight: 400;
 }
-/* 实测 Geist：菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
+/* 实测外部参考：菜单 radius-4(12px)、padding space-2(8px)、行高 32px。 */
 .multi-select__menu {
   position: absolute;
   top: calc(100% + var(--q1-space-1));
@@ -6242,7 +6366,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 8px 28px color-mix(in srgb, var(--q1-color-shadow) 16%, transparent);
+  box-shadow: var(--q1-shadow-popover);
 }
 .multi-select__bulk {
   display: flex;
@@ -6312,13 +6436,13 @@ a.q1-card:focus-visible {
   border-radius: var(--q1-radius-1);
   color: var(--q1-color-bg-canvas);
 }
-/* 实测 Geist：选中态是中性 gray-1000 黑底，不是品牌蓝——与 Radio/Note 行动按钮已定的
+/* 实测外部参考：选中态是中性 gray-1000 黑底，不是品牌蓝——与 Radio/Note 行动按钮已定的
    「选择控件中性，品牌色只归主动作」规则一致。 */
 .multi-select__check--on {
   background: var(--q1-color-gray-1000);
   border-color: var(--q1-color-gray-1000);
 }
-/* 边界：Geist 遇长名靠菜单变宽保持单行；我们改为单行截断更保守——真实业务数据（权限范围名）
+/* 边界：外部参考遇长名靠菜单变宽保持单行；我们改为单行截断更保守——真实业务数据（权限范围名）
    长度不可控，任由菜单跟着最长一项无限变宽风险更高；32px 定高行也扛不住换行溢出。 */
 .multi-select__option-label {
   overflow: hidden;
@@ -6407,7 +6531,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
   overflow: hidden;
 }
 .command-palette__search {
@@ -6489,7 +6613,7 @@ a.q1-card:focus-visible {
   font-size: 11px;
 }
 
-/* 项通用后缀（对标 Geist With Suffix）：元信息文本/状态图标，右对齐、次要色。 */
+/* 项通用后缀（对标外部参考 With Suffix）：元信息文本/状态图标，右对齐、次要色。 */
 .command-palette__suffix {
   display: inline-flex;
   align-items: center;
@@ -6551,7 +6675,7 @@ a.q1-card:focus-visible {
 .modal-btn--primary:hover {
   background: var(--q1-color-action-primary-hover, var(--q1-color-action-primary));
 }
-/* 禁用主按钮（实测 Geist Disabled actions：色彩降级、opacity 恒 1）。这是实心 CTA 按钮，
+/* 禁用主按钮（实测外部参考 Disabled actions：色彩降级、opacity 恒 1）。这是实心 CTA 按钮，
    对标 Input/Select 已建立的「底色抬灰」表单控件禁用配方，而非 Radio 的描边控件配方——
    gray-500 实底配 bg-canvas 字在暗色主题对比度不足，bg-subtle + text-muted 双主题都可读。 */
 .modal-btn--primary:disabled {
@@ -6563,10 +6687,9 @@ a.q1-card:focus-visible {
 .modal-btn--primary:disabled:hover {
   background: var(--q1-color-bg-subtle);
 }
-/* fullWidth（对标 Geist Single button）：单按钮场景下让主操作铺满整行，而不是退回右对齐。 */
-.modal-btn--full-width {
+/* 单按钮场景铺满整行(对标外部参考 Single button):布局属于模态框上下文,不进 Button 本体。 */
+.modal__action--full {
   width: 100%;
-  text-align: center;
 }
 .modal {
   position: fixed;
@@ -6584,7 +6707,7 @@ a.q1-card:focus-visible {
   background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
   cursor: default;
 }
-/* 实测 Geist：540px 宽（我们原 480）。 */
+/* 实测外部参考：540px 宽（我们原 480）。 */
 .modal__dialog {
   position: relative;
   width: 100%;
@@ -6592,7 +6715,7 @@ a.q1-card:focus-visible {
   border: 1px solid var(--q1-color-border-overlay);
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-panel);
-  box-shadow: 0 16px 48px color-mix(in srgb, var(--q1-color-shadow) 32%, transparent);
+  box-shadow: var(--q1-shadow-modal);
 }
 .modal__header {
   display: flex;
@@ -6636,7 +6759,7 @@ a.q1-card:focus-visible {
 .modal__body p {
   margin: 0;
 }
-/* 实测 Geist：取消靠左、主操作靠右（space-between），不是两个按钮一起挤右侧；
+/* 实测外部参考：取消靠左、主操作靠右（space-between），不是两个按钮一起挤右侧；
    仅单个按钮（如确认型 Modal 的「完成」）时退回右对齐，避免孤零零挂在左边。 */
 .modal__footer {
   display: flex;
@@ -6713,7 +6836,7 @@ a.q1-card:focus-visible {
   font-size: 13px;
   color: var(--q1-color-red-700);
 }
-/* loading 态主按钮的加载指示（对标 Geist Loading 章）：连续旋转，尊重 reduced-motion。 */
+/* loading 态主按钮的加载指示（对标外部参考 Loading 章）：连续旋转，尊重 reduced-motion。 */
 .destructive-modal__spinner {
   margin-right: var(--q1-space-2);
   vertical-align: -2px;
@@ -6830,7 +6953,7 @@ a.q1-card:focus-visible {
   padding: var(--q1-space-4) var(--q1-space-6);
   border-top: 1px solid var(--q1-color-border);
 }
-/* 遮罩（对标 Geist）：黑 80% 压暗底层页面，拦截外部点击但点击不关闭；恒黑 token 两主题一致。 */
+/* 遮罩（对标外部参考）：黑 80% 压暗底层页面，拦截外部点击但点击不关闭；恒黑 token 两主题一致。 */
 .sheet__backdrop {
   position: fixed;
   inset: 0;
@@ -6850,7 +6973,7 @@ a.q1-card:focus-visible {
   }
 }
 
-/* 悬浮圆角面板（对标 Geist 形态）：四边不贴屏，inset 12 + 圆角 + 全边框。 */
+/* 悬浮圆角面板（对标外部参考形态）：四边不贴屏，inset 12 + 圆角 + 全边框。 */
 .sheet__panel {
   position: fixed;
   z-index: 70;
@@ -6920,7 +7043,7 @@ a.q1-card:focus-visible {
     transform: translateY(calc(100% + var(--q1-space-3)));
   }
 }
-/* 头/尾无分隔线（对标 Geist）：层级靠 24px 留白，不画线。 */
+/* 头/尾无分隔线（对标外部参考）：层级靠 24px 留白，不画线。 */
 .sheet__header {
   display: flex;
   align-items: center;