:root{--bg:#f5f6f8;--card:#fff;--text:#1d2330;--muted:#6b7385;--line:#e3e6ec;--accent:#b0306a;--accent-2:#f8e7ef;--ok:#1e8e4e;--ok-bg:#e3f5ea;--warn:#a86400;--warn-bg:#fff3d6;--bad:#c0392b;--bad-bg:#fde8e6}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.layout{display:flex;min-height:100vh}
.side{width:220px;background:#1d2330;color:#cfd4de;padding:16px 0;flex-shrink:0}
.side .brand{color:#fff;font-weight:700;font-size:16px;padding:0 18px 14px}
.side a{display:block;color:#cfd4de;padding:8px 18px;border-left:3px solid transparent}
.side a.on,.side a:hover{background:#2a3142;color:#fff;border-left-color:var(--accent);text-decoration:none}
.side .me{padding:16px 18px;color:#8a92a5;font-size:12px}
.main{flex:1;padding:22px 26px;min-width:0}
h1{font-size:22px;margin:0 0 16px}h2{font-size:16px;margin:22px 0 10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.kpi b{display:block;font-size:26px}.kpi span{color:var(--muted);font-size:12px}
.kpi.alert{border-color:var(--bad);background:var(--bad-bg)}
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:#fafbfc}
.tbl{border:1px solid var(--line);border-radius:10px;overflow-x:auto}
.muted{color:var(--muted)}.small{font-size:12px}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;background:#eef0f4}
.b-verified,.b-approved,.b-done,.b-sent{background:var(--ok-bg);color:var(--ok)}
.b-pending,.b-approval,.b-scheduled,.b-sending,.b-open{background:var(--warn-bg);color:var(--warn)}
.b-rejected,.b-blocked,.b-failed,.b-cancelled{background:var(--bad-bg);color:var(--bad)}
.btn,button{display:inline-block;border:1px solid var(--accent);background:var(--accent);color:#fff;padding:7px 14px;border-radius:7px;font-size:14px;cursor:pointer}
.btn.sec,button.sec{background:#fff;color:var(--accent)}
.btn.ok,button.ok{background:var(--ok);border-color:var(--ok)}
.btn.bad,button.bad{background:var(--bad);border-color:var(--bad)}
.btn:hover{text-decoration:none;opacity:.9}
input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{width:100%;padding:7px 9px;border:1px solid #cfd4de;border-radius:7px;font:inherit;background:#fff}
textarea{min-height:80px}
form.inline{display:inline}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:12px}
.filters>*{flex:0 0 auto}.filters input,.filters select{width:auto;min-width:140px}
.form p{margin:0 0 12px}.form label{display:block;font-weight:600;margin-bottom:4px}
.form ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 14px}.form ul label{font-weight:400}
.errorlist{color:var(--bad)}
.msgs .m{padding:10px 14px;border-radius:8px;margin-bottom:10px}
.m.success{background:var(--ok-bg)}.m.error{background:var(--bad-bg)}.m.warning{background:var(--warn-bg)}
.row{display:flex;gap:16px;flex-wrap:wrap}.row>.col{flex:1;min-width:280px}
.doc{display:flex;gap:16px;flex-wrap:wrap}
.doc img{max-width:520px;width:100%;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
.chat{max-height:60vh;overflow-y:auto;padding:6px}
.bubble{max-width:75%;padding:8px 12px;border-radius:12px;margin:6px 0;white-space:pre-wrap;word-wrap:break-word}
.bubble.in{background:#eef0f4}.bubble.out{background:var(--accent-2);margin-left:auto}
.bubble .meta{font-size:11px;color:var(--muted);margin-top:3px}
.bar{max-width:100%;height:8px;background:var(--accent);border-radius:4px}
.auth{max-width:380px;margin:10vh auto}
@media (max-width:760px){.layout{display:block}.side{width:auto;display:flex;overflow-x:auto;padding:8px 0;white-space:nowrap}
.side .brand,.side .me{display:none}.side a{display:inline-block;border-left:0;border-bottom:3px solid transparent}
.main{padding:14px}.bubble{max-width:92%}}