/* ==========================================================================
   红娘管理系统 · 样式（v1.2 UI 规格）
   配色：主色 #e95a8c，渐变 #ff9ec4 → #e95a8c，登录页 #ffd6e7 → #c2e0ff
   ========================================================================== */

:root {
  --pink: #e95a8c;
  --pink-d: #d44a7c;
  --pink-l: #ff9ec4;
  --pink-50: #fff5f9;
  --pink-100: #ffe6f0;
  --blue: #5b8dd9;
  --blue-100: #e6f0fc;
  --green: #5bbf8a;
  --green-100: #e8f7ee;
  --red: #e0506e;
  --red-100: #fde7ec;
  --yellow: #c98a2c;
  --yellow-100: #fff7e6;
  --text-1: #3a2b36;
  --text-2: #6a5a64;
  --text-3: #9a8a94;
  --line: #f3ecf1;
  --line-2: #e8dde4;
  --bg: #f6f1f7;
  --card: #ffffff;
  --shadow-1: 0 2px 12px rgba(233, 80, 140, 0.07);
  --shadow-2: 0 4px 16px rgba(233, 80, 140, 0.12);
  --shadow-3: 0 12px 40px rgba(233, 80, 140, 0.18);
  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --grad: linear-gradient(135deg, #ff9ec4, #e95a8c);
  --grad-blue: linear-gradient(135deg, #ffd6e7, #c2e0ff);
  --grad-bg: linear-gradient(135deg, #f6e8f1, #f0d9e7, #e9c9dd);
  --grad-side: linear-gradient(180deg, #2e1a2a, #3a2433);
  --sb-w: 200px;
  --top-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text-1); background: var(--bg); font-size: 13px; }
a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-d); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 12px; color: var(--text-1); }
img { max-width: 100%; }

/* ============================ 登录页 ============================ */
body.login-mode { background: var(--grad-bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
body.login-mode .topbar, body.login-mode .sidebar, body.login-mode .main { display: none; }
.login-card { width: 360px; max-width: 100%; background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: 36px 30px 28px; text-align: center; }
.login-logo { display: inline-block; background: #fff; border-radius: 18px; padding: 6px; box-shadow: 0 4px 14px rgba(233, 80, 140, 0.18); margin-bottom: 14px; }
.login-logo img { width: 84px; height: 84px; display: block; border-radius: 12px; }
.login-name { font-size: 20px; font-weight: 700; color: var(--text-1); letter-spacing: 1px; }
.login-sub { font-size: 12px; color: var(--text-3); margin: 6px 0 22px; }
.login-card .field { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 14px; background: #faf7f9; margin-bottom: 12px; transition: border-color 0.15s; }
.login-card .field:focus { outline: none; border-color: var(--pink); background: #fff; }
.login-card .field::placeholder { color: #b9aab3; }
.btn-login { width: 100%; height: 42px; border: none; border-radius: var(--r); background: var(--grad); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 4px; margin-top: 4px; transition: opacity 0.15s; }
.btn-login:hover { opacity: 0.92; }
.login-foot { font-size: 11px; color: var(--text-3); margin-top: 18px; }
.login-err { color: var(--red); font-size: 12px; min-height: 18px; margin: 4px 0 -4px; }

/* ============================ 整体布局 ============================ */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sb-w); flex-shrink: 0; background: var(--grad-side); color: rgba(255, 255, 255, 0.85); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sidebar-logo { width: 40px; height: 40px; border-radius: 9px; background: #fff; padding: 3px; display: flex; align-items: center; justify-content: center; }
.sidebar-logo img { width: 100%; height: 100%; border-radius: 6px; }
.sidebar-name { font-size: 14px; font-weight: 600; color: #ffd6e7; }
.sidebar-name small { display: block; font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.45); margin-top: 2px; letter-spacing: 1px; }
.nav-group { padding: 14px 16px 4px; font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; }
.nav-group:first-of-type { padding-top: 12px; }
.nav-item { padding: 9px 16px; font-size: 13px; color: rgba(255, 255, 255, 0.78); display: flex; align-items: center; gap: 8px; cursor: pointer; border-left: 3px solid transparent; transition: all 0.15s; }
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(255, 158, 196, 0.32), rgba(233, 80, 140, 0.4)); color: #fff; border-left-color: #ff9ec4; }
.nav-icon { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; opacity: 0.85; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--top-h); background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 22px; position: sticky; top: 0; z-index: 5; }
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text-1); }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--pink-50); border-radius: 20px; font-size: 12px; color: var(--text-2); }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.topbar-btn { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); border-radius: 18px; padding: 5px 12px; font-size: 12px; }
.topbar-btn:hover { border-color: var(--pink); color: var(--pink); }
.topbar-btn.primary { background: var(--grad); color: #fff; border-color: transparent; padding: 5px 14px; }

.section { padding: 18px 22px 28px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sec-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.sec-title small { color: var(--text-3); font-weight: 400; font-size: 12px; margin-left: 8px; }

/* ============================ 通用卡片 ============================ */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px; margin-bottom: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 14px; }
.card-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.card-sub { font-size: 12px; color: var(--text-3); }

/* ============================ 按钮 ============================ */
.btn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: #fff; color: var(--text-1); font-size: 12px; transition: all 0.15s; }
.btn:hover { border-color: var(--pink); color: var(--pink); }
.btn.primary { background: var(--grad); color: #fff; border-color: transparent; font-weight: 600; }
.btn.primary:hover { opacity: 0.9; color: #fff; }
.btn.outline { background: #fff; border-color: var(--pink); color: var(--pink); }
.btn.outline:hover { background: var(--pink-50); }
.btn.ghost { background: var(--pink-50); border-color: transparent; color: var(--pink); }
.btn.ghost:hover { background: var(--pink-100); }
.btn.quiet { background: #f2f0f2; color: var(--text-3); border-color: transparent; }
.btn.quiet:hover { background: #ece8ec; color: var(--text-2); }
.btn.danger { background: #fff; border-color: var(--red); color: var(--red); }
.btn.danger:hover { background: var(--red-100); }
.btn.blue { background: var(--blue-100); color: var(--blue); border-color: transparent; }
.btn.blue:hover { background: #d2e2f8; }
.btn.green { background: var(--green-100); color: var(--green); border-color: transparent; }
.btn.green:hover { background: #d8efe0; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); }
.btn.xs { height: 22px; padding: 0 8px; font-size: 11px; border-radius: 4px; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================ 窄控件（筛选行） ============================ */
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; background: #fbf7fa; border-radius: var(--r-md); margin-bottom: 14px; }
.filter-cell { display: flex; align-items: center; gap: 4px; }
.filter-cell label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.f-input { height: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; font-size: 12px; min-width: 80px; }
.f-input:focus { outline: none; border-color: var(--pink); }
.f-input.s { width: 60px; min-width: 60px; }
.f-input.m { width: 90px; min-width: 90px; }
.f-select { height: 28px; padding: 0 22px 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; font-size: 12px; min-width: 100px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239a8a94' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.f-select:focus { outline: none; border-color: var(--pink); }
/* 自定义多选下拉（学历） */
.ms-wrap { position: relative; display: inline-block; }
.ms-btn { cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.ms-btn .ms-label { flex: 1; }
.ms-btn .ms-caret { font-size: 10px; color: var(--text-3); }
.ms-wrap.open .ms-panel { display: block; }
.ms-panel { display: none; position: absolute; z-index: 30; top: 32px; left: 0; min-width: 140px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow-1); padding: 6px; }
.ms-opt { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: var(--text-1); cursor: pointer; border-radius: 6px; white-space: nowrap; }
.ms-opt:hover { background: var(--pink-50); }
.ms-opt input { accent-color: var(--pink); margin: 0; }
.ms-foot { display: flex; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.ms-foot button { flex: 1; border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 5px 0; font-size: 12px; cursor: pointer; }
.ms-foot .ms-ok { background: var(--grad); color: #fff; border: none; }
.f-sep { color: var(--text-3); margin: 0 2px; font-size: 12px; }
.filter-row .right { margin-left: auto; display: flex; gap: 6px; }

/* 多选 chip（学历等） */
.chip-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-2); background: #fff; border-radius: 14px; font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none; transition: all 0.15s; }
.chip:hover { border-color: var(--pink-l); color: var(--pink); }
.chip.on { background: var(--pink-100); border-color: var(--pink); color: var(--pink); font-weight: 600; }

/* ============================ 列表（行式） ============================ */
.list { display: flex; flex-direction: column; gap: 6px; }
.list-header { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #fbf7fa; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12px; color: var(--text-2); font-weight: 500; margin-bottom: 4px; }
.lh-cell { flex: 1; text-align: center; white-space: nowrap; }
.lh-client { flex: 1.4; text-align: left; padding-left: 50px; }
.lh-sort { cursor: pointer; user-select: none; transition: color 0.15s; }
.lh-sort:hover { color: var(--pink); }
.lh-sort.on { color: var(--pink); font-weight: 600; }
.lh-sort::after { content: ' ⇅'; font-size: 10px; opacity: 0.4; }
.lh-sort.asc::after { content: ' ↑'; opacity: 1; }
.lh-sort.desc::after { content: ' ↓'; opacity: 1; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: all 0.15s; cursor: pointer; }
.list-row:hover { border-color: var(--pink-l); box-shadow: 0 4px 12px rgba(233, 80, 140, 0.08); }
.lr-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.lr-main { flex: 1; min-width: 0; }
.lr-name { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.lr-name .vip { background: var(--grad); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 600; }
.lr-name .src { background: var(--blue-100); color: var(--blue); font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 500; }
.lr-name .match { color: var(--green); font-size: 11px; font-weight: 500; margin-left: 4px; }
.lr-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
.lr-sub span { margin-right: 8px; }
.lr-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lr-arrow { color: var(--text-3); font-size: 18px; }

/* 客户列表表格行（与 list-header 对齐） */
.tbl-row { padding: 7px 14px; }
.lrc { flex: 1; text-align: center; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lrc-client { flex: 1.4; text-align: left; display: flex; align-items: center; gap: 10px; overflow: visible; }
.mini-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; overflow: hidden; }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lrc-name { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text-1); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrc-name .vip { background: var(--grad); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 600; flex-shrink: 0; }
.lrc .tag { height: 18px; padding: 0 6px; font-size: 11px; max-width: 100%; }

/* ============================ 择偶定位 ============================ */
.coach-time { display: flex; flex-direction: column; align-items: center; min-width: 56px; line-height: 1.35; flex-shrink: 0; }
.coach-time .d { font-size: 13px; font-weight: 600; color: var(--text-1); }
.coach-time .t { font-size: 11px; color: var(--text-3); }
.coach-amt { font-weight: 700; color: var(--pink); font-size: 14px; }
.coach-private-note { background: #fbf7fa; border: 1px dashed var(--line-2); color: var(--text-3); border-radius: var(--r-md); padding: 10px 12px; font-size: 12px; text-align: center; }
.coach-group { margin-bottom: 16px; }
.coach-group-title { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.coach-group-title .badge { background: var(--pink-50); color: var(--pink); font-size: 11px; padding: 1px 6px; border-radius: 10px; }
.coach-list { display: flex; flex-direction: column; gap: 6px; }


.empty { text-align: center; padding: 48px 16px; color: var(--text-3); font-size: 12px; }
.empty-icon { font-size: 32px; opacity: 0.4; margin-bottom: 8px; }

/* ============================ 标签 ============================ */
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: 11px; border-radius: 6px; background: #f4eef1; color: var(--text-2); white-space: nowrap; }
.tag.pink { background: var(--pink-100); color: var(--pink); }
.tag.blue { background: var(--blue-100); color: var(--blue); }
.tag.green { background: var(--green-100); color: var(--green); }
.tag.yellow { background: var(--yellow-100); color: var(--yellow); }
.tag.red { background: var(--red-100); color: var(--red); }
.tag.outline { background: #fff; border: 1px solid var(--line-2); }

/* 状态标签：客户/牵线/合同 */
.st-0新增客户 { background: var(--yellow-100); color: var(--yellow); }
.st-1跟进中, .st-2近期到店, .st-3待到店 { background: var(--blue-100); color: var(--blue); }
.st-4已到店 { background: var(--green-100); color: var(--green); }
.st-5已签约 { background: var(--pink-100); color: var(--pink); }
.st-6无效客户 { background: var(--red-100); color: var(--red); }
.st-已脱单 { background: var(--green-100); color: var(--green); }
.st-待牵线 { background: #f4eef1; color: var(--text-2); }
.st-约见中 { background: var(--blue-100); color: var(--blue); }
.st-已牵线 { background: #f8e6f3; color: var(--pink); }
.st-牵线失败 { background: var(--red-100); color: var(--red); }
.st-关闭服务 { background: #ece6ec; color: var(--text-3); }
.st-待签署 { background: var(--yellow-100); color: var(--yellow); }
.st-已签署 { background: var(--green-100); color: var(--green); }
.st-作废 { background: var(--red-100); color: var(--red); }
.st-待上传, .st-已上传待核, .st-认证不通过 { background: var(--yellow-100); color: var(--yellow); }

/* ============================ 模态框 ============================ */
.modal-mask { position: fixed; inset: 0; background: rgba(40, 30, 40, 0.42); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; }
.modal-box { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-3); max-width: 720px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text-1); }
.modal-close { background: transparent; border: none; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.modal-close:hover { background: var(--pink-50); color: var(--pink); }
.modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.modal-box.s { max-width: 440px; }
.modal-box.l { max-width: 880px; }

/* ============================ 表单 ============================ */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.form-grid.col2 { grid-template-columns: repeat(2, 1fr); }
.field-form { display: flex; flex-direction: column; gap: 4px; }
.field-form label { font-size: 12px; color: var(--text-2); }
.field-form .inp, .field-form .sel, .field-form .txt { border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 10px; font-size: 12px; background: #fff; transition: border-color 0.15s; }
.field-form .inp:focus, .field-form .sel:focus, .field-form .txt:focus { outline: none; border-color: var(--pink); }
.field-form .txt { min-height: 64px; resize: vertical; font-family: inherit; }
.field-form.col-span-2 { grid-column: span 2; }
.field-form.col-span-3 { grid-column: span 3; }
.tpl-area { width: 100%; min-height: 130px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; font-family: inherit; font-size: 12px; resize: vertical; margin-bottom: 8px; background: #faf7f9; }
.tpl-area:focus { outline: none; border-color: var(--pink); background: #fff; }

/* ============================ 首页 Dashboard ============================ */
.dash-search { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-search input { flex: 1; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 20px; background: #faf7f9; font-size: 13px; }
.dash-search input:focus { outline: none; border-color: var(--pink); background: #fff; }
.dash-search button { height: 36px; padding: 0 18px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dash-grid .col { display: flex; flex-direction: column; gap: 14px; }
.recent-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.recent-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.15s; }
.recent-card:hover { border-color: var(--pink-l); box-shadow: 0 4px 12px rgba(233, 80, 140, 0.08); }
.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.recent-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.recent-arrow { color: var(--text-3); }
.week-list { display: flex; flex-direction: column; gap: 8px; }
.week-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #fbf7fa; border-radius: var(--r-sm); }
.week-time { font-size: 12px; color: var(--pink); font-weight: 600; min-width: 70px; }
.week-name { font-size: 13px; color: var(--text-1); font-weight: 500; }
.week-name a { color: var(--pink); }
.week-tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #fff; color: var(--text-3); }
.week-owner { font-size: 11px; color: var(--text-3); margin-left: auto; }

/* ============================ 待办中心 ============================ */
.todo-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.todo-toolbar .seg { display: inline-flex; background: #f4eef1; border-radius: 20px; padding: 3px; }
.todo-toolbar .seg .seg-item { padding: 4px 14px; font-size: 12px; border-radius: 18px; color: var(--text-2); cursor: pointer; }
.todo-toolbar .seg .seg-item.on { background: #fff; color: var(--pink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.todo-group { margin-bottom: 18px; }
/* 牵线列表：按 VIP 客户分组 */
.intro-group { margin-bottom: 16px; }
.intro-vip-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--pink-50); border: 1px solid var(--pink-l); border-radius: var(--r-md); margin-bottom: 6px; cursor: pointer; transition: all 0.15s; }
.intro-vip-head:hover { box-shadow: 0 4px 12px rgba(233, 80, 140, 0.10); }
.intro-vip-head.plain { background: #fafafa; border-color: var(--line); cursor: default; }
.intro-rows { display: flex; flex-direction: column; gap: 6px; }
.intro-quota { font-size: 11px; color: var(--pink); background: #fff; border: 1px solid var(--pink-l); padding: 1px 8px; border-radius: 10px; margin-left: 6px; }
.intro-quota.zero { color: var(--red); border-color: var(--red); }
.todo-group-title { font-size: 13px; font-weight: 700; padding: 6px 0; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.todo-group-title .badge { background: var(--pink-50); color: var(--pink); font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 10px; }
.todo-group.overdue .todo-group-title { color: var(--red); }
.todo-group.today .todo-group-title { color: var(--pink); }
.todo-group.tomorrow .todo-group-title { color: #9a5fa8; }
.todo-group.later .todo-group-title { color: var(--text-3); }
.todo-list { display: flex; flex-direction: column; gap: 6px; }
.todo-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 12px; background: #fafafa; border: 1px dashed var(--line); border-radius: var(--r-md); }
.todo-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: all 0.15s; }
.todo-item:hover { border-color: var(--pink-l); }
.todo-item.done { opacity: 0.55; }
.todo-item.done .todo-name, .todo-item.done .todo-note { text-decoration: line-through; color: var(--text-3); }
.todo-item.cancel { opacity: 0.45; background: #fafafa; }
.todo-item.cancel .todo-name { text-decoration: line-through; }
.todo-item.cancel .todo-name, .todo-item.cancel .todo-note { color: var(--text-3); }
.todo-item.overdue { border-color: var(--red); background: #fff5f5; }
.todo-item.overdue .todo-time { color: var(--red); font-weight: 600; }
.todo-item .ti-main { flex: 1; min-width: 0; }
.todo-name { font-size: 13px; font-weight: 600; color: var(--pink); }
.todo-name a { color: var(--pink); }
.todo-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); margin-top: 2px; }
.todo-meta .type { background: var(--pink-50); color: var(--pink); padding: 1px 6px; border-radius: 4px; font-size: 10px; }
.todo-meta .type.contract { background: var(--yellow-100); color: var(--yellow); }
.todo-meta .type.quota { background: var(--red-100); color: var(--red); }
.todo-meta .type.meet { background: var(--blue-100); color: var(--blue); }
.today-badge { background: #f2e3ff; color: #9a5fa8; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.todo-note { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.todo-note .thought { color: var(--pink); font-weight: 500; }
.todo-time { font-size: 12px; color: var(--text-2); min-width: 100px; text-align: right; }
.todo-owner { font-size: 11px; color: var(--text-3); min-width: 50px; text-align: right; }
.todo-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* 改期弹窗 */
.reschedule-box { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.reschedule-box input { height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 12px; }

/* ============================ 客户详情 ============================ */
.detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 14px; }
.detail-top { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px 22px; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.detail-top .dt-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detail-top .dt-info { flex: 1; min-width: 0; }
.detail-top .dt-name { font-size: 18px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.detail-top .dt-summary { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.detail-top .dt-summary span { margin-right: 10px; }
.detail-top .dt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.detail-top .quota { font-size: 12px; color: var(--text-2); }
.detail-top .quota b { color: var(--pink); font-size: 16px; font-weight: 700; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; padding: 6px 0; }
.info-grid .ig-cell { display: flex; flex-direction: column; padding: 8px 10px; background: #fbf7fa; border-radius: var(--r-sm); }
.info-grid .ig-cell .lbl { font-size: 11px; color: var(--text-3); }
.info-grid .ig-cell .val { font-size: 13px; color: var(--text-1); margin-top: 2px; }
.info-block { padding: 10px 12px; background: #fbf7fa; border-radius: var(--r-sm); margin-top: 10px; }
.info-block .lbl { font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.info-block .val { font-size: 13px; color: var(--text-1); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.cert-list { display: flex; flex-direction: column; gap: 8px; }
.cert-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #fbf7fa; border-radius: var(--r-sm); }
.cert-name { font-size: 12px; color: var(--text-1); }
.cert-photo { width: 32px; height: 32px; border-radius: 4px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.cert-photo img { width: 100%; height: 100%; object-fit: cover; }

.timeline { padding-left: 18px; border-left: 2px solid var(--pink-100); margin-left: 6px; }
.timeline-item { position: relative; padding: 0 0 14px 16px; }
.timeline-item::before { content: ''; position: absolute; left: -23px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 3px #fff; }
.timeline-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.timeline-content { font-size: 13px; color: var(--text-1); line-height: 1.6; background: #fbf7fa; padding: 8px 12px; border-radius: var(--r-sm); }
.timeline-think { font-size: 12px; color: var(--pink); margin-top: 6px; padding-left: 4px; }
.timeline-think b { color: var(--pink-d); }
.timeline-audio { margin-top: 8px; }
.timeline-audio audio { width: 100%; max-width: 320px; height: 32px; }

/* 联系方式保密框 */
.contact-box { background: #fbf7fa; border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 16px; text-align: center; color: var(--text-3); font-size: 12px; }
.contact-box.locked::before { content: '🔒'; display: block; font-size: 20px; margin-bottom: 4px; }
.contact-box .apply-btn { margin-top: 10px; }
.contact-box.unlocked { background: var(--green-100); border-color: var(--green); color: var(--green); text-align: left; }
.contact-box.unlocked .ct-line { display: flex; gap: 8px; font-size: 13px; color: var(--text-1); margin-top: 4px; }
.contact-box.unlocked .ct-line b { min-width: 48px; color: var(--text-2); font-weight: 500; }

.contract-line, .intro-line { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 12px; color: var(--text-2); border-bottom: 1px dashed var(--line); }
.contract-line:last-child, .intro-line:last-child { border-bottom: none; }
.contract-line .name, .intro-line .name { color: var(--text-1); font-weight: 600; }
.contract-line .right { margin-left: auto; display: flex; gap: 4px; align-items: center; }

/* ============================ 匹配筛选 ============================ */
.match-layout { display: grid; grid-template-columns: 1fr 240px; gap: 14px; }
.match-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.match-target { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.match-target .tg-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.match-target .tg-info { flex: 1; min-width: 0; }
.match-target .tg-name { font-size: 15px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.match-target .tg-summary { font-size: 12px; color: var(--text-2); margin-top: 4px; }
.match-target .tg-summary span { margin-right: 8px; }
.match-target .tg-side { text-align: right; font-size: 12px; color: var(--text-2); }
.match-target .tg-side b { color: var(--pink); font-size: 16px; font-weight: 700; }
.match-hint { background: var(--yellow-100); color: var(--yellow); font-size: 11px; padding: 6px 12px; border-radius: var(--r-sm); margin-top: -6px; }

.cand-list { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 6px 0; }
.cand-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; transition: all 0.15s; }
.cand-row:last-child { border-bottom: none; }
.cand-row:hover { background: var(--pink-50); }
.cand-row .cand-info { flex: 1; min-width: 0; }
.cand-row .cand-info .nm { font-size: 13px; font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.cand-row .cand-info .sm { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.cand-row .cand-info .sm div { line-height: 1.5; }

/* 备选区 */
.alt-side { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px; display: flex; flex-direction: column; position: sticky; top: 72px; align-self: flex-start; }
.alt-side .alt-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.alt-side .alt-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
.alt-side .alt-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.alt-list { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; flex: 1; min-height: 80px; }
.alt-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fbf7fa; border-radius: var(--r-sm); font-size: 12px; }
.alt-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex-shrink: 0; }
.alt-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alt-item .rm { color: var(--text-3); cursor: pointer; padding: 0 4px; }
.alt-item .rm:hover { color: var(--red); }
.alt-side .alt-launch { width: 100%; height: 36px; background: var(--grad); color: #fff; border: none; border-radius: var(--r); font-size: 13px; font-weight: 600; margin-top: 8px; }
.alt-side .alt-launch:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================ 数据看板 ============================ */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px 16px; }
.kpi-card .lbl { font-size: 12px; color: var(--text-3); }
.kpi-card .val { font-size: 22px; font-weight: 700; color: var(--text-1); margin-top: 4px; }
.kpi-card .val.pink { color: var(--pink); }
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chart-box { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 18px; }
.chart-title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 10px; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 0; }
.donut-legend { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.donut-legend .li { display: flex; align-items: center; gap: 6px; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 2px; }
.bar-list { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: 8px; font-size: 12px; }
.bar-row .bk { color: var(--text-2); }
.bar-row .bb { height: 14px; background: var(--grad); border-radius: 3px; min-width: 2px; }
.bar-row .bv { text-align: right; color: var(--text-2); }

/* ============================ 系统管理 ============================ */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs .tab { padding: 10px 16px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.tabs .tab:hover { color: var(--pink); }
.tabs .tab.on { color: var(--pink); border-bottom-color: var(--pink); font-weight: 600; }
.tabpane.hidden { display: none; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; font-size: 12px; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--text-3); font-weight: 500; background: #fbf7fa; }
.tbl tr:hover td { background: #fdfafd; }
.tbl td .btn-row { justify-content: flex-start; }

.appr-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; }
.appr-row .info { flex: 1; min-width: 0; }
.appr-row .info .nm { font-size: 13px; font-weight: 600; color: var(--text-1); }
.appr-row .info .reason { font-size: 12px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.appr-row .time { font-size: 11px; color: var(--text-3); }

.exp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pkg-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pkg-row:last-child { border-bottom: none; }
.pkg-row input, .pkg-row select { width: 100%; height: 30px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 8px; font-size: 12px; }

/* ============================ 照片 ============================ */
.photo-prev { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-prev .ph { width: 70px; height: 70px; border-radius: var(--r-sm); background: #f4eef1; position: relative; overflow: hidden; }
.photo-prev .ph img { width: 100%; height: 100%; object-fit: cover; }
.photo-prev .ph .del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: rgba(0,0,0,0.5); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }
.photo-prev .ph .add { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-3); cursor: pointer; font-size: 22px; }

/* ============================ 工具 ============================ */
.row { display: flex; align-items: center; gap: 8px; }
/* 分段切换（通用，择偶定位等页面用） */
.seg { display: inline-flex; background: #f4eef1; border-radius: 20px; padding: 3px; }
.seg .seg-item { padding: 4px 12px; font-size: 12px; border-radius: 18px; color: var(--text-2); cursor: pointer; user-select: none; }
.seg .seg-item.on { background: #fff; color: var(--pink); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.muted { color: var(--text-3); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* ============================ Toast ============================ */
.toast-box { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { background: rgba(58, 43, 54, 0.92); color: #fff; padding: 8px 16px; border-radius: 18px; font-size: 12px; box-shadow: var(--shadow-2); animation: toast-in 0.2s ease; }
.toast.err { background: rgba(224, 80, 110, 0.95); }
.toast.ok { background: rgba(91, 191, 138, 0.95); }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================ 文件拖拽区 ============================ */
.dropzone { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1.5px dashed var(--line-2); border-radius: var(--r); background: #fdfbfc; transition: all 0.15s; }
.dropzone input[type=file] { font-size: 12px; color: var(--text-2); }
.dropzone .dz-hint { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.dropzone.drop-over { border-color: var(--pink); background: #fff5f9; box-shadow: 0 0 0 3px rgba(233, 90, 140, 0.12); }
.dropzone.drop-over .dz-hint { color: var(--pink); font-weight: 500; }
.pkg-row .dropzone { grid-column: span 3; }

/* ============================ 客户搜索选择器 ============================ */
.cp-results { margin-top: 6px; max-height: 200px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; }
.cp-results:empty { display: none; }
.cp-empty { padding: 10px 12px; font-size: 12px; color: var(--text-3); }
.cp-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; border-bottom: 1px solid var(--line-1); font-size: 13px; }
.cp-item:last-child { border-bottom: none; }
.cp-item b { color: var(--text-1); }
.cp-item span { font-size: 11px; color: var(--text-3); }
.cp-item:hover { background: #fff5f9; }
.cp-item:hover b { color: var(--pink); }

/* ============================ 生活照：朋友圈式多图格子 ============================ */
.ph-zone { padding: 2px; border-radius: var(--r); transition: box-shadow 0.15s; }
.ph-zone.drop-over { box-shadow: 0 0 0 3px rgba(233, 90, 140, 0.14); }
.ph-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-cell, .ph-add { width: 84px; height: 84px; border-radius: 8px; overflow: hidden; position: relative; background: #f4eef1; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-cell .ph-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; border: none; cursor: pointer; font-size: 12px; padding: 0; }
.ph-cell .ph-del:hover { background: var(--red); }
.ph-cell:hover .ph-del { opacity: 1; }
.ph-cell .ph-del { opacity: 0.5; }
.ph-add { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-3); border: 1.5px dashed var(--line-2); cursor: pointer; background: #fdfbfc; }
.ph-add:hover { border-color: var(--pink); color: var(--pink); background: #fff5f9; }

/* ============================ 响应式 ============================ */
@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: 1fr; }
  .match-layout { grid-template-columns: 1fr; }
  .alt-side { position: static; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .recent-list { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --sb-w: 60px; }
  .sidebar-name, .nav-item span:not(.nav-icon), .nav-group { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .sidebar-head { justify-content: center; padding: 14px 0 16px; }
  .info-grid, .form-grid { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; }
  .section { padding: 14px 14px 24px; }
  .ld-grid { grid-template-columns: repeat(2, 1fr); }
  .fn-row { flex-wrap: wrap; }
}

/* ============================================================
   客资池 leads / 外地客户 · v1.4
   ============================================================ */
.lead-form { display: flex; flex-direction: column; gap: 10px; }
.lead-form .field-form { display: flex; flex-direction: column; gap: 4px; }
.lead-form .field-form label { font-size: 12px; color: var(--text-3); }
.cv-box { text-align: center; padding: 6px 0 14px; }
.cv-who { font-size: 15px; font-weight: 600; color: var(--text-1); }
.cv-city { font-size: 30px; font-weight: 800; color: var(--pink); line-height: 1.3; margin: 6px 0 2px; }
.cv-src { font-size: 12px; color: var(--text-3); }
.cv-btns { display: flex; gap: 10px; justify-content: center; }
.cv-btns .btn { flex: 1; padding: 12px 0; }
.lead-prefill { background: var(--pink-50); border: 1px solid var(--pink-100); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; line-height: 1.7; }
.lead-detail { font-size: 13px; }
.ld-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; margin-bottom: 12px; }
.ld-grid > div { display: flex; flex-direction: column; gap: 2px; }
.ld-k { font-size: 11px; color: var(--text-3); }
.ld-v { font-weight: 600; color: var(--text-1); }
.ld-grade { margin: 4px 0 10px; }
.ld-chats-title { font-size: 12px; color: var(--text-3); margin: 10px 0 6px; }
.ld-chats { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; background: #fbf7fa; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; }
.chat-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.chat-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); margin-bottom: 4px; }
.chat-body { white-space: pre-wrap; line-height: 1.7; color: var(--text-1); }
.fn-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12px; }
.fn-k { width: 96px; color: var(--text-1); font-weight: 500; flex: none; }
.fn-bar { flex: 1; height: 10px; background: var(--pink-100); border-radius: 5px; overflow: hidden; }
.fn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink-l), var(--pink)); }
.fn-n { width: 40px; text-align: right; font-weight: 700; color: var(--text-1); flex: none; }
.fn-p { width: 88px; text-align: right; color: var(--text-3); flex: none; }
.fn-p.warn { color: var(--red); font-weight: 700; }
.lead-row { cursor: pointer; }
.src { font-size: 11px; color: var(--text-3); background: var(--pink-50); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }