:root{--bg:#f7f7f5;--panel:#fff;--ink:#111214;--ink2:#5b5f66;--ink3:#9a9ea6;--line:#e8e8e4;--line2:#f0f0ec;--acc:#4f46e5;--acc2:#eef0ff;--ok:#16a34a;--ok2:#e8f6ee;--warn:#d97706;--warn2:#fdf3e2;--bad:#dc2626;--bad2:#fdeaea;--r:12px;--sh:0 1px 2px rgba(16,17,20,.04),0 4px 16px rgba(16,17,20,.05);--ig:#e1306c;--wa:#25d366;--tg:#229ed9;--fb:#1877f2;--call:#111214}
[data-theme=dark]{--bg:#0e0f12;--panel:#16181c;--ink:#f2f3f5;--ink2:#a2a6ae;--ink3:#6c7078;--line:#25272d;--line2:#1d1f24;--acc:#8b85ff;--acc2:#1f2040;--ok:#4ade80;--ok2:#12281b;--warn:#fbbf24;--warn2:#2d2410;--bad:#f87171;--bad2:#2f1517;--sh:none}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,'Noto Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:232px 1fr;height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:4px;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;font-weight:700;font-size:16px;letter-spacing:-.3px}
.logo{width:28px;height:28px;border-radius:9px;background:var(--ink);display:grid;place-items:center}
.logo i{width:12px;height:12px;border-radius:50%;border:2.5px solid var(--bg);display:block;position:relative}
.logo i:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--bg);top:-6px;right:-6px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--ink2);font-weight:500;position:relative}
.nav a svg{width:18px;height:18px;flex:none}
.nav a:hover{background:var(--line2);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--bg)}
.nav .cnt{margin-left:auto;font-size:11px;font-weight:600;background:var(--acc);color:#fff;border-radius:99px;padding:1px 7px}
.nav a.on .cnt{background:var(--bg);color:var(--ink)}
.sec{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--ink3);padding:14px 10px 6px}
.spacer{flex:1}
.tok{margin:8px 4px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.tok b{font-size:12px}.tok small{color:var(--ink3);font-size:11px;display:block;margin-top:2px}
.meter{height:5px;border-radius:9px;background:var(--line);margin-top:8px;overflow:hidden}.meter i{display:block;height:100%;background:var(--acc);border-radius:9px}
.me{display:flex;align-items:center;gap:10px;padding:10px 8px 2px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff;flex:none}
.main{display:flex;flex-direction:column;min-width:0;height:100vh}
.top{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel)}
.search{min-width:0;flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;color:var(--ink3);cursor:pointer}
.search svg{width:16px;height:16px;flex:none}.search span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.search kbd{margin-left:auto;font:600 11px Inter;border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--panel)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;font-weight:600;border:1px solid var(--line);background:var(--panel);white-space:nowrap}
.btn:hover{border-color:var(--ink3)}
.btn.pri{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.acc{background:var(--acc);color:#fff;border-color:var(--acc)}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn svg{width:15px;height:15px}
.ib{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;background:var(--panel);position:relative}
.ib svg{width:17px;height:17px}.ib .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:2px solid var(--panel)}
.page{flex:1;overflow:auto;padding:24px;min-height:0}
.page.flush{padding:0;overflow:hidden}
h1.t{font-size:22px;font-weight:700;letter-spacing:-.5px}
.sub{color:var(--ink2);margin-top:2px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card.p{padding:18px}
.card h3{font-size:13px;font-weight:600;color:var(--ink2);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 2fr}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-1px;margin-top:6px}.kpi .d{font-size:12px;font-weight:600;margin-top:4px}
.up{color:var(--ok)}.down{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--line2);color:var(--ink2);white-space:nowrap}
.chip.ok{background:var(--ok2);color:var(--ok)}.chip.warn{background:var(--warn2);color:var(--warn)}.chip.bad{background:var(--bad2);color:var(--bad)}.chip.acc{background:var(--acc2);color:var(--acc)}
.ch{width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;color:#fff;flex:none}.ch svg{width:12px;height:12px}
.ch.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}.ch.wa{background:var(--wa)}.ch.tg{background:var(--tg)}.ch.fb{background:var(--fb)}.ch.call{background:#111}.ch.mail{background:#6b7280}
.list>.row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2)}.list>.row:last-child{border:0}
.row .grow{flex:1;min-width:0}.row b{font-weight:600}.row small{color:var(--ink3);display:block}
.tabs{display:flex;gap:4px;background:var(--line2);padding:3px;border-radius:10px;width:fit-content}
.tabs button{padding:6px 12px;border-radius:8px;font-weight:600;color:var(--ink2);font-size:13px}.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
.ai{background:linear-gradient(135deg,var(--acc2),var(--panel));border:1px solid color-mix(in srgb,var(--acc) 22%,var(--line))}
.spark{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;color:var(--acc)}.spark svg{width:14px;height:14px}
table{width:100%;border-collapse:collapse}th{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
td{padding:12px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}tr.hv:hover td{background:var(--bg);cursor:pointer}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;min-width:60px}.bar i{display:block;height:100%;border-radius:9px}
/* inbox */
.inbox{display:grid;grid-template-columns:320px 1fr 320px;height:100%}
.inbox>div{min-height:0;min-width:0;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel)}
.inbox>div:last-child{border:0}
.ihead{padding:14px 16px;border-bottom:1px solid var(--line)}
.pills{display:flex;gap:6px;overflow:auto;padding:10px 16px;border-bottom:1px solid var(--line)}.pills button{padding:4px 10px;border-radius:99px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}.pills button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.convs{overflow:auto;flex:1}
.conv{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line2);cursor:pointer;position:relative}
.conv:hover{background:var(--bg)}.conv.on{background:var(--acc2)}
.conv .tx{min-width:0;flex:1}.conv .nm{display:flex;justify-content:space-between;gap:8px;font-weight:600}.conv .nm span{font-weight:500;color:var(--ink3);font-size:12px}
.conv .pv{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-top:1px}
.conv .mt{display:flex;gap:6px;margin-top:6px;align-items:center}
.unread{position:absolute;right:14px;bottom:14px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.chat{overflow:auto;flex:1;padding:22px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.msg{max-width:68%;padding:10px 13px;border-radius:14px;background:var(--panel);border:1px solid var(--line);align-self:flex-start;box-shadow:var(--sh)}
.msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.msg small{display:block;font-size:11px;opacity:.6;margin-top:4px}
.msg.note{align-self:center;max-width:90%;background:var(--warn2);border-color:transparent;color:var(--warn);font-size:12.5px;font-weight:500;box-shadow:none}
.day{align-self:center;font-size:11.5px;color:var(--ink3);font-weight:600}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:bl 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bl{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.compose{border-top:1px solid var(--line);padding:12px 16px;background:var(--panel)}
.compose textarea{width:100%;border:0;outline:0;resize:none;background:transparent;min-height:44px;font-size:14px}
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.sug{display:grid;gap:8px;margin-bottom:10px}.sug button{text-align:left;padding:9px 12px;border:1px solid color-mix(in srgb,var(--acc) 25%,var(--line));border-radius:10px;background:var(--acc2);display:flex;gap:10px;align-items:flex-start}
.sug button b{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--acc);min-width:62px;padding-top:2px}
.side2{overflow:auto;padding:18px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px}.kv dt{color:var(--ink3)}.kv dd{font-weight:500;text-align:right}
.h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3);font-weight:600;margin:18px 0 8px}
/* kanban */
.kan{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:14px;align-items:start;overflow:auto;padding-bottom:10px}
.col{background:var(--line2);border-radius:var(--r);padding:10px;min-height:300px}
.col.over{outline:2px dashed var(--acc)}
.col h4{display:flex;justify-content:space-between;font-size:13px;padding:4px 6px 10px}.col h4 span{color:var(--ink3);font-weight:600}
.deal{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;cursor:grab;box-shadow:var(--sh)}
.deal:active{cursor:grabbing}.deal.drag{opacity:.4}
.deal .am{font-weight:700;font-size:16px;margin:6px 0}
.ring{--p:70;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--c,var(--acc)) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;flex:none}.ring b{width:26px;height:26px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:10px}
/* slideover & modal */
.ov{position:fixed;inset:0;background:rgba(10,10,14,.35);z-index:50;display:none;backdrop-filter:blur(2px)}.ov.show{display:block}
.slide{position:fixed;top:0;right:0;bottom:0;width:min(640px,100vw);background:var(--panel);z-index:51;transform:translateX(100%);transition:.25s;overflow:auto;visibility:hidden}.slide.show{visibility:visible}
.slide.show{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.15)}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-48%);width:min(680px,94vw);max-height:88vh;overflow:auto;background:var(--panel);border-radius:16px;z-index:52;opacity:0;pointer-events:none;transition:.18s;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.cmd{top:18%;transform:translate(-50%,0)}.cmd.show{transform:translate(-50%,0)}
.cmd input{width:100%;border:0;outline:0;padding:18px 20px;font-size:16px;background:transparent;border-bottom:1px solid var(--line)}
.cmd .it{display:flex;gap:12px;align-items:center;padding:11px 20px;cursor:pointer}.cmd .it:hover,.cmd .it.on{background:var(--acc2)}.cmd .it svg{width:17px;height:17px;color:var(--ink3)}.cmd .it small{margin-left:auto;color:var(--ink3)}
.x{position:absolute;right:16px;top:16px}
/* calls */
.wave{display:flex;align-items:center;gap:3px;height:44px}.wave i{width:4px;border-radius:3px;background:var(--acc);animation:wv 1s ease-in-out infinite}@keyframes wv{0%,100%{height:8px}50%{height:36px}}
.trans{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow:auto}.trans div{padding:8px 12px;border-radius:10px;max-width:84%}.trans .a{background:var(--line2);align-self:flex-start}.trans .b{background:var(--acc2);align-self:flex-end}
.tip{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:var(--warn2);color:var(--warn);font-weight:500;margin-top:8px;animation:pop .3s}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
/* flow */
.canvas{position:relative;height:520px;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);border-radius:var(--r);overflow:auto}
.node{position:absolute;width:178px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--sh);cursor:pointer}
.node:hover,.node.on{border-color:var(--acc)}.node small{color:var(--ink3);text-transform:uppercase;font-size:10.5px;letter-spacing:.7px;font-weight:600}.node b{display:block;margin-top:2px}.node p{font-size:12.5px;color:var(--ink2);margin-top:4px}
.node.tr{border-left:4px solid var(--ok)}.node.co{border-left:4px solid var(--warn)}.node.ac{border-left:4px solid var(--acc)}.node.ai2{border-left:4px solid #a855f7}
.sw{width:36px;height:20px;border-radius:99px;background:var(--line);position:relative;display:inline-block;cursor:pointer;flex:none}.sw:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}.sw.on{background:var(--ok)}.sw.on:after{left:18px}
/* ask */
.ask{display:flex;flex-direction:column;height:100%;max-width:860px;margin:0 auto;width:100%}
.ask .log{flex:1;overflow:auto;padding:24px 8px;display:flex;flex-direction:column;gap:18px}
.q{align-self:flex-end;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:14px;max-width:80%}.an{align-self:flex-start;width:100%}
.an .card{padding:16px}
.inp{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 16px;background:var(--panel);box-shadow:var(--sh)}.inp input{flex:1;border:0;outline:0;background:transparent;padding:8px 0}
.heat{display:grid;gap:3px}.heat i{aspect-ratio:1.4;border-radius:4px;display:block}
.tt{position:fixed;background:var(--ink);color:var(--bg);padding:5px 9px;border-radius:7px;font-size:12px;pointer-events:none;z-index:99;display:none}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:500;z-index:99;opacity:0;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%)}
.phone{width:260px;border:8px solid var(--ink);border-radius:30px;padding:14px;background:var(--bg);margin:0 auto}.phone .b1{background:var(--wa);color:#fff;padding:10px 12px;border-radius:12px 12px 12px 3px;font-size:13px}
.field{display:grid;gap:6px;margin-bottom:14px}.field label{font-size:12px;font-weight:600;color:var(--ink2)}.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--panel);outline:0}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc)}
.dots{display:flex;gap:2px;align-items:flex-end;height:30px}
.mobbar{display:none}
@media(max-width:1100px){.inbox{grid-template-columns:300px 1fr}.inbox>div:last-child{display:none}.g4{grid-template-columns:1fr 1fr}.g21,.g12{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app{grid-template-columns:minmax(0,1fr)}.main{min-width:0;overflow:hidden}.inbox{grid-template-columns:minmax(0,1fr)}.side{display:none}.mobbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);justify-content:space-around;padding:8px 4px;z-index:40}.mobbar a{display:grid;place-items:center;gap:2px;font-size:10px;color:var(--ink2);padding:4px 8px}.mobbar a.on{color:var(--acc)}.mobbar svg{width:20px;height:20px}.page{padding:16px 14px 90px}.top{padding:10px 14px}.g4,.g3,.g2{grid-template-columns:1fr}.inbox{grid-template-columns:1fr;position:relative}.inbox>div:nth-child(2){display:none}.inbox.open>div:nth-child(1){display:none}.inbox.open>div:nth-child(2){display:flex}.kan{grid-template-columns:repeat(5,82vw)}.top .btn.hide{display:none}.search kbd{display:none}.page.flush{padding-bottom:62px}}