/* ============================================================================
   UnlimitCanvas 官网样式（深色 · 与桌面端同一套气质）
   · 只用 CSS 变量，不引任何框架/字体外链（离线可跑、首屏快 ✓）
   · 移动端 720px 以下自动单列
   ============================================================================ */
:root {
  --bg: #0b0e14;
  --bg-soft: #10141d;
  --panel: #131722;
  --card: #161b26;
  --line: #232a38;
  --line-soft: #1c2230;
  --tx-100: #e9edf5;
  --tx-300: #b7c0d0;
  --tx-500: #7d879b;
  --accent: #6366f1;
  --accent-soft: #4f46e5;
  --cyan: #22d3ee;
  --amber: #f59e0b;
  --ok: #34d399;
  --rose: #fb7185;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #17203a 0%, transparent 60%), var(--bg);
  color: var(--tx-300);
  font: 15px/1.65 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 30px; color: var(--tx-100); margin: 0 0 10px; letter-spacing: 0.2px; }
h2 { font-size: 22px; color: var(--tx-100); margin: 0 0 12px; }
h3 { font-size: 16px; color: var(--tx-100); margin: 0 0 6px; }
p { margin: 0 0 10px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 13px; }
code { background: #0e1420; border: 1px solid var(--line-soft); border-radius: 6px; padding: 1px 5px; color: #cfd8ea; }
.small { font-size: 13px; }
.muted { color: var(--tx-500); }
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.wrap-wide { width: min(1360px, 96vw); }
.inline { display: inline; }
.hr { height: 1px; background: var(--line-soft); margin: 14px 0; }
.right { text-align: right; margin-left: auto; }

/* ---------------- 顶栏 ---------------- */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(11, 14, 20, 0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 62px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--tx-100); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--cyan)); color: #08101c; font-weight: 800; }
.brand-sub { color: var(--tx-500); font-weight: 400; font-size: 12px; padding-left: 2px; }
.nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.nav-link { color: var(--tx-300); padding: 6px 10px; border-radius: 9px; font-size: 14px; }
.nav-link:hover { background: #1a2130; color: var(--tx-100); text-decoration: none; }
.nav-link.is-active { color: var(--tx-100); background: #1d2434; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-user { color: var(--tx-500); font-size: 13px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 按钮 ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; background: #1b2231; color: var(--tx-100); transition: filter .15s, background .15s; }
.btn:hover { text-decoration: none; filter: brightness(1.12); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: #fff; border-color: #7b7ffb33; }
.btn-outline { background: transparent; border-color: var(--line); color: var(--tx-100); }
.btn-ghost { background: transparent; color: var(--tx-300); }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------------- 卡片/区块 ---------------- */
main { flex: 1; padding: 26px 0 60px; }
.section { margin-bottom: 34px; }
.section-title { margin-top: 4px; }
.card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.card-title { font-weight: 600; color: var(--tx-100); margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stats { margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-size: 22px; color: var(--tx-100); }
.stat span { color: var(--tx-500); font-size: 13px; }
.note { background: #121a2a; border: 1px solid #22304a; border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px; color: var(--tx-300); font-size: 13.5px; }
.empty { border: 1px dashed var(--line); border-radius: 12px; padding: 26px; text-align: center; color: var(--tx-500); }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------------- 首页 ---------------- */
.hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: center; padding: 26px 0 34px; }
.pill { display: inline-block; font-size: 12.5px; color: #c7d2fe; background: #1b2440; border: 1px solid #2b3a63; border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.hero h1 { font-size: 40px; line-height: 1.2; }
.lead { color: var(--tx-300); font-size: 16px; max-width: 46ch; }
.hero-actions { display: flex; gap: 10px; margin: 18px 0 22px; flex-wrap: wrap; }
.hero-facts { display: flex; gap: 22px; }
.hero-facts b { color: var(--tx-100); font-size: 20px; display: block; }
.hero-facts span { color: var(--tx-500); font-size: 12.5px; }
.hero-card { background: linear-gradient(180deg, #171d2b, #121722); border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); }
.hero-card-title { font-weight: 600; color: var(--tx-100); margin-bottom: 4px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.kv span { color: var(--tx-500); }
.kv b { color: var(--tx-100); font-weight: 600; text-align: right; word-break: break-all; }
.feat { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; }
.feat-ico { font-size: 20px; margin-bottom: 8px; }
.feat p { color: var(--tx-500); font-size: 13.5px; margin: 0; }
.faq details { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.faq summary { cursor: pointer; color: var(--tx-100); }
.faq p { margin: 8px 0 2px; color: var(--tx-500); font-size: 13.5px; }

/* ---------------- 套餐 ---------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.plan-hot { border-color: #4f46e5; box-shadow: 0 0 0 1px #4f46e555, var(--shadow); }
.plan-flag { position: absolute; top: -11px; right: 14px; background: linear-gradient(135deg, var(--accent), var(--cyan)); color: #08101c; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.plan-name { color: var(--tx-100); font-weight: 600; }
.plan-price { font-size: 34px; color: var(--tx-100); margin: 8px 0 12px; font-weight: 700; }
.plan-unit { font-size: 14px; color: var(--tx-500); font-weight: 400; }
.plan-list { list-style: none; padding: 0; margin: 0 0 16px; color: var(--tx-500); font-size: 13.5px; }
.plan-list li { padding: 4px 0 4px 18px; position: relative; }
.plan-list li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); }

/* ---------------- 表单 ---------------- */
label { display: block; margin: 10px 0; font-size: 13.5px; color: var(--tx-500); }
input, select, textarea { width: 100%; margin-top: 5px; background: #0e131d; border: 1px solid var(--line); border-radius: 10px; color: var(--tx-100); padding: 9px 11px; font-size: 14px; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.auth { max-width: 430px; margin: 40px auto; background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 24px; }

/* ---------------- 提示 ---------------- */
.alert { border-radius: 10px; padding: 10px 13px; margin: 12px 0; font-size: 13.5px; border: 1px solid; }
.alert-info { background: #12203a; border-color: #24406b; color: #c7dcff; }
.alert-ok { background: #0f2a22; border-color: #1d5545; color: #b9f0d9; }
.alert-error { background: #2a1420; border-color: #5b2440; color: #ffc9d6; }

/* ---------------- 表格 ---------------- */
.table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; font-size: 13.5px; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table th { background: #131a27; color: var(--tx-500); font-weight: 500; }
.table tr:last-child td { border-bottom: none; }
.notes-row td { color: var(--tx-500); background: #12161f; }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #1d2434; color: var(--tx-300); border: 1px solid var(--line); }
.tag-open { background: #2a2214; border-color: #5a4517; color: #f5d68a; }
.tag-answered { background: #10281f; border-color: #1e5641; color: #a7ebc9; }
.tag-disabled { background: #2a1620; border-color: #5b2438; color: #f7b8c9; }

/* ---------------- 支付 ---------------- */
.pay-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; align-items: start; }
.price { color: var(--amber); font-size: 20px; }
.qr { display: block; width: 220px; height: 220px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; margin: 12px auto; }
.qr-imgs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.qr-box { width: 220px; height: 220px; margin: 12px auto; display: grid; place-items: center; background: #fff; border-radius: 12px; }
.qr-fallback { display: flex; gap: 6px; align-items: center; }
.lic { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
/**
 * ★ .lic-code 是"点一下即复制"的码（处理器在 app.js ✓）——
 *   ⚠ `user-select: all` 是**无脚本兜底**：JS 没跑起来时按住它也会**整段选中** ⇒ Ctrl+C 可用 ✓
 *     （⛔ 别删它 ✗ —— 那会让"关掉 JS 就没法复制"重新成立 ✓✗ 2026-10-10 ＋）
 */
.lic-code { color: var(--cyan); font-size: 15px; letter-spacing: 0.4px; cursor: pointer; user-select: all; }
/** ⚠ 码与「复制」按钮**并列**（⛔ 别嵌套 ✗ 见 front/src/pages/console.js 的 licRow 旁注 ✓） */
.lic-code-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/**
 * ★★ **授权码表各列对齐**（2026-10-10 ＋ 用户："记录水平没对齐" ✓）——
 *
 * ```text
 *  病：`.table td` 全局是 `vertical-align: middle` ✓，而**首格是两行**
 *    （码那行 ＋ 下面那行"永久会员" ✓）⇒ middle 会把其他列**那一行**摆在两行之间
 *    ⇒ 看上去"永久有效 / 绑定设备 / 操作"都掉到第二行去对 ✓✗（截图就是这个 ✓）
 *  ⚠ 之所以原来没这毛病：首格以前只有**一行**（码 ✓）—— 加「复制」按钮那轮
 *    把它变成了 `.lic-code-row`（flex ✓ 码 ＋ 按钮 ✓）＋ 计划名那行 ✓ ⇒ 才两行 ✓
 *  ⇒ 修：**这张表**改成 `top` ⇒ 码那行与状态/绑定设备/解绑/操作**同一水平线** ✓✓
 *    ⚠ 只改**这一张**（`.table-lic` ✓）—— ⛔ 别动全局 `.table` ✗：
 *      别的表（订单/工单）单元格多是单行，middle 在那儿更好看 ✓
 * ```
 */
.table-lic th,
.table-lic td { vertical-align: top; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 14px 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.tab { padding: 6px 12px; border-radius: 9px 9px 0 0; color: var(--tx-500); font-size: 14px; }
.tab.is-active { color: var(--tx-100); background: #1a2130; }

/* ---------------- 工单 / 文档正文（技术手册共用） ----------------
 * ⚠ 2026-10-12：原 `.doclist` / `.docitem` / `.docitem-title` 随「使用手册」页下线一并删除 ✓
 *   （`.doc-body` / `.doc-nav` / `.chip` 等**技术手册仍在用** ⇒ 保留 ✓）
 */
.doc-body { background: var(--card); border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px 22px; color: var(--tx-300); }
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 { color: var(--tx-100); margin: 18px 0 8px; }
.doc-body h1 { font-size: 24px; }
.doc-body h2 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.doc-body h3 { font-size: 16px; }
.doc-body code { background: #0e1420; }
.doc-body pre { background: #0b1017; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; overflow: auto; }
.doc-body pre code { background: none; border: none; padding: 0; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.doc-body th, .doc-body td { border: 1px solid var(--line-soft); padding: 6px 9px; text-align: left; }
.doc-body th { background: #131a27; }
.doc-body blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--accent); background: #121a2a; color: var(--tx-500); }
.doc-body hr { border: none; border-top: 1px solid var(--line-soft); margin: 18px 0; }
.doc-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 4px 10px; border-radius: 999px; background: #1a2130; color: var(--tx-300); font-size: 13px; }

/* ---------------- 技术手册（站内页：左树 ＋ 右正文；正文复用 .doc-body ⇒ 与网站同一套样式 ✓） ---------------- */
.tm { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 18px; align-items: start; }
.tm-tree { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; max-height: 78vh; overflow: auto; position: sticky; top: 78px; }
.tm-grp { margin-bottom: 10px; }
.tm-grp-t { display: flex; justify-content: space-between; gap: 8px; color: var(--tx-100); font-weight: 600; font-size: 13.5px; padding: 4px 2px 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.tm-link { display: block; color: var(--tx-300); font-size: 13.5px; padding: 4px 8px; border-radius: 8px; }
.tm-link:hover { background: #1a2130; color: var(--tx-100); text-decoration: none; }
.tm-link.is-active { background: #1d2434; color: var(--tx-100); font-weight: 600; }
.tm-main { min-width: 0; }

/* ---------------- 技术手册：**专题 banner**（2026-10-12 ＋ 用户：「按专题分类增加 banner，每个专题单独制定手册，
   现在的项目分项太多了，过于拥挤」⇒ 首页=专题墙 → 专题页=该专题手册 → 文档页=左树只列本专题 ✓） ---------------- */
.tm-hero { background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(34,211,238,.07)); border: 1px solid var(--line-soft); border-radius: 16px; padding: 20px 22px; margin-bottom: 18px; }
.tm-hero h1 { margin: 0 0 6px; }
.tm-hero p { margin: 0; color: var(--tx-300); font-size: 13.5px; }
.tm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tm-card { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #171c2a, #121722); border: 1px solid var(--line-soft); border-radius: 15px; padding: 16px 18px; color: inherit; transition: border-color .15s, transform .15s; }
.tm-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.tm-card-ico { font-size: 26px; line-height: 1.1; }
.tm-card-body { min-width: 0; }
.tm-card-no { color: var(--tx-500); font-size: 11.5px; letter-spacing: .1em; }
.tm-card-t { display: block; color: var(--tx-100); font-weight: 700; font-size: 16.5px; margin: 2px 0 6px; }
.tm-card-d { display: block; color: var(--tx-300); font-size: 13px; line-height: 1.6; }
.tm-card-m { display: block; color: var(--tx-500); font-size: 12.5px; margin-top: 9px; }
.tm-crumb { color: var(--tx-500); font-size: 13px; margin-bottom: 12px; }
.tm-crumb a { color: var(--tx-300); }
.tm-topic-head { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(34,211,238,.06)); border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.tm-topic-head .ico { font-size: 24px; }
.tm-topic-head h1 { margin: 0 0 4px; font-size: 22px; }
.tm-topic-head p { margin: 0; color: var(--tx-300); font-size: 13.5px; }
.tm-sub { color: var(--tx-100); font-weight: 600; font-size: 14px; margin: 16px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line-soft); }
.tm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.tm-item { display: block; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; color: inherit; }
.tm-item:hover { border-color: var(--accent); text-decoration: none; }
.tm-item.is-active { border-color: var(--accent); background: #1c2333; }
.tm-item-t { color: var(--tx-100); font-weight: 600; font-size: 14px; }
.tm-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 14px; }
.tm-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--panel); color: var(--tx-300); font-size: 12.5px; }
.tm-chip:hover { border-color: var(--accent); color: var(--tx-100); text-decoration: none; }
.tm-chip.is-on { border-color: var(--accent); background: #1d2434; color: var(--tx-100); font-weight: 600; }
/**
 * ★★★ 知识技能页：**tab 分割 ＋ 技能关系表格**（2026-10-17 ＋ ✓✓ 用户：「网站项目的知识技能需要
 *   用 **tab 分割**，技能列表用**关系表格**进行渲染」✓✓）
 *
 * ```text
 *   ⛔ `.tm-chip` 保留（别处还在用 ✗ 别删）：它表达"**筛选器**" ✓
 *     而 tab 表达"**这一屏是哪一类内容**" ✓ —— 两者语义不同，别互相替代 ✓✗
 *   ⚠ 表格底子一律复用 `.table` ✓（许可证页 / 技术手册那两张表就是它）
 *     这里只有一条覆盖：技能首格是"标题＋摘要"两行 ⇒ 要竖向顶对齐 ✓
 * ```
 */
.tm-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.tm-tab {
  padding: 9px 14px;
  color: var(--tx-300);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tm-tab:hover { color: var(--tx-100); text-decoration: none; }
.tm-tab.is-on { color: var(--tx-100); font-weight: 600; border-bottom-color: var(--accent); }
/* ⚠ 数字**定宽右对齐**（2026-10-17 ＋）：否则 1 位/2 位来回换时 tab 的宽度会跳 ⇒ 看着"飘" ✓✗ */
.tm-tab-n { display: inline-block; min-width: 1.4em; text-align: right; margin-left: 6px; font-size: 12px; color: var(--tx-500); font-weight: 400; }
/**
 * ⚠ 2026-10-17 **修「搜索」按钮字面折行**（用户报：按钮里两个字被挤成上下两行 ✗）——
 *   根因：搜索框没有宽度上限 ⇒ 它把行内剩余宽度吃光 ⇒ 按钮被压到只剩一个字的宽 ✓✗
 *   修：给输入框**定宽**（窄屏再收敛）＋ 按钮 `white-space: nowrap`（中文两字永不折 ✓）
 */
.tm-tabs-search { margin-left: auto; display: flex; gap: 6px; align-items: center; padding: 6px 0; }
.tm-tabs-search input { width: 220px; min-width: 0; }
.tm-tabs-search .btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .tm-tabs-search { width: 100%; margin-left: 0; }
  .tm-tabs-search input { flex: 1; width: auto; }
}
.tm-skill-table td:first-child { vertical-align: top; }
/* ★ 分页条（2026-10-17 ＋ 用户：「知识技能需要按照 50 条分页浏览」✓）—— 列表下方、右对齐 */
.tm-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
  flex-wrap: wrap;
}
.tm-item-d { color: var(--tx-500); font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
@media (max-width: 860px) {
  .tm { grid-template-columns: 1fr; }
  .tm-tree { position: static; max-height: none; }
}
.thread { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.msg { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; }
.msg-admin { background: #121c2c; border-color: #24374f; }
.msg-head { color: var(--tx-500); font-size: 12.5px; margin-bottom: 6px; }
.msg-body { color: var(--tx-300); white-space: pre-wrap; }
.ticket { display: block; padding: 10px; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 8px; color: inherit; }
.ticket:hover { border-color: var(--accent); text-decoration: none; }
.ticket-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--tx-100); }

/* ---------------- 页脚 ---------------- */
.footer { border-top: 1px solid var(--line-soft); background: #0a0d13; padding: 22px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-brand { color: var(--tx-100); font-weight: 600; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-links a { color: var(--tx-500); font-size: 13.5px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .plans, .grid4 { grid-template-columns: 1fr 1fr; }
  .pay-grid, .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .plans, .grid4, .row2, .quick { grid-template-columns: 1fr; }
  .nav { display: none; }
  .hero h1 { font-size: 30px; }
  .table { display: block; overflow-x: auto; }
}

/* ============================================================================
   白模导演台（站点内置页 /previz）——
   · iframe 是**同源**的 `/static/whitemodel/` ⇒ 尺寸由我们给（它内部自己占满 ✓）
   · 高度用 min-height + vh：它在窄屏也要留出可用高度，但别把页面撑成"永远滚不到底"
   · 内嵌页自己带底色（它会跟随皮肤）⇒ 这里只给边框，⛔ 不涂背景色（涂了会"框住"它的皮肤 ✗）
   ============================================================================ */
.previz-frame {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-soft);
}
.previz-frame iframe {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  min-height: 520px;
  border: 0;
}
@media (max-width: 720px) {
  .previz-frame iframe { height: 66vh; min-height: 420px; }
}

/**
 * ★★★ **导演台预览的"最大化"**（2026-10-10 ＋ 用户要求"网站导演台需要能最大化" ✓）——
 *
 * ```text
 *  ## 做法：纯 CSS `:target`（⛔ 没上 JS ✗ —— 本仓口径是"页面基本动作不依赖 JS" ✓）
 *    · 「最大化」＝ 一个指向 `#previz` 的链接 ⇒ 那个 div 成为 `:target` ⇒ 下面这条规则生效 ✓
 *      （`position: fixed; inset: 0` ⇒ **铺满视口** ✓ 与"新窗口全屏"看到的可用面积基本一致 ✓）
 *    · 「还原」＝ 指向 `#previz-top` 的链接 ⇒ `:target` 不再是它 ⇒ 规则自动失效 ✓
 *      ⚠ 那两个 id 是**成对**的（少一个，"还原"就点不动 ✓✗）
 *    · 无脚本、无 fetch、可后退（浏览器后退键能退出最大化 ✓✓）
 *
 *  ## 两个讲究
 *    · `z-index` 要**高于页面其它层**（顶栏等 ✓）但不必离谱 ✓
 *    · `overscroll-behavior: contain` ⇒ 最大化时**别让内层滚动的惯性带动整页** ✓
 *    · iframe 的 `allow` 里保留 `fullscreen` ✓（内层页面自己还有全屏按钮时仍能弹真全屏 ✓）
 * ```
 */
.previz-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.previz-frame:target {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  border: 0;
  border-radius: 0;
  overscroll-behavior: contain;
}
.previz-frame:target iframe { height: 100vh; min-height: 0; }
/**
 * ⚠⚠ **最大化时工具条会被盖住** ⇒ 必须在框里留一条**真能点**的退路 ✓
 *   ⛔ 别用 `::after` 画一个"还原" ✗ —— 伪元素**不是链接**（点了没反应 ⇒ 那是**假入口** ✓✗
 *     本仓最忌"看着像入口、其实进不去" ✓）
 *   ⇒ 所以是**框里的一个真 `<a>`**（页面里 `.previz-exit` ✓）只有最大化时才显形 ✓
 */
.previz-frame > .previz-exit { display: none; }
.previz-frame:target > .previz-exit {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 61;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.72);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
}

/**
 * ★★★ 人机校验（注册 / 登录前 ✓ 2026-10-10 ＋ 用户要求"做机器人判定" ✓）
 *   图与输入同一行；「换一张」＝**重载本页**（无脚本的做法 ✓ 与本仓口径一致 ✓）
 */
.botbox-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bot-img { height: 40px; width: auto; border-radius: 8px; background: var(--bg-soft); box-shadow: var(--shadow); }
.bot-refresh { font-size: 13px; opacity: 0.85; }
/**
 * ⚠ **蜜罐**：真人看不见它（挪出视口 ✓），但脚本会把表单里的字段**挨个填满** ⇒ 填了就露馅 ✓
 *   ⛔ 别写 `display:none` / `visibility:hidden` ✗ —— 不少自动化工具会**跳过不渲染的字段**
 *      （那就白设了 ✓✗）；`left:-9999px` 是"看得见的字段、只是不在屏幕上" ✓
 */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; }