/* ============================================================
   QQ官方机器人云平台 · UI v3「深空蓝」
   设计语言对齐 tz.jujiao.net：
   深海军蓝三阶背景 / 浅蓝强调 / 细边框 / 扁平克制 / 大标题紧排
   ============================================================ */
:root {
  --bg: #0b1020;          /* 页面底 */
  --panel: #111828;       /* 卡片 */
  --panel-2: #161f34;     /* 交替区块 */
  --panel-3: #0f1729;     /* 输入/内嵌 */
  --line: #2b3850;        /* 主边框 */
  --line-soft: #1e2a44;   /* 弱分隔 */
  --ink: #f2f5fb;         /* 标题 */
  --text: #c0cbdc;        /* 正文 */
  --muted: #94a3b8;       /* 次级 */
  --dim: #64748b;         /* 弱化 */
  --accent: #6d9eff;      /* 品牌浅蓝 */
  --accent-hover: #8bb4ff;
  --accent-ink: #08101f;  /* 强调按钮上的深字 */
  --accent-dim: rgba(109, 158, 255, .12);
  --ok: #34d399; --warn: #fbbf24; --danger: #f87171; --cyan: #38bdf8; --rose: #fb7185;
  --r: 8px;               /* 控件圆角 */
  --r-lg: 16px;           /* 卡片圆角 */
  --shadow: 0 18px 48px -20px rgba(0, 0, 0, .55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }
::selection { background: rgba(109, 158, 255, .28); color: var(--ink); }
h1, h2, h3 { color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #263250; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #33436b; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 布局骨架 ================= */
.shell { display: flex; min-height: 100vh; }

/* ---------- 侧边栏 ---------- */
.sidebar {
  width: 228px;
  background: var(--bg);
  border-right: 1px solid var(--line-soft);
  color: var(--muted);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.sidebar .brand .logo-chip {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar .brand .logo-chip svg { width: 22px; height: 22px; }
.sidebar .brand b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.35; letter-spacing: -.2px; }
.sidebar .brand small { display: block; font-size: 11px; color: var(--dim); margin-top: 1px; }
.sidebar nav { flex: 1; padding: 10px 12px; }
.sidebar nav .nav-cap { font-size: 11px; color: #475569; letter-spacing: 2px; padding: 14px 10px 6px; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0;
  color: var(--muted); font-size: 13.5px;
  border-radius: var(--r);
  position: relative;
  transition: background .15s, color .15s;
}
.sidebar nav a .ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-style: normal;
  color: #5a6b8c;
  transition: color .15s;
}
.sidebar nav a:hover { background: #131c31; color: var(--ink); }
.sidebar nav a:hover .ico { color: var(--accent); }
.sidebar nav a.on { background: #182338; color: var(--ink); font-weight: 600; }
.sidebar nav a.on .ico { color: var(--accent); }
.sidebar nav a.on::before {
  content: ""; position: absolute; left: -12px; top: 22%; bottom: 22%;
  width: 2px; border-radius: 2px; background: var(--accent);
}
.sidebar .usercard {
  margin: 10px 12px 14px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.sidebar .usercard .avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar .usercard div { flex: 1; min-width: 0; }
.sidebar .usercard b { display: block; color: var(--ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .usercard small { color: var(--dim); font-size: 11px; }
.sidebar .usercard a { color: var(--dim); font-size: 12px; }
.sidebar .usercard a:hover { color: var(--accent); }

/* ---------- 主区域 ---------- */
.main { flex: 1; padding: 26px 30px 46px; min-width: 0; }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.main > .page-head, .main > .card, .main > .alert, .main > .tabs, .main > .cards, .main > .welcome {
  animation: riseIn .35s ease both;
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.page-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* 欢迎横幅：扁平强调面板 */
.welcome {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--text);
  padding: 22px 26px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.welcome::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent);
}
.welcome::after {
  content: ""; position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(109, 158, 255, .10), transparent);
  pointer-events: none;
}
.welcome h2 { font-size: 19px; margin-bottom: 5px; letter-spacing: -.3px; }
.welcome p { font-size: 13px; color: var(--muted); }
.welcome .w-actions { margin-top: 15px; }
.welcome .w-actions a {
  display: inline-block; padding: 7px 15px; border-radius: var(--r);
  font-size: 13px; margin-right: 9px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  border: 1px solid var(--accent);
}
.welcome .w-actions a:nth-child(n+2) { background: var(--panel-3); color: var(--text); border: 1px solid var(--line); font-weight: 400; }
.welcome .w-actions a:hover { border-color: var(--accent); color: var(--ink); }
.welcome .w-actions a:first-child:hover { color: var(--accent-ink); filter: brightness(1.1); }

/* ================= 卡片 ================= */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.card h2 { font-size: 15px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); letter-spacing: -.2px; }

/* 统计卡 */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
  transition: border-color .18s, transform .18s;
}
.stat:hover { border-color: #3a4d75; transform: translateY(-2px); }
.stat .ico {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  background: var(--accent-dim);
}
.stat .num { font-size: 23px; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.stat .lbl { color: var(--muted); font-size: 12px; margin-top: 1px; }
.g1 .ico { color: var(--accent); background: rgba(109, 158, 255, .12); }
.g2 .ico { color: var(--cyan); background: rgba(56, 189, 248, .12); }
.g3 .ico { color: var(--ok); background: rgba(52, 211, 153, .12); }
.g4 .ico { color: var(--warn); background: rgba(251, 191, 36, .12); }
.g5 .ico { color: var(--rose); background: rgba(251, 113, 133, .12); }

/* ================= 表单 ================= */
label { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 5px; font-weight: 600; }
input[type=text], input[type=password], input[type=number], input[type=url], input[type=date], select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: 13.5px; font-family: inherit; background: var(--panel-3); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.7; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 158, 255, .18);
}
input::placeholder, textarea::placeholder { color: #4b5a78; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.check {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 10px 16px 2px 0;
  font-size: 13px; color: var(--text); cursor: pointer; font-weight: 500;
}
.check:hover { color: var(--ink); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 500; cursor: pointer;
  margin-top: 10px;
  transition: all .15s;
}
.btn:hover { border-color: var(--accent); color: var(--ink); }
.btn-primary {
  background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-danger { color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 4px 11px; font-size: 12px; margin: 0; border-radius: 7px; }
.btn-ghost { background: transparent; }

/* ================= 表格 ================= */
.card table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.card table th {
  text-align: left; padding: 9px 12px;
  color: var(--muted); font-weight: 600; font-size: 12px;
  background: var(--panel-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.card table th:first-child { border-radius: var(--r) 0 0 var(--r); }
.card table th:last-child { border-radius: 0 var(--r) var(--r) 0; }
.card table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; word-break: break-all; }
.card table tr:last-child td { border-bottom: none; }
.card table tbody tr { transition: background .12s; }
.card table tbody tr:hover td { background: #131c31; }

/* ================= 徽标 ================= */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid transparent;
}
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag-ok { background: rgba(52, 211, 153, .10); color: var(--ok); border-color: rgba(52, 211, 153, .25); }
.tag-off { background: rgba(248, 113, 113, .10); color: var(--danger); border-color: rgba(248, 113, 113, .25); }
.tag-dim { background: rgba(148, 163, 184, .10); color: var(--muted); border-color: rgba(148, 163, 184, .25); }
.tag-warn { background: rgba(251, 191, 36, .10); color: var(--warn); border-color: rgba(251, 191, 36, .25); }

/* ================= 提示条 ================= */
.alert { padding: 11px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; border: 1px solid; }
.alert-ok { background: rgba(52, 211, 153, .08); color: var(--ok); border-color: rgba(52, 211, 153, .28); }
.alert-err { background: rgba(248, 113, 113, .08); color: var(--danger); border-color: rgba(248, 113, 113, .28); }
.alert-info { background: rgba(109, 158, 255, .08); color: var(--accent); border-color: rgba(109, 158, 255, .28); }

.muted { color: var(--muted); }
.mono {
  font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
  font-size: 12.5px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  padding: 2px 7px; border-radius: 6px;
  word-break: break-all;
  color: #9fc0f5;
}
.pager { margin-top: 12px; color: var(--dim); font-size: 12px; }

/* 机器人回复 = 聊天气泡 */
.reply-box {
  position: relative;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px;
  padding: 12px 15px 12px 54px;
  margin-top: 10px;
  white-space: pre-wrap;
  font-size: 13.5px;
  color: var(--text);
}
.reply-box::before {
  content: "";
  position: absolute; left: 10px; top: 10px;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(109, 158, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2.5v2' stroke='%236d9eff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='2.5' r='1.2' fill='%236d9eff'/%3E%3Crect x='4.75' y='5.5' width='14.5' height='12' rx='3.4' stroke='%236d9eff' stroke-width='1.8'/%3E%3Cpath d='M2.2 10.4v3.2M21.8 10.4v3.2' stroke='%236d9eff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9.4' cy='10.8' r='1.35' fill='%236d9eff'/%3E%3Ccircle cx='14.6' cy='10.8' r='1.35' fill='%236d9eff'/%3E%3Cpath d='M9.3 14.6c.8.7 1.7 1 2.7 1s1.9-.3 2.7-1' stroke='%236d9eff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 19px 19px no-repeat;
}
.reply-box::after {
  content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
  width: 3px; border-radius: 4px 0 0 4px;
  background: var(--accent);
}

/* ================= 分页签 ================= */
.tabs { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs a {
  padding: 7px 15px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel);
  font-size: 13px; color: var(--muted);
  transition: all .15s;
}
.tabs a:hover { border-color: var(--accent); color: var(--ink); }
.tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ================= 落地页 ================= */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 30px; height: 66px;
  background: rgba(11, 16, 32, .88);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 50;
}
.topbar .logo { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; color: var(--ink); letter-spacing: -.2px; }
.logo-mark, .sidebar .brand .logo-chip, .auth-card .a-logo {
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark { width: 32px; height: 32px; border-radius: 9px; }
.logo-mark svg { width: 20px; height: 20px; }
.topbar nav { display: flex; align-items: center; gap: 4px; }
.topbar nav a { color: var(--muted); font-size: 13.5px; padding: 9px 13px; border-radius: var(--r); }
.topbar nav a:hover { color: var(--ink); background: #131c31; }
.topbar nav a.btn { margin-left: 8px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-weight: 600; }
.topbar nav a.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* Hero：左文右产品 mockup */
.hero {
  max-width: 1160px; margin: 0 auto;
  padding: 84px 30px 64px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px;
  align-items: center;
}
.hero .eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .4px; margin-bottom: 18px; }
.hero h1 {
  font-size: 46px; line-height: 1.22; font-weight: 700;
  letter-spacing: -1.4px; margin-bottom: 18px;
}
.hero .hero-desc { color: var(--muted); font-size: 15px; max-width: 460px; }
.hero-desc strong { color: var(--text); }
.hero-btns { margin-top: 26px; display: flex; gap: 11px; flex-wrap: wrap; }
.hero-btns .btn { margin: 0; padding: 10px 22px; font-size: 14px; }
.hero-btns .btn-primary { color: var(--accent-ink); }
.hero-btns .btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.hero-btns .btn-ghost:hover { border-color: var(--accent); color: var(--ink); }
.hero-mini { margin-top: 34px; display: flex; gap: 34px; flex-wrap: wrap; }
.hero-mini .hm { max-width: 150px; }
.hero-mini .hm b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; }
.hero-mini .hm span { color: var(--dim); font-size: 12px; line-height: 1.6; display: block; }
.hero-mini .hm::before { content: ""; display: block; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; margin-bottom: 9px; }

/* 控制台产品 mockup（纯CSS绘制） */
.product-window {
  background: var(--panel);
  border: 1px solid #41516d;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: 12px;
}
.pw-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #0d1426;
  border-bottom: 1px solid var(--line-soft);
}
.pw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3850; }
.pw-bar i:first-child { background: #f87171aa; }
.pw-bar i:nth-child(2) { background: #fbbf24aa; }
.pw-bar i:nth-child(3) { background: #34d399aa; }
.pw-bar span { margin-left: auto; color: var(--dim); font-size: 11px; }
.pw-body { display: grid; grid-template-columns: 118px 1fr; min-height: 300px; }
.pw-side { border-right: 1px solid var(--line-soft); padding: 12px 9px; background: #0d1426; }
.pw-side i { display: block; height: 9px; border-radius: 5px; background: #22304a; margin: 9px 4px; }
.pw-side i:first-child { background: var(--accent); width: 70%; opacity: .85; }
.pw-side i:nth-child(3) { width: 85%; } .pw-side i:nth-child(5) { width: 60%; } .pw-side i:nth-child(7) { width: 78%; }
.pw-main { padding: 14px; }
.pw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.pw-card { background: #0d1426; border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; }
.pw-card b { display: block; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.pw-card span { color: var(--dim); font-size: 10.5px; }
.pw-card.hl b { color: var(--accent); }
.pw-rows { display: flex; flex-direction: column; gap: 8px; }
.pw-row {
  display: flex; align-items: center; gap: 9px;
  background: #0d1426; border: 1px solid var(--line-soft);
  border-radius: 8px; padding: 8px 11px;
}
.pw-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.pw-row .dot.off { background: var(--warn); }
.pw-row .bar { height: 8px; border-radius: 5px; background: #22304a; flex: 1; }
.pw-row .bar.w1 { max-width: 55%; } .pw-row .bar.w2 { max-width: 38%; } .pw-row .bar.w3 { max-width: 70%; }
.pw-row .tagx { font-size: 10px; padding: 1px 8px; border-radius: 20px; background: rgba(52, 211, 153, .12); color: var(--ok); flex-shrink: 0; }
.pw-row .tagx.warn { background: rgba(251, 191, 36, .12); color: var(--warn); }
.pw-foot { border-top: 1px solid var(--line-soft); padding: 9px 14px; color: var(--dim); font-size: 10.5px; display: flex; justify-content: space-between; }
.pw-foot b { color: var(--ok); font-weight: 500; }

/* 落地区块 */
.section { padding: 74px 30px; }
.section-alt { background: var(--panel-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.wrap { max-width: 1160px; margin: 0 auto; }
.sec-eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .4px; margin-bottom: 14px; }
.sec-title { font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1.3; margin-bottom: 12px; }
.sec-desc { color: var(--muted); font-size: 14.5px; max-width: 560px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.feat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  transition: border-color .2s, transform .2s;
}
.feat:hover { border-color: #3a4d75; transform: translateY(-3px); }
.feat .f-ico {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  margin-bottom: 14px;
  background: var(--accent-dim);
}
.feat h3 { font-size: 15px; margin-bottom: 7px; letter-spacing: -.2px; }
.feat p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.feat .f-rows { margin-top: 14px; border-top: 1px solid var(--line-soft); }
.feat .f-rows div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.feat .f-rows div:last-child { border-bottom: none; }
.feat .f-rows span { color: var(--dim); }
.feat .f-rows b { color: var(--text); font-weight: 500; }

/* 管线流程节点 */
.flow { display: flex; align-items: stretch; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.flow .node {
  flex: 1; min-width: 150px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 16px;
  position: relative;
}
.flow .node b { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; }
.flow .node span { color: var(--dim); font-size: 11.5px; line-height: 1.6; display: block; }
.flow .node::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: #3a4d75; font-size: 14px; z-index: 1;
}
.flow .node:last-child::after { display: none; }
.flow .node.hl { border-color: var(--accent); background: rgba(109, 158, 255, .06); }

/* 数字统计条 */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.ss {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
  padding: 20px 22px;
}
.ss b { display: block; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.ss span { color: var(--muted); font-size: 12.5px; }
.ss b em { font-style: normal; color: var(--accent); }

/* 变量展示 */
.var-line {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-top: 11px;
  background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.var-line .k {
  font-family: ui-monospace, Consolas, monospace;
  background: rgba(109, 158, 255, .14); color: var(--accent);
  border: 1px solid rgba(109, 158, 255, .3);
  padding: 2px 10px; border-radius: 7px; font-size: 12.5px;
}
.var-line .k.alt { background: rgba(56, 189, 248, .12); color: var(--cyan); border-color: rgba(56, 189, 248, .3); }
.var-line .k.cond { background: rgba(52, 211, 153, .12); color: var(--ok); border-color: rgba(52, 211, 153, .3); }
.var-line .muted { font-size: 12px; }

/* 终版 CTA */
.final {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 52px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(560px 240px at 50% -80px, rgba(109, 158, 255, .16), transparent);
  pointer-events: none;
}
.final h2 { font-size: 30px; letter-spacing: -1px; margin-bottom: 10px; position: relative; }
.final p { color: var(--muted); font-size: 14px; position: relative; }
.final .hero-btns { justify-content: center; position: relative; }

.site-foot {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 30px;
  text-align: center;
  color: var(--dim);
  font-size: 12.5px;
}
.site-foot b { color: var(--muted); font-weight: 500; }

/* ================= 登录/注册 ================= */
.auth-wrap {
  min-height: calc(100vh - 67px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background:
    radial-gradient(620px 380px at 15% 0%, rgba(109, 158, 255, .10), transparent),
    radial-gradient(560px 360px at 85% 100%, rgba(56, 189, 248, .07), transparent);
}
.auth-card {
  width: 396px; max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 32px 28px;
  box-shadow: var(--shadow);
}
.auth-card .a-logo {
  width: 48px; height: 48px; border-radius: 13px;
  background: var(--accent);
  margin: 0 auto 16px;
  box-shadow: 0 10px 26px -10px rgba(109, 158, 255, .65);
}
.auth-card h2 { text-align: center; font-size: 19px; margin-bottom: 5px; letter-spacing: -.3px; }
.auth-card .a-sub { text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 20px; }
.auth-card .btn { width: 100%; justify-content: center; padding: 10px; font-size: 14px; margin-top: 20px; }
.auth-card .a-alt { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.auth-tip { width: 396px; max-width: 100%; text-align: center; color: var(--dim); font-size: 12.5px; margin-top: 16px; }

code { font-family: ui-monospace, Consolas, Menlo, monospace; background: var(--panel-3); border: 1px solid var(--line-soft); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; color: #9fc0f5; }

/* ================= 响应式 ================= */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 56px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .flow .node::after { display: none; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; }
  .sidebar nav { display: flex; flex-wrap: wrap; padding: 4px 10px 10px; }
  .sidebar nav .nav-cap { display: none; }
  .sidebar nav a.on::before { display: none; }
  .sidebar .usercard { display: none; }
  .main { padding: 18px 14px 30px; }
  .hero h1 { font-size: 32px; letter-spacing: -.8px; }
  .feature-grid { grid-template-columns: 1fr; }
  .stats-strip { grid-template-columns: 1fr; }
  .topbar nav a:not(.btn) { display: none; }
}