/* ============================================================
   IsQQ API 开放平台 - 样式表
   深色高级主题 · 玻璃拟态 · 响应式（手机自适应）
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #0a0f1e;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-3: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.09);
  --border-2: rgba(255, 255, 255, 0.16);
  --text: #e8ecf6;
  --text-2: #9aa3b8;
  --text-3: #6b7488;
  --primary: #6366f1;
  --primary-2: #8b5cf6;
  --cyan: #22d3ee;
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
  --grad-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(139, 92, 246, 0.18));
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
  --sidebar-w: 258px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -10%, rgba(99, 102, 241, 0.14), transparent 60%),
    radial-gradient(700px 420px at -8% 28%, rgba(34, 211, 238, 0.07), transparent 60%),
    radial-gradient(820px 620px at 62% 112%, rgba(217, 70, 239, 0.07), transparent 60%);
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
code, .mono { font-family: var(--mono); }
::selection { background: rgba(99, 102, 241, 0.4); color: #fff; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }
::-webkit-scrollbar-track { background: transparent; }

.ic { width: 18px; height: 18px; flex: none; }
.text-muted { color: var(--text-3); }
.strong { font-weight: 700; }

/* ---------- 后台布局 ---------- */
.layout { display: flex; min-height: 100vh; }

/* 侧边栏 */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: rgba(13, 20, 40, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 120;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}
.brand-mark .ic { width: 20px; height: 20px; }
.brand-mark.lg { width: 52px; height: 52px; border-radius: 16px; }
.brand-mark.lg .ic { width: 27px; height: 27px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { font-size: 10.5px; color: var(--text-3); letter-spacing: 0.6px; }
.sidebar-close { display: none; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10.5px 14px;
  margin: 2px 10px;
  border-radius: 12px;
  color: var(--text-2);
  font-weight: 500;
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.nav-item .ic { width: 19px; height: 19px; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: #fff; background: var(--grad-soft); }
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px; top: 22%;
  height: 56%; width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--grad);
}
.sidebar-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.side-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--green); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); animation: pulse 2s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.side-ver { font-size: 11px; color: var(--text-3); }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(4, 8, 18, 0.62);
  backdrop-filter: blur(2px);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* 主区域 */
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }

/* 顶栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 26px;
  background: rgba(10, 15, 30, 0.74);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.topbar-menu { display: none; }
.topbar-title { min-width: 0; flex: 1; }
.topbar-title h1 { font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title p { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 0 12px;
  height: 38px;
  width: 230px;
  color: var(--text-3);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar-search:focus-within { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
.topbar-search input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; font-family: inherit; }
.topbar-search input::placeholder { color: var(--text-3); }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  flex: none;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 9px; }
.badge-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px 0 5px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s;
}
.user-chip:hover { border-color: var(--border-2); background: var(--surface-2); }
.avatar {
  width: 29px; height: 29px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex: none;
}
.user-chip .ic { width: 15px; height: 15px; color: var(--text-3); }

/* 下拉菜单 */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: #141b33;
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  z-index: 200;
  animation: pop 0.18s ease;
}
.dropdown-menu.open { display: block; }
.dropdown-menu.align-right { right: 0; }
.dropdown-head { font-size: 12px; font-weight: 700; color: var(--text-3); padding: 8px 10px 6px; letter-spacing: 0.5px; }
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item .ic { width: 16px; height: 16px; color: var(--text-2); }
.dropdown-item.danger { color: #fca5a5; }
.dropdown-item.danger .ic { color: #fca5a5; }
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.dropdown-foot { display: block; text-align: center; padding: 9px; font-size: 12.5px; color: var(--primary-2); border-top: 1px solid var(--border); margin-top: 4px; border-radius: 0 0 10px 10px; }
.dropdown-empty { padding: 22px; text-align: center; color: var(--text-3); font-size: 13px; }
.di-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.di-icon.ok { background: rgba(52, 211, 153, 0.13); color: var(--green); }
.di-icon.err { background: rgba(248, 113, 113, 0.13); color: var(--red); }
.di-icon .ic { width: 14px; height: 14px; }
.di-text { display: flex; flex-direction: column; min-width: 0; }
.di-text strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-text small { font-size: 11.5px; color: var(--text-3); }

/* 内容区 */
.content { padding: 26px; width: 100%; max-width: 1480px; margin: 0 auto; flex: 1; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h2 { font-size: 22px; font-weight: 800; letter-spacing: 0.3px; }
.page-head p { color: var(--text-2); font-size: 13.5px; margin-top: 4px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.25s, box-shadow 0.25s;
  margin-bottom: 18px;
}
.card:hover { border-color: var(--border-2); }
.card:last-child { margin-bottom: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-head h3 { font-size: 15.5px; font-weight: 700; }
.card-tag { font-size: 11.5px; color: var(--text-3); background: var(--surface-2); padding: 3px 10px; border-radius: 99px; }
.card-more { font-size: 12.5px; color: var(--primary-2); font-weight: 600; }
.card-more:hover { text-decoration: underline; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; margin-bottom: 18px; }
.grid-2:last-child { margin-bottom: 0; }
.grid-2 > .card { margin-bottom: 0; }

/* ---------- 统计卡片 ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; }
.stat-card { position: relative; overflow: hidden; margin-bottom: 0; }
.stat-card::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0.07;
  filter: blur(10px);
}
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--grad-soft);
  color: #a5b4fc;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.stat-value { font-size: 27px; font-weight: 800; letter-spacing: 0.4px; line-height: 1.2; }
.stat-label { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.stat-sub { color: var(--text-3); font-size: 12px; margin-top: 8px; }
.stat-trend { position: absolute; top: 20px; right: 20px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.stat-trend.up { background: rgba(52, 211, 153, 0.12); color: var(--green); }
.stat-trend.down { background: rgba(248, 113, 113, 0.12); color: var(--red); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn .ic { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(99, 102, 241, 0.45); }
.btn-ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-2); background: var(--surface-3); }
.btn-danger { background: rgba(248, 113, 113, 0.13); color: #fca5a5; border-color: rgba(248, 113, 113, 0.28); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.22); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; gap: 6px; }
.btn-block { width: 100%; padding: 12px; font-size: 15px; }
.btn-lg { padding: 13px 30px; font-size: 15px; border-radius: 13px; }

/* ---------- 徽标 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-success { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; }
.badge-danger { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
.badge-warn { background: rgba(251, 191, 36, 0.12); color: #fcd34d; }
.badge-paid { background: rgba(217, 70, 239, 0.14); color: #f0abfc; }
.badge-free { background: rgba(34, 211, 238, 0.13); color: #67e8f9; }

.method { font-size: 10.5px; font-weight: 800; padding: 2.5px 7px; border-radius: 6px; letter-spacing: 0.6px; font-family: var(--mono); vertical-align: middle; }
.m-get { background: rgba(34, 211, 238, 0.13); color: #67e8f9; }
.m-post { background: rgba(52, 211, 153, 0.13); color: #6ee7b7; }
.m-put { background: rgba(251, 191, 36, 0.13); color: #fcd34d; }
.m-delete { background: rgba(248, 113, 113, 0.13); color: #fca5a5; }
.m-patch { background: rgba(167, 139, 250, 0.13); color: #c4b5fd; }

/* ---------- 表单 ---------- */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.req { color: var(--red); }
.form-control {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-control::placeholder { color: var(--text-3); }
.form-control:focus { outline: none; border-color: rgba(99, 102, 241, 0.55); background: rgba(99, 102, 241, 0.05); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); }
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  cursor: pointer;
}
select.form-control option { background: #141b33; color: var(--text); }
textarea.form-control { min-height: 108px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 7px; }
.form-hint code { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }
.inline-form { display: inline; }

/* 开关 */
.switch { position: relative; display: inline-block; width: 42px; height: 23px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); border-radius: 99px; transition: 0.25s; cursor: pointer; border: 1px solid var(--border); }
.switch .slider::before { content: ""; position: absolute; width: 17px; height: 17px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: 0.25s; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.switch input:checked + .slider { background: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: transparent; }
.switch input:checked + .slider::before { transform: translateX(19px); }
.switch-row { display: flex; flex-direction: column; gap: 14px; }
.switch-item { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.switch-text { display: flex; flex-direction: column; }
.switch-text strong { font-size: 13.5px; font-weight: 600; }
.switch-text small { font-size: 12px; color: var(--text-3); }

/* 图标选择器 */
.icon-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }
.icon-option { position: relative; cursor: pointer; }
.icon-option input { position: absolute; opacity: 0; }
.icon-option span {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  transition: 0.18s;
}
.icon-option span .ic { width: 17px; height: 17px; }
.icon-option:hover span { border-color: var(--border-2); color: var(--text); }
.icon-option input:checked + span { border-color: rgba(99, 102, 241, 0.6); background: var(--grad-soft); color: #a5b4fc; }

/* 颜色选择 */
.color-field { display: flex; gap: 10px; align-items: center; }
.color-field input[type="color"] { width: 44px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; padding: 3px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.tbl tbody tr { transition: background 0.15s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.028); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td strong { font-weight: 600; }

.api-cell { display: flex; align-items: center; gap: 13px; min-width: 200px; }
.api-ic { width: 38px; height: 38px; border-radius: 11px; background: var(--grad-soft); color: #a5b4fc; display: grid; place-items: center; flex: none; }
.api-meta { min-width: 0; }
.api-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; max-width: 340px; }

.cat-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.rate-cell, .quota-cell { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.rate-cell .mono, .quota-cell .mono { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.progress { flex: 1; height: 7px; background: rgba(255, 255, 255, 0.08); border-radius: 99px; overflow: hidden; min-width: 60px; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width 0.4s; }
.progress > i.ok { background: linear-gradient(90deg, #34d399, #10b981); }
.progress > i.warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.progress > i.err { background: linear-gradient(90deg, #f87171, #ef4444); }

.key-cell { display: flex; align-items: center; gap: 8px; }
.key-mask { font-size: 12px; background: rgba(255, 255, 255, 0.05); padding: 5px 10px; border-radius: 8px; letter-spacing: 0.4px; white-space: nowrap; }
.actions-cell { white-space: nowrap; }
.actions-cell .btn, .actions-cell form { margin-right: 6px; }
.actions-cell .btn:last-child, .actions-cell form:last-child { margin-right: 0; }

/* 移动端：表格转卡片 */
@media (max-width: 860px) {
  .card-table { overflow: visible; }
  .card-table table, .card-table tbody, .card-table tr, .card-table td { display: block; width: 100%; }
  .card-table thead { display: none; }
  .card-table tr {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px 14px;
    margin-bottom: 12px;
  }
  .card-table tr:last-child { margin-bottom: 0; }
  .card-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: none; padding: 9px 2px; text-align: right; }
  .card-table td::before { content: attr(data-label); color: var(--text-3); font-size: 12px; font-weight: 600; flex: none; text-align: left; }
  .card-table td.actions-cell { justify-content: flex-end; }
  .card-table td.actions-cell::before { display: none; }
  .card-table .api-desc { max-width: 180px; }
}

/* ---------- 筛选栏 ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.filter-search { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 11px; padding: 0 12px; height: 40px; flex: 1 1 220px; color: var(--text-3); min-width: 0; }
.filter-search:focus-within { border-color: rgba(99, 102, 241, 0.5); }
.filter-search input { background: none; border: none; outline: none; color: var(--text); font-size: 13.5px; width: 100%; font-family: inherit; min-width: 0; }
.filter-search input::placeholder { color: var(--text-3); }
.filter-select { width: auto; min-width: 120px; height: 40px; padding-top: 0; padding-bottom: 0; }

/* ---------- 分页 ---------- */
.pagination { display: flex; gap: 6px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13px; padding: 0 9px; transition: 0.18s; }
.pagination a:hover { border-color: var(--border-2); color: var(--text); }
.pagination .current { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- 热门列表 ---------- */
.top-list { display: flex; flex-direction: column; gap: 16px; }
.top-list li { display: flex; align-items: center; gap: 13px; }
.top-rank { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 800; background: var(--surface-2); color: var(--text-2); flex: none; }
.top-rank.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.top-rank.rank-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.top-rank.rank-3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.top-body { flex: 1; min-width: 0; }
.top-name { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.top-name span { color: var(--text-3); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* ---------- 图表 ---------- */
.chart-box { min-height: 250px; }
.chart-box svg { width: 100%; height: auto; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 8px 0; }
.donut-svg { width: 180px; height: 180px; flex: none; }
.donut-legend { display: flex; flex-direction: column; gap: 11px; }
.donut-legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.donut-legend .lg-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend .lg-val { color: var(--text-3); font-size: 12px; margin-left: auto; padding-left: 14px; }

/* ---------- 空状态 ---------- */
.empty { padding: 52px 20px; text-align: center; color: var(--text-3); }
.empty .empty-ic { width: 62px; height: 62px; border-radius: 18px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 16px; color: var(--text-2); }
.empty .empty-ic .ic { width: 26px; height: 26px; }
.empty p { margin-bottom: 14px; font-size: 13.5px; }

/* ---------- 提示条 ---------- */
.alert { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-radius: 13px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid; animation: slideDown 0.25s ease; }
.alert .ic { width: 17px; height: 17px; flex: none; }
.alert span { flex: 1; }
.alert-close { background: none; border: none; color: inherit; cursor: pointer; opacity: 0.6; padding: 2px; display: grid; place-items: center; }
.alert-close:hover { opacity: 1; }
.alert-close .ic { width: 14px; height: 14px; }
.alert-success { background: rgba(52, 211, 153, 0.09); border-color: rgba(52, 211, 153, 0.28); color: #6ee7b7; }
.alert-error { background: rgba(248, 113, 113, 0.09); border-color: rgba(248, 113, 113, 0.28); color: #fca5a5; }
.alert-info { background: rgba(99, 102, 241, 0.09); border-color: rgba(99, 102, 241, 0.28); color: #a5b4fc; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 弹窗 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(4, 8, 18, 0.72); backdrop-filter: blur(6px); display: none; place-items: center; z-index: 300; padding: 20px; }
.modal-mask.open { display: grid; }
.modal { background: #141b33; border: 1px solid var(--border-2); border-radius: 20px; padding: 30px 28px; width: min(420px, 100%); text-align: center; box-shadow: var(--shadow); animation: pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(251, 191, 36, 0.12); color: var(--amber); display: grid; place-items: center; margin: 0 auto 16px; }
.modal-icon .ic { width: 26px; height: 26px; }
.modal h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.modal p { color: var(--text-2); font-size: 13.5px; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { min-width: 110px; }

/* ---------- 在线调用测试面板 ---------- */
.modal-test { width: min(660px, 100%); text-align: left; padding: 0; display: flex; flex-direction: column; max-height: min(88vh, 880px); }
.modal-test-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 22px; border-bottom: 1px solid var(--border); flex: none; }
.modal-test-head h3 { font-size: 16px; font-weight: 800; margin: 0; }
.modal-test-body { padding: 20px 22px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.at-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 16px; font-size: 12.5px; line-height: 1.6; }
.at-param-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.at-param-row .icon-btn { width: 34px; height: 34px; }
.at-param-cell { min-width: 0; }
.at-param-cell input { width: 100%; }
.at-param-valcell { display: flex; align-items: center; gap: 7px; }
.at-param-valcell input { flex: 1; min-width: 0; }
.at-req-badge { flex: none; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(244,63,94,0.16); color: #fca5a5; border: 1px solid rgba(244,63,94,0.35); white-space: nowrap; }
.at-lock-badge { flex: none; font-size: 11px; line-height: 1; padding: 4px 7px; border-radius: 999px; background: rgba(148,163,184,0.16); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.35); white-space: nowrap; }
/* 锁定仅作用于参数名：参数名只读（弱化显示），取值框保持可编辑并带靛蓝高亮底色 */
.at-param-row.is-locked .at-param-namecell input { background: rgba(255,255,255,0.035); color: var(--text-2); cursor: not-allowed; }
.at-param-row.is-locked .at-param-valcell input { background: rgba(99,102,241,0.06); }
.at-param-lockspace { width: 34px; height: 34px; }
.at-params-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 2px 0 9px; }
.at-params-title .text-muted { font-weight: 500; margin-left: 6px; }
.at-preview { padding: 14px 13px 4px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.at-preview-label { font-size: 12px; color: var(--text-2); }
.at-preview img { width: 200px; height: 200px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.at-req-url { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #94a3b8; padding: 10px 13px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); word-break: break-all; white-space: pre-wrap; }

/* 后台「请求参数定义」配置区 */
.param-def-head { display: grid; grid-template-columns: 1.05fr 1.7fr 1.05fr 200px 34px; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.param-def-row { display: grid; grid-template-columns: 1.05fr 1.7fr 1.05fr 200px 34px; gap: 10px; margin-bottom: 10px; align-items: center; }
.param-def-row .icon-btn { width: 34px; height: 34px; }
.pd-field { min-width: 0; }
.pd-label { display: none; }
.param-def-row .pd-field input.form-control { width: 100%; }

/* 属性列：必填 / 锁定 两个胶囊开关并排 */
.pd-attrs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  font-size: 12.5px; line-height: 1; color: var(--text-2);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: border-color .18s, background .18s, color .18s;
}
.pd-toggle:hover { border-color: rgba(255, 255, 255, 0.24); color: var(--text); }
.pd-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.3); border-radius: 4px;
  background: rgba(0, 0, 0, 0.2); position: relative;
  cursor: pointer; transition: background .18s, border-color .18s;
}
.pd-toggle input[type="checkbox"]:checked { border-color: transparent; }
.pd-toggle input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* 必填：红色系；锁定：靛蓝系 */
.pd-toggle.pd-req input[type="checkbox"]:checked { background: #f43f5e; }
.pd-toggle.pd-lock input[type="checkbox"]:checked { background: #6366f1; }
.pd-toggle.is-on { color: var(--text); background: rgba(255, 255, 255, 0.07); }
.pd-toggle.pd-req.is-on { border-color: rgba(244, 63, 94, 0.5); background: rgba(244, 63, 94, 0.12); }
.pd-toggle.pd-lock.is-on { border-color: rgba(99, 102, 241, 0.5); background: rgba(99, 102, 241, 0.14); }

/* 手机端：每个参数一张卡片，字段纵向排列、带标签，删除按钮固定在右上角 */
@media (max-width: 720px) {
  .param-def-head { display: none; }
  .param-def-row {
    display: block; position: relative;
    padding: 14px 46px 14px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    margin-bottom: 12px;
  }
  .param-def-row .pd-del { position: absolute; top: 10px; right: 10px; }
  .pd-field { display: block; margin-bottom: 12px; }
  .pd-field:last-of-type { margin-bottom: 0; }
  .pd-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
  .pd-attrs { gap: 10px; }
  .pd-toggle { padding: 8px 14px; font-size: 13px; }
  .pd-toggle input[type="checkbox"] { width: 16px; height: 16px; }
}
.at-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 18px; }
.at-result { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: rgba(0, 0, 0, 0.22); }
.at-result-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 13px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.at-json { margin: 0; padding: 14px; max-height: 320px; overflow: auto; font-family: var(--mono); font-size: 12px; line-height: 1.65; color: #c7d2fe; white-space: pre-wrap; word-break: break-all; }
@keyframes pop { from { transform: scale(0.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 400; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 10px; background: #161e38; border: 1px solid var(--border-2); border-left: 3px solid var(--primary); border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow); font-weight: 500; font-size: 13.5px; animation: slideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 320px; }
.toast .ic { width: 16px; height: 16px; color: var(--primary-2); flex: none; }
.toast.ok { border-left-color: var(--green); }
.toast.ok .ic { color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast.err .ic { color: var(--red); }
@keyframes slideIn { from { transform: translateX(115%); } to { transform: translateX(0); } }

/* ---------- 调用预览 / 代码块 ---------- */
.call-preview { background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border); border-radius: 13px; padding: 15px; margin-top: 6px; }
.call-preview-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 10px; }
.call-preview-head .ic { width: 15px; height: 15px; color: var(--primary-2); }
.code-block { background: #0b1120; border: 1px solid var(--border); border-radius: 11px; padding: 13px 15px; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #a5b4fc; overflow-x: auto; white-space: pre; }

/* ---------- 信息列表 / 危险区 ---------- */
.info-list { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.info-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; color: var(--text-2); border-bottom: 1px dashed rgba(255, 255, 255, 0.05); }
.info-row:last-child { border-bottom: none; }
.info-row strong { color: var(--text); font-weight: 600; }
.danger-card { border-color: rgba(248, 113, 113, 0.22); }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.danger-row strong { font-size: 14.5px; }
.danger-row p { color: var(--text-3); font-size: 12.5px; margin-top: 4px; max-width: 560px; }

/* ============================================================
   登录页
   ============================================================ */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 0.95fr; }
.login-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #1b1f4b 0%, #312e81 45%, #0e1030 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px;
  border-right: 1px solid var(--border);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: float 14s ease-in-out infinite; pointer-events: none; }
.blob-1 { width: 340px; height: 340px; background: rgba(99, 102, 241, 0.5); top: -80px; right: -60px; }
.blob-2 { width: 280px; height: 280px; background: rgba(34, 211, 238, 0.32); bottom: -60px; left: -40px; animation-delay: -5s; }
.blob-3 { width: 220px; height: 220px; background: rgba(217, 70, 239, 0.3); top: 40%; left: 55%; animation-delay: -9s; }
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -28px) scale(1.06); }
  66% { transform: translate(-18px, 16px) scale(0.96); }
}
.login-hero .brand { margin-bottom: 44px; position: relative; z-index: 1; }
.login-hero h1 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; line-height: 1.35; margin-bottom: 18px; position: relative; z-index: 1; }
.login-hero-sub { color: #b9c2d8; font-size: 15px; max-width: 460px; margin-bottom: 40px; position: relative; z-index: 1; }
.hero-features { display: flex; flex-direction: column; gap: 20px; margin-bottom: 44px; position: relative; z-index: 1; }
.hero-features li { display: flex; align-items: flex-start; gap: 14px; }
.hero-features .fi-ic, .hero-features li > svg { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); display: grid; place-items: center; color: #c7d2fe; flex: none; }
.hero-features li > svg .ic, .hero-features .fi-ic .ic { width: 19px; height: 19px; }
.hero-features strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.hero-features small { color: #97a1b8; font-size: 12.5px; }
.hero-stats { display: flex; gap: 36px; position: relative; z-index: 1; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 24px; font-weight: 800; background: linear-gradient(120deg, #fff, #a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats small { color: #97a1b8; font-size: 12px; }

.login-panel { display: grid; place-items: center; padding: 44px 28px; }
.login-box { width: min(400px, 100%); }
.login-box-head { text-align: center; margin-bottom: 28px; }
.login-box-head .brand-mark { margin: 0 auto 14px; }
.login-box-head h2 { font-size: 23px; font-weight: 800; }
.login-box-head p { color: var(--text-3); font-size: 13.5px; margin-top: 6px; }
.pwd-wrap { position: relative; }
.pwd-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-3); cursor: pointer; padding: 8px; display: grid; place-items: center; border-radius: 8px; }
.pwd-toggle:hover { color: var(--text); }
.pwd-toggle .ic { width: 17px; height: 17px; }
.login-tip { margin-top: 18px; background: rgba(99, 102, 241, 0.08); border: 1px dashed rgba(99, 102, 241, 0.35); border-radius: 12px; padding: 13px 15px; font-size: 12.5px; color: var(--text-2); line-height: 1.9; }
.login-tip code { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.login-foot { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 26px; }

/* ============================================================
   安装页
   ============================================================ */
.install-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; }
.install-box { width: min(560px, 100%); background: rgba(19, 26, 51, 0.85); border: 1px solid var(--border-2); border-radius: 22px; padding: 36px; box-shadow: var(--shadow); position: relative; z-index: 1; backdrop-filter: blur(12px); }
.install-head { text-align: center; margin-bottom: 26px; }
.install-head .brand-mark { margin: 0 auto 16px; }
.install-head h1 { font-size: 24px; font-weight: 800; }
.install-head p { color: var(--text-3); font-size: 13px; margin-top: 6px; letter-spacing: 1px; }
.install-checks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.install-checks li { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; }
.install-checks li small { margin-left: auto; font-size: 12px; font-weight: 700; }
.install-checks li.ok small { color: var(--green); }
.install-checks li.err small { color: var(--red); }
.check-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.install-checks li.ok .check-ic { background: rgba(52, 211, 153, 0.13); color: var(--green); }
.install-checks li.err .check-ic { background: rgba(248, 113, 113, 0.13); color: var(--red); }
.check-ic .ic { width: 15px; height: 15px; }
.install-note { text-align: center; color: var(--text-3); font-size: 12.5px; margin-top: 14px; line-height: 1.8; }
.install-note code { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; }
.install-help { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.install-help h3 { font-size: 14.5px; margin-bottom: 12px; }
.install-help ol { padding-left: 20px; list-style: decimal; display: flex; flex-direction: column; gap: 10px; }
.install-help li { color: var(--text-2); font-size: 13px; line-height: 1.8; }
.install-help code { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.install-success { text-align: center; }
.install-success-ic { width: 66px; height: 66px; border-radius: 20px; background: rgba(52, 211, 153, 0.13); color: var(--green); display: grid; place-items: center; margin: 0 auto 18px; animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.install-success-ic .ic { width: 32px; height: 32px; }
.install-success h2 { font-size: 21px; font-weight: 800; margin-bottom: 8px; }
.install-success > p { color: var(--text-2); font-size: 13.5px; margin-bottom: 18px; }
.cred-box { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 6px 16px; margin-bottom: 18px; text-align: left; }
.cred-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--text-2); }
.cred-row:last-child { border-bottom: none; }
.cred-row code { color: #a5b4fc; font-size: 13px; font-weight: 600; }
.install-warn { display: flex; align-items: center; gap: 8px; justify-content: center; color: #fcd34d; font-size: 12.5px; margin-bottom: 20px; }
.install-warn .ic { width: 15px; height: 15px; flex: none; }

/* ============================================================
   公共文档页
   ============================================================ */
.docs-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 26px; background: rgba(10, 15, 30, 0.78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.docs-nav-links { display: flex; align-items: center; gap: 20px; }
.docs-nav-links a:not(.btn) { color: var(--text-2); font-size: 13.5px; font-weight: 500; transition: color 0.2s; }
.docs-nav-links a:not(.btn):hover { color: var(--text); }

.docs-hero { position: relative; overflow: hidden; text-align: center; padding: 72px 26px 48px; border-bottom: 1px solid var(--border); }
.docs-hero h1 { font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: 0.5px; background: linear-gradient(120deg, #fff 20%, #a5b4fc 70%, #e879f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 14px; position: relative; z-index: 1; }
.docs-hero > p { color: var(--text-2); font-size: 15px; max-width: 560px; margin: 0 auto 26px; position: relative; z-index: 1; }
.hero-chips { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; position: relative; z-index: 1; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 8px 16px; font-size: 13px; color: var(--text-2); }
.hero-chip .ic { width: 15px; height: 15px; color: var(--primary-2); }
.hero-chip strong { color: var(--text); font-size: 14px; }
.docs-search { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-2); border-radius: 99px; padding: 0 20px; height: 48px; color: var(--text-3); position: relative; z-index: 1; transition: border-color 0.2s, box-shadow 0.2s; }
.docs-search:focus-within { border-color: rgba(99, 102, 241, 0.6); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12); }
.docs-search input { background: none; border: none; outline: none; color: var(--text); font-size: 14px; width: 100%; font-family: inherit; }
.docs-search input::placeholder { color: var(--text-3); }

.docs-section { max-width: 1200px; margin: 0 auto; padding: 42px 26px; }
.docs-section-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin-bottom: 24px; }
.docs-section-title .ic { width: 21px; height: 21px; color: var(--primary-2); }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; transition: border-color 0.25s, transform 0.25s; }
.quick-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.quick-step { position: absolute; top: -14px; left: 22px; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); }
.quick-card h3 { font-size: 15.5px; font-weight: 700; margin: 8px 0 8px; }
.quick-card p { color: var(--text-2); font-size: 13px; margin-bottom: 14px; }
.quick-card p code { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; font-size: 12px; }

.docs-group-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin: 26px 0 16px; }
.docs-group-title small { color: var(--text-3); font-size: 12px; font-weight: 500; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.api-doc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 13px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.api-doc-card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.api-doc-head { display: flex; gap: 13px; align-items: flex-start; }
.api-doc-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.api-doc-path { font-size: 11.5px; color: var(--text-3); margin-top: 4px; word-break: break-all; }
.api-doc-desc { color: var(--text-2); font-size: 13px; flex: 1; }
.api-doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.api-doc-details { border-top: 1px dashed var(--border); padding-top: 12px; }
.api-doc-details summary { cursor: pointer; font-size: 12.5px; color: var(--primary-2); font-weight: 600; user-select: none; outline: none; }
.api-doc-details summary:hover { text-decoration: underline; }
.api-doc-details .code-block { margin-top: 10px; }
.docs-footer { text-align: center; padding: 34px 20px 44px; color: var(--text-3); font-size: 12.5px; border-top: 1px solid var(--border); }
.docs-footer a { color: var(--primary-2); }

/* ============================================================
   介绍首页（Landing）
   ============================================================ */
.land-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 26px; background: rgba(10, 15, 30, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.land-nav-links { display: flex; align-items: center; gap: 20px; }
.land-nav-links a:not(.btn) { color: var(--text-2); font-size: 13.5px; font-weight: 500; transition: color 0.2s; }
.land-nav-links a:not(.btn):hover { color: var(--text); }

/* ---------- 介绍首页（v1.2.1 重构） ---------- */
.land-body { background:
  radial-gradient(900px 480px at 85% -5%, rgba(139, 92, 246, 0.13), transparent 60%),
  radial-gradient(760px 420px at -10% 28%, rgba(34, 211, 238, 0.08), transparent 60%),
  var(--bg);
}
.land-hero { position: relative; overflow: hidden; padding: 72px 26px 56px; border-bottom: 1px solid var(--border); }
.land-hero-grid { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.land-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #c7d2fe; background: var(--grad-soft); border: 1px solid var(--border-2); border-radius: 99px; padding: 6px 14px; margin-bottom: 20px; }
.land-eyebrow .ic { width: 14px; height: 14px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.land-hero h1 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 800; letter-spacing: 0.5px; line-height: 1.32; background: linear-gradient(120deg, #fff 20%, #a5b4fc 70%, #e879f9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 18px; }
.land-hero .land-hero-sub { color: var(--text-2); font-size: 15.5px; max-width: 560px; margin: 0 0 30px; line-height: 1.75; }
.land-hero .land-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.land-hero-note { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; font-size: 13px; color: var(--text-2); }
.land-hero-note .note-ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(52, 211, 153, 0.12); color: var(--green); display: grid; place-items: center; flex: none; }
.land-hero-note .note-ic .ic { width: 14px; height: 14px; }
.land-hero-note strong { color: var(--text); }
/* Hero 右侧：API 调用演示窗口 */
.mock-wrap { position: relative; }
.mock-window { background: linear-gradient(170deg, #151d36, #10172b); border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(99, 102, 241, 0.08); }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--border); }
.mock-dots { display: flex; gap: 6px; flex: none; }
.mock-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.mock-dots i:first-child { background: rgba(248, 113, 113, 0.75); }
.mock-dots i:nth-child(2) { background: rgba(251, 191, 36, 0.75); }
.mock-dots i:nth-child(3) { background: rgba(52, 211, 153, 0.75); }
.mock-url { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-code { font-size: 11px; font-weight: 700; color: var(--green); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.25); border-radius: 6px; padding: 2px 8px; flex: none; }
.mock-body { padding: 16px 18px 18px; }
.mock-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.mock-json { font-family: var(--mono); font-size: 12px; line-height: 1.75; color: #c7d2fe; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--border); border-radius: 11px; padding: 14px 15px; overflow-x: auto; white-space: pre; margin: 0; }
.mock-json .j-k { color: #7dd3fc; }
.mock-json .j-s { color: #6ee7b7; }
.mock-json .j-n { color: #fbbf24; }
.mock-chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; background: rgba(21, 27, 51, 0.92); border: 1px solid var(--border-2); border-radius: 99px; padding: 6px 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); animation: floaty 4.5s ease-in-out infinite; }
.mock-chip .ic { width: 13px; height: 13px; }
.chip-a { top: -14px; right: 18px; color: #a5b4fc; }
.chip-b { bottom: -14px; left: 14px; color: #6ee7b7; animation-delay: 1.2s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.land-hero-stats { position: relative; z-index: 1; max-width: 880px; margin: 52px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 26px; backdrop-filter: blur(8px); }
.land-hero-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.land-hero-stats strong { font-size: 27px; font-weight: 800; background: linear-gradient(120deg, #fff, #a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.land-hero-stats small { color: var(--text-3); font-size: 12.5px; }

.land-section { max-width: 1200px; margin: 0 auto; padding: 58px 26px; }
.land-section-head { text-align: center; margin-bottom: 38px; }
.land-section-head .land-eyebrow { margin-bottom: 14px; }
.land-section-head h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; }
.land-section-head p { color: var(--text-2); font-size: 14px; margin-top: 12px; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.7; }

/* ---------- 平台特性（横向卡片 + 彩色图标瓦片） ---------- */
.land-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.land-feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; gap: 16px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.land-feature:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.land-feature .fi-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.28); }
.land-feature .fi-ic .ic { width: 21px; height: 21px; }
.land-feature .fi-text { min-width: 0; }
.land-feature h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 7px; }
.land-feature p { color: var(--text-2); font-size: 13px; line-height: 1.75; }
.land-feature p code { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.tile-indigo  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.tile-cyan    { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.tile-violet  { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.tile-green   { background: linear-gradient(135deg, #10b981, #34d399); }
.tile-amber   { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.tile-magenta { background: linear-gradient(135deg, #d946ef, #f0abfc); }

.land-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.land-flow-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; transition: border-color 0.25s, transform 0.25s; }
.land-flow-step:hover { border-color: var(--border-2); transform: translateY(-3px); }
.land-flow-step .flow-no { width: 30px; height: 30px; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4); }
.land-flow-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.land-flow-step p { color: var(--text-2); font-size: 12.5px; line-height: 1.75; }
.land-flow-step p code { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; }

.land-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.land-mode { border-radius: var(--radius); padding: 26px 24px; border: 1px solid var(--border); background: var(--surface); position: relative; overflow: hidden; }
.land-mode.mode-free { border-color: rgba(34, 211, 238, 0.32); background: linear-gradient(165deg, rgba(34, 211, 238, 0.1), var(--surface) 62%); }
.land-mode.mode-paid { border-color: rgba(217, 70, 239, 0.32); background: linear-gradient(165deg, rgba(217, 70, 239, 0.1), var(--surface) 62%); }
.land-mode .mode-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.land-mode .mode-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; }
.land-mode.mode-free .mode-ic { background: linear-gradient(135deg, #0ea5e9, #22d3ee); box-shadow: 0 6px 18px rgba(34, 211, 238, 0.3); }
.land-mode.mode-paid .mode-ic { background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 6px 18px rgba(217, 70, 239, 0.3); }
.land-mode .mode-ic .ic { width: 21px; height: 21px; }
.land-mode .mode-head-text { min-width: 0; flex: 1; }
.land-mode h3 { font-size: 17px; font-weight: 800; }
.land-mode .mode-price { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.land-mode .mode-tag { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 4px 10px; flex: none; align-self: flex-start; }
.land-mode .tag-free { color: #67e8f9; background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.3); }
.land-mode .tag-paid { color: #f0abfc; background: rgba(217, 70, 239, 0.12); border: 1px solid rgba(217, 70, 239, 0.3); }
.land-mode ul { list-style: none; display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--border); padding-top: 16px; }
.land-mode li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--text-2); line-height: 1.65; }
.land-mode li .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.land-mode.mode-free li .ic { color: var(--cyan); }
.land-mode.mode-paid li .ic { color: #f0abfc; }
.land-mode li strong { color: var(--text); }

.land-apis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-api { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.25s, transform 0.25s; position: relative; overflow: hidden; }
.land-api::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cat, var(--primary)); opacity: 0.8; }
.land-api:hover { border-color: var(--border-2); transform: translateY(-2px); }
.land-api-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.land-api-head .api-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 9px; min-width: 0; }
.land-api-head .api-name .api-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); background: color-mix(in srgb, var(--cat, #6366f1) 45%, transparent); display: grid; place-items: center; color: #fff; flex: none; }
.land-api-head .api-name .api-ic .ic { width: 15px; height: 15px; }
.land-api p { color: var(--text-3); font-size: 12px; line-height: 1.6; }
.land-api-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- 常见问题 ---------- */
.land-faq { display: flex; flex-direction: column; gap: 12px; max-width: 800px; margin: 0 auto; }
.land-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 15px 20px; transition: border-color 0.2s; }
.land-faq details:hover { border-color: var(--border-2); }
.land-faq details[open] { border-color: rgba(99, 102, 241, 0.35); background: linear-gradient(170deg, rgba(99, 102, 241, 0.07), var(--surface) 70%); }
.land-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; outline: none; }
.land-faq summary::-webkit-details-marker { display: none; }
.land-faq .faq-q { min-width: 0; }
.land-faq .faq-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); flex: none; position: relative; transition: transform 0.2s; }
.land-faq .faq-mark::before, .land-faq .faq-mark::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--text-2); transition: opacity 0.2s; }
.land-faq .faq-mark::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.land-faq .faq-mark::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.land-faq details[open] .faq-mark { transform: rotate(45deg); border-color: rgba(99, 102, 241, 0.4); }
.land-faq details[open] summary { color: #c7d2fe; }
.land-faq details p { color: var(--text-2); font-size: 13px; line-height: 1.75; margin-top: 10px; }
.land-faq details p code { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; padding: 2px 7px; border-radius: 6px; font-size: 12px; }

.land-cta-band { position: relative; overflow: hidden; text-align: center; padding: 66px 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--grad-soft); }
.land-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 220px at 50% 0%, rgba(217, 70, 239, 0.15), transparent 70%); }
.land-cta-band h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; }
.land-cta-band p { color: var(--text-2); font-size: 14px; margin-bottom: 28px; position: relative; z-index: 1; }
.land-cta-band .land-cta { position: relative; z-index: 1; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

.land-footer { padding: 36px 26px 42px; text-align: center; color: var(--text-3); font-size: 12.5px; }
.land-footer .foot-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.land-footer a { color: var(--text-2); transition: color 0.2s; }
.land-footer a:hover { color: var(--text); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .sidebar-close { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; flex: none; }
  .main { margin-left: 0; }
  .topbar-menu { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; flex: none; }
  .topbar-search { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  .land-features { grid-template-columns: repeat(2, 1fr); }
  .land-apis { grid-template-columns: repeat(2, 1fr); }
  .land-flow { grid-template-columns: repeat(2, 1fr); }
  .land-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mock-wrap { max-width: 540px; margin: 0 auto; }
}
@media (max-width: 920px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
}
@media (max-width: 640px) {
  .content { padding: 18px 14px; }
  .topbar { padding: 11px 14px; gap: 10px; }
  .topbar-title h1 { font-size: 15px; }
  .topbar-title p { display: none; }
  .user-name { display: none; }
  .user-chip { padding: 0 5px; }
  .page-head h2 { font-size: 19px; }
  .card { padding: 17px; border-radius: 14px; }
  .stats-grid { gap: 12px; }
  .stat-card { padding: 15px; }
  .stat-value { font-size: 22px; }
  .stat-icon { width: 40px; height: 40px; margin-bottom: 11px; }
  .stat-trend { top: 14px; right: 14px; }
  .form-row { grid-template-columns: 1fr; }
  .icon-picker { grid-template-columns: repeat(5, 1fr); }
  .filter-bar .btn { flex: 1; }
  .modal-actions { flex-direction: column; }
  .modal-actions .btn { width: 100%; }
  .toast-wrap { left: 14px; right: 14px; top: 14px; }
  .toast { max-width: none; }
  .docs-nav { padding: 11px 14px; }
  .docs-nav-links { gap: 12px; }
  .docs-nav-links a:not(.btn) { display: none; }
  /* 「接入指南」等重要入口在手机端保持可见（带 .nav-keep 的链接不被隐藏） */
  .docs-nav-links a.nav-keep { display: inline-flex; font-size: 12.5px; color: #a5b4fc; font-weight: 600; }
  .land-nav { padding: 11px 14px; }
  .land-nav-links { gap: 12px; }
  .land-nav-links a:not(.btn) { display: none; }
  .land-nav-links a.nav-keep { display: inline-flex; font-size: 12.5px; color: #a5b4fc; font-weight: 600; }
  .land-hero { padding: 46px 16px 40px; }
  .land-hero-grid { gap: 34px; }
  .mock-chip { display: none; }
  .mock-json { font-size: 11px; }
  .land-hero-stats { gap: 6px; margin-top: 34px; padding: 15px 10px; }
  .land-hero-stats strong { font-size: 21px; }
  .land-hero-stats small { font-size: 11px; }
  .land-section { padding: 40px 14px; }
  .land-features { grid-template-columns: 1fr; }
  .land-apis { grid-template-columns: 1fr; }
  .land-flow { grid-template-columns: 1fr; gap: 0; }
  .land-modes { grid-template-columns: 1fr; }
  /* 接入流程：手机端时间线 */
  .land-flow-step { background: none; border: none; border-radius: 0; padding: 0 0 26px 50px; position: relative; }
  .land-flow-step .flow-no { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .land-flow-step::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(217, 70, 239, 0.18)); }
  .land-flow-step:last-child { padding-bottom: 0; }
  .land-flow-step:last-child::before { display: none; }
  .land-mode { padding: 22px 18px; }
  /* 手机端参数行：参数名、取值各占一整行，输入框拉满，删除按钮固定在右上角 */
  .at-param-row { display: block; position: relative; padding-right: 38px; margin-bottom: 10px; }
  .at-param-namecell { margin-bottom: 8px; }
  .at-param-valcell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .at-param-valcell input { flex: 1 1 100%; }
  .at-param-row > .icon-btn { position: absolute; top: 0; right: 0; }
  .at-param-lockspace { display: none; }
  .docs-hero { padding: 52px 18px 36px; }
  .docs-section { padding: 30px 14px; }
  .docs-grid { grid-template-columns: minmax(0, 1fr); }
  /* 在线测试面板移动端适配：遮罩留白收紧、输入框 16px 防 iOS 聚焦缩放、结果区限高 */
  .modal-mask { padding: 14px; }
  .form-control { font-size: 16px; }
  .at-json { max-height: 240px; }
  /* 面板紧凑排布：压缩间距，保证「发送请求」按钮无需内部滚动即可见 */
  .modal-test { max-height: 90vh; }
  .modal-test-head { padding: 12px 16px; }
  .modal-test-head h3 { font-size: 15px; }
  .modal-test-body { padding: 14px 16px 16px; }
  .modal-test .form-group { margin-bottom: 12px; }
  .modal-test .form-label { margin-bottom: 6px; }
  .modal-test .form-control { padding: 8px 12px; }
  .modal-test select.form-control { padding-right: 34px; }
  .at-meta { margin: 0 0 10px; }
  .at-param-row { margin-bottom: 10px; }
  .at-actions { margin: 6px 0 0; }
  .hero-stats { gap: 22px; }
  .install-box { padding: 24px 18px; }
  .danger-row { flex-direction: column; align-items: flex-start; }
}

/* 超窄屏（≤380px，如 iPhone SE）：测试面板进一步紧凑，隐藏只读的方法字段 */
@media (max-width: 380px) {
  .modal-test { max-height: 94vh; }
  .modal-test-head { padding: 10px 13px; }
  .modal-test-body { padding: 12px 13px 12px; }
  .modal-test .form-group { margin-bottom: 10px; }
  .modal-test .form-control { padding: 7px 10px; }
  .modal-test .form-label { margin-bottom: 5px; }
  .at-method-group { display: none; }
}

/* 动画：内容淡入 */
.content > * { animation: fadeUp 0.35s ease both; }
.content > *:nth-child(2) { animation-delay: 0.04s; }
.content > *:nth-child(3) { animation-delay: 0.08s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   v1.1 新增：用户体系 / 系统监控 / 用户中心
   ============================================================ */

/* ---------- 区块标题 ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0 14px;
}
.section-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.section-head h3 .ic { width: 16px; height: 16px; color: var(--primary); }

/* ---------- 系统监控卡片 ---------- */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.monitor-card { padding: 16px 18px; }
.monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.monitor-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.monitor-name .ic { width: 15px; height: 15px; color: var(--primary); }
.monitor-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.monitor-badge.ok { color: var(--green); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.1); }
.monitor-badge.err { color: var(--red); border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.1); }
.monitor-value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.monitor-value small { font-size: 13px; color: var(--text-3); font-weight: 500; }
.monitor-value-sm { font-size: 20px; }
.monitor-bar { margin-bottom: 8px; }
.monitor-sub { font-size: 12px; color: var(--text-3); }

/* ---------- 运行环境 ---------- */
.env-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.env-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
}
.env-item span { font-size: 12px; color: var(--text-3); }
.env-item strong { font-size: 13px; font-weight: 600; word-break: break-all; }

/* ---------- 登录页用户入口 ---------- */
.login-entry {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  text-align: center;
}
.login-entry > span { font-size: 12px; color: var(--text-3); }
.login-entry-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.login-foot-link {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-2);
}
.login-foot-link a { color: var(--primary); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.login-foot-link a:hover { text-decoration: underline; }
.login-foot-link .ic { width: 13px; height: 13px; }

/* ---------- 密钥一次性展示 ---------- */
.key-notice { align-items: flex-start; }
.key-notice .ic { margin-top: 3px; }
.key-notice-code {
  display: inline-block;
  margin: 6px 0;
  padding: 6px 10px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 8px;
  color: var(--green);
  font-size: 13px;
  word-break: break-all;
}
.key-notice small { display: block; color: var(--text-3); font-size: 12px; }

/* ---------- 用户中心 ---------- */
.user-cell { display: flex; align-items: center; gap: 10px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.badge-user, .badge-platform { white-space: nowrap; }
.badge-user { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
.badge-platform { background: var(--surface-2); color: var(--text-2); }
.badge-user .dot, .badge-platform .dot { background: currentColor; }

.switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

/* ---------- 快速开始 ---------- */
.quick-start {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.qs-step {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qs-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qs-step strong { font-size: 13px; display: block; margin-bottom: 2px; }
.qs-step p { font-size: 12px; color: var(--text-3); }
.qs-step code { font-size: 12px; color: var(--cyan); }

/* ---------- 响应式补充 ---------- */
@media (max-width: 1180px) {
  .monitor-grid { grid-template-columns: repeat(2, 1fr); }
  .env-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .quick-start { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .monitor-grid { grid-template-columns: 1fr; }
  .env-grid { grid-template-columns: 1fr; }
  .section-head { margin: 20px 0 12px; }
}