/* HM 单屏看板。颜色按职责取值：蓝=有效、红=无效（色弱校验通过），灰=其余，青绿=选中与品牌，琥珀=需要注意，橙=金额。 */
:root {
  color-scheme: light;
  --page: #f3f4f2;
  --surface: #fcfcfb;
  --surface-2: #f2f2ef;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, .10);
  --valid: #2a78d6;
  --invalid: #e34948;
  --other: #b3b1a8;
  --pending: #dcdad3;
  --valid-ink: #1c5cab;
  --invalid-ink: #b33a39;
  --valid-wash: rgba(42, 120, 214, .10);
  --invalid-wash: rgba(227, 73, 72, .10);
  --heat: #2d3b47;
  --hot-ink: #ffffff;
  --accent: #1f7f6d;
  --accent-wash: rgba(31, 127, 109, .09);
  --good: #0ca30c;
  --critical: #d03b3b;
  --warn-bg: #fff4e3;
  --warn-ink: #7a4300;
  --warn-line: #f0d2a2;
  --money: #e8750a;
  --money-ink: #b85400;
  --money-wash: rgba(232, 117, 10, .09);
  --money-pill: rgba(232, 117, 10, .16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, .10);
    --valid: #3987e5;
    --invalid: #e66767;
    --other: #6c6a63;
    --pending: #3b3a36;
    --valid-ink: #86b6ef;
    --invalid-ink: #f09392;
    --valid-wash: rgba(57, 135, 229, .16);
    --invalid-wash: rgba(230, 103, 103, .16);
    --heat: #cfd8df;
    --hot-ink: #0b0b0b;
    --accent: #45b89f;
    --accent-wash: rgba(69, 184, 159, .12);
    --warn-bg: #2d2415;
    --warn-ink: #f3c982;
    --warn-line: #5a4526;
    --money: #f08a2c;
    --money-ink: #f5a04f;
    --money-wash: rgba(245, 160, 79, .11);
    --money-pill: rgba(245, 160, 79, .2);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, .10);
  --valid: #3987e5;
  --invalid: #e66767;
  --other: #6c6a63;
  --pending: #3b3a36;
  --valid-ink: #86b6ef;
  --invalid-ink: #f09392;
  --valid-wash: rgba(57, 135, 229, .16);
  --invalid-wash: rgba(230, 103, 103, .16);
  --heat: #cfd8df;
  --hot-ink: #0b0b0b;
  --accent: #45b89f;
  --accent-wash: rgba(69, 184, 159, .12);
  --warn-bg: #2d2415;
  --warn-ink: #f3c982;
  --warn-line: #5a4526;
  --money: #f08a2c;
  --money-ink: #f5a04f;
  --money-wash: rgba(245, 160, 79, .11);
  --money-pill: rgba(245, 160, 79, .2);
}

/* 1920 宽约 13px、4K 原生约 20px，整页按 rem 同比缩放。 */
html { font-size: clamp(12px, calc(6px + .36vw), 24px); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; font-synthesis: none; }
button { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
.muted { color: var(--muted); }

.dash { height: 100dvh; min-height: 46rem; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1.4rem .8rem; max-width: 3840px; margin: 0 auto; overflow: hidden; }
.dash > * { flex-shrink: 0; }
.dash[aria-busy="true"] .panel, .dash[aria-busy="true"] .kpis, .dash[aria-busy="true"] .cards { opacity: .5; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .8rem; }
.brand-mark { width: .45rem; height: 2.4rem; border-radius: .3rem; background: var(--accent); }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); margin-bottom: .15rem; }
h1 { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; font-weight: 750; }
.owner-tabs { display: flex; gap: .3rem; padding: .22rem; border-radius: .7rem; background: var(--surface-2); margin-right: auto; margin-left: 1.5rem; overflow-x: auto; }
.tab { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem; border: 0; background: transparent; border-radius: .5rem; padding: .35rem .85rem; cursor: pointer; font-size: .95rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }
.tab.active::after { content: ""; align-self: stretch; height: 2px; border-radius: 1px; background: var(--accent); margin-top: .15rem; }
.tab-n { font-size: .72rem; font-weight: 500; color: var(--muted); }
.drill { border: 0; background: var(--accent-wash); color: var(--accent); font-size: .75rem; font-weight: 700; padding: .12rem .5rem; border-radius: .35rem; cursor: pointer; white-space: nowrap; }
.drill:hover { background: var(--accent); color: var(--surface); }
.top-meta { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); }
.chip.ok::before { background: var(--good); }
.chip.bad { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.chip.bad::before { background: var(--critical); }

/* 顶部数字：只放今天最需要一眼看到的量；消费与线索成本合占双倍宽度，各带比较。 */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2fr); gap: 1rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; padding: .85rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.kpi .label { font-size: .85rem; color: var(--ink-2); font-weight: 600; }
.kpi .value { font-size: 2.5rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.kpi .value small { font-size: .4em; font-weight: 600; color: var(--ink-2); margin-left: .3rem; letter-spacing: 0; }
.kpi .value.unknown { color: var(--muted); }
.kpi .side { text-align: right; font-size: .85rem; color: var(--ink-2); line-height: 1.5; white-space: nowrap; }
.kpi .side b { color: var(--ink); font-size: 1.05rem; }
.kpi .label-note { margin-left: .5rem; font-size: .78rem; font-weight: 500; color: var(--muted); }
.kpi-spend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: center; }
.spend-col { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.spend-col + .spend-col { border-left: 1px solid var(--grid); padding-left: 1.2rem; }
.kpi-spend .value { display: flex; align-items: center; color: var(--money-ink); }
.kpi-spend .value.unknown { color: var(--muted); }
.kpi-spend .value .pill { margin-left: .6rem; letter-spacing: 0; }
.kpi-spend .value .pill small { font-size: .9em; color: inherit; margin-left: .25rem; }
.spend-note { font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.pill { display: inline-flex; align-items: center; padding: .12rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.up { background: var(--valid-wash); color: var(--valid-ink); }
.pill.down { background: var(--invalid-wash); color: var(--invalid-ink); }
.pill small { font-weight: 500; margin-left: .2rem; }
.pill.good { background: var(--valid-wash); color: var(--valid-ink); }
.pill.money { background: var(--money-pill); color: var(--money-ink); }
.money { color: var(--money-ink); }
.pill.bad { background: var(--invalid-wash); color: var(--invalid-ink); }

/* 卡片里的消费：金额放大，旁边是较昨日同时段；下一行是昨日此时与线索成本。 */
.spend { display: flex; flex-direction: column; gap: 0; padding: .3rem .55rem; border-radius: .6rem; background: var(--money-wash); box-shadow: inset .2rem 0 var(--money); font-variant-numeric: tabular-nums; min-width: 0; }
.spend.none { background: var(--surface-2); box-shadow: none; }
.spend-main { display: flex; align-items: baseline; gap: .45rem; min-width: 0; white-space: nowrap; }
.spend-label { font-size: .72rem; font-weight: 650; color: var(--ink-2); flex: none; }
.spend-value { font-size: 1.45rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; color: var(--money-ink); }
.spend-value small { font-size: .55em; font-weight: 600; color: var(--ink-2); margin-left: .15rem; letter-spacing: 0; }
.spend .pill { align-self: center; padding: .05rem .4rem; font-size: .72rem; }
.spend-sub { font-size: .72rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spend-sub b { color: var(--money-ink); font-weight: 700; }
.spend.none .spend-value { color: var(--muted); }

/* 账号卡片：数字 → 有效性 → 24 小时柱图，由上到下一种信息一层。 */
.section-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: .6rem; }
.section-head h2, .panel-head h2 { font-size: 1.1rem; font-weight: 750; }
.legend { display: flex; gap: .9rem; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.hint { font-size: .8rem; color: var(--muted); margin-left: auto; white-space: nowrap; }
.sw { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; }
.sw.valid, .seg-valid { background: var(--valid); }
.sw.invalid, .seg-invalid { background: var(--invalid); }
.sw.other, .seg-other { background: var(--other); }
.sw.pending, .seg-pending { background: var(--pending); }
.seg-rest { background: var(--other); opacity: .55; }

.seg { display: inline-flex; gap: .15rem; padding: .18rem; border-radius: .55rem; background: var(--surface-2); flex-shrink: 0; }
.seg[hidden] { display: none; }
.seg button { border: 0; background: transparent; padding: .3rem .65rem; border-radius: .4rem; font-size: .8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: .8rem; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; padding: .85rem .95rem .7rem; cursor: pointer; display: flex; flex-direction: column; gap: .55rem; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--axis); }
.card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash), 0 0 0 1px var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.5rem; }
.card-id { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.acc-tag { margin-left: .3rem; padding: 0 .3rem; border-radius: .25rem; background: var(--surface-2); font-size: .7rem; font-weight: 600; }
.flags { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.flag { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .45rem; border-radius: .35rem; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.flag.warn { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px var(--warn-line); }
.flag.low { background: var(--invalid-wash); color: var(--invalid-ink); }
.flag.high { background: var(--valid-wash); color: var(--valid-ink); }
.card-main { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.card-count { font-size: 2.3rem; font-weight: 750; letter-spacing: -.03em; line-height: 1; }
.unit { display: block; font-size: .75rem; color: var(--ink-2); margin-top: .3rem; white-space: nowrap; }
.count-line { display: flex; align-items: baseline; gap: .45rem; }
.card-rate { text-align: right; }
.card-rate .rate { font-size: 1.6rem; font-weight: 750; letter-spacing: -.02em; line-height: 1; color: var(--valid-ink); }
.card-rate .rate.muted { color: var(--muted); }

.vrow { display: flex; flex-direction: column; gap: .25rem; }
.vrow-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.vrow-label { font-weight: 700; color: var(--ink); }
.vrow-detail { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.vrow-detail b { color: var(--ink); font-weight: 650; }
.vbar { display: flex; gap: 2px; height: .65rem; }
.vbar > span { min-width: 3px; }
.vbar > span:first-child { border-radius: .3rem 0 0 .3rem; }
.vbar > span:last-child { border-radius: 0 .3rem .3rem 0; }
.vbar > span:only-child { border-radius: .3rem; }
.vbar.empty { background: var(--surface-2); border-radius: .3rem; }
.vlegend { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .75rem; color: var(--ink-2); min-height: 1rem; font-variant-numeric: tabular-nums; }
.vlegend span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.vlegend i { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.vlegend b { color: var(--ink); font-weight: 700; }

.hwrap { margin-top: .15rem; }
.hchart { display: block; width: 100%; height: 3.4rem; overflow: visible; }
.hchart .bar-valid { fill: var(--valid); }
.hchart .bar-rest { fill: var(--other); opacity: .7; }
.hchart .bar-cost { fill: var(--money); opacity: .85; }
.hchart .bar-zero { fill: var(--grid); }
.hchart .current { opacity: .55; }
.hchart .sel { fill: var(--accent-wash); }
.hchart .sel-line { fill: var(--accent); }
.hchart .bizline { stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.hchart .hit { fill: transparent; cursor: pointer; }
.hchart .hit:hover { fill: var(--accent-wash); }
.hlabels { position: relative; height: 1rem; margin-top: .2rem; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.hlabels span { position: absolute; top: 0; white-space: nowrap; }
.hlabels .start { left: 0; }
.hlabels .mid { transform: translateX(-50%); }
.hlabels .now { right: 0; color: var(--accent); font-weight: 700; }
.hlabels .biz { color: var(--accent); font-weight: 700; cursor: help; }
.hlabels .from-line { padding-left: .25rem; }
.hlabels .to-line { padding-right: .25rem; }
.card-foot { display: flex; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--grid); font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.card-foot > span:last-child { color: var(--muted); }
.card-foot { align-items: center; }
.cards-foot { margin-top: .4rem; font-size: .78rem; color: var(--muted); }
.cards-foot[hidden] { display: none; }

/* 下半屏：左侧广告（条长=入池、蓝=有效），右侧所选时段的入池表单。 */
.lower { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(22rem, 1fr); gap: 1rem; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem .6rem; }

.ads-titleline { display: flex; align-items: baseline; gap: .9rem; min-width: 0; flex-wrap: wrap; }
.ads-summary { display: flex; align-items: baseline; gap: .7rem; min-width: 0; flex-wrap: wrap; }
.ads-headline { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.ads-headline .flag { font-size: .85rem; padding: .15rem .5rem; margin-right: .3rem; }
.ads-headline .calm { color: var(--ink); }
.ads-headline .calm::before { content: "✓"; color: var(--good); margin-right: .35rem; }
.ads-method { font-size: .75rem; color: var(--ink-2); cursor: help; white-space: nowrap; }
.ads { position: relative; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; padding-bottom: .4rem; border-top: 1px solid var(--grid); }
/* 每个账号一组：左侧账号列，右侧逐广告行；各组列宽一致，数字上下对齐。 */
.agroup, .ads-colhead { display: grid; grid-template-columns: 8.4rem minmax(0, 1fr); column-gap: .7rem; padding: 0 1.1rem; }
.agroup { border-top: 1px solid var(--grid); }
.agroup:first-of-type { border-top: 0; }
.agroup.active { background: var(--accent-wash); box-shadow: inset .22rem 0 var(--accent); }
.agroup-acc { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; border: 0; background: transparent; padding: .3rem 0; text-align: left; cursor: pointer; min-width: 0; }
.agroup-acc b { font-size: .85rem; font-variant-numeric: tabular-nums; }
.agroup-acc span { font-size: .72rem; color: var(--ink-2); white-space: nowrap; }
.agroup-acc:hover b, .agroup.active .agroup-acc b { color: var(--accent); }
.agroup-ads { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: .1rem 0; }
.ad { display: grid; grid-template-columns: 7.4rem minmax(0, 2fr) 3.2rem 2.8rem minmax(0, 1fr) 5.4rem; align-items: center; gap: .6rem; min-height: 1.6rem; font-size: .8rem; }
.ad:hover { background: var(--surface-2); }
.ad-empty { font-size: .75rem; color: var(--muted); padding: .35rem 0; }
.ads-colhead { position: sticky; top: 0; z-index: 2; background: var(--surface); padding-top: .35rem; padding-bottom: .25rem; font-size: .7rem; font-weight: 650; color: var(--muted); border-bottom: 1px solid var(--grid); }
.ads-colhead .ad { min-height: 0; font-size: .7rem; }
.ads-colhead .ad:hover { background: none; }
.ad-volume { height: 100%; min-width: 3px; border-radius: 0 .25rem .25rem 0; background: var(--other); }
.rate-track { position: relative; height: .75rem; border-radius: .25rem; background: var(--surface-2); overflow: visible; }
.rate-fill { height: 100%; border-radius: .25rem; background: var(--valid); }
.rate-track.few .rate-fill { opacity: .4; }
.rate-avg { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.ad:hover { background: var(--surface-2); }
.ad-id { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.ad.dim .ad-id { color: var(--muted); }
.ad-track { height: .75rem; }
.ad-fill { display: flex; gap: 2px; height: 100%; min-width: 3px; }
.ad-fill > span:first-child { border-radius: .25rem 0 0 .25rem; }
.ad-fill > span:last-child { border-radius: 0 .25rem .25rem 0; }
.ad-fill > span:only-child { border-radius: .25rem; }
.ad-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.ad-rate { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-rate.muted { font-weight: 500; }
.ad-verdict { white-space: nowrap; }
.ad-verdict .flag { font-size: .72rem; }
.ad-verdict .few { font-size: .72rem; color: var(--muted); }

.detail-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: 0 1.1rem .75rem; border-bottom: 1px solid var(--grid); font-size: .85rem; color: var(--ink-2); }
.detail-summary span { display: inline-flex; align-items: baseline; gap: .3rem; }
.detail-summary b { font-size: 1.3rem; color: var(--ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.detail-summary b.valid { color: var(--valid-ink); }
.detail-summary b.invalid { color: var(--invalid-ink); }
.detail-summary b.money { color: var(--money-ink); }
.records { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.record { display: grid; grid-template-columns: 5.2rem 5.4rem minmax(0, 1fr) 7.6rem; gap: .7rem; align-items: center; padding: .45rem 1.1rem; border-top: 1px solid var(--grid); font-size: .82rem; }
.record:first-child { border-top: 0; }
.record-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.record .stage-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.record .ad { display: block; padding: 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.record .ad:hover { background: none; }
.badge { display: inline-block; max-width: 100%; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--surface-2); color: var(--ink-2); }
.badge.valid { background: var(--valid-wash); color: var(--valid-ink); }
.badge.invalid { background: var(--invalid-wash); color: var(--invalid-ink); }
.badge.pending { background: transparent; box-shadow: inset 0 0 0 1px var(--axis); }
.no-records { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: .88rem; }

.foot { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; }

.tip { position: fixed; z-index: 50; max-width: 24rem; padding: .55rem .7rem; border-radius: .55rem; background: var(--ink); color: var(--surface); font-size: .8rem; line-height: 1.5; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.tip[hidden] { display: none; }
.tip b { font-size: .92rem; }

/* 窗口较矮时收紧间距与图形高度，尽量保持单屏，不出现整页滚动。 */
@media (max-height: 920px) {
  .dash { gap: .6rem; padding: .7rem 1.1rem .55rem; min-height: 38rem; }
  h1 { font-size: 1.3rem; }
  .brand-mark { height: 2rem; }
  .kpi { padding: .5rem .9rem; }
  .kpi .value { font-size: 1.9rem; }
  .kpi .side { font-size: .78rem; line-height: 1.4; }
  .spend-note { font-size: .75rem; }
  .spend { padding: .12rem .5rem; }
  .spend-sub { line-height: 1.3; }
  .vrow { gap: .18rem; }
  .spend-value { font-size: 1.3rem; }
  .section-head { margin-bottom: .4rem; }
  .card { padding: .55rem .75rem .4rem; gap: .28rem; }
  .card-foot { padding-top: .3rem; }
  .card-count { font-size: 1.9rem; }
  .card-rate .rate { font-size: 1.35rem; }
  .unit { margin-top: .15rem; }
  .vbar { height: .55rem; }
  .hchart { height: 2rem; }
  .hlabels { margin-top: .1rem; }
  .panel-head { padding: .4rem 1.1rem .3rem; }
  .ad { min-height: 1.45rem; }
  .agroup-acc { padding: .2rem 0; }
  .record { padding: .32rem 1.1rem; }
}
/* 很窄或很矮时改为上下堆叠：整页滚动，广告区完整展开，不再套内部滚动。 */
@media (max-height: 640px), (max-width: 1100px) {
  .dash { height: auto; min-height: 100dvh; overflow: visible; }
  .lower { flex: none; grid-template-columns: 1fr; }
  .ads { overflow: visible; }
  .detail-panel { height: 30rem; }
}
@media (max-width: 900px) {
  .dash { padding: .8rem; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { flex-direction: column; align-items: flex-start; }
  .kpi-spend { grid-column: 1 / -1; align-items: start; }
  .kpi .side { text-align: left; }
  .top, .section-head, .panel-head { flex-wrap: wrap; }
  .top-meta { flex-wrap: wrap; white-space: normal; }
  .legend, .hint { display: none; }
  .agroup, .ads-colhead { grid-template-columns: 6.4rem minmax(0, 1fr); }
  .ad { grid-template-columns: 6.4rem minmax(0, 2fr) 2.8rem 2.6rem minmax(0, 1fr); }
  .ad-verdict { grid-column: 2 / -1; }
  .foot { flex-direction: column; white-space: normal; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { grid-column: 1 / -1; }
  .kpi-spend { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .spend-col + .spend-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--grid); padding-top: .6rem; }
  .kpi-spend .value { flex-wrap: wrap; row-gap: .3rem; }
}