/* JevHub 设计系统 —— 统一字体 / 圆角 / 边框 / 间距 */
@font-face {
  font-family: "InterVar";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: "InterVar", "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e5e7eb;
  --border-strong: #d6d9df;
  --text: #0f1222;
  --text-2: #4a5065;
  --text-3: #8b90a0;

  --primary: #3e40a6;
  --primary-hover: #33358e;
  --primary-soft: #eeeefb;
  --primary-ring: rgba(62, 64, 166, 0.18);

  --ok: #16794a;   --ok-bg: #e6f5ec;
  --warn: #9a5b00; --warn-bg: #fdf3dc;
  --danger: #b42318; --danger-bg: #fdecea;
  --muted-bg: #eef0f3;

  --ink: #0b1022;          /* 深色区块 */
  --ink-2: #121a35;
  --ink-border: rgba(255, 255, 255, 0.08);
  --ink-text: #e9ebf5;
  --ink-text-2: #a3a9c2;

  --r-lg: 12px;
  --r-md: 8px;
  --r-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 1px rgba(16, 24, 40, 0.02);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
  --gap: 20px;
  --pad: 24px;
  --container: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
p { margin: 0; }
code, pre, .mono { font-family: var(--mono); }
.num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- 布局 ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: var(--pad);
  min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 32px; }
.card-title { font-size: 16px; font-weight: 600; }
.card-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.card.flush { padding: 0; }
.card.flush .card-head { padding: 20px var(--pad) 0; }
.card.flush .table-wrap { padding: 0 var(--pad) 8px; }

.stat .label { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .foot { font-size: 12.5px; color: var(--text-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--muted-bg); color: var(--text); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: #f1c2bd; }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--r-sm); }
.btn-icon { width: 36px; padding: 0; }
.btn-block { width: 100%; }
.btn:focus-visible, .input:focus-visible, .select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--primary); cursor: pointer; white-space: nowrap; }
.link-btn:hover { color: var(--primary-hover); text-decoration: underline; }
.link-btn.danger { color: var(--danger); }
.actions { display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
.actions form { display: inline; margin: 0; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label-sm { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--text-3); }
.input, .select, textarea.input {
  width: 100%; height: 40px; padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; padding: 10px 12px; }
select.select, select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
.input::placeholder { color: var(--text-3); }
.input:focus, .select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); outline: none; }
.input-sm, .select.input-sm { height: 32px; font-size: 13px; padding: 0 10px; border-radius: var(--r-sm); }
.input-group { display: flex; gap: 12px; }
.input-group .input { flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; line-height: 1;
  background: var(--muted-bg); color: var(--text-2);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-disabled { background: var(--muted-bg); color: var(--text-3); }

/* ---------- 表格 ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--text-2);
  background: var(--surface-2); padding: 0 14px; height: 40px; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table th:first-child { border-top-left-radius: var(--r-md); }
.table th:last-child { border-top-right-radius: var(--r-md); }
.table td { padding: 0 14px; height: 52px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.table tr:last-child td, .table tr.last td { border-bottom: 0; }
.table tr.edit-row td { border-top: 1px solid var(--border); }
.table td.mono, .table .sub.mono { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.table tbody tr:hover td { background: #fbfbfd; }
.table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.table .sub { display: block; font-size: 12px; color: var(--text-3); line-height: 1.3; }
.table td.wrap { white-space: normal; }
.table tr.editing td { background: var(--surface-2); }
.table tr.edit-row td { height: auto; padding: 16px 14px 18px; background: var(--surface-2); white-space: normal; }
.empty { padding: 40px 0; text-align: center; color: var(--text-3); font-size: 14px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 6px; font-size: 13px; color: var(--text-3); }
.pager .btns { display: flex; gap: 8px; }

/* ---------- 提示 ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 13.5px; border: 1px solid; }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: #c7e8d4; }
.alert-err { background: var(--danger-bg); color: var(--danger); border-color: #f5c9c4; }
.alert-info { background: var(--primary-soft); color: var(--primary); border-color: #dcdcf6; }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: #f3e0b2; }

/* ---------- 进度 ---------- */
.progress { height: 8px; background: #eceef2; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.progress.low > span { background: #d97706; }

/* ---------- 代码 ---------- */
.code {
  position: relative; background: var(--ink); color: #dfe3f4; border-radius: var(--r-md);
  padding: 16px 18px; font-family: var(--mono); font-size: 13px; line-height: 1.7; overflow-x: auto; margin: 0;
  border: 1px solid #1c2442;
}
.code .c { color: #7b84a8; } .code .s { color: #a5d6a7; } .code .k { color: #b4a7ff; }
.code-copy { position: absolute; top: 10px; right: 10px; height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #cfd4ea; border: 1px solid rgba(255,255,255,.12); cursor: pointer; font-family: var(--font); }
.code-copy:hover { background: rgba(255,255,255,.14); }
.inline-code { font-family: var(--mono); font-size: 12.5px; background: var(--muted-bg); padding: 2px 6px; border-radius: 4px; color: var(--text); white-space: nowrap; }

/* ---------- Key 显示框 ---------- */
.keybox { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 6px 0 14px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); min-width: 0; }
.keybox .k { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.keybox .btn-icon { width: 34px; height: 34px; }

/* =========================================================
   用户站
   ========================================================= */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #5b5ee0, #2e3092); display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.brand small { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0; padding-left: 10px; border-left: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 4px; height: 100%; }
.nav a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-md); color: var(--text-2); font-weight: 500; font-size: 14.5px; }
.nav a:hover { color: var(--text); background: var(--muted-bg); }
.nav a.active { color: var(--primary); background: var(--primary-soft); }
.nav a.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -14px; height: 2px; background: var(--primary); border-radius: 2px; }
.nav .sep { width: 1px; height: 20px; background: var(--border); margin: 0 8px; }
.nav form { margin: 0; }

.page { padding: 28px 0 56px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 24px; }
.page-head p { margin-top: 6px; color: var(--text-2); }
.notice-bar { background: var(--ink); color: var(--ink-text); font-size: 13px; text-align: center; padding: 8px 16px; }

.footer { border-top: 1px solid var(--border); padding: 24px 0 32px; color: var(--text-3); font-size: 13px; }
.footer .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* 首页 */
.hero { background: radial-gradient(1000px 400px at 50% -10%, rgba(91,94,224,.35), transparent 70%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--ink-text); border-bottom: 1px solid var(--ink-border); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%); pointer-events: none; }
.hero .container { position: relative; padding-top: 88px; padding-bottom: 88px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: #c9ccf6; background: rgba(91,94,224,.16); border: 1px solid rgba(140,143,255,.28); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,.18); }
.hero h1 { color: #fff; font-size: 44px; line-height: 1.15; letter-spacing: -0.03em; margin-top: 18px; font-weight: 700; }
.hero h1 .grad { background: linear-gradient(90deg, #a5a8ff, #7dd3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--ink-text-2); font-size: 16.5px; margin-top: 16px; max-width: 520px; line-height: 1.75; }
.hero .cta { display: flex; gap: 12px; margin-top: 28px; }
.hero .btn-secondary { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.16); }
.hero .btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.hero .meta { display: flex; gap: 28px; margin-top: 36px; color: var(--ink-text-2); font-size: 13px; }
.hero .meta b { display: block; color: #fff; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.terminal { background: rgba(8, 12, 28, .85); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); box-shadow: 0 30px 60px rgba(0,0,0,.35); overflow: hidden; }
.terminal .bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: #8a90b0; font-size: 12px; }
.terminal .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4060; display: inline-block; }
.terminal .bar span { margin-left: 8px; font-family: var(--mono); }
.terminal pre { margin: 0; padding: 18px 20px; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: #d7dbf0; overflow-x: auto; }
.terminal .c { color: #6c7396; } .terminal .s { color: #9ee6b8; } .terminal .k { color: #b4a7ff; } .terminal .n { color: #fbbf77; }

.section { padding: 64px 0; }
.section-head { text-align: center; margin-bottom: 36px; }
.section-head h2 { font-size: 28px; letter-spacing: -0.02em; }
.section-head p { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.feature { padding: 22px; }
.feature .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin-bottom: 14px; }
.feature .ico svg { width: 18px; height: 18px; }
.feature h3 { font-size: 15.5px; }
.feature p { margin-top: 6px; color: var(--text-2); font-size: 13.5px; line-height: 1.7; }

.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); justify-content: center; gap: var(--gap); max-width: 1080px; margin: 0 auto; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 28px; }
.price-card.featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-pop); }
.price-card .tag { position: absolute; top: 20px; right: 20px; }
.price-card h3 { font-size: 16px; }
.price-card .amount { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; }
.price-card .amount b { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-card .amount span { color: var(--text-3); font-size: 14px; }
.price-card ul { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: 14px; }
.price-card li { display: flex; gap: 10px; align-items: center; }
.price-card li svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.price-card .btn { margin-top: auto; }
.price-card .price-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.price-card .price-actions .btn { margin-top: 0; }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step { padding: 22px; }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.step h3 { font-size: 15px; }
.step p { margin-top: 6px; color: var(--text-2); font-size: 13.5px; }

/* 我的 */
.balance { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 14px; flex-wrap: wrap; }
.balance b { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance span { color: var(--text-2); font-size: 13.5px; }
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-2); margin-top: 14px; }
.kv b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.endpoint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--text-2); min-width: 0; }
.endpoint code { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-actions { display: flex; gap: 8px; margin-top: 14px; }
.key-actions form { margin: 0; }

/* 登录 / 兑换 窄卡 */
.narrow { max-width: 440px; margin: 40px auto 0; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--muted-bg); border-radius: var(--r-md); margin-bottom: 20px; }
.tabs a { flex: 1; text-align: center; height: 32px; line-height: 32px; border-radius: var(--r-sm); color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.tabs a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* 文档 */
.docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.toc { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.toc a { color: var(--text-2); padding: 6px 10px; border-radius: var(--r-sm); }
.toc a:hover { background: var(--muted-bg); color: var(--text); }
.toc .toc-title { font-size: 12px; color: var(--text-3); padding: 0 10px 6px; font-weight: 500; }
.doc-sec { scroll-margin-top: 88px; }
.doc-sec h2 { font-size: 18px; margin-bottom: 10px; }
.doc-sec p { color: var(--text-2); margin-bottom: 12px; line-height: 1.75; }
.doc-sec .code { margin-top: 4px; }

/* =========================================================
   管理后台
   ========================================================= */
.admin { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--ink) 240px, var(--bg) 240px); }
.sidebar { background: var(--ink); color: var(--ink-text-2); display: flex; flex-direction: column; padding: 20px 14px; position: sticky; top: 0; height: 100vh; border-right: 1px solid #1a2240; }
.sidebar .brand { color: #fff; padding: 4px 10px 22px; font-size: 17px; }
.sidebar .brand small { color: #7d84a6; border-left-color: rgba(255,255,255,.12); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav .grp { font-size: 11.5px; color: #626a8c; padding: 14px 12px 6px; letter-spacing: .04em; }
.side-nav a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--r-md); color: #aeb4cf; font-size: 14px; font-weight: 500; }
.side-nav a svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.side-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.side-nav a.active { background: rgba(110, 113, 230, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(140,143,255,.25); }
.side-foot { margin-top: auto; padding: 12px; border-top: 1px solid var(--ink-border); font-size: 12px; color: #6f779a; display: flex; align-items: center; justify-content: space-between; }
.side-foot form { margin: 0; }
.side-foot button { background: none; border: 0; color: #aeb4cf; font: inherit; font-size: 12.5px; cursor: pointer; padding: 0; }
.side-foot button:hover { color: #fff; }

.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top { height: 64px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; position: sticky; top: 0; z-index: 10; }
.admin-top h1 { font-size: 19px; }
.admin-top .crumbs { font-size: 13px; color: var(--text-3); }
.admin-body { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: var(--gap); max-width: 1320px; width: 100%; }

.bars { display: flex; align-items: flex-end; gap: 10px; height: 140px; padding-top: 8px; }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .bar i { display: block; width: 100%; max-width: 36px; background: linear-gradient(180deg, #6d70e6, var(--primary)); border-radius: 6px 6px 3px 3px; min-height: 3px; }
.bars .bar span { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.bars .bar b { font-size: 11.5px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }

.health-list { display: flex; flex-direction: column; }
.health-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; height: 52px; border-bottom: 1px solid var(--border); }
.health-item:last-child { border-bottom: 0; }
.health-item .nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-item .nm small { display: block; font-weight: 400; font-size: 12px; color: var(--text-3); }

.drawer { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 20px; background: var(--surface-2); }
details.add > summary { list-style: none; }
details.add > summary::-webkit-details-marker { display: none; }
details.add[open] > summary { margin-bottom: 0; }

.codes-list { columns: 3; column-gap: 24px; font-family: var(--mono); font-size: 13.5px; line-height: 2; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 18px; }

.login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(800px 400px at 50% 0%, rgba(91,94,224,.28), transparent 70%), var(--ink); padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 14px; padding: 32px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.login-card .brand { margin-bottom: 22px; }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 56px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .steps { grid-template-columns: 1fr; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .admin { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .hero h1 { font-size: 32px; }
  .nav a { padding: 0 10px; }
  .brand small { display: none; }
  .input-group { flex-direction: column; }
  .codes-list { columns: 1; }
}

/* 文档 · 快速开始 */
.qs-grid { margin-top: 16px; align-items: stretch; }
.qs-box { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.qs-box .card-head { margin-bottom: 12px; }
.qs-pre { flex: 1; margin: 0; font-size: 12px; line-height: 1.6; min-height: 340px; padding: 18px 18px; white-space: pre; overflow-x: auto; }
#qs-prompt { white-space: pre-wrap; word-break: break-word; }
.qs-foot { margin-top: 12px; font-size: 12.5px; min-height: 32px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qs-foot.qs-note { display: block; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-box pre.code.qs-pre { padding: 18px 16px; }
.qs-box .qs-foot { height: 36px; min-height: 36px; margin-top: 12px; }
.qs-box .qs-foot.qs-note { line-height: 36px; }
.qs-box pre.code.qs-pre { font-size: 11.5px; }
.qs-box .qs-foot { height: 40px; min-height: 40px; }
.qs-grid.grid-2 { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
@media (max-width: 900px) { .qs-grid.grid-2 { grid-template-columns: 1fr; } }
.docs .stack, .docs .doc-sec { min-width: 0; }
@media (max-width: 900px) { .qs-box pre.code.qs-pre { min-height: 0; } }
.nav a { white-space: nowrap; }
@media (max-width: 560px) {
  .topbar .brand { font-size: 16px; } .topbar .brand small { display: none; }
  .nav { gap: 0; }
  .nav a { padding: 0 8px; font-size: 14px; }
  .nav .sep { margin: 0 4px; }
}

/* ---------- 公告横幅 / 公告页 ---------- */
.badge-muted { background: var(--muted-bg); color: var(--text-2); }
.ann-bar { font-size: 13.5px; border-bottom: 1px solid transparent; }
.ann-inner { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.ann-tag { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.6); }
.ann-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.ann-more { flex: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ann-more:hover { color: inherit; opacity: .8; }
.ann-close { flex: none; width: 26px; height: 26px; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; border-radius: var(--r-sm); opacity: .7; }
.ann-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.ann-info { background: var(--primary-soft); color: var(--primary); border-color: #dcdcf5; }
.ann-warn { background: var(--warn-bg); color: var(--warn); border-color: #f3e0b2; }
.ann-ok { background: var(--ok-bg); color: var(--ok); border-color: #c8e8d5; }
.ann-danger { background: var(--danger-bg); color: var(--danger); border-color: #f6cdc8; }
.ann-badge-info { background: var(--primary-soft); color: var(--primary); }
.ann-badge-warn { background: var(--warn-bg); color: var(--warn); }
.ann-badge-ok { background: var(--ok-bg); color: var(--ok); }
.ann-badge-danger { background: var(--danger-bg); color: var(--danger); }
.ann-card-title { font-size: 16px; }
.ann-body { white-space: pre-line; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.ann-card:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---------- 示例 ---------- */
.ex-card .card-head { gap: 16px; align-items: flex-start; }
.ex-pre { max-height: 360px; overflow: auto; font-size: 12.5px; margin: 0; }
.ex-read { font-size: 13px; margin-top: 12px; }

/* ---------- 试用台 ---------- */
.pg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.pg .card { display: flex; flex-direction: column; min-height: 560px; }
.pg-select { width: 200px; }
.pg-text { flex: 1; width: 100%; min-height: 440px; resize: vertical; font-size: 12.5px; line-height: 1.6; padding: 12px 14px; white-space: pre; }
.pg-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 12px; }
.pg-foot .muted { font-size: 13px; }
.pg-result { flex: 1; margin: 0; min-height: 440px; max-height: 640px; overflow: auto; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
.pg-result.err { color: var(--danger); }
.empty-cta { padding: 32px 0; }
@media (max-width: 860px) { .pg { grid-template-columns: 1fr; } .pg .card { min-height: 0; } .pg-text, .pg-result { min-height: 280px; } }

/* ---------- 首页（中转版） ---------- */
.hero-relay .container { padding-top: 64px; padding-bottom: 64px; grid-template-columns: 1fr 440px; }
.hero-steps { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-steps div { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-text); font-size: 14px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); }
.hero-steps b { width: 22px; height: 22px; border-radius: 50%; background: rgba(165,168,255,.22); color: #c7c9ff; display: grid; place-items: center; font-size: 12px; }
.relay-card { color: var(--text); box-shadow: 0 30px 60px rgba(0,0,0,.3); padding: 28px; }
.relay-card .balance b { font-size: 36px; }
.input-lg { height: 48px; font-size: 16px; letter-spacing: .02em; }
.relay-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 13px; color: var(--text-3); flex-wrap: wrap; }
.relay-actions { display: flex; gap: 10px; margin-top: 18px; }
.relay-actions .btn { flex: 1; }
.relay-redeem { margin-top: 14px; }
.relay-redeem .btn { height: 40px; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.center { text-align: center; }
@media (max-width: 860px) { .hero-relay .container { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; gap: 28px; } }
.renew { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.renew-warn { background: var(--warn-bg); border-color: #f3e0b2; color: var(--warn); }
#usage .qs-box { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
.pg-text.input { font-family: var(--mono); }
.qs-pre, .ex-pre { max-width: 100%; }
@media (max-width: 720px) {
  .topbar .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 0; row-gap: 6px; }
  .topbar .brand small { display: none; }
  .topbar .nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a, .topbar .nav form { flex: none; }
  .ann-title { white-space: normal; }
  .grid-2, .qs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  pre.code { overflow-x: auto; }
}
body { overflow-x: hidden; }
@media (max-width: 720px) { .hero-relay .hero-steps { display: none; } .hero-relay h1 { font-size: 32px; } }
.relay-key-label { font-size: 13px; color: var(--text-2); margin: 16px 0 8px; }
.relay-card .keybox { margin: 0; }
.hero .relay-card .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.hero .relay-card .btn-secondary:hover { background: var(--surface-2); color: var(--text); }

/* 查一查 / 上架 */
.lookup-box { display: flex; align-items: center; gap: 10px; }
.lookup-box > svg { width: 18px; height: 18px; color: var(--text-3, #8a8fa3); flex: none; }
.lookup-box .input { flex: 1; height: 40px; }
.lookup-box .btn { height: 40px; flex: none; }
.lk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 4px; }
.lk-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lk-grid span { font-size: 12.5px; color: var(--text-2); }
.lk-grid b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-hint { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.diag { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.diag-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13.5px; border: 1px solid; }
.diag-item .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.diag-ok { background: var(--ok-bg); color: var(--ok); border-color: #c7e8d4; }
.diag-warn { background: var(--warn-bg); color: var(--warn); border-color: #f3e0b2; }
.diag-danger { background: var(--danger-bg); color: var(--danger); border-color: #f5c9c4; }
.codes-box { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 13.5px; line-height: 1.9; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); resize: vertical; }
.lst-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.lst-step { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--text-2); line-height: 1.6; }
.lst-step b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.lst-step.done { border-color: #c7e8d4; background: var(--ok-bg); }
.quick-form { display: inline-flex; gap: 6px; align-items: center; }
.quick-form .input { width: 84px; }
@media (max-width: 860px) { .lk-grid, .lst-steps { grid-template-columns: 1fr; } }
.rec-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.rec-list > div { display: flex; gap: 14px; align-items: baseline; }
.rec-list b { font-weight: 500; color: var(--text); min-width: 120px; }

/* ---------- 绑定邮箱 / 验证码 ---------- */
.btn-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warn:hover { filter: brightness(.95); }
.bind-tip { align-items: center; }
.card-attn { border-color: #f3e0b2; box-shadow: 0 0 0 3px var(--warn-bg); }
.account-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; gap: 14px; align-items: end; }
.account-form > .btn { height: 40px; min-width: 104px; }
.input-group-tight { gap: 8px; }
.input-group-tight .btn { height: 40px; white-space: nowrap; flex: none; min-width: 96px; }
.form-msg { font-size: 12.5px; margin-top: 10px; min-height: 0; }
.form-msg:empty { display: none; }
.form-msg.ok, .hint.ok { color: var(--ok); }
.form-msg.err, .hint.err { color: var(--danger); }
@media (max-width: 900px) { .account-form { grid-template-columns: 1fr; } .input-group-tight { flex-direction: row; } }
.input-group-tight .btn[data-pw-toggle] { min-width: 60px; }

/* ---------- 监控 ---------- */
.mon-status { display: flex; align-items: center; gap: 16px; }
.mon-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 5px var(--ok-bg); }
.mon-warn .mon-dot { background: #d99a1e; box-shadow: 0 0 0 5px var(--warn-bg); }
.mon-bad { border-color: #f5c9c4; }
.mon-bad .mon-dot { background: var(--danger); box-shadow: 0 0 0 5px var(--danger-bg); animation: monpulse 1.6s infinite; }
.mon-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
@keyframes monpulse { 50% { box-shadow: 0 0 0 9px var(--danger-bg); } }
.bars-24 { gap: 5px; }
.bars-24 .bar b { font-size: 10.5px; }

/* 右上角账号菜单 */
.umenu { position: relative; margin-left: 12px; }
.topbar .nav { margin-left: auto; }
.umenu-pop a { white-space: normal; }
.umenu > summary { list-style: none; }
.umenu > summary::-webkit-details-marker { display: none; }
.umenu-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 4px; border: 1px solid var(--border); border-radius: 999px; background: #fff; cursor: pointer; color: var(--text); font-size: 13.5px; font-weight: 500; user-select: none; }
.umenu-btn:hover, .umenu[open] .umenu-btn { border-color: var(--primary); }
.umenu-ava { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.umenu-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex: none; }
.umenu-caret { color: var(--text-3, #8a90a0); flex: none; transition: transform .15s; }
.umenu[open] .umenu-caret { transform: rotate(180deg); }
.umenu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg, 12px); box-shadow: 0 12px 32px rgba(20,24,40,.12); padding: 8px; z-index: 40; }
.umenu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.umenu-email { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umenu-sub { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.umenu-kv { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 13px; color: var(--text-2); }
.umenu-kv b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.umenu-warn { display: block; margin: 6px 4px; padding: 8px 10px; border-radius: var(--r-md); background: #fff7e6; color: #9a5b00; font-size: 12.5px; line-height: 1.5; }
.umenu-pop a { display: block; height: auto; padding: 8px 10px; font-size: 13.5px; color: var(--text); border-radius: var(--r-md); }
.umenu-pop a.umenu-warn { color: #9a5b00; }
.umenu-pop a:hover { background: var(--muted-bg); }
.umenu-links { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.umenu-out { display: block; width: 100%; text-align: left; margin-top: 4px; padding: 8px 10px; border: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); background: none; color: #d14343; font-size: 13.5px; cursor: pointer; }
.umenu-out:hover { background: #fdf2f2; }
@media (max-width: 760px) { .topbar .brand { order: 1; } .umenu { order: 2; margin-left: auto; } .topbar .nav { order: 3; margin-left: 0; } .umenu-name { max-width: 110px; } .umenu-pop { position: fixed; right: 12px; left: 12px; top: calc(100% + 4px); width: auto; } }

/* 示例与试用：场景切换 */
.ex-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ex-tab { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.ex-tab:hover { border-color: var(--primary); }
.ex-tab.active { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.ex-tab-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ex-tab-tag { font-size: 11.5px; color: var(--text-2); }
.ex-desc { font-size: 13.5px; margin: 0 0 14px; min-height: 20px; }
.pg-read { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--muted-bg); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.pg-read b { color: var(--text); font-weight: 600; margin-right: 8px; }
.pg-result { min-height: 380px; }
@media (max-width: 860px) { .ex-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }