:root{
  --bg:#f3f5f8;
  --card:#ffffff;
  --line:#d7dde6;
  --line-2:#eceff4;
  --text:#17212b;
  --muted:#64748b;
  --nav:#20242a;
  --nav-text:#dbe2ea;
  --accent:#4d8f59;
  --accent-soft:#dcead8;
  --blue:#3d78c4;
  --blue-soft:#e8f1fb;
  --danger:#b74f4f;
  --danger-soft:#fdeeee;
  --warn-soft:#fff7df;
  --shadow:0 14px 32px rgba(18,24,32,.06);
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  font-family:"Segoe UI",Tahoma,sans-serif;
  background:#f6f8fb;
}
[hidden]{display:none!important}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card{
  width:min(430px,100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:28px;
}
.login-card h1{margin:0 0 10px;font-size:30px;letter-spacing:-.03em}
.login-card p{margin:0 0 20px;color:var(--muted);line-height:1.45}

.app-shell{min-height:100vh}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--nav);
  color:var(--nav-text);
  border-bottom:1px solid #16191e;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.topbar-inner{
  max-width:1560px;
  margin:0 auto;
  padding:14px 18px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand h1{
  margin:0;
  font-size:20px;
  font-weight:700;
}
.brand p{
  margin:4px 0 0;
  color:#a9b6c5;
  font-size:12px;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.top-user{
  font-size:13px;
  color:#b7c2ce;
}
.tabs{
  max-width:1560px;
  margin:0 auto;
  padding:0 18px 14px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tab{
  border:1px solid #3a4048;
  background:#2a3037;
  color:var(--nav-text);
  border-radius:8px;
  padding:8px 12px;
  font-weight:600;
  cursor:pointer;
}
.tab.active{
  background:#4c525a;
  border-color:#585f69;
}

.page{
  max-width:1560px;
  margin:0 auto;
  padding:18px;
}
.section{display:none}
.section.active{display:block}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:16px;
}
.section-head h2,.card h3{
  margin:0 0 8px;
}
.section-head p,.muted{margin:0;color:var(--muted)}

.overview-grid,
.grid{
  display:grid;
  gap:14px;
}
.overview-grid{grid-template-columns:1fr 1fr;margin-bottom:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.compact-grid{align-items:end}
.users-filter-grid{
  display:grid;
  grid-template-columns:minmax(260px,2fr) repeat(5,minmax(150px,1fr)) minmax(180px,1fr);
  gap:12px;
  align-items:end;
  margin-bottom:12px;
}
.users-filter-grid > div{
  min-width:0;
}
.users-filter-grid input,
.users-filter-grid select{
  margin-bottom:0;
}
.users-filter-meta{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.users-filter-meta .status{
  margin:0;
  min-width:min(420px,100%);
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}

.stats-grid,
.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.metric,
.stats-grid .stat{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  background:#fff;
}
.metric .k,
.stats-grid .k{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}
.metric .v,
.stats-grid .v{
  font-size:28px;
  font-weight:700;
  letter-spacing:-.04em;
}
.server-stat{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
}
.server-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  font-size:13px;
  color:var(--text);
}
.server-metrics span{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line-2);
  border-radius:8px;
  background:#f9fbff;
}
.server-meta{
  color:var(--muted);
  font-size:12px;
}

label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  padding:11px 12px;
  margin-bottom:12px;
  font:inherit;
}
textarea{
  min-height:120px;
  resize:vertical;
  font-family:Consolas,"Cascadia Mono",monospace;
  font-size:13px;
}
.compact-area{
  min-height:86px;
}
.checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px 0 14px;
  color:var(--text);
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
}
.checkbox-row input{
  width:16px;
  height:16px;
  margin:0;
  padding:0;
  flex:0 0 auto;
}
.checkbox-row span{
  color:var(--muted);
}
button{
  border:0;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  font:inherit;
}
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.fill{width:100%}
.btn-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.toolbar-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.bulk-message-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.bulk-message-head .status{
  margin:0;
  min-width:min(360px,100%);
}
.bulk-message-composer textarea{
  margin-bottom:12px;
}
.btn-main{background:var(--accent);color:#fff}
.btn-alt{background:#eef5ea;color:#2d5831;border:1px solid #c6dbc0}
.btn-blue{background:var(--blue-soft);color:#1e4f91;border:1px solid #cbdcf3}
.btn-danger{background:var(--danger-soft);color:#8f3030;border:1px solid #efc4c4}
.mini{padding:7px 10px;border-radius:8px;font-size:12px}

.status{
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fbfd;
  padding:12px 14px;
  white-space:pre-wrap;
  word-break:break-word;
}
.status.error{background:#fff2f2;border-color:#efc7c7}
.status.warn{background:var(--warn-soft);border-color:#efd8a8}
.status.ok{background:#eef8ea;border-color:#c8dfc2}
.status.neutral{background:#f8fbfd}
.mono{
  white-space:pre-wrap;
  word-break:break-word;
  font-family:Consolas,"Cascadia Mono",monospace;
  font-size:12px;
}

.pill{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  background:#eff4f7;
  color:var(--muted);
  border:1px solid var(--line);
}
.pill.good{background:#e9f6e8;color:#2d6b36;border-color:#cae2c7}
.pill.warn{background:#fff6df;color:#976d14;border-color:#edd7a0}
.pill.bad{background:#fdeeee;color:#994040;border-color:#efc2c2}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  margin-bottom:12px;
}
.users-group{
  padding:12px;
  border-bottom:1px solid var(--line-2);
}
.users-group:last-child{
  border-bottom:0;
}
.users-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.users-group-head h3{
  margin:0;
}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-2);
  text-align:left;
  vertical-align:top;
}
th{
  position:sticky;
  top:0;
  background:#f5f7fb;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
tbody tr.selected td{background:#eef6ff}
tbody tr:hover td{background:#fafcff}
.users-table th:nth-child(3),
.users-table td:nth-child(3){
  min-width:220px;
}
.users-table th:nth-child(4),
.users-table td:nth-child(4){
  min-width:96px;
  white-space:nowrap;
}
.users-table th:nth-child(5),
.users-table td:nth-child(5){
  white-space:nowrap;
}
.users-table th:last-child,
.users-table td:last-child{
  min-width:290px;
}

.user-cell strong,
.service-item strong{display:block}
.user-meta-line{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:3px;
}
.user-meta-line .subtext{
  margin-top:0;
}
.subtext,
.service-item small{
  display:block;
  color:var(--muted);
  margin-top:3px;
}
.row-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.row-pills{
  min-width:180px;
}

.service-list{display:grid;gap:8px}
.overview-control{
  display:grid;
  gap:14px;
}
.overview-control > .status{
  margin:0;
}
.service-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.alert-line{
  padding:10px 12px;
  border:1px solid #f1c9c9;
  border-radius:10px;
  background:#fff4f4;
  color:#7a2b2b;
  margin-bottom:8px;
}
.service-side{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width:1320px){
  .overview-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .metrics,
  .stats-grid{
    grid-template-columns:1fr;
  }
  .users-filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .toolbar-row{
    flex-direction:column;
    align-items:stretch;
  }
  .bulk-message-head{
    flex-direction:column;
    align-items:stretch;
  }
}
@media (max-width:920px){
  .users-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .users-filter-meta{
    justify-content:stretch;
  }
  .users-filter-meta .status{
    width:100%;
  }
}
@media (max-width:640px){
  .users-filter-grid{
    grid-template-columns:1fr;
  }
}