/* 客户跟进 · 沿用矩阵工作台的「钴蓝·薄荷奶」（Kevin 2026-10-20 12 选 1），同一套 token 和间距刻度。
   玻璃只在顶栏；列表和详情是近不透明卡片；不吸顶表头。 */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --bg:#F5F9FF;--ink:#17191D;--mute:#6B7079;--line:#D5E2FB;--btn-line:#9CC0F6;
  --p:#1F6FEB;--p-deep:#1B5FCA;--p-soft:#E3ECFD;--p-ink:#154EA4;
  --q:#5CC8B0;--q-soft:#E8F7F3;--q-ink:#2F7566;
  --danger:#D6322B;--danger-soft:#FADAD8;--ok:#1F8A4C;--ok-soft:#DCEEE3;--warn:#8A5800;--warn-soft:#FBEFD6;
  --field1:rgba(31,111,235,.16);--field2:rgba(92,200,176,.14);
  --glass:rgba(255,255,255,.72);--card:#fff;--r:14px;--r-s:9px;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--p) transparent}
::selection{background:var(--p-soft);color:var(--p-ink)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;
  background-image:radial-gradient(900px 560px at 92% -8%,var(--field1),transparent 70%),radial-gradient(520px 360px at 2% 100%,var(--field2),transparent 72%);background-attachment:fixed}
a{color:var(--p-ink)}
[hidden]{display:none!important}
.small{font-size:12px}.muted{color:var(--mute)}.bad{color:var(--danger)}.grow{flex:1}

header{position:sticky;top:0;z-index:5;background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 1px 0 var(--line),inset 0 1px 0 #fff;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);min-height:56px}
header strong{font-size:15px;display:flex;align-items:center;gap:var(--s2);margin-right:var(--s2)}
header strong::before{content:"";width:20px;height:20px;border-radius:6px;background:linear-gradient(180deg,var(--p),var(--p-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#q{width:240px}

input,select,textarea,button,.filebtn{font:inherit;color:inherit}
input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:var(--r-s);padding:0 var(--s3);height:34px;min-width:0}
textarea{height:auto;min-height:64px;padding:var(--s2) var(--s3);width:100%;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--p);outline-offset:-1px;border-color:transparent}
button,.filebtn{border:1px solid var(--btn-line);background:#fff;border-radius:var(--r-s);height:34px;padding:0 var(--s3);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1);white-space:nowrap}
:where(button,.filebtn):hover{background:var(--p-soft)}
button:focus-visible,.filebtn:focus-within{outline:2px solid var(--p);outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
button.primary{background:linear-gradient(180deg,var(--p),var(--p-deep));color:#fff;border-color:var(--p-deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
button.primary:hover{background:var(--p-deep)}
button.ghost{border-color:transparent;background:transparent}
button.ghost:hover{background:var(--p-soft)}

.stagebar{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s4) 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;height:32px;padding:0 var(--s3);display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer}
.chip b{font-variant-numeric:tabular-nums}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}
.chip.due{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}
.chip.due.on{background:var(--warn);color:#fff}

main{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--s4);padding:var(--s3) var(--s4) var(--s6);align-items:start}
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line);cursor:pointer;align-items:center}
.row:first-child{border-top:0}
.row:hover{background:#F8FBFF}
.row.sel{background:var(--p-soft)}
.row .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .sub{font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .rt{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1)}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:999px;font-size:12px;background:var(--p-soft);color:var(--p-ink);white-space:nowrap}
.pill.todo{background:#EEF1F5;color:var(--mute)}.pill.won{background:var(--ok-soft);color:var(--ok)}.pill.lost{background:#EEF1F5;color:var(--mute);text-decoration:line-through}
.pill.trial,.pill.met{background:var(--q-soft);color:var(--q-ink)}
.pill.cn{background:var(--q-soft);color:var(--q-ink);margin-left:var(--s1)}
.duetag{font-size:12px;color:var(--warn)}
.list .empty{padding:var(--s5) var(--s4)}

.detail{position:sticky;top:72px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);max-height:calc(100vh - 88px);overflow:auto}
.detail .empty{padding:var(--s5) 0;text-align:center}
.detail h2{margin:0;font-size:18px;line-height:1.3}
.detail h3{margin:var(--s5) 0 var(--s2);font-size:13px;color:var(--mute);font-weight:600}
.kv{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s1) var(--s3);font-size:13px}
.kv>span:nth-child(odd){color:var(--mute)}
.kv a,.kv span{overflow-wrap:anywhere}
.copy{border:0;background:none;height:auto;padding:0 var(--s1);color:var(--p-ink);font-size:12px}
.form{display:grid;gap:var(--s2)}
.form .line{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.form .line>input[type=text]{flex:1}
.seg{display:inline-flex;flex-wrap:wrap;gap:var(--s1)}
.seg button{height:30px;padding:0 var(--s3)}
.seg button.on{background:var(--p);color:#fff;border-color:var(--p)}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.hist li{border-left:2px solid var(--line);padding:0 0 0 var(--s3);font-size:13px}
.hist .meta{font-size:12px;color:var(--mute)}
.find{background:#F8FBFF;border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s3);font-size:13px;display:grid;gap:var(--s2)}
.find label{display:flex;gap:var(--s2);align-items:flex-start}
.find input[type=checkbox]{height:auto;margin-top:3px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
#login{min-height:100vh;display:grid;place-items:center;padding:var(--s4)}
.login{width:min(360px,100%);display:grid;gap:var(--s3)}
.login h1{margin:0 0 var(--s2);font-size:20px}
label{display:grid;gap:var(--s1);font-size:13px}
dialog{border:0;padding:0;background:transparent}
dialog::backdrop{background:rgba(23,25,29,.25)}
dialog .card{width:min(420px,92vw);display:grid;gap:var(--s3)}
dialog h2{margin:0;font-size:17px}
dialog .row{display:flex;justify-content:flex-end;gap:var(--s2);border:0;padding:0;cursor:default}
#toast{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);background:var(--ink);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r-s);opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw}
#toast.show{opacity:1}

@media (max-width:900px){
  main{grid-template-columns:minmax(0,1fr)}
  .detail{position:static;max-height:none}
  #q{width:100%;order:9}
}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}
.warn{color:var(--warn)}
.form.mail input#mSubject{width:100%}
.form.mail label{display:inline-flex;align-items:center;gap:var(--s1);margin-right:var(--s3)}
.maildlg{width:min(680px,calc(100vw - 32px))}
.maildlg .card{width:auto;display:flex;flex-direction:column;gap:var(--s3)}
.maildlg .line{display:flex;gap:var(--s2);align-items:center}
.mailtext{white-space:pre-wrap;word-break:break-word;font:inherit;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s3);margin:0;max-height:46vh;overflow:auto}
.aiNotes{display:grid;gap:var(--s1);background:var(--warn-soft);border-radius:var(--r-s);padding:var(--s2) var(--s3)}
.pill.hi{background:var(--danger-soft);color:var(--danger);margin-right:var(--s1)}
.pill.lo{background:#EEF0F3;color:var(--mute);margin-right:var(--s1)}
.filters{padding:var(--s3) var(--s4) 0;display:grid;gap:var(--s2)}
.filters .stagebar{padding:0}
.chip.flag{border-style:dashed}
.chip.flag.on{border-style:solid}
.chip.ghost{border-color:transparent;background:none;color:var(--p-ink)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;height:34px;display:inline-flex;align-items:center;padding:0 var(--s3);border:1px solid var(--btn-line);border-radius:var(--r-s);background:#fff}
.menu summary::-webkit-details-marker{display:none}
.menubox{position:absolute;right:0;top:40px;z-index:10;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);display:grid;gap:var(--s1);min-width:180px;box-shadow:0 8px 24px rgba(23,25,29,.12)}
.menubox button,.menubox .filebtn{justify-content:flex-start;border-color:transparent}
.btnlike{display:inline-flex;align-items:center;height:34px;padding:0 var(--s3);border-radius:var(--r-s);text-decoration:none}
.btnlike.primary{background:linear-gradient(180deg,var(--p),var(--p-deep));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tag{font-size:12px;color:var(--mute);margin-right:var(--s2)}
.tag.in{color:var(--danger);font-weight:600}
.line.top{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s3)}
.detail .line{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.detail .line>input[type=text]{flex:1}
.next{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center}
.next .nextval{min-width:150px;font-size:13px;margin-right:var(--s2)}
.next button{height:30px;padding:0 var(--s2)}
.next button.on{background:var(--p);color:#fff;border-color:var(--p)}
.next .custom{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 var(--s2);border:1px solid var(--btn-line);border-radius:var(--r-s);font-size:14px;cursor:pointer;overflow:hidden}
.next .custom input{position:absolute;inset:0;opacity:0;cursor:pointer;height:100%;width:100%}
.lbl{width:32px;flex:none}
.form.mail select{flex:1 1 0;min-width:0;width:0}
.replying{background:var(--q-soft);color:var(--q-ink);border-radius:var(--r-s);padding:var(--s2) var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.mails{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.mails li{border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s2) var(--s3)}
.mails li.in{border-left:3px solid var(--danger)}
.mails li.out{border-left:3px solid var(--q)}
.mails summary{cursor:pointer;display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap}
.mails summary b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mails .dir{font-size:12px;color:var(--mute)}
.mails .mailtext{margin:var(--s2) 0;max-height:240px}
@media (min-width:901px){main{grid-template-columns:minmax(280px,1fr) 12px minmax(380px,var(--detail-w,520px));gap:0 var(--s1)}}
#splitter{align-self:stretch;cursor:col-resize;position:relative;border-radius:999px;touch-action:none}
#splitter::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line);border-radius:2px;transition:background .15s}
#splitter:hover::after,#splitter.drag::after,#splitter:focus-visible::after{background:var(--p);width:3px}
#splitter:focus-visible{outline:none}
body.dragging{cursor:col-resize;user-select:none}
@media (max-width:900px){#splitter{display:none}}
.pill.uni{background:var(--ok-soft);color:var(--ok);margin-left:var(--s1)}