/* ============================================================
   来华留学销售工作台 · 销售侧日常使用界面（真实开发形态）
   与演示版的区别：为「每天用 8 小时」优化 —— 密度高、对比克制、
   交互全真（输入、筛选、排序、分页、校验、批量操作）
   配色：浅灰白底 + 单一石青绿主色，强调色只用于状态
   ============================================================ */
:root{
  --bg:#F7F8F9;
  --surface:#FFFFFF;
  --surface-2:#F2F4F4;
  --surface-3:#EAEEED;
  --line:#E3E7E7;
  --line-2:#D2D9D7;
  --ink:#16211F;
  --ink-2:#41504C;
  --ink-3:#6B7A76;
  --ink-4:#93A09C;

  --brand:#12655C;
  --brand-2:#0E4F48;
  --brand-3:#E9F1EF;
  --danger:#B4442E;   --danger-w:#FBEDEA;
  --warn:#A2761D;     --warn-w:#FAF3E4;
  --ok:#2F7D52;       --ok-w:#EAF4EE;
  --idle:#75837F;     --idle-w:#EFF1F1;

  --f:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",
     "PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --fm:"SF Mono","Cascadia Mono",Consolas,"Liberation Mono","PingFang SC","Microsoft YaHei",monospace;

  --r:3px;
  --e1:0 1px 2px rgba(22,33,31,.05);
  --e2:0 2px 4px rgba(22,33,31,.06),0 8px 20px -10px rgba(22,33,31,.18);
  --e3:0 4px 10px rgba(22,33,31,.08),0 18px 40px -16px rgba(22,33,31,.3);
  --ease:cubic-bezier(.2,.7,.4,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--f);font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--brand-3)}
:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CDD5D3;border:2px solid var(--bg);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#B6C0BD}
::-webkit-scrollbar-track{background:transparent}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ---------------- 骨架 ---------------- */
#app{display:grid;grid-template-columns:216px 1fr;grid-template-rows:52px 1fr;
  grid-template-areas:"nav top" "nav main";height:100%}

/* 左导航 */
.nav{grid-area:nav;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column}
.nav .brand{display:flex;align-items:center;gap:9px;padding:0 14px;height:52px;border-bottom:1px solid var(--line);flex:none}
.nav .brand .mk{width:26px;height:26px;background:var(--brand);color:#fff;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.nav .brand b{font-size:13.5px;letter-spacing:0;display:block;line-height:1.3}
.nav .brand small{font-size:10.5px;color:var(--ink-4);letter-spacing:.04em}
.nav .grp{font-size:10.5px;color:var(--ink-4);padding:14px 14px 5px;letter-spacing:.08em}
.nav a{display:flex;align-items:center;gap:9px;height:34px;padding:0 14px;font-size:13.5px;color:var(--ink-2);
  cursor:pointer;position:relative;transition:background .15s var(--ease),color .15s var(--ease)}
.nav a .ic{width:15px;text-align:center;font-size:13px;color:var(--ink-4);flex:none}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--brand-3);color:var(--brand-2);font-weight:600}
.nav a.on .ic{color:var(--brand)}
.nav a.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--brand)}
.nav a .n{margin-left:auto;font-family:var(--fm);font-size:11px;background:var(--danger);color:#fff;
  border-radius:9px;padding:0 6px;min-width:18px;text-align:center;line-height:17px}
.nav a .n.q{background:var(--surface-3);color:var(--ink-3)}
.nav .me{margin-top:auto;border-top:1px solid var(--line);padding:11px 14px;display:flex;align-items:center;gap:9px}
.nav .me .av{width:28px;height:28px;border-radius:50%;background:var(--brand-3);color:var(--brand-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.nav .me b{font-size:12.5px;display:block;line-height:1.3}
.nav .me small{font-size:11px;color:var(--ink-4)}

/* 顶栏 */
.top{grid-area:top;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px}
.top h1{font-size:16px;font-weight:600;letter-spacing:0}
.top h1 span{color:var(--ink-4);font-weight:400;font-size:12.5px;margin-left:9px}
.top .sp{flex:1}
.gsearch{position:relative;width:250px}
.gsearch input{width:100%;height:30px;padding:0 10px 0 30px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-2);font-size:13px}
.gsearch input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.gsearch .i{position:absolute;left:9px;top:6px;color:var(--ink-4);font-size:13px}
.gsearch kbd{position:absolute;right:7px;top:6px;font-family:var(--fm);font-size:10px;color:var(--ink-4);
  border:1px solid var(--line-2);border-radius:2px;padding:1px 4px;background:var(--surface)}
.iconbtn{width:30px;height:30px;border:1px solid transparent;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;color:var(--ink-2);position:relative;transition:.15s}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line)}
.iconbtn .dot{position:absolute;top:5px;right:5px;width:6px;height:6px;background:var(--danger);border-radius:50%;
  border:1.5px solid var(--surface)}

/* 通知面板 */
.pop{position:absolute;top:46px;right:12px;width:340px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--e3);z-index:60;display:none;overflow:hidden}
.pop.on{display:block}
.pop .ph{padding:10px 13px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:600;display:flex}
.pop .ph a{margin-left:auto;font-size:12px;color:var(--brand);font-weight:400;cursor:pointer}
.pop .it{padding:10px 13px;border-bottom:1px solid var(--line);display:flex;gap:10px;cursor:pointer}
.pop .it:hover{background:var(--surface-2)}
.pop .it:last-child{border-bottom:0}
.pop .it .bar{width:3px;border-radius:2px;flex:none;background:var(--line-2)}
.pop .it.r .bar{background:var(--danger)} .pop .it.w .bar{background:var(--warn)}
.pop .it .t{font-size:12.5px;line-height:1.5}
.pop .it .m{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.pop .it .tm{margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--ink-4);flex:none}

main{grid-area:main;overflow:hidden;position:relative}
.view{height:100%;overflow:hidden}
.page{height:100%;overflow-y:auto;padding:16px 20px 40px}
.page-in{max-width:1320px}

/* ---------------- 通用组件 ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--e1)}
.card>.hd{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card>.hd h3{font-size:13.5px;font-weight:600;letter-spacing:0}
.card>.hd .sp{flex:1}
.card>.bd{padding:14px}
.btn{height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);
  font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:.15s var(--ease);white-space:nowrap}
.btn:hover{border-color:var(--ink-4);background:var(--surface-2)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.gh{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.gh:hover{background:var(--surface-2)}
.btn.sm{height:26px;padding:0 9px;font-size:12.5px}
.btn.dz{color:var(--danger);border-color:#E6C7BF}
.btn.dz:hover{background:var(--danger-w)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn kbd{font-family:var(--fm);font-size:10px;opacity:.7;border:1px solid currentColor;border-radius:2px;padding:0 3px;margin-left:2px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 4px}
.tabs button{height:36px;padding:0 12px;font-size:13px;color:var(--ink-3);border-bottom:2px solid transparent;
  display:flex;align-items:center;gap:6px;transition:.15s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--brand-2);border-bottom-color:var(--brand);font-weight:600}
.tabs button .c{font-family:var(--fm);font-size:11px;background:var(--surface-3);color:var(--ink-3);border-radius:8px;padding:0 5px}
.tabs button.on .c{background:var(--brand-3);color:var(--brand-2)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:1px 7px;border-radius:2px;white-space:nowrap}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.ok{color:var(--ok);background:var(--ok-w)}
.tag.wa{color:var(--warn);background:var(--warn-w)}
.tag.da{color:var(--danger);background:var(--danger-w)}
.tag.id{color:var(--idle);background:var(--idle-w)}
.tag.br{color:var(--brand-2);background:var(--brand-3)}
.tag.pl::before{display:none}
.field{display:block;margin-bottom:11px}
.field label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:4px}
.field label i{font-style:normal;color:var(--danger);margin-left:2px}
.inp,select.inp,textarea.inp{width:100%;min-height:30px;padding:5px 9px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface);font-size:13px}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-3)}
.inp.err{border-color:var(--danger);background:var(--danger-w)}
.errmsg{font-size:11.5px;color:var(--danger);margin-top:3px;display:none}
.field.bad .errmsg{display:block}
.hintrow{font-size:11.5px;color:var(--ink-4);margin-top:8px}
table.dt{font-size:13px}
table.dt th{text-align:left;font-size:11.5px;color:var(--ink-3);font-weight:500;padding:8px 10px;
  border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;position:sticky;top:0;z-index:2}
table.dt th.s{cursor:pointer;user-select:none}
table.dt th.s:hover{color:var(--ink)}
table.dt th .ar{font-size:9px;color:var(--brand);margin-left:3px}
table.dt td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.dt tbody tr:hover td{background:var(--surface-2)}
table.dt tbody tr.sel td{background:var(--brand-3)}
table.dt td.num{font-family:var(--fm);font-variant-numeric:tabular-nums}
.ck{width:14px;height:14px;border:1px solid var(--line-2);border-radius:2px;background:var(--surface);
  display:inline-block;position:relative;cursor:pointer;vertical-align:-2px}
.ck.on{background:var(--brand);border-color:var(--brand)}
.ck.on::after{content:"✓";position:absolute;left:1.5px;top:-3px;color:#fff;font-size:11px}
.pager{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.pager .sp{flex:1}
.pager button{width:26px;height:26px;border:1px solid var(--line-2);border-radius:var(--r);font-size:12px}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager button[disabled]{opacity:.4;cursor:not-allowed}
.batch{display:none;align-items:center;gap:10px;padding:8px 14px;background:var(--brand-3);
  border-bottom:1px solid var(--line);font-size:13px;color:var(--brand-2)}
.batch.on{display:flex}
.batch .sp{flex:1}
.empty{padding:56px 20px;text-align:center;color:var(--ink-4)}
.empty .ic{font-size:26px;opacity:.5}
.empty b{display:block;font-size:14px;color:var(--ink-2);margin:10px 0 5px;font-weight:600}
.empty p{font-size:12.5px;line-height:1.7}
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:2px;height:12px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px}
.kpi .l{font-size:11.5px;color:var(--ink-3)}
.kpi b{display:block;font-family:var(--fm);font-size:22px;font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.02em}
.kpi b.da{color:var(--danger)} .kpi b.wa{color:var(--warn)} .kpi b.ok{color:var(--ok)}
.kpi .d{font-size:11px;color:var(--ink-4);margin-top:2px}

/* ---------------- 收件箱 ---------------- */
.inbox{display:grid;grid-template-columns:292px 1fr 300px;height:100%}
.col{min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.col+.col{border-left:1px solid var(--line)}
.lsearch{flex:none;padding:9px 11px;border-bottom:1px solid var(--line);display:flex;gap:7px}
.lsearch input{flex:1;height:28px;padding:0 9px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface-2);font-size:12.5px}
.lsearch input:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.clist{flex:1;overflow-y:auto}
.ci{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;transition:background .12s}
.ci:hover{background:var(--surface-2)}
.ci.on{background:var(--brand-3)}
.ci.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brand)}
.ci .r1{display:flex;align-items:center;gap:6px}
.ci .nm{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci.unread .nm::after{content:"";display:inline-block;width:6px;height:6px;background:var(--danger);border-radius:50%;margin-left:6px;vertical-align:1px}
.ci .ch{font-family:var(--fm);font-size:10px;color:var(--ink-4);border:1px solid var(--line-2);border-radius:2px;padding:0 3px;flex:none}
.ci .tm{margin-left:auto;font-family:var(--fm);font-size:10.5px;color:var(--ink-4);flex:none}
.ci .msg{font-size:12.5px;color:var(--ink-3);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .r3{display:flex;align-items:center;gap:6px;margin-top:6px}
.ci .sla{font-family:var(--fm);font-size:10.5px;color:var(--danger);background:var(--danger-w);border-radius:2px;padding:0 5px}
.ci .sla.calm{color:var(--ink-3);background:var(--surface-3)}
.ci .cnt{margin-left:auto;font-family:var(--fm);font-size:10.5px;background:var(--danger);color:#fff;border-radius:8px;padding:0 5px;min-width:16px;text-align:center}

.chd{flex:none;border-bottom:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:10px}
.chd .av{width:30px;height:30px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.chd b{font-size:14px;display:block;line-height:1.35}
.chd small{font-size:11.5px;color:var(--ink-4)}
.chd .sp{flex:1}
.banner{flex:none;display:none;align-items:flex-start;gap:10px;padding:9px 14px;background:var(--danger-w);
  border-bottom:1px solid #EBD3CC;font-size:12.5px;color:#7E3021;line-height:1.55}
.banner.on{display:flex}
.banner b{display:block}
.banner .sp{flex:1}
.thread{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.thread::before{content:"";margin-top:auto}
.day{align-self:center;font-size:11px;color:var(--ink-4);background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:1px 10px;margin:4px 0}
.b{max-width:70%;padding:8px 11px;border-radius:8px;font-size:13.5px;line-height:1.62;position:relative}
.b.in{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:2px}
.b.out{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:2px}
.b.out.ai{background:var(--brand-2)}
.b .mt{font-size:10.5px;font-family:var(--fm);opacity:.6;margin-top:4px;display:flex;gap:6px;align-items:center}
.b.in .mt{color:var(--ink-4)}
.b .by{font-size:10.5px;opacity:.75;margin-bottom:3px}
.sysline{align-self:center;font-size:11.5px;color:var(--ink-4);text-align:center;max-width:80%;line-height:1.6}
.sysline em{font-style:normal;color:var(--warn)}

.sug{flex:none;border-top:1px solid var(--line);background:var(--warn-w);padding:9px 14px;display:flex;gap:10px;align-items:flex-start}
.sug .lb{font-size:11px;color:var(--warn);font-weight:600;flex:none;padding-top:2px}
.sug .tx{flex:1;font-size:12.5px;line-height:1.6;color:#5D4711}
.sug .btns{flex:none;display:flex;gap:6px}
.composer{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:10px 14px 11px}
.composer textarea{width:100%;min-height:58px;max-height:150px;resize:vertical;padding:8px 10px;border:1px solid var(--line-2);
  border-radius:var(--r);font-size:13.5px;line-height:1.6}
.composer textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-3)}
.composer .row{display:flex;align-items:center;gap:8px;margin-top:8px}
.composer .row .sp{flex:1}
.composer .cnt{font-family:var(--fm);font-size:11px;color:var(--ink-4)}
.locked{padding:12px 14px;background:var(--surface-2);border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);display:flex;gap:10px;align-items:center}

.side .sec{border-bottom:1px solid var(--line)}
.side .sh{padding:9px 13px;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;font-weight:600}
.side .sh .ar{margin-left:auto;color:var(--ink-4);font-size:10px;transition:transform .2s}
.side .sec.open .sh .ar{transform:rotate(90deg)}
.side .sb{display:none;padding:0 13px 12px}
.side .sec.open .sb{display:block}
.kv{display:grid;grid-template-columns:74px 1fr;gap:8px;padding:5px 0;font-size:12.5px;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3)}
.kv .v{color:var(--ink)}
.kv .v.dim{color:var(--ink-4);font-style:italic}
.mini-sch{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;margin-bottom:7px;font-size:12.5px}
.mini-sch b{font-size:13px}
.mini-sch .m{color:var(--ink-3);font-size:12px;margin-top:2px}
.mini-sch .src{font-size:10.5px;color:var(--ink-4);margin-top:5px;border-top:1px dashed var(--line);padding-top:5px;line-height:1.5}
.tl{position:relative;padding-left:15px}
.tl .it{position:relative;padding:6px 0;font-size:12.5px;line-height:1.55}
.tl .it::before{content:"";position:absolute;left:-15px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.tl .it.now::before{background:var(--brand)}
.tl::after{content:"";position:absolute;left:-12.5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl .it small{display:block;color:var(--ink-4);font-size:11px;font-family:var(--fm);margin-top:1px}

/* ---------------- 客户详情 ---------------- */
.chead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.chead .av{width:44px;height:44px;border-radius:50%;background:var(--brand-3);color:var(--brand-2);display:flex;
  align-items:center;justify-content:center;font-size:16px;font-weight:600;flex:none}
.chead h2{font-size:18px;font-weight:600;letter-spacing:0}
.chead .sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.chead .acts{margin-left:auto;display:flex;gap:7px;flex:none}
.editable{display:inline-flex;align-items:center;gap:5px;cursor:text}
.editable .pen{opacity:0;font-size:10px;color:var(--ink-4);transition:.15s}
.editable:hover .pen{opacity:1}
.editing{border:1px solid var(--brand);border-radius:2px;padding:1px 4px;min-width:80px;background:var(--surface)}

/* ---------------- 任务 ---------------- */
.tk{display:grid;grid-template-columns:22px 1fr auto;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:center}
.tk:last-child{border-bottom:0}
.tk:hover{background:var(--surface-2)}
.tk.done{opacity:.5}
.tk.done .t1{text-decoration:line-through}
.tk .t1{font-size:13.5px}
.tk .t2{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.55}
.tk .rt{display:flex;align-items:center;gap:7px;flex:none}
.tk .due{font-family:var(--fm);font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border-radius:2px;padding:1px 6px}
.tk .due.late{color:var(--danger);background:var(--danger-w)}
.tk .due.today{color:var(--warn);background:var(--warn-w)}

/* ---------------- 知识库查询 ---------------- */
.kbar{display:flex;gap:8px;margin-bottom:12px}
.kbar .g{position:relative;flex:1}
.kbar .g input{width:100%;height:34px;padding:0 12px 0 32px;border:1px solid var(--line-2);border-radius:var(--r);font-size:14px;background:var(--surface)}
.kbar .g input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-3)}
.kbar .g .i{position:absolute;left:10px;top:8px;color:var(--ink-4)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters select{height:30px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);font-size:12.5px;background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:12.5px;border:1px solid var(--line-2);border-radius:14px;padding:3px 11px;cursor:pointer;background:var(--surface);color:var(--ink-2);transition:.15s}
.chip:hover{border-color:var(--brand);color:var(--brand-2)}
.res{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:8px;padding:11px 13px;cursor:pointer;transition:.15s}
.res:hover{border-color:var(--brand);box-shadow:var(--e1)}
.res .r1{display:flex;align-items:center;gap:8px}
.res .r1 b{font-size:14px}
.res .r1 .sc{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--ink-4)}
.res .f{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 14px;margin-top:8px;font-size:12.5px}
.res .f span{color:var(--ink-3)}
.res .f b{color:var(--ink);font-weight:600}
.res .src{font-size:11px;color:var(--ink-4);margin-top:8px;border-top:1px dashed var(--line);padding-top:7px}

/* 抽屉 */
.mask{position:fixed;inset:0;background:rgba(22,33,31,.28);z-index:70;opacity:0;pointer-events:none;transition:.2s}
.mask.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--surface);z-index:71;
  box-shadow:var(--e3);transform:translateX(100%);transition:transform .26s var(--ease);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer .dh{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex:none}
.drawer .dh b{font-size:14.5px}
.drawer .dh .sp{flex:1}
.drawer .db{flex:1;overflow-y:auto;padding:16px}
.drawer .df{flex:none;padding:11px 16px;border-top:1px solid var(--line);display:flex;gap:8px}
.drawer .df .sp{flex:1}

/* toast */
#tst{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:90;pointer-events:none}
#tst div{background:var(--ink);color:#fff;font-size:13px;padding:9px 15px;border-radius:var(--r);box-shadow:var(--e3);
  animation:ti .25s var(--ease) both;max-width:520px;line-height:1.5}
#tst div b{color:#9FD8CB}
@keyframes ti{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:1240px){
  .inbox{grid-template-columns:262px 1fr}
  .inbox .side{display:none}
}
@media(max-width:1020px){
  #app{grid-template-columns:52px 1fr}
  .nav .brand b,.nav .brand small,.nav a .lb,.nav .grp,.nav .me b,.nav .me small{display:none}
  .nav a{justify-content:center;padding:0}
  .inbox{grid-template-columns:1fr}
  .inbox .col:first-child{display:none}
}

/* ---- 修正：窄列里的页签不换行，横向滚动 ---- */
.col .tabs{flex:none;padding:0 4px;overflow-x:auto;scrollbar-width:none}
.col .tabs::-webkit-scrollbar{display:none}
.col .tabs button{height:34px;padding:0 9px;font-size:12.5px;white-space:nowrap;flex:none}
.col .tabs button .c{font-size:10.5px;padding:0 4px}
/* ---- 修正：宽屏下气泡与线程限宽，一行不超过约 40 字 ---- */
.thread{align-items:stretch}
.b{max-width:min(72%,620px)}
.b.in{margin-right:auto}
.b.out{margin-left:auto}
.sysline{max-width:min(80%,720px);margin:0 auto}
.day{margin-left:auto;margin-right:auto}


/* ---------------- 新增页面 ---------------- */
.two{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
@media(max-width:1100px){.two{grid-template-columns:1fr}}
.act-row{display:grid;grid-template-columns:8px 1fr auto;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line);align-items:center}
.act-row:last-child{border-bottom:0}
.act-row:hover{background:var(--surface-2)}
.act-row .bar{width:3px;height:32px;border-radius:2px;background:var(--line-2)}
.act-row.da .bar{background:var(--danger)} .act-row.wa .bar{background:var(--warn)}
.act-row .t1{font-size:13.5px}
.act-row .t2{font-size:12px;color:var(--ink-3);margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:8px}
.bars i{flex:1;background:var(--brand);opacity:.85;border-radius:2px 2px 0 0;transition:height .5s var(--ease)}
.bars i.now{background:var(--brand-2);opacity:1}
.bx{display:flex;gap:5px;font-family:var(--fm);font-size:10px;color:var(--ink-4);margin-top:4px}
.bx span{flex:1;text-align:center}
/* 开关 */
.sw{width:36px;height:20px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;cursor:pointer;flex:none;transition:.2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:var(--e1);transition:transform .2s var(--ease)}
.sw.on{background:var(--brand);border-color:var(--brand)}
.sw.on::after{transform:translateX(16px)}
/* 材料矩阵 */
.mx td.c{text-align:center;width:76px}
.mx .yes{color:var(--ok)} .mx .no{color:var(--ink-4)}
.mx td.gap{font-family:var(--fm)}
.mx td.gap.hot{color:var(--danger);font-weight:600}
/* 三校生成器 */
.gen{display:grid;grid-template-columns:300px 1fr;gap:12px}
@media(max-width:1100px){.gen{grid-template-columns:1fr}}
.slot{border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;margin-bottom:9px;background:var(--surface);position:relative}
.slot.lock{border-color:var(--brand);background:var(--brand-3)}
.slot .r1{display:flex;align-items:center;gap:8px}
.slot .r1 b{font-size:14.5px}
.slot .r1 .no{font-family:var(--fm);font-size:11px;color:var(--ink-4)}
.slot .m{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.slot .f{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:4px 14px;margin-top:8px;font-size:12.5px}
.slot .f b{font-weight:600}
.slot .rk{font-size:12px;color:var(--warn);margin-top:6px}
.slot .src{font-size:11px;color:var(--ink-4);margin-top:7px;border-top:1px dashed var(--line);padding-top:6px;line-height:1.5}
.slot .ops{position:absolute;top:10px;right:10px;display:flex;gap:5px}
/* 提交表单 */
.preview{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;font-size:12.5px;line-height:1.75}
.preview .row{display:grid;grid-template-columns:92px 1fr;gap:8px;padding:3px 0}
.preview .row .k{color:var(--ink-3)}
.miss{color:var(--danger)}
.snip{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:8px;background:var(--surface)}
.snip .r1{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.snip .r1 b{font-size:13.5px}
.snip .x{font-size:13px;line-height:1.7;color:var(--ink-2);background:var(--surface-2);border-radius:var(--r);padding:9px 11px}
.snip .ops{margin-left:auto;display:flex;gap:6px}
.rl{display:grid;gap:6px}
.rl div{font-size:12.5px;color:var(--danger);display:flex;gap:7px;align-items:flex-start;line-height:1.6}
.rl div::before{content:"⊘";flex:none;opacity:.7}

/* 超宽屏：内容居中并放宽，避免顶在左上角 */
.page-in{max-width:1680px;margin:0 auto}

/* ============ 新增组件：接管包 / 字段来源 / 资料矛盾 / 发送失败 ============ */
.kv2{display:grid;grid-template-columns:74px 1fr;gap:8px;padding:7px 0;font-size:12.5px;border-bottom:1px dashed var(--line)}
.kv2:last-child{border-bottom:0}
.kv2 .k{color:var(--ink-3)}
.kv2 .v{color:var(--ink)}
.kv2 .v.dim{color:var(--ink-4);font-style:italic}
.kv2 .v em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-4);margin-top:2px;letter-spacing:.02em}
.conf{background:var(--warn-w);border:1px solid #EBDCB8;border-radius:var(--r);padding:9px 11px;font-size:12px;
  line-height:1.65;color:#6B4F12;margin-bottom:10px}
.pk{border:1px solid var(--line);border-radius:var(--r);margin-bottom:7px;overflow:hidden;background:var(--surface)}
.pk .ph2{background:var(--surface-2);padding:6px 10px;font-size:11px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.pk .pb{padding:8px 10px;font-size:12.5px;line-height:1.65}
.pk.key{border-color:#CFE0DC}
.pk.key .ph2{background:var(--brand-3);color:var(--brand-2)}
.b.fail{opacity:.75;border:1px solid #E6C7BF}
.b .fx{color:#FFD9D0}
.failbar{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.25);font-size:11.5px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.b.out .failbar .btn{background:rgba(255,255,255,.92);border-color:transparent;color:var(--danger);height:24px}
.b.out .failbar .btn.gh{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* ============ 美观：圆角、层次、微动效 ============ */
:root{--r:6px}
.card{border-radius:8px;border-color:#E7EBEA}
.card:hover{border-color:#DCE2E1}
.kpi{border-radius:8px;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.kpi:hover{border-color:#CFE0DC;transform:translateY(-1px)}
.kpi b{letter-spacing:-.02em}
.spark{display:block;margin-top:6px;overflow:visible}
.spark polyline{fill:none;stroke:var(--brand);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.spark circle{fill:var(--brand)}
/* 导航：整块圆角高亮，取消左侧竖条 */
.nav a{margin:0 8px;border-radius:6px;height:32px;padding:0 10px;width:calc(100% - 16px)}
.nav a.on::before{display:none}
.nav a.on{background:var(--brand-3);box-shadow:inset 0 0 0 1px rgba(18,101,92,.12)}
.nav .grp{padding:15px 18px 5px;letter-spacing:.1em;font-size:10px;text-transform:none}
/* 头像上色 */
.av.c0{background:#E6F0EE;color:#12655C}.av.c1{background:#F3ECE2;color:#8A6A34}
.av.c2{background:#E9EEF4;color:#3D5A76}.av.c3{background:#F2EAEC;color:#8A4256}
.av.c4{background:#EAF1E9;color:#3F6B45}
/* 会话列表：hover 左侧主色条 */
.ci{border-left:2px solid transparent;padding-left:10px}
.ci:hover{border-left-color:#CFE0DC}
.ci.on{border-left-color:var(--brand)}
.ci.on::before{display:none}
/* 气泡精修 */
.b{border-radius:12px;box-shadow:0 1px 1px rgba(22,33,31,.04)}
.b.in{border-bottom-left-radius:4px}
.b.out{border-bottom-right-radius:4px;background:linear-gradient(165deg,#166F65,#0E5049)}
.b.out.ai{background:linear-gradient(165deg,#12655C,#0C453F)}
.b .mt{opacity:0;transition:opacity .18s}
.b:hover .mt{opacity:.62}
.b.in:hover .mt{opacity:.7}
.b .by{opacity:.8}
.day{background:var(--surface-2);border-color:transparent;color:var(--ink-4)}
/* 表格 hover 主色条 */
table.dt tbody tr td:first-child{position:relative}
table.dt tbody tr:hover td:first-child::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--brand);border-radius:2px}
table.dt th{background:#FAFBFB;font-weight:600;letter-spacing:.03em}
/* 行内操作 hover 才显 */
table.dt tbody tr [data-urge],.tk .rt .btn.gh{opacity:.35;transition:opacity .15s}
table.dt tbody tr:hover [data-urge],.tk:hover .rt .btn.gh{opacity:1}
/* 按钮按下反馈 */
.btn:active{transform:translateY(.5px)}
.btn.pri{box-shadow:0 1px 2px rgba(18,101,92,.25)}
/* 空态线条图形 */
.empty .ic{font-size:0;display:block;margin:0 auto 4px;width:46px;height:46px;border:1.5px dashed var(--line-2);
  border-radius:50%;position:relative;opacity:.9}
.empty .ic::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--line-2);
  transform:translate(-50%,-50%) rotate(-30deg)}
/* 骨架更柔 */
.skel{height:13px;border-radius:4px}
/* 抽屉与弹层圆角 */
.pop{border-radius:8px}
.drawer{border-top-left-radius:10px;border-bottom-left-radius:10px}
#tst div{border-radius:8px}
/* 顶栏搜索聚焦放大 */
.gsearch input{transition:width .18s var(--ease),background .18s,border-color .18s}
.gsearch input:focus{box-shadow:0 0 0 3px var(--brand-3)}
/* 分隔线更淡 */
:root{--line:#E8ECEB}

/* 修复：flex/grid 子项默认 min-height:auto，消息一多中栏就撑破视口 */
.inbox>.col{min-height:0}
.col.mid{min-height:0}
.thread{min-height:0}
.clist{min-height:0}
.col.side{overflow-y:auto;min-height:0}

/* 工作台里时间是要看的，常显但压淡；hover 再提亮 */
.b .mt{opacity:.45}
.b:hover .mt{opacity:.75}


/* ============ 右栏改页签：一次只看一段，不再堆成一条竖流 ============ */
.inbox{grid-template-columns:292px 1fr 344px}
@media(max-width:1400px){.inbox{grid-template-columns:268px 1fr 316px}}
.col.side{display:flex;flex-direction:column;overflow:hidden}
.stabs{flex:none;display:flex;border-bottom:1px solid var(--line);background:var(--surface-2);padding:0 4px}
.stabs button{flex:1;height:38px;font-size:12.5px;color:var(--ink-3);position:relative;
  display:flex;align-items:center;justify-content:center;gap:5px;border-bottom:2px solid transparent;transition:.15s}
.stabs button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.stabs button.on{color:var(--brand-2);font-weight:600;background:var(--surface);border-bottom-color:var(--brand)}
.stabs button .c{font-family:var(--fm);font-size:10.5px;color:var(--ink-4);background:var(--surface-3);
  border-radius:8px;padding:0 5px;line-height:15px}
.stabs button.on .c{background:var(--brand-3);color:var(--brand-2)}
.stabs button[data-dim]{color:var(--ink-4)}
.stabs button .dot{width:5px;height:5px;border-radius:50%;background:var(--danger);position:absolute;top:7px;right:9px}
.sbody{flex:1;overflow-y:auto;min-height:0;padding:12px 14px 24px}

/* 资料：来源小字更轻，未确认项标黄 */
.kv2{grid-template-columns:66px 1fr;padding:8px 0;border-bottom:1px solid var(--line)}
.kv2 .v em{font-size:10px;color:#A3AEAA;letter-spacing:0;margin-top:3px}
.kv2.w .v{color:#8A6A34}
.kv2.w .v em{color:#B39154}
.conf{margin-bottom:12px;border-radius:6px}
.conf b{display:block;margin-bottom:3px;font-size:12.5px}

/* 接管包：轻标题 + 序号，卡片之间留白 */
.packnote{font-size:11.5px;color:var(--ink-4);margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.pk{margin-bottom:9px;border-radius:6px;box-shadow:none;border-color:#E8ECEB}
.pk .ph2{background:transparent;border-bottom:1px dashed var(--line);padding:7px 11px 6px;font-size:11px;
  color:var(--ink-3);display:flex;align-items:center;gap:7px}
.pk .ph2 .no{font-family:var(--fm);font-size:10px;color:#fff;background:var(--ink-4);border-radius:3px;padding:0 4px;line-height:15px}
.pk.key{border-color:#CFE0DC;background:#FBFDFC}
.pk.key .ph2{color:var(--brand-2);border-bottom-color:#DCE8E5}
.pk.key .ph2 .no{background:var(--brand)}
.pk .pb{padding:9px 11px;font-size:12.5px;line-height:1.7}

/* 推荐卡与状态记录在页签内的留白 */
.sbody .mini-sch{margin-bottom:9px;border-radius:6px}
.sbody .tl{padding-left:16px}
.sbody .hintrow{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}