:root {
  --bg: #F5F0E8;
  --bg2: #FBF8F2;
  --panel: #FFFEFA;
  --panel2: #F7F2E9;
  --line: #E6DFD2;
  --line-soft: #EFE9DE;
  --text: #3D3428;
  --muted: #8A7E6E;
  --accent: #A67C52;
  --accent-soft: #C4A484;
  --accent-bg: #F0E6D8;
  --good: #6B8F71;
  --good-bg: #E8F0E9;
  --warn: #B8956C;
  --warn-bg: #F5EBDD;
  --bad: #B87A6A;
  --bad-bg: #F5E6E2;
  --pending: #9A8BB5;
  --pending-bg: #EEEAF4;
  --shadow: none;
  --radius: 12px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.app { display:grid; grid-template-columns: 220px 1fr; min-height:100vh; }
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 28px 18px;
  position: sticky; top:0; height:100vh;
}
.brand { display:flex; gap:12px; align-items:center; margin-bottom: 28px; }
.brand-badge {
  width:40px; height:40px; border-radius:10px;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  display:grid; place-items:center;
  font-weight:700; color: var(--accent); font-size:13px;
  letter-spacing: 0.5px;
}
.brand h1 { font-size:16px; margin:0; font-weight:600; color:var(--text); }
.brand p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.nav { display:flex; flex-direction:column; gap:4px; }
.nav button {
  appearance:none; border:1px solid transparent; background:transparent;
  color:var(--muted); text-align:left; padding:11px 14px; border-radius:10px;
  cursor:pointer; font-size:14px; font-family: inherit;
}
.nav button:hover { background: var(--bg2); color:var(--text); }
.nav button.active {
  background: var(--accent-bg);
  border-color: var(--line);
  color: var(--text);
  font-weight:600;
}
.badge-demo {
  display: none;
  margin-top: 24px; padding:12px 14px; border-radius:10px;
  background: var(--bg2); border:1px solid var(--line-soft);
  color: var(--muted); font-size:12px; line-height:1.55;
}
.main { padding: 28px 32px 48px; background: var(--bg); }
.topbar {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin-bottom: 24px; flex-wrap:wrap;
}
.topbar h2 { margin:0; font-size:22px; font-weight:600; letter-spacing:0.2px; }
.topbar .sub { color:var(--muted); font-size:13px; margin-top:6px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn, button.btn {
  appearance:none; border:1px solid var(--line); background: var(--panel);
  color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer;
  font-size:13px; font-family: inherit;
}
.btn:hover { border-color: var(--accent-soft); background: var(--bg2); }
.btn.primary {
  background: var(--accent); border-color: var(--accent);
  color: #FFFEFA; font-weight:600;
}
.btn.primary:hover { filter: brightness(0.95); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
input, select {
  background: var(--panel); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:8px 12px; font-size:13px; outline:none;
  font-family: inherit;
}
input:focus, select:focus { border-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-bg); }
.kpi-grid {
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin-bottom:18px;
}
.kpi {
  background: var(--panel);
  border:1px solid var(--line); border-radius: var(--radius); padding:16px 18px;
  cursor:pointer; transition: border-color .15s, background .15s;
}
.kpi:hover { border-color: var(--accent-soft); background: var(--bg2); }
.kpi .label { color:var(--muted); font-size:12px; font-weight:500; }
.kpi .value {
  font-size:26px; font-weight:650; margin:10px 0 6px;
  letter-spacing:.2px; color: var(--text); font-variant-numeric: tabular-nums;
}
.kpi .def { color:var(--muted); font-size:11px; line-height:1.45; min-height:28px; }
.kpi.pending .value { color: var(--pending); font-size:18px; font-weight:600; }
.kpi.warn .value { color: var(--warn); }
.kpi.good .value { color: var(--good); }
.grid-2 { display:grid; grid-template-columns: 1.4fr 1fr; gap:14px; margin-bottom:14px; }
.card {
  background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); padding:18px 20px;
}
.card h3 {
  margin:0 0 14px; font-size:15px; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  color: var(--text);
}
.muted { color: var(--muted); }
.table-wrap { overflow:auto; max-height: 520px; }
table { width:100%; border-collapse: collapse; font-size:13px; }
th, td {
  padding:11px 10px; border-bottom:1px solid var(--line-soft);
  text-align:left; white-space:nowrap;
}
th {
  color:var(--muted); font-weight:600; position:sticky; top:0;
  background: var(--panel); font-size:12px;
}
tr:hover td { background: var(--bg2); }
tr.click-cust, tr.click-ord { cursor: pointer; }
.tag {
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
  font-size:11px; border:1px solid var(--line); color:var(--muted); background: var(--bg2);
}
.tag.ok { color: var(--good); border-color: #C9DCCB; background: var(--good-bg); }
.tag.warn { color: var(--warn); border-color: #E6D5BC; background: var(--warn-bg); }
.tag.bad { color: var(--bad); border-color: #E6C9C0; background: var(--bad-bg); }
.tag.pending { color: var(--pending); border-color: #D9D2E6; background: var(--pending-bg); }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center; }
.pager {
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
  margin-top:14px; color:var(--muted); font-size:12px;
}
.drawer-backdrop {
  position:fixed; inset:0; background:rgba(61,52,40,.28); display:none; z-index:40;
}
.drawer-backdrop.show { display:block; }
.drawer {
  position:fixed; top:0; right:0; width:min(480px, 96vw); height:100vh;
  background: var(--panel); border-left:1px solid var(--line);
  transform: translateX(100%); transition: transform .2s ease; z-index:50;
  padding:22px; overflow:auto;
}
.drawer.show { transform:none; }
.drawer h3 { margin:0 0 8px; font-weight:600; }
.kv { display:grid; grid-template-columns: 110px 1fr; gap:10px 12px; font-size:13px; }
.kv .k { color:var(--muted); }
.list-risk { display:flex; flex-direction:column; gap:8px; }
.risk-item {
  display:flex; justify-content:space-between; gap:10px; padding:11px 13px;
  border:1px solid var(--line-soft); border-radius:10px; background: var(--bg2);
  font-size:13px;
}
.chart-box { position:relative; height:280px; }
.hidden { display:none !important; }
.footer-note { margin-top:14px; color:var(--muted); font-size:12px; line-height:1.55; }
details.口径 {
  margin-top:14px; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  background: var(--panel);
}
details.口径 summary { cursor:pointer; color:var(--text); font-weight:600; }
details.口径 ul { margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.65; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px; background: var(--bg2); padding:1px 5px; border-radius:4px;
  border:1px solid var(--line-soft);
}
#toast {
  position:fixed; left:50%; bottom:24px;
  transform:translateX(-50%) translateY(80px); opacity:0; transition:.25s;
  background: var(--panel); border:1px solid var(--line); color: var(--text);
  padding:11px 16px; border-radius:10px; z-index:80; max-width:80vw;
  box-shadow: 0 8px 24px rgba(61,52,40,.08);
}
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
#toast.bad { border-color: #E6C9C0; color: var(--bad); background: var(--bad-bg); }
@media (max-width: 1100px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position:relative; height:auto; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}

.kpi.soft .value { color: var(--warn); }
.life-track {
  display:flex; height:14px; border-radius:999px; overflow:hidden;
  border:1px solid var(--line); background: var(--bg2);
}
.life-seg { height:100%; min-width:2px; }
.life-unadded { background: #D4A99A; }
.life-inquiry { background: #D4C0A0; }
.life-won { background: #A3C0A8; }
.life-legend-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.life-legend {
  appearance:none; border:1px solid var(--line-soft); background: var(--bg2);
  border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px;
  color: var(--text); font-family: inherit; display:inline-flex; align-items:center; gap:6px;
}
.life-legend:hover { border-color: var(--accent-soft); }
.life-legend .dot {
  width:8px; height:8px; border-radius:50%; display:inline-block;
}
.life-legend .dot.life-unadded { background:#D4A99A; }
.life-legend .dot.life-inquiry { background:#D4C0A0; }
.life-legend .dot.life-won { background:#A3C0A8; }
.decision-list { display:flex; flex-direction:column; gap:10px; }
.decision-card {
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  background: var(--bg2);
}
.decision-card.clickable { cursor:pointer; transition: border-color .15s, background .15s; }
.decision-card.clickable:hover { border-color: var(--accent-soft); background: var(--panel); }
.decision-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.decision-name { font-weight:600; font-size:14px; }
.decision-block { margin-top:10px; }
.decision-block.next { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.decision-label { font-size:11px; letter-spacing:0.04em; color: var(--accent); font-weight:600; margin-bottom:4px; }
.decision-reason { font-size:13px; color: var(--muted); line-height:1.55; }
.decision-next { font-size:13px; color: var(--text); line-height:1.55; font-weight:500; }

.empty-state {
  text-align: center;
  padding: 28px 12px;
  color: var(--muted);
  font-size: 14px;
}
.tag.muted-tag {
  background: rgba(138, 126, 110, 0.12);
  color: #8A7E6E;
  border: 1px solid rgba(138, 126, 110, 0.22);
}

.tech-details {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.tech-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
  user-select: none;
}
.tech-details .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  word-break: break-all;
}


/* Boss hero KPIs: 成交多少人 / 多少张单 / 一共多少钱 */
.kpi-hero-wrap { margin-bottom: 16px; }
.kpi-hero-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin-bottom: 10px;
}
.kpi.kpi-hero {
  padding: 22px 22px 18px;
  border-width: 1.5px;
  border-color: var(--accent-soft);
  background: var(--bg2);
  cursor: pointer;
}
.kpi.kpi-hero .label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.kpi.kpi-hero .value {
  font-size: 34px;
  font-weight: 700;
  margin: 12px 0 8px;
  color: var(--text);
}
.kpi.kpi-hero.good .value { color: var(--good); }
.kpi.kpi-hero .def {
  font-size: 12px;
  min-height: auto;
}
.kpi-hero-note {
  margin: 0 2px 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
details.kpi-more {
  margin-bottom: 14px;
  padding: 12px 16px;
}
details.kpi-more > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  list-style: none;
  outline: none;
}
details.kpi-more > summary::-webkit-details-marker { display: none; }
details.kpi-more > summary::before {
  content: "▸ ";
  color: var(--accent-soft);
}
details.kpi-more[open] > summary::before { content: "▾ "; }
details.kpi-more[open] > summary { margin-bottom: 12px; }
details.kpi-more .kpi-grid { margin-bottom: 0; }
@media (max-width: 900px) {
  .kpi-hero-grid { grid-template-columns: 1fr !important; }
}