:root {
  --public-accent: #3b82f6;
  --public-accent-soft: rgba(59,130,246,.16);
  --public-bg: #050811;
  --public-card: rgba(10,16,30,.78);
  --public-border: rgba(117,146,210,.28);
  --public-text: #f5f7ff;
  --public-muted: #8d98b3;
  --public-green: #44e49a;
  --public-yellow: #f4c45b;
  --public-red: #f06a7b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--public-text);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(21,73,180,.18), transparent 48%),
    linear-gradient(180deg, #04070f 0%, var(--public-bg) 56%, #03050b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.public-stars {
  position: fixed; inset: 0; pointer-events: none; opacity: .52;
  background-image: radial-gradient(circle at 11% 19%, #69a8ff 0 1px, transparent 1.5px), radial-gradient(circle at 78% 20%, #477bff 0 1px, transparent 1.5px), radial-gradient(circle at 89% 52%, #5da5ff 0 1px, transparent 1.5px), radial-gradient(circle at 32% 33%, #3450b7 0 1px, transparent 1.5px), radial-gradient(circle at 57% 13%, #375fd6 0 1px, transparent 1.5px);
  background-size: 260px 210px, 340px 280px, 290px 240px, 410px 310px, 360px 260px;
}
.public-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 28px; position: relative; }
.public-header { display:flex; align-items:center; justify-content:space-between; min-height:54px; border-bottom:1px solid rgba(117,146,210,.16); }
.public-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.public-logo { display:grid; place-items:center; width:39px; height:39px; border:1px solid color-mix(in srgb, var(--public-accent) 72%, #fff 8%); border-radius:12px; background:linear-gradient(145deg, var(--public-accent-soft), rgba(10,18,38,.75)); color:#8bc0ff; font-size:22px; box-shadow:0 0 24px color-mix(in srgb, var(--public-accent) 28%, transparent); overflow:hidden; }
.public-logo img { width:100%; height:100%; object-fit:cover; }
.public-brand-name { font-weight:800; font-size:17px; letter-spacing:.02em; }
.public-brand-sub { color:var(--public-muted); font-size:10px; margin-top:2px; letter-spacing:.09em; text-transform:uppercase; }
.public-live-indicator { color:var(--public-green); font-size:11px; display:flex; align-items:center; gap:7px; }
.public-live-indicator span { width:7px; height:7px; border-radius:50%; background:var(--public-green); box-shadow:0 0 10px var(--public-green); }
.public-hero { text-align:center; padding:66px 0 40px; }
.public-eyebrow { color:#67a8ff; font-size:11px; letter-spacing:.22em; font-weight:700; }
.public-hero h1 { margin:15px 0 9px; font-size:clamp(30px, 5vw, 44px); line-height:1.12; letter-spacing:-.035em; }
.public-hero h1 span { color:var(--public-accent); text-shadow:0 0 22px color-mix(in srgb, var(--public-accent) 36%, transparent); }
.public-hero p { color:#a8b0c5; font-size:15px; margin:0; }
.public-updated { display:inline-flex; margin-top:22px; padding:10px 18px; border:1px solid rgba(117,146,210,.25); border-radius:999px; color:#aeb8d0; background:rgba(2,7,18,.55); font-size:12px; }
.public-state { color:var(--public-muted); font-size:12px; text-align:center; min-height:18px; margin:0 0 14px; }
.public-state.error { color:var(--public-yellow); }
.public-server-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.public-card { min-width:0; padding:20px 19px 16px; border:1px solid var(--public-border); border-radius:14px; background:linear-gradient(145deg, rgba(12,19,34,.88), var(--public-card)); box-shadow:0 14px 40px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025); transition:border-color .2s, transform .2s; }
.public-card:hover { border-color:color-mix(in srgb, var(--public-accent) 70%, transparent); transform:translateY(-2px); }
.public-card-top { display:flex; align-items:flex-start; gap:11px; min-height:49px; }
.public-country-flag { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#172139; font-size:24px; flex:none; }
.public-card-heading { min-width:0; flex:1; }
.public-card-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; }
.public-card-location { color:var(--public-muted); font-size:11px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.public-status { flex:none; display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; font-size:10px; white-space:nowrap; font-weight:700; }
.public-status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.public-status-online { color:var(--public-green); background:rgba(68,228,154,.1); }
.public-status-high_latency { color:var(--public-yellow); background:rgba(244,196,91,.12); }
.public-status-offline { color:var(--public-red); background:rgba(240,106,123,.12); }
.public-status-unknown { color:#9ca6bd; background:rgba(156,166,189,.11); }
.public-card-divider { height:1px; background:rgba(117,146,210,.16); margin:17px 0 12px; }
.public-card-metrics { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.public-card-metric { min-width:0; }
.public-card-metric-label { color:var(--public-muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.public-card-metric-value { color:var(--public-green); font-family:"SFMono-Regular", Consolas, monospace; font-size:15px; font-weight:700; margin-top:4px; }
.public-card-metric-value.high { color:var(--public-yellow); }
.public-card-metric-value.down { color:var(--public-red); }
.public-card-meta { color:var(--public-muted); font-size:10px; margin-top:12px; display:flex; justify-content:space-between; gap:8px; }
.public-card-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.public-summary { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:28px; padding:18px 20px; border:1px solid rgba(117,146,210,.24); border-radius:14px; background:rgba(8,14,27,.76); }
.public-summary-item { display:flex; align-items:center; justify-content:center; gap:11px; border-right:1px solid rgba(117,146,210,.17); }
.public-summary-item:last-child { border-right:0; }
.public-summary-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:50%; font-size:18px; background:rgba(59,130,246,.15); color:#63a4ff; }
.public-summary-icon.green { color:var(--public-green); background:rgba(68,228,154,.12); }
.public-summary-icon.yellow { color:var(--public-yellow); background:rgba(244,196,91,.12); }
.public-summary-icon.red { color:var(--public-red); background:rgba(240,106,123,.12); }
.public-summary-item strong { display:block; font-size:20px; line-height:1; }
.public-summary-item span { display:block; color:var(--public-muted); font-size:10px; margin-top:5px; }
.public-footer { color:#69748c; text-align:center; font-size:11px; margin-top:31px; }
.public-empty { grid-column:1 / -1; border:1px dashed rgba(117,146,210,.3); border-radius:14px; color:var(--public-muted); text-align:center; padding:35px 20px; }

@media (max-width: 980px) { .public-server-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) {
  .public-shell { width:min(100% - 22px, 1180px); padding-top:14px; }
  .public-header { min-height:48px; }
  .public-live-indicator { font-size:10px; }
  .public-hero { padding:45px 0 28px; }
  .public-hero p { font-size:13px; }
  .public-server-grid { grid-template-columns:1fr; gap:11px; }
  .public-summary { grid-template-columns:repeat(2, 1fr); gap:16px 0; }
  .public-summary-item:nth-child(2) { border-right:0; }
  .public-summary-item:nth-child(-n+2) { padding-bottom:4px; }
  .public-summary-item:nth-child(n+3) { padding-top:4px; }
}