*{box-sizing:border-box}
body{margin:0;font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  color:#1f2328;background:#f6f7f9}
header{background:#1f2937;color:#e5e7eb;padding:8px 16px;display:flex;flex-wrap:wrap;
  align-items:center;gap:10px}
.brand{font-weight:600;font-size:15px;white-space:nowrap}
.role{font-size:11px;padding:1px 7px;border-radius:9px;margin-left:4px;vertical-align:1px}
.r-admin{background:#7c3aed}.r-buyer{background:#0891b2}.r-channel{background:#c2410c}
nav{display:flex;flex-wrap:wrap;gap:2px;flex:1}
nav a{color:#cbd5e1;text-decoration:none;padding:4px 9px;border-radius:5px;font-size:13px}
nav a:hover{background:#374151;color:#fff}
.who{font-size:12px;color:#9ca3af;white-space:nowrap}
.who a{color:#9ca3af;margin-left:8px}
main{max-width:1440px;margin:0 auto;padding:16px}
h1{font-size:19px;margin:0 0 14px}
h2{font-size:15px;margin:22px 0 8px;padding-bottom:5px;border-bottom:1px solid #e5e7eb}
.flash{padding:9px 13px;border-radius:6px;margin-bottom:12px;font-size:13px}
.flash.ok{background:#dcfce7;color:#14532d;border:1px solid #86efac}
.flash.err{background:#fee2e2;color:#7f1d1d;border:1px solid #fca5a5}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px;margin-bottom:14px}
/* 宽表在窄窗口下**只让表格自己横滚**，别把整页顶得左右晃 ——
   页面一横滚，导航和标题跟着跑出屏幕，那才是真难用。
   模板里给宽表套一层 <div class="tw">。 */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 宽度下限：窗口再窄也不把列压扁，宁可让表格自己横滚。
   没有下限时列会被均分到 40~60px，"渠道对验收结论提异议"会竖着排成十行。 */
.tw>table{min-width:720px}
.tw.w>table{min-width:1180px}      /* 列特别多的：平台桶列表、审计 */
.tw.w2>table{min-width:1360px}     /* 买方桶列表：11 列含 3 个输入框。
                                      上限是 main 的 1440−32 内边距=1408，别顶满 */
table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
th,td{padding:7px 9px;border-bottom:1px solid #eceff2;text-align:left;vertical-align:middle}
th{background:#f9fafb;font-weight:600;color:#4b5563;white-space:nowrap;font-size:12px}
tr:hover td{background:#fafbfc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 区域名、桶名、AK、时间这类**不该被拆行的原子值**，压窄了也保持一行 */
.mono,td.nw,th.nw{white-space:nowrap}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
/* 自由文本列给个上限，别让一条长备注把整行撑高 */
td.txt{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muted{color:#9ca3af}
.tag{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;
  background:#f1f5f9;color:#475569;white-space:nowrap}
.t-ok{background:#dcfce7;color:#166534}.t-warn{background:#fef3c7;color:#92400e}
.t-err{background:#fee2e2;color:#991b1b}.t-info{background:#dbeafe;color:#1e40af}
.t-mute{background:#f1f5f9;color:#64748b}
/* 角色徽章：必须用 .tag.r-* 复合选择器 —— 单靠 .r-* 会被后面定义的 .tag 背景盖掉 */
.tag.r-admin{background:#ede9fe;color:#5b21b6}
.tag.r-buyer{background:#cffafe;color:#155e75}
.tag.r-channel{background:#ffedd5;color:#9a3412}
input,select,textarea{font:inherit;padding:5px 8px;border:1px solid #d1d5db;border-radius:5px;
  background:#fff;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid #93c5fd;border-color:#60a5fa}
textarea{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12px}
label{font-size:12px;color:#4b5563;display:block;margin-bottom:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:10px}
.row>div{min-width:120px}
button,.btn{font:inherit;font-size:13px;padding:5px 12px;border:1px solid #d1d5db;
  border-radius:5px;background:#fff;cursor:pointer;text-decoration:none;color:#1f2328;
  display:inline-block}
button:hover,.btn:hover{background:#f3f4f6}
button.p{background:#2563eb;color:#fff;border-color:#2563eb}
button.p:hover{background:#1d4ed8}
button.d{background:#dc2626;color:#fff;border-color:#dc2626}
button.s{padding:2px 8px;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;
  margin-bottom:16px}
.stat{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px 14px}
.stat .k{font-size:12px;color:#6b7280}
.stat .v{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.stat.hot .v{color:#dc2626}
.login{max-width:340px;margin:9vh auto;background:#fff;padding:26px;border-radius:10px;
  border:1px solid #e5e7eb}
.login h1{text-align:center}
.login input{width:100%;margin-bottom:11px;padding:8px 10px}
.login button{width:100%;padding:9px}
.hint{font-size:12px;color:#6b7280;margin:6px 0 12px}
.scroll{max-height:340px;overflow:auto;border:1px solid #e5e7eb;border-radius:6px}
.scroll table{font-size:12px}
.eq{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#475569}
.big{font-size:17px;font-weight:600}
.sec{background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;padding:10px;font-size:13px}