:root{--brand:#0f766e;--accent:#2563eb;--bg:#f3f5f7;--panel:#fff;--ink:#1b1f24;--mute:#66707b;--line:#dfe4ea;
--ok:#15803d;--warn:#b45309;--bad:#be123c;--info:#2563eb;--pur:#7c3aed;
--brand-l:color-mix(in srgb,var(--brand) 13%,var(--panel));--out:color-mix(in srgb,var(--brand) 18%,var(--panel));
--warn-l:#fdf1e1;--bad-l:#fde8ed;--info-l:#e8effd;--pur-l:#f0eafd;--ok-l:#e3f4e8;--radius:12px}
@media(prefers-color-scheme:dark){:root{--bg:#0f1317;--panel:#181d23;--ink:#e8ecf0;--mute:#9aa5b1;--line:#2c343d;
--ok:#4ade80;--warn:#f5b25a;--bad:#ff8aa5;--info:#7aa2ff;--pur:#b79bff;--warn-l:#3a2a12;--bad-l:#3d1822;--info-l:#18233f;--pur-l:#27204a;--ok-l:#123222}}
*{box-sizing:border-box}html,body,#app{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}
a{color:var(--brand)}h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:0 0 8px}h3{font-size:15px;margin:0 0 6px}
.mute{color:var(--mute)}.sm{font-size:12.5px}.b{font-weight:600}.right{text-align:right}.nowrap{white-space:nowrap}.center{text-align:center}
.hide{display:none!important}.grow{flex:1;min-width:0}.gap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mt{margin-top:12px}.mb{margin-bottom:12px}.mt2{margin-top:20px}

/* controls */
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 14px;line-height:1.3;transition:background .12s}
.btn:hover{background:var(--bg)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}.btn.p:hover{filter:brightness(1.08);background:var(--brand)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn.sm{padding:4px 10px;font-size:12.5px}.btn.link{border:0;background:none;color:var(--brand);padding:2px 4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],input[type=url],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
textarea{resize:vertical;min-height:70px}input:focus,select:focus,textarea:focus,.btn:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
label.f{display:block;font-size:12.5px;color:var(--mute);margin:12px 0 4px}label.f:first-child{margin-top:0}
.check{display:flex;gap:8px;align-items:flex-start;margin:6px 0}.check input{margin-top:3px}
input[type=range]{width:100%;accent-color:var(--brand)}input[type=color]{width:46px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg button{border:0;background:var(--panel);padding:7px 14px}
.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--brand);color:#fff}.seg button:disabled{opacity:.55;cursor:default}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:3px 12px;font-size:12.5px}.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tag{display:inline-block;border-radius:6px;padding:1px 8px;font-size:11.5px;margin-right:4px;white-space:nowrap;background:var(--bg);color:var(--mute)}
.t-wa{background:#dcf7e3;color:#15803d}.t-ig{background:#fde6f3;color:#b0176b}.t-ms{background:#e0ecff;color:#1b5fd1}.t-web{background:#ece6fb;color:#6d28d9}
@media(prefers-color-scheme:dark){.t-wa{background:#123222;color:#4ade80}.t-ig{background:#3d1630;color:#ff9ad0}.t-ms{background:#142a4d;color:#8db4ff}.t-web{background:#2a2050;color:#c4b0ff}}
.t-ok{background:var(--ok-l);color:var(--ok)}.t-warn{background:var(--warn-l);color:var(--warn)}.t-bad{background:var(--bad-l);color:var(--bad)}.t-info{background:var(--info-l);color:var(--info)}.t-pur{background:var(--pur-l);color:var(--pur)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card.flat{padding:0;overflow:hidden}.card+.card{margin-top:12px}
.callout{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--panel);border-radius:8px;padding:10px 14px}
.callout.warn{border-left-color:var(--warn);background:var(--warn-l)}.callout.bad{border-left-color:var(--bad);background:var(--bad-l)}.callout.info{border-left-color:var(--info);background:var(--info-l)}
.grid{display:grid;gap:12px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat .n{font-size:26px;font-weight:700;line-height:1.2}.stat .l{color:var(--mute);font-size:12.5px}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:500;font-size:12.5px;white-space:nowrap}tr:last-child td{border-bottom:0}tr.click:hover{background:var(--bg);cursor:pointer}
.tablewrap{overflow-x:auto}
.bar{height:8px;background:var(--bg);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 14px;border-bottom:2px solid transparent;white-space:nowrap;color:var(--mute)}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}
.empty{padding:28px 16px;text-align:center;color:var(--mute)}
.copybox{display:flex;gap:8px;align-items:center}.copybox code{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px;overflow-x:auto;white-space:nowrap;font-size:12.5px}
.code{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;font:12.5px/1.5 ui-monospace,Consolas,monospace;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-l);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}

/* login */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.login .card{width:100%;max-width:380px;padding:26px}.login .logo{height:44px;max-width:200px;object-fit:contain;margin-bottom:6px}
.login .title{font-size:22px;font-weight:700;margin:0 0 4px}.login .err{color:var(--bad);margin-top:10px;min-height:20px}

/* shell */
.shell{height:100%;display:flex;flex-direction:column}
.banner{background:var(--warn-l);color:var(--warn);border-bottom:1px solid var(--warn);padding:7px 14px;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13px}
.body{flex:1;display:flex;min-height:0}
nav.side{width:216px;background:var(--panel);border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px;flex-shrink:0;overflow-y:auto}
.brandrow{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;font-weight:700;font-size:16px}.brandrow img{height:30px;max-width:130px;object-fit:contain}
.brandrow .dot{width:26px;height:26px;border-radius:8px;background:var(--brand);flex-shrink:0}
nav.side a.nav{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;color:var(--ink);text-decoration:none}
nav.side a.nav:hover{background:var(--bg)}nav.side a.nav.on{background:var(--brand-l);color:var(--brand);font-weight:600}
.badge{background:var(--bad);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;min-width:18px;text-align:center}.badge.q{background:var(--pur)}
nav.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding:12px 10px 4px}
nav.side .me{margin-top:auto;border-top:1px solid var(--line);padding:10px 8px 2px;font-size:12.5px}
main.view{flex:1;min-width:0;overflow:auto}.page{padding:22px;max-width:1120px}.page.wide{max-width:none}
.pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.topbar{display:none}

/* inbox */
.inbox{display:grid;grid-template-columns:310px minmax(0,1fr) 270px;height:100%}
.inbox>div{min-height:0;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column}.inbox>div:last-child{border:0}
.ihead{padding:10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.clist{overflow-y:auto;flex:1}
.conv{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:block;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0}
.conv:hover{background:var(--bg)}.conv.on{background:var(--brand-l)}.conv.unread .nm{font-weight:700}
.conv .r{display:flex;justify-content:space-between;gap:8px}.conv .pv{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 4px}
.chat{background:var(--bg)!important}
.chead{padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.m{max-width:min(72%,560px);padding:8px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);white-space:pre-wrap;word-break:break-word}
.m.out{align-self:flex-end;background:var(--out);border-color:transparent}.m .meta{display:block;color:var(--mute);font-size:11px;margin-top:3px}
.m.bot{border:1px dashed color-mix(in srgb,var(--pur) 55%,var(--line))}.m.failed{border-color:var(--bad)}
.note{align-self:center;background:var(--warn-l);color:var(--warn);border-radius:8px;padding:4px 12px;font-size:12px;max-width:85%;text-align:center}
.note.system{background:var(--bg);color:var(--mute);border:1px dashed var(--line)}
.privnote{align-self:flex-end;background:var(--warn-l);border:1px solid var(--warn);border-radius:12px;padding:8px 12px;max-width:min(72%,560px)}
.draft{margin:0 14px 8px;background:var(--pur-l);border:1px solid var(--pur);border-radius:12px;padding:10px 12px}
.compose{padding:10px 14px;background:var(--panel);border-top:1px solid var(--line)}
.compose .row{display:flex;gap:8px;align-items:flex-end}.compose textarea{min-height:42px;max-height:140px;resize:none}
.warnbar{margin:8px 14px 0;border-radius:8px;padding:7px 12px;font-size:12.5px;background:var(--warn-l);color:var(--warn);border:1px solid var(--warn)}
.infoside{padding:14px;overflow-y:auto}.infoside h4{margin:16px 0 6px;font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}.infoside h4:first-child{margin-top:0}
.back{display:none}
.hb{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:7px 14px;font-size:13px;border-bottom:1px solid}
.hb.bad{background:var(--bad-l);color:var(--bad);border-color:var(--bad)}.hb.warn{background:var(--warn-l);color:var(--warn);border-color:var(--warn)}
.hb a{color:inherit;font-weight:600}
.steps .tag{padding:3px 10px;font-size:12.5px}

/* monitor */
.feed{display:flex;flex-direction:column}.ev{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:110px 1fr;gap:6px 14px}.ev:last-child{border:0}
.ev .q{color:var(--mute)}.conf{display:inline-block;width:70px;vertical-align:middle;margin-right:6px}

/* modal + toast */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal{background:var(--panel);border-radius:14px;width:100%;max-width:520px;max-height:92vh;overflow:auto;padding:20px;border:1px solid var(--line)}
.modal.big{max-width:720px}.modal h2{margin-bottom:12px}.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:99;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}#toast.bad{background:var(--bad);color:#fff}
.preview{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--bg)}
.skeleton{height:14px;background:var(--line);border-radius:6px;margin:8px 0;animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.5}}

@media(max-width:1000px){.inbox{grid-template-columns:280px minmax(0,1fr)}.inbox>div:last-child{display:none}}
@media(max-width:760px){
 .body{flex-direction:column}
 nav.side{width:100%;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:6px;gap:2px}
 nav.side a.nav{white-space:nowrap;flex-shrink:0;gap:6px}nav.side .brandrow,nav.side .grp,nav.side .me{display:none}
 .page{padding:14px}.inbox{grid-template-columns:1fr}.inbox.chatopen>div:first-child{display:none}.inbox:not(.chatopen)>div:nth-child(2){display:none}
 .back{display:inline-block}.ev{grid-template-columns:1fr}.m{max-width:88%}
}

.cnsteps{padding-left:0;list-style:none;margin:12px 0 0}.cnsteps li{padding:6px 0;border-bottom:1px solid var(--line,#e5e7eb)}