/* 码舱组件库：在 style.css 之后加载。全部类名以 ui- 开头，只用 style.css 顶部的语义 token。
   规范、HTML 结构示例和可访问性要求见 design-system/machang/MASTER.md。 */

/* ==== 基础 ==== */
.ui-visually-hidden{position:absolute!important;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ui-icon{flex:none;display:inline-block;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ui-num{font-variant-numeric:tabular-nums}
.ui-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ui-muted{color:var(--color-text-muted)}
.ui-stack{display:grid;gap:var(--space-4);align-content:start}
.ui-stack--sm{gap:var(--space-2)}
.ui-stack--lg{gap:var(--space-6)}
.ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.ui-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ui-grid-min,220px)),1fr))}
.ui-link{color:var(--color-primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ui-link:hover{color:var(--color-primary-hover);text-decoration-thickness:2px}
[class^="ui-"]:focus-visible,[class*=" ui-"]:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.ui-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite;flex:none}
@keyframes ui-spin{to{transform:rotate(360deg)}}

/* ==== 页面骨架：区块标题 ==== */
.ui-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-section-head h2{font-size:var(--text-lg);line-height:var(--leading-tight);font-weight:var(--weight-bold)}
.ui-section-head p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1)}

/* ==== 按钮 ==== */
.ui-btn{--ui-btn-bg:var(--color-surface);--ui-btn-fg:var(--color-text);--ui-btn-border:var(--color-border-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h-md);padding:0 var(--space-4);
  border:1px solid var(--ui-btn-border);border-radius:var(--radius-sm);background:var(--ui-btn-bg);color:var(--ui-btn-fg);
  font:var(--weight-semibold) var(--text-base)/1.2 var(--font-sans);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.ui-btn:hover{--ui-btn-bg:var(--color-surface-hover);--ui-btn-border:var(--color-control-border)}
.ui-btn:active{--ui-btn-bg:var(--color-surface-muted)}
.ui-btn--primary{--ui-btn-bg:var(--color-primary);--ui-btn-fg:var(--color-on-primary);--ui-btn-border:var(--color-primary)}
.ui-btn--primary:hover{--ui-btn-bg:var(--color-primary-hover);--ui-btn-border:var(--color-primary-hover)}
.ui-btn--primary:active{--ui-btn-bg:var(--color-primary-active)}
.ui-btn--ghost{--ui-btn-bg:transparent;--ui-btn-border:transparent;--ui-btn-fg:var(--color-text-muted)}
.ui-btn--ghost:hover{--ui-btn-bg:var(--color-surface-muted);--ui-btn-border:transparent;--ui-btn-fg:var(--color-text)}
.ui-btn--danger{--ui-btn-fg:var(--color-danger);--ui-btn-border:var(--color-danger-border)}
.ui-btn--danger:hover{--ui-btn-bg:var(--color-danger-soft);--ui-btn-border:var(--color-danger)}
.ui-btn--danger.ui-btn--solid{--ui-btn-bg:var(--color-danger);--ui-btn-fg:#fff;--ui-btn-border:var(--color-danger)}
.ui-btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-sm);gap:6px}
.ui-btn--icon{padding:0;width:var(--control-h-md)}
.ui-btn--icon.ui-btn--sm{width:var(--control-h-sm)}
.ui-btn--block{display:flex;width:100%}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.ui-btn[aria-busy="true"]{cursor:progress;color:transparent}
.ui-btn[aria-busy="true"]>*{opacity:0}
.ui-btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid var(--ui-btn-fg);border-right-color:transparent;border-radius:50%;animation:ui-spin .7s linear infinite}

/* ==== 表单 ==== */
.ui-field{display:grid;gap:6px;min-width:0}
.ui-field__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text)}
.ui-field__hint{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--color-text-subtle)}
.ui-field__error{display:flex;gap:6px;align-items:flex-start;font-size:var(--text-xs);color:var(--color-danger)}
.ui-input,.ui-select,.ui-textarea{width:100%;min-width:0;min-height:var(--control-h-md);padding:0 var(--space-3);border:1px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font:var(--text-base)/1.4 var(--font-sans);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.ui-textarea{padding-block:var(--space-2);min-height:88px;resize:vertical}
.ui-select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--color-text-muted)}
.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft-border)}
.ui-input[aria-invalid="true"],.ui-select[aria-invalid="true"]{border-color:var(--color-danger)}
.ui-input:read-only{background:var(--color-surface-muted)}
.ui-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}
/* 开关：<input type="checkbox" role="switch" class="ui-switch"> */
.ui-switch{appearance:none;flex:none;position:relative;width:40px;height:24px;margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}
.ui-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--duration-base) var(--ease-out)}
.ui-switch:checked{background:var(--color-primary)}
.ui-switch:checked::after{transform:translateX(16px)}
.ui-switch:disabled{opacity:.5;cursor:not-allowed}
.ui-check{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-base);cursor:pointer}
.ui-check input{width:18px;height:18px;margin:0;accent-color:var(--color-primary);flex:none}
/* 单选卡：<label class="ui-choice"><input type="radio"> <span class="ui-choice__body"><strong>…</strong><small>…</small></span></label> */
.ui-choices{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border:0;margin:0;padding:0;min-inline-size:0}
.ui-choice{position:relative;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out)}
.ui-choice:hover{border-color:var(--color-control-border)}
.ui-choice input{margin:3px 0 0;width:16px;height:16px;flex:none;accent-color:var(--color-primary)}
.ui-choice__body{display:grid;gap:2px;min-width:0}
.ui-choice__body strong{font-size:var(--text-base)}
.ui-choice__body small{font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-normal)}
.ui-choice:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-soft);box-shadow:inset 0 0 0 1px var(--color-primary)}
.ui-choice:has(input:focus-visible){outline:2px solid var(--color-focus);outline-offset:2px}
.ui-choice:has(input:disabled){opacity:.55;cursor:not-allowed}

/* ==== 卡片 ==== */
.ui-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);min-width:0}
.ui-card--muted{background:var(--color-surface-muted)}
.ui-card--flush{padding:0;overflow:hidden}
.ui-card--interactive{transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.ui-card--interactive:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md)}
.ui-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-card__title{font-size:var(--text-md);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
.ui-card__desc{max-width:var(--prose-max);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-1);line-height:var(--leading-normal)}
.ui-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}

/* ==== 指标卡 ==== */
.ui-stat{display:grid;gap:var(--space-1);align-content:start;min-width:0;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.ui-stat__label{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-text-muted)}
.ui-stat__value{font-size:var(--text-2xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:-.02em;overflow-wrap:anywhere}
.ui-stat__value small{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);margin-left:2px}
.ui-stat__meta{font-size:var(--text-xs);color:var(--color-text-subtle);line-height:var(--leading-normal)}
.ui-stat__trend{margin-top:var(--space-2);color:var(--chart-1)}

/* ==== 徽章与状态点 ==== */
.ui-badge{--ui-tone:var(--color-text-muted);--ui-tone-bg:var(--color-surface-muted);--ui-tone-border:var(--color-border);
  display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:22px;padding:1px 8px;border:1px solid var(--ui-tone-border);border-radius:var(--radius-full);
  background:var(--ui-tone-bg);color:var(--ui-tone);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1.4;white-space:nowrap}
.ui-badge>span:last-child{overflow:hidden;text-overflow:ellipsis}
.ui-badge__dot,.ui-dot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.ui-badge--primary{--ui-tone:var(--color-primary);--ui-tone-bg:var(--color-primary-soft);--ui-tone-border:var(--color-primary-soft-border)}
.ui-badge--success,.ui-dot--success{--ui-tone:var(--color-success);--ui-tone-bg:var(--color-success-soft);--ui-tone-border:var(--color-success-border)}
.ui-badge--warning,.ui-dot--warning{--ui-tone:var(--color-warning);--ui-tone-bg:var(--color-warning-soft);--ui-tone-border:var(--color-warning-border)}
.ui-badge--danger,.ui-dot--danger{--ui-tone:var(--color-danger);--ui-tone-bg:var(--color-danger-soft);--ui-tone-border:var(--color-danger-border)}
.ui-badge--info,.ui-dot--info{--ui-tone:var(--color-info);--ui-tone-bg:var(--color-info-soft);--ui-tone-border:var(--color-info-border)}
.ui-dot{color:var(--ui-tone,var(--color-text-subtle))}
.ui-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm)}

/* ==== 提示条与错误态 ==== */
.ui-alert{--ui-tone:var(--color-info);--ui-tone-bg:var(--color-info-soft);--ui-tone-border:var(--color-info-border);
  display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border:1px solid var(--ui-tone-border);border-radius:var(--radius-md);background:var(--ui-tone-bg);color:var(--color-text);font-size:var(--text-sm);line-height:var(--leading-normal)}
.ui-alert>.ui-icon{color:var(--ui-tone);margin-top:1px}
.ui-alert__body{flex:1;min-width:0;display:grid;gap:2px}
.ui-alert__title{font-weight:var(--weight-bold)}
.ui-alert__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.ui-alert--success{--ui-tone:var(--color-success);--ui-tone-bg:var(--color-success-soft);--ui-tone-border:var(--color-success-border)}
.ui-alert--warning{--ui-tone:var(--color-warning);--ui-tone-bg:var(--color-warning-soft);--ui-tone-border:var(--color-warning-border)}
.ui-alert--danger{--ui-tone:var(--color-danger);--ui-tone-bg:var(--color-danger-soft);--ui-tone-border:var(--color-danger-border)}
.ui-error{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-8) var(--space-5);text-align:center;border:1px solid var(--color-danger-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.ui-error>.ui-icon{color:var(--color-danger)}
.ui-error__title{font-size:var(--text-md);font-weight:var(--weight-bold)}
.ui-error__desc{font-size:var(--text-sm);color:var(--color-text-muted);max-width:36em;overflow-wrap:anywhere}
.ui-error .ui-btn{margin-top:var(--space-2)}

/* ==== 空状态 ==== */
.ui-empty{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-10) var(--space-5);text-align:center;border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface)}
.ui-empty__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:var(--space-1)}
.ui-empty__title{font-size:var(--text-md);font-weight:var(--weight-bold)}
.ui-empty__desc{font-size:var(--text-sm);color:var(--color-text-muted);max-width:36em;line-height:var(--leading-relaxed)}
.ui-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin-top:var(--space-3)}
.ui-empty--compact{padding:var(--space-6) var(--space-4);border-style:solid;border-color:var(--color-border)}

/* ==== 骨架屏 ==== */
.ui-skeleton{display:grid;gap:var(--space-3)}
.ui-skeleton__line{height:14px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--color-surface-muted) 25%,var(--color-bg-sunken) 37%,var(--color-surface-muted) 63%);background-size:400% 100%;animation:ui-shimmer 1.4s ease infinite}
.ui-skeleton__line:nth-child(3n+1){width:92%}
.ui-skeleton__line:nth-child(3n+2){width:76%}
.ui-skeleton__line:nth-child(3n){width:58%}
.ui-skeleton__block{height:var(--ui-skeleton-h,120px);border-radius:var(--radius-md);background:var(--color-surface-muted);animation:ui-pulse 1.4s ease infinite}
@keyframes ui-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes ui-pulse{50%{opacity:.55}}

/* ==== 标签页与分段控件 ==== */
.ui-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--color-border);overflow-x:auto;scrollbar-width:none}
.ui-tab{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--control-h-md);padding:0 var(--space-3);margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--color-text-muted);font:var(--weight-semibold) var(--text-base) var(--font-sans);white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.ui-tab:hover{color:var(--color-text)}
.ui-tab[aria-selected="true"]{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.ui-tab:focus-visible{outline-offset:-2px}
.ui-tabpanel{padding-top:var(--space-4)}
.ui-tabpanel[hidden]{display:none}
.ui-segmented{display:inline-flex;max-width:100%;overflow-x:auto;gap:2px;padding:3px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);scrollbar-width:none}
.ui-segmented__option{flex:none;min-height:30px;padding:0 var(--space-3);border:0;border-radius:7px;background:none;color:var(--color-text-muted);font:var(--weight-medium) var(--text-sm) var(--font-sans);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.ui-segmented__option:hover{color:var(--color-text)}
.ui-segmented__option[aria-checked="true"]{background:var(--color-surface);color:var(--color-text);font-weight:var(--weight-bold);box-shadow:var(--shadow-sm)}

/* ==== 表格 ==== */
.ui-table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.ui-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.ui-table th,.ui-table td{padding:10px var(--space-3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--color-border)}
.ui-table th{position:sticky;top:0;background:var(--color-surface-muted);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-semibold);white-space:nowrap}
.ui-table tbody tr:last-child>*{border-bottom:0}
.ui-table tbody tr:hover{background:var(--color-surface-hover)}
.ui-table .is-num,.ui-table [data-num]{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-table tr[data-href],.ui-table tr.is-clickable{cursor:pointer}
.ui-table caption{caption-side:top;text-align:left;padding:var(--space-3);font-weight:var(--weight-semibold)}

/* ==== 键值列表 ==== */
.ui-kv{display:grid;gap:0;margin:0}
.ui-kv>div{display:grid;grid-template-columns:minmax(96px,30%) minmax(0,1fr);gap:var(--space-3);padding:10px 0;border-top:1px solid var(--color-border);font-size:var(--text-sm)}
.ui-kv>div:first-child{border-top:0}
.ui-kv dt{color:var(--color-text-muted)}
.ui-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ==== 代码与复制 ==== */
.ui-code{display:inline-block;max-width:100%;padding:2px 6px;border-radius:var(--radius-sm);background:var(--color-surface-muted);border:1px solid var(--color-border);font:var(--text-sm)/1.5 var(--font-mono);overflow-wrap:anywhere}
.ui-codeblock{position:relative;margin:0;padding:var(--space-3) var(--space-4);padding-right:96px;border-radius:var(--radius-md);background:#1c2721;color:#e6efe3;font:var(--text-sm)/1.7 var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.ui-codeblock>.ui-copy{position:absolute;top:var(--space-2);right:var(--space-2)}
.ui-copyfield{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.ui-copyfield>.ui-code,.ui-copyfield>.ui-input{flex:1;min-width:0}
.ui-copy[data-state="copied"]{--ui-btn-fg:var(--color-success);--ui-btn-border:var(--color-success-border);--ui-btn-bg:var(--color-success-soft)}
.ui-copy[data-state="failed"]{--ui-btn-fg:var(--color-danger);--ui-btn-border:var(--color-danger-border)}

/* ==== 进度 / 额度条 ==== */
.ui-progress{--ui-tone:var(--color-primary);--ui-track:var(--color-primary-soft);display:grid;gap:6px;min-width:0}
.ui-progress__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);font-size:var(--text-sm)}
.ui-progress__label{color:var(--color-text);font-weight:var(--weight-medium);min-width:0}
.ui-progress__value{font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);white-space:nowrap}
.ui-progress__track{height:8px;border-radius:var(--radius-full);background:var(--ui-track);overflow:hidden}
.ui-progress__bar{height:100%;width:0;border-radius:inherit;background:var(--ui-tone);transition:width var(--duration-slow) var(--ease-out)}
.ui-progress__hint{font-size:var(--text-xs);color:var(--color-text-subtle);line-height:var(--leading-normal)}
.ui-progress--warning{--ui-tone:var(--color-warning);--ui-track:var(--color-warning-soft)}
.ui-progress--danger{--ui-tone:var(--color-danger);--ui-track:var(--color-danger-soft)}
.ui-progress--info{--ui-tone:var(--color-info);--ui-track:var(--color-info-soft)}

/* ==== 步骤条 ==== */
.ui-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:ui-step}
.ui-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);padding-bottom:var(--space-6)}
.ui-step:last-child{padding-bottom:0}
.ui-step:not(:last-child)::before{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;border-radius:2px;background:var(--color-border)}
.ui-step__marker{counter-increment:ui-step;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-muted);font:var(--weight-bold) var(--text-sm) var(--font-sans)}
.ui-step__marker:empty::before{content:counter(ui-step)}
.ui-step__title{font-size:var(--text-md);font-weight:var(--weight-bold);line-height:32px}
.ui-step__desc{max-width:var(--prose-max);font-size:var(--text-sm);color:var(--color-text-muted);line-height:var(--leading-normal)}
.ui-step__body{display:grid;gap:var(--space-2);min-width:0}
.ui-step[data-state="current"] .ui-step__marker{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft)}
.ui-step[data-state="done"] .ui-step__marker{border-color:var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}
.ui-step[data-state="done"]:not(:last-child)::before{background:var(--color-primary)}

/* ==== Tooltip / 说明气泡（toggletip：点击、聚焦、悬停均可打开，内容同时被 aria-describedby 引用） ==== */
.ui-tooltip{position:relative;display:inline-flex;vertical-align:middle}
.ui-tooltip__trigger{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--color-text-subtle);cursor:pointer}
.ui-tooltip__trigger:hover{color:var(--color-text);background:var(--color-surface-muted)}
.ui-tooltip__content{position:absolute;z-index:var(--z-dropdown);left:50%;bottom:calc(100% + 6px);width:max-content;max-width:min(280px,80vw);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-text);color:var(--color-text-inverse);font-size:var(--text-xs);font-weight:var(--weight-regular);line-height:var(--leading-normal);text-align:left;white-space:normal;box-shadow:var(--shadow-md);transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out),visibility var(--duration-fast)}
.ui-tooltip:hover .ui-tooltip__content,.ui-tooltip:focus-within .ui-tooltip__content,.ui-tooltip[data-open="true"] .ui-tooltip__content{opacity:1;visibility:visible}

/* ==== Toast ==== */
.ui-toast-region{position:fixed;z-index:var(--z-toast);right:var(--space-4);bottom:var(--space-4);display:grid;gap:var(--space-2);width:min(380px,calc(100vw - 32px));pointer-events:none}
.ui-toast{--ui-tone:var(--color-info);display:flex;gap:var(--space-2);align-items:flex-start;margin:0;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-left:3px solid var(--ui-tone);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-lg);font-size:var(--text-sm);line-height:var(--leading-normal);overflow-wrap:anywhere;pointer-events:auto;animation:ui-toast-in var(--duration-base) var(--ease-out)}
.ui-toast>.ui-icon{color:var(--ui-tone);margin-top:2px}
.ui-toast--success{--ui-tone:var(--color-success)}
.ui-toast--warning{--ui-tone:var(--color-warning)}
.ui-toast--danger{--ui-tone:var(--color-danger)}
@keyframes ui-toast-in{from{opacity:0;transform:translateY(8px)}}

/* ==== 对话框与抽屉（基于原生 <dialog>，复用 workspaceDialog 的头部结构） ==== */
.ui-dialog{width:min(480px,calc(100% - 28px));padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);box-shadow:var(--shadow-lg)}
.ui-dialog::backdrop,.ui-drawer::backdrop{background:var(--color-overlay)}
.ui-drawer{margin:0 0 0 auto;width:min(480px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:0;border:0;border-left:1px solid var(--color-border);border-radius:var(--radius-lg) 0 0 var(--radius-lg);display:none;flex-direction:column;overflow:hidden}
.ui-drawer[open]{display:flex;animation:ui-drawer-in var(--duration-slow) var(--ease-out)}
.ui-drawer>.dialog-top{flex:none;gap:var(--space-3);padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--color-border)}
.ui-drawer>.dialog-top h2{font-size:var(--text-lg);line-height:var(--leading-tight);overflow-wrap:anywhere}
.ui-drawer>.dialog-top .icon-button{display:grid;place-items:center;width:var(--control-h-md);height:var(--control-h-md);padding:0;border-color:transparent;color:var(--color-text-muted)}
.ui-drawer>.dialog-top .icon-button:hover{background:var(--color-surface-muted);color:var(--color-text)}
.ui-drawer>.dialog-body{flex:1;overflow:auto;margin:0;padding:var(--space-5) var(--space-6);display:grid;gap:var(--space-5);align-content:start}
.ui-drawer__foot{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);background:var(--color-surface)}
.ui-drawer__foot:empty{display:none}
.ui-drawer__section{display:grid;gap:var(--space-2)}
.ui-drawer__section>h3{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--weight-semibold)}
@keyframes ui-drawer-in{from{transform:translateX(24px);opacity:.4}}

/* ==== 图表（ui-chart.js） ==== */
.ui-chart{position:relative;display:grid;gap:var(--space-3);min-width:0;margin:0}
.ui-chart.is-loading{opacity:.55;transition:opacity var(--duration-base) var(--ease-out)}
.ui-chart__legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin:0;padding:0;list-style:none;font-size:var(--text-xs);color:var(--color-text-muted)}
.ui-chart__legend li{display:inline-flex;align-items:center;gap:6px}
.ui-chart__key{flex:none;width:12px;height:12px;border-radius:3px}
.ui-chart__key--line{height:0;width:16px;border-radius:0;border-top:2px solid;background:none!important}
.ui-chart__key--dashed{border-top-style:dashed}
.ui-chart__key--dotted{border-top-style:dotted}
.ui-chart__plot{position:relative;min-width:0;border-radius:var(--radius-sm);touch-action:pan-y}
.ui-chart__plot:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
.ui-chart__svg{display:block;width:100%;overflow:visible;font:var(--text-xs) var(--font-sans);font-variant-numeric:tabular-nums}
.ui-chart__svg text{fill:var(--color-text-subtle)}
.ui-chart__grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges}
.ui-chart__axis{stroke:var(--chart-axis);stroke-width:1;shape-rendering:crispEdges}
.ui-chart__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ui-chart__area{stroke:none;fill-opacity:.1}
.ui-chart__crosshair{stroke:var(--color-text-subtle);stroke-width:1;shape-rendering:crispEdges}
.ui-chart__dot{stroke:var(--color-surface);stroke-width:2}
.ui-chart__bar{transition:opacity var(--duration-fast) var(--ease-out)}
.ui-chart__band{fill:var(--color-text);opacity:0}
.ui-chart__band.is-active{opacity:.05}
.ui-chart--animate .ui-chart__line,.ui-chart--animate .ui-chart__area,.ui-chart--animate .ui-chart__bar{animation:ui-chart-in var(--duration-slow) var(--ease-out)}
@keyframes ui-chart-in{from{opacity:0}}
.ui-chart__tooltip{position:absolute;z-index:var(--z-dropdown);top:0;left:0;min-width:140px;max-width:240px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-md);font-size:var(--text-xs);pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--duration-fast) var(--ease-out)}
.ui-chart__tooltip.is-visible{opacity:1;visibility:visible}
.ui-chart__tooltip-title{color:var(--color-text-muted);margin-bottom:4px}
.ui-chart__tooltip-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:6px;line-height:1.7}
.ui-chart__tooltip-row strong{font-variant-numeric:tabular-nums;color:var(--color-text);font-size:var(--text-sm);text-align:right}
.ui-chart__tooltip-row span:nth-child(2){color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-chart__tooltip-key{width:12px;border-top:2px solid}
.ui-chart__empty{display:grid;place-items:center;align-content:center;gap:var(--space-1);min-height:var(--ui-chart-h,200px);padding:var(--space-4);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}
.ui-chart__empty strong{color:var(--color-text);font-size:var(--text-base)}
.ui-chart__table>summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch-min);font-size:var(--text-xs);color:var(--color-text-muted);cursor:pointer;list-style:none}
.ui-chart__table>summary::-webkit-details-marker{display:none}
.ui-chart__table>summary .ui-icon{transition:transform var(--duration-fast) var(--ease-out)}
.ui-chart__table[open]>summary .ui-icon{transform:rotate(90deg)}
.ui-chart__table .ui-table-wrap{max-height:280px;overflow:auto}
.ui-chart__summary{font-size:var(--text-xs);color:var(--color-text-subtle)}
/* 堆叠条（一个整体分成几部分） */
.ui-seg{display:flex;gap:2px;height:28px;min-width:0}
.ui-seg__part{position:relative;display:flex;align-items:center;min-width:0;padding:0 6px;border-radius:4px;font-size:var(--text-xs);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:visible;cursor:default;transition:filter var(--duration-fast) var(--ease-out)}
.ui-seg__part:hover,.ui-seg__part:focus-visible,.ui-seg__part.is-active{filter:brightness(1.08)}
.ui-seg__part:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.ui-seg__part[data-ink="light"]{color:#fff}
.ui-seg__part[data-ink="dark"]{color:#111a14}
.ui-seg--thin{height:8px;gap:2px}
.ui-seg--thin .ui-seg__part{padding:0;border-radius:var(--radius-full)}
.ui-sparkline{display:block;overflow:visible}

/* ==== 移动端：触控尺寸与输入防缩放 ==== */
@media (max-width:768px){
  .ui-btn{min-height:var(--touch-min)}
  .ui-btn--sm{min-height:36px}
  .ui-btn--icon{width:var(--touch-min)}
  .ui-input,.ui-select,.ui-textarea{min-height:var(--touch-min);font-size:16px}
  .ui-tab{min-height:var(--touch-min)}
  .ui-segmented__option{min-height:var(--touch-min)}
  .ui-card{padding:var(--space-4)}
  .ui-drawer{width:100vw;border-radius:0;border-left:0}
  .ui-drawer>.dialog-top,.ui-drawer>.dialog-body,.ui-drawer__foot{padding-inline:var(--space-4)}
  .ui-kv>div{grid-template-columns:minmax(0,1fr);gap:2px}
  /* 表格卡片化：<table class="ui-table ui-table--cards">，每个 td 带 data-label */
  .ui-table--cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ui-table--cards,.ui-table--cards tbody,.ui-table--cards tr,.ui-table--cards td{display:block;width:100%}
  .ui-table--cards tr{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
  .ui-table--cards tbody tr:last-child{border-bottom:0}
  .ui-table--cards td{display:flex;justify-content:space-between;gap:var(--space-3);padding:3px 0;border:0;text-align:right}
  .ui-table--cards td::before{content:attr(data-label);flex:none;color:var(--color-text-muted);font-size:var(--text-xs);text-align:left}
  .ui-table--cards td[data-label=""]::before{content:none}
  .ui-table--cards td.is-primary{display:block;text-align:left;font-weight:var(--weight-semibold);padding-bottom:6px}
  .ui-table--cards td.is-primary::before{content:none}
  .ui-table--cards td>*{min-width:0;overflow-wrap:anywhere}
}

/* ==== 减少动态效果 ==== */
@media (prefers-reduced-motion:reduce){
  .ui-btn,.ui-input,.ui-select,.ui-textarea,.ui-switch,.ui-switch::after,.ui-choice,.ui-card--interactive,.ui-tab,.ui-segmented__option,.ui-progress__bar,.ui-tooltip__content,.ui-chart__tooltip,.ui-chart__bar,.ui-chart__table>summary .ui-icon,.ui-seg__part{transition:none}
  .ui-skeleton__line,.ui-skeleton__block,.ui-toast,.ui-drawer[open],.ui-chart--animate .ui-chart__line,.ui-chart--animate .ui-chart__area,.ui-chart--animate .ui-chart__bar{animation:none}
  .ui-spinner,.ui-btn[aria-busy="true"]::after{animation-duration:2.4s}
}
@media (forced-colors:active){
  .ui-badge,.ui-alert,.ui-toast,.ui-seg__part{border:1px solid CanvasText}
  .ui-progress__bar{background:Highlight}
}