:root {
  --bg: #080b13;
  --panel: rgba(17, 23, 37, .83);
  --panel-2: #111827;
  --line: #273247;
  --text: #eef3ff;
  --muted: #9aa8bd;
  --green: #66e08b;
  --green-2: #2fbf71;
  --red: #ff6b6b;
  --amber: #ffcc66;
  --blue: #68a7ff;
  --shadow: 0 20px 60px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(61, 88, 140, .18), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(47, 191, 113, .10), transparent 30rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(#2a3550 1px, transparent 1px), linear-gradient(90deg, #2a3550 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 24px; padding: 18px max(24px, calc((100vw - 1180px)/2));
  background: rgba(8, 11, 19, .72); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; width: fit-content; }
.brand-cube {
  width: 42px; height: 42px; display:grid; place-items:center; font-weight:900; font-size:20px;
  background: linear-gradient(145deg, #77ed9a, #289f63); color:#07120b;
  clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);
  box-shadow: 0 0 30px rgba(102,224,139,.25);
}
.brand strong { display:block; font-size:15px; letter-spacing:.01em; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-weight:800; font-size:9px; letter-spacing:.24em; }
.tabs { display:flex; gap:6px; padding:5px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); border-radius:12px; }
.tab { border:0; color:var(--muted); background:transparent; padding:9px 14px; border-radius:8px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.tab:hover, .tab.active { color:var(--text); background:#1b2537; }
.button { border:1px solid var(--line); border-radius:9px; padding:10px 14px; text-decoration:none; color:var(--text); font:inherit; font-weight:800; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.button.primary { background:var(--green); border-color:var(--green); color:#07130c; }
.button.primary:hover { background:#79eca0; }
.button.ghost { background:rgba(255,255,255,.04); }
.button.ghost:hover { border-color:#4b5b75; }
.site-header > .button { justify-self:end; }
.hidden { display:none !important; }
main { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.hero { padding:92px 0 68px; max-width:770px; }
.eyebrow, .kicker { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.22em; }
.pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:8px; box-shadow:0 0 0 5px rgba(102,224,139,.08); }
.hero h1 { font-size:clamp(48px, 8vw, 88px); line-height:.94; letter-spacing:-.055em; margin:18px 0 22px; }
.hero h1 span { color:var(--green); }
.hero p { color:var(--muted); font-size:18px; line-height:1.7; max-width:620px; }
.hero-actions { display:flex; gap:10px; margin-top:30px; }
.panel { margin-bottom:48px; padding:28px; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:18px; box-shadow:var(--shadow); backdrop-filter:blur(10px); }
.view { display:none; }
.view.active-view { display:block; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
h2 { margin:6px 0 0; font-size:28px; letter-spacing:-.02em; }
.refresh-wrap { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.icon-button { width:34px; height:34px; border-radius:8px; border:1px solid var(--line); color:var(--text); background:#141c2a; cursor:pointer; font-size:18px; }
.icon-button.spinning { animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.server-card { position:relative; overflow:hidden; padding:22px; background:linear-gradient(165deg, rgba(28,38,57,.92), rgba(15,21,33,.96)); border:1px solid #2a354a; border-radius:15px; }
.server-card.featured::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--green),transparent 80%); }
.card-top { display:flex; justify-content:space-between; align-items:center; }
.server-icon { width:48px; height:48px; display:grid; place-items:center; font-size:25px; background:#111827; border:1px solid #2d3a50; border-radius:12px; }
.status-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:7px 10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.status-pill span { width:7px; height:7px; border-radius:50%; background:var(--amber); }
.status-pill.online span { background:var(--green); box-shadow:0 0 12px rgba(102,224,139,.75); }
.status-pill.offline span { background:var(--red); }
.status-pill.online b { color:var(--green); }
.status-pill.offline b { color:var(--red); }
.server-name { margin:20px 0 8px; font-size:24px; }
.server-description { margin:0 0 18px; color:var(--muted); line-height:1.55; min-height:48px; }
.server-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.meta-pill { font-size:11px; font-weight:800; color:#c6d1e2; padding:6px 8px; border-radius:7px; border:1px solid #2d3a50; background:#111827; }
.address-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; background:#0b111d; border:1px solid #273247; border-radius:10px; }
.address-row small, .stats-row small { display:block; color:#718198; font-size:9px; font-weight:900; letter-spacing:.15em; margin-bottom:4px; }
.server-address { color:#eaf1ff; font-family:"SFMono-Regular",Consolas,monospace; font-size:13px; overflow-wrap:anywhere; }
.copy-button { flex:0 0 auto; border:1px solid #344158; border-radius:7px; background:#192335; color:#dce7f8; padding:8px 10px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
.copy-button:hover { border-color:#60728f; }
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.stats-row > div { padding:11px 12px; background:rgba(6,10,18,.45); border:1px solid rgba(255,255,255,.055); border-radius:9px; }
.stats-row strong { font-size:13px; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.card-actions .button { flex:1; }
.server-notes { color:#8090a8; font-size:11px; margin:12px 1px 0; }
.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.step { display:flex; gap:15px; padding:19px; background:#101724; border:1px solid #273247; border-radius:12px; }
.step > span { color:var(--green); font-family:monospace; font-weight:900; font-size:12px; }
.step h3 { margin:0 0 6px; font-size:15px; }
.step p, .about-card p { margin:0; color:var(--muted); line-height:1.55; font-size:13px; }
.notice { margin-top:14px; padding:15px 17px; border-radius:10px; background:rgba(104,167,255,.07); border:1px solid rgba(104,167,255,.20); color:#b8c8dd; font-size:13px; }
.notice strong { color:#dce9ff; }
.about-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.about-card { padding:20px; border:1px solid #273247; border-radius:12px; background:#101724; }
.about-card h3 { margin:0 0 8px; }
.skeleton-card { height:360px; border-radius:15px; background:linear-gradient(90deg,#121a28,#182235,#121a28); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.error-box { grid-column:1/-1; padding:20px; color:#ffd2d2; background:rgba(255,107,107,.07); border:1px solid rgba(255,107,107,.25); border-radius:12px; }
footer { width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:8px 0 38px; color:#64738a; display:flex; gap:10px; justify-content:center; font-size:11px; }
.footer-dot { color:#30405a; }
@media (max-width: 800px) {
  .site-header { grid-template-columns:1fr auto; padding:14px 20px; }
  .tabs { grid-column:1/-1; grid-row:2; overflow:auto; justify-content:center; }
  .site-header > .button { display:none !important; }
  .hero { padding:62px 0 44px; }
  .server-grid, .steps, .about-grid { grid-template-columns:1fr; }
  .section-head { align-items:start; flex-direction:column; }
}
@media (max-width: 480px) {
  main, footer { width:min(100% - 24px,1180px); }
  .panel { padding:18px; border-radius:14px; }
  .hero h1 { font-size:48px; }
  .stats-row { grid-template-columns:1fr; }
  .address-row { align-items:flex-start; flex-direction:column; }
  .copy-button { width:100%; }
}