/* ==========================================================================
   theme.css —— 视觉刷新层
   --------------------------------------------------------------------------
   在 styles.css 之后加载，只做"外观提升"，不改类名、不改 DOM 结构，因此无需改动 JS。

   内容：
     1) 设计令牌：统一配色 / 阴影 / 圆角 / 动效
     2) 基础与通用组件：按钮、卡片、输入框、表格、标签
     3) 业务组件：侧栏、余额卡、登录页、代码块、后台 KPI 等
     4) 深色模式（跟随系统）

   回滚：删掉 index.html 里 theme.css 的 <link> 即可，原样式不受影响。
   ========================================================================== */

/* ============================== 1. 设计令牌 ============================== */
:root {
  /* 主色：沿用原有"薄荷绿"色系，加深饱和度 —— 质感更稳重，
     同时把白字对比度从约 2.1:1 提到约 3.3:1，可读性明显改善 */
  --brand: #0fa47c;
  --brand-600: #0c8a69;
  --brand-700: #0a6f55;
  --brand-50: #e9f8f2;
  --brand-100: #c9ecdf;
  --brand-grad: linear-gradient(135deg, #17bb8c 0%, #0b8a69 100%);
  --brand-glow: rgba(15, 164, 124, 0.24);

  /* 中性色：偏冷的灰蓝，比纯灰更耐看 */
  --bg: #f4f7f9;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --sidebar: #ffffff;
  --text: #0d1520;
  --text-2: #4a5768;
  /* M7：原 #7d8b9c 白底仅 3.47:1，13px 小字不达 WCAG AA；加深到 5.11:1（页面底 4.75:1） */
  --text-3: #646f7d;

  --border: #e8eef3;
  --border-2: #d9e2ea;

  --danger: #e5484d;
  --warning: #c9821a;
  --success: #0e8c50;

  /* 双层柔光阴影，替代原来的单层硬阴影 */
  --shadow-sm: 0 1px 2px rgba(13, 21, 32, 0.04), 0 1px 3px rgba(13, 21, 32, 0.05);
  --shadow: 0 2px 6px rgba(13, 21, 32, 0.05), 0 12px 28px rgba(13, 21, 32, 0.07);
  --shadow-lg: 0 12px 32px rgba(13, 21, 32, 0.1), 0 32px 64px rgba(13, 21, 32, 0.08);

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;

  --ring: 0 0 0 3px rgba(15, 164, 124, 0.16);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============ M1 新增：语义状态别名 ============ */
:root {
  /* 语义状态别名 —— 复用已有颜色，语义更清晰 */
  --critical: #e5484d;
  --critical-50: #fef2f2;
  --critical-100: #fed7d6;
  --notice: #c9821a;
  --notice-50: #fffbeb;
  --notice-100: #fde6b9;
  --info: #2563eb;
  --info-50: #eff6ff;
  --info-100: #bfdbfe;

  /* 间距系统 —— 4px 网格 */
  --sp-3: 4px; --sp-4: 6px; --sp-5: 8px; --sp-6: 10px;
  --sp-7: 12px; --sp-8: 14px; --sp-9: 16px; --sp-10: 20px;
  --sp-11: 24px; --sp-12: 32px;

  --lh-tight: 1.25; --lh-normal: 1.5; --lh-loose: 1.7;
  --fs-h3: 16px; --fs-body: 14px; --fs-sm: 13px; --fs-xs: 12px;
  --tracking-tight: -0.01em;
}

/* M1：焦点环（WCAG 2.2 AA） */
.btn:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm);
}
.btn.ghost { color: var(--text-2); }
.btn.ghost:hover { color: var(--text); }

/* M1：骨架屏 */
.skeleton {
  background: linear-gradient(90, var(--border-2) 25%, var(--surface-2) 37%, var(--border-2) 63%);
  background-size: 200% 100%; border-radius: var(--r-sm); overflow: hidden;
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* M1：状态提示条 */
.hint { display: flex; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-7) var(--sp-9);
  border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.hint.ok   { border-color: rgba(14,140,80,.35); background: var(--brand-50); color: var(--brand-700); }
.hint.bad  { border-color: rgba(229,72,77,.3);  background: #fef2f2; color: #b53033; }
.hint.warn { border-color: rgba(201,130,26,.35); background: #fffbeb; color: #8a5a12; }

/* M1：极窄屏（≤480px） */
@media (width <= 480px) {
  .balance-num { font-size: 22px; } .hero { border-radius: var(--r-lg); }
  .card-head { flex-wrap: wrap; row-gap: 4px; } .card-head h3 { font-size: 15px; }
  .plan { font-size: 13px; } .tut-tabs { grid-template-columns: 1fr; }
}


/* ============================ 2. 基础与通用 ============================ */
body {
  background:
    radial-gradient(1100px 460px at 100% -8%, rgba(15, 164, 124, 0.055), transparent 62%),
    var(--bg);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* 细滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: #c8d4de transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cfdae3;
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #aebecb; background-clip: content-box; }

/* ---- 卡片 ---- */
.card {
  border-color: var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card-head h3 { font-size: 15px; letter-spacing: -0.005em; }
.page h2 { font-size: 21px; letter-spacing: -0.015em; }
.empty { padding: 36px 0; }

/* ---- 按钮：渐变主色 + 轻微浮起 ---- */
.btn {
  background: var(--brand-grad);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(13, 21, 32, 0.08), 0 4px 12px var(--brand-glow);
  transition: transform 0.12s var(--ease), box-shadow 0.2s var(--ease), filter 0.15s var(--ease);
}
.btn:hover {
  background: var(--brand-grad);
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(13, 21, 32, 0.08), 0 8px 20px var(--brand-glow);
}
.btn:active { transform: translateY(0); filter: brightness(0.97); }
.btn:disabled {
  background: var(--border-2);
  box-shadow: none;
  transform: none;
  filter: none;
}
.btn.ghost {
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.btn.ghost:hover {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-600);
  filter: none;
  box-shadow: 0 2px 8px var(--brand-glow);
}
.btn.danger {
  background: linear-gradient(135deg, #ef5b60, #d93b41);
  box-shadow: 0 1px 2px rgba(13, 21, 32, 0.08), 0 4px 12px rgba(229, 72, 77, 0.24);
}
.btn.danger:hover { background: linear-gradient(135deg, #ef5b60, #d93b41); filter: brightness(1.05); }
.btn.sm { border-radius: 7px; }

/* ---- 输入框 ---- */
input, textarea {
  border-color: var(--border-2);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
input:hover, textarea:hover { border-color: #c6d2dc; }
input:focus, textarea:focus { border-color: var(--brand); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: #a3b0bd; }

/* ---- 表格 ---- */
.tbl th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 11px 12px;
}
.tbl td { padding: 12px; }
.tbl tbody tr { transition: background 0.12s var(--ease); }
.tbl tr:hover td { background: #f7fbf9; }

/* ---- 标签 ---- */
.tag { font-weight: 500; padding: 3px 10px; }
.tag.paid, .tag.unused { background: var(--brand-50); color: var(--brand-700); }
.tag.pending { background: #fff4e6; color: #b06a00; }
.tag.failed, .tag.used { background: #f0f4f7; color: var(--text-3); }

/* ---- 分页 ---- */
.pg-jump input { border-radius: 7px; }

/* ============================ 3. 业务组件 ============================ */

/* ---- 侧边栏 ---- */
.sidebar { background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%); }
.brand { font-size: 13.5px; letter-spacing: -0.005em; }
.brand .logo { background: var(--brand-grad); border-radius: 8px; box-shadow: 0 4px 12px var(--brand-glow); }
.nav-item {
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: background 0.13s var(--ease), color 0.13s var(--ease);
}
.nav-item .ic { opacity: 0.72; transition: opacity 0.13s var(--ease); }
.nav-item:hover { background: var(--surface-2); }
.nav-item:hover .ic { opacity: 1; }
.nav-item.on {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(15, 164, 124, 0.14);
}
.nav-item.on .ic { opacity: 1; }
.nav-item.on::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 999px;
  background: var(--brand);
}
.nav-sep { font-size: 11px; letter-spacing: 0.03em; }
.logout { border-radius: 9px; }

/* ---- 余额卡 ---- */
.balance-box {
  background: linear-gradient(135deg, rgba(15, 164, 124, 0.1), rgba(15, 164, 124, 0.025));
  border: 1px solid rgba(15, 164, 124, 0.16);
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.balance-box::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 164, 124, 0.2), transparent 70%);
  pointer-events: none;
}
.balance-num { font-size: 25px; font-weight: 700; letter-spacing: -0.025em; color: var(--brand-700); }

/* ---- 控制台首页 ---- */
.hero {
  background: var(--brand-grad);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px var(--brand-glow);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 68%);
  pointer-events: none;
}
.hero-balance { letter-spacing: -0.025em; }

/* ---- 充值套餐 ---- */
.plan { border-radius: 10px; transition: all 0.15s var(--ease); }
.plan:hover {
  border-color: var(--brand);
  background: var(--brand-50);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.plan.on {
  border-color: var(--brand);
  background: var(--brand-50);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.pa { font-weight: 700; letter-spacing: -0.01em; }

/* ---- 支付方式 / 支付信息 ---- */
.pm { border-radius: 10px; transition: all 0.15s var(--ease); }
.pm:hover { border-color: var(--brand); color: var(--brand-700); }
.pm.on {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.pay-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.pay-box img { border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.pay-status.paid { color: var(--success); }

/* ---- 登录 / 注册 ---- */
.auth {
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(15, 164, 124, 0.13), transparent 62%),
    linear-gradient(180deg, #fbfdfc 0%, var(--bg) 70%);
}
.auth-card { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.auth-card .logo { background: var(--brand-grad); border-radius: 18px; box-shadow: 0 10px 28px var(--brand-glow); }
.auth-card h1 { font-size: 22px; letter-spacing: -0.02em; }
.btn-wechat { background: var(--brand-grad); box-shadow: 0 6px 20px var(--brand-glow); }
.btn-wechat:hover { background: var(--brand-grad); filter: brightness(1.05); }
.btn-acct { background: #0f1720; border-radius: 10px; }
.btn-acct:hover { background: #1b2634; }

/* ---- 分段切换（登录页 / 后台共用） ---- */
.acct-tabs { box-shadow: inset 0 0 0 1px var(--border); }
.acct-tabs button { border-radius: 7px; }
.acct-tabs button.on { background: var(--brand-grad); box-shadow: 0 2px 8px var(--brand-glow); }
.admin-tabs { width: fit-content; max-width: 100%; }
.admin-tabs button { font-weight: 500; }

/* ---- 代码块 / 密钥 ---- */
.code-box { background: #111a24; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.code-box pre { color: #7ee2b8; }
.code-box .copy { background: rgba(255, 255, 255, 0.12); border-radius: 6px; transition: background 0.15s var(--ease); }
.code-box .copy:hover { background: rgba(255, 255, 255, 0.24); }
.key-box { border-radius: var(--r-sm); }
.kv-list li code { border-radius: 6px; }
.copy-key { background: var(--brand-grad); border-radius: 7px; transition: filter 0.15s var(--ease); }
.copy-key:hover { filter: brightness(1.08); }
.cs-box { border: 1px solid var(--border); border-radius: var(--r); }
.cs-copy { border-radius: 7px; transition: all 0.15s var(--ease); }
.cs-copy:hover { background: var(--brand-grad); color: #fff; }
.cs-id { color: var(--brand-700); }

/* ---- 教程 / 步骤 ---- */
.tut-tabs { border-radius: var(--r); box-shadow: var(--shadow-sm); }
.tut-tabs button.on { background: var(--brand-grad); box-shadow: 0 2px 8px var(--brand-glow); }
.tut-video video { border-radius: 10px; box-shadow: var(--shadow); }
/* 视频下方的模型提示：独立块元素，绝不叠加进画面；宽度与 .tut-video video 对齐（同为 max 560px），
   随容器自适应；长文本自动换行。颜色全用 token，深色模式自动跟随。 */
.vid-note {
  width: 100%; max-width: 560px; box-sizing: border-box;
  margin: var(--sp-5) 0 0; padding: 10px 12px;
  background: var(--brand-50); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.75;
  overflow-wrap: break-word; word-break: break-word;
}
.vid-note code { font-family: var(--mono); background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px; }
.vid-note b, .vid-note strong { color: var(--brand-700); }
/* ---- 教程重做：系统自动识别条 + 老手折叠区 ---- */
.tut-os { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r);
  padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-5);
  font-size: var(--fs-sm); color: var(--text-2); }
.tut-os .os-icon { font-size: 18px; }
.tut-os b { color: var(--brand-700); }
.os-switch { margin-left: auto; color: var(--brand-700); font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); text-decoration: underline; }
.os-switch:hover { background: var(--brand-100); }
.tut-adv { margin-top: var(--sp-6); border: 1px dashed var(--border-2); border-radius: var(--r);
  padding: var(--sp-5) var(--sp-6); background: var(--surface-2); }
.tut-adv > summary { cursor: pointer; font-weight: 600; color: var(--text-2);
  font-size: var(--fs-sm); padding: var(--sp-3) 0; list-style: none; }
.tut-adv > summary::-webkit-details-marker { display: none; }
.tut-adv > summary:before { content: '▸ '; color: var(--brand); }
.tut-adv[open] > summary:before { content: '▾ '; }
.tut-adv .steps { margin-top: var(--sp-5); }
@media (width <= 480px) { .os-switch { margin-left: 0; } }

.steps-toggle { border-radius: var(--r-sm); }
.steps-toggle:hover { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.step:hover { background: var(--surface); border-color: var(--border-2); }
.num { background: var(--brand-grad); box-shadow: 0 2px 8px var(--brand-glow); }
.step-img { border-radius: 10px; box-shadow: var(--shadow-sm); }
.dl { color: var(--brand-600); }

/* ---- 常见问题 ---- */
.faq details { border-radius: var(--r); overflow: hidden; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.faq details[open] { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.faq summary { font-weight: 550; }
.faq details[open] summary { color: var(--brand-700); }
.faq code { border-radius: 6px; }
.faq .hl { color: var(--brand-600); }

/* ---- 公告条 ---- */
.notice-bar {
  background: linear-gradient(135deg, #fffbf0, #fff6e4);
  border-color: #f4dfb2;
  color: #8a5a12;
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

/* ---- 弹层 ---- */
.tip-mask, .tour-mask { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tip-card, .tour-popover { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
/* 弹窗标题用 h2（避免 h1→h3 跳级），字号钉死成改前的 h3 观感 */
.tip-card h2 { font-size: 18px; margin: var(--sp-4) 0; }
.tour-next { background: var(--brand-grad); box-shadow: 0 2px 8px var(--brand-glow); }
.tour-next:hover { background: var(--brand-grad); filter: brightness(1.05); }
.admin-toast { background: #0f1720; border-radius: 999px; box-shadow: var(--shadow-lg); font-weight: 500; }

/* ---- 管理后台 ---- */
.admin-page { max-width: 1200px; }
.admin-bar h2 { font-size: 21px; letter-spacing: -0.015em; }
.admin-kpi {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.admin-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-grad);
}
.admin-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.admin-kpi .k-label { font-size: 12px; letter-spacing: 0.01em; }
.admin-kpi .k-value { font-size: 23px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.admin-action { border-color: rgba(15, 164, 124, 0.18); border-radius: var(--r-sm); }
.admin-keytext { border-radius: 7px; }
.admin-pre { border-radius: var(--r-sm); }
.route-stat { border-radius: 7px; }
.model-warn { border-radius: var(--r-sm); }
.upstream-picks .pick { border-radius: 999px; transition: all 0.13s var(--ease); }
.upstream-picks .pick:hover { border-color: var(--brand); }
.view-models-btn { background: var(--brand-grad); border-radius: var(--r-sm); }
.view-models-btn:hover { background: var(--brand-grad); filter: brightness(1.05); }
.link-btn { color: var(--brand-600); }
.link { color: var(--brand-600); }

/* ---------------------- 3.1 窄屏细节（≤760px） ---------------------- */
@media (width <= 760px) {
  /* 卡片标题：窄屏下把标题与右侧说明分行，避免互相挤压后各自折行 */
  .card-head { flex-wrap: wrap; row-gap: 4px; }
  .card-head h3 { white-space: nowrap; }
  .card-head > .muted { flex-basis: 100%; }

  /* 教程分段按钮：标签数量不定（3~4 个），窄屏改 2 列网格，
     每个标签独占一行、不折行，避免挤成一坨或被裁掉 */
  .tut-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px; }
  .tut-tabs button { font-size: 11.5px; padding: 8px 4px; white-space: nowrap; }
  .tut-tabs .tab-icon { width: 12px; height: 12px; margin-right: 4px; }

  .admin-kpi .k-value { font-size: 21px; }
}

/* ============================== 4. 深色模式 ============================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1117;
    --surface: #131c25;
    --surface-2: #18232e;
    --sidebar: #0f181f;
    --text: #e9eff5;
    --text-2: #a7b6c4;
    --text-3: #7b8b9b;

    --border: #1f2c38;
    --border-2: #2b3b4a;

    --brand: #19bd90;
    --brand-600: #14a67e;
    /* 深色下"深色文字"要反过来用亮色，才能压在深绿底上 */
    --brand-700: #7fe3c2;
    --brand-50: #12271f;
    --brand-100: #18362b;
    --brand-glow: rgba(25, 189, 144, 0.28);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
    --ring: 0 0 0 3px rgba(25, 189, 144, 0.22);
  }

  body {
    background:
      radial-gradient(1100px 460px at 100% -8%, rgba(25, 189, 144, 0.07), transparent 62%),
      var(--bg);
  }
  ::selection { background: #1c4a3a; color: #c9f6e6; }
  * { scrollbar-color: #31414f transparent; }
  ::-webkit-scrollbar-thumb { background: #31414f; background-clip: content-box; border: 3px solid transparent; }
  ::-webkit-scrollbar-thumb:hover { background: #41556a; background-clip: content-box; }

  /* 侧栏 / 顶栏 */
  .sidebar { background: linear-gradient(180deg, #0f181f, #0c141a); }
  .m-topbar { background: rgba(15, 24, 31, 0.86); }
  .nav-item.on { box-shadow: inset 0 0 0 1px rgba(25, 189, 144, 0.22); }
  .balance-box {
    background: linear-gradient(135deg, rgba(25, 189, 144, 0.14), rgba(25, 189, 144, 0.04));
    border-color: rgba(25, 189, 144, 0.22);
  }
  .balance-box::after { background: radial-gradient(circle, rgba(25, 189, 144, 0.22), transparent 70%); }

  /* 登录页 */
  .auth {
    background:
      radial-gradient(900px 480px at 50% -12%, rgba(25, 189, 144, 0.14), transparent 62%),
      linear-gradient(180deg, #0d151c 0%, #0b1117 70%);
  }
  .btn-acct { background: #e9eff5; color: #0d1520; }
  .btn-acct:hover { background: #ffffff; }

  /* 卡片 / 表格 / 输入 */
  .card { background: var(--surface); }
  .tbl th { background: #18232e; }
  .tbl tr:hover td { background: #182430; }
  input, textarea { background: #101a22; }
  input:hover, textarea:hover { border-color: #35485a; }
  input::placeholder, textarea::placeholder { color: #5f7080; }
  .m-card { background: var(--surface); }

  /* 标签 */
  .tag.paid, .tag.unused { background: #12271f; color: #7fe3c2; }
  .tag.pending { background: #2b2113; color: #e2b165; }
  .tag.failed, .tag.used { background: #1b2631; color: #8b9aa8; }
  .tag.bad { background: #2b1618; color: #f08b90; }

  /* 提示 / 告警 */
  .notice-bar {
    background: linear-gradient(135deg, #2a2213, #231c10);
    border-color: #3d3018;
    color: #e6c88e;
  }
  .model-warn { background: #2a2213; border-color: #3d3018; color: #e6c88e; }
  /* 橙色提醒条：--notice-50 是浅黄、深色块里没有重定义，必须换成深底浅字。
     .sw-tip（向导）与 .sg-note（教程截图口径）是同一套配方，两个都要在这里出现 ——
     漏掉一个就会出现「浅灰字落浅黄底」，深色主题下约 1.6:1，完全读不出来。 */
  .sw-tip, .sg-note { background: #2a2213; border-color: #3d3018; color: #e6c88e; }
  .admin-action.bad { background: #2b1618; border-color: #4a2226; }
  .route-stat { background: #18232e; border-color: #26343f; }
  .admin-toast { background: #e9eff5; color: #0d1520; }

  /* 积分归属提示：--info-50/--info 在深色块里没有重定义，整块换 */
  .ownpts { background: #101a2b; border-color: #22334d; border-left-color: #5b9bf8; }
  .ownpts-title { color: #a8c8ff; }
  .ownpts-text { color: #b8c9e0; }

  /* 代码块与浅底容器 */
  .code-box { background: #080e14; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
  .pay-box { background: var(--surface-2); border-color: var(--border); }
  .pay-box img { background: #fff; }
  .step { background: #18232e; border-color: #23303c; }
  .step:hover { background: #1c2833; border-color: #2b3b4a; }
  .plan:hover, .plan.on, .pm.on { background: #12271f; }
  .upstream-picks { background: #101a22; }
  .admin-pre, .admin-keytext { background: #101a22; }
  .kv-list li code { background: #101a22; }
  .q-btn { background: #18232e; }
  .tip-card, .tour-popover { background: var(--surface); }
  .admin-action { background: var(--brand-50); }
  .down-grid, .acct-tabs, .tut-tabs, .steps-toggle, .cs-box { background: var(--surface-2); }
}

/* M3: 余额倒计时 */
.hero-countdown {
  margin-top: var(--sp-5); font-size: var(--fs-sm);
  color: var(--brand-600); font-weight: 500;
}

/* M3: 功能三宫格 */
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.feature-card {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-7) var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-3);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.fc-icon { font-size: 26px; }
.feature-card strong { font-size: var(--fs-h3); letter-spacing: -0.01em; }

/* ============ 配置向导（2026-09-19 重做：单屏三步，无「下一步」） ============
   设计要点：
     · 三步同屏，靠左侧数字列建立阅读顺序，不靠「下一步」按钮推进 ——
       用户一眼看到全貌，不用猜还剩多少
     · 第 1 步的选择**实时改变第 3 步内容**，所以第 3 步的字段表是活的
     · 数字圆点用 --brand-fill（白字 6.14:1），不用 --brand-grad（白字仅 2.46:1） */
.onboarding {
  margin-bottom: var(--sp-11);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  padding: var(--sp-10) var(--sp-11);
}
/* 收起态：只留一条细横条 + 重新打开入口，不再占首屏 */
.onboarding.is-done {
  padding: var(--sp-7) var(--sp-9); box-shadow: none; background: var(--surface-2);
}
.sw-donebar { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--text-3); }
.sw-link { color: var(--brand-700); font-size: var(--fs-sm); font-weight: 500;
  text-decoration: underline; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.sw-link:hover { background: var(--brand-100); }

.sw-head { margin-bottom: var(--sp-9); }
.sw-head h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.sw-head p { margin: 0; }

.sw-step { display: flex; gap: var(--sp-8); padding: var(--sp-9) 0;
  border-top: 1px solid var(--border); }
.sw-step:last-of-type { border-bottom: 1px solid var(--border); }
.sw-num { flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-fill); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; margin-top: 1px; }
.sw-body { min-width: 0; flex: 1; }
.sw-body h4 { margin: 0 0 var(--sp-7); font-size: var(--fs-body); font-weight: 600; }

/* 第 1 步：软件卡片，选中态给左边框 + ✓（不靠颜色单独传意）。
   原来只有 3 个平台、一行一个正合适；现在收全部 7 个，单列会把首屏拉得很长
   —— 而向导的设计前提是「三步同屏可见」，所以宽屏按 260px 自动分栏。 */
.sw-clients { display: grid; gap: var(--sp-5); }
@media (width > 760px) {
  .sw-clients { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
/* 名称与副标题竖排：分栏后每张卡只剩 260–340px，横排会把副标题挤得乱折行 */
.onclient-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onclient { display: flex; align-items: center; gap: var(--sp-6);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: var(--sp-7) var(--sp-9); margin: 0;
  cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.onclient:hover { border-color: var(--brand); }
.onclient.sel { border-color: var(--brand); border-left-width: 3px; background: var(--brand-50); }
.onclient-icon { font-size: 22px; }
.sw-cname { font-weight: 600; font-size: var(--fs-body); }
.onclient .muted { font-size: var(--fs-xs); }
.onclient .check { margin-left: auto; color: var(--success); font-weight: 700; }
/* 选软件卡片用 <button> 实现（键盘可聚焦 / Enter·空格可选中）：抹掉浏览器默认按钮样式 */
button.onclient { width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); }
button.onclient:hover { background: var(--brand-50); }

/* 第 3 步：字段表 —— 名称 / 值 / 复制 三列，窄屏自动换行 */
.sw-fields { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.sw-field { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.sw-label { flex: none; width: 80px; font-size: var(--fs-sm); color: var(--text-2); }
.sw-val { font-family: var(--mono); font-size: var(--fs-sm); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-6); min-width: 0; overflow-wrap: anywhere; }
.sw-copy { flex: none; font-size: var(--fs-sm); padding: var(--sp-5) var(--sp-7);
  border-radius: var(--r-sm); background: var(--brand-fill); color: #fff; font-weight: 500; }
.sw-copy:hover { filter: brightness(1.1); }

.sw-tip { margin: 0 0 var(--sp-5); padding: var(--sp-6) var(--sp-8);
  background: var(--notice-50); border-left: 3px solid var(--warning);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; color: #8a5a12; font-size: var(--fs-sm); }
.sw-notes { margin: var(--sp-5) 0 0; padding-left: var(--sp-9); color: var(--text-3); font-size: var(--fs-sm); }
.sw-notes li { margin-bottom: var(--sp-3); }
.sw-pick { margin: var(--sp-7) 0 0; }
.sw-more { margin: var(--sp-6) 0 0; font-size: var(--fs-sm); }

/* 成功判据 —— 全向导唯一一句「怎么算成了」，用品牌色压住视觉重心 */
.sw-done { margin: var(--sp-9) 0 0; padding: var(--sp-8) var(--sp-9);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--r); font-size: var(--fs-sm); }
.sw-done strong { display: block; margin-bottom: var(--sp-3); color: var(--brand-700); }
.sw-done p { margin: 0; }

.sw-trouble { margin-top: var(--sp-8); border: 1px dashed var(--border-2);
  border-radius: var(--r); padding: var(--sp-7) var(--sp-9); background: var(--surface-2); }
.sw-trouble > summary { cursor: pointer; font-weight: 600; color: var(--text-2);
  font-size: var(--fs-sm); list-style: none; }
.sw-trouble > summary::-webkit-details-marker { display: none; }
.sw-trouble > summary:before { content: '▸ '; color: var(--brand); }
.sw-trouble[open] > summary:before { content: '▾ '; }
.sw-trouble ul { margin: var(--sp-6) 0 0; padding-left: var(--sp-9);
  color: var(--text-2); font-size: var(--fs-sm); }
.sw-trouble li { margin-bottom: var(--sp-4); }

.sw-actions { margin-top: var(--sp-9); }

/* 手动粘贴 Key 的兜底行（自动取 Key 失败时才出现） */
.sw-manual { margin-top: var(--sp-6); }
.mono-input { font-family: var(--mono);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: var(--sp-5) var(--sp-6); font-size: var(--fs-body);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  width: 100%; max-width: 420px; }
.mono-input:focus { border-color: var(--brand); box-shadow: var(--ring); }
.mono-input.input-err { border-color: var(--danger); }
.err-text { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.mono { font-family: var(--mono); background: var(--surface-2);
  padding: 1px 6px; border-radius: 4px; font-size: 0.92em; }

/* ============ 图文手把手（2026-09-19 新增） ============
   数据在 public/js/guides.js，渲染器 public/js/components/SetupGuide.js。
   两种图：
     · 真截图 —— 整块是 <button>，点开全屏看大图（role=dialog，Esc 可关）
     · 代码画的示意图 —— 复用 styles.css 的 .illust 白卡系。
       白卡**不跟随深色模式**，和 .step-img（真截图）保持同一约定：
       图就是图，白底反而清楚。
   ⚠️ 可点的图必须是 <button>，否则 a11y_scan 会判「可点但键盘不可达」。 */
.sw-guide { margin-top: var(--sp-9); border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface-2); }
.sw-guide > summary { cursor: pointer; font-weight: 600; color: var(--text);
  font-size: var(--fs-body); padding: var(--sp-7) var(--sp-9);
  list-style: none; }
.sw-guide > summary::-webkit-details-marker { display: none; }
.sw-guide > summary:before { content: '▸ '; color: var(--brand); }
.sw-guide[open] > summary:before { content: '▾ '; }
.sw-guide[open] > summary { border-bottom: 1px solid var(--border); }

.sg { padding: var(--sp-8) var(--sp-9) var(--sp-9); }
.sg-lead { margin: 0 0 var(--sp-9); color: var(--text-2); font-size: var(--fs-sm); }
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-11); }
.sg-step { display: flex; gap: var(--sp-7); }
.sg-num { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand-fill); color: #fff; font-size: var(--fs-xs);
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px; }
.sg-body { min-width: 0; flex: 1; }
.sg-title { margin: 0 0 var(--sp-4); font-size: var(--fs-body); font-weight: 600; }
.sg-desc { margin: 0 0 var(--sp-8); color: var(--text-2); font-size: var(--fs-sm); }

/* 真截图：整块可点，点开看大图 */
.sg-shot { display: block; width: 100%; max-width: 560px; padding: 0;
  border: 1px solid var(--border-2); border-radius: var(--r);
  background: var(--surface); cursor: zoom-in; position: relative; overflow: hidden;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.sg-shot:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.sg-shot:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.sg-shot img { display: block; width: 100%; height: auto; }
.sg-zoom-hint { position: absolute; right: var(--sp-5); bottom: var(--sp-5);
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: var(--fs-xs);
  padding: 2px var(--sp-6); border-radius: var(--r-pill); }

/* 代码画的示意图 */
.sg-illust { margin: 0; max-width: 560px; }
.sg-illust .illust-label { width: auto; min-width: 96px; max-width: 46%; }
.sg-illust .illust-input { min-width: 0; overflow-wrap: anywhere; }
/* 配置文件示意：键名比中文标签长（availableModels），给它更宽的一列 */
.sg-code .illust-label { min-width: 132px; font-family: var(--mono); font-size: 12px; }

/* 平台页的图文手把手：这几个平台没有专属教程组件，它就是主教程 ——
   所以从 <details> 折叠块里提出来当正文排（折叠块气质上是「补充材料」）。
   标题用 h3 与卡片标题同级，SetupGuide 传 level=4，不能跳级。 */
.sg-section { margin-top: var(--sp-10); padding-top: var(--sp-9); border-top: 1px solid var(--border); }
.sg-section-title { margin: 0 0 var(--sp-7); font-size: var(--fs-h3); }
/* 版面已经由 .sg-section 给出来了，里面的 .sg 不用再加一圈内边距 */
.sg-section .sg { padding: 0; }

/* 点图放大 */
.sg-lightbox { position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 15, 20, 0.88); padding: var(--sp-10);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6); cursor: zoom-out; }
.sg-lightbox img { max-width: 100%; max-height: 78vh; border-radius: var(--r);
  box-shadow: var(--shadow-lg); }
.sg-lightbox-bar { display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  justify-content: center; }
.sg-lightbox-tip { color: #cbd6e0; font-size: var(--fs-sm); margin: 0; }
/* 键盘用户不能靠"点空白"关闭，给一个真实按钮；它也是打开时接收焦点的元素 */
.sg-lightbox-close { flex: none; font: inherit; font-size: var(--fs-sm); cursor: pointer;
  padding: var(--sp-5) var(--sp-9); border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.12);
  color: #fff; }
.sg-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.sg-lightbox-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }

/* 截图口径提醒 —— 和 .sw-tip 同一套配方（浅黄底 + 深琥珀字）。
   ⚠️ 深色模式必须一起改：--notice-50 是浅色常量，深色块里没有重定义，
      只靠 var(--text-2) 会变成「浅灰字落浅黄底」，约 1.6:1 完全读不出来。 */
.sg-note { margin: var(--sp-10) 0 0; padding: var(--sp-6) var(--sp-8);
  background: var(--notice-50); border-left: 3px solid var(--warning);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: #8a5a12; font-size: var(--fs-sm); }

/* ============ 积分归属提示（2026-09-19 新增） ============
   文案在 copy.js（OWN_POINTS_TITLE / OWN_POINTS_BODY），组件 public/js/components/PointsNotice.js。
   出现位置：配置向导顶部、控制台余额下方、各平台配置页顶部、FAQ 一条。
   客户实际误解：以为积分是客户端官方的，配完在软件里到处找余额 —— 找不到就以为没扣上。
   ⚠️ --info-50 / --info 都是浅色常量，深色块里没有重定义，
      深色下必须整块换（否则浅蓝底 + 浅色字，对比度不到 2:1）。见下方 dark 块。 */
.ownpts {
  display: flex; align-items: flex-start; gap: var(--sp-6);
  margin: 0 0 var(--sp-9); padding: var(--sp-7) var(--sp-9);
  background: var(--info-50); border: 1px solid var(--info-100);
  border-left: 3px solid var(--info);
  border-radius: 0 var(--r) var(--r) 0;
}
.ownpts-icon { flex: none; font-size: 18px; line-height: 1.35; }
.ownpts-body { min-width: 0; }
.ownpts-title { display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-body); font-weight: 600; color: #17429e; }
.ownpts-text { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: #1e3a6b; }
.ownpts.is-compact { padding: var(--sp-6) var(--sp-8); }
/* 向导里紧跟在标题下，不需要那么大的下边距 */
.sw-head + .ownpts { margin-bottom: var(--sp-10); }

/* M2/M3: 窄屏适配 */
@media (width <= 760px) {
  .feature-grid { grid-template-columns: 1fr; }
  .mono-input { width: 100%; box-sizing: border-box; }
  /* 配置向导：窄屏把「数字 + 正文」的两栏压成上下，字段表标签单独占一行 */
  .onboarding { padding: var(--sp-9) var(--sp-8); }
  .sw-step { gap: var(--sp-6); }
  .sw-label { width: 100%; }
  .sw-val { flex: 1 1 100%; order: 2; }
  .sw-copy { order: 3; }
  /* 图文手把手：窄屏把字段示意压成上下两行，图占满宽度 */
  .sg { padding: var(--sp-7) var(--sp-7) var(--sp-8); }
  .sg-step { gap: var(--sp-6); }
  .sg-steps { gap: var(--sp-10); }
  .sg-shot, .sg-illust { max-width: 100%; }
  .sg-illust .illust-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .sg-illust .illust-label { width: 100%; max-width: 100%; min-width: 0; }
  .sg-lightbox { padding: var(--sp-6); }
  .sg-lightbox img { max-height: 72vh; }
}
@media (width <= 480px) {
  .feature-card { padding: var(--sp-5); }
  .onboarding { padding: var(--sp-8) var(--sp-7); }
  .sw-copy, button.onclient { min-height: 44px; }
}


/* ===== M6: 通用平台教程渲染器（PlatformGuide）===== */
.pg-head { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.pg-icon { font-size: 28px; line-height: 1; }
.pg-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pg-title strong { font-size: var(--fs-h3); font-weight: 500; }
.pg-notes { margin: var(--sp-5) 0 0; padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pg-notes li { list-style: none; padding-left: var(--sp-5); position: relative; }
.pg-notes li::before { content: '·'; position: absolute; left: 0; }
.pg-fail { margin-top: var(--sp-7); padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.pg-fail h4 { font-size: var(--fs-body); font-weight: 500; margin-bottom: var(--sp-4); }
.pg-fail ol { margin-left: var(--sp-7); padding-left: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pg-fail ol li { font-size: var(--fs-sm); color: var(--text-2); }
@media (width<=480px) {
  .pg-head { gap: var(--sp-4); }
  .pg-icon { font-size: 24px; }
}

/* ===== M6-c: 移动端（只加不改，桌面零影响）===== */
@media (width<=1024px) {
  /* 触控目标 ≥44px（WCAG 2.2 AA） */
  .nav-item { min-height: 44px; }
}
@media (width<=480px) {
  .copy-key.sm, .btn.sm, .cs-copy { min-height: 44px; }
  /* 字段行换行：标签占一行，值 + 复制按钮占一行，长地址不再溢出 */
  .kv-list li { flex-wrap: wrap; }
  .kv-list li > span { flex: 1 0 100%; }
  .kv-list li code { flex: 1 1 auto; min-width: 0; word-break: break-all; }
  /* 教程标题行换行 */
  .pg-head { flex-wrap: wrap; }
  /* 表格 / 模型网格横向滚动，别撑破页面 */
  .model-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===== M7 验收：WCAG AA 对比度修正 =====
   实测：--brand(#0fa47c) 白底只有 3.17:1 —— 只能用于边框 / 背景 / 图标 / 焦点环；
   凡是「小字文字」一律改用 --brand-700(#0a6f55，6.14:1)。 */
.dl,
.link:hover,
.tag.paid,
.tag.unused,
.model-grid .cap.ok,
.model-row .cap.ok,
.faq .hl,
.faq summary:before {
  color: var(--brand-700);
}

/* 白字填充块专用底色：--brand-grad 亮端(#17bb8c) 配白字只有 ~2.6:1，
   主按钮 / 复制按钮 / 步骤号 这些「白字填充」改用更深的 --brand-fill（白字 ≥6:1）。
   logo / 装饰块继续用 --brand-grad，品牌亮绿观感不变。 */
:root {
  --brand-fill: linear-gradient(135deg, #0a6f55 0%, #085c47 100%);
}
.btn,
.btn-wechat,
.copy-key,
.cs-copy:hover,
.num,
.tour-next,
.view-models-btn,
.acct-tabs button.on,
.tut-tabs button.on {
  background: var(--brand-fill);
}