:root {
  --brand1: #667eea;
  --brand2: #764ba2;
  --bg: #f3f4f8;
  --card: #fff;
  --ink: #1a1a2e;
  --muted: #6b7280;
  --line: #e5e7eb;
  --ok: #10b981;
  --warn: #f59e0b;
  --bad: #ef4444;
  --radius: 14px;
  --shadow: 0 2px 12px rgba(20,20,50,.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--ink); font-size:14px; }
a { color: var(--brand1); text-decoration:none; }

/* topbar */
.topbar { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; padding:12px 26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:40px; height:40px; border-radius:10px; background:#fff; color:var(--brand2); display:flex; align-items:center; justify-content:center; font-weight:800; }
.nav-badge { background:#dc2626; color:#fff; border-radius:10px; font-size:11px; font-weight:700; padding:0 6px; line-height:16px; margin-left:2px; display:inline-block; vertical-align:1px; }
.brand-txt b { font-size:17px; display:block; }
.brand-txt small { opacity:.85; font-size:12px; }
#nav { display:flex; gap:8px; }
.nav-link { color:#fff; padding:8px 14px; border-radius:9px; font-weight:600; }
.nav-link:hover, .nav-link.active { background:rgba(255,255,255,.18); }

.container { max-width:1180px; margin:22px auto 60px; padding:0 16px; }
.card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:18px; }
.card h2 { font-size:17px; margin-bottom:14px; }
.card h3 { font-size:15px; margin:6px 0 10px; }
.muted { color:var(--muted); font-size:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.spread { justify-content:space-between; }
.btn { border:none; cursor:pointer; border-radius:9px; padding:8px 15px; font-weight:600; font-size:13px; background:#eef0f6; color:#333; }
.btn:hover { filter:brightness(.97); }
.btn.primary { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.btn.green { background:var(--ok); color:#fff; }
.btn.ghost { background:transparent; border:1px solid #c9cfe0; color:#555; }
.btn.sm { padding:5px 10px; font-size:12px; }
.btn.danger { background:#fee2e2; color:#b91c1c; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.stat b { font-size:24px; }
.stat span { color:var(--muted); font-size:12px; display:block; margin-top:4px; }

/* table */
.tbl-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; }
.tbl th,.tbl td { text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th { color:var(--muted); font-weight:600; font-size:12px; background:#fafafe; }
.tbl tr:hover td { background:#f8f9ff; }

/* badge */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:700; }
.badge.A { background:#fee2e2; color:#b91c1c; }
.badge.B { background:#fef3c7; color:#b45309; }
.badge.C { background:#e0e7ff; color:#4338ca; }
.badge.D { background:#f1f5f9; color:#64748b; }
.badge.st { background:#eef2ff; color:#4f46e5; }
.badge.gr { background:#d1fae5; color:#047857; }
.pill { display:inline-block; padding:2px 8px; border-radius:6px; background:#f1f5f9; color:#475569; font-size:12px; margin:2px 2px 0 0; }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.filters input, .filters select, .fields input, .fields select, .fields textarea {
  border:1px solid #d3d9e6; border-radius:8px; padding:8px 10px; font-size:13px; background:#fff; font-family:inherit;
}
.filters input[type=search] { width:240px; }
.chip { cursor:pointer; border-radius:20px; padding:6px 13px; font-size:12px; background:#fff; border:1px solid #d3d9e6; }
.chip.active { background:#4f46e5; color:#fff; border-color:#4f46e5; }

/* form fields */
.fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.field { display:flex; flex-direction:column; gap:5px; }
.field.full { grid-column:1 / -1; }
.field label { font-size:12px; color:var(--muted); }
.field label b { color:#334; }

/* wizard stepper */
.stepper { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 16px; }
.step { flex:1 1 90px; text-align:center; padding:8px 6px; border-radius:9px; background:#eef0f6; color:#777; font-size:12px; cursor:pointer; }
.step.cur { background:#4f46e5; color:#fff; font-weight:600; }
.step.done { background:#d1fae5; color:#047857; }
.qcard { border:1px solid var(--line); border-left:4px solid var(--brand1); border-radius:10px; padding:14px 16px; margin-bottom:14px; background:#fff; }
.qcard .q { font-weight:600; }
.qcard .intent { color:var(--muted); font-size:12px; margin:4px 0 8px; }
.opt { display:flex; gap:8px; align-items:flex-start; margin:7px 0; padding:7px 10px; border:1px solid #e5e9f2; border-radius:8px; cursor:pointer; }
.opt:hover { background:#f6f7ff; }
.opt input { margin-top:2px; }
.opt.sel { border-color:#4f46e5; background:#eef2ff; }

/* bars */
.bar-row { display:flex; align-items:center; gap:10px; margin:9px 0; }
.bar-row .nm { width:130px; font-size:13px; flex:none; }
.bar-track { flex:1; height:18px; background:#eef0f6; border-radius:9px; overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg,#667eea,#764ba2); border-radius:9px; }
.bar-row .val { width:52px; text-align:right; font-weight:700; }

/* report */
.pain-row .bar-track { background:#fde8e8; }
.pain-row .bar-fill { background:#ef6a6a; }
.combo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.combo-item { border:1px solid var(--line); border-radius:12px; padding:14px; }
.combo-item .head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.combo-item h4 { font-size:15px; }
.quote-box { background:#fffbea; border:1px solid #fde68a; border-radius:10px; padding:14px 16px; white-space:pre-wrap; line-height:1.8; }

/* timeline */
.tl { position:relative; padding-left:22px; }
.tl::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:#e3e6f0; }
.tl-item { position:relative; padding:8px 0 8px 14px; }
.tl-item::before { content:""; position:absolute; left:-19px; top:14px; width:10px; height:10px; border-radius:50%; background:#667eea; }
.tl-item.done::before { background:var(--ok); }
.tl-item .who { font-size:12px; color:var(--muted); }

/* modal */
.modal-mask { position:fixed; inset:0; background:rgba(20,20,40,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; overflow:auto; }
.modal { background:#fff; border-radius:16px; max-width:760px; width:100%; padding:22px 24px; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.modal h3 { margin-bottom:14px; }
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:#1f2937; color:#fff; padding:10px 20px; border-radius:10px; z-index:99; opacity:0; transition:.25s; pointer-events:none; font-size:13px; }
.toast.show { opacity:1; }

/* 收款码点击放大 lightbox */
.qr-zoom-mask { position:fixed; inset:0; z-index:90; background:rgba(10,12,20,.84); display:flex; align-items:center; justify-content:center; cursor:zoom-out; -webkit-user-select:none; user-select:none; }
.qr-zoom-frame { display:flex; flex-direction:column; align-items:center; gap:14px; max-width:94vw; }
.qr-zoom-img { max-width:92vw; max-height:78vh; width:auto; height:auto; background:#fff; padding:16px; border-radius:12px; box-shadow:0 12px 60px rgba(0,0,0,.55); cursor:zoom-out; }
.qr-zoom-tip { color:#e6e8ef; font-size:13px; text-align:center; line-height:1.7; }
.qr-zoom-nope { background:#fff; color:#c0392b; padding:18px 24px; border-radius:10px; text-align:center; font-size:14px; line-height:1.8; }
.qr-zoom-close { position:absolute; top:14px; right:18px; width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:19px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qr-zoom-close:hover { background:rgba(255,255,255,.3); }

.mono { font-family:Consolas,Menlo,monospace; }
.tabbar { display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:16px; }
.tabbtn { padding:9px 18px; cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; font-weight:600; color:var(--muted); }
.tabbtn.active { color:#4f46e5; border-color:#4f46e5; }
.center { text-align:center; }
.right { text-align:right; }
.lead-block { border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.lead-block.a { background:#fef2f2; border:1px solid #fecaca; }
.lead-block.b { background:#fffbeb; border:1px solid #fde68a; }
.lead-block.c { background:#eef2ff; border:1px solid #c7d2fe; }
.lead-block.d { background:#f1f5f9; border:1px solid #e2e8f0; }
.tagline { font-size:15px; line-height:1.7; font-weight:600; margin:4px 0 2px; }
hr { border:none; border-top:1px solid var(--line); margin:14px 0; }

/* 我的专属后台 · 产品方案包向导 */
.pk-status{margin:6px 0 10px;font-size:13.5px;color:#444;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pk-status .badge{margin-right:2px}
.pk-upload{background:#fbf8ef;border:1px dashed #d8c98a;border-radius:8px;padding:10px 12px;margin-bottom:6px}
.pk-upload input[type=file]{font-size:12.5px}
.pk-brand{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.pk-slot{border:1px solid #eee;border-radius:8px;padding:10px 12px;margin:8px 0;background:#fafafa}
.pk-slot.on{background:#f4fbf4;border-color:#bfe3bf}
.pk-slot.on > .row label{color:#166534}
.pk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin-top:8px;transition:opacity .15s}
.pk-grid.off{opacity:.45}
.pk-grid .full{grid-column:1 / -1}
.pk-grid textarea{min-height:52px}
@media(max-width:720px){.pk-brand,.pk-grid{grid-template-columns:1fr}}
/* 跟进提醒：应跟进日 已逾期标红 / 今日橙 */
.tbl tr.due-over td{background:#fef2f2}
.tbl tr.due-over:hover td{background:#fde8e8}
.tbl tr.due-today td{background:#fffbeb}
.tbl tr.due-today:hover td{background:#fef3c7}
.pill.due-pill{font-weight:600}
.pill.due-pill.over{background:#fecaca;color:#b91c1c}
.pill.due-pill.today{background:#fde68a;color:#92400e}