:root{
  --brand:#12B39F; --brand-d:#0B8577; --brand-l:#E7F7F4;
  --ink:#1F2933; --sub:#6B7280; --hint:#9AA1AB;
  --line:#E8EBF0; --bg:#F4F6F9; --card:#FFFFFF;
  --ok:#12B39F; --warn:#F2802C; --danger:#E24B4A; --info:#378ADD;
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;color:var(--ink);background:var(--bg);
  display:flex;height:100vh;overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:13px;color:inherit}
a{color:var(--brand-d);text-decoration:none}

/* ---------- 侧栏 ---------- */
.side{width:212px;flex:none;background:#1F2933;color:#C7CDD6;display:flex;flex-direction:column}
.side .brand{padding:18px 18px 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #2C3743}
.side .logo{width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px}
.side .brand b{color:#fff;font-size:14px;font-weight:500;letter-spacing:.5px}
.side .brand span{display:block;font-size:11px;color:#7C8794;margin-top:1px}
.nav{padding:10px 0;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 18px;color:#C7CDD6;font-size:13px;
  border-left:3px solid transparent;cursor:pointer}
.nav a:hover{background:#26313D;color:#fff}
.nav a.on{background:#26313D;color:#fff;border-left-color:var(--brand)}
.nav a i{width:6px;height:6px;border-radius:50%;background:#4B5764;flex:none}
.nav a.on i{background:var(--brand)}
.nav .grp{padding:14px 18px 6px;font-size:11px;color:#69737F;letter-spacing:.5px}
.side .foot{padding:12px 18px;border-top:1px solid #2C3743;font-size:11px;color:#69737F;line-height:1.7}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.top{height:54px;flex:none;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 20px;gap:12px}
.top h1{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.top .grow{flex:1}
.mode{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;color:var(--sub)}
.mode input{width:170px;border:none;background:transparent;outline:none;font-size:12px}
.mode input.narrow{width:132px}
/* 绑定码没填/不一致时把输入框圈出来：三个框并排，用户很容易漏填或填错框 */
.mode input.need{outline:2px solid var(--warn);outline-offset:1px;border-radius:4px}
.hd-pre{margin:8px 0 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  font-family:Consolas,Menlo,monospace;font-size:11px;line-height:1.7;white-space:pre-wrap;
  word-break:break-all;max-height:240px;overflow:auto;color:var(--ink)}
/* 弹窗里那行「运营绑定码」输入框（第 349 轮）：顶栏三个框在连上环境后会收起，
 * 报错弹窗让人"填口令"却没有框可填 —— 所以这个框必须跟按钮同一行、看得见、能打字。 */
.hd-key{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.hd-key input{flex:1;min-width:190px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);font-size:12.5px;outline:none}
.hd-key input:focus{border-color:var(--ok)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.dot.on{background:var(--ok)}
.content{flex:1;overflow:auto;padding:18px 20px 40px}

/* ---------- 通用 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card+.card{margin-top:14px}
.sec{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.sec h2{font-size:14px;font-weight:500}
.sec .grow{flex:1}
.muted{color:var(--sub)}
.sub{font-size:12px;color:var(--sub)}
.hint{font-size:11.5px;color:var(--hint)}
/* 「没填手机号」这类需要运营**立刻看到并采取下一步**的提示：
 * 用灰 hint 会跟「已填写但值是空」的留白混在一起，看不出是缺数据还是没加载出来。 */
.hint.warn{color:#B4590B}

.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.kpi .t{font-size:12px;color:var(--sub)}
.kpi .v{font-size:22px;font-weight:500;margin-top:6px;letter-spacing:-.3px}
.kpi .d{font-size:11.5px;margin-top:5px;color:var(--hint)}
.kpi .d.up{color:var(--ok)}
.kpi .d.dn{color:var(--danger)}
.kpi.alert{border-color:#F6D9C6;background:#FFFBF7}
/* 可点的 KPI 卡（第 321 轮）：看到「3 笔退款」应该能直接点进去，
 * 而不是自己去侧边栏找「订单退款」。
 * ⚠️ 只给**真的有对应页面**的卡片加 .link（服务端 nav 为空就不加）——
 *    加了 cursor:pointer 却点不动，比不能点更气人（第 7 条红线：摆设）。 */
.kpi.link{cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease}
.kpi.link:hover{border-color:#BBD7F5;box-shadow:0 2px 6px rgba(20,90,180,.06)}
.kpi.link:after{content:'›';float:right;margin-top:-18px;color:var(--hint);font-size:15px}

.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:14px}
.grid2>*{min-width:0}
/* 并排的两张卡顶部必须齐平：`.card+.card{margin-top:14px}` 是给**上下堆叠**的卡片
 * 留的间距，但同一条规则也会命中 grid2 里的第二张卡 ——
 * 结果是右卡整体下移 14px，左右两栏的标题永远不在一条水平线上。
 * 第 230 轮排版优化时发现（用户截图上「充值套餐」与「人工加币」就是这么错开的）。 */
.grid2>.card+.card{margin-top:0}

table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;color:var(--sub);font-weight:400;padding:8px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid #F2F4F7;font-size:12.5px;vertical-align:middle}
tbody tr:hover{background:#FAFBFC}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td .b{font-weight:500}
.ava{width:26px;height:26px;border-radius:50%;background:var(--brand-l);color:var(--brand-d);
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-right:7px;vertical-align:middle}

.tag{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11.5px;white-space:nowrap}
.tag.gray{background:#F1F3F6;color:var(--sub)}
.tag.green{background:#E7F7F4;color:#0B8577}
.tag.blue{background:#EAF1FE;color:#2E5FE0}
.tag.orange{background:#FFF1EB;color:#D2541B}
.tag.red{background:#FCEBEB;color:#A32D2D}
.tag.purple{background:#EEEDFE;color:#534AB7}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;
  font-size:12.5px;transition:.12s}
.btn:hover{border-color:#CBD2DC;background:#FAFBFC}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.d{color:var(--danger);border-color:#F3C9C9}
.btn.d:hover{background:#FDF3F3}
.btn.sm{padding:4px 9px;font-size:12px}
/* 表格里贴着手机号那种「复制」小钮：不能把行搞高，也不能抢走号码的注意力。 */
.btn.xs{padding:1px 6px;font-size:11px;border-radius:6px;margin-left:6px;vertical-align:middle}
.btn:disabled{opacity:.45;cursor:not-allowed}

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filters input,.filters select{border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  background:#fff;outline:none;min-width:120px}
.filters input:focus,.filters select:focus{border-color:var(--brand)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:14px;padding:4px 11px;font-size:12px;cursor:pointer;background:#fff}
.chip.on{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d)}

.empty{padding:36px 0;text-align:center;color:var(--hint)}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:#1F2933;color:#fff;
  padding:9px 16px;border-radius:9px;font-size:12.5px;z-index:99;opacity:0;transition:.2s;pointer-events:none}
.toast.on{opacity:1}

.mask{position:fixed;inset:0;background:rgba(20,26,33,.42);display:none;align-items:center;
  justify-content:center;z-index:80}
.mask.on{display:flex}
.modal{background:#fff;border-radius:12px;width:520px;max-width:92vw;max-height:86vh;overflow:auto;padding:20px}
.modal h3{font-size:14px;font-weight:500;margin-bottom:14px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--sub);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;outline:none}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.field textarea{min-height:74px;resize:vertical;line-height:1.6}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.bars{display:flex;align-items:flex-end;gap:10px;height:132px;padding-top:8px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars .bar{width:100%;max-width:38px;background:var(--brand-l);border-radius:6px 6px 0 0;position:relative;transition:.2s}
.bars .bar span{position:absolute;top:-17px;left:0;right:0;text-align:center;font-size:11px;color:var(--sub)}
.bars .lb{font-size:11px;color:var(--hint)}

.list{display:flex;flex-direction:column;gap:0}
.row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #F2F4F7}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .t{font-size:12.5px}
.row .s{font-size:11.5px;color:var(--sub);margin-top:2px}

.notice{background:var(--brand-l);border:1px solid #C6EBE4;border-radius:9px;padding:11px 13px;
  font-size:12px;color:#0B5A50;line-height:1.75}
.notice+.notice{margin-top:9px}
.notice.warn{background:#FFF7EE;border-color:#F6D9C6;color:#8A4708}
.notice.err{background:#FDF3F3;border-color:#F3C9C9;color:#8E2A2A}

/* ============================================================
   扩展视图（经营配置）：装修手机预览 / 商品 SKU / 章节编排 / 提成阶梯
   ============================================================ */

/* ---------- 通用小工具 ---------- */
.mt6{margin-top:6px}
.note{font-size:11.5px;color:var(--hint);line-height:1.7}

/* ---------- 说明文字分层（第 371 轮） ----------
 * .note-more 默认不显示；.note-open 由点击切上去（只切 class，不重绘）。
 * 折起部分加一条浅竖线：一眼能看出"这里还有一段，不是到这儿就完了"。 */
.note-more{display:none;margin-top:6px;padding-left:9px;border-left:2px solid var(--line)}
.note.note-open>.note-more{display:block}
.note-toggle{color:var(--brand);cursor:pointer;font-size:11.5px;margin-left:6px;
  white-space:nowrap;user-select:none}
.note-toggle:hover{text-decoration:underline}
/* 侧边栏是深色底（#1F2933），这里必须用深色主题的颜色 ——
 * 套 var(--sub)/var(--line) 那些浅色变量会变成"灰字灰底"，等于没写。 */
.side .sideOpt{padding:10px 16px 6px;border-top:1px solid #2C3743}
.side .sideOpt label{display:flex;align-items:center;gap:7px;font-size:12px;color:#C7CDD6;cursor:pointer}
.side .sideOpt .sd{font-size:10.5px;color:#69737F;line-height:1.5;margin-top:4px;padding-left:20px}
/* 可点选 chip（装修模块开关 / 导航项 / 提成适用对象，统一走 .pickable） */
.chip.pickable{cursor:pointer;user-select:none}
.chip.pickable:hover{border-color:var(--brand)}
.chip.pickable.on{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d)}

/* ---------- 首页宫格编排 ---------- */
.grid-edit{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ge-item{display:grid;grid-template-columns:44px 1fr;gap:8px;border:1px solid var(--line);
  border-radius:9px;padding:8px;background:#FCFDFE}
.ge-item .ge-icon{width:100%;text-align:center;border:1px solid var(--line);border-radius:8px;
  padding:6px 2px;outline:none;background:#fff}
.ge-item .ge-title{border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;
  min-width:0;background:#fff}
.ge-item .ge-icon:focus,.ge-item .ge-title:focus{border-color:var(--brand)}

/* ---------- 商品 SKU 行 ---------- */
.sku-row{align-items:center}
.sku-row input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;min-width:0}
.sku-row input:focus{border-color:var(--brand)}

/* ---------- 提成阶梯行 ---------- */
.tier-row{align-items:center}
.tier-row input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;min-width:0}
.tier-row input:focus{border-color:var(--brand)}

/* ---------- 章节 / 课时编排 ---------- */
.chTitle,.lsTitle,.lsDur{border:1px solid var(--line);border-radius:8px;padding:6px 8px;
  outline:none;min-width:0}
.chTitle:focus,.lsTitle:focus,.lsDur:focus{border-color:var(--brand)}

/* ---------- 手机实时预览 ---------- */
.phone{width:300px;margin:0 auto;background:#fff;border:9px solid #1F2933;border-radius:30px;
  box-shadow:0 12px 30px rgba(20,26,33,.18);overflow:hidden}
.phone-hd{background:var(--pc);color:#fff;padding:0 0 12px}
.phone-hd .ph-bar{display:flex;justify-content:space-between;align-items:center;
  padding:7px 14px 4px;font-size:10.5px;opacity:.85;letter-spacing:.5px}
.phone-hd .ph-brand{display:flex;align-items:center;gap:9px;padding:6px 14px 0}
.phone-hd .ph-logo{width:32px;height:32px;flex:none;border-radius:9px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500}
.phone-hd .ph-name{font-size:14px;font-weight:500;line-height:1.3}
.phone-hd .ph-slogan{font-size:10.5px;opacity:.86;margin-top:2px}

.phone-bd{background:#F6F7F9;min-height:300px;max-height:430px;overflow:auto;padding:10px 12px 14px}
.phone-bd .ph-notice{background:#FFF7E8;color:#9A6412;border-radius:8px;padding:7px 10px;
  font-size:11px;line-height:1.5;margin-bottom:9px}
.phone-bd .ph-banner{border-radius:12px;padding:14px 13px 10px;position:relative;margin-bottom:10px}
.phone-bd .ph-bn-t{font-size:13.5px;font-weight:500;color:#1F2933}
.phone-bd .ph-bn-s{font-size:11px;color:#5A6472;margin-top:3px}
.phone-bd .ph-dots{display:flex;gap:4px;margin-top:9px}
.phone-bd .ph-dots i{width:5px;height:5px;border-radius:50%;background:rgba(31,41,51,.22)}
.phone-bd .ph-dots i.on{background:var(--pc);width:13px;border-radius:3px}

.phone-bd .ph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#fff;
  border-radius:12px;padding:12px 8px;margin-bottom:10px}
.phone-bd .ph-g{text-align:center;font-size:10.5px;color:#3A424D;position:relative}
.phone-bd .ph-gi{width:34px;height:34px;margin:0 auto 5px;border-radius:10px;
  background:var(--pc);filter:saturate(.28) brightness(1.55);
  display:flex;align-items:center;justify-content:center;font-size:16px}
/* 待办数字（第 270 轮）：与真机同一个观感 —— 红底白字胶囊，贴在图标右上。
   为什么不放进 .ph-gi 里面：那一层有 filter（brightness 1.55），
   红色进去会变浅，预览就跟真机对不上了。 */
.phone-bd .ph-n{position:absolute;top:-3px;left:calc(50% + 8px);min-width:15px;height:15px;
  line-height:15px;padding:0 3px;box-sizing:border-box;border-radius:8px;background:#F5453D;
  color:#fff;font-size:9px;font-weight:600;font-style:normal;text-align:center;border:1.5px solid #fff}

.phone-bd .ph-sec{font-size:12px;font-weight:500;color:#1F2933;margin:4px 2px 7px}
.phone-bd .ph-item{display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:#fff;border-radius:9px;padding:9px 11px;margin-bottom:6px;font-size:11.5px;color:#333A44}
.phone-bd .ph-item b{color:var(--pa);font-weight:500;flex:none}
.phone-bd .ph-sub{display:block;font-size:10px;color:#8A939F;font-style:normal;margin-top:1px}
.phone-bd .ph-rev{background:#fff;border-radius:9px;padding:10px 11px;font-size:11px;
  color:#5A6472;line-height:1.6}
.phone-bd .ph-empty{text-align:center;color:#A6ADB7;font-size:11.5px;padding:40px 0;line-height:1.9}

.phone-tabs{display:flex;background:#fff;border-top:1px solid #ECEFF3;padding:9px 0 11px}
/* 预览底栏必须与真机一致：小程序 app.json 没配 iconPath，原生底栏是**纯文字**。
   以前这里画了 emoji 图标（div:first-child 15px），真机上根本看不到 —— 属于"假预览"。 */
.phone-tabs .ph-tab{flex:1;text-align:center;font-size:11px;color:#8A939F}
.phone-tabs .ph-tab div:first-child{font-size:11px;margin-bottom:0}
.phone-tabs .ph-tab.on{color:#12B39F;font-weight:600}

/* ---------- 排班审核 ---------- */
.sitem{border:1px solid #EEF1F5;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.sitem:last-child{margin-bottom:0}
.sitem-h{display:flex;align-items:center;gap:10px}
.sitem-h .grow{min-width:0}
.sitem-h .t{font-size:13.5px;color:var(--ink,#1F2933)}
.sitem-h .s{font-size:12px;color:var(--sub,#8A939F);margin-top:2px}
.sdays{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.sday{flex:1 1 118px;min-width:112px;border:1px solid #EEF1F5;border-radius:10px;padding:8px 10px;background:#FAFBFC}
.sday .sd-h{font-size:12.5px;color:var(--ink,#1F2933);display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.sday .sd-h span{font-size:11px;color:#A6ADB7;flex:none}
.sday .sd-p{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.sday .sd-p .tag{margin:0}
.sday .sd-p .pgrp{display:flex;flex-wrap:wrap;gap:4px;align-items:center;flex:1 1 100%}
.sday .sd-p .pgrp .hint{flex:none;margin-right:2px}
.sitem-h .notice.err{max-width:300px}


/* ---------- 装修：新增内容位的编辑行 ---------- */
.mini{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:#FCFDFE}
.mini input,.mini select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;outline:none;background:#fff;min-width:0}
.mini input:focus,.mini select:focus{border-color:var(--brand)}
.mini .ico{width:48px;text-align:center}
.chip .x{margin-left:6px;font-weight:500;color:#B4443C;cursor:pointer}
.sx-tbl input,.sx-tbl select{width:100%;border:1px solid var(--line);border-radius:7px;padding:5px 7px;
  outline:none;background:#fff;font-size:12.5px}
.sx-tbl input:focus,.sx-tbl select:focus{border-color:var(--brand)}

/* ---------- 装修预览：新增内容位 ---------- */
.phone-bd .ph-searchwrap{margin-bottom:10px}
.phone-bd .ph-search{background:#fff;border-radius:9px;padding:8px 10px;font-size:11.5px;color:#8A939F}
.phone-bd .ph-kws{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.phone-bd .ph-kw{background:#fff;border:1px solid #E6EAF0;border-radius:11px;padding:2px 9px;font-size:10.5px;color:#5A6472}
.phone-bd .ph-sc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.phone-bd .ph-sc-i{border-radius:10px;padding:9px 10px}
.phone-bd .ph-sc-i b{display:block;font-size:11px;font-weight:500;color:#1F2933}
.phone-bd .ph-sc-i i{display:block;font-style:normal;font-size:10px;color:#5A6472;margin-top:2px}
.phone-bd .ph-youth{border-radius:11px;padding:11px 12px;color:#fff;margin-bottom:10px}
.phone-bd .ph-youth b{display:block;font-size:12.5px;font-weight:500}
.phone-bd .ph-youth i{display:block;font-style:normal;font-size:10.5px;opacity:.9;margin-top:3px}
/* 专家背书（第 330 轮）：白底 + 三列圆头像，不抢眼但看得清 ——
   它是"事实陈述"，不是广告位，所以不用品牌绿渐变。 */
.phone-bd .ph-exp{background:#fff;border-radius:11px;padding:11px 10px 8px;margin-bottom:10px;box-shadow:0 1px 6px rgba(19,50,44,.06)}
.phone-bd .ph-exp-t{font-size:12.5px;font-weight:600;color:#1D2A32}
.phone-bd .ph-exp-s{font-size:10px;color:#8A9099;margin-top:3px;line-height:1.4}
.phone-bd .ph-exp-l{display:flex;flex-wrap:wrap;margin-top:9px}
.phone-bd .ph-exp-i{width:33.33%;text-align:center;padding-bottom:6px}
.phone-bd .ph-exp-av{width:30px;height:30px;line-height:30px;border-radius:50%;background:#EAF7F4;color:#0E8C7C;
  font-size:12px;font-weight:600;margin:0 auto;text-align:center}
.phone-bd .ph-exp-n{font-size:10.5px;font-weight:600;color:#1D2A32;margin-top:4px}
.phone-bd .ph-exp-o{font-size:9px;color:#A6ADB6;margin-top:1px;line-height:1.3}
.phone-bd .ph-exp-note{font-size:9px;color:#A6ADB6;text-align:center;border-top:1px solid #F1F4F6;padding-top:6px;margin-top:2px}
.phone-bd .ph-note{background:#F1F3F6;border-radius:9px;padding:9px 11px;font-size:10.5px;color:#7A838F;line-height:1.7}
.phone-bd .ph-foot{text-align:center;font-size:10.5px;color:#A6ADB7;padding:14px 0 4px;line-height:1.7}
.phone-bd .ph-foot-s{font-size:10px;color:#BCC2CA}

/* ---------------- 连接云端帮助弹窗 ---------------- */
.hd-list{margin-top:8px}
.hd-item{border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:8px}
.hd-item b{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.hd-item span{display:block;font-size:12px;line-height:1.75;color:var(--sub)}
.hd-ol{margin:6px 0 4px 20px;padding:0}
.hd-ol li{font-size:12px;line-height:1.85;color:var(--sub);margin-bottom:4px}

/* ---------------- 案例审核：体态照缩略图 / 大图预览条 ----------------
 * 案例含未成年人体态照，审核时必须能看清，所以表格里给小缩略图、
 * 点击开大图弹窗；不用第三方预览库，纯 CSS 铺满。 */
.chk-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chk-img{width:54px;height:54px;object-fit:cover;border-radius:8px;border:1px solid var(--line);
  cursor:zoom-in;background:#F1F3F6;transition:border-color .15s}
.chk-img:hover{border-color:var(--brand)}
.chk-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.chk-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid transparent;
  cursor:pointer;background:#F1F3F6;opacity:.7;transition:opacity .15s,border-color .15s}
.chk-thumb:hover{opacity:1}
.chk-thumb.on{border-color:var(--brand);opacity:1}

/* ---------------- 小程序装修：页面维度工具栏 ----------------
 * 装修按「页面」切开后，保存 / 发布 / 状态必须常驻在顶部 ——
 * 否则运营切到「课程列表页」就看不到发布按钮，改完不知道去哪发布。 */
.dc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;margin-bottom:10px}
.dc-bar .chips{margin:0}
.dc-bar .btn{margin:0}
.dc-tabhint{margin:-2px 0 12px}

/* ---------------- 全站文案 / 虚拟币 / 区域代理（views-biz.js） ----------------
 * 这三个视图里表格中的输入框很多（逐条改文案、逐个改套餐），
 * 统一给 td 里的 input / select 一个轻量外观，避免出现一排「浏览器默认样式」的裸控件。
 * .mono 用于 key / openid / 订单号 —— 等宽字体才能一眼看出前后差异。 */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;font-size:12px;letter-spacing:0}
.t14{font-size:13px}
.t16{font-size:14px;font-weight:500}
td input,td select{border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12px;
  outline:none;background:#fff;box-sizing:border-box;width:100%;min-width:0}
td input:focus,td select:focus{border-color:var(--brand)}
.tx-in{width:100%;border:1px solid var(--line);border-radius:7px;padding:5px 8px;font-size:12.5px;
  outline:none;background:#fff;box-sizing:border-box}
.tx-in:focus{border-color:var(--brand);background:#FCFEFD}
/* 文案表格行高紧一点：一屏能多看几行，运营改字时少滚动 */
#view table td{vertical-align:middle}
/* 提成这一列（第 327 轮）：阶梯规则要**每档一行**读，不能被挤成一团。
 * 用户报的就是"阶梯数值看不到"——原因不是没存，是整串塞进窄格看不见。 */
#view td.cm-val{min-width:148px;max-width:232px;white-space:normal;line-height:1.65}

/* 演示数据（没连云端）时的模式标识：整条改成警示色。
 * 这一条很关键：后台在演示数据下改的东西**不会写到线上**，
 * 不标出来，运营看到的现象就是「改了没用 / 改不了」（见 app.js 的 paintMode 与 guard）。 */
.mode.warn{background:#fff8e6;border-color:#f0c36d;color:#9a6b00}
.mode.warn #modeTxt{font-weight:700}
.mode.warn .dot{background:#e0a127}

/* 「连的是旧环境」：和「演示数据」必须一眼能分开。
 * 两者都不对，但处置完全不同 —— 演示是"没连上"（去点连接），旧环境是"连错地方了"（去点切换）。
 * 都用同一套警示色，当事人只会得出"反正有问题"，不知道该点哪个。 */
.mode.drift{background:#eaf1ff;border-color:#8fb0ef;color:#1d3f8f}
.mode.drift #modeTxt{font-weight:700}
.mode.drift .dot{background:#1d3f8f}

/* ---------------- 代理规则与考核：条目编辑表 ----------------
 * 用户反馈：这张表「职责」列的框很长、很占地方，「说明」列的框很窄、字挤成一条。
 * 两个根因一起修：
 *   ① 上面 `td input,td select` 那条「铺满」规则**没管 textarea** ——
 *      最该宽的「说明」列反而用了浏览器默认的 20 列宽 × 2 行，还带滚动条；
 *   ② 表格是 auto 布局，列宽由内容撑：input 铺满后按「固有宽度」参与计算，
 *      把「职责」这种四个字的短列撑宽，说明列被挤到最窄。
 * 做法：固定列宽（谁宽谁窄由 POL_SECS 里的百分比说了算）+ 多行框铺满。
 * 注意：表头在 th 里是 nowrap 的 —— 给某列收窄前先量一眼标题长度，窄了会顶出来。 */
.pol-tbl{table-layout:fixed}
.pol-tbl th{vertical-align:middle}
#view .pol-tbl td{vertical-align:top;padding:9px 10px}
.pol-tbl th.pol-act,.pol-tbl td.pol-act{width:56px;text-align:right;vertical-align:middle;padding-right:0}
/* td input 那条规则会被 checkbox 继承（勾选框被拉成一条），这里还原成方块 */
.pol-tbl input[type=checkbox]{width:14px;height:14px;min-width:0;vertical-align:-2px;margin:0 5px 0 0}
/* 规则 / 考核页的多行框：铺满单元格 + 给足行高 + 只允许纵向拖。
 * field-sizing:content 让高度跟着内容走（短句占一行、长句自动展开），
 * 不支持它的旧内核忽略这一句、回落到 min-height，不会坏。 */
textarea.pol-ta{display:block;width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:7px;padding:6px 8px;font-size:12px;line-height:1.65;outline:none;background:#fff;
  resize:vertical;min-height:58px;max-height:260px;font-family:inherit;color:inherit;
  field-sizing:content}
textarea.pol-ta:focus{border-color:var(--brand);background:#FCFEFD}
/* 「原因 / 说明」这类整行字段：标签靠左定宽、框铺满右边。
 * 长文本用单行 input 时，运营只能看到最后半句话，写不下去也检查不了。 */
.pf-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px}
.pf-row>label{flex:none;width:104px;padding-top:6px}
/* 每节卡片顶部那句解释，跟下面的表格之间留一口气 */
.pol-sec-note{margin:-3px 0 10px}

/* ---------------- 第 281 轮：通知记录的「新」行 ----------------
 * 与小程序「消息中心」同一套语义：浅底 + 左侧主色条 + 「新」标签，
 * 一眼扫过去就能看出哪几条是刚才刷新才出现的。
 * ⚠️ 判据不是"未读"：后台这张表是审计流水，没有已读字段 ——
 *    「新」= 上次打开这页之后新到的（views-biz.js 里用 id 做集合差算）。
 *    两边判据不同、视觉一致；谁把这里改成"未读"就是在编一个不存在的状态。 */
tbody tr.is-new td{background:#F6FDFB}
tbody tr.is-new td:first-child{box-shadow:inset 3px 0 0 #12B39F;font-weight:500}
tbody tr.is-new:hover td{background:#EFFAF7}

/* ---------------- 第 322 轮：指标格子 = 入口 ----------------
 * 指标看板上每个数都能点开看来源。做成"看起来像数字、其实是链接"的样子：
 * 常显下划线会显得吵（一屏十几个数），鼠标移上去才浮现，
 * 但颜色一直用主色 —— 否则用户根本不会想到可以点（红线 11：有入口没人知道 = 没有）。
 * 「—」用灰色虚线：它也是一句结论（这一类记录一条都没有），同样可以点。 */
button.mnum{background:none;border:0;padding:0 2px;font:inherit;color:var(--brand);
  cursor:pointer;border-bottom:1px dashed transparent;font-variant-numeric:tabular-nums}
button.mnum:hover{border-bottom-color:var(--brand)}
button.mnum.nil{color:var(--hint)}
button.mnum.nil:hover{border-bottom-color:var(--hint)}

/* ============================================================
   第 324 轮：后台「找东西」的基础设施 —— `.pagebar`
   ============================================================
   用户原话：
     「经常用到的功能以及经常需要点击的内容、使用频率很高的按钮，
       有些排在页面最下方，每次找很久……后台全部页面都梳理一遍重新布局。」

   以前的问题：一个页面动辄三四屏，**主操作（保存 / 发布 / 批量通过）写在最后**，
   要滚到最底下才点得到；改完一个数还得再滚回去看改没改对。页面一长就彻底找不到。

   做法（不是靠一页一页挪 div，那种做法改完没人能证明它对）：
   ① `layoutPage()`（app.js）在渲染后做一次纯字符串归一 —— 把**页面最后一段**
      主操作条（`.acts`）剪出来，连同"本页有哪几节"的目录一起放进吸顶条；
   ② 于是操作条**永远在屏幕顶部可见**，DOM 顺序也真的变了（不是视觉障眼法）；
   ③ 目录给的是可点的区块跳转，长页不用再靠滚轮找。

   为什么不用"纯 CSS 吸底"（position:sticky;bottom:0 套在所有 .acts 上）：
   弹窗里的 .acts 会被一起吸住；卡片中间的 .acts 会浮在半空；
   而且"页面最后一段"和"随便一段"在 CSS 里区分不出来。挪 DOM 反而更准。

   ⚠️ 判据：tools/test-r324.js 对**每一个视图**跑一遍 layoutPage，断言
      id 一个不丢、目录条的节点数 = 小节数、跳转目标真的存在（红线 47：
      「字段在文件里出现过」不算判据，得真跑一遍看返回的东西）。 */
.pagebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin:0 -20px 12px;padding:8px 20px;background:#F7F9FB;
  border-bottom:1px solid var(--line);box-shadow:0 3px 8px rgba(20,26,33,.05)}
.pagebar .pb-lb{font-size:11px;color:var(--hint);flex:none}
/* 目录 chip：细、扁、不抢眼 —— 它只是"跳过去"，不是状态筛选，所以不做选中态 */
.pagebar .pb-j{display:flex;gap:5px;flex-wrap:wrap;align-items:center;min-width:0}
.pagebar .pb-j a{font-size:11.5px;color:var(--sub);border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:2px 9px;cursor:pointer;white-space:nowrap}
.pagebar .pb-j a:hover{border-color:var(--brand);color:var(--brand-d)}
.pagebar .pb-grow{flex:1;min-width:8px}
/* 操作条搬进吸顶条后要去掉原来的 margin-top（16px 是给"跟在表单后面"留的间距） */
.pagebar .acts{margin-top:0;flex:none}
.pagebar .acts .btn{margin:0}
/* 页面正文的顶部留白：吸顶条本身已经占了一行，紧跟的第一张卡不用再顶 18px */
.content .pagebar + .card{margin-top:0}
/* 跳转落点：`pbJump()` 自己算偏移（元素相对 #view 的 top − 吸顶条高度）后写 scrollTop，
 * 不走 scrollIntoView，所以**不需要** `scroll-margin-top`。
 * 原先这里有一条 `#view .sec[data-pbsec]{scroll-margin-top:46px}` 配合 `data-pbsec` 标记，
 * 两样都是死代码（没有任何代码路径会用到 scroll-margin），第 324 轮自检时删掉。 */