/* 客资系统 · 列表页样式
   设计取向：信息密度优先，克制配色，只有状态用彩色。
   所有尺寸用 rem/px 固定，不引外部字体，保证离线可用。 */

:root{
  /* ── 与官网 assets/css/site.css 完全对齐的设计变量 ──
     不复制色值而是复制"命名体系"，以后官网改色这里跟一处即可。 */
  --lemon-50:#f2fbf5; --lemon-100:#dcf5e6; --lemon-200:#b8ebcd; --lemon-300:#84d9a9;
  --lemon-400:#4cc182; --lemon-500:#22a864; --lemon-600:#158a51; --lemon-700:#116e42;
  --lemon-800:#0f5735; --lemon-900:#0c452b;
  --ink-900:#0b1622; --ink-800:#132233; --ink-700:#1d3348; --ink-600:#2c4761;
  --ink-500:#4a6480; --ink-400:#748da6; --ink-300:#a8bccd; --ink-200:#cfdae5;
  --ink-100:#e6ecf2; --ink-50:#f4f7fa;
  --gold-400:#e8b657; --gold-500:#d19b2f;

  --font-sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  --font-num:"SF Pro Display","Inter",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.22,1.2,.36,1);

  /* ── 语义别名：旧类名继续可用，只是底层换成官网色板 ── */
  --bg:var(--ink-50);
  --card:#fff;
  --line:var(--ink-200);
  --line-2:var(--ink-100);
  --muted:var(--ink-400);
  --green:var(--lemon-500);
  --green-d:var(--lemon-700);
  --green-l:rgba(34,168,100,.10);
  --red:#c0392b;
  --red-l:rgba(192,57,43,.09);
  --amber:var(--gold-500);
  --amber-l:rgba(232,182,87,.16);
  --blue:#27538f;
  --blue-l:rgba(39,83,143,.09);
  /* ── 语义色补全（DESIGN.md 里引用的名字，必须存在）──
     旧名 --red / --amber / --blue 保留不动，这里只是加一层更明确的别名 +
     成对的底色/文字色。以前只定义了 --red，但代码里既写 var(--red) 又直接写
     #c0392b，于是"危险红"在页面上有两个略有差别的版本。 */
  --white:var(--card);
  --danger:var(--red);
  --danger-bg:#fdeceb;
  --danger-text:#a5301f;
  --warn:var(--amber);
  --warn-bg:#fdf1e0;
  --warn-text:#b4700f;
  --success:var(--green-d);
  --success-bg:#eaf7ef;
  --info:var(--blue);
  --info-bg:#eef3fa;
  --gold-bg:#fff6e0;
  --phone-bg:#eef4ff;
  --phone-fg:#2158b8;

  /* ══════════════════════════════════════════════════════════
     以下变量来自 awesome-design-md 对照（Linear / Airtable / SAP），
     **只定义、暂不应用** —— 现有样式一行没改，页面上看不出任何变化。
     等确认方向后，再逐个区块切过去。
     ══════════════════════════════════════════════════════════ */

  /* ── 表面分层：现在只有 bg + card 两层，弹窗和卡片同色，层次全靠阴影硬撑。
        Linear 用 canvas→surface1..4 五层，SAP 用 Canvas/Chrome/Band 功能命名。 ── */
  --surface-1:var(--card);         /* 卡片、表格容器 */
  --surface-2:#fbfcfd;             /* 次级卡片、表格内的分组行 */
  --surface-elevated:var(--card);  /* 弹窗、抽屉（配 --shadow-3 使用） */
  --chrome:#f5f6f7;                /* 顶栏 / 筛选栏：比内容区暗一档，把"操作区"和"内容区"分开 */
  --chrome-border:#e8ebee;

  /* ── 文字语义：ink 有 10 档但没命名，用时靠猜。
        SAP 的做法是每级有明确用途，且**导航单独一档纯灰**。 ── */
  --text-strong:var(--ink-900);    /* 页面标题、KPI 数字 */
  --text-body:var(--ink-700);      /* 正文、表格内容 */
  --text-muted:var(--ink-500);     /* 次要：时间戳、来源、辅助说明 */
  --text-hint:var(--ink-400);      /* 注脚、placeholder、表头 */
  --text-disabled:var(--ink-300);  /* 禁用态 */
  --text-nav:#545454;              /* 导航专用：纯灰而非蓝灰，让 chrome 视觉上退后一步 */

  /* ── 字距：现在一条都没有。大字号不加负字距会显得字间松散，
        小号角标不加正字距会挤在一起。 ── */
  --tracking-tight:-0.02em;        /* ≥28px 用 */
  --tracking-normal:0;
  --tracking-wide:0.04em;          /* ≤11px 角标、全大写英文 */

  /* ── 字重：Airtable 的 48px 标题只用 400（"40px h1 is not bold"），
        靠尺寸和明度建层次。我们到处 700，反而让"粗"失去强调作用。
        一屏里 700 建议不超过 3 处。 ── */
  --fw-normal:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --radius:12px;
  --radius-sm:6px;
  --radius-md:9px;
  --radius-lg:12px;
  --radius-xl:16px;
  --shadow-1:0 1px 2px rgba(11,22,34,.04);
  --shadow-2:0 6px 20px rgba(11,22,34,.07);
  --shadow-3:0 18px 46px rgba(11,22,34,.14);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink-900);
  font-family:var(--font-sans);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:12px 20px;
  /* 顶栏用 --chrome（比内容区暗一档）：以前是半透明白 + 毛玻璃，
     和下面的卡片同色，一眼分不出"操作区"和"内容区"。
     chrome 是实色，不再需要 backdrop-filter —— 顺带省掉一层每帧模糊。 */
  background:var(--chrome);
  border-bottom:1px solid var(--chrome-border);
}
.brand{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.brand b{font-size:16px; letter-spacing:-.01em}
.brand .sub{font-size:12px; color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-l)}

.stats{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.chip{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:5px 11px; border-radius:8px; background:#fff; border:1px solid var(--line);
}
.chip i{font-style:normal; font-size:11.5px; color:var(--muted)}
.chip b{font-size:15px; font-variant-numeric:tabular-nums}
.chip.danger{background:var(--red-l); border-color:rgba(224,80,60,.25)}
.chip.danger b{color:var(--red)}
.chip.warn{background:var(--amber-l); border-color:rgba(240,170,60,.3)}
.chip.warn b{color:var(--amber)}

/* ---------- 筛选条 ---------- */
.filters{
  /* 顶层只负责"竖着放两个 .frow"，横向排列交给 .frow 自己。
     之前这里是 flex 布局，两个 .frow 成了它的 flex item，
     宽屏下会并排 —— 看起来像"筛选条第二行莫名其妙跑到右边"。 */
  display:block;
  padding:12px 20px; background:#fff; border-bottom:1px solid var(--line-2);
}
.input{
  height:36px; padding:0 11px; border-radius:9px; font-size:13px; font-family:inherit;
  color:var(--ink-900); background:#fff; border:1px solid var(--line); outline:none;
}
.input:focus{border-color:var(--green); box-shadow:0 0 0 3px var(--green-l)}
.input.grow{flex:1 1 240px; min-width:160px}

.btn{
  height:36px; padding:0 15px; border-radius:9px; cursor:pointer;
  font-size:13px; font-weight:600; font-family:inherit;
  color:var(--ink-700); background:#fff; border:1px solid var(--line);
  transition:background .14s, border-color .14s, color .14s;
}
.btn:hover{border-color:rgba(34,168,100,.45); color:var(--green-d); background:rgba(34,168,100,.05)}
.btn.primary{background:var(--green); border-color:var(--green); color:#fff}
.btn.primary:hover{background:var(--green-d); border-color:var(--green-d); color:#fff}
.btn.ghost{color:var(--muted)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- 表格 ---------- */
.wrap{padding:12px 16px 28px}
.tablebox{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.grid{width:100%; border-collapse:collapse; font-size:13px}
.grid thead th{
  text-align:left; font-size:11.2px; font-weight:700; color:var(--text-hint);
  padding:8px 10px; background:#fbfcfd; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.grid tbody td{padding:7px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.grid tbody tr:last-child td{border-bottom:0}
/* 悬停高亮：原来只有 #fafcfb（几乎和白底一样），而且一旦行本身带状态色
   （grace / breached）就被后面的规则盖掉，等于"指到哪行都看不出"。
   现在提到同一优先级并加一条左侧竖条 —— 视线跟着走的时候不会串行。 */
.grid tbody tr{cursor:pointer}
.grid tbody tr > td{transition:background .12s ease}

/* ⚠️ 高亮必须画在 <td> 上，不能画在 <tr> 上。
   table-row 的 box-shadow 在 Chrome/Safari 里基本不渲染（行不是普通块级盒子），
   所以上一版"左侧竖条 + 行背景"实际上只有一层很淡的背景色生效，
   看起来就像"没有任何效果"。
   现在：背景给 td（可靠），竖条给第一个 td，并保留 tr 背景做兜底。 */
.grid tbody tr:hover > td,
.grid tbody tr.grace:hover > td,
.grid tbody tr.breached:hover > td,
.grid tbody tr.on:hover > td{
  background:#dff0e6;
}
.grid tbody tr:hover > td:first-child{
  box-shadow:inset 3px 0 0 var(--lemon-500);
}
.grid tbody tr:hover{background:#dff0e6}
.grid tbody tr.grace{background:rgba(240,170,60,.05)}
.grid tbody tr.breached{background:rgba(224,80,60,.045)}
.c-pri{width:78px}
.c-act{width:76px; text-align:right}
.hide-sm{}

/* 优先级条 */
.pri{display:flex; align-items:center; gap:7px}
.pri b{font-size:12px; font-variant-numeric:tabular-nums; min-width:22px; color:var(--ink-700)}
.pri i{display:block; height:6px; width:38px; border-radius:99px; background:var(--line-2); overflow:hidden}
.pri i span{display:block; height:100%; border-radius:99px; background:var(--green)}
.pri i span.hi{background:var(--red)}

/* 客户格 */
.who b{font-size:13.5px}
.who .sub{display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px}
.contact{font-size:12.5px; font-variant-numeric:tabular-nums}
.contact a{color:var(--blue); text-decoration:none}
.contact a:hover{text-decoration:underline}
.contact .sub{display:block; font-size:11.5px; color:var(--text-muted); margin-top:1px}

.tag{
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:11.5px; font-weight:600; letter-spacing:var(--tracking-wide); background:rgba(15,30,45,.055); color:var(--ink-700);
}
.tag.blue{background:var(--blue-l); color:var(--blue)}
.tag.green{background:var(--green-l); color:var(--green-d)}
.tag.red{background:var(--red-l); color:var(--red)}
.tag.amber{background:var(--amber-l); color:var(--amber)}
.tag + .tag{margin-left:4px}

/* 时效三档（全站统一）：已超时=红底、24小时/宽限=橙底、正常=纯灰。
   改之前 .sla.bad 只有红字没有底色，而 .sla.warn 有橙底 ——
   结果"还剩 4 小时"比"已经超时 2 天"更抢眼，主次完全反了。 */
.sla{font-size:12px; white-space:nowrap; padding:1px 7px; border-radius:5px}
.sla.bad{color:var(--white); background:var(--danger); font-weight:700}
.sla.grace{color:var(--warn-text); background:var(--warn-bg)}
.sla.ok{color:var(--ink-400)}
.sla.none{color:var(--muted)}

.muted{color:var(--muted); font-size:12.5px}
.empty{padding:44px 20px; text-align:center; color:var(--muted); font-size:13.5px}

/* ---------- 分页 ---------- */
.pager{display:flex; align-items:center; gap:12px; margin-top:12px}
.pager-btns{margin-left:auto; display:flex; gap:8px}

/* ---------- 抽屉 ---------- */
.drawer{position:fixed; inset:0; z-index:50; display:flex; justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-mask{position:absolute; inset:0; background:rgba(9,20,32,.38)}
.drawer-panel{
  position:relative; width:min(96vw,760px); height:100%;
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-12px 0 40px rgba(9,20,32,.14);
  animation:slide .22s ease-out;
}
@keyframes slide{from{transform:translateX(18px);opacity:.6}to{transform:none;opacity:1}}
.drawer-hd{
  display:flex; align-items:flex-start; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--line);
}
.drawer-hd h2{margin:0; font-size:17px; letter-spacing:-.01em}
.drawer-hd .btn{margin-left:auto}
/* 头部这一行是「电话 / 阶段 / 跟进人 / 时效」—— 全是要看一眼就做决策的信息，
   以前整行是灰色，和次要信息（"来过 2 次"）混在一起，屏幕上看不清。
   规则：重要的用近黑，次要的才用灰。 */
.drawer-meta{margin-top:5px; display:flex; flex-wrap:wrap; gap:6px; font-size:12.4px; color:var(--ink-800)}
.drawer-meta span{color:var(--ink-800)}
.drawer-meta .muted{color:var(--ink-400)}
.drawer-bd{flex:1; overflow:auto; padding:18px 20px}
.drawer-ft{
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-top:1px solid var(--line); background:#fbfcfd;
}
.drawer-ft .primary{margin-left:auto}

/* 抽屉内区块 */
.sec{margin-bottom:13px}
.sec-hd{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.sec-hd b{font-size:13px; letter-spacing:-.005em}
.sec-hd .n{font-size:11.5px; color:var(--muted); background:rgba(15,30,45,.05); padding:1px 8px; border-radius:5px}

.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2px 20px}
.kv > div{display:grid; grid-template-columns:66px 1fr; gap:8px; padding:5px 0; border-bottom:1px dashed var(--line-2)}
.kv dt{font-size:12px; color:var(--muted)}
.kv dd{margin:0; font-size:12.8px; word-break:break-word}

.form{display:grid; gap:10px}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
label.f{display:grid; gap:5px; font-size:12px; color:var(--muted)}
label.f > span{font-weight:600}
textarea.input{height:auto; padding:9px 11px; line-height:1.6; resize:vertical}

.chans{display:flex; gap:6px; flex-wrap:wrap}
.chan{
  padding:7px 15px; border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:700;
  background:#fff; border:1px solid var(--line); color:var(--ink-700); font-family:inherit;
}
.chan.on{background:var(--green); border-color:var(--green); color:#fff}
.res{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.res button{
  min-width:72px; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12.3px; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-700); font-family:inherit;
}
.res button.on{background:var(--blue); border-color:var(--blue); color:#fff}

.notes{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.notes .lb{font-size:11.8px; color:var(--muted); font-weight:600; align-self:center}
.notes button{
  padding:4px 10px; border-radius:7px; cursor:pointer; font-size:11.8px; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-700); font-family:inherit;
}
.notes button:hover{border-color:rgba(34,168,100,.45); color:var(--green-d); background:rgba(34,168,100,.05)}
.notes button.on{background:var(--green-l); border-color:rgba(34,168,100,.4); color:var(--green-d)}

.tl{list-style:none; margin:0; padding:0 0 0 3px}
.tl li{position:relative; padding:0 0 14px 18px; border-left:2px solid var(--line)}
.tl li:last-child{border-left-color:transparent; padding-bottom:0}
.tl .dot2{position:absolute; left:-5px; top:4px; width:8px; height:8px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px var(--green-l)}
.tl .hd{display:flex; flex-wrap:wrap; gap:7px; align-items:baseline; margin-bottom:2px}
.tl .hd b{font-size:12.5px}
.tl .tx{font-size:12.8px; line-height:1.65; color:var(--ink-700); white-space:pre-wrap; word-break:break-word}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600;
  background:linear-gradient(180deg, #1f5f43, #14452f); color:#fff; z-index:80;
  box-shadow:0 10px 26px -10px rgba(9,20,32,.4);
}
.toast.err{background:var(--red)}

@media (max-width:820px){
  .hide-sm{display:none}
  .topbar{flex-wrap:wrap}
  .stats{order:3; width:100%; margin-left:0}
  .filters{padding:7px 12px}
  .wrap{padding:10px 12px 24px}
  .grid thead th, .grid tbody td{padding:7px 8px}
}

/* ══════════════════════════════════════════════════════════════
   话术：内联在「记往来」里，默认收起
   ══════════════════════════════════════════════════════════════ */
.scriptbox{margin-top:4px}
.linkbtn{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 0; border:0; background:none; cursor:pointer;
  font-size:12.2px; font-weight:700; color:var(--blue); font-family:inherit;
}
.linkbtn:hover{text-decoration:underline}
.sg{margin-top:10px; padding:10px 12px; border-radius:9px;
  background:rgba(60,110,190,.045); border:1px solid rgba(60,110,190,.16)}
.sg-hd{display:flex; align-items:baseline; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.sg-hd b{font-size:12.5px; color:var(--blue)}
.sg-hd span{font-size:11.6px; color:var(--muted)}
.si{padding:8px 0; border-top:1px dashed rgba(60,110,190,.16); position:relative}
.si:first-of-type{border-top:0; padding-top:2px}
.si-t{font-size:12px; font-weight:700; color:var(--ink-800); margin-bottom:3px}
.si-s{margin:0 0 6px; font-size:12.6px; line-height:1.7; color:var(--ink-700)}
.btn.tiny{height:26px; padding:0 10px; font-size:11.8px; border-radius:7px}

/* ══════════════════════════════════════════════════════════════
   手机网页（不上 APP，所以窄屏体验必须自己做好）
   策略：表格在窄屏变卡片，一行客户 = 一屏可读的块
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .topbar{gap:10px; padding:10px 14px}
  .brand .sub{display:none}
  .stats{gap:6px}
  .chip{padding:4px 9px}
  .chip b{font-size:14px}
  .chip i{font-size:11px}

  .filters{gap:6px}
  .input{height:38px; font-size:14px}   /* 手机上输入框要够大，避免 iOS 自动放大 */
  .input.grow{flex:1 1 100%}
  .filters .input:not(.grow){flex:1 1 calc(50% - 6px)}
  .btn{height:38px}

  /* 表格 → 卡片 */
  .tablebox{border:0; background:transparent; overflow:visible}
  .grid, .grid tbody, .grid tr, .grid td{display:block; width:auto}
  .grid thead{display:none}
  .grid tbody tr{
    position:relative;
    margin-bottom:10px; padding:12px 14px;
    background:#fff; border:1px solid var(--line); border-radius:11px;
  }
  .grid tbody tr.breached{border-color:rgba(224,80,60,.35); background:rgba(255,250,249,.98)}
  .grid tbody tr.grace{border-color:rgba(240,170,60,.32); background:rgba(255,253,247,.98)}
  .grid tbody td{border:0; padding:0}

  td.who{padding-right:74px}
  td.who b{font-size:15px}
  td.c-pri{position:absolute; top:12px; right:14px; width:auto}
  .pri i{width:44px}
  td.contact{margin-top:5px; font-size:13px}
  .hide-sm{display:block !important}
  td:nth-child(4){margin-top:6px}          /* 要办什么（标签行） */
  td:nth-child(5){margin-top:6px}          /* 阶段 */
  td:nth-child(6){margin-top:6px}          /* 时效 */
  td:nth-child(7){margin-top:4px}
  td.c-act{position:absolute; right:14px; bottom:12px}
  td.c-act .btn{height:32px; padding:0 14px}

  /* 抽屉铺满 */
  .drawer-panel{width:100%; height:100%}
  .drawer-bd{padding:14px}
  .drawer-hd{padding:14px}
  .drawer-ft{padding:10px 14px}
  .kv{grid-template-columns:1fr}
  .row{grid-template-columns:1fr 1fr}
  .wrap{padding:12px 14px 90px}             /* 底部留白，别被"下一个"挡住 */
}

@media (max-width:420px){
  .row{grid-template-columns:1fr}
  .res button{min-width:64px; flex:1 1 30%}
}

/* ══════════════════════════════════════════════════════════════
   弹窗改为居中（用户反馈：右边弹出不如中间好用）
   ══════════════════════════════════════════════════════════════ */
.drawer{align-items:center; justify-content:center; padding:24px}
.drawer-panel{
  width:min(96vw,820px); height:auto; max-height:90vh;
  border-radius:14px; box-shadow:0 24px 60px rgba(9,20,32,.28);
  animation:pop .18s ease-out;
}
@keyframes pop{from{transform:scale(.975); opacity:0} to{transform:none; opacity:1}}
.drawer-hd{padding:16px 20px 12px; border-bottom:1px solid var(--line);
  border-radius:14px 14px 0 0; background:#fbfcfd}
.drawer-bd{padding:12px 16px}
.drawer-ft{border-radius:0 0 14px 14px}

/* ══════════════════════════════════════════════════════════════
   报表页
   ══════════════════════════════════════════════════════════════ */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:16px}
.kpi{
  padding:13px 15px; border-radius:11px; background:#fff; border:1px solid var(--line);
}
.kpi i{display:block; font-style:normal; font-size:11.8px; color:var(--text-muted); margin-bottom:4px}
.kpi b{display:block; font-size:22px; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:var(--tracking-tight)}
.kpi span{display:block; margin-top:3px; font-size:11.5px; color:var(--text-muted)}
.kpi.green{background:linear-gradient(160deg,#fff,rgba(34,168,100,.06)); border-color:rgba(34,168,100,.25)}
.kpi.green b{color:var(--green-d)}
.kpi.red{background:linear-gradient(160deg,#fff,rgba(224,80,60,.06)); border-color:rgba(224,80,60,.25)}
.kpi.red b{color:var(--red)}
.kpi.amber{background:linear-gradient(160deg,#fff,rgba(240,170,60,.08)); border-color:rgba(240,170,60,.28)}
.kpi.amber b{color:var(--amber)}

.rep-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px}
.card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.card.wide{grid-column:1 / -1}
.card h3{margin:0 0 14px; font-size:13.5px; letter-spacing:-.005em; display:flex; align-items:baseline; gap:8px}
.card h3 .hint{font-size:11.5px; font-weight:400; color:var(--muted)}

/* 横条 */
.bars{display:grid; gap:9px}
.bar-row{display:grid; grid-template-columns:88px 1fr 40px; align-items:center; gap:10px}
.bl{font-size:12.2px; color:var(--ink-700); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bt{height:9px; border-radius:99px; background:rgba(15,30,45,.055); overflow:hidden}
.bt i{display:block; height:100%; border-radius:99px; background:var(--green); transition:width .3s ease}
.bt i.red{background:var(--red)}
.bn{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right}

/* 14 天迷你柱 */
.spark-in{display:flex; align-items:flex-end; gap:6px; height:120px; padding-top:6px}
.sp{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%}
.sp-bars{flex:1; display:flex; align-items:flex-end; gap:2px; width:100%; justify-content:center}
.sp-bars i{width:42%; border-radius:3px 3px 0 0; min-height:2px}
.sp-bars .c1{background:rgba(60,110,190,.55)}
.sp-bars .c2{background:var(--green)}
.sp span{font-size:10.5px; color:var(--muted); white-space:nowrap}

@media (max-width:820px){
  .drawer{padding:12px}
  .drawer-panel{width:100%; max-height:92vh}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .kpi b{font-size:19px}
  .rep-grid{grid-template-columns:1fr}
  .bar-row{grid-template-columns:70px 1fr 34px; gap:7px}
  .spark-in{height:100px; gap:3px}
  .sp span{font-size:9.5px; transform:rotate(-45deg); transform-origin:center}
}

/* ══════════════════════════════════════════════════════════════
   详情页：四张一级卡
   ══════════════════════════════════════════════════════════════ */
/* 一级卡的布局统一放在文件末尾「玻璃拟态 v3」一节定义。
   这里原先是一套 flex + min-width:96px 的写法（四张卡时代留下的），
   宽度会跟着文字长短变，导致「往来/任务/资料」宽窄不一。
   两套规则并存时靠层叠覆盖，人一改就乱 —— 直接删掉，只留一处。 */

.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px}
.tips{margin:10px 0 0; padding:8px 11px; border-radius:8px; font-size:12px; line-height:1.6;
  color:var(--amber); background:rgba(240,170,60,.08); border:1px solid rgba(240,170,60,.22)}

/* 画像 */
.pt{padding:14px 16px; border-radius:11px; background:rgba(34,168,100,.045); border:1px solid rgba(34,168,100,.18)}
.pt-top{display:flex; align-items:baseline; gap:10px; margin-bottom:9px}
.pt-top b{font-size:15px; color:var(--green-d)}
.pt-score{margin-left:auto; font-size:12.2px; color:var(--muted); font-variant-numeric:tabular-nums}
.pt-bar{height:7px; border-radius:99px; background:rgba(15,30,45,.07); overflow:hidden; margin-bottom:12px}
.pt-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--green-d))}
.pt-list{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:5px}
.pt-list li{position:relative; padding-left:16px; font-size:12.7px; line-height:1.65; color:var(--ink-700)}
.pt-list li::before{content:"·"; position:absolute; left:4px; font-weight:800; color:var(--green)}
.pt-list.warn li{color:var(--amber)}
.pt-list.warn li::before{content:"!"; color:var(--amber); left:2px}
.pt-act{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(34,168,100,.25); font-size:12.7px; line-height:1.65}
.pt-act b{display:block; font-size:11.5px; color:var(--green-d); margin-bottom:3px}
.pt.tone-hot{background:rgba(224,80,60,.045); border-color:rgba(224,80,60,.2)}
.pt.tone-hot .pt-top b,.pt.tone-hot .pt-list li::before,.pt.tone-hot .pt-act b{color:var(--red)}
.pt.tone-hot .pt-bar i{background:linear-gradient(90deg,#e0604a,var(--red))}
.pt.tone-cool{background:rgba(240,170,60,.06); border-color:rgba(240,170,60,.25)}
.pt.tone-cool .pt-top b,.pt.tone-cool .pt-act b{color:var(--amber)}
.pt.tone-cool .pt-bar i{background:linear-gradient(90deg,#e8b04a,var(--amber))}
.pt.tone-cold,.pt.tone-lost{background:rgba(15,30,45,.03); border-color:var(--line)}
.pt.tone-cold .pt-top b,.pt.tone-lost .pt-top b{color:var(--muted)}
.pt.tone-cold .pt-bar i,.pt.tone-lost .pt-bar i{background:#9aa7b4}

@media (max-width:820px){
  .grid2{grid-template-columns:1fr 1fr}
  .kv > div{grid-template-columns:76px 1fr}
}
@media (max-width:420px){
  .grid2{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   动画与质感：和官网一致的缓动曲线，克制但有反馈
   ══════════════════════════════════════════════════════════════ */
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes popIn{from{opacity:0; transform:scale(.97) translateY(8px)} to{opacity:1; transform:none}}
@keyframes barGrow{from{width:0}}
@keyframes slideUp{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}

/* 列表逐行淡入（每行错开 18ms，超过 20 行不再延迟） */
.grid tbody tr{animation:fadeUp .3s var(--ease-out) both}
.grid tbody tr:nth-child(1){animation-delay:0ms}
.grid tbody tr:nth-child(2){animation-delay:18ms}
.grid tbody tr:nth-child(3){animation-delay:36ms}
.grid tbody tr:nth-child(4){animation-delay:54ms}
.grid tbody tr:nth-child(5){animation-delay:72ms}
.grid tbody tr:nth-child(6){animation-delay:90ms}
.grid tbody tr:nth-child(7){animation-delay:108ms}
.grid tbody tr:nth-child(8){animation-delay:126ms}
.grid tbody tr:nth-child(n+9){animation-delay:140ms}

/* 卡片与统计 */
.kpi,.card,.tablebox{animation:fadeIn .35s var(--ease-out) both}
.kpi:hover{transform:translateY(-1px); box-shadow:var(--shadow-2); transition:transform .18s var(--ease), box-shadow .18s var(--ease)}

/* 按钮反馈 */
.btn,.chan,.card-tab,.card-tab,.res button,.notes button,.dt-note{transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease)}
.btn:active,.chan:active,.res button:active,.notes button:active{transform:scale(.97)}
.btn.primary:hover{box-shadow:0 4px 14px rgba(34,168,100,.28)}

/* 进度条生长 */
.bt i,.pri i span,.pt-bar i{animation:barGrow .5s var(--ease-out) both}

/* 弹窗 */
.drawer-panel{animation:popIn .22s var(--ease-spring) both}

/* 提示条 */
.toast{animation:slideUp .22s var(--ease-out) both}

/* 表格行 hover */
.grid tbody tr{transition:background .15s var(--ease), box-shadow .15s var(--ease)}
.grid tbody tr:hover{box-shadow:inset 3px 0 0 var(--lemon-500)}

/* 折叠/展开的话术 */
#scriptList{animation:fadeUp .2s var(--ease-out) both}

/* 尊重系统偏好：关了动效就全关 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important}
}

/* ── 任务卡 ── */
.tk-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tk-add .grow{flex:1 1 220px}
.tk-list{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.tk{display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px dashed var(--line-2)}
.tk:last-child{border-bottom:0}
.tk-box{
  flex:0 0 20px; width:20px; height:20px; border-radius:6px; cursor:pointer;
  border:1.5px solid var(--ink-300); background:#fff; color:#fff;
  font-size:12px; line-height:1; display:grid; place-items:center; margin-top:1px;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.tk-box:hover{border-color:var(--lemon-500)}
.tk-box:active{transform:scale(.92)}
.tk.done .tk-box{background:var(--lemon-500); border-color:var(--lemon-500)}
.tk-main{flex:1; min-width:0}
.tk-main b{display:block; font-size:13px; font-weight:600; line-height:1.5; word-break:break-word}
.tk-meta{display:block; margin-top:2px; font-size:11.5px; color:var(--muted)}
.tk.done .tk-main b{color:var(--muted); text-decoration:line-through}
.tk.over .tk-meta{color:var(--red); font-weight:600}

/* ── 报表小表 ── */
.mini{width:100%; border-collapse:collapse; font-size:12.5px}
.mini th{text-align:left; font-size:11.5px; color:var(--text-hint); font-weight:var(--fw-semibold);
  padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
.mini td{padding:8px; border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums}
.mini tbody tr:last-child td{border-bottom:0}
.mini td.bad{color:var(--red); font-weight:700}
.mini tbody tr:hover{background:var(--ink-50)}

@media (max-width:820px){
  .tk-add .input{flex:1 1 100%}
  .tk-add .btn{width:100%}
  .mini{font-size:12px}
  .mini th,.mini td{padding:7px 5px}
}

/* ══════════════════════════════════════════════════════════════
   表头吸顶：往下滑时表头始终可见
   ══════════════════════════════════════════════════════════════ */
.tablebox{position:relative}
.grid thead th{
  position:sticky; top:52px; z-index:5;      /* 52px = 顶栏高度 */
  background:#fbfcfd;
  box-shadow:inset 0 -1px 0 var(--line);
}
/* 顶栏本身吸顶，两层叠住时不要透 */
.topbar{box-shadow:0 1px 3px rgba(11,22,34,.05)}
@media (max-width:820px){
  .grid thead{display:none}                   /* 手机是卡片布局，没有表头 */
}

/* ── 通用弹窗（录入 / 交接单）── */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:24px}
.modal[hidden]{display:none}
.modal-mask{position:absolute; inset:0; background:rgba(9,20,32,.42)}
.modal-panel{
  position:relative; width:min(96vw,620px); max-height:90vh;
  background:#fff; border-radius:14px; box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; animation:popIn .2s var(--ease-spring) both;
}
.modal-hd{display:flex; align-items:center; padding:16px 20px 12px; border-bottom:1px solid var(--line)}
.modal-hd h2{margin:0; font-size:16px; letter-spacing:-.01em}
.modal-hd .btn{margin-left:auto}
.modal-bd{padding:16px 20px; overflow:auto}
/* 底部保存栏固定：跟进表单很长，以前填完要滚到底才看得见「保存这条跟进」，
   很容易以为没保存就在打叉。sticky 之后它永远贴在弹窗底部。 */
.modal-ft{display:flex; gap:10px; padding:12px 20px; border-top:1px solid var(--line); background:#fbfcfd; border-radius:0 0 14px 14px;
  position:sticky; bottom:0; z-index:5}
.modal-ft .primary{margin-left:auto}
.err{margin:0 0 12px; padding:9px 12px; border-radius:8px; font-size:12.5px;
  color:var(--red); background:var(--red-l); border:1px solid rgba(192,57,43,.2)}
.err[hidden]{display:none}
.hand{
  margin:0; padding:14px; border-radius:10px; font-size:12.8px; line-height:1.75;
  white-space:pre-wrap; word-break:break-word; font-family:var(--font-sans);
  background:var(--ink-50); border:1px solid var(--line); color:var(--ink-800);
}
.phone-plain{cursor:pointer; border-bottom:1px dashed var(--ink-300)}
.phone-plain:hover{color:var(--lemon-700); border-color:var(--lemon-500)}
@media (max-width:820px){ .modal{padding:12px} .modal-panel{width:100%} }

/* ── 批量操作条 ── */
.bulkbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 10px; padding:8px 12px; border-radius:11px;
  /* 原来是整条深墨色，压在浅色页面上像一块补丁，和玻璃拟态完全不搭。
     现在改成「浅绿玻璃 + 细绿边」，仍然一眼能认出这是操作条。 */
  background:linear-gradient(168deg, rgba(255,255,255,.9), rgba(234,247,239,.88));
  border:1px solid rgba(34,168,100,.28);
  color:var(--ink-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 24px -20px rgba(11,22,34,.45);
  animation:fadeUp .18s var(--ease-out) both;
}
/* ⚠️ .bulkbar 有 display:flex，会覆盖 HTML 的 hidden 属性 ——
   JS 里明明 `bar.hidden = n===0`，页面上"已选 0 条"却一直挂着。
   必须显式写 [hidden]，否则 hidden 形同虚设（其他带 display 的组件同理）。 */
.bulkbar[hidden]{display:none}
.bulkbar b{font-size:12.8px; color:var(--ink-900)}
.bulkbar .sep{width:1px; height:16px; background:rgba(11,22,34,.14)}
.bulkbar .btn{
  height:30px; padding:0 11px; font-size:12.4px;
  background:rgba(255,255,255,.92); border-color:var(--ink-200); color:var(--ink-700);
}
.bulkbar .btn:hover{border-color:var(--lemon-500); color:var(--lemon-700); background:#fff}
.bulkbar .btn.ghost{background:transparent; border-color:transparent; color:var(--ink-500)}
.bulkbar .btn.ghost:hover{color:var(--lemon-700); background:transparent}
.c-pick{width:38px; text-align:center; padding-left:10px !important}
.c-pick input{width:15px; height:15px; cursor:pointer; accent-color:var(--lemon-500)}
tr:has(> .c-pick input:checked){background:rgba(34,168,100,.06)}
@media (max-width:820px){
  .c-pick{position:absolute; left:12px; top:12px; padding:0 !important}
  td.who{padding-left:30px !important}
  .bulkbar{position:sticky; top:0; z-index:12; margin:0 0 10px}
}

/* ══════════════════════════════════════════════════════════════
   视觉统一 v2 —— 对齐官网「玻璃拟态」设计系统
   官网 assets/css/site.css 的规范：磨砂玻璃 + 渐变底 + 设计令牌
   这一节放在最后，用来覆盖前面的规则，保证全站风格一致。
   ══════════════════════════════════════════════════════════════ */
body{
  /* 玻璃拟态要"看得见"，前提是**背后真的有东西**。
     之前这里是一组 rgba(...,.10) / rgba(...,.07) 的斑块压在 #f7fafc 上，
     再配 86% 白卡片 —— 透过去还是白，模糊前后一样，等于没做。
     现在把彩色斑块提到 .24~.30，底色压到浅灰绿，模糊才有内容可模糊。 */
  background:
    radial-gradient(680px 520px at 8% -4%,  rgba(34,168,100,.30), transparent 66%),
    radial-gradient(620px 480px at 94% 0%,   rgba(48,104,196,.24), transparent 64%),
    radial-gradient(720px 560px at 44% 104%, rgba(232,178,72,.22), transparent 66%),
    radial-gradient(430px 360px at 80% 56%,  rgba(34,168,100,.16), transparent 68%),
    linear-gradient(180deg, #f1f8f4 0%, #eef3f8 52%, #f7f3ec 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  min-height:100vh;
}

/* 顶栏 / 筛选条：半透明磨砂 */
.topbar{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(var(--blur,20px)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--blur,20px)) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(11,22,34,.05), 0 8px 24px -18px rgba(11,22,34,.25);
}
.filters{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.5);
}

/* 卡片统一：磨砂玻璃 + 柔和阴影 + 统一圆角 */
.tablebox,.card,.kpi,.modal-panel,.drawer-panel{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 8px -4px rgba(11,22,34,.10), 0 18px 40px -28px rgba(11,22,34,.35);
  border-radius:16px;
}
.kpi{border-radius:14px}
.kpi:hover{transform:translateY(-2px); box-shadow:0 8px 22px -10px rgba(34,168,100,.35)}

/* 统计卡：可点，选中态要明显 */
.chip{
  cursor:pointer; border-radius:12px; padding:7px 14px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 3px rgba(11,22,34,.05);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.chip:hover{transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(11,22,34,.3)}
.chip.on{
  background:linear-gradient(180deg, var(--lemon-500), var(--lemon-600));
  border-color:var(--lemon-600);
  box-shadow:0 8px 18px -10px rgba(34,168,100,.6), inset 0 1px 0 rgba(255,255,255,.32);
}
.chip.on i{color:rgba(255,255,255,.88)}
.chip.on b{color:#fff}
.chip.on.danger b{color:#fff}
.chip.on.warn b{color:#fff}

/* ⚠️ .chip.danger / .chip.warn / .chip.star 以前**根本没写颜色** ——
   于是"已超时 5 个"和"全部 6 个"长得一模一样，指标条起不到报警作用。
   现在：有数字时才着色（.hot），为 0 时保持中性，避免"0 也在报警"。 */
.chip.warn.hot{background:var(--warn-bg); border-color:#f5d9b0}
.chip.warn.hot i{color:var(--warn-text)}
.chip.warn.hot b{color:var(--warn-text)}
.chip.danger.hot{background:var(--danger-bg); border-color:#f4c9c4}
.chip.danger.hot i{color:var(--danger-text)}
.chip.danger.hot b{color:var(--danger-text)}
.chip.star.hot{background:var(--gold-bg); border-color:#f0dfae}
.chip.star.hot i{color:#8a6a10}
.chip.star.hot b{color:#8a6a10}

/* 选中态优先级最高：选中的卡片即使是危险色也走主色，避免红绿打架 */
.chip.on.hot{background:linear-gradient(180deg, var(--lemon-500), var(--lemon-600)); border-color:var(--lemon-600)}
.chip.on.hot i{color:rgba(255,255,255,.88)}
.chip.on.hot b{color:#fff}

/* 按钮统一：同一高度、同一圆角、同一字重；靠色阶区分主次 */
.btn,.chan,.res button,.notes button,.card-tab,.dt-q,.tab,.tk-box{
  font-family:var(--font-sans);
}
.btn{
  height:34px; padding:0 14px; border-radius:10px; font-size:12.8px; font-weight:600;
  background:rgba(255,255,255,.9); border:1px solid var(--ink-200); color:var(--ink-700);
  transition:transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{border-color:var(--lemon-400); color:var(--lemon-700); background:#fff; box-shadow:0 4px 12px -6px rgba(34,168,100,.4)}
.btn.primary{
  background:linear-gradient(180deg, var(--lemon-500), var(--lemon-600));
  border-color:var(--lemon-600); color:#fff;
  box-shadow:0 6px 16px -8px rgba(34,168,100,.7);
}
.btn.primary:hover{background:linear-gradient(180deg, var(--lemon-400), var(--lemon-600)); color:#fff}
/* 操作列按钮与顶部按钮同款，尺寸略小 */
td.c-act .btn{height:30px; padding:0 12px; font-size:12.2px}

/* 输入控件统一 */
.input,.dt-input{
  height:34px; border-radius:10px; font-size:13px;
  background:rgba(255,255,255,.9); border:1px solid var(--ink-200);
}
.input:focus{border-color:var(--lemon-400); box-shadow:0 0 0 3px rgba(34,168,100,.14)}

/* ── 表头：按截图做成"浅底 + 小字 + 细分隔"，并真正吸顶 ── */
.tablebox{overflow:visible}          /* 不能裁剪 sticky */
.grid thead th{
  position:sticky; top:var(--topbar-h, 56px); z-index:6;
  padding:9px 10px;
  font-size:11.8px; font-weight:600; letter-spacing:.02em; color:var(--ink-400);
  background:rgba(247,250,252,.94);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  border-bottom:1px solid var(--ink-100);
  box-shadow:0 6px 12px -12px rgba(11,22,34,.35);
}
.grid tbody td{padding:8px 10px; border-bottom:1px solid rgba(11,22,34,.05)}
.grid tbody tr:hover{background:rgba(255,255,255,.85)}
.grid tbody tr:hover{box-shadow:none}
td.c-act{text-align:right}

/* 阶段/时效/标签统一成小胶囊 */
.tag,.sla,.adm-chip,.dt-chip{
  border-radius:8px; font-size:11.8px; font-weight:600;
}
.tag{padding:3px 9px}
.chip b,.kpi b,.pri b{font-variant-numeric:tabular-nums}

/* 报表卡片标题统一 */
.card h3{font-size:13.2px; font-weight:var(--fw-semibold); color:var(--ink-800); margin-bottom:14px}
.card h3 .hint{font-weight:400; color:var(--ink-400)}

/* 抽屉/弹窗：玻璃 + 更大圆角 */
.drawer-panel,.modal-panel{border-radius:18px; background:rgba(255,255,255,.9)}
.drawer-hd,.modal-hd{background:transparent; border-bottom:1px solid rgba(11,22,34,.06)}
.drawer-ft,.modal-ft{background:rgba(247,250,252,.8); border-top:1px solid rgba(11,22,34,.06)}
.card-tab{border-radius:11px}

/* 漏斗条（报表用） */
.funnel{display:grid; gap:6px}
.fn-row{display:grid; grid-template-columns:88px 1fr 96px; align-items:center; gap:10px}
.fn-bar{height:26px; border-radius:8px; background:rgba(15,30,45,.05); overflow:hidden; position:relative}
.fn-bar i{display:block; height:100%; border-radius:8px;
  background:linear-gradient(90deg, var(--lemon-400), var(--lemon-600));
  animation:barGrow .5s var(--ease-out) both}
.fn-bar span{position:absolute; inset:0; display:flex; align-items:center; padding-left:10px;
  font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25)}
.fn-rate{font-size:12px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .grid thead th{top:0}
  .fn-row{grid-template-columns:70px 1fr 76px}
}

/* ── 顶栏按钮：一套规格（同高、同圆角、同最小宽、同字重）── */
.topbar .stats{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.topbar .btn{
  height:34px; min-width:72px; padding:0 16px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:12.8px; font-weight:600; letter-spacing:.01em;
}
.topbar .btn.icon{min-width:34px; width:34px; padding:0; font-size:15px; color:var(--ink-500)}
.topbar .btn.icon:hover{color:var(--lemon-700); transform:rotate(90deg)}
.topbar .btn.primary{min-width:84px}

/* 下拉旁「+」就地新增 */
.plus{
  width:18px; height:18px; margin-left:4px; padding:0; line-height:1;
  border-radius:6px; cursor:pointer; font-size:13px; font-weight:700;
  color:var(--ink-400); background:rgba(15,30,45,.05);
  border:1px solid transparent; vertical-align:middle;
  transition:color .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease);
}
.plus:hover{color:#fff; background:var(--lemon-500); border-color:var(--lemon-600)}
.plus:active{transform:scale(.9)}

/* 设置页角色说明排版 */
.card .tips b{color:var(--ink-700)}

/* ══════════════════════════════════════════════════════════════
   玻璃拟态 · 现代化加强
   ══════════════════════════════════════════════════════════════ */
:root{ --blur:22px; }

/* 细纹理层：让 backdrop-filter 有高频细节可模糊。
   全是大面积纯色的时候，模糊前=模糊后，玻璃感出不来。 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(16,48,36,.10) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.5;
}
.tablebox,.card,.kpi,.modal-panel,.drawer-panel,.topbar{
  backdrop-filter:blur(24px) saturate(185%);
  -webkit-backdrop-filter:blur(24px) saturate(185%);
}
.tablebox,.card{
  background:linear-gradient(165deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 6px -3px rgba(11,22,34,.10),
    0 24px 48px -32px rgba(11,22,34,.45);
}
.grid tbody tr{background:transparent}
.grid tbody tr:hover{background:rgba(255,255,255,.7)}

/* 切换卡片时内容淡入（一级卡布局见文件末尾 v3 一节） */
.drawer-bd > .sec{animation:switchIn .22s var(--ease-out) both}
.drawer-bd > .sec:nth-child(2){animation-delay:.04s}
@keyframes switchIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* 渠道 / 结果 分组 */
.reswrap{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding:10px 12px; border-radius:11px;
  background:rgba(34,168,100,.05); border:1px solid rgba(34,168,100,.16);
}
.resHint{font-size:11.8px; font-weight:700; color:var(--lemon-700); white-space:nowrap}
.reswrap .res{margin:0; display:flex; gap:6px; flex-wrap:wrap}
.res button{
  height:30px; padding:0 13px; border-radius:8px; font-size:12.3px; font-weight:600;
  background:rgba(255,255,255,.92); border:1px solid var(--ink-200); color:var(--ink-700);
  transition:transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.res button:hover{border-color:var(--lemon-400); color:var(--lemon-700)}
.res button.on{background:var(--lemon-500); border-color:var(--lemon-600); color:#fff; box-shadow:0 4px 12px -6px rgba(34,168,100,.7)}
.res button:active{transform:scale(.96)}

/* 快捷日期 */
.qdates{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px}
.qdates .lb{font-size:11.8px; color:var(--muted); font-weight:600}
.qdate{
  height:28px; padding:0 11px; border-radius:8px; cursor:pointer;
  font-size:12.2px; font-weight:600; color:var(--ink-700);
  background:rgba(255,255,255,.9); border:1px solid var(--ink-200);
  transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.qdate:hover{border-color:var(--lemon-400); color:var(--lemon-700)}
.qdate.on{background:var(--lemon-500); border-color:var(--lemon-600); color:#fff}

/* 时间轴里的「修改」小按钮 */
.linkbtn.tiny{font-size:11.5px; padding:0 0 0 2px; color:var(--ink-400)}
.linkbtn.tiny:hover{color:var(--lemon-700)}

/* 手机：仍然一行五张（等宽等高是用户的明确要求，
   手机上换成两列会出现「第五张孤零零占半行」的不等宽观感） */
@media (max-width:820px){
  .reswrap{flex-direction:column; align-items:flex-start}
}

/* ══════════════════════════════════════════════════════════════
   玻璃拟态 v3 —— 「真的看得见」版
   ──────────────────────────────────────────────────────────────
   前两版没效果，根因不是写法，是**对比度不够**：
     · 背景是 #f7fafc 近白 + 10% 的淡斑 → 模糊前后几乎一致
     · 卡片 86%→68% 白 → 背后透出来的仍是白
   所以这一版同时做三件事：
     1. 背景彩色斑块提到 24%~30%，并加一层细点阵（让模糊有细节可抹）
     2. 玻璃面板降到底色 44%~72%，彩色能透上来
     3. 加「内高光 + 外描边」——玻璃的边缘靠这条亮线立住
   ══════════════════════════════════════════════════════════════ */

/* ── 一级卡：五张等宽等高（唯一一处定义，别再在别处覆盖） ── */
.card-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
  align-items:stretch;
  margin:0 0 12px;
  padding:0;
  border-bottom:0;
  overflow:visible;
}
.card-tab{
  /* grid 子项默认 min-width:auto，会被内容顶宽 → 必须显式归零才等宽 */
  min-width:0;
  width:100%;
  height:58px;
  min-height:58px;
  max-height:58px;
  box-sizing:border-box;
  padding:0 10px;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
  border-radius:12px;
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  font-family:inherit;
  background:linear-gradient(170deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(11,22,34,.05),
    0 10px 20px -16px rgba(11,22,34,.45);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             background .16s var(--ease), border-color .16s var(--ease);
}
.card-tab b{font-size:12.8px; font-weight:var(--fw-semibold); color:var(--ink-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.card-tab span{font-size:10.8px; color:var(--ink-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.card-tab:hover{transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(34,168,100,.55), inset 0 1px 0 rgba(255,255,255,.95)}
/* 选中态见文件末尾「v4 配色」一节 —— 这里不再写第二份 */
.card-tab:focus-visible{outline:2px solid var(--lemon-500); outline-offset:2px}

@media (max-width:820px){
  .card-tabs{gap:6px}
  .card-tab{height:52px; min-height:52px; max-height:52px; padding:0 7px}
  .card-tab b{font-size:11.8px}
  .card-tab span{font-size:9.8px}
}

/* ── 玻璃面板：降透明度 + 内高光 + 外描边 ── */
.tablebox{
  background:linear-gradient(168deg, rgba(255,255,255,.76), rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(26px) saturate(190%);
  -webkit-backdrop-filter:blur(26px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 3px 8px -5px rgba(11,22,34,.14),
    0 28px 54px -36px rgba(11,22,34,.55);
  border-radius:18px;
}
.card,.kpi{
  background:linear-gradient(168deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(24px) saturate(185%);
  -webkit-backdrop-filter:blur(24px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px -4px rgba(11,22,34,.12),
    0 22px 44px -32px rgba(11,22,34,.5);
}
/* ⚠️ 这是 .topbar 的**最后一处**定义（前面 114 / 723 行还有两份，都被这里覆盖）。
   改顶栏样式必须改这里，改前面那两处等于没改 —— 今天就踩了这个坑。 */
.topbar{
  background:var(--chrome);
  /* chrome 是不透明实色，毛玻璃没有意义，顺手去掉一层每帧模糊 */
  border-bottom:1px solid var(--chrome-border);
  box-shadow:0 1px 0 rgba(11,22,34,.05), 0 8px 24px -20px rgba(11,22,34,.25);
}
.filters{
  /* ⚠️ 必须显式抬 z-index。
     背景：.filters 和 .tablebox 都用了 backdrop-filter，这两个属性各自会
     创建一个**层叠上下文**。两个都是 z-index:auto 时谁在上面只按 DOM 顺序，
     而表格在筛选条后面 → 表格盖住筛选条 → 里面弹出的高级筛选浮层看不见
     （浮层的 z-index:45 只在 .filters 这个上下文里有效，突不出去）。
     抬到 30 之后：表格 0 < 遮罩 19 < 顶栏 20 < 筛选条 30（含浮层）。 */
  position:relative;
  z-index:30;
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,.55);
}

/* ── 弹窗/抽屉：最容易看出玻璃的地方（背后正好是密密麻麻的表格） ── */
.drawer-mask{background:rgba(9,20,32,.26); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.drawer-panel,.modal-panel{
  background:linear-gradient(168deg, rgba(255,255,255,.86), rgba(255,255,255,.70));
  border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(34px) saturate(185%);
  -webkit-backdrop-filter:blur(34px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 32px 70px -30px rgba(9,20,32,.45);
}
.drawer-hd,.modal-hd{background:rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.6)}
.drawer-ft,.modal-ft{background:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.6)}
.tablebox .grid tbody tr:hover{background:rgba(255,255,255,.72)}

/* 浏览器不支持 backdrop-filter 时退回足够不透明的底，保证可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tablebox{background:rgba(255,255,255,.94)}
  .card,.kpi{background:rgba(255,255,255,.94)}
  .topbar{background:rgba(255,255,255,.96)}
  .drawer-panel,.modal-panel{background:rgba(255,255,255,.98)}
  .card-tab{background:rgba(255,255,255,.94)}
}

/* ── 修改往来：就地表单 ── */
.tl li.tl-edit{
  position:relative; margin:0 0 14px; padding:13px 14px 13px 16px;
  border-left:2px solid var(--lemon-500);
  border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px -18px rgba(11,22,34,.5);
  animation:switchIn .18s var(--ease-out) both;
}
.tl li.tl-edit .ehd{display:flex; align-items:baseline; gap:8px; margin-bottom:9px}
.tl li.tl-edit .ehd b{font-size:12.6px; color:var(--lemon-700)}
.tl li.tl-edit .ehd .muted{font-size:11.5px}
.tl li.tl-edit .row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ebtns{display:flex; align-items:center; gap:8px; margin-top:12px}
.ebtns .btn{height:32px; min-width:88px}

/* ══════════════════════════════════════════════════════════════
   2026-10-18 · 联动改版新增组件
   统计卡从顶栏挪到表格上方（顶栏只放操作，界面更干净）；
   筛选分两行；新增紧急星标、画像维度条、快捷日期回显、待跟进页。
   ══════════════════════════════════════════════════════════════ */

/* ── 顶栏：操作区统一右对齐，不再挤压统计卡 ── */
.topbar .topacts{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.topbar .brand{flex:0 0 auto}
.fu-link{position:relative}
.fu-link .badge{
  display:inline-block; min-width:18px; height:18px; margin-left:6px; padding:0 5px;
  border-radius:9px; background:var(--red); color:#fff; font-size:11px; line-height:18px;
  font-weight:700; text-align:center; font-variant-numeric:tabular-nums;
}
.fu-link .badge[hidden]{display:none}

/* ── 筛选条：两行，第二行可收起 ── */
.filters{padding:8px 16px; position:relative}

/* ── 筛选区：永远一行 ──
   常用条件 + 排序 + 更多 + 重置全在一行。
   高级筛选改为浮层（见下面 .filter-pop），不再占第二行 ——
   这是"重置被挤到第二行"的根治办法：第二行根本不存在了。 */
.filters .frow{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.filters .fmain{display:flex; flex-wrap:wrap; align-items:center; gap:7px; flex:1 1 auto; min-width:0}
/* 重置：紧跟「更多」右侧、贴右边缘、不参与左侧换行、不会被压缩 */
.filters .f-actions{flex:0 0 auto; margin-left:auto; white-space:nowrap}
/* 有筛选生效时给重置一点强调色，让用户知道"点了能回到默认" */
.filters .f-actions.has-filter{color:var(--lemon-700); border-color:rgba(34,168,100,.4)}

/* ── 高级筛选浮层 ── */
.filter-pop{
  position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:45;
  padding:11px 14px 12px; border-radius:0 0 14px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 22px 46px -26px rgba(11,22,34,.45), inset 0 1px 0 rgba(255,255,255,.95);
  animation:popIn .16s var(--ease-out) both;
}
.filter-pop[hidden]{display:none}
.filter-pop .fp-hd{display:flex; align-items:baseline; gap:8px; margin-bottom:9px}
.filter-pop .fp-hd b{font-size:12.5px; color:var(--ink-800)}
.filter-pop .fp-hd .muted{font-size:11.5px}
.filter-pop .fmain{margin-bottom:10px}
.filter-pop .fp-foot{display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:9px; border-top:1px dashed var(--ink-100)}
/* 遮罩：盖住表格（0），但要让开顶栏（20）和筛选条自己（30）——
   否则会把自己的浮层也盖住，表现为"点了没反应"。 */
.filter-mask{position:fixed; inset:0; z-index:19; background:transparent}
.filter-mask[hidden]{display:none}
.filters .frow.adv .input{max-width:170px}
/* 搜索框原来 flex:1 会吃掉整行剩余宽度，把「更多 / 重置」挤到下一行，
   于是"重置"孤零零占一行、既浪费又不顺手。
   限一个最大宽度后，第一行能稳定放下 搜索 + 6 个下拉 + 排序 + 方向 + 更多 + 重置。 */
.filters .grow{flex:1 1 200px; min-width:150px; max-width:300px}
.filters .frow .btn{height:32px}
#btnReset{color:var(--ink-500)}
#btnReset:hover{color:var(--red); border-color:rgba(224,80,60,.4)}
.btn.ghost.on{background:rgba(34,168,100,.10); border-color:rgba(34,168,100,.35); color:var(--lemon-700)}
label.ck{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-700); cursor:pointer; white-space:nowrap}
label.ck input{width:15px; height:15px; accent-color:var(--lemon-500); cursor:pointer}

/* ── 统计卡：独立一行，等宽好点 ── */
.wrap > .stats{
  display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:7px;
  margin:0 0 10px; align-items:stretch;
}
.wrap > .stats .chip{
  min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:6px 10px; border-radius:11px; text-align:left;
}
.wrap > .stats .chip i{font-size:11px; color:var(--ink-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.wrap > .stats .chip b{font-size:16.5px; line-height:1.2; color:var(--ink-900)}
.wrap > .stats .chip.on{border-color:var(--lemon-600)}
.chip.star i{color:var(--red)}
.chip.star b{color:var(--red)}
.chip.star.on{background:var(--red); border-color:var(--red)}
.chip.star.on i{color:rgba(255,255,255,.8)}
.chip.star.on b{color:#fff}

/* ── 表头可排序 ── */
th.sortable{cursor:pointer; user-select:none; position:relative; padding-right:18px !important}
th.sortable::after{
  content:"↕"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:10px; color:var(--ink-300, #b6c1cb); opacity:.8;
}
th.sortable:hover{color:var(--ink-700)}
th.sortable.sorted{color:var(--lemon-700)}
th.sortable.sorted::after{content:attr(data-dir); color:var(--lemon-600); opacity:1; font-size:11px}

/* ── 列表行：紧急星标 / 画像分点 / 相对日期 ── */
.who-line{display:flex; align-items:center; gap:6px; min-width:0}
.who-line b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pri-star{
  flex:0 0 auto; width:20px; height:20px; padding:0; line-height:18px; cursor:pointer;
  border-radius:6px; border:1px solid transparent; background:transparent;
  color:var(--ink-300, #b6c1cb); font-size:14px;
  transition:color .14s var(--ease), background .14s var(--ease), transform .12s var(--ease);
}
.pri-star:hover{color:var(--amber); background:rgba(240,170,60,.12)}
.pri-star.on{color:var(--amber)}
.pri-star:active{transform:scale(.88)}
.tag.star{background:var(--red-l); color:var(--red); border-color:rgba(224,80,60,.3)}
.c-pri{width:74px}
.pt-dot{
  display:inline-block; margin-top:3px; padding:0 5px; border-radius:6px;
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:rgba(15,30,45,.06); color:var(--ink-500);
}
.pt-dot.t-hot{background:var(--red-l); color:var(--red)}
.pt-dot.t-warm{background:var(--lemon-100, #eaf7ef); color:var(--lemon-700)}
.pt-dot.t-cool{background:var(--amber-l); color:var(--amber)}
.pt-dot.t-won{background:var(--green-l); color:var(--green-d)}
.nd{display:inline-flex; align-items:baseline; gap:5px; font-variant-numeric:tabular-nums}
.nd i{font-style:normal; font-size:11px; color:var(--muted)}
.nd.late{color:var(--danger-text); background:var(--danger-bg); padding:1px 6px; border-radius:5px; font-weight:700}
.nd.late i{color:var(--danger-text)}
.nd.today{color:var(--amber); font-weight:700} .nd.today i{color:var(--amber)}
.nd.soon i{color:var(--amber)}
tr.soon{background:rgba(240,170,60,.05)}
.sla.warn{background:var(--amber-l); color:var(--amber)}

/* ── 快捷日期 ── */
.qdates{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:7px}
.qhint{font-size:11.5px; font-weight:600; color:var(--ink-400); margin-left:2px}
.qhint.today{color:var(--amber)}
.qhint.late{color:var(--red)}
.qhint.soon{color:var(--lemon-700)}
.qdate.clear{color:var(--ink-400); border-style:dashed}
.qdate.clear:hover{color:var(--red); border-color:rgba(224,80,60,.4)}
.hintline{display:block; margin-top:4px; font-size:11px; color:var(--ink-400); line-height:1.4}

/* ── 画像：六维度条 ── */
.pt-dims{display:grid; gap:6px; margin:12px 0 4px}
.pd{display:grid; grid-template-columns:74px 1fr 30px; align-items:center; gap:8px}
.pd-l{font-size:11.8px; color:var(--ink-500); white-space:nowrap}
.pd-track{height:7px; border-radius:99px; background:rgba(15,30,45,.07); overflow:hidden}
.pd-track i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--lemon-400),var(--lemon-600))}
.pd-track i.mid{background:linear-gradient(90deg,#e8c06a,var(--amber))}
.pd-track i.low{background:linear-gradient(90deg,#c8d2da,#9aa7b4)}
.pd-v{font-size:11.5px; font-weight:700; color:var(--ink-600); text-align:right; font-variant-numeric:tabular-nums}
.pt-gaps{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px dashed rgba(34,168,100,.25);
  font-size:12px; color:var(--ink-500);
}
.pt-gaps .linkbtn{margin-left:2px}
.pt.tone-hot .pd-track i{background:linear-gradient(90deg,#e6836f,var(--red))}
.pt.tone-cool .pd-track i{background:linear-gradient(90deg,#e8c06a,var(--amber))}
.pt.tone-cold .pd-track i,.pt.tone-lost .pd-track i{background:#9aa7b4}

/* ── 详情顶栏紧急按钮 ── */
.star-btn{color:var(--ink-500)}
.star-btn.on{background:var(--amber-l); border-color:rgba(240,170,60,.45); color:var(--amber); font-weight:700}

/* ══════════════════ 待跟进页 ══════════════════ */
.fu-list-box{
  background:linear-gradient(168deg, rgba(255,255,255,.76), rgba(255,255,255,.56));
  border:1px solid rgba(255,255,255,.8); border-radius:18px;
  backdrop-filter:blur(26px) saturate(190%); -webkit-backdrop-filter:blur(26px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 28px 54px -36px rgba(11,22,34,.5);
  overflow:hidden;
}
.fu-list{list-style:none; margin:0; padding:0}
.fu-row{
  display:grid; grid-template-columns:84px 1fr 132px; gap:14px; align-items:start;
  padding:13px 16px; border-bottom:1px solid rgba(11,22,34,.06);
  cursor:pointer; transition:background .14s var(--ease);
}
.fu-row:last-child{border-bottom:0}
/* 原来 hover 是"半透明白"——本来就浅色底，等于没变化。
   带上 urgent/late/soon 一起写，否则它们的状态底色会盖住 hover。 */
.fu-row:hover,
.fu-row.urgent:hover,
.fu-row.late:hover,
.fu-row.soon:hover{background:#e4f2e9}
.fu-row.late{box-shadow:inset 3px 0 0 var(--red)}
.fu-row.soon{box-shadow:inset 3px 0 0 var(--amber)}
.fu-row.urgent{background:rgba(240,170,60,.07)}
.fu-row.urgent.late{box-shadow:inset 3px 0 0 var(--red)}
.fu-when{display:flex; flex-direction:column; gap:1px; padding-left:4px}
.fu-when b{font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.fu-when span{font-size:11px; color:var(--muted)}
.fu-when i{font-style:normal; font-size:11.5px; font-weight:700; color:var(--ink-500)}
.fu-row.late .fu-when i{color:var(--red)}
.fu-row.soon .fu-when i{color:var(--amber)}
.fu-main{min-width:0}
.fu-top{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:5px}
.fu-top b{font-size:13.5px}
.fu-items{display:flex; gap:6px; flex-wrap:wrap}
.fu-chip{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:7px;
  font-size:11.5px; background:rgba(15,30,45,.05); color:var(--ink-600);
  font-variant-numeric:tabular-nums;
}
.fu-chip em{font-style:normal; font-size:10.5px; color:var(--ink-400)}
.fu-chip.late{background:var(--red-l); color:var(--red)}
.fu-chip.late em{color:var(--red); opacity:.75}
.fu-chip.today{background:var(--amber-l); color:var(--amber)}
.fu-chip.today em{color:var(--amber); opacity:.75}
.fu-right{display:flex; flex-direction:column; align-items:flex-end; gap:4px}
.fu-badge{
  padding:2px 9px; border-radius:8px; font-size:11.8px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
/* 正常状态不该用品牌绿：绿色在主色体系里代表"主要动作"，
   用在"还有 5 天"这种中性信息上，会让整页到处都在发光。
   三档统一为 —— 红=已经超时、橙=24 小时内、灰=正常。 */
.fu-badge.ok{background:#f1f3f5; color:#6b7280}
.fu-badge.soon{background:var(--amber-l); color:var(--amber)}
.fu-badge.late{background:var(--red-l); color:var(--red)}
.fu-more{font-size:11px; color:var(--ink-400)}
.fu-detail{margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.72); border:1px solid rgba(11,22,34,.06)}
.fu-tbl{width:100%; border-collapse:collapse; font-size:12.2px}
.fu-tbl td{padding:4px 6px; border-bottom:1px dashed rgba(11,22,34,.07); color:var(--ink-700)}
.fu-tbl tr:last-child td{border-bottom:0}
.fu-tbl td:first-child{color:var(--ink-400); white-space:nowrap; width:82px}
.fu-tbl td:nth-child(2){width:auto}
.fu-tbl td.mono{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.fu-tbl tr.late td{color:var(--red)}
.fu-remark{margin:8px 0 0; font-size:12px; color:var(--ink-500); line-height:1.6}
.fu-acts{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.fu-acts .mono{font-size:12.5px; font-variant-numeric:tabular-nums}
.fu-foot{margin-top:12px; font-size:11.5px; text-align:center}
.mono{font-variant-numeric:tabular-nums}

@media (max-width:1100px){
  .wrap > .stats{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width:820px){
  .filters{padding:8px 12px}
  .filters .frow .input{max-width:none; flex:1 1 45%}
  .wrap > .stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .wrap > .stats .chip b{font-size:17px}
  .fu-row{grid-template-columns:64px 1fr; gap:9px; padding:11px 12px}
  .fu-right{grid-column:2; flex-direction:row; align-items:center; gap:8px}
  .fu-tbl td.mono{white-space:normal}
  .fu-tbl td:first-child{width:auto}
  .pd{grid-template-columns:64px 1fr 28px}
}

/* 详情顶栏现在是三个按钮（紧急 / 交接单 / 关闭）。
   原来的 .drawer-hd .btn{margin-left:auto} 会让三个按钮各自抢剩余空间、被摊开，
   这里改成「标题占满左边，按钮靠右排成一组」。 */
.drawer-hd{gap:8px; flex-wrap:wrap}
.drawer-hd > div:first-child{flex:1 1 200px; min-width:0; margin-right:auto}
.drawer-hd .btn{margin-left:0}
.drawer-hd .btn.ghost{flex:0 0 auto}

/* 手机上详情顶栏三个按钮 + 标题要能换行，别把标题挤成一条竖线 */
@media (max-width:600px){
  .drawer-hd{padding:13px 14px 11px}
  .drawer-hd h2{font-size:15.5px}
  .drawer-hd > div:first-child{flex:1 1 100%}
  .drawer-hd .btn{height:30px; padding:0 10px; font-size:12px}
}

/* ══════════════════════════════════════════════════════════════
   2026-10-18 · 第三轮：五卡尺寸统一 / 内联编辑 / 报价展示
   ──────────────────────────────────────────────────────────────
   尺寸不一致的两个真实来源（都在这下面治掉）：
     ① 一级卡原来只锁了 height，但内部是「标题 + 副信息」两行自由高度，
        副信息长度不同（"3 条" / "无待办" / "值得培育"）会让内容基线错位，
        看起来像卡片不一样高；
     ② 真正的元凶是**抽屉面板**：.drawer-panel 之前是 height:auto，
        内容多的卡把面板撑高、内容少的卡缩回去 —— 切一张卡整个面板跳一次高度。
   ══════════════════════════════════════════════════════════════ */

/* ── ① 一级卡：宽高/内距/行高全部锁死，两行结构 ── */
/* .card-tabs 的布局定义在文件前面「玻璃拟态 v3」一节，
   这里不再重复写一遍 —— 同一个选择器两处定义，正是"改了没生效"的老病根。 */
.card-tab{
  /* grid 子项默认 min-width:auto 会被文字顶宽，必须归零才等宽 */
  min-width:0; width:100%;
  height:64px; min-height:64px; max-height:64px;
  box-sizing:border-box;
  margin:0;
  padding:8px 11px;              /* 四张卡内距一致 */
  display:grid;
  grid-template-rows:18px 16px;  /* 两行固定行高：标题一行、副信息一行 */
  align-content:center;
  gap:3px;
  border-radius:12px;
  text-align:left;
  overflow:hidden;
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  background:linear-gradient(170deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(11,22,34,.05), 0 10px 20px -16px rgba(11,22,34,.45);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.card-tab b{
  display:block; height:18px; line-height:18px;
  font-size:13px; font-weight:700; color:var(--ink-800);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-tab span{
  display:block; height:16px; line-height:16px;
  font-size:11px; color:var(--ink-400);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-tab:hover{transform:translateY(-2px); box-shadow:0 12px 24px -14px rgba(34,168,100,.55), inset 0 1px 0 rgba(255,255,255,.95)}
.card-tab.on{
  background:linear-gradient(170deg, var(--lemon-500), var(--lemon-600));
  border-color:var(--lemon-600);
  box-shadow:0 12px 24px -14px rgba(34,168,100,.65), inset 0 1px 0 rgba(255,255,255,.35);
}
.card-tab.on b{color:#fff}
.card-tab.on span{color:rgba(255,255,255,.6)}

/* ── ② 抽屉：高度固定，切卡不再跳动 ── */
.drawer-panel{
  width:min(96vw, 860px);
  height:min(88vh, 760px);        /* 固定，不再 height:auto */
  max-height:88vh;
  display:flex; flex-direction:column;
}
.drawer-bd{flex:1 1 auto; min-height:0; overflow:auto}

@media (max-width:820px){
  .card-tabs{gap:6px}
  .card-tab{height:58px; min-height:58px; max-height:58px; padding:7px 7px; grid-template-rows:16px 14px; gap:2px}
  .card-tab b{height:16px; line-height:16px; font-size:11.5px}
  .card-tab span{height:14px; line-height:14px; font-size:9.8px}
  .drawer-panel{width:100%; height:92vh; max-height:92vh}
}

/* ── ③ 详情头部：报价一眼可见 ── */
.dm-quote{
  display:inline-flex; align-items:baseline; gap:5px;
  padding:1px 8px; border-radius:7px;
  background:var(--lemon-100, #eaf7ef); color:var(--lemon-700);
  font-size:11.8px; font-weight:700; font-variant-numeric:tabular-nums;
}
.dm-quote i{font-style:normal; font-weight:400; opacity:.75; font-size:11px}

/* 往来卡顶部的报价摘要 */
.quote-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:12px; padding:9px 12px; border-radius:11px;
  background:rgba(34,168,100,.06); border:1px solid rgba(34,168,100,.18);
}
.quote-bar .q-main{font-size:15px; font-weight:800; color:var(--lemon-700); font-variant-numeric:tabular-nums}
.quote-bar .q-main small{font-size:11.5px; font-weight:600; margin-left:2px}
.quote-bar .q-meta{font-size:11.8px; color:var(--ink-500)}
.quote-bar .q-none{font-size:12.2px; color:var(--ink-400)}
.quote-bar .btn{margin-left:auto; height:28px; padding:0 10px; font-size:12px}

/* 列表里的报价小标签 */
.tag.quote{background:var(--lemon-100, #eaf7ef); color:var(--lemon-700); border-color:rgba(34,168,100,.25)}

/* ── ④ 内联编辑（替代 prompt / confirm 弹窗） ── */
.bulk-edit{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:11px 14px; border-radius:12px;
  background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px -22px rgba(11,22,34,.6);
  animation:fadeUp .16s var(--ease-out) both;
}
.bulk-edit > .be-label{font-size:12.5px; font-weight:700; color:var(--ink-700); white-space:nowrap}
.bulk-edit .input{height:32px; min-width:150px; max-width:240px}
.bulk-edit .btn{height:32px}
.bulk-edit .be-tip{font-size:11.5px; color:var(--ink-400)}

/* 阶段内联编辑（详情里点阶段徽章） */
.stage-edit{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 14px; padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.72); border:1px dashed rgba(34,168,100,.35);
  animation:fadeUp .16s var(--ease-out) both;
}
.stage-edit .se-label{font-size:12.2px; font-weight:700; color:var(--ink-600); white-space:nowrap}
.stage-edit .input{height:32px}
.stage-edit .se-extra{display:flex; align-items:center; gap:8px; flex:1 1 auto; min-width:0}
.stage-edit .se-extra .input{max-width:180px}

/* 卡片里就地新增选项 */
.inline-add{
  display:flex; align-items:center; gap:6px; margin-top:6px;
  animation:fadeUp .14s var(--ease-out) both;
}
.inline-add .input{height:30px; font-size:12.5px; max-width:200px}
.inline-add .btn{height:30px; padding:0 10px; font-size:12px}

/* 详情顶部「推进阶段」条：详情页之前没有任何推进阶段的入口，
   这是"菜单项点了没用"的根源之一。现在常驻在最上面，一眼能改。 */
.stage-bar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin:0 0 10px; padding:6px 10px; border-radius:11px;
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.stage-bar .sb-cur{font-size:12.2px; color:var(--ink-500); white-space:nowrap}
.stage-bar .sb-cur b{color:var(--ink-800); font-size:12.6px}
.stage-bar .sb-arrow{font-size:11.5px; color:var(--ink-400); white-space:nowrap}
.stage-bar .sb-end{font-size:11.8px; color:var(--ink-400)}
.stage-btn{
  height:28px; padding:0 12px; border-radius:8px; cursor:pointer;
  font-size:12.2px; font-weight:600; font-family:inherit;
  background:rgba(255,255,255,.92); border:1px solid var(--ink-200); color:var(--ink-700);
  transition:border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease);
}
.stage-btn:hover{border-color:var(--lemon-400); color:var(--lemon-700); background:#fff}
.stage-btn.ok{border-color:rgba(34,168,100,.4); color:var(--lemon-700); background:rgba(34,168,100,.08)}
.stage-btn.bad{border-color:rgba(224,80,60,.35); color:var(--red); background:rgba(224,80,60,.06)}
.stage-bar.editing{background:rgba(255,255,255,.9); border-style:dashed; border-color:rgba(34,168,100,.42)}
.stage-bar .se-label{font-size:12px; font-weight:700; color:var(--ink-600); white-space:nowrap}
.stage-bar .input{height:28px; font-size:12.4px; max-width:150px}
.stage-bar .btn{height:28px; padding:0 10px; font-size:12px}

/* 列表里的跟进人 */
.owner-cell .own{font-size:12.6px; color:var(--ink-700)}
.owner-cell .tag.red{background:var(--red-l); color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   2026-10-18 · v4：跟进记录卡 / 阶段自动联动提示 / 密度收口
   ──────────────────────────────────────────────────────────────
   这一节只放「新出现的东西」，已有选择器一律回原处改 —— 同一个选择器
   写两处是这个项目反复栽跟头的地方（避坑 F1），这一轮又清掉三处 .card-tab.on。
   ══════════════════════════════════════════════════════════════ */

/* ── 跟进记录条目：一条记录要能独立读懂 ── */
.tl-time{font-size:12.6px; font-weight:700; color:var(--ink-800); font-variant-numeric:tabular-nums}
.tl-rel{font-style:normal; font-size:11px; color:var(--ink-400); font-weight:500}
.tl-rel.today{color:var(--amber); font-weight:700}
.tl-rel.soon{color:var(--lemon-700)}
.tl-seq{
  font-size:10.5px; color:var(--ink-400); padding:1px 6px; border-radius:5px;
  background:rgba(15,30,45,.05); font-variant-numeric:tabular-nums;
}
.tl-edit-btn{
  margin-left:auto; opacity:.7; font-size:11.5px;
  transition:opacity .14s var(--ease), color .14s var(--ease);
}
.tl li:hover .tl-edit-btn{opacity:1; color:var(--lemon-700)}
.tl li .tx{margin-top:3px}
/* 同一天记多条时，靠左那条竖线把"第几次"串起来 */
.tl li{padding-bottom:12px}

/* ── 阶段条上的「自动」说明：让用户知道阶段为什么会自己变 ── */
.sb-auto{
  margin-left:auto; padding:2px 8px; border-radius:7px; cursor:help;
  font-size:11px; color:var(--lemon-700); white-space:nowrap;
  background:rgba(34,168,100,.08); border:1px solid rgba(34,168,100,.2);
}
.stage-bar.editing .sb-auto{display:none}   /* 正在补金额/原因时先让位，别挤 */

@media (max-width:820px){
  .tl-edit-btn{margin-left:0}
  .sb-auto{margin-left:0; order:9; width:100%; text-align:center}
}

/* ══════════════════════════════════════════════════════════════
   2026-10-18 · v5：报价改为「并列动作」+ 已完成状态条
   ──────────────────────────────────────────────────────────────
   背景：报价原来和 电话/微信/上门 挤在同一排按钮里（互斥单选），
   用户看到的就是"只能选一个"，而"电话里报了价"这件事根本记不下来。
   现在拆成两件事：
     · 怎么联系的 —— 电话 / 微信 / 上门（单选，一次只能一种）
     · 这次还报了价 —— 勾选（可勾可不勾，和联系方式并存）
   ══════════════════════════════════════════════════════════════ */

/* ── 已完成动作条：一眼看到「已电话跟进 3 次 + 已报价 ¥3600」 ── */
.act-bar{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin:0 0 9px; padding:7px 10px; border-radius:11px;
  background:linear-gradient(168deg, rgba(255,255,255,.7), rgba(234,247,239,.55));
  border:1px solid rgba(34,168,100,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.act-bar .ab-lb{font-size:11px; color:var(--ink-400); margin-right:1px; white-space:nowrap}
.ab-item{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:8px; font-size:11.8px;
  background:rgba(15,30,45,.045); color:var(--ink-500);
  border:1px solid transparent; white-space:nowrap;
}
.ab-item.done{background:#fff; border-color:rgba(34,168,100,.28); color:var(--lemon-700); font-weight:600}
.ab-item b{font-variant-numeric:tabular-nums; font-weight:800}
.ab-item.quote{
  background:rgba(240,170,60,.1); border-color:rgba(240,170,60,.3);
  color:#8f6410; font-weight:600;
}
/* 还没报过价：做成"待办"的观感，而不是一个灰色的失败标记 */
.ab-item.quote.none{background:transparent; border-color:rgba(11,22,34,.12); color:var(--ink-400); font-weight:400}
.ab-btn{margin-left:auto; height:26px; padding:0 9px; font-size:11.8px; flex:0 0 auto}

/* ── 怎么联系的：单独一行并加小标签，和下面的"结果"分开 ── */
.fld{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.fld-lb{font-size:11.5px; color:var(--ink-400); font-weight:700; white-space:nowrap}

/* ── 「这次还报了价」：勾选块，可勾可不勾 ── */
.qact{
  margin-top:10px; padding:9px 11px; border-radius:11px;
  border:1px dashed rgba(11,22,34,.14); background:rgba(255,255,255,.45);
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.qact.on{border-style:solid; border-color:rgba(240,170,60,.45); background:rgba(240,170,60,.055)}
.qact-hd{display:flex; align-items:center; gap:8px; cursor:pointer; margin:0}
.qact-hd input{width:15px; height:15px; accent-color:var(--lemon-500); cursor:pointer; flex:0 0 auto}
.qact-hd b{font-size:12.6px; color:var(--ink-800); white-space:nowrap}
.qact-hd .muted{font-size:11.5px; line-height:1.4}
.qact-bd{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; margin-top:9px}
.qact-bd .f{flex:1 1 150px; max-width:210px}
.qact-bd .hintline{margin-top:0}

@media (max-width:820px){
  .act-bar{padding:6px 8px; gap:5px}
  .ab-item{font-size:11.2px; padding:2px 7px}
  .ab-btn{margin-left:0; width:100%}
  .qact-bd .f{flex:1 1 100%; max-width:none}
}

/* ══════════════════════════════════════════════════════════════
   筛选条手机端：条件在上、重置整行在下
   ══════════════════════════════════════════════════════════════
   ⚠️ 这段必须放在文件**末尾**。
   同一选择器（.filters .fmain）的媒体查询如果写在基础规则前面，
   会被后面的基础规则覆盖 —— 浏览器不看"媒体查询优先级更高"，
   只看"同一特异性下谁后写"。这是层叠最容易骗人的地方（避坑 F1 变种）。
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  .filters .frow{flex-wrap:wrap}
  .filters .fmain{flex:1 1 100%}
  .filters .f-actions{
    flex:1 1 100%; margin-left:0; margin-top:6px;
    height:34px; justify-content:center;
  }
}

/* ══════════════════════════════════════════════════════════════
   2026-10-18 · v6：最近跟进列 / 静止时长 / 重要信息层级
   ══════════════════════════════════════════════════════════════ */

/* ── 「最近跟进」单元格 ── */
.la{display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums}
.la-day{font-style:normal; font-size:12.4px; font-weight:700; color:var(--ink-800)}
.la-day.late{color:var(--red)}
.la-day.today{color:var(--amber)}
.la-rel{font-style:normal; font-size:11px; color:var(--ink-400)}
.la-sub{display:block; margin-top:2px; font-size:11.2px; color:var(--ink-500);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}

/* ── 详情阶段条：静止时长 ── */
.sb-idle{
  padding:2px 8px; border-radius:7px; font-size:11.5px; font-weight:600;
  background:rgba(15,30,45,.05); color:var(--ink-600); white-space:nowrap;
}

/* 交接单编辑态：等宽字体，方便对着 Markdown 改 */
.hand-edit{width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.7; white-space:pre; overflow:auto}
.hand-edit:focus{border-color:var(--lemon-400); box-shadow:0 0 0 3px rgba(34,168,100,.14)}

/* ══════════════════════════════════════════════════════════════
   图标系统（内联 SVG，见 icons.js）
   ══════════════════════════════════════════════════════════════ */
.i-defs{position:absolute;width:0;height:0;overflow:hidden}
.ic{
  width:1em; height:1em; flex:0 0 auto; vertical-align:-.14em;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
/* 图标跟着文字走：字号大图标就大，不用为每个尺寸写一条规则 */
.btn .ic, .chan .ic, .tab .ic{width:14px;height:14px}
.btn.icon .ic{width:15px;height:15px}
th .ic{width:12px;height:12px;opacity:.75}
.card-tab .ic{width:13px;height:13px;margin-right:5px;vertical-align:-2px}
.act-bar .ic, .sb-auto .ic{width:12px;height:12px;vertical-align:-2px}
.topbar .ic{width:15px;height:15px}
.chip .ic{width:13px;height:13px;margin-right:4px;vertical-align:-2px}

/* 稍后提醒 + 交接单状态 */
.snooze-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.5); border:1px dashed rgba(11,22,34,.12)}
.snooze-row .fld-lb{font-size:11.5px; color:var(--ink-400); font-weight:700; white-space:nowrap}
.snooze-row .qdate.on{background:var(--lemon-500); border-color:var(--lemon-600); color:#fff}
#dHandoff.done{color:var(--lemon-700); border-color:rgba(34,168,100,.4); background:rgba(34,168,100,.08)}
#dHandoff.done::after{content:'已交'; margin-left:4px; font-size:10.5px; font-weight:700}

/* 稍后提醒 + 交接单状态 */
.snooze-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px;
  padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.5); border:1px dashed rgba(11,22,34,.12)}
.snooze-row .fld-lb{font-size:11.5px; color:var(--ink-400); font-weight:700; white-space:nowrap}
.snooze-row .qdate.on{background:var(--lemon-500); border-color:var(--lemon-600); color:#fff}
#dHandoff.done{color:var(--lemon-700); border-color:rgba(34,168,100,.4); background:rgba(34,168,100,.08)}
#dHandoff.done::after{content:'已交'; margin-left:4px; font-size:10.5px; font-weight:700}

/* 合并客户：选主记录 */
.mg-pick{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.mg-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:12px 13px; border-radius:12px; text-align:left; cursor:pointer; font-family:inherit;
  background:rgba(255,255,255,.75); border:2px solid rgba(11,22,34,.08);
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.mg-card:hover{border-color:var(--lemon-400)}
.mg-card.on{border-color:var(--lemon-500); background:rgba(34,168,100,.07)}
.mg-radio{font-size:11px; font-weight:700; color:var(--ink-400); margin-bottom:3px}
.mg-card.on .mg-radio{color:var(--lemon-700)}
.mg-card b{font-size:13.5px; color:var(--ink-900)}
.mg-line{font-size:12px; color:var(--ink-600)}
.mg-line.muted{color:var(--ink-400); font-size:11.5px}
@media (max-width:600px){ .mg-pick{grid-template-columns:1fr} }

/* ── 金额列 ──
   以前金额只是业务列里的小标签（还是 <span class="tag quote">），
   金额为 0 时干脆不渲染 —— 于是"这单多少钱"在列表里根本看不见。
   现在独立成列：等宽数字 + 右对齐，扫一眼就能比大小。 */
.grid th.c-amt, .grid td.c-amt{text-align:right; white-space:nowrap}
.amt{font-family:var(--font-num); font-size:13px; font-weight:var(--fw-semibold); color:var(--ink-800); font-variant-numeric:tabular-nums;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.amt.won{color:#15803d}                 /* 成交额用绿色，和"跌绿"无关，是"落袋"语义 */
.amt-none{font-size:12px}

/* 手机号归属地提示：贴在输入框下方，小字、不抢注意力 */
.phone-attr{
  display:inline-flex; align-items:center; gap:4px; margin-top:2px;
  font-size:11.5px; line-height:1.6; color:var(--lemon-700);
  font-weight:600;
}
.phone-attr.unknown{color:var(--ink-400); font-weight:500}

/* ── 导入弹窗（粘贴 / 文件 两个方式）──
   老后台最好用的是"直接粘贴"，新系统之前只有上传文件 —— 补回来。 */
.imp-tabs{display:flex; gap:6px; margin:0 0 12px; border-bottom:1px solid var(--line); padding-bottom:0}
.imp-tab{padding:7px 14px; border:0; background:none; font:inherit; font-size:12.8px; font-weight:600;
  color:var(--ink-400); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px}
.imp-tab:hover{color:var(--ink-700)}
.imp-tab.on{color:var(--lemon-700); border-bottom-color:var(--lemon-500)}
.imp-text{width:100%; min-height:170px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12.4px; line-height:1.7; white-space:pre; overflow:auto; resize:vertical}
.imp-hint{margin-top:7px; font-size:12px; color:var(--ink-500)}
.imp-hint b{color:var(--ink-900)}

/* ── 认领公海 ── */
.pool-bar{display:flex; align-items:center; gap:14px; margin:10px 0 6px}
.pool-list{max-height:52vh; overflow:auto; display:grid; gap:5px; margin-top:4px}
.pool-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  border:1px solid var(--line); cursor:pointer}
.pool-row:hover{border-color:var(--lemon-300); background:rgba(34,168,100,.04)}
.pr-main{display:grid; gap:1px; min-width:110px}
.pr-main b{font-size:13px; color:var(--ink-900)}
.pr-main i{font-style:normal; font-size:11.4px; color:var(--ink-400)}
.pr-meta{margin-left:auto; font-size:12px; color:var(--ink-500); white-space:nowrap}

/* ── 重复客户扫描 ── */
.dd-bar{margin:8px 0 12px; font-size:12.8px; color:var(--ink-600)}
.dd-bar b{color:var(--ink-900)}
.dd-list{max-height:50vh; overflow:auto; display:grid; gap:11px}
.dd-group{border:1px solid var(--line); border-radius:11px; overflow:hidden}
.dd-hd{display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(234,88,12,.05);
  border-bottom:1px solid var(--line)}
.dd-hd b{font-size:12.8px; color:#7c2d12; flex:1; word-break:break-all}
.dd-row{display:grid; grid-template-columns:1.4fr 1.2fr .8fr .8fr 78px; gap:8px;
  padding:8px 12px; font-size:12.4px; align-items:center; border-top:1px solid var(--line-2, #f0f2f1)}
.dd-row:first-of-type{border-top:0}
.dd-row.keep{background:rgba(34,168,100,.05)}
.dd-nm{font-weight:600; color:var(--ink-900)}
.dd-k{color:var(--ink-500)}
.dd-keep{font-style:normal; font-size:11px; color:#15803d; font-weight:700; white-space:nowrap}

/* ── 高级筛选浮层里的「批量工具」── */
.fp-tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}
.fp-tools b{font-size:11.6px; color:var(--ink-400); font-weight:600; letter-spacing:.02em}

@media(max-width:640px){
  /* 重复客户那一行在手机上改成两行：名字+号码一行，其余一行 */
  .dd-row{grid-template-columns:1fr 1fr; row-gap:3px}
  .dd-row .dd-k:nth-of-type(3){display:none}
  .pool-row{flex-wrap:wrap}
  .pr-meta{margin-left:0; width:100%; white-space:normal}
}

/* ── 手机号 + 归属地 ──
   号码是主信息，归属地是小字辅助。上下两行放在表格单元格里，
   不至于把「联系方式」那一列撑宽，也一眼能扫出是不是本地号。 */
.ph{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.35; gap:1px}
.pa{font-style:normal; font-size:10.5px; color:var(--ink-400); font-weight:500;
  margin-left:4px; white-space:nowrap; letter-spacing:0}
.ph .pa{margin-left:0}
.pa[hidden]{display:none}
/* 详情头部的归属地跟着那一行文字的基线走 */
.dmeta .pa, #dMeta .pa{margin-left:4px; font-size:11px; color:var(--ink-500)}
/* 公海 / 去重 / 合并里的号码也带一条小字 */
.pr-meta .pa, .dd-k .pa, .mg-line .pa{display:inline}

/* ── 阶段进度条 ──
   整条流程摊开：已走过实心、当前深色高亮、未到低亮、不能跳的锁定。
   点节点直接改阶段（「推进到 X」按钮已经不需要了）。 */
.sf{margin:0 0 10px}
.sf-row{display:flex; align-items:stretch; overflow-x:auto; padding:2px 0 6px; scrollbar-width:thin}
.sf-n{flex:1 1 0; min-width:92px; padding:7px 10px; border:1px solid var(--line); border-radius:9px;
  background:#fff; text-align:left; cursor:pointer; display:grid; gap:1px; font:inherit;
  transition:background .12s,border-color .12s,box-shadow .12s}
.sf-n b{font-size:12.6px; color:var(--ink-800); font-weight:700; line-height:1.3}
.sf-n i{font-style:normal; font-size:10.4px; color:var(--ink-400); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sf-n:hover{border-color:var(--lemon-400); background:rgba(34,168,100,.05)}

/* 已走过 */
.sf-n.done{background:rgba(34,168,100,.07); border-color:rgba(34,168,100,.26)}
.sf-n.done b{color:#166534}
/* 当前：深底白字，最醒目 */
.sf-n.cur{background:#15803d; border-color:#15803d; box-shadow:0 8px 18px -10px rgba(21,128,61,.75); cursor:default}
.sf-n.cur b{color:#fff}
.sf-n.cur i{color:rgba(255,255,255,.78)}
/* 未到但可去：稍微虚一点，暗示"还没到但点得动" */
.sf-n:not(.done):not(.cur):not(.lock){border-style:dashed}
/* 不能跳：低亮 + 不允许点 */
.sf-n.lock{opacity:.42; cursor:not-allowed; border-style:dotted}
.sf-n.lock:hover{border-color:var(--line); background:#fff}

/* 终态：成交绿、流失红 */
.sf-n.fin.ok{border-color:rgba(34,168,100,.4)}
.sf-n.fin.ok b{color:#15803d}
.sf-n.fin.bad{border-color:rgba(185,28,28,.32)}
.sf-n.fin.bad b{color:#b91c1c}
.sf-n.fin.ok.cur{background:#15803d; border-color:#15803d}
.sf-n.fin.bad.cur{background:#b91c1c; border-color:#b91c1c; box-shadow:0 8px 18px -10px rgba(185,28,28,.7)}
.sf-n.fin.ok.cur b,.sf-n.fin.bad.cur b{color:#fff}
.sf-n.fin.ok.cur i,.sf-n.fin.bad.cur i{color:rgba(255,255,255,.78)}

/* 连接线 / 分叉 */
.sf-link{flex:0 0 16px; align-self:center; height:2px; background:var(--ink-200); border-radius:2px}
.sf-link.done{background:var(--lemon-500)}
.sf-split{flex:0 0 10px; align-self:center; height:2px;
  background:repeating-linear-gradient(90deg,var(--ink-300) 0 4px,transparent 4px 7px)}
.sf-edit{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 8px;
  padding:10px 12px; border-radius:9px; background:rgba(34,168,100,.05);
  border:1px solid rgba(34,168,100,.22)}
.sf-edit .se-label{font-size:12.4px; color:var(--ink-600); font-weight:600}
.sf-edit .input{max-width:150px; height:34px}
.sf-foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:11.4px; color:var(--ink-400)}
.sf-foot .sb-auto{color:var(--ink-400)}
.sf-foot .sb-idle{color:#b45309; font-weight:600}

@media(max-width:640px){
  /* 手机上节点只留标签，说明文字藏掉；整条可横向滑动 */
  .sf-n{min-width:78px; padding:6px 8px}
  .sf-n i{display:none}
  .sf-link{flex:0 0 10px}
}

/* ── 业务多选（chips）──
   48 个业务铺开太长：常用 6 个直接摆出来，其余收进「更多业务」。 */
.bz{display:grid; gap:7px}
.bz-row{display:flex; flex-wrap:wrap; gap:6px}
.bz-chip{
  padding:5px 11px; border-radius:8px; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:12.4px; color:var(--ink-700);
  cursor:pointer; white-space:nowrap; transition:all .12s;
}
.bz-chip:hover{border-color:var(--lemon-400); color:var(--lemon-700)}
.bz-chip.on{background:rgba(34,168,100,.12); border-color:var(--lemon-500);
  color:#14532d; font-weight:700}
.bz-chip.on::before{content:"✓ "; font-size:11px}
.bz-toggle{
  justify-self:start; padding:3px 8px; border:0; background:none; font:inherit;
  font-size:11.8px; color:var(--ink-500); cursor:pointer; text-decoration:underline;
  text-underline-offset:2px;
}
.bz-toggle:hover{color:var(--lemon-700)}
.bz-rest[hidden]{display:none}

/* 业务列里的「+N」 */
.tag.more{background:var(--ink-100); color:var(--ink-500); border-color:var(--line); font-weight:600}

/* ── 区域两级 ── */
.area2{display:grid; grid-template-columns:1fr 1fr; gap:7px}
@media(max-width:520px){
  /* 手机上两个下拉挤在一行会窄到看不清地名，改成上下两行 */
  .area2{grid-template-columns:1fr}
}

/* ── 资料卡：跨列 + 可搜索下拉 ──
   .full 以前没有任何样式，导致「要办什么」那排 chips 被塞进 160px 的格子，
   挤成一团、把相邻的格子撑变形（用户说的"占格"就是这个）。 */
.grid2 > .full{grid-column:1 / -1}

/* 可搜索下拉：行业 60 多项、区县十几项，纯 <select> 翻起来太慢 */
.ss{position:relative}
.ss .ss-inp{width:100%}
.ss .ss-pop{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40;
  max-height:224px; overflow:auto; padding:4px;
  background:#fff; border:1px solid var(--line); border-radius:9px;
  box-shadow:0 16px 36px -18px rgba(15,30,45,.4);
}
.ss .ss-pop[hidden]{display:none}
.ss .ss-opt{
  display:block; width:100%; text-align:left; padding:6px 9px; border:0; background:none;
  font:inherit; font-size:12.8px; color:var(--ink-800); border-radius:6px; cursor:pointer;
}
.ss .ss-opt:hover,.ss .ss-opt.on{background:rgba(34,168,100,.1); color:#14532d}
.ss .ss-opt .k{color:var(--ink-400); font-size:11px; margin-left:6px}
.ss .ss-empty{padding:10px; font-size:12px; color:var(--ink-400); text-align:center}

/* 区域两级：地州窄、区县宽 */
.area2{display:grid; grid-template-columns:130px 1fr; gap:7px}
@media(max-width:520px){
  .area2{grid-template-columns:1fr}
}

/* ── 阶段与来源：流式布局，不做"卡片套卡片" ──
   用户的原话是"内容可以多，但要简单"。
   所以：删掉区块底色和圆角，只用一条细线分段；时间线一行一件事。 */
.flow{padding:2px 0 6px}
.flow-src{margin:12px 0 0; font-size:12.4px; line-height:1.7; color:var(--ink-500)}
.flow-hd{margin:20px 0 6px; font-size:11.4px; font-weight:700; letter-spacing:.04em;
  color:var(--ink-400); text-transform:none}
.flow-hd b{color:var(--ink-800); font-size:12.4px}
.fl{list-style:none; margin:0; padding:0}
.fl li{display:grid; grid-template-columns:78px 46px 1fr; gap:9px; align-items:start;
  padding:9px 0; border-top:1px solid var(--line)}
.fl li:first-child{border-top:0; padding-top:2px}
.fl time{font-size:11.3px; color:var(--ink-400); font-variant-numeric:tabular-nums; padding-top:2px}
.fl-tag{font-size:10.5px; font-weight:700; padding:2px 0; border-radius:5px; text-align:center;
  background:var(--ink-100); color:var(--ink-600); white-space:nowrap}
.fl-tag.stage{background:rgba(34,168,100,.13); color:#166534}
.fl-tag.src{background:rgba(37,99,235,.1); color:#1d4ed8}
.fl-x{font-size:12.8px; color:var(--ink-800); line-height:1.62; min-width:0; word-break:break-word}
.fl-x i{font-style:normal; color:var(--ink-400); font-size:11.5px; margin-left:7px; white-space:nowrap}
.fl-x i.who::before{content:"· "}
.flow-empty{margin:18px 0 0; font-size:12.6px; line-height:1.7; color:var(--ink-400)}

/* 精简阶段条：只留阶段名，说明放进 title（hover 能看，不占地方） */
.sf-n i{display:none}
.sf-n{padding:7px 9px}
.sf-n b{font-size:12.2px}

/* 区域三级：省 / 市 / 区县 */
.area3{display:grid; grid-template-columns:80px 104px 1fr; gap:6px}
@media(max-width:520px){
  .area3{grid-template-columns:1fr 1fr; grid-auto-rows:auto}
  .area3 > :last-child{grid-column:1 / -1}
}

/* 推送面板：定时与数量 */
.nt-sched{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:4px 0 14px; padding:12px 14px; border-radius:10px;
  background:rgba(34,168,100,.045); border:1px solid rgba(34,168,100,.16);
}
.nt-sched-cell{display:inline-flex; align-items:center; gap:7px; font-size:12.6px}
.nt-sched .nt-time{height:30px}

/* 文章编辑器的 GEO 写作提示 */
.geo-tip{
  display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
  margin:0 0 14px; padding:10px 13px; border-radius:9px;
  background:rgba(34,168,100,.06); border:1px solid rgba(34,168,100,.18);
  font-size:12.3px; line-height:1.7; color:var(--ink-600);
}
.geo-tip b{color:var(--lemon-700); white-space:nowrap}

/* ── 跟进页顶部的电话号码 ──
   做成按钮：收起状态就能看到，点一下复制。
   以前号码只在"展开"后才出现，等于每次打电话都要先点开。 */
.fu-phone{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:12.5px; letter-spacing:.02em;
  padding:1px 7px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--phone-bg); color:var(--phone-fg); border:1px solid #d3e2fb;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.fu-phone:hover{background:#e0ebff; border-color:#b9d1f7}
.fu-phone:active{transform:scale(.97)}

/* 「更多 N 个」短语按钮：和普通短语区分开，不抢视觉 */
.notes-more{
  background:transparent; border:1px dashed var(--ink-200); color:var(--ink-500);
  font-weight:600;
}
.notes-more:hover{border-color:var(--lemon-400); color:var(--lemon-700)}