/* ===== DESIGN TOKENS ===== */
:root{
  /* 色板:中性(近白底+纯白卡+细线,层次靠留白与字阶,不靠投影渐变) */
  --bg:#f7f7f8; --card:#ffffff; --faint:#f4f4f6;
  --line:#e9eaee; --line-strong:#d8dade;
  --txt:#16181d; --sub:#5f6673; --gray:#9aa1ad;
  /* 色板:主色与语义色(降饱和压深一档,保 WCAG AA) */
  --blue:#3358e4; --blue-deep:#2543b8; --blue-soft:#eef1fd;
  --red:#d33030;  --red-soft:#fbeeee;  --line-red:#f0c4c1;
  --orange:#d9480f; --orange-soft:#fbf0e9; --line-orange:#ecd3ba;
  --amber:#9a6700;  --amber-soft:#faf5e6;
  --green:#1f883d;  --green-soft:#ecf6ee; --line-green:#bcdcc4;
  --gold:#8a6d1f;   --gold-soft:#faf8ef;  --line-gold:#e8dfc0; --gold-bar:#cdb04a;
  --spill:#6d3bc4;        /* S/A 级客户 pill */
  --topbar:#20305a;       /* 顶栏深藏蓝(品牌基因,比纯黑温和) */
  --code-bg:#14161c; --code-fg:#4dd4c6; --code-sub:#7d8590; /* 终端风代码块 */
  --ph-bg:#0d1526; --ph-fg:#8ba3c7;     /* 附件占位 */
  /* 头像兜底色板(首字圆底) */
  --av1:#e8590c; --av2:#5c7cfa; --av3:#0c8599; --av4:#7048e8;
  --av5:#2f9e44; --av6:#d6336c; --av7:#b98300; --av8:#7a1f1f;
  /* 9 态状态色阶:蓝→靛→紫=流转前段(等待上游);橙/琥珀=需人行动;
     绿=唯一推进态;玫红=等客户;青=收尾核验;灰=终态。
     pill/卡片色条/流程链/时间线圆点 四处共用,禁止兜底灰 */
  --s1:#2b5fd9; --s1-soft:#edf2fc;  /* 待接单 */
  --s2:#d9480f; --s2-soft:#fcf0e9;  /* 待补充信息 */
  --s3:#5757c9; --s3-soft:#efeffa;  /* 待流转 */
  --s4:#8138d6; --s4-soft:#f5eefc;  /* 待部门分派 */
  --s5:#9a6700; --s5-soft:#faf4e2;  /* 已分派待确认 */
  --s6:#1f883d; --s6-soft:#ebf5ee;  /* 处理中 */
  --s7:#c02866; --s7-soft:#fceef4;  /* 待客户反馈 */
  --s8:#0e7a8d; --s8-soft:#e9f5f7;  /* 待关闭确认 */
  --s9:#6e7781; --s9-soft:#f0f1f3;  /* 已关闭 */
  /* 字阶 */
  --fs-xs:11px; --fs-s:12px; --fs-m:13px; --fs-b:14px;
  --fs-t:15px; --fs-h:18px; --fs-q:20px; --fs-big:28px; --fs-hero:36px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:Georgia,"Songti SC","STSong","SimSun",serif; /* 仅客户原话使用 */
  /* 间距 / 圆角 / 阴影三档 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:40px;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-full:999px;
  --sh-1:0 1px 2px rgba(20,22,28,.04);
  --sh-2:0 4px 14px rgba(20,22,28,.07);
  --sh-3:0 16px 40px rgba(20,22,28,.18);
}

/* ===== BASE / RESET ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--txt);
  font:var(--fs-b)/1.6 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;font-variant-numeric:tabular-nums;
}
a{color:var(--blue);text-decoration:none}
button{font:inherit;cursor:pointer}
.page{max-width:1200px;margin:0 auto;padding:var(--sp-4) var(--sp-3) 96px}
@media(min-width:1024px){.page{padding:var(--sp-5) var(--sp-5) var(--sp-6)}}
.sec{margin:0 0 var(--sp-6)}
.sec-head{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-3);padding:0 2px}
.sec-head h2{font-size:var(--fs-t);font-weight:700;margin:0;letter-spacing:.3px}
.sec-head .cnt{font:600 12px/1 var(--mono);color:var(--gray)}
.sec-head .cnt.hot{color:var(--card);background:var(--red);border-radius:var(--r-full);padding:3px 8px}
.sec-head::after{content:"";flex:1;border-top:1px solid var(--line)}
.sec-head .op{order:9}
.footline{margin-top:var(--sp-6);text-align:center;font-size:12px;color:var(--gray)}
.footline a{color:var(--gray);text-decoration:underline}

/* ===== 顶栏 topbar ===== */
.topbar{background:var(--topbar);color:#fff;height:52px;display:flex;align-items:center;gap:14px;padding:0 14px;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand .logo{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--topbar);display:grid;place-items:center;font-weight:800;font-size:13px}
.brand .name{font-size:13px;font-weight:600;letter-spacing:1px;white-space:nowrap;color:rgba(255,255,255,.92)}
.tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none;align-self:stretch;align-items:stretch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;color:rgba(255,255,255,.55);padding:0 12px;font-size:13px;white-space:nowrap;display:flex;align-items:center;border-bottom:2px solid transparent;border-top:2px solid transparent}
.tab:hover{color:rgba(255,255,255,.85)}
.tab.on{color:#fff;font-weight:600;border-bottom-color:#fff}
.topbar .user{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8)}
.topbar .user .out{color:rgba(255,255,255,.45);font-size:12px;background:none;border:0;padding:4px;text-decoration:none}
.topbar .user .out:hover{color:#fff}
@media(max-width:640px){.brand .name{display:none}}

/* ===== 工单卡 card(左状态色条 / hover / 时间压力chip;桌面双列) ===== */
.grid{display:grid;gap:8px}
@media(min-width:1024px){.grid{grid-template-columns:1fr 1fr;gap:10px}}
.tk{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px 11px 17px;cursor:pointer;display:block;color:inherit;transition:border-color .12s,box-shadow .12s}
.tk::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--tkc,var(--gray))}
.tk:hover{border-color:var(--line-strong);box-shadow:var(--sh-2)}
.tk.hot{border-color:var(--line-red)}
.tk-r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tk-id{font:600 12px/1 var(--mono);color:var(--gray);letter-spacing:.3px}
.tk-t{font-size:14px;font-weight:600;margin:6px 0 4px;line-height:1.45}
.tk-meta{font-size:11.5px;color:var(--gray);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tchip{margin-left:auto;flex:none;font:600 11px/1 var(--mono);padding:4px 7px;border-radius:5px;background:var(--faint);color:var(--sub)}
.tchip.warn{background:var(--amber-soft);color:var(--amber)}
.tchip.over{background:var(--red);color:#fff}

/* ===== pill 与 flag ===== */
.pill{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 inherit;padding:3px 8px;border-radius:var(--r-full);white-space:nowrap}
/* 状态 pill 默认「色点+着色字+极浅底」;实底 sdN 仅用于流程链当前节点等强调处 */
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.st1{background:var(--s1-soft);color:var(--s1)}.st2{background:var(--s2-soft);color:var(--s2)}
.st3{background:var(--s3-soft);color:var(--s3)}.st4{background:var(--s4-soft);color:var(--s4)}
.st5{background:var(--s5-soft);color:var(--s5)}.st6{background:var(--s6-soft);color:var(--s6)}
.st7{background:var(--s7-soft);color:var(--s7)}.st8{background:var(--s8-soft);color:var(--s8)}
.st9{background:var(--s9-soft);color:var(--s9)}
.sd1{background:var(--s1);color:#fff}.sd2{background:var(--s2);color:#fff}.sd3{background:var(--s3);color:#fff}
.sd4{background:var(--s4);color:#fff}.sd5{background:var(--s5);color:#fff}.sd6{background:var(--s6);color:#fff}
.sd7{background:var(--s7);color:#fff}.sd8{background:var(--s8);color:#fff}.sd9{background:var(--s9);color:#fff}
/* 优先级:只有 P0 实底红(全站唯一"放下手头事"信号),P1/P2 靠明度差,色弱可辨 */
.p0{background:var(--red);color:#fff;font-weight:800}
.p1{color:var(--orange);background:var(--orange-soft)}
.p2{color:var(--gray);background:var(--faint)}
/* flag:描边红=属性告警;实底红=次数型累犯 */
.flag{background:transparent;color:var(--red);border:1px solid var(--line-red);font-weight:600}
.flag.solid{background:var(--red);color:#fff;border-color:var(--red)}
.cpill{background:var(--spill);color:#fff;font-weight:700;letter-spacing:.5px}
.urge{background:var(--orange);color:#fff;font-weight:700}
.blA{background:var(--blue-soft);color:var(--blue);font-weight:600}
.blB{background:var(--green-soft);color:var(--green);font-weight:600}
.blC{background:var(--s4-soft);color:var(--s4);font-weight:600}
.prod{background:var(--faint);color:var(--sub)}

/* ===== 人名 chip(头像圆+姓名,可点直达飞书单聊;无头像首字圆底兜底) ===== */
.pchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);padding:3px 10px 3px 3px;font-size:12px;font-weight:500;color:var(--txt);cursor:pointer}
.pchip:hover{border-color:var(--txt)}
.av{width:21px;height:21px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;background:var(--avc,var(--av2));font-style:normal}
.av.lg{width:34px;height:34px;font-size:14px}
/* 卡片 meta 行内的人名:浅底小胶囊 */
.mwho{display:inline-flex;align-items:center;gap:5px}
.mwho .av{width:16px;height:16px;font-size:9px}
.mchip{display:inline-flex;align-items:center;gap:4px;background:var(--faint);border-radius:var(--r-full);padding:2px 8px 2px 2px;color:var(--sub);font-weight:500}
/* 清单行(异常/超期)内的人名:去 chip 化,固定列宽对齐 */
.xrow .pchip{border:0;background:none;padding:0;font-size:12px;color:var(--sub);gap:5px}
.xrow .pchip .av{width:18px;height:18px;font-size:9px}

/* ===== SOP 提示条 / 红色警示条 ===== */
.sop{background:var(--gold-soft);border-left:2px solid var(--gold-bar);color:var(--gold);padding:7px 12px;font-size:12px;margin:0 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.alertbar{background:var(--card);border:1px solid var(--line-red);border-left:3px solid var(--red);color:var(--red);border-radius:var(--r-m);padding:10px 14px;margin-bottom:var(--sp-5);display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;cursor:pointer}
.alertbar:hover{background:var(--red-soft)}
.alertbar .n{background:var(--red);color:#fff;border-radius:var(--r-full);padding:1px 8px;font-weight:700;flex:none;font-size:12px}
.alertbar .go{margin-left:auto;flex:none;opacity:.7}

/* ===== 详情五分区(左列单卡,分区靠细线+眉标+留白;右栏 400px sticky) ===== */
.d-wrap{display:grid;gap:var(--sp-4)}
@media(min-width:1024px){
  .d-wrap{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:var(--sp-5)}
  .d-side{position:sticky;top:72px;display:grid;gap:var(--sp-4)}
}
.d-main{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--sp-4);min-width:0;display:grid;gap:0}
.d-main>*+*{border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-3)}
.d-main .d-head,.d-main .zone{border:0;border-radius:0;padding:0;background:none}
.d-id-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.d-id{font:700 14px/1 var(--mono);letter-spacing:.5px;color:var(--sub)}
.d-flex{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 24px;justify-content:space-between}
.d-flex .d-title{flex:1 1 320px}
.d-title{font-size:19px;font-weight:700;line-height:1.35;margin:8px 0 2px;letter-spacing:-.2px}
@media(min-width:1024px){.d-title{font-size:22px}}
.clock{display:flex;align-items:baseline;gap:8px;margin-top:8px;flex:none}
.clock b{font:700 24px/1 var(--mono);letter-spacing:-.5px}
.clock small{font-size:12px;color:var(--gray)}
.clock.ok b{color:var(--green)}.clock.warn b{color:var(--amber)}.clock.over b{color:var(--red)}
.nextbar{margin-top:10px;border-top:1px solid var(--line);color:var(--blue-deep);padding:8px 0 0;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nextbar b{color:var(--gray);font-weight:600;font-size:11px;letter-spacing:1px;flex:none}
.nextbar .btn{margin-left:auto}
.scriptcard{background:var(--gold-soft);border:1px solid var(--line-gold);border-radius:var(--r-m);padding:10px 12px}
.scriptcard h4{margin:0 0 6px;font-size:11px;letter-spacing:1px;color:var(--gold);display:flex;align-items:center;gap:6px}
.scriptcard h4 .btn{margin-left:auto;letter-spacing:0}
.scriptcard p{margin:0;font-size:14px;line-height:1.75}
.zone{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--sp-4)}
.z-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--gray);margin:0 0 10px}
.z-head::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--zc,var(--line-strong))}
.z-case{--zc:var(--blue)}.z-work{--zc:var(--green)}.z-rel{--zc:var(--s4)}
.hr{border:0;border-top:1px solid var(--line);margin:10px 0}
/* 客户原话:全页唯一衬线时刻,视觉焦点不靠底色靠字体切换 */
.quote{border-left:3px solid var(--txt);padding:2px 0 2px 16px;margin:10px 0;font-family:var(--serif);font-size:var(--fs-q);line-height:1.7;font-weight:500;letter-spacing:.2px}
.quote::before{content:"「";color:var(--gray)}
.quote::after{content:"」";color:var(--gray)}
/* 附件全宽直显(桌面双列,仍是大图直显+灯箱,不用缩略图) */
.att{margin:10px 0;display:grid;gap:10px}
@media(min-width:1024px){.att{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.att figure{margin:0;display:grid;gap:5px;align-content:start}
.att img,.att video,.att .ph{width:100%;max-width:640px;border-radius:var(--r-s);border:1px solid var(--line);display:block;cursor:zoom-in}
.att .cap{font-size:11px;color:var(--gray)}
.code{background:var(--code-bg);color:var(--code-fg);font:12px/1.6 var(--mono);border-radius:var(--r-s);padding:10px 12px;position:relative;cursor:copy;overflow-x:auto;white-space:pre;margin:0}
.code:hover::after{content:"点击复制";position:absolute;top:8px;right:10px;font-size:11px;color:var(--code-sub)}
.next-act{font-size:15px;font-weight:700;display:flex;gap:8px;align-items:baseline}
.next-act::before{content:"▶";color:var(--green);font-size:11px}
.blocker{border:1px solid var(--line-red);border-left:3px solid var(--red);color:var(--red);border-radius:0 var(--r-s) var(--r-s) 0;padding:7px 11px;font-size:12.5px;margin-top:8px}
.waiting{border:1px solid var(--line-orange);border-left:3px solid var(--orange);color:var(--orange);border-radius:0 var(--r-s) var(--r-s) 0;padding:7px 11px;font-size:12.5px;margin-top:8px}
.blocker b,.waiting b{font-size:11px;letter-spacing:1px;margin-right:6px}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:8px}
.role h5{margin:0 0 4px;font-size:11px;color:var(--gray);font-weight:500}
.sub-tk{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-s);padding:6px 10px;font-size:12.5px;background:var(--faint)}
.sub-tk .tk-id{flex:none}
.metaline{font-size:11.5px;color:var(--gray);display:flex;gap:4px 12px;flex-wrap:wrap;padding:0 2px}
.side-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--sp-4)}
.side-card h3{margin:0 0 var(--sp-3);font-size:13px;letter-spacing:.5px}
.fb{border-top:1px solid var(--line);padding:7px 0;font-size:12.5px}
.fb:first-of-type{border-top:0;padding-top:0}
.fb-top{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gray)}
.fb p{margin:4px 0;font-size:12.5px}
.fb .pchip{padding:1px 8px 1px 2px;font-size:11px;margin-left:2px}
.fb .pchip .av{width:16px;height:16px;font-size:9px}

/* ===== 弹窗 sheet 与表单字段 ===== */
.sheet-mask{position:fixed;inset:0;background:rgba(10,11,14,.45);z-index:150;display:grid;align-items:end;justify-items:center}
@media(min-width:1024px){.sheet-mask{align-items:center}}
.sheet{background:var(--card);border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:var(--sp-4)}
@media(min-width:1024px){.sheet{border-radius:16px}}
.sheet h3{margin:0 0 2px;font-size:16px}
.sheet .sub{font:600 12px var(--mono);color:var(--gray);margin:0 0 var(--sp-3)}
.ctx{background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;font-size:12.5px;color:var(--sub);margin:0 0 var(--sp-3)}
.field{margin:0 0 var(--sp-4)}
.field label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field label em{color:var(--red);font-style:normal}
.input{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;font:inherit;background:var(--card);color:var(--txt)}
.input:focus{outline:0;border-color:var(--txt);box-shadow:0 0 0 3px rgba(20,22,28,.08)}
.input.err{border-color:var(--red);animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.errmsg{color:var(--red);font-size:12px;margin-top:4px}
.filechip{display:inline-flex;align-items:center;gap:6px;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:5px 9px;font-size:12px}
.filechip button{border:0;background:none;color:var(--gray);padding:0 2px}
.filechip button:hover{color:var(--red)}
.drop{border:1.5px dashed var(--line-strong);border-radius:10px;padding:20px 14px;text-align:center;color:var(--gray);font-size:12.5px;cursor:pointer}
.drop:hover{border-color:var(--blue);color:var(--blue)}
.drop b{display:block;color:var(--sub);font-size:13px;margin-bottom:2px}
/* 分段选择 seg(部门按钮带负载角标;同组件承担时间档切换) */
.segs{display:inline-flex;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:2px;gap:2px}
.seg{border:0;background:none;border-radius:5px;padding:5px 13px;font-size:13px;color:var(--sub)}
.seg:hover{color:var(--txt)}
.seg.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--sh-1)}
.seg .dl{font:700 10px/1 var(--mono);background:var(--red);color:#fff;border-radius:var(--r-full);padding:2px 5px;margin-left:5px;font-style:normal;vertical-align:1px}
/* toast:成功蓝底/失败红底 */
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:200;background:var(--blue);color:#fff;border-radius:var(--r-full);padding:9px 18px;font-size:13px;font-weight:500;box-shadow:var(--sh-3);animation:toastIn .25s}
.toast.bad{background:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}}

/* ===== 统计卡 / 部门对比表 ===== */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:640px){.stats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.stats{grid-template-columns:repeat(5,1fr);gap:10px}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:12px 14px 14px;position:relative;overflow:hidden}
.stat .num{font:700 var(--fs-big)/1.1 var(--mono);letter-spacing:-1px}
.stat .lbl{font-size:12px;color:var(--sub);margin-top:3px;display:flex;align-items:center;gap:6px}
.stat .lbl i{width:7px;height:7px;border-radius:50%;background:var(--sc,transparent);flex:none;font-style:normal}
.stat.bad{border-color:var(--line-red)}
.stat.bad .num{color:var(--red)}
/* 纯 CSS 比例条(卡底 3px) */
.gauge{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--faint)}
.gauge i{display:block;height:100%;width:var(--w,0%);background:var(--sc,var(--blue))}
/* 纯 CSS 状态分布堆叠条 */
.stack{display:flex;height:10px;border-radius:var(--r-full);overflow:hidden;gap:2px}
.stack i{display:block;height:100%;border-radius:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:11.5px;color:var(--sub)}
.legend b{font:700 12px var(--mono);color:var(--txt)}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}
.kudos{background:var(--card);border:1px solid var(--line-green);border-left:3px solid var(--green);border-radius:var(--r-m);padding:12px 14px}
.kudos h4{margin:0 0 6px;color:var(--green);font-size:13px}
.improve{background:var(--card);border:1px solid var(--line-red);border-left:3px solid var(--red);border-radius:var(--r-m);padding:12px 14px}
.improve h4{margin:0 0 6px;color:var(--red);font-size:13px}
/* 异常清单行:人名固定列宽、时间 chip 定宽居中,两列对齐成竖线 */
.xrow{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;font-size:13px;cursor:pointer;flex-wrap:wrap}
.xrow:hover{border-color:var(--line-strong);box-shadow:var(--sh-1)}
.xrow .tk-id{flex:none}
.xrow .who{margin-left:auto;min-width:92px;justify-content:flex-start}
.xrow .who~.tchip{margin-left:0}
.xrow .tchip{min-width:74px;display:inline-flex;justify-content:center}
.tablewrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.table th{font-weight:600;color:var(--gray);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.table td{padding:8px 10px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table td.bad{color:var(--red);font-weight:700}
.table td.num,.table th.num{text-align:right;font-family:var(--mono)}

/* ===== 时间线 ===== */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 8px 16px;font-size:12.5px;line-height:1.6}
.tl li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--tlc,var(--gray));z-index:1}
.tl li::after{content:"";position:absolute;left:4.5px;top:16px;bottom:-2px;border-left:1px solid var(--line)}
.tl li:last-child::after{display:none}
.tl time{font:600 11px/1 var(--mono);color:var(--gray);margin-right:6px}
.tl .ev{display:inline;margin:0}
.tl .ev b{font-weight:600}
.tl .pchip{padding:1px 8px 1px 2px;font-size:11px;margin-left:2px}
.tl .pchip .av{width:16px;height:16px;font-size:9px}
/* 流程 pill 链(导览页,横向滚动) */
.chain{display:flex;gap:6px;overflow-x:auto;padding:4px 2px;align-items:center;scrollbar-width:thin}
.chain .pill{flex:none;font-size:12px;padding:6px 12px}
.chain .arr{color:var(--line-strong);flex:none;font-size:11px}

/* ===== 按钮体系(橙催办永远第一颗/蓝主/红危险/灰ghost/绿协同群 + disabled) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:14px;padding:9px 16px;transition:filter .1s,transform .05s,background .1s;text-decoration:none}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-urge{background:var(--orange);color:#fff}
.btn-urge:hover{filter:brightness(1.07)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-danger{background:var(--card);color:var(--red);border-color:var(--line-red)}
.btn-danger:hover{background:var(--red-soft)}
.btn-ghost{background:var(--card);color:var(--sub);border-color:var(--line-strong)}
.btn-ghost:hover{color:var(--txt);border-color:var(--gray)}
.btn-green{background:var(--card);color:var(--green);border-color:var(--line-green)}
.btn-green:hover{background:var(--green-soft)}
.btn-lg{font-size:15px;padding:12px 20px;border-radius:10px}
.btn-sm{font-size:12px;padding:4px 10px;border-radius:6px}
/* 动作区:移动端催办/主动作/协同群整行,次要二列;桌面横排 */
.actions{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.actions .btn-urge,.actions .btn-primary,.actions .btn-green{grid-column:1/-1}
.actions .hint{grid-column:1/-1;font-size:11.5px;color:var(--gray);align-self:center}
.xtra{display:contents}
.morebtn{grid-column:1/-1}
@media(max-width:1023px){.xtra.closed{display:none}}
@media(min-width:1024px){
  .actions{display:flex;flex-wrap:wrap}
  .actions .btn-urge,.actions .btn-primary,.actions .btn-green{grid-column:auto}
  .morebtn{display:none}
}

/* ===== 空状态与成功页 ===== */
.empty{text-align:center;color:var(--gray);font-size:13px;padding:28px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-m)}
.empty b{display:block;font-size:14px;color:var(--sub);margin-bottom:2px}
.success{text-align:center;padding:40px 16px 24px}
.success .bignum{font:800 var(--fs-hero)/1 var(--mono);letter-spacing:1px;margin:14px 0 4px}
.success .ok-ring{width:56px;height:56px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:26px;margin:0 auto}

/* ============================================================
   ===== APP ADAPTER：既有 JS 结构仍在用的类名，映射到新设计 =====
   ============================================================ */
/* 布局壳 */
#view{max-width:1200px;margin:0 auto;padding:var(--sp-4) var(--sp-3) 96px}
@media(min-width:1024px){#view{padding:var(--sp-5) var(--sp-5) var(--sp-6)}}
#topbar{background:var(--topbar);color:#fff;height:52px;display:flex;align-items:center;gap:14px;padding:0 14px;position:sticky;top:0;z-index:50}
#tabs{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none;align-self:stretch;align-items:stretch}
#tabs::-webkit-scrollbar{display:none}
#tabs button{flex:none;background:none;border:0;color:rgba(255,255,255,.55);padding:0 12px;font-size:13px;white-space:nowrap;display:flex;align-items:center;border-bottom:2px solid transparent;border-top:2px solid transparent}
#tabs button:hover{color:rgba(255,255,255,.85)}
#tabs button.on{color:#fff;font-weight:600;border-bottom-color:#fff}
#who{flex:none;display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8)}
#who a{color:rgba(255,255,255,.45);font-size:13px;cursor:pointer;padding:4px}
#who a:hover{color:#fff}
#viewas{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:3px 6px;font-size:12px;outline:none}
#viewas option{color:var(--txt)}
.loading{color:var(--gray);text-align:center;padding:56px 0;font-size:13px}
.linkrow{margin-top:var(--sp-6);text-align:center;font-size:12px;color:var(--gray)}
.linkrow a{color:var(--gray);text-decoration:underline}
/* 旧按钮别名 → 新按钮体系 */
.btn.primary{background:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-deep)}
.btn.danger{background:var(--card);color:var(--red);border-color:var(--line-red)}
.btn.danger:hover{background:var(--red-soft)}
.btn.ghost{background:var(--card);color:var(--sub);border-color:var(--line-strong)}
.btn.ghost:hover{color:var(--txt);border-color:var(--gray)}
.btn.warn{background:var(--orange);color:#fff}
.btn.warn:hover{filter:brightness(1.07)}
.btn:not(.primary):not(.danger):not(.ghost):not(.warn):not([class*="btn-"]){background:var(--card);color:var(--sub);border-color:var(--line-strong)}
.btn-mini{font-size:12px;padding:4px 10px;border-radius:6px;margin-left:6px}
/* toast（元素 id 版） */
#toast{display:none;position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:200;background:var(--blue);color:#fff;border-radius:var(--r-full);padding:9px 18px;font-size:13px;font-weight:500;box-shadow:var(--sh-3);animation:toastIn .25s}
/* 弹窗（JS 生成 .mask > .sheet） */
.mask{position:fixed;inset:0;background:rgba(10,11,14,.45);z-index:150;display:grid;align-items:end;justify-items:center}
@media(min-width:1024px){.mask{align-items:center}}
.mask .sheet{background:var(--card);border-radius:16px 16px 0 0;width:100%;max-width:560px;max-height:88vh;overflow:auto;padding:var(--sp-4)}
@media(min-width:1024px){.mask .sheet{border-radius:16px}}
.sheet h3{margin:0 0 10px;font-size:16px}
.sheet .rule{background:var(--gold-soft);border-left:2px solid var(--gold-bar);color:var(--gold);padding:7px 12px;font-size:12px;margin:0 0 var(--sp-3);border-radius:0 var(--r-s) var(--r-s) 0}
.sheet .foot{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--sp-3)}
.sheet .foot .btn{min-width:96px}
/* 灯箱 */
.mask.lightbox{background:rgba(8,9,12,.88);align-items:center;cursor:zoom-out;display:flex;flex-direction:column;justify-content:center;gap:10px}
.mask.lightbox img,.mask.lightbox video{max-width:94vw;max-height:82vh;border-radius:var(--r-s)}
.lb-name{color:rgba(255,255,255,.75);font-size:12px}
/* 表单字段（JS 生成 .fld） */
.fld{margin:0 0 var(--sp-4)}
.fld label{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.fld .req{color:var(--red)}
.fld .hint{font-size:11.5px;color:var(--gray);margin-top:4px}
.fld input[type="text"],.fld input[type="datetime-local"],.fld textarea{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:9px 12px;font:inherit;background:var(--card);color:var(--txt)}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--txt);box-shadow:0 0 0 3px rgba(20,22,28,.08)}
.fld textarea{min-height:64px;resize:vertical}
.fld-err input,.fld-err textarea,.fld-err .seg{border-color:var(--red)!important;animation:shake .3s}
.fld-err{animation:shake .3s}
.fs-btn{border:0;background:none;color:var(--gray);font-size:13px;float:right;padding:0 4px}
.fld-fs{position:fixed;inset:0;z-index:180;background:var(--card);padding:var(--sp-4);margin:0}
.fld-fs textarea{height:calc(100vh - 120px)!important;max-height:none}
.sheet.has-fs{overflow:hidden}
/* seg 容器（JS：.seg > button） */
.fld .seg{display:flex;flex-wrap:wrap;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:2px;gap:2px}
.fld .seg button{border:0;background:none;border-radius:5px;padding:5px 13px;font-size:13px;color:var(--sub)}
.fld .seg button:hover{color:var(--txt)}
.fld .seg button.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--sh-1)}
/* 人员/客户搜索下拉 */
.sugg{background:var(--card);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--sh-2);margin-top:4px;max-height:250px;overflow:auto}
.sugg>div{padding:8px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px}
.sugg>div:hover{background:var(--faint)}
.s-ava{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none}
.s-ava-t{display:inline-grid;place-items:center;background:var(--av2);color:#fff;font-size:11px;font-weight:700;font-style:normal}
.load-tag{margin-left:auto;font-size:11px;color:var(--green);background:var(--green-soft);border-radius:var(--r-full);padding:1px 8px;flex:none}
.load-tag.hot{color:var(--red);background:var(--red-soft);font-weight:700}
input.picked{border-color:var(--green)!important}
/* 文件池 */
.file-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.f-chip{display:inline-flex;align-items:center;gap:6px;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:5px 9px;font-size:12px}
.f-chip i{font-style:normal;color:var(--gray);font-size:11px}
.f-chip b{cursor:pointer;color:var(--gray);font-weight:400;padding:0 2px}
.f-chip b:hover{color:var(--red)}
/* 原始信息回显卡 */
.ctx{background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;font-size:12.5px;color:var(--sub);margin:0 0 var(--sp-3)}
.ctx-t{font-weight:700;color:var(--txt);margin-bottom:5px;font-size:12px}
.ctx-row{margin:3px 0}
.ctx-q{font-family:var(--serif);font-size:15px;color:var(--txt);border-left:3px solid var(--txt);padding-left:10px;margin:7px 0;line-height:1.65}
/* 附件直显（工单详情/回显卡内） */
.att-grid{margin:10px 0;display:grid;gap:10px}
@media(min-width:1024px){.att-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.att-img,.att-video{width:100%;max-width:640px;border-radius:var(--r-s);border:1px solid var(--line);display:block;cursor:zoom-in;background:#000}
.att-file{display:inline-flex;align-items:center;gap:5px;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:6px 10px;font-size:12.5px;color:var(--txt)}
/* 时间档切换 pbar */
.pbar{display:inline-flex;background:var(--faint);border:1px solid var(--line);border-radius:var(--r-s);padding:2px;gap:2px;margin-bottom:var(--sp-4)}
.pbar button{border:0;background:none;border-radius:5px;padding:5px 13px;font-size:13px;color:var(--sub)}
.pbar button.on{background:var(--card);color:var(--txt);font-weight:600;box-shadow:var(--sh-1)}
/* 我的数据 好/差 卡 */
.gb-cols{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
@media(min-width:1024px){.gb-cols{grid-template-columns:1fr 1fr}}
.gb.good{background:var(--card);border:1px solid var(--line-green);border-left:3px solid var(--green);border-radius:var(--r-m);padding:12px 14px}
.gb.bad{background:var(--card);border:1px solid var(--line-red);border-left:3px solid var(--red);border-radius:var(--r-m);padding:12px 14px}
.gb.good .gb-t{color:var(--green);font-weight:700;font-size:13px;margin-bottom:6px}
.gb.bad .gb-t{color:var(--red);font-weight:700;font-size:13px;margin-bottom:6px}
.gb-row{font-size:13px;padding:4px 0}
.gb-item{font-size:12.5px;color:var(--blue);cursor:pointer;padding:2px 0 2px 12px}
.gb-item:hover{text-decoration:underline}
/* 成员负载（我的部门） */
.crew{display:flex;gap:8px;flex-wrap:wrap}
.crew-slot{flex:1;min-width:110px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}
.crew-role{font-size:11px;color:var(--gray);margin-bottom:3px}
.crew-p{font-size:13px}
/* 登录页 */
.login-wrap{min-height:calc(100vh - 52px);display:grid;place-items:center;padding:var(--sp-4)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:40px 32px;max-width:360px;width:100%;text-align:center;box-shadow:var(--sh-2)}
.login-logo{width:52px;height:52px;border-radius:14px;background:var(--topbar);color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px;margin:0 auto 14px}
.login-card h1{margin:0;font-size:22px}
.login-sub{color:var(--sub);font-size:13px;margin:2px 0 10px}
.login-slogan{color:var(--gray);font-size:11.5px;letter-spacing:.5px;margin-bottom:22px}
.btn-feishu{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:0;border-radius:10px;padding:12px;font-size:15px;font-weight:600}
.btn-feishu:hover{background:var(--blue-deep)}
.btn-dev{width:100%;background:none;border:1px dashed var(--line-strong);color:var(--gray);border-radius:10px;padding:9px;font-size:12.5px;margin-top:10px}
.login-foot{color:var(--gray);font-size:11px;margin-top:18px;line-height:1.7}
/* 登记 hero（普通员工首页） */
.reg-hero{background:var(--topbar);color:#fff;border-radius:var(--r-l);padding:26px 22px;margin-bottom:var(--sp-5)}
.reg-hero-t{font-size:20px;font-weight:700}
.reg-hero-s{font-size:13px;color:rgba(255,255,255,.75);margin:6px 0 16px}
/* 我提交的 4 点进度 */
.dots{display:inline-flex;gap:5px;margin-left:auto;align-items:center}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.dot.on{background:var(--green)}
.pill-urgent{background:var(--red);color:#fff;font-weight:700}
.tk.urgent{border-color:var(--line-red);background:var(--red-soft)}
/* 顶栏用户头像 */
#who .av{width:22px;height:22px;font-size:11px;border-radius:50%;object-fit:cover}
/* 客户名牌：方圆角=组织，区别于圆形=人 */
.custag{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700}
.cav{width:22px;height:22px;border-radius:6px;background:var(--topbar);color:#fff;display:inline-grid;place-items:center;font-size:11px;font-weight:700;font-style:normal;flex:none}
/* 字段名标签：内容块上方的小字说明，让人知道"这是什么" */
.fld-tag{font-size:11px;font-weight:600;color:var(--gray);letter-spacing:1.5px;margin:12px 0 2px}
.fld-tag i{font-style:normal;font-weight:400;letter-spacing:0;color:var(--gray);opacity:.8}
/* 登记信息 kv 行（案情区底部） */
.kv-row{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--gray);margin-top:2px}
.kv-row b{color:var(--txt);font-weight:600;margin-left:4px}