:root{
  --bg:#f5f6f8; --card:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb;
  --blue:#005bff; --blue2:#00aaff; --blue3:#7c5cff; --green:#16a34a; --orange:#f59e0b; --red:#dc2626;
  --up:#16a34a; --down:#dc2626; --grid:#eceef1; --area:rgba(0,91,255,.12);
}
[data-theme="dark"]{
  --bg:#0f1115; --card:#161a21; --text:#e7e9ee; --muted:#9aa3b2; --border:#262b35;
  --blue:#3d82ff; --blue2:#38bdf8; --blue3:#9d8cff; --green:#34d399; --orange:#fbbf24; --red:#f87171;
  --up:#34d399; --down:#f87171; --grid:#20262f; --area:rgba(61,130,255,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;transition:background .2s,color .2s}
.container{max-width:1180px;margin:0 auto;padding:18px 18px 60px}
header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.brand h1{margin:0;font-size:20px;font-weight:600}
.brand .sub{color:var(--muted);font-size:13px;margin-top:2px}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--border);background:var(--card);color:var(--text);padding:7px 12px;border-radius:9px;font-size:13px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--blue);color:var(--blue)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{color:#fff;filter:brightness(1.05)}
select.btn{padding:7px 8px}
.statusbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:14px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.ok{background:var(--green)}
.dot.err{background:var(--red)}
.dot.load{background:var(--orange);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 10px}
.section-title h2{font-size:15px;font-weight:600;margin:0}
.section-title .cap{color:var(--muted);font-size:12px}
.grid-kpi{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1100px){.grid-kpi{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid-kpi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.grid-kpi{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:13px;padding:13px 15px}
.kpi .kpi-label{color:var(--muted);font-size:12px;margin-bottom:6px}
.kpi .kpi-value{font-size:21px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .kpi-split{display:flex;gap:10px;margin-top:8px;font-size:12px;font-variant-numeric:tabular-nums}
.kpi .kpi-split .s{display:flex;align-items:center;gap:5px}
.kpi .kpi-split .sw{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.kpi .segbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:8px;background:var(--grid)}
.kpi .segbar .o{background:var(--green)}
.kpi .segbar .a{background:var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted)}
.chip b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.row{display:grid;grid-template-columns:1fr 320px;gap:12px;margin-bottom:12px}
@media(max-width:900px){.row{grid-template-columns:1fr}}
.chart-card h3{font-size:14px;font-weight:600;margin:0 0 2px}
.chart-card .cap{color:var(--muted);font-size:12px;margin-bottom:8px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:4px}
.legend .lg{display:flex;align-items:center;gap:6px}
.legend .dot{width:10px;height:10px;border-radius:50%}
svg.trend{width:100%;height:auto;display:block}
.tick{fill:var(--muted);font-size:11px}
.grid{stroke:var(--grid);stroke-width:1}
.sum-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px}
@media(max-width:900px){.sum-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.sum-grid{grid-template-columns:repeat(2,1fr)}}
.sum .k{color:var(--muted);font-size:12px;margin-bottom:4px}
.sum .v{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--border);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:12px}
td.num{text-align:right;font-variant-numeric:tabular-nums}
td.center{text-align:center}
.name{font-weight:500}
.meta{color:var(--muted);font-size:11px}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500}
.badge.run{background:rgba(22,163,74,.14);color:var(--green)}
.badge.stop{background:var(--grid);color:var(--muted)}
.badge.pause{background:rgba(245,158,11,.16);color:var(--orange)}
.empty{color:var(--muted);font-size:13px;padding:18px;text-align:center}
/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;padding:30px 14px;overflow:auto;z-index:50}
.overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:880px;width:100%;padding:18px 20px;margin:auto 0}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.modal-head h3{margin:0;font-size:16px;font-weight:600}
.modal-head .x{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
@media(max-width:720px){.info-grid{grid-template-columns:repeat(2,1fr)}}
.info-grid .it{border:1px solid var(--border);border-radius:10px;padding:9px 11px}
.info-grid .k{color:var(--muted);font-size:11px}
.info-grid .v{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.timeline{margin:12px 0 4px}
.tl{display:flex;gap:12px;position:relative;padding-bottom:14px}
.tl::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--grid)}
.tl:last-child::before{display:none}
.tl .node{width:12px;height:12px;border-radius:50%;background:var(--blue);flex:0 0 auto;margin-top:3px}
.tl .node.close{background:var(--muted)}
.tl .node.pause{background:var(--orange)}
.tl .b{font-size:13px}
.tl .t{color:var(--muted);font-size:11px}
.debug{border:1px dashed var(--border);border-radius:10px;padding:12px;margin-top:14px;display:none}
.debug.open{display:block}
.debug pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:11px;overflow:auto;max-height:280px;margin:8px 0 0;white-space:pre-wrap;word-break:break-all}
h3.mini{font-size:14px;font-weight:600;margin:14px 0 6px}

/* ===== 调试抽屉 & 错误横幅 ===== */
.debug{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border:0;border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.22);padding:14px 18px 18px;max-height:72vh;overflow:auto;display:none;margin:0}
.debug.open{display:block}
.btn.on{border-color:var(--blue);color:var(--blue);background:var(--area)}
#js-error{display:none;background:var(--red);color:#fff;padding:10px 14px;border-radius:8px;margin:0 0 12px;font-size:13px}
#js-error.show{display:block}

/* ===== 图表悬停提示 ===== */
#chart-tooltip{position:fixed;z-index:100;display:none;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;box-shadow:0 6px 20px rgba(0,0,0,.22);pointer-events:none;min-width:130px;line-height:1.5}
#chart-tooltip .tt-date{font-weight:600;margin-bottom:4px}
#chart-tooltip .tt-row{display:flex;align-items:center;gap:6px;color:var(--muted)}
#chart-tooltip .tt-row b{color:var(--text);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
#chart-tooltip .tt-swatch{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.guide{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;opacity:.55}

/* ===== 转化漏斗 & 详情筛选 ===== */
.funnel{margin:4px 0 6px}
.fn-row{display:flex;align-items:center;gap:10px;margin:5px 0}
.fn-label{width:44px;color:var(--muted);font-size:12px;flex:0 0 auto}
.fn-track{flex:1;height:22px;background:var(--grid);border-radius:6px;overflow:hidden}
.fn-bar{height:100%;background:linear-gradient(90deg,var(--blue),var(--blue2));border-radius:6px}
.fn-val{width:118px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;flex:0 0 auto}
.fn-rate{color:var(--muted);font-size:11px;margin:0 0 2px 54px}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 12px;padding:10px;border:1px solid var(--border);border-radius:10px}
.filter-bar .preset{padding:5px 10px;font-size:12px}
.filter-bar input[type=date]{padding:5px 8px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:12px}
.filter-bar .preset.on{background:var(--blue);border-color:var(--blue);color:#fff}
#active-body tr:hover{background:var(--bg)}

/* ===== 产品销售漏斗 ===== */
.funnel-svg{width:100%;height:auto;display:block;max-width:560px;margin:0 auto}
.funnel-svg .fn-name{fill:var(--muted);font-size:12px}
.funnel-svg .fn-num{fill:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.funnel-svg .fn-rate-t{fill:var(--muted);font-size:11px}

/* ===== 表头与数据对齐 ===== */
th.num{text-align:right;font-variant-numeric:tabular-nums}
th.center{text-align:center}

/* ===== 趋势图例开关 ===== */
.lg-toggle{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;padding:3px 6px;border-radius:6px}
.lg-toggle .dot{width:10px;height:10px;border-radius:50%}
.lg-toggle .u{color:var(--muted)}
.lg-toggle[aria-pressed="false"]{opacity:.4;text-decoration:line-through}
.lg-toggle:hover{background:var(--bg)}
#trend-note{margin:0 0 8px;color:var(--muted);font-size:12px}

/* ===== 店铺设置弹窗 ===== */
.settings-form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.settings-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
.settings-form input{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--area);color:var(--text);font-size:13px;font-family:inherit}
.settings-form input:focus{outline:none;border-color:var(--blue)}
.settings-note{font-size:12px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.settings-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}