:root{
  --bg:#070b13;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.08);
  --text:#e7edf7;
  --muted:rgba(231,237,247,.72);
  --muted2:rgba(231,237,247,.55);
  --good:#33d17a;
  --warn:#f9c74f;
  --bad:#ff6b6b;
}

*{box-sizing:border-box}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(24,48,110,.35), transparent 60%),
              radial-gradient(1000px 700px at 90% 20%, rgba(16,90,60,.25), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 18px 60px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
}

.brand{display:flex; gap:12px; align-items:center;}
.logo{
  width:44px;height:44px;border-radius:14px;
  background: linear-gradient(135deg, rgba(90,140,255,.55), rgba(60,220,170,.35));
  border:1px solid var(--stroke);
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
}
.brandname{font-weight:800;font-size:20px;letter-spacing:.2px}
.brandtag{color:var(--muted);font-size:13px;margin-top:1px}

.nav{
  display:flex; gap:10px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  padding:8px;
  border-radius:16px;
}
.navlink{
  color:var(--muted);
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  transition: all .12s ease;
}
.navlink:hover{background: rgba(255,255,255,.06); color:var(--text);}
.navlink.on{background: rgba(255,255,255,.08); color:var(--text);}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,.35);
}

.h1{font-size:42px;letter-spacing:.2px;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 6px}

.grid{display:grid; gap:14px}
.grid4{grid-template-columns: repeat(4, minmax(0, 1fr))}
@media (max-width: 980px){ .grid4{grid-template-columns: repeat(2, minmax(0, 1fr))} }
@media (max-width: 560px){ .grid4{grid-template-columns: 1fr} }

.stat{
  background: rgba(255,255,255,.035);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  min-height: 92px;
}
.stat .num{font-size:34px; font-weight:850; line-height:1.05}
.stat .lab{color:var(--muted); margin-top:4px}

.badges{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size:13px;
}
.dot{width:9px;height:9px;border-radius:50%}
.dot.good{background:var(--good)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}

.kv{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color: var(--muted);
  font-size:14px;
}
.kv strong{color:var(--text)}

.hostbox{
  background: rgba(255,255,255,.035);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
}
.hostbox .title{
  font-size:18px; font-weight:800; margin:0 0 6px;
}
.hostbox .big{
  /* THIS fixes your "massive text" */
  font-size:22px;
  font-weight:850;
  line-height:1.2;
  margin:0;
  word-break: normal;
  overflow-wrap: anywhere;
}
.hostbox .small{color:var(--muted);font-size:13px;margin-top:6px}

.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  padding:8px 12px;
  border-radius:999px;
  color:var(--text);
  font-size:13px;
}

details{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 12px 14px;
}
summary{cursor:pointer; color:var(--text); font-weight:800}

.motd-pre{
  margin:10px 0 0;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  color: #dbe7ff;
  white-space: pre;        /* keep ASCII box */
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: normal;
}

.footer{
  padding: 18px;
  border-top: 1px solid var(--stroke);
  color: var(--muted2);
  text-align:center;
}
.small{font-size:13px}
.muted{color:var(--muted)}