:root{
  --bg:#08101f;--bg2:#0f1a33;--card:#121d38;--card2:#18264a;--line:rgba(255,255,255,.09);
  --text:#eff4ff;--muted:#9aabc9;--accent:#16a34a;--accent2:#22c55e;--blue:#3b82f6;--danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;
  background:
    radial-gradient(circle at top right, rgba(34,197,94,.14), transparent 20%),
    radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 18%),
    linear-gradient(135deg,#07101f,#0c1730 55%,#08101f);
}
a{text-decoration:none}
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:294px;background:rgba(8,14,28,.92);backdrop-filter:blur(18px);border-right:1px solid var(--line);
  padding:22px;position:sticky;top:0;height:100vh
}
.brand-card{
  display:flex;gap:14px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid var(--line);padding:16px;border-radius:26px;margin-bottom:20px;box-shadow:0 18px 38px rgba(0,0,0,.24)
}
.brand-logo-img{width:58px;height:58px;border-radius:18px;object-fit:cover;box-shadow:0 10px 24px rgba(34,197,94,.28)}
.brand-card h1{font-size:1.05rem;margin:0}
.brand-card p{margin:2px 0 0;color:var(--muted);font-size:.84rem}
.side-links .nav-link{
  color:#dce5ff;padding:12px 14px;border-radius:18px;margin:7px 0;display:flex;align-items:center;gap:12px;
  transition:.18s ease
}
.side-links .nav-link:hover,.side-links .nav-link.active{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}
.main-area{flex:1;padding:18px 22px}
.topbar{
  display:flex;justify-content:space-between;align-items:center;background:rgba(17,25,51,.72);
  border:1px solid var(--line);padding:18px 22px;border-radius:28px;backdrop-filter:blur(14px);gap:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.18)
}
.page-title{font-size:1.35rem}
.top-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.user-pill{background:rgba(255,255,255,.05);padding:10px 14px;border-radius:16px;display:flex;flex-direction:column}
.connection-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;font-weight:700;font-size:.9rem}
.connection-pill i{font-size:.6rem}
.status-online{background:rgba(34,197,94,.12);color:#86efac}
.status-connecting{background:rgba(251,191,36,.14);color:#fde68a}
.status-offline{background:rgba(239,68,68,.12);color:#fca5a5}
.card-pro,.stat-card,.glass-card{
  background:linear-gradient(180deg,rgba(18,29,56,.96),rgba(12,19,37,.96));
  border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 55px rgba(0,0,0,.22)
}
.stat-card{padding:20px;height:100%}
.stat-card .icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:rgba(34,197,94,.12);color:#86efac;font-size:1.2rem;margin-bottom:12px}
.metric{font-size:1.8rem;font-weight:800}
.text-muted2,.small-muted{color:var(--muted)}
.card-pro{padding:20px}
.table-pro{--bs-table-bg:transparent;--bs-table-color:#f1f4ff;--bs-table-border-color:var(--line)}
.table-pro tbody tr:hover{background:rgba(255,255,255,.03)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--blue));border:none}
.btn-outline-light{border-color:var(--line)}
.form-control,.form-select,.input-group-text,.form-control:focus,.form-select:focus{
  background:#0f1730;border:1px solid var(--line);color:#fff;box-shadow:none
}
.form-control::placeholder{color:#8491b2}
.login-wrap{max-width:1100px;margin:auto;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:center;padding:30px}
.hero-panel,.auth-panel{
  background:linear-gradient(180deg,rgba(17,25,51,.95),rgba(12,18,35,.93));border:1px solid var(--line);
  border-radius:32px;padding:32px;box-shadow:0 25px 60px rgba(0,0,0,.28)
}
.hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
.feature-chip{padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.main-auth{padding:0}
.chat-layout{display:grid;grid-template-columns:360px 1fr 340px;gap:18px}
.chat-list,.chat-window,.chat-side{min-height:70vh}
.chat-window{display:flex;flex-direction:column}
.chat-row{padding:14px;border:1px solid transparent;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.02);margin-bottom:10px;transition:.18s}
.chat-row:hover,.chat-row.active{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.08)}
.bubble{padding:10px 14px;border-radius:16px;max-width:78%;margin-bottom:10px}
.bubble.in{background:#13203d}
.bubble.out{background:linear-gradient(135deg,#16a34a,#059669);margin-left:auto;color:#fff}
.notes-list .note{padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.filter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.status-box{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.password-wrap{position:relative}
.password-toggle{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:#cfd8ff;font-size:20px;cursor:pointer
}
.password-toggle:focus{outline:none}
.copy-box{display:flex;gap:8px}
.code-block{
  background:#0d1428;border:1px solid var(--line);color:#dbe6ff;border-radius:18px;padding:14px;word-break:break-all
}
@media (max-width: 1199px){
  .chat-layout{grid-template-columns:1fr}
  .sidebar{width:92px;padding:14px}
  .brand-card{padding:12px}
  .brand-card h1,.brand-card p,.side-links .nav-link span,.user-pill small{display:none}
  .side-links .nav-link{justify-content:center}
  .topbar{flex-direction:column;align-items:flex-start}
  .kpi-grid,.filter-row,.login-wrap{grid-template-columns:1fr 1fr}
}
@media (max-width: 767px){
  .sidebar{display:none}
  .main-area{padding:12px}
  .kpi-grid,.filter-row,.login-wrap,.hero-grid{grid-template-columns:1fr}
  .top-actions{width:100%;justify-content:space-between}
  .chat-layout{grid-template-columns:1fr}
  .metric{font-size:1.45rem}
}