:root{--g:#1E6B3A;--g2:#2A8A4C;--gs:#E8F4EC;--ink:#1D2320;--muted:#6B7470;--line:#E4E7E5;--bg:#F5F6F6;--ok:#1E7B45;--okS:#E3F4E9;--warn:#C27416;--warnS:#FDF1E1;--bad:#C93636;--badS:#FDE7E7;--info:#2F6FB5;--infoS:#E4EEFA;--pur:#6E4BB4;--purS:#EFEAFA}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:13.5px;line-height:1.5}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column}
.sh{display:flex;gap:10px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.lg{width:32px;height:32px;border-radius:7px;background:var(--g);color:#fff;font-weight:700;display:grid;place-items:center}
.sh b{display:block;font-size:13px}.sh small{font-size:10.5px;color:var(--muted);letter-spacing:.06em}
.scroll{flex:1;overflow:auto}
.ten{padding:12px 12px 6px}.ten b{display:block;font-size:13px;margin-bottom:6px}
.onl{background:#E6F4EA;color:var(--ok);border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;margin-bottom:6px}.onl:before{content:"● "}
.aia{display:flex;align-items:center;justify-content:space-between;border:1px solid #CFE7D6;background:#F2FAF4;border-radius:6px;padding:5px 10px;font-size:12px;color:var(--g);font-weight:600}
.sw{width:30px;height:16px;border-radius:10px;background:var(--g);position:relative;border:0}.sw:after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:right .15s}
.sw.off{background:#C9CFCB}.sw.off:after{right:16px}
.lab{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#2D3531;padding:12px 16px 6px;display:flex;justify-content:space-between}
.lab span{color:var(--g);font-weight:500;letter-spacing:0}
.plan{margin:0 12px;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:12px}
.plan div{display:flex;justify-content:space-between;margin:3px 0}.plan .bar{height:3px;background:#E3E7E4;border-radius:3px;margin-top:6px}.plan .bar i{display:block;height:100%;width:66%;background:var(--g);border-radius:3px}
.ind{margin:0 12px;display:flex;gap:4px;flex-wrap:wrap}
.chipg{background:var(--gs);color:var(--g);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:500}
.team{display:flex;gap:4px;padding:2px 16px 10px}
.tav{width:24px;height:24px;border-radius:50%;background:#E5EAE7;font-size:10px;font-weight:600;display:grid;place-items:center;position:relative;color:#3D4641}
.tav.on:after{content:"";position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;background:#22A35A;border:2px solid #fff}
.nav{border-top:1px solid var(--line);padding:4px 8px 10px}
.nv{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:#3A423E;font-size:13.5px}
.nv svg{width:16px;height:16px;color:#59625D;flex:none}
.nv:hover{background:#F2F5F3}.nv.on{background:var(--gs);color:var(--g);font-weight:600}.nv.on svg{color:var(--g)}
.su{border-top:1px solid var(--line);padding:10px 14px}
.su .u{display:flex;gap:10px;align-items:center}.su .a{width:30px;height:30px;border-radius:50%;background:var(--g);color:#fff;font-weight:600;font-size:12px;display:grid;place-items:center}
.su b{display:block;font-size:13px}.su small{font-size:11px;color:#8A6D16}
.su p{font-size:10.5px;color:var(--g);text-align:center;margin-top:8px}
.main{min-width:0;padding:22px 26px 60px}
.wrap{max-width:1260px;margin:0 auto}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;margin-bottom:10px}
.eyeb{font-size:11.5px;letter-spacing:.12em;color:var(--g);font-weight:700}
.h1{font-size:22px;font-weight:700;margin-top:2px}
.sub{color:#4B5450;margin-top:2px}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;font-size:12px}
.pill.g{background:var(--gs);border-color:#CFE7D6;color:var(--g)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 14px;font-weight:600;font-size:13px;color:var(--ink)}
.btn.p{background:var(--g);border-color:var(--g);color:#fff}.btn.p:hover{background:#185A30}
.btn.o{background:#E8963A;border-color:#E8963A;color:#fff}.btn.pu{background:#7E57C2;border-color:#7E57C2;color:#fff}.btn.bl{background:#3B78C3;border-color:#3B78C3;color:#fff}
.btn.sm{padding:5px 10px;font-size:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid4>*,.grid3>*,.grid2>*{min-width:0}
.kc{background:#fff;border:1px solid var(--line);border-top:3px solid #B9C7D6;border-radius:10px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.kc .ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;margin-bottom:12px}.kc .ic svg{width:18px;height:18px}
.kc b{display:block;font-size:28px;line-height:1.1}.kc span{color:#3D4641}
.kc em{font-style:normal;display:inline-block;margin-top:8px;font-size:11px;font-weight:600;border-radius:5px;padding:2px 8px}
.t-b{border-top-color:#AFC3DA}.t-b .ic{background:#EAF1FA;color:#3B6FA8}.t-b em{background:#EAF1FA;color:#3B6FA8}
.t-g{border-top-color:#A9D3B6}.t-g .ic{background:var(--gs);color:var(--g)}.t-g em{background:var(--gs);color:var(--g)}
.t-r{border-top-color:#EFB3B3}.t-r .ic{background:var(--badS);color:var(--bad)}.t-r em{background:var(--badS);color:var(--bad)}
.t-p{border-top-color:#CDBDEB}.t-p .ic{background:var(--purS);color:var(--pur)}.t-p em{background:var(--purS);color:var(--pur)}
.t-o{border-top-color:#F3CB9A}.t-o .ic{background:var(--warnS);color:var(--warn)}.t-o em{background:var(--warnS);color:var(--warn)}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.ch{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.ch h3{font-size:14.5px;font-weight:700;display:flex;gap:8px;align-items:center}.ch a,.ch .lnk{color:var(--g);font-size:12.5px;font-weight:600}
.cb{padding:14px 16px}
.chart{position:relative;height:260px}.chart.sm{height:220px}
.row{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid #EFF1F0;cursor:pointer}.row:last-child{border-bottom:0}.row:hover{background:#FAFBFA}
.av{width:32px;height:32px;border-radius:50%;background:#7E57C2;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.rm{flex:1;min-width:0}.rm b{display:block;font-size:13px}.rm span{display:block;color:#4B5450;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm{font-size:11px;color:var(--muted);white-space:nowrap}
.st{display:inline-block;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.st.ok{background:var(--okS);color:var(--ok)}.st.warn{background:var(--warnS);color:var(--warn)}.st.bad{background:var(--badS);color:var(--bad)}.st.info{background:var(--infoS);color:var(--info)}.st.pur{background:var(--purS);color:var(--pur)}.st.mut{background:#EEF1EF;color:#5D6661}
table{width:100%;border-collapse:collapse}th{text-align:left;font-size:11px;letter-spacing:.06em;font-weight:700;color:#2D3531;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid #EFF1F0;vertical-align:middle}tr:last-child td{border-bottom:0}
.kw{display:inline-block;border:1px solid #DCE1DE;background:#FAFBFA;border-radius:5px;padding:1px 8px;margin:2px 3px 2px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chp{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;font-weight:600;font-size:12.5px;color:#2D3531}.chp.on{background:var(--gs);border-color:#9FD0AE;color:var(--g)}
.srch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 12px;color:#8A938E;flex:1;min-width:200px}
.srch input{border:0;outline:0;font:inherit;flex:1;background:none;color:var(--ink)}
.banner{border:1px solid #D7EBDD;background:#EEF7F1;border-radius:8px;padding:11px 16px;font-size:13px;margin-bottom:14px}
.tpl{display:flex;align-items:center;gap:12px;border:1px solid #F1D9B8;background:#FFF9F1;border-radius:10px;padding:12px 16px;margin-bottom:14px}.tpl div{flex:1}.tpl b{display:block}
.sw2{width:34px;height:18px;border-radius:12px;background:#C9CFCB;position:relative;border:0;flex:none}.sw2:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}.sw2.on{background:var(--g)}.sw2.on:after{left:18px}
.onb{border:1px solid #9FD0AE;background:#EAF6EE;color:var(--g);border-radius:6px;padding:3px 9px;font-size:11.5px;font-weight:700}.onb.off{background:#F1F2F1;border-color:var(--line);color:#8A938E}
.ib{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:#fff;display:inline-grid;place-items:center;color:#4B5450}.ib.del{color:var(--bad);border-color:#F2C5C5}
.fab{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(30,107,58,.35);z-index:20}
.demo{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:30;display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:30px;padding:4px 4px 4px 12px;box-shadow:0 4px 14px rgba(0,0,0,.08);font-size:12px}.demo b{color:var(--g)}.demo a{background:var(--g);color:#fff;border-radius:20px;padding:5px 12px;font-weight:600}
.toasts{position:fixed;right:84px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:#fff;border:1px solid var(--line);border-left:4px solid var(--g);border-radius:10px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.14);max-width:340px;animation:tin .2s ease-out}.toast b{display:block}.toast span{font-size:12.5px;color:#4B5450}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
/* chat */
.inbox{display:grid;grid-template-columns:310px 1fr;height:calc(100vh - 44px);background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.clist{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.ctabs{display:grid;grid-template-columns:repeat(3,1fr);margin:0 12px 8px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.ctabs button{border:0;background:#fff;padding:6px;font-size:12.5px}.ctabs .on{background:var(--g);color:#fff;font-weight:600}
.conv{display:flex;gap:10px;padding:12px;border-bottom:1px solid #EFF1F0;cursor:pointer}.conv.on{background:#EEF6F1;border-left:3px solid var(--g)}
.conv .rm span{white-space:nowrap}
.cpane{display:flex;flex-direction:column;min-width:0}
.ctop{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ctop .who b{display:block}.ctop .who small{color:var(--muted)}
.cact{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.cact .btn{padding:5px 10px;font-size:12px;font-weight:500}
.cnote{background:#FFF7EA;border-bottom:1px solid #F3DDBB;color:#9A5A10;font-size:12.5px;padding:7px 14px}
.msgs{flex:1;overflow:auto;padding:16px 22px;background:#F7F8F7;display:flex;flex-direction:column;gap:10px}
.m{max-width:62%;border-radius:10px;padding:10px 14px;font-size:13.5px;line-height:1.55;white-space:pre-line}
.m.in{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.m.out{align-self:flex-end;background:#EAF5EE;border:1px solid #D1E8D8}
.m small{display:block;text-align:right;font-size:10.5px;color:var(--muted);margin-top:4px}
.sysm{align-self:center;background:#EEF1EF;border-radius:20px;padding:3px 12px;font-size:11.5px;color:#4B5450}
.comp{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);align-items:center}
.comp input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}
@media (max-width:1150px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3,.grid2{grid-template-columns:1fr}.inbox{grid-template-columns:1fr;height:auto}.clist{max-height:360px}.msgs{min-height:420px}}
@media (max-width:820px){.app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;width:240px;z-index:40;transform:translateX(-100%);transition:transform .2s}.side.open{transform:none}.menu-btn{display:inline-block}.main{padding:12px 12px 70px}.m{max-width:88%}}
@media (max-width:520px){.grid4{grid-template-columns:1fr}}
.st-info{color:#2F6FB5}.st-warn{color:#C27416}.st-ok{color:#1E7B45}.st-pur{color:#6E4BB4}.st-bad{color:#C93636}
