:root{--bg:#0a0d16;--panel:#121726;--panel2:#171d2e;--line:#293047;--text:#f5f7ff;--muted:#9ba5bd;--primary:#7b6cff;--primary2:#a293ff;--good:#35d399;--warn:#f7b955;--bad:#ff6b7b;--shadow:0 24px 60px rgba(0,0,0,.28)}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 20%,rgba(123,108,255,.24),transparent 32%),radial-gradient(circle at 80% 80%,rgba(53,211,153,.12),transparent 26%),var(--bg)}.login-card{width:min(440px,100%);background:rgba(18,23,38,.96);border:1px solid var(--line);border-radius:24px;padding:36px;box-shadow:var(--shadow)}.login-card h1{font-size:28px;margin:34px 0 6px}.login-card p{color:var(--muted);margin:0 0 24px}.login-card form{display:grid;gap:16px}.login-card button{width:100%}
.brand{display:flex;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#4bd4c3);font-weight:900;font-size:20px;box-shadow:0 10px 30px rgba(123,108,255,.35)}.brand strong,.brand small{display:block}.brand small{color:var(--muted)}.brand.big .brand-mark{width:52px;height:52px;font-size:24px}.brand.big strong{font-size:19px}
.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#0e1220;border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column}.sidebar .brand{padding:4px 8px 26px}.sidebar nav{display:grid;gap:5px}.sidebar nav button{border:0;background:transparent;color:var(--muted);padding:11px 13px;border-radius:11px;text-align:left;font-weight:650}.sidebar nav button:hover,.sidebar nav button.active{background:var(--panel2);color:var(--text)}.sidebar nav button.active{box-shadow:inset 3px 0 var(--primary)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:16px 8px 0}.sidebar-bottom #userBox{color:var(--muted);margin-bottom:12px}.sidebar-bottom strong{display:block;color:var(--text)}
main{min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 34px;border-bottom:1px solid var(--line);background:rgba(10,13,22,.85);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.topbar h1{margin:0;font-size:25px}.topbar p{margin:3px 0 0;color:var(--muted)}.top-actions{display:flex;gap:10px}.content{padding:30px 34px 60px}
button{border:1px solid transparent;border-radius:10px;padding:10px 14px;font-weight:750}.primary{background:linear-gradient(135deg,var(--primary),#6553e8);color:#fff}.primary:hover{filter:brightness(1.08)}.secondary{background:var(--panel2);border-color:var(--line);color:var(--text)}.ghost{background:transparent;border-color:var(--line);color:var(--muted)}.danger{background:rgba(255,107,123,.13);color:#ff9aa6;border-color:rgba(255,107,123,.25)}.icon-btn{background:transparent;color:var(--muted);font-size:24px;padding:0 8px}
label{display:grid;gap:7px;font-weight:650;color:#d9deeb}input,select,textarea{width:100%;background:#0d1220;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary)}textarea{min-height:110px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}
.grid{display:grid;gap:18px}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.metric,.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 35px rgba(0,0,0,.12)}.metric{padding:20px}.metric span{color:var(--muted)}.metric strong{display:block;font-size:30px;margin-top:8px}.card{padding:20px}.card h2,.card h3{margin:0 0 14px}.section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.section-head h2{margin:0}.muted{color:var(--muted)}.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}table{width:100%;border-collapse:collapse}th,td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}tr:last-child td{border-bottom:0}tr.clickable:hover{background:rgba(123,108,255,.07);cursor:pointer}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(123,108,255,.14);color:#c8c0ff;font-size:12px;font-weight:750}.badge.good{background:rgba(53,211,153,.12);color:#70e4b9}.badge.warn{background:rgba(247,185,85,.12);color:#ffd38c}.badge.bad{background:rgba(255,107,123,.12);color:#ff9aa6}
.two-col{display:grid;grid-template-columns:330px 1fr;gap:18px}.list-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.list-item{padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer}.list-item:hover,.list-item.active{background:var(--panel2)}.list-item strong{display:block}.list-item small{color:var(--muted)}.chat-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;min-height:620px}.chat-head{padding:16px;border-bottom:1px solid var(--line)}.messages{padding:18px;display:flex;flex-direction:column;gap:12px;overflow:auto;flex:1}.message{max-width:78%;padding:11px 13px;border-radius:14px;background:var(--panel2)}.message.user{align-self:flex-end;background:rgba(123,108,255,.22)}.message small{display:block;color:var(--muted);margin-top:5px}.chat-compose{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}.chat-compose input{flex:1}
.agent-grid,.integration-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.agent-card .agent-top,.integration-card .agent-top{display:flex;justify-content:space-between;gap:10px}.agent-card p,.integration-card p{color:var(--muted)}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--bad);display:inline-block;margin-right:6px}.status-dot.on{background:var(--good)}
#toast{position:fixed;right:22px;bottom:22px;z-index:99;display:grid;gap:8px}.toast{background:#1c2437;border:1px solid var(--line);padding:12px 15px;border-radius:11px;box-shadow:var(--shadow)}dialog{width:min(720px,calc(100% - 32px));border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);padding:0;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(0,0,0,.72)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.modal-head+div{padding:20px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:15px 20px;border-top:1px solid var(--line)}
.empty{padding:50px 20px;text-align:center;color:var(--muted)}
@media(max-width:1000px){.metrics{grid-template-columns:repeat(2,1fr)}.agent-grid,.integration-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.app-shell{grid-template-columns:80px 1fr}.sidebar .brand div,.sidebar nav button{font-size:0}.sidebar nav button::first-letter{font-size:14px}.sidebar-bottom{display:none}.brand-mark{margin:auto}.topbar,.content{padding-left:20px;padding-right:20px}}
@media(max-width:650px){.metrics,.agent-grid,.integration-grid,.form-grid{grid-template-columns:1fr}.topbar{align-items:flex-start}.top-actions{flex-direction:column}.app-shell{display:block}.sidebar{height:auto;position:static;flex-direction:row;overflow:auto}.sidebar .brand,.sidebar-bottom{display:none}.sidebar nav{display:flex}.sidebar nav button{font-size:12px;white-space:nowrap}.content{padding:18px}.topbar{position:static}.message{max-width:92%}}