:root{
  --bg:#07111f; --panel:#0d1728; --panel2:#101e33; --card:#12233d; --line:#223652;
  --text:#eaf2ff; --muted:#92a4c0; --brand:#22d3a6; --brand2:#38bdf8; --danger:#ef4444;
  --warn:#f59e0b; --ok:#22c55e; --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#07111f,#091529 45%,#07111f);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,rgba(34,211,166,.18),transparent 30%),var(--bg)}
.login-card{width:min(440px,92vw);background:rgba(13,23,40,.92);border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;font-size:18px}.brand em{color:var(--brand);font-style:normal}.logo-dot{width:17px;height:17px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 30px rgba(34,211,166,.6)}
.login-card h1{font-size:32px;margin:28px 0 6px}.login-card p{color:var(--muted);margin-bottom:24px}.login-card label{display:block;color:var(--muted);font-size:13px;margin:14px 0 6px}
input,select,textarea{width:100%;background:#071326;border:1px solid #254061;color:var(--text);border-radius:12px;padding:12px 13px;outline:none}
textarea{min-height:92px;resize:vertical} input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(34,211,166,.12)}
button,.btn{border:0;border-radius:12px;padding:11px 15px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#00111a;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
button:hover,.btn:hover{filter:brightness(1.05)}.btn.ghost,button.ghost{background:#12233d;color:var(--text);border:1px solid var(--line)}.btn.danger,button.danger{background:var(--danger);color:white}.btn.small{padding:7px 10px;border-radius:9px;font-size:12px}
.alert{padding:12px;border-radius:12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fecaca;margin:14px 0}

#app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#07111f;border-right:1px solid var(--line);padding:18px;position:sticky;top:0;height:100vh}
.sidebar .brand{margin-bottom:24px}.sidebar a{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:12px;color:var(--muted);margin:4px 0}
.sidebar a:hover,.sidebar a.active{background:#10213a;color:var(--text)}.sidebar .logout{position:absolute;bottom:16px;left:18px;right:18px;color:#fca5a5}
.main{min-width:0}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(7,17,31,.8);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
.topbar small{display:block;color:var(--muted);font-size:12px;margin-top:2px}.content{padding:26px}.page-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.page-title h1{margin:0;font-size:28px}.page-title p{margin:6px 0 0;color:var(--muted)}
.grid{display:grid;gap:16px}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:rgba(13,23,40,.86);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.14)}.metric b{font-size:32px}.metric span{display:block;color:var(--muted);margin-top:4px}

.inbox-layout{display:grid;grid-template-columns:330px minmax(380px,1fr) 330px;gap:14px;height:calc(100vh - 122px)}
.list-panel,.chat-panel,.side-panel{background:rgba(13,23,40,.86);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:0}
.list-head,.chat-head,.side-head{padding:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.conversation-list{overflow:auto;height:calc(100% - 112px)}
.conv-item{padding:13px 14px;border-bottom:1px solid rgba(34,54,82,.6);cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}
.conv-item:hover,.conv-item.active{background:#10213a}.avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#1f9e84,#38bdf8);display:grid;place-items:center;color:#00111a;font-weight:900}
.conv-name{font-weight:800}.conv-msg{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}.pill{font-size:11px;border:1px solid var(--line);background:#0a1528;border-radius:999px;padding:3px 8px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}.badge{min-width:20px;height:20px;border-radius:999px;background:var(--brand);color:#00111a;display:grid;place-items:center;font-size:12px;font-weight:900}
.chat-messages{height:calc(100% - 190px);overflow:auto;padding:18px;background:linear-gradient(180deg,rgba(10,20,37,.45),rgba(4,10,20,.55))}
.empty{color:var(--muted);text-align:center;margin:80px auto;max-width:400px}.bubble{max-width:76%;padding:11px 13px;border-radius:16px;margin:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.14);white-space:pre-wrap;word-break:break-word}
.bubble.in{background:#13233b;border:1px solid #263c5b;border-top-left-radius:4px}.bubble.out{background:linear-gradient(135deg,#164f49,#155e75);margin-left:auto;border-top-right-radius:4px}
.bmeta{font-size:11px;color:#b6c6dd;margin-top:6px;opacity:.85}.composer{border-top:1px solid var(--line);padding:12px;background:#0b1629}.composer textarea{min-height:56px}.composer-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}
.side-body{padding:14px;overflow:auto;height:calc(100% - 54px)}.kv{margin:12px 0}.kv label{font-size:12px;color:var(--muted);display:block;margin-bottom:5px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.tag{border-radius:999px;padding:5px 9px;background:#0b1629;border:1px solid var(--line);font-size:12px;color:#bcd0e8}
.note{padding:10px;border-radius:12px;background:#0b1629;border:1px solid var(--line);margin:8px 0}.note small{color:var(--muted)}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px}.lane{background:rgba(13,23,40,.86);border:1px solid var(--line);border-radius:18px;min-height:600px}.lane h3{margin:0;padding:14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.deal{margin:12px;padding:12px;border-radius:14px;background:#0b1629;border:1px solid #263c5b;cursor:pointer}.deal:hover{border-color:var(--brand)}.deal b{display:block}.deal p{color:var(--muted);margin:6px 0;font-size:13px}
.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.table code{background:#071326;border:1px solid var(--line);border-radius:8px;padding:3px 6px;color:#a7f3d0}.actions{display:flex;gap:8px;flex-wrap:wrap}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:50}.modal{width:min(760px,94vw);max-height:90vh;overflow:auto;background:#0d1728;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:20px}.modal h2{margin-top:0}.modal-backdrop.show{display:flex}
#toast{position:fixed;right:20px;bottom:20px;background:#10213a;border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:none;box-shadow:var(--shadow);z-index:80}.status-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block}.status-dot.warn{background:var(--warn)}.status-dot.danger{background:var(--danger)}
@media(max-width:1100px){#app{grid-template-columns:78px 1fr}.sidebar{padding:12px}.sidebar .brand b,.sidebar a:not(.logout){font-size:0}.sidebar a{justify-content:center}.inbox-layout{grid-template-columns:1fr;height:auto}.list-panel,.chat-panel,.side-panel{height:650px}.grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}