@icen.ai/ui 0.8.1 → 0.10.0

package/dist/components/date-picker.css

@@ -1,123 +1,121 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: date-picker（日期选择，与 behaviors/date-picker 配套）
  *
  * 契约：
- *   <div class="date-picker" data-date-picker data-date-picker-input="id">
- *     <button class="date-picker-trigger [--sm|--lg]" type="button" aria-haspopup="dialog">
- *       <span class="date-picker-value">2026-07-29</span>
- *       <svg class="date-picker-icon">…日历 svg…</svg>
+ *   <div class="icen-date-picker" data-icen-date-picker>
+ *     <button class="icen-date-picker-trigger [--sm|--lg]" type="button" aria-haspopup="dialog">
+ *       <span class="icen-date-picker-value">2026-07-29</span>
+ *       <svg class="icen-date-picker-icon">…日历 svg…</svg>
  *     </button>
  *     <input type="hidden" id="id" name="date" value="2026-07-29" />
  *   </div>
  *
- *   或直接挂到普通 input（behavior 自动包裹触发器外观）：
- *   <input class="date-picker-input" data-date-picker value="2026-07-29" />
- *
  * behavior 渲染面板（portal 到 body）：
- *   <div class="date-picker-panel" role="dialog">
- *     <div class="date-picker-head">
- *       <button class="date-picker-nav" data-prev>‹</button>
- *       <span class="date-picker-title">2026 年 7 月</span>
- *       <button class="date-picker-nav" data-next>›</button>
+ *   <div class="icen-date-picker-panel" role="dialog">
+ *     <div class="icen-date-picker-head">
+ *       <button class="icen-date-picker-nav" data-icen-prev>…shared chevron SVG…</button>
+ *       <span class="icen-date-picker-title">2026 年 7 月</span>
+ *       <button class="icen-date-picker-nav" data-icen-next>…shared chevron SVG…</button>
  *     </div>
- *     <div class="date-picker-weekdays">
+ *     <div class="icen-date-picker-weekdays">
  *       <span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span><span>日</span>
  *     </div>
- *     <div class="date-picker-grid">
- *       <button class="date-picker-cell [.is-outside] [.is-today] [.is-selected] [.is-disabled]">15</button>
+ *     <div class="icen-date-picker-grid">
+ *       <button class="icen-date-picker-cell [.is-outside] [.is-today] [.is-selected] [.is-disabled]">15</button>
  *       …
  *     </div>
- *     <div class="date-picker-foot">
- *       <button class="date-picker-today">今天</button>
- *       <button class="date-picker-clear">清除</button>
+ *     <div class="icen-date-picker-foot">
+ *       <button class="icen-date-picker-today">今天</button>
+ *       <button class="icen-date-picker-clear">清除</button>
  *     </div>
  *   </div>
  *
  * 可选 data-*：
- *   data-date-picker-format="yyyy-mm-dd"  显示格式
- *   data-date-picker-min="2026-01-01"     最小可选日期
- *   data-date-picker-max="2026-12-31"     最大可选日期
- *   data-date-picker-week-start="0"       周首日（0=周日，1=周一，默认 1）
+ *   data-icen-date-picker-format="yyyy-mm-dd"  显示格式
+ *   data-icen-date-picker-min="2026-01-01"     最小可选日期
+ *   data-icen-date-picker-max="2026-12-31"     最大可选日期
+ *   data-icen-date-picker-week-start="0"       周首日（0=周日，1=周一，默认 1）
  */
 
-.date-picker {
+.icen-date-picker {
   display: inline-block;
   position: relative;
 }
 
-.date-picker-trigger {
+.icen-date-picker-trigger {
   display: inline-flex;
   align-items: center;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   width: 100%;
-  height: var(--density-input-height-md);
-  padding: 0 var(--density-space-sm);
-  background: var(--token-control);
-  border: 1px solid var(--token-outline-soft);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-inset);
-  color: var(--token-text);
+  height: var(--icen-density-input-height-md);
+  padding: 0 var(--icen-density-space-sm);
+  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);
+  color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--density-font-size-md);
+  font-size: var(--icen-density-font-size-md);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: border-color var(--icen-tx-fast), box-shadow var(--icen-tx-fast);
 }
-.date-picker-trigger:hover { border-color: var(--icen-hover-border); }
-.date-picker-trigger.is-open {
+.icen-date-picker-trigger:hover { border-color: var(--icen-hover-border); }
+.icen-date-picker-trigger.is-open {
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
 }
-.date-picker-trigger:focus-visible {
+.icen-date-picker-trigger:focus-visible {
   outline: none;
   border-color: var(--icen-control-focus-border);
   box-shadow: var(--icen-control-focus-shadow);
 }
-.date-picker-value {
+.icen-date-picker-value {
   flex: 1;
-  min-width: 0;
-  text-align: left;
+  min-inline-size: 0;
+  text-align: start;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }
-.date-picker-value.is-empty { color: color-mix(in srgb, var(--token-text-faint) 60%, transparent); }
-.date-picker-icon { display: inline-flex; color: var(--token-text-faint); flex-shrink: 0; }
-.date-picker-icon svg { width: 14px; height: 14px; }
+.icen-date-picker-value.is-empty { color: var(--icen-token-text-muted); }
+.icen-date-picker-icon { display: inline-flex; color: var(--icen-token-text-faint); flex-shrink: 0; }
+.icen-date-picker-icon svg { width: 14px; height: 14px; }
 
 /* 尺寸 */
-.date-picker-trigger.date-picker-trigger--sm { height: var(--density-input-height-sm); font-size: var(--density-font-size-sm); }
-.date-picker-trigger.date-picker-trigger--lg { height: var(--density-input-height-lg); font-size: var(--density-font-size-lg); }
+.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); }
 
 /* ── 面板 ── */
-.date-picker-panel {
+.icen-date-picker-panel {
   position: fixed;
-  z-index: var(--z-popover);
+  z-index: var(--icen-z-popover);
   width: 280px;
-  padding: var(--density-space-sm);
-  background: var(--token-card-strong);
-  border: 1px solid var(--token-outline);
-  border-radius: var(--radius-md);
-  box-shadow: var(--token-shadow-overlay);
-  font-size: var(--density-font-size-sm);
+  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);
   animation: icen-pop-in var(--icen-tx-fast);
 }
 
-.date-picker-head {
+.icen-date-picker-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--density-space-sm);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.date-picker-title {
+.icen-date-picker-title {
   font-weight: 600;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   font-variant-numeric: tabular-nums;
   flex: 1;
   text-align: center;
 }
-.date-picker-nav {
+.icen-date-picker-nav {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -125,116 +123,149 @@
   height: 24px;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
-  color: var(--token-text-muted);
-  font-size: var(--density-font-size-md);
+  color: var(--icen-token-text-muted);
+  font-size: var(--icen-density-font-size-md);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: color var(--icen-tx-fast), background-color var(--icen-tx-fast);
 }
-.date-picker-nav:hover { color: var(--token-text); background: var(--token-fill-1); }
-.date-picker-nav:focus-visible {
+.icen-date-picker-nav:hover { color: var(--icen-token-text); background: var(--icen-token-fill-1); }
+.icen-date-picker-nav:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
-.date-picker-weekdays {
+.icen-date-picker-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
   margin-bottom: 4px;
 }
-.date-picker-weekdays > span {
+.icen-date-picker-weekdays > span {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 24px;
-  font-size: var(--density-font-size-xs);
-  color: var(--token-text-faint);
+  font-size: var(--icen-density-font-size-xs);
+  color: var(--icen-token-text-faint);
   font-weight: 500;
 }
 
-.date-picker-grid {
+.icen-date-picker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 2px;
 }
-.date-picker-cell {
+.icen-date-picker-cell {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-sm);
+  border-radius: var(--icen-radius-sm);
   background: transparent;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   font: inherit;
-  font-size: var(--density-font-size-sm);
+  font-size: var(--icen-density-font-size-sm);
   font-variant-numeric: tabular-nums;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast), color var(--icen-tx-fast);
 }
-.date-picker-cell:hover { background: var(--token-fill-1); }
-.date-picker-cell.is-today {
-  border: 1px solid var(--token-accent);
-  color: var(--token-accent);
+.icen-date-picker-cell:hover { background: var(--icen-token-fill-1); }
+.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)));
   font-weight: 600;
 }
-.date-picker-cell.is-selected {
-  background: var(--token-accent);
-  color: var(--token-on-accent);
+.icen-date-picker-cell.is-selected {
+  background: var(--icen-token-accent-strong);
+  color: var(--icen-token-on-accent);
   font-weight: 600;
 }
-.date-picker-cell.is-selected.is-today { border-color: var(--token-on-accent); }
-.date-picker-cell.is-outside {
-  color: var(--token-text-faint);
-  opacity: 0.55;
+.icen-date-picker-cell.is-selected.is-today { border-color: var(--icen-token-on-accent); }
+.icen-date-picker-cell.is-outside {
+  color: var(--icen-token-text-muted);
+  opacity: 1;
 }
-.date-picker-cell.is-disabled {
-  color: var(--token-text-faint);
+.icen-date-picker-cell.is-disabled {
+  color: var(--icen-token-text-faint);
   opacity: 0.35;
   cursor: not-allowed;
   pointer-events: none;
 }
-.date-picker-cell:focus-visible {
+.icen-date-picker-cell:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
 
-.date-picker-foot {
+.icen-date-picker-foot {
   display: flex;
   justify-content: space-between;
-  gap: var(--density-space-xs);
-  margin-top: var(--density-space-sm);
-  padding-top: var(--density-space-sm);
-  border-top: 1px solid var(--token-line-soft);
-}
-.date-picker-today,
-.date-picker-clear {
-  padding: 4px var(--density-space-sm);
+  gap: var(--icen-density-space-xs);
+  margin-top: var(--icen-density-space-sm);
+  padding-top: var(--icen-density-space-sm);
+  border-top: 1px solid var(--icen-token-line-soft);
+}
+.icen-date-picker-today,
+.icen-date-picker-clear {
+  padding: 4px var(--icen-density-space-sm);
   border: 0;
-  border-radius: var(--radius-xs);
+  border-radius: var(--icen-radius-xs);
   background: transparent;
-  color: var(--token-accent);
+  color: var(--icen-token-accent-strong);
   font: inherit;
-  font-size: var(--density-font-size-xs);
+  font-size: var(--icen-density-font-size-xs);
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--icen-tx-fast);
 }
-.date-picker-today:hover,
-.date-picker-clear:hover { background: var(--token-fill-1); }
-.date-picker-today:focus-visible,
-.date-picker-clear:focus-visible {
+.icen-date-picker-today:hover,
+.icen-date-picker-clear:hover { background: var(--icen-token-fill-1); }
+.icen-date-picker-today:focus-visible,
+.icen-date-picker-clear:focus-visible {
   outline: none;
   box-shadow: var(--icen-ring);
 }
-.date-picker-clear { color: var(--token-text-muted); }
+.icen-date-picker-clear { color: var(--icen-token-text-muted); }
 
 @media (prefers-reduced-motion: reduce) {
-  .date-picker-panel { animation: none; }
-  .date-picker-cell { transition: none; }
+  .icen-date-picker-panel { animation: none; }
+  .icen-date-picker-cell { transition: none; }
+}
+
+/* Calendar rows preserve real grid semantics. A single date joins the tab order;
+   logical arrows move within the month without exposing 42 separate tab stops. */
+.icen-date-picker-panel { width: 300px; overflow: auto; overscroll-behavior: contain; }
+.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-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-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; }
+.icen-date-picker-panel[dir="rtl"] .icen-date-picker-nav > svg { transform: scaleX(-1); }
+@media (pointer: coarse) {
+  .icen-date-picker-panel { width: 344px; }
+  .icen-date-picker-trigger { min-block-size: 44px; }
+  .icen-date-picker-cell { min-block-size: 44px; }
+  .icen-date-picker-nav { min-inline-size: 44px; min-block-size: 44px; }
+  .icen-date-picker-today, .icen-date-picker-clear { min-inline-size: 44px; min-block-size: 44px; }
+}
+@media (forced-colors: active) {
+  :root .icen-date-picker-panel { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
+  .icen-date-picker-cell.is-selected { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .icen-date-picker-cell:disabled, .icen-date-picker-nav:disabled, .icen-date-picker-today:disabled, .icen-date-picker-clear:disabled { color: GrayText; opacity: 1; }
+}
+
 }

package/dist/components/empty.css

@@ -1,131 +1,134 @@
+@layer icen.components {
 /*
  * @icen.ai/ui — Component: empty（空状态 / 无数据 / 404 / 错误 / 维护中）
  *
  * 完整契约：
- *   <div class="empty [.empty--sm|.empty--lg]
- *        [.empty--error|.empty--404|.empty--search|.empty--maintenance|.empty--network]">
- *     <div class="empty-icon">…svg…</div>            ← 可选，缺省显示默认占位
- *     <h3 class="empty-title">暂无数据</h3>
- *     <p class="empty-desc">描述文案（可选）</p>
- *     <div class="empty-action">                       ← 可选：操作按钮位
- *       <button class="btn btn-primary">…</button>
- *       <button class="btn">…</button>
+ *   <div class="icen-empty [.icen-empty--sm|.icen-empty--lg]
+ *        [.icen-empty--error|.icen-empty--404|.icen-empty--search|.icen-empty--maintenance|.icen-empty--network]">
+ *     <div class="icen-empty-icon">…svg…</div>            ← 可选，缺省显示默认占位
+ *     <h3 class="icen-empty-title">暂无数据</h3>
+ *     <p class="icen-empty-desc">描述文案（可选）</p>
+ *     <div class="icen-empty-action">                       ← 可选：操作按钮位
+ *       <button class="icen-btn icen-btn-primary">…</button>
+ *       <button class="icen-btn">…</button>
  *     </div>
  *   </div>
  *
  * 类型预设（改图标底色与基调）：
- *   .empty--error        错误（红底图标）
- *   .empty--404          404（中性大字）
- *   .empty--search       搜索无结果
- *   .empty--maintenance  维护中（warning 底）
- *   .empty--network      网络错误（info 底）
+ *   .icen-empty--error        错误（红底图标）
+ *   .icen-empty--404          404（中性大字）
+ *   .icen-empty--search       搜索无结果
+ *   .icen-empty--maintenance  维护中（warning 底）
+ *   .icen-empty--network      网络错误（info 底）
  *
  * 规格源自 opengal src/presentation/ui/data/display.tsx 的 EmptyState。
  */
 
-.empty {
+.icen-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: var(--density-space-lg) var(--density-space-md);
+  padding: var(--icen-density-space-lg) var(--icen-density-space-md);
 }
-.empty--sm { padding: var(--density-space-md); }
-.empty--lg { padding: 64px var(--density-space-md); }
+.icen-empty--sm { padding: var(--icen-density-space-md); }
+.icen-empty--lg { padding: 64px var(--icen-density-space-md); }
 
 /* ── 图标 ── */
-.empty-icon {
+.icen-empty-icon {
   width: 48px;
   height: 48px;
-  border-radius: var(--radius-lg);
-  background: var(--token-card);
-  border: 1px solid var(--token-outline-soft);
-  box-shadow: var(--token-shadow-inset);
+  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);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--token-text-faint);
-  margin-bottom: var(--density-space-md);
+  color: var(--icen-token-text-faint);
+  margin-bottom: var(--icen-density-space-md);
 }
-.empty--lg .empty-icon { width: 64px; height: 64px; }
-.empty--sm .empty-icon { width: 36px; height: 36px; margin-bottom: var(--density-space-sm); }
-.empty-icon svg { width: 24px; height: 24px; }
-.empty--lg .empty-icon svg { width: 32px; height: 32px; }
-.empty--sm .empty-icon svg { width: 18px; height: 18px; }
+.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; }
 
 /* ── 类型预设 ── */
-.empty--error .empty-icon {
-  background: color-mix(in srgb, var(--token-error) 10%, transparent);
-  border-color: color-mix(in srgb, var(--token-error) 20%, transparent);
-  color: var(--token-error);
+.icen-empty--error .icen-empty-icon {
+  background: color-mix(in srgb, var(--icen-token-error) 10%, transparent);
+  border-color: color-mix(in srgb, var(--icen-token-error) 20%, transparent);
+  color: var(--icen-token-error);
 }
-.empty--maintenance .empty-icon {
-  background: color-mix(in srgb, var(--token-warning) 10%, transparent);
-  border-color: color-mix(in srgb, var(--token-warning) 20%, transparent);
-  color: var(--token-warning);
+.icen-empty--maintenance .icen-empty-icon {
+  background: color-mix(in srgb, var(--icen-token-warning) 10%, transparent);
+  border-color: color-mix(in srgb, var(--icen-token-warning) 20%, transparent);
+  color: var(--icen-token-warning);
 }
-.empty--network .empty-icon {
-  background: color-mix(in srgb, var(--token-info) 10%, transparent);
-  border-color: color-mix(in srgb, var(--token-info) 20%, transparent);
-  color: var(--token-info);
+.icen-empty--network .icen-empty-icon {
+  background: color-mix(in srgb, var(--icen-token-info) 10%, transparent);
+  border-color: color-mix(in srgb, var(--icen-token-info) 20%, transparent);
+  color: var(--icen-token-info);
 }
-.empty--search .empty-icon {
-  background: var(--token-fill-1);
-  color: var(--token-text-muted);
+.icen-empty--search .icen-empty-icon {
+  background: var(--icen-token-fill-1);
+  color: var(--icen-token-text-muted);
 }
 
 /* ── 标题与描述 ── */
-.empty-title {
-  font-size: var(--density-font-size-md);
+.icen-empty-title {
+  font-size: var(--icen-density-font-size-md);
   font-weight: 500;
-  color: var(--token-text);
+  color: var(--icen-token-text);
   margin: 0;
   line-height: 1.4;
 }
-.empty--error .empty-title { color: var(--token-error); }
-.empty-desc {
-  font-size: var(--density-font-size-sm);
-  color: var(--token-text-muted);
+.icen-empty--error .icen-empty-title { color: var(--icen-token-error); }
+.icen-empty-desc {
+  font-size: var(--icen-density-font-size-sm);
+  color: var(--icen-token-text-muted);
   margin: 4px 0 0;
   max-width: 280px;
   line-height: 1.5;
 }
 
 /* ── 操作区 ── */
-.empty-action {
-  margin-top: var(--density-space-md);
+.icen-empty-action {
+  margin-top: var(--icen-density-space-md);
   display: flex;
-  gap: var(--density-space-xs);
+  gap: var(--icen-density-space-xs);
   flex-wrap: wrap;
   justify-content: center;
 }
 
 /* ── 404 大数字 ── */
-.empty--404 .empty-title {
+.icen-empty--404 .icen-empty-title {
   font-size: 72px;
   font-weight: 800;
-  font-family: var(--font-heading);
+  font-family: var(--icen-font-heading);
   line-height: 1;
   letter-spacing: -0.02em;
-  color: var(--token-text-faint);
-  margin-bottom: var(--density-space-sm);
+  color: var(--icen-token-text-faint);
+  margin-bottom: var(--icen-density-space-sm);
 }
-.empty--404 .empty-icon { display: none; }
+.icen-empty--404 .icen-empty-icon { display: none; }
 
 /* ── 插画背景（使用方可用渐变背景替代图标） ── */
-.empty--illustrated {
+.icen-empty--illustrated {
   background: radial-gradient(ellipse at center,
-    color-mix(in srgb, var(--token-accent) 6%, transparent) 0%,
+    color-mix(in srgb, var(--icen-token-accent) 6%, transparent) 0%,
     transparent 70%);
-  border-radius: var(--radius-lg);
+  border-radius: var(--icen-radius-lg);
 }
 
 /* ── 内嵌模式（empty 嵌入卡片/面板内时无 padding） ── */
-.empty--inline {
-  padding: var(--density-space-md) var(--density-space-sm);
+.icen-empty--inline {
+  padding: var(--icen-density-space-md) var(--icen-density-space-sm);
 }
 
 @media (max-width: 480px) {
-  .empty--404 .empty-title { font-size: 56px; }
+  .icen-empty--404 .icen-empty-title { font-size: 56px; }
+}
+
 }