/* ============================================================================
   小创业模版库 · H5 门户样式（全自包含，不依赖任何 CDN 框架）
   ----------------------------------------------------------------------------
   设计取向：手机端为主、卡片化、圆角、暖橙色主色（与小创业品牌一致）
   ========================================================================== */

:root{
  --c:#FF5C28;            /* 主色 */
  --c-dk:#E84A16;
  --c-lt:#FFF1EB;
  --ok:#07A05A;
  --warn:#E08600;
  --err:#E23B3B;
  --t1:#1A1D23;           /* 主文字 */
  --t2:#5A6272;           /* 次文字 */
  --t3:#98A0AE;           /* 辅助 */
  --bg:#F4F6F9;
  --line:#EBEFF5;
  --r:14px;
  --sh:0 2px 10px rgba(20,30,50,.06);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--t1);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--c);text-decoration:none}
input,button,textarea,select{font-family:inherit;font-size:15px}
img{max-width:100%}

/* ── 布局 ─────────────────────────────────────────────────────────── */
.page{min-height:100vh;padding-bottom:calc(64px + var(--safe-b))}
.page.no-tab{padding-bottom:var(--safe-b)}
.wrap{padding:0 16px}
.nav{
  position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;height:50px;padding:0 8px;
}
.nav .ttl{flex:1;text-align:center;font-size:17px;font-weight:600}
.nav .ico{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--t1);cursor:pointer;
}
.nav .ico.r{font-size:14px;color:var(--c);width:auto;padding:0 10px}

/* ── 卡片 ─────────────────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin:12px 0}
.card.tight{padding:12px 14px}
.hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hd h3{margin:0;font-size:15px;font-weight:600}

/* ── 按钮 ─────────────────────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:48px;border:0;border-radius:12px;background:var(--c);color:#fff;
  font-size:16px;font-weight:600;cursor:pointer;transition:.15s;
}
.btn:active{background:var(--c-dk);transform:scale(.99)}
.btn[disabled],.btn.dis{background:#D7DCE5;color:#fff;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--t1);border:1px solid var(--line)}
.btn.sm{height:36px;font-size:13px;border-radius:9px;width:auto;padding:0 14px}
.btn.ok{background:var(--ok)}
.btn.warn{background:var(--warn)}
.btn.danger{background:#fff;color:var(--err);border:1px solid #FFD9D9}

/* ── 表单 ─────────────────────────────────────────────────────────── */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--t2);margin-bottom:6px}
.field label .req{color:var(--err)}
.field input,.field select,.field textarea{
  width:100%;height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:0 14px;outline:none;color:var(--t1);transition:.15s;
}
.field textarea{height:84px;padding:12px 14px;resize:none;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(255,92,40,.10)}
.field .hint{font-size:12px;color:var(--t3);margin-top:5px}
.field .err{font-size:12px;color:var(--err);margin-top:5px;display:none}
.field.bad input{border-color:var(--err)}
.field.bad .err{display:block}

/* ── 身份选择卡（注册页）───────────────────────────────────────────── */
.roles{display:flex;gap:12px;margin:4px 0 6px}
.role{
  flex:1;border:2px solid var(--line);border-radius:var(--r);padding:16px 14px;background:#fff;
  cursor:pointer;transition:.15s;position:relative;
}
.role.on{border-color:var(--c);background:var(--c-lt)}
.role.on::after{
  content:"✓";position:absolute;top:8px;right:10px;width:20px;height:20px;border-radius:50%;
  background:var(--c);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;
}
.role .ic{font-size:26px;margin-bottom:6px}
.role .nm{font-size:15px;font-weight:700}
.role .ds{font-size:12px;color:var(--t2);margin-top:3px;line-height:1.45}

/* ── 列表项 ───────────────────────────────────────────────────────── */
.row{
  display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:0}
.row .li{font-size:19px;width:24px;text-align:center;flex:0 0 24px}
.row .lt{flex:1;min-width:0}
.row .lt b{display:block;font-weight:600;font-size:15px}
.row .lt span{font-size:12.5px;color:var(--t3);display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .lc{color:var(--t3);font-size:14px;white-space:nowrap}

/* ── 数据格 ───────────────────────────────────────────────────────── */
.stats{display:flex;gap:10px;text-align:center}
.stats > div{flex:1;background:#fff;border-radius:12px;padding:14px 6px;box-shadow:var(--sh)}
.stats b{display:block;font-size:20px;font-weight:700;color:var(--c);line-height:1.3}
.stats span{font-size:12px;color:var(--t3)}

/* ── 步骤条（一步步建店）─────────────────────────────────────────── */
.steps{display:flex;align-items:center;margin:4px 0 18px}
.steps .s{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.steps .s .n{
  width:26px;height:26px;border-radius:50%;background:#E4E8EF;color:#8B93A1;font-size:13px;
  display:flex;align-items:center;justify-content:center;font-weight:600;z-index:2;
}
.steps .s.on .n{background:var(--c);color:#fff}
.steps .s.dn .n{background:var(--ok);color:#fff}
.steps .s .t{font-size:11px;color:var(--t3);text-align:center}
.steps .s.on .t{color:var(--c);font-weight:600}
.steps .s:not(:last-child)::after{
  content:"";position:absolute;top:13px;left:50%;width:100%;height:2px;background:#E4E8EF;z-index:1;
}
.steps .s.dn:not(:last-child)::after{background:var(--ok)}

/* ── 底部导航 ─────────────────────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
  display:flex;padding-bottom:var(--safe-b);
}
.tabbar .tb{
  flex:1;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--t3);font-size:11px;cursor:pointer;
}
.tabbar .tb .i{font-size:20px;line-height:1}
.tabbar .tb.on{color:var(--c)}

/* ── 徽标 ─────────────────────────────────────────────────────────── */
.tag{display:inline-block;border-radius:6px;padding:1px 8px;font-size:11.5px;font-weight:600;line-height:1.7}
.tag.c{background:var(--c-lt);color:var(--c)}
.tag.ok{background:#E7F7EF;color:var(--ok)}
.tag.wa{background:#FFF6E5;color:var(--warn)}
.tag.gy{background:#F1F4F8;color:var(--t2)}
.tag.er{background:#FDECEC;color:var(--err)}

/* ── 空态 / 提示 ─────────────────────────────────────────────────── */
.empty{text-align:center;padding:56px 20px;color:var(--t3)}
.empty .i{font-size:44px;opacity:.35;margin-bottom:10px}
.empty p{margin:6px 0;font-size:14px}
.tipbox{
  background:#FFF9F5;border:1px solid #FFE3D5;border-radius:12px;padding:12px 14px;
  font-size:13px;color:#8A4A22;line-height:1.6;
}
.tipbox b{color:#C2430F}

/* ── 弹窗 ─────────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:60;background:rgba(15,20,30,.45);display:flex;align-items:flex-end;
}
.modal .box{
  width:100%;background:#fff;border-radius:18px 18px 0 0;padding:20px 18px calc(18px + var(--safe-b));
  max-height:86vh;overflow:auto;animation:up .22s ease;
}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
.modal h3{margin:0 0 14px;font-size:16px;text-align:center}

/* ══════════════════════════════════════════════════════════════════════
   ★★★ 宽弹窗（分享海报专用）—— 居中 + 等比例缩放 + 不出现滚动条
   ----------------------------------------------------------------------
   用户原话（2026-10-08）：
     「分享海报弹窗，弹窗需要在平面中心位置，等比例缩放，
       不要出现下拉滚动条。按钮也需要在可视屏内展示完。」
   ⇒ 三个必须同时做到的点，少一个就会出问题：
     ① **居中**：默认弹窗是 `align-items:flex-end`（底部抽屉），
        海报 750×1280 很高，从底部弹出会顶穿屏幕 ⇒ 宽弹窗单独改成居中。
     ② **等比例缩放且不滚动**：750×1280 的图按宽度 100% 撑开，
        高度必然远超视口 ⇒ 出现滚动条。正解是把弹窗做成**纵向 flex**：
        标题/图片/按钮三段，**只有图片那段可伸缩**（`flex:1; min-height:0`），
        图片用 `max-width:100%; max-height:100%; object-fit:contain`
        ⇒ 宽高比永不变形，且永远塞得进可视区。
        ★ `min-height:0` 不能省：flex 子项默认 `min-height:auto`，
          会被内容撑开，图片大时照样溢出（踩过）。
     ③ **按钮在可视区内**：按钮段 `flex:0 0 auto` 固定不压缩，
        图片段先让位 ⇒ 按钮永远完整可见。
   ★ 用 `dvh` 而不是 `vh`：手机浏览器地址栏收起/展开会改变可视高度，
     `100vh` 在 iOS Safari 上会算进地址栏 ⇒ 底部按钮被顶出屏幕。
   ══════════════════════════════════════════════════════════════════════ */
.modal.wide{align-items:center;padding:0 12px}
.modal.wide .box{
  max-width:430px;width:100%;border-radius:16px;padding:16px 14px;
  max-height:min(88dvh, 88vh);
  display:flex;flex-direction:column;
  overflow:hidden;                 /* ★ 不滚动：靠内部 flex 分配高度 */
  animation:pop .2s ease;
}
@keyframes pop{from{transform:scale(.94);opacity:.5}to{transform:none;opacity:1}}
.modal.wide h3{flex:0 0 auto;margin:0 0 10px}
/* 海报图容器：唯一可伸缩的一段 */
.modal.wide #posterBox{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;overflow:hidden;
}
.pnote{flex:0 0 auto;width:100%;font-size:12px;color:#8A929E;text-align:center;line-height:1.5;margin:0}
/* ★★★ 按钮行：`width:100%` 不能少！
   父级 `#posterBox` 是 `align-items:center` 的 flex 列 ⇒ 子项宽度是
   **收缩到内容宽**的。而 `.btn{flex:1}` 的基础尺寸是 0、要靠"分配剩余空间"变宽，
   父级本身没有剩余空间时它就不起作用 ⇒ 两个按钮会变成"文字多的大、文字少的小"
   （实测：66px vs 32px，非常难看）。
   ★ 修法：让按钮行先撑满容器宽度 ⇒ 两个 flex:1 的按钮自然等宽。 */
.prow2{flex:0 0 auto;display:flex;gap:10px;margin-top:10px;width:100%}
.prow2 .btn{flex:1 1 0;min-width:0;text-align:center;line-height:44px;text-decoration:none;
  padding:0 6px;height:44px;box-sizing:border-box;white-space:nowrap;
  display:flex;align-items:center;justify-content:center}

/* ★★★ 中心"操作成功"提示（复制成功用）
   用户原话：「点击复制，给一个，中心弹窗 绿色对号 模版编号已复制成功！」
   ★ 用独立层而不是复用 .modal：它是**一闪而过**的反馈，
     不该有遮罩点击关闭/焦点争夺，也不该挡住后面的操作（pointer-events:none）。 */
.okpop{
  position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .18s;
}
.okpop.on{opacity:1}
.okpop .bd{
  background:rgba(20,24,32,.9);border-radius:16px;padding:22px 26px;min-width:172px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transform:scale(.9);transition:transform .2s cubic-bezier(.2,1.3,.5,1);
}
.okpop.on .bd{transform:none}
.okpop .tick{
  width:46px;height:46px;border-radius:50%;background:#16A34A;
  display:flex;align-items:center;justify-content:center;
}
.okpop .tick svg{display:block}
/* 对号用 stroke 描边动画"画"出来，比直接出现更有确认感 */
.okpop .tick path{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26}
.okpop.on .tick path{animation:draw .32s .06s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.okpop .tx{color:#fff;font-size:14.5px;font-weight:600;text-align:center;line-height:1.5;max-width:78vw}

/* ── Toast / Loading ─────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(12px);
  background:rgba(26,29,35,.92);color:#fff;border-radius:10px;padding:10px 18px;font-size:14px;
  max-width:80vw;text-align:center;opacity:0;pointer-events:none;transition:.22s;z-index:90;
}
.toast.on{opacity:1;transform:translateX(-50%)}
.loading-mask{
  position:fixed;inset:0;z-index:80;background:rgba(255,255,255,.55);
  display:none;align-items:center;justify-content:center;
}
.loading-mask.on{display:flex}
.spin{
  width:32px;height:32px;border:3px solid #FFD9C7;border-top-color:var(--c);border-radius:50%;
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── 登录页 ───────────────────────────────────────────────────────── */
.hero{padding:56px 26px 26px;text-align:center}
.hero .lg{
  width:66px;height:66px;border-radius:18px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--c),#FF8A5C);color:#fff;font-size:30px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(255,92,40,.28);
}
.hero h1{margin:0;font-size:22px;letter-spacing:.5px}
.hero p{margin:6px 0 0;color:var(--t2);font-size:13.5px}
.authbox{background:#fff;border-radius:18px;padding:20px 18px;box-shadow:var(--sh);margin:0 16px}
.alt{text-align:center;margin-top:16px;font-size:13.5px;color:var(--t2)}

/* ── 门店卡 ───────────────────────────────────────────────────────── */
.store{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 0;overflow:hidden}
.store .sh{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.store .sh .sn{flex:1;min-width:0}
.store .sh .sn b{font-size:15.5px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store .sh .sn span{font-size:12px;color:var(--t3)}
.store .sb{padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap}
.store .sb .btn{width:auto;flex:1;min-width:88px;height:38px;font-size:13.5px;border-radius:9px}

/* ── 顶部问候条 ───────────────────────────────────────────────────── */
.greet{
  background:linear-gradient(135deg,#FF6B3D,#FF4E12);color:#fff;padding:22px 18px 46px;
  border-radius:0 0 22px 22px;
}
.greet .hi{font-size:19px;font-weight:700}
.greet .sub{font-size:13px;opacity:.92;margin-top:4px}
.greet .code{
  margin-top:14px;background:rgba(255,255,255,.18);border-radius:11px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;font-size:13px;
}
.greet .code b{font-size:19px;letter-spacing:2.5px;font-family:ui-monospace,Consolas,monospace}
.pull{margin-top:-30px;position:relative;z-index:2}

@media (min-width:560px){
  .page{max-width:560px;margin:0 auto;box-shadow:0 0 0 1px var(--line)}
  .tabbar{max-width:560px;left:50%;transform:translateX(-50%)}
}

/* ══════════════════════════════════════════════════════════════════
   P2 模版库：搜索 / 行业筛选 / 模版网格 / 详情 / 购物车 / 支付
   ══════════════════════════════════════════════════════════════════ */

/* ── 顶部搜索 + 筛选（吸顶）────────────────────────────────────── */
.filters{position:sticky;top:50px;z-index:19;background:#fff;border-bottom:1px solid var(--line);padding:10px 0 0}
/* ══ 搜索行：搜索框 + **右边独立的**「搜付费」按钮 ══════════════════════
   ★★ 用户强调「搜索框 和 后面 搜付费 **不是一体的**」
   ⇒ 两个独立元素（中间 8px 间距），不是把按钮嵌进搜索框里。
   两边的 16px 与页面其它内容对齐（.tpl-grid / .sortbar 都是 16px）。 */
.searchrow{display:flex;align-items:center;gap:8px;margin:0 16px 8px}
.searchrow .searchbox{flex:1;min-width:0;margin:0}   /* 横向 margin 交给 .searchrow 统一给 */
.searchbox{display:flex;align-items:center;gap:8px;background:#F4F6F9;
  border-radius:11px;padding:0 12px;height:40px}
.searchbox input{flex:1;border:0;background:transparent;height:38px;outline:none;font-size:14.5px}
.searchbox .si{font-size:15px;color:var(--t3)}
.searchbox .clr{font-size:16px;color:var(--t3);padding:0 2px;cursor:pointer}

/* 「搜付费」按钮：**单独的、简洁的筛选按钮样式**
   ★ 描边 + 白底（不是实心主色）—— 它是"次要动作"，
     实心橙色会和下面的「搜索」按钮抢注意力。
   ★ 展开时变浅橙底 + 橙字，让人知道"筛选正在生效/已展开"。 */
.fltbtn{flex:0 0 auto;height:40px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--t2);
  font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .14s,border-color .14s,color .14s}
.fltbtn:active{transform:scale(.96)}
.fltbtn.on{background:#FFF3EC;border-color:#FFD3BA;color:#C2410C}

/* 价格区间收起状态（★ 用类名而不是内联 style：方便 toggle，也方便测试查找） */
.prow-inline.hide{display:none}

/* ── 价格区间（★ 内联，不再弹窗）─────────────────────────────────
   用户原话：「按价格搜索不用单独弹窗框输入，直接在页面上设置个价格区间搜索就可以了」
   ★ 2026-10-08：默认**收起**，点「搜付费」展开（见 pageTpl 的说明） */
.prow-inline{display:flex;align-items:center;gap:6px;margin:0 16px 9px}
.prow-inline .pi{flex:1;min-width:0;display:flex;align-items:center;gap:3px;background:#F4F6F9;
  border-radius:10px;padding:0 9px;height:36px}
.prow-inline .pi input{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;
  font-size:13.5px;text-align:center}
.prow-inline .pi b{font-size:12.5px;color:var(--t3);font-weight:400}
.prow-inline .sp{color:var(--t3);font-size:12px;flex:0 0 auto}
.prow-inline .pbtn{flex:0 0 auto;height:36px;padding:0 13px;border-radius:10px;background:var(--c);
  color:#fff;border:0;font-size:13px;font-weight:600;cursor:pointer}
.prow-inline .pbtn.ghost{background:#F1F4F8;color:var(--t2)}
.prow-inline .pbtn:active{transform:scale(.96)}

/* ── 行业分类条 ─────────────────────────────────────────────────
   ★ 用户反馈两点：① "客户不知道左滑还有分类" ② "分类样式字体可以小一些"
   方案：字号收到 12.5px（一行能多放 2 个）；右端常驻**渐隐 + 跳动的箭头**，
        箭头点开是"全部分类"弹层 —— 彻底解决"不知道能滑"的问题。
   ★★★ 排布上必须让箭头**独立占位**（flex 子项），不能绝对定位盖在 chips 上：
        盖上去的话，箭头会把它下面的分类 chip 的点击吃掉 —— 实测踩到：
        测试点"中餐"正好点在箭头上，结果弹出分类弹层、列表没筛，一路假红灯。 */
.catewrap{position:relative;display:flex;align-items:center;padding-bottom:10px}
.chips{flex:1;min-width:0;display:flex;gap:7px;overflow-x:auto;padding:0 4px 0 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 11px;font-size:12.5px;color:var(--t2);cursor:pointer;white-space:nowrap;
  transition:.15s;line-height:1.5}
.chip.on{background:var(--c);border-color:var(--c);color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(255,92,40,.3)}
.chip .n{font-size:11px;opacity:.75;margin-left:3px}
/* 渐隐遮罩：只做视觉提示，pointer-events:none ⇒ 绝不吃点击 */
.catefade{position:absolute;right:44px;top:0;height:34px;width:36px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%);transition:opacity .2s}
.catefade.off{opacity:0}
.catemore{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--c);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  margin:0 12px 0 6px;box-shadow:0 2px 9px rgba(255,92,40,.4);cursor:pointer;
  animation:catePulse 1.9s ease-in-out infinite}
@keyframes catePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* 全部分类弹层：4 列网格，一眼看全 */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:4px}
.catgrid .ci{border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center;
  font-size:13px;color:var(--t2);cursor:pointer;background:#fff;transition:.15s;line-height:1.45}
.catgrid .ci b{display:block;font-size:15px;color:var(--t1);font-weight:600}
.catgrid .ci.on{border-color:var(--c);background:var(--c-lt);color:var(--c)}
.catgrid .ci.on b{color:var(--c)}

/* ── 模版网格 ─────────────────────────────────────────────────── */
.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 16px}
.tpl{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  cursor:pointer;position:relative;transition:.15s}
.tpl:active{transform:scale(.985)}
.tpl .thumb{position:relative;width:100%;aspect-ratio:3/5;background:#F1F4F8;overflow:hidden}
.tpl .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tpl .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#C9D2DE}
.tpl .bd{padding:9px 10px 11px}
.tpl .nm{font-size:13.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;height:2.7em;word-break:break-all}
.tpl .tags{display:flex;align-items:center;gap:5px;margin-top:7px;flex-wrap:wrap}
.tpl .price{font-size:13px;font-weight:700;color:var(--c)}
.tpl .price.free{color:var(--ok)}

/* ★★★ 旧的 `.fav`（收藏心形）规则已删除 —— 它是**死代码**（新版卡片改用
   `.dbtn star`，详情页用 `.fav2`，没有任何元素还带裸 `fav` 类），
   但留着会**劫持新按钮**：新按钮的类名里含 `fav`（`.dbtn.star`），
   于是被这条 `position:absolute;width:32px;height:32px` 命中 ⇒
   收藏按钮脱离文档流、浮到点赞按钮上面，**点"点赞"实际点到"收藏"**
   （实测踩到：点👍却提示"已收藏"，点赞数一直不动）。
   ★ 教训：改类名时一定要 grep 全局有没有同名旧规则还在生效。 */
.own{position:absolute;top:8px;left:8px;background:rgba(7,160,90,.92);color:#fff;
  border-radius:6px;padding:2px 7px;font-size:11px;font-weight:600;z-index:2}

.more{text-align:center;padding:6px 16px 26px}
.more .btn{max-width:200px;margin:0 auto}

/* ── 模版详情 ─────────────────────────────────────────────────── */
.dtl-img{width:100%;background:#F1F4F8;display:flex;align-items:center;justify-content:center;min-height:280px}
.dtl-img img{width:100%;display:block}
.dtl{background:#fff;padding:16px}
.dtl h2{margin:0 0 8px;font-size:19px;line-height:1.4}
.dtl .row2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dtl .pr{font-size:24px;font-weight:700;color:var(--c);line-height:1.2}
.dtl .pr.free{color:var(--ok);font-size:20px}
.dtl .meta{color:var(--t3);font-size:12.5px;line-height:1.9}

.footbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
  padding:10px 16px calc(10px + var(--safe-b));display:flex;gap:10px;align-items:center}
.footbar .fav2{width:54px;flex:0 0 54px;height:46px;border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px;
  color:var(--t2);cursor:pointer;line-height:1.1}
.footbar .fav2.on{color:var(--c);border-color:#FFD9C7;background:var(--c-lt)}
.footbar .fav2 small{font-size:11px;margin-top:1px}
.footbar .btn{flex:1}
@media (min-width:560px){.footbar{max-width:560px;left:50%;transform:translateX(-50%)}}

/* ── 购物车 ───────────────────────────────────────────────────── */
.cline{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.cline:last-child{border-bottom:0}
.cline .ci{width:60px;height:100px;flex:0 0 60px;border-radius:9px;overflow:hidden;background:#F1F4F8}
.cline .ci img{width:100%;height:100%;object-fit:cover}
.cline .cc{flex:1;min-width:0}
.cline .cc b{font-size:14px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.cline .cc .p{font-size:13.5px;font-weight:700;color:var(--c);margin-top:5px}
.cline .cc .p.free{color:var(--ok)}
.cline .cd{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cline .del{color:var(--err);font-size:12.5px;cursor:pointer;padding:2px 4px}

.paybar{position:fixed;left:0;right:0;bottom:calc(56px + var(--safe-b));z-index:29;background:#fff;
  border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px}
.paybar .sum{flex:1;font-size:13px;color:var(--t2)}
.paybar .sum b{font-size:19px;color:var(--c);font-weight:700}
.paybar .btn{width:auto;min-width:120px;height:44px}
@media (min-width:560px){.paybar{max-width:560px;left:50%;transform:translateX(-50%)}}

/* ── 支付页 ───────────────────────────────────────────────────── */
.paybox{background:#fff;border-radius:var(--r);padding:22px 18px;text-align:center;margin:14px 0}
.paybox .amt{font-size:36px;font-weight:700;color:var(--c);line-height:1.2}
.paybox .sub{color:var(--t3);font-size:13px;margin-top:4px}
.paybox .qr{width:196px;height:196px;margin:18px auto 8px;border:1px solid var(--line);
  border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff}
.paybox .qr img{width:100%;height:100%}
.payok{color:var(--ok);font-size:46px;margin-bottom:8px}

/* ══════════════════════════════════════════════════════════════════
   收银台：选微信 / 支付宝
   ★ 聚合码本身不挑渠道（谁扫都行），但让用户先"选一个"有两个好处：
     ① 心理上更确定（像正规收银台）② 付呗按渠道出码时能对上
   ══════════════════════════════════════════════════════════════════ */
.payway{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:16px 0 10px}
.payway .pw{display:flex;align-items:center;justify-content:center;gap:6px;
  border:1.5px solid var(--line);border-radius:12px;padding:11px 4px;font-size:13.5px;
  color:var(--t2);cursor:pointer;background:#fff;transition:.16s;font-weight:500}
.payway .pw .pi{display:flex;align-items:center}
.payway .pw.on{border-color:var(--c);background:var(--c-lt);color:var(--c);font-weight:700;
  box-shadow:0 2px 10px rgba(255,92,40,.14)}
.payway .pw:active{transform:scale(.97)}

/* ── 装修列表 ─────────────────────────────────────────────────── */
.drag{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 0;overflow:hidden}
.drag .dh{padding:13px 15px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line)}
.drag .dh .t{flex:1;min-width:0;font-size:15px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drag .db{display:flex;gap:8px;padding:11px 15px}
.drag .db .btn{width:auto;flex:1;height:38px;font-size:13.5px;border-radius:9px}

.mcard{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:12px 0;overflow:hidden}
.mcard .row{padding:15px}
.tabbar .tb{position:relative}
.badge{position:absolute;top:5px;right:50%;margin-right:-24px;background:var(--err);color:#fff;
  border-radius:9px;font-size:10px;line-height:15px;padding:0 5px;min-width:15px;text-align:center;font-weight:600}

/* ★★ 2026-10-08：原来的「游客提示条」(.guestbar) 样式**已删除**。
   用户要求：「域名解析到根目录，打开就是挑选模版这个页面，如果是要下单，
             再弹出注册和登录按钮」⇒ 顶部那条常驻引导条去掉了，
   改成"点下单时才弹登录弹窗"（见 app.js 的 loginModal）。
   ★ 刻意把死规则删掉而不是留着：这个项目踩过"遗留死规则劫持新元素"的坑
     （`.dbtn.fav` 撞上 `.fav`，把收藏按钮挤成绝对定位），
     没人用的选择器就是下一个坑的种子。 */
/* ── 「登录后就能下单」弹窗（下单被拦时弹出来）─────────────────── */
.lgm{font-size:13.5px;color:#5A6272;line-height:1.85}
.lgm2{margin-top:16px;display:flex;flex-direction:column;gap:10px}

/* ══════════════════════════════════════════════════════════════════
   P3/P5：排序双向切换 / 点赞·收藏·不喜欢三按钮 / 已屏蔽模版库 / 批量改价
   ══════════════════════════════════════════════════════════════════ */

/* 排序行：横向可滚；★ 选中的项带方向箭头（↓正序 / ↑倒序） */
.sortbar{display:flex;gap:13px;padding:0 16px 10px;font-size:13px;color:var(--t2);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center}
.sortbar::-webkit-scrollbar{display:none}
.sortbar span{white-space:nowrap;flex:0 0 auto;cursor:pointer;padding:2px 0}
.sortbar span.on{color:var(--c);font-weight:700}
.sortbar span em{font-style:normal;font-size:11px;margin-left:1px;font-weight:700}
.sortbar .right{margin-left:auto;color:#98A0AE;font-size:12px;flex:0 0 auto}
.sortbar .pfilter{color:var(--c);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   模版卡片互动区 —— ★ 抖音短视频样式（点赞 / 收藏竖排 + X 关闭）
   ------------------------------------------------------------------
   用户要求：
     · 点赞、收藏 用抖音短视频那种样式排版（右侧竖排，图标 + 数字）
     · 不喜欢 改成 X 关闭按钮，位置自己定 ⇒ 放**右上角**
   ★ 为什么用内联 SVG 而不是 emoji：👍/♥ 这种 emoji 在不同手机上
     字体和颜色都不一样（有的还是彩色的），做不出抖音那种"纯色填充、
     点亮变红"的效果。SVG 可以精确控制填充色和描边。
   ══════════════════════════════════════════════════════════════════ */

/* 右上角 X 关闭（= 不喜欢 / 屏蔽） */
/* ★ 关闭(X)：热区从 23px 加大到 28px ——
   它贴在缩略图右上角，太小的话手指点不中就会**误触到卡片**（跳进详情页），
   而"不想看这套"本来就是个需要点准的动作。图标本身仍保持 13~14px 不抢视觉。 */
.tplx{position:absolute;top:6px;right:6px;z-index:3;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.34);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(3px);transition:.16s;-webkit-backdrop-filter:blur(3px)}
.tplx:active{background:rgba(0,0,0,.6);transform:scale(.88)}
.tpl .thumb:hover .tplx{background:rgba(0,0,0,.5)}

/* 抖音式竖排互动栏：贴缩略图右下角 */
.dbtns{position:absolute;right:8px;bottom:9px;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.dbtn{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  transition:transform .16s;line-height:1}
.dbtn:active{transform:scale(.86)}
.dbtn .ic{width:31px;height:31px;border-radius:50%;background:rgba(0,0,0,.32);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:.16s}
.dbtn .ic svg{fill:#fff;display:block}
.dbtn .n{font-size:11px;font-weight:600;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);letter-spacing:.2px}

/* 点亮态：抖音就是"变红 + 轻微放大" */
.dbtn.zan.on .ic{background:rgba(255,255,255,.94)}
.dbtn.zan.on .ic svg{fill:#FE2C55}          /* 抖音同款红 */
.dbtn.zan.on .n{color:#fff}
.dbtn.star.on .ic{background:rgba(255,255,255,.94)}
.dbtn.star.on .ic svg{fill:#F5A623}
.dbtn.star.on .n{color:#fff}
/* 收藏那颗星用"描边"表现未选中，点亮才填充 —— 更接近抖音观感 */
.dbtn.star .ic svg .st{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.dbtn.star.on .ic svg .st{fill:#F5A623;stroke:#F5A623}

/* 旧的圆点按钮样式已废弃（保留选择器不删，避免旧缓存页面点不到按钮） */
.cardbtns{display:none}

/* 卡片统计行（点击 / 使用 / 点赞数） */
.tplstat{display:flex;gap:9px;margin-top:6px;font-size:11.5px;color:var(--t3)}
.tplstat span{display:flex;align-items:center;gap:3px}
.tplstat b{color:#5A6272;font-weight:600}

/* ★ 屏蔽后卡片**直接从列表移除**（不再像以前那样"灰掉留在列表里"）；
   这里只是"刚点完、还没来得及重绘"时的收缩过渡 */
.tpl.disliked{opacity:0;transform:scale(.94);transition:.22s;pointer-events:none}

/* ── 已屏蔽模版库 ── */
.blk{display:flex;gap:11px;align-items:center;background:#fff;border-radius:var(--r);
  padding:10px;margin-bottom:10px;box-shadow:var(--sh)}
.blk img{width:52px;height:74px;object-fit:cover;border-radius:8px;background:#F1F4F8;flex:0 0 auto}
.blk .bi{flex:1;min-width:0}
.blk .bi b{font-size:13.5px;font-weight:600;line-height:1.4;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blk .bi span{font-size:11.5px;color:var(--t3)}
.blk .bk{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--t2);
  border-radius:9px;padding:7px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap}
.blk .bk:active{transform:scale(.96)}

/* ── 代理商批量改价卡 ── */
.batch{background:linear-gradient(135deg,#FFF4EE,#FFF9F5);border:1px solid #FFE0D0;
  border-radius:var(--r);padding:13px 14px;margin-bottom:12px}
.batch h4{margin:0 0 3px;font-size:14.5px;font-weight:700;color:#B33F14}
.batch .bd2{font-size:12.5px;color:#9A5B33;line-height:1.7;margin-bottom:11px}
.bmodes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.bmodes div{border:1px solid #FFD9C6;background:#fff;border-radius:9px;padding:7px 2px;
  text-align:center;font-size:11.5px;color:#8A4A22;cursor:pointer;line-height:1.4;transition:.15s}
.bmodes div.on{background:var(--c);border-color:var(--c);color:#fff;font-weight:600}
.brow{display:flex;align-items:center;gap:8px}
.brow input{flex:1;min-width:0;height:38px;border:1px solid #FFD9C6;border-radius:10px;
  padding:0 11px;font-size:14px;outline:none;background:#fff}
.brow input:focus{border-color:var(--c)}
.brow .unit{font-size:13px;color:#8A4A22;flex:0 0 auto}
.bpv{background:#fff;border:1px dashed #FFC7A8;border-radius:11px;padding:10px 12px;
  margin-top:10px;font-size:12.5px;color:#8A4A22;line-height:1.85;display:none}
.bpv.on{display:block}
.bpv b{color:var(--c);font-weight:700}
.bacts{display:flex;gap:8px;margin-top:10px}
.bacts .btn{height:40px;font-size:14px}

/* 价格搜索弹层 */
.prow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.prow input{flex:1;height:46px;border:1px solid var(--line);border-radius:11px;padding:0 12px;
  text-align:center;font-size:16px;outline:none}
.prow input:focus{border-color:var(--c)}
.prow .sp{color:var(--t3)}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.quick span{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:13px;
  color:var(--t2);cursor:pointer}
.quick span.on{background:var(--c-lt);border-color:var(--c);color:var(--c);font-weight:600}

/* 价格体系管理列表 */
.pitem{background:#fff;border-radius:12px;box-shadow:var(--sh);padding:12px 14px;margin-bottom:10px}
.pitem .ph{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.pitem .ph img{width:38px;height:64px;border-radius:7px;object-fit:cover;background:#F1F4F8;flex:0 0 38px}
.pitem .ph .n{flex:1;min-width:0;font-size:14px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pitem .fld{display:flex;flex-direction:column;gap:4px}
.pitem .fld label{font-size:11.5px;color:var(--t3)}
.pitem .fld input{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 9px;
  font-size:14px;outline:none;width:100%;text-align:center}
.pitem .fld input:focus{border-color:var(--c)}
.pitem .sw{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  font-size:13px;color:var(--t2)}
.pitem .profit{font-size:12.5px;color:var(--ok);font-weight:600}
.pitem .profit.warn{color:var(--err)}
.pitem .saved{color:var(--ok);font-size:12px;margin-left:8px}

/* 分段切换（总价模版 / 我的报价） */
.seg{display:flex;background:#EEF1F6;border-radius:11px;padding:3px;margin:12px 16px}
.seg div{flex:1;text-align:center;padding:8px 0;font-size:13.5px;color:var(--t2);border-radius:9px;cursor:pointer}
.seg div.on{background:#fff;color:var(--c);font-weight:600;box-shadow:0 1px 3px rgba(20,30,50,.08)}

/* "由谁为你服务" */
.serve{display:flex;align-items:center;gap:7px;background:#EFF6FF;border-bottom:1px solid #DBEAFE;
  padding:8px 16px;font-size:12.5px;color:#1D4ED8}
.serve b{font-weight:600}

/* 我的：价格体系入口提示 */
.hqtag{background:linear-gradient(135deg,#4F46E5,#7C6CF0);color:#fff;border-radius:6px;
  padding:2px 8px;font-size:11px;font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   P4 代理商体系：权重徽章 / 联系方式 / 团队 / 考核
   ══════════════════════════════════════════════════════════════════ */

/* ── 权重徽章 ─────────────────────────────────────────────────── */
.lv{display:inline-flex;align-items:center;gap:3px;border-radius:999px;
  padding:2px 8px;font-size:11px;font-weight:700;line-height:17px;white-space:nowrap;
  border:1px solid transparent}
.lv .s{font-size:9.5px;letter-spacing:-.5px}
.lv-diamond{background:linear-gradient(135deg,#E8F0FF,#D6E4FF);color:#3A5FC0;border-color:#C3D4F7}
.lv-gold   {background:linear-gradient(135deg,#FFF3D6,#FFE7AE);color:#9A6B10;border-color:#F5D89A}
.lv-silver {background:linear-gradient(135deg,#F1F3F7,#E3E7EE);color:#6A7280;border-color:#D6DBE3}
.lv-bronze {background:linear-gradient(135deg,#FFEAD9,#FBD9BC);color:#9A5A22;border-color:#F0C9A4}
.lv-normal {background:#F4F6F9;color:#8A929E;border-color:#E4E8EE}
.lv-custom {background:var(--c-lt);color:var(--c);border-color:#FFD3BA}
/* 权重条 */
.wbar{height:4px;border-radius:3px;background:#EEF1F5;overflow:hidden;margin-top:5px}
.wbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#FF9A56,#FF6B2C)}

/* ── 联系卡片（服务商 / 上级）────────────────────────────────── */
.ctc{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin:12px 0}
.ctc .ch{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ctc .av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--c-lt);
  color:var(--c);font-size:19px;display:flex;align-items:center;justify-content:center;font-weight:700}
.ctc .cn{flex:1;min-width:0}
.ctc .cn b{font-size:15px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctc .cn span{font-size:12px;color:var(--t3)}
.ctc .crow{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line);
  font-size:13.5px;color:var(--t2)}
.ctc .crow .k{width:52px;flex:0 0 52px;color:var(--t3);font-size:12.5px}
.ctc .crow .v{flex:1;min-width:0;color:var(--t1);word-break:break-all}
.ctc .crow .cp{flex:0 0 auto;color:var(--c);font-size:12px;padding:2px 8px;border:1px solid #FFD3BA;
  border-radius:6px;cursor:pointer;background:var(--c-lt)}
.ctc .qr{margin-top:10px;text-align:center}
.ctc .qr img{width:150px;height:150px;border:1px solid var(--line);border-radius:10px;background:#fff}
.ctc .qr p{font-size:12px;color:var(--t3);margin-top:6px}
.ctc .note{margin-top:9px;padding:8px 10px;background:#FAFBFC;border-radius:8px;
  font-size:12.5px;color:var(--t2);line-height:1.6}
.ctc .empty-c{color:var(--t3);font-size:12.5px;padding:8px 0;text-align:center}

/* ── 团队成员 ─────────────────────────────────────────────────── */
.mem{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:10px 0;overflow:hidden}
.mem .mh{display:flex;align-items:center;gap:9px;padding:12px 14px}
.mem .mh .av{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:#F0F3F7;
  color:#7A8290;font-size:16px;display:flex;align-items:center;justify-content:center;font-weight:700}
.mem .mh .mi{flex:1;min-width:0}
.mem .mh .mi b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px}
.mem .mh .mi b .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.mem .mh .mi span{font-size:11.5px;color:var(--t3)}
.mem .mh .mm{text-align:right;flex:0 0 auto}
.mem .mh .mm b{font-size:15px;color:var(--c);font-weight:700}
.mem .mh .mm span{display:block;font-size:11px;color:var(--t3)}
.mem .mb{display:flex;gap:8px;padding:0 14px 12px;flex-wrap:wrap}
.mem .mb .mini{font-size:12px;color:var(--t2);background:#F4F6F9;border-radius:7px;
  padding:5px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.mem .depth{display:inline-block;font-size:11px;color:#8A929E;background:#F4F6F9;
  border-radius:4px;padding:1px 5px;margin-left:4px}
/* 树缩进 */
.mem.lv1{margin-left:0}
.mem.lv2{margin-left:18px}
.mem.lv3{margin-left:36px}
.mem.lv4{margin-left:54px}
.mem.lv5{margin-left:72px}

/* ── 考核进度 ─────────────────────────────────────────────────── */
.asr{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:15px;margin:12px 0}
.asr .ah{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.asr .ah b{font-size:15px;font-weight:600}
.asr .st{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.st-running{background:#FFF3D6;color:#9A6B10}
.st-pass{background:#E6F7EF;color:#0A8A55}
.st-fail{background:#FDECEC;color:#C23A3A}
.asr .big{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.asr .big b{font-size:30px;font-weight:700;color:var(--c);line-height:1}
.asr .big span{font-size:13px;color:var(--t3)}
.asr .pbar{height:9px;border-radius:6px;background:#EEF1F5;overflow:hidden;margin-bottom:8px}
.asr .pbar i{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,#FFB07A,#FF6B2C);transition:width .4s}
.asr .pbar.pass i{background:linear-gradient(90deg,#5FD79B,#12A96A)}
.asr .ameta{display:flex;justify-content:space-between;font-size:12px;color:var(--t3)}
.asr .tip{margin-top:10px;padding:9px 11px;border-radius:8px;font-size:12.5px;line-height:1.65}
.asr .tip.good{background:#F0FAF5;color:#0A7A4C}
.asr .tip.bad{background:#FDF2F2;color:#A33}
.asr .tip.warn{background:#FFFAEE;color:#8A6210}

/* ── 规则设置表单 ─────────────────────────────────────────────── */
.frm{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:4px 15px;margin:12px 0}
.frow{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.frow .fl{width:96px;flex:0 0 96px;font-size:13.5px;color:var(--t2)}
.frow .fc{flex:1;min-width:0}
.frow input,.frow select{width:100%;border:1px solid var(--line);border-radius:9px;height:38px;
  padding:0 11px;font-size:14px;outline:none;background:#fff;color:var(--t1)}
.frow textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:13.5px;outline:none;resize:vertical;min-height:56px;background:#fff;color:var(--t1)}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--c)}
.frow .fh{font-size:11.5px;color:var(--t3);margin-top:4px;line-height:1.5}

/* ── 总部：代理商一行 ─────────────────────────────────────────── */
.ag{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:10px 0;padding:13px 14px}
.ag .a1{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ag .a1 .av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#F0F3F7;
  color:#7A8290;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:700}
.ag .a1 .ai{flex:1;min-width:0}
.ag .a1 .ai b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ag .a1 .ai span{font-size:11.5px;color:var(--t3)}
.ag .a1 .aw{flex:0 0 auto;text-align:right}
.ag .a1 .aw b{font-size:16px;color:var(--c);font-weight:700}
.ag .a1 .aw span{display:block;font-size:11px;color:var(--t3)}
.ag .a2{display:flex;gap:7px;flex-wrap:wrap}
.ag .a2 .mini{font-size:12px;padding:5px 10px;border-radius:7px;background:#F4F6F9;
  color:var(--t2);cursor:pointer}
.ag .a2 .mini.pri{background:var(--c-lt);color:var(--c);border:1px solid #FFD3BA}
.ag .a3{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:12px;color:var(--t3)}
.ag .a3 b{color:var(--t1);font-weight:600}

/* ══════════════════════════════════════════════════════════════════
   会员归属（总部：搜会员 → 改上家）
   ══════════════════════════════════════════════════════════════════ */
.mm{background:#fff;border-radius:var(--r);box-shadow:var(--sh);margin:0 0 10px;padding:12px 13px}
.mm .m1{display:flex;align-items:center;gap:9px}
.mm .av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#F0F3F7;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#6B7280}
.mm .mi{flex:1;min-width:0}
.mm .mi b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;line-height:1.4}
.mm .mi b .tag{font-size:10.5px;padding:1px 6px}
.mm .mi span{display:block;font-size:11.5px;color:var(--t3);margin-top:1px}
/* 当前上家 —— 总部最需要一眼看到的信息，单独一行 */
.mm .mup{margin-top:9px;padding:7px 10px;background:#F7F9FC;border-radius:9px;
  font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mm .mup b{color:var(--c);font-weight:600}
.mm .mup i{font-style:normal;color:var(--t3);font-size:11.5px}
.mm .mup em{font-style:normal;color:var(--t3)}
.mm .mup .mdl{margin-left:auto;font-size:11.5px;color:var(--t3)}
.mm .ma{display:flex;gap:7px;margin-top:9px}
.mm .ma .mini{font-size:12px;padding:5px 11px;border-radius:7px;background:#F4F6F9;
  color:var(--t2);cursor:pointer}
.mm .ma .mini.pri{background:var(--c-lt);color:var(--c);border:1px solid #FFD3BA;font-weight:600}
.mm .ma .mini:active{transform:scale(.96)}
.mini.dis{opacity:.4;pointer-events:none}

/* 挑新上家弹层里的候选列表 */
.uplist{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.upc{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);
  border-radius:11px;margin-bottom:8px;cursor:pointer;transition:.15s;background:#fff}
.upc:active{background:#F7F9FC}
.upc .av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#F0F3F7;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#6B7280}
.upc .ui{flex:1;min-width:0}
.upc .ui b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.upc .ui span{display:block;font-size:11.5px;color:var(--t3)}
.upc .ux{flex:0 0 auto;font-size:12px;color:var(--c);font-weight:600}

/* 变更记录 */
.plg{border-left:3px solid var(--c-lt);padding:2px 0 10px 11px;margin-bottom:2px}
.plg .pl1{font-size:13.5px;color:var(--t1)}
.plg .pl1 em{font-style:normal;color:var(--t3)}
.plg .pl1 b{color:var(--c);font-weight:600}
.plg .pl2{font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.7}

/* ── 二维码上传 ───────────────────────────────────────────────── */
.upq{width:150px;height:150px;border:1.5px dashed #C9D2DE;border-radius:12px;margin:6px auto 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--t3);
  font-size:12px;cursor:pointer;overflow:hidden;background:#FAFBFC;position:relative}
.upq img{width:100%;height:100%;object-fit:cover}
.upq .t{font-size:26px;color:#C9D2DE;margin-bottom:3px}
.upq.has{border-style:solid;border-color:var(--line)}

/* 空态小一点 */
.empty.sm{padding:26px 16px}

/* ══════════════════════════════════════════════════════════════════
   v1.6.0 新增：金币 / 消息 / 编号 / 加入提醒 / 海报
   ══════════════════════════════════════════════════════════════════ */

/* ── 模版卡片上的随机编号（★ 2026-10-08 改版：移到"最后一排"、绿色 + 复制图标）─
   ★ 第一版要求：「不要单独放一行，放在统计观看人数和加入购物车人数那一排…
                  用绿色表示，复制编号：TPXXX」
   ★★ 2026-10-08 二次调整：「把复制编号几个字去掉，只留下模版编号。
       然后加个复制图标按钮就行。」
   ⇒ 现在的形态：`.tno` 里只有「编号 + 复制图标」两块。
     · 去掉"复制编号："四个字后**省下约 55px**，这一排不再被挤到换行
     · 图标承担"这里能点"的语义（比四个字省地方，也更像 App 里的做法）
   ★ 排版细节：`margin-left:auto` 把它推到最右边，
     和左边的 👁/🛒 自然分开，视觉上更像"操作"而不是"又一个统计"。 */
.tpl .tplstat .tno{display:inline-flex;align-items:center;gap:4px;
  margin-left:auto;padding:3px 8px;border-radius:6px;
  color:#0E9F6E;background:#E9F8F1;border:1px solid #C9EEE0;
  font-size:11.5px;font-weight:600;letter-spacing:.4px;white-space:nowrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;cursor:pointer;
  line-height:1.5;transition:background .12s,border-color .12s}
.tpl .tplstat .tno:active{background:#D6F2E7}
.tpl .tplstat .tno:hover{border-color:#8FDCC1}
/* 复制图标：跟着文字同色（currentColor），比单独写死绿色好维护 */
.tpl .tplstat .tno .cpi{flex:0 0 auto;opacity:.85}
.tpl .tplstat .tno:active .cpi{opacity:1}

/* 详情页的编号行（可点复制） */
.dtlno{display:flex;align-items:center;gap:8px;margin:9px 0 2px;font-size:13px;color:#5A6272;
  background:#F7F9FC;border-radius:9px;padding:9px 12px;cursor:pointer}
.dtlno .lb{font-size:12.5px}
.dtlno b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;
  color:#0E9F6E;letter-spacing:.5px}
.dtlno .cpi{color:#0E9F6E;opacity:.8}
.dtlno i{font-style:normal;font-size:11.5px;color:#5A6272;margin-left:auto}
.dtlno:active{background:#EFF3F9}

/* ── 最近加入提醒条 ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════
   ★★★ 实时动态：**单行胶囊** + 自动翻页（2026-10-08 第二轮调整）
   ----------------------------------------------------------------------
   用户原话：「实时动态 那块 直接做成一行内容显示，自动翻页，都在一行显示，
              注意边框和边距。要 50% 的圆角，需要有上边距下边距左右边距设计。」
   ⇒ 从"两行（表头 + 内容）"压成**一行**；圆角改**两端半圆（胶囊）**；
     上下左右都给边距。

   ★★ `border-radius` 写 `999px` 而**不是** `50%`：
      `50%` 在"宽 358 × 高 40"的盒子上会算成**椭圆**椭圆（横向半径 179 / 纵向 20），
      两端会被压得很尖、看着像压扁的气泡；
      `999px` 会被浏览器限制成**高度的一半 = 正圆**，这才是"两端半圆"的胶囊效果。
      （用户要的"50% 圆角"在视觉上就是这个。）

   ★ 边距设计（四边都有，且左右与页面其它内容对齐）：
      · 左右 16px —— 和 `.searchbox` / `.tpl-grid` / `.sortbar` 一致，
        这样它和下面的搜索框、卡片是**同一条竖线**，不会参差
      · 上 10px（与导航栏拉开）、下 12px（与搜索框拉开）

   ★ 一条的高度 = 22px，整条 40px（22 + 上下各 9）。
     ★★ 这两个数字必须和 app.js 里的 `JB_H = 22` **一致** ——
        不一致就会出现"翻页翻一半"（露出半条）。

   ★★ 一行放不下表头了 ⇒ 把"已入驻 N 位商家"做成**轮播的第一条**，
      信息不丢（这条其实是最有说服力的一条）。
   ══════════════════════════════════════════════════════════════════════ */
.joinbar{display:flex;align-items:center;gap:7px;height:40px;
  padding:0 14px;margin:10px 16px 12px;border-radius:999px;
  background:linear-gradient(135deg,#FFF3EC,#FFF9F5);border:1px solid #FFD9C4;
  box-shadow:0 2px 8px rgba(255,92,40,.07);overflow:hidden}
/* 左侧固定标签：小圆点 + "实时动态" + 竖分隔线 */
.jbdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#FF5C28;
  box-shadow:0 0 0 0 rgba(255,92,40,.5);animation:jbpulse 1.8s infinite}
@keyframes jbpulse{
  0%{box-shadow:0 0 0 0 rgba(255,92,40,.5)}
  70%{box-shadow:0 0 0 7px rgba(255,92,40,0)}
  100%{box-shadow:0 0 0 0 rgba(255,92,40,0)}
}
.jblb{flex:0 0 auto;font-size:12.5px;font-weight:700;color:#C2410C;white-space:nowrap}
.jbsep{flex:0 0 auto;width:1px;height:14px;background:#FFD3BA}
/* 轮播视口：★ 固定高度 + 裁切，一次只露一条 */
.jbroll{position:relative;flex:1 1 auto;min-width:0;height:22px;overflow:hidden}
/* 轨道：靠 transform 整体上移，翻完再把位置归零（无缝） */
.jbtrack{will-change:transform}
.jbi{display:flex;align-items:center;gap:5px;height:22px;font-size:12.5px;color:#7A6A62;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jbi b{color:#C2410C;font-weight:700}
.jbi .jt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.jbi .jc{flex:0 0 auto;font-size:11px;color:#B29A8E;font-variant-numeric:tabular-nums}
/* 第一条是"已入驻 N 位"的统计（不是某个人的动态，配色略淡以示区分） */
.jbi.stat{color:#A9877A;gap:0}
.jbi.stat b{color:#C2410C}
.jbi.mine{color:#B23A0E}
.jbi.mine b{color:#C2410C}
.jbi.me{color:#C2410C}
.jbi.me b{color:#E11D48}
.jbi i{font-style:normal;font-size:11px;background:#FF5C28;color:#fff;
  border-radius:4px;padding:0 4px;margin-left:2px;flex:0 0 auto}
/* 上翻动画：0.45s 滑上去一条（22px = 一条的高度，与 JB_H 一致） */
.jbtrack.roll{transition:transform .45s cubic-bezier(.4,.1,.25,1)}
@media (prefers-reduced-motion: reduce){
  .jbtrack.roll{transition:none}
  .jbdot{animation:none}
}


/* ── 金币页 ───────────────────────────────────────────────────── */
.coinhero{background:linear-gradient(135deg,#FF7A45,#FF9A5C);border-radius:16px;
  padding:20px 18px;color:#fff;box-shadow:0 6px 18px rgba(255,92,40,.22)}
.coinhero .ch1{display:flex;align-items:baseline;gap:7px}
.coinhero .cn{font-size:40px;font-weight:800;line-height:1;letter-spacing:-1px}
.coinhero .cu{font-size:14px;opacity:.9}
.coinhero .ch2{font-size:13.5px;opacity:.95;margin-top:9px}
.coinhero .ch3{display:flex;justify-content:space-between;font-size:12px;opacity:.9;
  margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.25)}
.coinhero .ch3 b{font-weight:700}
.cdbig{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;color:#C2410C}
.cplus{color:#07A05A;font-weight:700;font-size:15px}
.cminus{color:#8A929E;font-weight:600;font-size:15px}

/* 金币榜 */
/* ══════════════════════════════════════════════════════════════════════
   ★★★ 金币榜（2026-10-08 修显示 bug）
   ----------------------------------------------------------------------
   【原来的三个 bug，同一个根因：**类名撞车 + 自己配自己**】
     ① `.rk1.rk1{background:#FFD700}` —— 这是个**空条件**！
        复合选择器只检查"元素是否匹配 .rk1"，同一个类写两遍不会要求
        它在 class 属性里出现两次 ⇒ **`.rk1.rk1` 完全等价于 `.rk1`** ⇒
        它把 4~10 名的徽章**全涂成了金色**（本该是灰色）。
     ② `.rk1.rk2` —— 但 `.rk2` **同时是"名字列"的类名**（`flex:1;font-size:13.5px`）
        ⇒ 第 2 名的徽章被 `flex:1` 从 22px **撑成 124px**，字号也跟着变 13.5px。
     ③ `.rk1.rk3` —— 同理，`.rk3` 是"金币列"（`font-size:14px`）
        ⇒ 第 3 名徽章字号被顶到 14px。
    实测（手机视口 390）第 2 行徽章宽 124px、第 3 行字号 14px，肉眼很明显。

   【现在的做法】
     · 名次色**不再复用 rk1/rk2/rk3**，改用 `.rk1.gold / .silver / .bronze`
       （这三个词全项目没被占用，也不会跟列名撞）
     · `.rk1` 基础色 = 灰色（4 名及以后走这里）
     · 顺手加防护：名字列可截断（`min-width:0` + 省略号），
       金币列不压缩（`flex:0 0 auto`）—— 长昵称/大数字都不会把布局顶坏
   ══════════════════════════════════════════════════════════════════════ */
.rankbox{padding:6px 0}
.rk{display:flex;align-items:center;gap:10px;padding:8px 14px}
.rk.me{background:#FFF6F1}
/* 名次徽章：固定 22px 圆，不许被 flex 拉伸/压缩 */
.rk1{flex:0 0 22px;width:22px;height:22px;border-radius:50%;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
  background:#F0F3F7;color:#8A929E}
/* 前三名：金 / 银 / 铜（★ 类名不能再用 rk2/rk3，那是列名） */
.rk1.gold{background:#FFD700;color:#7A5200}
.rk1.silver{background:#C8D0DA;color:#465060}
.rk1.bronze{background:#F0C9A8;color:#7A4A20}
/* 名字列：可伸缩 + 可截断（长昵称不顶坏右边的金币） */
.rk2{flex:1 1 0%;min-width:0;font-size:13.5px;color:#1A1D23;
  display:flex;align-items:center;gap:6px}
.rk2 .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk2 i{font-style:normal;font-size:11px;color:#98A0AE;flex:0 0 auto}
.rktag{font-size:11px;line-height:15px;background:#FF5C28;color:#fff;
  border-radius:4px;padding:0 4px;flex:0 0 auto}
/* 金币列：不压缩（数字永远完整显示） */
.rk3{flex:0 0 auto;font-size:14px;font-weight:700;color:#C2410C;
  font-variant-numeric:tabular-nums}

/* ── 消息 ─────────────────────────────────────────────────────── */
.ntbar{display:flex;align-items:center;justify-content:space-between;font-size:13px;
  background:#FFF6F1;border:1px solid #FFE3D5;border-radius:11px;padding:10px 13px;margin:0 0 10px}
.ntbar b{color:#C2410C}
.nt{background:#fff;border-radius:12px;padding:13px 14px;margin-bottom:9px;
  box-shadow:var(--sh);position:relative}
.nt.unread{border-left:3px solid #FF5C28}
.nt .nt1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nt .nt1 b{font-size:14px;font-weight:600;color:#1A1D23}
.nt .nt1 .dot{width:7px;height:7px;border-radius:50%;background:#FF5C28;display:inline-block}
.nt .nt2{font-size:13px;color:#5A6272;line-height:1.7;margin-top:6px}
.nt .nt3{display:flex;align-items:center;font-size:11.5px;color:#98A0AE;margin-top:8px}
.nt .nt3 .lnk{margin-left:auto}
.nttag{font-size:10.5px;border-radius:5px;padding:2px 6px;background:#F0F3F7;color:#5A6272;
  flex:0 0 auto}
.nttag.tregister{background:#FFF1E9;color:#C2410C}
.nttag.torder{background:#E8F5EC;color:#07A05A}
.nttag.tcoin{background:#FFF9E6;color:#A87B00}
.pgn{font-size:12.5px;color:#8A929E;align-self:center}

/* ── 分享海报 ─────────────────────────────────────────────────── */
/* ★ "生成海报"入口按钮（详情页） */
.pbtn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;
  padding:11px;border-radius:11px;border:1.5px dashed #FFC9AE;color:#C2410C;
  font-size:13.5px;font-weight:600;background:#FFFBF7;cursor:pointer}
.pbtn:active{background:#FFF1E9}
.pbtn span{font-size:16px}
.pwait{padding:30px 16px;text-align:center;color:#8A929E;font-size:13px;line-height:1.7}
/* ★★★ 海报图：**等比例缩放**（用户在 2026-10-08 明确要求）
   `max-width:100%` + `max-height:100%` 配 `object-fit:contain` ⇒
   宽高比恒定、永不溢出、缩放后仍能看清；
   ★ 不要再写 `width:100%` —— 那会让高度按 750:1280 撑开，必然顶破弹窗（踩过）。 */
.posterimg{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:10px;display:block;
  box-shadow:0 4px 16px rgba(0,0,0,.16)}
/* ★ 按钮行样式统一在文件上方 `.modal.wide` 那一段里定义（带 width:100% 的修复），
   这里**不要再写一份** —— 重复定义会互相覆盖，改了一处忘了另一处就很难查。 */

/* ══════════════════════════════════════════════════════════════════
   v1.7.0 新增（2026-10-08 第 5 批）
   · 登录页"账号检测"提示
   · 演示账号"正在使用中"弹窗
   · 佣金台账 / 提现 / 贴牌 / 系统设置
   ══════════════════════════════════════════════════════════════════ */

/* ── 登录页：输入完整账号后的实时检测结果 ───────────────────────── */
.lu-notice{margin-top:6px;font-size:12px;line-height:1.6;border-radius:8px;padding:7px 9px}
.lu-notice.ok{background:#E9F8F1;color:#0E9F6E;border:1px solid #C9EEE0}
.lu-notice.bad{background:#FFF1F1;color:#C02929;border:1px solid #FFD5D5}

/* ── 演示账号"正在使用中"弹窗 ─────────────────────────────────── */
.dkmsg{font-size:13.5px;color:#5A6272;line-height:1.75}
.dkmeta{margin-top:8px;font-size:12.5px;color:#8A929E}
.dkmeta b{color:#C2410C}
.dkttl{margin:14px 0 8px;font-size:13px;color:#3C4454;font-weight:600}
.dkgrid{display:flex;flex-wrap:wrap;gap:8px}
.dkchip{display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:112px;padding:8px 10px;border-radius:10px;background:#F4F7FB;
  border:1px solid #E3E9F2;font-size:13px;font-weight:600;color:#3C4454;
  font-family:ui-monospace,Menlo,Consolas,monospace;cursor:pointer}
.dkchip:active{background:#E8EFF8}
.dkchip i{font-style:normal;font-family:inherit;font-size:11px;font-weight:400;color:#8A929E}
.dkhint{margin-top:10px;font-size:12px;color:#8A929E}
.dkhint b{color:#C2410C}

/* ── 演示账号横幅（"我的"页面顶部）──────────────────────────────── */
.demoflag{margin:12px 0 0;padding:10px 12px;border-radius:11px;font-size:12.5px;
  line-height:1.7;background:#FFF9E6;border:1px solid #F5E2A8;color:#8A6A00}
.demoflag b{color:#A87B00}

/* ── 佣金台账（大数字那块）──────────────────────────────────────── */
.comm-hero{background:linear-gradient(135deg,#FF6A3D,#FF8A5B);color:#fff;border:0}
.comm-hero .ch-l{font-size:12.5px;opacity:.9}
.comm-hero .ch-n{font-size:34px;font-weight:800;letter-spacing:-.5px;line-height:1.25;margin:2px 0 8px}
.comm-hero .ch-b{display:flex;gap:14px;font-size:12px;opacity:.95}
.comm-hero .ch-b b{font-weight:700}
.comm-hero .ch-t{margin-top:10px;padding-top:9px;font-size:11.5px;opacity:.92;
  border-top:1px solid rgba(255,255,255,.28)}
.comm-hero .ch-t b{font-weight:700}

/* 提现卡片里的收款/手续费说明 */
.wdmeta{margin-top:8px;font-size:12.5px;color:#8A929E;line-height:1.75}
.wdmeta b{color:#C2410C}

/* ── 贴牌头像选择 ─────────────────────────────────────────────── */
.logo-pick{display:flex;align-items:center;gap:12px;cursor:pointer}
.lpv{width:62px;height:62px;flex:0 0 auto;border-radius:14px;background:#F4F7FB;
  border:1.5px dashed #D6DEE9;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#B4BECA;overflow:hidden}
.lpv img{width:100%;height:100%;object-fit:cover;display:block}
.lpb{display:flex;flex-direction:column;gap:3px}
.lpb b{font-size:13.5px;color:#3C4454}
.lpb span{font-size:11.5px;color:#98A0AE}

/* ── 设置页的"当前生效"一行 ───────────────────────────────────── */
.currline{margin-top:10px;padding-top:9px;border-top:1px solid #EEF1F6;
  font-size:12px;color:#8A929E;word-break:break-all}
.currline b{color:#E11D48;font-weight:600}
.currline .lnk{color:#2E6BE6;cursor:pointer}

/* 小号按钮（贴牌权限列表里的"授权/收回"，不能占满整行） */
.btn.sm{padding:6px 14px;font-size:12.5px;line-height:1.4;border-radius:9px}

/* 贴牌：带图片的站点 logo（默认是 emoji，贴牌后是圆角方图） */
.hero .lg.brand{padding:0;overflow:hidden;background:#fff}
.hero .lg.brand img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 手动复制兜底弹窗（自动复制被浏览器禁掉时用）───────────────────
   ★ 关键：textarea 必须**真的能选中**（用户要长按复制），
     所以不能隐藏、不能 readonly 到无法选取（readonly 可以选，disabled 不行）。 */
.mcp{font-size:13px;color:#5A6272;line-height:1.75;margin-bottom:10px}
.mcta{width:100%;box-sizing:border-box;border:1px solid #DFE5EE;border-radius:10px;
  padding:10px 11px;font-size:12.5px;line-height:1.75;color:#3C4454;background:#F8FAFC;
  font-family:ui-monospace,Menlo,Consolas,monospace;resize:none}
.mcta:focus{outline:none;border-color:#FFB79B;background:#fff}

/* ══════════════════════════════════════════════════════════════════
   ★★★ 左上角「上级头像」（2026-10-08 用户要求）
   「挑选模版 这个页面 左上角 显示一个头像 是上级头像。
     点击头像弹出来的是上级联系方还有二维码，还有电话号码的弹窗」
   ★ 尺寸取 32px：和 nav 里其它 .ico 的视觉重量相当，
     又够大能点（>=28px 是手指能点准的下限）。
   ★ 用 `position:relative` + 右下角小圆点做"可点"的暗示 ——
     光一个头像很多人不知道能点。 */
.nav .navav{width:32px;height:32px;flex:0 0 32px;margin-right:2px;border-radius:50%;
  overflow:hidden;cursor:pointer;position:relative;
  box-shadow:0 1px 5px rgba(0,0,0,.14);transition:transform .14s}
.nav .navav:active{transform:scale(.9)}
.nav .navav img{width:100%;height:100%;object-fit:cover;display:block}
.nav .navav .fc{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;color:#fff;font-size:14px;font-weight:700}
/* 右下角小绿点 = "他在线/可以点" */
.nav .navav::after{content:'';position:absolute;right:-1px;bottom:-1px;
  width:9px;height:9px;border-radius:50%;background:#22C55E;border:1.5px solid #fff}

/* 弹窗里的头像（联系人卡片用） */
.ctc .cav{width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.ctc .cav img{width:100%;height:100%;object-fit:cover;display:block}
.ctc .cav span{color:#fff;font-size:19px;font-weight:700}

/* 用户名邮箱密码等：注册页的"获取验证码"按钮（短信验证码注册） */
.codewrap{display:flex;gap:8px;align-items:stretch}
.codewrap input{flex:1;min-width:0}
.codesend{flex:0 0 auto;padding:0 14px;height:44px;border-radius:11px;border:1px solid #FFD3BA;
  background:#FFF6F1;color:#C2410C;font-size:13px;font-weight:600;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;justify-content:center;min-width:104px}
.codesend:active{background:#FFEBE0}
.codesend.off{background:#F2F4F7;border-color:#E3E8EF;color:#A7B0BC;cursor:not-allowed}
.codesend.off:active{background:#F2F4F7}