:root{
  --bg:#0a0f14;--panel:#0b141e;--text:#e5ecf3;--muted:#8ea0b6;
  --green:#2ee6a6;--amber:#ffd166;--red:#ff6b6b;--border:#1a2a3b;--blue:#5ac8fa;
  --accent: var(--blue);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--text);
  background:#0a0f14;
  min-height:100%;
}
body{
  margin:0;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--text);
  background:#0a0f14;
  min-height:100vh;
}

h1{margin:0 0 4px 0;letter-spacing:.1em}
.sub{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px 0}
.card{
  width:100%;
  max-width:none;
  min-height:100vh;     
  height:auto;        
  margin:0;
  background:linear-gradient(180deg,rgba(11,20,30,.95),rgba(6,10,16,.92));
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden;     
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);row-gap:16px;column-gap:16px}
.tile{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);padding:12px;border-radius:12px;min-height:120px}
.kv{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.val{font-size:18px;margin-top:4px}
.bar{height:8px;border-radius:999px;background:#0e1826;overflow:hidden;border:1px solid rgba(255,255,255,.06);margin-top:8px}

.bar > b{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--green), #9ae6b4);
  transition: width .9s ease;
}

.table{font-size:13px;margin-top:8px;border-collapse:collapse;width:100%}
.table th,.table td{padding:6px 8px;border-top:1px solid rgba(255,255,255,.06);text-align:left}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.ok{color:var(--green)} .ok .dot{background:var(--green)}
.warn{color:var(--amber)} .warn .dot{background:var(--amber)}
.down{color:var(--red)} .down .dot{background:var(--red)}
.alert-info{color:var(--blue)} .alert-warn{color:var(--amber)} .alert-crit{color:var(--red)}
.alert-time{
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.footer{margin-top:0;color:var(--muted);font-size:12px;text-align:center;align-self:stretch}
*{-webkit-user-select:none;-moz-user-select:none;user-select:none}

.table{ table-layout: fixed; width:100%; border-collapse: collapse; }
.table th, .table td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#hosts thead th:nth-child(1){ width: 22%; } 
#hosts thead th:nth-child(2){ width: 14%; } 
#hosts thead th:nth-child(3){ width: 34%; } 
#hosts thead th:nth-child(4){ width: 15%; } 
#hosts thead th:nth-child(5){ width: 15%; }

#hosts tbody tr{ height: 28px; }
#hosts td .dot{ margin-right: 6px; }
#hosts td.status-text{ display: inline-block; min-width: 70px; } 

.table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.table th, .table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#alerts td:first-child, #topconns td:first-child{ white-space:nowrap; }

.tile.full{ grid-column: 1 / -1; }

#active-connection {
  position: absolute;
  top: 16px;
  right: 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 220px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  line-height: 1.3;   
}

#active-connection .time {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

#active-connection .ip,
#active-connection .country,
#active-connection .net {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

#active-connection .ip span,
#active-connection .country span,
#active-connection .net span {
  color: var(--text);
  font-weight: 600;
  margin-left: 4px;
}

#hosts td .bar b{
  background: var(--green) !important;   
  transition: width 600ms ease, background 220ms ease;
  border-radius: 999px;
}
#hosts tr .bar b.warn{ background: var(--amber) !important; }
#hosts tr .bar b.down{ background: var(--red) !important; }

.tile.full{ margin-bottom:0; }
.table{ border-collapse:separate; border-spacing:0; }