:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e6e8eb;
  --border-strong: #d7dadf;
  --text: #1f2329;
  --text-2: #646a73;
  --text-3: #8f959e;
  --primary: #3370ff;
  --primary-weak: #eaf1ff;
  --success: #34c759;
  --warning: #ff8800;
  --danger: #f54a45;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05);
  --radius: 10px;
  --topbar-h: 58px;
  --sidebar-w: 200px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a;
    --surface: #1f1f23;
    --surface-2: #26262b;
    --border: #303036;
    --border-strong: #3a3a42;
    --text: #e8e8ea;
    --text-2: #a3a3ad;
    --text-3: #74747e;
    --primary: #4c82ff;
    --primary-weak: #1e2a4a;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ---------- 顶部横向:大模块 ---------- */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 28px;
  padding: 0 22px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), #5b8cff);
  color: #fff; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.brand-title { font-size: 15px; font-weight: 600; white-space: nowrap; }

.top-nav { display: flex; align-items: center; gap: 4px; height: 100%; flex: 1; }
.top-item {
  display: inline-flex; align-items: center; gap: 7px;
  height: 100%; padding: 0 16px;
  color: var(--text-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s;
  white-space: nowrap;
}
.top-item:hover { color: var(--text); }
.top-item.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.top-icon { font-size: 16px; }

.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.date-badge { font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-weak); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}

/* ---------- 下半区 ---------- */
.body { flex: 1; display: flex; overflow: hidden; }

/* 左侧纵向:子模块 */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 16px 12px;
}
.sidebar-title { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; padding: 4px 10px 12px; }
.sub-nav { display: flex; flex-direction: column; gap: 2px; }
.sub-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--text-2); text-decoration: none;
  font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.sub-item:hover { background: var(--surface-2); color: var(--text); }
.sub-item.active { background: var(--primary-weak); color: var(--primary); font-weight: 600; }
.sub-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

.sidebar-footer {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--text-3);
  border-top: 1px solid var(--border);
}
.env-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* 主内容 */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.crumb { padding: 14px 24px 0; font-size: 12px; color: var(--text-3); }
.content { flex: 1; overflow-y: auto; padding: 16px 24px 24px; }
.content.embed { padding: 0; overflow: hidden; display: flex; }
.embed-frame { flex: 1; width: 100%; height: 100%; border: 0; background: var(--surface); }

/* ---------- 通用视图组件 ---------- */
.view-head { margin-bottom: 20px; }
.view-head h2 { font-size: 18px; font-weight: 600; }
.view-head p { color: var(--text-2); margin-top: 4px; font-size: 13px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: #285ce0; color: #fff; }
.filter-input {
  padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 13px; min-width: 180px; outline: none;
}
.filter-input:focus { border-color: var(--primary); }

/* KPI 卡片 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.kpi-label { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; margin-top: 10px; letter-spacing: -.5px; }
.kpi-value .unit { font-size: 14px; font-weight: 500; color: var(--text-3); margin-left: 3px; }
.kpi-delta { font-size: 12px; margin-top: 6px; color: var(--text-3); }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--danger); }

/* 卡片区块 */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-head { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card-head h3 { font-size: 15px; font-weight: 600; }
.card-body { padding: 18px; }
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .card-grid { grid-template-columns: 1fr; } }

/* 空占位 */
.placeholder {
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 44px 24px; text-align: center; color: var(--text-3);
  background: var(--surface-2);
}
.placeholder .ph-icon { font-size: 34px; margin-bottom: 10px; }
.placeholder .ph-title { font-size: 15px; color: var(--text-2); font-weight: 500; }
.placeholder .ph-desc { font-size: 13px; margin-top: 6px; }
.chart-skeleton {
  height: 240px; border-radius: 8px;
  display: flex; align-items: flex-end; gap: 10px; padding: 16px;
}
.chart-skeleton .bar { flex: 1; border-radius: 4px 4px 0 0; background: var(--primary-weak); }

/* 表格 */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--text-3); font-weight: 500; font-size: 12px; background: var(--surface-2); }
tbody tr:hover { background: var(--surface-2); }

/* ---------- 客户 · 首末单日期 ---------- */
.cust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.cust-chip { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: 13px; cursor: pointer; }
.cust-chip b { color: var(--text); font-weight: 600; margin-left: 2px; }
.cust-chip:hover { border-color: var(--primary); }
.cust-chip.active { background: var(--primary-weak); border-color: var(--primary); color: var(--primary); }
.cust-chip.active b { color: var(--primary); }
.cust-table th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); text-align: left; white-space: nowrap; }
.cust-table td { text-align: left; white-space: nowrap; }
.cust-table td.num, .cust-table th.num { text-align: right; }
.cust-table td.mono { font-variant-numeric: tabular-nums; color: var(--text-2); }
.cust-table td.cname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.cust-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.cust-badge.s-a { background: rgba(52,199,89,.14); color: #1f9d55; }
.cust-badge.s-b { background: rgba(160,200,40,.16); color: #7a8a12; }
.cust-badge.s-c { background: rgba(255,180,0,.16); color: #a9791c; }
.cust-badge.s-d { background: rgba(255,136,0,.16); color: #c76a12; }
.cust-badge.s-e { background: rgba(245,74,69,.14); color: #e02e2a; }
.cust-badge.s-x { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }

/* ---------- 销售业绩 · 汇总卡 ---------- */
.sales-summary { margin-bottom: 22px; }
.sum-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 4px 0 18px; }
@media (max-width: 1100px) { .sum-tables { grid-template-columns: 1fr; } }
.sum-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sum-title { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 12px 14px 8px; }
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table th { background: #1f6e5c; color: #eaf4ef; font-weight: 500; font-size: 12px; padding: 8px 10px; text-align: right; }
.sum-table th.rl, .sum-table td.rl { text-align: left; }
.sum-table td { padding: 8px 10px; border-top: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.sum-table tr.sum-tot td { font-weight: 700; background: var(--surface-2); }
.sum-table .delta.up { color: #1f9d55; } .sum-table .delta.down { color: #e02e2a; } .sum-table .delta.zero { color: var(--text-3); }

.sum-lead { font-size: 13px; font-weight: 600; color: var(--text); margin: 4px 2px 10px; }
.sum-lead .hint { font-weight: 400; color: var(--text-3); margin-left: 6px; }
.lb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1100px) { .lb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .lb-grid { grid-template-columns: 1fr; } }
.lb-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.lb-title { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.lb-title.up { color: #1f9d55; } .lb-title.down { color: #e02e2a; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.lb-row .lb-n { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .lb-t { color: var(--text-3); font-size: 12px; }
.lb-row .delta.up { color: #1f9d55; } .lb-row .delta.down { color: #e02e2a; } .lb-row .delta.zero { color: var(--text-3); }

/* ---------- 销售业绩表 ---------- */
.date-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.date-label input { min-width: 150px; }
.hint { font-size: 12px; color: var(--text-3); }
.warn-tag { color: var(--warning); font-weight: 500; }

.sales-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.sales-table { font-size: 12px; border-collapse: separate; border-spacing: 0; }
.sales-table th, .sales-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; }
.sales-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sales-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); font-weight: 600; color: var(--text-2); }
.sales-table .head-group th { text-align: center; font-size: 13px; padding: 8px 9px; }
.sales-table .head-sub th { top: 33px; font-size: 11px; color: var(--text-3); font-weight: 500; }
.sales-table .sec-dau { background: #fce8ef; color: #b83280; }
.sales-table .sec-gmv { background: #fdf3d8; color: #a9791c; }
@media (prefers-color-scheme: dark) {
  .sales-table .sec-dau { background: #3a1f2c; color: #f0a6c8; }
  .sales-table .sec-gmv { background: #352c17; color: #e3c983; }
}

/* 首列冻结 */
.sales-table .sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; }
.sales-table thead .sticky { z-index: 4; background: var(--surface-2); }
.sales-table .name { min-width: 132px; }
.sales-table .newcol { min-width: 56px; white-space: normal; text-align: center; }

/* 单元格底色 */
.sales-table .soft { background: var(--surface-2); }
.sales-table .strong { font-weight: 600; color: var(--text); }
.sales-table td.newstore { text-align: center; font-weight: 600; color: var(--primary); }

/* 行类型 */
.sales-table .row-member td { color: var(--text-2); }
.sales-table .row-member .sticky { color: var(--text); font-weight: 500; }
.sales-table .row-team td { background: #e8f5ec; font-weight: 600; color: #1f7a44; }
.sales-table .row-team .sticky { background: #d6efdd; color: #145c31; }
.sales-table .row-total td { background: #d6efdd; font-weight: 700; color: #145c31; }
.sales-table .row-total .sticky { background: #c3e8ce; color: #0f4a27; }
@media (prefers-color-scheme: dark) {
  .sales-table .row-team td { background: #17301f; color: #7fd39b; }
  .sales-table .row-team .sticky { background: #1c3a26; color: #9be0b3; }
  .sales-table .row-total td { background: #1c3a26; color: #9be0b3; }
  .sales-table .row-total .sticky { background: #224a2f; color: #b6ecc7; }
}

/* 对比涨跌 */
/* ---------- 日活预估 ---------- */
.dau-view { --act:#1D9E75; --fc:#54B78E; --wk:#C0392B; --acc:#1F6E5C; --chipbg:#EAF4EF; --aband:#CDE7B8; --fband:#EAF3E1; --dline:var(--border); }
@media(prefers-color-scheme:dark){ .dau-view{ --act:#3DBE92; --fc:#5FCBA0; --wk:#E9827A; --acc:#3DA57F; --chipbg:#17302A; --aband:#274a37; --fband:#1c2c24; } }
:root[data-theme=dark] .dau-view{ --act:#3DBE92; --fc:#5FCBA0; --wk:#E9827A; --acc:#3DA57F; --chipbg:#17302A; --aband:#274a37; --fband:#1c2c24; }
:root[data-theme=light] .dau-view{ --act:#1D9E75; --fc:#54B78E; --wk:#C0392B; --acc:#1F6E5C; --chipbg:#EAF4EF; --aband:#CDE7B8; --fband:#EAF3E1; }

.dau-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0; }
@media(max-width:640px){ .dau-kpis{ grid-template-columns:1fr; } }
.dau-kpi { background:var(--chipbg); border-radius:14px; padding:15px 18px; }
.dk-l { font-size:11px; letter-spacing:.06em; color:var(--acc); font-weight:600; }
.dk-v { font-size:30px; font-weight:680; font-variant-numeric:tabular-nums; margin-top:4px; color:var(--text); }
.dk-s { font-size:11.5px; color:var(--text-3); margin-top:3px; }

.dau-legend { display:flex; gap:20px; font-size:12px; color:var(--text-2); margin:2px 2px 12px; align-items:center; }
.dau-legend b { color:var(--text); font-weight:500; }
.dau-legend .wk { color:var(--wk); }
.d-sw { display:inline-block; width:22px; height:0; border-top:3px solid var(--act); vertical-align:middle; margin-right:6px; }
.d-sw.f { border-top:3px dashed var(--fc); }

.dau-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; margin-bottom:16px; overflow-x:auto; box-shadow:var(--shadow); }
.d-chart { width:100%; height:auto; min-width:680px; }
.d-grid { stroke:var(--border); stroke-width:1; }
.d-yl { fill:var(--text-3); font-size:11px; text-anchor:end; }
.d-aline { fill:none; stroke:var(--act); stroke-width:2.6; }
.d-fline { fill:none; stroke:var(--fc); stroke-width:2.6; stroke-dasharray:7 5; }
.d-ad { fill:var(--act); }
.d-fd { fill:var(--surface); stroke:var(--fc); stroke-width:2; }
.d-thl { stroke:#C9A227; stroke-width:1.4; }
.d-tht { fill:#B9891A; font-size:11px; }
.d-xl { fill:var(--text-3); font-size:11px; text-anchor:middle; }
.d-xw { fill:var(--text-3); font-size:10px; text-anchor:middle; }
.d-xw.wk { fill:var(--wk); font-weight:600; }

.d-tbl { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:680px; }
.d-tbl th { background:var(--acc); color:#EAF4EF; font-weight:500; font-size:12px; padding:8px; }
.d-tbl th.wk { color:#FBD9D3; }
.d-tbl td { border:1px solid var(--border); padding:7px; text-align:center; font-size:13px; color:var(--text); }
.d-tbl td:first-child { color:var(--text-3); font-size:12px; }
.d-tbl tr.d-dt td { color:var(--text-3); font-size:11.5px; }
.d-tbl td.a { background:var(--aband); font-weight:600; }
.d-tbl td.f { background:var(--fband); }
.dau-foot { font-size:11.5px; color:var(--text-3); margin-top:6px; line-height:1.6; }

/* 收货时段 · 周历表 */
.slot-tbl { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:680px; }
.slot-tbl th { background:var(--acc); color:#EAF4EF; font-weight:500; font-size:12px; padding:8px 6px; text-align:center; }
.slot-tbl th.wk { color:#FBD9D3; }
.slot-tbl th.colnow { background:#145c31; }
.slot-tbl th .dsub { display:block; font-size:10px; opacity:.85; font-weight:400; margin-top:2px; }
.slot-tbl td { border:1px solid var(--border); padding:7px 6px; text-align:center; font-size:13px; color:var(--text); }
.slot-tbl td.rl, .slot-tbl th.rl { text-align:left; white-space:nowrap; color:var(--text-2); font-size:12px; }
.slot-tbl td.a { background:var(--aband); font-weight:600; }
.slot-tbl td.f { background:var(--fband); }
.slot-tbl tr.tot td { font-weight:700; border-top:2px solid var(--border-strong); }
.slot-tbl .sq { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.dau-sec { font-size:15px; font-weight:600; color:var(--text); margin:22px 0 12px; }
.dau-sec span { font-size:12px; font-weight:400; color:var(--text-3); }
.dau-legend .sq, .slot-kpi .sq { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin-right:6px; }
.slot-kpi .dk-l { display:flex; align-items:center; }

.sales-table .delta.up { color: #1f9d55; }
.sales-table .delta.down { color: #e02e2a; }
.sales-table .delta.zero { color: var(--text-3); }
.sales-table .row-team .delta.up, .sales-table .row-total .delta.up { color: #147a3e; }

.d-tbl .d-hol { color: var(--wk); font-size: 10px; }