:root{--主色:#4F46E5;--主色深:#4338CA;--主色浅:#EEF2FF;--背景:#F8FAFC;--卡片:#FFFFFF;--边框:#E2E8F0;--边框浅:#F1F5F9;--正文:#0F172A;--次要:#64748B;--弱:#94A3B8;--成功:#10B981;--成功浅:#ECFDF5;--警告:#F59E0B;--警告浅:#FFFBEB;--错误:#EF4444;--错误浅:#FEF2F2;--圆角:12px;--圆角小:8px;--字体:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--等宽:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--顶栏高:56px;--侧栏宽:214px;--内容内边距:28px;--滚动条宽:0px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--字体);font-size:14px;line-height:1.6;color:var(--正文);background:var(--背景);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}a{color:var(--主色);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}.顶栏{height:56px;border-bottom:1px solid var(--边框);background:var(--卡片);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20;flex:0 0 auto}.顶栏左{display:flex;align-items:center;gap:10px;min-width:0}.标记{width:24px;height:24px;border-radius:6px;background:var(--主色);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.标记 svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.品牌{font-size:15px;font-weight:500;white-space:nowrap}.顶栏中{display:flex;gap:4px;margin-left:28px;flex:1 1 auto;min-width:0;overflow-x:auto}.顶栏中 a{font-size:13px;color:var(--次要);padding:5px 11px;border-radius:var(--圆角小);white-space:nowrap}.顶栏中 a:hover{background:var(--边框浅);color:var(--正文);text-decoration:none}.顶栏中 a.激活{background:var(--主色浅);color:var(--主色深);font-weight:500}
.顶栏中 a{position:relative}
/* ═══════════════════════════════════════════════════════════════
   ★ HTML 的 `hidden` 属性在浏览器里只是 UA 样式表里的一条
     `[hidden]{display:none}`，**优先级最低**（属性选择器 0,1,0 但 UA 表
     整体低于作者样式）。只要我们自己写了个类设了 `display`，
     `hidden` 就彻底失效。
     本项目踩过两次：
       * `.批量条{display:flex}` → 勾选 0 项时批量条仍然显示
       * `.按钮{display:inline-flex}` / `.保存状态{display:inline-flex}`
         → 设置页的「撤销」按钮与状态提示一进页面就露在外面
     与其在每处补一条 `[hidden]` 规则（漏一处就是一个 bug），
     不如全局压一次。`!important` 在这里是必要的：它要赢过所有类选择器。
   ═══════════════════════════════════════════════════════════════ */
[hidden]{display:none !important}
.购物车徽标{display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 4px;margin-left:5px;border-radius:9px;background:var(--主色);color:#fff;font-size:11px;font-style:normal;text-align:center;vertical-align:1px}
.购物车徽标[hidden]{display:none}.顶栏右{display:flex;align-items:center;gap:14px;flex:0 0 auto}.身份{font-size:13px;color:var(--次要);white-space:nowrap}.头像{width:30px;height:30px;border-radius:999px;background:var(--主色浅);color:var(--主色深);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;flex:0 0 auto}.主体{flex:1 1 auto;max-width:1240px;width:100%;margin:0 auto;padding:28px 24px 56px}.主体.宽{max-width:1440px}.页头{margin-bottom:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}.页头 h1{font-size:20px;font-weight:500;margin-bottom:4px}.页头 p{font-size:13px;color:var(--次要)}.卡片{background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角);box-shadow:0 1px 2px rgba(15,23,42,.04)}.卡片组{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}.统计卡{background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角);padding:16px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04)}.统计键{font-size:12px;color:var(--次要);display:flex;align-items:center;gap:6px;margin-bottom:6px}.统计键 svg{width:14px;height:14px;stroke:var(--弱);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.统计值{font-size:21px;font-weight:500;letter-spacing:-.3px}.统计值.小{font-size:15px;font-family:var(--等宽)}.面板{background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角);overflow-x:auto;overflow-y:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04);margin-bottom:20px}.面板头{padding:14px 18px;border-bottom:1px solid var(--边框浅);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.面板头 h2{font-size:14px;font-weight:500}.面板头 .说明{font-size:12px;color:var(--弱);font-weight:400}.面板体{padding:18px}.面板体.紧{padding:0}.表格{width:100%;border-collapse:collapse;font-size:13px}.表格 th{text-align:left;font-weight:500;color:var(--次要);font-size:12px;padding:10px 14px;border-bottom:1px solid var(--边框);white-space:nowrap;background:var(--边框浅)}.表格 td{padding:11px 14px;border-bottom:1px solid var(--边框浅);vertical-align:middle}.表格 tr:last-child td{border-bottom:none}.表格 tbody tr:hover{background:#FAFBFC}.表格 .右{text-align:right}.表格 .中{text-align:center}.表格 .等宽{font-family:var(--等宽);font-size:12px}.空态{padding:48px 20px;text-align:center;color:var(--弱);font-size:13px}.徽标{display:inline-flex;align-items:center;gap:4px;font-size:12px;border-radius:999px;padding:2px 9px;font-weight:500;white-space:nowrap}.徽标-成功{background:var(--成功浅);color:#047857}.徽标-警告{background:var(--警告浅);color:#B45309}.徽标-错误{background:var(--错误浅);color:#B91C1C}.徽标-中性{background:var(--边框浅);color:var(--次要)}.徽标-主色{background:var(--主色浅);color:var(--主色深)}.按钮{height:34px;padding:0 14px;font-size:13px;font-weight:500;border-radius:var(--圆角小);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;transition:background .15s ease,border-color .15s ease,transform .15s ease}.按钮 svg{width:14px;height:14px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.主按钮{background:var(--主色);color:#fff}.主按钮 svg{stroke:#fff}.主按钮:hover{background:var(--主色深)}.次按钮{background:var(--卡片);color:var(--正文);border-color:var(--边框)}.次按钮 svg{stroke:var(--正文)}.次按钮:hover{background:var(--边框浅)}.危险按钮{background:var(--卡片);color:#B91C1C;border-color:#FECACA}.危险按钮 svg{stroke:#B91C1C}.危险按钮:hover{background:var(--错误浅)}.按钮:disabled{opacity:.5;cursor:not-allowed}.小按钮{height:28px;padding:0 10px;font-size:12px}.按钮组{display:flex;gap:8px;align-items:center;flex-wrap:wrap}/* display:inline-block 而不是 block：
   block 会让 <label> 撑满整行，于是**点标签右边的空白也会激活对应输入框**，
   页面到处都在闪光标。inline-block 把可点击区域收回到文字本身，
   点文字仍然会聚焦输入框（这是标签该有的行为），点空白不再有任何反应。 */
.标签{display:inline-block;font-size:13px;font-weight:500;margin-bottom:5px}.提示{font-size:12px;color:var(--弱);margin-top:5px}.输入,select,textarea{width:100%;padding:0 11px;font-family:inherit;font-size:13px;color:var(--正文);background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角小);outline:none;transition:border-color .15s ease,box-shadow .15s ease}.输入,select{height:34px}textarea{padding:8px 11px;min-height:76px;resize:vertical;line-height:1.6}.输入:focus,select:focus,textarea:focus{border-color:var(--主色);box-shadow:0 0 0 3px var(--主色浅)}.输入::placeholder,textarea::placeholder{color:var(--弱)}.字段{margin-bottom:14px}/* 高级设置折叠区（商品表单等）：默认收起，需要时展开。
   用原生 <details>，无脚本、可键盘操作。 */
/* 「买家下单时要填的信息」勾选组：一排可勾的项，勾上就要买家填。
   做成卡片式而不是裸 checkbox —— 一眼能看出「这是可选项」，点整块也能勾。 */
.勾选组{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.勾选项{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
  border:1px solid var(--边框);border-radius:var(--圆角小);padding:6px 12px;background:var(--卡片);
  user-select:none;transition:border-color .12s ease,background .12s ease}
.勾选项:hover{border-color:var(--主色)}
.勾选项 input{width:auto;height:auto;margin:0;cursor:pointer}
.勾选项:has(input:checked){border-color:var(--主色);background:var(--主色浅, rgba(37,99,235,.06));color:var(--主色);font-weight:500}

.高级区{border:1px solid var(--边框);border-radius:var(--圆角小);padding:0 14px;margin-bottom:14px;background:var(--卡片)}
.高级区 summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:500;color:var(--次要);list-style:none;display:flex;align-items:center;gap:8px}
.高级区 summary::-webkit-details-marker{display:none}
.高级区 summary::before{content:"▸";font-size:11px;color:var(--弱);transition:transform .15s ease}
.高级区[open] summary::before{transform:rotate(90deg)}
.高级区 summary:hover{color:var(--正文)}
.高级区[open] summary{border-bottom:1px solid var(--边框浅);margin-bottom:4px}

.行2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.行3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.行4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.工具条{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--边框浅)}.工具条 .输入,.工具条 select{width:auto;min-width:150px}.分页{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px;font-size:13px}.分页 a,.分页 span{padding:5px 10px;border-radius:var(--圆角小);border:1px solid var(--边框);color:var(--次要)}.分页 a:hover{background:var(--边框浅);text-decoration:none;color:var(--正文)}.分页 .当前{background:var(--主色);border-color:var(--主色);color:#fff}.弹层{position:fixed;inset:0;background:rgba(15,23,42,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 20px;z-index:50;overflow-y:auto}.弹层.显示{display:flex}.弹层盒{background:var(--卡片);border-radius:var(--圆角);width:100%;max-width:680px;box-shadow:0 12px 32px rgba(15,23,42,.18);animation:淡入 .18s ease both}@keyframes 淡入{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.弹层头{padding:16px 20px;border-bottom:1px solid var(--边框浅);display:flex;align-items:center;justify-content:space-between}.弹层头 h2{font-size:15px;font-weight:500}.弹层体{padding:20px;max-height:calc(100vh - 220px);overflow-y:auto}.弹层脚{padding:14px 20px;border-top:1px solid var(--边框浅);display:flex;justify-content:flex-end;gap:10px}.提示条{display:flex;gap:10px;padding:11px 14px;border-radius:var(--圆角小);font-size:13px;margin-bottom:14px;border:1px solid transparent}.提示条 svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.提示条信息{background:var(--主色浅);border-color:#C7D2FE;color:#3730A3}.提示条信息 svg{stroke:var(--主色)}.提示条成功{background:var(--成功浅);border-color:#A7F3D0;color:#065F46}.提示条成功 svg{stroke:var(--成功)}.提示条错误{background:var(--错误浅);border-color:#FECACA;color:#991B1B}.提示条错误 svg{stroke:var(--错误)}.提示条警告{background:var(--警告浅);border-color:#FDE68A;color:#92400E}.提示条警告 svg{stroke:var(--警告)}.提示条[hidden]{display:none}.页脚{flex:0 0 auto;text-align:center;font-size:12px;color:var(--弱);padding:0 24px 26px}.转圈{width:13px;height:13px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:999px;animation:转 .7s linear infinite;display:inline-block}@keyframes 转{to{transform:rotate(360deg)}}.截断{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* 这一档只保留「比 860 更窄时再收一点」的微调。
   ⚠ 原先这里还有 .行2/.行3/.行4 单列、.顶栏中{display:none}、.表格{display:block}，
   它们与下面 860 断点职责重叠，两边各改一半极易漏（本轮就踩了：
   860 里给 .顶栏中 设了 flex/width，却没覆盖这里的 display:none，
   结果前台导航在手机上整条不可见）。已统一到 860 那一处。 */
@media (max-width:820px){.主体{padding:20px 16px 40px}}
/* ═══════════════════ 后台侧栏布局 ═══════════════════ */
.后台布局{display:block}
.侧栏{position:fixed;left:0;top:0;bottom:0;width:214px;background:var(--卡片);border-right:1px solid var(--边框);display:flex;flex-direction:column;z-index:30}
.侧栏牌{display:block;padding:18px 18px 12px;color:inherit}
.侧栏牌:hover{text-decoration:none}
.侧栏牌名{display:block;font-size:15px;font-weight:600;letter-spacing:-.2px}
.侧栏牌副{display:block;font-size:11.5px;color:var(--弱);margin-top:3px}
.侧栏导航{flex:1 1 auto;overflow-y:auto;padding:4px 10px 14px}
.侧栏组{font-size:11px;color:var(--弱);padding:14px 10px 5px;letter-spacing:.08em}
.侧栏项{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:9px;color:var(--次要);font-size:13.5px;position:relative}
.侧栏项 svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.侧栏项:hover{background:var(--边框浅);color:var(--正文);text-decoration:none;transform:translateX(2px)}
.侧栏项.激活{background:var(--主色浅);color:var(--主色深);font-weight:500}
.侧栏项.激活::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--主色)}
.侧栏脚{flex:0 0 auto;border-top:1px solid var(--边框浅);padding:12px;display:flex;align-items:center;gap:10px}
/* ── 顶栏身份区（后台）─────────────────────────────────
   原先身份与「退出」在侧栏底部，手机上要先展开抽屉才看得到。
   现在常驻顶栏右侧：任何一页都能一眼看到当前账号并直接退出。 */
.顶栏身份区{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.顶栏身份{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.顶栏身份 b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.顶栏身份 em{font-size:11px;font-style:normal;color:var(--弱);white-space:nowrap}
.顶栏退出{font-size:12.5px;color:var(--次要);padding:6px 10px;border-radius:7px;border:1px solid var(--边框);white-space:nowrap}
/* 顶栏右上角的「个人中心」：带一个图标，比光写一个用户名显眼 */
.顶栏个人中心{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--正文);
  padding:6px 11px;border-radius:8px;background:var(--主色浅);color:var(--主色深);font-weight:500}
.顶栏个人中心:hover{background:#E0E7FF;text-decoration:none}
.顶栏个人中心 svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.顶栏退出:hover{background:var(--边框浅);color:var(--正文);text-decoration:none}

.侧栏身份{flex:1 1 auto;min-width:0}
.侧栏身份 b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.侧栏身份 em{display:block;font-style:normal;font-size:11.5px;color:var(--弱)}
.侧栏退出{font-size:12.5px;color:var(--次要);padding:6px 9px;border-radius:7px}
.侧栏退出:hover{background:var(--边框浅);color:var(--正文);text-decoration:none}
/* 手机端才出现的抽屉开关；窄屏媒体查询里会改成 inline-flex */
.汉堡{display:none}
.主区{margin-left:214px;display:flex;flex-direction:column;min-height:100vh}
.主区 .主体{max-width:none;width:100%;margin:0;padding:24px 28px 56px}
/* ═══════════════════ 手机端（≤860px）═══════════════════
   这一步是「重新设计」而不是「打补丁」，因为原来只有一个极简断点，
   只处理了侧栏与主区，表格、网格、弹层、顶栏全都没有移动端处理。
   实测会崩的三类：
     ① `.行2/.行3/.行4` 是写死列数的 grid，窄屏每列只剩几十像素 → 表单错位
     ② `.表格 th{white-space:nowrap}` + 列多（分销页 26 列）→ 横向撑破
     ③ 顶栏 `height:56px` 写死 + 不换行 → 导航被挤成一条缝
   导航按需求改成「左侧滑出抽屉」（汉堡按钮开合），不再用横滚条。 */
@media (max-width:860px){
/* ── 侧栏：改为左侧抽屉 ── */
.侧栏{
  position:fixed;left:0;top:0;bottom:0;width:262px;z-index:60;
  transform:translateX(-100%);transition:transform .22s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;box-shadow:0 8px 32px rgba(15,23,42,.18);
  flex-direction:column;border-right:1px solid var(--边框);border-bottom:none;padding:0
}
.侧栏.展开{transform:translateX(0)}
/* 抽屉展开时锁住背景滚动（由 JS 给 body 加类） */
body.抽屉打开{overflow:hidden}
.侧栏牌{display:flex;padding:14px 18px}
.侧栏牌副{display:block}
.侧栏导航{display:block;padding:8px 10px;overflow:visible;flex:none}
/* 分组标题在抽屉里要恢复显示 —— 它们让 19 个导航项变得可扫读 */
.侧栏组{display:block;font-size:11px;color:var(--弱);padding:12px 10px 6px;letter-spacing:.04em}
.侧栏项{height:42px;font-size:14px;white-space:normal;border-radius:var(--圆角小)}
.侧栏项.激活::before{display:block}
.侧栏脚{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.侧栏身份{display:block}
/* 遮罩 */
.侧栏罩{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:55;animation:淡入 .16s ease both}
.侧栏罩[hidden]{display:none}

/* ── 主区：不再为侧栏留左边距 ── */
.主区{margin-left:0}
.主区 .主体{padding:16px 14px 44px}

/* ── 汉堡按钮：只在手机出现 ── */
.汉堡{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:8px;flex:0 0 auto;
  border:1px solid var(--边框);border-radius:var(--圆角小);background:var(--卡片);
  color:var(--正文);cursor:pointer;padding:0
}
.汉堡 svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.汉堡:active{background:var(--边框浅)}

/* ── 顶栏：允许换行、去掉左右固定内边距 ── */
.顶栏{height:auto;min-height:52px;padding:8px 12px;gap:8px;flex-wrap:wrap;align-items:center}
.顶栏左{display:flex;align-items:center;min-width:0;flex:1 1 auto}
.品牌{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 前台导航（顶栏中）在手机上换行展示，不再横向挤压 */
/* 必须显式写 display:flex —— 文件里另有一条 `@media (max-width:820px){.顶栏中{display:none}}`
   （原作者在窄屏隐藏了前台导航）。那条只声明 display，本规则不覆盖它的话，
   就算 flex/width 设得再对，元素依然不显示（实测顶栏中宽度恒为 0）。 */
.顶栏中{display:flex;margin-left:0;flex:0 0 100%;width:100%;order:3;gap:2px;flex-wrap:wrap;overflow:visible;padding-bottom:2px}
.顶栏中 a{padding:7px 10px;font-size:13px}
/* 手机上顶栏很挤：身份只留头像与「退出」，姓名/角色隐藏（抽屉里也有账号信息） */
.顶栏身份{display:none}
.顶栏身份区{gap:8px}
.顶栏退出{padding:6px 9px;font-size:12px}
.顶栏右{gap:10px;flex:0 0 auto;font-size:13px}

/* ── ① 表单网格：一律单列（原来写死 2/3/4 列，窄屏必崩）── */
.行2,.行3,.行4{grid-template-columns:1fr;gap:12px}
.双列{grid-template-columns:1fr}

/* ── 页头与按钮组：竖排 + 允许换行 ── */
.页头{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
.页头 h1{font-size:18px}
.按钮组{flex-wrap:wrap;gap:8px}
.按钮组 .按钮{flex:1 1 auto;min-width:96px}
/* 面板头（标题 + 筛选按钮）也让它换行 */
.面板头{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px}

/* ── ② 表格：容器横滚 + 适当收窄内边距 ──
   不隐藏列、不改成卡片式：后台表格列多且语义强，横向滚动是信息损失最小的方案 */
.面板{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--圆角小)}
.表格{min-width:560px}
.表格 th,.表格 td{padding:9px 10px;font-size:12.5px}
.表格 th{font-size:11.5px}
/* ── ③ 操作列吸附在右侧 ──
   后台表格的「操作」列（编辑/删除/上下架/补发/退款/审核…）**恒为最后一列**，
   而表格比屏幕宽（min-width 560 > 375），手机上必须横滚到最右才看得到按钮 ——
   用户不滚就以为「没有操作入口」。这里把最后一列吸在右侧，滚不滚都在视野里。
   只对带 `.表格` 的表生效；表头与单元格同时吸附，避免错位。 */
.表格 th:last-child,.表格 td:last-child{
  position:sticky;right:0;z-index:2;
  background:var(--卡片);
  box-shadow:-6px 0 8px -6px rgba(15,23,42,.12)
}
.表格 th:last-child{background:var(--边框浅)}
/* 操作列吸住后，行 hover 的背景要跟着走，否则悬停时该格仍是卡片底色 */
.表格 tbody tr:hover td:last-child{background:var(--边框浅)}

/* ── 弹层：手机上贴底、圆角只留上方，接近原生抽屉 ── */
.弹层{padding:0;align-items:flex-end}
.弹层盒{
  max-width:100%;width:100%;border-radius:16px 16px 0 0;max-height:92vh;
  display:flex;flex-direction:column
}
.弹层头{padding:14px 16px}
.弹层体{padding:16px;max-height:none;flex:1 1 auto}
.弹层脚{padding:12px 16px;flex-wrap:wrap;gap:8px}
.弹层脚 .按钮{flex:1 1 auto}

/* ── 统计卡与图表类：单列到两列 ── */
.卡片组{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.统计卡{padding:13px 14px}
.统计值{font-size:19px}

/* ── 其它零碎：设置头、批量条、分页 ── */
.设置头{flex-wrap:wrap}
.设置头操作{flex-wrap:wrap}
.批量条{flex-wrap:wrap;gap:8px}
}

/* 超窄屏（≤430px，多数手机竖屏）再收一档 */
@media (max-width:430px){
.主体,.主区 .主体{padding:14px 10px 40px}
.顶栏{padding:8px 10px}
.品牌{font-size:14px}
.顶栏中 a{padding:6px 8px;font-size:12.5px}
.表格{min-width:500px}
.弹层盒{border-radius:14px 14px 0 0}
.按钮{height:36px;font-size:13px}
.卡片组{grid-template-columns:1fr 1fr}
}

/* ═══════════════════ 动效：短、轻、错峰 ═══════════════════ */
@keyframes 浮入{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes 淡入{from{opacity:0}to{opacity:1}}
.主体>*{animation:浮入 .28s cubic-bezier(.22,.61,.36,1) both}
.主体>*:nth-child(2){animation-delay:.05s}
.主体>*:nth-child(3){animation-delay:.1s}
.主体>*:nth-child(4){animation-delay:.15s}
.主体>*:nth-child(n+5){animation-delay:.2s}
.侧栏{animation:淡入 .2s ease both}
.侧栏导航 .侧栏项{animation:浮入 .24s ease both}
.侧栏导航 .侧栏项:nth-child(2){animation-delay:.015s}
.侧栏导航 .侧栏项:nth-child(3){animation-delay:.03s}
.侧栏导航 .侧栏项:nth-child(4){animation-delay:.045s}
.侧栏导航 .侧栏项:nth-child(5){animation-delay:.06s}
.侧栏导航 .侧栏项:nth-child(6){animation-delay:.075s}
.侧栏导航 .侧栏项:nth-child(7){animation-delay:.09s}
.侧栏导航 .侧栏项:nth-child(n+8){animation-delay:.105s}
.侧栏项,.按钮,.卡片,.KPI,.面板,.徽标,.分页 a,.顶栏中 a{transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .18s ease,transform .16s ease}
.侧栏项 svg{transition:transform .18s ease}
.侧栏项:hover svg{transform:scale(1.08)}
.面板:hover,.卡片:hover{box-shadow:0 5px 16px rgba(15,23,42,.055)}
.按钮:hover{transform:translateY(-1px)}
.按钮:active{transform:translateY(1px)}
.卡片:hover,.KPI:hover{transform:translateY(-2px)}
.表格 tbody tr{transition:background .14s ease}
.表格 tbody tr:hover{background:var(--边框浅)}
.输入:focus,select:focus,textarea:focus{outline:none;border-color:var(--主色);box-shadow:0 0 0 3px var(--主色浅)}
.弹层{animation:淡入 .16s ease both}
.弹层盒{animation:浮入 .22s cubic-bezier(.22,.61,.36,1) both}
.空态,.提示条{animation:淡入 .3s ease both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.主区 .表格{width:100%}
.主区 .面板{width:100%}
.单选组{display:flex;gap:8px;flex-wrap:wrap}
.单选项{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--边框);border-radius:var(--圆角小);font-size:13px;cursor:pointer;background:var(--卡片);transition:border-color .15s ease,background .15s ease}
.单选项:hover{border-color:var(--主色)}
.单选项 input{width:15px;height:15px;margin:0;accent-color:var(--主色)}
.单选项:has(input:checked){border-color:var(--主色);background:var(--主色浅);color:var(--主色深);font-weight:500}
/* ═══════════════════════════════════════════════════════════════
   原生弹窗组件（替代 alert / confirm / prompt）
   与站点同一套配色与圆角，跟随主题；不再出现系统弹窗那种脱节的样式。
   ═══════════════════════════════════════════════════════════════ */
#MC弹窗根{position:fixed;inset:0;z-index:200;pointer-events:none}
.MC遮罩{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;
  justify-content:center;padding:24px;opacity:0;transition:opacity .16s ease;pointer-events:auto}
.MC遮罩.显示{opacity:1}
.MC弹窗{background:var(--卡片);border-radius:var(--圆角);width:100%;max-width:420px;
  box-shadow:0 18px 48px rgba(15,23,42,.22);transform:translateY(8px) scale(.98);
  transition:transform .18s cubic-bezier(.22,.61,.36,1);overflow:hidden}
.MC遮罩.显示 .MC弹窗{transform:none}
.MC弹窗-危险 .MC弹窗头 h3{color:var(--错误)}
.MC弹窗头{padding:16px 20px 0}
.MC弹窗头 h3{font-size:15px;font-weight:600;margin:0}
.MC弹窗体{padding:12px 20px 18px}
.MC文案{font-size:13.5px;line-height:1.75;color:var(--次要);margin:0;word-break:break-word}
.MC标签{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.MC弹窗脚{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;
  background:var(--边框浅);border-top:1px solid var(--边框)}
#MC吐司区{position:fixed;top:18px;right:18px;z-index:300;display:flex;flex-direction:column;
  gap:10px;pointer-events:none;max-width:min(380px,calc(100vw - 36px))}
.MC吐司{background:var(--卡片);border:1px solid var(--边框);border-left:3px solid var(--主色);
  border-radius:var(--圆角小);padding:11px 15px;font-size:13px;line-height:1.6;
  box-shadow:0 8px 24px rgba(15,23,42,.14);color:var(--正文);
  opacity:0;transform:translateX(16px);transition:opacity .2s ease,transform .2s cubic-bezier(.22,.61,.36,1)}
.MC吐司.显示{opacity:1;transform:none}
.MC吐司-成功{border-left-color:var(--成功)}
.MC吐司-错误{border-left-color:var(--错误)}
.MC吐司-警告{border-left-color:var(--警告)}
/* ── 图片字段：预览 + 链接输入 + 上传 ───────────────────────────
   预览框固定 96×96，图片用 object-fit:cover 等比裁切填满 ——
   原图 16×16 或 4000×4000 都不会把版面撑破。 */
.图片字段{display:flex;gap:14px;align-items:flex-start}
.图片预览{width:96px;height:96px;flex:0 0 auto;border:1px dashed var(--边框);
  border-radius:var(--圆角小);background:var(--边框浅);display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.图片预览 img{width:100%;height:100%;object-fit:cover;display:block}
.图片无图{font-size:12px;color:var(--弱);text-align:center;padding:0 6px;line-height:1.4}
.图片出错{color:var(--错误)}
.图片字段右{flex:1 1 auto;min-width:0}
.图片字段右 .按钮组{margin-top:8px}
/* 列表里的小图标：等比缩放，不拉伸 */
.分类图标{width:22px;height:22px;object-fit:contain;vertical-align:-4px;border-radius:4px;background:var(--边框浅)}
/* 「不限 / 限量」开关行：选项与数字框排一行，选中限量才出现输入框 */
.开关行{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.开关行 .单选项{padding:6px 11px;font-size:12.5px}
.输入.紧凑{width:112px;min-width:0}
/* 行编辑器：一条一条加配置（自定义字段 / 批发价），不用写参数 */
.行编辑{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.行编辑项{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--边框浅);border-radius:var(--圆角小);padding:9px 11px}
.行编辑项 .输入{background:var(--卡片)}
.行编辑项 .紧凑宽{width:190px;min-width:0}
.行编辑项 .紧凑{width:96px;min-width:0}
.行编辑项 .单选项{padding:5px 9px;font-size:12px;background:var(--卡片)}
.行编辑项 .字段删除{margin-left:auto}
.行编辑空{font-size:12.5px;color:var(--弱);padding:6px 2px}
.行编辑说明{font-size:12.5px;color:var(--次要);white-space:nowrap}
/* 批量操作条：勾选后才出现，固定在底部 */
.批量条{position:sticky;bottom:0;z-index:12;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;background:var(--卡片);border:1px solid var(--主色);
  border-radius:var(--圆角);padding:11px 16px;margin-top:12px;
  box-shadow:0 -4px 18px rgba(79,70,229,.14)}
/* ★ 必须显式压掉 display:flex —— HTML 的 `hidden` 只是 UA 样式里的
   `display:none`，优先级最低，任何类选择器设了 display 都会把它盖掉。
   （踩过：批量条在「已选 0 项」时依然显示，就是这个原因。） */
.批量条[hidden]{display:none}
.批量条 .批量数{font-weight:600;color:var(--主色深)}
/* 操作区：不用通用的 `.按钮组`（它带 flex-wrap:wrap，会把按钮挤成好几行），
   这里强制单行、靠右、不收缩。 */
.批量条 .批量条操作{margin-left:auto;display:flex;align-items:center;gap:8px;
  flex:0 0 auto;flex-wrap:nowrap}
.批量条 .批量条操作 .按钮{margin:0;white-space:nowrap}
.批量勾选{width:16px;height:16px;margin:0;accent-color:var(--主色);cursor:pointer}
.批量勾选列{width:38px;text-align:center}
/* ═══════════════════════════════════════════════════════════════
   设置页的保存栏（吸顶）
   ───────────────────────────────────────────────────────────────
   以前用的是页面底部的 .批量条：表单长了以后要一路滚到底才能点保存，
   而且「有没有改动」完全看不出来，只能靠盲点。
   现在改成吸顶在页面顶部的操作条：不管滚到哪，保存/撤销都在手边，
   同时带一个「有未保存的修改」提示，改没改一目了然。
   ═══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   设置页的**吸顶块**：把「标题条 + 保存按钮 + 分组标签」钉在顶栏下面。

   ## 为什么用 position:fixed 而不是 sticky

   sticky 要推导「最近的滚动容器」，而祖先里只要有 flex / height:100% /
   overflow / transform，各浏览器的落点就可能不一样。本项目这几样全占了：

     html,body{height:100%}
     body{display:flex;flex-direction:column;min-height:100vh}
     .主区{display:flex;flex-direction:column;min-height:100vh}
     .顶栏{position:sticky;top:0}          ← 另一个 sticky
     .主体{flex:1 1 auto}
       .设置吸顶{position:sticky;…}        ← 原来这里

   本地 Chromium 实测能吸住，但操作者浏览器上不吸 —— 这类依赖布局推导的
   方案没法保证跨浏览器一致。fixed 相对**视口**定位，与滚动容器 / flex /
   overflow / transform 全无关，**物理上不可能跟着页面滚**。

   ## 对齐

   `left` 让开侧栏、`right` 让开滚动条、`padding` 与正文内边距一致 ——
   三者都走 CSS 变量（侧栏宽 / 滚动条宽 / 内容内边距），
   这样固定条与正文列左右都对齐（`right:0` 会伸到滚动条下面，差一条滚动条）。

   ## 占位

   fixed 不占文档流，正文会钻到它下面 —— 所以模板里配了一个
   `.设置吸顶占位` 空块，高度由 JS 量固定条真实高度写回（窄屏换行会变高）。
   ══════════════════════════════════════════════════════════════════ */
.设置吸顶{
  position:fixed;
  top:var(--顶栏高);
  left:var(--侧栏宽);
  right:var(--滚动条宽);
  z-index:16;
  /* 不透明底色：正文从它下面滚过时不能透出来 */
  background:var(--背景);
  /* 下留白给正文一点间隙；左右与正文列对齐 */
  padding:0 var(--内容内边距) 14px;
}
/* 占位块：撑出与固定条同高的空间，避免正文被盖住（高度由 JS 写） */
.设置吸顶占位{display:block}

.设置头{display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角);
  padding:14px 18px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:box-shadow .2s ease,border-color .2s ease}
/* 吸住时才浮起来 —— 静止时看起来就是一块普通卡片，不突兀 */
.设置头.吸住{border-color:#C7D2FE;box-shadow:0 10px 26px rgba(79,70,229,.13)}
.设置头 h1{font-size:18px;font-weight:500;margin-bottom:3px}
.设置头 p{font-size:12.5px;color:var(--次要)}
.设置头文字{min-width:0;flex:1 1 auto}
.设置头操作{display:flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.保存状态{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:5px 11px;border-radius:999px;white-space:nowrap}
/* 必须显式压掉 display —— HTML 的 hidden 优先级最低（同 .批量条 的坑） */
.保存状态[hidden]{display:none}
.保存状态.未保存{background:var(--警告浅);color:#B45309}
.保存状态.已保存{background:var(--成功浅);color:#047857}
.保存状态.保存中{background:var(--主色浅);color:var(--主色深)}
.保存状态 .点{width:6px;height:6px;border-radius:999px;background:currentColor;flex:0 0 auto}
/* 表单区块在吸顶栏下面留一点呼吸，避免贴太紧 */
.设置块{margin-bottom:18px}
/* 测试类操作的即时结果（发送测试邮件等） */
.操作结果{font-size:12.5px;padding:9px 12px;border-radius:var(--圆角小);margin-top:10px;
  border:1px solid transparent;white-space:pre-wrap;word-break:break-all}
.操作结果[hidden]{display:none}
.操作结果.成功{background:var(--成功浅);border-color:#A7F3D0;color:#065F46}
.操作结果.失败{background:var(--错误浅);border-color:#FECACA;color:#991B1B}
.操作结果.进行中{background:var(--主色浅);border-color:#C7D2FE;color:#3730A3}
/* 密码字段：输入框 + 显示/隐藏按钮同排 */
.密码字段{display:flex;gap:8px;align-items:center}
.密码字段 .输入{flex:1 1 auto;min-width:0}
.密码字段 .按钮{flex:0 0 auto}
/* 站点公告条：前台顶部一条醒目提示 */
.站点公告{display:flex;align-items:flex-start;gap:9px;background:var(--警告浅);
  border-bottom:1px solid #FDE68A;color:#92400E;font-size:13px;line-height:1.7;
  padding:9px 24px;white-space:pre-wrap}
.站点公告 svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;fill:none;
  stroke:var(--警告);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 通知模板编辑块（邮件设置页） */
.模板块{border:1px solid var(--边框浅);border-radius:var(--圆角);padding:14px 16px;margin-bottom:12px;background:#FCFCFD}
.模板块:last-child{margin-bottom:0}
.模板块:hover{border-color:var(--边框)}
.模板头{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.模板头 b{font-size:13px}
.模板头 .等宽{color:var(--次要);font-size:12px}
.模板块 textarea.输入{font-family:inherit;line-height:1.65;resize:vertical;min-height:76px}
/* 统计报表：KPI 卡片网格 + 水平占比条 */
.卡片网格{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.卡片标{font-size:12px;color:var(--次要)}
.卡片值{font-size:22px;font-weight:600;margin:6px 0 4px;letter-spacing:-.01em}
.卡片注{font-size:12px;color:var(--弱)}
.条形底{height:8px;border-radius:99px;background:var(--边框浅);overflow:hidden;min-width:80px}
.条形{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--主色),var(--主色浅));transition:width .4s cubic-bezier(.22,.61,.36,1)}
.双列{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:1100px){.双列{grid-template-columns:1fr}}
/* 工单对话（前台详情 / 后台弹层共用） */
.信息块{border:1px solid var(--边框浅);border-radius:var(--圆角);padding:12px;background:#FCFCFD;max-height:52vh;overflow-y:auto}
.对话行{margin-bottom:12px}
.对话行:last-child{margin-bottom:0}
.对话头{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:4px}
.对话体{padding:10px 12px;border-radius:var(--圆角小);background:var(--卡片);border:1px solid var(--边框浅);white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.65}
.对话行-客服 .对话体{background:var(--主色浅);border-color:transparent}

/* ── 设置页顶部标签页 ──────────────────────────────────────
   为什么要标签页：站点设置原先把所有分组**竖着堆**在一页里
   （基本信息 / 联系方式 / 公告 / 注册 / 工单），滚到下面
   就忘了上面是什么，运营看着乱。改成顶部标签一次只看一组。

   为什么用 `position:sticky` 而不是固定高度滚动区：
   固定高度滚动区在手机上会把内容挤成一条缝，而 sticky 在
   窄屏下自然退化成普通块（见下面媒体查询）。 */
.设置标签{
  display:flex;gap:4px;flex-wrap:wrap;
  /* 不自己吸顶 —— 跟着外面的 `.设置吸顶` 一起吸附（见那段说明） */
  background:var(--卡片);border:1px solid var(--边框);border-radius:var(--圆角);
  padding:6px;margin-bottom:0;
}
.设置标签项{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font:inherit;color:var(--次要);
  padding:7px 14px;border-radius:calc(var(--圆角) - 2px);
  white-space:nowrap;
}
.设置标签项:hover{background:var(--悬停);color:var(--正文)}
.设置标签项[aria-selected="true"]{
  background:var(--主色);color:#fff;font-weight:500;
}
/* 标签对应的面板：默认全藏，选中的显示 */
.设置块[hidden]{display:none}

/* 断点变量：与下面 `.主区{margin-left:0}` / `.主区 .主体{padding:…}` 对齐 */
@media (max-width:860px){
  :root{--侧栏宽:0px;--内容内边距:14px}
}
@media (max-width:430px){
  :root{--内容内边距:10px}
}

@media (max-width:760px){
  /* 窄屏下不钉住（占掉本就紧张的竖向空间）：改回普通块、自己占流，
     占位块随之失效（JS 会把占位高度设为 0） */
  .设置吸顶{position:static;padding:0}
  .设置吸顶占位{display:none}
  .设置标签项{padding:6px 10px;font-size:13px}
}