/* 商家后台 · 视觉还原基准（1280 × 960，1:1 CSS px） */
:root {
  --brand: #1A4E46;
  --brand-side: #25534A;
  --brand-soft: #E9EFE6;
  --gold: #C6A070;
  --gold-text: #C09059;
  --gold-soft: #EFEAE1;
  --page: #FCFCFB;
  --card: #FFFFFF;
  --line: #EDEBE5;
  --text: #16211D;
  --text-sub: #5C6660;
  --text-weak: #9AA29C;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  width:1280px; background: var(--page); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.app { display:flex; min-height:960px; }

/* 侧栏 */
aside {
  width:196px; flex-shrink:0; background: var(--brand-side); color:#fff;
  padding: 22px 0 24px; display:flex; flex-direction:column;
}
aside .logo { padding: 0 22px 26px; }
aside .logo b { font-size:19px; font-weight:600; letter-spacing:.5px; display:block; }
aside .logo small { font-size:10.5px; opacity:.62; display:block; margin-top:5px; letter-spacing:1px; }
aside nav a {
  display:flex; align-items:center; gap:11px; height:48px; padding:0 22px;
  color:rgba(255,255,255,.8); text-decoration:none; font-size:13.5px;
  border-left:3px solid transparent;
}
aside nav a svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
aside nav a:hover { color:#fff; background:rgba(255,255,255,.05); }
aside nav a.on { color:#fff; background:rgba(255,255,255,.12); border-left-color:var(--gold); font-weight:500; }

/* 主区 */
main { flex:1; padding: 22px 26px 28px; }
.topbar { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-bottom:6px; }
.demo-tag { background: var(--gold-soft); color:#8a6d3f; font-size:11px; padding:4px 10px; border-radius:4px; }
.user-chip { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); }
.user-chip svg { width:17px; height:17px; stroke:var(--text-sub); fill:none; stroke-width:1.6; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
.page-head h1 { font-size:27px; font-weight:600; letter-spacing:.3px; }
.page-head p { font-size:12.5px; color:var(--text-sub); margin-top:7px; }
.head-actions { display:flex; gap:9px; }
.btn {
  height:34px; padding:0 14px; border-radius:6px; font-size:12.5px; border:1px solid var(--line);
  background:#fff; color:var(--text); display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.btn--primary { background: var(--brand); border-color: var(--brand); color:#fff; }
.btn--gold { background:#fff; border-color: var(--gold); color:#8a6d3f; }

.hintbar {
  display:flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  background:#F4F5F0; border-radius:6px; font-size:11.5px; color:#6d7a72; margin: 10px 0 14px;
}
.hintbar svg { width:13px; height:13px; stroke:#8b968e; fill:none; stroke-width:1.6; }

/* KPI */
.kpis { display:flex; gap:14px; }
.kpi { flex:1; background:#fff; border:1px solid #F1EFE9; border-radius:9px; padding:16px 18px; }
.kpi .h { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-sub); }
.kpi .h svg { width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.kpi b { display:block; font-size:26px; font-weight:600; margin-top:9px; letter-spacing:-.3px; }

/* 通用卡片 */
.card { background:#fff; border:1px solid #F1EFE9; border-radius:9px; }
.card .ch { padding:16px 18px 0; }
.card .ch h3 { font-size:14.5px; font-weight:600; }
.card .ch .sub { font-size:11.5px; color:var(--text-weak); margin-top:4px; }

/* 表格 */
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th {
  background:#F7F6F2; color:var(--text-sub); font-weight:400; text-align:left;
  padding:11px 14px; font-size:11.5px; white-space:nowrap;
}
td { padding:13px 14px; border-bottom:1px solid #F3F1EB; color:var(--text); }
tr:last-child td { border-bottom:none; }
td.num, th.num { text-align:right; }
.link { color:var(--brand); text-decoration:none; }
.tag { display:inline-flex; align-items:center; height:21px; padding:0 9px; border-radius:4px; font-size:11px; background:var(--brand-soft); color:#2C6B5F; white-space:nowrap; }
.tag--warn { background:#FBEFE6; color:#B4693B; }
.tag--gold { background:var(--gold-soft); color:#8a6d3f; }
.tag--grey { background:#F0EFEA; color:#7d857f; }
.tag--red { background:#FBEAEA; color:#B4544E; }
.tag--live { background:var(--brand-soft); color:#2C6B5F; }

.pager { display:flex; justify-content:flex-end; gap:6px; padding:14px 18px 16px; }
.pager a { width:28px; height:28px; border:1px solid var(--line); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-sub); text-decoration:none; }
.pager a.on { background:var(--brand); border-color:var(--brand); color:#fff; }