/* HiBuddy 中船党校 MVP 原型 · 设计系统 v1（ui/design-system.md） */
:root {
  --hb-bg: #F2F4F7;
  --hb-surface: #FFFFFF;
  --hb-primary: #2B3A8E;
  --hb-primary-deep: #1B2565;
  --hb-accent: #A8E05F;
  --hb-accent-soft: #EFF8DC;
  --hb-ink: #171B26;
  --hb-muted: #5C6472;
  --hb-line: #D4DAE4;
  --hb-ok: #2E7D32;
  --hb-warn: #C77700;
  --hb-danger: #B3261E;
  --hb-nav-w: 208px;
  --hb-panel-w: 296px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  background: var(--hb-bg); color: var(--hb-ink);
  font-size: 13.5px; line-height: 1.6;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hb-primary); outline-offset: 2px; }

/* ---------- 布局骨架 ---------- */
.hb-app { display: grid; grid-template-columns: var(--hb-nav-w) 1fr var(--hb-panel-w); height: 100vh; }
.hb-main { overflow-y: auto; padding: 28px 32px 64px; }

/* ---------- 左侧导航 ---------- */
.hb-nav {
  background: var(--hb-primary-deep); color: #DDE2F0;
  display: flex; flex-direction: column; padding: 18px 0;
}
.hb-brand { padding: 0 20px 18px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hb-brand .logo { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.hb-brand .logo em { font-style: normal; color: var(--hb-accent); }
.hb-brand .org { font-size: 11px; color: #9AA3C7; margin-top: 3px; }
.hb-nav-items { flex: 1; padding: 12px 0; }
.hb-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 20px; background: none; border: none; color: #C6CCE6;
  font-size: 13px; text-align: left; border-left: 3px solid transparent;
}
.hb-nav-item svg { width: 17px; height: 17px; flex: none; }
.hb-nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.hb-nav-item.active { background: rgba(168,224,95,.12); color: #fff; border-left-color: var(--hb-accent); }
.hb-nav-item .badge-n { margin-left: auto; background: var(--hb-accent); color: var(--hb-primary-deep); font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 0 6px; line-height: 16px; }
.hb-role-card { margin: 12px 14px 0; padding: 12px; background: rgba(255,255,255,.07); border-radius: 8px; }
.hb-role-card .rk { font-size: 10.5px; color: #9AA3C7; letter-spacing: 2px; margin-bottom: 6px; }
.hb-role-card select {
  width: 100%; background: var(--hb-primary-deep); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
}
.hb-role-card .rd { font-size: 11px; color: #9AA3C7; margin-top: 8px; line-height: 1.5; }

/* ---------- 演示水印 ---------- */
.hb-demo-tag {
  position: fixed; top: 10px; right: calc(var(--hb-panel-w) + 16px); z-index: 50;
  font-size: 11px; color: var(--hb-warn); border: 1px dashed var(--hb-warn);
  padding: 2px 10px; border-radius: 20px; background: #FFFaf0;
}

/* ---------- 中央工作区 ---------- */
.hb-pagehead { margin-bottom: 22px; }
.hb-pagehead .kicker { font-size: 11px; letter-spacing: 3px; color: var(--hb-primary); font-weight: 700; }
.hb-pagehead h1 { font-size: 21px; font-weight: 700; margin-top: 4px; }
.hb-pagehead .sub { color: var(--hb-muted); font-size: 12.5px; margin-top: 4px; }
.hb-stats { display: flex; gap: 28px; margin: 18px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--hb-line); }
.hb-stat .n { font-size: 26px; font-weight: 700; color: var(--hb-primary); font-variant-numeric: tabular-nums; }
.hb-stat .n.lime { color: var(--hb-warn); }
.hb-stat .t { font-size: 12px; color: var(--hb-muted); }

/* ---------- 事件卡片 ---------- */
.hb-event {
  background: var(--hb-surface); border: 1px solid var(--hb-line);
  border-left: 4px solid var(--hb-line); padding: 16px 20px; margin-bottom: 14px;
}
.hb-event.pending { border-left-color: var(--hb-accent); }
.hb-event.warn { border-left-color: var(--hb-warn); }
.hb-event.done { border-left-color: var(--hb-line); opacity: .78; }
.hb-event-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hb-etype {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--hb-primary);
  border: 1px solid var(--hb-primary); padding: 0 6px; border-radius: 3px; line-height: 18px; flex: none;
}
.hb-event-head h3 { font-size: 15px; font-weight: 600; }
.hb-event-head .time { margin-left: auto; font-size: 11.5px; color: var(--hb-muted); flex: none; }
.hb-ai-line {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: #4c6b12; background: var(--hb-accent-soft);
  border: 1px solid #d9e9b8; padding: 3px 10px; border-radius: 20px;
}
.hb-ai-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hb-accent-dark, #7CB342); }
.hb-event-body { margin-top: 12px; }
.hb-event-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hb-kv { display: grid; grid-template-columns: 96px 1fr; row-gap: 4px; font-size: 13px; }
.hb-kv dt { color: var(--hb-muted); }
.hb-topic { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--hb-line); }
.hb-topic:first-child { border-top: none; }
.hb-topic .score { font-weight: 700; color: var(--hb-primary); font-size: 15px; width: 30px; flex: none; font-variant-numeric: tabular-nums; }
.hb-topic .tt { font-weight: 600; }
.hb-topic .meta { font-size: 12px; color: var(--hb-muted); }
.hb-topic .ops { margin-left: auto; flex: none; display: flex; gap: 6px; }
.hb-draft {
  background: var(--hb-accent-soft); border: 1px solid #d9e9b8; border-radius: 6px;
  padding: 12px 14px; font-size: 13px; line-height: 1.7; margin-top: 8px; white-space: pre-wrap;
}
.hb-draft .tag { display: inline-block; font-size: 10.5px; color: #4c6b12; border: 1px solid #b8d48a; border-radius: 3px; padding: 0 5px; margin-bottom: 6px; }
.hb-cite { font-size: 12px; color: var(--hb-muted); margin-top: 8px; }
.hb-checklist li { list-style: none; display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }
.hb-checklist .ck { flex: none; width: 14px; text-align: center; }
.hb-checklist .done { color: var(--hb-ok); }
.hb-checklist .todo { color: var(--hb-warn); }

/* ---------- 按钮 ---------- */
.hb-btn {
  border: 1px solid var(--hb-primary); background: var(--hb-primary); color: #fff;
  font-size: 12.5px; padding: 6px 14px; border-radius: 5px;
}
.hb-btn:hover { background: var(--hb-primary-deep); }
.hb-btn.ghost { background: none; color: var(--hb-primary); }
.hb-btn.ghost:hover { background: #E4E8F5; }
.hb-btn.subtle { background: none; border-color: var(--hb-line); color: var(--hb-muted); }
.hb-btn.subtle:hover { color: var(--hb-ink); border-color: var(--hb-muted); }
.hb-btn.sm { padding: 3px 10px; font-size: 11.5px; }
.hb-btn[disabled] { opacity: .45; cursor: default; }

/* ---------- 轻应用 ---------- */
.hb-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--hb-line); }
.hb-app-card { border: none; border-bottom: 1px solid var(--hb-line); border-right: 1px solid var(--hb-line); background: var(--hb-surface); padding: 18px 20px; text-align: left; }
.hb-app-card:hover { background: #F7F9FD; }
.hb-app-card .top { display: flex; align-items: center; gap: 10px; }
.hb-app-card .top svg { width: 30px; height: 30px; color: var(--hb-primary); flex: none; }
.hb-app-card .ic { width: 30px; height: 30px; color: var(--hb-primary); flex: none; }
.hb-app-card h3 { font-size: 14.5px; font-weight: 600; }
.hb-app-card .ver { font-size: 10.5px; color: var(--hb-muted); margin-left: auto; flex: none; }
.hb-app-card p { font-size: 12px; color: var(--hb-muted); margin-top: 8px; }
.hb-app-card .ke { font-size: 11.5px; margin-top: 10px; display: flex; gap: 6px; align-items: baseline; }
.hb-app-card .ke b { color: var(--hb-primary); font-weight: 600; flex: none; }
.hb-evolve { margin-top: 10px; font-size: 11.5px; color: #4c6b12; background: var(--hb-accent-soft); border: 1px dashed #b8d48a; padding: 6px 9px; border-radius: 5px; }

/* ---------- MCP ---------- */
.hb-mcp { border-top: 1px solid var(--hb-line); }
.hb-mcp-row { display: flex; align-items: center; gap: 16px; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); padding: 16px 20px; }
.hb-mcp-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--hb-ok); } .dot.degraded { background: var(--hb-warn); } .dot.offline { background: var(--hb-muted); }
.hb-mcp-row h3 { font-size: 14.5px; font-weight: 600; }
.hb-mcp-row .badge { font-size: 10.5px; color: var(--hb-primary); border: 1px solid var(--hb-line); border-radius: 3px; padding: 0 6px; margin-left: 8px; }
.hb-mcp-row .ep { font-size: 11.5px; color: var(--hb-muted); margin-top: 2px; font-family: Consolas, monospace; }
.hb-mcp-row .tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.hb-mcp-row .tools span { font-size: 11px; background: #EDF0F7; color: var(--hb-ink); padding: 1px 8px; border-radius: 10px; }
.hb-mcp-row .grow { flex: 1; }
.hb-switch { position: relative; width: 40px; height: 22px; flex: none; }
.hb-switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; margin: 0; }
.hb-switch .tr { position: absolute; inset: 0; background: var(--hb-line); border-radius: 22px; transition: .15s; }
.hb-switch .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .15s; }
.hb-switch input:checked + .tr { background: var(--hb-primary); }
.hb-switch input:checked + .tr::after { left: 21px; }

/* ---------- 管理控制台 ---------- */
.hb-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hb-block { border-top: 2px solid var(--hb-primary); padding-top: 14px; margin-bottom: 28px; }
.hb-block h2 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.hb-block .hint { font-size: 12px; color: var(--hb-muted); margin-bottom: 12px; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hb-table th { text-align: left; color: var(--hb-primary); border-bottom: 2px solid var(--hb-primary); padding: 6px 8px; font-size: 12px; }
.hb-table td { border-bottom: 1px solid var(--hb-line); padding: 7px 8px; }
.hb-table select { border: 1px solid var(--hb-line); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
textarea.hb-in { width: 100%; min-height: 84px; border: 1px solid var(--hb-line); border-radius: 5px; padding: 8px 10px; font-family: inherit; font-size: 12.5px; }
input.hb-in { border: 1px solid var(--hb-line); border-radius: 5px; padding: 6px 10px; font-size: 12.5px; width: 100%; }
.hb-reco { border: 1px solid var(--hb-line); background: var(--hb-surface); padding: 14px 16px; margin-top: 10px; }
.hb-reco .grp { margin-bottom: 10px; }
.hb-reco .grp b { font-size: 12px; color: var(--hb-primary); display: block; margin-bottom: 5px; }
.hb-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; border: 1px solid var(--hb-line); border-radius: 14px; padding: 2px 10px; margin: 0 6px 6px 0; background: #fff; }
.hb-chip.on { border-color: var(--hb-primary); background: #E4E8F5; }
.hb-chip input { accent-color: var(--hb-primary); }

/* ---------- 知识库 / 工具箱 ---------- */
.hb-kb-row { display: flex; gap: 14px; align-items: baseline; background: var(--hb-surface); border-bottom: 1px solid var(--hb-line); padding: 13px 20px; }
.hb-kb-row h3 { font-size: 14px; font-weight: 600; }
.hb-kb-row .tags span { font-size: 11px; color: var(--hb-primary); background: #E4E8F5; border-radius: 10px; padding: 1px 8px; margin-right: 5px; }
.hb-kb-row .meta { font-size: 11.5px; color: var(--hb-muted); margin-top: 3px; }
.hb-health { font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 10px; flex: none; }
.hb-health.ok { color: var(--hb-ok); background: #E6F2E7; }
.hb-health.expiring { color: var(--hb-warn); background: #FBF1DC; }
.hb-health.failed { color: var(--hb-danger); background: #F7E3E1; }

/* ---------- 右侧 AI 面板 ---------- */
.hb-panel { background: var(--hb-surface); border-left: 1px solid var(--hb-line); padding: 20px 18px; overflow-y: auto; }
.hb-panel h2 { font-size: 12px; letter-spacing: 2px; color: var(--hb-muted); font-weight: 700; margin-bottom: 12px; }
.hb-feed li { list-style: none; position: relative; padding: 0 0 16px 20px; border-left: 1px solid var(--hb-line); margin-left: 5px; }
.hb-feed li::before { content: ""; position: absolute; left: -4.5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hb-primary); }
.hb-feed .ft { font-size: 11px; color: var(--hb-muted); }
.hb-feed .fx { font-size: 12.5px; line-height: 1.55; margin-top: 2px; }
.hb-caps { display: flex; gap: 18px; margin: 16px 0 22px; padding: 12px 0; border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); }
.hb-caps .n { font-size: 19px; font-weight: 700; color: var(--hb-primary); }
.hb-caps .t { font-size: 10.5px; color: var(--hb-muted); }
.hb-panel .note { font-size: 11px; color: var(--hb-muted); line-height: 1.6; }

/* ---------- Toast ---------- */
.hb-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--hb-ink); color: #fff; font-size: 13px; padding: 10px 22px;
  border-radius: 6px; z-index: 99; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.hb-toast.show { opacity: .96; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .hb-app { grid-template-columns: var(--hb-nav-w) minmax(0, 1fr); }
  .hb-panel { display: none; }
  .hb-demo-tag { right: 16px; }
}
@media (max-width: 760px) {
  .hb-app { grid-template-columns: 60px 1fr; }
  .hb-nav-item span, .hb-brand .org, .hb-role-card { display: none; }
  .hb-brand .logo { font-size: 13px; }
  .hb-admin-grid { grid-template-columns: 1fr; }
}

/* ================= SaaS 站点体系（落地/注册/开放平台/文档/帮助） ================= */
.hb-site { min-height: 100vh; display: flex; flex-direction: column; }

/* 站点头部 */
.hb-sitehead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242,244,247,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hb-line);
}
.hb-sitehead-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding: 14px 24px; }
.hb-sitelogo { font-size: 19px; font-weight: 700; color: var(--hb-primary); text-decoration: none; letter-spacing: 1px; }
.hb-sitelogo em { font-style: normal; color: var(--hb-accent-dark, #7CB342); }
.hb-sitenav { display: flex; gap: 22px; margin-left: 12px; }
.hb-sitenav a { color: var(--hb-muted); text-decoration: none; font-size: 13.5px; }
.hb-sitenav a:hover, .hb-sitenav a.active { color: var(--hb-primary); font-weight: 600; }
.hb-sitehead .sp { flex: 1; }
.hb-burger { display: none; background: none; border: none; font-size: 20px; color: var(--hb-primary); }

/* 站点页脚 */
.hb-sitefoot { margin-top: auto; background: var(--hb-primary-deep); color: #9AA3C7; }
.hb-sitefoot-in { max-width: 1120px; margin: 0 auto; padding: 36px 24px 28px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.hb-sitefoot h4 { color: #fff; font-size: 13px; margin-bottom: 10px; }
.hb-sitefoot a { display: block; color: #9AA3C7; text-decoration: none; font-size: 12.5px; padding: 3px 0; }
.hb-sitefoot a:hover { color: #fff; }
.hb-sitefoot .neu { color: #C6CCE6; font-size: 12.5px; line-height: 1.7; max-width: 380px; }
.hb-sitefoot .copy { max-width: 1120px; margin: 0 auto; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11.5px; }

/* 落地页区块 */
.hb-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.hb-hero { padding: 84px 0 56px; }
.hb-hero .kick { font-size: 12px; letter-spacing: 4px; color: var(--hb-primary); font-weight: 700; }
.hb-hero h1 { font-size: 46px; line-height: 1.25; font-weight: 700; margin: 16px 0 18px; letter-spacing: 1px; }
.hb-hero h1 .hl { color: var(--hb-primary); border-bottom: 6px solid var(--hb-accent); }
.hb-hero .sub { font-size: 16px; color: var(--hb-muted); max-width: 640px; line-height: 1.8; }
.hb-hero .cta { display: flex; gap: 14px; margin-top: 30px; }
.hb-hero .cta .hb-btn { font-size: 14.5px; padding: 11px 26px; border-radius: 6px; text-decoration: none; display: inline-block; }
.hb-btn.lime { background: var(--hb-accent); border-color: var(--hb-accent); color: var(--hb-primary-deep); font-weight: 700; }
.hb-btn.lime:hover { background: #b8ec72; }

.hb-strip { border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); padding: 22px 0; }
.hb-strip-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hb-egen { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--hb-muted); }
.hb-egen b { color: var(--hb-ink); }
.hb-egen .arr { color: var(--hb-line); font-size: 18px; }
.hb-egen .now b { color: var(--hb-primary); font-size: 15px; }
.hb-egen .now { background: var(--hb-accent-soft); border: 1px solid #d9e9b8; padding: 6px 14px; border-radius: 20px; }

.hb-sec { padding: 64px 0; }
.hb-sec .kick { font-size: 11px; letter-spacing: 3px; color: var(--hb-primary); font-weight: 700; }
.hb-sec h2 { font-size: 26px; margin: 10px 0 8px; }
.hb-sec .lead { color: var(--hb-muted); max-width: 620px; margin-bottom: 34px; }

.hb-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid var(--hb-primary); }
.hb-feat { padding: 26px 28px 26px 0; border-bottom: 1px solid var(--hb-line); }
.hb-feat:nth-child(odd) { border-right: 1px solid var(--hb-line); padding-right: 28px; }
.hb-feat:nth-child(even) { padding-left: 28px; }
.hb-feat h3 { font-size: 16px; margin-bottom: 8px; }
.hb-feat h3 .no { color: var(--hb-accent-dark, #7CB342); font-size: 13px; margin-right: 8px; font-weight: 700; }
.hb-feat p { color: var(--hb-muted); font-size: 13.5px; }

/* 中立性横幅 */
.hb-neutral { background: var(--hb-primary-deep); color: #DDE2F0; }
.hb-neutral h2 { color: #fff; }
.hb-neutral .lead { color: #9AA3C7; }
.hb-neutral-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 30px; }
.hb-neutral-grid div { border-top: 2px solid var(--hb-accent); padding-top: 14px; }
.hb-neutral-grid b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 6px; }
.hb-neutral-grid span { font-size: 12.5px; color: #9AA3C7; line-height: 1.6; }

/* 案例 */
.hb-case { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.hb-case blockquote { border-left: 3px solid var(--hb-primary); padding-left: 18px; color: var(--hb-ink); font-size: 15px; line-height: 1.9; }
.hb-case .nums { display: flex; gap: 36px; margin-top: 28px; }
.hb-case .nums .n { font-size: 30px; font-weight: 700; color: var(--hb-primary); font-variant-numeric: tabular-nums; }
.hb-case .nums .t { font-size: 12px; color: var(--hb-muted); }
.hb-case .panel { background: var(--hb-surface); border: 1px solid var(--hb-line); border-left: 4px solid var(--hb-accent); padding: 22px 24px; }
.hb-case .panel h4 { font-size: 14px; margin-bottom: 10px; }
.hb-case .panel li { font-size: 13px; color: var(--hb-muted); padding: 4px 0 4px 16px; position: relative; list-style: none; }
.hb-case .panel li::before { content: "·"; position: absolute; left: 2px; color: var(--hb-primary); font-weight: 700; }

/* CTA 尾段 */
.hb-endcta { text-align: center; padding: 72px 0; }
.hb-endcta h2 { font-size: 28px; margin-bottom: 12px; }
.hb-endcta p { color: var(--hb-muted); margin-bottom: 26px; }

/* 注册页 */
.hb-signup { max-width: 520px; margin: 0 auto; padding: 64px 24px 80px; }
.hb-signup h1 { font-size: 26px; margin-bottom: 6px; }
.hb-signup .sub { color: var(--hb-muted); font-size: 13.5px; margin-bottom: 28px; }
.hb-field { margin-bottom: 18px; }
.hb-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hb-field .req { color: var(--hb-danger); }
.hb-field input, .hb-field select {
  width: 100%; border: 1px solid var(--hb-line); border-radius: 6px;
  padding: 10px 12px; font-size: 13.5px; font-family: inherit; background: #fff;
}
.hb-field input:focus, .hb-field select:focus { border-color: var(--hb-primary); outline: none; }
.hb-field .err { display: none; color: var(--hb-danger); font-size: 12px; margin-top: 5px; }
.hb-field.invalid input { border-color: var(--hb-danger); }
.hb-field.invalid .err { display: block; }
.hb-field .tip { font-size: 12px; color: var(--hb-muted); margin-top: 5px; }
.hb-agree { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--hb-muted); margin: 20px 0; }
.hb-signup .hb-btn { width: 100%; padding: 12px; font-size: 14.5px; border-radius: 6px; }
.hb-signup-done { text-align: center; padding: 40px 0; display: none; }
.hb-signup-done .ok { font-size: 44px; color: var(--hb-ok); }

/* 开放平台 / 文档 / 帮助 共用 */
.hb-doclay { max-width: 1120px; margin: 0 auto; padding: 44px 24px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 44px; }
.hb-docside { border-right: 1px solid var(--hb-line); }
.hb-docside a { display: block; padding: 7px 0; color: var(--hb-muted); text-decoration: none; font-size: 13px; border-left: 2px solid transparent; padding-left: 12px; }
.hb-docside a.active, .hb-docside a:hover { color: var(--hb-primary); border-left-color: var(--hb-accent); font-weight: 600; }
.hb-docmain h1 { font-size: 24px; margin-bottom: 8px; }
.hb-docmain h2 { font-size: 17px; margin: 30px 0 10px; padding-top: 10px; border-top: 1px solid var(--hb-line); }
.hb-docmain p, .hb-docmain li { font-size: 13.5px; color: var(--hb-ink); line-height: 1.8; }
.hb-docmain ul, .hb-docmain ol { padding-left: 20px; }
.hb-docmain code { background: #EDF0F7; padding: 1px 6px; border-radius: 3px; font-size: 12px; font-family: Consolas, monospace; }
.hb-docmain pre { background: var(--hb-primary-deep); color: #DDE2F0; padding: 16px 18px; border-radius: 6px; font-size: 12px; line-height: 1.7; overflow-x: auto; margin: 12px 0; }
.hb-docmain pre code { background: none; color: inherit; padding: 0; }
.hb-docmain table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 12px 0; }
.hb-docmain th { text-align: left; color: var(--hb-primary); border-bottom: 2px solid var(--hb-primary); padding: 6px 8px; }
.hb-docmain td { border-bottom: 1px solid var(--hb-line); padding: 7px 8px; }
.hb-lead { color: var(--hb-muted); font-size: 14px; margin-bottom: 20px; }

/* FAQ */
.hb-faq { border-top: 2px solid var(--hb-primary); }
.hb-faq-item { border-bottom: 1px solid var(--hb-line); }
.hb-faq-q { width: 100%; background: none; border: none; text-align: left; padding: 16px 4px; font-size: 14.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.hb-faq-q .pm { color: var(--hb-primary); font-size: 18px; font-weight: 400; }
.hb-faq-a { display: none; padding: 0 4px 18px; color: var(--hb-muted); font-size: 13.5px; line-height: 1.8; }
.hb-faq-item.open .hb-faq-a { display: block; }
.hb-faq-item.open .pm { transform: rotate(45deg); }

/* 开放平台卡片行 */
.hb-open-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--hb-primary); margin: 20px 0 34px; }
.hb-open-item { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--hb-line); border-right: 1px solid var(--hb-line); }
.hb-open-item:nth-child(3n) { border-right: none; }
.hb-open-item h3 { font-size: 15px; margin-bottom: 8px; }
.hb-open-item p { font-size: 12.5px; color: var(--hb-muted); }
.hb-open-item a { font-size: 12.5px; color: var(--hb-primary); }

@media (max-width: 900px) {
  .hb-feats, .hb-case, .hb-doclay { grid-template-columns: 1fr; }
  .hb-feat:nth-child(odd) { border-right: none; padding-right: 0; }
  .hb-feat:nth-child(even) { padding-left: 0; }
  .hb-neutral-grid { grid-template-columns: repeat(2, 1fr); }
  .hb-open-grid { grid-template-columns: 1fr; }
  .hb-open-item { border-right: none; }
  .hb-sitefoot-in { grid-template-columns: 1fr 1fr; }
  .hb-sitenav { display: none; }
  .hb-burger { display: block; }
  .hb-sitenav.open { display: flex; position: absolute; top: 55px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 14px 24px; border-bottom: 1px solid var(--hb-line); }
}

/* ================= 落地页 v2：科技感 Hero / 成长飞轮 / 场景页签 ================= */
/* Hero：深靛渐变 + 粒子画布 */
.hb-hero {
  position: relative; padding: 0; overflow: hidden;
  background: linear-gradient(135deg, #1B2565 0%, #2B3A8E 55%, #232f74 100%);
  color: #fff;
}
.hb-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-hero-in { position: relative; z-index: 2; padding: 96px 24px 64px; }
.hb-hero .kick { color: var(--hb-accent); }
.hb-hero h1 { color: #fff; font-size: 48px; }
.hb-hero h1 .hl { color: #fff; border-bottom-color: var(--hb-accent); }
.hb-hero .sub { color: #C6CCE6; }
.hb-btn.ghostlight {
  background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff;
  font-size: 14.5px; padding: 11px 26px; border-radius: 6px; text-decoration: none; display: inline-block;
}
.hb-btn.ghostlight:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.hb-hero-strip {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #9AA3C7;
}
.hb-hero-strip b { color: #DDE2F0; }
.hb-hero-strip i { font-style: normal; color: rgba(255,255,255,.3); }
.hb-hero-strip .now {
  background: rgba(168,224,95,.14); border: 1px solid rgba(168,224,95,.5);
  color: var(--hb-accent); padding: 5px 14px; border-radius: 20px;
}
.hb-hero-strip .now b { color: var(--hb-accent); }

/* 成长飞轮 */
.hb-fly { background: #fff; border-top: 1px solid var(--hb-line); border-bottom: 1px solid var(--hb-line); }
.hb-flywheel {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
.hb-flywheel .step {
  flex: 1; min-width: 160px; border-top: 3px solid var(--hb-primary);
  padding: 16px 4px 4px;
}
.hb-flywheel .step.accent { border-top-color: var(--hb-accent); background: var(--hb-accent-soft); padding-left: 12px; padding-right: 12px; border-radius: 0 0 6px 6px; }
.hb-flywheel .num {
  font-size: 22px; font-weight: 700; color: var(--hb-accent-dark, #7CB342);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.hb-flywheel .step b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.hb-flywheel .step span { font-size: 12.5px; color: var(--hb-muted); line-height: 1.65; display: block; }
.hb-flywheel .conn { align-self: center; color: var(--hb-line); font-size: 20px; flex: none; }
.hb-flywheel .conn.loop { color: var(--hb-accent-dark, #7CB342); font-size: 24px; }

/* 场景页签 */
.hb-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--hb-primary); margin: 26px 0 34px; flex-wrap: wrap; }
.hb-tabs .tab {
  background: none; border: none; padding: 10px 20px; font-size: 14px; color: var(--hb-muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.hb-tabs .tab:hover { color: var(--hb-ink); }
.hb-tabs .tab.active { color: var(--hb-primary); font-weight: 700; border-bottom-color: var(--hb-accent); }
.hb-casepanel .case-desc { color: var(--hb-muted); font-size: 14px; line-height: 1.8; margin: 10px 0 4px; max-width: 480px; }
.hb-casepanel h3 { font-size: 17px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .hb-hero-in { padding: 64px 24px 44px; }
  .hb-hero h1 { font-size: 32px; }
  .hb-flywheel .conn { display: none; }
  .hb-flywheel .step { min-width: 45%; }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .hb-particles { display: none; }
}

/* ================= 原型 v3：悬停交互 / MCP 快捷导航 / 市场卡片 / 知识库分层 / 自动续期 / 手机端 ================= */

/* ---------- 悬停交互（全局过渡与底色反馈） ---------- */
.hb-event { transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: default; }
.hb-event:hover { background: #FAFBFF; border-color: #B9C2E0; box-shadow: 0 3px 14px rgba(27,37,101,.07); }
.hb-event:hover .hb-event-head h3 { color: var(--hb-primary); }
.hb-topic { transition: background .12s ease; border-radius: 4px; }
.hb-topic:hover { background: #F4F7FD; }
.hb-kb-row, .hb-mcp-row { transition: background .13s ease; }
.hb-kb-row:hover, .hb-mcp-row:hover { background: #F7F9FD; }
.hb-table tbody tr { transition: background .12s ease; }
.hb-table tbody tr:hover td { background: #F7F9FD; }
.hb-feed li .fx { transition: color .12s ease; }
.hb-feed li:hover .fx { color: var(--hb-primary); }
.hb-chip { transition: border-color .12s ease, background .12s ease; cursor: pointer; }
.hb-chip:hover { border-color: var(--hb-primary); }
.hb-faq-q { transition: background .12s ease; border-radius: 4px; }
.hb-faq-q:hover { background: #F4F7FD; }
.hb-feat, .hb-open-item { transition: background .15s ease; }
.hb-feat:hover, .hb-open-item:hover { background: #FAFBFF; }
.hb-app-card { transition: background .13s ease, box-shadow .13s ease; }
.hb-app-card:hover { box-shadow: inset 0 0 0 1px #B9C2E0; }
.hb-btn { transition: background .13s ease, border-color .13s ease, color .13s ease; }
.hb-btn svg { width: 13px; height: 13px; flex: none; vertical-align: -2px; }
.hb-docmain a, .hb-sitefoot a { transition: color .12s ease; }
.hb-sitenav a { transition: color .12s ease; }

/* ---------- 左侧导航：分组与 MCP 快捷项 ---------- */
.hb-nav { overflow-y: auto; }
.hb-nav-group {
  padding: 14px 20px 5px; font-size: 10px; letter-spacing: 2px; color: #7E88B3;
  display: flex; align-items: baseline; gap: 6px;
}
.hb-nav-group em { font-style: normal; letter-spacing: 0; font-size: 9.5px; color: #5D6690; }
.hb-nav-item.slim { padding: 7px 20px; font-size: 12px; color: #AEB6D8; }
.hb-nav-item.slim svg { width: 15px; height: 15px; }
.hb-nav-item.slim:hover { background: rgba(255,255,255,.05); color: #fff; }
.hb-nav-item.slim .st { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; flex: none; }
.hb-nav-item.slim .st.online { background: var(--hb-accent); }
.hb-nav-item.slim .st.degraded { background: var(--hb-warn); }
.hb-nav-item.slim .st.offline { background: #5D6690; }
.hb-nav-item.slim.add .plus {
  margin-left: auto; font-size: 14px; font-weight: 400; color: var(--hb-accent);
  opacity: 0; transition: opacity .12s ease; flex: none;
}
.hb-nav-item.slim.add:hover .plus { opacity: 1; }
.hb-nav-item.slim.add:hover { color: #fff; }

/* ---------- 区块小标题（MCP 页 / 知识库页） ---------- */
.hb-sechead {
  margin: 30px 0 12px; font-size: 15px; font-weight: 700; color: var(--hb-ink);
  display: flex; align-items: baseline; gap: 10px;
}
.hb-sechead em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--hb-muted); }
.hb-footnote { margin-top: 14px; font-size: 12px; color: var(--hb-muted); }

/* ---------- MCP 市场卡片 ---------- */
.hb-mkt { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.hb-mkt-card {
  background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px;
  padding: 16px 18px; display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hb-mkt-card:hover { border-color: var(--hb-primary); box-shadow: 0 4px 16px rgba(27,37,101,.09); transform: translateY(-2px); }
.hb-mkt-card .top { display: flex; align-items: center; gap: 9px; }
.hb-mkt-card .top svg { width: 19px; height: 19px; color: var(--hb-primary); flex: none; }
.hb-mkt-card h3 { font-size: 13.5px; font-weight: 600; }
.hb-mkt-card p { font-size: 12px; color: var(--hb-muted); margin: 8px 0 10px; line-height: 1.6; }
.hb-mkt-card .tools { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-mkt-card .tools span { font-size: 11px; background: #EDF0F7; padding: 1px 8px; border-radius: 10px; }
.hb-mkt-card .foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--hb-line); display: flex; align-items: center; gap: 8px; }
.hb-mkt-card .usedby { font-size: 11px; color: var(--hb-muted); flex: 1; }

/* ---------- 自定义 MCP 表单 ---------- */
.hb-custom-mcp { background: var(--hb-surface); border: 1px solid var(--hb-line); border-radius: 8px; padding: 16px 18px; }
.hb-custom-mcp .hint { font-size: 12px; color: var(--hb-muted); margin-bottom: 12px; }
.hb-custom-mcp .form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hb-custom-mcp .form-row .hb-in { flex: 1; min-width: 180px; }

/* ---------- 知识库：分层页签与工具条 ---------- */
.hb-kb-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--hb-primary); margin-bottom: 14px; overflow-x: auto; }
.hb-kb-tabs .tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: none; border: none; padding: 9px 16px; font-size: 13px; color: var(--hb-muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.hb-kb-tabs .tab svg { width: 15px; height: 15px; }
.hb-kb-tabs .tab:hover { color: var(--hb-ink); background: #F4F7FD; }
.hb-kb-tabs .tab.active { color: var(--hb-primary); font-weight: 700; border-bottom-color: var(--hb-accent); }
.hb-kb-tabs .tab .cnt { font-size: 10.5px; background: #EDF0F7; border-radius: 9px; padding: 0 7px; line-height: 16px; color: var(--hb-muted); }
.hb-kb-tabs .tab.active .cnt { background: var(--hb-accent-soft); color: #4c6b12; }
.hb-kb-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.hb-kb-toolbar .hb-btn { display: inline-flex; align-items: center; gap: 5px; }
.hb-kb-toolbar .hb-btn svg { width: 13px; height: 13px; }
.hb-ext { font-size: 11.5px; font-weight: 700; padding: 1px 9px; border-radius: 10px; flex: none; }
.hb-ext.connected { color: var(--hb-ok); background: #E6F2E7; }
.hb-ext.available { color: var(--hb-primary); background: #E4E8F5; }
.hb-kb-row .addrow { border-style: dashed; }

/* ---------- 凭证自动续期 ---------- */
.hb-renew-banner {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  background: var(--hb-accent-soft); border: 1px solid #d9e9b8; border-left: 4px solid var(--hb-accent);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 14px;
}
.hb-renew-banner b { color: #4c6b12; font-size: 13.5px; flex: none; }
.hb-renew-banner span { font-size: 12.5px; color: var(--hb-muted); }
.hb-renew-alert {
  background: #FBF1DC; border: 1px solid #ecd9ae; border-left: 4px solid var(--hb-warn);
  border-radius: 6px; padding: 10px 16px; margin-bottom: 14px;
  font-size: 12.5px; color: #7a5200;
}
.hb-kb-row .meta.renew { color: var(--hb-muted); }
.hb-kb-row .meta.renew.on { color: var(--hb-ok); }

/* ---------- 移动端顶栏（仅演示页） ---------- */
.hb-mobtop { display: none; }

/* ---------- 手机端适配 ---------- */
@media (max-width: 760px) {
  body { font-size: 13px; }
  .hb-mobtop {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 60;
    background: var(--hb-primary-deep); padding: 10px 14px;
  }
  .hb-mobtop .logo { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1px; flex: none; }
  .hb-mobtop .logo em { font-style: normal; color: var(--hb-accent); }
  .hb-mobtop select {
    flex: 1; min-width: 0; background: rgba(255,255,255,.1); color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 6px 8px; font-size: 12.5px;
  }
  .hb-mobtop select option { color: var(--hb-ink); }
  .hb-app { height: calc(100vh - 45px); grid-template-columns: 56px minmax(0, 1fr); }
  .hb-main { padding: 18px 16px 56px; min-width: 0; }
  .hb-brand { display: none; }
  .hb-demo-tag { top: auto; bottom: 12px; right: 12px; font-size: 10px; }
  .hb-nav-group em { display: none; }
  .hb-nav-group { padding: 12px 0 4px; text-align: center; font-size: 0; }
  .hb-nav-group::before { content: "—"; font-size: 10px; color: #5D6690; }
  .hb-nav-item { padding: 11px 0; justify-content: center; border-left: none; }
  .hb-nav-item svg { width: 19px; height: 19px; }
  .hb-nav-item.slim svg { width: 16px; height: 16px; }
  .hb-nav-item .badge-n { position: absolute; margin: -14px 0 0 22px; }
  .hb-nav-item.active { border-left: none; box-shadow: inset 3px 0 0 var(--hb-accent); }
  .hb-pagehead h1 { font-size: 19px; }
  .hb-stats { flex-wrap: wrap; gap: 16px 26px; }
  .hb-stat .n { font-size: 22px; }
  .hb-event { padding: 14px 14px; }
  .hb-event-head .time { margin-left: 0; width: 100%; }
  .hb-event-actions .hb-btn { flex: 1; text-align: center; }
  .hb-kv { grid-template-columns: 78px 1fr; }
  .hb-topic { flex-wrap: wrap; }
  .hb-topic .ops { margin-left: 0; width: 100%; }
  .hb-topic .ops .hb-btn { flex: 1; text-align: center; }
  .hb-mcp-row, .hb-kb-row { padding: 13px 14px; gap: 10px; flex-wrap: wrap; }
  .hb-mcp-row .grow, .hb-kb-row .grow { min-width: 0; }
  .hb-mkt { grid-template-columns: 1fr; }
  .hb-custom-mcp .form-row .hb-in { min-width: 100%; }
  .hb-kb-toolbar .hb-btn { flex: 1 1 44%; justify-content: center; }
  .hb-apps { grid-template-columns: 1fr; }
  .hb-app-card { border-right: none; }
  .hb-admin-grid { grid-template-columns: 1fr; gap: 0; }
  .hb-table { display: block; overflow-x: auto; white-space: nowrap; }
  .hb-reco { padding: 12px; }
  .hb-toast { max-width: calc(100vw - 32px); text-align: center; }
}

/* ---------- 站点页面（落地/注册/文档/帮助）手机端补全 ---------- */
@media (max-width: 900px) {
  .hb-sec { padding: 44px 0; }
  .hb-sec h2 { font-size: 22px; }
  .hb-hero h1 { font-size: 30px; line-height: 1.35; }
  .hb-hero .sub { font-size: 14.5px; }
  .hb-hero .cta { flex-direction: column; align-items: stretch; }
  .hb-hero .cta .hb-btn, .hb-hero .cta .hb-btn.ghostlight { text-align: center; }
  .hb-hero-strip { gap: 10px; font-size: 12px; }
  .hb-strip-in { gap: 10px; }
  .hb-egen { flex-wrap: wrap; gap: 8px; }
  .hb-flywheel { flex-direction: column; }
  .hb-flywheel .step { min-width: 0; border-top-width: 2px; padding: 12px 4px 10px; }
  .hb-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .hb-tabs .tab { white-space: nowrap; padding: 10px 14px; }
  .hb-case .nums { flex-wrap: wrap; gap: 20px 28px; }
  .hb-endcta { padding: 52px 0; }
  .hb-endcta h2 { font-size: 23px; }
  .hb-signup { padding: 40px 20px 60px; }
  .hb-doclay { padding: 28px 20px 60px; gap: 22px; }
  .hb-docside { border-right: none; border-bottom: 1px solid var(--hb-line); padding-bottom: 12px; display: flex; gap: 4px; overflow-x: auto; }
  .hb-docside a { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; padding: 6px 10px; }
  .hb-docside a.active, .hb-docside a:hover { border-bottom-color: var(--hb-accent); }
  .hb-docmain pre { font-size: 11px; }
  .hb-sitefoot-in { grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 20px 22px; }
  .hb-sitehead-in { padding: 12px 16px; gap: 14px; }
}
@media (max-width: 480px) {
  .hb-sitefoot-in { grid-template-columns: 1fr; }
  .hb-neutral-grid { grid-template-columns: 1fr; }
  .hb-hero-in { padding: 52px 18px 36px; }
  .hb-hero h1 { font-size: 26px; }
  .hb-wrap { padding: 0 18px; }
}