@layer reset, tokens, ui-kit, business, overrides;
/* Lyna UI Kit v1.0 — 总入口
 * ================================
 * 声明级联层顺序，@import 各模块并分派到对应 layer。
 * variables.css 通过 <link> 在 bundle 之前单独加载，不在此重复 @import。
 */
@layer reset{
/* Simple reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  height: 100dvh;  /* iOS Safari 动态视口高度 */
  width: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-void);
  color: var(--text-main);
  overflow: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: auto;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--color-primary);
}

a:hover {
  text-decoration: underline;
}

button, input, textarea {
  font-family: inherit;
  border: none;
  outline: none;
  background: transparent;
}

/* Scrollbar Styling - 记事本风格 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid var(--bg-void);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* 选中文字的颜色 - 荧光笔效果 */
::selection {
  background: rgba(212, 144, 10, 0.3);
  color: var(--text-main);
}

/* 无障碍：减少动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 移动端基础字号保底 */
@media (max-width: 768px) {
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
  }
}

/* safe-area padding for fixed/absolute positioned elements */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #navbar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
}
@layer ui-kit{

/* Lyna UI Kit — 动画关键帧
 * ================================
 * 仅声明 @keyframes，不应用到任何 selector。
 * 应用由各 primitive/composite 的 CSS 决定。
 */

/* 旋转动画（Spinner / Loading 图标） */
@keyframes ui-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 淡入 */
@keyframes ui-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 心跳脉冲 */
@keyframes ui-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* 从下方滑入（Toast 等） */
@keyframes ui-slide-in-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 从上方滑入（Notice Banner 等） */
@keyframes ui-slide-in-down {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* 启动屏加载点动画 */
@keyframes ui-loading-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
}
@layer ui-kit{

/* Lyna UI Kit — 滚动条样式
 * ================================
 * 从 reset.css 字节级等价迁移。
 * Stage 1-3: 被 unlayered 业务 CSS 高优先级覆盖（等价于"还在原处"）
 * Stage 4:   业务 CSS 进 @layer business 后由本文件接管
 */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-void);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  border: 1px solid var(--bg-void);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
}
@layer ui-kit{

/* Lyna UI Kit — 焦点管理
 * ================================
 * Stage 4: 填入 :focus-visible 全局规则，与 14 处历史 :focus 业务迁移一并做。
 */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
}
@layer ui-kit{

/* Lyna UI Kit — 无障碍辅助
 * ================================
 * 仅保留 prefers-reduced-motion / prefers-contrast 兜底。
 * 默认状态下视觉不变。
 */

/* 减少动画（从 reset.css 迁移，Stage 4 起由 ui-kit layer 接管） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 高对比模式最小兜底（Stage 7 完善） */
@media (prefers-contrast: more) {
  :root {
    --border-color-default: var(--text-main);
  }
}
}
@layer ui-kit{

/* Lyna UI Kit — 打印样式
 * ================================
 * Stage 1: body 颜色重置
 * Stage 3: toast / tooltip 隐藏
 * Stage 5: modal / popover / action-sheet / toolbar / resize-handle / context-menu / menu / dropdown 隐藏 + card/panel 阴影变描边
 * Stage 7: 转为验证，补全所有浮层隐藏
 */

@media print {
  /* 基础重置 */
  body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Portal 浮层全部隐藏 */
  .ui-tooltip,
  .ui-modal,
  .ui-modal-backdrop,
  .ui-popover,
  .ui-floating-container,
  .ui-action-sheet,
  .ui-toolbar,
  .ui-resize-handle,
  .ui-context-menu,
  .ui-menu,
  .ui-dropdown,
  #ui-portal > * {
    display: none !important;
  }

  /* ---- Card / Panel 阴影变描边 ---- */
  .ui-card,
  .ui-panel {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  /* ---- 确保内容区域全宽 ---- */
  .ui-modal__body,
  .ui-panel__body {
    max-height: none !important;
    overflow: visible !important;
  }
}
}
/* Primitive 组件（Stage 2+） */
@layer ui-kit{
/*
name: ui-btn
description: 通用按钮
variants: primary | secondary | danger | ghost | sm | lg | block | icon
states: is-loading | is-disabled
example: <button class="ui-btn ui-btn--primary">保存</button>
*/
/* stylelint-disable-next-line selector-class-pattern */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: var(--line-height-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color-default);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  min-height: var(--hit-area-min);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.ui-btn:hover {
  background: var(--bg-panel);
  border-color: var(--border-color-strong);
}

.ui-btn:active {
  transform: scale(0.98);
}

/* Variants */
.ui-btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ui-btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-btn-primary);
}

.ui-btn--secondary {
  background: transparent;
  border-color: var(--border-color-strong);
  color: var(--text-main);
}

.ui-btn--secondary:hover {
  background: var(--bg-panel);
}

.ui-btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.ui-btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 85%, black);
  border-color: color-mix(in srgb, var(--color-danger) 85%, black);
}

.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.ui-btn--ghost:hover {
  background: var(--bg-panel);
  color: var(--text-main);
}

/* Sizes */
.ui-btn--sm {
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  min-height: 32px;
  border-radius: var(--radius-sm);
}

.ui-btn--lg {
  padding: var(--space-5) var(--space-7);
  font-size: var(--font-size-lg);
  min-height: 48px;
}

/* Full width */
.ui-btn--block {
  display: flex;
  width: 100%;
}

/* Icon-only */
.ui-btn--icon {
  padding: var(--space-3);
  min-width: var(--hit-area-min);
}

/* States */
.ui-btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.ui-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: calc(50% - 8px) auto auto calc(50% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-circle);
  animation: ui-spin 0.6s linear infinite;
}

.ui-btn.is-disabled,
.ui-btn:disabled {
  opacity: 0.65;
  pointer-events: none;
}
}
@layer ui-kit{
/*
name: ui-badge
description: 状态标签 — 颜色组合均满足 WCAG AA (4.5:1)
variants: success | warning | info | neutral
example: <span class="ui-badge ui-badge--success">已安装</span>
*/
.ui-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-xs);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  user-select: none;
}

.ui-badge--success { background: #d1fae5; color: #065f46; }
.ui-badge--warning { background: #fef3c7; color: #92400e; }
.ui-badge--info    { background: #dbeafe; color: #1e40af; }
.ui-badge--neutral { background: var(--bg-panel); color: var(--text-main); }
}
@layer ui-kit{
/*
name: ui-chip
description: 小型标签/筛选芯片 — 颜色组合均满足 WCAG AA (4.5:1)
variants: success | warning | info | neutral
example: <span class="ui-chip ui-chip--info">AI</span>
*/
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: var(--line-height-xs);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  white-space: nowrap;
  user-select: none;
}

.ui-chip--success { background: #d1fae5; border-color: transparent; color: #065f46; }
.ui-chip--warning { background: #fef3c7; border-color: transparent; color: #92400e; }
.ui-chip--info    { background: #dbeafe; border-color: transparent; color: #1e40af; }
.ui-chip--neutral { background: var(--bg-panel); color: var(--text-main); }
}
@layer ui-kit{
/*
name: ui-avatar
description: 用户头像
variants: sm | md | lg | square | circle
example: <div class="ui-avatar ui-avatar--circle ui-avatar--md"><img src="..."></div>
*/
.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-panel);
  color: var(--text-muted);
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}

.ui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-avatar--circle { border-radius: var(--radius-circle); }
.ui-avatar--square  { border-radius: var(--radius-sm); }

.ui-avatar--sm { width: 24px; height: 24px; font-size: var(--font-size-xs); }
.ui-avatar--md { width: 36px; height: 36px; font-size: var(--font-size-md); }
.ui-avatar--lg { width: 48px; height: 48px; font-size: var(--font-size-lg); }
}
@layer ui-kit{
/*
name: ui-spinner
description: 加载旋转指示器
variants: sm | md | lg
example: <div class="ui-spinner ui-spinner--md"></div>
*/
.ui-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color-default);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-circle);
  animation: ui-spin 0.6s linear infinite;
}

.ui-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.ui-spinner--md { width: 20px; height: 20px; border-width: 2px; }
.ui-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
}
@layer ui-kit{
/*
name: ui-empty
description: 空状态占位
example: <div class="ui-empty"><div class="ui-empty__icon">...</div><div class="ui-empty__title">暂无数据</div></div>
*/
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-9) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}

.ui-empty__icon {
  font-size: 48px;
  margin-bottom: var(--space-5);
  opacity: 0.5;
}

.ui-empty__title {
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.ui-empty__desc {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-6);
}

.ui-empty__action {
  margin-top: var(--space-4);
}
}
@layer ui-kit{
/*
name: ui-close
description: 关闭按钮（×）
variants: sm | lg
example: <button class="ui-close" aria-label="关闭"></button>
*/
.ui-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ui-close::before {
  content: '×';
  font-size: 18px;
  line-height: 1;
}

.ui-close:hover {
  background: var(--bg-panel);
  color: var(--text-main);
}

.ui-close--sm { width: 22px; height: 22px; }
.ui-close--sm::before { font-size: 15px; }

.ui-close--lg { width: 36px; height: 36px; }
.ui-close--lg::before { font-size: 24px; }
}
@layer ui-kit{
/*
name: ui-back
description: 返回按钮（←）
example: <button class="ui-back" aria-label="返回"></button>
*/
.ui-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.ui-back::before {
  content: '←';
  font-size: 16px;
}

.ui-back:hover {
  background: var(--bg-panel);
  color: var(--text-main);
}
}
@layer ui-kit{
/*
name: ui-chevron
description: 折叠/展开箭头
variants: up | down | left | right
example: <span class="ui-chevron ui-chevron--down"></span>
*/
.ui-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
}

.ui-chevron--down  { transform: rotate(45deg); }
.ui-chevron--up    { transform: rotate(-135deg); }
.ui-chevron--right { transform: rotate(-45deg); }
.ui-chevron--left  { transform: rotate(135deg); }
}
@layer ui-kit{
/*
name: ui-icon
description: 图标包裹（Remix Icon 等第三方图标库统一样式）
variants: sm | md | lg
example: <span class="ui-icon ui-icon--md"><i class="ri-save-line"></i></span>
*/
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.ui-icon--sm { font-size: 14px; width: 24px; height: 24px; }
.ui-icon--md { font-size: 18px; width: 28px; height: 28px; }
.ui-icon--lg { font-size: 24px; width: 36px; height: 36px; }

.ui-icon-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
}
@layer ui-kit{
/*
name: ui-divider
description: 分割线
variants: vertical | dashed
example: <hr class="ui-divider">
*/
.ui-divider {
  border: none;
  border-top: 1px solid var(--border-color-default);
  margin: var(--space-4) 0;
}

.ui-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  border-top: none;
  border-inline-start: 1px solid var(--border-color-default);
  margin: 0 var(--space-3);
  vertical-align: middle;
}

.ui-divider--dashed {
  border-top-style: dashed;
}
}
@layer ui-kit{
/*
name: ui-status
description: 操作状态提示（保存成功/失败等）
states: default | success | error | info
example: <span class="ui-status" data-state="success">已保存</span>
*/
.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  min-height: 22px;
  transition: color var(--duration-fast) var(--ease-out);
}

.ui-status[data-state="success"] { color: var(--color-success); }
.ui-status[data-state="error"]   { color: var(--color-danger); }
.ui-status[data-state="info"]    { color: var(--color-primary); }
}
/* Primitive 组件（Stage 3 交互） */
@layer ui-kit{
/*
name: ui-input
description: 文本输入框
variants: inline | sm
states: is-invalid
*/
.ui-input {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border-color-default);
  border-radius: var(--radius-md);
  min-height: var(--hit-area-min);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  outline: none;
}

.ui-input.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-soft);
}

.ui-input--inline { display: inline-block; width: auto; }
.ui-input--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); min-height: 32px; }
}
@layer ui-kit{
/*
name: ui-textarea
description: 多行文本输入（与 ui-input 视觉对齐）
variants: sm | mono | no-resize
states: is-invalid
example: <textarea class="ui-textarea" rows="4"></textarea>
*/
.ui-textarea {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-main);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--text-main);
  background: var(--bg-input);
  border: 1px solid var(--border-color-default);
  border-radius: var(--radius-md);
  min-height: calc(var(--hit-area-min) * 2);
  resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.ui-textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-soft);
  outline: none;
}

.ui-textarea.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger-soft);
}

.ui-textarea--sm        { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.ui-textarea--mono      { font-family: var(--font-mono); }
.ui-textarea--no-resize { resize: none; }
}
@layer ui-kit{
/*
name: ui-field
description: 表单字段包裹（label + hint + error）
example: <div class="ui-field"><label class="ui-field__label">名称</label><input class="ui-input"><span class="ui-field__error">必填</span></div>
*/
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.ui-field__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.ui-field__label__required::after {
  content: ' *';
  color: var(--color-danger);
}

.ui-field__hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.ui-field__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  display: none;
}

.ui-field.is-invalid .ui-field__error { display: block; }
}
@layer ui-kit{
/*
name: ui-tabs
description: 标签页切换
variants: vertical | icon-rail
example: <div class="ui-tabs"><button class="ui-tabs__btn is-active">Tab1</button></div>
*/
.ui-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color-default); }

.ui-tabs__btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-md);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  min-height: var(--hit-area-min);
}

.ui-tabs__btn:hover { color: var(--text-main); }

.ui-tabs__btn.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.ui-tabs__panel { display: none; padding: var(--space-5) 0; }
.ui-tabs__panel.is-active { display: block; }

/* —— 垂直变体：竖排文字 tab + 右侧 2px 竖线 —— */
.ui-tabs--vertical { flex-direction: column; border-bottom: none; border-inline-end: 2px solid var(--border-color-default); }
.ui-tabs--vertical .ui-tabs__btn { border-bottom: none; border-inline-end: 2px solid transparent; margin-bottom: 0; margin-inline-end: -2px; }
.ui-tabs--vertical .ui-tabs__btn.is-active { border-inline-end-color: var(--color-primary); }

/* —— 图标轨道变体：36px 宽 icon-only 侧栏（桌面窗口风格） —— */
.ui-tabs--icon-rail {
  flex-direction: column;
  width: 36px;
  flex-shrink: 0;
  align-items: center;
  padding-top: var(--space-3);
  gap: 4px;
  border-bottom: none;
  border-inline-start: 1px solid var(--border-color-default);
  background: rgba(0, 0, 0, 0.015);
}
.ui-tabs--icon-rail .ui-tabs__btn {
  padding: 6px;
  width: 28px;
  min-height: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  border-inline-end: none;
  margin: 0;
  font-size: 16px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.ui-tabs--icon-rail .ui-tabs__btn:hover {
  background: rgba(43, 94, 167, 0.06);
  color: var(--text-main);
}
.ui-tabs--icon-rail .ui-tabs__btn.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.ui-tabs__rail-divider {
  width: 20px;
  height: 1px;
  background: var(--border-color-default);
  margin: 4px 0;
  align-self: center;
}
}
@layer ui-kit{
/*
name: ui-toggle
description: 开关
example:
  <!-- 推荐：包装原生 checkbox，无需 JS、键盘可达、可参与表单提交 -->
  <label class="ui-toggle">
    <input type="checkbox" class="ui-toggle__input" checked>
    <span class="ui-toggle__thumb"></span>
  </label>

  <!-- 兼容：纯视觉 div（需 JS 切换 .is-checked） -->
  <div class="ui-toggle is-checked"><div class="ui-toggle__thumb"></div></div>
*/
.ui-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: var(--border-color-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}

/* 原生 checkbox（视觉透明，覆盖整个 toggle 触发区） */
.ui-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.ui-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-fast) var(--ease-out);
  pointer-events: none;
}

/* 兼容旧用法：手动加 .is-checked 也生效 */
.ui-toggle.is-checked { background: var(--color-primary); }
.ui-toggle.is-checked .ui-toggle__thumb { transform: translateX(20px); }

/* 推荐用法：随原生 checkbox 状态切换 */
.ui-toggle:has(.ui-toggle__input:checked)               { background: var(--color-primary); }
.ui-toggle:has(.ui-toggle__input:checked) .ui-toggle__thumb { transform: translateX(20px); }
.ui-toggle:has(.ui-toggle__input:focus-visible)         { box-shadow: 0 0 0 2px var(--color-primary-soft); }
.ui-toggle:has(.ui-toggle__input:disabled)              { opacity: 0.5; cursor: not-allowed; }
}
@layer ui-kit{
/*
name: ui-tooltip
description: 提示气泡
*/
.ui-tooltip {
  position: absolute;
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: #fff;
  background: var(--text-main);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  animation: ui-fade-in var(--duration-fast) var(--ease-out);
  max-width: 240px;
}
}
@layer ui-kit{
/*
name: ui-skeleton
description: 骨架屏占位
variants: bar | circle | text
example: <div class="ui-skeleton ui-skeleton--text"></div>
*/
.ui-skeleton {
  background: linear-gradient(90deg, var(--bg-panel) 25%, var(--bg-void) 50%, var(--bg-panel) 75%);
  background-size: 200% 100%;
  animation: ui-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes ui-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-skeleton--bar   { height: 16px; width: 100%; }
.ui-skeleton--circle{ height: 40px; width: 40px; border-radius: var(--radius-circle); }
.ui-skeleton--text  { height: 12px; width: 80%; margin-bottom: var(--space-3); }
}
@layer ui-kit{
/*
name: ui-list / ui-row
description: 列表项 / 行布局
example: <div class="ui-list"><div class="ui-row">...</div></div>
*/
.ui-list { display: flex; flex-direction: column; }

.ui-list__item,
.ui-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color-subtle);
  transition: background var(--duration-fast) var(--ease-out);
}

.ui-list__item:hover,
.ui-row:hover { background: var(--bg-panel); }

.ui-row__leading  { flex-shrink: 0; }
.ui-row__trailing { flex-shrink: 0; margin-inline-start: auto; }
.ui-row__title     { font-size: var(--font-size-md); font-weight: 500; }
.ui-row__desc      { font-size: var(--font-size-sm); color: var(--text-muted); }
}
@layer ui-kit{
/*
name: ui-section-header
description: 区块头部（标题 + 操作按钮）
example: <div class="ui-section-header"><h3 class="ui-section-header__title">设置</h3><div class="ui-section-header__actions">...</div></div>
*/
.ui-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
}

.ui-section-header__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-main);
}

.ui-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
}
@layer ui-kit{
/*
name: ui-section-title
description: 子区块标题
example: <h4 class="ui-section-title">基本设置</h4>
*/
.ui-section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-color-subtle);
}
}
@layer ui-kit{
/*
name: ui-toolbar
description: 工具栏/操作栏
example: <div class="ui-toolbar"><div class="ui-toolbar__group">...</div></div>
*/
.ui-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color-default);
  min-height: 44px;
}

.ui-toolbar__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
}
@layer ui-kit{
/*
name: ui-progress
description: 进度条
variants: indeterminate
*/
.ui-progress {
  width: 100%;
  height: 6px;
  background: var(--bg-panel);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.ui-progress__bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transition: width var(--duration-normal) var(--ease-out);
}

.ui-progress--indeterminate .ui-progress__bar {
  width: 40% !important;
  animation: ui-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes ui-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
}
@layer ui-kit{
/*
name: ui-slider
description: 滑块
example:
  <!-- 推荐：包装原生 input[type=range] -->
  <div class="ui-slider">
    <input type="range" class="ui-slider__input" min="0" max="100" value="70">
    <span class="ui-slider__value">70</span>
  </div>

  <!-- 兼容：纯视觉 div（需 JS 计算位置） -->
  <div class="ui-slider">
    <div class="ui-slider__track"><div class="ui-slider__fill"></div></div>
    <div class="ui-slider__thumb"></div>
  </div>
*/
.ui-slider {
  position: relative;
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
  user-select: none;
}

/* —— 推荐用法：原生 input[type=range] —— */
.ui-slider__input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color-default);
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
  margin: 0;
}
.ui-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-card);
  cursor: grab;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.ui-slider__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-circle);
  box-shadow: var(--shadow-card);
  cursor: grab;
}
.ui-slider__input:focus-visible { box-shadow: 0 0 0 2px var(--color-primary-soft); }
.ui-slider__input:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: var(--shadow-btn-primary); }
.ui-slider__input:disabled { opacity: 0.5; cursor: not-allowed; }

.ui-slider__value {
  margin-left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
}

/* —— 兼容用法：纯视觉 div —— */
.ui-slider__track {
  width: 100%;
  height: 4px;
  background: var(--bg-panel);
  border-radius: var(--radius-pill);
  position: relative;
}

.ui-slider__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.ui-slider__thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

.ui-slider__thumb:active { cursor: grabbing; box-shadow: var(--shadow-btn-primary); }
}
@layer ui-kit{
/*
name: ui-breadcrumb
description: 面包屑导航
example: <nav class="ui-breadcrumb"><span class="ui-breadcrumb__segment">首页</span><span class="ui-breadcrumb__separator">/</span></nav>
*/
.ui-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.ui-breadcrumb__segment {
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.ui-breadcrumb__segment:hover { color: var(--color-primary); }

.ui-breadcrumb__separator {
  color: var(--border-color-strong);
  user-select: none;
}
}
@layer ui-kit{
/*
name: ui-resize-handle
description: 拖拽调整手柄
variants: n | s | e | w | ne | nw | se | sw
*/
.ui-resize-handle { position: absolute; z-index: var(--z-dropdown); }
.ui-resize-handle--n  { top: 0; left: 0; right: 0; height: 4px; cursor: n-resize; }
.ui-resize-handle--s  { bottom: 0; left: 0; right: 0; height: 4px; cursor: s-resize; }
.ui-resize-handle--e  { top: 0; right: 0; bottom: 0; width: 4px; cursor: e-resize; }
.ui-resize-handle--w  { top: 0; left: 0; bottom: 0; width: 4px; cursor: w-resize; }
.ui-resize-handle--ne { top: 0; right: 0; width: 8px; height: 8px; cursor: ne-resize; }
.ui-resize-handle--nw { top: 0; left: 0; width: 8px; height: 8px; cursor: nw-resize; }
.ui-resize-handle--se { bottom: 0; right: 0; width: 8px; height: 8px; cursor: se-resize; }
.ui-resize-handle--sw { bottom: 0; left: 0; width: 8px; height: 8px; cursor: sw-resize; }
}
@layer ui-kit{
/*
name: ui-steps
description: 步骤指示器
example: <div class="ui-steps"><div class="ui-step ui-step--done">1. 下载</div><div class="ui-step ui-step--active">2. 安装</div></div>
*/
.ui-steps {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ui-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  position: relative;
}

.ui-step--active { color: var(--color-primary); font-weight: 600; }
.ui-step--done   { color: var(--color-success); }

.ui-step::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: currentColor;
}

.ui-step--done::before { content: '✓'; width: auto; height: auto; background: none; font-size: 12px; }
}
/* Primitive 组件（领域级 — desktop window） */
@layer ui-kit{

/*
name: win-btn
description: 桌面窗口红黄绿控制按钮（关闭/最小化/最大化）
variants: close | min | max
domain: desktop-window
---
win- 是 desktop window 领域前缀，属于领域级 primitive，
与通用 ui- 前缀的 ui-kit primitive 共存。
*/

.win-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.1s;
  flex-shrink: 0;
}

.win-btn svg {
  width: 6px;
  height: 6px;
  opacity: 0;
  transition: opacity 0.12s;
}

.win-btn:hover { filter: brightness(0.85); }

.win-btn-close  { background: var(--color-danger); }
.win-btn-min    { background: var(--color-warning); }
.win-btn-max    { background: #28c840; }
}
/* Composite 组件（Stage 5） */
@layer ui-kit{
/*
name: ui-card
description: 卡片容器
variants: bordered | compact
*/
.ui-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.ui-card--bordered { border: 1px solid var(--border-color-default); box-shadow: none; }
.ui-card--compact  { padding: var(--space-3); }

.ui-card__header { padding: var(--space-5) var(--space-5) 0; font-weight: 600; font-size: var(--font-size-lg); }
.ui-card__title  { font-size: var(--font-size-lg); font-weight: 600; color: var(--text-main); }
.ui-card__body   { padding: var(--space-5); }
.ui-card__footer { padding: 0 var(--space-5) var(--space-5); display: flex; gap: var(--space-3); justify-content: flex-end; }
}
@layer ui-kit{
/*
name: ui-modal
description: 模态弹窗
states: is-open
*/
.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(60, 50, 38, 0.4);
  z-index: var(--z-modal-backdrop);
  animation: ui-fade-in var(--duration-fast) var(--ease-out);
}

.ui-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: ui-modal-in var(--duration-normal) var(--ease-out);
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.ui-modal--sm { width: 400px; }
.ui-modal--md { width: 560px; }
.ui-modal--lg { width: 760px; }

.ui-modal__header  { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-color-default); display: flex; align-items: center; justify-content: space-between; }
.ui-modal__title   { font-size: var(--font-size-lg); font-weight: 600; }
.ui-modal__close   { cursor: pointer; }
.ui-modal__body    { padding: var(--space-6); overflow-y: auto; flex: 1; }
.ui-modal__footer  { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-color-default); display: flex; gap: var(--space-3); justify-content: flex-end; }

body.is-modal-open { overflow: hidden; }
}
@layer ui-kit{
/*
name: ui-panel
description: 面板容器
variants: bordered | floating
*/
.ui-panel {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ui-panel--bordered { border: 1px solid var(--border-color-default); }
.ui-panel--floating  { box-shadow: var(--shadow-popover); }

.ui-panel__header  { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color-subtle); display: flex; align-items: center; justify-content: space-between; }
.ui-panel__title   { font-size: var(--font-size-md); font-weight: 600; }
.ui-panel__actions { display: flex; gap: var(--space-3); }
.ui-panel__body    { padding: var(--space-5); }
.ui-panel__footer  { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-color-subtle); }
}
@layer ui-kit{
/*
name: ui-popover / ui-menu / ui-dropdown / ui-context-menu / ui-action-sheet
description: 弹出层系列共用定位基类
*/
.ui-floating-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  min-width: 160px;
  animation: ui-fade-in var(--duration-fast) var(--ease-out);
}

.ui-menu__item,
.ui-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  min-height: 36px;
}

.ui-menu__item:hover,
.ui-dropdown__item:hover { background: var(--bg-panel); }

.ui-menu__item--danger { color: var(--color-danger); }
.ui-menu__separator { height: 1px; background: var(--border-color-default); margin: var(--space-2) 0; }
.ui-menu__section { padding: var(--space-2) var(--space-5); font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; text-transform: uppercase; }

.ui-action-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-modal);
  z-index: var(--z-modal);
  padding: var(--space-6);
  animation: ui-slide-in-up var(--duration-normal) var(--ease-out);
}

.ui-action-sheet__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  font-size: var(--font-size-lg);
  border-bottom: 1px solid var(--border-color-subtle);
  cursor: pointer;
}
.ui-action-sheet__item--danger { color: var(--color-danger); }
.ui-action-sheet__cancel { margin-top: var(--space-4); font-weight: 600; }

@media (min-width: 769px) {
  .ui-action-sheet { position: fixed; bottom: auto; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); border-radius: var(--radius-lg); width: 320px; }
}
}
@layer ui-kit{
/*
name: ui-form
description: 表单容器
*/
.ui-form { display: flex; flex-direction: column; gap: var(--space-5); }

.ui-form__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color-subtle);
}

/*
name: ui-form-row
description: 横向 label + control + hint 行布局
example:
  <div class="ui-form-row">
    <span class="ui-form-row__label">音量</span>
    <div class="ui-form-row__control"> ...slider... </div>
    <span class="ui-form-row__hint">0~100</span>
  </div>
*/
.ui-form-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  min-height: var(--hit-area-min);
}

.ui-form-row__label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
  min-width: 80px;
}

.ui-form-row__control {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ui-form-row__hint {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* control 在右侧、label 占据剩余空间（开关式行常用） */
.ui-form-row--reverse .ui-form-row__label   { min-width: 0; flex: 1; }
.ui-form-row--reverse .ui-form-row__control { flex: 0 0 auto; }
}
@layer ui-kit{
/*
name: ui-table
description: 数据表格
*/
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }

.ui-table__head { text-align: left; font-weight: 600; color: var(--text-secondary); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--border-color-default); background: var(--bg-panel); }

.ui-table__row { border-bottom: 1px solid var(--border-color-subtle); transition: background var(--duration-fast); }
.ui-table__row:hover { background: var(--bg-panel); }

.ui-table__cell { padding: var(--space-3) var(--space-4); color: var(--text-main); }
}
@layer ui-kit{

/*
name: ui-banner
description: 浮动通知卡片（右上角滑入，带进度条自动消失）
variants: compact
*/

/* 容器 */
.ui-banner-container {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: var(--z-notice);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  pointer-events: none;
}
body > .ui-banner-container {
  position: fixed;
}

/* 卡片 */
.ui-banner {
  width: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--duration-normal), transform var(--duration-normal);
  box-shadow: var(--shadow-card);
  background: var(--bg-card);
  border: 1px solid var(--border-color-subtle);
  padding: 0;
}
.ui-banner.is-show {
  opacity: 1;
  transform: translateX(0);
}
.ui-banner.is-dismiss {
  opacity: 0;
  transform: translateX(100%);
}

/* 紧凑尺寸 */
.ui-banner--compact {
  width: 280px;
}

/* Header */
.ui-banner__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-3);
}
.ui-banner__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}
.ui-banner__icon.is-pulsing {
  animation: ui-banner-pulse 1.5s infinite;
}
@keyframes ui-banner-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.ui-banner__title-wrap {
  flex: 1;
  min-width: 0;
}
.ui-banner__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-banner__subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Body */
.ui-banner__body {
  padding: 0 var(--space-5) var(--space-3);
}
.ui-banner__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actions */
.ui-banner__actions {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-4);
}

/* Progress */
.ui-banner__progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.04);
}
.ui-banner__progress-bar {
  height: 100%;
  width: 100%;
  transition: width 8s linear;
}
}
/* Composite 组件（领域级 — desktop window） */
@layer ui-kit{

/*
name: win-titlebar
description: 桌面窗口通用标题栏 — 毛玻璃背景 + Mac 风格控制按钮 + 绝对居中标题
domain: desktop-window
*/

.win-titlebar {
  height: 36px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  cursor: move;
  user-select: none;
  position: relative;   /* 锚点，供 .win-title 绝对定位 */
}

.win-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 100px);   /* 左右各留 50px 安全区 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  pointer-events: none;            /* 拖拽穿透到 titlebar */
}

.win-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Mac 风格：悬停按钮组时揭示按钮内 SVG 图标 */
.win-controls:hover .win-btn svg {
  opacity: 1;
}
}
/* Pattern 页面骨架（Stage 8） */
@layer ui-kit{
/*
name: ui-pattern-settings
description: 设置页骨架模板
*/
.ui-pattern-settings {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  max-width: var(--breakpoint-lg);
  height: 100%;
}

.ui-pattern-settings__nav {
  /* 左侧 tabs 导航 */
}

.ui-pattern-settings__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ui-pattern-settings__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color-default);
}

@media (max-width: 768px) {
  .ui-pattern-settings {
    grid-template-columns: 1fr;
  }
  .ui-pattern-settings__nav {
    display: none;
  }
}
}
@layer ui-kit{
/*
name: ui-pattern-detail-modal
description: 详情弹层骨架（header + body + footer）
*/
.ui-pattern-detail-modal {
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.ui-pattern-detail-modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-color-default);
  margin-bottom: var(--space-5);
}

.ui-pattern-detail-modal__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.ui-pattern-detail-modal__meta {
  flex: 1;
  min-width: 0;
}

.ui-pattern-detail-modal__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.ui-pattern-detail-modal__desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.ui-pattern-detail-modal__body {
  flex: 1;
  padding: var(--space-4) 0;
}

.ui-pattern-detail-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color-default);
}
}
@layer ui-kit{
/*
name: ui-pattern-list-filter
description: 列表 + 筛选 + 空态骨架
*/
.ui-pattern-list-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
}

.ui-pattern-list-filter__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.ui-pattern-list-filter__search {
  flex: 1;
  min-width: 0;
}

.ui-pattern-list-filter__list {
  flex: 1;
  overflow-y: auto;
}

.ui-pattern-list-filter__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
}

/*# sourceMappingURL=ui-kit.bundle.css.map */