:root {
  /* ===== shadcn defaults (light) — YLPRO override: primary=#409EFF, radius=6px, ring=#409EFF ===== */
  --radius: 0.375rem;                       /* 6px 全局圆角 (YLPRO §二) */
  --background: #FAFBFC;                    /* YLPRO 页面背景 */
  --foreground: #303133;                    /* YLPO 主文字 */
  --card: #FFFFFF;
  --card-foreground: #303133;
  --popover: #FFFFFF;
  --popover-foreground: #303133;
  --primary: #409EFF;                       /* YLPRO 主色 */
  --primary-foreground: #FFFFFF;
  --secondary: #F5F7FA;                     /* YLPRO 浅灰背景 */
  --secondary-foreground: #303133;
  --muted: #F5F7FA;
  --muted-foreground: #909399;              /* YLPRO 弱文字 */
  --accent: #F0F5FF;                       /* YLPRO 主色 8% 浅底 */
  --accent-foreground: #409EFF;
  --destructive: #F56C6C;                  /* YLPRO 错误色 */
  --border: #DCDFE6;                       /* YLPRO 边框常态色 */
  --input: #F2F3F5;                        /* YLPRO 输入框默认背景 */
  --ring: #409EFF;                         /* YLPRO 聚焦边框色 */
  --chart-1: #409EFF;                      /* 图表主色系全蓝 */
  --chart-2: #66b1ff;
  --chart-3: #337ecc;
  --chart-4: #79bbff;
  --chart-5: #a0cfff;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #303133;
  --sidebar-primary: #409EFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F0F5FF;
  --sidebar-accent-foreground: #409EFF;
  --sidebar-border: #DCDFE6;
  --sidebar-ring: #409EFF;

  /* ===== tm- primitive: radius scale (4 / 6 / 10 / 14 / 9999) ===== */
  --tm-radius-xs: 4px;
  --tm-radius-sm: 6px;
  --tm-radius-md: 10px;
  --tm-radius-lg: 14px;
  --tm-radius-full: 9999px;

  /* ===== tm- primitive: spacing scale ===== */
  --tm-space-1: 4px;
  --tm-space-2: 8px;
  --tm-space-3: 12px;
  --tm-space-4: 16px;
  --tm-space-5: 20px;
  --tm-space-6: 24px;
  --tm-space-8: 32px;

  /* ===== tm- light semantic tokens (YLPRO: #409EFF blue) ===== */
  --tm-bg: #FAFBFC;            /* YLPRO 页面背景 */
  --tm-bg-elev: #FFFFFF;       /* 顶栏 / dialog 背景 */
  --tm-surface: #FFFFFF;       /* 卡片表面 */
  --tm-surface-2: #F5F7FA;     /* YLPRO 浅灰背景 hover/次表面 */
  --tm-surface-3: #E5E6EB;     /* YLPRO hover 背景 */
  --tm-border: #DCDFE6;        /* YLPRO 边框常态色 */
  --tm-border-strong: #C0C4CC; /* YLPRO 强边框 */

  --tm-text: #303133;          /* YLPRO 主文字 */
  --tm-text-muted: #606266;    /* YLPRO 次要文字 */
  --tm-text-subtle: #909399;    /* YLPRO 弱文字 */

  --tm-accent: #409EFF;        /* YLPRO 主色 */
  --tm-accent-hover: #337ecc;  /* YLPRO hover 加深 */
  --tm-accent-fg: #FFFFFF;     /* accent 上文字 */
  --tm-accent-soft: #F0F5FF;   /* YLPRO 主色 8% 浅底 */

  --tm-rose: #F56C6C;          /* YLPRO 错误/未读色 */
  --tm-rose-soft: #FEF0F0;     /* 错误浅底 */

  --tm-warning: #E6A23C;      /* YLPRO 警告色 (非绿) */
  --tm-warning-soft: #FDF6EC;
  --tm-danger: #F56C6C;        /* YLPRO 危险色 */
  --tm-danger-soft: #FEF0F0;

  /* ===== tm- shadows (light: 单光源顶部冷光 + 双层蓝色相) ===== */
  --tm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --tm-shadow-md: 0 4px 12px -2px rgb(64 158 255 / 0.08), 0 2px 6px -2px rgb(0 0 0 / 0.04);
  --tm-shadow-lg: 0 16px 40px -8px rgb(64 158 255 / 0.12), 0 4px 12px -4px rgb(0 0 0 / 0.06);

  /* toast light mode */
  --toast-bg: rgba(255, 255, 255, 0.92);
  --toast-text: rgba(0, 0, 0, 0.78);
}

/* ============================================================
   .dark  —  YLPRO design tokens (dark)
   ──────────────────────────────────────────────────────────
   YLPRO dark: 深蓝黑背景 #14171a 系，主色 #409EFF 不变，hover 提亮 #66b1ff。
   shadcn dark token 同步覆盖为 YLPRO 蓝。
   ============================================================ */
.dark {
  /* ===== shadcn defaults (dark) — YLPRO dark override ===== */
  --background: #14171a;                    /* YLPRO dark 页面背景 */
  --foreground: #E5EAF3;
  --card: #1a1e22;
  --card-foreground: #E5EAF3;
  --popover: #1a1e22;
  --popover-foreground: #E5EAF3;
  --primary: #409EFF;                       /* YLPRO 主色 dark 不变 */
  --primary-foreground: #FFFFFF;
  --secondary: #1a1e22;
  --secondary-foreground: #E5EAF3;
  --muted: #1a1e22;
  --muted-foreground: #8a9099;
  --accent: rgb(64 158 255 / 0.10);
  --accent-foreground: #66b1ff;
  --destructive: #F56C6C;
  --border: rgb(255 255 255 / 10%);
  --input: rgb(255 255 255 / 12%);
  --ring: #409EFF;
  --chart-1: #409EFF;
  --chart-2: #66b1ff;
  --chart-3: #337ecc;
  --chart-4: #79bbff;
  --chart-5: #a0cfff;
  --sidebar: #1a1e22;
  --sidebar-foreground: #E5EAF3;
  --sidebar-primary: #409EFF;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: rgb(64 158 255 / 0.10);
  --sidebar-accent-foreground: #66b1ff;
  --sidebar-border: rgb(255 255 255 / 10%);
  --sidebar-ring: #409EFF;

  /* ===== tm- dark semantic tokens（YLPRO dark: 深蓝黑系） ===== */
  --tm-bg: #14171a;
  --tm-bg-elev: #1a1e22;
  --tm-surface: #1a1e22;
  --tm-surface-2: #232830;
  --tm-surface-3: #2c3138;
  --tm-border: #2c3138;
  --tm-border-strong: #3a4048;

  --tm-text: #E5EAF3;
  --tm-text-muted: #8a9099;
  --tm-text-subtle: #6a7079;

  --tm-accent: #409EFF;        /* YLPRO 主色 dark 不变 */
  --tm-accent-hover: #66b1ff;  /* dark hover 提亮 */
  --tm-accent-fg: #FFFFFF;
  --tm-accent-soft: rgb(64 158 255 / 0.14);

  --tm-rose: #F56C6C;
  --tm-rose-soft: rgb(245 108 108 / 0.16);

  --tm-warning: #E6A23C;
  --tm-warning-soft: rgb(230 162 60 / 0.16);
  --tm-danger: #F56C6C;
  --tm-danger-soft: rgb(245 108 108 / 0.16);

  /* dark 模式阴影更重，蓝色相 */
  --tm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --tm-shadow-md: 0 4px 12px -2px rgb(64 158 255 / 0.2), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --tm-shadow-lg: 0 16px 40px -8px rgb(64 158 255 / 0.25), 0 4px 12px -4px rgb(0 0 0 / 0.5);

  /* toast dark mode */
  --toast-bg: rgba(26, 30, 34, 0.92);
  --toast-text: rgba(229, 234, 243, 0.85);
}

/* ============================================================
   @layer base — 全局基础
   ============================================================ */
@layer base {
  /* shadcn 默认 preflight 边框色 fallback（admin 依赖） */
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-border);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    background-color: var(--tm-bg);
    color: var(--tm-text);
    font-family: var(--font-sans), ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 200ms ease, color 200ms ease;
  }

  /* selection — violet accent */
  ::selection {
    background-color: var(--tm-accent);
    color: var(--tm-accent-fg);
  }

  /* 全局细滚动条基础（可被 .tm-scroll 进一步细化） */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-border-strong) transparent;
  }
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: var(--tm-border-strong);
    border-radius: var(--tm-radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--tm-text-subtle);
  }

  /* kbd 键盘提示样式 */
  kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--tm-radius-sm);
    border: 1px solid var(--tm-border);
    background-color: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-family: var(--font-mono), ui-monospace, SFMono-Regular, monospace;
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
  }
}

/* ============================================================
   @layer components — tm-* 组件类
   ──────────────────────────────────────────────────────────
   所有类用 token 引用，dark 模式自动跟随 .dark 块切换。
   ============================================================ */
@layer components {
  /* tm-root — 根容器 */
  .tm-root {
    min-height: 100vh;
    background-color: var(--tm-bg);
    color: var(--tm-text);
  }

  /* tm-topbar — sticky 顶栏 */
  .tm-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: color-mix(in oklab, var(--tm-bg-elev) 80%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tm-border);
  }

  /* tm-card — 主卡片
   * r35: glassmorphism / frosted glass effect */
  .tm-card {
    border-radius: var(--tm-radius-lg);
    border: 1px solid color-mix(in oklab, var(--tm-border) 60%, transparent);
    background-color: color-mix(in oklab, var(--tm-surface) 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--tm-shadow-sm);
  }
  .dark .tm-card {
    border: 1px solid color-mix(in oklab, var(--tm-border) 40%, transparent);
    background-color: color-mix(in oklab, var(--tm-surface) 60%, transparent);
  }

  /* tm-card-premium — 高级质感卡片（径向渐变 + 顶部高光 + 蓝色相阴影）
   * 用于邮箱地址展示卡：消除扁平感，营造 Linear/Vercel 式深邃质感
   * - 径向渐变：左上角主色 6-10% 微光 → 透明，增加层次
   * - 顶部 inset 高光：1px white 4-8% 模拟物理边缘反光
   * - 蓝色相 box-shadow：主色 8-12% 软晕，营造发光感
   */
  .tm-card-premium {
    position: relative;
    border-radius: var(--tm-radius-lg);
    border: 1px solid var(--tm-border);
    background-color: var(--tm-surface);
    background-image:
      radial-gradient(ellipse 80% 60% at 25% 0%, color-mix(in oklab, var(--tm-accent) 6%, transparent), transparent 70%);
    box-shadow: var(--tm-shadow-md), inset 0 1px 0 color-mix(in oklab, white 8%, transparent);
    overflow: hidden;
  }
  .dark .tm-card-premium {
    background-color: var(--tm-surface);
    background-image:
      radial-gradient(ellipse 80% 60% at 25% 0%, color-mix(in oklab, var(--tm-accent) 10%, transparent), transparent 70%);
    box-shadow: var(--tm-shadow-md), inset 0 1px 0 color-mix(in oklab, white 4%, transparent);
  }

  /* tm-address-display — 邮箱地址展示面板（内凹 + 蓝色相内发光 + 1px 边）
   * 取代扁平输入框，营造"显示器/终端"式深邃内凹质感
   * - 背景：bg 60% + black 混合，比卡片表面更深
   * - 内阴影：inset 1px 顶部暗影 + inset 24px 蓝色相微光晕
   * - 1px border 强化边缘
   */
  .tm-address-display {
    position: relative;
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-border);
    background-color: color-mix(in oklab, var(--tm-bg) 45%, var(--tm-surface));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
  }
  .tm-address-display:hover {
    border-color: color-mix(in oklab, var(--tm-accent) 40%, var(--tm-border));
  }
  .dark .tm-address-display {
    background-color: color-mix(in oklab, var(--tm-bg) 70%, black);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35), inset 0 0 28px color-mix(in oklab, var(--tm-accent) 5%, transparent);
  }
  .dark .tm-address-display:hover {
    border-color: color-mix(in oklab, var(--tm-accent) 35%, var(--tm-border));
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.35), inset 0 0 32px color-mix(in oklab, var(--tm-accent) 9%, transparent);
  }

  /* ─────────────────────────────────────────────────────────────────────
   * tm-hero — 顶部邮箱地址英雄卡「柔光玻璃」式视觉系统
   * 设计语汇：轻盈、内敛、统一。白色表面 + 细发丝边 + 柔和阴影
   * 三层结构：
   *   1. tm-hero-statusbar  顶部状态条（live 点 + 标题 + 通道药丸 + 倒计时）
   *   2. tm-hero-screen     邮箱地址展示区（浅色 tinted bg + 细边 + 内凹微影）
   *   3. tm-hero-toolbar    统一行动条（域名选择 + 生成 + 次操作 + 折叠开关）
   * ───────────────────────────────────────────────────────────────────── */

  /* tm-hero — 卡片容器
   * 单层柔和阴影 + 1px 发丝边 + 顶部 1px 极淡 accent 渐变高光
   * 不使用径向角光、不用多层重影，保持轻盈
   */
  .tm-hero {
    position: relative;
    border-radius: var(--tm-radius-lg);
    border: 1px solid var(--tm-border);
    background-color: var(--tm-surface);
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.03),
      0 6px 20px -8px rgb(0 0 0 / 0.08);
    overflow: hidden;
  }
  .tm-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      color-mix(in oklab, var(--tm-accent) 22%, transparent) 50%,
      transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
  .dark .tm-hero {
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.2),
      0 10px 28px -10px rgb(0 0 0 / 0.5);
  }

  /* tm-hero-statusbar — 顶部状态条
   * 紧凑、低对比，仅一条 hairline 底边
   */
  .tm-hero-statusbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--tm-border);
  }

  /* tm-hero-screen — 邮箱地址展示区（轻盈版本）
   * - 浅色 tinted 背景 (surface-2)，不用深色终端底
   * - 1px 细边 + 极淡内凹阴影（仅 1px 顶部 3% 暗影，营造轻微凹陷）
   * - hover 时边框 accent 染色
   * - 无网格、无 viewfinder 角标、无重影
   */
  .tm-hero-screen {
    position: relative;
    margin: 0.875rem 1rem;
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-border);
    background-color: var(--tm-surface-2);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.03);
    overflow: hidden;
    transition: border-color 200ms ease, background-color 200ms ease;
  }
  .tm-hero:hover .tm-hero-screen {
    border-color: color-mix(in oklab, var(--tm-accent) 30%, var(--tm-border));
  }
  .dark .tm-hero-screen {
    background-color: color-mix(in oklab, var(--tm-surface-2) 70%, var(--tm-bg));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
  }
  .dark .tm-hero:hover .tm-hero-screen {
    border-color: color-mix(in oklab, var(--tm-accent) 35%, var(--tm-border));
  }

  /* 屏幕内按钮/容器（地址 + 复制） */
  .tm-hero-screen-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
  }
  .tm-hero-screen-btn:disabled { cursor: default; }

  /* 地址文字 — 等宽，清晰锐利，不发光
   * letter-spacing 微紧，line-height 1.3 保证可读
   */
  .tm-hero-address {
    font-family: var(--tm-mono);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.008em;
    color: var(--tm-text);
    line-height: 1.3;
  }
  @media (min-width: 640px) {
    .tm-hero-address { font-size: 1.25rem; }
  }

  /* 屏幕内复制药丸 — 轻盈 ghost 风格 */
  .tm-hero-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--tm-radius-sm);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    color: var(--tm-text-muted);
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  }
  .tm-hero-screen-btn:hover .tm-hero-copy {
    background: color-mix(in oklab, var(--tm-accent) 12%, var(--tm-surface));
    color: var(--tm-accent);
    border-color: color-mix(in oklab, var(--tm-accent) 35%, transparent);
  }

  /* tm-hero-toolbar — 统一行动条
   * 顶部 hairline 分割线，所有操作统一容器
   */
  .tm-hero-toolbar {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--tm-border);
  }

  /* tm-hero-channel — provider 通道药丸 */
  .tm-hero-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--tm-radius-full);
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-family: var(--tm-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--tm-text-muted);
  }
  .tm-hero-channel-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
  }

  /* tm-hero-expiry — 倒计时药丸 */
  .tm-hero-expiry {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--tm-radius-full);
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    font-family: var(--tm-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  /* tm-hero-dot-live — 状态条 live 点（带 ping 环） */
  .tm-hero-dot-live {
    position: relative;
    display: inline-flex;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tm-accent);
    box-shadow: 0 0 6px color-mix(in oklab, var(--tm-accent) 60%, transparent);
    flex-shrink: 0;
  }
  .tm-hero-dot-live::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--tm-accent) 40%, transparent);
    animation: tm-hero-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    z-index: -1;
  }
  @keyframes tm-hero-ping {
    0% { transform: scale(1); opacity: 0.7; }
    80%, 100% { transform: scale(2.4); opacity: 0; }
  }

  /* tm-hero-link — 工具条尾部折叠开关 */
  .tm-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--tm-text-muted);
    font-size: 11px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
    padding: 0.25rem 0.375rem;
    border-radius: var(--tm-radius-sm);
  }
  .tm-hero-link:hover {
    color: var(--tm-accent);
    background: color-mix(in oklab, var(--tm-accent) 8%, transparent);
  }

  /* ════════════════════════════════════════════════════════════════════
   * YLPRO-Mail v1.3 临时邮箱页面专用组件类（紧凑精炼版）
   * 遵循 YLPRO v3.3：主色 #409EFF / 6px 圆角 / shadow-md / 4px 倍数间距
   * v1.3 约束：16px 内边距 · gap 12px · 输入框/复制按钮 36px 等高 · 主按钮 40px
   * ════════════════════════════════════════════════════════════════════ */

  /* tm-mail-card — 顶部邮箱生成卡片
   * v1.3: 16px 内边距（上下16px 左右16px），缩减臃肿虚胖 */
  /* tm-mail-card — 邮箱生成卡片
   * r35: glassmorphism / frosted glass effect */
  .tm-mail-card {
    padding: 16px;
    border-radius: 6px;
    border: 1px solid color-mix(in oklab, var(--tm-border) 60%, transparent);
    background-color: color-mix(in oklab, var(--tm-surface) 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--tm-shadow-md);
  }
  .dark .tm-mail-card {
    border: 1px solid color-mix(in oklab, var(--tm-border) 40%, transparent);
    background-color: color-mix(in oklab, var(--tm-surface) 60%, transparent);
  }

  /* tm-mail-title-row — 标题行：左标题 + 右来源标签同一行水平对齐
   * v1.4: margin-bottom 收紧 16px → 12px（标题↔邮箱展示区 12px） */
  .tm-mail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .tm-mail-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--tm-text);
    margin: 0;
    line-height: 1.4;
  }

  /* tm-mail-source-tag — 域名来源标签（Mail.tm 等）
   * v1.3: 浅灰背景小标签 / 6px 圆角 / 缩小内边距 2px 6px */
  .tm-mail-source-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    background-color: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: 12px;
    line-height: 1.5;
    flex-shrink: 0;
    font-family: var(--tm-mono);
  }

  /* tm-mail-readonly-row — 只读地址 + 复制按钮同行 flex 布局
   * v1.7-spec-revision【用户硬反馈】: flex-wrap: nowrap + 只读卡片 min-width:0
   *   复制按钮改为 icon-only 36px square——不再占用 84px+文字宽度
   *   总宽 36+12+0 = 48px 可在任何 ≥48px viewport 同行；复制与邮箱永远同一行
   *   邮箱文本 nowrap + overflow-wrap:normal 不内部断词，长邮箱整体跟随 flex 不拆分
   *   align-items:center + gap 12px；两者 min-height:36px 等高垂直居中 */
  .tm-mail-readonly-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 0;
  }

  /* tm-mail-readonly — 只读预览卡片
   * v1.7-spec-revision: flex:1 min-width:0——卡片可收缩，为 icon-only 复制按钮蹭出同行空间
   *   复制按钮 36px + gap 12px = 48px 末行末位，卡片 flex:1 填充剩余宽度，邮箱文本在卡片内 nowrap 显示
   *   padding 8px 12px；背景 #F5F7FA (light) / surface-2 (dark) / 6px 圆角 / 无彩色侧边条
   *   min-height 36px 与复制按钮严格等高，垂直居中 */
  .tm-mail-readonly {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: var(--tm-surface-2);
  }
  /* tm-mail-address — v1.7-spec【最高优先级·禁止内部断词】:
   *   white-space: nowrap + overflow-wrap: normal — 邮箱地址 @domain 永远不拆分成两行
   *   长邮箱整体跟随外层 flex 容器整体换行（而非文本内部断词）；不截断省略号 */
  .tm-mail-address {
    flex: 1;
    min-width: 0;
    font-family: var(--tm-mono);
    font-size: 14px;
    color: var(--tm-text);
    line-height: 1.5;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  /* tm-mail-placeholder — 空占位文案（v1.3: 禁止文字截断，移除 nowrap/ellipsis） */
  .tm-mail-placeholder {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--tm-text-subtle);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* tm-mail-copy-btn — 复制按钮（只读容器外部右侧）
   * v1.7-spec-revision【用户硬反馈】: icon-only——移除文字「复制」/「已复制」
   *   36px square 与只读框严格等高；主色 #409EFF 背景 + 白色 Copy/Check 图标
   *   6px 圆角 / :active scale(0.96) / 200ms 过渡 / flex-shrink:0 防挤压
   *   aria-label + title 提供可访问性（无文字时屏幕阅读器仍能识别）
   * r40 VLM 改进 4: 6px 圆角改用 --tm-radius-sm token，与全站主交互按钮统一 */
  .tm-mail-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 36px;
    min-width: 36px;
    width: 36px;
    padding: 0;
    border-radius: var(--tm-radius-sm);
    background-color: var(--tm-accent);
    color: var(--tm-accent-fg);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 200ms ease, background-color 200ms ease;
  }
  .tm-mail-copy-btn:hover:not(:disabled) {
    background-color: var(--tm-accent-hover);
  }
  .tm-mail-copy-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  .tm-mail-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* v1.7-spec【合规回滚】: .tm-mail-qr-btn 已完全移除 — spec 黑名单
   *   ❌禁止渲染二维码按钮 DOM（顶部卡片只保留邮箱展示 + 复制）
   *   历史上 v1.8 自主新增的 QR 快速分享按钮已被移除，readonly-row 只剩 2 个元素 */

  /* tm-mail-detail-footer — v1.8【邮件详情 dialog 操作工具栏】:
   *   底部固定一行，3 个按钮：复制正文（主色实心） + 复制发件人（ghost） + 关闭（ghost 右对齐）
   *   padding 12px 16px；border-top 1px；mobile 单列堆叠（flex-wrap: wrap）；
   *   desktop 水平排列（nowrap）；gap 8px；背景 surface-2 与 dialog body 区分 */
  .tm-mail-detail-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--tm-border);
    background-color: var(--tm-surface-2);
  }

  /* tm-mail-detail-action-btn — 通用样式：高度 32px，圆角 6px，font 12px */
  .tm-mail-detail-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 200ms ease;
    flex-shrink: 0;
  }
  .tm-mail-detail-action-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  .tm-mail-detail-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* --primary: 主色实心（复制正文 — primary CTA） */
  .tm-mail-detail-action-btn--primary {
    background-color: var(--tm-accent);
    color: var(--tm-accent-fg);
  }
  .tm-mail-detail-action-btn--primary:hover:not(:disabled) {
    background-color: var(--tm-accent-hover);
  }

  /* --ghost: 透明背景 + 灰色边框 + 灰字；hover 主色字 + 浅蓝背景 */
  .tm-mail-detail-action-btn--ghost {
    background-color: transparent;
    color: var(--tm-text-muted);
    border-color: var(--tm-border);
  }
  .tm-mail-detail-action-btn--ghost:hover:not(:disabled) {
    color: var(--tm-accent);
    background-color: color-mix(in srgb, var(--tm-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--tm-accent) 40%, transparent);
  }

  /* --ml-auto: 桌面端将关闭按钮推到右侧（mobile 因 wrap 自动落下一行） */
  .tm-mail-detail-action-btn--ml-auto {
    margin-left: auto;
  }
  @media (max-width: 480px) {
    /* mobile 单列堆叠：所有按钮 100% 宽度，关闭按钮不再右对齐 */
    .tm-mail-detail-action-btn {
      flex: 1 1 100%;
      width: 100%;
    }
    .tm-mail-detail-action-btn--ml-auto {
      margin-left: 0;
    }
  }

  /* tm-mail-info-row — v1.5【最高优先级·禁止垂直堆叠】: 有效期 + 已生成标签 + 更换域名链接
   *   全部放在同一水平行（margin-top 8px），左侧 expiry 灰色小号 + 前置圆点，
   *   右侧 [已生成 浅蓝小标签] + [更换域名 蓝色小链接]，flex-wrap 防止极窄屏挤压
   *   禁止各自独占一行浪费高度 */
  .tm-mail-info-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
  }
  .tm-mail-info-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .tm-mail-info-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  /* tm-mail-status-badge — v1.5: 替换 v1.4 完成态大按钮的小型「已生成」状态标签
   *   浅蓝底 #ECF5FF（color-mix 主题自适应） + 主色文字 #409EFF + 勾号 + 6px 圆角 + 11px 字号
   *   紧凑内边距 2px 8px；不占用整行 */
  .tm-mail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: color-mix(in oklab, var(--tm-accent) 12%, var(--tm-surface));
    color: var(--tm-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    flex-shrink: 0;
    user-select: none;
  }
  .tm-mail-status-badge > svg {
    width: 12px;
    height: 12px;
  }

  /* tm-mail-domain-block — v1.5: 展开后的域名选择器行（仅 showDomainSelector=true 时渲染），
   *   mt 8px 紧贴 info-row 下方；收起时不渲染，info-row 中只保留「更换域名」链接 */
  .tm-mail-domain-block {
    margin-top: 8px;
    margin-bottom: 0;
  }
  /* tm-mail-domain-row — 域名行（v1.3: gap 收紧 16px → 12px，align-items center） */
  .tm-mail-domain-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  /* tm-mail-more-link — “显示更多”纯文本链接（v1.2: 去掉箭头图标，字号略小）
   * v1.3: 纯文本无箭头，主色 #409EFF，圆角6px，缩小内边距 */
  .tm-mail-more-link {
    display: inline-flex;
    align-items: center;
    color: var(--tm-accent);
    font-size: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color 200ms ease;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .tm-mail-more-link:hover {
    background-color: color-mix(in oklab, var(--tm-accent) 8%, transparent);
  }

  /* tm-mail-prefix-block / row / input — r41: 自定义前缀输入区
   * 与只读地址行视觉协调：同高度 40px、同圆角 6px、同表面色；
   * input + @ + domain 横向排列，input flex-1，domain 自适应宽度。
   * 错误态：边框转 rose，提示文案 rose-500。 */
  .tm-mail-prefix-block {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .tm-mail-prefix-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    background: var(--tm-surface-2);
    transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  }
  .tm-mail-prefix-row:focus-within {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-soft);
    background: var(--tm-surface);
  }
  .tm-mail-prefix-input {
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tm-text);
    font-size: 13px;
    letter-spacing: 0.01em;
  }
  .tm-mail-prefix-input::placeholder {
    color: var(--tm-text-subtle);
    font-family: var(--font-geist-sans);
    letter-spacing: 0;
  }
  .tm-mail-prefix-input--error,
  .tm-mail-prefix-row:has(.tm-mail-prefix-input--error) {
    border-color: var(--tm-danger);
  }
  .tm-mail-prefix-at {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
  }
  .tm-mail-prefix-domain {
    flex-shrink: 0;
    max-width: 40%;
    font-size: 13px;
    line-height: 1;
  }
  .tm-mail-prefix-hint {
    font-size: 11px;
    line-height: 1.4;
    color: var(--tm-danger);
    padding-left: 0.25rem;
  }

  /* tm-mail-generate-btn — 主操作按钮【+ 生成邮箱】
   * r34: 渐变背景 + 微光动画 + 悬停缩放，更醒目的 CTA
   * r40 VLM 改进 4: 圆角改用 --tm-radius-sm token（=6px，YLPRO 规范），与 tm-icon-btn-sm / tm-btn-primary 统一 */
  .tm-mail-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    margin-top: 16px;
    border-radius: var(--tm-radius-sm);
    background: linear-gradient(135deg, var(--tm-accent) 0%, color-mix(in oklab, var(--tm-accent) 80%, #ec4899) 100%);
    color: var(--tm-accent-fg);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
    box-shadow: 0 2px 8px color-mix(in oklab, var(--tm-accent) 30%, transparent);
    position: relative;
    overflow: hidden;
  }
  .tm-mail-generate-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.05) 50%, transparent 55%);
    animation: tm-btn-shimmer 3s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes tm-btn-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
  }
  .tm-mail-generate-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 4px 16px color-mix(in oklab, var(--tm-accent) 40%, transparent);
    filter: brightness(1.08);
  }
  .tm-mail-generate-btn:active:not(:disabled) {
    transform: scale(0.96);
    box-shadow: 0 1px 4px color-mix(in oklab, var(--tm-accent) 20%, transparent);
  }
  .tm-mail-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .tm-mail-generate-btn:disabled::after {
    animation: none;
  }
  /* v1.4: 完成态 — 浅蓝底 #ECF5FF + 主色文字 + opacity 1 + not-allowed
   * 用 color-mix 在 light/dark 主题下自适应（accent 10% 混 surface） */
  .tm-mail-generate-btn.tm-mail-generate-btn--done:disabled {
    background-color: color-mix(in oklab, var(--tm-accent) 10%, var(--tm-surface));
    color: var(--tm-accent);
    opacity: 1;
    cursor: not-allowed;
  }
  .tm-mail-generate-btn.tm-mail-generate-btn--done:disabled:hover {
    background-color: color-mix(in oklab, var(--tm-accent) 10%, var(--tm-surface));
  }

  /* tm-mail-secondary-row — v1.5【紧凑优化】: 次操作行（QQ 测试 + 刷新）并排紧凑，mt 12px
   *   按钮尺寸缩小，不占用大量垂直高度，移动端不臃肿 */
  .tm-mail-secondary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
  .tm-mail-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background-color: transparent;
    color: var(--tm-text-muted);
    font-size: 12px;
    border: 1px solid var(--tm-border);
    cursor: pointer;
    flex: 1;
    min-height: 32px;
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
  }
  .tm-mail-secondary-btn:hover:not(:disabled) {
    background-color: var(--tm-surface-2);
    color: var(--tm-text);
  }
  .tm-mail-secondary-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  .tm-mail-secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* tm-mail-icon-btn — v1.5: 紧凑图标按钮 32x32（v1.4 36x36 → v1.5 32x32），与紧凑次按钮高度匹配 */
  .tm-mail-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: transparent;
    color: var(--tm-text-muted);
    border: 1px solid var(--tm-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
  }
  .tm-mail-icon-btn:hover:not(:disabled) {
    background-color: var(--tm-surface-2);
    color: var(--tm-text);
  }
  .tm-mail-icon-btn:active:not(:disabled) {
    transform: scale(0.96);
  }
  .tm-mail-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* tm-mail-expiry — 过期倒计时（v1.4: 邮箱卡片下方左侧，小号灰色 #909399，前置细小圆点）*/
  .tm-mail-expiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tm-text-subtle);
    font-family: var(--tm-mono);
    line-height: 1.4;
  }
  .tm-mail-expiry-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
  }
  .tm-mail-expiry--critical { color: var(--tm-danger); }
  .tm-mail-expiry--warning { color: var(--tm-warning); }

  /* tm-btn-gradient — 主 CTA 按钮（纯净实色 + 柔和中性阴影）
   * 去掉渐变和蓝色光晕，避免与浅色卡片底冲突；保持轻盈但醒目
   */
  .tm-btn-gradient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: var(--tm-radius-sm);
    background: var(--tm-accent);
    color: var(--tm-accent-fg);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    border: 1px solid color-mix(in oklab, var(--tm-accent) 88%, transparent);
    cursor: pointer;
    box-shadow:
      0 1px 2px rgb(0 0 0 / 0.05),
      0 2px 6px -2px color-mix(in oklab, var(--tm-accent) 22%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 0.16);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }
  .tm-btn-gradient:hover:not(:disabled) {
    background: var(--tm-accent-hover);
    box-shadow:
      0 2px 4px rgb(0 0 0 / 0.06),
      0 4px 10px -2px color-mix(in oklab, var(--tm-accent) 28%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 0.2);
    transform: translateY(-0.5px);
  }
  .tm-btn-gradient:active:not(:disabled) {
    transform: scale(0.985);
  }
  .tm-btn-gradient:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }

  /* tm-card-diag — 诊断卡片 */
  .tm-card-diag {
    border-radius: var(--tm-radius-md);
    border: 1px solid var(--tm-border-strong);
    background-color: var(--tm-surface-2);
  }

  /* tm-code-card — 验证码高亮卡 */
  .tm-code-card {
    border-radius: var(--tm-radius-md);
    border: 1px solid color-mix(in oklab, var(--tm-accent) 30%, transparent);
    background-color: var(--tm-accent-soft);
  }

  /* tm-btn-primary — 主 CTA 按钮 */
  .tm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: var(--tm-radius-sm);
    background-color: var(--tm-accent);
    color: var(--tm-accent-fg);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, opacity 200ms ease-in-out, transform 200ms ease-in-out;
  }
  .tm-btn-primary:hover:not(:disabled) {
    background-color: var(--tm-accent-hover);
  }
  .tm-btn-primary:active:not(:disabled) {
    transform: scale(0.96);
  }
  .tm-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* tm-btn-ghost — 幽灵按钮 */
  .tm-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2rem;
    padding: 0 0.75rem;
    border-radius: var(--tm-radius-sm);
    background-color: transparent;
    color: var(--tm-text-muted);
    font-size: 0.875rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  }
  .tm-btn-ghost:hover {
    background-color: var(--tm-surface-2);
    color: var(--tm-text);
  }

  /* tm-btn-danger — 危险按钮 */
  .tm-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: var(--tm-radius-sm);
    background-color: var(--tm-danger);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
  }
  .tm-btn-danger:hover {
    opacity: 0.9;
  }
  .tm-btn-danger:active {
    transform: translateY(1px);
  }

  /* tm-icon-btn — 图标按钮 (size-9) */
  .tm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tm-radius-sm);
    background-color: transparent;
    color: var(--tm-text-muted);
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  }
  .tm-icon-btn:hover {
    background-color: var(--tm-surface-2);
    color: var(--tm-text);
  }

  /* tm-icon-btn-sm — 小图标按钮 (size-7) */
  .tm-icon-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--tm-radius-sm);
    background-color: transparent;
    color: var(--tm-text-muted);
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  }
  .tm-icon-btn-sm:hover {
    background-color: var(--tm-surface-2);
    color: var(--tm-text);
  }
  /* 通知权限被浏览器拒绝：红色提示 */
  .tm-icon-btn-sm.is-denied {
    color: #ef4444;
  }
  .tm-icon-btn-sm.is-denied:hover {
    background-color: color-mix(in oklab, #ef4444 14%, transparent);
    color: #ef4444;
  }

  /* tm-chip — 芯片 */
  .tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full);
    border: 1px solid var(--tm-border);
    background-color: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: 11px;
    line-height: 1.4;
  }

  /* tm-input — 输入框 */
  .tm-input {
    display: block;
    width: 100%;
    background-color: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    color: var(--tm-text);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: border-color 200ms ease-in-out, box-shadow 200ms ease-in-out, background-color 200ms ease-in-out;
  }
  .tm-input::placeholder {
    color: var(--tm-text-subtle);
  }
  .tm-input:focus {
    outline: none;
    border-color: var(--tm-accent);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--tm-accent) 18%, transparent);
  }

  /* tm-scroll — 4px 细滚动条 */
  .tm-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-border-strong) transparent;
  }
  .tm-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  .tm-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .tm-scroll::-webkit-scrollbar-thumb {
    background-color: var(--tm-border-strong);
    border-radius: var(--tm-radius-full);
  }
  .tm-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--tm-text-subtle);
  }

  /* tm-divider — 水平分隔线 */
  .tm-divider {
    height: 1px;
    width: 100%;
    background-color: var(--tm-border);
    border: none;
  }

  /* tm-dialog — 模态对话框 */
  .tm-dialog {
    background-color: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    box-shadow: var(--tm-shadow-lg);
  }

  /* tm-tooltip — tooltip */
  .tm-tooltip {
    background-color: var(--tm-bg-elev);
    color: var(--tm-text);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    line-height: 1.4;
    box-shadow: var(--tm-shadow-md);
  }

  /* tm-badge-live — SSE 实时徽章（violet + 脉冲圆点） */
  .tm-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-accent-soft);
    color: var(--tm-accent);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
  .tm-badge-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-accent);
    animation: tm-pulse-dot 1.5s ease-in-out infinite;
  }

  /* tm-badge-polling — 轮询中徽章（muted） */
  .tm-badge-polling {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-surface-2);
    color: var(--tm-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
  .tm-badge-polling::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-text-muted);
  }

  /* tm-badge-polling-mode — 降级轮询模式徽章（amber warning） */
  .tm-badge-polling-mode {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-warning-soft);
    color: var(--tm-warning);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
  .tm-badge-polling-mode::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-warning);
  }
}

/* ============================================================
   @layer utilities — 工具类
   ============================================================ */
@layer utilities {
  /* tm-mono — 等宽 + tabular nums */
  .tm-mono {
    font-family: var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }

  /* tm-flash — 新邮件到达闪烁（rose-soft 背景 → 透明） */
  .tm-flash {
    animation: tm-flash 0.6s ease-out;
  }

  /* tm-pop — 验证码出现弹入 */
  .tm-pop {
    animation: tm-pop 0.2s ease-out;
  }

  /* ─── 北辰加载系统（tm-boot-* / tm-dots-loader）───
   * z.ai 官网同款 4 点旋转 loader：4 个圆点在圆形轨道上，透明度递减形成拖尾
   * 配合启动遮罩 + 按钮 loading 状态使用
   */

  /* tm-boot-overlay — 启动遮罩背景，渐入 */
  .tm-boot-overlay {
    animation: tm-boot-fade-in 0.35s ease-out both;
  }

  /* tm-dots-loader — 4 点旋转加载器（z.ai 风格）
   * 4 个圆点固定在 12/3/6/9 点钟位置，父容器整体旋转
   * 每个点 opacity 递减 1→0.7→0.45→0.2，形成彗星拖尾
   * size 通过 width/height 控制，点 size = 容器 25%
   */
  .tm-dots-loader {
    position: relative;
    width: 28px;
    height: 28px;
    animation: tm-dots-rotate 1.1s linear infinite;
  }
  .tm-dots-loader > i {
    position: absolute;
    width: 25%;
    height: 25%;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-accent);
  }
  /* 4 个点：12 点钟 / 3 点钟 / 6 点钟 / 9 点钟 */
  .tm-dots-loader > i:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
  .tm-dots-loader > i:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0.7;
  }
  .tm-dots-loader > i:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.45;
  }
  .tm-dots-loader > i:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0.2;
  }

  /* tm-boot-progress — 底部流光进度条容器 */
  .tm-boot-progress {
    position: relative;
    height: 2px;
    width: 180px;
    border-radius: var(--tm-radius-full);
    background-color: var(--tm-surface-2);
    overflow: hidden;
  }
  .tm-boot-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: var(--tm-radius-full);
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--tm-accent) 50%,
      transparent 100%
    );
    animation: tm-boot-progress-sweep 1.8s ease-in-out infinite;
  }

  /* tm-shimmer — 通用 shimmer 占位条（用于下拉加载、骨架屏） */
  .tm-shimmer {
    position: relative;
    overflow: hidden;
    background-color: var(--tm-surface-2);
  }
  .tm-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(64 158 255 / 0.12) 50%,
      transparent 100%
    );
    animation: tm-shimmer-sweep 1.4s ease-in-out infinite;
  }

  /* tm-skeleton-row — 邮件正文骨架屏单行 */
  .tm-skeleton-row {
    height: 10px;
    border-radius: var(--tm-radius-xs);
    background-color: var(--tm-surface-2);
    position: relative;
    overflow: hidden;
  }
  .tm-skeleton-row::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(64 158 255 / 0.10) 50%,
      transparent 100%
    );
    animation: tm-shimmer-sweep 1.4s ease-in-out infinite;
  }

  /* tm-spinner — 双环 + 中心点 spinner，替代 Loader2 */
  .tm-spinner {
    position: relative;
    display: inline-block;
    color: var(--tm-accent);
  }
  .tm-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: var(--tm-radius-full);
    border: 2px solid transparent;
  }
  .tm-spinner-ring--outer {
    border-top-color: currentColor;
    border-right-color: currentColor;
    animation: tm-spinner-rotate 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .tm-spinner-ring--inner {
    inset: 25%;
    border-bottom-color: currentColor;
    opacity: 0.55;
    animation: tm-spinner-rotate-reverse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .tm-spinner-dot {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20%;
    height: 20%;
    border-radius: var(--tm-radius-full);
    background-color: currentColor;
    opacity: 0.85;
  }
}

/* ============================================================
   @keyframes — 全局动画（定义在 layer 外，确保跨层引用）
   ============================================================ */

/* 新邮件到达：rose-soft 背景 → 透明 */
@keyframes tm-flash {
  0% {
    background-color: var(--tm-rose-soft);
  }
  100% {
    background-color: transparent;
  }
}

/* r35: badge bounce animation — subtle bounce when new message arrives */
@keyframes tm-badge-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 验证码出现：scale 0.96 → 1 */
@keyframes tm-pop {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* r36: 验证码卡片闪光动画 */
@keyframes tm-code-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 实时徽章脉冲圆点 */
@keyframes tm-pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ============================================================
   北辰加载系统 keyframes
   ============================================================ */

/* 启动遮罩渐入 */
@keyframes tm-boot-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 4 点旋转（z.ai 风格 loader） */
@keyframes tm-dots-rotate {
  to {
    transform: rotate(360deg);
  }
}

/* 底部流光进度条扫过 */
@keyframes tm-boot-progress-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(350%);
  }
}

/* shimmer 扫光 */
@keyframes tm-shimmer-sweep {
  100% {
    transform: translateX(100%);
  }
}

/* tm-spinner 双环旋转 */
@keyframes tm-spinner-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes tm-spinner-rotate-reverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* ============================================================
   YLPRO 专属组件类（§六 登录注册 / §八 落地页 / §五 表单规范）
   ──────────────────────────────────────────────────────────
   适配 Next.js 16 + React 19 + Tailwind v4 技术栈（非 Vue3+Element Plus），
   设计规则严格遵循 YLPRO v5.0 规范。
   ============================================================ */
@layer components {

  /* ── yl-glass-brand — 登录注册左侧 3D 玻璃质感品牌区 (§六) ──
   * 纯 CSS 模拟：多色渐变 + 1px 网格暗纹 + 2-3 个超大模糊光晕 + 浮动动画
   * 移动端隐藏（lg:block），大屏展示
   */
  .yl-glass-brand {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, #F0F5FF 0%, #E8F3FF 30%, #F5F7FA 60%, #EAF2FF 100%);
    background-size: 200% 200%;
    animation: yl-gradient-shift 15s ease infinite;
  }
  .dark .yl-glass-brand {
    background:
      linear-gradient(135deg, #0f1620 0%, #131c2a 30%, #0a0f16 60%, #0e1626 100%);
    background-size: 200% 200%;
  }
  /* 网格暗纹层 (1px 线宽, 间距 40px, rgba(64,158,255,0.08)) */
  .yl-glass-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(64, 158, 255, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(64, 158, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.8;
    transition: opacity 200ms ease-in-out;
    pointer-events: none;
  }
  .yl-glass-brand:hover::before {
    opacity: 1;
  }
  /* 超大模糊光晕层（2 个，左上角 + 右下角） */
  .yl-glass-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle 240px at 18% 22%, rgba(64, 158, 255, 0.15), transparent 70%),
      radial-gradient(circle 320px at 82% 78%, rgba(64, 158, 255, 0.10), transparent 70%);
    animation: yl-float 6s ease-in-out infinite alternate;
    pointer-events: none;
  }

  /* ── yl-halo — 独立光晕元素（可放置多个） ── */
  .yl-halo {
    position: absolute;
    border-radius: var(--tm-radius-full);
    background: radial-gradient(circle, rgba(64, 158, 255, 0.18), transparent 70%);
    filter: blur(80px);
    animation: yl-float 6s ease-in-out infinite alternate;
    pointer-events: none;
  }
  .dark .yl-halo {
    background: radial-gradient(circle, rgba(64, 158, 255, 0.22), transparent 70%);
  }

  /* ── yl-brand-logo — 品牌区 Logo 文字 (28px, 700, #303133) ── */
  .yl-brand-logo {
    font-size: 28px;
    font-weight: 700;
    color: #303133;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }
  .dark .yl-brand-logo {
    color: #E5EAF3;
  }
  /* Logo 下方 2px×32px 主题色装饰线 */
  .yl-brand-logo::after {
    content: "";
    display: block;
    width: 32px;
    height: 2px;
    background-color: #409EFF;
    margin-top: 8px;
    border-radius: var(--tm-radius-full);
  }

  /* ── yl-brand-slogan — 品牌区 Slogan (16px, #606266, line-height 1.6) ── */
  .yl-brand-slogan {
    font-size: 16px;
    color: #606266;
    line-height: 1.6;
  }
  .dark .yl-brand-slogan {
    color: #8a9099;
  }

  /* ── yl-feature-item — 产品要点列表项 (▸ 符号 + 文字) ── */
  .yl-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #303133;
    line-height: 1.6;
  }
  .yl-feature-item::before {
    content: "▸";
    color: #409EFF;
    font-weight: 600;
    flex-shrink: 0;
  }
  .dark .yl-feature-item {
    color: #E5EAF3;
  }

  /* ── yl-form-card — 右侧表单卡片 (shadow-md + 6px + 白底 + 32px padding) ── */
  .yl-form-card {
    background-color: #FFFFFF;
    border: 1px solid #F0F2F5;
    border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow-md);
    padding: 32px;
  }
  .dark .yl-form-card {
    background-color: #1a1e22;
    border-color: #2c3138;
  }

  /* ── yl-tab-underline — Tab 下划线 (2px, #409EFF, 200ms 过渡) ── */
  .yl-tab {
    position: relative;
    padding: 8px 0;
    font-size: 15px;
    color: #606266;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 200ms ease-in-out;
  }
  .yl-tab[data-active="true"] {
    color: #303133;
    font-weight: 600;
  }
  .dark .yl-tab {
    color: #8a9099;
  }
  .dark .yl-tab[data-active="true"] {
    color: #E5EAF3;
  }
  .yl-tab[data-active="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #409EFF;
    border-radius: var(--tm-radius-full);
    transition: all 200ms ease-in-out;
  }

  /* ── yl-input-wrap — 输入框外层（图标前缀 + 输入框一体） ──
   * 40px 高, 6px 圆角, 1px 边框, 默认 #F2F3F5 hover #E5E6EB focus #FFFFFF
   * 聚焦 box-shadow: 0 0 0 2px rgba(64,158,255,0.1) 光晕
   */
  .yl-input-wrap {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid #DCDFE6;
    border-radius: var(--tm-radius-sm);
    background-color: #F2F3F5;
    transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  }
  .yl-input-wrap:hover {
    background-color: #E5E6EB;
    border-color: #C0C4CC;
  }
  .yl-input-wrap:focus-within {
    background-color: #FFFFFF;
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
  }
  .dark .yl-input-wrap {
    background-color: #232830;
    border-color: #3a4048;
  }
  .dark .yl-input-wrap:hover {
    background-color: #2c3138;
    border-color: #4a5058;
  }
  .dark .yl-input-wrap:focus-within {
    background-color: #14171a;
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
  }

  /* yl-input-icon — 前缀/后缀图标 (1.5px 描边, #86909c, focus 时 #409EFF) */
  .yl-input-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 100%;
    color: #86909c;
    flex-shrink: 0;
    transition: color 200ms ease-in-out;
  }
  .yl-input-wrap:focus-within .yl-input-icon {
    color: #409EFF;
  }
  .yl-input-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.5;
  }

  /* yl-input-field — 实际输入框（无边框，继承外层样式） */
  .yl-input-field {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #303133;
    font-size: 14px;
    font-family: inherit;
    padding: 0 12px 0 0;
  }
  .yl-input-field::placeholder {
    color: #C0C4CC;
  }
  .dark .yl-input-field {
    color: #E5EAF3;
  }
  .dark .yl-input-field::placeholder {
    color: #4a5058;
  }

  /* ── yl-step — 三步注册指示器 (§六) ── */
  .yl-step-row {
    display: flex;
    align-items: center;
    gap: 0;
  }
  /* 圆圈 36px：激活 #409EFF 白字 / 已完成 #F5F7FA + 对勾 / 未激活 白底灰边 */
  .yl-step-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--tm-radius-full);
    border: 1px solid #DCDFE6;
    background-color: #FFFFFF;
    color: #909399;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 200ms ease-in-out;
  }
  .yl-step-circle[data-state="active"] {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #FFFFFF;
  }
  .yl-step-circle[data-state="done"] {
    background-color: #F5F7FA;
    border-color: #F5F7FA;
    color: #409EFF;
  }
  .dark .yl-step-circle {
    background-color: #1a1e22;
    border-color: #3a4048;
    color: #6a7079;
  }
  .dark .yl-step-circle[data-state="active"] {
    background-color: #409EFF;
    border-color: #409EFF;
    color: #FFFFFF;
  }
  .dark .yl-step-circle[data-state="done"] {
    background-color: rgb(64 158 255 / 0.14);
    border-color: rgb(64 158 255 / 0.14);
    color: #66b1ff;
  }
  /* 连接线 1px 细实线（禁粗线条） */
  .yl-step-connector {
    flex: 1;
    height: 1px;
    background-color: #E5E7EB;
    margin: 0 8px;
  }
  .dark .yl-step-connector {
    background-color: #2c3138;
  }
  /* 步骤标签 */
  .yl-step-label {
    font-size: 12px;
    color: #606266;
    margin-top: 8px;
    text-align: center;
  }
  .dark .yl-step-label {
    color: #8a9099;
  }

  /* ── yl-btn-lg — 大按钮 (48px 高, 100% 宽, #409EFF, 6px, scale(0.96) 点击) ── */
  .yl-btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--tm-radius-sm);
    background-color: #409EFF;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background-color 200ms ease-in-out, transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  }
  .yl-btn-lg:hover:not(:disabled) {
    background-color: #337ecc;
    box-shadow: 0 4px 12px -2px rgb(64 158 255 / 0.25);
  }
  .yl-btn-lg:active:not(:disabled) {
    transform: scale(0.96);
  }
  .yl-btn-lg:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ── yl-link — 底部跳转链接 (普通文本, #409EFF, hover 下划线) ── */
  .yl-link {
    color: #409EFF;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: text-decoration 200ms ease-in-out, color 200ms ease-in-out;
  }
  .yl-link:hover {
    text-decoration: underline;
  }

  /* ── yl-checkbox — 原生复选框风格 (#409EFF 勾选, 6px 圆角) ── */
  .yl-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #C0C4CC;
    border-radius: var(--tm-radius-sm);
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
    transition: all 200ms ease-in-out;
    flex-shrink: 0;
  }
  .yl-checkbox:checked {
    background-color: #409EFF;
    border-color: #409EFF;
  }
  .yl-checkbox:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #FFFFFF;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
  }
  .dark .yl-checkbox {
    background-color: #232830;
    border-color: #3a4048;
  }

  /* ── r39: yl-captcha-widget — 人机验证组件 ── */
  .yl-captcha-widget {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #EBEEF5;
    border-radius: 8px;
    background-color: #F9FAFB;
  }
  .dark .yl-captcha-widget {
    border-color: #2a3038;
    background-color: #1a1f26;
  }
  .yl-captcha-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
    margin-bottom: 8px;
  }
  .dark .yl-captcha-label {
    color: #a0a4ab;
  }
  .yl-captcha-icon {
    width: 14px;
    height: 14px;
    color: #409EFF;
  }
  .yl-captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .yl-captcha-question {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    background-color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #dcdfe6;
    white-space: nowrap;
  }
  .dark .yl-captcha-question {
    color: #e0e0e0;
    background-color: #232830;
    border-color: #3a4048;
  }
  .yl-captcha-input {
    width: 64px;
    height: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    background-color: #fff;
    color: #303133;
    outline: none;
    transition: border-color 150ms;
  }
  .yl-captcha-input:focus {
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
  }
  .dark .yl-captcha-input {
    background-color: #232830;
    color: #e0e0e0;
    border-color: #3a4048;
  }
  .yl-captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: #909399;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 150ms, color 150ms;
  }
  .yl-captcha-refresh:hover {
    background-color: #EBEEF5;
    color: #409EFF;
  }
  .dark .yl-captcha-refresh:hover {
    background-color: #2a3038;
  }
  .yl-captcha-loading,
  .yl-captcha-error {
    font-size: 13px;
    color: #909399;
  }
  .yl-captcha-error {
    color: #f56c6c;
  }

  /* 蜜罐字段 — 视觉隐藏但不禁用（机器人会填） */
  .yl-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    tab-index: -1;
  }

  /* ── yl-hero-gradient-text — 落地页 Hero 渐变文字 (§八) ── */
  .yl-hero-gradient-text {
    background: linear-gradient(90deg, #409EFF, #337ecc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* ── yl-card-hover — 落地页卡片 hover 上浮 (translateY(-2px) + 加深阴影) ── */
  .yl-card-hover {
    border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow-md);
    background-color: #FFFFFF;
    border: 1px solid #F0F2F5;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
  }
  .yl-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -4px rgb(64 158 255 / 0.18), 0 4px 8px -2px rgb(0 0 0 / 0.06);
  }
  .dark .yl-card-hover {
    background-color: #1a1e22;
    border-color: #2c3138;
  }

  /* ── yl-nav-glass — 落地页导航栏毛玻璃 (§八 backdrop-filter blur 10px) ── */
  .yl-nav-glass {
    background-color: rgb(255 255 255 / 85%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #F0F2F5;
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.03);
  }
  .dark .yl-nav-glass {
    background-color: rgb(20 23 26 / 80%);
    border-bottom-color: #2c3138;
  }

  /* ── yl-admin-sidebar-item — 后台侧边栏菜单项 (§七) ──
   * 激活 #409EFF + 8% 透明主题色背景 + 6px 圆角
   */
  .yl-admin-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--tm-radius-sm);
    color: #606266;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
  }
  .yl-admin-sidebar-item:hover {
    background-color: #F5F7FA;
    color: #303133;
  }
  .yl-admin-sidebar-item[data-active="true"] {
    background-color: rgb(64 158 255 / 0.08);
    color: #409EFF;
    font-weight: 500;
  }
  .dark .yl-admin-sidebar-item {
    color: #8a9099;
  }
  .dark .yl-admin-sidebar-item:hover {
    background-color: #232830;
    color: #E5EAF3;
  }
  .dark .yl-admin-sidebar-item[data-active="true"] {
    background-color: rgb(64 158 255 / 0.14);
    color: #66b1ff;
  }

  /* ── yl-table — 后台表格 (§七 el-table 风格) ──
   * 表头无彩色侧边条, 单元格内边距 12px, 行 hover #F5F7FA
   */
  .yl-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #FFFFFF;
  }
  .yl-table th {
    text-align: left;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #606266;
    background-color: #FAFBFC;
    border-bottom: 1px solid #EBEEF5;
  }
  .yl-table td {
    padding: 12px;
    font-size: 14px;
    color: #303133;
    border-bottom: 1px solid #F0F2F5;
  }
  .yl-table tbody tr {
    transition: background-color 200ms ease-in-out;
  }
  .yl-table tbody tr:hover {
    background-color: #F5F7FA;
  }
  .dark .yl-table {
    background-color: #1a1e22;
  }
  .dark .yl-table th {
    color: #8a9099;
    background-color: #232830;
    border-bottom-color: #2c3138;
  }
  .dark .yl-table td {
    color: #E5EAF3;
    border-bottom-color: #2c3138;
  }
  .dark .yl-table tbody tr:hover {
    background-color: #232830;
  }

  /* ── yl-readonly-card — 只读预览卡片 (§五 背景 #F5F7FA + 6px + 无彩色侧边) ── */
  .yl-readonly-card {
    background-color: #F5F7FA;
    border-radius: var(--tm-radius-sm);
    padding: 12px 16px;
    color: #606266;
    font-size: 14px;
  }
  .dark .yl-readonly-card {
    background-color: #232830;
    color: #8a9099;
  }

  /* ── r40: yl-slider-* — 阿里云滑块验证组件 ──
   * 1:1 还原阿里云滑块风格：
   *   - 灰色背景轨道（高 40px，圆角 4px）
   *   - 左侧提示文字"向右滑动验证"
   *   - 右侧可拖动滑块按钮（方形圆角，带右箭头）
   *   - 拖动过程中轨道左侧填充蓝色渐变
   *   - 拖到最右侧 → 绿色 + "验证成功"
   *   - 异常 → 红色 + "验证失败，请重试"
   */
  .yl-slider-widget {
    position: relative;
    margin-top: 16px;
    user-select: none;
    -webkit-user-select: none;
  }

  .yl-slider-track {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    background-color: #F7F8FA;
    border: 1px solid #E5E8EB;
    overflow: hidden;
    transition: background-color 200ms ease, border-color 200ms ease;
  }
  .dark .yl-slider-track {
    background-color: #1f242b;
    border-color: #2c3138;
  }

  /* 提示文字 — 居中显示在轨道上 */
  .yl-slider-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #909399;
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    letter-spacing: 0.5px;
    transition: color 200ms ease;
  }
  .dark .yl-slider-text {
    color: #6a7079;
  }

  /* 已拖过的填充背景（蓝色渐变） */
  .yl-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);
    opacity: 0.18;
    transition: opacity 200ms ease, background 200ms ease;
    z-index: 0;
    pointer-events: none;
  }

  /* 拖动中 — 填充更明显 */
  .yl-slider-status-dragging .yl-slider-fill {
    opacity: 0.35;
  }
  .yl-slider-status-dragging .yl-slider-text {
    color: #409EFF;
  }

  /* 成功 — 轨道变绿 */
  .yl-slider-status-success .yl-slider-track,
  .yl-slider-track.yl-slider-status-success {
    background-color: #52C41A;
    border-color: #52C41A;
  }
  .yl-slider-status-success .yl-slider-fill {
    background: linear-gradient(90deg, #52C41A 0%, #73d13d 100%);
    opacity: 0;
  }
  .yl-slider-status-success .yl-slider-text {
    color: #FFFFFF;
    font-weight: 500;
  }
  .yl-slider-status-success .yl-slider-button {
    background-color: #FFFFFF;
    color: #52C41A;
    cursor: default;
  }

  /* 失败 — 轨道变红 */
  .yl-slider-status-failed .yl-slider-track,
  .yl-slider-track.yl-slider-status-failed {
    background-color: #FFF1F0;
    border-color: #FFCCC7;
  }
  .dark .yl-slider-status-failed .yl-slider-track,
  .dark .yl-slider-track.yl-slider-status-failed {
    background-color: #2a1a1a;
    border-color: #5c2a26;
  }
  .yl-slider-status-failed .yl-slider-fill {
    background: linear-gradient(90deg, #FF4D4F 0%, #ff7875 100%);
    opacity: 0.15;
  }
  .yl-slider-status-failed .yl-slider-text {
    color: #FF4D4F;
  }
  .yl-slider-status-failed .yl-slider-button {
    color: #FF4D4F;
  }

  /* 滑块按钮 — 40×40，方形圆角，带右箭头 */
  .yl-slider-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    color: #606266;
    border: 1px solid #E5E8EB;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: grab;
    z-index: 2;
    transition: box-shadow 150ms ease, color 150ms ease, background-color 150ms ease;
    touch-action: none; /* 阻止触摸滚动，确保拖动流畅 */
  }
  .yl-slider-button:hover {
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.18);
    color: #409EFF;
    border-color: #409EFF;
  }
  .yl-slider-button:active {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);
  }
  .dark .yl-slider-button {
    background-color: #2a3038;
    color: #c0c4cc;
    border-color: #3a4048;
  }
  .dark .yl-slider-button:hover {
    color: #66b1ff;
    border-color: #409EFF;
  }

  /* 滑块按钮里的图标 */
  .yl-slider-btn-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }

  /* 加载中 — 轨道淡化 */
  .yl-slider-status-loading .yl-slider-button {
    cursor: wait;
    opacity: 0.7;
  }

  /* 辅助提示文字（轨道下方，仅在加载/失败时显示） */
  .yl-slider-helper {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
  }
  .yl-slider-helper-loading {
    color: #909399;
  }
  .yl-slider-helper-error {
    color: #FF4D4F;
  }
}

/* ============================================================
   YLPRO 工具类（utilities 层）
   ============================================================ */
@layer utilities {

  /* yl-fade-in-up — 错开淡入上移动画 (400ms ease-out)
   * 用法: <div className="yl-fade-in-up" style={{ animationDelay: '50ms' }}>
   * 时序: Logo 0ms / 标题 50ms / 副标题 100ms / 提示 150ms / 输入框 200ms / 按钮 250ms / 链接 300ms
   */
  .yl-fade-in-up {
    opacity: 0;
    animation: yl-fade-in-up 400ms ease-out forwards;
  }

  /* yl-shake — 错误抖动反馈（登录失败时） */
  .yl-shake {
    animation: yl-shake 0.4s ease-in-out;
  }
}

/* ============================================================
   YLPRO keyframes
   ============================================================ */

/* 错开淡入上移：opacity 0→1 + translateY(8px→0) */
@keyframes yl-fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 光晕浮动：6s ease-in-out alternate */
@keyframes yl-float {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(12px, -8px);
  }
}

/* 渐变流动：15s ease infinite */
@keyframes yl-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 错误抖动（登录失败反馈） */
@keyframes yl-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* ============================================================
   YLPRO Toast 覆盖（§三 成功用 #409EFF，禁绿；顶部固定；最大宽 420px）
   ──────────────────────────────────────────────────────────
   当前项目用 custom-toast.tsx（非 Element Plus ElMessage），
   但其 success 图标已是 #409EFF 蓝圆勾（符合规范）。
   此处补充 sonner 兼容覆盖（若未来切换 sonner）+ 全局 toast 间距 12px。
   ============================================================ */

/* sonner success toast 覆盖为 #409EFF（禁绿） */
[data-sonner-toast][data-type="success"] {
  --normal-bg: #FFFFFF !important;
  --normal-border: rgb(64 158 255 / 0.25) !important;
  --normal-text: #303133 !important;
  --success-bg: #FFFFFF !important;
  --success-border: rgb(64 158 255 / 0.25) !important;
  --success-text: #409EFF !important;
}
[data-sonner-toast][data-type="success"] [data-icon] svg {
  color: #409EFF !important;
}

/* sonner toast 顶部固定 + 最大宽 420px + 多条间距 12px */
[data-sonner-toaster] {
  --width: 420px;
}
[data-sonner-toaster] [data-sonner-toast] {
  border-radius: var(--tm-radius-sm) !important;
  box-shadow: var(--tm-shadow-md) !important;
}