/* ===========================================================
   WorkBuddy · GotoAI 专题站 — 品牌主题覆盖
   设计语言对齐 GotoAI 中国技术社区官网（GotoAI_index.html）
   =========================================================== */
:root {
  /* 主色蓝 */
  --wb-primary: #0052D9;
  --wb-primary-light: #266FE8;
  --wb-primary-dark: #003C9D;
  --wb-primary-deep: #001A4D;
  --wb-primary-bg: #E8F0FE;

  /* 强调橙 */
  --wb-accent: #FF6B35;
  --wb-accent-light: #FF8C5A;
  --wb-accent-bg: #FFF3EB;

  /* 点睛霓虹青 */
  --wb-neon: #00FFCC;

  /* 中性 */
  --wb-bg: #F5F7FA;
  --wb-white: #FFFFFF;
  --wb-text-dark: #1A1A2E;
  --wb-text-body: #3D3D5C;
  --wb-text-gray: #6B7280;
  --wb-border: #E5E7EB;
  --wb-border-light: #F0F1F3;

  /* 状态 / 点缀 */
  --wb-success: #10B981;
  --wb-warning: #F59E0B;
  --wb-indigo: #6366f1;
  --wb-purple: #7c3aed;
  --wb-rose: #e11d48;

  /* 字体 */
  --wb-font: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --wb-radius-sm: 8px;
  --wb-radius-md: 12px;
  --wb-radius-lg: 20px;
  --wb-radius-xl: 28px;

  --wb-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --wb-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --wb-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --wb-shadow-blue: 0 8px 24px rgba(0,82,217,0.25);
  --wb-max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding-top: 60px;
  font-family: var(--wb-font);
  color: var(--wb-text-body);
  background: var(--wb-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wb-primary); text-decoration: none; transition: all .2s ease; }
a:hover { color: var(--wb-accent); }

/* ---- VitePress 品牌变量覆盖（保留以备回退） ---- */
:root {
  --vp-c-brand-1: var(--wb-primary);
  --vp-c-brand-2: var(--wb-primary);
  --vp-c-brand-3: var(--wb-primary-light);
  --vp-c-brand-soft: var(--wb-primary-bg);
  --vp-c-text-1: var(--wb-text-dark);
  --vp-c-text-2: var(--wb-text-body);
  --vp-c-text-3: var(--wb-text-gray);
  --vp-c-bg: var(--wb-bg);
  --vp-c-bg-elv: var(--wb-white);
  --vp-c-border: var(--wb-border);
  --vp-font-family-base: var(--wb-font);
}

/* ============================================================
   Hero 区块（对齐官网 .hero：深蓝渐变 + 浮动光球 + 徽标 + 渐变标题）
   ============================================================ */
.wb-hero {
  position: relative; overflow: hidden;
  border-radius: var(--wb-radius-lg);
  background: linear-gradient(135deg, #001A4D 0%, #003C9D 30%, #0052D9 60%, #266FE8 100%);
  color: #fff;
  padding: 72px 56px;
  margin-bottom: 40px;
}
.wb-hero-orb {
  position: absolute; border-radius: 50%; filter: blur(60px);
  opacity: 0.18; animation: wb-float 12s ease-in-out infinite; pointer-events: none;
}
.wb-hero-orb-1 { width: 300px; height: 300px; background: #00FFCC; top: 8%; right: 6%; }
.wb-hero-orb-2 { width: 250px; height: 250px; background: #FF6B35; bottom: 12%; left: 6%; animation-delay: 3s; }
.wb-hero-orb-3 { width: 200px; height: 200px; background: #266FE8; top: 42%; left: 46%; animation-delay: 6s; }
@keyframes wb-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(30px,-20px) scale(1.1); }
  66% { transform: translate(-20px,25px) scale(0.95); }
}
.wb-hero-inner { position: relative; z-index: 1; max-width: 880px; }
.wb-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.10); color: #fff; font-weight: 600; font-size: 14px;
  padding: 8px 20px; border-radius: 999px; margin-bottom: 24px;
  border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px);
}
.wb-hero-badge .dot { width: 8px; height: 8px; background: var(--wb-neon); border-radius: 50%; animation: wb-pulse 2s infinite; box-shadow: 0 0 8px var(--wb-neon); }
@keyframes wb-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }
.wb-hero h1 {
  font-size: 44px; line-height: 1.22; margin: 0 0 18px; color: #fff; font-weight: 800; letter-spacing: -0.5px;
}
.wb-gradient {
  background: linear-gradient(135deg, #00FFCC 0%, #85D8FF 50%, #FFB088 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: wb-grad 6s ease infinite;
}
@keyframes wb-grad { 0%,100%{background-position:0% center} 50%{background-position:100% center} }
.wb-hero p { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.85); margin: 0 0 8px; }
.wb-hero p strong { color: #fff; font-weight: 600; }
.wb-hero-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 0; }
.wb-hero-tag {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--wb-radius-sm); padding: 8px 18px; font-size: 14px;
  color: rgba(255,255,255,0.85); font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
}
.wb-hero-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--wb-neon); }
.wb-hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* 按钮 */
.wb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 32px; border-radius: var(--wb-radius-md); font-weight: 700; font-size: 15px;
  text-decoration: none !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.wb-btn-primary { background: var(--wb-accent); color: #fff; box-shadow: 0 8px 28px rgba(255,107,53,0.4); }
.wb-btn-primary:hover { color: #fff; background: var(--wb-accent-light); transform: translateY(-3px); }
.wb-btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px); }
.wb-btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.16); transform: translateY(-3px); }

/* ============================================================
   章节标题（对齐官网 .section-tag / .section-title / .section-subtitle）
   ============================================================ */
.wb-section-tag {
  display: inline-block; font-size: 14px; font-weight: 600;
  color: var(--wb-primary); background: var(--wb-primary-bg);
  padding: 6px 16px; border-radius: 999px;
}
.wb-section-head { text-align: center; margin: 44px 0 8px; }
.wb-section-head .wb-section-tag { margin-bottom: 16px; }
.wb-section-title { font-size: 24px; margin: 36px 0 8px; color: var(--wb-text-dark); font-weight: 700; }
.wb-section-head .wb-section-title { font-size: 34px; line-height: 1.3; margin: 0 0 12px; }
.wb-section-sub { color: var(--wb-text-gray); margin: 0 0 8px; font-size: 15px; }
.wb-section-head .wb-section-sub { font-size: 17px; margin-bottom: 40px; }

/* ============================================================
   数据条（对齐官网 .stats-section）
   ============================================================ */
.wb-stats {
  background: var(--wb-white); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg);
  padding: 30px 0; margin: 40px 0; display: grid; grid-template-columns: repeat(4, 1fr);
}
.wb-stat { text-align: center; position: relative; padding: 8px 4px; }
.wb-stat::after { content:''; position: absolute; right: -1px; top: 25%; height: 50%; width: 1px; background: var(--wb-border); }
.wb-stat:last-child::after { display: none; }
.wb-stat-num { font-size: 2rem; font-weight: 800; color: var(--wb-primary); line-height: 1.2; }
.wb-stat-num .u { font-size: 0.9rem; color: var(--wb-primary-light); }
.wb-stat-label { font-size: 13px; color: var(--wb-text-gray); margin-top: 4px; }

/* ============================================================
   CTA 段（对齐官网 .cta-section）
   ============================================================ */
.wb-cta {
  background: linear-gradient(135deg, var(--wb-primary-deep) 0%, var(--wb-primary-dark) 40%, var(--wb-primary) 100%);
  padding: 56px 0; border-radius: var(--wb-radius-lg); text-align: center; margin: 44px 0 8px;
  position: relative; overflow: hidden;
}
.wb-cta::before {
  content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse 500px 300px at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 400px 300px at 80% 70%, rgba(255,107,53,0.06) 0%, transparent 50%);
}
.wb-cta > * { position: relative; z-index: 1; }
.wb-cta h2 { font-size: 2.2rem; font-weight: 800; color: #fff; margin: 0 0 12px; }
.wb-cta h2 .hl { background: linear-gradient(135deg, #FF6B35, #FF8C5A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.wb-cta p { color: rgba(255,255,255,0.7); font-size: 16px; margin: 0 0 28px; }
.wb-cta .wb-btn-primary { background: var(--wb-accent); }

/* ============================================================
   卡片网格（对齐官网 .sector-card / .featured-card）
   ============================================================ */
.wb-grid { display: grid; gap: 20px; margin: 28px 0; }
.wb-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wb-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wb-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .wb-grid.cols-3, .wb-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .wb-grid.cols-3, .wb-grid.cols-2, .wb-grid.cols-4 { grid-template-columns: 1fr; } }
.wb-card {
  background: var(--wb-white);
  border: 1px solid var(--wb-border);
  border-top: 4px solid var(--wb-primary);
  border-radius: var(--wb-radius-lg);
  padding: 26px 24px;
  box-shadow: var(--wb-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none !important;
  color: var(--wb-text-body);
  display: block;
}
.wb-card:hover { transform: translateY(-6px); box-shadow: var(--wb-shadow-lg); }
.wb-card h3 { margin: 0 0 8px; color: var(--wb-text-dark); font-size: 18px; }
.wb-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wb-text-gray); }
.wb-card .wb-tag {
  display: inline-block; font-size: 12px; color: var(--wb-primary);
  background: var(--wb-primary-bg); border-radius: 6px; padding: 2px 10px; margin-bottom: 12px;
}
.wb-card .wb-tag.accent { color: var(--wb-accent); background: var(--wb-accent-bg); }
.wb-card.link::after { content: ' →'; color: var(--wb-primary); font-weight: 700; }

/* 场景卡片（工作流场景） */
.wb-scenario {
  border: 1px solid var(--wb-border);
  border-left: 4px solid var(--wb-primary);
  border-radius: var(--wb-radius-md);
  padding: 20px 22px;
  margin: 18px 0;
  background: var(--wb-white);
  box-shadow: var(--wb-shadow-sm);
}
.wb-scenario h3 { margin: 0 0 6px; color: var(--wb-text-dark); font-size: 17px; }
.wb-scenario .wb-meta { font-size: 12px; color: var(--wb-text-gray); margin-bottom: 12px; }
.wb-scenario .wb-row { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 14px; line-height: 1.6; }
.wb-scenario .wb-row .wb-k { color: var(--wb-primary); font-weight: 600; }
.wb-scenario .wb-compliance {
  margin-top: 12px; padding: 10px 12px; border-radius: 8px;
  background: var(--wb-accent-bg); color: #9a3412; font-size: 13px;
}
.wb-scenario .wb-compliance b { color: var(--wb-accent); }

/* 双轮驱动背书条（对齐官网深蓝渐变 + 玻璃质感） */
.wb-endorse {
  background: linear-gradient(135deg, #001A4D, #003C9D);
  color: #fff; border-radius: var(--wb-radius-lg); padding: 36px; margin: 40px 0 8px; position: relative; overflow: hidden;
}
.wb-endorse::before {
  content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 500px 300px at 85% 80%, rgba(255,107,53,0.08) 0%, transparent 50%);
}
.wb-endorse > * { position: relative; z-index: 1; }
.wb-endorse h3 { color: #fff; margin: 0 0 12px; }
.wb-endorse p { color: rgba(255,255,255,0.85); margin: 0; line-height: 1.7; }
.wb-endorse .wb-quote { border-left: 3px solid var(--wb-accent); padding: 12px 20px; background: rgba(255,107,53,0.12); border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0; margin: 20px 0; color: #fff; font-weight: 500; }

/* 标签 pill */
.wb-pill {
  display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px;
  background: var(--wb-primary-bg); color: var(--wb-primary); margin: 2px 4px 2px 0;
}
.wb-pill.accent { background: var(--wb-accent-bg); color: var(--wb-accent); }

/* 扩展指南·文章页（Markdown 渲染） */
.wb-article { line-height: 1.85; }
.wb-article-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--wb-border); }
.wb-article-head h1 { font-size: 26px; margin: 0 0 8px; }
.wb-article h2 { font-size: 20px; margin: 30px 0 12px; padding-left: 12px; border-left: 4px solid var(--wb-primary); }
.wb-article h3 { font-size: 17px; margin: 22px 0 10px; }
.wb-article p { margin: 12px 0; color: var(--wb-text-body); }
.wb-article ul, .wb-article ol { margin: 12px 0; padding-left: 24px; }
.wb-article li { margin: 6px 0; color: var(--wb-text-body); }
.wb-article blockquote { margin: 16px 0; padding: 12px 18px; background: var(--wb-primary-bg); border-left: 4px solid var(--wb-primary); border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0; color: var(--wb-text-body); }
.wb-article blockquote p { margin: 0; }
.wb-article hr { border: none; border-top: 1px solid var(--wb-border); margin: 24px 0; }
.wb-article code { background: var(--wb-bg); border: 1px solid var(--wb-border); border-radius: 6px; padding: 1px 6px; font-size: 13px; color: var(--wb-primary-dark); }
.wb-code { background: #0f172a; color: #e2e8f0; border-radius: var(--wb-radius-md); padding: 16px 18px; overflow-x: auto; margin: 16px 0; }
.wb-code code { background: none; border: none; color: inherit; padding: 0; font-size: 13px; }

/* 侧栏·扩展指南分组 */
.wb-sb-group { margin-top: 14px; }
.wb-sb-gtitle { font-size: 12px; color: var(--wb-text-gray); letter-spacing: .04em; margin: 0 0 6px; padding-left: 4px; }

/* 价格卡（对齐官网卡片圆角 + 强调色角标） */
.wb-price {
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg);
  padding: 26px; text-align: center; background: var(--wb-white); box-shadow: var(--wb-shadow-sm);
  position: relative;
}
.wb-price.featured { border: 2px solid var(--wb-primary); box-shadow: var(--wb-shadow-blue); }
.wb-price .wb-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--wb-accent); color: #fff; font-size: 12px; padding: 3px 14px; border-radius: 999px;
}
.wb-price h3 { margin: 6px 0; color: var(--wb-text-dark); }
.wb-price .wb-amt { font-size: 30px; font-weight: 800; color: var(--wb-primary); margin: 8px 0; }
.wb-price .wb-amt-unit { font-size: 14px; font-weight: 600; color: var(--wb-text-gray); }
.wb-price .wb-price-meta { font-size: 13px; color: var(--wb-text-gray); margin: 2px 0 10px; }
.wb-price .wb-badge.accent { background: var(--wb-primary); }
.wb-price ul { list-style: none; padding: 0; margin: 14px 0; text-align: left; font-size: 14px; color: var(--wb-text-body); }
.wb-price li { padding: 5px 0; border-bottom: 1px dashed var(--wb-border); }

/* 表格 */
.wb-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.wb-table th, .wb-table td { border: 1px solid var(--wb-border); padding: 8px 12px; text-align: left; }
.wb-table th { background: var(--wb-primary-bg); color: var(--wb-primary); }

/* 通用容器（首页营销段用） */
.wb-wrap { max-width: var(--wb-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) {
  .wb-hero { padding: 48px 28px; }
  .wb-hero h1 { font-size: 30px; }
  .wb-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .wb-stat::after { display: none; }
  .wb-cta h2 { font-size: 1.6rem; }
}

/* reveal 动画（默认可见，JS 仅作渐进增强；无 JS / file:// 也不丢失内容） */
.reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* 使用指南 · 步骤列表 */
.wb-steps { list-style: none; counter-reset: step; padding: 0; margin: 16px 0 8px; }
.wb-steps li {
  position: relative; padding: 14px 16px 14px 54px; margin-bottom: 10px;
  background: var(--wb-bg); border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
  font-size: 15px; color: var(--wb-text-body); line-height: 1.6;
}
.wb-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--wb-primary); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.wb-steps li b { color: var(--wb-text-dark); }
.wb-steps li a { margin-left: 6px; }

/* 使用指南 · FAQ */
.wb-faq h3 { margin: 24px 0 0; color: var(--wb-text-dark); font-size: 16px; }
.wb-faq p { margin: 6px 0 0; color: var(--wb-text-body); line-height: 1.7; }

/* 应用场景中心 · 案例视频入口横幅 */
.wb-ventry { display: flex; align-items: center; gap: 24px; background: linear-gradient(120deg, var(--wb-primary-bg), #fff); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); padding: 24px 28px; margin-top: 10px; }
.wb-ventry .wb-ve-info { flex: 1; }
.wb-ventry .wb-ve-info h3 { margin: 10px 0 8px; font-size: 20px; color: var(--wb-text-dark); }
.wb-ventry .wb-ve-info p { margin: 0 0 16px; color: var(--wb-text-body); line-height: 1.7; font-size: 14px; }
.wb-ventry .wb-ve-play { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--wb-primary), var(--wb-neon)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; flex: none; box-shadow: 0 8px 24px rgba(0,82,217,.3); }

/* 案例视频页 · 筛选条 */
.wb-vfilter { display: flex; gap: 10px; margin: 18px 0 22px; flex-wrap: wrap; }
.wb-vfilter button { border: 1px solid var(--wb-border); background: #fff; color: var(--wb-text-body); padding: 8px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; transition: all .2s; }
.wb-vfilter button:hover { border-color: var(--wb-primary); color: var(--wb-primary); }
.wb-vfilter button.active { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }

/* 案例视频页 · 卡片网格 */
.wb-video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.wb-video-card { background: #fff; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.wb-video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,82,217,.12); }
.wb-video-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--wb-primary), var(--wb-deep)); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wb-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.wb-video-play { position: relative; z-index: 2; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--wb-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s; }
.wb-video-thumb:hover .wb-video-play { transform: scale(1.1); }
/* 防下载：隐藏原生下载按钮 + 禁选中/长按菜单/拖拽 */
#wbVvideo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#wbVvideo::-webkit-media-controls-download { display: none !important; }
#wbVvideo::-webkit-media-controls-enclosure { overflow: hidden; }
.wb-video-thumb { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wb-video-meta { padding: 16px 18px; }
.wb-vtag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 6px; margin-bottom: 10px; font-weight: 500; }
.wb-vtag.ind { background: var(--wb-primary-bg); color: var(--wb-primary); }
.wb-vtag.dep { background: #eef2ff; color: #4f46e5; }
.wb-video-meta h3 { font-size: 16px; margin: 0 0 8px; color: var(--wb-text-dark); }
.wb-video-meta p { font-size: 13px; color: var(--wb-text-gray); margin: 0; line-height: 1.6; }

/* 案例视频页 · 播放弹层 */
.wb-vmodal { position: fixed; inset: 0; background: rgba(10,20,40,.88); display: none; align-items: flex-start; justify-content: flex-start; z-index: 999; padding: 24px; overflow-y: auto; }
.wb-vmodal.open { display: flex; }
.wb-vmodal-box { margin: auto; background: #0f1220; border-radius: 16px; max-width: min(880px, calc(100vw - 48px)); min-width: 280px; width: auto; max-height: calc(100vh - 48px); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; position: relative; }
.wb-vmodal-close { flex: 0 0 auto; width: 32px; height: 32px; border: none; border-radius: 8px; background: rgba(255,255,255,.10); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.wb-vmodal-body video { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; background: #000; }
.wb-vmodal-close:hover { background: rgba(255,255,255,.20); }
.wb-vmodal-header { position: absolute; top: 0; left: 0; right: 0; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: #0f1220; z-index: 2; }
.wb-vmodal-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-vmodal-body { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; padding: 56px 0 0; }
.wb-vmodal-body .wb-vplaceholder { color: rgba(255,255,255,.85); padding: 60px 40px; text-align: center; }
.wb-vmodal-body .wb-vplaceholder h3 { color: #fff; margin: 0 0 10px; font-size: 18px; }
.wb-vmodal-body .wb-vplaceholder p { color: rgba(255,255,255,.6); margin: 0; font-size: 14px; }
.wb-vplaceholder { text-align: center; padding: 44px 20px; color: var(--wb-text-gray); }
.wb-vplaceholder .wb-vph-icon { font-size: 44px; color: var(--wb-primary); margin-bottom: 8px; }
.wb-vplaceholder h3 { color: var(--wb-text-dark); margin: 0 0 6px; }
.wb-vnote { margin-top: 22px; font-size: 13px; color: var(--wb-text-gray); line-height: 1.7; background: var(--wb-bg); border: 1px dashed var(--wb-border); border-radius: var(--wb-radius); padding: 14px 16px; }
/* 视频卡：场景标签改为可点击链接 + 查看场景入口 */
.wb-vtag { text-decoration: none; }
.wb-vtag:hover { text-decoration: underline; }
.wb-vscene-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--wb-primary); font-weight: 600; text-decoration: none; }
.wb-vscene-link:hover { text-decoration: underline; }
/* 视频中心 · 多维分面筛选 */
.wb-vf-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:18px 0 8px; }
.wb-vf-row .wb-vfilter { margin:0; }
.wb-vf-select { border:1px solid var(--wb-border); background:#fff; color:var(--wb-text-body); padding:8px 14px; border-radius:999px; font-size:14px; cursor:pointer; max-width:300px; }
.wb-vf-select:disabled { opacity:.5; cursor:not-allowed; }
.wb-vf-search { flex:1; min-width:180px; border:1px solid var(--wb-border); background:#fff; color:var(--wb-text-body); padding:8px 14px; border-radius:999px; font-size:14px; }
.wb-vf-search:focus { outline:none; border-color:var(--wb-primary); }
.wb-vf-clear { border:1px solid var(--wb-border); background:#fff; color:var(--wb-text-gray); padding:8px 16px; border-radius:999px; font-size:14px; cursor:pointer; }
.wb-vf-clear:hover { border-color:var(--wb-primary); color:var(--wb-primary); }
.wb-vf-facet { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:8px 0; }
.wb-vf-label { font-size:13px; color:var(--wb-text-gray); white-space:nowrap; }
.wb-vf-facet .wb-vfilter { margin:0; }
.wb-vf-count { font-size:13px; color:var(--wb-text-gray); margin:12px 0 4px; }
.wb-vcard-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.wb-vchip { font-size:11px; padding:2px 10px; border-radius:999px; background:var(--wb-primary-bg); color:var(--wb-primary); white-space:nowrap; }
.wb-vchip.kind { background:#eef2ff; color:#4f46e5; }
/* 视频中心 · 排序控件 + 置顶徽标 + 发布日期 */
.wb-vf-sort { font-weight:600; color:var(--wb-primary); border-color:var(--wb-primary-bg); background:var(--wb-primary-bg); }
.wb-vf-sort:hover { border-color:var(--wb-primary); }
.wb-vtop { position:absolute; top:10px; left:10px; z-index:2; background:var(--wb-accent); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.5px; box-shadow:0 2px 8px rgba(255,107,53,.35); pointer-events:none; }
.wb-vmeta-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wb-vdate { font-size:12px; color:var(--wb-text-gray); white-space:nowrap; flex-shrink:0; }
/* 应用场景页 · 相关视频回链 */
.wb-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
.wb-rel-video { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--wb-radius); overflow: hidden; border: 1px solid var(--wb-border); text-decoration: none; }
.wb-rel-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-rel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--wb-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.25); z-index: 2; }
.wb-rel-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 8px 10px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,20,50,.78)); }
.wb-rel-video:hover { box-shadow: 0 10px 22px rgba(0,82,217,.18); }
/* 岗位 AI 中台演示卡片 */
.wb-rel-wb { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--wb-radius-md); border: 1px solid var(--wb-border); background: #fff; text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
.wb-rel-wb:hover { box-shadow: 0 8px 22px rgba(0,82,217,.14); border-color: var(--wb-primary); }
.wb-rel-wb-head { display: flex; align-items: center; gap: 8px; }
.wb-rel-wb-ic { color: var(--wb-primary); flex-shrink: 0; }
.wb-rel-wb-title { font-weight: 600; font-size: 15px; color: var(--wb-text-dark); }
.wb-rel-wb-mods { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-rel-wb-tag { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: var(--wb-primary-bg); color: var(--wb-primary); white-space: nowrap; }
.wb-rel-wb-enter { margin-top: auto; font-size: 13px; color: var(--wb-primary); font-weight: 500; }
/* 资源中心 */
.wb-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 18px; }
.wb-res-card { display: flex; gap: 16px; background: #fff; border: 1px solid var(--wb-border); border-radius: var(--wb-radius-lg); padding: 18px; transition: transform .2s, box-shadow .2s; }
.wb-res-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,82,217,.12); }
.wb-res-icon { flex: none; width: 56px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; }
.wb-res-icon.ppt { background: linear-gradient(135deg, #ea5b2f, #c0392b); }
.wb-res-icon.word { background: linear-gradient(135deg, #2b6fd6, #1f4fa3); }
.wb-res-icon.pdf { background: linear-gradient(135deg, #e11d48, #9f1239); }
.wb-res-body { flex: 1; min-width: 0; }
.wb-res-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wb-rtag { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 6px; font-weight: 500; }
.wb-rtag.tech { background: #e6f4ff; color: #0077c2; }
.wb-rtag.product { background: var(--wb-primary-bg); color: var(--wb-primary); }
.wb-rtag.market { background: #fff3eb; color: #e0651a; }
.wb-rfmt { font-size: 12px; color: var(--wb-text-gray); }
.wb-res-body h3 { font-size: 16px; margin: 0 0 6px; color: var(--wb-text-dark); }
.wb-res-body p { font-size: 13px; color: var(--wb-text-gray); margin: 0 0 12px; line-height: 1.6; }
.wb-res-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wb-res-meta { font-size: 12px; color: var(--wb-text-gray); }
.wb-res-soon { font-size: 13px; color: var(--wb-text-gray); background: var(--wb-bg); border: 1px dashed var(--wb-border); padding: 6px 12px; border-radius: 8px; }

/* ── SkillHub ── */
.wb-sk-cat-icon { font-size: 28px; margin-bottom: 8px; }
.wb-sk-count { font-size: 12px; color: var(--wb-primary); font-weight: 600; }
.wb-sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 18px; }
.wb-sk-card { background: #fff; border: 1px solid var(--wb-border); border-radius: 12px; padding: 20px; transition: box-shadow .2s, transform .2s, border-color .2s; }
.wb-sk-card:hover { box-shadow: 0 4px 20px rgba(0,82,217,.12); transform: translateY(-2px); border-color: var(--wb-primary-light); }
.wb-sk-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wb-sk-icon { font-size: 32px; }
.wb-sk-badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--wb-bg-light); color: var(--wb-primary); font-weight: 600; }
.wb-sk-badge.ext { background: #fff3eb; color: #e0651a; }
.wb-sk-card h3 { font-size: 16px; margin: 0 0 6px; color: var(--wb-text-dark); }
.wb-sk-card p { font-size: 13px; color: var(--wb-text-gray); margin: 0 0 10px; line-height: 1.6; }
.wb-sk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wb-sk-tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--wb-bg); color: var(--wb-text-gray); border: 1px solid var(--wb-border); }
.wb-sk-cat-label { margin-top: 8px; }

/* 顶栏（对齐官网 .navbar：固定 + 毛玻璃 blur(20px)） */
.wb-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px;
  background: rgba(255,255,255,0.88); backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--wb-border);
  display: flex; align-items: center; padding: 0 24px; transition: box-shadow .3s ease; }
.wb-topnav.scrolled { box-shadow: 0 2px 20px rgba(0,82,217,0.08); }
.wb-nav-inner { max-width: var(--wb-max); margin: 0 auto; width: 100%; height: 60px;
  display: flex; align-items: center; justify-content: space-between; }
.wb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wb-text-dark); font-weight: 700; font-size: 16px; }
.wb-brand .wb-logo { height: 40px; width: auto; display: block; }
.wb-wordmark { font-size: 16px; font-weight: 700; color: var(--wb-text-dark); white-space: nowrap; }
.wb-nav { display: flex; gap: 6px; align-items: center; }
.wb-nav a { position: relative; color: var(--wb-text-body); text-decoration: none; padding: 8px 14px; border-radius: var(--wb-radius-sm); font-size: 15px; font-weight: 500; transition: color .3s cubic-bezier(.4,0,.2,1); }
/* 鼠标经过菜单项：自中心滑出的渐变下划线（动态效果） */
.wb-nav a::after { content:''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--wb-primary), var(--wb-neon)); transform: scaleX(0); transform-origin: center; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.wb-nav a:hover { color: var(--wb-primary); }
.wb-nav a:hover::after { transform: scaleX(1); }
.wb-nav a.wb-nav-active { color: var(--wb-primary); font-weight: 700; }
.wb-nav a.wb-nav-active::after { transform: scaleX(1); background: var(--wb-primary); }
.wb-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.wb-mobile-toggle svg { width: 24px; height: 24px; color: var(--wb-text-dark); }

/* 首页 Banner（对齐官网 .hero：全宽 · 径向光晕 · 底部渐隐 · 居中 · 与毛玻璃顶栏叠层） */
.wb-home .wb-hero {
  width: 100vw; margin-left: calc(50% - 50vw);
  border-radius: 0; min-height: 88vh;
  display: flex; align-items: center;
  padding: 150px 24px 110px;
}
.wb-home .wb-hero::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 800px 600px at 15% 20%, rgba(255,255,255,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 700px 500px at 85% 80%, rgba(255,107,53,0.10) 0%, transparent 50%),
    radial-gradient(ellipse 500px 400px at 50% 50%, rgba(0,255,204,0.05) 0%, transparent 60%);
}
.wb-home .wb-hero::after {
  content:''; position: absolute; bottom: -1px; left: 0; right: 0; height: 150px; pointer-events: none;
  background: linear-gradient(to top, var(--wb-bg), transparent);
}
.wb-home .wb-hero-inner { margin: 0 auto; text-align: center; }
.wb-home .wb-hero-tags { justify-content: center; }
.wb-home .wb-hero-cta { justify-content: center; }
.wb-home .wb-hero p { margin-left: auto; margin-right: auto; max-width: 760px; }

/* 布局 */
.wb-container { max-width: var(--wb-max); margin: 0 auto; padding: 28px 24px; display: flex; gap: 28px; align-items: flex-start; }
.wb-sidebar { position: sticky; top: 84px; width: 268px; flex: 0 0 268px; max-height: calc(100vh - 110px); overflow-y: auto;
  background: var(--wb-white); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md); padding: 16px; box-shadow: var(--wb-shadow-sm); }
.wb-main { flex: 1 1 auto; min-width: 0; background: var(--wb-white); border: 1px solid var(--wb-border); border-radius: var(--wb-radius-md); padding: 32px 36px; box-shadow: var(--wb-shadow-sm); }
.wb-sb-head { font-weight: 700; color: var(--wb-primary); margin: 14px 4px 8px; font-size: 14px; }
.wb-sb-gtitle { font-size: 13px; color: var(--wb-text-dark); font-weight: 600; padding: 4px; margin-top: 8px; }
.wb-sb-item { display: block; padding: 6px 10px; margin: 2px 0; border-radius: 8px; color: var(--wb-text-body); text-decoration: none; font-size: 13px; }
.wb-sb-item:hover { background: var(--wb-primary-bg); color: var(--wb-primary); }
body { margin: 0; overflow-x: hidden; }
.wb-home { display: block; }
.wb-home .wb-main { background: transparent; border: none; box-shadow: none; padding: 0; }
.wb-home .wb-container { display: block; padding: 0; }

/* 页脚（对齐官网 .footer：深蓝渐变 + 网格底纹 + 平台网格 + 版权/电话） */
.wb-footer { background: linear-gradient(135deg, var(--wb-primary-dark) 0%, var(--wb-primary) 100%);
  color: rgba(255,255,255,0.65); padding: 48px 0 24px; font-size: 14px; position: relative; overflow: hidden; }
.wb-footer::before { content:''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px; }
.wb-footer .container { position: relative; z-index: 1; max-width: var(--wb-max); margin: 0 auto; padding: 0 24px; }
.wb-footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; flex-wrap: wrap; gap: 24px; }
.wb-footer-brand { font-weight: 700; font-size: 18px; color: #fff; }
.wb-footer-brand a { color: #fff; text-decoration: none; }
.wb-footer-brand a:hover { color: rgba(255,255,255,0.85); }
.wb-footer-brand .sub { display: block; font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 400; margin-top: 4px; }
.wb-footer-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
.wb-footer-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
.wb-pf-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--wb-radius-sm); transition: all .15s; }
.wb-pf-item:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.wb-pf-item a { color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none; }
.wb-pf-item:hover a { color: #fff; }
.wb-pf-item .icon { width: 18px; height: 18px; color: rgba(255,255,255,0.4); transition: all .15s; flex-shrink: 0; display: inline-flex; }
.wb-pf-item:hover .icon { color: var(--wb-accent-light); }
.wb-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.wb-footer-copyright { color: rgba(255,255,255,0.4); }
.wb-footer-copyright a { color: rgba(255,255,255,0.4); }
.wb-footer-contact { display: flex; gap: 20px; align-items: center; }
.wb-footer-contact span { color: rgba(255,255,255,0.5); }

/* 响应式 */
@media (max-width: 960px){ .wb-sidebar{ display:none; } .wb-container{ display:block; } .wb-footer-platforms{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px){
  .wb-nav { display: none; }
  .wb-nav.wb-nav-open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0;
    background: var(--wb-white); padding: 12px 24px; gap: 6px; border-bottom: 1px solid var(--wb-border); box-shadow: var(--wb-shadow-md); }
  .wb-mobile-toggle { display: block; }
  .wb-footer-platforms{ grid-template-columns: 1fr; }
  .wb-footer-bottom { flex-direction: column; text-align: center; }
}

/* 双向链接：应用场景中心岗位场景卡 -> SkillHub 岗位 Skill（与 .wb-pos-back 视觉统一） */
.wb-pos-jump{display:inline-block;margin-top:12px;text-decoration:none;background:var(--wb-primary);
  color:#fff;font-weight:700;padding:8px 16px;border-radius:var(--wb-radius-md,8px);font-size:13px;
  transition:.15s;cursor:pointer}
.wb-pos-jump:hover{background:var(--wb-primary-dark)}
.wb-pos-jump::after{content:" \2192";margin-left:2px}