@q1travel/design-system 0.27.2 → 0.28.1

package/dist-pkg/style.css

@@ -1,5 +1,9 @@
 /* q1travel design system — 发布样式（tokens + 字体兜底 + foundations + components + 组件独立样式）。构建产物，勿手改。 */
-:root {
+/* 局部主题子树：子树根元素设置 data-q1-theme="light" 或 "dark" 后，在该元素上重新声明全部 token，
+   var() 引用就地按子树主题解析，颜色、阴影与 auth 域色板整体固定为该主题，不随根元素主题切换。 */
+:root,
+[data-q1-theme='light'],
+[data-q1-theme='dark'] {
   /* color-scheme 不在此声明：tokens.css 随包发布，全局副作用交消费方应用掌管（门户侧在 global.css）。 */
   --q1-color-background-100: #ffffff;
   --q1-color-background-200: #fafafa;
@@ -311,7 +315,6 @@
   --q1-doc-page-footer-min-height: 112px;
   --q1-doc-page-footer-padding: 28px var(--q1-space-8) 48px;
   --q1-doc-intro-footer-padding: 28px 48px;
-  --q1-doc-page-footer-action-min-width: 72px;
   --q1-radius-1: 4px;
   --q1-radius-2: 6px;
   --q1-radius-3: 8px;
@@ -349,7 +352,8 @@
   --q1-z-toast: 1400;
 }
 
-:root[data-theme='dark'] {
+:root[data-theme='dark'],
+[data-q1-theme='dark'] {
   --q1-shadow-popover:
     0 0 0 1px var(--q1-color-gray-alpha-200),
     0 4px 8px -4px color-mix(in srgb, var(--q1-color-shadow) 12%, transparent),
@@ -549,39 +553,6 @@
   --q1-color-action-text: var(--q1-color-primary-900);
 }
 
-/* 固定浅色子树：在任意子树根元素上设置 data-q1-theme="light"，
-   子树内的 auth 域色板固定取浅色值，不随根元素主题切换；只覆盖 auth 组，中性链照常跟随主题。
-   取值与 :root 中的 auth 浅色值逐项一致，由构建与 check:token-package 校验。 */
-[data-q1-theme='light'] {
-  --q1-color-auth-text-primary: #061b31;
-  --q1-color-auth-text-secondary: #273951;
-  --q1-color-auth-text-muted: #64748d;
-  --q1-color-auth-border-strong: #d6dde6;
-  --q1-color-auth-surface-card: #ffffff;
-  --q1-color-auth-surface-subtle: #f8fafc;
-  --q1-color-auth-surface-input: #ffffff;
-  --q1-color-auth-surface-hover: #f6f9fc;
-  --q1-color-auth-surface-disabled: #f6f9fc;
-  --q1-color-auth-surface-media: #04050a;
-  --q1-color-auth-action-hover: #4434d4;
-  --q1-color-auth-action-press: #2e2b8c;
-  --q1-color-auth-action-disabled-bg: #c7c9cc;
-  --q1-color-auth-action-disabled-border: #c7c9cc;
-  --q1-color-auth-action-disabled-text: #ffffff;
-  --q1-color-auth-focus-ring: rgba(83, 58, 253, 0.42);
-  --q1-color-auth-danger-border: #d92d20;
-  --q1-color-auth-danger-surface: #fff8f7;
-  --q1-color-auth-error-text: #be123c;
-  --q1-color-auth-field-error-text: #d32f2f;
-  --q1-color-auth-notice-border: #b9b9f9;
-  --q1-color-auth-notice-surface: #efebff;
-  --q1-color-auth-notice-text: #2e2b8c;
-  --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
-  --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
-  --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
-  --q1-color-auth-on-media-border-hover: rgba(255, 255, 255, 0.34);
-}
-
 /* 字体继承兜底（:where 零特异度，消费方自己的 body 样式可无条件覆盖）。 */
 :where(body) {
   font-family: var(--q1-font-sans);
@@ -925,7 +896,7 @@
 
 /* Rounded：药丸形 + 柔和抬起阴影（恒黑 shadow token，暗色不泛白）。 */
 .button--rounded {
-  border-radius: 9999px;
+  border-radius: var(--q1-radius-full);
   box-shadow:
     0 1px 2px color-mix(in srgb, var(--q1-color-shadow) 10%, transparent),
     0 6px 16px color-mix(in srgb, var(--q1-color-shadow) 14%, transparent);
@@ -953,7 +924,9 @@
 
 /* —— 统一着色配方 tone-surface——
  Banner/Note/ProjectBanner/状态块共享同一套，消除各自 color-mix 配方漂移；主题自适应，消费方无需 dark 块。 */
-:root {
+:root,
+[data-q1-theme='light'],
+[data-q1-theme='dark'] {
   --q1-tone-bg-info: oklch(from var(--q1-color-status-info) 0.96 0.03 h);
   --q1-tone-border-info: oklch(from var(--q1-color-status-info) 0.86 0.06 h);
   --q1-tone-fg-info: oklch(from var(--q1-color-status-info) 0.47 0.13 h);
@@ -968,7 +941,8 @@
   --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger) 0.47 0.13 h);
 }
 
-:root[data-theme='dark'] {
+:root[data-theme='dark'],
+[data-q1-theme='dark'] {
   --q1-tone-bg-info: oklch(from var(--q1-color-status-info) 0.24 0.04 h);
   --q1-tone-border-info: oklch(from var(--q1-color-status-info) 0.34 0.06 h);
   --q1-tone-fg-info: oklch(from var(--q1-color-status-info) 0.72 0.14 h);
@@ -983,6 +957,17 @@
   --q1-tone-fg-danger: oklch(from var(--q1-color-status-danger) 0.72 0.14 h);
 }
 
+/* 局部主题子树根元素：原生控件与继承文字色随子树主题，不沿用页面主题。 */
+[data-q1-theme='light'] {
+  color-scheme: light;
+  color: var(--q1-color-text-primary);
+}
+
+[data-q1-theme='dark'] {
+  color-scheme: dark;
+  color: var(--q1-color-text-primary);
+}
+
 .form-field {
   position: relative;
   display: grid;
@@ -1246,7 +1231,7 @@
 
 /* 药丸形；双类压过 :has 尺寸档的圆角设定。 */
 .input-control.input-control--rounded {
-  border-radius: 9999px;
+  border-radius: var(--q1-radius-full);
 }
 
 
@@ -1444,6 +1429,12 @@
     min-height: 48px;
   }
 
+  /* Textarea 同为可编辑控件：触屏端字号不足 16px 时 iOS 聚焦会自动放大页面，与 Input 同档。 */
+  .form-control--textarea {
+    font-size: var(--q1-font-size-copy-16);
+    line-height: var(--q1-line-height-heading-16);
+  }
+
   /* 外框内的 input 不带自身最小高度：lg 档 48px 会把外框撑到 50px，高出同档普通 Input。 */
   .input-control .form-control--input {
     min-height: 0;
@@ -1537,7 +1528,7 @@
 }
 
 .control-option__visual--radio {
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   /* Radio ：16px 控件、未选中环用更亮的 muted 灰。
  环色过渡原为 cubic-bezier(0.4,0,1,1)（ease-in），与紧邻的 Checkbox 环色 cubic-bezier(0.4,0,0.2,1)
  不一致——同一族控件不会有意分叉两条曲线，判定为笔误而非实测差异，随 token 化统一到 standard。 */
@@ -1555,7 +1546,7 @@
   left: 3px;
   width: 8px;
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-text-primary);
   opacity: 0;
 }
@@ -1771,6 +1762,11 @@
 .menu__trigger-label {
   display: contents;
 }
+/* 带末尾 chevron 时结束侧收一档，抵消图标框自带空白，左右视觉留白对称。 */
+.menu__trigger:not(.menu__trigger--icon):has(> svg:last-child) {
+  padding-inline-end: var(--q1-space-3-5);
+}
+
 .menu__trigger:hover:not(:disabled) {
   background: color-mix(in srgb, var(--q1-color-text-primary) 4%, transparent);
 }
@@ -1954,15 +1950,6 @@
   margin: var(--q1-space-1) 0;
   background: var(--q1-color-border);
 }
-.menu__shortcut {
-  padding: 1px 6px;
-  border-radius: var(--q1-radius-1);
-  background: color-mix(in srgb, var(--q1-color-text-primary) 8%, transparent);
-  color: var(--q1-color-text-secondary);
-  font-family: var(--q1-font-mono);
-  font-size: 11px;
-  line-height: 1.6;
-}
 @media (pointer: coarse) {
   .menu__trigger[data-pressed='true'] {
     background: color-mix(in srgb, var(--q1-color-text-primary) 8%, transparent);
@@ -2255,7 +2242,7 @@
   margin-block-end: var(--q1-space-3);
 }
 
-@media (pointer: coarse) {
+@media (pointer: coarse), (any-pointer: coarse) {
   .table__checkbox-control,
   .table__sort {
     min-width: 44px;
@@ -2318,8 +2305,8 @@
   text-transform: uppercase;
 }
 
-:root[data-theme='dark'] .avatar--letter,
-:root[data-theme='dark'] .avatar--glyph {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .avatar--letter:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .avatar--glyph:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: var(--q1-color-gray-500);
 }
 
@@ -2377,7 +2364,7 @@
   z-index: 1;
 }
 
-:root[data-theme='dark'] .avatar__badge {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .avatar__badge:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   --q1-avatar-badge-bg: var(--q1-color-gray-500);
 }
 
@@ -2426,7 +2413,7 @@
   align-items: center;
   gap: var(--q1-space-1);
   height: 24px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   padding: 2px var(--q1-space-3);
   font-size: 12px;
   font-weight: var(--q1-font-weight-medium);
@@ -2507,7 +2494,7 @@
   color: oklch(from var(--q1-color-gray-700) 0.42 0 0);
 }
 
-:root[data-theme='dark'] .badge--neutral-subtle {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--neutral-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-gray-700) 0.26 0 0);
   color: oklch(from var(--q1-color-gray-700) 0.84 0 0);
 }
@@ -2533,22 +2520,22 @@
 }
 
 /* subtle 暗色：暗底 + 亮字（oklch L0.26 底 / L0.74 字）。 */
-:root[data-theme='dark'] .badge--info-subtle {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--info-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-status-info) 0.26 0.045 h);
   color: oklch(from var(--q1-color-status-info) 0.74 0.16 h);
 }
 
-:root[data-theme='dark'] .badge--success-subtle {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--success-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-status-success) 0.26 0.045 h);
   color: oklch(from var(--q1-color-status-success) 0.74 0.16 h);
 }
 
-:root[data-theme='dark'] .badge--warning-subtle {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--warning-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-status-warning) 0.26 0.045 h);
   color: oklch(from var(--q1-color-status-warning) 0.74 0.16 h);
 }
 
-:root[data-theme='dark'] .badge--danger-subtle {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--danger-subtle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-status-danger) 0.26 0.045 h);
   color: oklch(from var(--q1-color-status-danger) 0.74 0.16 h);
 }
@@ -2573,7 +2560,7 @@
   min-height: 32px;
 }
 
-:root[data-theme='dark'] .badge--quiet {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .badge--quiet:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--q1-color-gray-700) 0.26 0 0);
   color: oklch(from var(--q1-color-gray-700) 0.84 0 0);
 }
@@ -2609,7 +2596,7 @@
   gap: var(--q1-space-1);
   height: 24px;
   padding: 2px var(--q1-space-3);
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-background-200);
   box-shadow: inset 0 0 0 1px var(--q1-color-border-overlay);
 }
@@ -2712,9 +2699,10 @@
   align-items: center;
   gap: 6px;
   height: 32px;
-  padding: 0 var(--q1-space-3);
+  /* 末尾 chevron 一侧收一档，抵消图标框自带空白。 */
+  padding: 0 var(--q1-space-2) 0 var(--q1-space-3);
   border: 1px solid var(--q1-color-border);
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-panel);
   font-size: var(--q1-font-size-label-14);
   font-weight: var(--q1-font-weight-medium);
@@ -2756,7 +2744,7 @@
   align-items: center;
   height: 32px;
   padding: 0 var(--q1-space-3);
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   /* q1-lint-disable Q1-DS-501 页顶公告的恒深药丸：两主题同值，不参与主题翻转 */
   background: oklch(0.15 0 0);
   color: oklch(0.94 0 0);
@@ -2878,19 +2866,19 @@
 .banner__progress {
   overflow: hidden;
   height: 6px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: oklch(from var(--banner-progress-color) 0.86 0.06 h);
 }
 
 .banner__progress-bar {
   width: 100%;
   height: 100%;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--banner-progress-color);
   transition: transform var(--q1-duration-fast) var(--q1-ease-out);
 }
 
-:root[data-theme='dark'] .banner__progress {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .banner__progress:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: oklch(from var(--banner-progress-color) 0.34 0.06 h);
 }
 
@@ -3267,7 +3255,7 @@ a.breadcrumb__link:hover {
 .browser__dot {
   width: 12px;
   height: 12px;
-  border-radius: 9999px;
+  border-radius: var(--q1-radius-full);
 }
 
 /* 字面量 macOS 交通灯配色：
@@ -3305,7 +3293,7 @@ a.breadcrumb__link:hover {
   max-width: 20rem;
   padding: 4px 8px 4px 12px;
   border: 1px solid var(--browser-border, var(--q1-color-border));
-  border-radius: 9999px;
+  border-radius: var(--q1-radius-full);
   background: var(--browser-surface, var(--q1-color-bg-panel));
   color: var(--browser-fg, var(--q1-color-text-primary));
 }
@@ -3479,14 +3467,17 @@ a.breadcrumb__link:hover {
  双层外阴影随宽度缩放、左缘 8.2% 书脊沟线、排版=宽度线性缩放 0.0836/0.061）；
  只有真实链接在精细指针悬停时绕 Y 轴翻开（rotateY -20° + scale 1.066，横移按书宽等比缩放）；
  裸 Book 静止，触屏与减动模式不触发翻书。 */
-:root {
+:root,
+[data-q1-theme='light'],
+[data-q1-theme='dark'] {
   --q1-book-cover: var(--q1-color-bg-subtle);
   /* q1-lint-disable-next-line Q1-DS-501 书封琥珀带：装帧用色，不是语义色，故不走 token */
   --q1-book-band: oklch(0.8 0.195 73.6);
   --q1-book-sheen: none;
 }
 
-:root[data-theme='dark'] {
+:root[data-theme='dark'],
+[data-q1-theme='dark'] {
   --q1-book-cover: var(--q1-color-gray-200);
   /* q1-lint-disable Q1-DS-501 书封琥珀带与暗色微光：装帧用色；微光的白是光照模拟，不是前景色 */
   --q1-book-band: oklch(0.75 0.174 74.5);
@@ -3733,8 +3724,13 @@ a[href]:has(> .book):focus-visible {
   right: 36px;
 }
 
+/* chevron 图标框自带空白，比文字侧内边距收一档，左右视觉留白对称。 */
 .select-control__chevron {
-  right: 12px;
+  right: var(--q1-space-2-5);
+}
+
+.select-control:has(.form-control--xs) .select-control__chevron {
+  right: var(--q1-space-1-5);
 }
 
 .select-control:has(.form-control--select:disabled) .select-control__prefix,
@@ -3761,8 +3757,8 @@ a[href]:has(> .book):focus-visible {
 
 @media (hover: none), (pointer: coarse), (any-pointer: coarse) {
   .select-control .form-control--select {
-    min-height: 44px;
-    font-size: 16px;
+    min-height: var(--q1-touch-target-min);
+    font-size: var(--q1-font-size-copy-16);
   }
 }
 
@@ -3895,11 +3891,12 @@ a[href]:has(> .book):focus-visible {
   }
 }
 
+/* 粗指针下外框与分段保持 sm32/md40/lg48 视觉尺寸，纵向命中区由共享 TouchTarget 扩到 44px。 */
 @media (pointer: coarse), (any-pointer: coarse) {
-  .switch-control { height: auto; }
   .switch-control__option {
+    position: relative;
+    --touch-target-border-width: calc(var(--q1-space-1) * 0);
     min-width: var(--q1-touch-target-min);
-    min-height: var(--q1-touch-target-min);
   }
 }
 
@@ -4069,14 +4066,9 @@ a[href]:has(> .book):focus-visible {
   border-bottom-color: transparent;
 }
 
+/* 面板承载任意内容：文字样式继承所在页面，自身不加内边距；与标签栏的间距由 .tabs-root 的 gap 提供，左缘与标签栏对齐。 */
 .tabs-control__panel {
-  min-height: 96px;
   border-radius: var(--q1-radius-3);
-  color: var(--q1-color-text-secondary);
-  font-size: 14px;
-  line-height: 1.7;
-  /* 正文左缘与标签文字左缘对齐 */
-  padding: var(--q1-space-4) var(--q1-space-1);
 }
 
 .tabs-control__panel[hidden] {
@@ -4098,63 +4090,19 @@ a[href]:has(> .book):focus-visible {
   }
 }
 
-.tabs-demo__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--q1-space-2);
-  margin-top: var(--q1-space-4);
-}
-
-.tabs-demo__status {
-  margin: var(--q1-space-3) 0 0;
-  color: var(--q1-color-text-secondary);
-  font-size: var(--q1-font-size-label-13);
-  line-height: var(--q1-line-height-label-13);
-}
-
-.tabs-line-demo {
-  display: grid;
-  gap: var(--q1-space-4);
-}
-
-.tabs-line-demo__header {
-  display: grid;
-  gap: var(--q1-space-1);
-}
-
-.tabs-line-demo__title {
-  margin: 0;
-  color: var(--q1-color-text-primary);
-  font-size: var(--q1-font-size-heading-20);
-  font-weight: var(--q1-font-weight-heading-20);
-  line-height: var(--q1-line-height-heading-20);
-}
-
-.tabs-line-demo__description,
-.tabs-line-demo__section-body {
-  margin: 0;
-  color: var(--q1-color-text-secondary);
-  font-size: var(--q1-font-size-label-14);
-  line-height: var(--q1-line-height-label-14);
-}
-
-.tabs-line-demo__sections {
-  display: grid;
-  gap: var(--q1-space-6);
-}
-
-.tabs-line-demo__section {
-  display: grid;
-  gap: var(--q1-space-1);
-  scroll-margin-top: var(--q1-space-6);
-}
+/* 粗指针按输入方式而非视口宽度补足命中区（含宽于 820px 的平板横屏）：每个标签不小于触控最小尺寸，文字在标签内居中。 */
+@media (pointer: coarse), (any-pointer: coarse) {
+  .tabs-control__tab {
+    justify-content: center;
+    min-width: var(--q1-touch-target-min);
+    min-height: var(--q1-touch-target-min);
+  }
 
-.tabs-line-demo__section-title {
-  margin: 0;
-  color: var(--q1-color-text-primary);
-  font-size: var(--q1-font-size-heading-16);
-  font-weight: var(--q1-font-weight-heading-16);
-  line-height: var(--q1-line-height-heading-16);
+  /* 次级药丸以底色表达选中，去掉透明底边占位，文字在药丸内上下居中。 */
+  .tabs-control--secondary .tabs-control__tab {
+    min-height: var(--q1-touch-target-min);
+    border-bottom-width: 0;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -4217,7 +4165,7 @@ a[href]:has(> .book):focus-visible {
   height: var(--cal-field-height);
   display: flex;
   align-items: center;
-  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-border);
+  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-input-border, var(--q1-color-border-control));
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
 }
@@ -4234,17 +4182,6 @@ a[href]:has(> .book):focus-visible {
   --cal-field-height: calc(var(--q1-control-height-default) + var(--q1-space-2));
 }
 
-.cal-field__control--filled {
-  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-border-strong);
-}
-
-.cal-field__control--compact .cal-field__label {
-  max-width: 96px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .cal-field__trigger {
   display: inline-flex;
   align-items: center;
@@ -4280,7 +4217,8 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-field__caret {
-  border-left: 1px solid var(--q1-color-border);
+  border-left: calc(var(--q1-space-1) / 4) solid var(--q1-input-border, var(--q1-color-border-control));
+  border-radius: 0 var(--q1-radius-2) var(--q1-radius-2) 0;
 }
 
 .cal-field__clear:hover,
@@ -4294,14 +4232,15 @@ a[href]:has(> .book):focus-visible {
   left: 0;
   width: max-content;
   display: flex;
-  gap: var(--q1-space-6);
-  padding: var(--q1-space-4);
-  border-radius: var(--q1-radius-3);
+  gap: var(--q1-space-3);
+  padding: var(--q1-space-3);
+  border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-overlay);
   box-shadow: var(--q1-shadow-popover);
 }
 
 .cal-popover--vertical {
+  width: calc(4 * var(--q1-space-16) + var(--q1-space-6));
   flex-direction: column;
 }
 
@@ -4315,7 +4254,9 @@ a[href]:has(> .book):focus-visible {
   display: flex;
   flex-direction: column;
   gap: var(--q1-space-3);
-  min-width: 200px;
+  width: calc(4 * var(--q1-space-16));
+  max-width: 100%;
+  flex: none;
 }
 
 .cal-inputs__field {
@@ -4325,7 +4266,8 @@ a[href]:has(> .book):focus-visible {
 }
 
 .cal-inputs__label {
-  font-size: 12px;
+  font-size: var(--q1-font-size-label-12);
+  line-height: var(--q1-line-height-label-12);
   color: var(--q1-color-text-muted);
 }
 
@@ -4334,41 +4276,8 @@ a[href]:has(> .book):focus-visible {
   gap: var(--q1-space-2);
 }
 
-.cal-inputs__value {
-  flex: 1;
-  padding-block: var(--q1-space-1);
-  font-size: 13px;
-  color: var(--q1-color-text-primary);
-}
-
 .cal-inputs__apply {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--q1-space-2);
-  padding: var(--q1-space-2);
-  border: 1px solid var(--q1-color-border);
-  border-radius: var(--q1-radius-2);
-  background: var(--q1-color-bg-subtle);
-  color: var(--q1-color-text-primary);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.cal-inputs__apply:hover {
-  border-color: var(--q1-color-border-strong);
-}
-
-.cal-inputs__apply:disabled {
-  border-color: var(--q1-color-border);
-  color: var(--q1-color-text-muted);
-  cursor: not-allowed;
-}
-
-.cal-inputs__apply kbd {
-  font-family: var(--q1-font-mono);
-  font-size: 11px;
-  color: var(--q1-color-text-muted);
+  width: 100%;
 }
 
 .cal-inputs__tz {
@@ -4379,19 +4288,20 @@ a[href]:has(> .book):focus-visible {
   border: none;
   background: transparent;
   color: var(--q1-color-text-muted);
-  font-size: 12px;
+  font-size: var(--q1-font-size-label-12);
+  line-height: var(--q1-line-height-label-12);
   cursor: default;
 }
 
 /* —— 日历网格 —— */
 .calendar--large {
-  --cal-cell: 40px;
-  --cal-font: 14px;
+  --cal-cell: calc(4 * var(--q1-space-16) / 7);
+  --cal-font: var(--q1-font-size-label-14);
 }
 
 .calendar--small {
-  --cal-cell: 32px;
-  --cal-font: 13px;
+  --cal-cell: var(--q1-space-8);
+  --cal-font: var(--q1-font-size-label-13);
 }
 
 .calendar__header {
@@ -4402,7 +4312,8 @@ a[href]:has(> .book):focus-visible {
 }
 
 .calendar__month {
-  font-size: var(--cal-font);
+  font-size: var(--q1-font-size-label-14);
+  line-height: var(--q1-line-height-label-14);
   font-weight: var(--q1-font-weight-medium);
   color: var(--q1-color-text-primary);
 }
@@ -4443,8 +4354,9 @@ a[href]:has(> .book):focus-visible {
 .calendar__weekday {
   display: grid;
   place-items: center;
-  font-size: 12px;
-  color: var(--q1-color-text-muted);
+  font-size: var(--q1-font-size-label-12);
+  line-height: var(--q1-line-height-label-12);
+  color: var(--q1-color-text-secondary);
 }
 
 .calendar__grid {
@@ -4476,13 +4388,15 @@ a[href]:has(> .book):focus-visible {
   position: relative;
   display: grid;
   place-items: center;
-  width: calc(var(--cal-cell) - 6px);
-  height: calc(var(--cal-cell) - 6px);
+  width: calc(var(--cal-cell) - var(--q1-space-1-5));
+  height: calc(var(--cal-cell) - var(--q1-space-1-5));
   border: 1px solid transparent;
   border-radius: var(--q1-radius-2);
   background: transparent;
   color: var(--q1-color-text-primary);
   font-size: var(--cal-font);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-14);
   cursor: pointer;
 }
 
@@ -4536,8 +4450,9 @@ a[href]:has(> .book):focus-visible {
   align-items: center;
   gap: var(--q1-space-2);
   min-width: 180px;
-  padding: var(--q1-space-2) var(--q1-space-3);
-  border: 1px solid var(--q1-color-border);
+  /* 末尾 chevron 一侧收一档，抵消图标框自带空白。 */
+  padding: var(--q1-space-2) var(--q1-space-2-5) var(--q1-space-2) var(--q1-space-3);
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-input-border, var(--q1-color-border-control));
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-panel);
   color: var(--q1-color-text-primary);
@@ -4760,7 +4675,7 @@ a[href]:has(> .book):focus-visible {
   border-radius: var(--q1-radius-2);
 }
 
-.skeleton--pill { border-radius: 999px; }
+.skeleton--pill { border-radius: var(--q1-radius-full); }
 .skeleton--squared { border-radius: 0; }
 
 .skeleton::before,
@@ -5237,7 +5152,6 @@ a[href]:has(> .book):focus-visible {
   gap: var(--q1-space-2);
   /* 图标没有文字基线，以底边参与对齐；下移使 16px 图标中心落在正文光学中心（13/14px 正文 3px，15px 正文 2px）。 */
   --q1-note-icon-optical-y: 3px;
-  max-width: 560px;
   padding: var(--q1-space-3) var(--q1-space-4);
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-2);
@@ -5666,22 +5580,6 @@ a[href]:has(> .book):focus-visible {
   margin-top: var(--q1-space-3);
 }
 
-.error-card-retry-demo {
-  display: grid;
-  width: 100%;
-  gap: var(--q1-space-3);
-}
-
-.error-card-retry-demo > .button {
-  justify-self: center;
-}
-
-.error-card-retry-demo:focus-visible {
-  border-radius: var(--q1-radius-3);
-  outline: none;
-  box-shadow: var(--q1-shadow-focus);
-}
-
 .context-card-wrap {
   position: relative;
   display: inline-block;
@@ -6268,8 +6166,10 @@ a.context-card__trigger {
   border-color: transparent;
 }
 
-/* 聚焦型账户入口：结构固定，文案与副作用由消费方控制。 */
+/* 聚焦型账户入口：结构固定，文案与副作用由消费方控制。
+   账户入口域：颜色只取 auth 域色板，不与中性链混用。 */
 .auth-card {
+  background: var(--q1-color-auth-surface-card);
   display: grid;
   gap: 0;
   grid-template-rows: minmax(0, 1fr) auto;
@@ -6286,7 +6186,7 @@ a.context-card__trigger {
 }
 
 .auth-card__copy h1 {
-  color: var(--q1-color-text-primary);
+  color: var(--q1-color-auth-text-primary);
   font-size: var(--q1-font-size-heading-24);
   font-weight: var(--q1-font-weight-heading-24);
   letter-spacing: -0.025em;
@@ -6295,7 +6195,7 @@ a.context-card__trigger {
 }
 
 .auth-card__copy p {
-  color: var(--q1-color-text-secondary);
+  color: var(--q1-color-auth-text-secondary);
   font-size: var(--q1-font-size-copy-14);
   line-height: 1.6;
   margin-top: var(--q1-space-4);
@@ -6303,7 +6203,7 @@ a.context-card__trigger {
 }
 
 .auth-card__actions {
-  border-top: 1px solid var(--q1-color-border);
+  border-top: 1px solid var(--q1-color-auth-border-strong);
   display: grid;
   padding-top: var(--q1-space-6);
   width: 100%;
@@ -6655,9 +6555,10 @@ a.q1-card:focus-visible {
   align-items: center;
   gap: var(--q1-space-1);
   min-height: 32px;
-  padding: 0 var(--q1-space-3);
+  /* 末尾 chevron 的 16px 图标框自带约 3px 空白，结束侧收一档，左右视觉留白对称。 */
+  padding: 0 var(--q1-space-2-5) 0 var(--q1-space-3);
   border: 1px solid var(--q1-color-border);
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-panel);
   font-size: var(--q1-font-size-label-14);
   font-weight: var(--q1-font-weight-medium);
@@ -6992,7 +6893,7 @@ a.q1-card:focus-visible {
   position: relative;
   flex: none;
   display: inline-block;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-gray-400);
   border: 0;
   transform: scale(1);
@@ -7204,7 +7105,7 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-muted);
   text-align: center;
 }
-@media (pointer: coarse) {
+@media (pointer: coarse), (any-pointer: coarse) {
   .pagination__button {
     min-width: 44px;
     min-height: 44px;
@@ -7241,7 +7142,9 @@ a.q1-card:focus-visible {
   display: none;
 }
 
-/* 文档顺序导航：裸轨，无外框/背景；图标锚在标题文字块内。 */
+/* 文档顺序导航：裸轨，无外框/背景。标签与标题行贴齐所在内容列的左右边缘：
+ 链接保留内边距承载焦点环，再以等量负外边距外挂，文字不因内边距内缩；
+ 箭头与标题同处一行，朝外一侧的图标留白以负外边距抵消，使箭头笔画与标签边缘光学对齐。 */
 .docs-pagination {
   display: flex;
   flex-wrap: wrap;
@@ -7256,11 +7159,11 @@ a.q1-card:focus-visible {
   text-decoration: none;
 }
 .docs-pagination__link--prev {
-  padding-left: 28px;
+  margin-left: calc(var(--q1-space-2) * -1);
 }
 .docs-pagination__link--next {
-  padding-right: 28px;
   margin-left: auto;
+  margin-right: calc(var(--q1-space-2) * -1);
   text-align: right;
 }
 .docs-pagination__link:focus-visible {
@@ -7277,12 +7180,13 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-primary);
 }
 .docs-pagination__title-frame {
-  position: relative;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   max-width: 20em;
 }
 .docs-pagination__title {
   display: block;
+  min-width: 0;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -7292,16 +7196,17 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-primary);
 }
 .docs-pagination__chevron-slot {
-  position: absolute;
-  top: 2px;
   display: block;
+  flex: none;
   color: var(--q1-color-text-secondary);
 }
+/* 20px 箭头图标朝外一侧约 6.7px 留白，抵消 6px 后笔画与标签边缘对齐（误差小于 1px）。 */
 .docs-pagination__link--prev .docs-pagination__chevron-slot {
-  left: -26px;
+  order: -1;
+  margin-left: calc(var(--q1-space-1) * -1.5);
 }
 .docs-pagination__link--next .docs-pagination__chevron-slot {
-  right: -26px;
+  margin-right: calc(var(--q1-space-1) * -1.5);
 }
 .docs-pagination__link:hover .docs-pagination__chevron-slot {
   color: var(--q1-color-text-primary);
@@ -7314,6 +7219,14 @@ a.q1-card:focus-visible {
 .docs-pagination__slot {
   display: block;
 }
+/* 中间插槽：位于上一页与下一页之间，两侧自动留白使其居中，宽度由内容决定。 */
+.docs-pagination__middle {
+  align-self: center;
+  margin-inline: auto;
+}
+.docs-pagination__middle + .docs-pagination__link--next {
+  margin-left: 0;
+}
 .scroller {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
@@ -7481,7 +7394,7 @@ a.q1-card:focus-visible {
   margin: 0;
   padding: 0;
   border: 1px solid var(--q1-color-border);
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-panel);
 }
 .theme-switcher__option {
@@ -7489,7 +7402,7 @@ a.q1-card:focus-visible {
   place-items: center;
   width: 32px;
   height: 32px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   color: var(--q1-color-text-secondary);
   cursor: pointer;
 }
@@ -7557,14 +7470,14 @@ a.q1-card:focus-visible {
   transform: translateX(-50%);
   width: 30%;
   height: 27px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: oklch(0 0 0);
   z-index: 2;
 }
 .phone__btn {
   position: absolute;
   width: 2px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: oklch(0.32 0 0);
 }
 /* q1-lint-enable Q1-DS-501 */
@@ -7609,7 +7522,7 @@ a.q1-card:focus-visible {
   transform: translateX(-50%);
   width: 34%;
   height: 4px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-text-primary);
   z-index: 2;
 }
@@ -7942,12 +7855,12 @@ a.q1-card:focus-visible {
 }
 .slider-input::-webkit-slider-runnable-track {
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-subtle);
 }
 .slider-input::-moz-range-track {
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-subtle);
 }
 /* 竖条拇指：6×14 白色小竖条 + 定义环；action-on-primary 两主题恒白（拇指骑在 primary 填充上）。 */
@@ -8097,7 +8010,7 @@ a.q1-card:focus-visible {
   left: 0;
   right: 0;
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-bg-subtle);
   transform: translateY(-50%);
 }
@@ -8107,7 +8020,7 @@ a.q1-card:focus-visible {
   left: var(--low);
   right: calc(100% - var(--high));
   height: 8px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-action-primary);
   transform: translateY(-50%);
 }
@@ -8279,20 +8192,26 @@ a.q1-card:focus-visible {
 .split-button__icon--loading {
   visibility: hidden;
 }
-/* 变体 */
+/* 变体：default 是浅灰底 + border-strong 外框，分割线与外框同为 border-strong，在浅灰底上保持清晰；
+   secondary 是面板底 + 与 Button 次要档一致的 border 外框，分割线与外框同色同粗，强调层级低于 default。 */
 .split-button--default .split-button__primary,
 .split-button--default .split-button__toggle {
   background: var(--q1-color-bg-subtle);
 }
 .split-button--secondary .split-button__primary,
 .split-button--secondary .split-button__toggle {
+  border-color: var(--q1-color-border);
   background: var(--q1-color-bg-panel);
 }
 @media (hover: hover) and (pointer: fine) {
-  .split-button__primary:hover:not(:disabled, [aria-disabled='true']),
-  .split-button__toggle:hover:not(:disabled, [aria-disabled='true']) {
+  .split-button--default .split-button__primary:hover:not(:disabled, [aria-disabled='true']),
+  .split-button--default .split-button__toggle:hover:not(:disabled, [aria-disabled='true']) {
     background: color-mix(in srgb, var(--q1-color-text-primary) 7%, transparent);
   }
+  .split-button--secondary .split-button__primary:hover:not(:disabled, [aria-disabled='true']),
+  .split-button--secondary .split-button__toggle:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--q1-color-bg-hover);
+  }
 }
 .split-button__primary:disabled,
 .split-button__toggle:disabled {
@@ -8409,7 +8328,8 @@ a.q1-card:focus-visible {
   /* md 默认 40px，与家族刻度 sm32/md40/lg48（Input/Select/Button 同体系）一致。 */
   min-height: 40px;
   padding: 0 var(--q1-space-3);
-  border: 1px solid var(--q1-color-border-strong);
+  /* 与 Input（.form-control / .input-control）同走控件边界角色，同一表单里边框深浅一致。 */
+  border: 1px solid var(--q1-color-border-control);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-sunken);
 }
@@ -8428,6 +8348,12 @@ a.q1-card:focus-visible {
   font-size: var(--q1-font-size-copy-16);
   line-height: var(--q1-line-height-heading-16);
 }
+/* 悬停加深与 Input（.input-control:hover）同档同条件；聚焦、禁用、错误态不加深。 */
+.combobox__control:hover:not(:focus-within):not(:has(:disabled, [aria-invalid='true'])):not(.combobox--error .combobox__control):not(
+    .combobox--disabled .combobox__control
+  ) {
+  border-color: var(--q1-color-gray-800);
+}
 .combobox__control:has(.combobox__input:focus) {
   box-shadow: var(--q1-shadow-focus-input);
 }
@@ -8580,8 +8506,9 @@ a.q1-card:focus-visible {
   justify-content: space-between;
   gap: var(--q1-space-3);
   min-width: 200px;
-  padding: var(--q1-space-2) var(--q1-space-3);
-  border: 1px solid var(--q1-color-border-strong);
+  /* 末尾 chevron 一侧收一档，抵消图标框自带空白。 */
+  padding: var(--q1-space-2) var(--q1-space-2-5) var(--q1-space-2) var(--q1-space-3);
+  border: 1px solid var(--q1-color-border-control);
   border-radius: var(--q1-radius-2);
   background: var(--q1-color-bg-sunken);
   color: var(--q1-color-text-primary);
@@ -8766,13 +8693,15 @@ a.q1-card:focus-visible {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding: var(--q1-space-6) var(--q1-space-4);
+  /* 面板落在视口上部约 18% 处、不贴顶：上限 144px（1.5 × space-24），矮视口按比例收紧。 */
+  --search-dialog-offset-top: min(18vh, calc(var(--q1-space-24) * 1.5));
+  padding: var(--search-dialog-offset-top) var(--q1-space-4) var(--q1-space-4);
 }
+/* 遮罩颜色与 Modal 同源，见 overlay-surfaces.css：浅色为白纱，暗色压暗。 */
 .search-dialog__backdrop {
   position: absolute;
   inset: 0;
   border: 0;
-  background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
   cursor: default;
 }
 .search-dialog__panel {
@@ -8780,37 +8709,33 @@ a.q1-card:focus-visible {
   display: flex;
   flex-direction: column;
   width: min(640px, calc(100vw - 2 * var(--q1-space-4)));
-  max-height: calc(100dvh - 2 * var(--q1-space-6));
+  max-height: calc(100dvh - var(--search-dialog-offset-top) - var(--q1-space-4));
   overflow: hidden;
   border-radius: var(--q1-radius-4);
   background: var(--q1-color-bg-raised);
   box-shadow: var(--q1-shadow-modal);
 }
+/* 融合式输入：输入框不加描边与焦点环，和弹层头部连成一体，下方一条分隔线；
+ 焦点由插入光标与模态弹层本身表达（打开即聚焦输入框）。 */
 .search-dialog__search {
   display: flex;
   flex: none;
   align-items: center;
   gap: var(--q1-space-3);
-  padding: var(--q1-space-3) var(--q1-space-4);
+  padding: var(--q1-space-2) var(--q1-space-3) var(--q1-space-2) var(--q1-space-4);
   border-bottom: 1px solid var(--q1-color-border);
 }
 .search-dialog__field {
   display: flex;
   min-width: 0;
-  min-height: 44px;
+  min-height: var(--q1-space-10);
   flex: 1 1 auto;
   align-items: center;
-  gap: var(--q1-space-2);
-  padding-inline: var(--q1-space-3);
-  border-radius: var(--q1-radius-2);
+  gap: var(--q1-space-3);
   color: var(--q1-color-text-secondary);
 }
-.search-dialog__field:focus-within {
-  box-shadow: var(--q1-shadow-focus-input);
-}
 .search-dialog__input {
   min-width: 0;
-  min-height: 44px;
   flex: 1 1 auto;
   padding: 0;
   border: 0;
@@ -8823,18 +8748,20 @@ a.q1-card:focus-visible {
   outline: none;
   box-shadow: none;
 }
+/* 关闭入口以 Esc 键帽呈现：键盘优先、视觉更轻；粗指针下由 TouchTarget 扩展到 44px 命中区。 */
 .search-dialog__close {
-  display: grid;
-  width: 44px;
-  height: 44px;
+  position: relative;
+  display: inline-flex;
   flex: none;
-  place-items: center;
+  align-items: center;
+  padding: 0;
   border: 0;
-  border-radius: var(--q1-radius-2);
+  border-radius: var(--q1-radius-1);
   background: transparent;
   color: var(--q1-color-text-secondary);
   cursor: pointer;
   transition: transform var(--q1-duration-press) var(--q1-ease-out);
+  --touch-target-border-width: 0px;
 }
 .search-dialog__close:focus-visible,
 .search-dialog__clear:focus-visible,
@@ -8865,7 +8792,7 @@ a.q1-card:focus-visible {
   isolation: isolate;
   display: flex;
   width: 100%;
-  min-height: 44px;
+  min-height: calc(var(--q1-space-8) + var(--q1-space-1));
   flex-direction: column;
   justify-content: center;
   gap: 0;
@@ -8896,11 +8823,10 @@ a.q1-card:focus-visible {
   background: var(--q1-color-bg-subtle);
 }
 @media (hover: hover) and (pointer: fine) {
-  .search-dialog__close:hover,
   .search-dialog__clear:hover {
     background: var(--q1-color-bg-subtle);
   }
-  .search-dialog__close:hover {
+  .search-dialog__close:hover .q1-kbd {
     color: var(--q1-color-text-primary);
   }
   .search-dialog__body[data-search-dialog-pointer-navigation='true'] .search-dialog__option:hover:not(:disabled) {
@@ -8926,6 +8852,20 @@ a.q1-card:focus-visible {
   font-size: var(--q1-font-size-label-13);
   line-height: var(--q1-line-height-label-13);
 }
+/* 当前项：右侧勾选标记，与键盘活动项的底色高亮相互独立；标记不进入可访问名称，语义由 aria-current 提供。 */
+.search-dialog__option[aria-current] {
+  padding-inline-end: calc(var(--q1-space-2) + var(--q1-space-4) + var(--q1-space-2));
+}
+.search-dialog__option-current {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  right: var(--q1-space-2);
+  width: var(--q1-space-4);
+  height: var(--q1-space-4);
+  color: var(--q1-color-text-primary);
+  translate: 0 -50%;
+}
 .search-dialog__empty {
   display: grid;
   justify-items: center;
@@ -8948,12 +8888,17 @@ a.q1-card:focus-visible {
   cursor: pointer;
   transition: transform var(--q1-duration-press) var(--q1-ease-out);
 }
+/* 粗指针：输入行与结果行回到 44px 触控高度。 */
+@media (pointer: coarse), (any-pointer: coarse) {
+  .search-dialog__field,
+  .search-dialog__option {
+    min-height: var(--q1-touch-target-min);
+  }
+}
+/* 窄屏：软键盘会占去下半屏，面板贴近顶部，把高度留给结果列表。 */
 @media (max-width: 480px) {
   .search-dialog {
-    padding: var(--q1-space-4);
-  }
-  .search-dialog__panel {
-    max-height: calc(100dvh - 2 * var(--q1-space-4));
+    --search-dialog-offset-top: var(--q1-space-4);
   }
   .search-dialog__trigger-control {
     min-width: 44px;
@@ -9013,25 +8958,15 @@ a.q1-card:focus-visible {
   color: var(--q1-color-text-muted);
   background: transparent;
 }
-.modal-btn--primary {
-  border-color: var(--q1-color-action-primary);
-  background: var(--q1-color-action-primary);
-  color: var(--q1-color-action-on-primary);
-}
-.modal-btn--primary:hover {
-  background: var(--q1-color-action-primary-hover, var(--q1-color-action-primary));
-}
 /* 禁用主按钮。这是实心 CTA 按钮，
  沿用 Input/Select 已建立的「底色抬灰」表单控件禁用配方，而非 Radio 的描边控件配方——
  gray-500 实底配 bg-canvas 字在暗色主题对比度不足，bg-subtle + text-muted 双主题都可读。 */
-.modal-btn--primary:disabled,
 .modal-btn--danger:disabled {
   border-color: var(--q1-color-border);
   background: var(--q1-color-bg-subtle);
   color: var(--q1-color-text-muted);
   cursor: not-allowed;
 }
-.modal-btn--primary:disabled:hover,
 .modal-btn--danger:disabled:hover {
   background: var(--q1-color-bg-subtle);
 }
@@ -9250,7 +9185,7 @@ a.q1-card:focus-visible {
 .drawer__grabber {
   width: 36px;
   height: 4px;
-  border-radius: 999px;
+  border-radius: var(--q1-radius-full);
   background: var(--q1-color-border-strong);
 }
 .drawer__title {
@@ -9847,12 +9782,14 @@ a.q1-card:focus-visible {
   padding: 0 var(--q1-space-2);
 }
 
+/* 分区标题比条目小一档、加粗，并取主文字色：条目默认为次级文字色，标题若同为次级色，
+ 层级只剩字重差，扫读时容易和条目混在一起。 */
 .q1-navigation__section-heading {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   margin: 0;
-  color: var(--q1-color-text-secondary);
+  color: var(--q1-color-text-primary);
   font-size: var(--q1-font-size-label-13);
   font-weight: var(--q1-font-weight-semibold);
   line-height: var(--q1-line-height-label-13);
@@ -9945,7 +9882,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   width: 16px;
   height: 16px;
   stroke: currentColor;
-  stroke-width: 1.8;
+  stroke-width: 2;
   translate: 0 var(--q1-optical-icon-shift-cjk-label);
 }
 
@@ -10175,7 +10112,8 @@ a.q1-navigation__item[aria-disabled='true'] {
   border: 1px solid var(--q1-color-border);
   border-radius: var(--q1-radius-3);
   background: var(--q1-color-bg-panel);
-  padding: var(--q1-space-1) var(--q1-space-2);
+  /* 末尾 chevron 一侧收一档，抵消图标框自带空白。 */
+  padding: var(--q1-space-1) var(--q1-space-1) var(--q1-space-1) var(--q1-space-2);
   color: var(--q1-color-text-primary);
   font: inherit;
   text-align: start;
@@ -10825,12 +10763,6 @@ a.q1-navigation__item[aria-disabled='true'] {
   display: block;
   margin-left: 0.4em;
 }
-.json-view-boundary-stack {
-  display: grid;
-  min-width: 0;
-  gap: var(--q1-space-3);
-}
-
 @media (pointer: coarse), (any-pointer: coarse) {
   .q1-json-view__summary {
     box-sizing: border-box;
@@ -11132,8 +11064,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   .search-dialog__input:focus-visible,
   .command-palette .command-palette__search input:focus,
   .control-option:has(input:focus-visible) .control-option__visual,
-  .theme-switcher__option:has(input:focus-visible),
-  .radio-headless-card:has(input:focus-visible) {
+  .theme-switcher__option:has(input:focus-visible) {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
@@ -11343,7 +11274,6 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 .cal-field__clear:focus-visible,
 .cal-field__caret:focus-visible,
-.cal-inputs__apply:focus-visible,
 .cal-period__option:focus-visible {
   outline: none;
   box-shadow: var(--q1-shadow-focus);
@@ -11374,6 +11304,26 @@ a.q1-navigation__item[aria-disabled='true'] {
   font-weight: var(--q1-font-weight-medium);
 }
 
+.calendar {
+  flex: none;
+}
+
+.cal-popover--vertical > .calendar {
+  align-self: center;
+}
+
+.cal-popover--vertical > .calendar--large {
+  width: 100%;
+}
+
+.cal-popover--vertical .calendar--large .calendar__grid {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.cal-popover--vertical .calendar--large .calendar__cell {
+  width: 100%;
+}
+
 .cal-popover {
   box-sizing: border-box;
   max-width: calc(100vw - var(--q1-space-2));
@@ -11443,6 +11393,10 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (pointer: coarse), (any-pointer: coarse) {
+  .cal-popover--vertical {
+    width: calc(7 * var(--q1-touch-target-min) + 2 * var(--q1-space-3));
+  }
+
   .cal-inputs__apply,
   .cal-period__trigger,
   .cal-period__option {
@@ -11467,21 +11421,94 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
-/* 时间输入复用 Input 的 .form-control 皮肤与 sm 高度档；宽度按 HH:mm 五个等宽字符加左右内边距。 */
+.cal-field__control:has(.cal-field__trigger[aria-invalid='true']:not(:disabled)) {
+  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-status-danger);
+}
+
+.cal-field__clear:disabled {
+  color: var(--q1-color-text-muted);
+  cursor: not-allowed;
+}
+
+.sheet__panel:has(.cal-sheet) {
+  overflow-y: auto;
+}
+
+.sheet__panel:has(.cal-sheet) > .sheet__body {
+  flex: none;
+  overflow: visible;
+  padding: var(--q1-space-2);
+}
+
+.cal-sheet {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--q1-space-4);
+}
+
+.cal-field__control:has(.cal-field__trigger[aria-invalid='true']:not(:disabled)):focus-within {
+  box-shadow: var(--q1-shadow-focus-input-danger);
+}
+
+/* 日期与时间复用 Input 的 sm 档，日期填满时间框以外的行宽。 */
 .cal-time-input {
   flex: none;
-  width: calc(6ch + 2 * var(--q1-space-3));
+  width: calc(var(--q1-space-16) + var(--q1-space-6));
   font-variant-numeric: tabular-nums;
 }
 @media (pointer: coarse), (any-pointer: coarse) {
   .cal-time-input { min-height: var(--q1-touch-target-min); font-size: var(--q1-font-size-copy-16); }
 }
 
-/* Calendar 触发器：与 Select 一样铺满所在列，长值截断；禁用态对齐 Select（浅灰底、弱边界、弱化文字）。 */
+.cal-date-input {
+  flex: 1;
+  min-width: 0;
+  width: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.cal-inputs__error {
+  color: var(--q1-color-status-danger);
+  font-size: var(--q1-font-size-label-12);
+  line-height: var(--q1-line-height-label-12);
+}
+
+.cal-inputs__timezone .form-field {
+  width: 100%;
+}
+
+.cal-inputs__timezone .form-control--select {
+  color: var(--q1-color-text-secondary);
+}
+
+@media (pointer: coarse), (any-pointer: coarse) {
+  .cal-date-input {
+    min-height: var(--q1-touch-target-min);
+    font-size: var(--q1-font-size-copy-16);
+  }
+}
+
+/* 与 Input 共用静息描边；宽度由现有控制高度和间距刻度组合。 */
+.cal-field {
+  min-width: min(100%, calc(6 * var(--q1-control-height-default) + var(--q1-space-2)));
+}
+
+.cal-field__control:not(.cal-field__control--filled) .cal-field__trigger {
+  color: var(--q1-color-text-muted);
+}
+
 .cal-field__trigger {
   min-width: 0;
+  border-radius: inherit;
 }
 
+.cal-field__control--compact .cal-field__trigger {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+
 .cal-field__label {
   min-width: 0;
   overflow: hidden;
@@ -11500,6 +11527,96 @@ a.q1-navigation__item[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
+/* 复用 Input 的共用外框与内部分隔线，以及 SplitButton 的外侧圆角和焦点层级。 */
+.cal-field-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  width: calc(12 * var(--q1-control-height-default) + 2 * var(--q1-space-2));
+  max-width: 100%;
+  border-radius: var(--q1-radius-2);
+  background: var(--q1-color-bg-panel);
+  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-input-border, var(--q1-color-border-control));
+}
+
+.cal-field-group--stacked {
+  grid-template-columns: minmax(0, 1fr);
+  width: calc(6 * var(--q1-control-height-default) + var(--q1-space-2));
+}
+
+.cal-field-group > .cal-period,
+.cal-field-group > .cal-field {
+  min-width: 0;
+}
+
+.cal-field-group > .cal-period:focus-within,
+.cal-field-group > .cal-field:focus-within {
+  z-index: 1;
+}
+
+.cal-field-group > .cal-period > .cal-period__trigger {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: var(--q1-control-height-default);
+  border: 0;
+  border-inline-end: calc(var(--q1-space-1) / 4) solid var(--q1-input-border, var(--q1-color-border-control));
+  border-radius: var(--q1-radius-2) 0 0 var(--q1-radius-2);
+  background: transparent;
+  color: var(--q1-color-text-muted);
+}
+
+.cal-field-group > .cal-field > .cal-field__control {
+  box-shadow: none;
+  background: transparent;
+  border-radius: 0 var(--q1-radius-2) var(--q1-radius-2) 0;
+}
+
+.cal-field-group--stacked > .cal-period > .cal-period__trigger {
+  border-inline-end: 0;
+  border-block-end: calc(var(--q1-space-1) / 4) solid var(--q1-input-border, var(--q1-color-border-control));
+  border-radius: var(--q1-radius-2) var(--q1-radius-2) 0 0;
+}
+
+.cal-field-group--stacked > .cal-field > .cal-field__control {
+  border-radius: 0 0 var(--q1-radius-2) var(--q1-radius-2);
+}
+
+.cal-field-group > .cal-field > .cal-field__control:has(:focus-visible) {
+  box-shadow: var(--q1-shadow-focus-input);
+}
+
+.cal-field-group .cal-field__trigger:focus-visible,
+.cal-field-group .cal-field__caret:focus-visible,
+.cal-field-group .cal-field__clear:focus-visible {
+  box-shadow: none;
+  border-radius: inherit;
+}
+
+.cal-field-group .cal-field__control--compact .cal-field__trigger:focus-visible {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.cal-field-group--small .cal-field__control {
+  --cal-field-height: var(--q1-space-8);
+}
+
+.cal-field-group--small > .cal-period > .cal-period__trigger {
+  min-height: var(--q1-space-8);
+  padding-block: 0;
+}
+
+@media (hover: none), (pointer: coarse), (any-pointer: coarse) {
+  .cal-field-group--small .cal-field__control {
+    --cal-field-height: var(--q1-touch-target-min);
+  }
+
+  .cal-field-group > .cal-period > .cal-period__trigger {
+    min-height: var(--q1-touch-target-min);
+  }
+}
+
 @media (max-width: 40rem) {
   .sheet__panel.sheet__panel--mobile-fullscreen {
     inset: 0;
@@ -13103,7 +13220,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (pointer: coarse), (any-pointer: coarse) {
-  :where(:is(.button, .copy-button, .menu__trigger, .dots-menu__trigger, .description__hint, .description__hint-close, .theme-switch button, .twc__copy, .docs-navigation-full-link, .docs-sidebar-options, .docs-mobile-navigation__trigger, a.sidebar__link):has(.q1-touch-target)) {
+  :where(:is(.button, .copy-button, .menu__trigger, .dots-menu__trigger, .description__hint, .description__hint-close, .twc__copy):has(.q1-touch-target)) {
     position: relative;
   }
 
@@ -13112,7 +13229,7 @@ a.q1-navigation__item[aria-disabled='true'] {
     --touch-target-border-width: calc(var(--q1-space-1) / 4);
   }
 
-  :where(.dots-menu__trigger, .description__hint, .description__hint-close, .theme-switch button, .twc__copy, .docs-navigation-full-link, .docs-sidebar-options, .docs-mobile-navigation__trigger, a.sidebar__link) {
+  :where(.dots-menu__trigger, .description__hint, .description__hint-close, .twc__copy) {
     --touch-target-border-width: 0px;
   }
 
@@ -13135,6 +13252,62 @@ a.q1-navigation__item[aria-disabled='true'] {
   }
 }
 
+.q1-corner-anchor {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.corner-remove-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  --touch-target-border-width: calc(var(--q1-space-1) / 4);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: var(--q1-space-6);
+  height: var(--q1-space-6);
+  padding: 0;
+  border: calc(var(--q1-space-1) / 4) solid var(--q1-color-border-overlay);
+  border-radius: var(--q1-radius-full);
+  background: var(--q1-color-bg-overlay);
+  color: var(--q1-color-text-primary);
+  box-shadow: var(--q1-shadow-popover);
+  cursor: pointer;
+}
+
+/* 圆周 45°：距外框两边均为 (1 - 1 / √2) / 2。 */
+.q1-corner-anchor--round > .corner-remove-button {
+  top: calc(50% - 50% / sqrt(2));
+  right: calc(50% - 50% / sqrt(2));
+}
+
+.corner-remove-button > svg {
+  width: var(--q1-space-4);
+  height: var(--q1-space-4);
+  pointer-events: none;
+}
+
+.corner-remove-button:focus-visible {
+  outline: calc(var(--q1-space-1) / 2) solid var(--q1-color-focus);
+  outline-offset: var(--q1-space-1);
+  box-shadow: var(--q1-shadow-focus), var(--q1-shadow-popover);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .corner-remove-button:hover:not(:disabled) {
+    background: var(--q1-color-bg-hover);
+  }
+}
+
+.corner-remove-button:disabled {
+  cursor: not-allowed;
+  color: var(--q1-color-text-muted);
+}
+
 /* Private geometry derives from existing spacing; no new consumer token surface. */
 .control-option.checkbox-circle {
   --checkbox-circle-diameter: calc(var(--q1-space-4) + var(--q1-space-1) / 2);
@@ -13320,8 +13493,10 @@ a.q1-navigation__item[aria-disabled='true'] {
   cursor: pointer;
   transition: color var(--q1-duration-fast);
 }
-.filter-chip__clear { flex-shrink: 0; width: var(--q1-space-6); padding: 0; margin-inline-start: var(--q1-space-1); }
+.filter-chip__clear { flex-shrink: 0; width: var(--q1-space-6); padding: 0; margin-inline-start: var(--q1-space-1-5); }
 .filter-chip__clear + .filter-chip__picker { padding-inline-start: var(--q1-space-1); }
+/* 已设值时末尾是 chevron：结束侧收一档，抵消图标框自带空白；起始侧的清除按钮同理多留半档。 */
+.filter-chip--set .filter-chip__picker { padding-inline-end: var(--q1-space-2); }
 .filter-chip svg, .filter-chip__label, .filter-chip__separator { flex-shrink: 0; }
 .filter-chip svg { color: var(--q1-color-text-secondary); transition: color var(--q1-duration-fast); }
 .filter-chip__separator {
@@ -13366,6 +13541,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 /* lg 高 48：短文案时横向内边距随档放宽，避免胶囊被压成近正圆。 */
 .filter-chip--lg .filter-chip__picker { padding-inline: var(--q1-space-3); }
 .filter-chip--lg .filter-chip__clear + .filter-chip__picker { padding-inline-start: var(--q1-space-1); }
+.filter-chip--lg.filter-chip--set .filter-chip__picker { padding-inline-end: var(--q1-space-2-5); }
 
 .popover-trigger { display: inline-flex; }
 .popover-panel {
@@ -13481,6 +13657,117 @@ a.q1-navigation__item[aria-disabled='true'] {
   .toggle-group { gap: var(--q1-space-4); padding: var(--q1-space-2); }
 }
 
+/* Region Error State：区块加载失败的原地错误态。中性表面，危险色只落在图标上；标题与说明沿用正文色阶。
+   根节点是宽度容器：inline 版在容器变窄时把重试按钮折到说明下方，按卡片实际宽度而非视口判断。 */
+.region-error-state {
+  container: region-error-state / inline-size;
+}
+
+.region-error-state__status {
+  display: flex;
+  min-width: 0;
+}
+
+.region-error-state__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--q1-color-status-danger);
+}
+
+.region-error-state__body {
+  min-width: 0;
+}
+
+.region-error-state__title,
+.region-error-state__description {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.region-error-state__title {
+  color: var(--q1-color-text-primary);
+}
+
+.region-error-state__description {
+  font-size: var(--q1-font-size-label-14);
+  font-weight: var(--q1-font-weight-regular);
+  line-height: var(--q1-line-height-label-14);
+  color: var(--q1-color-text-secondary);
+}
+
+/* center：表格主体与大区块的居中占位。上下留白取 space-16，连同内容约等于五行表格的高度，
+   宿主保留表头时表格不塌缩。 */
+.region-error-state--center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--q1-space-4);
+  padding: var(--q1-space-16) var(--q1-space-6);
+  text-align: center;
+}
+
+.region-error-state--center .region-error-state__status {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--q1-space-3);
+  max-width: 32em;
+}
+
+.region-error-state--center .region-error-state__icon {
+  width: var(--q1-space-10);
+  height: var(--q1-space-10);
+  border-radius: var(--q1-radius-3);
+  background: var(--q1-color-bg-subtle);
+}
+
+.region-error-state--center .region-error-state__title {
+  font-size: var(--q1-font-size-heading-16);
+  font-weight: var(--q1-font-weight-heading-16);
+  line-height: var(--q1-line-height-heading-16);
+}
+
+.region-error-state--center .region-error-state__description {
+  margin-top: var(--q1-space-1);
+}
+
+/* inline：卡片与页面分区里的紧凑行。小号图标与标题首行同高居中；重试在行尾，容器变窄时折到说明下方。 */
+.region-error-state--inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--q1-space-3) var(--q1-space-4);
+}
+
+.region-error-state--inline .region-error-state__status {
+  flex: 1 1 0;
+  align-items: flex-start;
+  gap: var(--q1-space-3);
+}
+
+.region-error-state--inline .region-error-state__icon {
+  width: var(--q1-space-4);
+  height: var(--q1-line-height-heading-14);
+}
+
+.region-error-state--inline .region-error-state__title {
+  font-size: var(--q1-font-size-heading-14);
+  font-weight: var(--q1-font-weight-heading-14);
+  line-height: var(--q1-line-height-heading-14);
+}
+
+.region-error-state--inline .region-error-state__actions {
+  flex: none;
+}
+
+@container region-error-state (max-width: 30rem) {
+  .region-error-state--inline .region-error-state__actions {
+    flex-basis: 100%;
+    padding-inline-start: calc(var(--q1-space-4) + var(--q1-space-3));
+  }
+}
+
 .hover-card-trigger { display: inline-flex; }
 .hover-card {
   max-width: min(calc(100vw - var(--q1-space-6)), calc(var(--q1-space-8) * 9));
@@ -13891,16 +14178,18 @@ a.q1-navigation__item[aria-disabled='true'] {
 /* 浅色白纱保留底层可读性；暗色沿用各浮层既有压暗强度。 */
 .modal__backdrop,
 .drawer__backdrop,
-.sheet__backdrop {
+.sheet__backdrop,
+.search-dialog__backdrop {
   background: color-mix(in srgb, var(--q1-color-gray-100) 80%, transparent);
 }
 
-[data-theme='dark'] .modal__backdrop,
-[data-theme='dark'] .sheet__backdrop {
+:is([data-theme='dark'], [data-q1-theme='dark']) .modal__backdrop:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is([data-theme='dark'], [data-q1-theme='dark']) .sheet__backdrop:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is([data-theme='dark'], [data-q1-theme='dark']) .search-dialog__backdrop:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: color-mix(in srgb, var(--q1-color-shadow) 45%, transparent);
 }
 
-[data-theme='dark'] .drawer__backdrop {
+:is([data-theme='dark'], [data-q1-theme='dark']) .drawer__backdrop:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: color-mix(in srgb, var(--q1-color-shadow) 28%, transparent);
 }
 
@@ -14066,25 +14355,25 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 /* Form boundaries and brand graphics: owner-approved dark/mobile audit roles.
    Checkbox Circle keeps its own tone stroke (status-* / text-muted), so it is excluded here. */
-:root[data-theme='dark'] :is(
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
   .form-control:not(.input-control .form-control):not(.textarea-control .form-control):not(:disabled):not([aria-invalid='true']):not(.form-field--error .form-control),
   .input-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .input-control),
   .textarea-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .textarea-control)
-) {
+):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-input-border, var(--q1-color-border-control));
 }
 
-:root[data-theme='dark'] :is(
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
   .form-control:not(.input-control .form-control):not(.textarea-control .form-control):not(:disabled):not([aria-invalid='true']):not(.form-field--error .form-control):focus,
   .input-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .input-control):focus-within
-) {
+):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-input-border-focus, var(--q1-input-border, var(--q1-color-border-control)));
 }
 
-:root[data-theme='dark'] :is(
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
   .combobox__control:not(:has(:disabled, [aria-invalid='true'])),
+  .multi-select__trigger:not(:disabled),
   .composer__box:not(:has(textarea:disabled)),
-  .cal-period__trigger,
   .feedback__select:not(:disabled),
   .feedback__textarea:not(:disabled),
   .range-slider__number:not(:disabled),
@@ -14092,12 +14381,11 @@ a.q1-navigation__item[aria-disabled='true'] {
   .choicebox:not(:has(:checked, :disabled)),
   .choicebox:not(:has(:checked, :disabled)) .choicebox__indicator,
   .control-option:not(.checkbox-circle):has(input:not(:checked):not(:indeterminate):not(:disabled)) .control-option__visual
-) {
+):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-color-border-control);
 }
 
-/* 亮色 OTP 格子、时段触发器、Choicebox 未选中卡同样走控件边界角色，不再用 8% 黑分隔线。 */
-.cal-period__trigger,
+/* 亮色 OTP 格子、Choicebox 未选中卡同样走控件边界角色，不再用 8% 黑分隔线。 */
 .q1-verification-code:not(:has(:disabled, [aria-invalid='true'])) .q1-verification-code__slot,
 .choicebox:not(:has(:checked, :disabled)) {
   border-color: var(--q1-color-border-control);
@@ -14113,26 +14401,23 @@ a.q1-navigation__item[aria-disabled='true'] {
 .textarea-control:has(.form-control:disabled):not(:has([aria-invalid='true'])):not(.form-field--error .textarea-control),
 .feedback__select:disabled,
 .feedback__textarea:disabled,
-.range-slider__number:disabled {
+.range-slider__number:disabled,
+.multi-select__trigger:disabled {
   border-color: var(--q1-color-border);
 }
 
-:root[data-theme='dark'] .cal-field__control {
-  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-border-control);
-}
-
 @media (hover: hover) and (pointer: fine) {
-  :root[data-theme='dark'] :is(
+  :is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
     .form-control:not(.input-control .form-control):not(.textarea-control .form-control):not(:disabled):not([aria-invalid='true']):not(.form-field--error .form-control),
     .input-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .input-control),
     .textarea-control:not(:has(:disabled, [aria-invalid='true'])):not(.form-field--error .textarea-control),
     .combobox__control:not(:has(:disabled, [aria-invalid='true'])),
     .choicebox:not(:has(:checked, :disabled))
-  ):hover:not(:focus-within) {
+  ):hover:not(:focus-within):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
     border-color: var(--q1-color-gray-700);
   }
 
-  :root[data-theme='dark'] .control-option:not(.checkbox-circle):has(input:not(:checked):not(:indeterminate):not(:disabled)):hover .control-option__visual {
+  :is(:root[data-theme='dark'], [data-q1-theme='dark']) .control-option:not(.checkbox-circle):has(input:not(:checked):not(:indeterminate):not(:disabled)):hover .control-option__visual:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
     border-color: var(--q1-color-text-secondary);
   }
 }
@@ -14142,25 +14427,25 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 @media (hover: hover) and (pointer: fine) {
-  :root[data-theme='dark'] .toggle-field[aria-checked='true']:hover:not(:disabled) .toggle {
+  :is(:root[data-theme='dark'], [data-q1-theme='dark']) .toggle-field[aria-checked='true']:hover:not(:disabled) .toggle:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
     background: var(--toggle-on, var(--q1-color-primary-1000));
   }
 }
 
-:root[data-theme='dark'] .slider-input:not(.range-slider__thumb):not(:disabled)::-webkit-slider-runnable-track,
-:root[data-theme='dark'] .range-slider:not(.range-slider--disabled) .range-slider__rail {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .slider-input:not(.range-slider__thumb):not(:disabled):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *))::-webkit-slider-runnable-track,
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .range-slider:not(.range-slider--disabled) .range-slider__rail:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: var(--q1-color-border-control);
 }
 
-:root[data-theme='dark'] .slider-input:not(.range-slider__thumb):not(:disabled)::-moz-range-track {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .slider-input:not(.range-slider__thumb):not(:disabled):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *))::-moz-range-track {
   background: var(--q1-color-border-control);
 }
 
-:root[data-theme='dark'] .slider-input--filled:not(.range-slider__thumb):not(:disabled)::-webkit-slider-runnable-track {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .slider-input--filled:not(.range-slider__thumb):not(:disabled):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *))::-webkit-slider-runnable-track {
   background: linear-gradient(to right, var(--q1-color-accent-graphic) var(--slider-pct), var(--q1-color-border-control) var(--slider-pct));
 }
 
-:root[data-theme='dark'] .slider-input--filled:not(.range-slider__thumb):not(:disabled)::-moz-range-track {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .slider-input--filled:not(.range-slider__thumb):not(:disabled):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *))::-moz-range-track {
   background: linear-gradient(to right, var(--q1-color-accent-graphic) var(--slider-pct), var(--q1-color-border-control) var(--slider-pct));
 }
 
@@ -14174,16 +14459,16 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 /* 暗色表面抬升：亮色下靠恒深底色或投影成立的轮廓，暗色下与底色同色而消失。
-   只在 :root[data-theme='dark'] 分支改，亮色外观不变；统一走面板底色 + 1px hairline。 */
+   只在暗色分支（页面暗色或 data-q1-theme="dark" 子树）改，亮色外观不变；统一走面板底色 + 1px hairline。 */
 
 /* 无框卡片：亮色靠投影浮起；暗色投影不可见，补 hairline 保住卡片边界。 */
-:root[data-theme='dark'] .q1-card--borderless {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .q1-card--borderless:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-color-border);
 }
 
 /* +N 收纳芯片与页顶公告药丸：恒深底色在暗色画布上与底同色，改面板底 + hairline + 主文字色。 */
-:root[data-theme='dark'] .avatar--overflow,
-:root[data-theme='dark'] .banner__cta {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .avatar--overflow:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .banner__cta:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border: 1px solid var(--q1-color-border);
   background: var(--q1-color-bg-panel);
   color: var(--q1-color-text-primary);
@@ -14191,31 +14476,31 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 @media (hover: hover) and (pointer: fine) {
   /* 悬停与同族 .banner__action 一致：底色换 bg-subtle。 */
-  :root[data-theme='dark'] .banner__cta:hover {
+  :is(:root[data-theme='dark'], [data-q1-theme='dark']) .banner__cta:hover:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
     background: var(--q1-color-bg-subtle);
   }
 }
 
 /* Badge Pill：亮色 background-200 是近白浅底，暗色同一 token 翻成纯黑，在面板上成黑块；改面板底色；
    :where 把特异性压回基础规则，悬停/按下态照常覆盖。 */
-:where(:root[data-theme='dark']) .badge__pill-visual {
+:where(:root[data-theme='dark'], [data-q1-theme='dark']) .badge__pill-visual:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: var(--q1-color-bg-panel);
 }
 
 /* Filter Chip：暗色 bg-canvas 比示例面板更深，成黑块；改面板底色（同上用 :where 保留悬停态）。 */
-:where(:root[data-theme='dark']) .filter-chip {
+:where(:root[data-theme='dark'], [data-q1-theme='dark']) .filter-chip:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: var(--q1-color-bg-panel);
 }
 
 /* 虚线占位（Filter Chip 未设值、Context Menu 触发区）：暗色 border-strong 与面板仅约 1.4:1，
    先用 text-muted 拉到 ≥ 3:1；border-strong 取值定案后再统一回归。 */
-:root[data-theme='dark'] .filter-chip:not(.filter-chip--set):not([data-disabled]),
-:root[data-theme='dark'] .context-menu__area {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .filter-chip:not(.filter-chip--set):not([data-disabled]):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)),
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .context-menu__area:not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-color-text-muted);
 }
 
 /* Multi Select 未选中勾选框：暗色 border-strong 落在浮层底上约 1.1:1；改控件边界角色 border-control。 */
-:root[data-theme='dark'] .multi-select__check:not(.multi-select__check--on) {
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) .multi-select__check:not(.multi-select__check--on):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   border-color: var(--q1-color-border-control);
 }
 
@@ -14247,13 +14532,13 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 
 /* 暗色选中浅底：bg-subtle 在暗色是 gray-50，比面板更深，改用抬升一档的 bg-raised，覆盖上面全部选中态。 */
-:root[data-theme='dark'] :is(
+:is(:root[data-theme='dark'], [data-q1-theme='dark']) :is(
   .choicebox:has(.choicebox__input:checked:not(:disabled)),
   .pagination__button--current:not(:disabled, [aria-disabled='true']),
   .toggle-group__item[aria-pressed='true']:not(:focus-visible),
   .switch-control__option[aria-checked='true']:not(:focus-visible) .switch-control__visual,
   .page-feedback__option[aria-pressed='true']:not(:focus-visible),
   .q1-json-view__row--highlight
-) {
+):not(:where([data-q1-theme='light'], [data-q1-theme='light'] *)) {
   background: var(--q1-color-bg-raised);
 }