/* WWBEE 跨主题共用 CSS — reset + 通用类 */

  *, *::before, *::after {
  /* ===========================================================
  WWBEE — 主题化搜索首页  v3
  3 套主题共用同一份 DOM:
  data-theme="receipt"   票据流水  — 热敏打印纸 · 价签钉
  data-theme="warehouse" 仓储货架  — 黄黑胶带 · 钢架 · 塑料价签挂链
  data-theme="deepseek"  深空蓝紫  → 已替换为 浅色冷调 azure(粉末蓝渐变 hero · 玻璃药丸)
  =========================================================== */
  box-sizing: border-box; margin: 0; padding: 0;
  }

  html, body {
  /* ============ 全局基础 ============ */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .35s ease, color .35s ease;

  }
  /* 横向溢出兜底:任何内部元素(ticker 动画 / flex 子项 / 100vw 子元素)
     都不应撑出视口右边缘导致底部出现横向滚动条。
     body 截断,html 不截(避免影响 position:sticky / fixed 计算)。 */
  body { overflow-x: clip; }

  a { color: inherit; }

  .wrap { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

  .theme-switch {
  /* ===========================================================
  主题切换器 — 触发器已挪到顶部 nav 内(.topbar__nav-theme)
  这里保留 display:none 占位,只是给 #themeSwitch 一个 CSS hook,
  实际样式走 .topbar__nav-theme
  =========================================================== */
  display: none;

  }

  .theme-popover {

  position: fixed; top: 124px; right: 24px; z-index: 200;
  background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg); padding: 16px;
  box-shadow: var(--shadow-hard); width: 460px;
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;

  }

  .theme-popover.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

  .theme-popover__title {

  font-family: var(--font-display); font-size: 13px;
  color: var(--ink-mute); letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 12px;

  }

  .theme-popover__grid {

  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;

  }

  .theme-card {

  border: 2px solid var(--rule); border-radius: var(--radius);
  padding: 10px; cursor: pointer;
  background: var(--bg); transition: all .2s ease;
  position: relative; overflow: hidden;

  }

  .theme-card:hover { transform: translateY(-2px); }

  .theme-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }

  .theme-card.is-active::after {

  content: '✓'; position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; background: var(--primary); color: #fff;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-family: var(--font-mono);

  }

  .theme-card__preview {

  height: 60px; border-radius: var(--radius);
  margin-bottom: 8px; position: relative; overflow: hidden;
  border: 1px solid var(--rule-soft);

  }

  .theme-card[data-key="receipt"] .theme-card__preview {

  background: repeating-linear-gradient(45deg, #ebe2cf 0 6px, #f4efe3 6px 12px);

  }

  .theme-card[data-key="receipt"] .theme-card__preview::before {

  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 25%, #ff5a1f 25% 30%, transparent 30% 60%, #f6c945 60% 65%, transparent 65%);
  opacity: .8;

  }

  .theme-card[data-key="warehouse"] .theme-card__preview {

  background: linear-gradient(135deg, #bdb6a6 0%, #8a857a 100%);

  }

  .theme-card[data-key="warehouse"] .theme-card__preview::before {

  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80%; height: 6px;
  background: repeating-linear-gradient(135deg, #ffd400 0 8px, #181613 8px 16px);
  box-shadow: 0 -10px 0 rgba(255,212,0,.4), 0 10px 0 rgba(255,212,0,.4);

  }

  .theme-card[data-key="deepseek"] .theme-card__preview {

  background: linear-gradient(180deg, #9cc1e7 0%, #fafbfc 100%);
  position: relative;

  }

  .theme-card[data-key="deepseek"] .theme-card__preview::before {

  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 30%;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  border: 1px solid #4d8aff;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(77,138,255,.3);

  }

  .theme-card__name {

  font-family: var(--font-display); font-size: 13px;
  color: var(--ink); line-height: 1;

  }

  .theme-card__name small {

  display: block; font-family: var(--font-mono); font-size: 9px;
  color: var(--ink-mute); letter-spacing: .15em;
  margin-top: 4px; text-transform: uppercase;

  }

  .ticker {
  /* ===========================================================
  顶部 ticker
  =========================================================== */
  background: var(--ink); color: var(--bg);
  border-bottom: 2px solid var(--ink); overflow: hidden;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;

  }

  .ticker__inner {

  display: flex; align-items: center; height: 32px;
  white-space: nowrap; animation: ticker-roll 60s linear infinite;

  }

  .ticker:hover .ticker__inner,
  .ticker:focus-within .ticker__inner { animation-play-state: paused; }

  .ticker__group {

  display: inline-flex; align-items: center; gap: 24px; padding-right: 48px;

  }

  .ticker__dot { color: var(--primary); margin-right: 8px; }

  .ticker__dot::before { content: '●'; animation: pulse 1.4s ease-in-out infinite; }

  .ticker__price { color: var(--primary-2); font-weight: 700; }

  .ticker__sep { color: var(--ink-mute); opacity: .4; }

  @keyframes ticker-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

  /* deepseek hero 粒子光晕浮动动画 — 给 body::after 上的径向渐变小点呼吸 */
  @keyframes dsParticles {
    0%   { transform: translate(0, 0);     opacity: .55; }
    50%  { transform: translate(-12px, 6px); opacity: .9; }
    100% { transform: translate(8px, -4px);  opacity: .55; }
  }

  /* 线报流向上滚动动画 — receipt/warehouse/deepseek 三个主题 .stream__list 共用
     走 transform 而非 top,保证 GPU 合成 + 不重排 */
  @keyframes stream-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }

  /* tape-shift — 仓储主题 .tape-strip 黄黑斜纹滚动(receipt/warehouse 共用) */
  @keyframes tape-shift {
    from { background-position: 0 0; }
    to   { background-position: 200px 0; }
  }

  /* belt-shift — 仓储主题传送带条纹水平位移 */
  @keyframes belt-shift {
    from { background-position-x: 0; }
    to   { background-position-x: -80px; }
  }
  /* belt-shift-v — 仓储主题线报视口两侧竖向传送带条纹 (从上往下,32px 一轮) */
  @keyframes belt-shift-v {
    from { background-position-y: 0; }
    to   { background-position-y: 32px; }
  }

  /* ribbon-pulse — 仓储主题丝带呼吸 */
  @keyframes ribbon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .6; transform: scale(.98); }
  }

  /* crate-drop — 仓储主题货架木箱掉入 */
  @keyframes crate-drop {
    0%   { opacity: 0; transform: translateY(-12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* radar-rotate — 仓储主题雷达扫描旋转 */
  @keyframes radar-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* blip — 仓储主题雷达光点闪烁放大 */
  @keyframes blip {
    0%   { transform: scale(.4); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* print-in — receipt/deepseek 主题 .stream__item.is-new 撕打印入场 */
  @keyframes print-in {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* flicker — receipt 主题霓虹闪烁 */
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
  }

  /* pulse-shift — receipt 主题脉冲色相偏移 */
  @keyframes pulse-shift {
    0%   { box-shadow: 0 0 0 0 rgba(229,69,69,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(229,69,69,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,69,69,0); }
  }

  /* bar-slide — 搜索页 .printing-bar 进度条横向滑过 */
  @keyframes bar-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(330%); }
  }

  /* skeleton-shimmer — deepseek renqi 骨架屏光泽扫过 */
  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .topbar {
  /* ===========================================================
  顶部导航 — receipt 走此样式,被 .wrap 包住,wrap 提供 1280px 限宽 + 24px 留白
  =========================================================== */
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px dashed var(--rule-soft);

  }

  .topbar__inner {
  /* warehouse / 拆 wrap 后首页用 — 内层 1280px 限宽容器 */
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1280px; margin: 0 auto;

  }

  .topbar__brand {

  /* 用 center 不是 baseline — 跨主题(logo SVG / 文字 span)各自 baseline 不同,
     baseline 会让版本徽章视觉偏高;center 让 logo 上下中线跟文字上下中线齐 */
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);

  }

  /* 版本徽章 — 紧贴 logo 右侧,只用 font-family/letter-spacing
     (颜色/边框/背景由各主题 theme-*.css 覆写为差异化视觉) */
  .topbar__version {

  font-size: 11px; font-family: var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; line-height: 1;

  }

  .brand__logo-v2 {
  /* ====== 🐝 小蜜蜂 + wwbee 字标 · 3 主题共用 DOM,变量驱动换色 ====== */
  display: inline-flex; align-items: center; justify-content: flex-start;
  flex-shrink: 0; align-self: center;
  position: relative;
  line-height: 0;

  }

  .logo-v2-svg { width: 180px; height: 50px; overflow: visible; display: block; }

  :root {
  /* 默认(receipt)色彩 token */
  --bee-body-top: #ffe082;
  --bee-body-mid: #ffc107;
  --bee-body-bot: #ff9800;
  --bee-coupon-a: #ff6a00;
  --bee-coupon-b: #ff2e00;

  }

  .lg-text { fill: #1a1a1a; }

  .lg-b { fill: #ff5000; }

  .lg-sub { fill: #1a1a1a; }

  .lv2-wing { fill: #a8d4c0; stroke: #7ab896; stroke-width: .6; }

  .lv2-body { fill: url(#lv2-bee-body); }

  .lv2-stripe { fill: #1a1a1a; }

  .lv2-detail { stroke: #e6a000; stroke-width: .4; fill: none; opacity: .4; }

  .lv2-eye { fill: #1a1a1a; }

  .lv2-eye-shine { fill: #ffffff; }

  .lv2-blush { fill: #ff7878; opacity: .85; }

  .lv2-mouth { stroke: #1a1a1a; stroke-width: 1.2; fill: none; stroke-linecap: round; }

  .lv2-antenna { stroke: #1a1a1a; stroke-width: 1.3; fill: none; stroke-linecap: round; }

  .lv2-antenna-dot { fill: #1a1a1a; }

  .lv2-shine { fill: #fff5cc; }

  .lv2-coupon { fill: url(#lv2-coupon); stroke: #fff; stroke-width: .8; }

  .lv2-coupon-punch { fill: #ffffff; }

  .lv2-coupon-text { fill: #ffffff; font-weight: 900; }

  .lv2-leg { fill: #1a1a1a; }

  .wing-back {
  /* 翅膀抖动基线 + 蜂群呼吸 */
  transform-origin: 36px 10px; transform-box: fill-box; transform: rotate(-15deg);
  }

  .wing-front { transform-origin: 40px 11px; transform-box: fill-box; transform: rotate(-10deg); }

  .ripple { opacity: 0; transform-box: fill-box; transform-origin: left center; }

  .bee-grp { transform-origin: 250px 50px; animation: lv2-float 2.6s ease-in-out infinite; }

  .coupon-grp { transform-box: fill-box; transform-origin: 50% 0%; animation: lv2-sway 2.8s ease-in-out infinite; }

  @keyframes lv2-float { 0%,100% { transform: translate(250px,50px); } 50% { transform: translate(250px,52px); } }

  @keyframes lv2-sway { 0%,100% { transform: translate(5px,17px) rotate(-6deg); } 50% { transform: translate(5px,17px) rotate(10deg); } }

  @keyframes lv2-flutter { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }

  @keyframes lv2-ring { 0%{opacity:0;transform:translateX(0) scale(.6);} 18%{opacity:.95;} 100%{opacity:0;transform:translateX(-14px) scale(1.2);} }

  @keyframes lv2-fly { 0%,100% { transform: translate(248px,48px) rotate(-2deg); } 50% { transform: translate(252px,46px) rotate(2deg); } }

  @keyframes lv2-sway-fast { 0%,100% { transform: translate(5px,17px) rotate(-14deg); } 50% { transform: translate(5px,17px) rotate(14deg); } }

  .brand__logo-v2:hover .wing-back {
  /* hover 触发:翅膀高频扇动 + 声音波纹扩散 + 拎的券晃更厉害 */
  animation: lv2-flutter .18s ease-in-out infinite alternate;
  }

  .brand__logo-v2:hover .wing-front { animation: lv2-flutter .18s ease-in-out infinite alternate .04s; }

  .brand__logo-v2:hover .bee-grp { animation: lv2-fly .35s ease-in-out infinite; }

  .brand__logo-v2:hover .coupon-grp { animation: lv2-sway-fast .5s ease-in-out infinite; }

  .brand__logo-v2:hover .ripple-1 { animation: lv2-ring 1.1s ease-out  0s    infinite; }

  .brand__logo-v2:hover .ripple-2 { animation: lv2-ring 1.1s ease-out .18s   infinite; }

  .brand__logo-v2:hover .ripple-3 { animation: lv2-ring 1.1s ease-out .36s   infinite; }

  .brand__tag {

  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute); border: 1px solid var(--ink);
  padding: 2px 6px; transform: rotate(-2deg);

  }

  .topbar__nav { display: flex; gap: 18px; }

  .topbar__nav a {

  font-size: 13px; color: var(--ink-soft); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
  transition: all .15s ease;

  }

  .topbar__nav a.is-hot::after {

  content: 'HOT'; font-family: var(--font-mono); font-size: 9px;
  background: var(--accent); color: #fff; padding: 1px 4px;
  margin-left: 4px; vertical-align: top; border-radius: 2px;

  }

  .topbar__nav a.topbar__nav-theme {

  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;

  }

  .topbar__nav-theme-caret {

  display: inline-block; font-size: 10px;
  transition: transform .25s ease; margin-left: 2px;

  }

  .topbar__nav a.topbar__nav-theme[aria-expanded="true"] {

  color: var(--ink); border-bottom-color: var(--primary);

  }

  .topbar__nav a.topbar__nav-theme[aria-expanded="true"] .topbar__nav-theme-caret {

  transform: rotate(180deg);

  }

  .hero {
  /* ===========================================================
  Hero
  =========================================================== */
  padding: 56px 0 24px; text-align: center;
  }

  .hero__eyebrow {

  display: inline-block; font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute); letter-spacing: .25em;
  padding: 6px 14px; border: 1px solid var(--ink);
  transform: rotate(-1deg); margin-bottom: 18px; background: var(--bg-deep);

  }

  .hero__eyebrow::before { content: '◢◤ '; color: var(--primary); }

  .hero__title {

  font-family: var(--font-display); font-size: clamp(40px, 7vw, 72px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.0; margin-bottom: 14px;

  }

  .hero__title b {

  color: var(--primary); position: relative; display: inline-block;

  }

  .hero__title b::after {

  content: ''; position: absolute; left: -4px; right: -4px;
  bottom: 6px; height: 12px; background: var(--tape);
  z-index: -1; transform: skewX(-6deg); opacity: .9;

  }

  .hero__sub { font-size: 17px; color: var(--ink-soft); margin-bottom: 36px; }

  .hero__sub kbd {

  font-family: var(--font-mono); font-size: 12px;
  background: var(--ink); color: var(--bg);
  padding: 2px 6px; border-radius: 3px;
  border: 1px solid var(--ink); margin: 0 2px;

  }

  .search {
  /* ===========================================================
  receipt 搜索框(热敏打印纸)
  =========================================================== */
  max-width: 640px; margin: 0 auto; position: relative;
  }

  .search__receipt {

  position: relative; background: var(--surface);
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 2px 0 var(--ink), 4px 4px 0 var(--bg-deep), 6px 6px 0 var(--ink);
  padding: 0; overflow: hidden;

  }

  .search__receipt::before {

  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
  background-image: linear-gradient(135deg, transparent 50%, var(--bg) 50%), linear-gradient(45deg, transparent 50%, var(--bg) 50%);
  background-size: 12px 8px; background-repeat: repeat-x;

  }

  .search__receipt::after {

  content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 8px;
  background-image: linear-gradient(135deg, var(--bg) 50%, transparent 50%), linear-gradient(45deg, var(--bg) 50%, transparent 50%);
  background-size: 12px 8px; background-repeat: repeat-x;

  }

  .search__meta {

  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; border-bottom: 1px dashed var(--rule-soft);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: .12em; text-transform: uppercase;

  }

  .search__meta-left::before { content: '⌖ '; color: var(--primary); }

  .search__meta-right { color: var(--success); }

  .search__meta-right::before { content: '● LIVE '; }

  .search__input-row { display: flex; align-items: stretch; }

  .search__prefix {

  padding: 18px 16px; font-family: var(--font-mono); font-size: 22px;
  color: var(--primary); font-weight: 700;
  border-right: 2px dashed var(--rule-soft); user-select: none;

  }

  .search__input {

  flex: 1 1 0; min-width: 0; border: none; outline: none; background: transparent;
  padding: 16px; font-family: var(--font-mono); font-size: 17px;
  color: var(--ink); letter-spacing: .01em;

  }

  .search__input::placeholder { color: var(--ink-mute); }

  .search__cursor {

  display: inline-block; width: 2px; height: 1em;
  background: var(--ink); margin-left: 1px;
  animation: blink 1s steps(2) infinite; vertical-align: -2px;

  }

  @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

  .search__btn {

  flex-shrink: 0; border: none; background: var(--ink); color: var(--bg);
  padding: 0 22px; font-family: var(--font-display); font-size: 14px;
  letter-spacing: .08em; cursor: pointer; transition: all .15s ease;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;

  }

  .search__btn:hover { background: var(--primary); }

  /* 箭头由各主题 HTML 自己写,这里不加 ::after,避免深色主题「搜索 →」变成「搜索 →→」双箭头 */

  .search__chips {

  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px; border-top: 1px dashed var(--rule-soft);
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);

  }

  .search__chips-label { margin-right: 4px; }

  .search__chip {

  padding: 2px 8px; border: 1px solid var(--rule-soft);
  border-radius: 10px; cursor: pointer;
  color: var(--ink-soft); transition: all .15s ease;

  }

  .search__chip:hover { border-color: var(--ink); color: var(--ink); background: var(--tape); }

  .search__chip b { color: var(--accent); }

  .search-rack {
  /* warehouse 金属货箱搜索框 */
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 60%, #1a1a1a 100%);
  border: 4px solid var(--ink); border-radius: 6px;
  position: relative;
  box-shadow: 0 0 0 2px var(--metal), 0 12px 0 var(--ink), 0 14px 24px rgba(0,0,0,.4);
  overflow: hidden;

  }

  .search-rack::before {

  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--tape) 0 14px, var(--ink) 14px 28px); z-index: 3;

  }

  .search-rack::after {

  content: ''; position: absolute; top: 22px; left: 12px; right: 12px; bottom: 12px;
  border: 1px dashed var(--metal); pointer-events: none; opacity: .5;

  }

  .rivet {

  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #999, #333);
  border: 1px solid #111; box-shadow: inset 0 1px 2px rgba(255,255,255,.3); z-index: 4;

  }

  .rivet--tl { top: 22px; left: 18px; }

  .rivet--tr { top: 22px; right: 18px; }

  .rivet--bl { bottom: 18px; left: 18px; }

  .rivet--br { bottom: 18px; right: 18px; }

  .search-rack__meta {

  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 24px 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--tape); text-transform: uppercase;

  }

  .search-rack__meta-right::before {

  content: '● LIVE '; color: var(--primary-2);
  animation: pulse 1.4s ease-in-out infinite;

  }

  .search-rack__row { display: flex; align-items: stretch; padding: 8px 24px 14px; gap: 10px; }

  .search-rack__prefix {

  background: var(--tape); color: var(--ink);
  padding: 0 14px; display: flex; align-items: center;
  font-family: var(--font-display); font-size: 26px; border: 2px solid var(--ink);

  }

  .search-rack__input {

  flex: 1 1 0; min-width: 0; background: rgba(0,0,0,.3); border: 2px solid var(--metal);
  color: var(--tape); font-family: var(--font-mono); font-size: 16px;
  padding: 14px 18px; outline: none; caret-color: var(--tape);

  }

  .search-rack__input::placeholder { color: rgba(255,212,0,.45); font-family: var(--font-cn); font-size: 14px; }

  .search-rack__btn {

  flex-shrink: 0; background: var(--primary); color: #fff;
  border: 2px solid var(--ink); padding: 0 28px;
  font-family: var(--font-display); font-size: 22px;
  letter-spacing: .12em; cursor: pointer; transition: all .15s ease;
  text-transform: uppercase; box-shadow: 0 4px 0 var(--ink);
  white-space: nowrap;

  }

  .search-rack__btn:hover { background: var(--accent); transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }

  .search-rack__btn:active { transform: translateY(4px); box-shadow: none; }

  .search-rack__chips {

  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 24px 18px; font-family: var(--font-mono); font-size: 11px; color: var(--metal);

  }

  .search-rack__chips-label { color: var(--tape); margin-right: 4px; letter-spacing: .15em; }

  .search-rack__chip {

  padding: 2px 9px; background: rgba(0,0,0,.4);
  border: 1px solid var(--metal); color: var(--surface);
  cursor: pointer; font-family: var(--font-condensed); letter-spacing: .05em;
  transition: all .15s ease;

  }

  .search-rack__chip:hover { background: var(--tape); color: var(--ink); border-color: var(--tape); }

  .search-rack__chip b { color: var(--primary); }

  .search-rack__chip:hover b { color: var(--ink); }

  .pricetags {
  /* ===========================================================
  pricetags — receipt / warehouse 共用(价签钉+挂链),deepseek 玻璃药丸
  =========================================================== */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 36px auto 28px; padding: 16px 0;

  }

  .pricetag {

  --rot: -1.5deg; position: relative;
  background: var(--tape); color: var(--ink);
  padding: 10px 18px 14px; min-width: 130px; text-align: center;
  text-decoration: none; border: 1.5px solid var(--ink);
  transform: rotate(var(--rot)); transition: all .2s ease;
  cursor: pointer; box-shadow: 2px 2px 0 var(--ink);

  }

  .pricetag:nth-child(1) { --rot: -3deg; }

  .pricetag:nth-child(2) { --rot: -1deg; background: #ffe2a8; }

  .pricetag:nth-child(3) { --rot: 1.5deg; background: var(--bg-deep); }

  .pricetag:nth-child(4) { --rot: 2.5deg; }

  .pricetag:nth-child(5) { --rot: -2deg; background: #ffd9b3; }

  .pricetag:nth-child(6) { --rot: 1deg; background: var(--bg-deep); }

  .pricetag:hover { transform: rotate(0) translateY(-4px); box-shadow: 4px 4px 0 var(--ink); background: var(--ink); color: var(--bg); }

  .pricetag::before {

  content: ''; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%); width: 8px; height: 8px;
  background: var(--bg); border: 1px solid var(--ink); border-radius: 50%;

  }

  .pricetag::after {

  content: ''; position: absolute; top: 2px; left: 50%;
  transform: translateX(-50%); width: 2px; height: 8px;
  background: var(--ink); border-radius: 1px;

  }

  .pricetag__price {

  font-family: var(--font-display); font-size: 28px;
  line-height: 1; margin-top: 12px; letter-spacing: -0.02em;

  }

  .pricetag__price small { font-size: 14px; font-weight: 400; margin-right: 2px; opacity: .8; }

  .pricetag__price em {

  font-style: normal; font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; background: var(--ink); color: var(--bg);
  padding: 1px 5px; margin-left: 6px;
  vertical-align: middle; border-radius: 2px;

  }

  .pricetag:hover .pricetag__price em { background: var(--primary); }

  .pricetag__label {

  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  margin-top: 4px; opacity: .7;

  }

/* ============================================================
 * WWBEE / 列表页「不离页看详情」卷帘抽屉 — 骨架样式
 *   主题无关部分:定位 / 开关动画 / 容器 grid
 *   主题色 / 边框 / 字体由主题 css(详情页 css)覆写 [data-theme="..."] .drawer*
 * ============================================================ */
.drawer {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}
.drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity .25s ease;
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(560px, 92vw);
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__body {
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 16px;
}

.drawer__loading,
.drawer__error {
  padding: 32px 0; text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* 主图 */
.drawer__hero { display: flex; flex-direction: column; gap: 8px; }
.drawer__img {
  aspect-ratio: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.drawer__img img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.drawer__img span { font-family: var(--font-mono); font-size: 11px; }
.drawer__thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.drawer__thumbs > div {
  aspect-ratio: 1;
  border-radius: 6px;
}

/* 价格 */
.drawer__price {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 10px;
}
.drawer__price-now {
  font-size: 32px; font-weight: 800; letter-spacing: -.02em;
}
.drawer__price-now small { font-size: 16px; font-weight: 600; margin-right: 2px; }
.drawer__price-was {
  text-decoration: line-through;
  font-size: 13px;
}
.drawer__price-save {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px; border-radius: 4px;
}

/* 标题 / 店铺 */
.drawer__title {
  font-size: 15px; line-height: 1.5;
}
.drawer__shop {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  font-size: 12px;
}
.drawer__shop-name { font-weight: 600; }
.drawer__shop-dsr {
  font-family: var(--font-mono); font-size: 11px;
  margin-left: auto;
}

/* 通用 tag */
.drawer__tag {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: 4px;
  letter-spacing: .08em;
}

/* 优惠券 */
.drawer__coupon {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border-radius: 10px;
}
.drawer__coupon-amt {
  font-size: 22px; font-weight: 800;
  padding: 2px 10px; border-radius: 6px;
  flex-shrink: 0;          /* ¥1 块不被压扁 */
}
.drawer__coupon-rule {
  font-size: 13px;
  flex: 1; min-width: 0;
}
/* 右侧双按钮组:「去领券」(主 / 实心) + 「复制淘口令」(次 / 描边) */
.drawer__coupon-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}
.drawer__coupon-go,
.drawer__coupon-copy {
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
/* 主按钮(去领券)— 实心 */
.drawer__coupon-go {
  border: 1px solid currentColor;
}
/* 次按钮(复制淘口令)— 描边款 */
.drawer__coupon-copy {
  background: transparent;
  border-style: dashed;
  border-width: 1px;
  opacity: 0.85;
}
.drawer__coupon-copy:hover { opacity: 1; }

[data-theme="deepseek"] .drawer__coupon-go {
  color: var(--accent, #b45309);
}
[data-theme="deepseek"] .drawer__coupon-go:hover {
  background: var(--accent, #b45309);
  color: #fff;
  border-color: var(--accent, #b45309);
}
[data-theme="deepseek"] .drawer__coupon-copy {
  color: var(--ink-2, #4b536b);
  border-color: currentColor;
}

/* DSR */
.drawer__dsr { display: flex; flex-direction: column; gap: 8px; }
.drawer__dsr-row {
  display: grid; grid-template-columns: 32px 1fr 48px;
  align-items: center; gap: 10px;
  font-size: 12px;
}
.drawer__dsr-row b { text-align: right; font-family: var(--font-mono); }
.drawer__dsr-bar {
  height: 6px; border-radius: 999px;
  overflow: hidden;
  background: var(--bg-deep, rgba(0,0,0,.08));
}
.drawer__dsr-bar > div {
  height: 100%; width: var(--p, 0%);
  transition: width .4s ease;
}

/* CTA 行 — 横向双按钮(主「去淘宝查看」+ 次「复制淘口令」) */
.drawer__cta-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.drawer__cta {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s, transform .15s;
}
.drawer__cta.is-loading { opacity: .5; pointer-events: none; }
.drawer__cta--off { opacity: .4; cursor: not-allowed; }
/* 主按钮:「去淘宝查看」— 撑满 flex 1.6,视觉重点 */
.drawer__cta--go { flex: 1.6; }
/* 次按钮:「复制淘口令」— 较窄 + 描边款,与主按钮区分 */
.drawer__cta--copy { flex: 1; }
.drawer__cta--copy {
  background: transparent;
  border-style: dashed;
  border-width: 1.5px;
}

/* ============================================================
 * 抽屉 — DEEPSEEK 主题化覆写
 *   drawer 是列表页共享组件(drawer.js 注入),列表页只加载
 *   common.css + {page}-{theme}.css,所以主题覆写必须放这里。
 *   实色面板 + 实色卡片块,只在主按钮/价格保留渐变作为点缀。
 *   只覆视觉,不动 box 模型(R4 红线);token 用 var(..., fallback)
 *   兜底,保证任何引入 common.css 的页面都能实色渲染。
 * ============================================================ */
[data-theme="deepseek"] .drawer__scrim {
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
}
[data-theme="deepseek"] .drawer__panel {
  background: #ffffff;
  border-left: 1px solid var(--rule, #e5e7ec);
  box-shadow: -24px 0 48px rgba(15, 23, 42, .18);
}
[data-theme="deepseek"] .drawer__loading,
[data-theme="deepseek"] .drawer__error {
  color: var(--ink-soft, #525866);
}

/* 主图区:实色底,不做玻璃 */
[data-theme="deepseek"] .drawer__img {
  background: var(--paper-deep, #f4f6f8);
  border: 1px solid var(--rule, #e5e7ec);
  border-radius: 14px;
}
[data-theme="deepseek"] .drawer__thumbs > div {
  border: 1px solid var(--rule, #e5e7ec);
  border-radius: 8px;
}

/* 价格 — 数字保留渐变(对比度高,渐变文字在白底清晰) */
[data-theme="deepseek"] .drawer__price-now {
  background: linear-gradient(135deg, var(--primary, #4d8aff), var(--primary-2, #6ea3ff));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="deepseek"] .drawer__price-was {
  color: var(--ink-mute, #8892a5);
}
[data-theme="deepseek"] .drawer__price-save {
  background: rgba(16, 185, 129, .12);
  color: #047857;
}
.drawer__price-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  letter-spacing: .04em;
  color: var(--ink-mute, #8892a5);
  opacity: .75;
}

[data-theme="deepseek"] .drawer__title { color: var(--ink, #1a2238); }
[data-theme="deepseek"] .drawer__shop { color: var(--ink-soft, #525866); }
[data-theme="deepseek"] .drawer__shop-name { color: var(--ink, #1a2238); }

/* tag — 实色底 + 高对比文字 */
[data-theme="deepseek"] .drawer__tag--tm {
  background: #ff6b35;
  color: #fff;
}
[data-theme="deepseek"] .drawer__tag--jhs {
  background: #fef2f2; color: #dc2626;
}
[data-theme="deepseek"] .drawer__tag--yfx {
  background: #ecfdf5; color: #047857;
}
[data-theme="deepseek"] .drawer__tag--brand {
  background: #fef3c7; color: #b45309;
}

/* 优惠券 — 实色块 */
[data-theme="deepseek"] .drawer__coupon {
  background: linear-gradient(135deg, #fef2f2, #fff7ed);
  border: 1px solid #fecaca;
}
[data-theme="deepseek"] .drawer__coupon-amt {
  background: #ef4444;
  color: #fff;
}
[data-theme="deepseek"] .drawer__coupon-rule { color: var(--ink, #1a2238); }

/* DSR 条 */
[data-theme="deepseek"] .drawer__dsr-row { color: var(--ink, #1a2238); }
[data-theme="deepseek"] .drawer__dsr-bar {
  background: var(--paper-deep, #f4f6f8);
  border: 1px solid var(--rule, #e5e7ec);
}
[data-theme="deepseek"] .drawer__dsr-bar > div {
  background: linear-gradient(90deg, var(--primary, #4d8aff), var(--primary-2, #6ea3ff));
}

/* CTA — 渐变实色按钮 */
[data-theme="deepseek"] .drawer__cta {
  background: linear-gradient(135deg, var(--primary, #4d8aff), var(--primary-2, #6ea3ff));
  color: #fff;
  box-shadow: 0 4px 12px rgba(77, 138, 255, .25);
}
[data-theme="deepseek"] .drawer__cta:hover {
  box-shadow: 0 8px 20px rgba(77, 138, 255, .35);
}
/* 次按钮(复制淘口令) — 描边虚线款,弱化视觉重量 */
[data-theme="deepseek"] .drawer__cta--copy {
  background: transparent;
  color: var(--primary, #4d8aff);
  border: 1.5px dashed var(--primary, #4d8aff);
  box-shadow: none;
}
[data-theme="deepseek"] .drawer__cta--copy:hover {
  background: rgba(77, 138, 255, .08);
  box-shadow: none;
}

/* ============================================================
 *   drawer 主题化 · RECEIPT(热敏纸米黄)
 *   与 [data-theme="receipt"] 的价签钉同源;
 *   scrim 偏暖灰、panel 实色 paper 底,tag 用印章红 + 米黄。
 * ============================================================ */
[data-theme="receipt"] .drawer__scrim {
  background: rgba(40, 30, 18, .45);
  backdrop-filter: blur(3px);
}
[data-theme="receipt"] .drawer__panel {
  background: var(--paper, #fbf6e9);
  border-left: 2px dashed var(--rule, #d8c89a);
  box-shadow: -16px 0 32px rgba(40, 30, 18, .18);
}
[data-theme="receipt"] .drawer__loading,
[data-theme="receipt"] .drawer__error {
  color: var(--ink-soft, #6a5a3e);
}
[data-theme="receipt"] .drawer__img {
  background: #fff;
  border: 1.5px solid var(--ink, #1a1a1a);
  border-radius: 4px;
}
[data-theme="receipt"] .drawer__thumbs > div {
  border: 1px solid var(--ink, #1a1a1a);
  border-radius: 4px;
}
[data-theme="receipt"] .drawer__price-now {
  color: var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__price-was {
  color: var(--ink-mute, #8a857a);
}
[data-theme="receipt"] .drawer__price-save {
  background: #fff3d6;
  color: #8a5a00;
  border: 1px solid #f0c870;
}
[data-theme="receipt"] .drawer__title { color: var(--ink, #181613); }
[data-theme="receipt"] .drawer__shop { color: var(--ink-soft, #4a4640); }
[data-theme="receipt"] .drawer__shop-name { color: var(--ink, #181613); }

[data-theme="receipt"] .drawer__tag--tm {
  background: var(--primary, #ff5a1f);
  color: #fff;
}
[data-theme="receipt"] .drawer__tag--jhs {
  background: #fff; color: var(--primary, #ff5a1f);
  border: 1px solid var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__tag--yfx {
  background: #f4ecd4; color: #6a5a2a;
  border: 1px solid #d8c89a;
}
[data-theme="receipt"] .drawer__tag--brand {
  background: #fef3c7; color: #8a5a00;
  border: 1px solid #f0c870;
}
[data-theme="receipt"] .drawer__coupon {
  background: #fff3d6;
  border: 1.5px dashed var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__coupon-amt {
  background: var(--primary, #ff5a1f);
  color: #fff;
}
[data-theme="receipt"] .drawer__coupon-rule { color: var(--ink, #181613); }
[data-theme="receipt"] .drawer__coupon-go {
  background: var(--primary, #ff5a1f);
  color: #fff;
  border-color: var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__coupon-go:hover {
  background: var(--accent, #d62828);
  color: #fff;
  border-color: var(--accent, #d62828);
}
[data-theme="receipt"] .drawer__coupon-copy {
  color: var(--primary, #ff5a1f);
  border-color: var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__coupon-copy:hover {
  background: rgba(255, 90, 31, .08);
}
[data-theme="receipt"] .drawer__dsr-row { color: var(--ink, #181613); }
[data-theme="receipt"] .drawer__dsr-bar {
  background: #ece1c2;
}
[data-theme="receipt"] .drawer__dsr-bar > div {
  background: var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__cta {
  background: var(--ink, #181613);
  color: var(--surface, #fdf9ee);
  border: 2px solid var(--ink, #181613);
  box-shadow: 4px 4px 0 var(--primary, #ff5a1f);
}
[data-theme="receipt"] .drawer__cta:hover {
  background: var(--primary, #ff5a1f);
  color: #fff;
  border-color: var(--primary, #ff5a1f);
  box-shadow: 6px 6px 0 var(--ink, #181613);
}
/* 次按钮(复制淘口令) — 米黄纸面黑边虚线款 */
[data-theme="receipt"] .drawer__cta--copy {
  background: transparent;
  color: var(--ink, #181613);
  border: 2px dashed var(--ink, #181613);
  box-shadow: none;
}
[data-theme="receipt"] .drawer__cta--copy:hover {
  background: var(--primary, #ff5a1f);
  color: #fff;
  border-color: var(--primary, #ff5a1f);
}

/* ============================================================
 *   drawer 主题化 · WAREHOUSE(钢架黑底黄边)
 *   与 [data-theme="warehouse"] 的 SKU 货架同源;
 *   scrim 偏暗、panel 黑底黄边工业风,tag / coupon 用主黄 + 黑底。
 * ============================================================ */
[data-theme="warehouse"] .drawer__scrim {
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(2px);
}
[data-theme="warehouse"] .drawer__panel {
  background: var(--ink, #181613);
  color: var(--surface, #e8e3d3);
  border-left: 4px solid var(--tape, #ffd400);
  box-shadow: -16px 0 32px rgba(0, 0, 0, .4);
}
[data-theme="warehouse"] .drawer__loading,
[data-theme="warehouse"] .drawer__error {
  color: var(--ink-soft, #3a3530);
  font-family: var(--font-condensed, monospace);
  letter-spacing: .08em;
}
[data-theme="warehouse"] .drawer__img {
  background: #000;
  border: 2px solid var(--tape, #ffd400);
  border-radius: 4px;
}
[data-theme="warehouse"] .drawer__thumbs > div {
  border: 1.5px solid var(--tape, #ffd400);
  border-radius: 2px;
}
[data-theme="warehouse"] .drawer__price-now {
  color: var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__price-was {
  color: var(--ink-mute, #6a655e);
}
[data-theme="warehouse"] .drawer__price-save {
  background: rgba(255, 212, 0, .15);
  color: var(--tape, #ffd400);
  border: 1px solid var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__title { color: var(--surface, #e8e3d3); }
[data-theme="warehouse"] .drawer__shop { color: var(--ink-soft, #3a3530); }
[data-theme="warehouse"] .drawer__shop-name { color: var(--surface, #e8e3d3); }

[data-theme="warehouse"] .drawer__tag--tm {
  background: var(--tape, #ffd400);
  color: #000;
}
[data-theme="warehouse"] .drawer__tag--jhs {
  background: #000; color: var(--tape, #ffd400);
  border: 1px solid var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__tag--yfx {
  background: rgba(255, 212, 0, .15); color: var(--tape, #ffd400);
  border: 1px solid var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__tag--brand {
  background: var(--tape, #ffd400); color: #000;
}
[data-theme="warehouse"] .drawer__coupon {
  background: rgba(255, 212, 0, .08);
  border: 2px dashed var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__coupon-amt {
  background: var(--tape, #ffd400);
  color: #000;
}
[data-theme="warehouse"] .drawer__coupon-rule { color: var(--surface, #e8e3d3); }
[data-theme="warehouse"] .drawer__coupon-go {
  background: var(--tape, #ffd400);
  color: #000;
  border-color: var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__coupon-go:hover {
  background: var(--tape-2, #ffea4a);
  color: #000;
  border-color: var(--tape-2, #ffea4a);
}
[data-theme="warehouse"] .drawer__coupon-copy {
  color: var(--tape, #ffd400);
  border-color: var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__coupon-copy:hover {
  background: rgba(255, 212, 0, .12);
}
[data-theme="warehouse"] .drawer__dsr-row { color: var(--surface, #e8e3d3); }
[data-theme="warehouse"] .drawer__dsr-bar {
  background: rgba(255, 255, 255, .1);
}
[data-theme="warehouse"] .drawer__dsr-bar > div {
  background: var(--tape, #ffd400);
}
[data-theme="warehouse"] .drawer__cta {
  background: var(--tape, #ffd400);
  color: #000;
  border: 2px solid var(--tape, #ffd400);
  font-family: var(--font-condensed, monospace);
  letter-spacing: .12em;
  box-shadow: 4px 4px 0 #000;
}
[data-theme="warehouse"] .drawer__cta:hover {
  background: var(--tape-2, #ffea4a);
  color: #000;
  border-color: var(--tape-2, #ffea4a);
  box-shadow: 6px 6px 0 #000;
}
/* 次按钮(复制淘口令) — 黑底黄边虚线款 */
[data-theme="warehouse"] .drawer__cta--copy {
  background: transparent;
  color: var(--tape, #ffd400);
  border: 2px dashed var(--tape, #ffd400);
  box-shadow: none;
  font-family: var(--font-condensed, monospace);
  letter-spacing: .12em;
}
[data-theme="warehouse"] .drawer__cta--copy:hover {
  background: rgba(255, 212, 0, .12);
  color: var(--tape-2, #ffea4a);
  border-color: var(--tape-2, #ffea4a);
}

  /* ============================================================
 *   全局 Toast 浮层(buy.js 用)
 *   .wwbee-toast — 屏幕中央(竖直 32%)出现的短提示,2.4s 自动消失
 *   · 加到 body 顶层(脱离 stacking/transform 父级,无视 drawer 内的 z-index)
 *   · kind="ok" / "err" 双形态
 *   · 动画仅 opacity 渐入渐出 — 不使用 scale,合规 R4("transform: scale 禁止")
 * ============================================================
 */
.wwbee-toast {
  position: fixed;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  min-width: 220px;
  max-width: min(560px, 86vw);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .1);
  opacity: 0;
  pointer-events: none;             /* 浮层不拦截下层点击 */
  transition: opacity .25s ease;
}
.wwbee-toast.is-show {
  opacity: 1;
}
.wwbee-toast[data-kind="ok"] {
  background: rgba(20, 22, 28, .92);
  color: #fff;
}
.wwbee-toast[data-kind="err"] {
  background: rgba(220, 38, 38, .94);   /* 红色 */
  color: #fff;
}

/* 主题化覆写 — 让 ok 颜色融入各主题 */
[data-theme="deepseek"] .wwbee-toast[data-kind="ok"] {
  background: linear-gradient(135deg, var(--primary, #4d8aff), var(--primary-2, #6ea3ff));
  color: #fff;
  box-shadow: 0 10px 30px rgba(77, 138, 255, .35), 0 2px 8px rgba(77, 138, 255, .18);
}
[data-theme="receipt"] .wwbee-toast[data-kind="ok"] {
  background: var(--ink, #181613);
  color: var(--surface, #fdf9ee);
  box-shadow: 4px 4px 0 var(--primary, #ff5a1f);
  border-radius: 4px;        /* 撕小票风 — 直角感 */
  font-family: var(--font-mono, monospace);
}
[data-theme="warehouse"] .wwbee-toast[data-kind="ok"] {
  background: var(--tape, #ffd400);
  color: #000;
  box-shadow: 4px 4px 0 #000;
  border-radius: 2px;        /* 钢架直角感 */
  font-family: var(--font-condensed, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
}

  .stream {
  /* ===========================================================
  stream 线报流(三主题共用 DOM)
  =========================================================== */
  margin: 36px auto; padding: 0;
  }

  .stream__head {

  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 18px; padding-bottom: 12px;

  }

  .stream__head h2 .live-dot {

  font-family: var(--font-display); font-size: 32px; line-height: 1;
  letter-spacing: -0.02em;

  }

  .stream__head h2 small {

  display: block; font-family: var(--font-mono); font-size: 11px;
  font-weight: 400; color: var(--ink-mute); letter-spacing: .25em;
  margin-bottom: 4px;

  }

  .stream__head .live-dot {

  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); letter-spacing: .2em;
  padding: 4px 10px; border: 1px solid var(--accent); border-radius: 12px;

  }

  .stream__head .live-dot::before {

  content: ''; width: 6px; height: 6px;
  background: currentColor; border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;

  }

  /* stream 头部右侧容器:放 LIVE NOW(避免 flex 3-item 把 link 挤到中间) */
  .stream__head-right {

  display: flex; align-items: center; gap: 16px;

  }

  /* 查看全部 — stream section 末尾,样式 = .col__foot + .col__foot a 合并 */
  .stream__viewport-more {

  display: block;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink); text-decoration: none;
  transition: color .15s ease;
  width: max-content;

  }

  .stream__viewport-more:hover { color: var(--primary); }

  /* ===========================================================
    stream__list 共用基线(三主题共用 DOM,flex 容器必须定义在 common.css,
    主题 CSS 才能只覆视觉不动 box 模型 — 见 AGENTS.md R4)
    =========================================================== */
  .stream__list {

  display: flex; flex-direction: column;
  animation: stream-up 40s linear infinite;

  }

  .stream__plat {

  display: inline-flex; align-items: center;
  padding: 3px 10px; font-size: 13px; font-weight: 700;
  border-radius: 2px; color: #fff; margin-right: 8px;
  letter-spacing: .08em;
  white-space: nowrap; min-width: 44px; justify-content: center;

  }

  .plat-taobao { background: #ff5000; }

  .plat-jd { background: #e1251b; }

  .plat-pdd { background: #e02020; }

  .plat-vip { background: #bf1019; }

  .plat-sn { background: #ffaa00; color: #000; }

  .plat-meituan { background: #ffc300; color: #000; }

  .shelf {
  /* ===========================================================
  三列商品 — 三主题共用 DOM,样式主题化
  =========================================================== */
  margin: 24px auto 24px;
  }

  .shelf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .deal {
  /* deal — 共用基础 + 主题覆盖 */
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px; padding: 10px 0;
  border-top: 1px dashed var(--rule-soft); align-items: center;

  }

  .deal:first-of-type { border-top: 1px solid var(--rule); }

  .deal__img {

  width: 64px; height: 64px;
  background: var(--surface); border: 1px solid var(--rule);
  overflow: hidden; display: grid; place-items: center;
  color: var(--ink-mute); font-family: var(--font-mono);
  font-size: 10px; text-align: center; padding: 4px;
  line-height: 1.2; position: relative;

  }
  /* 真实商品图渲染时撑满 .deal__img,object-fit:cover 避免变形 */
  .deal__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .deal__title {

  font-size: 13px; line-height: 1.35;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--ink); font-weight: 700;

  }

  .deal__title:hover { color: var(--primary); cursor: pointer; }

  .deal__meta {

  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute); margin-top: 4px; letter-spacing: .04em;

  }

  .deal__meta b { color: var(--ink-soft); font-weight: 700; }

  .deal__meta .tag-tm {

  background: var(--accent); color: #fff;
  padding: 0 4px; margin-right: 4px; border-radius: 2px;

  }

  .deal__price { text-align: right; font-family: var(--font-display); line-height: 1; min-width: 0; }

  .deal__price .now {

  font-size: clamp(18px, 3.5vw, 22px); color: var(--accent);
  letter-spacing: -0.02em; display: block;

  }

  .deal__price .now small { font-size: 12px; margin-right: 1px; }

  .deal__price .was {

  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); text-decoration: line-through;
  display: block; margin-top: 4px;

  }

  .deal__price .coupon {

  font-family: var(--font-mono); font-size: 10px;
  background: var(--ink); color: var(--bg);
  padding: 1px 4px; border-radius: 2px;
  display: inline-block; margin-top: 4px; letter-spacing: .04em;

  }

  .col__foot {
  /* col__foot */
  margin-top: 14px; padding-top: 10px;
  border-top: 2px dashed var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); letter-spacing: .08em;

  }

  .col__foot a {

  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 1px;

  }

  .col__foot a:hover { color: var(--primary); border-color: var(--primary); }

  .stats {
  /* ===========================================================
  数据条
  - 用户改:用换行(响应式断点)替代 zoom,简化 CSS
  - 4 列 → 2 列(≤900px)→ 1 列(≤600px),数字/padding 同步缩
  - 主题 CSS 不要碰 box 模型(沿用 R4 红线)
  =========================================================== */
  margin: 36px auto; padding: 20px 24px;
  background: var(--ink); color: var(--bg);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; position: relative;
  /* 居中三件套 */
  width: 1100px; max-width: 100%;
  margin: 36px auto;
  box-sizing: border-box;

  }

  .stats::before {

  content: 'WWBEE / 数据面单';
  position: absolute; top: -10px; left: 18px;
  background: var(--bg); color: var(--ink);
  padding: 2px 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .25em;
  border: 1px solid var(--ink);

  }

  .stats__cell {

  border-right: 1px dashed rgba(244,239,227,.2); padding-right: 18px;

  }

  .stats__cell:last-child { border-right: none; padding-right: 0; }

  .stats__num {

  font-family: var(--font-display); font-size: 32px;
  color: var(--primary-2); line-height: 1;
  letter-spacing: -0.02em; display: inline-block;
  max-width: 100%; white-space: nowrap; overflow: hidden;
  text-overflow: clip;

  }

  .stats__num::after { content: '_'; animation: blink 1s steps(2) infinite; margin-left: 2px; }

  .stats__label {

  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .2em; margin-top: 6px;
  color: rgba(244,239,227,.65); text-transform: uppercase;

  }

  footer {
  /* ===========================================================
  Footer
  =========================================================== */
  margin-top: 48px; padding: 32px 0 24px;
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: .06em;

  }

  .footer__row {

  display: flex; justify-content: space-between;
  align-items: center; margin-bottom: 8px;

  }

  .footer__row a { color: var(--ink-soft); text-decoration: none; margin-right: 14px; }

  .footer__api-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

  .api-pill {

  border: 1px solid var(--ink); padding: 2px 8px;
  border-radius: 10px; background: var(--bg-deep);
  font-size: 10px; color: var(--ink-soft);

  }

  .api-pill b { color: var(--ink); font-weight: 700; }

  /* ============================================================
   * 备案号(beian) — 公安/工信部 法规要求:所有 C 端页面底栏加备案号 + 查询链接
   *   - 不走主题 CSS(./theme-*.css 不动,R4 红线),所有主题统一外观
   *   - 由 apply-beian.mjs 在 build 后注入 <div class="beian">
   *   - R4 红线:不用 padding shorthand(防左右 padding 误伤基线 box 模型)
   * ============================================================ */
  .beian { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 8px; column-gap: 12px; padding-top: 12px; padding-bottom: 12px; font-size: 12px; color: var(--ink-soft); text-align: center; }
  .beian img { height: 16px; width: auto; vertical-align: middle; }
  .beian a { color: var(--ink-soft); text-decoration: none; }
  .beian a:hover { text-decoration: underline; color: var(--ink); }
  .beian--gov { display: inline-flex; align-items: center; column-gap: 4px; }

  @media (max-width: 900px) {
    .shelf__grid {
    /* ===========================================================
    响应式
    =========================================================== */
    grid-template-columns: 1fr;
    }

    /* stats:4 列 → 2 列(2x2 网格),同步缩 padding/gap */
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 20px; gap: 14px; }
    /* 中间横向虚线分隔;基线 :last-child 已处理"最右一个无边框" */
    .stats__cell:nth-child(1), .stats__cell:nth-child(2) { border-bottom: 1px dashed rgba(244,239,227,.2); padding-bottom: 12px; }
    .stats__cell:nth-child(2) { border-right: none; padding-right: 0; }
    .stats__num { font-size: 28px; }
    .stats__label { font-size: 10px; letter-spacing: .15em; }

    .stream__item { grid-template-columns: 72px auto minmax(0,1fr) auto !important; }

  /* ===========================================================
    stream__item 共用基线(三主题共用 DOM,grid 必须定义在 common.css,
    主题 CSS 才能只覆视觉不动 box 模型 — 见 AGENTS.md R4)
    结构:time / plat / text / tag(4 列)
    =========================================================== */
  .stream__item {

  display: grid; grid-template-columns: 72px auto minmax(0, 1fr) auto;
  gap: 14px; align-items: center;

  }

  /* text 元素硬约束:1 行截断,绝不撑出 grid 范围
     - min-width: 0 → 允许 grid item 缩到 0(ellipsis 才能截)
     - overflow: hidden + text-overflow: ellipsis + white-space: nowrap → 1 行截断
     - display: block → 显式 block,避免 grid item 被某些浏览器当 inline-block 触发 wrap */
  .stream__item > .stream__text {

  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;

  }

  /* 4 个 cell 全部强制 inline-flex + width: max-content,
     防止某些浏览器把 inline element 当 inline-block atomic 触发 wrap,
     又让 block 元素不撑满 grid track(100% 默认会挤掉其他列) */
  .stream__item > .stream__plat,
  .stream__item > .stream__tag,
  .stream__item > .stream__time {

  display: inline-flex;
  align-items: center;
  width: max-content;
  align-self: center;

  }

    .theme-popover { width: calc(100vw - 48px); max-width: 460px; }

    .topbar__nav { display: none; }
  }

  @media (max-width: 600px) {
    .hero__title { font-size: 40px; }

    .pricetags { gap: 10px; }

    .pricetag { min-width: 100px; padding: 8px 12px 12px; }

    .pricetag__price { font-size: 22px; }

    .stream__viewport { height: 560px; }

    /* 手机端 button:只收 padding + font,不再 ::before/::after 偷换文字(由 HTML 决定) */
    .search__btn { padding: 0 12px; font-size: 12px; }

    .footer__row { flex-direction: column; align-items: flex-start; gap: 8px; }

    .theme-switch { top: 56px; right: 16px; }

    .theme-popover { top: 110px; right: 16px; }

    .theme-popover__grid { grid-template-columns: 1fr 1fr; }

    /* stats:2 列 → 1 列(竖排),数字再缩,padding 缩 */
    .stats { grid-template-columns: 1fr; padding: 14px 18px; gap: 10px; }
    .stats__cell { border-right: none !important; padding-right: 0; border-bottom: 1px dashed rgba(244,239,227,.2); padding-bottom: 10px; }
    .stats__cell:last-child { border-bottom: none; padding-bottom: 0; }
    .stats__num { font-size: 24px; }
    .stats__label { font-size: 10px; }
  }

  /* ===========================================================
    回到顶部按钮 .btt(back-to-top)
    - HTML 在 body 末尾,class="btt btt-{theme}" 由主题 CSS 覆盖视觉
    - JS(btt.js)在 scrollY > 600 时添加 .is-visible,平滑显隐
    - 用 transform 而非 top/bottom 切换,避免重排抖动
    =========================================================== */
  .btt {

  position: fixed; right: 24px; bottom: 24px; z-index: 99;
  width: 48px; height: 48px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-condensed, var(--font-mono));
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--ink); border-radius: 4px;
  background: var(--surface); color: var(--ink);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease, background-color .15s ease, color .15s ease;
  box-shadow: 3px 3px 0 var(--ink);

  }

  .btt.is-visible {

  opacity: 1; pointer-events: auto; transform: translateY(0);

  }

  .btt:hover { background: var(--ink); color: var(--surface); }

  /* 移动端稍缩小,避免压顶 */
  @media (max-width: 600px) {
    .btt { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 10px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {

    animation-duration: .001ms !important;
    transition-duration: .001ms !important;

    }
  }

  /* ===========================================================
    主题切换 — View Transitions API
    - @view-transition { navigation: auto } 让浏览器原生接管跨页面跳转
    - --vt-x / --vt-y 由 theme-switch.js 在点击卡片时记录,作为扩散中心
    - 旧 root 收缩到点击点,新 root 从点击点扩张铺满 → 圆环"撕开"效果
    - Chrome 111+/Edge 原生支持,不支持时浏览器降级普通跳转,无副作用
    =========================================================== */
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {

  animation: .42s cubic-bezier(.65, 0, .35, 1) both vt-out;

  }

  ::view-transition-new(root) {

  animation: .42s cubic-bezier(.65, 0, .35, 1) both vt-in;

  }

  @keyframes vt-out {

  to {
    clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
    opacity: 0;
  }

  }

  @keyframes vt-in {

  from {
    clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
    opacity: 0;
  }

  }