/* ==========================================================================
 * 微圈宝 · 前台「会员中心」样式
 * --------------------------------------------------------------------------
 * 作用域：仅 front/member.html 使用（其它官网页面用 static/site.css）。
 * 为什么不和 site.css 合并：site.css 里已有 .btn / .card / .tk / .chip / .f /
 * .inp / .tabs / .logo / .toast / .stat 等同名类，语义不同，合并会互相污染。
 * 色值令牌与 static/site.css 的 :root 保持一致（品牌绿 #0F9D6C 体系）。
 * 断点：≤1024 平板收窄 / ≤960 转 H5（左侧菜单折叠为抽屉）/ ≤700 表格转卡片 / ≤430 手机小屏
 * ========================================================================== */
/* ==========================================================================
 * 会员中心 v3 · PC / H5 自适应设计稿
 * 顶部：授权后功能一级导航 + 右上角「客服与帮助」+ 会员信息胶囊（头像/姓名/ID）
 * 左侧：分组二级菜单 15 项
 * 内容：工作台 / 发布任务 / 任务列表 / 设备与账号 / 素材库 / 我的授权
 * 配色：沿用官网现有品牌绿令牌，未引入参考站色值
 * ========================================================================== */
:root{
  --brand:#0F9D6C; --brand-dark:#0F6E56; --brand-light:#E6F6EF; --brand-soft:#F2FBF7;
  --bg:#F5F7F8; --card:#fff; --line:#E4E8EB; --line2:#F1F3F5;
  --t1:#1B1B1F; --t2:#6B7078; --t3:#8A9099;
  --warn:#B26B00; --warn-bg:#FFF4E5; --err:#C0392B; --err-bg:#FDECEC;
  --info:#0F6E56; --info-bg:#EAF3EE;
  --p-green:#0F9D6C; --p-blue:#3A7AFE; --p-note:#161823; --p-hand:#FF6600; --p-red:#FF2442;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--t1);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p{margin:0}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D8DCE1;border-radius:8px}

/* ============ 顶部导航 ============ */
.topbar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.tb-in{max-width:1240px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:.2px;flex:0 0 auto}
.logo .ic{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#13B87C,#0F9D6C);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.logo small{display:block;font-size:10.5px;color:var(--t3);font-weight:400;letter-spacing:1px}
.tb-mid{display:flex;gap:3px;margin-left:4px;overflow-x:auto;scrollbar-width:none}
.tb-mid::-webkit-scrollbar{display:none}
.tb-mid a{padding:8px 13px;border-radius:9px;font-size:14px;color:var(--t2);transition:.16s;white-space:nowrap;cursor:pointer}
.tb-mid a:hover{background:var(--line2);color:var(--t1)}
.tb-mid a.on{background:var(--brand-light);color:var(--brand-dark);font-weight:600}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:9px;flex:0 0 auto}
.drop{position:relative}
.ibtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 13px;font-size:13.5px;color:var(--t1);cursor:pointer;transition:.16s;white-space:nowrap}
.ibtn:hover{border-color:var(--brand);color:var(--brand-dark)}
.ibtn .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}
.ucard{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:7px 12px 7px 13px;cursor:pointer;transition:.16s}
.ucard:hover{border-color:var(--brand)}
.ucard .ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#13B87C,#0F9D6C);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ucard .nm{font-size:13.5px;font-weight:600;line-height:1.25;white-space:nowrap;display:block}
.ucard .uid{font-size:11px;color:var(--t3);line-height:1.25;white-space:nowrap;display:block}
.ucard .cr{color:var(--t3);margin-left:1px}
.dpop{position:absolute;right:0;top:calc(100% + 9px);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 16px 44px rgba(15,25,35,.13);padding:7px;display:none;z-index:95}
.drop.open .dpop{display:block;animation:fin .16s ease}
.dpop .hd2{font-size:11px;color:var(--t3);padding:7px 11px 4px;letter-spacing:.6px;font-weight:600}
.dpop .sep{height:1px;background:var(--line2);margin:6px 4px}
.dpop a,.dpop button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:transparent;padding:9px 11px;border-radius:9px;font-size:13.5px;color:var(--t1);cursor:pointer;transition:.14s}
.dpop a:hover,.dpop button:hover{background:var(--line2)}
.dpop a svg,.dpop button svg{stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.dpop .uinfo{display:flex;align-items:center;gap:10px;padding:9px 11px 11px}
.dpop .uinfo .ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#13B87C,#0F9D6C);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dpop .uinfo b{display:block;font-size:14px}
.dpop .uinfo span{font-size:11.5px;color:var(--t3)}
.hamb{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer}

/* ============ 主体两栏 ============ */
.mc{max-width:1240px;margin:0 auto;padding:20px 20px 70px;display:grid;grid-template-columns:212px minmax(0,1fr);gap:20px;align-items:start}
.mc>main{min-width:0}

/* ============ 左侧菜单 ============ */
.side{position:sticky;top:84px}
/* 🔴 v30（2026-10-13）刷新闪烁修复：静态左栏是「全量」渲染的，接口回来后才按后台
   开关隐藏/重排 ⇒ 刷新时用户先看到满满一栏、又眼看着它变少（用户反馈「突然出现
   很多又突然没有」）。做法：<head> 内联脚本给 <html> 加 nv-pending，这里据它把
   左栏藏起来；member.js 的 applyNavCfg 在「接口回来 / 失败 / 2.5s 超时」任一结局
   发生时摘掉该类，左栏一次性按最终状态亮相。
   🔴 用 visibility 不用 display：不改变布局，亮相时不会有第二跳动；
   🔴 内联脚本自带 3 秒强摘兜底 —— member.js 整个没加载也不会永远藏着。 */
.nv-pending .side{visibility:hidden}
.snav{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:7px 8px 9px;max-height:calc(100vh - 104px);overflow-y:auto}
.snav .sgt{font-size:10.5px;color:var(--t3);letter-spacing:1.2px;padding:12px 11px 5px;font-weight:700}
.snav a{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:9px;font-size:13.5px;line-height:1.5;color:var(--t2);transition:.15s;margin-bottom:1px;cursor:pointer}
.snav a svg{flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.snav a:hover{background:var(--line2);color:var(--t1)}
.snav a.on{background:var(--brand-light);color:var(--brand-dark);font-weight:600}
.snav a i{margin-left:auto;font-style:normal;font-size:11px;background:var(--brand);color:#fff;border-radius:20px;padding:1px 7px;font-weight:600}
.snav a i.gray{background:#EDF0F2;color:var(--t2)}
.snav a i.warn{background:var(--warn-bg);color:var(--warn)}
/* 左栏底部：客服与帮助入口区（v4：由顶部下拉并入此处，原 .mc-song 提示条下线） */
.helpbox{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:3px 8px 9px}
.helpbox .sgt{font-size:10.5px;color:var(--t3);letter-spacing:1.2px;padding:10px 11px 5px;font-weight:700}
.helpbox a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;font-size:13px;color:var(--t2);cursor:pointer;transition:.15s;margin-bottom:1px}
.helpbox a:hover{background:var(--line2);color:var(--t1)}
.helpbox a svg{flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.helpbox a>span{flex:1;min-width:0}
.helpbox a .hx{display:flex;align-items:center;gap:7px}
.helpbox a .hx i{font-style:normal;font-size:11px;color:var(--brand-dark);background:var(--brand-light);border-radius:20px;padding:1px 8px;font-weight:600}
/* 卡片标题里的引导小字（发布类型 · 第 1 步） */
.hd h3 .qhint{font-style:normal;font-size:11.5px;font-weight:400;color:var(--t3)}
/* 左栏五个平台入口的小图标（与 16px 线性图标对齐） */
.snav a .pl.xs{width:18px;height:18px;font-size:9px;border-radius:5px}

/* ============ 通用 ============ */
.panel{display:none}
.panel.on{display:block;animation:fin .2s ease}
@keyframes fin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.hd h3{font-size:15px;font-weight:700;display:flex;align-items:center;gap:9px}
.hd h3 .no{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:6px;background:var(--brand-light);color:var(--brand-dark);font-size:11.5px;font-weight:700;flex:0 0 auto}
.hd .r{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sub{font-size:12.5px;color:var(--t2);margin-top:5px;line-height:1.8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:#fff;color:var(--t1);border-radius:10px;padding:9px 17px;font-size:13.5px;cursor:pointer;transition:.18s;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px rgba(15,157,108,.22)}
.btn.pri:hover{background:var(--brand-dark);color:#fff}
.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:8px}
.btn.dark{background:#2A2E33;border-color:#2A2E33;color:#fff}
.btn.dark:hover{background:#171A1E;color:#fff}
.btn.danger{border-color:#F0D2CE;color:var(--err)}
.btn.danger:hover{background:var(--err-bg);border-color:var(--err)}
.btn.line{padding:5px 10px;font-size:12.5px;border-radius:7px}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.tk{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11.5px;white-space:nowrap}
.tk.ok{background:var(--brand-light);color:#0F7A52}
.tk.no{background:#F1F3F5;color:var(--t2)}
.tk.warn{background:var(--warn-bg);color:var(--warn)}
.tk.info{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px #D3E7DD}
.tk.err{background:var(--err-bg);color:var(--err)}
.inp{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 13px;font-size:13.5px;color:var(--t1);outline:none;transition:.16s}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,157,108,.1)}
.inp[readonly]{background:#F8FAFA;color:var(--t2)}
textarea.inp{resize:vertical;line-height:1.75}
select.inp{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7078' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.f label{display:block;font-size:12.5px;color:var(--t2);margin-bottom:6px}
.f label em{font-style:normal;color:var(--t3);font-weight:400;margin-left:5px;font-size:11.5px}
.req:before{content:"*";color:var(--err);margin-right:3px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 18px}
.fgrid .full{grid-column:1/-1}
.hint{font-size:11.5px;color:var(--t3);margin-top:6px;line-height:1.6}
.note{background:#FAFBFC;border:1px dashed var(--line);border-radius:12px;padding:12px 15px;font-size:12.5px;color:var(--t2);line-height:1.8}

/* ============ 平台 ============ */
.pl{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:9px;background:var(--p-green);color:#fff;font-weight:700;line-height:1;width:30px;height:30px;font-size:13px}
.pl.xs{width:20px;height:20px;font-size:9.5px;border-radius:6px}
.pl.sm{width:24px;height:24px;font-size:11px;border-radius:7px}
.pbar{display:flex;gap:9px;flex-wrap:wrap}
.popt{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 15px 9px 11px;cursor:pointer;transition:.17s;min-width:152px}
.popt:hover{border-color:#CFE6DA}
.popt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 2px rgba(15,157,108,.12)}
.popt b{font-size:13.5px;display:block;line-height:1.3}
.popt span{font-size:11px;color:var(--t3);line-height:1.3;display:block}
.popt .ck{margin-left:auto;opacity:0;transition:.15s}
.popt.on .ck{opacity:1}

/* ============ 素材类型标签页 ============ */
.vtabs{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex-wrap:wrap}
.vtabs button{border:none;border-right:1px solid var(--line);background:#fff;padding:9px 20px;font-size:13.5px;color:var(--t2);cursor:pointer;transition:.15s}
.vtabs button:last-child{border-right:none}
.vtabs button:hover{background:#FAFCFB;color:var(--t1)}
.vtabs button.on{background:var(--brand);color:#fff;font-weight:600}
.fold{display:inline-flex;align-items:center;background:var(--brand);color:#fff;font-size:10.5px;border-radius:20px;padding:2px 9px;font-weight:600}
.upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:11px;max-width:640px}
.upbox{aspect-ratio:1;border:1px dashed #CFD6DB;border-radius:11px;background:#FAFBFC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:var(--t3);font-size:12px;transition:.16s}
.upbox:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.uphold{position:relative;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:linear-gradient(135deg,#EAF3EE,#F6FAF8);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.uphold .del{position:absolute;top:5px;right:5px;width:21px;height:21px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;border:none;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.uphold .idx{position:absolute;bottom:5px;left:5px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;border-radius:5px;padding:1px 6px}
.cnt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t3);margin-top:6px}
/* v16（2026-09-30）：评论内容整块已从发布页删除，.cmts / .cmt 一并下线；
   发送时间也不再是「立即 / 定时 / 循环 / 延时发送」四个单选（.radios / .radio / .subcfg 下线），
   改为对齐 App 的发布窗口（.tline / .sw / .wchips / .wtimes / .wweek，见文末 v16 块）。 */

/* ============ 发布账号：多设备 + 多微信 ============ */
/* 🔴 容器一旦限高，flex 列里的 .dev 会被压扁（默认 flex-shrink:1），
   内部微信行被 .dev 的 overflow:hidden 裁掉 —— 表现为「有些微信账号不显示」。
   必须显式关掉子项收缩，限高才会变成真正的滚动。 */
.devbox{display:flex;flex-direction:column;gap:11px}
.devbox>.dev{flex:0 0 auto}
.dev{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;transition:.17s}
.dev:hover{border-color:#D3E7DD}
.dev.off{background:#FBFCFC}
.dev-h{display:flex;align-items:center;gap:11px;padding:11px 15px;background:#FAFCFB;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.dev-h .ic{width:30px;height:30px;border-radius:9px;background:#EEF2F4;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dev-h b{font-size:13.5px}
.dev-h .meta{font-size:11.5px;color:var(--t3)}
.dev-h .r{margin-left:auto;display:flex;align-items:center;gap:9px}
.dot-on{width:7px;height:7px;border-radius:50%;background:var(--brand);display:inline-block;margin-right:4px;box-shadow:0 0 0 3px rgba(15,157,108,.15)}
.dot-off{width:7px;height:7px;border-radius:50%;background:#C2C8CE;display:inline-block;margin-right:4px}
.wxrow{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--line2);cursor:pointer;transition:.14s}
.wxrow:last-child{border-bottom:none}
.wxrow:hover{background:#F8FBF9}
.wxrow.on{background:var(--brand-soft)}
.wxrow.dis{cursor:not-allowed;opacity:.55}
.wxrow .cb{width:18px;height:18px;border-radius:5px;border:1.6px solid #C4CAD0;flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:.15s}
.wxrow.on .cb{background:var(--brand);border-color:var(--brand)}
.wxrow.on .cb:after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.wxrow .avax{width:30px;height:30px;border-radius:8px;background:#EAF3EE;color:var(--brand-dark);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.wxrow .who{flex:1;min-width:0}
.wxrow .who b{font-size:13.5px;display:block;line-height:1.35}
.wxrow .who span{font-size:11.5px;color:var(--t3);display:block;line-height:1.35}
.wxrow .stat{font-size:11.5px;color:var(--t2);text-align:right;white-space:nowrap}
.selbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid var(--line2)}
.selbar .sum{font-size:13px;color:var(--t2)}
.selbar .sum b{color:var(--brand-dark);font-weight:700}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chipx{display:inline-flex;align-items:center;gap:6px;background:var(--brand-light);color:var(--brand-dark);border-radius:20px;padding:3px 10px;font-size:12px}
.chipx button{border:none;background:transparent;color:var(--brand-dark);cursor:pointer;font-size:13px;line-height:1;padding:0}

/* ============ 概览 ============ */
.hero{background:linear-gradient(120deg,#0F6E56,#0F9D6C 58%,#13B87C);color:#fff;border-radius:18px;padding:24px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden;margin-bottom:14px}
.hero:after{content:"";position:absolute;right:-90px;top:-80px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero .l{position:relative;z-index:2;flex:1;min-width:220px}
.hero h2{font-size:20px;font-weight:800;letter-spacing:-.3px}
.hero .mid{margin-top:7px;font-size:12.5px;opacity:.93;display:flex;gap:15px;flex-wrap:wrap}
.hero .mid b{font-weight:700}
.hero .acts{position:relative;z-index:2;display:flex;gap:9px;flex-wrap:wrap}
.hero .btn.gho{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff}
.hero .btn.gho:hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px}
.kpi b{display:block;font-size:26px;font-weight:800;color:var(--brand-dark);letter-spacing:-.6px;line-height:1.25}
.kpi span{font-size:12.5px;color:var(--t2)}
.kpi i{font-style:normal;display:block;font-size:11.5px;color:var(--t3);margin-top:2px}
.g2{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.rowl{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.rowl:last-child{border-bottom:none}
.rowl .ico{width:34px;height:34px;border-radius:10px;background:var(--line2);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rowl .tx{flex:1;min-width:150px}
.rowl .tx b{font-size:13.5px;display:block;line-height:1.4}
.rowl .tx span{font-size:12px;color:var(--t2);line-height:1.5}
.rowl .r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ============ 表格 ============ */
.fbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:15px 20px;border-bottom:1px solid var(--line2);background:#fff;border-radius:var(--radius) var(--radius) 0 0}
.fitem{display:flex;align-items:center;gap:8px}
.fitem label{font-size:12.5px;color:var(--t2);white-space:nowrap}
.fitem .inp{width:145px;padding:7px 11px;font-size:12.5px}
.fbar .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tbwrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tbwrap.nobd{border:none;border-radius:0}
.tb{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:12px 13px;background:#FAFBFC;font-size:12px;color:var(--t3);font-weight:500;border-bottom:1px solid var(--line);white-space:nowrap}
th.c{text-align:center}
td{padding:12px 13px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
td.c{text-align:center}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFCFB}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.money{font-weight:700;color:var(--brand-dark)}
.ops{display:inline-flex;gap:5px}
/* 任务表：收紧列宽，让 8 列在 1240 容器里整表装得下（不依赖横向滚动） */
#taskTable th,#taskTable td{padding:11px 8px}
#taskTable th:first-child,#taskTable td:first-child{padding-left:14px}
#taskTable th:last-child,#taskTable td:last-child{padding-right:14px}
#taskTable .ops{gap:4px}
#taskTable .btn.line{padding:5px 8px}
.pager{display:flex;align-items:center;gap:9px;justify-content:flex-end;padding:13px 20px;font-size:12.5px;color:var(--t2);border-top:1px solid var(--line2)}
.pager button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--t2)}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ============ 授权 / 套餐 ============ */
.lic{border:1px solid var(--line);border-radius:13px;padding:15px 17px;margin-bottom:11px;background:#fff;transition:.18s}
.lic:hover{border-color:#D6EADD;box-shadow:0 4px 16px rgba(15,157,108,.08)}
.lic:last-child{margin-bottom:0}
.lic .top{display:flex;align-items:center;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.lic .top b{font-size:14.5px}
.lic .top .st{margin-left:auto}
.lic .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px 18px;font-size:13px}
.lic .kv span{display:block;color:var(--t2);font-size:11.5px;margin-bottom:2px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.pcard{border:1px solid var(--line);border-radius:13px;padding:15px;background:#fff;cursor:pointer;transition:.18s;position:relative}
.pcard:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(15,157,108,.1)}
.pcard.on{border:2px solid var(--brand);background:var(--brand-soft);padding:14px}
.pcard .rec{position:absolute;top:-11px;right:13px;background:var(--brand);color:#fff;font-size:10.5px;border-radius:20px;padding:2px 10px;font-weight:600}
.pcard h4{font-size:14px;font-weight:700}
.pcard .p{margin:9px 0 3px;display:flex;align-items:baseline;gap:3px}
.pcard .p b{font-size:25px;font-weight:800;color:var(--brand-dark);letter-spacing:-.8px}
.pcard .p span{font-size:12px;color:var(--t2)}
.pcard .old{font-size:11.5px;color:var(--t3);text-decoration:line-through}
.pcard ul{list-style:none;margin:9px 0 0;padding:0;border-top:1px dashed var(--line);padding-top:8px}
.pcard li{font-size:12.5px;color:var(--t2);padding:3px 0 3px 17px;position:relative}
.pcard li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700}
.switch{display:inline-flex;background:var(--line2);border-radius:22px;padding:4px;margin-bottom:16px}
.switch button{border:none;background:transparent;padding:7px 19px;border-radius:20px;font-size:13px;cursor:pointer;color:var(--t2)}
.switch button.on{background:#fff;color:var(--brand-dark);font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.orderbar{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:16px;padding-top:15px;border-top:1px solid var(--line2)}
.orderbar .sum{font-size:13px;color:var(--t2)}
.orderbar .sum b{color:var(--brand-dark);font-size:18px;font-weight:800}
.actbox{background:var(--brand-soft);border:1px solid #CDEBDE;border-radius:14px;padding:17px 19px}
.prof{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.prof .avabox{width:84px;flex:0 0 auto;text-align:center}
.prof .ava2{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#13B87C,#0F9D6C);color:#fff;font-size:31px;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
.prof .ava2 .msk{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;font-size:11.5px;font-weight:400}
.prof .ava2:hover .msk{opacity:1}
.prof .avabox span{font-size:11.5px;color:var(--t3);display:block;margin-top:6px}

/* ============ 吸底提交条 ============ */
.submitbar{position:sticky;bottom:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--radius);padding:13px 20px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.submitbar .l{font-size:12.5px;color:var(--t2)}
.submitbar .r{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}

/* ============ 弹窗 / toast ============ */
.mask{position:fixed;inset:0;background:rgba(16,22,28,.44);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
.mask.show{display:flex}
.modal{background:#fff;border-radius:16px;width:100%;max-width:520px;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(10,20,30,.3)}
.modal .mh{display:flex;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.modal .mh h3{font-size:15.5px;font-weight:700}
.modal .mh button{margin-left:auto;border:none;background:transparent;font-size:20px;color:var(--t3);cursor:pointer;line-height:1}
.modal .mb{padding:18px 20px}
.modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;position:sticky;bottom:0;background:#fff}
.toast{position:fixed;left:50%;bottom:36px;transform:translateX(-50%) translateY(14px);background:rgba(24,30,36,.94);color:#fff;font-size:12.5px;padding:10px 18px;border-radius:10px;z-index:200;opacity:0;pointer-events:none;transition:.24s;max-width:88vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1024px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .tb-mid{display:none}
  .hamb{display:flex}
  /* 顶栏收窄：客服只留图标，用户只留头像（避免 390px 溢出） */
  .ibtn{padding:8px 10px}
  .ibtn .lbl,.ibtn .cv{display:none}
  .ucard{padding:6px 11px;border-radius:10px}
  .ucard .uid,.ucard .cr{display:none}   /* 首字头像已移除：H5 只留姓名，别剩个空圆 */
  .tb-in{gap:10px;padding:0 14px}
  .mc{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 60px}
  .side{position:sticky;top:64px;z-index:50;min-width:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:12px}
  .snav{background:transparent;border:none;border-radius:0;padding:0 14px;max-height:none;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
  .snav::-webkit-scrollbar{display:none}
  .snav .sgt{display:none}
  .snav a{flex:0 0 auto;border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:13px;white-space:nowrap;background:#fff;margin-bottom:0}
  .snav a.on{border-color:var(--brand);background:var(--brand-light)}
  .snav a i{display:none}
  .mc-song{display:none}
  .helpbox{display:none}   /* H5 顶部横条状态不显示，点汉堡进抽屉后才有 */
  .panel{padding:0 14px}
  .hero{padding:19px;border-radius:16px}
  .hero h2{font-size:17.5px}
  .hero .acts{width:100%}
  .hero .acts .btn{flex:1}
  .kpis{gap:9px}
  .kpi{padding:12px 13px}
  .kpi b{font-size:21px}
  .g3{grid-template-columns:1fr}
  .card{padding:15px;margin-bottom:11px}
  .fbar{padding:12px 14px;gap:9px;border-radius:var(--radius)}
  .fitem{width:100%}
  .fitem .inp{width:100%}
  .fbar .r{width:100%;margin-left:0}
  .fbar .r .btn{flex:1}
  .vtabs{width:100%}
  .vtabs button{flex:1 1 auto;padding:8px 12px;font-size:12.5px}
  .popt{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .orderbar .btn,.orderbar .sum{width:100%}
  .orderbar .btn{justify-content:center}
  .submitbar{padding:11px 14px}
  .submitbar .l{width:100%}
  .submitbar .r{width:100%;margin-left:0}
  .submitbar .r .btn{flex:1}
  .dpop{position:fixed;left:14px;right:14px;top:auto;bottom:14px;min-width:0}
}
@media (max-width:430px){
  .logo small{display:none}
  .logo{font-size:14.5px;gap:8px}
  .logo .ic{width:28px;height:28px;border-radius:8px}
  .tb-in{padding:0 11px}
}
@media (max-width:700px){
  .tb{overflow:visible}
  table{min-width:0}
  table thead{display:none}
  table tr{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px;background:#fff}
  table td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:none;padding:5px 0;white-space:normal;text-align:right}
  table td:before{content:attr(data-l);color:var(--t2);font-size:12.5px;flex:0 0 auto;text-align:left}
  table td.hide:before{content:""}
  .tbwrap{border:none;background:transparent;border-radius:0}
  .pager{border-top:none;justify-content:center}
  .ops{flex-wrap:wrap;justify-content:flex-end}
  .upgrid{grid-template-columns:repeat(3,1fr);gap:9px}
  .wxrow .stat{display:none}
  .rowl .r{width:100%}
  .selbar>span:last-child{width:100%;margin-left:0!important}
  .selbar>span:last-child .btn{flex:1}
}


/* ==========================================================================
 * H5 汉堡抽屉（≤960px）
 * 顶部一级模块在 H5 隐藏后，靠这个抽屉进入全部 15 项分组菜单：
 * 点汉堡 → 左侧菜单条展开成全屏分组菜单；点任一菜单项自动收起。
 * ========================================================================== */
@media (max-width:960px){
  .side.open{position:fixed;left:0;right:0;top:64px;bottom:0;z-index:70;background:#fff;
    border-bottom:none;padding:8px 14px 30px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .side.open .snav{display:block;overflow:visible;padding:0;background:transparent;border:none;max-height:none}
  .side.open .snav .sgt{display:block;font-size:10.5px;letter-spacing:1.2px;padding:14px 11px 5px}
  .side.open .snav a{flex:none;display:flex;border:none;border-radius:9px;padding:10px 11px;
    font-size:14px;margin-bottom:1px;white-space:normal;background:transparent}
  .side.open .snav a.on{background:var(--brand-light)}
  .side.open .snav a i{display:inline-block}
  .side.open .mc-song{display:block;margin-top:16px}
  .side.open .helpbox{display:block;margin-top:16px}
  .hamb.on{background:var(--brand-light);border-color:var(--brand)}
  body.menu-open{overflow:hidden}
}

/* ==========================================================================
 * v5 追加：授权状态条 / 当前平台条 / 购买步骤 / 版本对比 / 绑定大输入框
 * ========================================================================== */
/* 左栏条目行高：v8 起收敛到基础规则一处定义（原 v5 那条全局 padding 已删，
   否则会盖掉基础样式，导致 16 项在 900px 视口里滚动溢出） */
.snav a i{margin-left:auto}
.helpbox a{padding:10px 12px}

/* 授权状态条 */
.licbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:13px;padding:14px 17px;margin-bottom:14px;border:1px solid var(--line);background:#fff}
.licbar[hidden]{display:none}
.licbar.none{background:var(--brand-soft);border-color:#CDEBDE;box-shadow:0 0 0 3px rgba(15,157,108,.07)}
.licbar.warn{background:#FFF9EF;border-color:#F0DCB8}
.licbar .lt{min-width:0;flex:1}
.licbar .lt b{display:block;font-size:14.5px;margin-bottom:2px;color:var(--brand-dark)}
.licbar.warn .lt b{color:var(--warn)}
.licbar .lt span{font-size:12.5px;color:var(--t2);line-height:1.6}
.licbar .acts{display:flex;gap:9px;flex-wrap:wrap}

/* 🔴 v21：原「当前平台抬头」条（微 / 绿泡泡 / 朋友圈 · 已上线）已整体下线 ——
   HTML、本文件里的定义、以及文末 v16 块里的 .platnow 规则一并删除，
   全文不再存在任何 .platnow 样式（页面顶部改为直接进「任务类型」切换条，见文末 v21 块）。 */

/* 我的授权：引导卡 */
.guide{display:flex;align-items:center;gap:15px;flex-wrap:wrap;background:var(--brand-soft);border:1px solid #CDEBDE;border-radius:13px;padding:16px 18px;margin-bottom:14px}
.guide .gt{flex:1;min-width:0}
.guide .gt .t{display:block;font-size:15px;color:var(--brand-dark);margin-bottom:4px}
.guide .gt span{font-size:12.5px;color:var(--t2);line-height:1.75}
.guide .gt span b{display:inline;font-size:inherit;color:var(--brand-dark);margin:0}
.guide .ga{display:flex;gap:9px;flex-wrap:wrap}
p.sub b.g{color:var(--brand-dark)}

/* 购买：三步流程 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:2px 0 16px}
.steps .s{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.steps .s.on{border-color:var(--brand);background:var(--brand-soft)}
.steps .s b{flex:0 0 auto;width:21px;height:21px;border-radius:50%;background:var(--line2);color:var(--t2);font-size:11.5px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.steps .s.on b{background:var(--brand);color:#fff}
.steps .s span{font-size:13px;font-weight:600;color:var(--t1);line-height:1.35}
.steps .s span em{display:block;font-style:normal;font-size:11.5px;color:var(--t3);font-weight:400;margin-top:2px}

/* 购买：平台 / 版本选择 */
.pick{margin-bottom:15px}
.plab{font-size:12.5px;color:var(--t1);font-weight:600;margin-bottom:8px}
.plab em{font-style:normal;font-weight:400;color:var(--t3);margin-left:8px;font-size:12px}
.pchips{display:flex;gap:8px;flex-wrap:wrap}
.pchips button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 17px;font-size:13px;color:var(--t2);cursor:pointer;transition:.15s;font-family:inherit}
.pchips button:hover{border-color:#CFE6DA;color:var(--t1)}
.pchips button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark);font-weight:600}

/* 购买：版本对比表 */
table.cmpt{width:100%}
table.cmpt td{vertical-align:top;font-size:12.5px}
table.cmpt td:first-child{color:var(--t1);font-weight:600;white-space:nowrap}
table.cmpt td.hi,table.cmpt th.hi{background:var(--brand-soft);color:var(--brand-dark)}
table.cmpt td b{color:var(--brand-dark)}

/* 绑定：大输入框 */
.bindbox{background:var(--brand-soft);border:1px solid #CDEBDE;border-radius:13px;padding:20px}
.bindbox .bt{font-size:13px;color:var(--brand-dark);font-weight:600;margin-bottom:11px}
.bindbox .brow{display:flex;gap:11px;flex-wrap:wrap}
.inp.big{font-size:16px;letter-spacing:1.5px;padding:13px 15px;font-family:ui-monospace,Menlo,Consolas,monospace}
.btn.big{padding:13px 26px;font-size:14.5px}
.bindbox .bmsg{font-size:12.5px;color:var(--brand-dark);margin-top:10px;min-height:17px}
/* 绑定失败 / 需要客户核对时的提示（2026-10-07）：默认是品牌绿的成功色，出错转红 */
.bindbox .bmsg.err{color:var(--err)}
.bindbox .bhelp{margin-top:15px;padding-top:14px;border-top:1px dashed #CDEBDE;font-size:12.5px;color:var(--t2);display:flex;align-items:center;gap:9px;flex-wrap:wrap}

@media (max-width:960px){
  .steps{grid-template-columns:1fr}
  .licbar .acts{width:100%}
  .licbar .acts .btn{flex:1}
  .guide .ga{width:100%}
  .guide .ga .btn{flex:1}
}
@media (max-width:620px){
  .bindbox{padding:15px}
  .inp.big{font-size:15px}
  .btn.big{width:100%}
  /* 平台按钮：不能 flex:1 等分（每格仅约 60px，「绿泡泡」会被拆成两行）；
     改为按内容宽度排、放不下就整体换行，并强制不拆字 */
  .pchips button{flex:0 0 auto;padding:8px 12px;white-space:nowrap}
  /* 卡片标题：标题右侧的提示语改为独占一行，避免把标题挤成两行（如「绑定授权/码」） */
  .hd h3{flex-wrap:wrap;row-gap:1px}
  .hd h3 .qhint{flex:0 0 100%}
}

/* ==========================================================================
 * v6 追加
 * 1. 左栏重新排版：分组标题带图标 + 分组之间加分隔线，子项统一缩进对齐到标题文字
 * 2. 顶部「服务与帮助」（第一版 .ibtn + .dpop 样式）
 * 3. 购买授权码页套餐卡对齐 App「联系客服」版式 + 购买数量 + 应付
 * 备注：左栏底部 .helpbox 的样式已随入口移除而不再使用（保留定义不影响渲染）。
 * ========================================================================== */

/* ---------- 1. 左栏：分组标题带图标 ---------- */
.snav .sgt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t1);
  letter-spacing:.3px;font-weight:700;line-height:1.4;padding:11px 10px 5px}
.snav .sgt .gi{width:20px;height:20px;border-radius:6px;background:var(--brand-light);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.snav .sgt .gi svg{width:12px;height:12px;stroke:var(--brand-dark);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snav .sgt:first-child{padding-top:5px}
.snav .sgt:not(:first-child){margin-top:4px;border-top:1px solid var(--line2);padding-top:10px}
.snav>a{padding-left:38px}   /* 与分组标题文字左对齐：10(内边距)+20(图标)+8(间距) */

/* ---------- 2. 顶部服务与帮助 ---------- */
.ibtn .hi{flex:0 0 auto}
.ibtn .lbl{font-weight:500}
.dpop .wxn{font-style:normal;font-size:11.5px;color:var(--brand-dark);background:var(--brand-light);
  border-radius:20px;padding:1px 8px;font-weight:600;margin-left:2px}

/* ---------- 3. 购买授权码：版本说明条 ----------
   v12 已删除 .vbars / .vb —— 「本地版 = 素材存本机…」这句话原本在
   版本说明条里说一遍、又在套餐卡绿头里说一遍。现统一下沉进卡片第二行，只说一次。 */

/* ---------- 3. 购买授权码：套餐卡（绿头 + 大价格 + 右侧套餐名） ---------- */
.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plans .pcard{padding:0;overflow:hidden;border-radius:13px;background:#fff}
.plans .pcard:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(15,157,108,.12)}
.plans .pcard.on{padding:0;border:2px solid var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(15,157,108,.12)}
.plans .pcard .ph{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:linear-gradient(90deg,#12A874,#0F9D6C);color:#fff;font-size:12.5px;font-weight:600;line-height:1.4}
.plans .pcard .ph span{flex:1;min-width:0}
.plans .pcard .ph .rd{width:18px;height:18px;border-radius:50%;border:1.8px solid rgba(255,255,255,.9);
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.plans .pcard.on .ph .rd{background:#fff;border-color:#fff}
.plans .pcard.on .ph .rd:after{content:"";width:9px;height:5px;border-left:2.2px solid var(--brand);
  border-bottom:2.2px solid var(--brand);transform:rotate(-45deg) translate(0,-1px)}
.plans .pcard .pb{display:flex;align-items:center;gap:12px;padding:14px 15px}
.plans .pcard .pr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.plans .pcard .pr b{font-size:28px;font-weight:800;color:var(--brand-dark);letter-spacing:-1px;line-height:1.1}
.plans .pcard .pr i{font-style:normal;font-size:12px;color:var(--t3);white-space:nowrap}
.plans .pcard .lb{margin-left:auto;font-size:15px;font-weight:700;white-space:nowrap}

/* ---------- 3. 购买授权码：数量 + 应付 ---------- */
.qty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:12px;padding:12px 15px;background:#fff}
.qty .qt{flex:1;min-width:150px}
.qty .qt b{font-size:13.5px;display:block;line-height:1.4}
.qty .qt span{font-size:11.5px;color:var(--t3);display:block;line-height:1.4}
.qty .qn{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.qty .qn button{width:40px;height:38px;border:none;background:#FAFBFC;color:var(--t1);font-size:17px;line-height:1;cursor:pointer;transition:.15s}
.qty .qn button:hover{background:var(--brand-light);color:var(--brand-dark)}
.qty .qn b{width:52px;text-align:center;font-size:15px;font-weight:700}
.paybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
  padding:13px 15px;border:1px solid #CDEBDE;background:var(--brand-soft);border-radius:13px}
.paybar .pd{flex:1;min-width:0}
.paybar .pd span{display:block;font-size:11.5px;color:var(--t3);line-height:1.4}
.paybar .pd b{display:block;font-size:13.5px;color:var(--t1);line-height:1.45}
.paybar .pv{text-align:right;flex:0 0 auto}
.paybar .pv span{display:block;font-size:11.5px;color:var(--t3);line-height:1.4}
.paybar .pv b{font-size:26px;font-weight:800;color:var(--brand-dark);letter-spacing:-.8px;line-height:1.15}

@media (max-width:1024px){
  .plans{grid-template-columns:1fr}
}
@media (max-width:960px){
  /* 顶部横条模式：恢复胶囊内边距，分组标题在横条里不显示 */
  .snav a{padding:6px 13px}
  .snav .sgt{display:none}
  /* 抽屉展开后：图标版分组标题 + 子项缩进 */
  .side.open .snav .sgt{display:flex;align-items:center;gap:8px;font-size:12px;
    color:var(--t1);letter-spacing:.3px;font-weight:700;padding:14px 10px 6px}
  .side.open .snav a{padding:10px 11px 10px 38px}
}
@media (max-width:700px){
  .plans .pcard .pr b{font-size:24px}
  .plans .pcard .lb{font-size:14px}
  .paybar .pv b{font-size:22px}
  /* v27：版本对比表窄屏转卡片。旧方案「保持表格 + 小字号」在三列挤一行时
     确实分不清本地版 / 云端版（用户实测反馈「显示不是很合理」）；
     改成每个对比项一张卡：标题一行 + 「本地版：…」「云端版：…」两行，
     行首标签取 HTML 里的 data-label（PC / H5 两个购买页均已加）。
     thead 隐藏 —— 卡片的行首标签已承担列名职责。 */
  table.cmpt thead{display:none}
  table.cmpt,table.cmpt tbody,table.cmpt tr,table.cmpt td{display:block;width:100%}
  table.cmpt tr{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px;background:#fff}
  table.cmpt td{border:none;padding:5px 0;font-size:12.5px;line-height:1.65;white-space:normal;text-align:left}
  table.cmpt td:first-child{width:auto;font-weight:700;color:var(--t1);margin-bottom:2px}
  table.cmpt td:not(:first-child):before{content:attr(data-label);display:inline-block;min-width:58px;color:var(--t2);font-weight:600}
  table.cmpt td.hi{background:transparent;color:var(--brand-dark)}
}
@media (max-width:430px){
  .plans .pcard .pb{flex-wrap:wrap;row-gap:4px}
}

/* ==========================================================================
 * v7 追加（2026-09-30）
 * 1. 顶部右上角「服务与帮助」下拉 → 单个「联系客服」链接（跳 service.html）
 * 2. 左栏「帮助」外链项（紧接账号设置下面，样式与面板项一致，只是不带高亮）
 * 3. 我的授权码：购买 / 绑定 / 我的授权 三合一，顶部 tab 切换
 * 备注：原 .dpop .wxn（下拉里的客服微信号 chip）已随下拉下线，定义保留不影响渲染。
 * ========================================================================== */

/* ---------- 1. 顶部「联系客服」：<a> 当按钮用 ---------- */
.tb-right a.ibtn{text-decoration:none}
.tb-right a.ibtn:hover{border-color:var(--brand);color:var(--brand-dark)}

/* ---------- 2. 左栏「帮助」外链 ---------- */
.snav a.ext{color:var(--t2)}
.snav a.ext:hover{background:var(--line2);color:var(--t1)}
/* 外链项尾部的「前往」小箭头（区分内部面板项与外链，不能用 <i>，那是徽标样式） */
.snav a.ext svg.out{margin-left:auto;width:12px;height:12px;opacity:.42}

/* ---------- 3. 我的授权码：顶部 tab ---------- */
.ltabs{display:flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:5px;margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.ltabs::-webkit-scrollbar{display:none}
.ltabs button{flex:0 0 auto;border:none;background:transparent;border-radius:9px;
  padding:9px 18px;font-size:13.5px;color:var(--t2);font-family:inherit;cursor:pointer;
  transition:.16s;white-space:nowrap}
.ltabs button:hover{background:var(--line2);color:var(--t1)}
.ltabs button.on{background:var(--brand);color:#fff;font-weight:600;
  box-shadow:0 4px 12px rgba(15,157,108,.24)}
/* 三个子页互斥显示（切 tab 只切显示，不动 DOM 结构，页内表单状态不丢） */
.licview{display:none}
.licview.on{display:block}

@media (max-width:700px){
  .ltabs button{flex:1 0 auto;padding:9px 12px;font-size:13px}
}

/* ==========================================================================
 * v8 追加（2026-09-30）
 * 1. 左栏「发布任务」五个平台入口合并为 1 项，平台改到发布页顶部切换条（.platnow / .ps-tabs）
 * 2. 左栏新增「服务与帮助」分组：在线客服（面板）/ 授权码价格 / 帮助中心 / 常见问题 / 提交工单
 * 备注：.platnow 的旧子类（.pn/.b/.pd/.ph 直系）已随只读条下线，定义改写为 .ps-head 系列。
 * ========================================================================== */

/* ---------- 在线客服面板（p-service） ---------- */
/* v11：.kftop / .kflab / .kfid 已删 —— 客服号不再在会员中心里展示，
   改成跳「联系客服」页(service.html)，客服号只在那一页维护。 */
.kfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:17px;
  border-top:1px solid var(--line);padding-top:16px}
.kfacts div b{display:block;font-size:16px;color:var(--brand-dark);letter-spacing:-.2px}
.kfacts div span{font-size:12px;color:var(--t3);line-height:1.6}

/* ---------- 「更多帮助」入口列表 ---------- */
.hlinks{display:grid;gap:8px;margin-top:2px}
.hlinks a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);
  border-radius:11px;transition:.15s}
.hlinks a:hover{border-color:var(--brand);background:var(--brand-soft)}
.hlinks a b{flex:0 0 auto;min-width:84px;font-size:13.5px;color:var(--t1)}
.hlinks a em{flex:1;font-style:normal;font-size:12.5px;color:var(--t3);line-height:1.6}
.hlinks a i{flex:0 0 auto;font-style:normal;font-weight:700;color:var(--brand)}

@media (max-width:700px){
  .kfacts{grid-template-columns:1fr;gap:9px}
  .kfacts div{display:flex;align-items:baseline;gap:10px}
  .kfacts div b{font-size:14.5px}
  .hlinks a{align-items:flex-start;flex-wrap:wrap;gap:4px 10px}
  .hlinks a b{min-width:0}
  .hlinks a em{flex:1 0 100%;order:3}
  .hlinks a i{order:2}
  /* 发布平台切换条：手机端改成等宽自适应网格（flex 换行会出现 4+1 这种不匀称的排布），
     并收紧胶囊。必须写在本节 .ps-tabs 基础规则之后，否则会被上面的基础规则盖掉。 */
  .ps-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:7px}
  .ps-tabs button{padding:7px 6px;font-size:12.5px;gap:6px;border-radius:8px;
    justify-content:center;width:100%}
  .ps-head{margin-bottom:9px;gap:6px}
  .ps-head .ph{font-size:12px}
}

/* ==========================================================================
 * 我的工单（服务与帮助）
 * 状态四档配色沿用全站基调：待处理=橙、处理中=品牌绿、已解决=浅绿、已关闭=灰。
 * 全站禁蓝，这里不出现任何蓝色。
 * ========================================================================== */
.tklist{display:grid;gap:10px}
.tkrow{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;transition:.15s}
.tkrow:hover{border-color:#CFE6DC;background:var(--brand-soft)}
.tkhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tkno{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  font-weight:700;color:var(--t2);letter-spacing:.2px}
.tktag{font-size:11.5px;color:var(--brand-dark);background:var(--brand-light);
  border-radius:6px;padding:2px 8px;white-space:nowrap}
.tkst{font-size:11.5px;border-radius:20px;padding:2px 10px;white-space:nowrap;font-weight:700}
.tkst.pend{background:var(--warn-bg);color:var(--warn)}
.tkst.doing{background:var(--brand-light);color:var(--brand-dark)}
.tkst.done{background:#EAF8F1;color:#0B7A55}
.tkst.off{background:var(--line2);color:var(--t2)}
.tkpri{font-size:11.5px;border-radius:6px;padding:2px 7px;background:var(--err-bg);
  color:var(--err);font-weight:700}
.tktime{margin-left:auto;font-size:12px;color:var(--t3);white-space:nowrap}
.tktitle{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--t1);line-height:1.65}
.tkreply{margin-top:9px;padding:11px 13px;border-radius:10px;background:var(--brand-light)}
.tkreply b{display:block;font-size:12px;color:var(--brand-dark);margin-bottom:3px}
.tkreply span{font-size:12.5px;color:#1E4438;line-height:1.8}
.tkmore{margin-top:9px}
.tkmore summary{cursor:pointer;font-size:12.5px;color:var(--t3);list-style:none;outline:none}
.tkmore summary::-webkit-details-marker{display:none}
.tkmore summary:before{content:'▸ '}
.tkmore[open] summary:before{content:'▾ '}
.tkmore p{margin:7px 0 0;font-size:12.5px;color:var(--t2);line-height:1.85;
  white-space:pre-wrap;word-break:break-word}
.tkempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 16px;
  text-align:center;border:1px dashed var(--line);border-radius:12px;background:var(--brand-soft)}
.tkempty b{font-size:14px;color:var(--t1)}
.tkempty p{margin:0;font-size:12.5px;color:var(--t3);line-height:1.85;max-width:560px}

@media (max-width:700px){
  .tktime{margin-left:0;flex:1 0 100%}
  .tkrow{padding:12px 13px}
}

/* 360~430 这类极窄屏：工单号 + 类型 + 状态 + 加急 必须留在同一行，
   否则行头会被拆成三行（加急单独一行很难看）。靠缩间距与字号把它们压回一行。 */
@media (max-width:430px){
  .tkhead{gap:6px}
  .tkno{font-size:11px;letter-spacing:0}
  .tktag,.tkst,.tkpri{font-size:11px}
  .tktag{padding:2px 7px}
  .tkst{padding:2px 8px}
  .tkpri{padding:2px 6px}
}

/* ==========================================================================
 * v10 追加（2026-09-30）：全站信息密度收敛
 * 触发原因：内部页面纵向太长，发布页 2145px（900px 视口下 2.4 屏）。
 * 做法：只收敛间距与控件尺寸（padding / margin / gap / 字号），
 *      不改信息结构、不改配色、不改任何交互入口。
 * 结构上仅一处调整：发布页「发布类型 + 基础信息」并排成一行（.duo），
 *      以及「发布账号」的设备列表改为区域内滚动（#p-pub .devbox）。
 * 注意：本块在文件最末，同权重规则会覆盖前面的定义；移动端写在本块的媒体查询里。
 * ========================================================================== */

/* ---------- 1. 基础密度（全站生效） ---------- */
.mc{padding:16px 20px 56px;gap:18px}
.card{padding:14px 17px;margin-bottom:10px}
.hd{margin-bottom:11px;gap:9px}
.hd h3{font-size:14.5px;gap:8px}
.hd h3 .no{width:20px;height:20px;font-size:11px}
.sub{margin-top:4px;line-height:1.7}
.hint{margin-top:5px}
.f label{margin-bottom:5px}
.fgrid{gap:11px 16px}
.inp{padding:9px 12px}
textarea.inp{line-height:1.62}
.note{padding:10px 13px}
.btn{padding:8px 15px}
.btn.sm{padding:5px 11px}
.tk{padding:2px 9px}

/* ---------- 2. 总览 ---------- */
.hero{padding:20px 22px;margin-bottom:12px}
.kpis{gap:11px;margin-bottom:11px}
.kpi{padding:13px 15px}
.kpi b{font-size:24px}
.g2{gap:12px}
.g3{gap:11px}
.rowl{padding:10px 0;gap:11px}
.rowl .ico{width:31px;height:31px}

/* ---------- 3. 表格 / 工具条 ---------- */
th{padding:10px 12px}
td{padding:10px 12px}
#taskTable th,#taskTable td{padding:9px 8px}
.fbar{padding:12px 17px;gap:10px}
.pager{padding:11px 17px;gap:8px}

/* ---------- 4. 我的授权 / 套餐 / 绑定 ---------- */
.licbar{padding:12px 15px;margin-bottom:11px}
.lic{padding:13px 15px;margin-bottom:9px}
.lic .top{margin-bottom:9px}
.lic .kv{gap:9px 16px}
.ltabs{padding:4px;margin-bottom:12px}
.ltabs button{padding:8px 16px}
.guide{padding:14px 16px;margin-bottom:11px}
.guide .gt .t{font-size:14.5px}
.steps{gap:10px;margin:2px 0 13px}
.steps .s{padding:10px 12px}
.pick{margin-bottom:12px}
.plab{margin-bottom:6px}
.switch{margin-bottom:13px}
.switch button{padding:6px 17px}
.popt{padding:8px 13px 8px 10px;min-width:140px}
.plans{gap:11px}
.pcard{padding:13px}
.pcard .p b{font-size:23px}
.pcard ul{margin-top:8px;padding-top:7px}
.pcard li{padding:2px 0 2px 16px}
.pbar{gap:8px}
.pchips button{padding:7px 15px}
.bindbox{padding:16px}
.inp.big{padding:11px 14px}
.btn.big{padding:11px 22px}
.actbox{padding:14px 16px}
.prof{gap:16px}
.prof .avabox,.prof .ava2{width:64px}
.prof .ava2{height:64px;font-size:24px}
.prof .ava2 .msk{font-size:10.5px}
/* 头像右侧的表单要撑满剩余宽度：.fgrid 作为 flex 项默认按 max-content 收缩，
   会退化成 1 列窄表单、右侧留一大片空白（auto-fit 在一列时的固有宽度仅 ~230px） */
.prof .fgrid{flex:1;min-width:0}
.orderbar{margin-top:12px;padding-top:12px;gap:11px}

/* ---------- 5. 发布页 ---------- */
/* v16：平台抬头 / 发送时间的版式统一写在文末 v16 块，这里不再有平台切换条 */
/* 发布类型 + 基础信息并排：两块合计只占一行高度（窄屏自动回单列） */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
.duo>.card{margin-bottom:10px}
.duo .hd{margin-bottom:8px}
/* 两块并排后每块只有约 450px：v16 起「基础信息」只剩任务名称一个字段（已删任务分组），
   用 .f.full 占满整行即可 */
.duo .fgrid{grid-template-columns:1fr;gap:10px 12px}
.duo .vtabs{border-radius:9px}
.duo .vtabs button{padding:7px 12px;font-size:13px}
@media (max-width:1080px){.duo{grid-template-columns:1fr}}
.vtabs button{padding:8px 17px}
/* 素材缩略图网格：格子略收，九宫格区不再占掉一屏 */
.upgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
#contTxt{min-height:104px}
/* 设备 / 微信列表过长：改为卡片内部滚动，卡片不再被列表撑高 */
#p-pub .devbox{max-height:322px;overflow-y:auto;gap:9px;padding-right:3px}
.dev-h{padding:9px 14px;gap:9px}
.dev-h .ic{width:27px;height:27px}
.dev-h b{font-size:13px}
.wxrow{padding:8px 14px;gap:9px}
.selbar{margin-top:11px;padding-top:11px;gap:10px}
.submitbar{padding:11px 16px}

/* ---------- 6. 服务与帮助 / 工单 ---------- */
.kftop{margin-top:3px}
.kfid{font-size:26px}
.kfacts{margin-top:13px;padding-top:13px;gap:9px}
.kfacts div b{font-size:15px}
.hlinks{gap:7px}
.hlinks a{padding:10px 13px;gap:10px}
.tklist{gap:8px}
.tkrow{padding:11px 13px}
.tkhead{gap:7px}
.tkreply{margin-top:7px;padding:9px 11px}
.tkempty{padding:22px 14px;gap:8px}

/* ---------- 7. 移动端密度（写在最后，覆盖上面的桌面值） ---------- */
@media (max-width:960px){
  .mc{padding:0 0 48px}
  .card{padding:13px 14px;margin-bottom:9px}
  .hd{margin-bottom:10px}
  .kpis{gap:8px}
  .kpi{padding:11px 12px}
  .kpi b{font-size:21px}
  .rowl{padding:9px 0}
  .submitbar{padding:10px 14px}
  table tr{padding:10px 12px;margin-bottom:8px}
  table td{padding:4px 0}
  .pcard{padding:12px}
  .kfid{font-size:23px}
  .kfacts{gap:8px;margin-top:11px;padding-top:11px}
  .hlinks a{padding:9px 12px}
  /* 窄屏不做并排（1080 以下回单列）；设备列表仍限高，但给足可视行数，避免嵌套滚动太窄 */
  #p-pub .devbox{max-height:300px}
}

/* 窄屏（≤700）：类型标签改成 3 列网格（5 个标签 flex 换行会排成 4+1，很难看）；
   并排区里的字段回单列，避免 390px 下输入框只剩 ~150px、任务名被截断 */
@media (max-width:700px){
  .duo .vtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .duo .vtabs button{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px 4px;font-size:12.5px}
  .duo .vtabs button:nth-child(3n){border-right:none}
  .duo .vtabs button:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:620px){
  .duo .fgrid{grid-template-columns:1fr}
}


/* ==========================================================================
 * v11 追加 · 页脚（与官网首页页脚同构；会员中心自带令牌，不引 site.css）
 * ========================================================================== */
.foot{background:#141A1F;color:#9AA3AC;padding:44px 0 0;font-size:13px}
.foot .fwrap{max-width:1240px;margin:0 auto;padding:0 20px}
.foot .fg{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:26px;padding-bottom:30px}
.foot h5{color:#fff;font-size:13.5px;font-weight:600;margin-bottom:11px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:4px 0;font-size:12.5px}
.foot li a{color:#9AA3AC;transition:.16s}
.foot li a:hover{color:var(--brand)}
.foot .about p{font-size:12.5px;line-height:1.9;color:#8B949D;margin-top:11px;max-width:286px}
.foot .flogo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.2px}
.foot .flogo .ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#13B87C,#0F9D6C);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.foot .flogo small{display:block;font-size:10px;color:#6E777F;font-weight:400;letter-spacing:1px}
.foot .wxbox{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 13px;margin-top:12px;
  font-size:12.5px;color:#fff;transition:.16s}
.foot .wxbox:hover{background:rgba(15,157,108,.2);border-color:var(--brand)}
.foot .wxbox svg{width:14px;height:14px;stroke:#4CD39B;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.foot .fbot{border-top:1px solid rgba(255,255,255,.09);padding:15px 0 20px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#6E777F}
.foot .fbot span{line-height:1.7}

/* v11 追加 · 在线客服卡：底部「去联系客服」行动区 */
.kfgo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:17px;
  padding-top:16px;border-top:1px solid var(--line)}
.kfgo .kftip{font-size:12.5px;color:var(--t3);line-height:1.7;flex:1;min-width:180px}

@media (max-width:1024px){
  .foot .fg{grid-template-columns:1fr 1fr 1fr;gap:22px}
}
@media (max-width:700px){
  .foot{padding-top:34px}
  .foot .fg{grid-template-columns:1fr 1fr;gap:18px 20px}
  .foot .about{grid-column:1/-1}
  .foot .about p{max-width:none}
  .foot .fbot{padding:13px 0 18px}
  .kfgo .btn{width:100%}
}

/* ==========================================================================
 * v12 追加 · 购买授权码：套餐卡紧凑化（2026-09-30）
 *   旧版式 = 绿色渐变头条（「月度 · 素材存本机，单机使用」）+ 价格区 + 右侧套餐名
 *            → 三层结构，且「月度」说两遍、版本说明说两遍（头部 + 上面的 .vbars）。
 *   新版式 = 单层卡片、两行：
 *            ① 单选圈 + 套餐名 · 天数
 *            ② 大价格 + 版本说明
 *            → 每张 245px 压到 167px（−32%），绿色只留给选中态，
 *              4 张卡不再是 4 条绿头，选中那 1 张一眼看得出来。
 *   ⚠️ 本块必须放在文件末尾：靠源码顺序覆盖前面同特异性的 .plans/.pcard 定义，
 *      所以窄屏断点也必须在本块内重写一遍，否则会被上面的旧断点规则盖住。
 * ========================================================================== */
.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.plans .pcard{padding:13px 15px;overflow:visible;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;transition:.16s;position:relative}
.plans .pcard:hover{border-color:#BFDCCE;box-shadow:0 4px 12px rgba(15,157,108,.09)}
.plans .pcard.on{padding:13px 15px;border:1px solid var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 2px rgba(15,157,108,.15)}

/* 第一行：单选圈 + 套餐名 · 天数 */
.plans .pcard .ph{display:flex;align-items:center;gap:9px;padding:0;background:none;
  color:var(--t1);font-size:13.5px;font-weight:700;line-height:1.35}
.plans .pcard .ph .rd{order:-1;width:17px;height:17px;border-radius:50%;
  border:1.8px solid #C9D8D1;background:#fff;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;transition:.16s}
.plans .pcard:hover .ph .rd{border-color:var(--brand)}
.plans .pcard.on .ph .rd{border-color:var(--brand);background:var(--brand)}
.plans .pcard.on .ph .rd:after{content:"";width:8px;height:4.5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:rotate(-45deg) translate(0,-1.5px)}
.plans .pcard .ph em{font-style:normal;font-weight:500;font-size:12px;color:var(--t3)}

/* 第二行：大价格 + 版本能力说明 */
.plans .pcard .pb{display:flex;align-items:baseline;gap:10px;padding:0;margin-top:5px;
  flex-wrap:wrap;row-gap:2px}
.plans .pcard .pb .pr{display:flex;align-items:baseline;gap:3px;flex:0 0 auto;min-width:0}
.plans .pcard .pb .pr b{font-size:27px;font-weight:800;color:var(--brand-dark);
  letter-spacing:-1px;line-height:1.05}
.plans .pcard .pb .lb{margin-left:0;font-size:12.5px;font-weight:400;color:var(--t2);
  white-space:nowrap;text-align:left}

@media (max-width:1024px){
  .plans{grid-template-columns:1fr}
}
@media (max-width:700px){
  .plans .pcard{padding:12px 13px}
  .plans .pcard.on{padding:12px 13px}
  .plans .pcard .pb .pr b{font-size:24px}
  .plans .pcard .pb .lb{font-size:12px}
}

/* ==========================================================================
 * v13 追加 · 账号总览（2026-09-30）
 * --------------------------------------------------------------------------
 * ① 顶部统计条 4 格 → 6 格，且每格变成可点链接（直达对应面板）；
 * ② 授权到期提醒条从页面顶部合并进「我的授权」卡内部；
 * ③ 数字口径全部由 member.js 的 renderStats() 写回，HTML 里不再写死。
 * 🔴 对外契约：容器 class="kpis"、每格 class="kpi"、钩子 id（kTask/kToday/kPosted/
 *    kWx/kDev/kLic + 各自的 *Sub）、#licBar 的位置都要保持 —— 改动前先看 member.js。
 * ========================================================================== */

/* ---------- ① 统计条：6 格 ---------- */
.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.kpis .kpi{display:block;text-decoration:none;color:inherit;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.kpis .kpi:hover{border-color:#BFE3D5;box-shadow:0 4px 14px rgba(15,157,108,.09)}
.kpis .kpi:active{transform:translateY(1px)}
.kpis .kpi:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.kpis .kpi b{white-space:nowrap}
.kpis .kpi span,.kpis .kpi i{display:block;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- ② 授权提醒条：只活在「我的授权」卡里 ---------- */
/* 卡片只有右半栏宽，横排会把说明文字挤成窄条 → 改成「说明在上、按钮在下」的竖排 */
.card .licbar{display:flex;flex-direction:column;align-items:stretch;gap:10px;
  margin-bottom:12px;border-radius:11px;padding:12px 14px}
/* 🔴 必须补这条：.card .licbar(0,2,0) 和 .licbar[hidden](0,2,0) 同权重，
   本块写在文件末尾会反超，导致「授权正常」时隐藏不掉、卡头下留 26px 空档。 */
.card .licbar[hidden]{display:none}
.card .licbar .lt b{font-size:13.5px}
.card .licbar .lt span{font-size:12px}
.card .licbar .acts{gap:8px}
.card .licbar .acts .btn{padding:6px 12px}

@media (max-width:1240px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .kpi b{font-size:20px}
}

/* ==========================================================================
 * v14 追加 · 购买授权码：平台条 + 套餐卡（2026-09-30）
 * --------------------------------------------------------------------------
 * ① 平台条：纯文字 → 「平台图标 + 名称 + 已绑定授权码数」胶囊（数字由 member.js
 *    的 renderPlatCounts() 从 LIC 写入，与「我的授权」同源）。
 * ② 套餐卡：两行 → 四行信息卡，四列横排：
 *      ① 套餐名「月卡·本地版」 + 右上角勾选圆标
 *      ② 大价格 + 天数
 *      ③ 灰字「绿泡泡 · 本地版（月卡）」
 *      ④ 能力标签「数据存本机 / 可跨设备下发」
 *    勾选圆标按用户指定：未选 = 空心灰圈，选中 = 实心绿勾（绿边 / 浅绿底同步）。
 * 🔴 本块必须留在文件末尾：靠源码顺序压掉前面同特异性的 .pchips / .plans 规则；
 *    ⚠️ 窄屏断点也要在本块里重写一遍（@media 不提高特异性），否则被上面的旧断点盖住。
 * ========================================================================== */

/* ---------- ① 平台条 ---------- */
.pchips{gap:9px}
.pchips button{display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 7px;border-radius:11px;font-size:13px}
.pchips button .pl.xs{width:22px;height:22px;font-size:10px;border-radius:7px}
.pchips button b{font-weight:600;font-size:13px;color:var(--t2)}
.pchips button.on b{color:var(--brand-dark)}
.pchips button .n{font-style:normal;font-size:11.5px;font-weight:600;line-height:1;
  min-width:20px;padding:4px 5px;border-radius:6px;background:#F1F3F5;color:#8A9199;
  text-align:center;transition:.15s}
.pchips button.on .n{color:var(--brand-dark)}
.pchips button .n.zero{opacity:.72}

/* ---------- ② 套餐卡：四列信息卡 ---------- */
.plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plans .pcard{display:flex;flex-direction:column;align-items:stretch;
  padding:14px 15px 15px;border-radius:12px;border:1px solid var(--line);
  background:#fff;cursor:pointer;transition:.16s;position:relative}
.plans .pcard:hover{border-color:#BFDCCE;box-shadow:0 4px 12px rgba(15,157,108,.09)}
.plans .pcard.on{border:1px solid var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 2px rgba(15,157,108,.15)}

/* 第一行：套餐名 + 右上角勾选圆标 */
.plans .pcard .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0;background:none;color:var(--t1);font-size:13.5px;font-weight:700;line-height:1.35}
.plans .pcard .ph b{font-weight:700;min-width:0}
.plans .pcard .ph .rd{order:0;width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  border:1.8px solid #C9D8D1;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;transition:.16s}
.plans .pcard:hover .ph .rd{border-color:var(--brand)}
.plans .pcard.on .ph .rd{border-color:var(--brand);background:var(--brand)}
.plans .pcard.on .ph .rd:after{content:"";width:9px;height:5px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;
  transform:rotate(-45deg) translate(0,-1.5px)}

/* 第二行：大价格 + 天数 */
.plans .pcard .pb{display:block;padding:0;margin-top:10px}
.plans .pcard .pb .pr{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;row-gap:2px}
.plans .pcard .pb .pr b{font-size:30px;font-weight:800;color:var(--brand-dark);
  letter-spacing:-1px;line-height:1.05}
.plans .pcard .pb .pr em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--t3)}

/* 第三行：平台 · 版本（周期） */
.plans .pcard .pz{margin-top:7px;font-size:12.5px;color:var(--t2);line-height:1.4}

/* 第四行：能力标签 */
.plans .pcard .cap{align-self:flex-start;margin-top:11px;font-size:12px;font-weight:600;
  color:var(--brand-dark);background:var(--brand-soft);border-radius:7px;
  padding:4px 9px;line-height:1.2;white-space:nowrap}
.plans .pcard.on .cap{background:#fff}

@media (max-width:1240px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .plans{grid-template-columns:1fr}
  .plans .pcard{padding:13px 14px}
  .plans .pcard.on{padding:13px 14px}
  .plans .pcard .pb .pr b{font-size:26px}
  .pchips button{padding:6px 9px 6px 6px;gap:6px}
  .pchips button .pl.xs{width:20px;height:20px}
}

/* ==========================================================================
 * v15 追加 · 会员中心拆页 + 手机底部菜单 + 账号总览统计大卡（2026-09-30）
 * --------------------------------------------------------------------------
 * ① .statcard —— 账号总览原来 6 个独立小格，合并成「一张大卡内分 6 格」；
 * ② .bnav     —— 手机/平板底部菜单，样式对齐 App 底部栏（白卡圆角 22 / 图标 22 /
 *                 选中品牌绿加粗 / 中央「发布任务」白圆套绿圆上浮）；
 * ③ .ltabs a  —— 授权三页 tab 由 <button> 改成真链接后的样式补齐；
 * ④ .licacts / .secrow —— 从 JS 模板里的内联样式抽出来，方便统一改。
 * ========================================================================== */

/* ---------- ① 账号总览：6 个统计参数合并进一张大卡 ---------- */
.statcard{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:16px}
.statcard .st{display:flex;flex-direction:column;gap:3px;padding:15px 14px;
  text-decoration:none;color:inherit;border-left:1px solid var(--line2);transition:background .15s}
.statcard .st:first-child{border-left:0}
.statcard .st:hover{background:var(--brand-soft)}
.statcard .st b{font-size:27px;line-height:1.1;font-weight:800;color:var(--brand-dark);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.statcard .st span{font-size:13px;font-weight:600;color:var(--t1)}
.statcard .st i{font-style:normal;font-size:11.5px;color:var(--t3);line-height:1.35}
@media (max-width:1240px){
  .statcard{grid-template-columns:repeat(3,minmax(0,1fr))}
  .statcard .st:nth-child(3n+1){border-left:0}
  .statcard .st:nth-child(n+4){border-top:1px solid var(--line2)}
}
@media (max-width:640px){
  .statcard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statcard .st:nth-child(3n+1){border-left:1px solid var(--line2)}
  .statcard .st:nth-child(2n+1){border-left:0}
  .statcard .st:nth-child(n+3){border-top:1px solid var(--line2)}
  .statcard .st b{font-size:23px}
}

/* ---------- ③ 授权三页 tab：<button> → 真链接 ---------- */
.ltabs a{flex:0 0 auto;border:none;background:transparent;border-radius:9px;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--t2);text-decoration:none;
  padding:8px 16px;transition:.16s;white-space:nowrap}
.ltabs a:hover{background:var(--line2);color:var(--t1)}
.ltabs a.on{background:var(--brand);color:#fff;font-weight:600}
@media (max-width:700px){
  .ltabs a{flex:1 0 auto;padding:9px 12px;font-size:13px;text-align:center}
}

/* ---------- ④ 授权卡操作行 / 密保行（从内联样式抽出来） ---------- */
.licacts{margin-top:13px;padding-top:12px;border-top:1px solid var(--line2);
  display:flex;gap:9px;flex-wrap:wrap}
.secrow{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.secrow .si{flex:0 0 auto;width:20px;color:var(--t3)}
.secrow .sq{flex:1;color:var(--t2);min-width:0}
.secrow .sa{flex:1;min-width:0}
.secrow .sa b{color:var(--t1)}

/* ---------- ② 底部菜单（参考 App 底部栏，只在 ≤960px 出现） ---------- */
.bnav{display:none}
@media (max-width:960px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .bnav{display:flex;align-items:flex-end;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-radius:22px 22px 0 0;
    box-shadow:0 -6px 22px rgba(16,32,26,.12);
    padding:9px 4px calc(7px + env(safe-area-inset-bottom))}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    gap:3px;text-decoration:none;color:var(--t3);font-size:11px;line-height:1.1;
    padding:4px 2px 2px;position:relative}
  .bnav a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .bnav a.on{color:var(--brand);font-weight:700}
  /* 中央「发布任务」：白圆 + 品牌绿圆 + 纸飞机，整体上浮（对齐 App 的中凸 tab） */
  .bnav a.fab{margin-top:-26px;justify-content:flex-start}
  .bnav a.fab .fb{width:52px;height:52px;border-radius:50%;background:var(--brand);
    border:3px solid #fff;box-shadow:0 6px 16px rgba(15,157,108,.34);
    display:flex;align-items:center;justify-content:center}
  .bnav a.fab .fb svg{width:23px;height:23px;stroke:#fff;stroke-width:1.9}
  /* 顶栏里的「工作台…我的授权」四项在手机上多余（底部菜单已经覆盖），让位给 logo 与用户卡 */
  .tb-mid{display:none}
  /* 发布页底部固定条要给底栏让位，否则被压住 */
  .submitbar{bottom:66px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
 * v16 追加 · 发布页按平台拆成 5 个独立网址 + 发布内容前置 + 发送时间对齐 App
 * （2026-09-30）
 * --------------------------------------------------------------------------
 * ① .platnow —— 由「五平台切换条」改为**纯平台抬头**（.ps-tabs / .pdot 已删，
 *    平台切换走左栏「发布任务」下的 5 个独立网址）
 *    🔴 v21：这条抬头已**整体下线**，本块里的 .platnow 规则已删；见文末 v21 块。
 * ② 发送时间 —— .tline（触发时间 / 延后发送 / 重复周期）+ .sw 开关 +
 *    .wchips 随机窗口 + .wtimes 一天多次 + .wweek 每周，照 App 的发布窗口重做
 * ========================================================================== */

/* ---------- ① 平台抬头（🔴 v21 已整体下线，规则删除，见文末 v21 块） ---------- */

/* ---------- ② 发送时间（对齐 App 的发布窗口） ---------- */
.tline{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line2)}
.tline:first-child{border-top:0}
.tline .tl{flex:0 0 auto;font-size:13.5px;color:var(--t1)}
.tline .tl em{font-style:normal;font-size:11px;color:var(--t3);margin-left:6px}
.tline .tr{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.inp.tmini{width:auto;min-width:120px;padding:7px 10px;font-size:14px;font-variant-numeric:tabular-nums}
.inp.tsel{width:auto;min-width:132px;padding:7px 10px}
/* 🔴 `.tline{display:flex}` 会把 [hidden] 的 UA display:none 覆盖掉（同为 0,1,0，
   作者样式恒胜 UA）→ 必须显式补一条，否则「一天多次」时触发时间那行藏不掉。 */
.tline[hidden],.wbox[hidden]{display:none}
/* 延后发送开关（对齐 App 的 Switch，选中态用品牌绿） */
.sw{width:44px;height:25px;border-radius:13px;border:1px solid #D8DEDB;background:#E4E9E7;
  cursor:pointer;position:relative;padding:0;flex:0 0 auto;transition:background .18s,border-color .18s}
.sw i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);transition:left .18s}
.sw.on{background:var(--brand);border-color:var(--brand)}
.sw.on i{left:21px}
/* 随机窗口（10 / 20 / 30 / 60 分） */
.wbox{margin-top:3px;padding:10px 13px;background:var(--brand-soft);
  border:1px solid #DCEFE6;border-radius:11px}
.wbox .tline{border-top:0;padding:0}
.wbox .hint{margin-top:7px}
.wchips{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.wchips button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:5px 12px;
  font-size:12.5px;color:var(--t1);cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.wchips button:hover{border-color:var(--brand)}
.wchips button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
/* 一天多次：时间点列表 */
.cycbox{margin-top:3px}
.cycbox .hint{margin-top:8px}
.wtimes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wtimes .wt{display:inline-flex;align-items:center;gap:3px}
.wtimes .wt .inp{width:112px;min-width:0;padding:6px 8px}
.wtimes .wx{border:none;background:transparent;color:var(--t3);cursor:pointer;
  font-size:16px;line-height:1;padding:2px 3px}
.wtimes .wx:hover{color:var(--err)}
/* 每周：周一到周日 */
.wweek{display:flex;gap:7px;flex-wrap:wrap}
.wweek button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:5px 13px;
  font-size:12.5px;color:var(--t1);cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.wweek button:hover{border-color:var(--brand)}
.wweek button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

@media (max-width:700px){
  /* 窄屏：标签与控件各占一行，避免「触发时间」被挤成两行 */
  .tline{flex-wrap:wrap;gap:6px 10px}
  .tline .tr{margin-left:0;width:100%;justify-content:flex-start}
  .wbox{padding:9px 11px}
  .wchips,.wweek{justify-content:flex-start}
}

/* ==========================================================================
 * v18 追加 · 会员中心「紧凑化 + 字号与左栏对齐 + 左栏数量角标」（2026-10-07）
 * --------------------------------------------------------------------------
 * 用户原话：「把前台、个人中心、我的授权的界面设置紧凑，宽度和字体大小跟左侧
 *            导航一致；中间『运行中的任务』可以拉长，把这个界面优化一下。」
 * 做法（**只动视觉密度，不碰任何结构 / id / 交互入口**）：
 *   ① 内边距 / 行距 / 间距整体收一档 —— 一屏能看到更多内容
 *   ② 标题层级收到 14px，与左栏导航（13.5px）同一体系
 *   ③ 总览「运行中的任务」栏加宽（1.1fr → 1.2fr）且两卡等高，列表 3 条 → 6 条
 *   ④ 左栏数量角标改由 member.js 的 renderBadges() 填数，为 0 时隐藏
 * 🔴 本块靠**源码顺序**压前面的同特异性规则，所以必须在文件最末；
 *    并且**各自断点要在本块里重写一遍**（@media 不提高特异性，只靠顺序）。
 * ========================================================================== */
.mc{padding:14px 20px 46px;gap:16px}
.card{padding:13px 16px;margin-bottom:10px}
.card>h3{font-size:14px;font-weight:700}
.hd{margin-bottom:10px;gap:8px}
.hd h3{font-size:14px;gap:7px}
.hd h3 .no{width:19px;height:19px;font-size:11px}
.hd .r{gap:7px}
.sub{font-size:12.5px;line-height:1.62;margin-top:4px}
.guide{padding:13px 16px;margin-bottom:10px;gap:12px}
.guide .gt .t{font-size:14px;margin-bottom:3px}
.guide .gt span{font-size:12.5px;line-height:1.62}
.ltabs{padding:3px;margin-bottom:10px}
.ltabs a{padding:7px 14px}
.statcard .st{padding:12px 13px;gap:2px}
.statcard .st b{font-size:23px}
.statcard .st span{font-size:12.5px}
.statcard .st i{font-size:11px}
/* 总览两栏：左栏（运行中的任务）加宽、两卡等高 */
.g2{grid-template-columns:1.2fr 1fr;gap:12px;align-items:stretch}
.rowl{padding:10px 0;gap:11px}
.rowl .ico{width:30px;height:30px;border-radius:9px}
.rowl .tx span{font-size:11.5px}
.lic{padding:12px 14px;margin-bottom:9px}
.lic .top{margin-bottom:8px}
.lic .top b{font-size:13.5px}
.lic .kv{gap:8px 15px;font-size:12.5px}
th{padding:9px 11px}
td{padding:9px 11px}
.fbar{padding:11px 15px;gap:10px}
.pager{padding:10px 15px}
/* 左栏数量角标（v18）：HTML 里只留空壳 <i data-badge="键" hidden>，数字由 JS 填 */
.snav a i[hidden]{display:none}

@media (max-width:1024px){
  .g2{grid-template-columns:1fr}
}
@media (max-width:960px){
  .card{padding:13px 14px;margin-bottom:9px}
  .hd{margin-bottom:10px}
  .rowl{padding:9px 0}
}
@media (max-width:700px){
  .card{padding:12px 13px}
  .guide{padding:12px 13px}
  .sub{font-size:12px}
}

/* ==========================================================================
   空状态（2026-10-07 接库后新增）
   --------------------------------------------------------------------------
   任务 / 设备这一轮改成真读库，所以「一条都没有」是正常状态、不是异常。
   以前靠演示数据占位永远看不到空，现在必须把空状态做完整 ——
   空着不等于坏了，得告诉用户下一步点哪里。
   ========================================================================== */
.empty-cell{ text-align:center !important; padding:38px 18px !important; line-height:1.95; }
.empty-cell b{ display:block; font-size:14px; color:#1B1B1F; margin-bottom:5px; }
.empty-cell > span{ display:block; font-size:12.5px; color:#A6ABB3; margin:0 auto 15px; max-width:430px; }

.empty-box{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:42px 22px;
  border:1px dashed #D5D8DA; border-radius:14px; background:#FBFCFC;
}
.empty-box b{ font-size:14px; color:#1B1B1F; }
.empty-box span{ font-size:12.5px; color:#A6ABB3; max-width:440px; line-height:1.9; }
.empty-box .btn{ margin-top:10px; }

.empty-line{ color:#A6ABB3; font-size:12.5px; }
.empty-line a{ color:#0F6E56; font-weight:600; text-decoration:none; }
.empty-line a:hover{ text-decoration:underline; }

/* 窄屏：表格已切成卡片式，空状态跟着收紧，别把卡片撑太高 */
@media (max-width:960px){
  .empty-cell{ padding:30px 14px !important; }
  .empty-cell b{ font-size:13.5px; }
  .empty-cell > span{ font-size:12px; }
  .empty-box{ padding:32px 18px; }
  .empty-box b{ font-size:13.5px; }
  .empty-box span{ font-size:12px; }
}

/* ==========================================================================
 * v19 追加 · 会员中心（2026-10-07）
 * --------------------------------------------------------------------------
 * 用户原话：「电脑版前台左侧 圆点数量图标都取消掉；/member/index.html 首页右侧
 *            『我的授权』需要显示紧凑，宽度缩减三分之一，不显示平台头像，
 *            这一部分需要重构样式。」
 *
 * ① 左栏数量角标全部取消
 *    生成器 NAV 第 5 元素（badge 键）已全置 None、member.js 的 renderBadges()
 *    及其 4 处调用一并删除 → HTML 里不再输出 <i data-badge>。
 *    本文件里 .snav a i / .snav a i.gray / .snav a i.warn / .snav a i[hidden]
 *    这几条规则随之失效；保留不删（万一将来要恢复），侧栏里已无任何 <i>，
 *    不会产生副作用。
 *
 * ② 总览页两栏比 1.2 : 1 → 2 : 1
 *    右侧「我的授权」栏收窄约三分之一，把省下的宽度让给「运行中的任务」。
 *
 * ③ 「我的授权」小卡重构（去掉平台头像）
 *    两行版：第 1 行「标题 + 状态胶囊」，第 2 行「有效期至 … · 剩余 N 天」。
 *    钩子是 .lic.mini + #licMini —— 只作用于首页这一处，
 *    「我的授权码」页的完整卡（licCardFull → .lic，无 .mini）完全不受影响。
 *
 * 🔴 本块必须留在文件最末：它靠**源码顺序**压前面的同特异性规则。
 * 🔴 断点必须在本块里重写一遍 —— @media 不提高特异性，只靠顺序；
 *    v18 块里的 @media(max-width:1024px){.g2{1fr}} 在下面这条 .g2 之前，
 *    不重写就会被单列规则反压（1024 以下仍然并排）。
 * ========================================================================== */

/* ---------- ② 两栏比：右侧收窄 1/3 ---------- */
.g2{grid-template-columns:2fr 1fr;gap:12px}
@media (max-width:1024px){
  .g2{grid-template-columns:1fr;gap:12px}   /* 与 v18 一致：窄屏回单列，顺序上必须放这里 */
}

/* ---------- ③ 「我的授权」小卡：两行紧凑版，无平台头像 ---------- */
#licMini .lic.mini{padding:10px 12px;margin-bottom:8px;border-radius:11px}
#licMini .lic.mini:last-child{margin-bottom:0}
#licMini .lic.mini .mtop{display:flex;align-items:center;gap:8px;margin-bottom:4px}
#licMini .lic.mini .mtop b{font-size:13px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#licMini .lic.mini .mtop .st{margin-left:auto;flex:0 0 auto;
  font-size:10.5px;padding:2px 8px;line-height:1.5}
#licMini .lic.mini .mline{font-size:11.5px;color:var(--t2);line-height:1.6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#licMini .lic.mini .mline b{color:var(--brand-dark);font-weight:700}

/* 栏变窄后，卡内「购买 / 绑定」两个按钮改成等分两列，别换行成两排 */
.card .licbar .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}

@media (max-width:700px){
  /* 手机端整卡已是单列、宽度足够，按钮恢复自适应排布 */
  .card .licbar .acts{display:flex;grid-template-columns:none}
  #licMini .lic.mini{padding:10px 11px}
}

/* ==========================================================================
 * v21 追加 · 发布页「任务类型」切换条（5 平台全量）+ 平台抬头条下线（2026-10-07）
 * --------------------------------------------------------------------------
 * ① 「平台抬头」条（微 / 绿泡泡 / 朋友圈 · 已上线）**整体下线**
 *    HTML 在 _member_src/sections/p-pub.html；本文件里 3 处 .platnow 定义已删除。
 *    当前平台改由「左栏「发布任务」高亮项 + 顶栏高亮组」表达，页面顶部直接从
 *    任务类型切换条开始，少一层视觉噪音。
 *
 * ② .ttabs —— 发布页顶部的「任务类型」切换条，5 个平台共用
 *    · v20 时只在绿泡泡页里**内联**；v21 起抽到本文件（+ member.js 的 initTaskTabs()），
 *      HTML 由 gen_member_pages.py 的 build_tasktabs() 按平台生成。
 *    · 结构：.tt = 一个任务（.on = 已上线 / .on.sel = 已上线且当前选中 / .off = 未上线），
 *            .ttag = 右上角状态角标（已上线 / 未上线）。
 *            🔴 v25：一个平台可有多个「已上线」任务（如蓝泡泡 t1+t3），故选中态用 .sel 单独标，
 *            不再让所有 .on 都表示「已选中」；未选中的 .on 仍可点 → 切到该任务（见 member.js switchTask）。
 *    · 未上线项点击的提示文案挂在按钮的 data-tip 上 —— 所以 member.js 里那份脚本
 *      完全通用，不需要再维护「平台 → 文案」映射表。
 *    · 各平台有哪些任务，唯一真源 = gen_member_pages.py 的 PUB_TASKS。
 * ========================================================================== */

.ttabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 13px}
.ttabs .tt{position:relative;display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;
  font-size:13.5px;line-height:1;color:var(--t2);cursor:pointer;transition:.15s;font-family:inherit}
.ttabs .tt:hover{border-color:#B9E3D3;color:var(--t1)}
.ttabs .tt.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;cursor:pointer}
.ttabs .tt.on.sel{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--brand);cursor:default}
.ttabs .tt.off{color:var(--t3)}
.ttabs .tt.off:hover{border-color:var(--line);color:var(--t3)}
.ttabs .tt .ttag{font-size:10.5px;line-height:1;padding:3px 6px;border-radius:999px;
  border:1px solid var(--line);background:#F4F7F5;color:var(--t3);font-weight:500;white-space:nowrap}
.ttabs .tt.on .ttag{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34);color:#fff}
.ttabs .tt.off .ttag{background:#F7F8F8;border-color:#E9EDEB;color:#A9B0B4}
/* 骨架屏（2026-10-08）：任务入口改走 pub_entries 接口后，首屏等50~200ms 期间
   用等宽灰块占住切换条的位置，避免真实切换条「长出来」把下方内容顶一下（CLS 跳动）。
   🔴 宽度刻意做得参差不齐（88/104/76/96px），四个一样宽反而像个输入框，用户会以为能点。 */
.ttabs-skel{display:inline-block;height:37px;border-radius:10px;background:#EFF2F1;
  border:1px solid #F2F5F4;animation:ttabsPulse 1.1s ease-in-out infinite}
.ttabs-skel:nth-child(1){width:88px}
.ttabs-skel:nth-child(2){width:104px}
.ttabs-skel:nth-child(3){width:76px}
.ttabs-skel:nth-child(4){width:96px}
@keyframes ttabsPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ttabs-skel{animation:none}}

@media (max-width:640px){
  .ttabs .tt{padding:8px 11px;font-size:12.5px}
  .ttabs .tt .ttag{font-size:10px;padding:2px 5px}
}

/* ③ 发布页的 toast 位置修正
   发布页底部有一条 .submitbar（position:sticky;bottom:0，高约 56px），而 .toast 默认
   bottom:36px —— 提示会被提交条压住。这里按 body[data-page] 只抬发布页（5 个平台共用一个前缀）。
   手机端还要再让过底部菜单 .bnav（bottom:66px + 高约 66px）。 */
body[data-page^="publish"] .toast{bottom:100px}
@media (max-width:960px){
  body[data-page^="publish"] .toast{bottom:calc(142px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
 * v22 追加 · 邀请好友（推广赚钱）
 * --------------------------------------------------------------------------
 * 只放邀请页专有的排版钩子：按钮 / 卡片 / 统计卡(.kpis) / 表格(.tbwrap) /
 * 列表行(.rowl) / 步骤(.steps) / 提示(.note .hint .sub) 全部复用上面的公共类，
 * 这里只补「邀请码 / 链接 / 二维码 / 规则清单」四块。
 * 类名统一 i 开头，避免与已有类名冲突。
 * 🔴 配色只用品牌绿令牌，不引入新色值。
 * ========================================================================== */
.irg{display:grid;grid-template-columns:1fr 178px;gap:22px;align-items:start}
/* 🔴 钱包卡里的三宫格。必须写 minmax(0,1fr) 而不是 1fr ——
   `1fr` 等价于 `minmax(auto,1fr)`，列宽会被 .kpi 内容的最小宽度顶开；
   390px 手机上三列各 ~119px 就够把整页撑宽 23px，出现整页横向滚动。
   （项目里 v14/v18 的 .kpis 也都是这么写的，这里保持一致） */
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:0}
.ilab{display:block;font-size:12.5px;color:var(--t2);margin:0 0 7px}
.ilab em{font-style:normal;font-size:11.5px;color:var(--t3);margin-left:6px}
.icode{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:23px;font-weight:700;letter-spacing:3px;color:var(--brand-dark);
  background:var(--brand-soft);border:1px dashed #B9E3D3;border-radius:12px;
  padding:11px 18px;margin-bottom:16px;user-select:all;-webkit-user-select:all}
.iurl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.iurl .inp{flex:1;min-width:190px;background:#FAFBFC}
.iqrbox{text-align:center}
.iqr{width:178px;height:178px;border:1px solid var(--line);border-radius:13px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.iqr img,.iqr svg{width:100%;height:100%;display:block}
.iqrph{font-size:12px;color:var(--t3);padding:0 14px;line-height:1.7}
/* 🔴 .iacts = 卡片底部那一排「复制邀请码 / 复制链接 / 分享 / 刷新」。
   只在 ≤960px 出现 —— 电脑上卡片顶部已经有同样的按钮了，多一排只是噪声；
   手机上滚到下半屏够不到顶部，这里补一排等价的。 */
.iacts{display:none}
.irules{list-style:none;margin:2px 0 12px;padding:0}
.irules li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.irules li:last-child{border-bottom:none}
.irules li b{flex:0 0 88px;font-size:13px;color:var(--t1)}
.irules li span{flex:1;min-width:165px;font-size:12.5px;color:var(--t2);line-height:1.7}
.irules li span em{font-style:normal;font-weight:700;color:var(--brand-dark)}
.iamt{font-weight:700;color:var(--brand-dark)}
.isub{font-size:11.5px;color:var(--t3);display:block;line-height:1.5;margin-top:2px}

@media (max-width:1024px){
  .irg{grid-template-columns:1fr 168px;gap:18px}
}
@media (max-width:960px){
  .irg{grid-template-columns:1fr;gap:16px}
  .iqrbox{order:-1;text-align:left;display:flex;align-items:center;gap:14px}
  .iqrbox .hint{margin-top:0}
  .iqr{width:132px;height:132px;flex:0 0 auto}
  .iacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:15px;
    border-top:1px solid var(--line2)}
}
@media (max-width:640px){
  .icode{font-size:19px;letter-spacing:2px;padding:10px 14px;width:100%;text-align:center}
  .irules li b{flex:0 0 100%}
  .iqr{width:118px;height:118px}
  .kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){
  .kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==========================================================================
 * v23 追加 · 企微群发「发送对象 / 发送策略」两块（仅蓝泡泡 publish-wecom.html）
 * --------------------------------------------------------------------------
 * 只放这两块专有的排版钩子：
 *   .shard/.shrow  —— 群主分片可勾选列表（.on=已选 / .dis=群主账号未匹配，不可选）
 *   .policy        —— 六个策略字段的两列紧凑栅格
 * 其余复用公共类（.card/.btn/.inp/.sw/.selbar/.tk/.empty-box/.hint）。
 * 🔴 全站禁蓝、只用品牌绿令牌；不引入任何新色值。
 * ========================================================================== */
.shard{margin:2px 0 4px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.shard .shrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line2);
  cursor:pointer;transition:.14s}
.shard .shrow:last-child{border-bottom:none}
.shard .shrow:hover{background:var(--brand-soft)}
.shard .shrow.on{background:var(--brand-soft)}
.shard .shrow.dis{cursor:not-allowed;opacity:.62;background:#FAFBFB}
.shard .shrow .cb{flex:0 0 18px;width:18px;height:18px;border:1.6px solid #C6CDD0;border-radius:6px;
  position:relative;background:#fff;transition:.14s}
.shard .shrow.on .cb{background:var(--brand);border-color:var(--brand)}
.shard .shrow.on .cb::after{content:'';position:absolute;left:5.5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.shard .shrow .who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.shard .shrow .who b{font-size:13.5px;color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shard .shrow .who span{font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shard .shrow .stat{flex:0 0 auto;font-size:12.5px;color:var(--brand-dark);font-weight:600}

.policy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 18px;margin-top:2px}
.policy .f{display:flex;flex-direction:column;gap:7px;min-width:0}
.policy .f>label{font-size:12.5px;color:var(--t2)}
.policy .f .inp{width:100%}
.policy .f .sw{align-self:flex-start}

@media (max-width:640px){
  .policy{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
  .shard .shrow .stat{display:none}
}


/* ==========================================================================
 * v23 追加（2026-10-07）：发布任务「真落库」新增的几块
 * --------------------------------------------------------------------------
 * · .uphold 缩略图：HTML 里的演示占位已删，改由 member.js 的 renderAssets() 渲染
 *   （<img> 走 blob objectURL；视频显示 ▶ 图标）。
 * · #vtabs em.off：「待开发」角标 —— 设备端还没接的平台/形式必须一眼看出来，
 *   否则用户会以为任务下发成功、其实永远不会执行。
 * · #platOff：整平台未接通时的提示条（.hint 本身没设 display，所以 [hidden] 生效）。
 * ========================================================================== */
.uphold img{display:block;width:100%;height:100%;object-fit:cover}
.uphold .vico{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:19px;color:var(--brand-dark);background:var(--brand-soft)}
.uphold[data-on]{outline:2px solid var(--brand);outline-offset:-2px}
#matCard .uphold[data-pick],#pickBox .uphold{cursor:pointer}
#pickBox .uphold .idx{max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vtabs em.off{font-style:normal;font-size:10px;line-height:1.4;margin-left:5px;
  padding:1px 5px;border-radius:5px;background:var(--warn-bg);color:var(--warn)}
#platOff{color:var(--warn);background:var(--warn-bg);border-radius:8px;
  padding:8px 11px;margin:9px 0 0;font-size:12px}
#platOff[hidden]{display:none}
#matCard .upbox[data-act="up"]+[data-act="pick-asset"],
#matCard [data-act="pick-asset"]{font-size:12px}

/* ==========================================================================
 * 🔴 v27（2026-10-08）折叠卡换名 + 授权概览汇总带 + 精简卡布局
 * --------------------------------------------------------------------------
 * 【为什么必须换名 —— 这就是「页面乱码」的真因】
 * member.css:158 有一条**历史**规则：
 *     .fold{display:inline-flex;align-items:center;background:var(--brand);
 *           color:#fff;font-size:10.5px;border-radius:20px;padding:2px 9px;font-weight:600}
 * 它是发布页的「防折叠」绿色 badge（publish-wechat/wecom/douyin/kuaishou/
 * xiaohongshu 六个页面的 #foldTk 都在用）。
 * v26 的折叠卡误用了同一个类名 ⇒ 整张卡被压成 inline-flex 的小绿标签：
 * 绿色底 + 白字 + 10.5px + 圆角 20px，向导的三个下拉和五段长文全被挤进去，
 * 视觉上就是一堆字糊成一块 —— 用户报的「乱码」。
 * 🔴 正解：折叠卡用自己的类名 .foldcard* 系列。
 * 🔴 纪律：member.css 是并发共用的共享文件，**新增组件类名前必须先**
 *    `grep -n '^\.xxx{' front/member/static/member.css` 确认没人占用。
 *    （另：`.rowl` / `.kv` / `.r` / `.tk` 这些通用名也已被其他页占用，
 *      新组件宁可起带前缀的专用名，也不要复用通用名。）
 * ========================================================================== */

/* ---------------------------------------------------------- 折叠卡（.foldcard） */
.foldcard{padding:0;overflow:hidden}
.foldcard .hd{margin-bottom:0;border-bottom:none;border-radius:var(--radius) var(--radius) 0 0}
.foldcard[data-open="1"] .hd{border-bottom:1px solid var(--line2)}
.foldcard .foldcard-hd{cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s}
.foldcard .foldcard-hd:hover{background:#FAFCFB}
.foldcard .foldcard-hd h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
.foldcard .foldcard-arw{
  display:inline-block;width:9px;height:9px;flex:0 0 auto;margin-left:2px;
  border-right:1.6px solid var(--t3);border-bottom:1.6px solid var(--t3);
  transform:rotate(45deg);transition:transform .22s ease;
}
.foldcard[data-open="1"] .foldcard-arw{transform:rotate(-135deg)}
/* 用 max-height 过渡而非 display:none —— 有动画，且 select 展开时不被 display:none 打断 */
.foldcard .foldcard-bd{
  overflow:hidden;max-height:0;padding:0 var(--pad,18px);
  transition:max-height .26s ease,padding .26s ease;
}
.foldcard[data-open="1"] .foldcard-bd{padding:16px var(--pad,18px) 18px}
.foldcard .foldcard-bd > :first-child{margin-top:0}

/* ---------------------------------------------------------- ① 授权概览汇总带
   四项数字一眼看完概况。新起 .licsum-* 前缀，不复用 .rowl/.kv（已被工作台占用）。 */
.licsum{
  /* 🔴 v28：3 格（v27 是 4 格）。列数必须与 HTML 里 .licsum-i 的个数一致 ——
     网格不会自动重排，漏改会出现「两列 + 一格空白」的错位。 */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:14px;
}
.licsum-i{
  background:#fff;padding:13px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.licsum-i b{font-size:21px;line-height:1.1;font-weight:700;color:var(--t1);letter-spacing:-.4px}
.licsum-i span{font-size:11.5px;color:var(--t3);white-space:nowrap}
/* 四项各带一点语义色，扫一眼就知道该看哪个数 */
.licsum-i.ok   b{color:var(--brand)}
.licsum-i.warn b{color:#C2760A}
.licsum-i.free b{color:#2C6FD1}
/* 为 0 的项整体淡下去 —— 避免 0000 四个数字一样重、看不出重点 */
.licsum-i.zero{background:#FCFDFD}
.licsum-i.zero b{color:#C6CBD1}
.licsum-i.zero span{color:#B4B9BF}

/* ---------------------------------------------------------- ③-3.1 精简授权卡
   v26 是「标题行 + 6 格 kv 网格 + 按钮行」三段，卡片很高。
   v27 压成两行：① 平台/版本/状态  ② 到期日 · 剩余天数 · 操作按钮。 */
.liccard{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 15px;margin-bottom:9px;background:#fff;transition:border-color .15s;
}
.liccard:hover{border-color:#BFDCCE}
.liccard:last-child{margin-bottom:0}
.liccard-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.liccard-hd > b{font-size:14px;font-weight:600;color:var(--t1);flex:0 0 auto}
.liccard-hd .ico{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);font-size:14px;
}
.liccard-meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:12.5px;color:var(--t2);padding-top:9px;border-top:1px dashed var(--line);
}
.liccard-meta b{color:var(--t1);font-weight:600}
.liccard-meta .dot{color:#C6CBD1}
.liccard-meta .warn,.liccard-meta .warn b{color:#C2760A}
.liccard-acts{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* ---------------------------------------------------------- 紧凑绑定向导
   三个下拉一行排（原来 ③ 微信账号独占一行，白白多占一行高）。 */
.bindbox .brow .fg{flex:1 1 0;min-width:190px}
.bindbox .licacts{margin-top:12px}
.bindbox .licrule{
  margin-top:12px;padding-top:11px;border-top:1px dashed #CDEBDE;
  color:#7C828B;line-height:1.8;
}

/* ---------------------------------------------------------- 响应式 */
@media (max-width:900px){
  .licsum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .licsum-i{padding:11px 8px}
  .licsum-i b{font-size:19px}
  /* 说明列表左列在窄屏压窄一点，给右列留出可读宽度 */
  .licdl > div{grid-template-columns:78px 1fr;gap:10px}
}
@media (max-width:760px){
  .bindbox .brow .fg{min-width:100%}
  .liccard-acts{margin-left:0;width:100%}
  .liccard-meta{gap:7px}
  .foldcard .foldcard-bd{padding:0 13px}
  .foldcard[data-open="1"] .foldcard-bd{padding:13px 13px 15px}
  /* 行内操作按钮在窄屏换行，不再挤在一格里把表格撑宽 */
  .licrow-acts{white-space:normal;min-width:150px}
}
@media (max-width:420px){
  .licsum-i b{font-size:17px}
  .licsum-i span{font-size:11px}
  /* 420px 以下左标签单独占一行，比压到 62px 挤成两行更好读 */
  .licdl > div{grid-template-columns:1fr;gap:3px}
  .licdl dt{margin-bottom:0}
}

/* ---------------------------------------------------------- v28 授权页重排
   ① .tmeta —— 表格单元格里紧跟主值的次要信息（版本号、剩余天数）。
      🔴 这个类 v27 起就在 member-license.js 里输出，但 CSS 里一直没有规则
        （不是新加的类名，所以不触发「类名纪律」）。不补的话版本号会跟平台名
        挤在同一行看不出层级，这里补上：同色系弱化 + 块级换行。
   ② .licrow-acts —— 操作列。行内 3 个按钮（「续费」+ 两个解绑）需要不换行
        且与状态列拉开距离。
   ③ .licfoot —— 表格下方的补充说明，比 .sub 稍弱一档。
   ④ .licdl / .licdl dt / .licdl dd —— 「使用说明」的紧凑定义列表。
      原来 5 段是 5 个 <p class="sub">，每段独占一行；改成左标签右说明并排后，
      同样的内容少占约一半高度。
      🔴 注意：CSS 里**全局没有** dl/dt/dd 规则（查过），所以这里必须自带
         margin:0 / padding:0 重置，否则浏览器默认 margin 会让布局错位。 */
.tmeta{
  display:block;font-size:11.5px;color:var(--t3);
  margin-top:2px;line-height:1.5;
}
.tmeta.warn{color:#C2760A}

.licrow-acts{white-space:nowrap}
.licrow-acts .btn + .btn{margin-left:5px}

.licfoot{margin:12px 0 0}

.licdl{margin:0}
.licdl > div{
  display:grid;grid-template-columns:88px 1fr;gap:14px;
  padding:9px 0;border-top:1px dashed var(--line);
}
.licdl > div:first-child{padding-top:0;border-top:none}
.licdl > div:last-child{padding-bottom:0}
.licdl dt{
  margin:0;font-size:12.5px;font-weight:600;color:var(--t1);
  line-height:1.75;
}
.licdl dd{
  margin:0;font-size:12.5px;color:var(--t2);line-height:1.75;
}
.licdl dd b{color:var(--t1)}
.licdl dd a{color:var(--brand)}

/* ==========================================================================
 * v27（2026-10-12）「购买授权码」页改版
 * ① .pchips button b —— 平台条去掉头像 / 已绑定角标后回归纯文本，统一字重
 * ② .vtag —— 套餐卡头部「版本徽标」：本地版灰 / 云端版品牌绿。
 *    四个套餐（本地/云端 × 月卡/年卡）平铺成一组，版本差异一眼可分，
 *    上方不再需要「本地版 / 云端版」切换（官网套餐页同步整改）。
 * ③ .ph b —— 占满头部中部，把单选圆点顶到最右（vtag 插入后的布局修正）
 * ④ .notelist —— 下单说明由两段密文改列表，窄屏也读得下去
 * 🔴 本块必须放在文件末尾：靠源码顺序覆盖前面同特异性的 .plans/.pcard 定义。
 * ========================================================================== */
.pchips button b{font-weight:600}
.plans .pcard .ph b{flex:1;min-width:0}
.plans .pcard .vtag{
  flex:0 0 auto;font-size:11px;font-weight:700;line-height:1.6;
  padding:1px 8px;border-radius:20px;white-space:nowrap;
}
.plans .pcard .vtag.local{background:#EDEEF0;color:#5B6069}
.plans .pcard .vtag.cloud{background:var(--brand);color:#fff}
.notelist{list-style:none;margin:10px 0 0;padding:0}
.notelist li{position:relative;padding:3px 0 3px 18px;font-size:13px;color:var(--t2);line-height:1.75}
.notelist li:before{content:"✓";position:absolute;left:0;top:3px;color:var(--brand);font-weight:700}
.notelist li b.g{color:var(--brand-dark)}
.notelist li a{color:var(--brand)}