/* ==========================================================================
   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（v2 对齐线上 #00C29A） */
  --wb-brand:      #00C29A;
  --wb-brand-2:    #009273;
  --wb-brand-3:    #1BC69B;
  --wb-brand-tint: rgba(0, 194, 154, .10);
  --wb-brand-line: rgba(0, 194, 154, .28);
  /* ★ 品牌色的【文字版】—— 色块用 --wb-brand，文字必须用这个。
     实测 #28B894 对白底只有 2.51:1（WCAG AA 要求 4.5:1），拿它做正文/小字不合格。
     v2 起品牌色换成 #00C29A，其文字版 #009273 对白底也只有 3.9:1，同样不能直接用于小字。
     这里按同色相（H≈163°）压亮度解出 #0E7C63，对白底 5.15:1，视觉仍是同一个绿。 */
  --wb-brand-ink:  #0E7C63;
  --wb-brand-ink-hover: #0A5F4C;
  /* v2 对齐线上新增面：品牌 50/100 阶、浅绿面板、2% 黑遮罩 */
  --wb-brand-50:   #F2FCFA;
  --wb-brand-100:  #DDF0EC;
  --wb-band:       #F3F9F6;
  --wb-overlay-a3: rgba(0, 0, 0, .02);

  /* 主视觉光晕 */
  --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: 64px 0 0; }
.wb-section--tight { padding-top: 44px; }

/* ---------- 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: 22px 24px; }
.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: 104px 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: 16px 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: 26px;
}
.wb-hero__actions-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wb-hero__shot { position: relative; z-index: 1; margin: 48px 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: 32px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-2xl);
  overflow: hidden;
}
.wb-split__copy { padding: 32px 32px; }
.wb-split__media {
  position: relative;
  min-height: 340px;
  background: linear-gradient(150deg, var(--wb-glow-a) 0%, var(--wb-glow-b) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}
.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: 16px; margin-top: 32px; }
.wb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wb-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wb-tile {
  padding: 20px;
  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: 12px; font-size: 16px; font-weight: 500; color: var(--wb-ink); }
.wb-tile__d { margin-top: 6px; 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: 20px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
}
.wb-stat b { font-size: 34px; 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: 24px 22px;
  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: 14px; padding-top: 14px; 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: 72px;
  padding: 48px 0 40px;
  background: var(--wb-bg-deep);
  color: var(--wb-ink-6);
}
.wb-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  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: 22px; }  .wb-mt-4 { margin-top: 32px; }
.wb-mt-5 { margin-top: 44px; }  .wb-mt-6 { margin-top: 64px; }
.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: 72px 0 0; }
  .wb-hero__glow { top: 120px; width: 1100px; height: 900px; }
  .wb-hero__shot { margin-top: 36px; }
  .wb-hero__fade { height: 150px; margin-top: -30px; }
  .wb-section { padding: 48px 0 0; }
  .wb-split { grid-template-columns: 1fr; }
  .wb-split__copy { padding: 24px 20px; }
  .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: 48px; padding: 40px 0 32px; }
  .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: 56px 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: 28px; }
  .wb-hero__fade { height: 100px; }
  .wb-split { margin-top: 30px; border-radius: var(--wb-r-xl); }
  .wb-split__copy { padding: 22px 16px; }
  .wb-split__media { min-height: 180px; padding: 16px; }
  .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: 260px; }
  .wb-app-main { padding: 16px 14px; }
  .wb-footer__top { gap: 32px; }
  .wb-footer__links { gap: 32px; }
  .wb-plan { padding: 20px 16px; }
}
/* ==========================================================================
   官网主题补充组件（在 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; }
}

/* ==========================================================================
   v2 · 严格对齐 workbuddy.cn 线上版（2026-10 实测计算样式）
   --------------------------------------------------------------------------
   线上站点在初版复刻基线之上又迭代过一轮，本次把差异逐项对齐（数据来源：
   线上 index-CdkaHiYv.css / index-CyzhW6th.css 实测）：
     ① 眉标：灰底 → 品牌浅绿底 + 品牌绿字（live tag: bg #f3f9f6 / em #009273）
     ② 区块头：新增 .wb-head —— 左侧（眉标 + 60px 标题），右侧 400px 副文案，
        移动端堆叠（live .wb2-head）
     ③ 浅绿面板：新增 .wb-band —— #f3f9f6 底 + 20px 大圆角 + 80px 内边距，
        卡片用品牌浅绿描边 #ddf0ec（live .wb2-privacy__band/__card）
     ④ 磁贴 hover：去阴影，改品牌浅底 #f2fcfa + 品牌浅绿描边 + 上浮
        （live .wb2-download__tile:hover）
     ⑤ CTA 磁贴：新增 .wb-cta__tile —— 140px 高、16px 圆角、2% 黑底，
        hover 同 ④（live .wb2-download__tile）
     ⑥ 沉底面板：新增 .wb-eco —— #f7f8f9 底 + 上下细线（live .wb2-eco__panel）
   纪律不变：品牌绿做文字一律走 WCAG 解出的 --wb-brand-ink（#0E7C63，5.15:1）；
   眉标里的英文小字用 --wb-ink-4（#646464）不用 --wb-ink-5（#A1A1A1，2.6:1 不达标）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   v2.9 紧凑化（2026-10-25）：整站垂直留白整体收紧约 1/3，区块不再显空。
     区块间距  96 → 64      hero 上边距 153 → 104    hero 大图距 78 → 48
     band 面板 80 → 56      eco 面板 88 → 56         CTA 磁贴 140 → 120
     区块头 gap 40 → 28     分节线距 40 → 28         FAQ 行距 22 → 16
     卡片/磁贴/数据条/定价内距统降一档；页脚 120/72 → 72/48。
     组件尺寸、配色、圆角均未动 —— 只收白，不收信息密度。
     响应式 1200/980/760 三档断点同步按比例收敛。
   -------------------------------------------------------------------------- */
/* ---------- v2.1 眉标：品牌浅绿胶囊（对齐 live tag） ---------- */
.wb-eyebrow { background: var(--wb-band, #F3F9F6); }
.wb-eyebrow b { color: var(--wb-brand-ink); }
.wb-eyebrow span { color: var(--wb-ink-4); }

/* ---------- v2.2 区块头：左眉标+标题 / 右副文案 ---------- */
.wb-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.wb-head__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.wb-head__sub {
  flex: 0 0 400px;
  max-width: 400px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: var(--wb-ink-4);
}
/* 右侧放操作（如"全部产品 →"）时贴底对齐 */
.wb-head > .wb-btn { flex: 0 0 auto; }

/* ---------- v2.3 浅绿面板（对齐 live privacy band） ---------- */
.wb-band {
  position: relative;
  padding: 56px;
  border-radius: var(--wb-r-2xl);
  background: var(--wb-band, #F3F9F6);
  overflow: hidden;
}
.wb-band__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
/* 四卡时（核心优势）自动两列，避免每卡被压扁 */
.wb-band__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wb-band__card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--wb-brand-100, #DDF0EC);
  border-radius: var(--wb-r-2xl);
  background: var(--wb-bg);
}
.wb-band__ico {
  width: 44px;
  height: 44px;
  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-band__ico svg { width: 22px; height: 22px; }
.wb-band__card-t {
  margin: 16px 0 0;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wb-ink);
}
.wb-band__card-d {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--wb-ink-4);
}

/* ---------- v2.4 磁贴 hover：对齐 live download tile ---------- */
.wb-tile:hover {
  box-shadow: none;
  background: var(--wb-brand-50, #F2FCFA);
  border-color: var(--wb-brand-100, #DDF0EC);
  transform: translateY(-2px);
}

/* ---------- v2.5 CTA 磁贴（对齐 live download tile 静态态） ---------- */
.wb-cta__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.wb-cta__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 120px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: var(--wb-r-xl);
  background: var(--wb-overlay-a3, rgba(0, 0, 0, .02));
  text-align: center;
  transition: border-color var(--wb-dur) var(--wb-ease),
              background var(--wb-dur) var(--wb-ease),
              transform var(--wb-dur) var(--wb-ease);
}
.wb-cta__tile:hover {
  border-color: var(--wb-brand-100, #DDF0EC);
  background: var(--wb-brand-50, #F2FCFA);
  transform: translateY(-2px);
}
.wb-cta__tile-ico {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-ink);
}
.wb-cta__tile-ico svg { width: 26px; height: 26px; }
.wb-cta__tile-t {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--wb-ink);
}
.wb-cta__tile-h {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--wb-ink-4);
}

/* ---------- v2.6 沉底面板（对齐 live eco panel） ---------- */
.wb-eco {
  padding: 56px 40px;
  border-top: 1px solid var(--wb-line);
  border-bottom: 1px solid var(--wb-line);
  background: var(--wb-bg-pill);
}

/* ---------- v2.7 响应式 ---------- */
@media (max-width: 1200px) {
  .wb-band { padding: 48px 40px; }
  .wb-band__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-cta__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wb-eco { padding: 48px 28px; }
}
@media (max-width: 980px) {
  .wb-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .wb-head__sub { flex: 1 1 auto; max-width: 100%; }
  .wb-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wb-band { padding: 32px 20px; border-radius: var(--wb-r-xl); }
  .wb-band__grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .wb-band__card { padding: 20px; }
  .wb-band__card-t { margin-top: 12px; font-size: 17px; }
  .wb-eco { padding: 36px 20px; }
  .wb-cta__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .wb-cta__tile { height: 104px; }
}
@media (max-width: 560px) {
  .wb-band__grid,
  .wb-band__grid--4 { grid-template-columns: minmax(0, 1fr); }
  .wb-cta__tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- v2.8 分类单页（category.html 通用模板） ---------- */

/* 面包屑（地区单页）：小号弱化色，当前页加粗不可点 */
.wb-crumb {
  padding: 16px 0 0;
  font-size: 13px;
  color: var(--wb-text-3);
}
.wb-crumb .wb-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wb-crumb a {
  color: var(--wb-text-2);
  text-decoration: none;
}
.wb-crumb a:hover {
  color: var(--wb-brand-ink);
}
.wb-crumb span[aria-current] {
  color: var(--wb-text);
  font-weight: 600;
}

/* 地区分节：机型清单按地区切块，节间用细线分隔（首个分节紧跟区块头，不要线） */
.wb-cat-sec {
  padding-top: 28px;
  border-top: 1px solid var(--wb-line);
}
.wb-head + .wb-cat-sec {
  padding-top: 0;
  border-top: 0;
}

/* FAQ：原生 <details> 折叠，零 JS；chevron 随开合状态旋转 */
.wb-faq {
  max-width: 860px;
}
.wb-faq__item {
  border-bottom: 1px solid var(--wb-line);
}
.wb-faq__item:last-child {
  border-bottom: 0;
}
.wb-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--wb-text);
  cursor: pointer;
  list-style: none;                       /* 去掉 Safari/Chrome 默认三角 */
}
.wb-faq__q::-webkit-details-marker {
  display: none;                          /* 同上，老版本 WebKit */
}
.wb-faq__chev {
  flex: 0 0 auto;
  color: var(--wb-text-3);
  transition: transform .2s var(--wb-ease);
}
.wb-faq__item[open] .wb-faq__chev {
  transform: rotate(180deg);
}
.wb-faq__item[open] .wb-faq__q {
  color: var(--wb-brand-ink);
}
.wb-faq__a {
  padding: 0 2px 16px;
  margin: 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--wb-text-2);
}

/* 分类页响应式：分节间距与 FAQ 内距随断点收敛 */
@media (max-width: 760px) {
  .wb-cat-sec { padding-top: 20px; }
  .wb-faq__q { padding: 14px 2px; font-size: 16px; }
  .wb-faq__a { padding: 0 2px 14px; }
}

/* ==========================================================================
   18. 商品详情 / 配置下单（goods.htm）
   --------------------------------------------------------------------------
   两栏：左主区（头部 + 规格条 + 图廊 + 配置器 + 选项卡），右粘性订单摘要。
   复用第 1~17 节的令牌与 .wb-tile/.wb-badge/.wb-tabs/.wb-card 等组件。
   参考 476014.com/products/myctgs-92 的信息架构（标题→价格→配置项→订单摘要）。
   ========================================================================== */

/* 面包屑：覆盖 .wb-crumb 里未定义的 --wb-text-* 变量 */
.wb-crumb {
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--wb-ink-4);
}
.wb-crumb .wb-container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wb-crumb a { color: var(--wb-ink-3); text-decoration: none; transition: color var(--wb-dur) var(--wb-ease); }
.wb-crumb a:hover { color: var(--wb-brand-ink); }
.wb-crumb .sep { color: var(--wb-ink-6); }
.wb-crumb span[aria-current] { color: var(--wb-ink); font-weight: 600; }

.wb-goods { padding-top: 8px; }
.wb-goods__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
.wb-goods__main { min-width: 0; }

/* 头部 */
.wb-goods__title {
  margin-top: 14px;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -.015em;
  color: var(--wb-ink);
}
.wb-goods__sub {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--wb-ink-3);
}
.wb-goods__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* 关键规格条 */
.wb-goods__specs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 22px;
  padding: 20px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  background: var(--wb-bg-soft);
}
.wb-goods__specs li { display: flex; flex-direction: column; gap: 2px; }
.wb-goods__specs b {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--wb-ink);
}
.wb-goods__specs span { font-size: 12.5px; font-weight: 300; color: var(--wb-ink-4); }

/* 图廊（无真实机房图 → 品牌化占位，不编造假图） */
.wb-goods__gallery {
  position: relative;
  margin-top: 22px;
  padding: 32px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  background:
    radial-gradient(120% 120% at 12% 0%, var(--wb-glow-b) 0%, transparent 52%),
    radial-gradient(120% 120% at 100% 100%, var(--wb-glow-a) 0%, transparent 50%),
    var(--wb-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.wb-goods__gallery svg { width: 200px; height: auto; opacity: .92; }
.wb-goods__gallery .wb-goods__ph {
  position: absolute; left: 20px; bottom: 16px;
  font-size: 12px; color: var(--wb-ink-4); font-weight: 300;
}

/* 配置器 */
.wb-config { margin-top: 28px; }
.wb-config > .wb-h3 { margin-bottom: 4px; }
.wb-config__group { padding: 20px 0; border-top: 1px solid var(--wb-line-soft); }
.wb-config__group:first-of-type { border-top: 0; padding-top: 8px; }
.wb-config__label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--wb-ink);
  margin-bottom: 14px;
}
.wb-config__label em { font-style: normal; color: var(--wb-brand-2); }
.wb-config__label .wb-config__hint { font-size: 12.5px; font-weight: 300; color: var(--wb-ink-5); }
.wb-config__opts { display: flex; flex-wrap: wrap; gap: 10px; }

/* 可选项卡片（radio / checkbox 视觉隐藏，保持可聚焦） */
.wb-opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: 168px;
  padding: 12px 16px;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  background: var(--wb-bg);
  cursor: pointer;
  transition: border-color var(--wb-dur) var(--wb-ease),
              box-shadow var(--wb-dur) var(--wb-ease),
              background var(--wb-dur) var(--wb-ease);
}
.wb-opt:hover { border-color: var(--wb-brand-line); box-shadow: var(--wb-sh-xs); }
.wb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wb-opt:focus-within { box-shadow: 0 0 0 3px var(--wb-brand-tint); }
.wb-opt.is-checked {
  border-color: var(--wb-brand);
  background: var(--wb-brand-tint);
  box-shadow: 0 0 0 1px var(--wb-brand);
}
.wb-opt__main { font-size: 14px; font-weight: 400; color: var(--wb-ink); line-height: 1.4; }
.wb-opt__price { font-size: 12.5px; font-weight: 500; color: var(--wb-brand-ink); white-space: nowrap; }
.wb-opt__price.is-free { color: var(--wb-ink-4); }
.wb-opt.is-checked .wb-opt__check {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--wb-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}

/* 下拉选择（预装系统等） */
.wb-select {
  width: 100%; max-width: 420px;
  height: 44px; padding: 0 14px;
  border: 1px solid var(--wb-line-strong);
  border-radius: var(--wb-r-md);
  background: var(--wb-bg); color: var(--wb-ink);
  font-size: 14px; cursor: pointer;
  transition: border-color var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.wb-select:focus { outline: none; border-color: var(--wb-brand); box-shadow: 0 0 0 3px var(--wb-brand-tint); }

/* 选项卡内容 */
.wb-goods__tabs { margin-top: 36px; }
.wb-goods__tabbar { margin-bottom: 18px; }
.wb-tabpanel { display: none; }
.wb-tabpanel.is-active { display: block; }
.wb-tabpanel .wb-prose { max-width: 760px; margin: 0; }
.wb-spec-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.wb-spec-table th, .wb-spec-table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--wb-line-soft);
  font-size: 14px;
}
.wb-spec-table th { font-weight: 500; color: var(--wb-ink-3); width: 200px; background: var(--wb-bg-soft); }
.wb-spec-table td { font-weight: 300; color: var(--wb-ink); }

/* 右侧：粘性订单摘要 */
.wb-goods__aside { position: sticky; top: calc(var(--wb-header-h) + 16px); }
.wb-summary {
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-xl);
  background: var(--wb-bg);
  box-shadow: var(--wb-sh-sm);
  overflow: hidden;
}
.wb-summary__body { padding: 22px; }
.wb-summary__name { font-size: 15px; font-weight: 500; color: var(--wb-ink); }
.wb-summary__price {
  display: flex; align-items: baseline; gap: 4px;
  margin-top: 14px; color: var(--wb-ink);
}
.wb-summary__price small { font-size: 18px; font-weight: 500; }
.wb-summary__price b { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.02em; }
.wb-summary__price span { font-size: 14px; color: var(--wb-ink-5); }
.wb-summary__price .wb-summary__save {
  margin-left: auto; align-self: center;
  font-size: 12px; font-weight: 500; color: var(--wb-ok);
}
.wb-summary__row { margin-top: 18px; }
.wb-summary__row > .wb-summary__k {
  font-size: 13px; color: var(--wb-ink-4); margin-bottom: 8px; display: block;
}
.wb-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: var(--wb-r-pill);
  background: var(--wb-bg-pill);
}
.wb-seg button {
  height: 38px; border-radius: var(--wb-r-pill);
  font-size: 14px; font-weight: 400; color: var(--wb-ink-4);
  background: transparent; cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}
.wb-seg button small { display: block; font-size: 11px; font-weight: 300; color: var(--wb-ink-5); margin-top: 1px; }
.wb-seg button.is-active { background: var(--wb-bg); color: var(--wb-ink); font-weight: 500; box-shadow: var(--wb-sh-xs); }
.wb-seg button.is-active small { color: var(--wb-brand-ink); }
.wb-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--wb-line-strong); border-radius: var(--wb-r-md);
  overflow: hidden;
}
.wb-stepper button {
  width: 40px; height: 42px; font-size: 18px; color: var(--wb-ink-2);
  background: var(--wb-bg); cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease);
}
.wb-stepper button:hover { background: var(--wb-bg-soft); }
.wb-stepper input {
  width: 56px; height: 42px; text-align: center; border: 0;
  border-left: 1px solid var(--wb-line); border-right: 1px solid var(--wb-line);
  font-size: 15px; font-weight: 500; color: var(--wb-ink);
  -moz-appearance: textfield;
}
.wb-stepper input::-webkit-outer-spin-button,
.wb-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wb-summary__list {
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--wb-line);
  display: flex; flex-direction: column; gap: 9px;
}
.wb-summary__list li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.wb-summary__list .k { color: var(--wb-ink-4); font-weight: 300; }
.wb-summary__list .v { color: var(--wb-ink); font-weight: 400; text-align: right; }
.wb-summary__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wb-line);
}
.wb-summary__total span { font-size: 14px; color: var(--wb-ink-3); }
.wb-summary__total b { font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--wb-ink); }
.wb-btn--block { width: 100%; }
.wb-summary__foot { padding: 16px 22px 22px; background: var(--wb-bg-soft); border-top: 1px solid var(--wb-line-soft); }
.wb-summary__note { margin-top: 12px; font-size: 12px; color: var(--wb-ink-5); text-align: center; }

/* 相关机型 */
.wb-goods__related { margin-top: 72px; }
.wb-goods__related .wb-grid { margin-top: 22px; }

/* 响应式：980 折叠为单栏，摘要取消粘性 */
@media (max-width: 980px) {
  .wb-goods__grid { grid-template-columns: 1fr; gap: 28px; }
  .wb-goods__aside { position: static; }
  .wb-goods__title { font-size: 28px; }
  .wb-goods__specs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .wb-goods__specs { grid-template-columns: repeat(2, 1fr); }
  .wb-opt { min-width: calc(50% - 5px); }
  .wb-summary__price b { font-size: 34px; }
}