:root{
  --bg:#f5f7fa;
  --panel:#ffffff;
  --line:#e3e8ef;
  --text:#1f2733;
  --muted:#6b7785;
  --blue:#2e5b9f;
  --blueDark:#24487d;
  --blueSoft:#eaf0fa;
  --green:#4f9a51;
  --greenSoft:#e8f4e0;
  --orange:#c65911;
  --orangeSoft:#fce4d6;
  --teal:#8ce3df;
  --yellow:#fffbb0;
  --red:#c0392b;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
h1,h2,h3{margin:0}
code{background:#eef2f7;padding:1px 5px;border-radius:4px;font-size:12px}
.hidden{display:none !important}
.grow{flex:1}

/* ---------- topbar ----------
 * 不再吸顶（position:sticky）—— 让正文有更多可视高度，整页一起滚动。
 * 分两行：第一行「logo/标题 …… 零值开关 + 账号」，第二行「时间范围」独占一行。 */
.topbar{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:6px 14px 7px;
  display:flex;flex-direction:column;gap:6px;
  position:relative;z-index:30;
}
.topbarMain{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0}
.brandText{min-width:0}
.logo{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#2e5b9f,#4a86e8);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;flex:0 0 auto;
}
.topbar h1{font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap}
.sub{font-size:11px;color:var(--muted);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}

/* 时间选择栏：控件一行、月份片独占后续行并自动换行（不再有横向滚动条）。
 * 曾经是 .months 内部 overflow-x:auto —— 月份一多就出现一条细滚动条，
 * 既难看又不方便点，改成 flex-wrap:wrap + flex-basis:100% 后月份片自己换行。 */
.rangeBar{display:flex;align-items:center;gap:6px;flex:0 0 auto;width:100%;min-width:0;flex-wrap:wrap}
.months{
  display:flex;gap:5px;align-items:center;flex:1 1 100%;min-width:0;
  flex-wrap:wrap;row-gap:5px;
}
.mChip{
  border:1px solid #c9d4e2;border-radius:11px;padding:2px 9px;font-size:12px;
  cursor:pointer;background:#f4f6f9;user-select:none;font-family:inherit;color:#8a97a8;
  line-height:1.6;transition:background .12s,border-color .12s;flex:0 0 auto;
}
.mChip:hover{border-color:#9fb8dd;background:#eef3fa;color:var(--blueDark)}
/* 选中的月份：实心蓝底白字，跟未选中拉开最大反差 */
.mChip.on{
  background:var(--blue);border-color:var(--blueDark);color:#fff;font-weight:700;
  box-shadow:0 1px 4px rgba(46,91,159,.35);
}
.mChip.on:hover{background:var(--blueDark)}
.mChip.early{opacity:.55}
.yRow{display:inline-flex;gap:4px;margin-right:2px;padding-right:7px;border-right:1px dashed var(--line);flex:0 0 auto}
.yChip{
  border:1px solid var(--line);border-radius:11px;padding:2px 9px;font-size:11.5px;
  cursor:pointer;background:#fff;user-select:none;font-family:inherit;color:var(--muted);flex:0 0 auto;
}
.yChip:hover{border-color:#9fb8dd;color:var(--blue)}
.yChip.on{background:#fff3e2;border-color:#eebe7d;color:var(--orange);font-weight:700}
.rangeInfo{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}

.headRight{display:flex;align-items:center;gap:8px;flex:0 0 auto}

select,input[type=month],input[type=number],input[type=text]{
  border:1px solid var(--line);border-radius:6px;padding:4px 7px;font-size:12.5px;
  background:#fff;color:var(--text);font-family:inherit;
}
input[type=number]{width:70px}

/* ---------- tabs ---------- */
.tabs{
  display:flex;gap:4px;padding:5px 14px 0;background:var(--panel);
  border-bottom:1px solid var(--line);overflow-x:auto;
}
.tab{
  border:none;background:transparent;padding:8px 13px;font-size:13.5px;color:var(--muted);
  cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;white-space:nowrap;
}
.tab:hover{color:var(--blue)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}

main{padding:14px 18px 60px}
.view{display:none}
.view.active{display:block}

/* ---------- panel ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px;
}
.panelHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.panelHead h2{font-size:15px;font-weight:600;flex:0 0 auto}
.panelTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}

button{
  font-family:inherit;font-size:13px;border-radius:6px;padding:6px 12px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--text);
  white-space:nowrap;flex:0 0 auto;
}
button:hover{border-color:#b9cdea;color:var(--blueDark)}
button.ghost{background:#f7f9fc}
button.tiny{padding:3px 9px;font-size:12px;border-radius:99px}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
button.primary:hover{background:var(--blueDark);color:#fff}
button.danger{color:var(--red);border-color:#eeccc6}
button.danger:hover{background:#fdf1ef;color:var(--red)}
button:disabled{opacity:.5;cursor:not-allowed}

.hint{font-size:12px;color:var(--muted);margin:6px 0}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-bottom:16px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
}
.card .k{font-size:12px;color:var(--muted)}
.card .v{font-size:21px;font-weight:700;margin-top:4px;letter-spacing:-.3px}
.card .x{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- tables ---------- */
.tableWrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:8px}
.tableWrap.wide{max-height:74vh}
table{border-collapse:separate;border-spacing:0;font-size:13px;white-space:nowrap}
th,td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 10px;text-align:right}
th:first-child,td:first-child{border-left:1px solid var(--line)}
thead th{border-top:1px solid var(--line)}
th{background:#fff;font-weight:600;color:var(--text)}
td.txt,th.txt{text-align:left}
thead th.stickyL,td.stickyL{
  position:sticky;left:0;z-index:5;background:#fff;box-shadow:1px 0 0 var(--line);
}
thead th{position:sticky;top:0;z-index:6}
thead th.stickyL{z-index:8}
thead tr:nth-child(2) th{top:31px}

/* 表头配色（沿用你原来那套） */
th.h-m{background:var(--blue);color:#fff}
th.h-c{background:#dbe7f6}
th.h-g{background:#badd9e}
th.h-t{background:var(--teal)}
th.h-o{background:#f3953c}
th.h-y{background:var(--yellow)}
th.h-gray{background:#eef2f7;color:var(--muted)}
th.h-blue2{background:var(--blueSoft);color:var(--blueDark)}

tr.sum td{background:var(--orangeSoft);color:var(--orange);font-weight:700}
tr.total td{background:#fdf0e6;color:var(--orange);font-weight:700}
tr.alt td{background:#fafcff}
/* 总览「分月趋势」里，该月有来自「每月统计」的兜底补数 → 淡黄底提示一下 */
tr.fromMc td{background:#fffaf0}
tr:hover td{background:#f2f7ff}
tr.sum:hover td,tr.total:hover td{background:#fbe0cd}
td.city{font-weight:600}

/* 每月统计兜底行（城市级明细缺失的月份，用渠道级数据补的那部分，见 js/agg.js 的 mcFill）
 * 用浅橙底 + 棕字跟真实城市行区分开，一眼能看出「这行来自每月统计」 */
tr.mcRow td{background:#fff8e8;color:#8a6100}
tr.mcRow td.stickyL{background:#fff2d6}
tr.mcRow td.txt{font-weight:700}
tr.mcRow:hover td{background:#ffefd0}
tr.mcRow:hover td.stickyL{background:#ffe8c2}

/* ---------- 每月统计：每月一张独立小表 ---------- */
.mchList{display:block}
.mchBlock{margin:0 0 18px}
.mchBlock:last-child{margin-bottom:0}
.mchBlockHead{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:5px 2px 7px;border-bottom:2px solid var(--blueSoft);margin-bottom:8px;
}
.mchTitle{font-size:14px;font-weight:700;color:var(--blueDark)}
.mchTag{
  font-size:11px;font-weight:600;color:#fff;background:var(--blue);
  border-radius:99px;padding:1px 8px;
}
.mchSrc{font-size:11.5px;color:var(--muted)}
.mchBlock .mchBlockHead .grow{flex:1}
/* 每月的小表不用再单独滚动，跟随页面一起滚动 */
.tableWrap.mch{max-height:none;overflow-x:auto;overflow-y:visible}
.tableWrap.mch table{width:100%}

/* ---------- drop ---------- */
.drop{
  border:2px dashed #c6d4e6;border-radius:12px;background:#fbfdff;
  padding:34px 20px;text-align:center;cursor:pointer;transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blueSoft)}
.dropIcon{font-size:30px;color:#9db6d6;line-height:1}
.drop p{margin:8px 0 0}
.drop .hint{max-width:760px;margin:10px auto 0;text-align:left}

.saveBar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.saveBar label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}

select.cell, input.cell{
  border:1px solid transparent;background:transparent;padding:2px 4px;font-size:13px;width:100%;
  border-radius:4px;text-align:left;
}
select.cell:hover,input.cell:hover{border-color:var(--line);background:#fff}
select.cell:focus,input.cell:focus{border-color:var(--blue);background:#fff;outline:none}

.badge{display:inline-block;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:600}
.badge.ad{background:#e8eefb;color:#2e5b9f}
.badge.sale{background:#fdeee0;color:#c65911}
.badge.bundle{background:#e4f5e4;color:#3f7f41}
.badge.warn{background:#fff3e0;color:#a8620f;border:1px solid #f4d3a6}
.badge.bad{background:#fdeaea;color:#b3261e;border:1px solid #f3b8b4}
/* 认不出投放账号时，把「渠道名 / 业务线 / 月份」三格标出来，提示必须人工确认 */
select.cell.need,input.cell.need{border-color:#e2a349;background:#fffdf5}
select.cell.need:hover,input.cell.need:hover{border-color:#cf8f1e}
input.cell.need::placeholder{color:#b07a1e}
/* 上传结果表顶部的醒目告警（认不出账号时给的操作指引，见 js/app.js renderParse） */
.alertBox{margin:0 0 10px;padding:10px 12px;border:1px solid #e8b76b;background:#fff8ea;border-radius:8px;font-size:12.5px;line-height:1.75;color:#7a4e0a}
.alertBox b{font-weight:600;color:#8a4b06}
.alertList{margin:5px 0 7px;padding-left:2px;color:#9a5f10}
.badge.ok{background:#e7f5e4;color:#2f7a33;border:1px solid #bfe3b9}

.value{font-size:13px;color:var(--text)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(16px);
  background:#22303f;color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;
  opacity:0;pointer-events:none;transition:.22s;z-index:99;max-width:80vw;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#a5302a}

/* ---------- 登录态（挪到右上角，小字，不占主要空间） ---------- */
.userBox{display:flex;align-items:center;gap:6px;padding-left:10px;border-left:1px solid var(--line)}
.userBox .who{font-size:11.5px;color:var(--muted);white-space:nowrap}
.userBox .who b{color:var(--text);font-weight:600}
.roleTag{display:inline-block;margin-left:4px;padding:0 5px;border-radius:99px;font-size:10.5px;background:var(--blueSoft);color:var(--blueDark)}
.roleTag.viewer{background:#eeeee6;color:#6b6b58}
.roleTag.admin{background:#e4f5e4;color:#3f7f41}

/* ---------- 零值行开关 ---------- */
.zeroSwitch{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px 3px 8px;background:#f7f9fc;
  cursor:pointer;user-select:none;white-space:nowrap;
}
.zeroSwitch:hover{border-color:#9fb8dd;color:var(--blueDark);background:#eef3fa}
.zeroSwitch input{margin:0;cursor:pointer;accent-color:var(--blue)}
.zeroSwitch.on{background:#fff3e2;border-color:#eebe7d;color:var(--orange);font-weight:600}
.hiddenNote{font-size:12px;color:var(--muted);margin:6px 0 0}
.hiddenNote b{color:var(--orange)}

/* ---------- 提示条 ---------- */
.callout{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff8e6;border:1px solid #f2e0b0;border-radius:8px;
  padding:11px 14px;font-size:13px;margin-bottom:14px;color:#7a5c12;
}

/* ---------- 禁用态 ---------- */
.locked .panelTools, .locked .drop, .locked .saveBar{opacity:.55;pointer-events:none}
.roNote{font-size:12px;color:var(--muted);background:#f3f5f8;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin-bottom:12px}

/* ---------- 识别结果工具条 ---------- */
.parseTools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 6px}
.parseTools .hint{margin:0}
tr.off{opacity:.45}
tr.off td{background:#f7f8fa}

/* ---------- 确认弹层 ---------- */
.modal{
  position:fixed;inset:0;background:rgba(23,32,48,.45);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modalCard{
  background:#fff;border-radius:12px;width:100%;max-width:540px;padding:20px 22px;
  box-shadow:0 18px 50px rgba(16,26,44,.3);border-top:4px solid var(--blue);
  max-height:86vh;overflow:auto;
}
.modalCard.danger{border-top-color:var(--red)}
.modalCard h4{margin:0 0 10px;font-size:16px;font-weight:700}
.modalCard.danger h4{color:var(--red)}
.modalBody{font-size:13px;line-height:1.8;color:#3b4a61}
.modalBody b{color:var(--red)}
.modalBody ul{margin:6px 0;padding-left:20px}
.modalAsk{
  margin-top:14px;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff8e6;border:1px solid #f2e0b0;border-radius:8px;padding:9px 12px;color:#7a5c12;
}
.modalAsk input{border:1px solid #e2cf9d;border-radius:6px;padding:5px 8px;font-size:13px;width:150px;background:#fff}
.modalBtns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modalBtns button[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- 备份与恢复 ---------- */
.bkRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bkRow .grow{flex:1}
.bkNote{font-size:12px;color:var(--muted);background:#f6f9fc;border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:10px 0 0}
.bkNote b{color:var(--text)}
.autoTag{font-size:11px;background:#e8eefb;color:#2e5b9f;border-radius:99px;padding:1px 7px;margin-left:6px}

/* ---------- 登记明细 ---------- */
.mutedTxt{color:var(--muted)}
#dSearch{width:180px}