:root{
  color-scheme: dark;
  --bg:#07111d;
  --panel:#0d1b2c;
  --panel2:#10243a;
  --line:#1d3550;
  --text:#e7f0fb;
  --muted:#8ca0b8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:radial-gradient(circle at top,#0f2236 0,#07111d 48%,#050b12 100%);color:var(--text)}
a{color:#9ec9ff;text-decoration:none}
button,input,textarea{font:inherit}
.hidden{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.center{text-align:center}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.primary,.tiny,.linkbtn,.tab,.side-btn{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  color:var(--text);
  border-radius:14px;
  padding:.8rem 1rem;
  cursor:pointer
}
.primary{background:linear-gradient(180deg,#215d9c,#12365f);border-color:#2d6dae}
.tiny{padding:.5rem .8rem;border-radius:12px;font-size:.95rem}
.linkbtn{display:inline-flex;align-items:center}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:1.2rem}
.auth-card{width:min(480px,100%);background:rgba(13,27,44,.94);border:1px solid var(--line);border-radius:24px;padding:1.4rem;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.auth-card h1{margin:.2rem 0 0;font-size:2.6rem;letter-spacing:.18rem}
.auth-form{display:grid;gap:.65rem;margin-top:1rem}
.auth-form input,.search,.chat-input{
  width:100%;border:1px solid var(--line);background:#08131f;color:var(--text);border-radius:14px;padding:.9rem 1rem;outline:none
}
.auth-form input:focus,.search:focus,.chat-input:focus{border-color:#4f88c7;box-shadow:0 0 0 3px rgba(31,95,168,.18)}
.auth-error{background:rgba(211,69,63,.12);border:1px solid #7a3230;color:#ff9d97;border-radius:12px;padding:.7rem .85rem;font-size:.92rem;margin:0}
.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr) 280px;gap:1rem;min-height:100vh;padding:1rem}
.sidebar,.main{min-height:calc(100vh - 2rem)}
.sidebar,.card,.panel,.modal,.call-topbar{
  background:rgba(13,27,44,.92);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 55px rgba(0,0,0,.28)
}
.sidebar{padding:1rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem;align-self:start}
.brand{display:flex;gap:.85rem;align-items:center;padding:.4rem .2rem 1rem}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,#2a6cb6,#133d6b);font-weight:800}
.side-btn{width:100%;text-align:left}
.side-btn.active,.tab.active{border-color:#5aa4f6;background:linear-gradient(180deg,#244f80,#173b61)}
.panel,.card,.subcard{padding:1rem}
.panel-head,.card-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.list{display:grid;gap:.55rem;margin-top:.8rem;max-height:48vh;overflow:auto}
.item,.msg{
  border:1px solid var(--line);background:#08131f;border-radius:16px;padding:.8rem .85rem
}
.main{display:grid;grid-template-rows:auto 1fr}
.topbar,.call-topbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.content{display:none;padding:0 0 1rem}
.content.active{display:block}
.card{margin-bottom:1rem}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.chat-log{min-height:380px;max-height:58vh;overflow:auto;display:grid;gap:.65rem;padding:.4rem 0 1rem}
.msg .meta{font-size:.86rem;color:var(--muted);margin-bottom:.25rem;display:flex;justify-content:space-between;gap:.5rem}
.chat-input{min-height:120px;resize:vertical}
.notify-list{display:grid;gap:.55rem;max-height:36vh;overflow:auto}
.notify{border-left:4px solid #4f88c7;background:#08131f;border:1px solid var(--line);border-radius:14px;padding:.75rem .85rem}
body.call-page{background:#000}
.call-shell{padding:1rem;min-height:100vh}
.call-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:1rem}
.call-status{padding:1rem;border-radius:16px;background:#08131f;border:1px solid var(--line)}
.settings-block{margin-bottom:1.1rem}
.settings-label{display:block;margin-bottom:.4rem;font-size:.92rem;color:var(--muted)}
.settings-row{margin-top:.6rem}
.meter{flex:1;min-width:120px;height:14px;border-radius:8px;background:#08131f;border:1px solid var(--line);overflow:hidden}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,#2d9e5c,#e0b73c,#d3453f);transition:width .06s linear}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px);z-index:40}
.modal{position:fixed;inset:auto 50% 50% auto;transform:translate(50%,50%);z-index:50;width:min(560px,92vw);padding:1rem}
.checkline{display:flex;align-items:center;gap:.5rem;margin:.8rem 0}
@media (max-width: 1100px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{position:relative;top:0}
  .grid-two,.call-grid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .topbar,.call-topbar{flex-direction:column;align-items:stretch}
  .app-shell{padding:.6rem;gap:.6rem}
  .tabs,.row{width:100%}
  .tabs .tab,.row > *,.top-actions{width:100%}
}

.top-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.status-pill{
  border:1px solid var(--line);
  background:#08131f;
  color:var(--text);
  border-radius:999px;
  padding:.45rem .8rem;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.status-ok{border-color:#2d9e5c;color:#b8ffd0}
.status-warn{border-color:#c49a2c;color:#ffe3a0}
.status-bad{border-color:#d3453f;color:#ffb3ae}
.danger{border-color:#7a3230;background:linear-gradient(180deg,#6c1e1e,#3d1212)}
.friend-item.selected{border-color:#5aa4f6;background:#102744}
.dm-grid .card:last-child{grid-column:1 / -1}
.dm-log{min-height:260px;max-height:46vh}
.subtle-note{margin-top:.6rem;color:var(--muted);font-size:.9rem}
.friend-item{display:flex;justify-content:space-between;align-items:center;gap:.6rem;cursor:pointer}
.friend-item .friend-meta{display:flex;flex-direction:column;gap:.15rem}
@media (max-width: 1100px){
  .dm-grid .card:last-child{grid-column:auto}
}


.banner{border:1px solid var(--line);background:#08131f;border-radius:14px;padding:.75rem .85rem;margin:.8rem 0}
.banner.error{border-color:#7a3230;background:rgba(211,69,63,.12);color:#ffb3ae}
.page-shell{max-width:1200px;margin:0 auto;padding:1rem}
.page-hero{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.eyebrow{color:#9ec9ff;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin-bottom:.35rem}
.loading-bar{width:min(280px,100%);height:12px;border-radius:999px;background:#08131f;border:1px solid var(--line);overflow:hidden;margin:1rem auto}
.loading-bar-fill{height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,#2d6dae,#5aa4f6);animation:loading-slide 1.1s ease-in-out infinite}
@keyframes loading-slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.admin-summary{margin:1rem 0}
.stat-card{display:flex;flex-direction:column;gap:.35rem}
.stat-label{color:var(--muted);font-size:.92rem}
.stat-value{font-size:2rem;font-weight:800;line-height:1}
.admin-user-list{max-height:none}
.admin-user-item{display:grid;gap:.55rem}
.admin-user-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.user-badge{display:inline-flex;align-items:center;border:1px solid var(--line);background:#08131f;border-radius:999px;padding:.25rem .6rem;font-size:.8rem}
.user-badge.status-ok{border-color:#2d9e5c;color:#b8ffd0}
.user-badge.status-warn{border-color:#c49a2c;color:#ffe3a0}
.user-badge.status-bad{border-color:#d3453f;color:#ffb3ae}
.admin-user-meta{word-break:break-word}
.admin-user-actions{justify-content:flex-start}
@media (max-width: 700px){
  .page-shell{padding:.6rem}
  .admin-user-head{flex-direction:column}
}