/* ============================================================
   AI 写作台 —— 全局样式
   ============================================================ */

:root {
  --bg: #f4f5fa;
  --panel: #ffffff;
  --panel-soft: #fafbff;
  --border: #e7e9f3;
  --border-strong: #d8dcec;
  --text: #1b1e2c;
  --text-2: #4b5063;
  --muted: #838aa0;
  --accent: #6b5bfa;
  --accent-2: #8f7dff;
  --accent-soft: #f0edff;
  --accent-ring: rgba(107, 91, 250, 0.18);
  --green: #12b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(27, 30, 44, 0.04), 0 8px 24px rgba(27, 30, 44, 0.06);
  --shadow-lg: 0 18px 50px rgba(27, 30, 44, 0.14);
  --nav-h: 60px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d5d8e6; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #c0c4d8; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 顶部导航 ---------------- */

.nav {
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 4px 12px var(--accent-ring);
}

/* ⚠️ `min-width:0` + `overflow-x:auto` 是必须的（第 40 轮新增「贴图图文」后暴露）：
   flex 项的 `min-width` 默认是 auto（= 内容宽），导航项又是 nowrap，
   于是**这一行永远不会缩**，反而去挤右边的积分胶囊 —— 胶囊被压到 83px 后
   三个子元素各自换行，高度从 36px 涨到 171px，凭空多出一块
   **看不见的点击挡板**（宽 378 × 高 171，盖住页面右上角，按钮点不动）。
   让导航行自己缩、必要时横滑，右边的胶囊就再也不会被压。 */
.nav-links { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }

.nav-link {
  /* ⚠️ 第 40 轮加到第 10 个入口后，13px 的左右内边距在 1440 上已经放不下
     （实测差 43px）。收到 10px 后 1440 能完整显示全部入口，再窄就交给
     .nav-links 横滑（见上面的注释），不会去挤右边的胶囊。 */
  padding: 7px 10px;
  border-radius: 9px;
  color: var(--text-2);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all .16s;
  white-space: nowrap;
}
.nav-link:hover { background: #f1f2f9; color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ⚠️ `flex: 0 0 auto`：右边这一簇（安装 / 等级 / 积分 / 头像）**绝不允许被压缩**。
   少了它，导航行一变长就会去挤积分胶囊，胶囊里的文字各自换行，
   高度从 36px 涨到 171px —— 既难看，又会在页面右上角留下一块
   看不见却吃点击的区域（第 40 轮踩过）。 */
.nav-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* 导航里的「安装到桌面 / 应用版」入口（第 28 轮）
   用虚线描边 + 淡紫底，和实心的功能导航区分开 —— 它是一次性动作，不是页面入口。 */
.nav-install {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px dashed rgba(107, 91, 250, .45);
  background: rgba(107, 91, 250, .07);
  color: var(--accent);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.nav-install:hover { background: rgba(107, 91, 250, .14); border-style: solid; }
/* 上面给了 display:inline-flex，会盖掉 [hidden] 的 UA 样式，必须显式补一条 */
.nav-install[hidden] { display: none; }
/* 手机壳 / 窄屏：导航栏本来就藏起来了，改走底部标签栏的「更多」面板 */
html[data-device="mobile"] .nav-install,
html.is-narrow .nav-install { display: none !important; }

.credit-pill {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto; white-space: nowrap;
  background: linear-gradient(135deg, #fff8e6, #fff2d1);
  border: 1px solid #f5e2b0;
  color: #8a6412;
  padding: 6px 13px;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform .15s;
}
.credit-pill:hover { transform: translateY(-1px); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; cursor: pointer;
  user-select: none;
}

/* 下拉菜单 */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  min-width: 170px; padding: 6px; display: none; z-index: 100;
}
.dropdown-menu.open { display: block; }
.dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; background: none; border-radius: 8px;
  cursor: pointer; color: var(--text-2);
}
.dropdown-menu button:hover { background: #f4f5fb; color: var(--text); }
.dropdown-menu .sep { height: 1px; background: var(--border); margin: 5px 0; }
.dropdown-head { padding: 8px 12px 4px; font-size: 12px; color: var(--muted); }

/* ---------------- 布局 ---------------- */

.layout {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 22px 28px;
  align-items: start;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

/* 工作台已去掉左侧「我的文章」栏，只留工具区 + 结果区 */
.layout.single { grid-template-columns: minmax(0, 1fr); }

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  height: 100%;
  min-height: 0;
}

.workspace-grid.single { grid-template-columns: minmax(0, 1fr); }

.col-scroll { overflow-y: auto; height: 100%; padding-right: 4px; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 16px; }

.card-head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.card-body { padding: 18px; }

/* ---------------- 一键排版：风格 / 密度 / 配图选择 ---------------- */

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.style-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 11px 12px 10px;
  cursor: pointer;
  transition: all .16s;
  text-align: left;
  user-select: none;
  display: flex; flex-direction: column; gap: 7px;
}
.style-card:hover { border-color: var(--accent-2); background: #fbfaff; transform: translateY(-1px); }
.style-card.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.style-card .swatch {
  display: flex; gap: 3px; height: 22px; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(27, 30, 44, .06);
}
.style-card .swatch i {
  display: block; flex: 1; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.style-card .sname { font-weight: 700; font-size: 13px; line-height: 1.3; }
.style-card .sdesc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.style-card.on .sname { color: var(--accent); }
.style-card.on .sdesc { color: #6f68c9; }

/* 分段选择器（版式密度 / 配图方式） */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: #f2f3f9; border-radius: 11px; padding: 4px;
}
.seg-item {
  border: none; background: none; cursor: pointer;
  padding: 8px 15px; border-radius: 8px;
  font-weight: 600; color: var(--muted); font-size: 13px;
  transition: all .16s; white-space: nowrap;
}
.seg-item:hover { color: var(--text-2); }
.seg-item.on {
  background: #fff; color: var(--accent);
  box-shadow: 0 2px 8px rgba(27, 30, 44, .09);
}

/* 加强版分段控件：用于「标题写作 / 链接仿写」这类主模式切换。
   默认分段控件底色太浅、在白卡片上几乎看不出是个可点的选择器 →
   给容器加紫色描边，选中项用实心紫底白字，视觉上明确「这两个是主要模式」。 */
.seg.seg-strong {
  background: rgba(107, 91, 250, .09);
  border: 1px solid rgba(107, 91, 250, .25);
  padding: 5px; gap: 6px;
}
.seg.seg-strong .seg-item { color: var(--accent); font-weight: 700; padding: 8px 17px; }
.seg.seg-strong .seg-item:hover { background: rgba(255, 255, 255, .7); }
.seg.seg-strong .seg-item.on {
  background: linear-gradient(135deg, #6b5bfa, #8f7bff);
  color: #fff;
  box-shadow: 0 4px 12px rgba(107, 91, 250, .38);
}

/* 复选框行 */
.check {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 13px; cursor: pointer;
  background: var(--panel-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text-2); font-weight: 500;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.check:hover { border-color: var(--accent-2); }

/* 排版预览 iframe */
.ts-preview {
  display: block; width: 100%; height: 620px; border: 0; background: #fff;
}
.card-body > .ts-preview:only-child { border-radius: 0 0 var(--radius) var(--radius); }

/* 段落底部的小字提示 */
.inline-tip {
  margin: 14px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.7;
}
.inline-tip a { color: var(--accent); font-weight: 600; }
.inline-tip a:hover { text-decoration: underline; }

/* 进度条左侧文案 */
.prog-label { font-weight: 600; }
.prog-elapsed { font-variant-numeric: tabular-nums; }

/* ---------------- 按钮 ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition: all .16s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--accent-ring);
}
.btn-primary:hover:not(:disabled) { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }

.btn-block { width: 100%; }
.btn-lg { padding: 12px 20px; font-size: 15px; }
/* 小按钮：上下留白 5px → 7px（高度 26px → 30px）。
   原来 26px 已经低于舒适点击高度，表格行内的「查看 / 删除」、
   各页的「刷新 / 添加」等在触屏笔记本上容易点空。 */
.btn-sm { padding: 7px 11px; font-size: 12.5px; }
.btn-xs { padding: 3px 9px; font-size: 12px; border-radius: 7px; }

.btn-ghost { border-color: transparent; background: #f4f5fb; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }

.btn-danger { color: var(--red); border-color: #ffd9d9; background: #fff6f6; }
.btn-danger:hover:not(:disabled) { background: #ffecec; border-color: var(--red); color: var(--red); }

/* ---------------- 表单 ---------------- */

.field { margin-bottom: 16px; }

.label {
  display: block; font-weight: 600; margin-bottom: 8px; font-size: 13.5px;
}
.label .req { color: var(--red); margin-left: 3px; }
.label .hint { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 6px; }

.input, .textarea, .select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  outline: none;
  transition: all .16s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.textarea { resize: vertical; line-height: 1.75; }
.input::placeholder, .textarea::placeholder { color: #a8adc0; }

/* 后台的提示词文本框：JS 会按内容把它们撑高（见 admin.js 的 autoGrowTextareas）。
   ⚠️ 这里**不能**加 max-height —— 实测套上 60vh 后，2900px 的长提示词仍会撞上限、
   又回到「显示不全」（这正是用户反馈的那个现象）。宁可页面长一点，也不能让内容被藏起来。 */

/* ---------------- 赛道选择 ---------------- */

.track-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.track {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 13px 6px 11px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: all .16s;
  user-select: none;
}
.track:hover { border-color: var(--accent-2); background: #fbfaff; transform: translateY(-1px); }
.track .ico { font-size: 21px; display: block; margin-bottom: 5px; line-height: 1; }
.track .nm { font-size: 12.5px; color: var(--text-2); }

.track.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.track.on .nm { color: var(--accent); font-weight: 700; }

/* ---------------- 徽标 / 提示条 ---------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
/* hidden 属性必须真正不显示（.badge 等设了 display 会盖掉默认行为） */
[hidden] { display: none !important; }
.badge-red { background: #ffecec; color: #d92d20; }
.badge-green { background: #e8f8f1; color: #0b8f63; }
.badge-amber { background: #fff5e5; color: #b5730a; }
.badge-purple { background: var(--accent-soft); color: var(--accent); }
.badge-blue { background: #e8f1ff; color: #1d5fd0; }
.badge-gray { background: #f1f2f7; color: var(--muted); }

/* 操作按钮下方的消耗提示（取代原来的额度行） */
.cost-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding: 9px 13px;
  background: var(--panel-soft); border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2);
}
.cost-line b { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; }

/* ---------------- 生成进度条 ---------------- */

.prog { padding: 26px 4px 22px; }
.prog-bar {
  height: 8px; border-radius: 999px; background: #eceef6; overflow: hidden;
  position: relative;
}
.prog-bar i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 60%, #57d0c0 100%);
  background-size: 200% 100%;
  transition: width .18s linear;
  animation: progFlow 2.2s linear infinite;
}
@keyframes progFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.prog-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; font-size: 13.5px; color: var(--text-2); font-weight: 600;
}
.prog-pct {
  font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; font-size: 15px;
}
.prog-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 5px; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 记录详情里的键值行 */
.kv-line { display: flex; gap: 12px; padding: 7px 0; font-size: 13.5px; }
.kv-line .k { flex: none; width: 62px; color: var(--muted); font-size: 12.5px; padding-top: 1px; }
.kv-line .v { flex: 1; color: var(--text); }

.result-text.boxed {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 13px 15px;
  max-height: 380px; overflow: auto;
}
.result-text.boxed:empty::before { content: '（空）'; }

.notice {
  display: flex; gap: 9px; align-items: flex-start;
  background: #eef8f3; border: 1px solid #cdeade;
  color: #0b7a55; border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 13px; margin-bottom: 18px;
  /* 备注 / 提示文案可能是后台填的，里面很可能有长 URL 或一长串没有空格的字符。
     没有这两行的话，那一串会把整个页面顶宽（实测 400 个连续字符 → 2425px）。 */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.notice > span { min-width: 0; }
.notice.warn { background: #fff8ec; border-color: #f6e3bd; color: #96660c; }
.notice.info { background: #f0f2ff; border-color: #dcdcff; color: #4b45a8; }

/* 功能页顶部的「免费试用剩余 N/M 次」提示条。
   比普通 notice 更轻（不抢功能说明的位置），但用紫色描边保证一眼能看到。 */
.free-tip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(107, 91, 250, .1), rgba(143, 123, 255, .06));
  border: 1px solid rgba(107, 91, 250, .28);
  color: var(--accent); border-radius: var(--radius-sm);
  padding: 9px 13px; font-size: 13px; margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.free-tip b { font-size: 14px; font-variant-numeric: tabular-nums; }
.free-tip .ft-sub { margin-left: auto; color: var(--muted); font-size: 12px; }
.free-tip.used {
  background: #fff8ec; border-color: #f6e3bd; color: #96660c;
}
.free-tip.used .ft-sub { color: #b07d20; }
/* 会员 / 管理员：不消耗免费次数 —— 用绿色与「剩余次数」区分开，
   避免他们看到「剩余 0/3」以为自己的额度用完了 */
.free-tip.member {
  background: linear-gradient(90deg, rgba(16, 148, 96, .1), rgba(16, 148, 96, .05));
  border-color: rgba(16, 148, 96, .3);
  color: #0b7a52;
}
.free-tip.member .ft-sub { color: #3f8c6f; }

/* ---------------- Tab ---------------- */

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding: 0 18px; }
.tab {
  padding: 12px 4px; margin-right: 20px;
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-weight: 600; position: relative;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--accent); }
.tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ---------------- 结果区 ---------------- */

.title-list { display: flex; flex-direction: column; gap: 9px; }

.title-item {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
  background: var(--panel-soft);
  transition: all .16s;
}
.title-item:hover { border-color: var(--accent-2); background: #fff; box-shadow: var(--shadow); }
.title-item .idx {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.title-item .txt { flex: 1; font-weight: 600; line-height: 1.6; word-break: break-word; }
.title-item .cp {
  flex: none; border: none; background: none; cursor: pointer;
  color: var(--muted); padding: 3px 6px; border-radius: 6px; font-size: 12.5px;
}
.title-item .cp:hover { background: var(--accent-soft); color: var(--accent); }

.ref-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--border);
}
.ref-item:last-child { border-bottom: none; }
.ref-item .rt { font-size: 13px; font-weight: 600; line-height: 1.55; }
.ref-item .rm { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; }
.ref-item .rk {
  flex: none; font-size: 11px; padding: 2px 7px; border-radius: 6px;
  background: #f3f4fb; color: var(--muted); margin-top: 2px;
}

/* ---- 账号定位结果 ---- */
.profile-rows { display: flex; flex-direction: column; gap: 0; }
.profile-rows .prow {
  display: flex; gap: 14px; padding: 10px 0;
  border-bottom: 1px dashed var(--border); align-items: flex-start;
}
.profile-rows .prow:last-child { border-bottom: none; }
.profile-rows .pk {
  flex: none; width: 76px; font-size: 12.5px; color: var(--muted);
  padding-top: 1px; letter-spacing: .3px;
}
.profile-rows .pv { flex: 1; font-size: 13.5px; line-height: 1.68; color: var(--text); }
.pg-title {
  margin: 18px 0 8px; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); letter-spacing: .4px;
  display: flex; align-items: center; gap: 8px;
}
.pg-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.md-box {
  background: #f8f9fd; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 13px; line-height: 1.75; color: var(--text-2);
  max-height: 340px; overflow-y: auto;
}
.md-box h4 {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 12px 0 6px; padding-left: 9px; position: relative;
}
.md-box h4:first-child { margin-top: 0; }
.md-box h4::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.md-box h5 { font-size: 12.5px; font-weight: 700; color: var(--text); margin: 10px 0 5px; }
.md-box p { margin: 0 0 7px; }
.md-box p:last-child { margin-bottom: 0; }
.md-box ul { margin: 4px 0 8px; padding-left: 20px; }
.md-box li { margin: 3px 0; }
.md-box .md-box code, .md-box code {
  background: #eceef8; border-radius: 4px; padding: 1px 5px;
  font-size: 12px; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---- 我的定位：对标文章原文 ---- */

.src-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .16s;
}
.src-item:last-child { margin-bottom: 0; }
.src-item[open] { border-color: #d9d8f6; background: #fff; }

.src-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  user-select: none;
}
.src-item > summary::-webkit-details-marker { display: none; }
.src-item > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--muted); font-size: 12px;
  transition: transform .16s;
}
.src-item[open] > summary::after { transform: rotate(180deg); }
.src-item > summary:hover { background: #f7f7fe; }

.src-item .src-title { font-weight: 700; font-size: 13.5px; line-height: 1.5; }
.src-item .rm { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); }

.src-url {
  padding: 0 14px 8px;
  font-size: 12px; word-break: break-all;
}
.src-url a { color: var(--accent); }
.src-url a:hover { text-decoration: underline; }

.src-text {
  margin: 0;
  padding: 14px 16px;
  border-top: 1px dashed var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 13.5px; line-height: 1.9; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow: auto;
}

/* ---- 定位信息表（hero 卡 / 记录详情共用） ---- */

.hero-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.hero-cell {
  background: var(--panel-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.hero-cell .hk { font-size: 12px; color: var(--muted); margin-bottom: 5px; letter-spacing: .3px; }
.hero-cell .hv { font-size: 13.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

.result-text {
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.9; font-size: 14.5px; color: var(--text);
}
.result-text:empty::before { content: '改写结果会显示在这里'; color: #b6bbcc; }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare .cbox {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 12px; max-height: 460px; overflow: auto;
}
.compare .cbox h4 { margin: 0 0 9px; font-size: 12px; color: var(--muted); font-weight: 600; }
.compare .cbox .result-text { font-size: 13.5px; line-height: 1.85; }

.char-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: 6px; }

.empty {
  text-align: center; padding: 46px 20px; color: var(--muted); font-size: 13.5px;
}
.empty .big { font-size: 34px; margin-bottom: 12px; opacity: .55; }

/* ---------------- 加载 ---------------- */

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: inline-block;
}
.spinner.dark { border-color: #d9dcec; border-top-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, #f1f2f8 25%, #e8eaf4 37%, #f1f2f8 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite;
  border-radius: 8px; height: 14px; margin-bottom: 10px;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------- Toast ---------------- */

.toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 9px; align-items: center;
  pointer-events: none;
}
.toast {
  background: #23273a; color: #fff;
  padding: 10px 17px; border-radius: 10px;
  box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500;
  max-width: 78vw; animation: toastIn .22s ease;
}
.toast.ok { background: #16794f; }
.toast.err { background: #b42318; }
.toast.warn { background: #a16207; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------------- 弹窗 ---------------- */

.modal-mask {
  position: fixed; inset: 0; background: rgba(20, 22, 34, .42);
  display: grid; place-items: center; z-index: 500; padding: 20px;
  backdrop-filter: blur(3px);
}
.modal-mask[hidden] { display: none; }
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700;
}
.modal-head .x { border: none; background: none; cursor: pointer; font-size: 19px; color: var(--muted); line-height: 1; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ---------------- 登录页 ---------------- */

.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -5%, #e9e5ff 0%, transparent 62%),
    radial-gradient(800px 480px at 88% 8%, #e2f1ff 0%, transparent 58%),
    var(--bg);
}

.auth-card {
  width: min(410px, 100%);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 34px 32px 30px;
}

.auth-brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.auth-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

.auth-tabs {
  display: flex; background: #f2f3f9; border-radius: 11px; padding: 4px; margin-bottom: 22px;
}
.auth-tabs button {
  flex: 1; padding: 9px; border: none; background: none; border-radius: 8px;
  cursor: pointer; font-weight: 600; color: var(--muted); transition: all .16s;
}
.auth-tabs button.active { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(27,30,44,.08); }

.auth-error {
  background: #fff2f2; border: 1px solid #ffd7d7; color: #b42318;
  padding: 9px 13px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px;
}
.auth-error[hidden] { display: none; }

.auth-tip { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 18px; line-height: 1.7; }

/* ---------------- 管理后台 ---------------- */

.admin-wrap { max-width: 1180px; margin: 0 auto; padding: 22px; }
/* 右下角「联系客服」是 fixed 悬浮按钮，会压住页面最底部的操作按钮
   （去 AI 味结果区的「重新生成 / 复制结果」就被挡过）。
   common.js 在渲染出客服入口时给 <html> 加 .has-support-fab，
   这里据此给页面底部留出与按钮等高的空间 —— 按钮没显示时不会留空白。 */
html.has-support-fab .layout,
html.has-support-fab .admin-wrap { padding-bottom: 96px; }
/* 工作台是「整屏不滚动 + 内部列各自滚动」，外层 padding 不参与滚动，
   所以可滚动的列还要单独留白。 */
html.has-support-fab .col-scroll { padding-bottom: 88px; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.stat {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .k { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.stat .v { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.stat .v.accent { color: var(--accent); }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; }

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.tbl th { color: var(--muted); font-weight: 600; background: var(--panel-soft); white-space: nowrap; }
table.tbl tr:hover td { background: #fbfbfe; }
table.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl td .btn-sm { padding: 4px 10px; font-size: 12px; }
table.tbl td .split { gap: 6px; }
.tbl-wrap { overflow-x: auto; }

.kv-tag { font-size: 11px; color: var(--muted); }

/* 操作列按钮：窄屏也换行排列，不被裁掉 */
.ops-cell { display: flex; flex-wrap: wrap; gap: 6px; min-width: 190px; max-width: 210px; }
.ops-cell .btn-sm { padding: 4px 9px; font-size: 12px; }

.sec-title {
  font-size: 15px; font-weight: 700; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px;
}
.sec-desc { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }

.split {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.divider { height: 1px; background: var(--border); margin: 22px 0; }

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* ---------------- 分类筛选（我的记录） ---------------- */

/* 记录页：数据保留提示条 */
.record-keep {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 18px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  background: var(--accent-soft, #efeafe); border: 1px solid #ddd5ff; border-radius: var(--radius-sm);
}
.record-keep span:first-child { flex: 0 0 auto; }

.filter-wrap {
  background: linear-gradient(180deg, #f8f8ff 0%, #fbfbff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 18px;
}
.filter-label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .5px; margin-bottom: 11px;
  display: flex; align-items: center; gap: 8px;
}
.filter-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 10px;
}

.fchip {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: all .16s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.fchip::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .16s;
}
.fchip:hover { border-color: var(--accent-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.fchip.on {
  border-color: var(--accent);
  background: linear-gradient(135deg, #f4f1ff 0%, #fbfaff 100%);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.fchip.on::before { background: var(--accent); }

.fchip-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 17px;
  background: #f3f4fb;
  transition: all .16s;
}
.fchip.on .fchip-ico { background: #e6e1ff; }

.fchip-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fchip-txt b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.fchip-txt i {
  font-style: normal; font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fchip.on .fchip-txt b { color: var(--accent); }
.fchip.on .fchip-txt i { color: #6f68c9; }

/* ---------------- 后台：左侧分类导航 ---------------- */

.admin-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 18px; align-items: start;
  max-width: 1340px; margin: 0 auto; padding: 22px;
}

/* 左侧分类导航：整块吸顶 */
.admin-side { position: sticky; top: calc(var(--nav-h) + 22px); }

.admin-nav {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
  max-height: calc(100vh - var(--nav-h) - 46px);
  overflow-y: auto;
  counter-reset: navgrp;
}
.admin-nav .grp {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); font-weight: 700;
  padding: 13px 10px 6px; letter-spacing: .8px;
}
.admin-nav .grp::before {
  content: ''; width: 3px; height: 11px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .55;
}
.admin-nav .grp:first-child { padding-top: 7px; }
.admin-nav .grp:first-child::before { opacity: 1; }

.admin-nav button {
  position: relative;
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none; border-radius: 10px;
  cursor: pointer; color: var(--text-2); font-weight: 600; transition: all .15s;
}
.admin-nav button::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.admin-nav button:hover { background: #f5f6fc; color: var(--text); }
.admin-nav button:hover .ic { transform: scale(1.08); }
.admin-nav button.on {
  background: linear-gradient(135deg, #f2efff 0%, #f8f7ff 100%);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px #e4dfff;
}
.admin-nav button.on::before { opacity: 1; }
.admin-nav button .ic {
  font-size: 15px; width: 20px; text-align: center;
  transition: transform .15s;
}
.admin-nav button .lb { flex: 1; }
.admin-nav button .cnt {
  font-size: 11px; color: var(--muted);
  background: #f2f3f9; border-radius: 999px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  transition: all .15s;
}
.admin-nav button.on .cnt { background: #e4dfff; color: var(--accent); }

.admin-main > .card { margin-top: 0; }
.admin-main > .card + .card { margin-top: 16px; }
.admin-main > section[data-page] > .card:first-child { margin-top: 0; }
.admin-main > section[data-page] > .card + .card { margin-top: 16px; }
.admin-sticky-save {
  position: sticky; bottom: 0; z-index: 20;
  /* 用卡片自身的白色做渐变，避免下层字段文字透出来 */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 46%, #fff 100%);
  padding: 20px 0 10px; margin-top: 4px;
}

@media (max-width: 1000px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-side { position: static; }
  .admin-nav {
    flex-direction: row; align-items: center;
    max-height: none; overflow-x: auto; overflow-y: hidden;
    padding: 10px;
  }
  .admin-nav .grp { display: none; }
  .admin-nav button { width: auto; white-space: nowrap; }
  .admin-nav button::before { display: none; }
  .admin-nav button .cnt { margin-left: 2px; }
}

/* ---------------- 响应式 ---------------- */

@media (max-width: 1180px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .col-scroll.right { display: none; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .nav-links { display: none; }
  .track-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .seg { width: 100%; }
  .seg-item { flex: 1; text-align: center; }
  .ts-preview { height: 460px; }
}

/* ---------------- 系统自检 / 数据备份 ---------------- */

.chk {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.chk::before { font-size: 12px; line-height: 1; }
.chk.ok { background: #e8f7f0; color: #0b7a55; }
.chk.ok::before { content: '✓'; }
.chk.bad { background: #fdecec; color: #c0392b; }
.chk.bad::before { content: '✕'; }
.chk.skip { background: #f1f1f4; color: #7b7b88; }
.chk.skip::before { content: '–'; }
.chk.busy { background: #eef1ff; color: #4b45a8; }
.chk.busy::before { content: '◌'; }

.check-msg { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.check-msg .chk-hint { display: block; color: #96660c; font-size: 12px; margin-top: 3px; }
.check-msg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; background: #f4f4f7; border-radius: 4px; padding: 1px 5px; color: #444;
}
.check-where { font-size: 12px; color: var(--muted); }

/* 管理员依赖告警条 */
.dep-warn {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 22px 0; padding: 11px 16px;
  background: #fdecec; border: 1px solid #f6cdcd; border-radius: var(--radius-sm);
  color: #a6271a; font-size: 13px; line-height: 1.7;
}
.dep-warn b { font-weight: 700; }
.dep-warn a { color: #a6271a; font-weight: 700; text-decoration: underline; }
.dep-warn .dw-item { white-space: nowrap; }

/* ---------------- 会员等级徽章 ---------------- */
.level-pill {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #f3f0ff, #e9e4ff);
  border: 1px solid #d9d2ff;
  color: #4a3fb0;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: help;
  white-space: nowrap;
}
.level-pill b { font-weight: 800; }
.level-pill span:last-child {
  background: #fff; border-radius: 999px; padding: 1px 7px;
  font-size: 11.5px; font-weight: 800; color: #6b5bfa;
}

/* ---------------- 配图引擎选择 ---------------- */
.chan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.chan-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; transition: all .16s; font: inherit; color: inherit;
}
.chan-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.chan-card.on {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box;
  box-shadow: 0 6px 18px var(--accent-ring);
}
.chan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chan-name { font-weight: 700; font-size: 13.5px; }
.chan-cost {
  font-size: 12px; font-weight: 800; color: #8a6412;
  background: #fff8e6; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.chan-cost s { opacity: .5; font-weight: 500; margin-right: 5px; }
.chan-desc { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.chan-meta {
  font-size: 11px; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.chan-empty {
  font-size: 12.5px; color: var(--amber); line-height: 1.7;
  background: #fffbeb; border: 1px solid #fde9b8; border-radius: var(--radius-sm); padding: 10px 12px;
}

/* ---------------- 排版结果的「推送到」 ---------------- */
.wx-pick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel-soft);
}
.wx-pick-label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.wx-pick-link { font-size: 12.5px; color: var(--accent); text-decoration: none; font-weight: 600; }
.wx-pick-link:hover { text-decoration: underline; }
.wx-pick-msg { font-size: 12px; color: var(--muted); }
select.select-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 8px; max-width: 260px; }

/* 排版结果：要写入哪些草稿箱（多平台勾选） */
.draft-pick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel-soft);
}
.draft-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.draft-chip {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; color: var(--text-2); background: #fff; user-select: none;
  transition: border-color .15s, color .15s, background .15s;
}
.draft-chip:hover { border-color: var(--accent); }
.draft-chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.draft-chip.disabled { opacity: .45; cursor: not-allowed; }
.draft-chip input { margin: 0; accent-color: var(--accent); }
.draft-chip .tag-auto {
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--green-soft, #e7f7ef); color: var(--green, #12b76a);
}
.draft-chip .tag-manual {
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--amber-soft, #fdf3d8); color: var(--amber, #b7791f);
}

/* ── 第 43 轮：正文镜像（给浏览器扩展手动同步用） ──────────────── */
/*
 * 为什么不用 display:none / visibility:hidden：
 * 扩展取正文时会做「这个元素可见吗」的判断，藏起来它就当没有。
 * 所以用「照常渲染、只是挪出视口」——对用户不可见，对扩展是可读的真内容。
 */
.aiw-article-mirror {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 760px;
  max-height: none;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}

/* ── 第 42 轮：文章同步助手（同步到全部平台） ───────────────────── */

/* 结果卡里的同步说明条 */
.sync-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, var(--accent-soft, #eef0ff), transparent 70%);
}
.sync-bar-tip { font-size: 12.5px; color: var(--text-2); min-width: 0; }
.sync-bar-tip a { color: var(--accent); font-weight: 600; text-decoration: none; }
.sync-bar-tip a:hover { text-decoration: underline; }
/* 手机端文案默认藏；桌面端反之（第 55 轮：手机装不了扩展，别再劝下载 Chrome） */
.sync-bar-tip-mobile { display: none; }
html[data-device="mobile"] .sync-bar-tip:not(.sync-bar-tip-mobile),
html.is-narrow .sync-bar-tip:not(.sync-bar-tip-mobile) { display: none; }
html[data-device="mobile"] .sync-bar-tip-mobile,
html.is-narrow .sync-bar-tip-mobile { display: inline; }
.sync-bar-platforms { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sync-plat {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--text-2);
  white-space: nowrap;
}

/* 「点击这里打开百家号」这排按钮：每个平台一个，明显的按钮，不要挤成一行小字 */
.open-platform-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.open-platform-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent-soft, #eef0ff);
  color: var(--accent); font-size: 13.5px; font-weight: 600;
  text-decoration: none; line-height: 1.2;
  transition: background .15s, transform .1s;
}
.open-platform-btn:hover { background: var(--accent); color: #fff; }
.open-platform-btn:active { transform: translateY(1px); }
.open-platform-btn b { font-weight: 700; }

/* 窄屏：按钮占满一行，手指点得到 */
html[data-device="mobile"] .open-platform-grid,
html.is-narrow .open-platform-grid { flex-direction: column; }
html[data-device="mobile"] .open-platform-btn,
html.is-narrow .open-platform-btn { width: 100%; justify-content: center; }

/* 自动写作：批量结果列表 */
.batch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-2); font-weight: 600;
  padding: 0 2px 10px;
}
.batch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.batch-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; background: #fff; min-width: 0;
}
.batch-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.batch-item.fail { border-color: #f3c9c9; background: #fff8f8; }
.batch-item .bi-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700; background: var(--bg-2, #f1f1f6); color: var(--text-2);
}
.batch-item.done .bi-n { background: var(--green, #12b76a); color: #fff; }
.batch-item.fail .bi-n { background: #e05252; color: #fff; }
.batch-item.running .bi-n { background: var(--accent); color: #fff; }
.batch-item .bi-main { flex: 1 1 auto; min-width: 0; }
.batch-item .bi-title { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-item .bi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.batch-item .bi-acts { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .batch-item { flex-wrap: wrap; }
  .batch-item .bi-acts { width: 100%; justify-content: flex-start; }
}

/* ---------------- 配置公众号 ---------------- */
.wx-tip {
  display: flex; gap: 10px; align-items: flex-start;
  background: #f5f7ff; border: 1px solid #e2e6ff; border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 13px; line-height: 1.75; color: var(--text-2);
}
.wx-tip b { color: var(--text); }
/* 帮助文案改成后台可编辑（第 39 轮）后，里面可能出现 <code> / <a> / <img>，统一给个稳妥样式。
   图片限宽是重点：后台粘一张 2000px 宽的截图，不加限制会把整个手机页撑出横向滚动。 */
.wx-tip code {
  background: rgba(107, 91, 250, 0.09); padding: 1px 5px; border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
.wx-tip a { color: var(--accent); text-decoration: underline; word-break: break-all; }
.wx-tip img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; display: block; }
.wx-tip ul, .wx-tip ol { margin: 6px 0; padding-left: 22px; }

/* ── 「绑定草稿箱教程」折叠块（第 47 轮）
      为什么折叠：这几步客户往往会写得**很长**（还夹带截图），展开态会把整页顶到几千 px，
      把下面「添加公众号 / 服务器出口 IP」这些真正要操作的东西挤到看不见。
      默认收起、点标题展开；用原生 <details>，JS 挂了也能用。 */
.wx-help-fold { margin-bottom: 0; }
.wx-help-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  cursor: pointer; list-style: none; user-select: none;
  background: #f5f7ff; border: 1px solid #e2e6ff; border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13.5px; color: var(--text); line-height: 1.6;
}
.wx-help-summary::-webkit-details-marker { display: none; }
.wx-help-summary::marker { content: ''; }
.wx-help-summary:hover { background: #eef1ff; }
.wx-help-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wx-help-title { font-weight: 700; }
.wx-help-sub { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.wx-help-act { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
/* 第 49 轮：文案从「展开 ▾」改成运营指定的「【展开】查看」（展开后自动变【收起】）*/
.wx-help-act::after { content: '【展开】查看'; }
.wx-help-fold[open] .wx-help-act::after { content: '【收起】'; }
/* 展开后跟下面那块提示连成一体，别出现「双层边框」 */
.wx-help-fold[open] .wx-help-summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.wx-help-fold[open] > .wx-tip { border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
@media (max-width: 520px) {
  /* 手机上「引导客户点击即可」太占位，收进右边，避免把标题挤断行 */
  .wx-help-sub { display: none; }
  .wx-help-act { margin-left: auto; }
}
.ip-box {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #f5e2b0; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 10px;
}
.ip-box code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 700; color: #8a6412; letter-spacing: .3px;
}
.wx-list { display: flex; flex-direction: column; gap: 12px; }
.wx-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden;
}
.wx-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--panel-soft); cursor: pointer;
}
.wx-card.open .wx-card-head { border-bottom: 1px solid var(--border); }
/* 收起时只显示关键信息：备注名 / 状态 / AppID / Secret 尾号 / 最近测试 */
.wx-card-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.wx-card-msg { font-size: 12px; color: var(--muted); min-width: 0; }
.wx-card-msg.bad { color: #c0392b; }
.wx-caret { display: inline-block; color: var(--muted); font-size: 12px; transition: transform .18s; }
.wx-card.open .wx-caret { transform: rotate(180deg); }
.wx-card-name { font-weight: 700; font-size: 14px; }
.wx-card-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--muted); word-break: break-all;
}
.wx-card-body { padding: 14px 16px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.wx-card-body .full { grid-column: 1 / -1; }
.wx-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--panel-soft);
}
.wx-msg { font-size: 12.5px; line-height: 1.6; }
.wx-msg.ok { color: #0b8f63; }
.wx-msg.bad { color: #c0392b; }
.wx-empty {
  text-align: center; padding: 30px 20px; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}
.verify-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.verify-dot.ok { background: var(--green); }
.verify-dot.bad { background: var(--red); }
.verify-dot.none { background: var(--muted); opacity: .5; }

/* 第 33 轮：配置草稿箱 —— 各平台绑定块（百家号 / 头条） */
.plat-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel, #fff); padding: 14px 16px; margin-bottom: 14px;
}
.plat-block:last-child { margin-bottom: 0; }
.plat-block-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plat-name { font-weight: 700; font-size: 14px; }
.plat-empty {
  margin-top: 10px; padding: 14px; text-align: center; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .wx-card-body { grid-template-columns: minmax(0, 1fr); }
  .level-pill { display: none; }
  /* 绑定块的表头在窄屏上不横滑，改成竖排铺开 */
  .plat-block-head { flex-direction: column; align-items: flex-start; }
}

/* ---------------- 后台：配图通道编辑卡 ---------------- */
.chan-admin { display: flex; flex-direction: column; gap: 12px; }
.chan-admin-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden;
}
.chan-admin-card.off { opacity: .62; }
/* 后台：勾选类设置（平台开关 / 清理范围） */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 18px;
  margin-bottom: 6px;
}
.check-grid .check { align-items: flex-start; }
.check-grid .check span { overflow-wrap: anywhere; }

/* 可点击的说明卡（后台「自动写作」页用来指路到三个子功能） */
.check-item {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.check-item:hover { border-color: var(--accent); background: var(--panel); }
.check-item .check-name { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.check-item .check-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.api-admin { display: flex; flex-direction: column; gap: 12px; }
.cac-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--panel-soft); border-bottom: 1px solid var(--border);
}
.cac-name { font-weight: 700; font-size: 13.5px; margin-right: 8px; }
.cac-body {
  padding: 12px 14px 2px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
.cac-foot { padding: 0 14px 12px; }
.chan-admin-card .field .label { font-size: 12.5px; }
.chan-admin-card .input, .chan-admin-card .select { font-size: 13px; padding: 7px 10px; }

@media (max-width: 860px) {
  .cac-body { grid-template-columns: minmax(0, 1fr); }
  .cac-body .field { grid-column: 1 / -1 !important; }
}

/* ============================================================
   第八轮：筛选条 / Key 消耗 / 推广赚钱
   ============================================================ */

.hint { font-weight: 400; color: var(--muted); font-size: 12px; }

/* ---------------- 通用筛选行（概览 / 使用记录 / Key 消耗） ---------------- */

.filter-row {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end;
  background: linear-gradient(180deg, #f8f8ff 0%, #fbfbff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.filter-cell { display: flex; flex-direction: column; gap: 6px; }
.filter-cell .label { margin: 0; }
.filter-cell .input, .filter-cell .select { padding: 7px 10px; font-size: 13px; }
.filter-cell:last-child { margin-left: auto; }

/* ---------------- Key 余额胶囊 ---------------- */

.bal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: #f1f2f7; color: var(--muted);
  white-space: nowrap;
}
.bal-pill.ok { background: #e8f8f1; color: #0b8f63; }
.bal-pill.bad { background: #ffecec; color: #d92d20; }
.bal-pill.unknown { background: #fff5e5; color: #b5730a; }
.bal-pill .at { font-weight: 400; opacity: .7; }

/* ---------------- 功能页的 Key 与余额条 ---------------- */

.key-strip {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-soft);
  padding: 11px 14px;
  margin-bottom: 16px;
}
.key-strip .ks-title {
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  display: flex; align-items: center; gap: 6px;
}
.key-strip .ks-items {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  /* ⚠️ 必须允许收缩 + 不出框：一个上游可能配 20+ 个 Key，下面的余额胶囊
     会全部挂在同一个 .ks-pill 里。老实现是 inline-flex + nowrap，等于把
     这一行拉成 4791px 宽，整个后台被撑出横向滚动条（第 38 轮报障「配置看不到」）。 */
  min-width: 0; max-width: 100%; flex: 1 1 auto;
}
.key-strip .ks-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; row-gap: 6px;
  padding: 5px 11px; border-radius: 12px;
  border: 1px solid var(--border-strong); background: #fff;
  font-size: 12px; white-space: normal;
  min-width: 0; max-width: 100%;
}
.key-strip .ks-pill b { font-weight: 600; white-space: nowrap; }
.key-strip .ks-pill .mono { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------------- 长提示词文本框（限高 + 一键展开，第 38 轮） ----------------
   这些框装的是几千字的提示词。老实现「内容多高就多高」→ 单个框 2900px、
   整页 13000+px，后台看起来像「配置丢了」（第 38 轮报障）。
   现在默认限高内部滚动，右下角给「展开全部（共 N 字）」。 */
.textarea.ta-clamped { overflow-y: auto; }
.ta-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11.5px; color: var(--muted);
}
.ta-tools[hidden] { display: none; }
.ta-tools .ta-btn {
  border: 1px solid var(--border-strong); background: #fff; color: var(--text-2);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px; cursor: pointer;
  font-family: inherit;
}
.ta-tools .ta-btn:hover { border-color: var(--accent); color: var(--accent); }
.key-strip .ks-pill.bad { border-color: #f6c9c9; background: #fff7f7; }
.key-strip .ks-pill.warn { border-color: #f6e3bd; background: #fffbf3; }

/* KEY 隔离框：429（今日配额用尽）的 Key 暂存处，每天 15:00 自动搬回主输入框 */
.key-quarantine {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed #c8d6ea; border-radius: var(--radius-sm);
  background: #f4f8ff;
}
.key-quarantine .qk-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: #33517a; margin-bottom: 8px;
}
.key-quarantine .qk-head b { font-weight: 700; }
.key-quarantine .qk-head .kv-tag { color: #5b759b; }
.key-quarantine .qk-head button { margin-left: auto; flex-shrink: 0; }
.key-quarantine .qk-list { display: flex; flex-wrap: wrap; gap: 6px; }
.key-quarantine .qk-empty { font-size: 12px; color: #5b759b; line-height: 1.7; }
.key-quarantine .qk-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #e6eefc; border: 1px solid #cadcf6;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #33517a;
}

/* ---------------- Key 消耗：明细表内的小字 ---------------- */

.key-cell { display: flex; flex-direction: column; gap: 2px; }
.key-cell .kn { font-weight: 700; font-size: 13px; }
.key-cell .km { font-size: 11.5px; color: var(--muted); }
.ratio-bar {
  height: 6px; border-radius: 999px; background: #eef0f6; overflow: hidden; min-width: 60px;
}
.ratio-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------------- 推广赚钱：后台阶梯 / 用户端页面 ---------------- */

.tier-row input { width: 110px; }

.promo-hero {
  background: linear-gradient(135deg, #6b5bfa 0%, #8f7dff 55%, #b3a5ff 100%);
  border-radius: var(--radius);
  color: #fff;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(107, 91, 250, .22);
}
.promo-hero h2 { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.promo-hero p { margin: 0; font-size: 12.5px; opacity: .88; }

.promo-invite {
  display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; gap: 12px; align-items: end;
  margin-top: 18px;
}
.promo-invite .label { color: var(--text-2); }
.promo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 800; letter-spacing: 3px;
  background: rgba(255, 255, 255, .18); border: 1px dashed rgba(255, 255, 255, .5);
  border-radius: var(--radius-sm); padding: 8px 14px; color: #fff; text-align: center;
}
.promo-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius-sm);
  padding: 10px 12px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-hero .btn { background: #fff; color: var(--accent); border-color: transparent; font-weight: 700; }
.promo-hero .btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .45); }

.promo-rules li { margin-bottom: 4px; }

.tier-table td, .tier-table th { font-size: 12.5px; }
.tier-table tr.on td { background: var(--accent-soft); font-weight: 600; }

/* 返佣阶梯里「按各会员等级分别列出返佣金额」的金额标签 */
.tier-money-list, .kv-price-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-money {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(107, 91, 250, .1); border: 1px solid rgba(107, 91, 250, .22);
  font-size: 12px; color: var(--accent); white-space: nowrap;
}
.tier-money b { font-weight: 700; }
/* 「视同邀请名额」小标（第 29 轮）：塞在会员名与返佣金额之间，一眼看到这个等级白送几个名额 */
.tm-bonus {
  padding: 1px 6px; border-radius: 5px;
  background: rgba(34, 197, 94, .16); color: #15803d;
  font-size: 11px; font-weight: 700;
}
/* 阶梯表上方的「各等级视同名额」一览 */
.tier-bonus-list {
  margin: 0 0 12px; padding: 12px 14px;
  border: 1px solid rgba(34, 197, 94, .26); border-radius: var(--radius-sm);
  background: rgba(34, 197, 94, .06);
}
.tier-bonus-list .tbl-title { font-size: 12.5px; font-weight: 800; color: #15803d; margin-bottom: 8px; }
.tier-bonus-list .tbl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bonus-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(34, 197, 94, .32);
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.bonus-chip b { color: #15803d; font-weight: 800; }
html[data-device="mobile"] .tier-bonus-list .tbl-chips,
html.is-narrow .tier-bonus-list .tbl-chips { flex-direction: column; align-items: flex-start; }
.kv-price {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(107, 91, 250, .1); border: 1px solid rgba(107, 91, 250, .22);
  font-size: 12.5px; color: var(--accent); font-variant-numeric: tabular-nums;
}
.kv-price b { font-weight: 700; }

/* 收款二维码上传（用户自己传图，不用再去找图床拿链接） */
.qr-upload {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 12px 14px;
}
.qr-upload-preview {
  width: 108px; height: 108px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.qr-upload-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.payee-box {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 13px 14px;
}

@media (max-width: 720px) {
  .promo-invite { grid-template-columns: minmax(0, 1fr); }
  .filter-cell:last-child { margin-left: 0; }
}

/* ---------------- 一键排版：配图数量步进器 ---------------- */

.ts-opts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 18px; align-items: start;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 13px 14px;
}
.stepper {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; padding: 3px;
}
.stepper-btn {
  width: 32px; height: 30px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-2);
  font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: background .15s, color .15s;
}
.stepper-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.stepper-num {
  min-width: 62px; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text); font-size: 13.5px;
}

/* ── 登录页邀请横幅 ── */
.invite-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  border: 1px solid rgba(107, 91, 250, .28);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 12.5px; color: var(--text-2);
}
.invite-ico { font-size: 15px; line-height: 1; }
.invite-txt { flex: 1 1 auto; min-width: 120px; }
.invite-code {
  padding: 2px 8px; border-radius: 6px;
  background: #fff; border: 1px dashed rgba(107, 91, 250, .45);
  color: var(--accent); font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; font-size: 12px;
}

/* ── 会员充值页 ── */
.member-hero {
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #6b5bfa 0%, #8f7bff 55%, #b39dff 100%);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.member-hero h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: .3px; }
.member-hero p { margin: 0; font-size: 13px; opacity: .92; line-height: 1.7; }
.member-hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-top: 18px;
}
.mhs-card {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 5px;
}
.mhs-label { font-size: 12px; opacity: .85; }
.mhs-val { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* 顶部提示条：会员每月赠分 / 免费试用剩余次数 */
.mhs-tip {
  margin-top: 12px; padding: 8px 12px;
  font-size: 12.5px; line-height: 1.7;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm);
}

/* 充值套餐卡片 */
.tier-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.tier-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 16px 16px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tier-card:hover { border-color: rgba(107, 91, 250, .45); transform: translateY(-2px); }
.tier-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107, 91, 250, .14), var(--shadow);
}
.tier-tag {
  position: absolute; top: -10px; right: 10px;
  padding: 2px 8px; border-radius: 20px;
  background: linear-gradient(135deg, #ff8a3d, #ff6b6b);
  color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(255, 107, 107, .35);
}
.tier-amount { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.tier-points { font-size: 14px; font-weight: 600; color: var(--text); }
.tier-bonus { font-size: 12px; color: #e8552f; font-weight: 600; }
.tier-bonus.muted { color: var(--muted); font-weight: 500; }
.tier-empty {
  grid-column: 1 / -1; padding: 26px; text-align: center;
  color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* 会员等级卡片 */
.vip-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.vip-card {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 18px 16px;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vip-card:hover { border-color: rgba(107, 91, 250, .45); transform: translateY(-2px); }
.vip-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(107, 91, 250, .14), var(--shadow);
}
.vip-name { font-size: 15px; font-weight: 700; color: var(--text); }
.vip-price { font-size: 24px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.vip-unit { font-size: 12px; font-weight: 500; color: var(--muted); }
.vip-line { font-size: 12.5px; color: var(--text-2); }
.vip-line.muted { color: var(--muted); }
.vip-line.bonus { color: #b45309; font-weight: 600; }
.vip-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
/* 会员卡片上的「赠送说明」徽章：与加油包的「多送 N」同一套视觉语言（橙底胶囊），
   比原来的一行灰色小字更显眼，用户一眼能看到「送了什么」。 */
.vip-desc-badge {
  display: inline-block; align-self: flex-start;
  margin-top: 2px; padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 138, 61, .16), rgba(255, 107, 107, .16));
  border: 1px solid rgba(232, 85, 47, .28);
  color: #e8552f; font-size: 12px; font-weight: 700; line-height: 1.6;
}

/* 会员卡片状态徽标 + 禁用态（当前会员 / 可升级 / 到期前不可续费） */
.vip-card { position: relative; }
.vip-badge {
  position: absolute; top: 10px; right: 12px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.vip-badge.cur { background: rgba(107, 91, 250, .14); color: var(--accent); }
.vip-badge.up { background: rgba(34, 197, 94, .16); color: #15803d; }
.vip-badge.lock { background: rgba(148, 163, 184, .18); color: var(--muted); }
.vip-card.dim { opacity: .55; cursor: not-allowed; }
.vip-card.dim:hover { border-color: var(--line); transform: none; }
/* 加油包在「未开通会员」时整体变淡并禁用 */
.tier-card.dim { opacity: .5; cursor: not-allowed; }
.tier-card.dim:hover { border-color: var(--line); transform: none; }

.recharge-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line);
}

/* 「充值说明」说明栏（第 29 轮）
   放在档位卡**上方**：左圆形图标 + 右侧标题与规则列表，弱底浅描边，
   与「多送 N 积分」这类促销徽章区分开（那些是暖色，这份说明是中性色）。 */
.recharge-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(107, 91, 250, .05), rgba(107, 91, 250, .02));
}
.recharge-note .rn-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(107, 91, 250, .12); font-size: 17px; line-height: 1;
}
.recharge-note .rn-body { min-width: 0; flex: 1 1 auto; }
.recharge-note .rn-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.recharge-note .rn-list { margin: 0; padding: 0 0 0 2px; list-style: none; }
.recharge-note .rn-list li {
  position: relative; padding-left: 14px;
  font-size: 12.5px; line-height: 1.9; color: var(--text-2);
}
.recharge-note .rn-list li::before {
  content: ''; position: absolute; left: 2px; top: .82em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(107, 91, 250, .5);
}
.recharge-note .rn-list li b { color: var(--accent); }

/* 说明栏下方的居中注记（对齐参考站「注：…」那行的位置） */
.recharge-foot {
  margin: -4px 0 14px; text-align: center;
  font-size: 12px; line-height: 1.8; color: var(--muted);
}

/* 档位卡上方的「已选…」提示：与档位卡贴在一起，读起来是一段话 */
.recharge-hint { display: block; margin: 0 0 10px; }
.recharge-hint:empty { display: none; margin: 0; }

/* 联系客服 */
.support-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.support-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; text-align: center;
}
.support-box-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.support-wx {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px; font-weight: 700; color: var(--accent);
  letter-spacing: .04em; word-break: break-all;
}
.support-qr {
  width: 168px; height: 168px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}

/* 写作台右下角「联系客服」悬浮入口 */
.support-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 16px; border: 0; border-radius: 24px;
  background: linear-gradient(135deg, #6b5bfa, #8f7bff);
  color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 18px rgba(107, 91, 250, .38);
  transition: transform .15s, box-shadow .15s;
}
.support-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(107, 91, 250, .46); }
.support-fab.hidden { display: none; }
.support-modal-grid { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.support-modal-grid > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* 「添加到桌面」引导弹窗（第 32 轮：兼容各手机浏览器） */
.ins-now {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2); margin: 0 0 14px;
}
.ins-now .ins-tag {
  font-size: 11px; line-height: 1.6; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-ring);
}
.ins-now .ins-tag.ok { background: rgba(18, 185, 129, .1); color: var(--green); border-color: rgba(18, 185, 129, .25); }
.ins-now .ins-tag.warn { background: rgba(245, 158, 11, .12); color: #b45309; border-color: rgba(245, 158, 11, .3); }
.ins-steps { margin: 0; padding-left: 22px; }
.ins-steps li { font-size: 14px; line-height: 1.85; color: var(--text); margin-bottom: 8px; }
.ins-steps li b { color: var(--accent); font-weight: 600; }
.ins-alt {
  margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--panel-soft); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
}
.ins-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  font-size: 12.5px; line-height: 1.75; color: var(--text-2);
}
html[data-device="mobile"] .ins-steps li,
html.is-narrow .ins-steps li { font-size: 13.5px; line-height: 1.8; }

@media (max-width: 720px) {
  .member-hero-stats { grid-template-columns: minmax(0, 1fr); }
}
.vip-line.bonus { color: #e8552f; font-weight: 600; }

/* ============================================================
   第十一轮：手机端外壳
   ------------------------------------------------------------
   两套触发条件任选其一（写在同一个选择器列表里，规则只维护一份）：
     1) html[data-device="mobile"]  —— 服务端识别：手机 UA / 微信 / 小程序 / 分享出去的 /m 链接
     2) html.is-narrow              —— 桌面浏览器把窗口缩到 ≤900px（由 common.js 实时打标）
   这样「手机」和「窄窗口」共用一套布局，不会再出现「窗口一窄导航就消失」的老问题。
   ============================================================ */

:root {
  --tabbar-h: 54px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---------------- 底部标签栏 ---------------- */

.mobile-tabbar {
  display: none; /* 桌面外壳下默认隐藏，命中下面任一条件才出现 */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  align-items: stretch;
}
.mobile-tabbar .mtb-item {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, transform .12s;
}
.mobile-tabbar .mtb-item .ic { font-size: 19px; line-height: 1; }
.mobile-tabbar .mtb-item .lb {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.mobile-tabbar .mtb-item:active { transform: scale(.92); }
.mobile-tabbar .mtb-item.on { color: var(--accent); }
.mobile-tabbar .mtb-item.on .lb { font-weight: 700; }
.mobile-tabbar .mtb-item.hidden { display: none; }

/* 顶部安全区（iPhone 刘海屏横屏时才有值，竖屏为 0） */
html[data-device="mobile"] .nav { padding-top: var(--safe-t); height: calc(var(--nav-h) + var(--safe-t)); }

/* ---------------- 手机外壳：整体布局 ---------------- */

html[data-device="mobile"],
html.is-narrow {
  /* 底部留出标签栏高度，content 不会被挡住 */
  --content-pb: calc(var(--tabbar-h) + var(--safe-b) + 14px);
}

html[data-device="mobile"] .mobile-tabbar,
html.is-narrow .mobile-tabbar { display: flex; }

/* 两套外壳都不再用顶部横向导航（手机外壳统一走底部标签栏） */
html[data-device="mobile"] .nav-links,
html.is-narrow .nav-links { display: none; }

html[data-device="mobile"] body,
html.is-narrow body {
  padding-bottom: var(--content-pb);
  overflow-x: hidden;
}

html[data-device="mobile"] .nav,
html.is-narrow .nav {
  height: var(--nav-h);
  padding: 0 12px;
  gap: 8px;
}
html[data-device="mobile"] .nav .brand,
html.is-narrow .nav .brand { flex: 1 1 auto; min-width: 0; gap: 7px; }
html[data-device="mobile"] .nav .brand span:last-child,
html.is-narrow .nav .brand span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-device="mobile"] .nav-right,
html.is-narrow .nav-right { gap: 8px; flex: 0 0 auto; }
html[data-device="mobile"] .level-pill,
html.is-narrow .level-pill { display: none; }
html[data-device="mobile"] .credit-pill,
html.is-narrow .credit-pill { padding: 5px 10px; font-size: 12.5px; }
html[data-device="mobile"] .nav .avatar,
html.is-narrow .nav .avatar { width: 32px; height: 32px; font-size: 13px; }

/* 主工作区：单列 + 自然高度（原来是 100vh 固定高度、内部滚动） */
html[data-device="mobile"] .layout,
html.is-narrow .layout {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 12px 12px calc(var(--content-pb) + 8px);
  gap: 12px;
}
html[data-device="mobile"] .workspace-grid,
html.is-narrow .workspace-grid {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  gap: 12px;
}
html[data-device="mobile"] .col-scroll,
html.is-narrow .col-scroll {
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
html[data-device="mobile"] .col-scroll.right,
html.is-narrow .col-scroll.right { display: block; }
html[data-device="mobile"] .layout.single,
html.is-narrow .layout.single { grid-template-columns: minmax(0, 1fr); }

/* 卡片与内边距收紧，让手机上有更多有效内容空间 */
html[data-device="mobile"] .card,
html.is-narrow .card {
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 30, 44, .04), 0 4px 14px rgba(27, 30, 44, .05);
}
html[data-device="mobile"] .card-head,
html.is-narrow .card-head { padding: 13px 14px; }
html[data-device="mobile"] .card-body,
html.is-narrow .card-body { padding: 14px; }
html[data-device="mobile"] .card-sub,
html.is-narrow .card-sub { font-size: 12.5px; }

/* 各种 auto-fit 网格：手机上最少两列，避免出现「一列超窄」 */
html[data-device="mobile"] .track-grid,
html.is-narrow .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-device="mobile"] .compare,
html.is-narrow .compare { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .form-grid,
html.is-narrow .form-grid { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .wx-card-body,
html.is-narrow .wx-card-body { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .cac-body,
html.is-narrow .cac-body { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .cac-body .field,
html.is-narrow .cac-body .field { grid-column: 1 / -1 !important; }
html[data-device="mobile"] .promo-invite,
html.is-narrow .promo-invite { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .member-hero-stats,
html.is-narrow .member-hero-stats { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .support-modal-grid,
html.is-narrow .support-modal-grid { flex-direction: column; align-items: stretch; }
html[data-device="mobile"] .support-modal-grid > div,
html.is-narrow .support-modal-grid > div { align-items: center; }

/* 后台：侧边栏变横向滚动条，内容单列 */
html[data-device="mobile"] .admin-layout,
html.is-narrow .admin-layout { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .admin-side,
html.is-narrow .admin-side { position: static; }
html[data-device="mobile"] .admin-nav,
html.is-narrow .admin-nav {
  flex-direction: row; align-items: center;
  max-height: none; overflow-x: auto; overflow-y: hidden;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html[data-device="mobile"] .admin-nav::-webkit-scrollbar,
html.is-narrow .admin-nav::-webkit-scrollbar { display: none; }
html[data-device="mobile"] .admin-nav .grp,
html.is-narrow .admin-nav .grp { display: none; }
html[data-device="mobile"] .admin-nav button,
html.is-narrow .admin-nav button { width: auto; white-space: nowrap; flex: 0 0 auto; }
html[data-device="mobile"] .admin-nav button::before,
html.is-narrow .admin-nav button::before { display: none; }
html[data-device="mobile"] .admin-main,
html.is-narrow .admin-main { padding: 12px; }
html[data-device="mobile"] .admin-sticky-save,
html.is-narrow .admin-sticky-save {
  /* 粘性保存条要浮在标签栏之上，否则会被挡住 */
  bottom: var(--content-pb);
  padding: 14px 0 8px;
}

/* 表格：外层横向滚动，表头吸顶；给表格一个下限宽度，避免列被挤成一条 */
html[data-device="mobile"] .tbl-wrap,
html.is-narrow .tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
html[data-device="mobile"] .tbl-wrap::after,
html.is-narrow .tbl-wrap::after { content: none; }
html[data-device="mobile"] table.tbl,
html.is-narrow table.tbl { min-width: 620px; }
html[data-device="mobile"] .tbl th,
html[data-device="mobile"] .tbl td,
html.is-narrow .tbl th,
html.is-narrow .tbl td { white-space: nowrap; }

/* ---------------- 触控可用性 ---------------- */

html[data-device="mobile"] .btn,
html.is-narrow .btn { min-height: 40px; padding: 9px 15px; }
html[data-device="mobile"] .btn-sm,
html.is-narrow .btn-sm { min-height: 34px; }
html[data-device="mobile"] .btn-lg,
html.is-narrow .btn-lg { min-height: 46px; }
html[data-device="mobile"] .seg-item,
html.is-narrow .seg-item { min-height: 38px; }
html[data-device="mobile"] .nav-link,
html.is-narrow .nav-link { min-height: 38px; }

/* iOS 上输入框字号 <16px 会触发「聚焦自动放大」，这里统一顶到 16px */
html[data-device="mobile"] .input,
html[data-device="mobile"] .select,
html[data-device="mobile"] .textarea,
html.is-narrow .input,
html.is-narrow .select,
html.is-narrow .textarea { font-size: 16px; }
html[data-device="mobile"] .textarea,
html.is-narrow .textarea { min-height: 120px; }

/* ---------------- 手机端：各种「提示」居中（第 49 轮） ----------------
   问题：`.cost-line` / `.inline-tip` / `.prog-sub` 这类提示是按电脑版的
   「左对齐 + 一行铺满」做的，到了手机上只剩三四十个字的宽度，右半边空着、
   长句还会被挤到外面（用户报「显示错位或不全」）。
   这里统一改成**居中 + 允许换行**：电脑版一个像素都不动。 */
html[data-device="mobile"] .cost-line,
html.is-narrow .cost-line,
html[data-device="mobile"] .free-tip,
html.is-narrow .free-tip,
html[data-device="mobile"] .prog-sub,
html.is-narrow .prog-sub,
html[data-device="mobile"] .auto-float-tip,
html.is-narrow .auto-float-tip {
  justify-content: center;
  text-align: center;
}
/* 估价行里的「基础价 + 配图…」小标签：单独占一行居中，别被挤在右边缘 */
html[data-device="mobile"] .cost-line .kv-tag,
html.is-narrow .cost-line .kv-tag,
html[data-device="mobile"] .free-tip .kv-tag,
html.is-narrow .free-tip .kv-tag { flex: 1 1 100%; text-align: center; }

html[data-device="mobile"] .inline-tip,
html.is-narrow .inline-tip,
html[data-device="mobile"] .prog-sub,
html.is-narrow .prog-sub,
html[data-device="mobile"] .stk-note,
html.is-narrow .stk-note {
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
}
/* 提示行里靠 `margin-left:auto` 顶到右边缘的小字（如免费次数的「剩余 x 次」）
   在手机上把它收回中间，否则整行看着还是「左对齐 + 右边空一块」 */
html[data-device="mobile"] .free-tip .ft-sub,
html.is-narrow .free-tip .ft-sub,
html[data-device="mobile"] .cost-line .ft-sub,
html.is-narrow .cost-line .ft-sub {
  margin-left: 0;
}
/* 提示条（带图标的 notice / 吸顶条）：文字居中，图标不再把整段挤到右边 */
html[data-device="mobile"] .notice,
html.is-narrow .notice {
  justify-content: center;
  text-align: center;
}
html[data-device="mobile"] .notice > span:last-child,
html.is-narrow .notice > span:last-child { text-align: center; }
/* 按钮下面那行报价：手机上换行更自然 */
html[data-device="mobile"] .cost-line,
html.is-narrow .cost-line { flex-wrap: wrap; row-gap: 4px; }

/* ---------------- 弹窗：手机上变成底部抽屉 ---------------- */

html[data-device="mobile"] .modal-mask,
html.is-narrow .modal-mask {
  align-items: end;
  justify-items: stretch;
  padding: 0;
}
html[data-device="mobile"] .modal,
html.is-narrow .modal {
  width: 100%;
  max-width: 100%;
  border-radius: 16px 16px 0 0;
  max-height: 88dvh;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding-bottom: var(--safe-b);
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
html[data-device="mobile"] .modal-head,
html.is-narrow .modal-head { padding: 14px 16px; flex: 0 0 auto; }
html[data-device="mobile"] .modal-head::before,
html.is-narrow .modal-head::before {
  content: ''; display: block;
  width: 38px; height: 4px; border-radius: 4px;
  background: var(--border-strong);
  margin: -4px auto 10px;
}
html[data-device="mobile"] .modal-body,
html.is-narrow .modal-body { padding: 4px 16px 16px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
html[data-device="mobile"] .modal-foot,
html.is-narrow .modal-foot {
  padding: 12px 16px; flex: 0 0 auto;
  flex-direction: column-reverse; gap: 8px;
}
html[data-device="mobile"] .modal-foot .btn,
html.is-narrow .modal-foot .btn { width: 100%; }

/* 结果区（卡片内，不是真弹窗）的底部按钮栏：手机上改 2 列。
   原来「每个按钮占一整行」，结果区有 4 个按钮时按钮栏高达 236px，
   把正文挤得几乎看不见 —— 2 列后高度直接减半。 */
html[data-device="mobile"] .card > .modal-foot,
html.is-narrow .card > .modal-foot {
  flex-direction: column;
  align-items: stretch;
}
html[data-device="mobile"] .card > .modal-foot > .kv-tag,
html.is-narrow .card > .modal-foot > .kv-tag {
  width: 100%; text-align: left; line-height: 1.6; margin-bottom: 2px;
}
html[data-device="mobile"] .card > .modal-foot > .split,
html.is-narrow .card > .modal-foot > .split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
html[data-device="mobile"] .card > .modal-foot > .split > .btn,
html.is-narrow .card > .modal-foot > .split > .btn { width: 100%; min-width: 0; }

/* ---------------- 提示条 ---------------- */

html[data-device="mobile"] .toast-wrap,
html.is-narrow .toast-wrap {
  left: 12px;
  right: 12px;
  top: calc(var(--nav-h) + var(--safe-t) + 8px);
  /* ⚠️ 必须把基础态的 translateX(-50%) 复位（第 54 轮报障：手机上提示跑到左边缘、
       左边半截被切掉）。基础态是「left:50% + 左移自身一半」来居中的；手机态已经用
       left/right 定死宽度了，再叠一次 -50% 就等于把整条提示往左推出屏幕。 */
  transform: none;
  width: auto;
}
html[data-device="mobile"] .toast,
html.is-narrow .toast { text-align: center; max-width: 100%; }

/* ---------------- 客服入口：别被标签栏压住 ---------------- */

html[data-device="mobile"] .support-fab,
html.is-narrow .support-fab {
  bottom: calc(var(--content-pb) + 8px);
  right: 14px;
  padding: 11px 15px;
  font-size: 13px;
}
/* 手机上底部标签栏已经有「联系客服」，悬浮按钮重复，收起来 */
html[data-device="mobile"] .support-fab.dedupe,
html.is-narrow .support-fab.dedupe { display: none !important; }

/* ---------------- 会员充值页 ---------------- */

html[data-device="mobile"] .member-hero,
html.is-narrow .member-hero { padding: 16px 14px; }
html[data-device="mobile"] .tier-cards,
html.is-narrow .tier-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-device="mobile"] .vip-cards,
html.is-narrow .vip-cards { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .recharge-actions,
html.is-narrow .recharge-actions { flex-direction: column; align-items: stretch; gap: 8px; }
html[data-device="mobile"] .recharge-actions .btn,
html.is-narrow .recharge-actions .btn { width: 100%; }
html[data-device="mobile"] .support-grid,
html.is-narrow .support-grid { grid-template-columns: minmax(0, 1fr); }

/* ---------------- 更多面板（标签栏「更多」） ---------------- */

.more-sheet {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(27, 30, 44, .42);
  display: flex; align-items: flex-end;
  animation: fadeIn .16s ease-out;
}
.more-sheet[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.more-panel {
  width: 100%;
  background: var(--panel);
  border-radius: 16px 16px 0 0;
  padding: 8px 0 calc(var(--safe-b) + 8px);
  animation: sheetUp .22s ease-out;
  max-height: 80dvh; overflow-y: auto;
}
.more-panel .mp-title {
  font-size: 12px; color: var(--muted); font-weight: 600;
  padding: 12px 18px 6px;
}
.more-panel .mp-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; padding: 0 8px;
}
.more-panel .mp-item {
  border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px; border-radius: 12px;
  color: var(--text-2); font-size: 12px;
  -webkit-tap-highlight-color: transparent;
}
.more-panel .mp-item:active { background: #f1f2f9; }
.more-panel .mp-item .ic { font-size: 21px; }
.more-panel .mp-item.hidden { display: none; }
.more-panel .mp-list { padding: 4px 8px 0; }
.more-panel .mp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 13px 12px; border-radius: 12px;
  font-size: 14px; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.more-panel .mp-row:active { background: #f1f2f9; }
.more-panel .mp-row .l { display: flex; align-items: center; gap: 10px; }
.more-panel .mp-row .r { color: var(--muted); font-size: 12px; }
.more-panel .mp-sep { height: 8px; background: var(--bg); margin: 6px 0; }
.more-panel .mp-cancel {
  width: calc(100% - 16px); margin: 8px; padding: 13px;
  border: none; border-radius: 12px; cursor: pointer;
  background: var(--bg); color: var(--text-2); font-size: 14.5px; font-weight: 600;
}

/* ---------------- 超窄屏（≤360px）再收一档 ---------------- */

@media (max-width: 360px) {
  .mobile-tabbar .mtb-item { font-size: 10px; }
  .mobile-tabbar .mtb-item .ic { font-size: 17px; }
  html[data-device="mobile"] .layout,
  html.is-narrow .layout { padding-left: 9px; padding-right: 9px; }
  .more-panel .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- 大屏下的手机外壳（桌面 UA 手动切到手机版）---------------- */
/* 视口够宽时把内容收成一条居中的「手机列」，避免拉满大屏显得很怪 */
@media (min-width: 760px) {
  html[data-device="mobile"] body {
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px var(--border);
    background: var(--bg);
  }
  html[data-device="mobile"] .nav { max-width: 720px; margin: 0 auto; }
  html[data-device="mobile"] .mobile-tabbar { max-width: 720px; left: 50%; transform: translateX(-50%); }
  html[data-device="mobile"] .support-fab { right: calc(50% - 360px + 14px); }
}

/* ---------------- 客服：未配置时的空态 ---------------- */

.support-empty { text-align: center; padding: 6px 4px 10px; }
.support-empty .se-ic { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.support-empty .se-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.support-empty .se-sub { color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* ============================================================
   手机端：横向条一律「单行 + 左右滑动」
   ------------------------------------------------------------
   这些区块在手机上一律不做换行/多行铺开 —— 文字被挤成两行最难读，
   排成多行又太占屏。统一改成单行横向滚动，右侧露出半张卡片作为可滑动的提示。
   本次覆盖：工具切换条(.tabs)、赛道选择(.track-grid)、
   会员充值档位(.tier-cards)、会员等级(.vip-cards)、充值页顶部状态(.member-hero-stats)。
   ============================================================ */

/* 隐藏横向滚动条（移动端手势滑动即可，不必占 8px 视觉空间） */
html[data-device="mobile"] .tabs,
html[data-device="mobile"] .track-grid,
html[data-device="mobile"] .tier-cards,
html[data-device="mobile"] .vip-cards,
html[data-device="mobile"] .member-hero-stats,
html.is-narrow .tabs,
html.is-narrow .track-grid,
html.is-narrow .tier-cards,
html.is-narrow .vip-cards,
html.is-narrow .member-hero-stats {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html[data-device="mobile"] .tabs::-webkit-scrollbar,
html[data-device="mobile"] .track-grid::-webkit-scrollbar,
html[data-device="mobile"] .tier-cards::-webkit-scrollbar,
html[data-device="mobile"] .vip-cards::-webkit-scrollbar,
html[data-device="mobile"] .member-hero-stats::-webkit-scrollbar,
html.is-narrow .tabs::-webkit-scrollbar,
html.is-narrow .track-grid::-webkit-scrollbar,
html.is-narrow .tier-cards::-webkit-scrollbar,
html.is-narrow .vip-cards::-webkit-scrollbar,
html.is-narrow .member-hero-stats::-webkit-scrollbar { display: none; }

/* ---- ① 工具切换条：文字保持一行，长了就横向滑 ---- */

html[data-device="mobile"] .tabs,
html.is-narrow .tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px;
  scroll-snap-type: x proximity;
}
html[data-device="mobile"] .tab,
html.is-narrow .tab {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-right: 16px;
  padding: 12px 2px;
  font-size: 14px;
  scroll-snap-align: start;
}
html[data-device="mobile"] .tab:last-child,
html.is-narrow .tab:last-child { margin-right: 14px; }

/* ---- ② 赛道选择：12 个赛道挤成 6 行太占屏，改成一行滑 ---- */

html[data-device="mobile"] .track-grid,
html.is-narrow .track-grid {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scroll-snap-type: x proximity;
}
html[data-device="mobile"] .track,
html.is-narrow .track {
  flex: 0 0 auto;
  width: 88px;
  padding: 11px 4px 9px;
  scroll-snap-align: start;
}
html[data-device="mobile"] .track .nm,
html.is-narrow .track .nm { white-space: nowrap; font-size: 12px; }
html[data-device="mobile"] .track .ico,
html.is-narrow .track .ico { font-size: 19px; margin-bottom: 4px; }

/* ---- ③ 顶部状态：三列平铺（原为一行横滑，316px 容器里 3 张卡要 332px，
        「登录账号」永远被切掉一截 —— 改成三等分后一次看全） ---- */

html[data-device="mobile"] .member-hero-stats,
html.is-narrow .member-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  margin-top: 14px;
}
html[data-device="mobile"] .mhs-card,
html.is-narrow .mhs-card { flex: none; min-width: 0; padding: 10px 11px; }
html[data-device="mobile"] .mhs-val,
html.is-narrow .mhs-val { font-size: 17px; overflow-wrap: anywhere; }

/* ---- ④ 会员等级 / 充值档位：手机上必须「一眼看全」（第 28 轮修正） ----
   这两块是**决策型内容**：用户要横向比较 4 个会员等级、挑一个充值档位。
   原先跟 .tabs / .track-grid 一起被改成「单行横滑」（.vip-card 只占 82% 宽、
   .tier-card 只占 47%），手机上没有滚动条也没有箭头，右侧露出的那半张卡
   根本不足以提示「后面还有」→ 线上真实反馈「很多充值或会员开通看不到」。
   改成纵向网络铺开：等级单列（权益信息多，全宽最好读）、档位两列（内容短，
   两列更省屏，3 个档位正好 2 行全见）。滚动条隐藏规则留着无害（已不滚动）。 */

html[data-device="mobile"] .vip-cards,
html.is-narrow .vip-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
  gap: 10px;
  padding-top: 2px;
}
html[data-device="mobile"] .vip-card,
html.is-narrow .vip-card {
  flex: none;
  min-width: 0;
  scroll-snap-align: none;
}

html[data-device="mobile"] .tier-cards,
html.is-narrow .tier-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  gap: 10px;
  /* 顶部留白：「多送 N」徽章是绝对定位在卡片上方 -10px 处，
     容器一旦 overflow:visible 就再也不会替它裁出空间（旧版横滑时 overflow-y 被算成 auto，
     徽章其实一直被裁掉一半）。 */
  padding: 12px 2px 4px;
}
html[data-device="mobile"] .tier-card,
html.is-narrow .tier-card {
  flex: none;
  min-width: 0;
  padding: 14px 13px 13px;
  scroll-snap-align: none;
}

/* 超窄屏（≤360px）：档位两列会挤到 140px 以下 → 退回单列 */
@media (max-width: 360px) {
  html[data-device="mobile"] .tier-cards,
  html.is-narrow .tier-cards { grid-template-columns: minmax(0, 1fr); }
}

/* 后台的横向分类条同理，一行滑到底 */
html[data-device="mobile"] .admin-nav button,
html.is-narrow .admin-nav button { white-space: nowrap; }

/* ---------------- 卡密兑换 ---------------- */

.redeem-row { display: flex; gap: 10px; align-items: stretch; }
.redeem-row .input {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.redeem-row .btn { flex: 0 0 auto; }

.redeem-ok {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid #bfe9d5; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f2fdf8, #e8f8f1);
}
.redeem-ok .ro-title { font-weight: 700; color: #0b8f63; margin-bottom: 6px; }
.redeem-ok .ro-line { font-size: 13px; color: var(--text-2); line-height: 1.7; }
.redeem-ok .ro-line b { color: var(--text); }
.redeem-ok .ro-line.muted { color: var(--muted); font-size: 12.5px; }

.redeem-fail {
  margin-top: 14px; padding: 13px 16px;
  border: 1px solid #f5c9c4; border-radius: var(--radius-sm);
  background: #fff5f4;
}
.redeem-fail .rf-title { font-weight: 700; color: #b42318; margin-bottom: 4px; }
.redeem-fail .rf-line { font-size: 13px; color: var(--text-2); }

@media (max-width: 420px) {
  .redeem-row { flex-wrap: wrap; }
  .redeem-row .btn { width: 100%; }
}

/* 卡密表格：码要等宽，方便客服核对 */
.card-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: .04em;
  font-weight: 600;
}
.card-codes-box {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.9;
  max-height: 240px; overflow-y: auto;
  white-space: pre; user-select: all;
}

/* ============================================================
   后台「功能排序与启停」：可编辑的图标 / 名称 / 说明 / 备注
   ============================================================ */

.tbl-features td { vertical-align: top; }

.fm-row { gap: 6px; align-items: center; }
.fm-icon {
  width: 54px; flex: 0 0 54px;
  text-align: center;
  font-size: 17px;
  padding-left: 4px; padding-right: 4px;
}
.fm-label { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.fm-desc { width: 100%; font-size: 12.5px; padding: 7px 9px; }
.fm-note {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 8px 9px;
  resize: vertical;
  min-height: 62px;
}
.fm-note-sw {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2);
  user-select: none;
}
.fm-note-sw input { width: 15px; height: 15px; flex: 0 0 auto; cursor: pointer; }
.fm-note-sw:hover { color: var(--text); }
.tbl-features .kv-tag { white-space: nowrap; }

/* ============================================================
   后台「数据备份」页
   ============================================================ */

.bk-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.bk-stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  padding: 13px 15px;
}
.bk-stat .bsk-label { font-size: 12px; color: var(--muted); margin-bottom: 5px; }
/* 备份目录是一长串无空格的路径，不强制断行会把窄屏顶出横向滚动条 */
.bk-stat .bsk-value { font-size: 15px; font-weight: 700; letter-spacing: .01em; word-break: break-all; overflow-wrap: anywhere; }
.bk-stat .bsk-sub { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; word-break: break-word; }
.bk-stat.warn { border-color: #f3d9a6; background: #fffaf0; }
.bk-stat.bad { border-color: #f2c9c4; background: #fff6f5; }
.bk-stat.good { border-color: #bfe9d5; background: #f3fdf8; }

.bk-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
}
.bk-dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.14); }
.bk-dot.off { background: #cbd0dd; }
.bk-dot.err { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.14); }

.bk-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.oss-steps { margin-top: 12px; }
.oss-step {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.55;
}
.oss-step + .oss-step { margin-top: 4px; }
.oss-step.ok { background: #f3fdf8; }
.oss-step.bad { background: #fff6f5; }
.oss-step .os-ic { flex: 0 0 auto; }
.oss-step .os-name { font-weight: 600; min-width: 66px; }
.oss-step .os-detail { color: var(--text-2); word-break: break-all; }

.bk-codes {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  word-break: break-all;
  color: var(--text-2);
}
.bk-key-mask {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; letter-spacing: .04em;
}

@media (max-width: 900px) {
  .bk-status-grid { grid-template-columns: minmax(0, 1fr); }
  .fm-row { flex-wrap: wrap; }
  .fm-icon { width: 100%; flex: 1 1 100%; text-align: left; }
}

/* 会员等级：名称列改成可编辑输入框 */
.lv-name { width: 100%; min-width: 108px; font-weight: 600; }

/* ============================================================
   后台「联系客服」：二维码纯上传控件
   ============================================================ */

.qr-up {
  position: relative;
  margin-top: 6px;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.qr-up:hover { border-color: var(--accent); background: #f7f8ff; }
.qr-up:active { transform: scale(.995); }
.qr-up:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qr-up.dragging {
  border-color: var(--accent);
  background: #eef0ff;
  border-style: solid;
}
.qr-up-img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.qr-up-ph {
  text-align: center;
  padding: 14px;
  pointer-events: none;
  color: var(--muted);
}
.qr-up-ph .qr-up-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; color: var(--accent); }
.qr-up-ph .qr-up-t { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.qr-up-ph .qr-up-h { font-size: 12px; line-height: 1.6; }

.qr-up-act { margin-top: 8px; align-items: center; }

@media (max-width: 900px) {
  .qr-up { max-width: 100%; }
}

/* ============================================================
   后台可配文案的兜底
   ------------------------------------------------------------
   这些位置的内容（功能名称、备注、会员页标题与说明、等级名…）现在都由后台编辑，
   很可能出现「一长串没有空格」的内容（URL、英文串）。默认的断行规则不会在有
   这类内容的地方折行，会把整个布局顶宽（实测 400 个连续字符 → 页面宽 2425px）。
   ============================================================ */

.card-title,
.card-sub,
.vip-name,
.vip-desc,
.vip-line,
.tier-tag,
.mhs-val,
.support-wx,
.support-box-title,
.se-title,
.se-sub,
.mp-item span,
.mp-row .l span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 标签条本身也要能横向滚动：四个功能名都改长之后，桌面端同样会顶宽 */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; }

/* ------------------------------------------------------------
   整页兜底：放不下时允许断词。
   后台可配文案（功能名 / 备注 / 会员页标题与说明 / 等级名）随时可能是一长串
   没有空格的字符（URL、英文串）。与其逐个容器补 overflow-wrap 再漏掉 h2 这种，
   不如挂在根上一次兜住 —— overflow-wrap 只在「单个词自己都放不下」时才生效，
   对正常中英文排版的视觉效果没有影响。
   （实测：400 个连续字符的会员页大标题曾把手机页面顶宽 176px）
   ------------------------------------------------------------ */
body {
  overflow-wrap: anywhere;
}

/* ============================================================
   写作（标题写作 / 链接仿写）+ 自动写作
   ============================================================ */

/* 标题列表行内按钮组：桌面端贴右，手机上不换行、缩小字号 */
.title-item .row-acts {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  align-items: center;
}
.title-item .row-acts .cp {
  white-space: nowrap;
}

/* 自动写作：步骤条 */
.auto-steps {
  display: flex;
  gap: 8px;
  padding: 14px 16px 0;
  flex-wrap: wrap;
}
.auto-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  background: #fff;
}
.auto-step .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg-2, #f1f1f6);
  font-size: 11px;
  font-weight: 700;
}
.auto-step.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.auto-step.on .n { background: var(--accent); color: #fff; }
.auto-step.done {
  border-color: var(--green, #12b76a);
  color: var(--green, #12b76a);
}
.auto-step.done .n { background: var(--green, #12b76a); color: #fff; }

/* 自动写作：与一键排版共用的参数摘要 */
.auto-sync {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* ------------------------------------------------------------
   手机端：写作模式 / 字数档位 / 版式密度 都排成一行
   需求：尽量把内容显示全，不要让用户左右滑动。
   做法是允许换行（flex-wrap）并把字号与内边距压小，而不是横向滚动。
   ------------------------------------------------------------ */
html[data-device="mobile"] .seg,
html.is-narrow .seg {
  flex-wrap: wrap;
}
html[data-device="mobile"] .seg-item,
html.is-narrow .seg-item {
  flex: 0 1 auto;
  padding: 7px 10px;
  font-size: 12.5px;
  min-height: 34px;
}
/* 「N 字」这种短标签在小屏上更紧凑 */
html[data-device="mobile"] #writeWords,
html.is-narrow #writeWords,
html[data-device="mobile"] #autoWords,
html.is-narrow #autoWords {
  gap: 6px;
}
html[data-device="mobile"] #writeWords .seg-item,
html.is-narrow #writeWords .seg-item,
html[data-device="mobile"] #autoWords .seg-item,
html.is-narrow #autoWords .seg-item {
  padding: 6px 8px;
  font-size: 12px;
}

/* 手机上隐藏次要说明，优先保证主要内容可见 */
html[data-device="mobile"] .write-optional-hint,
html.is-narrow .write-optional-hint { display: none; }

/* 手机端：结果区头部按钮组允许换行，避免把标题挤出屏幕 */
html[data-device="mobile"] .card-head,
html.is-narrow .card-head { flex-wrap: wrap; row-gap: 8px; }
html[data-device="mobile"] .card-head .split,
html.is-narrow .card-head .split { flex-wrap: wrap; row-gap: 6px; }

/* 手机端：标题列表行内按钮更小，确保「去标题写作」四个字也显示全 */
html[data-device="mobile"] .title-item .cp,
html.is-narrow .title-item .cp {
  padding: 5px 8px;
  font-size: 11.5px;
}
html[data-device="mobile"] .title-item .row-acts,
html.is-narrow .title-item .row-acts { gap: 4px; }

/* 自动写作预览与排版预览同宽 */
#autoPreview.ts-preview { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 10px; }
html[data-device="mobile"] #autoPreview.ts-preview,
html.is-narrow #autoPreview.ts-preview { height: 320px; }

/* ============================================================
   第 24 轮：批量上限可按会员等级设置
   「批量数量」提示做成**面板顶部吸顶条** —— 原来放在输入框下方的一行小字，
   手机上既占高度又容易和输入框混在一起。
   ============================================================ */

.auto-float-tip {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(107, 91, 250, .1), rgba(107, 91, 250, .055));
  border: 1px solid rgba(107, 91, 250, .22);
  box-shadow: 0 2px 10px rgba(27, 30, 44, .05);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.auto-float-tip[hidden] { display: none; }
.auto-float-tip .aft-icon { flex: none; font-size: 13px; }
.auto-float-tip .aft-text { min-width: 0; }
.auto-float-tip b { color: var(--accent); font-weight: 700; }
/* 条数超出上限：换警示色 —— 避免用户「莫名其妙少生成了几篇」 */
.auto-float-tip.warn {
  background: linear-gradient(180deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .07));
  border-color: rgba(245, 158, 11, .34);
}
.auto-float-tip.warn b { color: #b45309; }

/* 手机端整页滚动，导航栏是 sticky top:0 —— 吸顶条要停在导航下面 */
html[data-device="mobile"] .auto-float-tip,
html.is-narrow .auto-float-tip { top: var(--nav-h); }

/* 手机端：面板顶部已经有吸顶提示条，备注条收紧一点，别把首屏高度吃光 */
html[data-device="mobile"] #noteAuto,
html.is-narrow #noteAuto {
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 12px;
}

/* ------------------------------------------------------------
   依赖告警条（管理员专属）
   手机上原来会一口气铺开 3~4 行、占掉小半屏 —— 默认只留一行摘要，
   缺失项收进「详情」里按需展开。
   ------------------------------------------------------------ */
.dep-warn .dw-sep { opacity: .4; }
.dep-warn .dw-tip { opacity: .9; }
.dep-warn .dw-toggle { display: none; }

html[data-device="mobile"] .dep-warn,
html.is-narrow .dep-warn {
  margin: 10px 9px 0;
  padding: 9px 12px;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  align-items: flex-start;
}
html[data-device="mobile"] .dep-warn .dw-body,
html.is-narrow .dep-warn .dw-body { display: none; }
html[data-device="mobile"] .dep-warn.expanded .dw-body,
html.is-narrow .dep-warn.expanded .dw-body { display: block; width: 100%; margin-top: 2px; }
html[data-device="mobile"] .dep-warn.expanded .dw-body .dw-item,
html.is-narrow .dep-warn.expanded .dw-body .dw-item { display: block; white-space: normal; }
html[data-device="mobile"] .dep-warn.expanded .dw-body .dw-sep,
html.is-narrow .dep-warn.expanded .dw-body .dw-sep { display: none; }
html[data-device="mobile"] .dep-warn .dw-toggle,
html.is-narrow .dep-warn .dw-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  /* 手机上可点面积要够（巡检规则：≥32px 高） */
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(166, 39, 26, .35);
  background: rgba(255, 255, 255, .72);
  color: #a6271a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* 手机端：推广链接允许折行 —— 截断成省略号时用户根本看不到完整链接 */
html[data-device="mobile"] .promo-link,
html.is-narrow .promo-link {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

/* ============================================================
   后台 · 前台导航排序（第 27 轮）
   ------------------------------------------------------------
   两列（桌面顶部导航 / 手机底部标签栏），每行一个入口 + 上移下移。
   用既有变量，不引入新色值。
   ============================================================ */
.nav-order-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.nav-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.nav-order-row .no {
  width: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.nav-order-row .lb {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}

/* 入口名称输入框（第 40 轮）：占满中间那一栏，留空时 placeholder 显示出厂名 */
.nav-order-row .nav-name {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
}

/* 手机上按钮要够大（巡检规则：可点面积 ≥32px） */
.nav-order-row .btn {
  min-width: 34px;
  justify-content: center;
}

/* ============================================================
   福利教程页（第 29 轮）
   结构固定：① 福利说明栏（固定一条，永远最上） ② 视频教程 ③ 运营资料 ④ 最新公告
   ============================================================ */

.welfare-hero {
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #6b5bfa, #8f7bff);
  color: #fff;
  margin-bottom: 16px;
}
.welfare-hero h2 { margin: 0 0 6px; font-size: 21px; }
.welfare-hero p { margin: 0; font-size: 13px; line-height: 1.7; opacity: .92; }

/* ① 福利说明栏：绿底描边，与「充值说明」（紫色中性）区分开，强调「这是白送的」 */
.wf-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(34, 197, 94, .1), rgba(34, 197, 94, .04));
}
.wf-note-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(34, 197, 94, .3);
  font-size: 20px; line-height: 1;
}
.wf-note-main { flex: 1 1 240px; min-width: 0; }
.wf-note-title { font-size: 15px; font-weight: 800; color: #15803d; margin-bottom: 4px; }
.wf-note-text { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.wf-note-act { flex: 0 0 auto; }

/* ② 视频教程 */
.wf-videos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wf-video {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
.wf-video .wfv-player { width: 100%; height: 168px; background: #000; display: block; }
.wf-video .wfv-cover {
  height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(107, 91, 250, .12), rgba(107, 91, 250, .04));
  border-bottom: 1px solid var(--line);
}
.wf-video .wfv-play {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 17px; padding-left: 3px;
}
.wf-video .wfv-cover-t { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.wfv-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 0 14px 14px; }
.wfv-title { font-size: 14px; font-weight: 700; color: var(--text); }
.wfv-desc { font-size: 12.5px; line-height: 1.7; color: var(--muted); }

/* ③ 运营资料 */
.wf-links { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.wf-link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, transform .15s;
}
.wf-link:hover { border-color: rgba(107, 91, 250, .45); transform: translateY(-1px); }
.wf-link .wfl-ic { font-size: 18px; }
.wf-link .wfl-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-link .wfl-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.wf-link .wfl-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }
.wf-link .wfl-go { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--accent); }

/* ④ 最新公告 */
.wf-anns { display: flex; flex-direction: column; gap: 14px; }
.wf-ann {
  padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--panel-soft);
}
.wf-ann .wfa-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.wf-ann .wfa-title { font-size: 14px; font-weight: 800; color: var(--text); }
.wf-ann .wfa-time { font-size: 12px; color: var(--muted); }
.wf-ann .wfa-body { font-size: 13px; line-height: 1.9; color: var(--text-2); }

/* 空态 */
.wf-blank { padding: 34px 20px; text-align: center; color: var(--muted); }
.wf-blank-ic { font-size: 30px; margin-bottom: 8px; }
.wf-blank-t { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.wf-blank-s { font-size: 12.5px; line-height: 1.7; }

/* 手机端：全部单列，视频高度收紧 */
html[data-device="mobile"] .welfare-hero,
html.is-narrow .welfare-hero { padding: 16px 14px; }
html[data-device="mobile"] .welfare-hero h2,
html.is-narrow .welfare-hero h2 { font-size: 18px; }
html[data-device="mobile"] .wf-videos,
html[data-device="mobile"] .wf-links,
html.is-narrow .wf-videos,
html.is-narrow .wf-links { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .wf-note,
html.is-narrow .wf-note { align-items: flex-start; }
html[data-device="mobile"] .wf-note-act,
html.is-narrow .wf-note-act { width: 100%; }
html[data-device="mobile"] .wf-note-act .btn,
html.is-narrow .wf-note-act .btn { width: 100%; }
html[data-device="mobile"] .wf-video .wfv-player,
html[data-device="mobile"] .wf-video .wfv-cover,
html.is-narrow .wf-video .wfv-player,
html.is-narrow .wf-video .wfv-cover { height: 190px; }

/* ============================================================
   后台「福利教程」页：三个列表的行编辑器（第 29 轮）
   ============================================================ */

.wf-rows { display: flex; flex-direction: column; gap: 10px; }
.wf-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.wf-row .no {
  padding-top: 9px;
  color: var(--muted); font-size: 12px; font-weight: 700; text-align: center;
}
.wf-row .wf-fields { display: grid; gap: 8px; min-width: 0; }
.wf-row .wf-acts { display: flex; flex-direction: column; gap: 6px; }
.wf-row .wf-acts .btn { white-space: nowrap; }
.wf-row textarea.input { resize: vertical; min-height: 68px; line-height: 1.7; }
.wf-rows .wf-blank {
  padding: 20px; text-align: center; color: var(--muted); font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
/* 后台里的输入框是 .input，其高度/便签由既有规则管；这里只保证 textarea 不被压扁 */
textarea.input { font-family: inherit; }

html[data-device="mobile"] .wf-row,
html.is-narrow .wf-row { grid-template-columns: minmax(0, 1fr); }
html[data-device="mobile"] .wf-row .no,
html.is-narrow .wf-row .no { display: none; }
html[data-device="mobile"] .wf-row .wf-acts,
html.is-narrow .wf-row .wf-acts { flex-direction: row; flex-wrap: wrap; }

/* ==================== 富文本编辑器（后台「用户端帮助文案」，第 39 轮） ====================
   零依赖自建：contenteditable + 小工具条 + 源码模式。
   ⚠️ 这里的 .rt-img 同时被用户端复用（净化器会给每张图挂上类名），
      不加 max-width 的话后台粘一张大图就能把用户端页面撑出横向滚动。 */
.rt-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); margin-bottom: 14px; overflow: hidden;
}
.rt-card:last-child { margin-bottom: 0; }
.rt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.rt-head .rt-title { font-weight: 600; font-size: 13px; }
.rt-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 12px; border-bottom: 1px dashed var(--border); background: var(--panel-soft);
}
.rt-btn {
  min-width: 30px; height: 28px; padding: 0 9px; font-size: 12.5px; line-height: 1;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.rt-btn:hover { border-color: var(--accent); color: var(--accent); }
.rt-btn b { font-weight: 800; }
.rt-body {
  min-height: 92px; max-height: 320px; overflow-y: auto; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.85; outline: none; word-break: break-word;
}
.rt-body:focus { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.rt-body:empty::before { content: '在这里输入文案…'; color: var(--muted); }
.rt-body code {
  background: var(--panel-soft); border: 1px solid var(--border); padding: 1px 5px;
  border-radius: 5px; font-size: 12.5px; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.rt-body a { color: var(--accent); text-decoration: underline; }
.rt-source { margin: 0; border: 0; border-top: 1px dashed var(--border); border-radius: 0; }
.rt-tip { padding: 8px 12px 0; color: var(--muted); font-size: 12px; }
img.rt-img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 8px 0; }

/* ============================================================
   贴图图文（第 40 轮）
   ------------------------------------------------------------
   独立页面 /sticker：一段短文案 + 一组配图。
   复用写作台既有的 .card / .seg / .chan-card / .stepper / .prog，
   这里只补「参考图」与「结果图片墙」两块新东西。
   ============================================================ */

.sticker-hero {
  padding: 20px 22px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #5b3dfa, #8f7dff);
  color: #fff;
  margin-bottom: 16px;
}
.sticker-hero h2 { margin: 0 0 6px; font-size: 21px; }
.sticker-hero p { margin: 0; font-size: 13px; line-height: 1.7; opacity: .93; }

/* ---- 参考图（标题生成） ---- */

.stk-refs {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  min-height: 74px; padding: 10px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: var(--panel-soft);
}
.stk-ref {
  position: relative; width: 88px; height: 88px; flex: 0 0 auto;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff;
}
.stk-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stk-ref-x {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(27, 30, 44, .62); color: #fff; font-size: 11px;
}
.stk-ref-x:hover { background: var(--red); }
.stk-ref-empty { color: var(--muted); font-size: 12.5px; }

/* ---- 结果：标题 / 文案 / 图片墙 ---- */

.stk-out-title {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text);
  font-size: 15px; font-weight: 700; line-height: 1.6; word-break: break-word;
}
.stk-imgs {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.stk-img { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.stk-img img {
  width: 100%; height: auto; max-height: 360px; object-fit: contain;
  display: block; background: var(--panel-soft);
}
.stk-img figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; border-top: 1px solid var(--border); font-size: 12px;
}
.stk-img-no { color: var(--muted); }
.stk-img-copy {
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel);
  color: var(--text-2); font-size: 11.5px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
}
.stk-img-copy:hover { border-color: var(--accent); color: var(--accent); }

.stk-notes {
  margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-soft);
}
.stk-note { font-size: 12.5px; line-height: 1.75; color: var(--text-2); word-break: break-word; }
.stk-note + .stk-note { margin-top: 4px; }

/* ---- 手机端：图片一列就够，输入区别挤 ---- */
html[data-device="mobile"] .stk-imgs,
html.is-narrow .stk-imgs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
html[data-device="mobile"] .stk-ref,
html.is-narrow .stk-ref { width: 74px; height: 74px; }
html[data-device="mobile"] .sticker-hero h2,
html.is-narrow .sticker-hero h2 { font-size: 19px; }

/* ============================================================
   福利页：每日签到 + 福利卡密（第 52 轮）
   ============================================================ */

.ci-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ci-left { min-width: 0; flex: 1 1 180px; }
.ci-reward { display: flex; align-items: baseline; gap: 5px; color: var(--accent); font-weight: 800; }
.ci-reward #wfCheckinReward { font-size: 30px; line-height: 1.1; letter-spacing: -.5px; }
.ci-reward .ci-unit { font-size: 13px; font-weight: 600; color: var(--muted); }
.ci-days { margin-top: 4px; font-size: 12.5px; color: var(--text-2); }
.ci-btn { flex: 0 0 auto; min-width: 116px; }
.ci-btn:disabled { opacity: .6; cursor: default; }

/* 连续签到阶梯：第 N 天能领多少，一眼看完 */
.ci-ladder {
  display: grid; gap: 6px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
}
.ci-step {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-soft);
  padding: 7px 6px; text-align: center; line-height: 1.35;
}
.ci-step-d { display: block; font-size: 11px; color: var(--muted); }
.ci-step-p { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.ci-step.on { border-color: var(--accent); background: var(--accent-soft); }
.ci-step.on .ci-step-p { color: var(--accent); }

.ci-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ci-input { flex: 1 1 200px; letter-spacing: 1px; text-transform: uppercase; }

.ci-tip { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); min-height: 0; }
.ci-tip.ok { color: var(--green); }
.ci-tip.err { color: var(--red); }

html[data-device="mobile"] .ci-reward #wfCheckinReward,
html.is-narrow .ci-reward #wfCheckinReward { font-size: 26px; }
html[data-device="mobile"] .ci-btn,
html.is-narrow .ci-btn { flex: 1 1 100%; }
html[data-device="mobile"] .ci-form .btn,
html.is-narrow .ci-form .btn { flex: 1 1 100%; }
html[data-device="mobile"] .ci-input,
html.is-narrow .ci-input { flex: 1 1 100%; }

/* ---- 后台：福利卡密 / 每日签到（第 52 轮） ---- */

.wc-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; }

.wc-result {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px dashed var(--accent); background: var(--accent-soft);
}
.wc-result-t { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.wc-result-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-code-pick {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 7px;
  padding: 5px 10px; font-size: 13px; cursor: pointer; user-select: all;
  letter-spacing: 1px;
}
.wc-code-pick:hover { border-color: var(--accent); color: var(--accent); }

.ci-preview {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
}

/* ---- 我的记录：贴图图文的配图（第 53 轮） ---- */
/* 列表行：小缩略图 + 标题并排（缩略图不收缩，文字区 min-width:0 才不会被反压） */
.rec-title-row { display: flex; gap: 10px; align-items: flex-start; }
.rec-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border); background: var(--bg); cursor: zoom-in;
}
.rec-thumb:hover { border-color: var(--accent); }
.rec-imgtag { color: var(--accent); }

/* 详情：配图网格 */
.stk-art-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.stk-art-item { margin: 0; }
.stk-art-item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: zoom-in;
}
.stk-art-item img:hover { border-color: var(--accent); }
.stk-art-item figcaption {
  margin-top: 5px; font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stk-art-prompts { margin-top: 12px; }
.stk-art-prompts summary {
  cursor: pointer; font-size: 13px; color: var(--muted); user-select: none;
}
.stk-art-prompts summary:hover { color: var(--accent); }

/* ---- 我的记录：手机版紧凑排版（第 56 轮） ----
   报障：手机端统计卡 / 筛选块 / 表格都太占地方，一屏放不下几条。
   目标：① 统计卡从「一张一行」改成两列紧凑卡；② 筛选 chip 变矮变密；
        ③ 表格在手机端**不再横向滚动**，每行改成一屏内可读的卡片。 */
html[data-device="mobile"] .admin-wrap,
html.is-narrow .admin-wrap { padding: 12px; }

/* ① 统计卡：两列紧凑 + 数字缩小 */
html[data-device="mobile"] .stat-grid,
html.is-narrow .stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-bottom: 12px;
}
html[data-device="mobile"] .stat,
html.is-narrow .stat { padding: 10px 12px; border-radius: 10px; }
html[data-device="mobile"] .stat .k,
html.is-narrow .stat .k { font-size: 11.5px; margin-bottom: 3px; }
html[data-device="mobile"] .stat .v,
html.is-narrow .stat .v { font-size: 19px; letter-spacing: -0.3px; }
html[data-device="mobile"] .stat .kv-tag,
html.is-narrow .stat .kv-tag { font-size: 11px; }

/* ② 筛选块：变矮变密 */
html[data-device="mobile"] .filter-wrap,
html.is-narrow .filter-wrap { padding: 10px 10px 12px; margin-bottom: 12px; }
html[data-device="mobile"] .filter-label,
html.is-narrow .filter-label { font-size: 11.5px; margin-bottom: 8px; }
html[data-device="mobile"] .filter-bar,
html.is-narrow .filter-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
html[data-device="mobile"] .fchip,
html.is-narrow .fchip { gap: 8px; padding: 8px 10px; border-radius: 9px; }
html[data-device="mobile"] .fchip::before,
html.is-narrow .fchip::before { width: 2px; }
html[data-device="mobile"] .fchip-ico,
html.is-narrow .fchip-ico { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
html[data-device="mobile"] .fchip-txt b,
html.is-narrow .fchip-txt b { font-size: 12.5px; }
html[data-device="mobile"] .fchip-txt i,
html.is-narrow .fchip-txt i { font-size: 10.5px; }

/* ③ 表格 → 卡片：不再横向滚动，五行一屏 */
html[data-device="mobile"] .tbl-wrap,
html.is-narrow .tbl-wrap { overflow-x: visible; }
html[data-device="mobile"] table.tbl,
html.is-narrow table.tbl { min-width: 0; display: block; }
html[data-device="mobile"] table.tbl thead,
html.is-narrow table.tbl thead { display: none; }
html[data-device="mobile"] table.tbl tbody,
html.is-narrow table.tbl tbody { display: block; }
html[data-device="mobile"] table.tbl tr,
html.is-narrow table.tbl tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "feat feat cost"
    "main main main"
    "time acts acts";
  gap: 6px 8px; align-items: center;
  padding: 11px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 11px;
  background: #fff; box-shadow: var(--shadow);
}
html[data-device="mobile"] table.tbl tr:hover td,
html.is-narrow table.tbl tr:hover td { background: transparent; }
html[data-device="mobile"] table.tbl td,
html.is-narrow table.tbl td {
  display: block; padding: 0; border: none; white-space: normal;
}
html[data-device="mobile"] td.rcol-feat,
html.is-narrow td.rcol-feat { grid-area: feat; }
html[data-device="mobile"] td.rcol-cost,
html.is-narrow td.rcol-cost { grid-area: cost; text-align: right; font-size: 13px; }
html[data-device="mobile"] td.rcol-main,
html.is-narrow td.rcol-main { grid-area: main; }
html[data-device="mobile"] td.rcol-time,
html.is-narrow td.rcol-time {
  grid-area: time; display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; flex-wrap: wrap;
}
html[data-device="mobile"] td.rcol-time > div,
html.is-narrow td.rcol-time > div { margin: 0; }
html[data-device="mobile"] td.rcol-acts,
html.is-narrow td.rcol-acts { grid-area: acts; }
html[data-device="mobile"] td.rcol-acts .split,
html.is-narrow td.rcol-acts .split { justify-content: flex-end; }
html[data-device="mobile"] table.tbl td.rcol-main .kv-tag,
html.is-narrow table.tbl td.rcol-main .kv-tag { white-space: normal; }

/* 空态 / 提示行：卡片布局下不要再按表格格位排 */
html[data-device="mobile"] table.tbl tr:has(> td[colspan]),
html.is-narrow table.tbl tr:has(> td[colspan]) {
  display: block; border: none; box-shadow: none; background: transparent; padding: 0;
}