@icen.ai/ui 0.10.0 → 0.11.0

package/dist/components/datatable.css

@@ -23,11 +23,11 @@
  */
 
 .icen-datatable {
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-lg);
+  border: 1px solid var(--icen-token-separator-soft);
+  border-radius: var(--icen-control-radius-lg);
   background: var(--icen-token-surface);
   overflow: hidden;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
 }
 
 /* ── 工具栏（搜索） ── */
@@ -35,22 +35,24 @@
   display: flex;
   align-items: center;
   gap: var(--icen-density-space-sm);
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  min-block-size: 44px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-dt-search {
   display: flex;
   align-items: center;
-  gap: 8px;
-  height: 32px;
-  width: 260px;
+  gap: 7px;
+  height: 30px;
+  width: 240px;
   max-width: 100%;
-  padding: 0 10px;
-  color: var(--icen-token-text-faint);
+  padding: 0 var(--icen-field-padding-inline-sm);
+  color: var(--icen-token-text-muted);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
 .icen-dt-search:focus-within {
@@ -79,11 +81,11 @@
 .icen-dt-row {
   display: grid;
   align-items: center;
-  border-bottom: 1px solid var(--icen-token-line-soft);
+  border-bottom: 1px solid var(--icen-token-separator-soft);
   transition: background var(--icen-tx-fast);
 }
 .icen-dt-body .icen-dt-row:last-child { border-bottom: 0; }
-.icen-dt-body .icen-dt-row:hover { background: var(--icen-token-fill-1); }
+.icen-dt-body .icen-dt-row:hover { background: var(--icen-token-fill-hover); }
 
 /* 行内次要动作（columns.render 产出 .icen-dt-actions）：隐式待命，行悬停/聚焦显现；
    触屏常显；按钮本体 26px 视觉 + 触屏隐形 44px 命中 */
@@ -122,18 +124,18 @@
     margin: -9px;
   }
 }
-.icen-dt-row.is-selected { background: var(--icen-token-accent-subtle); }
-.icen-dt-row.is-selected:hover { background: color-mix(in srgb, var(--icen-token-accent-subtle) 82%, var(--icen-token-fill-1)); }
+.icen-dt-row.is-selected { background: var(--icen-token-fill-selected); }
+.icen-dt-row.is-selected:hover { background: color-mix(in srgb, var(--icen-token-fill-selected) 82%, var(--icen-token-fill-hover)); }
 .icen-dt-row.is-clickable { cursor: pointer; }
 .icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected) {
-  background: color-mix(in srgb, var(--icen-token-fill-1) 55%, transparent);
+  background: color-mix(in srgb, var(--icen-token-fill-hover) 55%, transparent);
 }
 .icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected):hover {
-  background: var(--icen-token-fill-1);
+  background: var(--icen-token-fill-hover);
 }
 
 .icen-dt-cell {
-  padding: 0 12px;
+  padding: 0 10px;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -141,8 +143,8 @@
   color: var(--icen-token-text);
   display: flex;
   align-items: center;
-  gap: 8px;
-  min-height: 44px;
+  gap: 6px;
+  min-height: 32px;
 }
 .icen-datatable--virtual .icen-dt-cell { min-height: 0; height: 100%; }
 .icen-dt-cell[data-icen-align='center'] { justify-content: center; text-align: center; }
@@ -150,9 +152,9 @@
 .icen-dt-cell--check, .icen-dt-cell--expand { justify-content: center; padding: 0 4px; }
 
 /* ── 表头 ── */
-.icen-dt-head { border-bottom: 1px solid var(--icen-token-line-soft); }
+.icen-dt-head { border-bottom: 1px solid var(--icen-token-separator); }
 .icen-dt-row--head {
-  background: var(--icen-token-bg-soft);
+  background: var(--icen-token-surface-chrome);
   border-bottom: 0;
 }
 .icen-datatable--virtual .icen-dt-row--head {
@@ -162,9 +164,10 @@
 }
 .icen-dt-cell--head {
   position: relative;
-  min-height: 40px;
-  font-size: var(--icen-density-font-size-sm);
+  min-height: 30px;
+  font-size: var(--icen-font-size-caption);
   font-weight: 600;
+  letter-spacing: var(--icen-letter-spacing-caption);
   color: var(--icen-token-text-muted);
   user-select: none;
 }
@@ -206,11 +209,11 @@
   z-index: var(--icen-z-popover);
   min-width: 168px;
   max-width: 240px;
-  padding: 4px;
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-overlay);
+  padding: var(--icen-density-space-xs);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
   font-weight: 400;
   animation: icen-pop-in var(--icen-tx-fast);
 }
@@ -223,14 +226,15 @@
 .icen-dt-filter-item {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: var(--icen-radius-sm);
-  font-size: var(--icen-density-font-size-sm);
+  gap: 7px;
+  min-block-size: var(--icen-control-height-sm);
+  padding: 3px var(--icen-density-space-sm);
+  border-radius: var(--icen-radius-xs);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text);
   cursor: pointer;
 }
-.icen-dt-filter-item:hover { background: var(--icen-token-fill-1); }
+.icen-dt-filter-item:hover { background: var(--icen-token-fill-hover); }
 .icen-dt-filter-item > span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -246,7 +250,7 @@
 .icen-dt-filter-reset {
   border: 0;
   background: transparent;
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text); /* 12px 链接字对白底需 AA（裸 accent 4.07:1 不达） */
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   cursor: pointer;
@@ -281,12 +285,12 @@
 .icen-dt-expand-btn:hover { color: var(--icen-token-text); background: var(--icen-token-fill-2); }
 .icen-dt-expand-btn[aria-expanded='true'] { transform: rotate(180deg); color: var(--icen-token-accent); }
 .icen-dt-expand-row {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--icen-token-line-soft);
-  background: var(--icen-token-bg-soft);
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
   color: var(--icen-token-text-muted);
   font-size: var(--icen-density-font-size-sm);
-  line-height: 1.7;
+  line-height: 1.55;
   white-space: normal;
 }
 
@@ -306,10 +310,11 @@
 .icen-dt-foot {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
-  padding: 10px 14px;
-  border-top: 1px solid var(--icen-token-line-soft);
+  padding: 6px 10px;
+  border-top: 1px solid var(--icen-token-separator-soft);
+  background: var(--icen-token-surface-chrome);
 }
 .icen-dt-foot:empty { display: none; }
 .icen-dt-stat {
@@ -317,11 +322,11 @@
   color: var(--icen-token-text-faint);
   font-variant-numeric: tabular-nums;
 }
-.icen-dt-stat--sel { color: var(--icen-token-accent); display: inline-flex; align-items: center; gap: 6px; }
+.icen-dt-stat--sel { color: var(--icen-token-accent-text); display: inline-flex; align-items: center; gap: 6px; }
 .icen-dt-clear-sel {
   border: 0;
   background: transparent;
-  color: var(--icen-token-accent);
+  color: var(--icen-token-accent-text); /* 同 filter-reset：小号链接字走可读变体 */
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   cursor: pointer;
@@ -338,18 +343,18 @@
 .icen-dt-page-size {
   appearance: none;
   -webkit-appearance: none;
-  height: 28px;
-  padding: 0 8px;
+  height: 26px;
+  padding: 0 7px;
   margin-inline-end: 6px;
   font: inherit;
   font-size: var(--icen-density-font-size-xs);
   color: var(--icen-token-text-muted);
-  background: transparent;
-  border: 1px solid var(--icen-token-line-soft);
-  border-radius: var(--icen-radius-sm);
+  background: var(--icen-token-control);
+  border: 1px solid var(--icen-token-control-border);
+  border-radius: var(--icen-radius-xs);
   cursor: pointer;
 }
-.icen-dt-page-size:hover { border-color: var(--icen-token-accent); color: var(--icen-token-text); }
+.icen-dt-page-size:hover { border-color: var(--icen-token-control-border-hover); color: var(--icen-token-text); }
 .icen-dt-page-btn {
   min-width: 28px;
   height: 28px;
@@ -366,12 +371,12 @@
 }
 .icen-dt-page-btn:hover:not(:disabled):not(.is-active) {
   color: var(--icen-token-text);
-  border-color: var(--icen-token-line-soft);
+  border-color: var(--icen-token-control-border);
 }
 .icen-dt-page-btn.is-active {
-  color: var(--icen-token-accent);
-  border-color: var(--icen-token-accent);
-  background: var(--icen-token-accent-subtle);
+  color: var(--icen-token-text);
+  border-color: color-mix(in srgb, var(--icen-token-accent) 24%, transparent);
+  background: var(--icen-token-fill-selected);
   font-weight: 600;
 }
 .icen-dt-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@@ -386,9 +391,9 @@
   .icen-dt-editor.is-invalid { animation: none; }
 }
 
-/* ── 紧凑密度（32px 行高） ── */
-.icen-datatable--compact .icen-dt-cell { min-height: 32px; padding: 0 10px; }
-.icen-datatable--compact .icen-dt-cell--head { min-height: 32px; font-size: var(--icen-density-font-size-xs); }
+/* ── 紧凑密度（28px 行高） ── */
+.icen-datatable--compact .icen-dt-cell { min-height: 28px; padding: 0 8px; }
+.icen-datatable--compact .icen-dt-cell--head { min-height: 28px; font-size: var(--icen-density-font-size-xs); }
 
 /* ── 工具栏行内末端操作按钮组 ── */
 .icen-dt-toolbar-actions {
@@ -465,6 +470,14 @@
 .icen-datatable--frozen .icen-dt-row.is-selected:hover .icen-dt-cell--frozen {
   background: color-mix(in srgb, var(--icen-token-accent-subtle) 82%, var(--icen-token-fill-1));
 }
+/* 斑马纹是行级底色，冻结格不透明面透不上来：偶数行冻结格重铺同款色，
+   否则条纹在冻结边界处断掉（选中/hover 已有对应规则） */
+.icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected) .icen-dt-cell--frozen {
+  background: color-mix(in srgb, var(--icen-token-fill-1) 55%, transparent);
+}
+.icen-datatable--striped .icen-dt-body .icen-dt-row:nth-child(even):not(.is-selected):hover .icen-dt-cell--frozen {
+  background: var(--icen-token-fill-1);
+}
 
 /* ── 行状态类（rowClassName 产出；--danger/--warning/--success 同族语义行底色） ── */
 .icen-dt-row--danger { background: color-mix(in srgb, var(--icen-token-error) 6%, transparent) !important; /* guard:allow-important 状态/守卫覆盖需压制变体优先级 */ }

package/dist/components/datatable.d.mts

@@ -0,0 +1,2 @@
+// kit: datatable 类型面（构建产物，勿手改）
+export * from '../behaviors/datatable.mjs';

package/dist/components/date-picker.css

@@ -46,22 +46,22 @@
 .icen-date-picker-trigger {
   display: inline-flex;
   align-items: center;
-  gap: var(--icen-density-space-xs);
+  gap: var(--icen-control-gap-sm);
   width: 100%;
-  height: var(--icen-density-input-height-md);
-  padding: 0 var(--icen-density-space-sm);
+  height: var(--icen-control-height-md);
+  padding: 0 var(--icen-field-padding-inline);
   background: var(--icen-token-control);
-  border: 1px solid var(--icen-token-outline-soft);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  border: var(--icen-control-border-width) solid var(--icen-token-control-border);
+  border-radius: var(--icen-control-radius);
+  box-shadow: var(--icen-token-shadow-field);
   color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--icen-density-font-size-md);
+  font-size: var(--icen-font-size-control);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.icen-date-picker-trigger:hover { border-color: var(--icen-hover-border); }
+.icen-date-picker-trigger:hover { border-color: var(--icen-token-control-border-hover); }
 .icen-date-picker-trigger.is-open {
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
@@ -85,8 +85,8 @@
 .icen-date-picker-icon svg { width: 14px; height: 14px; }
 
 /* 尺寸 */
-.icen-date-picker-trigger.icen-date-picker-trigger--sm { height: var(--icen-density-input-height-sm); font-size: var(--icen-density-font-size-sm); }
-.icen-date-picker-trigger.icen-date-picker-trigger--lg { height: var(--icen-density-input-height-lg); font-size: var(--icen-density-font-size-lg); }
+.icen-date-picker-trigger.icen-date-picker-trigger--sm { height: var(--icen-control-height-sm); font-size: var(--icen-density-font-size-sm); }
+.icen-date-picker-trigger.icen-date-picker-trigger--lg { height: var(--icen-control-height-lg); font-size: var(--icen-density-font-size-lg); }
 
 /* ── 面板 ── */
 .icen-date-picker-panel {
@@ -94,11 +94,11 @@
   z-index: var(--icen-z-popover);
   width: 280px;
   padding: var(--icen-density-space-sm);
-  background: var(--icen-token-card-strong);
-  border: 1px solid var(--icen-token-outline);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-overlay);
-  font-size: var(--icen-density-font-size-sm);
+  background: var(--icen-token-surface);
+  border: 1px solid var(--icen-token-material-edge);
+  border-radius: var(--icen-radius-lg);
+  box-shadow: var(--icen-token-material-light), var(--icen-token-shadow-elevated);
+  font-size: var(--icen-font-size-control);
   animation: icen-pop-in var(--icen-tx-fast);
 }
 
@@ -147,9 +147,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 24px;
+  height: 22px;
   font-size: var(--icen-density-font-size-xs);
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   font-weight: 500;
 }
 
@@ -165,7 +165,7 @@
   height: 30px;
   padding: 0;
   border: 0;
-  border-radius: var(--icen-radius-sm);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
   color: var(--icen-token-text);
   font: inherit;
@@ -175,10 +175,10 @@
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
 }
-.icen-date-picker-cell:hover { background: var(--icen-token-fill-1); }
+.icen-date-picker-cell:hover { background: var(--icen-token-fill-hover); }
 .icen-date-picker-cell.is-today {
-  border: 1px solid var(--icen-token-accent);
-  color: var(--icen-token-accent-text, var(--icen-token-accent-deep, var(--icen-token-accent)));
+  border: 0;
+  color: var(--icen-token-accent-text);
   font-weight: 600;
 }
 .icen-date-picker-cell.is-selected {
@@ -186,7 +186,7 @@
   color: var(--icen-token-on-accent);
   font-weight: 600;
 }
-.icen-date-picker-cell.is-selected.is-today { border-color: var(--icen-token-on-accent); }
+.icen-date-picker-cell.is-selected.is-today { color: var(--icen-token-on-accent); }
 .icen-date-picker-cell.is-outside {
   color: var(--icen-token-text-muted);
   opacity: 1;
@@ -243,14 +243,14 @@
 .icen-date-picker-grid { display: flex; flex-direction: column; gap: 2px; }
 .icen-date-picker-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 2px; }
 .icen-date-picker-week > span { min-inline-size: 0; }
-.icen-date-picker-cell { inline-size: 100%; block-size: 34px; }
-.icen-date-picker-nav { inline-size: 30px; block-size: 30px; flex: 0 0 30px; }
-.icen-date-picker-nav > svg { inline-size: 16px; block-size: 16px; }
+.icen-date-picker-cell { inline-size: 100%; block-size: 30px; }
+.icen-date-picker-nav { inline-size: 28px; block-size: 28px; flex: 0 0 28px; border-radius: var(--icen-radius-xs); }
+.icen-date-picker-nav > svg { inline-size: 15px; block-size: 15px; }
 .icen-date-picker-icon { inline-size: 20px; block-size: 20px; align-items: center; justify-content: center; }
 .icen-date-picker-icon > svg { inline-size: 16px; block-size: 16px; }
 .icen-date-picker-nav:disabled, .icen-date-picker-today:disabled, .icen-date-picker-clear:disabled { opacity: .4; cursor: default; }
 .icen-date-picker-nav:disabled:hover, .icen-date-picker-today:disabled:hover, .icen-date-picker-clear:disabled:hover { background: transparent; }
-.icen-date-picker-trigger[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
+.icen-date-picker-trigger[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
 .icen-date-picker-cell.is-outside.is-selected { opacity: 1; color: var(--icen-token-on-accent); }
 .icen-date-picker-panel:focus-visible { outline: 2px solid var(--icen-token-accent); outline-offset: 2px; }
 .icen-date-picker-empty { margin-block: var(--icen-density-space-sm) 0; color: var(--icen-token-text-muted); text-align: center; }

package/dist/components/date-picker.d.mts

@@ -0,0 +1,2 @@
+// kit: date-picker 类型面（构建产物，勿手改）
+export * from '../behaviors/date-picker.mjs';

package/dist/components/desc.d.mts

@@ -0,0 +1,2 @@
+// kit: desc 类型面（构建产物，勿手改）
+export {};

package/dist/components/dropdown.d.mts

@@ -0,0 +1,2 @@
+// kit: dropdown 类型面（构建产物，勿手改）
+export * from '../behaviors/dropdown.mjs';

package/dist/components/empty.css

@@ -37,23 +37,23 @@
 
 /* ── 图标 ── */
 .icen-empty-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--icen-radius-lg);
-  background: var(--icen-token-card);
-  border: 1px solid var(--icen-token-outline-soft);
-  box-shadow: var(--icen-token-shadow-inset);
+  width: 40px;
+  height: 40px;
+  border-radius: var(--icen-control-radius-lg);
+  background: var(--icen-token-fill-hover);
+  border: 1px solid transparent;
+  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--icen-token-text-faint);
-  margin-bottom: var(--icen-density-space-md);
+  color: var(--icen-token-text-muted);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.icen-empty--lg .icen-empty-icon { width: 64px; height: 64px; }
-.icen-empty--sm .icen-empty-icon { width: 36px; height: 36px; margin-bottom: var(--icen-density-space-sm); }
-.icen-empty-icon svg { width: 24px; height: 24px; }
-.icen-empty--lg .icen-empty-icon svg { width: 32px; height: 32px; }
-.icen-empty--sm .icen-empty-icon svg { width: 18px; height: 18px; }
+.icen-empty--lg .icen-empty-icon { width: 52px; height: 52px; }
+.icen-empty--sm .icen-empty-icon { width: 32px; height: 32px; margin-bottom: var(--icen-density-space-xs); }
+.icen-empty-icon svg { width: 20px; height: 20px; }
+.icen-empty--lg .icen-empty-icon svg { width: 26px; height: 26px; }
+.icen-empty--sm .icen-empty-icon svg { width: 16px; height: 16px; }
 
 /* ── 类型预设 ── */
 .icen-empty--error .icen-empty-icon {
@@ -78,8 +78,8 @@
 
 /* ── 标题与描述 ── */
 .icen-empty-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-title);
+  font-weight: var(--icen-font-weight-title);
   color: var(--icen-token-text);
   margin: 0;
   line-height: 1.4;
@@ -89,7 +89,7 @@
   font-size: var(--icen-density-font-size-sm);
   color: var(--icen-token-text-muted);
   margin: 4px 0 0;
-  max-width: 280px;
+  max-width: 300px;
   line-height: 1.5;
 }
 

package/dist/components/empty.d.mts

@@ -0,0 +1,2 @@
+// kit: empty 类型面（构建产物，勿手改）
+export {};

package/dist/components/feedback.css

@@ -11,18 +11,19 @@
   display: flex;
   align-items: flex-start;
   gap: var(--icen-density-space-sm);
-  padding: var(--icen-density-space-sm);
-  border-radius: var(--icen-radius-md);
-  box-shadow: var(--icen-token-shadow-inset);
+  padding: 8px 10px;
+  border-radius: var(--icen-control-radius-lg);
+  box-shadow: none;
   border: 1px solid transparent;
+  border-inline-start-width: 2px;
   font-size: var(--icen-density-font-size-sm);
   position: relative;
   overflow: hidden;
 }
-.icen-alert--info    { background: var(--icen-token-info-muted);    border-color: color-mix(in srgb, var(--icen-token-info) 18%, transparent); }
-.icen-alert--success { background: var(--icen-token-success-muted); border-color: color-mix(in srgb, var(--icen-token-success) 18%, transparent); }
-.icen-alert--warning { background: var(--icen-token-warning-muted); border-color: color-mix(in srgb, var(--icen-token-warning) 18%, transparent); }
-.icen-alert--error   { background: var(--icen-token-error-muted);   border-color: color-mix(in srgb, var(--icen-token-error) 18%, transparent); }
+.icen-alert--info    { background: var(--icen-token-info-muted);    border-color: color-mix(in srgb, var(--icen-token-info) 18%, transparent); border-inline-start-color: var(--icen-token-info); }
+.icen-alert--success { background: var(--icen-token-success-muted); border-color: color-mix(in srgb, var(--icen-token-success) 18%, transparent); border-inline-start-color: var(--icen-token-success); }
+.icen-alert--warning { background: var(--icen-token-warning-muted); border-color: color-mix(in srgb, var(--icen-token-warning) 18%, transparent); border-inline-start-color: var(--icen-token-warning); }
+.icen-alert--error   { background: var(--icen-token-error-muted);   border-color: color-mix(in srgb, var(--icen-token-error) 18%, transparent); border-inline-start-color: var(--icen-token-error); }
 
 .icen-alert-icon {
   flex-shrink: 0;
@@ -37,8 +38,8 @@
 
 .icen-alert-content { flex: 1; min-inline-size: 0; }
 .icen-alert-title {
-  font-size: var(--icen-density-font-size-md);
-  font-weight: 500;
+  font-size: var(--icen-font-size-control);
+  font-weight: 600;
   margin: 0;
   line-height: 1.4;
 }
@@ -54,13 +55,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 22px;
-  height: 22px;
+  width: 24px;
+  height: 24px;
   padding: 0;
   border: 0;
   border-radius: var(--icen-radius-xs);
   background: none;
-  color: var(--icen-token-text-faint);
+  color: var(--icen-token-text-muted);
   cursor: pointer;
   transition:
     opacity var(--icen-tx-fast),
@@ -100,32 +101,33 @@
   padding: 40px var(--icen-density-space-md);
 }
 .icen-result-icon {
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border-radius: var(--icen-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: var(--icen-token-shadow-inset);
+  box-shadow: none;
   border: 1px solid transparent;
-  margin-bottom: var(--icen-density-space-md);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.icen-result-icon svg { width: 28px; height: 28px; }
+.icen-result-icon svg { width: 26px; height: 26px; }
 .icen-result--success .icen-result-icon { background: var(--icen-token-success-muted); color: var(--icen-token-success); border-color: color-mix(in srgb, var(--icen-token-success) 12%, transparent); }
 .icen-result--error   .icen-result-icon { background: var(--icen-token-error-muted);   color: var(--icen-token-error);   border-color: color-mix(in srgb, var(--icen-token-error) 12%, transparent); }
 .icen-result--warning .icen-result-icon { background: var(--icen-token-warning-muted); color: var(--icen-token-warning); border-color: color-mix(in srgb, var(--icen-token-warning) 12%, transparent); }
 .icen-result--info    .icen-result-icon { background: var(--icen-token-info-muted);    color: var(--icen-token-info);    border-color: color-mix(in srgb, var(--icen-token-info) 12%, transparent); }
 
 .icen-result-title {
-  font-size: var(--icen-density-font-size-lg);
+  font-size: var(--icen-density-font-size-xl);
   font-weight: 600;
   color: var(--icen-token-text);
   margin: 0;
   font-family: var(--icen-font-heading);
   line-height: 1.3;
+  letter-spacing: -.015em;
 }
 .icen-result-desc {
-  font-size: var(--icen-density-font-size-sm);
+  font-size: var(--icen-font-size-control);
   color: var(--icen-token-text-muted);
   margin: var(--icen-density-space-xs) 0 0;
   max-width: 360px;
@@ -147,15 +149,15 @@
 }
 .icen-progress-track {
   flex: 1;
-  height: 6px;
+  height: 4px;
   overflow: hidden;
   border-radius: var(--icen-radius-full);
-  background: color-mix(in srgb, var(--icen-token-line-soft) 40%, transparent);
+  background: var(--icen-token-fill-2);
 }
 .icen-progress-bar {
   height: 100%;
   border-radius: var(--icen-radius-full);
-  background: var(--icen-token-accent);
+  background: var(--icen-token-accent-strong);
   transition: width var(--icen-tx-slow);
 }
 .icen-progress--success .icen-progress-bar { background: var(--icen-token-success); }
@@ -184,15 +186,15 @@
 /* ══════════════ spinner · 加载圈 ══════════════ */
 .icen-spinner {
   display: inline-block;
-  width: 20px;
-  height: 20px;
-  border: 2px solid color-mix(in srgb, var(--icen-token-accent) 30%, transparent);
-  border-top-color: var(--icen-token-accent);
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid color-mix(in srgb, var(--icen-token-accent) 26%, transparent);
+  border-top-color: var(--icen-token-accent-strong);
   border-radius: var(--icen-radius-full);
   animation: icen-spin var(--spinner-duration, 0.8s) linear infinite;
 }
-.icen-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
-.icen-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
+.icen-spinner--sm { width: 13px; height: 13px; border-width: 1.5px; }
+.icen-spinner--lg { width: 28px; height: 28px; border-width: 2.5px; }
 .icen-spinner--success { border-color: color-mix(in srgb, var(--icen-token-success) 30%, transparent); border-top-color: var(--icen-token-success); }
 .icen-spinner--error   { border-color: color-mix(in srgb, var(--icen-token-error) 30%, transparent); border-top-color: var(--icen-token-error); }
 .icen-spinner--muted   { border-color: color-mix(in srgb, var(--icen-token-text-faint) 30%, transparent); border-top-color: var(--icen-token-text-faint); }
@@ -283,7 +285,7 @@
   stroke: var(--icen-token-accent);
   stroke-width: 4;
   stroke-linecap: round;
-  transition: stroke-dashoffset var(--icen-tx-slow) var(--icen-ease-out);
+  transition: stroke-dashoffset var(--icen-duration-slow) var(--icen-ease-out);
 }
 .icen-progress-ring-text {
   position: absolute;