:root{
  --bg:#0e1117; --panel:#161b24; --panel2:#1c2230; --line:#2a3340;
  --txt:#e6edf3; --muted:#8b98a9; --accent:#4f8cff; --accent2:#36cfc9;
  --good:#3fb950; --warn:#d29922; --pink:#f778ba;
  --c1:#4f8cff; --c2:#36cfc9; --c3:#f778ba; --c4:#d29922; --c5:#3fb950;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;}
a{color:var(--accent)}
.wrap{max-width:1480px;margin:0 auto;padding:18px 22px 60px;}
header.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:14px 18px;background:linear-gradient(90deg,#161b24,#1b2333);border:1px solid var(--line);
  border-radius:14px;margin-bottom:16px;}
header.top h1{font-size:20px;margin:0;letter-spacing:.5px}
header.top .sub{color:var(--muted);font-size:12.5px;margin-top:4px}
header.top .range{color:var(--accent2);font-size:13px;font-weight:600}

/* filter bar */
.filterbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;}
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup label{font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer;user-select:none;padding:6px 12px;border-radius:20px;font-size:13px;
  border:1px solid var(--line);background:var(--panel2);color:var(--muted);transition:.15s}
.chip.on{color:#fff;border-color:transparent;background:var(--accent)}
input[type=date],select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:7px 10px;font-size:13px;outline:none}
input[type=date]{color-scheme:dark}
.btn{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:8px 14px;font-size:13px;font-weight:600;transition:.15s}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
.spacer{flex:1}

/* kpi */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.kpi.k2:before{background:var(--accent2)} .kpi.k3:before{background:var(--pink)}
.kpi.k4:before{background:var(--warn)} .kpi.k5:before{background:var(--good)} .kpi.k6:before{background:#a371f7}
.kpi.k7:before{background:#ff7b72} .kpi.k8:before{background:#79c0ff} .kpi.k9:before{background:#d2a8ff}
.kpi.k10:before{background:#56d364} .kpi.k11:before{background:#ffa657} .kpi.k12:before{background:#e3b341}
.kpi .lab{font-size:12px;color:var(--muted)}
.kpi .val{font-size:22px;font-weight:700;margin-top:6px}
.kpi .val small{font-size:13px;color:var(--muted);font-weight:500}

/* charts grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.card h3{margin:0 0 10px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.chart{width:100%;height:320px}
.span2{grid-column:1 / -1}

/* detail table */
.detail{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.detail .dhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.detail .dhead h3{margin:0;font-size:14px}
.detail input.search{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:7px 10px;font-size:13px;min-width:240px}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:nth-child(-n+3),td:nth-child(-n+3){text-align:left}
th{color:var(--muted);cursor:pointer;user-select:none;position:sticky;top:0;background:var(--panel)}
th:hover{color:var(--txt)}
th .arr{font-size:10px;color:var(--accent)}
tbody tr:hover{background:var(--panel2)}
/* 商品名称：截断显示，悬停看完整名 */
.name-cell{display:inline-block;max-width:200px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;vertical-align:bottom;cursor:help;color:var(--txt)}
.name-cell:hover{color:var(--accent)}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px;color:var(--muted);font-size:12.5px}
.pager button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 10px;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.note{color:var(--muted);font-size:12px;margin-top:18px;text-align:center}

/* 组合筛选框：可勾选 + 可手输 */
.combo{position:relative;min-width:240px}
.combo-ctrl{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:0 8px;transition:.15s}
.combo-ctrl:focus-within{border-color:var(--accent)}
.combo-input{background:transparent;border:none;color:var(--txt);font-size:13px;padding:8px 0;outline:none;flex:1;min-width:0}
.combo-input::placeholder{color:var(--muted)}
.combo-toggle{cursor:pointer;color:var(--muted);padding:0 2px;user-select:none;font-size:12px}
.combo-panel{position:absolute;z-index:30;top:calc(100% + 5px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.45);padding:8px;min-width:300px}
.combo-search{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:6px 8px;font-size:12.5px;outline:none;margin-bottom:6px;box-sizing:border-box}
.combo-list{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.combo-list label{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--txt);
  padding:4px 6px;border-radius:6px;cursor:pointer;line-height:1.35}
.combo-list label:hover{background:var(--panel2)}
.combo-list input[type=checkbox]{margin-top:3px;accent-color:var(--accent);flex:0 0 auto}
.combo-list .pid{color:var(--muted);font-size:11px}
.combo-foot{margin-top:6px;color:var(--muted);font-size:11.5px;display:flex;justify-content:space-between;align-items:center}
.combo-foot button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:3px 10px;font-size:11.5px;cursor:pointer}
.combo-foot button:hover{border-color:var(--accent)}
/* 推广数据区块 */
.promo{background:linear-gradient(180deg,#15202e,#141a24);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;margin:18px 0}
.promo .phead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.promo .phead h2{font-size:16px;margin:0;color:var(--txt);letter-spacing:.3px}
.promo .pctrl{display:flex;align-items:center;gap:10px}
.promo .pctrl label{font-size:12px;color:var(--muted)}
.promo .chk{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--txt);font-size:12.5px}
.promo .chk input{accent-color:var(--accent)}
.promo .kpis{margin-bottom:6px}
.promo-charts{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.promo-sub{flex:1 1 380px;min-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.promo-sub-h{font-size:13px;color:var(--txt);font-weight:600;margin-bottom:4px}
/* 合并数据表（商品 × 推广） */
.merged{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.merged .mhead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.merged .mhead h2{margin:0;font-size:15px;font-weight:600}
.merged .mhead .msub{font-size:11.5px;color:var(--muted);font-weight:400}
.merged input.search{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7px 10px;font-size:13px;min-width:260px}
.merged table{font-size:12px}
.merged th.grp-goods{background:var(--panel2);border-bottom:2px solid var(--accent)}
.merged th.grp-promo{background:#1a2533;border-bottom:2px solid var(--pink)}
.merged .na{color:var(--muted)}
/* 合并表汇总行 */
.merged thead tr.summary-row{background:#1b2638;font-weight:700}
.merged thead tr.summary-row td{color:#e6edf3;border-bottom:2px solid var(--accent);padding:9px 10px}
.merged thead tr.summary-row:hover{background:#1b2638}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:1fr}}
@media(max-width:680px){.kpis{grid-template-columns:repeat(2,1fr)}}