/* ============================================================================
   redesign.css — v7.0 首页工作台改版（方向 B 骨架 + 方向 A 命令栏）
   ----------------------------------------------------------------------------
   设计约束（改动前必读）
     1. 本文件**只使用 index.html :root 里已有的语义令牌**（--surface / --line /
        --ink / --muted / --brand / --brand-soft / --brand-glow / --shadow-*）
        → 7 套主题（日间/夜潜/香槟/雪景/夜樱/晨雾玫瑰/太空黑金）自动全部生效，
          不需要在每个主题块里为新组件补样式。
     2. **不改动任何原有 class 的定义**，新增 class 一律 wb- 前缀；
        对原有卡片只加修饰类 .card--v / .grid--wb，用更高特异性覆盖排布。
     3. body[data-theme] 主题块里的 .card-* 样式继续生效 → 卡片配色零重写。
     4. index.html 的 <style> 在本文件之前 → 同特异性下本文件胜出；
        唯一需要 !important 的是 .card 的 overflow（原样式带 !important）。
     5. 动效只用 transform / opacity，150-250ms，且尊重 prefers-reduced-motion。
        不引入 WebGL、不引入外部字体、不引入任何 JS 依赖。
   回滚：删除 index.html 里 <link href="redesign.css"> 一行即可（见 README）。
   ============================================================================ */

/* ============================ 0. 顶栏修补 ============================ */
/* v7.0：顶栏搜索并入首页命令栏后，.top-actions 失去了原本赖以顶到右边的弹性占位
   （原来是 .global-search{flex:1} 在撑），结果动作组挤在品牌旁边、右侧空 600px。
   这里补回 margin-left:auto，恢复「品牌靠左 / 动作靠右」的原构图。 */
.topbar .top-actions{margin-left:auto}

/* ============================ 1. 工作台外壳 ============================ */
.wb-shell{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:24px;
  align-items:start;
  padding-bottom:96px;          /* 给固定对比抽屉留出空间，避免遮挡最后一行卡片 */
}

/* ============================ 2. 左栏分面筛选 ============================ */
.wb-rail{
  position:sticky; top:78px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  display:flex; flex-direction:column;
  max-height:calc(100vh - 100px);
}
.wb-rail-head{
  display:flex; align-items:center;
  padding:13px 14px; border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.wb-rail-head h3{margin:0;font-size:12.5px;font-weight:600;color:var(--ink)}
.wb-clear{
  margin-left:auto; background:none; border:0; padding:3px 7px; border-radius:6px;
  font:inherit; font-size:11px; color:var(--brand-ink); cursor:pointer;
  transition:background .15s ease;
}
.wb-clear:hover{background:var(--brand-soft)}
.wb-clear[disabled]{color:var(--muted);cursor:default;opacity:.55}
.wb-clear[disabled]:hover{background:none}

.wb-facets{overflow-y:auto; flex:1 1 auto; overscroll-behavior:contain}
.wb-facet{padding:12px 14px;border-bottom:1px solid var(--line)}
.wb-facet:last-child{border-bottom:0}
.wb-facet h4{
  margin:0 0 7px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; font-weight:600;
}
.wb-facet h4 .n{margin-left:auto;font-family:var(--mono);letter-spacing:0;font-weight:400}

/* 分面选项：button 而非 label，天然可键盘聚焦 */
.wb-opt{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:5px 0; background:none; border:0; text-align:left;
  font:inherit; font-size:12.5px; color:var(--ink-2); cursor:pointer;
  border-radius:6px; transition:color .13s ease;
}
.wb-opt:hover{color:var(--brand-ink)}
.wb-opt:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.wb-opt.on{color:var(--ink);font-weight:600}
.wb-cb{
  width:15px;height:15px;flex:0 0 auto;
  border:1.5px solid var(--line-strong);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  transition:background .13s ease,border-color .13s ease;
}
.wb-opt.on .wb-cb{background:var(--brand);border-color:var(--brand)}
.wb-opt-n{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
.wb-opt.on .wb-opt-n{color:var(--brand-ink)}
.wb-opt[hidden]{display:none}
.wb-more{
  margin-top:5px; background:none; border:0; padding:3px 0;
  font:inherit; font-size:11.5px; color:var(--brand-ink); cursor:pointer;
}
.wb-more:hover{text-decoration:underline}
.wb-noresult{padding:16px 14px;font-size:12px;color:var(--muted)}

/* ============================ 3. 命令栏（方向 A） ============================ */
.wb-cmd{margin:32px 0 24px}
.wb-cmd-eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-ink); font-weight:600; margin-bottom:8px;
}
.wb-cmd h1{
  font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.2;
  margin:0 0 16px; letter-spacing:-.01em; color:var(--ink);
}
.wb-cmd h1 em{
  font-style:normal;
  background:linear-gradient(110deg,var(--brand-ink),var(--brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wb-cmdbox{
  display:flex; align-items:center; gap:12px;
  height:62px; padding:0 18px;
  background:var(--surface);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);
  cursor:text;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.wb-cmdbox:hover,.wb-cmdbox:focus-within{
  border-color:var(--brand);
  box-shadow:0 12px 34px rgba(46,143,210,.16);
}
.wb-cmdbox input{
  flex:1; min-width:0; border:0; background:none; outline:0;
  font:inherit; font-size:15px; color:var(--ink);
}
.wb-cmdbox input::placeholder{color:var(--muted)}
.wb-kbd{
  font-family:var(--mono); font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:6px;
  padding:3px 7px; background:var(--surface-2); flex:0 0 auto;
}
.wb-cmdwrap{position:relative}
/* 搜索自动补全：分组给 产品 / 成分知识 / 功效 三类建议，键盘可上下选 */
.wb-ac{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:70;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
  padding:6px; display:none; max-height:420px; overflow-y:auto;
  overscroll-behavior:contain;
}
.wb-ac.on{display:block}
.wb-ac-grp{
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:8px 10px 4px;
}
.wb-ac-row{
  display:flex; align-items:center; gap:9px; width:100%; min-width:0;
  padding:8px 10px; border:0; background:none; border-radius:9px;
  text-align:left; font:inherit; cursor:pointer;
}
.wb-ac-row:hover,.wb-ac-row.hi{background:var(--brand-soft)}
.wb-ac-row .dot{width:18px;height:18px;border-radius:5px;flex:0 0 auto}
.wb-ac-row .dot.ico{
  background:var(--surface-2); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
}
.wb-ac-row .nm{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-ac-row .sub{margin-left:auto;font-size:10.5px;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
.wb-ac-empty{padding:14px;text-align:center;color:var(--muted);font-size:12px}

/* 增量渲染的尾部哨兵 */
.wb-sentinel{
  grid-column:1/-1; text-align:center; padding:22px 12px;
  font-size:12px; color:var(--muted);
}

.wb-hotrow{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.wb-hotrow .lb{font-size:12px;color:var(--muted)}

/* ============================ 4. Bento 入口（方向 A） ============================ */
.wb-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:40px}
.wb-tile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s ease;
}
.wb-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}
.wb-tile.span2{grid-column:span 2}
.wb-tile-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.wb-tile-ico{
  width:30px;height:30px;flex:0 0 auto;border-radius:9px;
  background:var(--brand-soft);color:var(--brand-ink);
  display:flex;align-items:center;justify-content:center;
}
.wb-tile-head h3{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.wb-tile-head .n{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono)}
.wb-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wb-brow{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  background:none;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;text-align:left;
  transition:border-color .15s ease,background .15s ease;
}
.wb-brow:hover{border-color:var(--brand-glow);background:var(--brand-soft)}
.wb-brow.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.wb-brow .c{margin-left:auto;font-size:11px;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
.wb-brow .bdot{
  width:22px;height:22px;flex:0 0 auto;border-radius:6px;
  color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.wb-brow-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-effs{display:flex;flex-direction:column;gap:9px}
.wb-eff{
  display:flex;align-items:center;gap:10px;background:none;border:0;
  padding:1px 0; font:inherit; font-size:12px; color:var(--ink-2); cursor:pointer;
}
.wb-eff:hover{color:var(--brand-ink)}
.wb-eff.on{color:var(--brand-ink);font-weight:600}
.wb-eff.on .bar i{background:linear-gradient(90deg,var(--brand),var(--brand-ink))}
.wb-eff .nm{width:44px;text-align:left;flex:0 0 auto}
.wb-eff .bar{flex:1;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.wb-eff .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--brand-glow),var(--brand))}
.wb-eff .c{width:36px;text-align:right;font-size:11px;color:var(--muted);font-family:var(--mono);flex:0 0 auto}
/* 小美卡：把 AI 提为一级入口。
   ⚠ 必须用主题令牌取色 —— 之前硬编码深海蓝渐变，导致切主题时这张卡不跟着变
     （abyss/sakura/cosmic 下尤其明显）。现在用 --brand-soft → --surface 的品牌色渐变，
     7 套主题各自动作，且文字用 --ink/--ink-2，对比度由主题自身保证。 */
.wb-tile.ai{
  background:linear-gradient(120deg,var(--brand-soft) 0%,var(--surface) 62%);
  border:1px solid var(--brand-glow);
  position:relative; overflow:hidden;
}
.wb-tile.ai::after{
  content:""; position:absolute; width:220px; height:220px; right:-60px; top:-70px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,var(--brand-glow),transparent 68%);
  opacity:.5; filter:blur(30px);
}
.wb-tile.ai .wb-tile-head h3{color:var(--ink)}
.wb-tile.ai .wb-tile-ico{background:var(--brand);color:#fff}
.wb-tile.ai .wb-tile-head .n{color:var(--muted)}
.wb-tile.ai p{margin:0 0 14px;font-size:12.5px;line-height:1.6;color:var(--ink-2);position:relative;max-width:60ch}
.wb-ask{
  display:flex;align-items:center;gap:10px;position:relative;
  height:44px;padding:0 8px 0 14px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-strong);
  cursor:text; transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out);
}
.wb-ask:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.wb-ask input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:12.5px;color:var(--ink)}
.wb-ask input::placeholder{color:var(--muted)}
.wb-ask .go{
  width:30px;height:30px;flex:0 0 auto;border:0;border-radius:9px;cursor:pointer;
  background:linear-gradient(135deg,#4FA8E0,var(--brand));color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.wb-ask .go:hover{filter:brightness(1.06)}

/* 小美卡底部的「提问对象」绑定条 —— 不绑定的话小美不知道你问的是哪个品 */
.wb-ask-ctx{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:11.5px;color:var(--muted);position:relative;min-width:0;
}
.wb-ask-ctx .lb{flex:0 0 auto}
.wb-ask-ctx b{
  color:var(--ink);font-weight:600;min-width:0;
  max-width:min(320px,40vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wb-ask-ctx .bind{
  margin-left:auto;flex:0 0 auto;cursor:pointer;font:inherit;font-size:11.5px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--brand-ink);
  border-radius:8px;padding:4px 10px;
  transition:border-color .15s ease,background .15s ease;
}
.wb-ask-ctx .bind:hover{border-color:var(--brand);background:var(--brand-soft)}
.wb-ask-ctx .unbind{
  flex:0 0 auto;border:0;background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:15px;line-height:1;padding:0 3px;
}
.wb-ask-ctx .unbind:hover{color:var(--accent)}

/* 小美弹窗头部的上下文块：点击即可绑定 / 更换 */
#assistCtx{cursor:pointer;border-radius:8px;padding:2px 6px;margin:-2px -6px;transition:background .15s ease}
#assistCtx:hover{background:var(--brand-soft)}

/* ============================ 11. 产品绑定选择器 ============================ */
.wb-picker{
  position:fixed;z-index:80;width:340px;max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-2);
  display:none;overflow:hidden;
}
.wb-picker.on{display:block}
.wb-picker-head{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line)}
.wb-picker-head input{
  flex:1;min-width:0;height:34px;padding:0 10px;outline:0;
  border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);font:inherit;font-size:12.5px;color:var(--ink);
}
.wb-picker-head input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface)}
.wb-picker-clear{
  flex:0 0 auto;cursor:pointer;font:inherit;font-size:11.5px;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:9px;padding:0 10px;
}
.wb-picker-clear:hover{border-color:var(--accent);color:var(--accent)}
.wb-picker-list{max-height:290px;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.wb-picker-row{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;border:0;background:none;border-radius:9px;
  text-align:left;font:inherit;cursor:pointer;min-width:0;
}
.wb-picker-row:hover,.wb-picker-row:focus-visible{background:var(--brand-soft)}
.wb-picker-row.cur{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-glow)}
.wb-picker-row .dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.wb-picker-row .nm{font-size:12.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-picker-row .sub{font-size:10.5px;color:var(--muted);font-family:var(--mono);flex:0 0 auto;margin-left:auto}
.wb-picker-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:12px}
.wb-picker-tip{
  padding:8px 12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted);background:var(--surface-2);line-height:1.5;
}

/* ============================ 5. 工具条 + 活跃条件 ============================ */
.wb-toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:22px; min-height:34px;
}
.wb-fchip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--brand-soft); border:1px solid var(--brand-glow);
  color:var(--brand-ink); border-radius:999px; padding:4px 10px;
  font:inherit; font-size:11.5px; cursor:pointer;
  transition:border-color .14s ease;
}
.wb-fchip:hover{border-color:var(--brand)}
.wb-fchip .x{opacity:.55;font-size:13px;line-height:1}
.wb-count{font-size:12px;color:var(--muted);margin-left:2px}
.wb-count b{color:var(--ink);font-weight:600;font-family:var(--mono)}
.wb-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.wb-seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.wb-seg button{
  border:0;background:transparent;font:inherit;font-size:11.5px;
  padding:6px 11px;color:var(--muted);cursor:pointer;
}
.wb-seg button.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}

/* ============================ 6. 网格 + 竖向卡片 ============================ */
.grid--wb{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid--wb.dense{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}

/* 竖向卡：只改排布，配色继续吃 7 套主题里的 .card-* 规则 */
.card--v{flex-direction:column;align-items:stretch;gap:0;padding:0}
/* ⚠ 原样式是 .card{overflow:visible !important}（为了悬停放大预览），
   所以这里必须同样 !important 才能覆盖；同时给图片自己加圆角来获得"卡片裁切"的观感 */
.card--v{overflow:hidden !important}
.card--v .card-edge{
  left:0;right:0;top:0;bottom:auto;width:auto;height:4px;
  border-radius:14px 14px 0 0;
}
/* 图位高度：原图**全部是 600×600 正方形**，而图位是 271×150 的横向框，
   object-fit:cover 会渲染成 271×271 再裁到 150 —— 等于**每张产品图有 45% 被切掉**。
   150 → 190px 后可见比例从 55% 提到 70%，卡片也不再显得扁。 */
.card--v .card-thumb{
  width:100%;min-width:0;height:190px;
  margin:0;border-radius:0;border:0;border-bottom:1px solid var(--line);
}
.card--v .card-main{padding:12px 13px 13px;gap:6px;min-height:122px}
.card--v .card-meta{flex-wrap:wrap;max-height:none;min-height:23px;margin-top:auto}
/* 悬停放大预览：缩略图现在在卡片顶部，浮层改为向下弹，避免盖住工具条 */
.card--v .card-zoom{bottom:auto;top:calc(100% + 10px);transform:translateX(-50%) translateY(-6px)}
.card--v .card-thumb:hover .card-zoom{transform:translateX(-50%) translateY(0)}
.card--v .card-zoom::after{
  top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:var(--surface);
}
.grid--wb.dense .card--v .card-thumb{height:130px}
.grid--wb.dense .card--v .card-main{min-height:100px;padding:10px 11px 11px}

/* ⚠ 卡片必须等高等宽：.card-meta 一旦允许换行，长功效文案（真实数据里有整段话的
   reg_effects）会把单张卡撑高、整行错位。恢复原版做法：固定单行 + 溢出裁切 + 省略号。 */
.grid--wb > .card--v{height:100%}
.card--v .card-meta{
  flex-wrap:nowrap; overflow:hidden;
  min-height:23px; max-height:23px;
  margin-top:auto;
}
.card--v .card-meta .tag{
  max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card--v .card-meta .hazard-badge{flex:0 0 auto}
.card--v .card-name{-webkit-line-clamp:2;min-height:2.7em;max-height:2.7em}
.card--v .card-code{min-height:1.4em;max-height:1.4em}

/* 类型徽章 */
.wb-badge{
  position:absolute;left:10px;top:10px;z-index:2;
  font-size:10.5px;padding:3px 8px;border-radius:6px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--brand-ink);font-weight:600;
  max-width:calc(100% - 56px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 对比选择器 */
.wb-pick{
  position:absolute;right:10px;top:10px;z-index:4;
  width:26px;height:26px;padding:0;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:13px;line-height:1;
  opacity:0;transition:opacity .18s var(--ease-out),background .15s ease,border-color .15s ease;
}
.card--v:hover .wb-pick,.card--v:focus-within .wb-pick{opacity:1}
.wb-pick:hover{border-color:var(--brand);color:var(--brand-ink)}
.card--v.wb-picked{border-color:var(--brand)}
.card--v.wb-picked .wb-pick{opacity:1;background:var(--brand);border-color:var(--brand);color:#fff}
/* hover 动作条 */
.wb-acts{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;gap:6px;justify-content:center;padding:10px 8px;
  background:linear-gradient(180deg,transparent,var(--surface) 62%);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);
}
.card--v:hover .wb-acts,.card--v:focus-within .wb-acts{opacity:1;transform:translateY(0);pointer-events:auto}
.wb-act{
  border:1px solid var(--line-strong);background:var(--surface);
  border-radius:8px;padding:5px 9px;
  font:inherit;font-size:11px;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  transition:border-color .14s ease,color .14s ease;
}
.wb-act:hover{border-color:var(--brand);color:var(--brand-ink)}
.wb-act.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.wb-act.pri:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff}

/* ============================ 7. 对比抽屉 ============================ */
.wb-cmp{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:65; display:none; align-items:center; gap:14px;
  padding:11px 14px; max-width:calc(100vw - 40px);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-2);
}
.wb-cmp.on{display:flex}
.wb-cmp-lb{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);flex:0 0 auto;
}
.wb-cmp-items{display:flex;gap:8px;flex:1;min-width:0}
.wb-slot{
  display:flex;align-items:center;gap:9px;min-width:0;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:11px;padding:7px 10px;
}
.wb-slot .t{font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.wb-slot .s{font-size:10px;color:var(--muted);font-family:var(--mono)}
.wb-slot .x{
  margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;
  color:var(--muted);font-size:14px;line-height:1;
}
.wb-slot .x:hover{color:var(--accent)}
.wb-hint{font-size:11px;color:var(--muted);max-width:150px;line-height:1.45;flex:0 0 auto}
.wb-btn{
  flex:0 0 auto;border:0;border-radius:11px;padding:10px 16px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#4FA8E0,var(--brand));
}
.wb-btn:hover{background:linear-gradient(135deg,#63B6E8,var(--brand-ink))}
.wb-btn[disabled]{opacity:.5;cursor:not-allowed;background:var(--line-strong);color:var(--muted)}

/* ============================ 8. 成分差异弹窗 ============================ */
.wb-diff{width:100%;border-collapse:collapse;font-size:12.5px}
.wb-diff th,.wb-diff td{
  border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;
}
.wb-diff thead th{
  background:var(--surface-2);font-size:11.5px;color:var(--ink-2);
  position:sticky;top:0;z-index:2;
}
.wb-diff tbody th{
  font-weight:500;color:var(--ink-2);background:var(--surface-2);
  max-width:240px;font-size:12px;
}
.wb-diff td{text-align:center;color:var(--muted);width:110px}
.wb-diff td.yes{color:var(--brand-ink);font-weight:700}
.wb-diff tr.diff th{color:var(--ink);font-weight:600}
.wb-diff tr.diff td.yes{background:var(--brand-soft)}
/* ⚠ .modal-body 是 2 列 grid（grid-template-columns:1fr 1fr），
   所以内容必须包在一个 .full 容器里，否则说明文字和表格会被排成左右两列 */
.wb-diff-wrap{display:flex;flex-direction:column;gap:12px;min-width:0}
.wb-diff-legend{font-size:11.5px;color:var(--muted);margin:0;line-height:1.75}
.wb-diff-legend b{color:var(--ink);font-weight:600}
.wb-scroll{max-height:58vh;overflow:auto;border:1px solid var(--line);border-radius:10px}

/* ============================ 9. 响应式 ============================ */
@media (max-width:1180px){
  .grid--wb{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--wb.dense{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:920px){
  .wb-shell{grid-template-columns:1fr}
  .wb-rail{position:static;max-height:none}
  .wb-facets{max-height:230px}
  .grid--wb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--wb.dense{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-bento{grid-template-columns:1fr}
  .wb-tile.span2{grid-column:span 1}
  .wb-brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-cmp{flex-wrap:wrap;gap:10px}
  .wb-hint{display:none}
  .wb-cmd h1{font-size:24px}
}
@media (max-width:560px){
  .grid--wb,.grid--wb.dense{grid-template-columns:1fr}
  .wb-cmdbox{height:54px;padding:0 14px}
}

/* ============================ 10. 无障碍 / 减弱动效 ============================ */
@media (prefers-reduced-motion:reduce){
  .wb-tile,.wb-acts,.wb-pick,.wb-cmdbox,.wb-clear{transition:none}
  .wb-tile:hover{transform:none}
  .card--v:hover{transform:none}
  .wb-acts{opacity:1;transform:none;pointer-events:auto}
  .wb-pick{opacity:1}
}


/* ═══════════════════════════════════════════════════════════════════════
   12. 登录门 v2「素白」
   ─────────────────────────────────────────────────────────────────────
   替换掉的东西（都是最贵的开销）：
     · .gate-aurora  3 个 blur(70px) 光球（最小 520px，还在动画）
     · .gate-leaves  8 个上升气泡
     · 玻璃卡的 backdrop-filter: blur(22px)
   换成：Canvas 光斑场（预渲染精灵 + drawImage，实测每帧 ~0.13ms/粒子量级）
   实测（软件渲染 1440×900，最坏情况）：登录门 20.9 fps → 75.2 fps，3.6×。

   设计要点（对齐参考图）：
     · 底色必须比光斑暗一档，白圆才有对比度 —— 纯白底 + 白圆 = 看不见
     · 完全不用卡片：内容是"坐在"背景上的，高级感正来自这一点
     · 近黑主按钮：强对比是这套视觉的核心
     · 中心区域椭圆衰减压低光斑，保证文字始终清晰
   ═══════════════════════════════════════════════════════════════════════ */

.site-gate{
  background:radial-gradient(130% 110% at 50% 44%, #FBFBFA 0%, #F3F2F0 30%, #E8E6E3 62%, #DBD9D5 100%)
             , linear-gradient(158deg,#E9F3FC,#F7FBFF) !important;
  background-blend-mode:normal;
  overflow:hidden;
}
.gate-bokeh{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.gate-halo{
  position:absolute;width:520px;height:520px;left:0;top:0;pointer-events:none;z-index:1;
  border-radius:50%;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,255,255,.72) 0%,rgba(255,255,255,.28) 42%,rgba(255,255,255,0) 70%);
  will-change:transform;
}
.site-gate.has-pointer .gate-halo{opacity:1}

/* 卡片退场：不做玻璃、不做边框、不做阴影 */
.site-gate .site-gate-card{
  width:100%;max-width:352px;
  background:transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:0 !important;box-shadow:none !important;border-radius:0;
  padding:0;
}
.site-gate.on .site-gate-card{animation:none}

/* —— 品牌区 —— */
.gate-brand{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.gate-seed{
  position:absolute;top:46px;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:#171717;animation:gateSeed .62s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes gateSeed{
  0%{transform:scale(0);opacity:0}
  30%{transform:scale(1);opacity:1}
  55%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(23,23,23,.22)}
  78%{transform:scale(1);opacity:1;box-shadow:0 0 0 22px rgba(23,23,23,0)}
  100%{transform:scale(.2);opacity:0;box-shadow:0 0 0 34px rgba(23,23,23,0)}
}
.gate-logo{
  width:172px;height:auto;display:block;color:#171717;
  clip-path:inset(0 50% 0 50%);
  animation:gateWipe .46s cubic-bezier(.2,.8,.2,1) .85s both,
            gateFloat 9s ease-in-out 1.7s infinite;
  will-change:transform;
}
.gate-logo text{fill:currentColor}
@keyframes gateWipe{from{clip-path:inset(0 50% 0 50%);opacity:.35}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes gateFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2.5px) scale(1.006)}}
.gate-logo-shine{animation:gateShine 7s cubic-bezier(.45,0,.55,1) 2.4s infinite}
@keyframes gateShine{0%,62%{transform:translateX(-170px)}82%,100%{transform:translateX(560px)}}
.gate-brand-name{
  margin-top:20px;font-size:19px;font-weight:600;letter-spacing:.01em;line-height:1.35;color:#171717;
  animation:gateRise .6s cubic-bezier(.2,.8,.2,1) .98s both;
}
.gate-brand-desc{margin-top:6px;font-size:12px;color:#9A9A9A;letter-spacing:.05em;
  animation:gateRise .6s cubic-bezier(.2,.8,.2,1) 1.05s both}
.gate-rule{width:38px;height:1px;background:rgba(23,23,23,.15);margin:20px auto 18px;transform-origin:center;
  animation:gateGrow .5s cubic-bezier(.2,.8,.2,1) 1.12s both}
@keyframes gateGrow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.gate-welcome{font-size:15px;font-weight:500;letter-spacing:.01em;line-height:1.4;text-align:center;color:#171717;
  animation:gateRise .6s cubic-bezier(.2,.8,.2,1) 1.18s both}
.gate-welcome-sub{margin-top:6px;font-size:12px;color:#9A9A9A;letter-spacing:.02em;text-align:center;
  animation:gateRise .6s cubic-bezier(.2,.8,.2,1) 1.24s both}
@keyframes gateRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}

/* —— 标签页：胶囊 → 参考图的极简分段 ── */
.site-gate .gate-tabs{
  display:flex;gap:4px;padding:4px;border-radius:12px;margin:26px 0 20px;
  background:rgba(23,23,23,.05);animation:gateRise .62s cubic-bezier(.2,.8,.2,1) 1.32s both;
}
.site-gate .gate-tab{
  flex:1;height:36px;border:0;border-radius:9px;font:inherit;font-size:13.5px;
  background:transparent;color:#9A9A9A;cursor:pointer;transition:background .2s,color .2s;
}
.site-gate .gate-tab.active{background:#fff;color:#171717;font-weight:600;box-shadow:0 1px 3px rgba(23,23,23,.10)}

/* —— 输入：浅填充、几乎无边框，融进背景 —— */
.site-gate .site-gate-input{
  width:100%;height:47px;padding:0 42px 0 15px;font-size:14px;color:#171717;
  background:rgba(255,255,255,.80) !important;
  border:1px solid rgba(23,23,23,.07) !important;border-radius:10px;
  box-shadow:0 1px 2px rgba(23,23,23,.03);
  transition:border-color .22s,box-shadow .22s,background .22s,transform .22s;
}
.site-gate .site-gate-input::placeholder{color:#B4B4B4}
.site-gate .site-gate-input:focus{
  background:#fff !important;border-color:rgba(23,23,23,.34) !important;
  box-shadow:0 0 0 4px rgba(23,23,23,.06),0 4px 14px rgba(23,23,23,.07);transform:translateY(-1px);
}
.site-gate .site-gate-input.filled{background:#fff !important;border-color:rgba(23,23,23,.16) !important}

/* —— 主按钮：近黑（参考图的核心元素）—— */
.site-gate .site-gate-actions{margin-top:14px;animation:gateRise .5s cubic-bezier(.2,.8,.2,1) 1.44s both}
.site-gate .site-gate-actions .btn-primary{
  position:relative;overflow:hidden;
  width:100%;height:47px;padding:0;border:0;border-radius:10px;
  font-size:14px;font-weight:500;letter-spacing:.02em;color:#fff;
  background:#171717 !important;
  box-shadow:0 6px 18px rgba(23,23,23,.20);
  /* ⚠ 原 .btn-primary 是 display:inline-flex 但没有 justify-content，
     默认 flex-start —— 按钮拉满宽后文字会跑到左边，必须显式居中 */
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.site-gate .site-gate-actions .btn-primary:hover{background:#000 !important;box-shadow:0 8px 24px rgba(23,23,23,.26)}
.site-gate .site-gate-actions .btn-primary:active{transform:translateY(1px)}
.site-gate .site-gate-actions .btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;width:44%;
  /* ⚠ 原规则是 left:-80% + transform:skewX(-18deg)，靠 :hover 改 left 来扫。
     我只用 transform 做流光，所以必须把 left 归零 —— 否则两者叠加，
     流光会停在按钮中段，变成一道多余的亮带。 */
  left:0 !important;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);
  transform:translateX(-160%);animation:gateSweep 1.05s cubic-bezier(.2,.8,.2,1) 1.75s 1 both;
}
@keyframes gateSweep{to{transform:translateX(320%)}}
.site-gate .site-gate-actions .btn-primary.ready{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(23,23,23,.30),0 0 0 3px rgba(23,23,23,.07);
}
/* 注册页的验证码行 + 次级按钮 */
.site-gate .btn-secondary{
  background:rgba(255,255,255,.92) !important;color:#3D3D3D !important;
  border:0 !important;border-radius:10px;
  box-shadow:0 1px 2px rgba(23,23,23,.05),0 0 0 1px rgba(23,23,23,.05);
}
.site-gate .btn-secondary:hover{background:#fff !important}

.site-gate .site-gate-msg{text-align:center}
.site-gate .site-gate-tip{
  margin-top:20px;text-align:center;color:#B4B4B4;
  animation:gateRise .6s cubic-bezier(.2,.8,.2,1) 1.56s both;
}

@media (max-width:480px){
  .site-gate .site-gate-card{max-width:100%}
  .gate-logo{width:150px}
  .gate-brand-name{font-size:17px;margin-top:17px}
  .gate-brand-desc{font-size:11.5px}
  .gate-rule{margin:16px auto 15px}
  .site-gate .gate-tabs{margin:22px 0 18px}
  .gate-halo{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gate-seed{display:none}
  .gate-logo{clip-path:none !important;opacity:1 !important;animation:none !important}
  .gate-logo-shine{display:none}
  .gate-brand-name,.gate-brand-desc,.gate-rule,.gate-welcome,.gate-welcome-sub,
  .site-gate .gate-tabs,.site-gate .site-gate-actions,.site-gate .site-gate-tip{animation:none !important;opacity:1 !important}
  .site-gate .site-gate-actions .btn-primary::after{display:none}
  .gate-halo{display:none}
}

/* —— 输入框包装 + 校验标记（由 JS 注入，不改动原有 DOM 结构）—— */
.site-gate .gate-fw{position:relative}
.site-gate .gate-mark{
  position:absolute;right:13px;top:50%;width:17px;height:17px;
  transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .25s;
}
.site-gate .gate-mark.ok{color:#1F9D55}
.site-gate .gate-mark.warn{color:#C2410C}
.site-gate .gate-fw.ok .gate-mark.ok,
.site-gate .gate-fw.warn .gate-mark.warn{opacity:1;animation:gateMarkIn .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes gateMarkIn{from{opacity:0;transform:translateY(-50%) scale(.6)}to{opacity:1;transform:translateY(-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .site-gate .gate-fw.ok .gate-mark.ok,
  .site-gate .gate-fw.warn .gate-mark.warn{animation:none !important;opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   13. 登录门显示期间隐藏门后的 App
   ─────────────────────────────────────────────────────────────────────
   实测发现：登录门是 position:fixed + z-index:9999 全屏覆盖，
   而它后面的整个 App —— 顶栏(40) / #page / FAB(60) / 主题特效层(9989-9990)
   —— 全都不可见，却仍在被绘制：1955 个元素、DOM 高 4309px，实测占 12.5 fps。

   用相邻兄弟选择器实现（门在 DOM 里排在 App 之前），好处是：
     · 纯 CSS，没有 JS 时序问题
     · 不会出现"先闪一下 App 再被藏起来"的跳变
     · 门一关（移除 .on），App 立刻恢复，无需额外代码
   被藏的这些层 z-index 全部低于门，所以视觉上没有任何变化。
   ═══════════════════════════════════════════════════════════════════════ */
/* ⚠ 必须用 visibility:hidden 而不是 display:none。
   display:none 会让 #page 失去布局盒子，IntersectionObserver 就再也判定
   不到卡片"进入视口"，.reveal 的进场动画不触发 —— 实测登录后 36 张卡片
   全部卡在 opacity:0（页面一片空白）。visibility:hidden 保留布局盒子，
   观察器照常工作，同时跳过整棵子树的绘制，性能收益基本一致。 */
.site-gate.on ~ .topbar,
.site-gate.on ~ #page,
.site-gate.on ~ .assistant-fab,
.site-gate.on ~ #snowLayer,
.site-gate.on ~ #petalsLayer,
.site-gate.on ~ #mistLayer,
.site-gate.on ~ #starsLayer{ visibility:hidden !important; }

/* ── 修 ①：覆盖浏览器自动填充的蓝色高亮 ──
   Chrome 给自动填充过的输入框强制加 #E8F0FE 背景，其优先级高于普通 CSS，
   且 background 属性对它无效 —— 只能用超大 inset box-shadow 盖住。
   （用户截图里那两个"蓝色的框"就是这个，不是我们把颜色配错了。） */
.site-gate .site-gate-input:-webkit-autofill,
.site-gate .site-gate-input:-webkit-autofill:hover,
.site-gate .site-gate-input:-webkit-autofill:focus,
.site-gate .site-gate-input:-webkit-autofill:active{
  -webkit-text-fill-color:#171717 !important;
  caret-color:#171717;
  transition:background-color 999999s ease-out 0s;   /* 让 autofill 背景"永不生效" */
  box-shadow:inset 0 0 0 1000px rgba(255,255,255,.92), 0 1px 2px rgba(23,23,23,.03) !important;
}
.site-gate .site-gate-input:-webkit-autofill:focus{
  box-shadow:inset 0 0 0 1000px #fff, 0 0 0 4px rgba(23,23,23,.06), 0 4px 14px rgba(23,23,23,.07) !important;
}
/* Firefox 的等价写法 */
.site-gate .site-gate-input:autofill{
  filter:none;
  box-shadow:inset 0 0 0 1000px rgba(255,255,255,.92) !important;
}

/* ── 修 ②：补上输入框的进场动画 ──
   原来只给 .gate-tabs(1.32s) 和 .site-gate-actions(1.44s) 加了进场，
   漏了输入框本身 —— 于是它立刻以终态显示，用户会先看到两个孤零零的输入框，
   一秒多之后其它元素才浮现。
   延迟加在 html.gate-intro 上而不是无条件生效：进场只播一次，
   之后切换"登录/注册"标签页时不会又白等 1.3 秒。 */
html.gate-intro .site-gate .site-gate-input{
  animation:gateRise .62s cubic-bezier(.2,.8,.2,1) 1.32s both;
}

/* ══════════════════════════════════════════════════════════════════════════════
   第 14 节 · 登录门顶栏（ThreeUI Community · MIT · https://github.com/MengTo/threeui）
   组件：css/animated-top-dock/modern
   下面这段是上游 CSS 原样引入，紧随其后才是我们的覆盖 —— 顺序不能颠倒：
   上游对 .animated-top-dock-component.atd-modern 也用单类选择器设了 --atd-bar-height，
   同优先级下后出现的胜出，覆盖写在前面会被静默吃掉（实测顶栏停在 49px）。
   ══════════════════════════════════════════════════════════════════════════════ */

.threeui-mount, .terrain-plume-component, .text-path-study, .article-headings-component, .animated-top-dock-component, .typography-vortex-component, .mechanical-keyboard, .retro-metallic, .landscape-scene, .japanese-tower-landscape, .sakura-branch-scene, .isometric-motion-grid, .isometric-illustration, .tetrahedron-365, .liquid-metal-button, .iso-mail-lightshafts, .spark-badge, .hypnotic-loops, .at-the-horizon, .scalability-bricks, .threeui-background { position: relative; width: 100%; height: 100%; min-width: 0px; min-height: 0px; overflow: hidden; }

.article-headings-component, .animated-top-dock-component, .typography-vortex-component { container-type: inline-size; color: rgb(236, 236, 232); background: rgb(11, 11, 11); font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif; }

.article-headings-component::after, .animated-top-dock-component::after, .typography-vortex-component::after { position: absolute; inset: 0px; z-index: 5; pointer-events: none; content: ""; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.typography-vortex-component__hint, .animated-top-dock-component__caption { position: absolute; z-index: 6; color: rgb(98, 98, 94); font: 400 9px / 1 "ThreeUI Fragment Mono", ui-monospace, monospace; letter-spacing: 0.1em; }

.animated-top-dock-component { position: relative; display: grid; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.035), transparent 34%), rgb(8, 8, 8); }

.animated-top-dock__nav { position: absolute; top: clamp(24px, 5cqw, 46px); left: 50%; z-index: 10; display: flex; align-items: flex-start; gap: 3px; height: 38px; padding: 4px; overflow: visible; border: 1px solid rgb(41, 41, 41); border-radius: 11px; background: rgba(14, 14, 14, 0.86); box-shadow: rgba(0, 0, 0, 0.48) 0px 12px 34px, rgba(255, 255, 255, 0.035) 0px 1px inset; backdrop-filter: blur(18px) saturate(75%); transform: translate(-50%); isolation: isolate; }

.animated-top-dock__item { position: relative; z-index: 6; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 28px; min-width: 0px; padding: 0px; border: 1px solid transparent; border-radius: 7px; outline: none; color: rgb(133, 133, 128); background: rgba(21, 21, 20, 0.9); font: 400 10px / 1 "ThreeUI Fragment Mono", ui-monospace, monospace; letter-spacing: 0.1em; white-space: nowrap; backdrop-filter: blur(14px) saturate(70%); transform-origin: 50% 0px; transition: color 0.15s, border-color 0.18s, background 0.18s, box-shadow 0.18s; will-change: width, height, transform; cursor: pointer; }

.animated-top-dock__item[data-dock-near="true"], .animated-top-dock__item:focus-visible { z-index: 7; color: rgb(236, 236, 232); border-color: rgb(65, 65, 62); background: rgba(27, 27, 26, 0.94); box-shadow: rgba(0, 0, 0, 0.26) 0px 7px 16px; }

.animated-top-dock__logo { width: 28px; height: 28px; overflow: hidden; background: rgb(232, 232, 227); }

.animated-top-dock__logo svg { display: block; width: 100%; height: 100%; }

.animated-top-dock__link { gap: 6px; width: 94px; padding: 0px 9px; }

.animated-top-dock__link[aria-pressed="true"] { color: rgb(17, 17, 17); border-color: rgb(232, 232, 227); background: rgb(232, 232, 227); box-shadow: rgba(0, 0, 0, 0.28) 0px 7px 18px; }

.animated-top-dock__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 13px; height: 13px; opacity: 0.62; transition: opacity 0.16s; }

.animated-top-dock__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentcolor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }

.animated-top-dock__item[data-dock-near="true"] .animated-top-dock__icon, .animated-top-dock__item:focus-visible .animated-top-dock__icon { opacity: 1; }

.animated-top-dock-component__caption { right: 18px; bottom: 16px; }

@media (max-width: 600px) {
  .animated-top-dock__nav { top: 24px; gap: 2px; height: 36px; }
  .animated-top-dock__item { height: 26px !important; transform: none !important; }
  .animated-top-dock__logo { width: 26px !important; height: 26px !important; }
  .animated-top-dock__link { padding: 0px 7px; font-size: 8px; letter-spacing: 0.07em; width: auto !important; }
  .animated-top-dock__icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-top-dock__item { transform: none !important; }
}

.animated-top-dock-component.atd-modern, .animated-top-dock-component.atd-retro, .animated-top-dock-component.atd-glass { --atd-top: clamp(16px, 2.6cqw, 46px); --atd-bar-width: min(1460px, calc(100% - clamp(24px, 4.2cqw, 96px)) ); --atd-bar-height: clamp(48px, 3.4cqw, 68px); --atd-bar-pad: clamp(5px, .42cqw, 9px); --atd-bar-lead: clamp(14px, 1.15cqw, 25px); --atd-item-height: clamp(30px, 2.2cqw, 44px); --atd-item-pad: clamp(10px, .86cqw, 18px); --atd-label: clamp(12px, .78cqw, 17px); --atd-icon: clamp(13px, .92cqw, 19px); --atd-gap: clamp(5px, .44cqw, 9px); --atd-brand: clamp(13px, .94cqw, 20px); --atd-mark: clamp(22px, 1.55cqw, 33px); --atd-action-height: clamp(34px, 2.5cqw, 50px); display: block; overflow: hidden; }

.atd-modern__bar, .atd-retro__bar { position: absolute; top: var(--atd-top); left: 50%; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: var(--atd-bar-width); height: var(--atd-bar-height); transform: translate(-50%); }

.atd-modern__bar { width: max-content; max-width: var(--atd-bar-width); padding: var(--atd-bar-pad) var(--atd-bar-pad) var(--atd-bar-pad) var(--atd-bar-lead); }

.atd-modern__dock { display: flex; flex: 0 0 auto; gap: clamp(2px, 0.2cqw, 5px); align-items: flex-start; justify-content: center; height: var(--atd-item-height); }

.atd-modern__item, .atd-retro__item, .atd-glass__item { display: inline-flex; flex: 0 0 auto; gap: var(--atd-gap); align-items: center; justify-content: center; height: var(--atd-item-height); padding: 0 var(--atd-item-pad); outline: none; white-space: nowrap; transform-origin: 50% 0px; will-change: width, height, transform; cursor: pointer; }

.atd-modern__brand, .atd-glass__brand, .atd-retro__brand { display: inline-flex; flex: 0 0 auto; gap: clamp(7px, 0.6cqw, 13px); align-items: center; text-decoration: none; }

.atd-modern__mark, .atd-glass__mark { display: block; width: var(--atd-mark); height: var(--atd-mark); overflow: hidden; }

.atd-modern__mark svg, .atd-glass__mark svg { display: block; width: 100%; height: 100%; }

.atd-modern__word, .atd-glass__word { font-size: var(--atd-brand); font-weight: 600; letter-spacing: -0.018em; }

.atd-modern__actions { display: inline-flex; flex: 0 0 auto; gap: clamp(4px, 0.34cqw, 8px); align-items: center; }

.atd-modern__ghost { height: var(--atd-action-height); padding: 0px clamp(12px, 0.95cqw, 20px); border: 0px; border-radius: 999px; background: transparent; font: 500 var(--atd-label) / 1 inherit; transition: color 0.16s, background 0.16s; cursor: pointer; }

.atd-modern__cta, .atd-glass__cta { height: var(--atd-action-height); border-radius: 999px; font: 600 var(--atd-label) / 1 inherit; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s; cursor: pointer; }

.animated-top-dock-component.atd-modern { --atd-bar-width: min(1240px, calc(100% - clamp(24px, 5cqw, 120px)) ); background: rgb(7, 8, 12); }

.atd-modern__aurora { position: absolute; inset: -24% -12% auto; z-index: 1; height: 82%; pointer-events: none; background: radial-gradient(58% 62% at 22% 36%, rgba(78, 116, 255, 0.4), transparent 68%), radial-gradient(46% 56% at 78% 20%, rgba(186, 96, 255, 0.3), transparent 70%), radial-gradient(40% 48% at 52% 6%, rgba(56, 220, 214, 0.2), transparent 72%), radial-gradient(34% 40% at 50% 14%, rgba(255, 255, 255, 0.07), transparent 76%); filter: blur(8px); }

.atd-modern__bar { gap: clamp(14px, 2.4cqw, 40px); border: 1px solid rgba(255, 255, 255, 0.043); border-radius: 999px; background: linear-gradient(rgba(25, 27, 36, 0.86), rgba(12, 13, 18, 0.82)); box-shadow: rgba(0, 0, 0, 0.92) 0px 22px 52px -24px, rgba(255, 255, 255, 0.043) 0px 1px inset; backdrop-filter: blur(22px) saturate(150%); }

.atd-modern__brand { color: rgb(242, 243, 247); }

.atd-modern__mark { border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 8px; }

.atd-modern__item { border: 1px solid transparent; border-radius: 999px; color: rgb(155, 159, 174); background: transparent; font: 500 var(--atd-label) / 1 inherit; letter-spacing: -0.005em; transition: color 0.16s, border-color 0.18s, background 0.18s, box-shadow 0.18s, backdrop-filter 0.18s; }

.atd-modern__item[data-dock-near="true"], .atd-modern__item:hover, .atd-modern__item:focus-visible { color: rgb(244, 245, 249); border-color: rgba(255, 255, 255, 0.055); background: rgba(255, 255, 255, 0.055); box-shadow: rgba(0, 0, 0, 0.9) 0px 8px 20px -14px, rgba(255, 255, 255, 0.05) 0px 1px inset; backdrop-filter: blur(18px) saturate(170%); }

.atd-modern__item[aria-pressed="true"] { color: rgb(10, 11, 16); border-color: transparent; background: linear-gradient(rgb(255, 255, 255), rgb(223, 227, 239)); box-shadow: rgba(120, 150, 255, 0.75) 0px 10px 24px -12px, rgba(0, 0, 0, 0.14) 0px -1px inset; }

.atd-modern__icon, .atd-glass__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: var(--atd-icon); height: var(--atd-icon); opacity: 0.72; transition: opacity 0.16s; }

.atd-modern__icon svg, .atd-glass__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentcolor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.atd-modern__item[data-dock-near="true"] .atd-modern__icon, .atd-modern__item[aria-pressed="true"] .atd-modern__icon, .atd-glass__item[data-dock-near="true"] .atd-glass__icon, .atd-glass__item[aria-pressed="true"] .atd-glass__icon { opacity: 1; }

.atd-modern__ghost { color: rgb(167, 171, 186); }

.atd-modern__ghost:hover { color: rgb(240, 241, 246); background: rgba(255, 255, 255, 0.06); }

.atd-modern__cta { display: inline-flex; gap: var(--atd-gap); align-items: center; padding: 0 var(--atd-bar-pad) 0 clamp(14px,1.1cqw,24px); border: 0px; color: rgb(10, 11, 16); background: linear-gradient(rgb(255, 255, 255), rgb(216, 221, 236)); box-shadow: rgba(150, 175, 255, 0.95) 0px 10px 26px -14px, rgba(0, 0, 0, 0.16) 0px -1px inset; }

.atd-modern__cta svg { box-sizing: border-box; width: calc(var(--atd-action-height) - clamp(12px,.9cqw,20px)); height: calc(var(--atd-action-height) - clamp(12px,.9cqw,20px)); padding: clamp(4px, 0.3cqw, 7px); border-radius: 999px; background: rgba(10, 11, 16, 0.1); fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.atd-modern__cta:hover { box-shadow: rgb(150, 175, 255) 0px 16px 32px -14px, rgba(0, 0, 0, 0.16) 0px -1px inset; transform: translateY(-1px); }

.atd-modern__stage { position: absolute; top: 58%; left: 50%; z-index: 4; width: min(88cqw, 1120px); text-align: center; pointer-events: none; transform: translate(-50%, -50%); }

.atd-modern__eyebrow { margin: 0px 0px clamp(8px, 0.9cqw, 18px); color: rgb(125, 132, 160); font: 400 clamp(8px, 0.62cqw, 13px) / 1 "ThreeUI Fragment Mono", ui-monospace, monospace; letter-spacing: 0.22em; text-transform: uppercase; }

.atd-modern__headline { margin: 0px; padding: 0.08em 0px 0.14em; color: transparent; background: linear-gradient(rgb(255, 255, 255) 16%, rgba(255, 255, 255, 0.3)) text; font-size: clamp(30px, 7.6cqw, 150px); font-weight: 400; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }

.animated-top-dock-component.atd-retro { --atd-label: clamp(9px, .68cqw, 15px); --atd-icon: clamp(10px, .78cqw, 17px); --atd-brand: clamp(11px, .8cqw, 18px); background: rgb(11, 8, 25); }

.atd-retro__dock { display: flex; flex: 1 1 0px; gap: 0px; align-items: stretch; min-width: 0px; height: 100%; }

.animated-top-dock-component.atd-glass { --atd-rail-width: clamp(158px, 12.5cqw, 250px); background: rgb(8, 9, 13); }

.atd-glass__dock { position: relative; display: flex; flex-direction: column; gap: clamp(2px, 0.2cqw, 5px); align-items: stretch; }

.atd-modern .animated-top-dock-component__caption, .atd-glass .animated-top-dock-component__caption { color: rgba(255, 255, 255, 0.34); }

.atd-retro .animated-top-dock-component__caption { z-index: 12; color: rgb(123, 106, 176); }

@media (max-width: 600px) {
  .atd-modern__word { display: none; }
  .atd-modern__item { height: 28px !important; transform: none !important; }
  .atd-modern__stage { top: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .atd-modern__item, .atd-retro__item, .atd-glass__item { transform: none !important; }
}

/* ──────────────────────── 以下是我们的覆盖 ──────────────────────── */

/* 门改成纵向布局：横带在上、面板区在下。原来是 flex 居中，会把两者并排。 */
.site-gate{flex-direction:column;padding:0}

/* 深色横带 */
.gate-band{
  position:relative;z-index:6;flex:0 0 auto;
  width:100%;height:132px;
  background:
    radial-gradient(60% 150% at 22% -40%, rgba(122,92,214,.28), transparent 62%),
    radial-gradient(50% 130% at 78% -30%, rgba(56,120,220,.20), transparent 62%),
    linear-gradient(180deg,#0C0E14,#08090D);
  box-shadow:0 18px 44px -22px rgba(8,9,13,.55);
  animation:gateBandDrop .66s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes gateBandDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.animated-top-dock-component{height:132px !important;background:transparent !important}
.animated-top-dock-component.atd-modern{--atd-bar-height:76px;--atd-top:28px}
.atd-modern__aurora,.atd-modern__stage,.animated-top-dock-component__caption{display:none}

/* 面板区 */
.site-gate-body{
  position:relative;z-index:2;flex:1 1 auto;width:100%;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow-y:auto;
}

/* 粒子汇聚的采样目标：不可见，只提供字形点与位置（居中于面板区） */
.site-gate-body .gate-logo{
  position:absolute;left:50%;top:50%;width:172px;height:auto;margin:0;
  transform:translate(-50%,-50%);
  opacity:0 !important;clip-path:none !important;animation:none !important;
  pointer-events:none;
}
.site-gate-body .gate-logo text{fill:#171717}

/* 品牌感应按钮 */
.ib-wrap{display:inline-flex;align-items:center;flex:0 0 auto}
.ib{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:168px;height:58px;background:transparent;border:0;padding:0;cursor:pointer;
  border-radius:16px;transition:transform .22s cubic-bezier(.34,1.4,.5,1);
}
.ib:hover{transform:translateY(-2px)}
.ib:active{transform:translateY(1px) scale(.99)}
.ib-gl{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit}
.ib-tx{
  position:relative;z-index:2;pointer-events:none;
  font-weight:600;font-size:15px;letter-spacing:.3em;text-indent:.3em;
  color:#e0f7f8;white-space:nowrap;
  text-shadow:0 0 12px rgba(0,210,255,.6),0 1px 4px rgba(0,0,0,.8);
}
.brand-latin{
  display:flex;flex-direction:column;justify-content:center;gap:1px;margin-left:9px;
  font-size:9px;font-weight:500;line-height:1.15;letter-spacing:.26em;
  color:rgba(224,247,248,.62);text-transform:uppercase;
}
.brand-latin i{font-style:normal}

/* 面板内的排版 */
.gate-panel-head{text-align:center;margin-bottom:22px}
.gate-panel-wide{width:100%;max-width:640px}
.gate-stats{
  display:flex;justify-content:center;gap:32px;margin:0 0 18px;padding:16px 0;
  border-top:1px solid rgba(23,23,23,.09);border-bottom:1px solid rgba(23,23,23,.09);
}
.gate-stats b{display:block;font-size:25px;font-weight:600;line-height:1}
.gate-stats b i{font-style:normal;font-size:12px;color:#9A9A9A;margin-left:2px;font-weight:400}
.gate-stats span{display:block;margin-top:5px;font-size:11.5px;color:#9A9A9A}
.gate-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.gate-card{
  background:rgba(255,255,255,.72);border:1px solid rgba(23,23,23,.07);border-radius:14px;
  padding:15px;box-shadow:0 2px 10px rgba(23,23,23,.04);
  transition:transform .18s,box-shadow .18s;
}
.gate-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(23,23,23,.08)}
.gate-card h3{font-size:13.5px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.gate-card h3 i{
  width:22px;height:22px;border-radius:7px;background:rgba(103,180,236,.16);color:#2E7FB8;
  display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;
}
.gate-card p{font-size:12px;line-height:1.7;color:#6B7C8C;margin:0}
.gate-steps{display:flex;flex-direction:column;gap:10px;text-align:left}
.gate-step{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.68);border:1px solid rgba(23,23,23,.07);
  border-radius:13px;padding:13px 15px;
}
.gate-step>b{
  flex:0 0 auto;width:23px;height:23px;border-radius:8px;background:#171717;color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;
}
.gate-step h4{font-size:13px;font-weight:600;margin:0 0 3px}
.gate-step p{font-size:12px;line-height:1.65;color:#6B7C8C;margin:0}
.gate-step kbd{
  font:inherit;font-size:11px;padding:1px 5px;border-radius:4px;
  background:rgba(23,23,23,.07);color:#3D3D3D;
}

/* 窄屏：390px 放不下「品牌 + 4 项 + 2 操作」（实测溢出 325px，操作区被裁到视口外），
   改为图标模式：隐藏文字标签与「忘记密码」，品牌按钮缩小。 */
@media (max-width:760px){
  .gate-band{height:104px}
  .animated-top-dock-component{height:104px !important}
  .animated-top-dock-component.atd-modern{
    --atd-bar-height:60px;--atd-top:16px;
    --atd-item-pad:8px;--atd-gap:3px;--atd-bar-lead:10px;
  }
  .atd-modern__bar{gap:8px !important}
  .atd-modern__item>span:last-child{display:none}
  .atd-modern__ghost{display:none}
  .brand-latin{display:none}
  .ib{width:96px;height:40px;border-radius:13px}
  .ib-tx{font-size:12px;letter-spacing:.22em;text-indent:.22em}
  .gate-cards{grid-template-columns:1fr}
  .gate-stats{gap:20px}
  .site-gate-body{padding:18px}
  .site-gate-body .gate-logo{width:132px}
}
@media (prefers-reduced-motion:reduce){
  .gate-band{animation:none}
  .ib,.ib:hover,.ib:active{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════════
   第 14 节补充 · 顶栏改为浅色玻璃
   atd-modern 上游是按深色底设计的（item 文字 rgb(155,159,174)、当前项是白色胶囊、
   操作区白底黑字）。横带与页面统一成素白之后，这些颜色在浅底上要么看不清、
   要么对比错位，所以逐项覆写成深色文字 + 深色胶囊。
   注意：覆盖必须写在上面那段上游 CSS 之后。
   ══════════════════════════════════════════════════════════════════════════════ */

/* 横带不再是深色块：底色交给页面本身，去掉底部投影（那是深浅分界线的来源） */
.gate-band{
  background:transparent;
  box-shadow:none;
}

/* 顶栏：浅色玻璃胶囊 */
.gate-band .atd-modern__bar{
  background:linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.74)) !important;
  border-color:rgba(23,23,23,.07) !important;
  box-shadow:0 18px 44px -24px rgba(23,23,23,.28), 0 1px 0 rgba(255,255,255,.9) inset !important;
  backdrop-filter:blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(140%) !important;
}

/* 导航项：深色文字 */
.gate-band .atd-modern__item{color:#70706E !important}
.gate-band .atd-modern__item[data-dock-near="true"],
.gate-band .atd-modern__item:hover,
.gate-band .atd-modern__item:focus-visible{
  color:#171717 !important;
  background:rgba(23,23,23,.055) !important;
  border-color:rgba(23,23,23,.06) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* 当前项：深色胶囊（原来是白胶囊 + 蓝光晕，浅底上会糊掉） */
.gate-band .atd-modern__item[aria-pressed="true"]{
  color:#fff !important;
  background:#171717 !important;
  border-color:#171717 !important;
  box-shadow:0 8px 20px -10px rgba(23,23,23,.55) !important;
}
.gate-band .atd-modern__item[aria-pressed="true"] .atd-modern__icon{opacity:1}

/* 右侧操作 */
.gate-band .atd-modern__ghost{color:#6B6B6B !important}
.gate-band .atd-modern__ghost:hover{color:#171717 !important;background:rgba(23,23,23,.06) !important}
.gate-band .atd-modern__cta{
  color:#fff !important;background:#171717 !important;border-color:#171717 !important;
}
.gate-band .atd-modern__cta:hover{
  box-shadow:0 16px 32px -16px rgba(23,23,23,.6), 0 0 0 0 transparent !important;
}
.gate-band .atd-modern__cta svg{background:rgba(255,255,255,.14) !important}
.gate-band .brand-latin{color:rgba(23,23,23,.40) !important}

/* 浅底上 bokeh 从页面顶部就可见（原来被深色横带挡掉 132px） */
.site-gate .gate-bokeh{inset:0}


/* ══════════════════════════════════════════════════════════════════════════════
   第 15 节 · Sylva 静态背景 + 图片品牌位

   背景：Sylva 活体世界场景（ThreeUI Community · MIT）渲染成静态图。
   为什么不直接跑实时版：该场景是 5 个画布 / 632 万像素的全屏 Three.js，
   本机（Intel UHD 770）实测 14 fps；把它做小也救不了 —— 缩到 5.8 万像素仍是
   3.5 fps，说明瓶颈是每帧固定开销（传输玻璃通道 + HDR 环境 + Bloom 两遍 +
   7 套粒子），不是填充率。静态图 76 fps、109 KB。

   品牌位：同上，把 Glass AI Button 渲染成静态图（57 KB / 2x 22 KB）而不是实时
   WebGL —— 实时版在顶栏槽位里只有 3.5 fps，且它自带的灰色摄影棚背景会在浅色
   顶栏里露出一块异色矩形。
   ══════════════════════════════════════════════════════════════════════════════ */

/* 场景层：铺在面板区底部，顶部羽化融进页面底色 */
.site-gate-body::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:82%;
  background:url("imgs/gate-sylva.webp") center bottom / cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 24%,#000 60%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 24%,#000 60%);
  z-index:-1;pointer-events:none;
}
/* 场景亮起后光斑场压暗一点，避免两层纹理打架 */
.site-gate.on .gate-bokeh{opacity:.55}

/* 品牌位图片 */
.brand-pic{display:inline-flex;flex:0 0 auto}
.brand-pic img{
  display:block;width:236px;height:62px;
  filter:drop-shadow(0 6px 16px rgba(23,23,23,.16));
}
.atd-modern__brand{padding-left:4px}

/* 表单上那层白纱：底部小字压在绿色场景上要保证可读 */
.site-gate-card{position:relative;isolation:isolate}
.site-gate-card::before{
  content:"";position:absolute;inset:-40px -34px -34px;z-index:-1;border-radius:28px;
  background:radial-gradient(66% 58% at 50% 46%,rgba(255,255,255,.90),rgba(255,255,255,.52) 62%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.site-gate .site-gate-tip,.site-gate .site-gate-msg{color:#6E6E6E}

@media (max-width:760px){
  .brand-pic img{width:150px;height:40px}
  .site-gate-body::before{height:70%}
}
@media (prefers-reduced-motion:reduce){
  .site-gate.on .gate-bokeh{opacity:.4}
}