/* ==========================================================================
   wb · 设计系统（复刻自 workbuddy.cn）
   --------------------------------------------------------------------------
   提取自线上站点的实测计算样式：
     配色   #1A1A1A 主文字 / #191A23 深标题 / #4C4F6B 次级 / #E5E5E5 描边
           #28B894 品牌 teal / #0A0A0A 页脚 / 光晕 #DAF6FF → #E8FFF4
     字体   PingFang SC → Microsoft YaHei；字重以 300/400/500 三档为主
     字号   主标 88/1.02·500，区块标 60/1.2·400，卡片标 28/1.55·300
     圆角   4 6 8 12 16 20 999（胶囊）
     阴影   0 8px 24px rgba(0,0,0,.14) + inset 0 1px 0 rgba(255,255,255,1)
     间距   区块上内边距 96px，下载区 120px，主视觉 153px，容器左右 120px
   全部无外部依赖：字体走系统栈，光晕/装饰用 CSS 渐变与内联 SVG。
   ========================================================================== */

/* ---------- 1. 令牌 ---------- */
:root {
  /* 墨色阶 */
  --wb-ink:      #1A1A1A;
  --wb-ink-2:    #191A23;
  --wb-ink-3:    #4C4F6B;
  --wb-ink-4:    #646464;
  --wb-ink-5:    #A1A1A1;
  --wb-ink-6:    #BFBFBF;

  /* 线与面 */
  --wb-line:      #E5E5E5;
  --wb-line-soft: #EFEFEF;
  --wb-line-warm: rgba(26, 26, 26, .08);
  /* ★ 表单控件边界专用：#E5E5E5 对白底只有 1.28:1，装饰性描边够用，
     但「输入框边框」属于 WCAG 1.4.11 要 3:1 的非文字图形。
     这个值按相对亮度公式解出：对 #FFFFFF 约 3.45:1，视觉上仍是一条浅灰线。 */
  --wb-line-strong: #8A8A8A;
  --wb-bg:        #FFFFFF;
  --wb-bg-soft:   #FAFAFA;
  --wb-bg-pill:   #F7F8F9;
  --wb-bg-deep:   #0A0A0A;
  --wb-bg-deep-2: #141414;

  /* 品牌 teal */
  --wb-brand:      #28B894;
  --wb-brand-2:    #009273;
  --wb-brand-3:    #1FA37F;
  --wb-brand-tint: rgba(40, 184, 148, .10);
  --wb-brand-line: rgba(40, 184, 148, .28);
  /* ★ 品牌色的【文字版】—— 色块用 --wb-brand，文字必须用这个。
     实测 #28B894 对白底只有 2.51:1（WCAG AA 要求 4.5:1），拿它做正文/小字不合格。
     这值由 .workbuddy/wb_solve_brand_ink.php 按 WCAG 相对亮度公式解出：
     固定品牌色的色相 H=165° / 饱和度 64.3%，只压亮度到 L=31% —— 视觉上仍是同一个绿。 */
  --wb-brand-ink:  #1D846A;
  --wb-brand-ink-hover: #175F4C;

  /* 主视觉光晕 */
  --wb-glow-a: #DAF6FF;
  --wb-glow-b: #E8FFF4;

  /* 功能色 */
  --wb-ok:      #2BA471;
  --wb-warn:    #FA9550;
  --wb-err:     #D54941;
  --wb-info:    #0052D9;

  /* 圆角 */
  --wb-r-xs: 4px;  --wb-r-sm: 6px;  --wb-r-md: 8px;
  --wb-r-lg: 12px; --wb-r-xl: 16px; --wb-r-2xl: 20px;
  --wb-r-pill: 999px;

  /* 阴影 */
  --wb-sh-xs: 0 1px 2px rgba(26, 26, 26, .05);
  --wb-sh-sm: 0 4px 12px rgba(26, 26, 26, .08);
  --wb-sh-md: 0 8px 24px rgba(0, 0, 0, .14);
  --wb-sh-lg: 0 16px 40px rgba(0, 0, 0, .08);
  --wb-sh-inset: inset 0 1px 0 rgba(255, 255, 255, 1);

  /* 字体 */
  --wb-font: "PingFang SC", "Microsoft YaHei", -apple-system,
             BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wb-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;

  /* 布局 */
  --wb-container: 1440px;
  --wb-gutter: 120px;
  --wb-header-h: 65px;

  /* 动效 */
  --wb-ease: cubic-bezier(.4, 0, .2, 1);
  --wb-dur: .3s;
}

/* ---------- 2. 基础重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--wb-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--wb-ink);
  background: var(--wb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--wb-brand-tint); color: var(--wb-brand-2); }

/* 滚动条（细、低调） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(26, 26, 26, .16);
  border-radius: var(--wb-r-pill);
  border: 3px solid var(--wb-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, .28); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. 布局 ---------- */
.wb-container {
  width: 100%;
  max-width: var(--wb-container);
  margin: 0 auto;
  padding: 0 var(--wb-gutter);
}
.wb-section { padding: 96px 0 0; }
.wb-section--tight { padding-top: 64px; }

/* ---------- 4. 排版 ---------- */
.wb-display {
  font-size: 88px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--wb-ink);
}
.wb-h2 {
  font-size: 60px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--wb-ink);
}
.wb-h3 {
  font-size: 28px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--wb-ink);
}
.wb-lead {
  font-size: 17px;
  line-height: 1.75;
  font-weight: 300;
  color: var(--wb-ink-3);
}
.wb-body { font-size: 15px; line-height: 1.8; font-weight: 300; color: var(--wb-ink-4); }
.wb-meta { font-size: 13.5px; line-height: 1.6; font-weight: 300; color: var(--wb-ink-5); }

/* 区块眉标：小胶囊 + 中英对照（复刻站上 "AI 场景 / AI SCENARIOS"） */
.wb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-bg-pill);
  font-size: 13px;
  font-weight: 400;
  color: var(--wb-ink-4);
  white-space: nowrap;
}
.wb-eyebrow b { font-weight: 500; color: var(--wb-ink-2); }
.wb-eyebrow span { color: var(--wb-ink-5); font-size: 12px; letter-spacing: .04em; }

/* ---------- 5. 按钮 ---------- */
.wb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 10px 20px;
  border-radius: var(--wb-r-pill);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  transition: background var(--wb-dur) var(--wb-ease),
              color var(--wb-dur) var(--wb-ease),
              border-color var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease);
}
.wb-btn:active { transform: scale(.975); }

.wb-btn--primary { background: var(--wb-ink); color: #fff; }
.wb-btn--primary:hover { background: #000; }

.wb-btn--brand { background: var(--wb-brand); color: #fff; }
.wb-btn--brand:hover { background: var(--wb-brand-2); }

.wb-btn--ghost { background: transparent; color: var(--wb-ink); box-shadow: inset 0 0 0 1px var(--wb-line); }
.wb-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--wb-ink); }

.wb-btn--onDark { background: #fff; color: var(--wb-ink); }
.wb-btn--onDark:hover { background: rgba(255, 255, 255, .88); }

.wb-btn--lg { height: 48px; padding: 13px 28px; font-size: 15px; }
.wb-btn--sm { height: 32px; padding: 6px 14px; font-size: 13px; }

/* 文字链（复刻 "在线使用 WorkBuddy"） */
.wb-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 400;
  color: var(--wb-brand-ink);
  transition: color var(--wb-dur) var(--wb-ease);
}
.wb-link:hover { color: var(--wb-brand-ink-hover); }
.wb-link svg { transition: transform var(--wb-dur) var(--wb-ease); }
.wb-link:hover svg { transform: translateX(3px); }

/* ---------- 6. 卡片 ---------- */
.wb-card {
  position: relative;
  background: var(--wb-bg);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  overflow: hidden;
  transition: box-shadow var(--wb-dur) var(--wb-ease),
              border-color var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease);
}
.wb-card--hover:hover {
  box-shadow: var(--wb-sh-md);
  border-color: transparent;
  transform: translateY(-3px);
}
.wb-card__body { padding: 28px 30px; }
.wb-card__title { font-size: 19px; font-weight: 500; color: var(--wb-ink); }
.wb-card__desc { margin-top: 10px; font-size: 14px; line-height: 1.75; font-weight: 300; color: var(--wb-ink-4); }

/* ---------- 7. 徽章 / 标签 ---------- */
.wb-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--wb-r-pill);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.wb-badge--brand { background: var(--wb-brand-tint); color: var(--wb-brand-ink); }
.wb-badge--ok    { background: rgba(43, 164, 113, .12); color: #1E7E57; }
.wb-badge--warn  { background: rgba(250, 149, 80, .13); color: #B4611F; }
.wb-badge--err   { background: rgba(213, 73, 65, .11); color: #B0342D; }
.wb-badge--mute  { background: var(--wb-bg-pill); color: var(--wb-ink-4); }
.wb-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 8. 分段控件（复刻站上"研究/文档/设计/开发"） ---------- */
.wb-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-bg-pill);
}
.wb-tab {
  height: 34px;
  padding: 0 18px;
  border-radius: var(--wb-r-pill);
  font-size: 14px;
  font-weight: 400;
  color: var(--wb-ink-4);
  transition: background var(--wb-dur) var(--wb-ease),
              color var(--wb-dur) var(--wb-ease),
              box-shadow var(--wb-dur) var(--wb-ease);
}
.wb-tab:hover { color: var(--wb-ink); }
.wb-tab.is-active {
  background: var(--wb-bg);
  color: var(--wb-ink);
  font-weight: 500;
  box-shadow: var(--wb-sh-xs);
}

/* ---------- 9. 顶栏 ---------- */
.wb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--wb-header-h);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: box-shadow var(--wb-dur) var(--wb-ease),
              background var(--wb-dur) var(--wb-ease);
}
.wb-header.is-stuck { box-shadow: 0 1px 0 var(--wb-line); background: rgba(255, 255, 255, .94); }
.wb-header__inner { display: flex; align-items: center; gap: 32px; height: 100%; }

.wb-logo { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.wb-logo__mark { width: 30px; height: 30px; flex: 0 0 auto; }
.wb-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.wb-logo__text b { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--wb-ink); }
.wb-logo__text span { font-size: 9px; font-weight: 600; letter-spacing: .16em; color: var(--wb-brand-ink); }

.wb-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.wb-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--wb-r-md);
  font-size: 16px;
  font-weight: 400;
  color: var(--wb-ink-4);
  transition: color var(--wb-dur) var(--wb-ease),
              background var(--wb-dur) var(--wb-ease);
}
.wb-nav__item:hover { color: var(--wb-ink); background: rgba(26, 26, 26, .04); }
.wb-nav__item.is-active { color: var(--wb-brand-ink); font-weight: 500; }
.wb-nav__item.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--wb-brand);
}
.wb-nav__caret { width: 9px; height: 9px; opacity: .55; transition: transform var(--wb-dur) var(--wb-ease); }
.wb-nav__item:hover .wb-nav__caret { transform: rotate(180deg); }

.wb-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* 头部站内搜索按钮：与 wb-btn 等高（40px）的方钮，只放图标。
   ★ 触控目标必须 ≥24px（WCAG 2.5.8），40px 的方块远超要求。 */
.wb-header__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--wb-r-pill);
  color: var(--wb-ink-3);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--wb-line);
  transition: color var(--wb-dur) var(--wb-ease),
              box-shadow var(--wb-dur) var(--wb-ease),
              background var(--wb-dur) var(--wb-ease);
}
.wb-header__search:hover {
  color: var(--wb-ink);
  background: var(--wb-bg-soft);
  box-shadow: inset 0 0 0 1px var(--wb-ink-5);
}
.wb-header__search:focus-visible {
  outline: none;
  color: var(--wb-ink);
  box-shadow: inset 0 0 0 1px var(--wb-brand), 0 0 0 3px var(--wb-brand-tint);
}
.wb-header__search svg { width: 17px; height: 17px; }

/* 移动端汉堡 */
.wb-burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: var(--wb-r-md);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.wb-burger i {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--wb-ink);
  border-radius: 2px;
  transition: transform var(--wb-dur) var(--wb-ease), opacity var(--wb-dur) var(--wb-ease);
}
.wb-burger.is-open i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.wb-burger.is-open i:nth-child(2) { opacity: 0; }
.wb-burger.is-open i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 10. 主视觉 ---------- */
.wb-hero { position: relative; padding: 153px 0 0; overflow: hidden; }
.wb-hero__glow {
  position: absolute;
  top: 180px; left: 50%;
  width: 1565px; height: 1219px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  /* 还原线上 hero-glow SVG（#DAF6FF 蓝 → #E8FFF4 薄荷 的 blob + feGaussianBlur(20)）。
     ★ 用像素实测反推得出两点（第一版按"小核心渐变"写，结果整片白、光晕完全看不见）：
       ① 渐变核心必须**大**（半径 45%~62%）、覆盖整个 box —— 原 SVG 的 blob 铺满 1219px 高，
          小核心会让绝大部分采样点落在覆盖范围外；
       ② 颜色要**够实**（核心 alpha .3 起）—— 目标像素 rgb(233,255,244)（偏离白 33）。
     ★ 原站的 blob 是**左强右弱**的（实测 x=180 偏离 33，x=1080 几乎为 0），故四团按左偏排布。 */
  background:
    radial-gradient(58% 56% at 28% 42%, rgba(168, 255, 226, .46) 0%, rgba(180, 253, 232, .28) 44%, rgba(200, 250, 240, 0) 78%),
    radial-gradient(50% 44% at 50% 40%, rgba(186, 236, 255, .34) 0%, rgba(196, 241, 255, .18) 48%, rgba(215, 248, 255, 0) 78%),
    radial-gradient(58% 52% at 40% 62%, rgba(228, 255, 242, .38) 0%, rgba(234, 253, 247, .20) 50%, rgba(240, 254, 250, 0) 80%),
    radial-gradient(66% 54% at 44% 48%, rgba(222, 248, 255, .26) 0%, rgba(232, 251, 255, 0) 74%);
  filter: blur(20px);
}
.wb-hero__inner { position: relative; z-index: 1; text-align: center; }
.wb-hero__desc {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 17px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--wb-ink-4);
}
.wb-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}
.wb-hero__actions-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wb-hero__shot { position: relative; z-index: 1; margin: 78px auto 0; max-width: 992px; }
.wb-hero__fade {
  position: relative;
  z-index: 1;
  height: 238px;
  margin-top: -60px;
  background: linear-gradient(to top, #fff 14%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* ---------- 11. 应用窗口模型 ---------- */
.wb-window {
  background: var(--wb-bg);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  box-shadow: var(--wb-sh-lg);
  overflow: hidden;
  text-align: left;
}
.wb-window__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--wb-line-soft);
  background: var(--wb-bg-soft);
}
.wb-window__dots { display: flex; gap: 6px; }
.wb-window__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.wb-window__dots i:nth-child(1) { background: #FF5F57; }
.wb-window__dots i:nth-child(2) { background: #FEBC2E; }
.wb-window__dots i:nth-child(3) { background: #28C840; }
.wb-window__body { display: flex; min-height: 520px; }

.wb-app-side {
  flex: 0 0 216px;
  padding: 18px 14px;
  border-right: 1px solid var(--wb-line-soft);
  background: var(--wb-bg-soft);
}
.wb-app-side__brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--wb-ink-2);
  padding: 0 6px 14px;
}
.wb-app-side__brand i { width: 15px; height: 15px; border-radius: 4px; background: var(--wb-brand); display: block; }
.wb-app-side__item {
  display: flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 10px;
  border-radius: var(--wb-r-sm);
  font-size: 13px; font-weight: 400; color: var(--wb-ink-4);
}
.wb-app-side__item i { width: 14px; height: 14px; border-radius: 3px; background: currentColor; opacity: .35; display: block; }
.wb-app-side__item.is-on { background: #EDEDF0; color: var(--wb-ink); font-weight: 500; }
.wb-app-side__item.is-on i { opacity: .8; }
.wb-app-side__grp { margin-top: 20px; padding: 0 10px 8px; font-size: 11px; letter-spacing: .06em; color: var(--wb-ink-5); }

.wb-app-main { flex: 1 1 auto; min-width: 0; padding: 26px 28px; }
.wb-app-main__hi { font-size: 21px; font-weight: 500; color: var(--wb-ink); }
.wb-app-main__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wb-app-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-pill);
  font-size: 12.5px; color: var(--wb-ink-4);
  background: var(--wb-bg);
}
.wb-app-box {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--wb-line-soft);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg-soft);
  font-size: 13.5px; color: var(--wb-ink-5);
}

/* ---------- 12. 场景区（图文左右分栏） ---------- */
.wb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  margin-top: 46px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-2xl);
  overflow: hidden;
}
.wb-split__copy { padding: 46px 44px; }
.wb-split__media {
  position: relative;
  min-height: 420px;
  background: linear-gradient(150deg, var(--wb-glow-a) 0%, var(--wb-glow-b) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 34px;
}
.wb-split__media::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 70% 30%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.wb-split__shot { position: relative; z-index: 1; width: 100%; }

/* 骨架条（纯 CSS 造型的界面示意） */
.wb-skel { display: flex; flex-direction: column; gap: 10px; }
.wb-skel__row { display: flex; align-items: center; gap: 10px; }
.wb-skel__bar { height: 10px; border-radius: var(--wb-r-pill); background: rgba(26, 26, 26, .10); }
.wb-skel__bar.is-ink { background: rgba(26, 26, 26, .26); }
.wb-skel__block { height: 74px; border-radius: var(--wb-r-lg); background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); }
.wb-skel__pill { height: 24px; border-radius: var(--wb-r-pill); background: rgba(26, 26, 26, .12); }

/* ---------- 13. 能力网格 ---------- */
.wb-grid { display: grid; gap: 18px; margin-top: 44px; }
.wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wb-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wb-tile {
  padding: 26px 24px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
  transition: box-shadow var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease),
              border-color var(--wb-dur) var(--wb-ease);
}
.wb-tile:hover { box-shadow: var(--wb-sh-sm); transform: translateY(-2px); border-color: transparent; }
.wb-tile__ico {
  width: 38px; height: 38px;
  border-radius: var(--wb-r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--wb-brand-tint);
  color: var(--wb-brand-ink);
}
.wb-tile__t { margin-top: 16px; font-size: 16px; font-weight: 500; color: var(--wb-ink); }
.wb-tile__d { margin-top: 8px; font-size: 13.5px; line-height: 1.75; font-weight: 300; color: var(--wb-ink-4); }

/* ---------- 14. 数据条 ---------- */
.wb-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
}
.wb-stat b { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--wb-ink); }
.wb-stat span { font-size: 13.5px; font-weight: 300; color: var(--wb-ink-5); }
.wb-stat--brand b { color: var(--wb-brand-ink); }

/* ---------- 15. 定价 ---------- */
.wb-plan {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  background: var(--wb-bg);
  transition: box-shadow var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease);
}
.wb-plan:hover { box-shadow: var(--wb-sh-md); }
.wb-plan.is-hot {
  border-color: var(--wb-brand-line);
  box-shadow: 0 8px 28px rgba(40, 184, 148, .12);
}
.wb-plan__name { font-size: 16px; font-weight: 500; color: var(--wb-ink); }
.wb-plan__price { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; }
.wb-plan__price b { font-size: 38px; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--wb-ink); }
.wb-plan__price span { font-size: 13.5px; color: var(--wb-ink-5); }
.wb-plan__desc { margin-top: 12px; font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--wb-ink-4); min-height: 46px; }
.wb-plan__list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--wb-line-soft); }
.wb-plan__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 2;
  font-weight: 300;
  color: var(--wb-ink-4);
}
.wb-plan__list li::before {
  content: '';
  position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--wb-brand);
}
.wb-plan .wb-btn { margin-top: 24px; width: 100%; }

/* ---------- 16. 页脚 ---------- */
.wb-footer {
  margin-top: 120px;
  padding: 72px 0 56px;
  background: var(--wb-bg-deep);
  color: var(--wb-ink-6);
}
.wb-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.wb-footer .wb-logo__text b { color: #fff; }
.wb-footer__tag { margin-top: 14px; font-size: 13.5px; font-weight: 300; color: var(--wb-ink-6); max-width: 320px; line-height: 1.8; }
.wb-footer__links { display: flex; gap: 72px; flex-wrap: wrap; }
.wb-footer__col h2 { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 14px; }
.wb-footer__col a {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--wb-ink-6);
  /* WCAG 2.5.8 建议触控目标 >= 24px。13.5px 字号下 line-height 要到 1.8 才够，
     用固定 padding 也行但会与 line-height 相乘 → 这里直接给足行高。 */
  line-height: 1.85;
  transition: color var(--wb-dur) var(--wb-ease);
}
.wb-footer__col a:hover { color: #fff; }
.wb-footer__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(191, 191, 191, .6);
}

/* ---------- 17. 通用工具 ---------- */
.wb-center { text-align: center; }
.wb-mt-1 { margin-top: 10px; }  .wb-mt-2 { margin-top: 20px; }
.wb-mt-3 { margin-top: 30px; }  .wb-mt-4 { margin-top: 44px; }
.wb-mt-5 { margin-top: 64px; }  .wb-mt-6 { margin-top: 96px; }
.wb-flex { display: flex; }
.wb-between { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wb-items-center { align-items: center; }
.wb-nowrap { white-space: nowrap; }

/* 入场动效（复刻站上 .reveal 的滚动淡入） */
.wb-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--wb-ease), transform .7s var(--wb-ease); }
.wb-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wb-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 18. 响应式 ---------- */
@media (max-width: 1200px) {
  :root { --wb-gutter: 56px; }
  .wb-display { font-size: 66px; }
  .wb-h2 { font-size: 46px; }
}

@media (max-width: 980px) {
  :root { --wb-gutter: 32px; --wb-header-h: 60px; }
  .wb-display { font-size: 46px; line-height: 1.1; }
  .wb-h2 { font-size: 34px; }
  .wb-h3 { font-size: 22px; }
  .wb-lead { font-size: 15.5px; }
  .wb-hero { padding: 96px 0 0; }
  .wb-hero__glow { top: 120px; width: 1100px; height: 900px; }
  .wb-hero__shot { margin-top: 52px; }
  .wb-hero__fade { height: 150px; margin-top: -30px; }
  .wb-section { padding: 64px 0 0; }
  .wb-split { grid-template-columns: 1fr; }
  .wb-split__copy { padding: 32px 26px; }
  .wb-split__media { min-height: 300px; }
  .wb-grid--3, .wb-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wb-window__body { flex-direction: column; }
  .wb-app-side { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--wb-line-soft); }
  .wb-footer { margin-top: 72px; padding: 52px 0 40px; }
  .wb-footer__links { gap: 40px; }
}

@media (max-width: 760px) {
  .wb-burger { display: flex; }
  .wb-nav {
    position: fixed;
    inset: var(--wb-header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px 24px 20px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--wb-line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease);
  }
  .wb-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .wb-nav__item { height: 42px; padding: 0 12px; font-size: 16px; }
  .wb-nav__item.is-active::after { display: none; }
  .wb-header__actions .wb-btn { display: none; }
  .wb-header__actions .wb-btn--primary { display: inline-flex; }
  /* Logo 英文副标题（CLOUD PLATFORM）在窄屏只占宽度不传递信息，先收掉 */
  .wb-logo__text > span { display: none; }

  .wb-display { font-size: 34px; letter-spacing: -.01em; }
  .wb-h2 { font-size: 27px; }
  .wb-h3 { font-size: 19px; }
  .wb-hero { padding: 68px 0 0; }
  .wb-hero__glow { top: 80px; width: 760px; height: 620px; }
  .wb-hero__desc { margin-top: 16px; font-size: 15px; padding: 0 8px; }
  .wb-hero__actions { flex-direction: column; gap: 14px; margin-top: 26px; }
  .wb-hero__shot { margin-top: 38px; }
  .wb-hero__fade { height: 100px; }
  .wb-split { margin-top: 30px; border-radius: var(--wb-r-xl); }
  .wb-split__copy { padding: 26px 20px; }
  .wb-split__media { min-height: 220px; padding: 20px; }
  .wb-grid--3, .wb-grid--4 { grid-template-columns: 1fr; }
  .wb-tabs { width: 100%; overflow-x: auto; }
  .wb-tab { padding: 0 14px; }
  .wb-stat b { font-size: 32px; }
  .wb-window { border-radius: var(--wb-r-lg); }
  .wb-window__body { min-height: 320px; }
  .wb-app-main { padding: 20px 16px; }
  .wb-footer__top { gap: 32px; }
  .wb-footer__links { gap: 32px; }
  .wb-plan { padding: 24px 20px; }
}
/* ==========================================================================
   官网主题补充组件（在 workbuddy 设计系统之上）
   ========================================================================== */

/* ---------- Logo 用后台上传图片时的尺寸约束 ---------- */
.wb-logo__img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: var(--wb-r-md);
  flex: 0 0 auto;
}

/* ---------- 导航下拉（后台导航管理的二级/三级 + 产品分类） ---------- */
/* 下拉面板用 left:50% + translateX(-50%) 相对本项居中，当面板比导航项宽时
   （如"客户支持" cw=101 而面板 min-width=180）会向两侧各溢出约 20px。
   这是绝对定位居中的正常结果：页面不会产生横向滚动（已实测 documentElement
   scrollWidth == clientWidth），视觉无影响。父级 scrollWidth 会把这个溢出量
   计入（scrollWidth 的定义本就包含溢出内容，加 overflow:hidden 也不变），属预期行为。
   display 用 flex 而非 inline-flex，避免 inline 级元素再叠加一层盒模型不确定性。 */
.wb-nav__item-wrap { position: relative; display: flex; }
.wb-nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  padding: 8px;
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
  border: 1px solid var(--wb-line);
  box-shadow: var(--wb-sh-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease), visibility var(--wb-dur);
}
/* 纯 CSS hover 展开：桌面端可用，触摸端由 JS 控制 */
.wb-nav__item-wrap:hover > .wb-nav__drop,
.wb-nav__item-wrap.is-open > .wb-nav__drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* ★ 宽面板（server-cats 分类三级）默认 display:none，必须显式在 hover/is-open 时改回 grid。
   这条规则两个类名都要绑：
     .wb-nav__item-wrap--cat  = header 里独立的「产品分类」按钮
     .wb-nav__item-wrap       = 后台导航里的「产品」项（现在分类面板由它渲染）
   漏掉后者会导致导航 hover 到底色变了但面板不出来（0×0）。 */
.wb-nav__item-wrap:hover > .wb-nav__drop--wide,
.wb-nav__item-wrap.is-open > .wb-nav__drop--wide,
.wb-nav__item-wrap--cat:hover > .wb-nav__drop--wide,
.wb-nav__item-wrap--cat.is-open > .wb-nav__drop--wide { display: grid; }
.wb-nav__dropitem {
  display: block;
  padding: 8px 12px;
  border-radius: var(--wb-r-sm);
  font-size: 14px;
  color: var(--wb-ink-4);
  white-space: nowrap;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}
.wb-nav__dropitem:hover { background: var(--wb-bg-pill); color: var(--wb-ink); }

/* 产品分类下拉：宽面板，多列 */
.wb-nav__drop--wide {
  display: none;
  /* ★ 分类下拉必须限高：海外物理机有 23 个地区，全展开在 3 列下高达 1122px，
     面板会超出视口被裁掉。改为 4 列 + max-height 内滚动，列宽自适应避免 GPU(1 地区)
     和物理机(23 地区) 占一样宽。 */
  width: min(960px, calc(100vw - 48px));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px;
}
/* 面板出现在顶栏下方，滚动条贴边难看 */
.wb-nav__drop--wide::-webkit-scrollbar { width: 6px; }
.wb-nav__drop--wide::-webkit-scrollbar-thumb { background: var(--wb-line); border-radius: 3px; }
.wb-nav__drop--wide::-webkit-scrollbar-track { background: transparent; }
.wb-nav__cathead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--wb-line-soft);
  font-size: 14px;
  font-weight: 500;
  color: var(--wb-ink);
}
.wb-nav__cathead em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--wb-brand-ink);
  background: var(--wb-brand-tint);
  padding: 1px 7px;
  border-radius: var(--wb-r-pill);
}
.wb-nav__catlist {
  display: grid;
  /* 一列 23 个地区会把面板撑到 1122px；地区名普遍较短，两列并排更紧凑 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 8px;
}
.wb-nav__catlist a {
  padding: 5px 8px;
  border-radius: var(--wb-r-xs);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wb-ink-4);
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}
.wb-nav__catlist a:hover { background: var(--wb-bg-pill); color: var(--wb-ink); }
/* 地区多时面板内滚动，这里给完整列表入口 */
.wb-nav__catall {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--wb-brand-ink);
  border-radius: var(--wb-r-xs);
  transition: background var(--wb-dur) var(--wb-ease);
}
.wb-nav__catall:hover { background: var(--wb-brand-tint); }

/* ---------- 主视觉要点 ---------- */
.wb-hero__points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 22px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--wb-ink-4);
}
.wb-hero__points li { position: relative; padding-left: 18px; }
.wb-hero__points li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wb-brand);
}

/* ---------- 分类卡里的子分类 chip ---------- */
.wb-tile__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.wb-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-bg-pill);
  font-size: 12px;
  font-weight: 400;
  color: var(--wb-ink-4);
}
.wb-tile:hover .wb-chip { background: var(--wb-brand-tint); color: var(--wb-brand-ink-hover); }

/* 分类卡整体是链接，标题下留白 */
a.wb-tile { display: block; text-decoration: none; }

/* ---------- 购买流程步骤 ---------- */
.wb-step {
  padding: 24px 22px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  transition: box-shadow var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease);
}
.wb-step:hover { box-shadow: var(--wb-sh-sm); transform: translateY(-2px); }
.wb-step em {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--wb-brand-ink);
}
.wb-step__t { margin-top: 10px; font-size: 16px; font-weight: 500; color: var(--wb-ink); }
.wb-step__d { margin-top: 6px; font-size: 13.5px; line-height: 1.7; font-weight: 300; color: var(--wb-ink-4); }

/* ---------- 空态 ---------- */
.wb-empty {
  padding: 44px 28px;
  border: 1px dashed var(--wb-line);
  border-radius: var(--wb-r-lg);
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: var(--wb-ink-5);
  line-height: 1.9;
}

/* ---------- 内容页（关于/联系/产品）通用 ---------- */
.wb-page-head {
  padding: 96px 0 8px;
  text-align: center;
}
.wb-page-body { padding-bottom: 96px; }
.wb-prose { max-width: 760px; margin: 0 auto; }
.wb-prose h2 {
  margin: 44px 0 14px;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--wb-ink);
}
.wb-prose h2:first-child { margin-top: 0; }
.wb-prose p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 300;
  color: var(--wb-ink-4);
}
.wb-prose ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.wb-prose li {
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
  color: var(--wb-ink-4);
}

/* ---------- 移动端下拉改为点击展开 ---------- */
@media (max-width: 760px) {
  .wb-nav__drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--wb-line-soft);
    border-radius: 0;
    margin: 4px 0 8px 12px;
    padding: 4px 0 4px 8px;
    display: none;
    min-width: 0;
    width: auto;
  }
  .wb-nav__item-wrap.is-open > .wb-nav__drop { display: block; }
  /* 移动端宽面板同样是单列；类名两个都要绑（导航项 + 独立分类按钮） */
  .wb-nav__drop--wide.is-open,
  .wb-nav__item-wrap.is-open > .wb-nav__drop--wide,
  .wb-nav__item-wrap--cat.is-open > .wb-nav__drop--wide {
    display: block;
    width: auto;
    grid-template-columns: 1fr;
  }
  .wb-hero__points { gap: 14px; font-size: 13px; }
}

/* ---------- 产品页的分类区块 ---------- */
.wb-catblock { padding-bottom: 8px; }

/* ==========================================================================
   20. 首页信任条（数字来自后台真实在售商品，非编造）
   ========================================================================== */
.wb-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--wb-line-soft);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  overflow: hidden;
}
.wb-stats .wb-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 0;
  border-radius: 0;
  background: var(--wb-bg);
}
.wb-stats dt {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}
.wb-stats dt small {
  font-size: 15px;
  font-weight: 400;
  margin-left: 2px;
  color: var(--wb-ink-4);
}
.wb-stats dd {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--wb-ink-5);
}

/* ==========================================================================
   21. 热门机型卡（价格卡变体：顶部徽标 + 机型名 + 地区 + 起价）
   ========================================================================== */
.wb-plan .wb-badge { align-self: flex-start; margin-bottom: 14px; }
.wb-plan__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;               /* 两行占位，卡片等高 */
  line-height: 1.5;
}
.wb-plan__price b small {
  font-size: 17px;
  font-weight: 500;
  margin-right: 1px;
  color: var(--wb-ink-4);
}
.wb-plan .wb-link { margin-top: auto; padding-top: 18px; }

/* ==========================================================================
   22. 响应式补齐（新增组件）
   ========================================================================== */
@media (max-width: 1200px) {
  .wb-stats dt { font-size: 30px; }
}
@media (max-width: 980px) {
  .wb-stats { grid-template-columns: repeat(2, 1fr); }
  .wb-stats dt { font-size: 28px; }
}
@media (max-width: 560px) {
  .wb-stats .wb-stat { padding: 18px 16px; }
  .wb-stats dt { font-size: 24px; }
  .wb-stats dd { font-size: 12px; }
  .wb-plan__name { min-height: 0; }
}

/* ==========================================================================
   无障碍：跳转链接（WCAG 2.4.1 Bypass Blocks）
   ========================================================================== */
.wb-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  padding: 10px 18px;
  border-radius: var(--wb-r-sm);
  background: var(--wb-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: top .18s var(--wb-ease);
}
/* 键盘聚焦时才出现（用 :focus-visible 而不是 :focus，
   避免鼠标点击时也冒出来） */
.wb-skip:focus {
  top: 12px;
}
/* 不支持 :focus-visible 的浏览器（老 Safari）回退到 :focus */
@supports not selector(:focus-visible) {
  .wb-skip:focus { top: 12px; }
}
.wb-skip:focus-visible {
  outline: 2px solid var(--wb-brand);
  outline-offset: 2px;
}

/* main 地标本身不需要样式，但要保证滚动定位时不被固定顶栏遮住 */
.wb-main { display: block; }

/* 正文里的品牌色链接（about.html 的分类列表等）。
   不用内联 style 写死 --wb-brand-2（对比度 2.13:1），统一走这个类用合规的 ink 版。 */
.wb-link-ink {
  color: var(--wb-brand-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wb-brand-line);
  /* 正文里的行内链接：默认只有文字高度（约 20px），低于 WCAG 2.5.8 建议的 24px。
     用内边距补足，但不改变行盒（用负 margin 抵消），列表不会被撑开。 */
  padding: 3px 2px;
  margin: -3px -2px;
  transition: color var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease);
}
.wb-link-ink:hover {
  color: var(--wb-brand-ink-hover);
  border-bottom-color: var(--wb-brand-ink-hover);
}


/* ==========================================================================
   表格（节点页等数据密集场景）
   ========================================================================== */
/* ★ 数据表必须允许横向滚动：窄屏下 5 列必然放不下，
   硬撑会撑破页面布局（实测会出现横向滚动条）。 */
.wb-overflow-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
}
.wb-overflow-x::-webkit-scrollbar { height: 6px; }
.wb-overflow-x::-webkit-scrollbar-thumb { background: var(--wb-line); border-radius: 3px; }
.wb-overflow-x::-webkit-scrollbar-track { background: transparent; }

.wb-table {
  width: 100%;
  min-width: 640px;              /* 窄屏时触发横向滚动而不是压扁列 */
  border-collapse: collapse;
  font-size: 14px;
}
.wb-table thead th {
  position: sticky;
  top: 0;
  padding: 13px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--wb-ink-5);
  background: var(--wb-bg-soft);
  border-bottom: 1px solid var(--wb-line);
  white-space: nowrap;
}
.wb-table tbody th,
.wb-table tbody td {
  padding: 14px 16px;
  text-align: left;
  font-weight: 400;
  color: var(--wb-ink-2);
  border-bottom: 1px solid var(--wb-line-soft);
  vertical-align: middle;
}
.wb-table tbody th { font-weight: 500; color: var(--wb-ink); white-space: nowrap; }
.wb-table tbody tr:last-child th,
.wb-table tbody tr:last-child td { border-bottom: 0; }
.wb-table tbody tr { transition: background var(--wb-dur) var(--wb-ease); }
.wb-table tbody tr:hover { background: var(--wb-bg-soft); }
.wb-table td b { font-weight: 500; color: var(--wb-ink); font-variant-numeric: tabular-nums; }

/* 文字对齐工具类（表头/单元格右对齐数值列时用） */
.wb-table .ta-r,
.ta-r { text-align: right; }

.wb-chip--sm {
  font-size: 11.5px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
}

@media(max-width:640px){
  .wb-table{font-size:13px}
  .wb-table thead th,
  .wb-table tbody th,
  .wb-table tbody td{padding:11px 12px}
}

/* ==========================================================================
   导航三级分类面板容器
   ------------------------------------------------------------------------
   ★ .wb-nav__cat 是容器，.wb-nav__cathead / .wb-nav__catlist 是它的子元素。
     之前只有子元素的样式、容器没写 → 面板里的四个分类会横着挤在一起没有间距。
   ========================================================================== */
.wb-nav__cat { min-width: 0; }

/* 首页活动区的活动卡：比普通 tile 多一点层次（顶部徽标 + 标题） */
.wb-promo .wb-tile__t { min-height: 44px; line-height: 1.5; }
.wb-promo .wb-badge { align-self: flex-start; margin-bottom: 12px; }

/* 内容页里的次级区块（状态页用）：比 wb-section 更轻，不需要大留白 */
.wb-sect {
  padding: 24px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
}

/* ==========================================================================
   站内搜索页（/search.html）
   ------------------------------------------------------------------------
   复用既有令牌与组件：输入框走 wb-btn/--wb-line，结果卡走 wb-tile 的边框圆角，
   徽标走 wb-badge。只有「布局」是本页特有的，颜色一律取自 :root 令牌，
   不引入新的硬编码色值。
   ========================================================================== */
.wb-search {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
}
.wb-search__field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.wb-search__ico {
  position: absolute;
  left: 16px;
  width: 19px;
  height: 19px;
  color: var(--wb-ink-4);
  pointer-events: none;
}
.wb-search__input {
  width: 100%;
  height: 52px;
  padding: 0 46px 0 46px;
  border: 1px solid var(--wb-line-strong);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--wb-ink);
  transition: border-color var(--wb-dur) var(--wb-ease),
              box-shadow var(--wb-dur) var(--wb-ease);
  -webkit-appearance: none;
  appearance: none;
}
.wb-search__input::placeholder { color: var(--wb-ink-4); font-weight: 300; }
.wb-search__input:focus {
  outline: none;
  border-color: var(--wb-brand);
  box-shadow: 0 0 0 3px var(--wb-brand-tint);
}
/* 去掉 WebKit 搜索框自带的清除按钮（我们用自己那个，样式可控） */
.wb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.wb-search__clear {
  position: absolute;
  right: 12px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--wb-r-pill);
  background: var(--wb-bg-pill);
  color: var(--wb-ink-4);
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}
.wb-search__clear:hover { background: var(--wb-line-soft); color: var(--wb-ink); }
.wb-search__clear svg { width: 12px; height: 12px; }

.wb-search__hot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.wb-search__hot-l { font-size: 13.5px; font-weight: 300; color: var(--wb-ink-4); }
.wb-search__hot .wb-chip { cursor: pointer; border: 0; background: var(--wb-bg-pill); transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease); }
.wb-search__hot .wb-chip:hover { background: var(--wb-brand-tint); color: var(--wb-brand-ink); }

.wb-search__status {
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--wb-ink-4);
  min-height: 20px;
}

/* 结果容器：本身不设视觉样式，只保证不撑破网格、空态时不占位 */
.wb-search__result { min-width: 0; }
.wb-search__result:empty { display: none; }

.wb-search__grp + .wb-search__grp { margin-top: 34px; }
.wb-search__grp-t {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 500;
  color: var(--wb-ink-2);
}
.wb-search__grp-t .wb-meta { font-weight: 300; color: var(--wb-ink-4); }

.wb-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wb-search__res {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
  text-decoration: none;
  transition: box-shadow var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease),
              border-color var(--wb-dur) var(--wb-ease);
}
.wb-search__res:hover,
.wb-search__res.is-active {
  border-color: var(--wb-brand-line);
  box-shadow: var(--wb-sh-sm);
  transform: translateY(-1px);
}
.wb-search__res.is-active { border-color: var(--wb-brand); }
.wb-search__res-t {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wb-ink);
  word-break: break-word;
}
.wb-search__res-m {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
/* 结果卡里的次级说明：覆盖 .wb-meta 的 --wb-ink-5（白底 2.58:1 不达 AA） */
.wb-search__res-m .wb-meta { color: var(--wb-ink-4); }
.wb-search__res-d {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wb-ink-4);
}
.wb-search__price {
  margin-left: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}
.wb-search__price em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--wb-ink-4);
}
/* 关键词高亮：品牌色浅底 + 品牌色深字。
   ★ 底色是 10% 品牌色（rgba(40,184,148,.10)），按 alpha 合成后约 (235,248,244)。
     在这个底上 --wb-brand-ink(#1D846A) 只有 4.22:1，不达 AA；
     必须再压一档用 --wb-brand-ink-hover(#175F4C)，实测 6.9:1。
     （与 wb 主题里「10% 品牌色底上的小字」是同一条结论，别再踩。） */
.wb-search__res mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--wb-brand-tint);
  color: var(--wb-brand-ink-hover);
}

.wb-search__tip {
  padding-top: 22px;
  border-top: 1px solid var(--wb-line-soft);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 2;
  color: var(--wb-ink-4);
}
.wb-search__tip kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border: 1px solid var(--wb-line);
  border-bottom-width: 2px;
  border-radius: var(--wb-r-xs);
  background: var(--wb-bg-soft);
  font-family: inherit;
  font-size: 12px;
  text-align: center;
  color: var(--wb-ink-3);
}

@media(max-width:760px){
  .wb-search { flex-direction: column; }
  .wb-search__grid { grid-template-columns: 1fr; }
  .wb-search__price { margin-left: 0; }
}

/* ==========================================================================
   头部在超窄屏的收缩（加了站内搜索按钮后必须配这套，否则 390px 就横向溢出）
   ------------------------------------------------------------------------
   头部在流程内的元素：Logo 图 30 + 公司名 ~70 + 搜索 40 + 主按钮 94 + 汉堡 38 + 间距。
   390px 视口的内容宽度只有 390-64=326，320px 更只有 256。
   分两级收：≤560 先把控件压小，≤480 再收掉公司名（信息在 Logo alt 与页脚里都有）。
   ========================================================================== */
@media(max-width:560px){
  .wb-header__actions { gap: 8px; }
  .wb-header__search { width: 34px; height: 34px; }
  .wb-header__search svg { width: 15px; height: 15px; }
  .wb-header__actions .wb-btn--primary { height: 34px; padding: 6px 14px; font-size: 13px; }
}
/* ≤360px（320 档）才收掉公司名：375 / 390 / 360 都还装得下，
   过早收掉会让头部只剩一个 30px 小图、右侧空一大块。 */
@media(max-width:360px){
  .wb-logo__text { display: none; }
}