/* ============================================================
   YUQUE Quiet UI V2 — 设计系统（Phase 3A）

   Compact · Precise · Quiet · Desktop-grade · Tool-first

   与 V1（tokens.css / yq-ui.css）**完全并存、互不覆盖**：
   全部选择器都在 .yq2- 命名空间下，V2 token 一律 --yq2- 前缀。
   Phase 3A 只有内部 UI Lab 加载它，公开页一个都不引用。

   纪律：
   - 组件里不许出现 magic value，颜色/间距/圆角/高度全部走下面的 token
   - 阴影只给真正的浮层（popover / dialog / toast），卡片输入框一律无阴影
   - 蓝色只承担 primary / focus / selected，不做装饰
   - 状态不能只靠颜色区分（badge 一律带形状或文字）
   ============================================================ */

.yq2 {
  /* ---------- Color：冷白 / 冷灰 + YUQUE Blue ---------- */
  --yq2-canvas: #FBFCFD;
  --yq2-surface: #FFFFFF;
  --yq2-surface-subtle: #F7F8FA;
  --yq2-surface-hover: #F2F4F7;
  --yq2-surface-selected: #EFF4FF;
  --yq2-border: #E4E7EC;
  --yq2-border-strong: #D0D5DD;
  --yq2-border-focus: #2563EB;
  --yq2-text-primary: #101828;
  --yq2-text-secondary: #475467;
  --yq2-text-muted: #667085;
  --yq2-text-disabled: #98A2B3;
  --yq2-accent: #2563EB;              /* 与 V1 品牌蓝同色，不趁机改品牌 */
  --yq2-accent-hover: #1D4ED8;
  --yq2-accent-weak: #EFF4FF;
  --yq2-accent-border: #A9C4FF;
  --yq2-danger: #D92D20;
  --yq2-danger-weak: #FEF3F2;
  --yq2-danger-border: #FDA29B;
  --yq2-success: #067647;
  --yq2-success-weak: #ECFDF3;
  --yq2-warning: #B54708;
  --yq2-warning-weak: #FFFAEB;

  /* ---------- Typography（沿用现有 font stack，不引网络字体） ---------- */
  --yq2-font: var(--yq-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif);
  --yq2-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --yq2-fs-11: 11px;
  --yq2-fs-12: 12px;
  --yq2-fs-13: 13px;
  --yq2-fs-14: 14px;
  --yq2-fs-16: 16px;
  --yq2-fs-20: 20px;
  --yq2-fw-normal: 400;
  --yq2-fw-medium: 500;
  --yq2-fw-semibold: 600;

  /* 语义字号（Phase 3B.1，Gmail 可读性校准）。
     raw scale 保持诚实：--yq2-fs-13 永远是 13px，绝不让 token 名字撒谎。
     组件一律引用下面这层，改可读性基线时只动这里。
     命名用 --yq2-type-*，与颜色的 --yq2-text-* 区分开，不撞名。

       type-body     14  用户需要"读、点、判断"的高频文字（按钮/输入/文件名/菜单/toast）
       type-meta     13  次级但仍要正常阅读（字段标签/文件大小/格式 chip）
       type-caption  12  提示与元数据的**下限**（hint/尺寸/信任行/badge）
       type-micro    11  只给内部 eyebrow 与极低优先级注记；
                         **真实工具页里不允许出现关键 11px 文本** */
  --yq2-type-h1: var(--yq2-fs-20);
  --yq2-type-title: var(--yq2-fs-16);
  --yq2-type-body: var(--yq2-fs-14);
  --yq2-type-meta: var(--yq2-fs-13);
  --yq2-type-caption: var(--yq2-fs-12);
  --yq2-type-micro: var(--yq2-fs-11);
  --yq2-lh-h1: 26px;
  --yq2-lh-title: 22px;
  --yq2-lh-body: 20px;
  --yq2-lh-meta: 18px;
  --yq2-lh-caption: 16px;

  /* ---------- Spacing ---------- */
  --yq2-sp-1: 2px;  --yq2-sp-2: 4px;  --yq2-sp-3: 6px;  --yq2-sp-4: 8px;
  --yq2-sp-5: 12px; --yq2-sp-6: 16px; --yq2-sp-7: 20px; --yq2-sp-8: 24px; --yq2-sp-9: 32px;

  /* ---------- Radius：小而克制，全站禁止大圆角 ---------- */
  --yq2-r-control: 6px;
  --yq2-r-surface: 8px;
  --yq2-r-floating: 10px;
  --yq2-r-pill: 999px;

  /* ---------- Control heights ---------- */
  --yq2-h-compact: 28px;
  --yq2-h-default: 32px;
  --yq2-h-comfortable: 36px;

  /* ---------- Shadow：只有三档，浮层专用 ---------- */
  --yq2-shadow-none: none;
  --yq2-shadow-popover: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 16px -6px rgba(16, 24, 40, .12);
  --yq2-shadow-modal: 0 2px 4px rgba(16, 24, 40, .06), 0 20px 32px -8px rgba(16, 24, 40, .18);

  /* ---------- Motion：100–160ms，只动 opacity/background/border/微位移 ---------- */
  --yq2-dur: 120ms;
  --yq2-dur-slow: 160ms;
  --yq2-ease: cubic-bezier(.2, .6, .3, 1);

  --yq2-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);
  --yq2-focus-ring-danger: 0 0 0 3px rgba(217, 45, 32, .16);

  font-family: var(--yq2-font);
  color: var(--yq2-text-primary);
  font-size: var(--yq2-type-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  .yq2 *, .yq2 *::before, .yq2 *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

.yq2 *, .yq2 *::before, .yq2 *::after { box-sizing: border-box; }

/* 组件普遍用 display:flex/grid，作者样式会盖过 UA 的 [hidden]{display:none}，
   于是 el.hidden = true 变成不生效。这条必须在组件规则之前兜住。 */
.yq2 [hidden] { display: none !important; }

/* ============================================================
   Typography helpers
   ============================================================ */
.yq2-title { font-size: var(--yq2-type-title); line-height: var(--yq2-lh-title); font-weight: var(--yq2-fw-semibold); letter-spacing: -.01em; margin: 0; }
.yq2-subtitle { font-size: var(--yq2-type-body); line-height: var(--yq2-lh-body); color: var(--yq2-text-secondary); margin: 0; }
.yq2-label { font-size: var(--yq2-type-meta); line-height: var(--yq2-lh-meta); font-weight: var(--yq2-fw-medium); color: var(--yq2-text-secondary); }
.yq2-hint { font-size: var(--yq2-type-caption); line-height: var(--yq2-lh-caption); color: var(--yq2-text-muted); }
.yq2-hint--error { color: var(--yq2-danger); }
.yq2-mono { font-family: var(--yq2-font-mono); font-variant-numeric: tabular-nums; }
.yq2-eyebrow {
  font-size: var(--yq2-type-micro); font-weight: var(--yq2-fw-semibold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--yq2-text-muted);
}

/* ============================================================
   Button
   ============================================================ */
.yq2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--yq2-sp-3);
  height: var(--yq2-h-default); padding: 0 var(--yq2-sp-5);
  font-family: inherit; font-size: var(--yq2-type-body); font-weight: var(--yq2-fw-medium);
  line-height: var(--yq2-lh-body); border-radius: var(--yq2-r-control); border: 1px solid transparent;
  background: transparent; color: var(--yq2-text-primary);
  cursor: pointer; white-space: nowrap; position: relative;
  transition: background var(--yq2-dur) var(--yq2-ease), border-color var(--yq2-dur) var(--yq2-ease),
              color var(--yq2-dur) var(--yq2-ease), box-shadow var(--yq2-dur) var(--yq2-ease);
}
.yq2-btn:focus { outline: none; }
.yq2-btn:focus-visible { box-shadow: var(--yq2-focus-ring); }
.yq2-btn--sm { height: var(--yq2-h-compact); padding: 0 var(--yq2-sp-4); font-size: var(--yq2-type-meta); }
.yq2-btn--lg { height: var(--yq2-h-comfortable); padding: 0 var(--yq2-sp-6); }

.yq2-btn--primary { background: var(--yq2-accent); color: #fff; border-color: var(--yq2-accent); }
.yq2-btn--primary:hover:not(:disabled) { background: var(--yq2-accent-hover); border-color: var(--yq2-accent-hover); }
.yq2-btn--primary:active:not(:disabled) { background: #1A45C0; border-color: #1A45C0; }

.yq2-btn--secondary { background: var(--yq2-surface); border-color: var(--yq2-border-strong); color: var(--yq2-text-primary); }
.yq2-btn--secondary:hover:not(:disabled) { background: var(--yq2-surface-hover); }
.yq2-btn--secondary:active:not(:disabled) { background: var(--yq2-surface-subtle); border-color: var(--yq2-border-strong); }

.yq2-btn--ghost { color: var(--yq2-text-secondary); }
.yq2-btn--ghost:hover:not(:disabled) { background: var(--yq2-surface-hover); color: var(--yq2-text-primary); }
.yq2-btn--ghost:active:not(:disabled) { background: var(--yq2-surface-subtle); }

.yq2-btn--danger { background: var(--yq2-surface); border-color: var(--yq2-danger-border); color: var(--yq2-danger); }
.yq2-btn--danger:hover:not(:disabled) { background: var(--yq2-danger-weak); }

/* disabled 不只靠透明度：底色、描边、文字色、光标全部变化 */
.yq2-btn:disabled {
  cursor: not-allowed; opacity: 1;
  background: var(--yq2-surface-subtle); border-color: var(--yq2-border);
  color: var(--yq2-text-disabled);
}
.yq2-btn--ghost:disabled { background: transparent; border-color: transparent; }

.yq2-btn--icon { width: var(--yq2-h-default); padding: 0; }
.yq2-btn--icon.yq2-btn--sm { width: var(--yq2-h-compact); }
.yq2-btn svg { width: 16px; height: 16px; flex: none; }
.yq2-btn--sm svg { width: 14px; height: 14px; }

/* loading：文字保留占位，按钮不跳宽 */
.yq2-btn.is-loading { pointer-events: none; }
.yq2-btn.is-loading .yq2-btn-label { visibility: hidden; }
.yq2-btn.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: yq2-spin .7s linear infinite;
}
@keyframes yq2-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Field / Input
   ============================================================ */
.yq2-field { display: flex; flex-direction: column; gap: var(--yq2-sp-3); }
.yq2-input {
  height: var(--yq2-h-default); padding: 0 var(--yq2-sp-5);
  font-family: inherit; font-size: var(--yq2-type-body); color: var(--yq2-text-primary);
  background: var(--yq2-surface); border: 1px solid var(--yq2-border-strong);
  border-radius: var(--yq2-r-control); width: 100%;
  transition: border-color var(--yq2-dur) var(--yq2-ease), box-shadow var(--yq2-dur) var(--yq2-ease);
}
.yq2-input::placeholder { color: var(--yq2-text-muted); }
.yq2-input:hover:not(:disabled) { border-color: #B9C0CC; }
.yq2-input:focus { outline: none; border-color: var(--yq2-border-focus); box-shadow: var(--yq2-focus-ring); }
.yq2-input:disabled { background: var(--yq2-surface-subtle); color: var(--yq2-text-disabled); cursor: not-allowed; }
.yq2-input--error { border-color: var(--yq2-danger-border); }
.yq2-input--error:focus { border-color: var(--yq2-danger); box-shadow: var(--yq2-focus-ring-danger); }
.yq2-input--sm { height: var(--yq2-h-compact); font-size: var(--yq2-type-meta); padding: 0 var(--yq2-sp-4); }

/* ============================================================
   Select（原生 select + 自绘 chevron，跨浏览器不错位）
   ============================================================ */
.yq2-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  height: var(--yq2-h-default); width: 100%;
  padding: 0 32px 0 var(--yq2-sp-5);
  font-family: inherit; font-size: var(--yq2-type-body); line-height: normal; color: var(--yq2-text-primary);
  background-color: var(--yq2-surface);
  /* %23667085 = --yq2-text-muted；data URI 里不能用变量，改令牌时同步这一处 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 2.1 6 6.2l4.6-4.1' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
  border: 1px solid var(--yq2-border-strong); border-radius: var(--yq2-r-control);
  cursor: pointer;
  transition: border-color var(--yq2-dur) var(--yq2-ease), box-shadow var(--yq2-dur) var(--yq2-ease);
}
.yq2-select:hover:not(:disabled) { border-color: #B9C0CC; }
.yq2-select:focus { outline: none; border-color: var(--yq2-border-focus); box-shadow: var(--yq2-focus-ring); }
.yq2-select:disabled { background-color: var(--yq2-surface-subtle); color: var(--yq2-text-disabled); cursor: not-allowed; }
.yq2-select--sm { height: var(--yq2-h-compact); font-size: var(--yq2-type-meta); }

/* ============================================================
   Segmented control / Tabs
   ============================================================ */
.yq2-segmented {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--yq2-surface-subtle); border: 1px solid var(--yq2-border);
  border-radius: var(--yq2-r-control);
}
.yq2-segmented button {
  height: 26px; padding: 0 var(--yq2-sp-4); border: 1px solid transparent; background: transparent;
  font-family: inherit; font-size: var(--yq2-type-body); font-weight: var(--yq2-fw-medium);
  color: var(--yq2-text-secondary); border-radius: 4px; cursor: pointer; white-space: nowrap;
  transition: background var(--yq2-dur) var(--yq2-ease), color var(--yq2-dur) var(--yq2-ease);
}
.yq2-segmented button:hover:not(:disabled):not([aria-selected="true"]) { color: var(--yq2-text-primary); }
.yq2-segmented button[aria-selected="true"] {
  background: var(--yq2-surface); color: var(--yq2-text-primary);
  border-color: var(--yq2-border); box-shadow: 0 1px 1px rgba(16, 24, 40, .04);
}
.yq2-segmented button:focus-visible { outline: none; box-shadow: var(--yq2-focus-ring); }
.yq2-segmented button:disabled { color: var(--yq2-text-disabled); cursor: not-allowed; }

/* ============================================================
   Checkbox / Switch
   ============================================================ */
.yq2-check { display: inline-flex; align-items: center; gap: var(--yq2-sp-4); font-size: var(--yq2-type-body); cursor: pointer; }
.yq2-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--yq2-accent); cursor: pointer; flex: none; }
.yq2-check input:focus-visible { outline: none; box-shadow: var(--yq2-focus-ring); border-radius: 3px; }
.yq2-check input:disabled { cursor: not-allowed; }
.yq2-check:has(input:disabled) { color: var(--yq2-text-disabled); cursor: not-allowed; }

.yq2-switch { display: inline-flex; align-items: center; gap: var(--yq2-sp-4); font-size: var(--yq2-type-body); cursor: pointer; }
.yq2-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.yq2-switch-track {
  width: 32px; height: 18px; border-radius: var(--yq2-r-pill); flex: none;
  background: var(--yq2-border-strong); position: relative;
  transition: background var(--yq2-dur) var(--yq2-ease);
}
.yq2-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(16, 24, 40, .16);
  transition: transform var(--yq2-dur) var(--yq2-ease);
}
.yq2-switch input:checked + .yq2-switch-track { background: var(--yq2-accent); }
.yq2-switch input:checked + .yq2-switch-track::after { transform: translateX(14px); }
.yq2-switch input:focus-visible + .yq2-switch-track { box-shadow: var(--yq2-focus-ring); }
.yq2-switch input:disabled + .yq2-switch-track { background: var(--yq2-border); }

/* ============================================================
   Badge / Status
   状态绝不能只靠颜色：每个 badge 都带形状标记 + 文字
   ============================================================ */
.yq2-badge {
  display: inline-flex; align-items: center; gap: var(--yq2-sp-3);
  height: 22px; padding: 0 var(--yq2-sp-4);
  font-size: var(--yq2-type-caption); line-height: var(--yq2-lh-caption);
  font-weight: var(--yq2-fw-medium); white-space: nowrap;
  border: 1px solid var(--yq2-border); border-radius: var(--yq2-r-pill);
  background: var(--yq2-surface-subtle); color: var(--yq2-text-secondary);
}
.yq2-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor;
}
.yq2-badge--ready { }
.yq2-badge--processing { color: var(--yq2-accent); background: var(--yq2-accent-weak); border-color: var(--yq2-accent-border); }
.yq2-badge--processing::before { border-radius: 50%; animation: yq2-pulse 1.2s ease-in-out infinite; }
@keyframes yq2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.yq2-badge--done { color: var(--yq2-success); background: var(--yq2-success-weak); border-color: #ABEFC6; }
.yq2-badge--done::before { border-radius: 2px; }                    /* 方形，不只靠绿色 */
.yq2-badge--skipped { color: var(--yq2-warning); background: var(--yq2-warning-weak); border-color: #FEDF89; }
.yq2-badge--skipped::before { border-radius: 0; transform: rotate(45deg); width: 5px; height: 5px; }  /* 菱形 */
.yq2-badge--failed { color: var(--yq2-danger); background: var(--yq2-danger-weak); border-color: var(--yq2-danger-border); }
.yq2-badge--failed::before { border-radius: 0; width: 7px; height: 2px; }   /* 横杠 */
.yq2-badge--local { color: var(--yq2-text-secondary); }
.yq2-badge--local::before {
  border-radius: 1px; width: 5px; height: 7px; background: none;
  border: 1.5px solid currentColor; border-top-width: 3px;                  /* 锁形轮廓 */
}

/* ============================================================
   Tooltip
   ============================================================ */
.yq2-tooltip {
  position: fixed; z-index: 1200; pointer-events: none;
  display: flex; align-items: center; gap: var(--yq2-sp-4);
  max-width: 260px; padding: 5px var(--yq2-sp-4);
  background: var(--yq2-text-primary); color: #fff;
  font-size: var(--yq2-type-meta); line-height: 1.4;
  border-radius: var(--yq2-r-control); box-shadow: var(--yq2-shadow-popover);
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--yq2-dur) var(--yq2-ease), transform var(--yq2-dur) var(--yq2-ease);
}
.yq2-tooltip.is-open { opacity: 1; transform: none; }
.yq2-tooltip kbd {
  font-family: var(--yq2-font-mono); font-size: var(--yq2-type-micro); padding: 1px 4px;
  background: rgba(255, 255, 255, .16); border-radius: 3px;
}

/* ============================================================
   Popover / Dropdown menu
   ============================================================ */
.yq2-popover {
  position: fixed; z-index: 1100; min-width: 200px; padding: var(--yq2-sp-2);
  background: var(--yq2-surface); border: 1px solid var(--yq2-border);
  border-radius: var(--yq2-r-floating); box-shadow: var(--yq2-shadow-popover);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity var(--yq2-dur) var(--yq2-ease), transform var(--yq2-dur) var(--yq2-ease);
}
.yq2-popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
.yq2-menu-item {
  display: flex; align-items: center; gap: var(--yq2-sp-4); width: 100%;
  height: var(--yq2-h-compact); padding: 0 var(--yq2-sp-4);
  border: 0; background: transparent; font-family: inherit; font-size: var(--yq2-type-body);
  color: var(--yq2-text-primary); border-radius: 5px; cursor: pointer; text-align: left;
  transition: background var(--yq2-dur) var(--yq2-ease);
}
.yq2-menu-item:hover { background: var(--yq2-surface-hover); }
.yq2-menu-item:focus-visible { outline: none; background: var(--yq2-surface-hover); box-shadow: var(--yq2-focus-ring); }
.yq2-menu-item svg { width: 15px; height: 15px; flex: none; color: var(--yq2-text-muted); }
.yq2-menu-item[aria-checked="true"] { background: var(--yq2-surface-selected); color: var(--yq2-accent); }
.yq2-menu-item[aria-checked="true"] svg { color: var(--yq2-accent); }
.yq2-menu-item--danger { color: var(--yq2-danger); }
.yq2-menu-item--danger svg { color: var(--yq2-danger); }
.yq2-menu-item--danger:hover { background: var(--yq2-danger-weak); }
.yq2-menu-item:disabled { color: var(--yq2-text-disabled); cursor: not-allowed; background: transparent; }
.yq2-menu-key { margin-left: auto; font-family: var(--yq2-font-mono); font-size: var(--yq2-type-caption); color: var(--yq2-text-muted); }
.yq2-menu-divider { height: 1px; margin: var(--yq2-sp-2) calc(var(--yq2-sp-2) * -1); background: var(--yq2-border); }
.yq2-menu-label {
  padding: var(--yq2-sp-3) var(--yq2-sp-4) var(--yq2-sp-2);
  font-size: var(--yq2-type-caption); font-weight: var(--yq2-fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--yq2-text-muted);
}

/* ============================================================
   Dialog
   ============================================================ */
.yq2-dialog-backdrop {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(16, 24, 40, .45);
  display: flex; align-items: center; justify-content: center; padding: var(--yq2-sp-6);
  opacity: 0; transition: opacity var(--yq2-dur-slow) var(--yq2-ease);
}
.yq2-dialog-backdrop.is-open { opacity: 1; }
.yq2-dialog {
  width: 100%; max-width: 400px; background: var(--yq2-surface);
  border: 1px solid var(--yq2-border); border-radius: var(--yq2-r-floating);
  box-shadow: var(--yq2-shadow-modal);
  transform: translateY(4px); transition: transform var(--yq2-dur-slow) var(--yq2-ease);
}
.yq2-dialog-backdrop.is-open .yq2-dialog { transform: none; }
.yq2-dialog-head { padding: var(--yq2-sp-6) var(--yq2-sp-6) var(--yq2-sp-4); }
.yq2-dialog-title { font-size: var(--yq2-type-title); line-height: var(--yq2-lh-title); font-weight: var(--yq2-fw-semibold); margin: 0; }
.yq2-dialog-body { padding: 0 var(--yq2-sp-6) var(--yq2-sp-6); font-size: var(--yq2-type-body);
  line-height: var(--yq2-lh-body); color: var(--yq2-text-secondary); }
.yq2-dialog-foot {
  display: flex; justify-content: flex-end; gap: var(--yq2-sp-4);
  padding: var(--yq2-sp-5) var(--yq2-sp-6); border-top: 1px solid var(--yq2-border);
  background: var(--yq2-surface-subtle); border-radius: 0 0 var(--yq2-r-floating) var(--yq2-r-floating);
}

/* ============================================================
   Toast
   ============================================================ */
.yq2-toast-stack {
  position: fixed; z-index: 1400; bottom: var(--yq2-sp-7); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--yq2-sp-4); align-items: center;
}
.yq2-toast {
  display: flex; align-items: flex-start; gap: var(--yq2-sp-4);
  max-width: 380px; padding: var(--yq2-sp-4) var(--yq2-sp-5);
  background: var(--yq2-surface); border: 1px solid var(--yq2-border);
  border-radius: var(--yq2-r-control); box-shadow: var(--yq2-shadow-popover);
  font-size: var(--yq2-type-body); line-height: var(--yq2-lh-body); color: var(--yq2-text-primary);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--yq2-dur-slow) var(--yq2-ease), transform var(--yq2-dur-slow) var(--yq2-ease);
}
.yq2-toast.is-open { opacity: 1; transform: none; }
.yq2-toast svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.yq2-toast--info svg { color: var(--yq2-text-muted); }
.yq2-toast--success svg { color: var(--yq2-success); }
.yq2-toast--warning svg { color: var(--yq2-warning); }
.yq2-toast--error svg { color: var(--yq2-danger); }

/* ============================================================
   Dropzone V2 —— 精致边框，不是巨大虚线框
   ============================================================ */
.yq2-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--yq2-sp-4); padding: var(--yq2-sp-9) var(--yq2-sp-6);
  background: var(--yq2-surface-subtle);
  border: 1px dashed var(--yq2-border-strong); border-radius: var(--yq2-r-surface);
  cursor: pointer; text-align: center;
  transition: background var(--yq2-dur) var(--yq2-ease), border-color var(--yq2-dur) var(--yq2-ease);
}
.yq2-dropzone:hover:not(.is-disabled) { background: var(--yq2-surface-hover); border-color: #B9C0CC; }
.yq2-dropzone:focus-visible { outline: none; box-shadow: var(--yq2-focus-ring); border-color: var(--yq2-accent); }
.yq2-dropzone.is-dragover {
  background: var(--yq2-accent-weak); border-color: var(--yq2-accent); border-style: solid;
}
.yq2-dropzone.is-disabled { cursor: not-allowed; background: var(--yq2-surface-subtle); border-color: var(--yq2-border); }
.yq2-dropzone.is-disabled .yq2-dropzone-title { color: var(--yq2-text-disabled); }
.yq2-dropzone.is-error { border-color: var(--yq2-danger-border); background: var(--yq2-danger-weak); }
.yq2-dropzone-icon { color: var(--yq2-text-muted); }
.yq2-dropzone-icon svg { width: 20px; height: 20px; display: block; }
.yq2-dropzone.is-dragover .yq2-dropzone-icon { color: var(--yq2-accent); }
.yq2-dropzone-title { font-size: var(--yq2-type-body); line-height: var(--yq2-lh-body);
  font-weight: var(--yq2-fw-medium); color: var(--yq2-text-primary); }
.yq2-dropzone-title em { font-style: normal; color: var(--yq2-accent); }
.yq2-dropzone-hint { font-size: var(--yq2-type-caption); line-height: var(--yq2-lh-caption); color: var(--yq2-text-muted); }

/* ============================================================
   File Row V2 —— Image Workbench 的核心组件，密而不挤
   ============================================================ */
.yq2-file-list { border: 1px solid var(--yq2-border); border-radius: var(--yq2-r-surface); background: var(--yq2-surface); overflow: hidden; }
.yq2-file-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: var(--yq2-sp-5);
  padding: var(--yq2-sp-4) var(--yq2-sp-5);
  border-bottom: 1px solid var(--yq2-border);
  transition: background var(--yq2-dur) var(--yq2-ease);
}
.yq2-file-row:last-child { border-bottom: 0; }
.yq2-file-row:hover { background: var(--yq2-surface-subtle); }
.yq2-file-row:focus-visible { outline: none; background: var(--yq2-surface-subtle); box-shadow: inset var(--yq2-focus-ring); }
.yq2-file-row.is-selected { background: var(--yq2-surface-selected); box-shadow: inset 2px 0 0 var(--yq2-accent); }
.yq2-file-row.is-failed .yq2-file-name { color: var(--yq2-text-secondary); }

.yq2-file-thumb {
  width: 28px; height: 28px; border-radius: 4px; flex: none; overflow: hidden;
  background: var(--yq2-surface-hover); border: 1px solid var(--yq2-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--yq2-text-disabled);
}
.yq2-file-thumb svg { width: 14px; height: 14px; }
.yq2-file-meta { min-width: 0; }
.yq2-file-name {
  font-size: var(--yq2-type-body); line-height: var(--yq2-lh-body);
  font-weight: var(--yq2-fw-medium); color: var(--yq2-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yq2-file-sub { font-size: var(--yq2-type-caption); line-height: var(--yq2-lh-caption);
  color: var(--yq2-text-muted); font-variant-numeric: tabular-nums; }
.yq2-file-size {
  font-size: var(--yq2-type-meta); line-height: var(--yq2-lh-meta); color: var(--yq2-text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.yq2-file-size b { font-weight: var(--yq2-fw-medium); color: var(--yq2-text-primary); }
.yq2-file-size .yq2-arrow { color: var(--yq2-text-disabled); margin: 0 var(--yq2-sp-2); }
.yq2-file-actions { display: flex; align-items: center; gap: var(--yq2-sp-2); }
/* 行内动作平时隐形，hover/focus 才出现；触屏没有 hover，所以常驻 */
.yq2-file-actions .yq2-btn { opacity: 0; transition: opacity var(--yq2-dur) var(--yq2-ease); }
.yq2-file-row:hover .yq2-file-actions .yq2-btn,
.yq2-file-row:focus-within .yq2-file-actions .yq2-btn { opacity: 1; }
@media (hover: none) { .yq2-file-actions .yq2-btn { opacity: 1; } }

/* ============================================================
   Progress
   ============================================================ */
.yq2-progress { height: 4px; border-radius: var(--yq2-r-pill); background: var(--yq2-surface-hover); overflow: hidden; }
.yq2-progress > i {
  display: block; height: 100%; border-radius: inherit; background: var(--yq2-accent);
  transition: width var(--yq2-dur-slow) var(--yq2-ease);
}
.yq2-progress--done > i { background: var(--yq2-success); }
.yq2-progress--error > i { background: var(--yq2-danger); }
.yq2-progress--indeterminate > i { width: 35% !important; animation: yq2-slide 1.1s var(--yq2-ease) infinite; }
@keyframes yq2-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }

/* ============================================================
   Toolbar
   ============================================================ */
.yq2-toolbar {
  display: flex; align-items: center; gap: var(--yq2-sp-4); flex-wrap: wrap;
  padding: var(--yq2-sp-4) var(--yq2-sp-5);
  background: var(--yq2-surface); border: 1px solid var(--yq2-border);
  border-radius: var(--yq2-r-surface);
}
.yq2-toolbar-spacer { flex: 1 1 auto; min-width: var(--yq2-sp-4); }
.yq2-toolbar-status { font-size: var(--yq2-type-body); line-height: var(--yq2-lh-body);
  color: var(--yq2-text-secondary); font-variant-numeric: tabular-nums; }

/* ============================================================
   Surface / Panel
   ============================================================ */
.yq2-panel {
  background: var(--yq2-surface); border: 1px solid var(--yq2-border);
  border-radius: var(--yq2-r-surface);
}
.yq2-panel-head {
  display: flex; align-items: center; gap: var(--yq2-sp-4);
  padding: var(--yq2-sp-5) var(--yq2-sp-6); border-bottom: 1px solid var(--yq2-border);
}
.yq2-panel-body { padding: var(--yq2-sp-6); }

/* 格式对：[WebP] → [PNG] */
.yq2-format-pair { display: inline-flex; align-items: center; gap: var(--yq2-sp-4); }
.yq2-format-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--yq2-sp-4);
  font-size: var(--yq2-type-meta); font-weight: var(--yq2-fw-semibold); letter-spacing: .02em;
  color: var(--yq2-text-secondary); background: var(--yq2-surface-subtle);
  border: 1px solid var(--yq2-border); border-radius: 4px;
}
.yq2-format-chip--out { color: var(--yq2-accent); background: var(--yq2-accent-weak); border-color: var(--yq2-accent-border); }
.yq2-format-arrow { color: var(--yq2-text-disabled); display: flex; }
.yq2-format-arrow svg { width: 14px; height: 14px; }

/* ============================================================
   Responsive：桌面优先，窄屏堆叠但绝不横向爆版
   ============================================================ */
@media (max-width: 640px) {
  .yq2-file-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas: "thumb meta status" ".  size actions";
    row-gap: var(--yq2-sp-3);
  }
  .yq2-file-thumb { grid-area: thumb; }
  .yq2-file-meta { grid-area: meta; }
  .yq2-file-badge { grid-area: status; }
  .yq2-file-size { grid-area: size; }
  .yq2-file-actions { grid-area: actions; justify-content: flex-end; }
  .yq2-dialog { max-width: none; }
  .yq2-toast { max-width: calc(100vw - var(--yq2-sp-7) * 2); }
}