/* ==========================================================================
   大维AI监测 · 界面样式
   --------------------------------------------------------------------------
   ⚠️ 视觉口径跟着 **geo 代运营网站** 走（用户 2026-09-13 明确要求"要我们网站的那种风格"）。
      所以设计变量是从 geo 的 geo-shell.css 原样搬过来的 —— **不要另起一套色板**，
      两个产品摆在一起要像一家人。改色只改下面 :root。
   结构：左导航 240px + 顶栏 54px + 浅灰底白卡片（和 geo 同一套骨架）。
   ========================================================================== */

:root{
  /* ---- 色彩（与 geo-shell.css 一致）---- */
  --ink:#0f172a; --ink-2:#3d4757; --ink-3:#6b7686; --muted:#9aa3b0;
  --line:#eef1f5; --line-2:#e1e6ee;
  --bg:#f6f7f9; --surface:#fff; --surface-2:#fafbfc; --surface-3:#f4f6f9;
  --brand:#2563eb; --brand-soft:#eef4ff; --brand-line:#cfdffb;
  --ok:#0e9f6e; --ok-soft:#e9f7f1; --ok-line:#c2e5d6;
  --warn:#b87407; --warn-soft:#fdf5e7; --warn-line:#efd9b4;
  --bad:#d92d20; --bad-soft:#fdecea; --bad-line:#f4cac6;
  --info:#5b6472; --info-soft:#f2f4f7; --info-line:#e1e6ee;

  /* ---- 字号 ---- */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px;
  --fs-19:19px; --fs-30:30px;

  /* ---- 尺度 ---- */
  --r-xs:5px; --r-sm:7px; --r:9px; --r-lg:13px;
  --nav-w:240px; --top-h:54px;
  --sh:0 1px 2px rgba(15,23,42,.04);
  --sh-2:0 2px 8px rgba(15,23,42,.06);
  --sh-3:0 12px 32px rgba(15,23,42,.12);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ⚠️ 这一行不能省：hidden 属性压不住带 display 的 CSS（踩过一次），必须强制 */
[hidden]{display:none !important}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:var(--fs-14); line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
/* 原来那层深色渐变背景不要了（geo 是浅灰底） */
.bg{display:none}

/* ==========================================================================
   1. 骨架：左导航 + 顶栏 + 内容
   ========================================================================== */
.app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);min-height:100vh}

.nav{
  position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;
}
.nav-brand{
  height:var(--top-h);display:flex;align-items:center;gap:9px;padding:0 16px;
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
/* 角标：2026-09-14 用户要求把里面的「维」改成「大维AI」。
   ⚠️ 所以不能再是 24×24 的方块（4 个字塞不进去）—— 改成**高度不变、宽度自适应**
      的小胶囊；字号收到 11px，跟右边的「大维AI监测」并排看着才不打架。 */
.nav-logo{
  height:24px;min-width:24px;padding:0 7px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(135deg,#2563eb,#5b8def);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.nav-name{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.nav-name b{font-size:var(--fs-13);font-weight:650;letter-spacing:.01em}
.nav-name span{font-size:10px;color:var(--muted)}
.nav-body{flex:1 1 auto;padding:10px 10px 18px;overflow-y:auto}
.nav-group{margin-bottom:14px}
.nav-glabel{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding:6px 8px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:var(--fs-13);cursor:pointer;
  transition:background .12s,color .12s;position:relative;
}
.nav-item:hover{background:var(--surface-3);color:var(--ink)}
.nav-item.is-active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.nav-item.is-active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--brand);
}
.nav-step{
  width:19px;height:19px;flex:0 0 auto;border-radius:5px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line-2);
}
.nav-item.is-active .nav-step{background:var(--brand);color:#fff;border-color:var(--brand)}
.nav-label{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-meta{font-size:var(--fs-11);color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.nav-note{
  margin-top:6px;padding:10px 11px;border-radius:var(--r);
  background:var(--surface-3);border:1px solid var(--line-2);
  font-size:var(--fs-11);color:var(--ink-3);line-height:1.65;
}
.nav-note b{color:var(--ink-2)}

.main{display:flex;flex-direction:column;min-width:0}

.topbar{
  position:sticky;top:0;z-index:30;height:var(--top-h);flex:0 0 auto;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 20px;
}
.crumb{display:flex;align-items:center;gap:7px;font-size:var(--fs-12);color:var(--ink-3);min-width:0}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{color:var(--line-2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.trust{
  display:flex;align-items:center;gap:6px;font-size:var(--fs-11);color:var(--ink-3);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;
}
.trust i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}

.container{padding:18px 20px 56px;max-width:1520px;width:100%}
.pagehead{margin-bottom:14px}
.pagehead h1{font-size:var(--fs-19);font-weight:680;letter-spacing:-.01em;margin-bottom:3px}
.pagehead p{margin:0;font-size:var(--fs-12);color:var(--ink-3)}

/* 主区两栏：左表单 + 右信息 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.side{display:flex;flex-direction:column;gap:14px;min-width:0}

/* ==========================================================================
   2. 卡片与步骤
   ========================================================================== */
.card,
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:15px 17px;
}
.card h3{
  font-size:var(--fs-13);font-weight:650;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin-bottom:11px;
}
.card.quiet{background:var(--surface-2)}
.panel{padding:0;overflow:hidden}
.panel>.step{padding:16px 17px;border-bottom:1px solid var(--line)}
.panel>.step:last-of-type{border-bottom:0}

.step-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.step-h .n{
  width:22px;height:22px;flex:0 0 auto;border-radius:50%;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;
}
.step-h h2{font-size:var(--fs-14);font-weight:650;letter-spacing:-.005em}
.count{
  margin-left:auto;font-size:var(--fs-11);color:var(--brand);
  background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:999px;padding:2px 10px;font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   3. 表单 / 按钮
   ========================================================================== */
.inp{
  width:100%;padding:8px 10px;font-family:inherit;font-size:var(--fs-13);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .12s,box-shadow .12s;
}
.inp:hover{border-color:var(--brand-line)}
.inp:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.inp.big{padding:11px 12px;font-size:var(--fs-14)}
select.inp{appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.btn-sm,.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:inherit;font-size:var(--fs-12);font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:7px 12px;cursor:pointer;white-space:nowrap;transition:all .12s;
}
.btn-sm:hover,.ghost:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.btn-sm:disabled{opacity:.5;cursor:not-allowed}
.btn-go{
  font-family:inherit;font-size:var(--fs-13);font-weight:650;color:#fff;
  background:var(--brand);border:1px solid var(--brand);border-radius:var(--r-sm);
  padding:9px 22px;cursor:pointer;transition:opacity .12s;white-space:nowrap;
}
.btn-go:hover{opacity:.9}
.btn-go:disabled{opacity:.45;cursor:not-allowed}
.pill-live{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-11);color:var(--ink-3);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;
}
.pill-live i{width:6px;height:6px;border-radius:50%;background:var(--ok)}

.hint{margin:8px 0 0;font-size:var(--fs-12);color:var(--ink-3);line-height:1.7}
.hint b{color:var(--ink-2)}
.hint.inline{margin:0}
.center{text-align:center}

/* 步骤 1：品牌 */
.prow{display:flex;gap:8px;align-items:center}
.prow .inp{flex:1 1 auto}
.pcard{
  margin-top:12px;padding:11px 13px;border-radius:var(--r);
  background:var(--brand-soft);border:1px solid var(--brand-line);
}
.pcard .pc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcard .pc-name{font-size:var(--fs-13);font-weight:650;color:var(--ink)}
.pcard .pc-tag{
  font-size:var(--fs-11);color:var(--brand);background:var(--surface);
  border:1px solid var(--brand-line);border-radius:999px;padding:1px 9px;
}
.pcard .pc-meta{margin-top:6px;font-size:var(--fs-12);color:var(--ink-3);line-height:1.7}
.pform{margin-top:12px;padding:13px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface-2)}
.pf-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;align-items:start;margin-bottom:11px}
.pf-l{font-size:var(--fs-12);color:var(--ink-3);font-weight:600;padding-top:9px}
.pf-foot{display:flex;gap:8px;justify-content:flex-end}

/* 别名 chips */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px;
}
.chip b{font-weight:600}
.aliasrow{display:flex;gap:8px;margin-top:7px}
.aliasrow .inp{flex:1 1 auto}

/* 步骤 2：问题清单 */
.qs{display:flex;flex-direction:column;gap:7px}
.qitem{
  display:flex;align-items:center;gap:9px;padding:8px 10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
}
.qitem.ro{background:var(--surface-3)}
.qitem .idx{
  width:20px;height:20px;flex:0 0 auto;border-radius:5px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);color:var(--ink-3);border:1px solid var(--line-2);
  font-variant-numeric:tabular-nums;
}
.qitem .ov{flex:1 1 auto;font-size:var(--fs-13);color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.qitem input.ov{background:transparent;border:0;padding:0;font-family:inherit}
.qitem input.ov:focus{outline:0;color:var(--ink)}
.qdel{
  flex:0 0 auto;border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 5px;border-radius:var(--r-xs);
}
.qdel:hover{color:var(--bad);background:var(--bad-soft)}
.qfoot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.rofoot{gap:8px}

/* 步骤 3：模型卡片 */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.m{
  position:relative;display:flex;flex-direction:column;gap:4px;
  padding:11px 12px;border-radius:var(--r);cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);
  transition:border-color .12s,background .12s,box-shadow .12s;
}
.m:hover{border-color:var(--brand-line);box-shadow:var(--sh-2)}
.m .nm{font-size:var(--fs-13);font-weight:650;color:var(--ink);display:flex;align-items:center;gap:7px}
.m .vd{font-size:var(--fs-11);color:var(--ink-3);line-height:1.55;padding-right:44px}
.m .tag{
  position:absolute;top:9px;right:10px;font-size:10px;font-weight:700;
  color:var(--ink-3);background:var(--surface-3);border:1px solid var(--line-2);
  border-radius:999px;padding:1px 8px;
}
.m.hi{background:var(--brand-soft);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.m.hi .tag{background:var(--brand);color:#fff;border-color:var(--brand)}
.m.hi .nm{color:var(--brand)}

/* 底价栏 */
.buybar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 17px;border-top:1px solid var(--line);background:var(--surface-2);
}
.calc{display:flex;align-items:baseline;gap:9px;flex:1 1 auto;min-width:0}
.calc .cl{font-size:var(--fs-12);color:var(--ink-3)}
.calc .cp{font-size:var(--fs-30);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ==========================================================================
   4. 进度 / 历史 / 提示
   ========================================================================== */
.prog{height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;border:1px solid var(--line)}
.prog i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand);transition:width .3s}
.prog-t{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--fs-12);color:var(--ink-3);font-variant-numeric:tabular-nums}

.hist{display:flex;flex-direction:column;gap:7px;max-height:420px;overflow-y:auto}
.hist a{
  display:block;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);transition:all .12s;
}
.hist a:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.hist .meta{
  font-size:var(--fs-12);color:var(--ink-2);font-weight:600;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.hist .meta .tag{
  font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:999px;padding:1px 8px;
}
.hist .meta .tag.is-warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
/* 历史项：没跑完的（跑到一半 / 卡住）也要看得见、能接着跑（2026-09-14）。
   以前只列跑完的 —— 客户卡在"进行中"，回头在历史里找不到那次，连重跑的按钮都没有。 */
.hist .hrow{display:flex;gap:8px;align-items:stretch}
.hist .hrow>a{flex:1 1 auto;min-width:0}
.hist a.is-wip{border-color:var(--warn-line);background:var(--warn-soft)}
.hist .hi-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:var(--fs-12);color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn-line)}
.hist .hi-resume{flex:0 0 auto;padding:0 14px;border:1px solid var(--warn-line);
  background:var(--warn-soft);color:var(--warn);border-radius:8px;font-size:var(--fs-13);
  cursor:pointer;font-family:inherit}
.hist .hi-resume:hover{background:var(--warn);color:#fff}
.hist .hi-resume:disabled{opacity:.6;cursor:default}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--ink);color:#fff;font-size:var(--fs-13);font-weight:600;
  padding:10px 18px;border-radius:var(--r);box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:99;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   5. 账号（登录面板 · 头部账号区 · 会员卡片）
   ⚠️ 这一块和前面用同一套色板 —— 登录页也要像"同一个产品"，
      不要另起一个深色/渐变风格的独立登录页（那会让人觉得点错了地方）。
   ========================================================================== */
.who{
  font-size:var(--fs-12);color:var(--ink-3);font-weight:600;
  padding:3px 10px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line-2);white-space:nowrap;
}
.who b{color:var(--ink-2)}

/* 登录面板：盖住整页 */
.gate{
  position:fixed;inset:0;z-index:200;background:rgba(246,247,249,.97);
  display:flex;align-items:center;justify-content:center;padding:20px;
  backdrop-filter:blur(3px);
}
.gate-card{
  width:100%;max-width:382px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:26px 24px 20px;
}
.gate-brand{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.gate-brand b{font-size:var(--fs-16);color:var(--ink)}
.gate-sub{font-size:var(--fs-12);color:var(--ink-3);line-height:1.75;margin-bottom:16px}
.gate-sub b{color:var(--ink-2)}
.gate-row{display:flex;gap:8px;margin-bottom:10px}
.gate-row .inp{flex:1 1 auto;min-width:0}
.gate-row .btn-sm{flex:0 0 auto;padding:0 14px;white-space:nowrap}
.gate-dev{
  font-size:var(--fs-12);color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--warn-line);border-radius:var(--r-sm);
  padding:8px 11px;margin:2px 0 10px;line-height:1.7;
}
/* 邀请码那一格的说明（只在闸门是 invite 模式时出现）。
   ⚠️ 这段文案只讲"怎么做"，不劝也不催 —— 我们的规矩是不推销。 */
.gate-inv{
  font-size:var(--fs-12);color:var(--ink-3);line-height:1.7;
  margin:-2px 0 10px;
}
.gate-dev b{font-family:var(--mono);font-size:var(--fs-14);letter-spacing:1px}
.gate-err{font-size:var(--fs-12);color:var(--bad);min-height:18px;margin-bottom:6px}
.gate-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);
}
.gate-foot a{font-size:var(--fs-12);color:var(--ink-3);text-decoration:underline}
.gate-foot a:hover{color:var(--brand)}

/* 会员卡片 */
.cnt{
  font-size:var(--fs-11);font-weight:700;color:var(--bad);background:var(--bad-soft);
  border:1px solid var(--bad-line);border-radius:999px;padding:1px 7px;margin-left:2px;
}
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:var(--fs-13);color:var(--ink-2);padding:5px 0}
.mrow+.mrow{border-top:1px dashed var(--line-2)}
.mrow b{color:var(--ink);font-weight:600}
.mrow .v{font-weight:700;color:var(--ink)}
.mbar{height:6px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--line-2);overflow:hidden;margin:8px 0 4px}
.mbar i{display:block;height:100%;background:var(--brand)}
.macts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.macts .btn-sm{flex:1 1 auto;justify-content:center;text-align:center}
.moff{font-size:var(--fs-12);color:var(--ink-3);line-height:1.75}
.mtag{font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;
  color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line)}
.mtag.off{color:var(--ink-3);background:var(--surface-3);border-color:var(--line-2)}
.notice{display:flex;gap:8px;padding:8px 0;border-top:1px dashed var(--line-2);
  font-size:var(--fs-12);color:var(--ink-2);line-height:1.7}
.notice:first-child{border-top:0}
.notice .nt{color:var(--ink-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
.notice.unread{color:var(--ink)}
.notice.unread::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--brand);margin-top:7px}
.hist .hi-copy{flex:0 0 auto;padding:0 12px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink-3);border-radius:8px;font-size:var(--fs-12);
  cursor:pointer;font-family:inherit}
.hist .hi-copy:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand)}
.hist .hi-auto{font-size:10px;font-weight:700;color:var(--ink-3);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px}

/* ==========================================================================
   6. 充值页（tab 2）
   几种买法**并列**摆出来，每种带一个自己的按钮。
   ⚠️ 视觉上不许做"主推"：不标「推荐」、不给某一张卡描金边、不倒计时。
      用户铁律 —— 只给客观信息，让人自己选。
   ========================================================================== */
.buys-block{margin-bottom:22px}
.buys-h{font-size:var(--fs-16);font-weight:660;color:var(--ink);margin-bottom:2px}
.buys{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin-top:12px}
.buys-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:14px 15px;display:flex;flex-direction:column;gap:3px;
}
.bc-t{font-size:var(--fs-13);font-weight:650;color:var(--ink)}
.bc-s{font-size:var(--fs-11);color:var(--ink-3);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-p{font-size:var(--fs-19);font-weight:680;color:var(--ink);margin:6px 0 2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bc-p span{font-size:var(--fs-12);font-weight:400;color:var(--ink-3);margin-left:2px}
.bc-n{font-size:var(--fs-11);color:var(--ink-3);line-height:1.75;flex:1 1 auto}
.bc-a{margin-top:11px}
.bc-a .btn-sm{width:100%}
.buys-seg{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px;
  padding:8px 11px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
}
.bs-l{font-size:var(--fs-12);color:var(--ink-2);font-weight:600}
.bs-btns{display:flex;gap:5px}
.bs-b{
  padding:3px 12px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  border-radius:999px;font-size:var(--fs-12);cursor:pointer;font-family:inherit;
}
.bs-b:hover{border-color:var(--brand-line);color:var(--brand)}
.bs-b.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ==========================================================================
   6.5 付款面板（2026-09-14 接真收款时加）

   ⚠️ 视觉跟登录面板（`.gate`）是一套：浅色卡片 + 同一套圆角/阴影。
      不要做成深色"收银台"—— 客户会觉得点到了别人家的页面，那是最容易起疑心的地方。
   ⚠️ 二维码尺寸给死（190px 容器 / 174px 图）+ `image-rendering:pixelated`：
      通道给的是一张 1:1 的小图，拉大到 240px 会糊，**糊了就扫不出来**，
      而客户只会觉得"你们这个码是坏的"。
   ⚠️ 蒙层压暗但不挡点击之外的东西：z-index 放在 toast(99) 之上、登录面板(200) 之下。
   ========================================================================== */
.pay{
  position:fixed;inset:0;z-index:180;background:rgba(15,23,42,.42);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto;
}
.pay-card{
  width:100%;max-width:400px;margin:auto;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:18px 20px 16px;
}
.pay-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pay-h b{font-size:var(--fs-16);color:var(--ink)}
.pay-x{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);
  border-radius:999px;font-size:var(--fs-12);padding:3px 12px;cursor:pointer;
  font-family:inherit;
}
.pay-x:hover{background:var(--surface-3);color:var(--ink-2)}
.pay-amt{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin-bottom:12px;
  background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--r);
}
.pay-amt b{font-size:var(--fs-30);line-height:1.15;color:var(--brand);font-weight:700}
.pay-amt span{font-size:var(--fs-12);color:var(--ink-2);line-height:1.7}
.pay-chs{display:flex;gap:6px;margin-bottom:12px}
.pay-body{text-align:center}
.pay-qr{
  width:190px;height:190px;margin:2px auto 10px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
}
.pay-qr img{width:174px;height:174px;display:block;image-rendering:pixelated}
.paylnk{color:var(--brand);font-weight:600;text-decoration:underline}
.pay-st{
  font-size:var(--fs-12);color:var(--ink-3);text-align:center;line-height:1.7;
  padding:9px 10px;margin:10px 0 4px;background:var(--surface-3);
  border-radius:var(--r-sm);
}
.pay-acts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px}
.pay-sim{display:flex;flex-direction:column;align-items:center;gap:8px}

/* ==========================================================================
   7. 响应式：窄屏把左导航收成横向条，两栏叠成一栏
   ========================================================================== */
@media (max-width:1080px){
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .nav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .nav-body{display:flex;gap:10px;overflow-x:auto;padding:8px 12px 12px}
  .nav-group{margin:0;display:flex;gap:6px;align-items:center}
  .nav-glabel,.nav-note{display:none}
  .nav-item{border:1px solid var(--line-2);white-space:nowrap}
  .nav-item.is-active::before{display:none}
  .container{padding:14px 14px 40px}
  .topbar{padding:0 14px}
  .trust{display:none}
  .pf-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .pf-l{padding-top:0}
}

/* ==========================================================================
   8. 档案页 · 历史页 · 进度卡（2026-09-14 新增）
   这一节是"监测页右栏拆掉"那一次改动的产物：
     · 档案从"新建监测的第 1 步"搬出来，成了独立页 ⇒ .plist / .pcard-item / .pf-warn
     · 历史从右栏搬出来，成了独立页（右上角按钮进） ⇒ .hgroup / .hday / .hi-acts
     · 进度卡从右栏搬进监测页正文 ⇒ .progcard
     · 会员从监测页右栏搬到充值页 ⇒ .mstate / .autobox
   ⚠️ 用的还是前面那套变量，不要在这里引入新颜色 —— 换色就变成"两个产品"了。
   ========================================================================== */

/* ---- 档案页 ---- */
/* ⚠️ `.panel` 为了监测页被改成了 `padding:0`（那边靠 `.panel>.step` 自带内边距），
   但**档案页和历史页的 panel 里没有 `.step`** ⇒ 「我的档案」那行、
   历史列表第一行全都贴着边框（用户 2026-09-14 报的"字样太靠近边框"）。
   这里把内边距补回来。 */
#pageProfiles .panel,#pageHistory .panel{padding:15px 17px}
.plist{display:flex;flex-direction:column;gap:10px}
.pcard-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:13px 15px;
}
.pci-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-14)}
.pci-meta{font-size:var(--fs-12);color:var(--ink-2);margin-top:5px;line-height:1.65}
.pci-acts{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.btn-sm.danger{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
.btn-sm.danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
/* 改档案的提醒条 —— 它要显眼（这个动作会删数据，且不可恢复） */
.pf-warn{
  background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);
  border-radius:var(--r);padding:10px 12px;font-size:var(--fs-13);line-height:1.7;
  margin-bottom:14px;font-weight:600;
}
.pf-warn b{font-weight:700}

/* ---- 监测页里的进度卡（原来在右栏） ---- */
.progcard{margin-top:16px;background:var(--surface-2)}

/* ---- 历史页 ---- */
#pageHistory .hist{max-height:none;overflow:visible;gap:9px}
#pageHistory .histnotices{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 14px;margin-bottom:16px;
}
.hgroup{margin-bottom:18px}
.hday{
  display:flex;align-items:center;gap:9px;font-size:var(--fs-13);font-weight:660;
  color:var(--ink);padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--line);
}
.hcount{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);background:var(--surface-3);
  border:1px solid var(--line-2);border-radius:999px;padding:1px 8px}
.hist .hrow{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line);transition:all .12s;
}
.hist .hrow:hover{border-color:var(--brand-line)}
.hist .hi-main{flex:1 1 260px;min-width:0}
.hist .hi-title{
  font-size:var(--fs-13);font-weight:660;color:var(--ink);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.hist .hi-acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.hist .hi-open,.hist .hi-dl{
  padding:5px 11px;border-radius:var(--r-sm);font-size:var(--fs-12);font-weight:640;
  border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);
  text-decoration:none;white-space:nowrap;
}
.hist .hi-open:hover,.hist .hi-dl:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- 充值页：会员状态块 + 自动跑开关 ---- */
.mstate{margin-bottom:18px;background:var(--surface-2)}
.autobox{margin-top:20px;max-width:640px}
.autoline{
  display:flex;align-items:flex-start;gap:9px;font-size:var(--fs-14);font-weight:600;
  color:var(--ink);cursor:pointer;margin-bottom:6px;
}
.autoline input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--brand)}

/* ---- 竞争对手名单（档案页里那块） ----
   一个名字一行：名字 · 标签（见过几次 / 你自己填的）· 时间 · 一个"不是我对手"。
   划掉的进下面折叠区，能"放开"。 */
.booklist{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.bkrow{
  display:flex;align-items:center;gap:8px;padding:7px 11px;
  border-bottom:1px solid var(--line);background:var(--surface);
}
.bkrow:last-child{border-bottom:0}
.bkname{
  font-size:var(--fs-13);font-weight:640;color:var(--ink);flex:0 1 auto;
  max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-tag{
  font-size:var(--fs-11);font-weight:600;padding:1px 6px;border-radius:var(--r-xs);
  background:var(--info-soft);color:var(--info);border:1px solid var(--info-line);
  white-space:nowrap;flex:0 0 auto;
}
.bk-tag.me{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.bkwhen{
  font-size:var(--fs-11);color:var(--muted);flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bkrow .btn-sm{flex:0 0 auto}

/* "已划掉"折叠区：默认收起（划掉是少数，不该占着一屏） */
.mutedbox{margin-top:10px;border-top:1px dashed var(--line-2);padding-top:10px}
.mutedbox summary{
  cursor:pointer;font-size:var(--fs-12);color:var(--ink-3);font-weight:600;
  list-style:none;user-select:none;
}
.mutedbox summary::-webkit-details-marker{display:none}
.mutedbox summary:before{content:"▸ ";color:var(--muted)}
.mutedbox[open] summary:before{content:"▾ "}
.mutedbox .booklist{margin-top:8px}
.mutedbox .bkname{color:var(--ink-3);text-decoration:line-through}

/* ==========================================================================
   运营视图 · 邀请码卡片（2026-09-16 加）
   ⚠️ 只有运营视图才会渲染它（`ME.admin`），客户页面上不存在这张卡。
   ========================================================================== */
.invrow{
  display:flex;align-items:center;gap:8px;padding:8px 0;
  border-top:1px dashed var(--line-2);
}
.invrow .cd{
  font-family:var(--mono);font-weight:700;font-size:var(--fs-13);
  letter-spacing:.06em;color:var(--ink);flex:0 0 auto;min-width:70px;
}
.invrow .qt{font-size:var(--fs-12);color:var(--ink-2);flex:0 0 auto;min-width:48px}
/* 用过的人那一栏占满剩下的宽度；太长的号码列表用省略号收掉 */
.invrow .by{
  flex:1 1 auto;min-width:0;font-size:var(--fs-12);color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.invrow .by .none{color:var(--muted)}
.invrow .btn-sm{flex:0 0 auto}

.invgen{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:var(--fs-12);color:var(--ink-2);
}
.invgen .inp{width:62px;flex:0 0 auto;padding:6px 9px;font-size:var(--fs-13)}
.invgen .inp.exp{width:112px}

/* 生成完那句"发给客户的话" */
.invmsg{
  margin-top:9px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--brand-soft);border:1px dashed var(--brand-line);
  font-size:var(--fs-12);color:var(--ink-2);
}
.invmsg b{font-family:var(--mono);letter-spacing:.06em;color:var(--ink)}

/* ---------- 开机遮罩 ----------
   2026-09-16 用户报："打域名先会给我闪过一个工作台的界面，然后又退回登陆界面"。
   原因是工作台本身（`.app`）在 HTML 里默认就是显示的，"要不要开门"却要等两次网络
   请求回来才决定 ⇒ 那几百毫秒里工作台已经画在屏幕上了。
   做法：开机先给 `<body>` 挂 `booting` 把工作台藏起来，问清楚之后再决定：
     · 没登录 ⇒ 换成 `anon`（一直藏着，屏幕上只有登录面板）
     · 已登录 ⇒ 两个类都摘掉（app.js 的 afterLogin）
   ⚠️ 用 `visibility` 而不是 `display`：布局不重排，摘掉的那一刻页面不会跳一下。 */
#boot{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-12);letter-spacing:.1em;color:var(--ink-3);
}
body:not(.booting) #boot{display:none}
body.booting .app,body.anon .app{visibility:hidden}