/* ==========================================================
   AuthMgr 授权中心样式
   ========================================================== */
/* 默认主题（经典蓝）。
   这一层是「变量定义」，不是某套主题的专属值 —— 每套主题都只覆盖这里声明的变量。
   新增主题时若发现要动具体规则，说明变量体系还缺一档语义色，先补变量。
   ⚠️ 改这里时注意：批量替换色值的脚本要**跳过这一整段**，
      否则会把 `--primary: #4f6ef7` 替换成 `--primary: var(--primary)`（自引用，已踩过）。 */
:root {
  /* 主色三兄弟 + 装饰档 */
  --primary: #4f6ef7;
  --primary-dark: #3c56d6;
  --primary-soft: #eef1ff;
  --primary-soft-2: #e0e7ff;      /* 软色第二档（与 primary-soft 组成渐变） */
  --primary-2: #8a5cf6;           /* 主色渐变的第二色 */
  --primary-border: #c7d0fb;      /* 主色系的浅边框（hover / 虚线框） */

  /* 层次：bg（页面底）< surface-3 < surface-2 < card（浮起） */
  --bg: #f5f7fb;
  --surface-3: #f2f4f9;           /* 再深一档：hover 底、代码块、内嵌输入区 */
  --surface-2: #fafbfe;           /* 比 card 深一档：表头、内嵌面板 */
  --card: #ffffff;

  /* 文字 */
  --text: #1f2430;
  --text-muted: #6b7280;
  --brand-text: #0a2540;          /* 品牌中文名的深蓝（暗色主题下要转浅） */
  --accent-2: #32a5e4;            /* 品牌辅助蓝，取自 logo */

  --border: #e5e8f0;
  --danger: #e5484d;
  --danger-soft: #fdebec;
  --danger-border: #f3c2c2;
  --warning: #f5a623;
  --warning-soft: #fdf3e0;
  --success: #2f9e63;
  --success-soft: #e6f6ee;
  --info-soft: #e8f4fd;           /* 文档 / FAQ 的浅蓝底 */

  /* 搜索命中高亮：暗色下必须换，否则浅字配黄底看不清 */
  --mark-bg: #fff3bf;
  --mark-text: #1f2430;

  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --font: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  /* 公告通栏：每级一个「实底 + 白字」的配色。
     通栏是全站每页最顶部的一条色带，必须一眼看到 —— 所以这里用的是饱和度足够的
     实色，而不是 alert 那类浅底深字（浅底在页面最顶上太容易被当成背景忽略掉）。
     每套主题只覆盖变量，需要改这条色带时改这里，不要去动下面的规则。 */
  --notice-info: #3b5bdb;
  --notice-success: #2f8f5b;
  --notice-warning: #b0790c;   /* 深金：浅金色配白字读不清 */
  --notice-danger: #c0363b;
}

/* ==========================================================
   主题
   ──────────────────────────────────────────────────────────
   用法：<html data-theme="dark">；不写（或 default）= 经典蓝。
   **只作用于前台** —— 后台（admin 布局）刻意不带 data-theme：
   管理界面在深色下要额外调一堆表格/表单细节，收益却很低。

   每套主题只覆盖变量、不写具体规则 —— 新增一套只要十几行。
   若某套主题需要新增规则，先想想是不是变量体系缺了一档。
   ========================================================== */

/* 靛紫 */
:root[data-theme="indigo"] {
  --primary: #6d5ef0;
  --primary-dark: #5a49d9;
  --primary-soft: #efedfe;
  --primary-soft-2: #e2ddfd;
  --primary-2: #a855f7;
  --primary-border: #cbc2f7;
  --accent-2: #a855f7;
  --bg: #f7f7fd;
}

/* 青绿 */
:root[data-theme="teal"] {
  --primary: #0d9488;
  --primary-dark: #0b7c72;
  --primary-soft: #e2f5f2;
  --primary-soft-2: #cfeeea;
  --primary-2: #22b8a6;
  --primary-border: #a5dcd5;
  --accent-2: #22b8a6;
  --bg: #f4faf9;
}

/* 暖橙 */
:root[data-theme="amber"] {
  --primary: #e0640c;
  --primary-dark: #bd5209;
  --primary-soft: #fef1e8;
  --primary-soft-2: #fde2cf;
  --primary-2: #f59e0b;
  --primary-border: #fbd0aa;
  --accent-2: #f59e0b;
  --bg: #fbf8f5;
}

/* 暗夜（中性深灰蓝） */
:root[data-theme="dark"] {
  --bg: #12141a;
  --surface-3: #272c37;
  --surface-2: #20242e;
  --card: #1a1d25;

  --text: #e7eaf2;
  --text-muted: #98a1b3;
  --brand-text: #e7eaf2;
  --border: #2b303c;

  --primary: #6b83ff;
  --primary-dark: #5872f5;
  --primary-soft: #222a45;
  --primary-soft-2: #2a3352;
  --primary-2: #a78bfa;
  --primary-border: #3d4663;
  --accent-2: #5eb3ea;

  --danger-soft: #3a2226;
  --danger-border: #5c3236;
  --warning-soft: #3a3020;
  --success-soft: #1e3530;
  --info-soft: #1c2f42;

  --mark-bg: #6b5a17;
  --mark-text: #fff3bf;

  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
}

/* 深海（偏青的深蓝） */
:root[data-theme="ocean"] {
  --bg: #0f1720;
  --surface-3: #21303e;
  --surface-2: #1b2733;
  --card: #16202b;

  --text: #e3ecf5;
  --text-muted: #8fa3b8;
  --brand-text: #e3ecf5;
  --border: #26333f;

  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --primary-soft: #16324a;
  --primary-soft-2: #1b3d59;
  --primary-2: #818cf8;
  --primary-border: #2c4a63;
  --accent-2: #2dd4bf;

  --danger-soft: #3a2226;
  --danger-border: #5c3236;
  --warning-soft: #3a3020;
  --success-soft: #1e3530;
  --info-soft: #16324a;

  --mark-bg: #6b5a17;
  --mark-text: #fff3bf;

  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  /* 粘性页脚：内容不足一屏时页脚仍贴底 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.3; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
p { margin: 0 0 .8em; }
code { font-family: var(--mono); font-size: .92em; }
pre { overflow-x: auto; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section { padding: 34px 20px 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
/* 徽章、短单元格文案不要折行：窄列里"已停用"被拆成两行会很难看 */
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.grow { flex: 1; }

/* ---------- header / footer ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(16, 24, 40, .07); }
.nav-wrap { display: flex; align-items: center; gap: 26px; height: 68px; position: relative; }
.brand { font-weight: 700; font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 10px; }
/* 品牌图形：直接引用 CozyShare 矢量主文件（logo.svg），任意尺寸/DPI 都是原生清晰。
   40px + 10px 间距 = 图形高度的 1/4，正好满足品牌规范的最小安全留白。
   不设 border-radius：图形本身是不规则轮廓 + 透明底，圆角裁切没有意义还可能削到边。 */
.brand-logo { width: 40px; height: 40px; display: block; object-fit: contain; flex-shrink: 0; }
/* 品牌组合（对齐 CozyShare 横版标识：图形 | 逸享软件 / COZYSHARE） */
.brand-divider { width: 1px; height: 30px; background: #dde5f0; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-cn { font-weight: 700; font-size: 18px; color: var(--brand-text); letter-spacing: 1px; }
/* 负 margin 抵消最后一个字母后的字距，使英文行视觉宽度与中文行齐平 */
.brand-en { font-size: 9px; font-weight: 600; letter-spacing: 3.12px; margin-right: -3.12px; color: var(--accent-2); }
/* 导航菜单：粗体 + 圆角胶囊 + 渐变下划线指示条 */
.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2px;
  padding: 8px 14px;
  border-radius: 9px;
  transition: color .18s ease, background-color .18s ease;
}
/* 指示条贴底、由 overflow 裁进圆角；hover 淡显、当前页满显 */
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px;
  background: linear-gradient(90deg, var(--primary), var(--accent-2));
  opacity: 0; transform: scaleX(.35);
  transition: opacity .2s ease, transform .24s cubic-bezier(.34, 1.3, .64, 1);
}
.nav a:hover { color: var(--primary-dark); background: var(--primary-soft); }
.nav a:hover::after { opacity: .5; transform: scaleX(.7); }
.nav a.active { color: var(--primary-dark); background: var(--primary-soft); }
/* 「强调」样式的导航项（后台每项可选 普通/强调）：渲染成主色胶囊，用于"立即购买"这类引导入口。
   放在 .nav a.active / :hover 之后靠顺序覆盖底色 —— 强调项无论是否当前页都保持实底，
   否则它在当前页会退化成浅底，与其他项分不出来。 */
.nav a.is-strong {
  background: var(--primary); color: #fff;
  padding-left: 14px; padding-right: 14px; border-radius: 999px;
}
.nav a.is-strong:hover, .nav a.is-strong.active { background: var(--primary-dark); color: #fff; }
.nav a.is-strong::after { display: none; }   /* 实底胶囊上再叠一条渐变线很脏 */
.nav a.active::after { opacity: 1; transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 移动端导航开关（桌面隐藏） */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 2px; padding: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); cursor: pointer;
}
.nav-toggle:hover { border-color: var(--primary); color: var(--primary); }
.site-footer { border-top: 1px solid var(--border); background: var(--card); margin-top: 50px; padding: 40px 0 20px; }
/* 页脚列区：列数由后台决定（`--fcols`，服务端按**实际渲染的列数**下发）。
   ★ 列宽一律 `minmax(0, 1fr)`：① 增删列时各列自动等宽、不需要改样式；
     ② `minmax(0, …)` 允许列被压到内容宽度以下 —— 少了这个 0，长标题会把整列撑歪、
        窄屏直接横向溢出（`1fr` 的隐含 `auto` 最小值就是这个坑）。
   右侧二维码列是 `auto`（内容宽度），**只在有二维码时**才存在（`.has-qr`）。 */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(var(--fcols, 3), minmax(0, 1fr));
  gap: 30px;
  align-items: start;
}
.footer-grid.has-qr {
  grid-template-columns: 1.7fr repeat(var(--fcols, 3), minmax(0, 1fr)) auto;
}
.footer-about .brand { margin-bottom: 10px; }
.footer-about p { margin: 0; max-width: 320px; font-size: 13.5px; }
.footer-col h4, .footer-qr h4 { margin: 0 0 12px; font-size: 13.5px; letter-spacing: .3px; }
.footer-col a { display: block; color: var(--text-muted); font-size: 13.5px; padding: 4px 0; }
.footer-col a:hover { color: var(--primary); }
/* 二维码区：宽度跟着图片走（`auto` 列里不铺满），文字居中在二维码下方 */
.footer-qr { width: 132px; max-width: 100%; text-align: center; }
.footer-qr h4 { text-align: left; }
.footer-qr img {
  display: block; width: 132px; height: 132px; object-fit: contain;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
}
.footer-qr p { margin: 8px 0 0; font-size: 12.5px; }

/* 页脚窄屏复位：列区退成两列（品牌与二维码各占整行），再窄就单列纵向堆叠 */
@media (max-width: 980px) {
  .footer-grid, .footer-grid.has-qr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about, .footer-qr { grid-column: 1 / -1; }
  .footer-about p { max-width: none; }
}
@media (max-width: 640px) {
  .footer-grid, .footer-grid.has-qr { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .footer-about, .footer-qr { grid-column: auto; }
  /* 单列时二维码块回到左对齐，免得孤零零吊在中间 */
  .footer-qr { text-align: left; }
}
.copyright {
  border-top: 1px solid var(--border); margin-top: 26px; padding-top: 14px; font-size: 13px;
  /* 版权行居中：这一条是全站最收口的信息条，左对齐时在宽屏上会吊在左边、与上方居中的页脚内容脱节 */
  text-align: center;
}
/* 公安备案：图标与备案号**不拆行**
   ★ 刻意**不用** inline-flex：flex 盒要用 `vertical-align: middle` 去对齐外层行，
     实测这让备案号比同一行的「Copyright © …」低 2px（基线与行内其它文字对不齐）。
     图标改回普通 inline 元素 + 显式 `vertical-align`，三者共用同一个行盒 ⇒ 基线严格一致。 */
.copyright .beian { white-space: nowrap; }
.copyright a.beian { color: var(--text-muted); }
/* 官方图标是彩色位图，hover 不改色（改成主色会把它变成一块色块），只让文字变色 */
.copyright a.beian:hover { color: var(--primary); }
/* 标准公安备案图标：按 18×18 原始尺寸渲染（等比不缩放 ⇒ 位图不糊）。
   ★ `-0.42em`（≈ −5.5px）让 18px 的图标在 13px 文字上视觉居中；
     上下都还在行盒内（行高 21.45px）⇒ **不会撑高版权行**。 */
.beian-icon { width: 18px; height: 18px; margin-right: 4px; vertical-align: -0.42em; }

/* ---------- buttons / badges / alerts ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 8px;
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit; line-height: 1.4;
  transition: all .15s ease; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-outline { background: var(--card); border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg); }
.btn-ghost-danger { background: transparent; color: var(--danger); }
.btn-ghost-danger:hover { background: var(--danger-soft); }
.btn-sm { padding: 4px 10px; font-size: 13px; border-radius: 6px; }
.btn-lg { padding: 12px 26px; font-size: 16px; }
.btn-block { width: 100%; }
button.btn { border-width: 1px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: #b47d07; }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-muted { background: var(--surface-3); color: var(--text-muted); }

.alert { padding: 11px 16px; border-radius: 10px; margin: 16px 0; font-size: 14px; }
.alert-success { background: var(--success-soft); color: #1d7a4d; }
.alert-warning { background: var(--warning-soft); color: #9a6b06; }
.alert-danger { background: var(--danger-soft); color: #b23439; }
.alert-info { background: var(--primary-soft); color: var(--primary-dark); }

/* ---------- cards / grids ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.content-card { padding: 22px 24px; margin-bottom: 20px; }
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.two-col { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }

/* ---------- 首页主视觉 · 右列产品轮播 ---------- */
/* ★ 轮播是「主视觉右列的一块」，不再是占满通栏的深色带：
   宽度跟着 hero 那一列走，高度与原「账户中心窗口」一致（337px），
   所以深色底的高度、左列文案的排版都不受轮播有无影响。 */
.hp-slider { position: relative; height: 337px; }
.carousel-slides, .carousel-slide { width: 100%; height: 100%; }
.carousel-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .7s ease; pointer-events: none;
}
.carousel-slide.active { opacity: 1; pointer-events: auto; }
.carousel-sub { font-size: 15px; line-height: 1.6; margin: 0; }
/* 箭头：卡片是浅色底 ⇒ 用深色；平时淡出（不挡内容），悬停/键盘聚焦才显形 */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(15, 20, 30, .07); color: var(--text-muted);
  font-size: 26px; line-height: 1; padding-bottom: 3px;
  opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.hp-slider:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; }
.carousel-arrow:hover { background: rgba(15, 20, 30, .14); color: var(--text); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-dots {
  position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 9px;
}
.carousel-dot {
  width: 9px; height: 9px; border: none; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--border); transition: background .2s, transform .2s;
}
.carousel-dot.active { background: var(--primary); transform: scale(1.2); }

/* ---------- 首页轮播 · 产品图（整张是链接，卡片式） ---------- */
/* 卡片**铺满右列**（与原窗口同尺寸），底色/文字用主题变量：浅色主题白卡、深色主题自动变深卡。 */
.carousel-slide-product {
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.carousel-prod {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 100%;
  padding: 18px 22px 30px; text-align: center;
  background: var(--card); color: var(--text);
  border-radius: 16px; box-shadow: 0 30px 70px rgba(4, 10, 28, .52);
  transition: box-shadow .2s ease;
}
/* ★ 产品封面只限最大高度、**不写死宽高**：产品图多是 205×136 这类小横图，
   写 object-fit:cover 会把封面上的产品名裁掉，写死尺寸会拉伸变形。 */
.carousel-prod-media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 132px; border-radius: 10px; }
.carousel-prod-emoji { font-size: 54px; line-height: 1; }
.carousel-prod-body { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.carousel-prod h2 { margin: 0; font-size: 24px; color: var(--text); }
.carousel-prod .carousel-sub { margin: 0; max-width: 400px; color: var(--text-muted); }
.carousel-prod-foot { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.carousel-prod-price { font-size: 22px; font-weight: 800; color: var(--danger); letter-spacing: -.5px; }
.carousel-prod-price i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
/* 按钮只是"视觉 CTA"：真正的链接是整张卡片那个 <a>（<a> 里不能再套 <a>） */
.carousel-prod .btn { pointer-events: none; }
.carousel-slide-product:hover .carousel-prod { box-shadow: 0 34px 78px rgba(4, 10, 28, .62); }

@media (max-width: 640px) {
  /* 单列布局下轮播落到文案下方：宽度撑满，高度仍保持"窗口"量级 */
  .hp-slider { height: 300px; }
  .carousel-prod { padding: 14px 16px 26px; gap: 8px; }
  .carousel-prod-media img { max-height: 96px; border-radius: 8px; }
  .carousel-prod-emoji { font-size: 44px; }
  .carousel-prod h2 { font-size: 19px; }
  .carousel-prod .carousel-sub { display: none; }
  .carousel-prod-foot { gap: 10px; margin-top: 0; }
  .carousel-prod-price { font-size: 18px; }
  .carousel-dots { bottom: 7px; }
}

/* ---------- product ---------- */
.product-card { padding: 22px; display: flex; flex-direction: column; }
.product-card h3 { margin-bottom: 6px; }
.product-icon { font-size: 26px; line-height: 1; }
.product-icon-lg { font-size: 46px; }
/* 产品封面图：有图用图（object-fit 裁切），无图回落到原来的 emoji 图标 */
.product-cover, .product-cover-card {
  border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, var(--primary-soft), var(--primary-soft-2));
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.product-cover > img, .product-cover-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-cover-lg { width: 104px; height: 104px; }
.product-cover-card { width: 100%; height: 120px; margin-bottom: 14px; border-radius: 12px; }
.product-meta { margin: 10px 0 14px; }
.price { color: var(--danger); font-weight: 700; }
.price-lg { font-size: 26px; }
.product-actions { margin-top: auto; }
.product-hero { display: flex; gap: 20px; align-items: center; padding: 26px 28px; }
.product-hero-body h1 { margin-bottom: 4px; }
.product-hero-actions { display: flex; gap: 10px; margin-top: 10px; }
.plan-card { padding: 24px; position: relative; }
.plan-featured { border-color: var(--primary); box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 18%, transparent); }
.plan-price { margin: 10px 0 14px; display: flex; align-items: baseline; gap: 8px; }
.plan-list { list-style: none; padding: 0; margin: 0 0 18px; color: var(--text-muted); font-size: 14px; }
.plan-list li { padding: 5px 0 5px 22px; position: relative; }
.plan-list li::before { content: "✓"; position: absolute; left: 2px; color: var(--success); font-weight: 700; }
.version-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.version-row:last-of-type { border-bottom: none; }
.version-changelog { margin-top: 3px; }
.download-group h2 { display: flex; align-items: center; gap: 10px; }

/* ---------- docs ---------- */
.doc-card { padding: 22px; display: block; color: var(--text); }
.doc-card:hover { border-color: var(--primary); color: var(--text); }

/* ---------- 文档中心：按分类分组 ---------- */
.doc-group { margin-bottom: 34px; }
.doc-group-head { margin-bottom: 14px; }
.doc-group-head h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 20px; }
.doc-group-head h2 a { color: inherit; text-decoration: none; }
.doc-group-head h2 a:hover { color: var(--primary); }
/* 分类页：面包屑 + 分类切换条 */
.doc-crumb { margin-bottom: 4px; }
.doc-crumb a { color: inherit; }
.doc-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.doc-cat-chip {
  display: inline-block; padding: 6px 14px; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.doc-cat-chip:hover { border-color: var(--primary); }
.doc-cat-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* 文档详情页侧栏：按分类分组的目录 */
.doc-side-group + .doc-side-group { margin-top: 14px; }
.doc-side-cat {
  display: block; margin-bottom: 2px;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--text-muted);
}
a.doc-side-cat { text-decoration: none; }
a.doc-side-cat:hover { color: var(--primary); }
/* 帮助文档卡片封面（三级降级：文档封面 → 正文首图 → 页面设置里的随机缩略图）。
   负 margin 抵消 .doc-card 的 padding，让图满宽贴到卡片圆角上。 */
.doc-cover {
  display: flex; align-items: center; justify-content: center;
  height: 132px; margin: -22px -22px 12px; overflow: hidden;
  background: var(--primary-soft);
  border-radius: var(--radius) var(--radius) 0 0;
}
.doc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-cover-icon { font-size: 34px; }
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
/* 全宽：该文档隐藏了左侧目录栏（视图里整块不渲染），正文占满一行。
   只由 docs.full_width=1 触发；默认不生效 ⇒ 老文档的版式一像素不变。
   （放在 .doc-layout 之后，同特异性下靠顺序覆盖列定义。） */
.doc-layout-full { grid-template-columns: 1fr; }
.doc-side { padding: 18px; position: sticky; top: 80px; }
.doc-links { list-style: none; padding: 0; margin: 0; }
.doc-links li { padding: 6px 0; }
.doc-links li.active a { font-weight: 700; }

/* ---------- 公告通栏（全站每页最顶部，排在 header 之上） ----------
   配色取自 :root 的 --notice-*（实底 + 白字）。**当前是第几条**决定整条色带的
   颜色与置顶描边 —— 由 site.js 在切换时把对应的类挂到 .announce-bar 上。
   ★ 刻意不做 position:sticky：通栏只出现一次、滚动即离场，不长期占用视口高度
     （窄屏尤其明显：一条常驻色带会把首屏内容挤下去）。 */
.announce-bar {
  position: relative;
  color: #fff;
  background: var(--notice-info);
  font-size: 13.5px;
  line-height: 1.5;
}
.announce-bar.announce-success { background: var(--notice-success); }
.announce-bar.announce-warning { background: var(--notice-warning); }
.announce-bar.announce-danger  { background: var(--notice-danger); }
/* 置顶：内描边比"再挂一个小标签"更容易被扫到，也不会把标题挤到换行 */
.announce-bar.is-pinned { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.announce-bar-inner { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
/* stage 必须 min-width:0 —— 否则里面的超长标题会把 flex 撑破，把右侧按钮挤出屏幕 */
.announce-bar-stage { flex: 1; min-width: 0; }
.announce-item { display: none; align-items: center; gap: 10px; min-width: 0; }
.announce-item.active { display: flex; }
.announce-tag {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .38);
  font-size: 12px; font-weight: 600;
}
.announce-pin { flex: none; font-size: 12px; font-weight: 700; }
.announce-item .announce-title {
  min-width: 0; color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.announce-title:hover { text-decoration: underline; }
.announce-nav { flex: none; display: flex; align-items: center; gap: 6px; }
.announce-nav button {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: #fff;
  font-size: 14px; line-height: 1;
}
.announce-nav button:hover { background: rgba(255, 255, 255, .22); }
.announce-count { opacity: .9; font-size: 12px; font-variant-numeric: tabular-nums; }
.announce-all { flex: none; color: #fff; opacity: .9; font-size: 12.5px; white-space: nowrap; }
.announce-all:hover { opacity: 1; text-decoration: underline; }
.announce-close {
  flex: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
  font-size: 16px; line-height: 1;
}
.announce-close:hover { background: rgba(255, 255, 255, .22); }

/* ---------- 公告列表 / 详情 ---------- */
.announce-sec { margin: 26px 0 12px; font-size: 17px; }
.announce-list { display: grid; gap: 12px; }
.announce-card {
  display: block; padding: 18px 20px; color: var(--text);
  border-left: 4px solid var(--primary);
}
.announce-card:hover { border-color: var(--primary); color: var(--text); }
.announce-card.announce-success { border-left-color: var(--success); }
.announce-card.announce-warning { border-left-color: var(--warning); }
.announce-card.announce-danger  { border-left-color: var(--danger); }
/* 已结束：整体降一档存在感，但仍然可读、可点 */
.announce-list-ended .announce-card { opacity: .72; }
.announce-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.announce-card-head h1, .announce-card-head h3 { margin: 0; }
.announce-excerpt, .announce-meta { margin: 8px 0 0; }
/* 卡片里的标签要用浅底深字 —— 通栏那套半透明白是为深色底准备的，放到白卡上会看不见 */
.announce-card .announce-tag {
  background: var(--primary-soft); border-color: var(--primary-border); color: var(--primary-dark);
}
.announce-card.announce-success .announce-tag { background: var(--success-soft); border-color: var(--success-soft); color: #1d7a4d; }
.announce-card.announce-warning .announce-tag { background: var(--warning-soft); border-color: var(--warning-soft); color: #9a6b06; }
.announce-card.announce-danger  .announce-tag { background: var(--danger-soft);  border-color: var(--danger-border); color: #b23439; }
.announce-card .announce-pin { color: var(--primary-dark); }

@media (max-width: 640px) {
  /* 窄屏优先保住标题：左右两边的辅助入口先让位。
     「全部公告」在详情页里有返回入口，切换器让位给自动轮播。 */
  .announce-bar-inner { gap: 8px; }
  .announce-all, .announce-nav { display: none; }
  .announce-item { flex-wrap: wrap; row-gap: 2px; }
  .announce-item .announce-title { white-space: normal; overflow: visible; }
}
.doc-content { min-height: 400px; }
/* FAQ 手风琴（产品详情页） */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { cursor: pointer; padding: 10px 2px; font-weight: 600; list-style-position: outside; }
.faq-item summary:hover { color: var(--primary); }
.faq-item[open] summary { color: var(--primary); }
.faq-answer { padding: 0 2px 12px; color: var(--text-muted); }
.doc-content h1:first-child { margin-top: 0; }

/* markdown */
.markdown { font-size: 15px; }
.markdown h1 { font-size: 24px; }
.markdown h2 { font-size: 19px; margin-top: 26px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.markdown h3 { margin-top: 20px; }
.markdown code { background: var(--surface-3); padding: 2px 6px; border-radius: 5px; }
.markdown pre { background: #14181f; color: #e6e8ee; padding: 14px 16px; border-radius: 10px; font-size: 13.5px; }
.markdown pre code { background: transparent; color: inherit; padding: 0; }
.markdown blockquote { margin: 10px 0; padding: 8px 16px; border-left: 3px solid var(--primary); background: var(--primary-soft); color: var(--text-muted); border-radius: 0 8px 8px 0; }
.markdown table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.markdown th { background: var(--surface-2); }
.markdown img { max-width: 100%; }
/* 图片显示设置：Markdown 里紧跟图片的 `{width=300 height=200 align=center float}`
   由 helpers.php::md_image_settings() 解析成下面这些 class / style。
   注意 class 名两边必须一致（后台弹窗生成语法、前台这里负责渲染）。 */
.markdown img.md-img-center { display: block; margin-left: auto; margin-right: auto; }
.markdown img.md-img-right { display: block; margin-left: auto; }
.markdown img.md-img-float-left { float: left; margin: 4px 16px 12px 0; }
.markdown img.md-img-float-right { float: right; margin: 4px 0 12px 16px; }
/* 浮动图没显式给宽度时兜一个上限，否则宽图会把正文挤成一条 */
.markdown img.md-img-float-left:not([style*="width"]),
.markdown img.md-img-float-right:not([style*="width"]) { max-width: 50%; }
/* 浮动图会让随后的块级元素压到它旁边/下面：标题必须让开 */
.markdown h1, .markdown h2, .markdown h3 { clear: both; }
/* 末尾若是浮动图，容器要包住它，否则会溢出到文章卡片之外 */
.markdown::after { content: ''; display: block; clear: both; }

/* ---------- 正文里的视频（自托管 <video> / 外链 iframe 播放器） ----------
   外层的 .md-video 只在"独占一段"时才有 —— 行内那层不能包 div（div 进 p 会被浏览器
   提前闭合 p，结构直接坏掉），所以行内只有元素本身。
   尺寸与对齐挂在 .md-video 上，元素 width:100% 撑满它。 */
.md-video { display: block; margin: 14px 0; max-width: 100%; }
.md-video.md-img-center { margin-left: auto; margin-right: auto; }
.md-video.md-img-right { margin-left: auto; }
.md-video.md-img-float-left { float: left; width: auto; max-width: 50%; margin: 4px 16px 12px 0; }
.md-video.md-img-float-right { float: right; width: auto; max-width: 50%; margin: 4px 0 12px 16px; }
.md-video-el {
  display: block; width: 100%; max-width: 100%;
  border: 0; border-radius: 10px;
  background: #000;   /* 播放器底色恒为黑：与主题无关，深色主题下也不会出现白边 */
}
/* 跨域 iframe 没有固有尺寸，必须给比例占位，否则加载前高度塌成 0、页面会跳一下 */
.md-video-frame { aspect-ratio: 16 / 9; }
.markdown ul, .markdown ol { padding-left: 24px; }

/* ---------- auth ---------- */
.auth-wrap { display: flex; justify-content: center; }
.auth-card { width: 420px; max-width: 100%; padding: 30px 32px; }
.auth-alt { margin-top: 14px; text-align: center; }
/* 密码找回：表单下方的说明块。比正文灰一档 + 浅底，
   与上方输入框在视觉上拉开，避免被误当成"还要填的字段"。 */
.auth-note {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  line-height: 1.6;
}

/* ---------- forms ---------- */
.form-group { margin-bottom: 14px; flex: 1; }
.form-group label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--text);
  transition: border .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
textarea { resize: vertical; }
.form-row { display: flex; gap: 14px; }
.form-row .form-icon { flex: 0 0 110px; }
/* 封面图字段（后台产品表单）：地址框不需要横贯整行，给一个上限，
   预览格因此紧贴在它右侧；空间不足时仍可收缩（≤640px 整行转纵向）。 */
.form-row .cover-cell { flex: 1 1 auto; max-width: 520px; }
/* 封面图预览（后台产品表单） */
.form-row .preview-cell { flex: 0 0 190px; }
.cover-preview {
  width: 176px; height: 108px; border: 1px dashed var(--border); border-radius: 10px;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cover-preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* 封面图地址 + 「从图片库选择」按钮同行 */
.cover-pick { display: flex; gap: 8px; align-items: center; }
.cover-pick input { flex: 1 1 auto; min-width: 0; }
.cover-pick .btn { flex: 0 0 auto; }
.form-block button { margin-top: 4px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type=text] { width: 240px; }
.toolbar select { width: auto; }
.switch { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.switch input { width: auto; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* EasyMDE 工具栏"表格"按钮类名同为 table，排除数据表格样式避免按钮被拉满整行 */
.editor-toolbar .table { width: auto; border-collapse: separate; font-size: inherit; padding: 0; border-bottom: none; }
.editor-toolbar .table:hover { background: var(--surface-2); }
.table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.order-no, .license-key, .license-key-sm, .machine-code { font-family: var(--mono); }
.license-key { font-size: 17px; letter-spacing: 1px; background: var(--primary-soft); color: var(--primary-dark); padding: 6px 12px; border-radius: 8px; font-weight: 600; }
.license-key-sm { font-size: 13px; }
.machine-code { font-size: 12.5px; }

/* ---------- account licenses ---------- */
.license-card { }
.license-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.license-head h3 { display: flex; align-items: center; gap: 10px; }
.license-body { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.license-key-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.license-side { display: flex; gap: 8px; }
/* ---------- admin secret fields ---------- */
.secret-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.secret-actions form { margin: 0; }

/* ---------- 品牌标识（后台「系统管理 → 品牌标识」）----------
   预览区刻意还原**真实底色**：前台是浅色底、后台侧边栏是深色底 ——
   不这么做，管理员会"传上去之后才发现深色底上根本看不清"。 */
.brand-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px; padding: 16px; margin: 12px 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.brand-preview img { display: block; max-width: 100%; max-height: 64px; }
.brand-preview-light { background: var(--bg); }
/* 与后台侧边栏同色（刻意硬编码：这里模拟的是那个固定深色区域，不跟随主题变量） */
.brand-preview-dark { background: #16203c; }
.brand-preview-fav { min-height: 0; padding: 12px; }
.brand-preview-fav img { width: 32px; height: 32px; max-height: none; }
.brand-preview-lg img { width: 64px; height: 64px; }
.brand-fav-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; margin: 14px 0; }
.brand-fav-cell { text-align: center; }
.brand-fav-note { text-align: left; max-width: 340px; flex: 1 1 220px; }
.brand-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.brand-actions form { margin: 0; }
.brand-msg-ok { color: var(--success); }
.brand-msg-error { color: var(--danger); }
.brand-msg-busy { color: var(--text-muted); }

/* ---------- 主视觉背景图（后台「页面设置 → 主视觉背景大图」的效果预览）----------
   刻意用主视觉真实的深色底与光晕（硬编码，不跟随后台浅色主题）：
   管理员在这里看到的必须就是前台那块长什么样，否则"透明度/压暗"根本调不出结论。 */
.hb-prev {
  position: relative; overflow: hidden; height: 180px;
  margin: 10px 0 6px; border: 1px solid var(--border); border-radius: 12px;
  background: #0d1322;
}
.hb-prev-img { position: absolute; inset: 0; }
.hb-prev-dim { position: absolute; inset: 0; }
.hb-prev-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(320px 190px at 10% 6%, rgba(59, 130, 246, .55), transparent 62%),
    radial-gradient(280px 170px at 92% 10%, rgba(139, 92, 246, .45), transparent 64%);
}
.hb-prev-copy {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; color: #fff;
}
.hb-prev-copy b { font-size: 19px; line-height: 1.2; }
.hb-prev-copy span { font-size: 12.5px; opacity: .86; }
.hb-prev-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #8e9bbc; font-size: 13px;
}
/* 表单里的"一行一个复选框"（默认 label 是块级 + 粗体，单独用会顶出一行粗字） */
.check-inline { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }

/* ---------- pay cashier ---------- */
.pay-wrap { display: flex; justify-content: center; }
.pay-card { width: 560px; max-width: 100%; padding: 30px 34px; }
.pay-head { display: flex; justify-content: space-between; align-items: center; }
.pay-order { text-align: center; margin: 14px 0 22px; }
.pay-amount strong { font-size: 34px; color: var(--danger); }
.pay-box { text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); padding: 26px 18px; }
.qr-box { display: flex; justify-content: center; margin-bottom: 12px; }
.qr-box img { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fff; }
.pay-tip { font-size: 16px; font-weight: 600; }
.pay-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.channel-list { display: flex; flex-direction: column; gap: 10px; }
.channel-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 13px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; font-family: inherit; font-size: 14px; transition: border .15s ease;
}
.channel-item:hover { border-color: var(--primary); }
.channel-name { font-weight: 700; font-size: 15px; }

/* ---------- email code ---------- */
.code-row { display: flex; gap: 10px; }
.code-row input { flex: 1; min-width: 0; }
.code-row .btn { flex: none; white-space: nowrap; }
.mail-toast {
  position: fixed; left: 50%; top: 24px; transform: translate(-50%, -12px);
  z-index: 9999; padding: 10px 18px; border-radius: 10px; font-size: 14px;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
}
.mail-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mail-toast-ok { background: #16a34a; color: #fff; }
.mail-toast-warn { background: #d97706; color: #fff; }

/* ---------- slider captcha ---------- */
.slider-captcha { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.sc-image {
  position: relative; width: 300px; height: 150px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg);
}
.sc-bg { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.sc-piece {
  position: absolute; top: 0; left: 0; width: 64px; height: 64px;
  user-select: none; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}
.sc-refresh {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: none; border-radius: 7px; background: rgba(15, 20, 30, .45); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
}
.sc-refresh:hover { background: rgba(15, 20, 30, .68); }
.sc-track {
  position: relative; width: 300px; height: 40px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  user-select: none;
}
.sc-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--primary-soft); }
.sc-fill.ok { background: var(--success-soft); }
.sc-track-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-muted); pointer-events: none; white-space: nowrap;
}
.sc-handle {
  position: absolute; top: 0; left: 0; width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .14); cursor: grab; touch-action: none; padding: 0;
}
.sc-handle::before { content: '\226b'; color: var(--text-muted); font-size: 15px; font-weight: 700; }
.sc-handle:active { cursor: grabbing; }
.is-success .sc-handle { background: var(--success); border-color: var(--success); }
.is-success .sc-handle::before { content: '\2713'; color: #fff; }
.is-success .sc-track-text { color: #1d8a4c; font-weight: 600; }
.is-error .sc-image { animation: sc-shake .35s ease; }
@keyframes sc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ---------- admin ---------- */
.admin-body { display: flex; flex-direction: row; min-height: 100vh; background: var(--bg); }
/* 侧栏高度锁死 100vh（sticky 常驻），所以它内部**必须自己消化溢出**：
   `overflow: hidden` 兜底 —— 否则内容一多就画到视口外面去，谁也看不见、谁也滚不到。 */
.admin-side {
  width: 210px; flex-shrink: 0; background: #171c28; color: #cdd3e0;
  display: flex; flex-direction: column; padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.admin-side .brand { color: #fff; margin-bottom: 22px; padding-left: 6px; flex: none; }
/* 后台侧栏只有 210px 宽，40px 的 logo 在这一栏里偏重，比前台导航收敛一档 */
.admin-side .brand-logo { width: 34px; height: 34px; }
/* ★★ 导航区是**唯一**的滚动容器（品牌与「返回前台」常驻不动）。
   三个属性缺一不可：
     · flex: 1 1 auto —— 吃掉品牌与底部之间的全部剩余高度，滚动条才有"管道"；
     · min-height: 0 —— flex 子项默认 `min-height: auto`（= 不许压到内容高度以下），
       不显式归零，`overflow-y: auto` 根本不会生效，菜单照旧溢出到视口外（最经典的 flex 坑）；
     · overflow-y: auto —— 真正产生滚动条。
   ⇒ 二级菜单再多也只是这一栏内部滚动，不会再把「SEO 设置」之后的项挤到看不见。 */
.admin-nav {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px;   /* 给滚动条让位，右侧文字不被压住 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
/* 深色栏里默认的亮色滚动条很扎眼，压成一条细的 */
.admin-nav::-webkit-scrollbar { width: 6px; }
.admin-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.admin-nav::-webkit-scrollbar-track { background: transparent; }
.admin-nav a { color: #aeb6c8; padding: 9px 12px; border-radius: 8px; font-size: 14px; flex: none; }
.admin-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav a[data-admin].active { background: var(--primary); color: #fff; }
/* 导航分组（如：系统管理） */
/* 分组与条目一律 flex: none —— 滚动容器里的子项若被压缩，条目会变矮甚至叠在一起，
   而我们要的是"装不下就滚"，不是"挤一挤"。 */
.nav-group { flex: none; }
.nav-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: #aeb6c8; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-caret { font-size: 11px; opacity: .7; transition: transform .15s ease; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-group-body { display: none; flex-direction: column; gap: 2px; margin: 2px 0 2px 12px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); }
.nav-group.open .nav-group-body { display: flex; }
.nav-group-body a { color: #9aa2b5; padding: 7px 12px; font-size: 13.5px; flex: none; }
.admin-side-bottom { margin-top: auto; padding: 0 12px; font-size: 13px; flex: none; }
.admin-side-bottom a { color: #8b93a7; }
.admin-main { flex: 1; min-width: 0; padding: 22px 28px 40px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.admin-topbar h1 { font-size: 22px; margin: 0; }
.admin-content .container { padding: 0; max-width: none; }

/* ---------- 后台「页面设置 → 导航菜单」配置表 ---------- */
/* 表格里的输入框不铺满单元格（一行里还有选择框/勾选项），宽度按用途给 */
.nav-cfg td { vertical-align: top; }
.nav-cfg input[type="text"], .nav-cfg select { width: 100%; }
.nav-cfg .check-inline { margin-top: 6px; }
/* 上下移按钮：上下叠放，一列就够，不占表格宽度 */
.nav-mv-cell { white-space: nowrap; }
.nav-mv {
  display: block; width: 22px; height: 20px; padding: 0; margin: 0 0 2px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--text-muted);
  border-radius: 4px; font-size: 10px; line-height: 1;
}
.nav-mv:hover { border-color: var(--primary); color: var(--primary); }
/* 被隐藏的行整行压暗，一眼能看出"它在但前台不显示" */
.nav-off { background: var(--surface-3); }
.nav-off td { opacity: .62; }
/* 新增行：与已有项拉开一点，且背景不同，避免误以为是已配置的一项 */
.nav-cfg tr.nav-new td { background: var(--surface-2); }
/* 新增区的分节标题：横跨整行，一眼看出下面四行都是"待填的新增项" */
.nav-cfg tr.nav-new-head td {
  background: var(--surface-3); font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding-top: 8px; padding-bottom: 8px;
}
.nav-cfg .badge { white-space: nowrap; }
/* 目标单元格里的徽章与控件排一行 */
.nav-cfg td .badge + select, .nav-cfg td .badge + input { margin-left: 6px; }
/* ---------- 后台：配置表（页脚 / 首页内容共用） ----------
   ★ 类名沿用 `footer-cfg`：两页都是同一种表（一组平行数组 + ▲▼ 排序 + 常驻的新增空行），
     共用一份样式才能保证"两页看起来是一套东西"。别再复制一份改颜色。
   页脚那份用 <tbody> 把"一列"括起来（head 行 + 该列的条目行）——
   扁平成一堆行之后，管理员分不清"这条属于哪一列"。
   列与列之间用粗一点的横线分隔，行内用浅色底标示"这是常驻的新增行"。 */
.footer-cfg td { vertical-align: top; }
.footer-cfg input[type="text"], .footer-cfg select { width: 100%; }
/* 图标下拉右侧的实物预览（首页内容页；所见即前台所得） */
.hc-ico-prev {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; margin-top: 4px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--primary);
}
.footer-cfg .check-inline { margin-top: 6px; }
.footer-cfg tbody + tbody { border-top: 2px solid var(--border); }
.footer-cfg tbody.fcol-new { border-top: 2px dashed var(--border); }
/* 列头行：整行浅底 + 类型/标题并排，一眼看出"这一列是什么" */
.footer-cfg tr.fcol-head td { background: var(--surface-2); font-weight: 600; }
.footer-cfg tr.fcol-head td:nth-child(2) { display: flex; gap: 8px; align-items: center; }
.footer-cfg tr.fcol-head td:nth-child(2) select { width: 150px; flex: none; }
.footer-cfg tr.fcol-head td:nth-child(2) input { width: auto; flex: 1 1 auto; }
/* 条目行：左侧一个窄窄的"把手"列，条目名与列头对齐关系看得清 */
.footer-cfg .fitem-grip { width: 58px; color: var(--text-muted); text-align: center; }
.footer-cfg .fitem td { background: transparent; }
.footer-cfg tr.fitem-new td { background: var(--surface-2); }
.footer-cfg tr.fitem-hint td { background: var(--surface-3); }
.footer-cfg .badge { white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { padding: 14px 18px; }
.stat-card p { margin: 0 0 4px; font-size: 13px; }
.stat-card h2 { font-size: 22px; margin: 0; }
.small-card { padding: 16px 20px; margin-bottom: 16px; }
.table td form.inline { display: inline-block; margin: 1px 0; vertical-align: middle; }
.extend-form { display: inline-flex !important; align-items: center; gap: 4px; white-space: nowrap; }
.extend-form input { width: 70px; padding: 4px 8px; font-size: 13px; }
.pwd-form { display: inline; }
.error-detail { background: #14181f; color: #ffb4b6; padding: 12px 16px; border-radius: 8px; text-align: left; font-size: 13px; }

/* ---------- bundle ---------- */
.bundle-card { position: relative; border-color: var(--primary); }
.bundle-badge {
  position: absolute; top: 14px; right: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 999px;
}
.bundle-items { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bundle-item {
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 6px; padding: 4px 10px; font-size: 13px; width: fit-content;
}
.child-card { display: block; color: var(--text); }
.child-card:hover { border-color: var(--primary); color: var(--text); }
.bundle-picker { display: flex; flex-wrap: wrap; gap: 8px 18px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.bundle-pick { margin: 0; }

/* ---------- images & editor ---------- */
.upload-row { display: flex; gap: 10px; align-items: center; }
.upload-row input[type=file] { border: 1px dashed var(--border); border-radius: 8px; padding: 10px 14px; background: var(--card); }

/* ---------- 图片上传队列（拖拽 / 上传前预览 / 进度 / 插入光标） ---------- */
.up-panel { margin-bottom: 12px; }
.up-drop {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  border: 2px dashed var(--border); border-radius: 10px; background: var(--surface-2);
  padding: 16px 18px; transition: border-color .15s ease, background .15s ease;
}
.up-drop:hover { border-color: var(--primary-border); background: var(--surface-2); }
.up-drop.is-drag { border-color: var(--primary); background: var(--primary-soft); }
.up-drop:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.up-drop-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.up-drop-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.up-drop-main strong { font-size: 14.5px; }
.up-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; min-height: 22px; }
.up-toolbar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.up-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 320px; overflow-y: auto; }
.up-empty { margin: 0; }
.up-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--card);
}
.up-item.is-uploading { border-color: var(--primary-border); }
.up-item.is-done { border-color: #bfe3cd; background: var(--success-soft); }
.up-item.is-error { border-color: var(--danger-border); background: var(--danger-soft); }
.up-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 7px; object-fit: cover;
  background: var(--surface-3); border: 1px solid var(--border);
}
.up-thumb-bad { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--danger); }
.up-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.up-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.up-status { flex: 0 0 auto; }
.up-progress { flex: 1 1 auto; max-width: 220px; height: 5px; border-radius: 999px; background: #e8ecf5; overflow: hidden; }
.up-progress > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent-2)); transition: width .15s linear; }
.up-hint { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-item.is-error .up-hint { color: var(--danger); }
.up-actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* 编辑器页（sink 模式）：整页不渲染任何上传 UI，只留一个隐藏文件输入的挂载点，
   所以这里没有任何 .up-panel 相关规则 —— 出问题时的出口是右下角浮层。 */
.up-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
.up-toast {
  background: var(--card); border: 1px solid var(--danger-border); border-left: 4px solid var(--danger);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 26px rgba(16, 24, 40, .14);
}
.up-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.up-toast-head strong { font-size: 13.5px; color: var(--danger); }
.up-toast-close {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.up-toast-close:hover { color: var(--text); }
.up-toast-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-toast-msg { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.up-toast-actions { margin-top: 8px; }

/* ---------- 图片库弹窗（编辑器工具栏「图片」按钮的落点） ---------- */
body.ml-lock { overflow: hidden; }
.ml-mask {
  position: fixed; inset: 0; z-index: 300; display: none;
  background: rgba(16, 24, 40, .5); padding: 24px;
  align-items: center; justify-content: center;
}
.ml-mask.is-open { display: flex; }
.ml-dlg {
  background: var(--card); border-radius: 12px; width: min(1000px, 100%);
  max-height: min(760px, 100%); display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .28); overflow: hidden;
}
.ml-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.ml-head strong { font-size: 15px; }
.ml-close { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 2px; }
.ml-close:hover { color: var(--text); }
.ml-tools { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.ml-search { flex: 1 1 auto; max-width: 320px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }
.ml-count { flex: 0 0 auto; }
.ml-tools-right { margin-left: auto; flex: 0 0 auto; }
.ml-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; }
.ml-body.is-drag { background: var(--primary-soft); outline: 2px dashed var(--primary); outline-offset: -6px; }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; align-content: start; }
.ml-empty { margin: 8px 0; }
.ml-tile {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left;
}
.ml-tile:hover { border-color: var(--primary-border); }
.ml-tile.is-sel { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.ml-tile img { display: block; width: 100%; height: 92px; object-fit: cover; background: var(--surface-3); }
.ml-tile-cap { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px; }
.ml-tile-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-tile-dim { font-size: 11px; color: var(--text-muted); }
.ml-tick {
  position: absolute; top: 6px; right: 6px; display: none;
  width: 20px; height: 20px; border-radius: 999px; background: var(--primary);
  color: #fff; font-size: 12px; line-height: 20px; text-align: center;
}
.ml-tile.is-sel .ml-tick { display: block; }
.ml-status { padding: 0 18px 10px; min-height: 18px; }
/* 插入图片弹窗的「显示设置」（宽 / 高 / 位置）—— 会随图片一起写进 Markdown。
   用 .ml-settings 前缀压过全局 input/select 的 width:100%，否则控件会被撑满整行 */
.ml-settings {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.ml-set-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.ml-set-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.ml-set-field > span { flex: 0 0 auto; }
.ml-settings .ml-num { width: 76px; padding: 5px 8px; font-size: 13px; }
.ml-settings .ml-unit, .ml-settings .ml-align { width: auto; padding: 5px 8px; font-size: 12.5px; }
.ml-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border);
}
.ml-foot-actions { display: flex; gap: 8px; flex: 0 0 auto; }
@media (max-width: 640px) {
  .ml-mask { padding: 10px; }
  .ml-dlg { max-height: 100%; }
  .ml-tools { flex-wrap: wrap; }
  .ml-search { max-width: none; flex-basis: 100%; }
  .ml-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
@media (max-width: 640px) {
  .up-toasts { left: 12px; right: 12px; max-width: none; }
  .up-drop { flex-direction: column; text-align: center; gap: 10px; padding: 14px; }
  .up-item { flex-wrap: wrap; }
  .up-info { flex-basis: 100%; }
  .up-actions { width: 100%; }
}
.img-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.img-card { overflow: hidden; display: flex; flex-direction: column; }
.img-card > a { display: flex; align-items: center; justify-content: center; height: 140px; background: var(--surface-3); }
.img-card img { max-width: 100%; max-height: 140px; object-fit: contain; }
.img-card-body { padding: 10px 12px 12px; }
.img-name { font-weight: 600; font-size: 13.5px; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-md {
  display: block; font-size: 11px; color: var(--text-muted);
  background: var(--surface-3); border-radius: 6px; padding: 4px 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 6px 0 8px;
}
.img-actions { display: flex; gap: 6px; align-items: center; }

/* ---------- 后台视频库 ----------
   视频没法像图片那样缩略图铺网格（每行一个 preload=metadata 的 <video> 会打 N 个
   范围请求），所以用列表：名称 + 体积/时间 + 引用串 + 操作。 */
.vid-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 10px 0; }
.vid-bar-fill { display: block; height: 100%; width: 0; background: var(--primary); transition: width .15s linear; }
.vid-list { display: flex; flex-direction: column; gap: 10px; }
.vid-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.vid-main { flex: 1; min-width: 0; }
.vid-name { margin: 0 0 2px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-md {
  display: block; margin-top: 6px; padding: 6px 8px;
  background: var(--surface-3); border-radius: 6px;
  font-size: 12px; white-space: nowrap; overflow-x: auto;
}
.vid-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .vid-item { flex-direction: column; align-items: stretch; }
  .vid-actions { justify-content: flex-end; }
}
/* 后台卡片标题行：标题靠左、操作靠右（取代各处写死的 inline flex） */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
/* 区块内的空态：做成一块居中的浅色提示，别让一行小字孤零零贴在左上角 */
.empty-hint {
  padding: 18px; text-align: center; font-size: 13.5px; color: var(--text-muted);
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 10px;
}
/* 表格里的紧凑数字输入（如排序序号），别让它撑满整列 */
.num-sm { width: 84px; }
/* ---------- 页面设置：随机缩略图池（封面图三级降级的最后一级） ---------- */
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.thumb-cell {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.thumb-cell img { display: block; width: 100%; height: 100px; object-fit: cover; background: var(--surface-3); }
.thumb-cap { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 4px; }
.thumb-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb-cell form { margin: 0; padding: 0 10px 10px; }
.EasyMDEContainer .CodeMirror { border-color: var(--border); border-radius: 8px; font-size: 13.5px; }
.EasyMDEContainer .editor-toolbar { border-color: var(--border); border-radius: 8px 8px 0 0; }
.EasyMDEContainer .editor-statusbar { display: none; }
.markdown img { max-width: 100%; }

/* ---------- emoji 图标选择器 ---------- */
.icon-field { display: flex; gap: 10px; align-items: center; }
.icon-field input { width: 90px; text-align: center; font-size: 20px; cursor: pointer; }
.icon-preview {
  flex: 0 0 auto; width: 44px; height: 44px; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); border-radius: 10px;
}
.emoji-pop {
  position: fixed; z-index: 3000; width: 328px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.emoji-pop.show { opacity: 1; visibility: visible; transform: translateY(0); }
.emoji-pop-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.emoji-pop-tab {
  border: 0; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: 12.5px; color: var(--text-muted); padding: 4px 9px; border-radius: 999px;
}
.emoji-pop-tab:hover { background: var(--primary-soft); color: var(--primary); }
.emoji-pop-tab.active { background: var(--primary); color: #fff; }
.emoji-pop-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  max-height: 216px; overflow-y: auto;
}
.emoji-pop-item {
  border: 0; background: transparent; cursor: pointer;
  font-size: 21px; line-height: 1; padding: 6px 0; border-radius: 8px;
}
.emoji-pop-item:hover { background: var(--primary-soft); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-side { position: static; }
  /* 封面图行：中等宽度下两栏会把地址框挤到只剩几十像素，改为上下排。
     注意纵向时 flex-basis 作用于高度，preview-cell 的 190px 必须复位。 */
  .cover-row { flex-direction: column; gap: 0; }
  .cover-row .preview-cell { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .nav { display: none; }
  .hero h1 { font-size: 28px; }
  .form-row { flex-direction: column; gap: 0; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .admin-body { flex-direction: column; }
  .nav-group { width: 100%; }
  .nav-group-body { flex-direction: row; flex-wrap: wrap; margin-left: 0; border-left: 0; }
  .admin-side { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  /* ★ 窄屏侧栏变成横向 wrap 布局，必须**复位**宽屏那套纵向滚动配置：
     `overflow-y: auto` 会在横条里造一个纵向滚动区（菜单被压成一条带滚动条的窄缝）。
     ★ 但 `flex` 千万别写 `0 0 auto`：`flex-shrink: 0` 意味着导航拒绝被压窄，
       它会按 **max-content** 铺开（实测 1882px）⇒ 整页横向溢出 1506px。
       横排时它既要能**收缩**（`flex-shrink: 1` + `min-width: 0`，否则内部不会换行），
       也要能**撑满**剩余宽度。 */
  .admin-nav {
    flex-direction: row; flex-wrap: wrap;
    flex: 1 1 auto; min-width: 0; min-height: auto; overflow: visible; padding-right: 0;
  }
  .admin-side-bottom { display: none; }
  .license-body { flex-direction: column; align-items: flex-start; }
  .carousel-sub { font-size: 14px; }
  .carousel-arrow { display: none; }
}

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 13px; }
.pagination .page-info { color: var(--text-muted); margin-right: 6px; }
.pagination .page-link {
  display: inline-block; min-width: 30px; padding: 5px 9px; text-align: center;
  border: 1px solid var(--border); border-radius: 7px; background: var(--card);
  color: var(--text); text-decoration: none; line-height: 1.3;
}
.pagination .page-link:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pagination .page-gap { color: var(--text-muted); padding: 0 2px; }

/* ==========================================================
   首页（产品展示型落地页）
   说明：全部 class 以 hp- 前缀，只作用于首页，不影响后台与其它页面。
   ========================================================== */
.ico { display: block; flex: none; }

/* ---------- 主视觉 ---------- */
.hp-hero {
  position: relative; overflow: hidden; color: #fff;
  background: #0d1322;
  padding: 76px 0 86px;
}
/**
 * ★★ 背景大图：与前景**完全独立**的一层。
 *   绝对定位 + pointer-events:none ⇒ **不参与布局**，所以它有图、改尺寸/位置/透明度，
 *   都不会动到 hero 的 padding 与高度、左侧文案、右列轮播/窗口的位置。
 *   留空时前台连这个元素都不渲染（见 home.php），老部署升级后逐像素无变化。
 */
.hp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* 压暗蒙层：图片偏亮时保证白色标题仍读得清（数值由后台控制，0 = 这一层不渲染） */
.hp-hero-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 关掉默认装饰（彩色光晕 + 细网格）—— 只在配了背景图时可选，
   否则"照片上飘着彩色光斑"会显得很脏 */
.hp-hero-plain::before, .hp-hero-plain::after { display: none; }
/* 彩色光晕（叠在背景大图之上：有图时它变成照片上的彩色光，无图时就是原来的效果） */
.hp-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(660px 380px at 10% 6%, color-mix(in srgb, var(--primary) 58%, transparent), transparent 62%),
    radial-gradient(560px 340px at 92% 10%, rgba(139, 92, 246, .45), transparent 64%),
    radial-gradient(620px 420px at 62% 112%, rgba(45, 212, 191, .20), transparent 62%);
}
/* 细网格线（中心向四周淡出） */
.hp-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 76%);
  mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 76%);
}
.hp-hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
}
.hp-hero-solo { grid-template-columns: 1fr; }
.hp-hero-solo .hp-hero-copy { max-width: 640px; }
.hp-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: #d9e2ff; background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
}
.hp-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #43d17f;
  box-shadow: 0 0 0 0 rgba(67, 209, 127, .55);
  animation: hp-pulse 2s infinite;
}
@keyframes hp-pulse {
  70% { box-shadow: 0 0 0 8px rgba(67, 209, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 209, 127, 0); }
}
.hp-hero h1 {
  font-size: 46px; line-height: 1.16; letter-spacing: -.6px;
  margin: 18px 0 16px; color: #fff;
}
.hp-hero h1 .grad {
  background: linear-gradient(100deg, #8ab4ff, #c6a8ff 46%, #7ff0dc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- 左列文案：与右列产品**一一对应**（按同一索引切换） ----------
   ★ 叠放：同一个 stage 里所有文案占**同一格**（grid-area: 1/1），容器高度取最高的那份 ——
   各产品文案的行数不一样，若是"显示/隐藏"地排下去，切换瞬间整块主视觉会忽高忽低。
   ★ 过渡：淡出 0.4s + 轻微上移；visibility 必须延迟到淡出结束才生效
   （否则元素立刻 hidden，看到的就不是"淡出"而是"啪一下没了"）。 */
.hp-hero-stage { display: grid; }
.hp-hero-stage > .hp-hero-txt { grid-area: 1 / 1; }
.hp-hero-txt {
  opacity: 1; visibility: visible;
  transition: opacity .4s ease, transform .4s ease, visibility 0s;
}
.hp-hero-txt:not(.active) {
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease, visibility 0s .4s;
}
.hp-hero-sub { font-size: 17px; line-height: 1.7; color: #bfc9e2; max-width: 520px; margin-bottom: 30px; }
.hp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-hero .btn-light { background: #fff; color: #16203c; }
.hp-hero .btn-light:hover { background: var(--primary-soft); color: #16203c; }
.hp-hero .btn-ghost-light { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); color: #fff; }
.hp-hero .btn-ghost-light:hover { background: rgba(255, 255, 255, .17); color: #fff; }
.hp-hero-note { margin: 22px 0 0; font-size: 13.5px; color: #8e9bbc; }
.hp-hero-note a { color: #c3d1ff; text-decoration: underline; text-underline-offset: 3px; }
.hp-hero-note a:hover { color: #fff; }

/* 主视觉右侧：模拟账户中心窗口 */
.hp-mock { position: relative; }
.hp-window {
  background: var(--card); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 30px 70px rgba(4, 10, 28, .52);
}
.hp-window-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid #e8ebf5;
}
.hp-dot { width: 10px; height: 10px; border-radius: 50%; }
.hp-window-title { margin-left: 8px; font-size: 12.5px; color: #7b8399; font-family: var(--mono); }
.hp-window-body { padding: 12px 14px 16px; }
.hp-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; }
.hp-row:hover { background: var(--surface-2); }
.hp-row-icon {
  width: 34px; height: 34px; border-radius: 9px; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--primary-soft), #e1e8ff);
}
.hp-row-main { flex: 1; min-width: 0; display: block; }
.hp-row-name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-row-tag {
  display: block; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-row-price { font-size: 13px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.hp-key-card {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(120deg, var(--surface-2), var(--primary-soft));
  border: 1px dashed var(--primary-border);
}
.hp-key-label { display: block; font-size: 11.5px; color: #7b8399; letter-spacing: .4px; margin-bottom: 3px; }
.hp-key-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--primary-dark); letter-spacing: 1px; }
.hp-float {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 12px; background: var(--card);
  box-shadow: 0 14px 34px rgba(4, 10, 28, .34);
  font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.hp-float .ico { color: var(--primary); }
/* 浮动标签挂在窗口的两个对角上（跨出边缘），避免压住窗口内的条目与价格 */
.hp-float-1 { left: -30px; bottom: -15px; }
.hp-float-2 { right: -18px; top: -15px; }

/* ---------- 信任条 ---------- */
.hp-trust { background: var(--card); border-bottom: 1px solid var(--border); }
.hp-trust-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding-top: 22px; padding-bottom: 22px;
}
.hp-trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #3a4257; }
.hp-trust-item .ico { color: var(--success); }

/* ---------- 通用分节 ---------- */
.hp-section { padding: 68px 0; }
.hp-section-soft {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-2));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hp-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.hp-eyebrow {
  display: inline-block; margin-bottom: 14px; padding: 5px 13px;
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.2px; color: var(--primary); background: var(--primary-soft);
}
.hp-head h2 { font-size: 30px; letter-spacing: -.4px; margin-bottom: 10px; }
.hp-head p { margin: 0; color: var(--text-muted); font-size: 15.5px; }

/* ---------- 产品 / 套装卡片 ----------
   套装与单品共用同一个网格（套装恒排在单品之前）。
   用 CSS Grid 而非 flex + justify-content:center：网格的列轨道数由容器宽度决定、
   每行等宽，所以「数量超出 → 自动换行」后，上下两行的卡片**列与列严格对齐**；
   而 flex 居中时不满的那一行会被整体居中，与上一行的列对不上。
   auto-fill + minmax：容器能放几列就放几列，放不下的自动换到下一行。 */
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.hp-card {
  position: relative; display: flex; flex-direction: column;
  padding: 24px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp-card:hover, .hp-card:focus { color: var(--text); }
.hp-card:hover {
  transform: translateY(-5px); border-color: var(--primary-border);
  box-shadow: 0 18px 42px rgba(24, 39, 90, .13);
}
.hp-card h3 { font-size: 18px; margin-bottom: 8px; }
.hp-icon-tile {
  width: 52px; height: 52px; border-radius: 14px; font-size: 26px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--primary-soft), var(--primary-soft-2));
}
.hp-icon-tile.hp-cover-tile {
  width: 100%; height: 136px; border-radius: 12px; font-size: 0; background: var(--surface-2);
}
.hp-icon-tile.hp-cover-tile img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
.hp-desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 16px; min-height: 44px; }
/* 卡片底部一行：左价格、右查看链接。原先右侧的「N 个版本 / 含 N 款软件」已移除，
   查看链接上移到该行右端（不再独占一行，故无 margin-top）。 */
.hp-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border);
}
.hp-price { font-size: 22px; font-weight: 800; color: var(--danger); letter-spacing: -.5px; }
.hp-price-unit { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.hp-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary); }
.hp-link .ico { transition: transform .18s ease; }
.hp-card:hover .hp-link .ico { transform: translateX(3px); }
.hp-card-bundle { border-color: #ccd6fb; background: linear-gradient(180deg, var(--surface-2), var(--surface-2)); }
.hp-ribbon {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 34%, transparent);
}

/* ---------- 使用流程 ---------- */
.hp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hp-step {
  position: relative; padding: 24px 22px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hp-step h3 { font-size: 16.5px; margin-bottom: 8px; }
.hp-step p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.hp-step-num {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 28%, transparent);
}
.hp-step::after {
  content: ''; position: absolute; top: 43px; right: -20px; width: 20px; height: 2px;
  background: linear-gradient(90deg, var(--primary-border), rgba(201, 211, 247, 0));
}
.hp-step:last-child::after { display: none; }

/* ---------- 能力特性 ---------- */
.hp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-feature {
  padding: 26px 24px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hp-feature:hover { transform: translateY(-3px); border-color: #dbe1f8; box-shadow: 0 14px 34px rgba(24, 39, 90, .10); }
.hp-feature h3 { font-size: 16.5px; margin-bottom: 8px; }
.hp-feature p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.hp-feature-ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); background: var(--primary-soft);
}

/* ---------- 常见问题 ---------- */
.hp-faq {
  max-width: 840px; margin: 0 auto; padding: 8px 28px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow);
}

/* ---------- 行动号召 ---------- */
.hp-cta-box {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  padding: 52px 40px; border-radius: 22px;
  background: linear-gradient(120deg, var(--primary), var(--primary-2) 55%, var(--primary-2));
  box-shadow: 0 26px 60px color-mix(in srgb, var(--primary) 32%, transparent);
}
.hp-cta-box::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(420px 240px at 14% 18%, rgba(255, 255, 255, .30), transparent 62%),
    radial-gradient(420px 240px at 86% 92%, rgba(255, 255, 255, .18), transparent 62%);
}
.hp-cta-box > * { position: relative; z-index: 1; }
.hp-cta-box h2 { font-size: 28px; margin-bottom: 10px; }
.hp-cta-box p { margin: 0 auto 26px; max-width: 560px; opacity: .93; }
.hp-cta-box .hp-actions { justify-content: center; }
.hp-cta-box .btn-light { background: #fff; color: #16203c; }
.hp-cta-box .btn-light:hover { background: var(--primary-soft); color: #16203c; }
.hp-cta-box .btn-ghost-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); color: #fff; }
.hp-cta-box .btn-ghost-light:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- 滚动浮现 ----------
   隐藏态由 JS 逐个元素添加（.hp-hide），不是默认状态：
   脚本未加载/报错/用户禁用动效时，内容始终完全可见，不会被"藏住"。 */
.hp-reveal { transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.hp-reveal.hp-hide { opacity: 0; transform: translateY(18px); }
/* 卡片类元素自身还有 hover 过渡，这里合并声明，避免被上面的 .hp-reveal 覆盖掉 */
.hp-card.hp-reveal, .hp-feature.hp-reveal {
  transition: opacity .55s ease, transform .6s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hp-reveal { transition: none; }
  .hp-reveal.hp-hide { opacity: 1; transform: none; }
}
@media print {
  .hp-reveal.hp-hide { opacity: 1; transform: none; }
}

/* ---------- 首页响应式 ---------- */
@media (max-width: 980px) {
  .hp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hp-hero { padding: 62px 0 70px; }
  .hp-hero h1 { font-size: 36px; }
  .hp-hero-sub { max-width: none; }
  .hp-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .hp-features, .hp-steps { grid-template-columns: repeat(2, 1fr); }
  .hp-step::after { display: none; }
  .hp-trust-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hp-hero { padding: 48px 0 56px; }
  .hp-hero h1 { font-size: 30px; }
  .hp-hero-sub { font-size: 15.5px; }
  .hp-section { padding: 46px 0; }
  .hp-head { margin-bottom: 32px; }
  .hp-head h2 { font-size: 24px; }
  /* 目录：窄屏强制单列，卡片占满整行（保持与改造前一致的移动端观感） */
  .hp-grid { grid-template-columns: 1fr; }
  .hp-features, .hp-steps, .hp-trust-inner { grid-template-columns: 1fr; }
  .hp-float { display: none; }
  .hp-cta-box { padding: 38px 22px; border-radius: 18px; }
  .hp-cta-box h2 { font-size: 22px; }
  .hp-faq { padding: 4px 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .hp-desc { min-height: 0; }

  /* 移动端导航：默认收起，点开关后下拉展开 */
  .nav-toggle { display: inline-flex; }
  /* 顶栏收窄：34px 图形 + 13px 余量 = 60px（品牌规范要求 ≥ 图形高度 1/4 的留白，此处给到 13px） */
  .nav-wrap { height: 60px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-logo { width: 34px; height: 34px; }
  .brand-divider { height: 26px; }
  .brand-cn { font-size: 16px; }
  .brand-en { font-size: 8px; letter-spacing: 2.77px; margin-right: -2.77px; }
  .nav {
    /* top 用 100% 而非写死像素：顶栏高度变化时下拉位置自动跟随，不会错位 */
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; gap: 2px; padding: 10px 16px 14px;
    background: var(--card); border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 28px rgba(16, 24, 40, .10);
  }
  .nav.open { display: flex; }
  /* 纵向排列时恢复拉伸：下拉项占满宽度，点击区不被压成窄胶囊 */
  .nav { align-items: stretch; }
  .nav a { padding: 10px 12px; }
}

/* ============================================================
   优惠券（后台管理 + 用户端）
   ============================================================ */
.badge-primary { background: var(--primary-soft); color: var(--primary-dark); }

/* 后台列表：左侧筛选行 + 右侧「新建」按钮 */
.toolbar-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.toolbar-row .toolbar { margin-bottom: 16px; }

/* 批次券码卡片 */
.batch-card { margin-bottom: 16px; }
.batch-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.batch-codes {
  margin: 0; padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--mono); font-size: 13px; line-height: 2;
  max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}

/* 表单：单选卡片 / 说明文字 */
.radio-cards { display: flex; flex-direction: column; gap: 8px; }
.radio-card {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.radio-card:hover { border-color: var(--primary); }
.radio-card input { margin-top: 3px; flex: 0 0 auto; }
.radio-card strong { display: block; font-size: 14px; }
.radio-card small { display: block; color: var(--text-muted); font-size: 12.5px; margin-top: 2px; line-height: 1.5; }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.field-help { margin-top: 5px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.form-sep { border: none; border-top: 1px solid var(--border); margin: 22px 0 18px; }

/* 券详情 */
.section-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coupon-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.coupon-detail-head h2 { margin: 0 0 10px; }
.coupon-code-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coupon-code-line code {
  font-family: var(--mono); font-size: 15px; letter-spacing: .5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px;
}
.coupon-detail-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail-list { margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; }
.detail-list > div { display: flex; gap: 10px; }
.detail-list dt { color: var(--text-muted); font-size: 13px; flex: 0 0 76px; }
.detail-list dd { margin: 0; font-size: 13.5px; }

/* 用户端：我的优惠券 */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.coupon-ticket {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.coupon-ticket.is-dead { opacity: .62; }
.coupon-ticket-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coupon-amount { font-size: 26px; font-weight: 700; color: var(--danger); line-height: 1.1; }
.coupon-amount-unit { font-size: 13px; color: var(--text-muted); }
.coupon-name { font-weight: 600; font-size: 15px; }
.coupon-ticket .muted { font-size: 12.5px; line-height: 1.6; }
.coupon-ticket-code { display: flex; align-items: center; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.coupon-ticket-code code { font-family: var(--mono); font-size: 13px; }

/* 收银台：金额明细与用券区 */
.amount-lines { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 13.5px; }
.amount-lines .row { display: flex; justify-content: space-between; gap: 12px; }
.amount-lines .row.is-discount { color: var(--danger); }
.amount-lines .row.is-total { font-weight: 700; padding-top: 7px; border-top: 1px dashed var(--border); margin-top: 4px; }
.coupon-apply { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.coupon-apply-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.coupon-apply-row input[type=text] { flex: 1; min-width: 170px; text-transform: uppercase; font-family: var(--mono); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* 产品页：套餐卡片里的券码输入 */
.plan-coupon { margin-bottom: 10px; }
.plan-coupon input[type=text] {
  width: 100%; text-transform: uppercase; font-family: var(--mono); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
}
.plan-coupon input[type=text]:focus { outline: none; border-color: var(--primary); }

/* 产品页：试用卡片 */
.trial-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; margin-bottom: 20px;
  border-color: var(--primary); background: var(--primary-soft);
}
.trial-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.trial-body { flex: 1 1 auto; min-width: 0; }
.trial-body h3 { margin: 0 0 2px; font-size: 17px; }
.trial-body p { margin: 0; font-size: 13.5px; }
.trial-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.trial-actions form { margin: 0; }
@media (max-width: 640px) {
  .trial-card { flex-wrap: wrap; }
  .trial-actions { width: 100%; }
  .trial-actions > .btn, .trial-actions > form, .trial-actions > form > .btn { width: 100%; }
}

/* 我的授权：试用授权提示 */
.trial-hint { margin: 2px 0 0; color: var(--warning); font-weight: 600; }

/* ==========================================================
   SEO 设置页
   ========================================================== */
.seo-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0;
  background: var(--surface-2);
}
.seo-block > h4 { margin: 0 0 8px; font-size: 14px; }
.seo-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}
.seo-keyline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seo-pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
/* 平台支持说明表：最后一列文字较多，给点呼吸空间 */
.card .table td:last-child { line-height: 1.55; }

/* ============================================================
   站内搜索（前台）
   ============================================================ */
/* ---------- 顶栏搜索入口 ---------- */
/* 一体式胶囊：输入框 + 尾部放大镜提交按钮（放大镜兼作提交键，不再单放箭头图标）。
   默认用浅色底而非描边 —— 顶栏已有分隔线，再加实边会线条过多、显脏。 */
.nav-search {
  display: flex; align-items: center;
  flex: 0 1 212px; min-width: 146px; height: 38px;
  padding: 0 4px 0 15px;
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nav-search:hover { background: var(--surface-3); }
/* 聚焦：转白底 + 主色描边 + 柔光晕 —— 与搜索页主表单同一套聚焦语言 */
.nav-search:focus-within {
  background: var(--card);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
}
.nav-search input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13.5px; color: var(--text);
}
.nav-search input::placeholder { color: #98a1b3; }
/* 放大镜 = 提交按钮：圆形，与胶囊弧度呼应 */
.nav-search button {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-left: 2px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted); cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.nav-search:focus-within button { background: var(--primary-soft); color: var(--primary); }
.nav-search button:hover { background: var(--primary); color: #fff; }
.nav-search button:active { transform: scale(.9); }
/* 原生清除按钮宽度因浏览器而异，会把输入区顶得忽宽忽窄，统一去掉 */
.nav-search input::-webkit-search-cancel-button,
.search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 窄屏的搜索入口：与 .nav-toggle 同款方形图标按钮，并排时像一组控件 */
.nav-search-btn {
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0; width: 38px; height: 38px;
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text);
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.nav-search-btn:hover,
.nav-search-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ---------- 搜索页主表单 ---------- */
/* 全宽（与下方统计行 / 结果列表同宽）。刻意不设 max-width：
   搜索框比内容窄一截时，整页会显出"两套左边界"，看着不齐。 */
.search-form {
  display: flex; align-items: center; gap: 0;
  margin: 0 0 20px; padding: 6px 6px 6px 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.search-form-icon { display: inline-flex; flex-shrink: 0; margin-right: 10px; color: var(--text-muted); }
.search-form input[type="search"] {
  flex: 1 1 auto; min-width: 0; height: 40px; padding: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--text);
}
.search-form .btn { flex-shrink: 0; }

/* 抑制全局表单规则 `input:focus { box-shadow: 0 0 0 3px … }`（见上方「表单」段）——
   它给聚焦的输入框加了一圈 3px 直角扩散阴影，与外层容器的 :focus-within 光晕
   叠在一起就是「双框」，在搜索框这种"输入框嵌在容器里"的结构里尤其明显。
   外层容器已经承担了聚焦反馈，内层不需要再有。两个搜索框都要。 */
.search-form input[type="search"]:focus,
.nav-search input:focus { outline: none; border-color: transparent; box-shadow: none; }

/* ---------- 结果统计 / 类型筛选 ---------- */
.search-stat { margin: 0 0 14px; }
.search-stat em { font-style: normal; font-weight: 700; color: var(--primary-dark); }
.search-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.search-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13.5px;
  transition: all .15s ease;
}
.search-tab span { font-size: 12px; opacity: .8; }
.search-tab:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.search-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

/* ---------- 结果列表 ---------- */
.search-group { margin-bottom: 30px; }
.search-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 17px; }
.search-list { display: flex; flex-direction: column; gap: 10px; }
.search-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-item:hover { border-color: var(--primary); box-shadow: var(--shadow); color: var(--text); }
.search-item-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary-dark); font-size: 20px;
}
/* 三类结果用不同色调区分，扫一眼就知道这条是产品还是文档 */
.search-item-icon-doc { background: var(--info-soft); color: #1f7fbe; }
.search-item-icon-faq { background: var(--success-soft); color: var(--success); }
.search-emoji { line-height: 1; }
.search-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-item-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; font-size: 15.5px; }
.search-item-snippet { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; word-break: break-word; }
.search-item-meta { margin-top: 2px; color: var(--text-muted); font-size: 12.5px; }
.search-item-go { flex-shrink: 0; align-self: center; color: var(--text-muted); }
.search-item:hover .search-item-go { color: var(--primary); }
.search-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13.5px; font-weight: 600; }

/* ---------- 关键词高亮 ---------- */
.search-page mark { padding: 0 1px; border-radius: 3px; background: var(--mark-bg); color: var(--mark-text); font-weight: 600; }

/* ---------- 未输入 / 空结果 ---------- */
.search-blank { padding: 2px 0 8px; }
.search-blank .search-quick { justify-content: flex-start; }
.search-empty {
  padding: 44px 22px; text-align: center;
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--radius);
}
.search-empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 12px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark);
}
.search-empty h2 { font-size: 19px; margin-bottom: 6px; }
.search-empty-tips {
  max-width: 470px; margin: 18px auto 0; padding: 14px 18px;
  text-align: left; background: var(--bg); border-radius: 10px;
}
.search-empty-tips h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.search-empty-tips ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13.5px; }
.search-empty-tips li { margin-bottom: 4px; }
.search-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.search-empty .search-suggest { justify-content: center; }
.search-chip {
  display: inline-block; padding: 5px 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 13.5px;
  transition: all .15s ease;
}
.search-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.search-quick { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.search-empty .search-quick { justify-content: center; }

/* ---------- 搜索响应式 ---------- */
/* 断点 960px 是按**最宽组合**算出来的：登录后右侧按钮组会多出
   「我的授权 / 后台 / 退出」三个（比未登录宽约 100px），
   此时 品牌137 + 间距26 + 导航248 + 间距26 + 右侧约430 ≈ 867，
   加上容器左右各 20px 内边距，视口低于 ~910px 就会开始挤。
   取 960px 留 ~50px 余量，避免刚好卡在临界点上「时好时坏」。 */
@media (max-width: 960px) {
  /* 顶栏放不下输入框：收成一个放大镜图标按钮（点进搜索页，那里有完整输入框） */
  .nav-search { display: none; }
  .nav-search-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .search-form { padding: 5px 5px 5px 12px; }
  .search-form input[type="search"] { font-size: 16px; }   /* ≥16px 可避免 iOS 聚焦时自动放大 */
  .search-item { padding: 12px 13px; gap: 11px; }
  .search-item-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 18px; }
  .search-item-title { font-size: 15px; }
  .search-item-go { display: none; }                        /* 窄屏省下这列空间 */
  .search-empty { padding: 32px 16px; }
  .search-empty-tips { padding: 12px 14px; }
  .search-tabs { gap: 5px; }
  .search-tab { padding: 5px 11px; font-size: 13px; }
}



/* ============================================================
   后台：前台主题选择（页面设置）
   ──────────────────────────────────────────────────────────
   这里的预览色块是**写死的十六进制**，不是变量 —— 后台自己不走主题，
   用 var() 只会显示"当前后台长什么样"，看不出被选主题的实际观感。
   ============================================================ */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px;
}
.theme-pick {
  position: relative; display: block; cursor: pointer;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.theme-pick:hover { border-color: var(--primary); transform: translateY(-1px); }
.theme-pick.is-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
/* 原生 radio 藏起来但保留键盘可达性（:focus-visible 时给外框） */
.theme-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-pick:focus-within { border-color: var(--primary); }
/* 选中角标 */
.theme-pick.is-active::after {
  content: "✓"; position: absolute; top: 8px; right: 10px;
  font-size: 12px; font-weight: 700; color: var(--primary);
}
.theme-swatch {
  display: flex; align-items: center; gap: 5px;
  height: 46px; padding: 9px; margin-bottom: 9px;
  border: 1px solid rgba(127, 127, 127, .18); border-radius: 8px;
}
.theme-swatch i { display: block; height: 12px; border-radius: 4px; }
.theme-swatch i:nth-child(1) { width: 26px; }
.theme-swatch i:nth-child(2) { width: 16px; }
.theme-swatch i:nth-child(3) { width: 16px; }
.theme-name { display: block; font-size: 13.5px; font-weight: 600; }
.theme-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* ============================================================
   用户中心
   ──────────────────────────────────────────────────────────
   子导航在窄屏自动换行；账号卡在两列区用 auto-fit 回落单列，
   不需要额外的媒体查询。颜色一律走变量（深色主题下同样成立）。
   ============================================================ */
.acct-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 20px; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.acct-nav a {
  padding: 7px 14px; border-radius: 7px;
  font-size: 14px; color: var(--text-muted); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.acct-nav a:hover { background: var(--card); color: var(--text); }
.acct-nav a.active { background: var(--primary); color: #fff; font-weight: 600; }

/* 账号卡：头像 + 概要 + 操作 */
.acct-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.acct-hero-main { flex: 1 1 260px; min-width: 0; }
.acct-hero-main h1 { margin: 0 0 6px; font-size: 22px; }
.acct-hero-main p { margin: 3px 0; }
.acct-hero-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 圆形头像：有图用图，无图显示昵称首字 */
.acct-avatar-lg {
  flex-shrink: 0; width: 88px; height: 88px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--primary-soft); border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--border);
}
.acct-avatar-lg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acct-initial { font-size: 34px; font-weight: 700; line-height: 1; color: var(--primary); user-select: none; }

.acct-avatar-block { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.acct-avatar-block form { flex: 1 1 230px; min-width: 0; }

/* 权限概览：数字条 */
.acct-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px; margin: 14px 0 22px;
}
.acct-stat {
  padding: 14px 12px; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.acct-stat b { display: block; font-size: 24px; line-height: 1.2; color: var(--primary); }
.acct-stat span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }

/* 两列：窄屏自动回落单列 */
.acct-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.acct-two-col > .card { margin: 0; }

/* ============================================================
   验证码：GoCaptcha 与内置滑块的切换
   ──────────────────────────────────────────────────────────
   两个驱动的 DOM 都渲染出来（保证前置脚本加载失败时能就地退回内置滑块，
   不必重新请求页面），由 .is-go / .is-builtin 决定显示哪一个。
   ============================================================ */
.sc-go { display: none; }
.slider-captcha.is-go .sc-go { display: block; }

/* ★ 宽度对齐：验证码要和上方输入框、下方按钮**同宽**。
   组件卡片宽度是内联样式算出来的（画布宽 + 左右内边距 + 边框，如 300+12*2+2=326），
   所以外层卡片必须 !important 覆盖成 100%。
   ⚠️ 但**画布本身绝不能拉伸** —— 点击 / 拖动的坐标是按像素与服务端比对（容差 5px），
      把 300×220 的图画成 356×220 会让答案整体偏移，表现为"怎么拖都验不过"。
      所以只放宽外层卡片，画布与拖动条保持原始像素宽并在卡片里居中。 */
.slider-captcha.is-go { max-width: none; width: 100%; }
.slider-captcha.is-go .gc-wrapper { width: 100% !important; box-sizing: border-box; }
.slider-captcha.is-go .gc-body,
.slider-captcha.is-go .gc-footer {
  width: var(--sc-go-w, 300px) !important;   /* site.js 按 masterWidth 写这个变量（旋转模式是 220） */
  margin-left: auto; margin-right: auto;     /* 只改左右，保留组件自己的 margin-top */
}
/* 降级到内置滑块时同样占满宽度，但画布固定 300px（原因同上：坐标按像素校验），居中显示 */
.slider-captcha.is-builtin { max-width: none; width: 100%; }
.slider-captcha.is-builtin > .sc-image,
.slider-captcha.is-builtin > .sc-track { margin-left: auto; margin-right: auto; }
/* ★ 内置滑块的骨架默认隐藏，只有确认走内置驱动（.is-builtin）才显示。
   否则"挑战加载失败"时会留下一张破图 + 空拖动条，看起来像页面坏了。
   用 :not() 而不是给 .is-builtin 强制 display，是为了不覆盖元素原本的 display 值。 */
.slider-captcha:not(.is-builtin) > .sc-image,
.slider-captcha:not(.is-builtin) > .sc-track { display: none; }

/* 降级 / 异常提示行 */
.sc-note {
  margin: 0; padding: 7px 10px;
  font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--warning-soft);
  border-radius: 8px;
}

/* ---------- 验证通过提示 ----------
   通过后把整块验证码盖成一层"✓ 验证通过"。
   ★ 用覆盖层而不是在组件里插节点：GoCaptcha 的画布 DOM 由它自己渲染，
     外部插进去的节点会被它的重渲染冲掉；覆盖层对两个驱动都成立。
   ★ 覆盖层**要能接住鼠标事件**（默认 pointer-events），否则点击会穿透到下面的
     组件继续出题 —— 通过后再点一下就会再发一次校验、把成功态冲掉。
   ★ `.sc-done[hidden]` 这条必须写：下面用了 display:flex，会盖掉 hidden 属性的
     UA 样式（display:none），不写就是"没通过也一直显示"。 */
.sc-done {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--success);
  background: var(--success-soft);
  border: 1px solid var(--success); border-radius: 10px;
  cursor: default;
  animation: sc-done-in .22s ease-out;
}
.sc-done[hidden] { display: none; }
.sc-done-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--success); color: #fff; font-size: 13px; font-weight: 700;
  /* ★ 白字是刻意硬编码：--success 在所有主题里都是同一个中等绿（主题只覆盖 *-soft），
     配 #fff 始终可读；跟着 --card 反而会在浅色主题下变成白底白字。 */
}

/* ★★ 成功态要"收成一条"，别铺满整块验证码（2026-09-27 修）
   ──────────────────────────────────────────────────────────
   问题：Go 组件的卡片实际高度是 350（画布只占 220，其余是它自带的内边距/头部），
   而覆盖层是 inset:0 ⇒ 通过后会变成 354×350 的**大方块**，手机上几乎占掉半屏，
   而这时画布与拖动条早已无用 —— 观感上就是"验证码框里空着一大块绿"。

   改法：成功态隐藏画布/操作条（两个驱动都隐藏），提示层从绝对定位改为**常规流**，
   于是容器高度自然等于提示条高度（≈48px），宽度仍是与输入框对齐的整宽。

   ★ 隐藏了组件，页面上就不再有可点区域 —— 顺带彻底消除了"点击穿透到下面组件、
     再发一次校验把成功态冲掉"这个隐患（原先靠覆盖层接事件来挡）。
   ★ 特异性：`.slider-captcha.is-go .sc-go { display: block }` 与下面第一条同为 0-2-1，
     靠**写在后面**取胜 —— 所以这段必须留在 .sc-go 规则之后，别往上挪。
   ★ 恢复路径：reset() 会移除 .is-success（CSS 随之复原），随后 load() 重建组件，
     所以"隐藏过"不会留下尺寸没重算的问题。 */
.slider-captcha.is-success > .sc-go,
.slider-captcha.is-success > .sc-image,
.slider-captcha.is-success > .sc-track { display: none; }
.slider-captcha.is-success .sc-done {
  position: static;          /* 不再是覆盖层：由内容撑高，容器随之收成一条 */
  /* 22(图标) + 8×2 + 边框 2 = 40px —— 刻意与上方输入框(39) / 下方按钮(38)齐平：
     它夹在表单控件之间，高了就会"胖出一条"，反而更显眼 */
  padding: 8px 16px;
}
@keyframes sc-done-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   窄屏：把宽度让给验证码画布
   ──────────────────────────────────────────────────────────
   两个驱动的画布都是**固定像素**（Go 300×220 / 旋转 220×220；内置 300×150），
   而且答案坐标按像素与服务端比对（容差只有几像素）——
   ★ 所以窄屏上**不能靠缩放画布**来适配：图缩了但服务端仍按原尺寸判定，
     结果是"怎么拖都验不过"，且看起来完全不像样式问题。
   只能反过来把镀铬宽度让出来：收紧页面与卡片的左右内边距，
   让卡片内容区 ≥ 画布 300 + 组件左右内边距 12 + 边框 2 = 314。
   实测：≤430px 时内容区 = 视口 − 38，视口 ≥ 352 即不再溢出（覆盖 360/375/390/414/430）。
   桌面端（>430px）卡片固定 420、内容 354，本来就够，不动。
   ============================================================ */
@media (max-width: 430px) {
  .section.auth-wrap { padding-left: 8px; padding-right: 8px; }
  .auth-card { padding-left: 10px; padding-right: 10px; }
  /* 组件卡片的内边距写在**内联样式**里（跟宽度一起算的），只能 !important 覆盖 */
  .slider-captcha.is-go .gc-wrapper {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* 极窄屏（视口 < 356px，如 320px 的老机型）的兜底：
   画布保持原尺寸不变，让验证码区域**自己横向滑动**，而不是把整页撑出横向滚动条。
   注：此时通过提示覆盖层只会盖住可视的那部分，可接受。 */
@media (max-width: 355px) {
  .captcha-row { overflow-x: auto; overflow-y: hidden; }
  .captcha-row::-webkit-scrollbar { height: 0; }   /* 别在验证码下面多出一条滚动条 */
}