/* ==================================================================
 * assets/css/admin.css —— 后台样式
 * ================================================================== */

:root{
  --bg:#f5f6f8;
  --card:#ffffff;
  --line:#e3e6ea;
  --text:#1f2328;
  --muted:#6b7280;
  --brand:#1a73e8;
  --brand-d:#1558bf;
  --ok:#0f9d58;
  --warn:#b45309;
  --danger:#d93025;
  --radius:8px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);

  /* 侧边栏（浅色系，2026-10-12 由深色 #111827 改为浅色）
     单独成组而不是继续散落硬编码：侧边栏与移动端顶栏、
     抽屉共用这一套，只改这一组即可整体换肤。 */
  --side-bg:#ffffff;
  --side-line:#e6e9ee;      /* 侧边栏右边框 / 底部页脚分隔线 */
  --side-text:#3f4650;      /* 菜单默认文字 */
  --side-hover:#eef1f5;     /* 悬停底色 */
  --side-brand:#1f2328;     /* 品牌区站名 */
  --side-drawer:0 8px 40px rgba(16,24,40,.14);  /* 移动端抽屉投影 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  background:#f0f2f5;padding:1px 5px;border-radius:4px;font-size:12.5px}
pre{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:12.5px;
  white-space:pre-wrap;word-break:break-all}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:15px;margin:0 0 14px}
h3{font-size:13.5px;margin:20px 0 10px;color:#374151}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:210px;flex:0 0 210px;background:var(--side-bg);
  border-right:1px solid var(--side-line);color:var(--side-text);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
/* 品牌区：站名一行 + 版本号一行（LOGO 已按要求移除） */
.brand{display:flex;flex-direction:column;gap:2px;padding:18px 16px 14px}
.brand-text{font-size:13.5px;font-weight:600;color:var(--side-brand);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-ver{font-size:11px;color:var(--muted);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;flex-direction:column;padding:6px 8px;flex:1;overflow:auto}
/* 菜单项：左侧 3px 指示条，选中时才显形（浅色底上比块状高亮更轻） */
.nav a{
  color:var(--side-text);padding:9px 12px;border-radius:6px;font-size:13.5px;
  display:flex;align-items:center;justify-content:space-between;
  border-left:3px solid transparent;
}
.nav a:hover{background:var(--side-hover);color:var(--side-brand);text-decoration:none}
/* 选中项：淡蓝底 + 深蓝字 + 蓝色指示条（不用实心蓝块，浅色系下不突兀）
   注意用 --brand-d 而不是 --brand：#1a73e8 在 #e8f1fe 上只有 3.96:1，
   达不到正文 4.5:1；#1558bf 是 5.7:1。 */
.nav a.on{
  background:#e8f1fe;color:var(--brand-d);font-weight:600;
  border-left-color:var(--brand);
}
.nav a.on:hover{background:#dceafd;color:var(--brand-d)}
.nav .dot{
  background:var(--danger);color:#fff;font-style:normal;font-size:11px;
  min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 5px;
}
.sidebar-foot{padding:12px 16px;border-top:1px solid var(--side-line);font-size:12.5px}
.sidebar-foot .who{color:var(--muted);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-foot .logout{color:var(--danger)}

/* ---------------------------------------------------------------------
 * .main —— 右侧内容区
 * ---------------------------------------------------------------------
 * 注意：这里**不能**用 max-width 限制 .main 自身。
 *   .main 是 flex 子项，若设 max-width，当视口宽度超过
 *   「侧栏 210 + max-width」时，右侧会留下一大片空白（背景色虽同色，
 *   但卡片不铺满，视觉上像「内容没占满」）。
 *   实测：max-width:1400px 时，1920px 屏幕右侧空 310px，2560px 空 950px。
 *
 * 正确做法：.main 铺满（flex:1，不设 max-width），
 *   由内层 .main-inner 限制「文字内容」的易读宽度并居中。
 *   这样背景铺满右侧，文字又不会在超宽屏上拉成一行。
 * ------------------------------------------------------------------- */
.main{flex:1;min-width:0;padding:22px 26px 60px}
.main-inner{max-width:1400px;margin:0 auto}

/* ---------- 页头 ---------- */
.page-head{margin-bottom:18px}
.page-head .muted{margin:0}

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;box-shadow:var(--shadow);
}
.card.narrow{max-width:520px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-head h2{margin:0}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-2 > *{min-width:0}       /* grid 项默认 min-width:auto 会被内容撑开，必须归零 */
@media (max-width:1000px){.grid-2{grid-template-columns:1fr}}

/* ---------- 接入文档（code.php） ---------- */
/* 步骤条：1-2-3 编号圆点 + 标题 + 说明 */
.steps{counter-reset:st;list-style:none;padding:0;margin:0}
.steps > li{
  counter-increment:st;position:relative;padding:0 0 18px 34px;margin:0;
  border-left:2px solid var(--line);
}
.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.steps > li::before{
  content:counter(st);position:absolute;left:-11px;top:0;
  width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.steps > li > b{display:block;font-size:13.5px;margin-bottom:3px;color:var(--text)}
.steps > li > p{margin:0 0 8px;font-size:12.5px;color:var(--muted);line-height:1.7}

/* 属性说明表：左列属性名（等宽），右列含义 */
.attr-table{width:100%;border-collapse:collapse;font-size:12.5px}
.attr-table th{
  text-align:left;font-weight:600;color:var(--muted);font-size:12px;
  padding:7px 10px;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap;
}
.attr-table td{padding:7px 10px;border-bottom:1px solid #f0f2f5;vertical-align:top}
.attr-table tr:last-child td{border-bottom:0}
.attr-table code{font-size:12px;white-space:nowrap}
.attr-table .attr-def{color:var(--muted);white-space:nowrap;width:1%}

/* 代码块内的注释与强调 */
.code-box pre .cmt{color:#6a737d}
.code-box pre .kw{color:#005cc5}
.code-box pre .str{color:#032f62}

/* 提示条（浅蓝底，用于「注意事项」） */
.hint{
  background:#f0f6ff;border:1px solid #cfe3ff;border-left:3px solid var(--brand);
  border-radius:6px;padding:10px 13px;margin:10px 0 0;font-size:12.5px;line-height:1.75;color:#1f3d5c;
}
.hint b{color:#0b3a75}
.hint code{background:#dbeafe;padding:1px 5px}

/* 锚点目录 */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.toc a{
  font-size:12.5px;padding:4px 11px;border-radius:14px;
  background:#f1f3f4;color:#374151;border:1px solid var(--line);
}
.toc a:hover{background:var(--brand);color:#fff;text-decoration:none;border-color:var(--brand)}

/* 分组小标题 */
.doc-sub{font-size:12px;font-weight:600;color:var(--muted);margin:16px 0 8px;
  text-transform:none;letter-spacing:.02em}
.doc-sub:first-child{margin-top:4px}

@media (max-width:900px){
  .steps > li{padding-left:28px}
  .attr-table,.attr-table tbody,.attr-table tr,.attr-table td{display:block;width:auto}
  .attr-table thead{display:none}
  .attr-table tr{border-bottom:1px solid var(--line);padding:6px 0}
  .attr-table td{border:0;padding:3px 10px}
  .attr-table td::before{content:attr(data-th) "：";color:var(--muted);font-size:11.5px}
  .attr-table td.attr-def::before{content:""}
  .attr-table td.attr-def{display:none}
}

/* ---------- KPI ---------- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi-row > *{min-width:0}
@media (max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow)}
.kpi-label{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.kpi-num{font-size:26px;font-weight:700;line-height:1.1}
.kpi-num small{font-size:14px;color:var(--muted);font-weight:500}

/* ---------- 表格 ---------- */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;
  padding:8px 10px;border-bottom:1px solid var(--line);background:#fafbfc;white-space:nowrap;
}
.table td{padding:9px 10px;border-bottom:1px solid #f0f2f5;vertical-align:top}
.table tbody tr:hover{background:#fafbfc}
.table.compact td{padding:6px 10px}
.table .right{text-align:right}
.table .center{text-align:center}
.row-dim{opacity:.55}
.nowrap{white-space:nowrap}
.w60{width:60px}.w180{width:180px}

.tag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:10px;line-height:1.7;white-space:nowrap}
.tag.on{background:#e6f4ea;color:#0f7b3f}
.tag.off{background:#f1f3f4;color:#6b7280}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:7px 14px;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:var(--text);cursor:pointer;font-size:13px;line-height:1.4;
  vertical-align:middle;text-align:center;transition:.12s;
}
.btn:hover{background:#f7f8fa;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
.btn.danger{background:#fff;border-color:#f2b8b5;color:var(--danger)}
.btn.danger:hover{background:#fdecea}
.btn.small{padding:5px 11px;font-size:12.5px}
.btn.tiny{padding:2px 8px;font-size:12px}
.btn.block{width:100%;padding:10px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn + .btn{margin-left:4px}
form.inline{display:inline-block;margin:0}
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.inline-form input[type=text],.inline-form input[type=number]{padding:6px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px}

/* ---------- 表单 ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid > *{min-width:0}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:13px;color:#374151;margin-bottom:2px}
label.check{display:flex;align-items:center;gap:8px;padding-top:22px;font-size:13px}
label.check input{width:auto;margin:0}
label .req{color:var(--danger)}
label small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;font-weight:400}
/* 类型选择器必须把 tel / url / email / search 一起列上。
   漏了它们，这些输入框就退回浏览器默认样式（inline-block、默认宽 177px、无 margin-top），
   会被塞进标签文字同一行 —— 标签一长就压字，看上去像乱码
   （「首个客服 · 企业微信客服链接」正是这样被压住的）。 */
input[type=text],input[type=password],input[type=number],
input[type=tel],input[type=url],input[type=email],input[type=search],
select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:6px;
  font-size:13.5px;font-family:inherit;background:#fff;margin-top:4px;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
textarea{resize:vertical;line-height:1.6}
select{margin-top:4px}
.form-actions{margin-top:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.key-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.key-row input{margin:0}
.inline-label{display:flex;align-items:center;gap:10px;font-size:13px}
.inline-label input,.inline-label select{width:auto;min-width:220px;margin:0}

/* ---------- 实时格式校验状态 ----------
 * 三态：
 *   .fv-ok    通过（绿）—— 可提交
 *   .fv-bad   不通过（红）—— 阻止提交，必须给出具体原因
 *   .fv-warn  通过但有提醒（黄）—— 不阻止提交
 * 状态加在 <label> 上，输入框边框与提示文字一起变色，
 * 用户不用来回比对就能看出「哪一栏、错在哪」。
 * 选择器与上面的 input[...] 同权重，靠「写在后面」生效，因此不需要 !important。
 */
.fv-msg{display:block;font-size:11.5px;line-height:1.5;margin-top:4px;font-weight:600}
.fv-msg::before{margin-right:4px;font-weight:700}
.fv-ok   > .fv-msg{color:#0f7b3f}
.fv-ok   > .fv-msg::before{content:"\2713"}   /* ✓ */
.fv-bad  > .fv-msg{color:var(--danger)}
.fv-bad  > .fv-msg::before{content:"\2715"}   /* ✕ */
.fv-warn > .fv-msg{color:#8a5a00}
.fv-warn > .fv-msg::before{content:"!"}

.fv-ok   input,.fv-ok   textarea{border-color:#7fc79a;background:#f6fdf8}
.fv-bad  input,.fv-bad  textarea{border-color:#e5928c;background:#fffafa}
.fv-warn input,.fv-warn textarea{border-color:#e8c96b;background:#fffdf5}
/* 聚焦时回到品牌蓝：状态色是「结果」，焦点色是「我正在改这一栏」，两者不能混 */
.fv-ok input:focus,.fv-bad input:focus,.fv-warn input:focus,
.fv-ok textarea:focus,.fv-bad textarea:focus,.fv-warn textarea:focus{
  border-color:var(--brand);box-shadow:0 0 0 3px rgba(26,115,232,.12)
}

/* ---------- 提示 ---------- */
.alert{padding:11px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;border:1px solid}
.alert.ok{background:#e6f4ea;border-color:#b7e1c4;color:#0f7b3f}
.alert.warn{background:#fef7e0;border-color:#fde293;color:#8a5a00}
.alert.danger{background:#fdecea;border-color:#f5c6c2;color:#a5271c}
.alert.info{background:#e8f0fe;border-color:#c6dafc;color:#1a4d9e}
.flash{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px}
.flash.ok{background:#e6f4ea;color:#0f7b3f}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.ok-text,.ok{color:var(--ok)}
.warn-text{color:var(--warn)}
.danger-text{color:var(--danger)}
.align-right{text-align:right}

/* ---------- 趋势柱 ---------- */
.bars{display:flex;align-items:flex-end;gap:5px;height:150px;padding-top:8px;
  min-width:0;overflow:hidden}          /* 防止 14 根柱子撑破父容器 */
.bar-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bar{width:100%;max-width:34px;background:linear-gradient(180deg,#4a90e2,#1a73e8);
  border-radius:3px 3px 0 0;min-height:3px;transition:.2s}
.bar-x{font-size:10.5px;color:var(--muted);margin-top:5px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:clip}
.minibar{height:9px;background:linear-gradient(90deg,#4a90e2,#1a73e8);border-radius:5px;min-width:3px}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.tabs a{padding:9px 16px;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--text);text-decoration:none}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ---------- 代码块 ---------- */
.code-box{position:relative;background:#f6f8fa;border:1px solid var(--line);
  border-radius:6px;padding:12px 14px;margin:8px 0;
  max-width:100%;overflow:hidden}       /* 防止长代码行撑破卡片 */
.code-box pre{color:#24292f;white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;
  max-width:100%}
.code-box .copy{position:absolute;top:8px;right:8px}
.copy.done{background:#e6f4ea;border-color:#b7e1c4;color:#0f7b3f}

/* 卡片与其内部所有直接子元素都不得横向溢出 */
.card{max-width:100%;overflow-wrap:anywhere}
.card > *{max-width:100%}

/* ---------- 渠道编辑 ----------
   一条记录 = 头部一行（名称 / 说明 / 排序 / 删除）
            + 二维码整行（缩略图 + 上传/替换/预览/删图 + alt / 专属微信号）
            + 下方三列（电话 / 可复制文本 / 外链）。
   四个字段同时可见可编辑，不再用下拉框切换分类。 */
.ch-list{margin:10px 0}
.ch-item{display:block;padding:12px;border:1px solid var(--line);
  border-radius:8px;margin-bottom:10px;background:#fafbfc}
.ch-item > *{min-width:0}
.ch-item.is-busy{opacity:.72}
/* 主推 = 排序值最小的那条记录：不再显示「主推」文字徽标，只把卡片描边高亮 */
.ch-item.is-primary{border-color:var(--primary);background:#f5f9ff;box-shadow:0 0 0 1px var(--primary) inset}

/* 头部行 */
.ch-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--line)}
.ch-head .ch-name{flex:1 1 180px}
.ch-head .ch-desc{flex:1 1 150px}
.ch-sort-wrap{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ch-sort-label{font-size:12px;color:var(--muted);white-space:nowrap}
.ch-item .ch-sort{flex:0 0 72px;text-align:center}
.ch-item .del{flex:0 0 auto;padding:6px 10px;color:var(--danger);background:#fff;
  border:1px solid #f2b8b5;border-radius:6px;cursor:pointer;font-size:14px;line-height:1}
.ch-item .ch-progress{font-size:12px;color:var(--muted);padding-top:6px}

/* 字段区：二维码整行（跨满 3 列）+ 电话 / 可复制文本 / 外链 三列等宽 */
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ch-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.ch-lab{font-size:12px;color:var(--muted);font-weight:500;line-height:1.2}
.ch-cell-qr-full{grid-column:1 / -1}
.ch-item input{font-size:12.5px;padding:6px 9px}
.ch-item .ch-value{width:100%}

/* 二维码行：左「缩略图 + 按钮」，右「alt / 专属微信号」 */
.ch-qr-line{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.ch-cell-qr{flex:0 0 auto}
.ch-qr-extra{flex:1 1 240px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ch-qr-extra input{width:100%}

/* 渠道二维码上传控件 */
.ch-qr{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ch-qr-thumb{flex:0 0 auto;width:64px;height:64px;padding:0;border:1px dashed var(--line);
  border-radius:6px;background:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.ch-qr-thumb:hover{border-color:var(--primary)}
.ch-qr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ch-qr-thumb span{font-size:22px;color:var(--muted);line-height:1}
.ch-qr-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1 1 150px}
.ch-qr-acts .btn.tiny{padding:4px 9px;font-size:12px}
.ch-qr-hint{font-size:12px;color:var(--muted)}
.ch-qr-meta{flex:1 1 100%;font-size:11.5px;color:var(--muted);word-break:break-all}

/* 渠道二维码大图预览 */
.ch-lightbox{position:fixed;inset:0;background:rgba(16,20,28,.82);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:24px;cursor:zoom-out}
.ch-lightbox img{max-width:min(78vw,520px);max-height:70vh;background:#fff;padding:10px;
  border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.42)}
.ch-lightbox-cap{color:#fff;font-size:13px;text-align:center;line-height:1.7}
.ch-lightbox-cap b{display:block;font-size:14px;margin-bottom:2px}
.ch-lightbox-cap span{display:block;opacity:.82;word-break:break-all}

/* ==================================================================
 * 微信客服账号（主推 + 备用）
 * 设计要点：卡片内「手机号」与「二维码」是同一个账号的两个字段，
 * 视觉上刻意放在同一张卡里，避免管理员误以为可分别维护。
 * ================================================================== */
.wx-group{margin:0 0 18px}
.wx-group-head{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line);font-size:13.5px}
.wx-group-head b{font-weight:600}
.wx-group-count{font-size:11.5px;color:var(--muted);background:#f1f3f4;
  border-radius:10px;padding:1px 9px}
.wx-empty{color:var(--muted);font-size:12.5px;margin:0;padding:14px;
  background:#fafbfc;border:1px dashed var(--line);border-radius:8px;text-align:center}
.wx-empty.err{color:var(--danger);border-color:#f2b8b5;background:#fff6f5}

/* 左侧图片模块：最小 400px，图片多宽就撑多宽（原图 1:1，不做任何缩放）。
   用 minmax(400px,max-content) 而不是固定 400px：图窄时列宽仍是 400px（视觉不变），
   图宽时列宽跟着长，右侧信息区再自适应剩余空间。
   align-items:start 必须留着 —— 否则 grid 行会被右侧信息区的高度拉高，
   左侧图片按钮被 stretch 后图片会显得「高度很低」。 */
.wx-card{display:grid;grid-template-columns:minmax(400px,max-content) 1fr;gap:14px;align-items:start;
  padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;background:#fff}
.wx-card > *{min-width:0}
/* 主推卡片用左侧色条强调，与备用一眼可辨 */
.wx-card.is-primary{border-color:var(--brand);background:#fbfdff;
  box-shadow:inset 3px 0 0 var(--brand)}
.wx-card.is-off{opacity:.66;background:#fafbfc}
.wx-card.is-draft{border-style:dashed;background:#fcfcfd}
.wx-card.has-error{border-color:#f2b8b5;background:#fffafa}

/* 左列不再写死 width:400px —— 写死会让宽图被 max-width 压扁，
   高度跟着按比例缩水（这就是「图片高度很低」的成因）。
   改成 min-width:400px：窄图时左侧仍是 400px 观感不变，
   宽图时由 max-content 把列撑到图片实际宽度，1:1 显示不缩放。 */
.wx-card-left{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:400px}
/* 图片按钮：高度完全交给图片本身（height:auto + align-items:flex-start），
   横向居中 + 顶部对齐，窄图两侧留白对称、竖图不会上下漂。 */
/* min-height 是兜底：图片请求挂住（既没 load 也没 error）时，
   容器也不会塌成一条线，页面至少还是个「方框」。 */
.wx-thumb{width:auto;height:auto;min-height:120px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.wx-thumb:hover{border-color:var(--brand)}
.wx-thumb:disabled{opacity:.5;cursor:not-allowed}
/* 原图 1:1 直出：既不锁宽高、也不设 max-width/max-height，
   元素宽高完全等于图片自然像素 = 实际上传图片的高度。 */
.wx-thumb-img{width:auto;height:auto;max-width:none;max-height:none;object-fit:fill;display:block}
.wx-thumb-empty{width:400px;height:200px;display:flex;align-items:center;justify-content:center;
  background:#f6f8fa;color:#c3c8ce;font-size:30px;line-height:1}
/* 图片加载失败占位：必须有明确宽高，否则 .wx-thumb-img 高度塌成 0、卡片左侧整块空白。
   顺带把失败原因（文件名 / 地址）印出来，省得管理员只能干瞪眼。 */
.wx-thumb-fail{width:400px;height:200px;box-sizing:border-box;padding:14px;overflow:hidden;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;justify-content:center;
  background:#fff6f6;color:#b42318;font-size:12px;line-height:1.5;text-align:left}
.wx-thumb-fail b{font-size:13px;margin-bottom:2px}
.wx-thumb-fail span{color:#7a271a;opacity:.85;word-break:break-all}

.wx-card-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.wx-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wx-prio{font-size:11.5px;color:var(--muted);background:#f1f3f4;border-radius:10px;padding:1px 9px;
  white-space:nowrap}
/* 排序输入：数字越小越靠前，排第一者即为主推。
   标签在前、输入框在后，读起来是「排序 [10]」而不是孤零零一个数字框。 */
.wx-sort-wrap{display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px;border:1px solid var(--line);border-radius:7px;background:#f7f9fb}
.wx-sort-wrap small{font-size:12px;color:var(--muted);white-space:nowrap;font-weight:600}
.wx-sort-in{width:64px;font-size:13px;padding:4px 6px;border:1px solid var(--line);
  border-radius:6px;text-align:center;background:#fff}
.wx-sort-in:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 2px rgba(64,155,255,.15)}
.wx-badge{font-size:11.5px;padding:2px 9px;border-radius:10px;line-height:1.6;white-space:nowrap}
.wx-badge-primary{background:var(--brand);color:#fff}

.wx-field{display:flex;flex-direction:column;gap:3px}
.wx-inp{width:100%;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:6px;background:#fff}
.wx-inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(9,105,218,.1)}
.wx-inp:disabled{opacity:.6}
.wx-name{max-width:260px}
.wx-phone{max-width:260px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px}

.wx-msg{font-size:11.5px;line-height:1.5;color:var(--muted);min-height:1px}
.wx-msg.err{color:var(--danger)}
.wx-msg.ok{color:#0a7d28}
/* 非阻断提示（如：手机号已被别的客服使用，但仍可保存） */
.wx-msg.hint{color:#a16207}

/* 带标签的字段行：标签在上、输入在下，弱化视觉噪音但保留可读性 */
.wx-label{font-size:11.5px;color:var(--muted);line-height:1.4}
.wx-hint{font-size:11px;color:#9aa2ab;line-height:1.4}
.wx-qylink{max-width:100%;font-size:12.5px}
.wx-remark{max-width:100%;font-size:12.5px}

.wx-meta{font-size:11.5px;color:var(--muted);line-height:1.6;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wx-meta-file{font-size:11px;background:#f1f3f4;border-radius:4px;padding:1px 6px}
.wx-meta-none{color:#a06000}

.wx-card-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.wx-card-acts .btn + .btn{margin-left:0}
.wx-progress{font-size:11.5px;color:var(--brand);background:#f0f6ff;
  border-radius:6px;padding:6px 10px}

/* 灯箱预览：尽量按原始像素展示，只在超出视口时才等比缩小 */
.wx-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(15,20,28,.78);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:32px;cursor:zoom-out}
.wx-lightbox img{max-width:min(1200px,92vw);max-height:86vh;background:#fff;
  border-radius:10px;padding:12px;object-fit:contain}
.wx-lightbox-cap{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  color:#e8ebef;font-size:12.5px;text-align:center}
.wx-lightbox-cap b{color:#fff;font-size:13.5px}
.wx-lightbox-cap code{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 6px;font-size:11.5px}
/* 大图也加载失败时的占位（窄图/断链），避免灯箱里只剩一块空白 */
.wx-lightbox-fail{max-width:min(560px,90vw);padding:22px 26px;border-radius:10px;
  background:#fff;color:#b42318;font-size:13px;line-height:1.6;word-break:break-all}

/* 轻提示 */
.wx-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(14px);
  z-index:10000;background:#1f883d;color:#fff;font-size:12.5px;padding:9px 18px;
  border-radius:20px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  box-shadow:0 6px 20px rgba(0,0,0,.18);max-width:88vw;text-align:center}
.wx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.wx-toast.err{background:var(--danger)}

/* 移动端：转单列，图片模块改为满宽。手机上不能让原图 1:1 顶破屏幕，
   这里恢复 max-width:100% + max-height:60vh 的等比约束（桌面端才 1:1）。 */
@media (max-width:768px){
  .wx-card{grid-template-columns:1fr;gap:10px;padding:12px}
  .wx-card-left{min-width:0;flex-direction:row;justify-content:flex-start}
  .wx-thumb{width:100%}
  .wx-thumb-img{max-width:100%;max-height:60vh;object-fit:contain}
  .wx-thumb-empty,.wx-thumb-fail{width:100%;height:160px}
  .wx-name,.wx-phone{max-width:none}
  .wx-card-acts{gap:5px}
  .wx-card-acts .btn{flex:1 1 auto;padding:6px 10px;font-size:12.5px;text-align:center}
}
@media (max-width:420px){
  .wx-card-acts .btn{flex:1 1 46%}
}


/* ---------- 继承提示 ---------- */
.inherit-hint{background:#f6f8fa;border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;margin-bottom:14px;font-size:12.5px}
.inherit-hint .chip{display:inline-block;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:2px 10px;margin:3px 6px 3px 0}
em[class^="src-"]{font-style:normal;font-size:11px;color:var(--muted);margin-left:4px}
em.src-site{color:var(--brand)}
em.src-group{color:#7c3aed}
em.src-global{color:var(--muted)}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:13px}

/* ==================================================================
 * 登录页 —— 左右分栏（2026-10-12 改版）
 * ------------------------------------------------------------------
 * 桌面端：左侧品牌栏（蓝色渐变，占 33%）+ 右侧浅灰表单区
 * 窄屏：左栏整体隐藏，只留居中的登录卡片
 *
 * 为什么不用「居中大卡片 + 深色背景」的老写法：
 *   分栏版在窄屏能自然退化成单栏，不需要额外的移动端布局分支；
 *   且左侧承担了站名、卖点、版本这些「不参与登录」的信息，
 *   右侧只留表单，视觉焦点更集中。
 * ================================================================== */
.login-page{background:#f4f6f9;min-height:100vh;min-height:100dvh;padding:0}
.login-wrap{display:flex;min-height:100vh;min-height:100dvh}

/* ---------- 左栏 · 品牌区 ---------- */
.login-brand{
  flex:0 0 34%;max-width:400px;min-width:300px;
  display:flex;flex-direction:column;
  padding:34px 36px 26px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#2b7cf6 0%,#1f5fd8 58%,#1a4fc0 100%);
}
/* 右下角的大圆装饰（参考图里的同款几何元素） */
.login-brand::after{
  content:'';position:absolute;right:-90px;bottom:-90px;width:280px;height:280px;
  border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;
}
.login-brand::before{
  content:'';position:absolute;right:36px;bottom:-140px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;
}

.lb-top{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.lb-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#fff;
}
.lb-name{min-width:0;line-height:1.35}
.lb-name b{display:block;font-size:14px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-name span{display:block;font-size:11.5px;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 中部主标题：撑开左栏剩余空间并垂直居中 */
.lb-mid{margin:auto 0;position:relative;z-index:1;padding:36px 0 26px}
.lb-mid h2{
  font-size:29px;line-height:1.42;font-weight:700;color:#fff;
  margin:0 0 12px;letter-spacing:.4px;
}
.lb-mid p{
  font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.78);margin:0;
}

/* 底部卖点清单 */
.lb-feats{list-style:none;margin:0 0 26px;padding:0;position:relative;z-index:1}
.lb-feats li{
  position:relative;padding-left:20px;margin-bottom:9px;
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.8);
}
.lb-feats li:last-child{margin-bottom:0}
/* 圆点：14px 直径，与参考图一致 */
.lb-feats li::before{
  content:'';position:absolute;left:0;top:calc(.8em - 7px);width:14px;height:14px;
  border-radius:50%;background:rgba(255,255,255,.22);
}
/* 勾：两条线拼成，纯 CSS 不依赖字体图标。
   行高 1.6 × 12.5px = 20px，文字中线在 10px；圆点中心即 10px，
   勾中心略高 1.5px 才视觉居中。 */
.lb-feats li::after{
  content:'';position:absolute;left:4.2px;top:calc(.8em - 3px);
  width:3px;height:6.5px;border:solid #fff;border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg);
}

.lb-foot{
  font-size:11.5px;color:rgba(255,255,255,.6);
  position:relative;z-index:1;
}

/* ---------- 右栏 · 表单区 ---------- */
.login-main{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:40px 24px;background:#f4f6f9;
}
.login-page .login-box{width:100%;max-width:372px}
.login-box{
  background:#fff;border-radius:12px;padding:34px 32px 28px;
  box-shadow:0 10px 30px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.05);
}
.login-box h1{font-size:20px;margin:0 0 5px;text-align:center;letter-spacing:.2px}
.login-box .sub{text-align:center;color:var(--muted);font-size:13px;margin:0 0 24px}
.login-box .sub .ver{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;
  background:#eef1f5;color:#64748b;font-size:11px;line-height:1.5;
  vertical-align:1px;letter-spacing:.2px;
}
.login-box label{
  display:block;margin-bottom:15px;
  font-size:12.5px;font-weight:600;color:#334155;
}
.login-box label input{
  margin-top:6px;font-size:14px;height:42px;border-radius:7px;
  padding:0 12px;background:#fbfcfe;
}
.login-box label input:focus{background:#fff}
.login-box .btn.primary.block{height:42px;font-size:14.5px;border-radius:7px;margin-top:4px}
.login-box .alert{margin-bottom:14px;font-size:12.5px}
.login-box .foot{font-size:12px;color:var(--muted);text-align:center;margin:18px 0 0;line-height:1.6}
.cap-row{display:flex;gap:10px;align-items:center;margin-top:6px}
.cap-row input{flex:1;margin:0;text-transform:uppercase}
.cap-row img{
  height:42px;width:124px;flex:0 0 124px;margin:0;
  border:1px solid var(--line);border-radius:7px;cursor:pointer;background:#fff;
}

/* ---------- 平板：左栏收窄，避免把表单挤扁 ---------- */
@media (max-width:1080px){
  .login-brand{flex:0 0 30%;min-width:250px;padding:28px 26px 22px}
  .lb-mid h2{font-size:24px}
  .login-page .login-box{max-width:340px}
}

/* ---------- 手机横屏：见文件末尾的 max-height 横屏段 ---------- */

/* ---------- 测试邮件 ---------- */
.test-mail-box{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}

/* ---------- 筛选表单（log.php 等） ---------- */
.filter-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filter-row input[type=text],.filter-row select{width:auto;min-width:150px;margin:0}
.filter-row .btn{flex:0 0 auto}

/* ---------- 侧边栏关闭按钮 / 移动端顶栏（桌面端隐藏） ---------- */
.sidebar-x{display:none}
.topbar{display:none}
.sidebar-mask{display:none}

/* ==================================================================
 * 静态部署页（deploy.php）
 * ------------------------------------------------------------------
 * 目录清单 / 风险清单都可能是长串路径，必须能换行、不能被卡片宽度挤爆。
 * ================================================================== */
.dir-cell{word-break:break-all;overflow-wrap:anywhere}
.dir-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.dir-list .dir-item{
  background:#f0f2f5;
  border:1px solid #e3e6ea;
  border-radius:4px;
  padding:2px 7px;
  font-size:12px;
  font-family:ui-monospace,Consolas,Menlo,monospace;
  word-break:break-all;
  overflow-wrap:anywhere;
  max-width:100%;
}
.dir-list .dir-item.on{background:#e6f4ea;border-color:#b7e1c4;color:#0f7b3f}
.risk-card{border-color:#f5c6c2}
.risk-card h2{margin-bottom:10px}

/* ==================================================================
 * 移动端自适应
 * ------------------------------------------------------------------
 * 断点策略（与既有断点对齐，不新增冲突）：
 *   > 1000px   桌面：侧边栏常驻，双列网格
 *   901–1000px 平板横屏 / 窄窗口：双列网格降为单列（沿用既有 1000px 断点）
 *   768–900px  平板竖屏：侧边栏收起为抽屉，KPI 两列
 *   <= 767px   手机：全面单列，表格横向滚动，按钮加大触控区
 * ================================================================== */

/* ---------- 触控优化：消除点击高亮、保证最小触控尺寸 ---------- */
@media (hover: none) {
  .btn:hover,.nav a:hover,.table tbody tr:hover{background:inherit}
  .nav a:hover{color:var(--side-text)}
  .btn{-webkit-tap-highlight-color:transparent}
}
.btn,.tag,.tabs a{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;   /* 消除 300ms 点击延迟 */
}

/* ---------- 表格横向滚动容器 ---------- */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;   /* 划到尽头不带动整页 */
  margin:0 -18px;                   /* 抵消 .card 内边距，让小屏能划到边缘 */
  padding:0 18px;
}
.table-scroll .table{min-width:560px}          /* 低于此宽就出横向滚动条 */
.table-scroll::-webkit-scrollbar{height:6px}
.table-scroll::-webkit-scrollbar-thumb{background:#c9ced6;border-radius:3px}
.table-scroll::-webkit-scrollbar-track{background:transparent}

/* ==================================================================
 * 断点：<= 900px —— 平板竖屏 / 大屏手机横屏
 * 侧边栏收起为抽屉，由顶栏汉堡按钮唤出
 * ================================================================== */
@media (max-width: 900px) {

  /* ---- 布局：改为纵向堆叠 ---- */
  .layout{display:block}

  /* ---- 侧边栏 → 左侧抽屉 ---- */
  .sidebar{
    position:fixed;
    top:0;left:0;bottom:0;
    width:250px;flex:none;height:100%;
    z-index:60;
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    /* iPhone 刘海屏安全区 */
    padding-left:env(safe-area-inset-left,0px);
  }
  .sidebar.open{transform:translateX(0);box-shadow:var(--side-drawer)}
  .brand{padding-right:52px;position:relative}

  /* 抽屉右上角关闭按钮 */
  .sidebar-x{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:12px;
    width:34px;height:34px;padding:0;
    background:transparent;border:0;border-radius:6px;
    color:var(--muted);font-size:24px;line-height:1;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar-x:active{background:var(--side-hover);color:var(--side-brand)}

  /* 菜单项触控高度加大 */
  .nav a{padding:12px 14px;font-size:14.5px}
  .sidebar-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}

  /* ---- 遮罩 ---- */
  .sidebar-mask{
    display:block;
    position:fixed;inset:0;
    background:rgba(15,23,42,.5);
    z-index:55;
    animation:fade-in .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar-mask[hidden]{display:none}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}

  /* 抽屉打开时禁止背景滚动 */
  body.nav-open{overflow:hidden}

  /* ---- 移动端顶栏 ---- */
  .topbar{
    display:flex;align-items:center;gap:12px;
    position:sticky;top:0;z-index:40;
    height:52px;padding:0 14px;
    padding-top:env(safe-area-inset-top,0px);
    background:var(--side-bg);color:var(--side-brand);
    border-bottom:1px solid var(--side-line);
    box-shadow:0 1px 2px rgba(16,24,40,.06);
  }
  .topbar-title{
    flex:1;min-width:0;font-size:15px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .topbar-out{
    flex:0 0 auto;color:var(--danger);font-size:13.5px;
    padding:6px 10px;border-radius:6px;
    -webkit-tap-highlight-color:transparent;
  }
  .topbar-out:active{background:var(--side-hover)}

  /* 汉堡按钮 */
  .hamburger{
    flex:0 0 auto;
    width:40px;height:40px;margin-left:-8px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:transparent;border:0;border-radius:8px;cursor:pointer;padding:0;
    -webkit-tap-highlight-color:transparent;
  }
  .hamburger:active{background:var(--side-hover)}
  .hamburger span{
    display:block;width:19px;height:2px;border-radius:1px;
    background:var(--side-text);transition:transform .2s ease,opacity .2s ease;
  }
  .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* ---- 主区域 ---- */
  .main{padding:16px 14px 48px}
  /* 移动端不需要限制内容宽度（屏幕本身就窄），让 .main-inner 铺满 */
  .main-inner{max-width:none}

  /* ---- 卡片 ---- */
  .card{padding:14px;margin-bottom:12px;border-radius:10px}
  .card-head{flex-wrap:wrap;gap:8px}

  /* ---- 页头 ---- */
  h1{font-size:18px}
  h2{font-size:14.5px}

  /* ---- 表格：改为横向滚动 ---- */
  .table-scroll{margin:0 -14px;padding:0 14px}

  /* ---- KPI 两列 ---- */
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{padding:13px}
  .kpi-num{font-size:22px}

  /* ---- 网格单列 ---- */
  .grid-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;gap:12px}

  /* ---- 渠道编辑器：窄屏三列降为两列，head 整行堆叠 ---- */
  .ch-item{padding:12px}
  .ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-qr-extra{flex:1 1 100%}
  .ch-head .ch-name,.ch-head .ch-desc{flex:1 1 100%}
  .ch-item .ch-sort{text-align:left}
  .ch-item .del{flex:0 0 auto;padding:7px 14px;font-size:13px}
  .ch-item .del::after{content:" 删除";font-size:12px}

  /* ---- 表单：触控友好 ---- */
  input[type=text],input[type=password],input[type=number],select,textarea{
    font-size:16px;   /* 防止 iOS 聚焦时自动放大页面 */
    padding:10px 12px;
  }
  .filter-row input[type=text],.filter-row select{font-size:16px}
  .key-row{flex-wrap:wrap}
  .inline-label{flex-wrap:wrap}
  .inline-label input,.inline-label select{min-width:0;width:100%;margin-top:4px}

  /* ---- 按钮：加大触控区 ---- */
  .btn{padding:9px 16px;font-size:14px}
  .btn.small{padding:8px 14px;font-size:13.5px}
  .btn.tiny{padding:6px 11px;font-size:12.5px}
  .btn.block{padding:12px}

  /* ---- Tabs：横向滚动 ---- */
  .tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .tabs a{padding:10px 16px;white-space:nowrap;flex:0 0 auto}

  /* ---- 代码块 ---- */
  .code-box{padding:12px;padding-top:34px}
  .code-box .copy{top:6px;right:6px}
  .code-box pre{font-size:12px;line-height:1.65}

  /* ---- 趋势柱 ---- */
  .bars{height:120px;gap:3px}
  .bar-x{font-size:9.5px;transform:scale(.92)}

  /* ---- 分页 ---- */
  .pager{flex-wrap:wrap;gap:8px}

  /* ---- 登录页：窄屏收起左栏，只留表单 ---- */
  .login-brand{display:none}
  .login-main{padding:32px 20px;min-height:100vh;min-height:100dvh}
  .login-page .login-box{max-width:100%}
  .login-box{padding:28px 22px}
  .cap-row img{height:44px;width:130px;flex:0 0 130px}

  /* ---- 表单操作按钮组：手机端整行 ---- */
  .form-actions{gap:10px}
  .form-actions .btn{flex:1 1 auto;min-width:calc(50% - 5px)}
}

/* ==================================================================
 * 断点：<= 560px —— 手机竖屏
 * ================================================================== */
@media (max-width: 560px) {

  .main{padding:12px 10px 40px}
  .card{padding:12px;border-radius:8px}
  .table-scroll{margin:0 -12px;padding:0 12px}

  /* KPI 保持两列，但更紧凑 */
  .kpi-row{gap:8px}
  .kpi{padding:11px}
  .kpi-label{font-size:11.5px;margin-bottom:4px}
  .kpi-num{font-size:20px}
  .kpi-num small{font-size:12px}

  /* 渠道编辑器完全单列（各字段各占一行，缩略图收窄） */
  .ch-grid{grid-template-columns:1fr}
  .ch-qr-thumb{width:56px;height:56px}

  /* 表格字号略降，减少横向滚动距离 */
  .table{font-size:12.5px;min-width:520px}
  .table th{font-size:12px;padding:7px 9px}
  .table td{padding:8px 9px}

  /* Tabs 平分宽度，避免溢出 */
  .tabs a{padding:9px 12px;font-size:13px}

  /* 页头标题 */
  h1{font-size:17px;line-height:1.35}
  h2{font-size:14px}
  h3{font-size:13px}

  /* 登录页 */
  .login-main{padding:24px 14px}
  .login-box{padding:24px 18px}
  .login-box h1{font-size:18px}
  .cap-row{gap:8px}
  .cap-row img{height:42px;width:112px;flex:0 0 112px}
  .login-box label{margin-bottom:13px}

  /* 按钮组整行堆叠 */
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{min-width:0;width:100%;margin-left:0}
  .form-actions .btn + .btn{margin-left:0}

  /* 提示条文字紧凑 */
  .alert{padding:10px 12px;font-size:12.5px}
  .inherit-hint{padding:9px 10px;font-size:12px}

  /* 代码块更小 */
  .code-box pre{font-size:11.5px}
}

/* ==================================================================
 * 断点：<= 380px —— 小屏手机（iPhone SE 等）
 * ================================================================== */
@media (max-width: 380px) {
  .main{padding:10px 8px 36px}
  .card{padding:11px}
  .kpi-row{gap:7px}
  .kpi{padding:10px}
  .kpi-num{font-size:18.5px}

  .table{min-width:480px;font-size:12px}
  .table th,.table td{padding:7px 8px}

  .btn{padding:9px 13px;font-size:13.5px}
  .login-main{padding:20px 10px}
  .login-box{padding:22px 15px}
  .topbar{padding:0 10px}
  .topbar-title{font-size:14px}
}

/* ==================================================================
 * 横屏手机（高度受限）：压缩竖向留白，并把左栏拉回来
 * ------------------------------------------------------------------
 * ★ 这段必须放在文件**末尾**、900px 断点之后。
 *   原因：手机横屏常见宽度是 700~900px，会同时命中
 *   `@media (max-width:900px)`（那里把左栏 display:none 了）。
 *   媒体查询之间没有「谁更具体谁赢」的规则，纯粹按出现顺序决定，
 *   所以本段写在后面，靠级联顺序把左栏 display 重新设回 flex。
 * ================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  /* 横屏空间够，两栏都留：左栏收窄成一条品牌带 */
  .login-brand{
    display:flex;flex:0 0 32%;min-width:200px;max-width:250px;
    padding:16px 18px 12px;
  }
  .lb-mark{width:28px;height:28px;flex:0 0 28px;font-size:13px}
  .lb-name b{font-size:12.5px}
  .lb-name span{font-size:10.5px}
  .lb-mid{margin:auto 0;padding:10px 0}
  .lb-mid h2{font-size:16.5px;margin-bottom:0;line-height:1.35}
  .lb-mid p,.lb-feats{display:none}
  .lb-foot{font-size:10.5px}

  .login-main{padding:10px 16px;align-items:center}
  .login-box{padding:18px 24px}
  .login-box h1{margin-bottom:2px;font-size:17.5px}
  .login-box .sub{margin-bottom:13px}
  .login-box label{margin-bottom:9px}
  .login-box label input{height:34px;font-size:13.5px}
  .login-box .btn.primary.block{height:34px;font-size:14px}
  .login-box .foot{margin-top:10px}
  .cap-row img{height:34px;width:100px;flex:0 0 100px}
  .topbar{height:46px}
}

/* ==================================================================
 * 打印：隐藏导航与按钮，保留内容
 * ================================================================== */
@media print {
  .sidebar,.topbar,.sidebar-mask,.btn,.tabs,.pager,.code-box .copy{display:none !important}
  .main{padding:0;max-width:100%}
  .card{border:0;box-shadow:none;padding:0;margin-bottom:14px}
  body{background:#fff}
}