/* ============================================================================
   带货视频工作台 · 设计令牌层 (Design Tokens)
   ----------------------------------------------------------------------------
   单一真源：index.html（工作台）与 landing.html（落地页）共用本文件。
   改视觉先改这里，不要在页面里写死颜色 / 圆角 / 时间。

   色彩策略：中性基座 (Zinc 系) + 单一强调色
     · 强调色 = 朱砂红 #C8352B（中式带货语境下的信任色，且与抖音红同族但不刺眼）
     · 明确放弃「AI 紫渐变」——该配色是最典型的 AI 生成痕迹
     · 语义色（成功/警告/危险）仅用于状态，不参与品牌表达
   饱和度控制：强调色 HSL ≈ (5, 65%, 48%)，饱和度 < 80%
   纯黑纯白禁用：最深 #0B0B0D，最浅 #FCFCFD
   ============================================================================ */

:root{
  /* ---------- 字体 ---------- */
  /* 中文优先走系统字体（PingFang / 微软雅黑 已有良好字重），
     拉丁字母与数字走自托管 Grotesk，避免 Inter 这种「AI 默认脸」。
     注：不引外链 CDN，生产环境应把 woff2 放到 webapp/public/fonts/ 后开启 @font-face。 */
  --font-sans:"Geist","Outfit","PP Neue Montreal",-apple-system,BlinkMacSystemFont,
              "PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",
              "Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --font-mono:"Geist Mono","JetBrains Mono","SF Mono",ui-monospace,Consolas,monospace;

  /* 字号阶梯（1.200 minor third 修正版，配合中文视觉重心） */
  --fs-11:11px; --fs-12:12px;  --fs-13:13px;  --fs-14:14px;
  --fs-16:16px; --fs-18px:18px; --fs-20:20px; --fs-24:24px;
  --fs-28:28px; --fs-34:34px;  --fs-44:44px;  --fs-56:56px;

  /* 字重：引入 500/600 做细微层级，避免只有 400/700 的断层 */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* 字距：大标题收紧、小标签放开 */
  --ls-display:-0.045em; --ls-title:-0.025em; --ls-body:0; --ls-label:0.06em;

  /* 行高 */
  --lh-display:1.08; --lh-title:1.24; --lh-body:1.68; --lh-tight:1.4;

  /* ---------- 间距刻度（4px 基准，全部组件只用这些值） ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --sp-20:80px; --sp-24:96px; --sp-32:128px;

  /* 版心 */
  --wrap-app:1240px;      /* 工作台内容最大宽 */
  --wrap-mkt:1180px;      /* 落地页版心 */
  --measure:68ch;         /* 正文行宽上限（约 65-70 字符） */

  /* ---------- 圆角刻度（Shape Consistency Lock：一套刻度走到底） ---------- */
  --r-full:999px;   /* 按钮 / 胶囊 */
  --r-xl:24px;      /* 外层 shell */
  --r-lg:18px;      /* 主内容卡 */
  --r-md:12px;      /* 内层控件 */
  --r-sm:8px;       /* 小徽标 / 输入框内元素 */

  /* ---------- 动效 ---------- */
  --ease-out-quint:cubic-bezier(0.22,1,0.36,1);   /* 进场：快出慢停 */
  --ease-soft:cubic-bezier(0.32,0.72,0,1);        /* 位移：有质量感 */
  --ease-in-out-quint:cubic-bezier(0.83,0,0.17,1);/* 状态切换 */
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms; --dur-enter:760ms;

  /* ---------- 层级（Z-Index 刻度，禁止随手 9999） ---------- */
  --z-base:1; --z-sticky:20; --z-nav:40; --z-modal:60; --z-toast:80; --z-grain:90;

  /* ---------- 动效强度开关（对应 taste-skill 的 MOTION_INTENSITY） ---------- */
  --motion-intensity:5;
}

/* ============================================================================
   主题 A：工作台（明亮）
   ============================================================================ */
:root, [data-theme="light"]{
  --bg:#F7F7F9;
  --bg-sunken:#F1F1F4;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --surface-hover:#F4F4F6;
  --ink:#131316;
  --ink-2:#3F3F46;
  --sub:#71717A;
  --sub-2:#A1A1AA;
  --line:#E6E6EA;
  --line-strong:#D4D4D8;

  --accent:#C8352B;          /* 唯一强调色 */
  --accent-hover:#A82A22;
  --accent-soft:#FDF0EF;
  --accent-ring:rgba(200,53,43,.16);

  --accent-ink:#FFFFFF;

  --ok:#0E7C57;   --ok-soft:#E8F6F1;
  --warn:#B45309; --warn-soft:#FDF4E7;
  --bad:#BE123C;  --bad-soft:#FDEEF1;

  /* 阴影：全部带背景色相（冷调），禁止纯黑投影 */
  --sh-hairline:0 1px 2px rgba(24,24,27,.04);
  --sh-sm:0 1px 2px rgba(24,24,27,.05), 0 4px 12px -6px rgba(24,24,27,.10);
  --sh-md:0 2px 4px rgba(24,24,27,.04), 0 12px 28px -12px rgba(24,24,27,.14);
  --sh-lg:0 4px 8px rgba(24,24,27,.04), 0 28px 56px -20px rgba(24,24,27,.20);
  --sh-inset-hi:inset 0 1px 0 rgba(255,255,255,.85);      /* Double-Bezel 内高光 */
  --sh-inset-lo:inset 0 1px 2px rgba(24,24,27,.05);

  /* 玻璃态（仅用于 sticky / overlay） */
  --glass-bg:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.6);
  --glass-ring:rgba(24,24,27,.07);

  /* 外/内层 shell 底色（Double-Bezel） */
  --shell-bg:rgba(24,24,27,.032);
  --shell-line:rgba(24,24,27,.07);

  --scrim:rgba(18,18,22,.44);
  color-scheme:light;
}

/* ============================================================================
   主题 B：工作台（暗色）
   ============================================================================ */
[data-theme="dark"]{
  --bg:#0B0B0D;
  --bg-sunken:#08080A;
  --surface:#131316;
  --surface-2:#191920;
  --surface-hover:#1F1F26;
  --ink:#F4F4F5;
  --ink-2:#D4D4D8;
  --sub:#8B8B94;
  --sub-2:#5C5C66;
  --line:#26262E;
  --line-strong:#33333D;

  --accent:#F2544A;          /* 暗底上提亮，保持同一色相 */
  --accent-hover:#FF6B60;
  --accent-soft:rgba(242,84,74,.12);
  --accent-ring:rgba(242,84,74,.28);

  --accent-ink:#180604;

  --ok:#3FCF9A;   --ok-soft:rgba(63,207,154,.12);
  --warn:#E8A33D; --warn-soft:rgba(232,163,61,.12);
  --bad:#FF6B81;  --bad-soft:rgba(255,107,129,.12);

  --sh-hairline:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 1px 2px rgba(0,0,0,.5), 0 4px 12px -6px rgba(0,0,0,.6);
  --sh-md:0 2px 4px rgba(0,0,0,.45), 0 12px 28px -12px rgba(0,0,0,.7);
  --sh-lg:0 4px 8px rgba(0,0,0,.5), 0 28px 56px -20px rgba(0,0,0,.8);
  --sh-inset-hi:inset 0 1px 0 rgba(255,255,255,.06);
  --sh-inset-lo:inset 0 1px 2px rgba(0,0,0,.4);

  --glass-bg:rgba(19,19,22,.72);
  --glass-line:rgba(255,255,255,.08);
  --glass-ring:rgba(255,255,255,.07);

  --shell-bg:rgba(255,255,255,.035);
  --shell-line:rgba(255,255,255,.07);

  --scrim:rgba(0,0,0,.62);
  color-scheme:dark;
}

/* ============================================================================
   主题 C：落地页（品牌向，暗色为主）
   落地页锁定暗色单主题——与工作台切换互不影响，避免中途变脸。
   ============================================================================ */
[data-theme="brand"]{
  --bg:#0B0B0D;
  --bg-sunken:#08080A;
  --surface:#141418;
  --surface-2:#1A1A20;
  --surface-hover:#20202A;
  --ink:#FAFAFA;
  --ink-2:#C9C9D1;
  --sub:#8B8B94;
  --sub-2:#5C5C66;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --accent:#F2544A;
  --accent-hover:#FF6B60;
  --accent-soft:rgba(242,84,74,.13);
  --accent-ring:rgba(242,84,74,.30);
  --accent-ink:#180604;

  --ok:#3FCF9A;   --ok-soft:rgba(63,207,154,.12);
  --warn:#E8A33D; --warn-soft:rgba(232,163,61,.12);
  --bad:#FF6B81;  --bad-soft:rgba(255,107,129,.12);

  --sh-sm:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.7);
  --sh-md:0 2px 6px rgba(0,0,0,.5), 0 16px 36px -14px rgba(0,0,0,.75);
  --sh-lg:0 6px 12px rgba(0,0,0,.5), 0 36px 72px -24px rgba(0,0,0,.85);
  --sh-inset-hi:inset 0 1px 0 rgba(255,255,255,.07);
  --sh-inset-lo:inset 0 1px 2px rgba(0,0,0,.4);

  --glass-bg:rgba(20,20,24,.66);
  --glass-line:rgba(255,255,255,.09);
  --glass-ring:rgba(255,255,255,.07);

  --shell-bg:rgba(255,255,255,.038);
  --shell-line:rgba(255,255,255,.075);

  --scrim:rgba(0,0,0,.66);
  color-scheme:dark;
}

/* ============================================================================
   主题 D：落地页（明亮）
   ============================================================================ */
[data-theme="brand-light"]{
  --bg:#FAFAFA;
  --bg-sunken:#F2F2F4;
  --surface:#FFFFFF;
  --surface-2:#FAFAFB;
  --surface-hover:#F4F4F6;
  --ink:#131316;
  --ink-2:#3F3F46;
  --sub:#71717A;
  --sub-2:#A1A1AA;
  --line:#E7E7EB;
  --line-strong:#D4D4D8;

  --accent:#C8352B;
  --accent-hover:#A82A22;
  --accent-soft:#FDF0EF;
  --accent-ring:rgba(200,53,43,.16);
  --accent-ink:#FFFFFF;

  --ok:#0E7C57;   --ok-soft:#E8F6F1;
  --warn:#B45309; --warn-soft:#FDF4E7;
  --bad:#BE123C;  --bad-soft:#FDEEF1;

  --sh-sm:0 1px 2px rgba(24,24,27,.05), 0 4px 12px -6px rgba(24,24,27,.10);
  --sh-md:0 2px 4px rgba(24,24,27,.04), 0 12px 28px -12px rgba(24,24,27,.14);
  --sh-lg:0 4px 8px rgba(24,24,27,.04), 0 28px 56px -20px rgba(24,24,27,.20);
  --sh-inset-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --sh-inset-lo:inset 0 1px 2px rgba(24,24,27,.05);

  --glass-bg:rgba(255,255,255,.74);
  --glass-line:rgba(255,255,255,.7);
  --glass-ring:rgba(24,24,27,.07);

  --shell-bg:rgba(24,24,27,.032);
  --shell-line:rgba(24,24,27,.07);

  --scrim:rgba(18,18,22,.44);
  color-scheme:light;
}

/* ============================================================================
   基础重置
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-14);
  line-height:var(--lh-body);
  background:var(--bg);
  color:var(--ink);
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  /* 注意：这里刻意不写 overflow-x:hidden。
     一旦 body/html 上出现 overflow-x:hidden，浏览器会把这个元素变成
     position:fixed 后代的「包含块」，导致 .grain::after 的 fixed 覆盖层
     退化为「绝对定位到文档流」——页面一长就只剩顶部一小块有噪点。
     需要防横向溢出的页面，请在各自页面里对具体容器做裁剪。 */
  min-height:100dvh;
}

/* 数字统一等宽，避免表格/价格跳动 */
.num, .stat b, td.num, .price, [data-num]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--fs-14);color:var(--ink)}

/* 长标题不出现单字孤行 */
h1,h2,h3,h4{text-wrap:balance;letter-spacing:var(--ls-title);line-height:var(--lh-title)}
p{text-wrap:pretty}

/* ---------- 无障碍：可见焦点（键盘专属，鼠标点击不显示） ---------- */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---------- 无障碍：跳转到主内容 ---------- */
.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;
  z-index:var(--z-toast);
  background:var(--accent);color:var(--accent-ink);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);
  font-weight:var(--fw-semibold);font-size:var(--fs-13);
  transition:top var(--dur-base) var(--ease-soft);
}
.skip-link:focus-visible{top:var(--sp-4)}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:var(--r-full);
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--sub-2);background-clip:content-box}

/* ============================================================================
   Double-Bezel（嵌套壳）—— 所有主卡片统一用这个结构
   outer .shell 提供「铝托盘」，inner .core 是真正的玻璃板
   ============================================================================ */
.shell{
  background:var(--shell-bg);
  border:1px solid var(--shell-line);
  border-radius:var(--r-xl);
  padding:var(--sp-1);
  box-shadow:var(--sh-hairline);
}
.shell > .core{
  background:var(--surface);
  border-radius:calc(var(--r-xl) - var(--sp-1));
  box-shadow:var(--sh-inset-hi), var(--sh-sm);
}

/* 大号 shell（用于 hero / 主面板） */
.shell-lg{border-radius:calc(var(--r-xl) + 6px);padding:6px}
.shell-lg > .core{border-radius:var(--r-xl);box-shadow:var(--sh-inset-hi), var(--sh-md)}

/* ============================================================================
   按钮体系
   主按钮 = 胶囊 + 内嵌图标圆（button-in-button）
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);
  padding:10px var(--sp-5);
  border-radius:var(--r-md);
  font-size:var(--fs-13);
  font-weight:var(--fw-semibold);
  letter-spacing:.005em;
  white-space:nowrap;              /* CTA 换行 = 设计失败 */
  transition:
    background-color var(--dur-fast) var(--ease-in-out-quint),
    border-color var(--dur-fast) var(--ease-in-out-quint),
    color var(--dur-fast) var(--ease-in-out-quint),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft);
  border:1px solid transparent;
  position:relative;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.6}

.btn-primary{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:var(--sh-inset-hi), 0 6px 16px -8px var(--accent-ring);
}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--sh-inset-hi), 0 10px 22px -8px var(--accent-ring)}

/* 尾随图标圆：箭头等永远包在圆里，不裸放 */
.btn .trail{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--r-full);
  background:rgba(255,255,255,.18);
  margin-right:-6px;
  transition:transform var(--dur-base) var(--ease-soft);
}
.btn:hover .trail{transform:translate(2px,-1px)}

.btn-ghost{
  background:var(--surface);border-color:var(--line);color:var(--ink);
  box-shadow:var(--sh-hairline);
}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--line-strong)}

.btn-quiet{background:transparent;color:var(--sub)}
.btn-quiet:hover{background:var(--surface-hover);color:var(--ink)}

.btn-sm{padding:7px var(--sp-3);font-size:var(--fs-12);border-radius:var(--r-sm);gap:var(--sp-1)}
.btn-sm svg{width:14px;height:14px}
.btn-sm .trail{width:18px;height:18px;margin-right:-2px}

/* XS：嵌在字段标签行里的小按钮（如「换一个」）。
 * 高度写死 28px = 可点目标下限（tools/qa/preflight.js 的几何闸门），
 * 也正好等于 .field-head 的行高，所以按钮不会把标签行撑高、也不会反过来被挤压。 */
.btn-xs{height:28px;padding:0 var(--sp-2);font-size:var(--fs-11);border-radius:var(--r-sm);gap:var(--sp-1);font-weight:var(--fw-medium)}
.btn-xs svg{width:12px;height:12px}

.btn-lg{padding:14px var(--sp-6);font-size:var(--fs-14);border-radius:var(--r-full)}
.btn-block{width:100%}

.btn[disabled],.btn.disabled{opacity:.4;pointer-events:none}

/* ============================================================================
   徽标 / 状态点
   ============================================================================ */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px var(--sp-2);border-radius:var(--r-sm);
  font-size:var(--fs-11);font-weight:var(--fw-semibold);
  letter-spacing:.01em;
  border:1px solid transparent;
}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--bad-soft);color:var(--bad)}
.chip-info{background:var(--accent-soft);color:var(--accent)}
.chip-grey{background:var(--surface-hover);color:var(--sub)}

/* 状态点：只在承载真实状态时使用，不做纯装饰 */
.dot{width:6px;height:6px;border-radius:var(--r-full);background:currentColor;flex-shrink:0}

/* ============================================================================
   表单
   ============================================================================ */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{
  font-size:var(--fs-12);color:var(--sub);
  font-weight:var(--fw-medium);letter-spacing:var(--ls-label);
}
/* 标签行：左侧标签 + 右侧小按钮（「换一个」）。
 * 旧写法是按钮 float:right + margin-top:-4px —— 浮动框比标签行高，会被顶到标签上方，
 * 视觉上「按钮比标题高」；且浮动不参与行高计算，把字段间距也带歪了。
 * 改成 flex 居中 + 统一 28px 行高：同一行里带按钮和不带按钮的字段，输入框顶边完全对齐。 */
.form-grid > .field > label,
.field-head{
  display:flex;align-items:center;
  gap:var(--sp-3);min-height:28px;
}
.field-head{justify-content:space-between}
.field-head > label{flex:0 1 auto}
.field .hint{font-size:var(--fs-11);color:var(--sub-2);line-height:var(--lh-tight)}
.field .err{font-size:var(--fs-11);color:var(--bad);font-weight:var(--fw-medium)}

.field input,.field select,.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:10px var(--sp-3);
  background:var(--surface-2);
  outline:none;
  transition:
    border-color var(--dur-fast) var(--ease-in-out-quint),
    box-shadow var(--dur-fast) var(--ease-in-out-quint),
    background-color var(--dur-fast) var(--ease-in-out-quint);
}
.field input::placeholder,.field textarea::placeholder{color:var(--sub-2)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring);
  background:var(--surface);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}

/* ============================================================================
   收纳卡（非 Double-Bezel 的轻量分组）
   ============================================================================ */
.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
}
.panel + .panel{margin-top:var(--sp-4)}

/* 卡片标题：去掉彩色竖条，改用字重 + 字距做层级 */
.card-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);
  font-size:var(--fs-13);
  font-weight:var(--fw-semibold);
  letter-spacing:-.005em;
  color:var(--ink);
  margin-bottom:var(--sp-4);
}
.card-title .sub{font-size:var(--fs-11);color:var(--sub);font-weight:var(--fw-regular)}

/* ============================================================================
   表格（数字等宽、行分隔克制）
   ============================================================================ */
table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
th{
  text-align:left;color:var(--sub);
  font-size:var(--fs-11);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line);
}
td{
  padding:var(--sp-3);
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-variant-numeric:tabular-nums;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background-color var(--dur-fast) var(--ease-in-out-quint)}
tbody tr:hover{background:var(--surface-hover)}

/* ============================================================================
   空态 / 骨架屏
   ============================================================================ */
.empty{
  padding:var(--sp-12) var(--sp-6);
  text-align:center;
  color:var(--sub);
  font-size:var(--fs-13);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
}
.empty .empty-ico{
  width:44px;height:44px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-hover);color:var(--sub-2);
}
.empty .empty-ico svg{width:22px;height:22px;stroke-width:1.4}
.empty b{color:var(--ink-2);font-weight:var(--fw-medium);font-size:var(--fs-13)}

/* 骨架：形状贴合最终布局，不用转圈 spinner */
.skel{
  background:linear-gradient(100deg,
    var(--surface-hover) 30%,
    var(--surface-2) 50%,
    var(--surface-hover) 70%);
  background-size:220% 100%;
  border-radius:var(--r-sm);
  animation:skel-shimmer 1.4s linear infinite;
}
@keyframes skel-shimmer{
  from{background-position:180% 0}
  to{background-position:-40% 0}
}
.skel-line{height:12px;margin-bottom:var(--sp-2)}
.skel-block{border-radius:var(--r-md)}

/* ============================================================================
   提示条 / 通知
   ============================================================================ */
.toast{
  position:fixed;top:var(--sp-5);left:50%;
  /* 隐藏态：用 calc 保证完全移出视口，否则固定位移量会让它露出下缘一小截 */
  transform:translateX(-50%) translateY(calc(-100% - var(--sp-6)));
  background:var(--ink);color:var(--bg);
  padding:var(--sp-3) var(--sp-5);
  border-radius:var(--r-full);
  font-size:var(--fs-13);font-weight:var(--fw-medium);
  box-shadow:var(--sh-lg);
  transition:transform var(--dur-slow) var(--ease-soft);
  z-index:var(--z-toast);
  max-width:min(560px,92vw);
  text-align:center;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--bad);color:#fff}

/* 行内提示（比 banner 更轻） */
.note{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--fs-12);
  line-height:var(--lh-tight);
  border:1px solid transparent;
}
.note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;stroke-width:1.6}
.note-info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-ring)}
.note-warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(180,83,9,.18)}
.note-ok{background:var(--ok-soft);color:var(--ok);border-color:rgba(14,124,87,.16)}

/* ============================================================================
   进场动画（仅 transform / opacity；尊重 prefers-reduced-motion）
   ============================================================================ */
.enter{
  opacity:0;
  transform:translateY(14px);
  animation:enter-up var(--dur-enter) var(--ease-out-quint) forwards;
}
@keyframes enter-up{
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .enter{opacity:1;transform:none;animation:none}
  .skel{animation:none;background:var(--surface-hover)}
}

/* 降低透明度偏好：玻璃态直接退化为实底 */
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--surface)!important;backdrop-filter:none!important}
}

/* ============================================================================
   玻璃态（仅 sticky / overlay 使用，禁止用在滚动容器上）
   ============================================================================ */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-md), var(--sh-inset-hi);
}

/* ============================================================================
   颗粒质感（fixed 覆盖层，绝不挂在滚动容器上）
   ============================================================================ */
.grain::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:var(--z-grain);
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}