:root { color-scheme: dark; --bg:#080b10; --surface:#10151d; --surface-2:#151c26; --line:#273140; --text:#f4f7fb; --muted:#9aa8b9; --accent:#8dfcce; --accent-deep:#214d43; --online:#6bf0ac; --offline:#ff7c86; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 15% 0%,rgba(63,157,127,.17),transparent 32rem),radial-gradient(circle at 100% 30%,rgba(60,93,150,.12),transparent 36rem),var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
.shell { position:relative; width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:56px 0 72px; }
.hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; padding:30px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(135deg,rgba(19,29,38,.96),rgba(12,17,24,.96)); box-shadow:0 24px 70px rgba(0,0,0,.3); }
.hero__mark { display:grid; width:58px; height:58px; place-items:center; border:1px solid #397462; border-radius:15px; color:#07120f; background:var(--accent); font:900 28px/1 ui-monospace,SFMono-Regular,Consolas,monospace; box-shadow:0 0 34px rgba(141,252,206,.2); }
.hero__mark img { grid-area:1/1; width:100%; height:100%; border-radius:14px; object-fit:cover; image-rendering:pixelated; }
.hero__mark span { grid-area:1/1; }
.eyebrow { margin:0 0 7px; color:var(--accent); font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:6px; font-size:clamp(25px,4vw,39px); letter-spacing:-.035em; } h2 { margin-bottom:0; font-size:24px; letter-spacing:-.025em; } .motd { margin:0; color:var(--muted); } .motd-obfuscated { filter:blur(2px); user-select:none; } .notice { margin:9px 0 0; color:var(--accent); font-size:14px; white-space:pre-line; }
.header-rules { margin-top:17px; }
.header-rules__title { margin:0 0 8px; color:var(--text); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.header-rules__list { display:grid; grid-template-columns:1fr; gap:5px 22px; margin:0; padding:0; color:var(--muted); font-size:13px; line-height:1.4; list-style:none; }
.header-rules__list.columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.header-rules__list.columns-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.header-rules__list li { position:relative; padding-left:17px; overflow-wrap:anywhere; }
.header-rules__list li::before { content:"—"; position:absolute; left:0; color:var(--accent); }
.header-actions { position:relative; margin-top:14px; }
.header-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.total { min-width:145px; padding:16px 18px; border:1px solid var(--accent-deep); border-radius:14px; color:var(--accent); background:rgba(56,130,109,.1); text-align:center; font-weight:750; }
.copy-server,.header-link { padding:9px 11px; border:1px solid #344253; border-radius:9px; color:var(--text); background:#171f29; cursor:pointer; font:650 12px/1.2 inherit; text-decoration:none; }
.copy-server:hover,.copy-server:focus-visible,.header-link:hover,.header-link:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.copy-feedback { position:absolute; top:calc(100% + 5px); left:0; color:var(--muted); font-size:11px; white-space:nowrap; }
.status-bar { display:flex; justify-content:space-between; gap:16px; margin:18px 2px 52px; color:var(--muted); font-size:13px; }
.connection-dot,.status-dot { display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:var(--muted); }
.connection-dot.connected,.status-dot.online { background:var(--online); box-shadow:0 0 12px rgba(107,240,172,.65); } .connection-dot.failed,.status-dot.offline { background:var(--offline); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; } .summary { color:var(--muted); font-size:14px; }
.server-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.server-card { display:flex; min-height:225px; flex-direction:column; padding:22px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(150deg,var(--surface-2),var(--surface)); transition:transform .18s ease,border-color .18s ease; }
.server-card:hover { transform:translateY(-2px); border-color:#3a495d; } .server-card.offline { background:linear-gradient(150deg,#19171c,#111318); }
.card-top { display:flex; align-items:start; justify-content:space-between; gap:16px; } .server-name { margin-bottom:5px; font-size:19px; line-height:1.25; } .server-version { margin:0; color:var(--muted); font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.server-info { margin:17px 0 0; color:var(--muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-line; }
.state { flex:none; padding:6px 9px; border-radius:999px; color:var(--online); background:rgba(61,151,106,.12); font-size:12px; font-weight:700; } .state.offline { color:var(--offline); background:rgba(185,67,77,.12); }
.metrics { display:flex; gap:10px; margin:26px 0 22px; } .metric { flex:1; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(0,0,0,.13); overflow-wrap:anywhere; } .metric__label { display:block; margin-bottom:4px; color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; } .metric__value { font:700 15px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; }
.links { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; } .link { padding:8px 11px; border:1px solid #344253; border-radius:9px; color:var(--text); background:#171f29; text-decoration:none; font-size:13px; font-weight:650; } .link:hover,.link:focus-visible { border-color:var(--accent); color:var(--accent); outline:none; }
.empty-state { padding:52px 24px; border:1px dashed var(--line); border-radius:17px; color:var(--muted); text-align:center; }
@media (max-width:900px) { .server-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .shell { width:min(100% - 22px,1180px); padding-top:22px; } .hero { grid-template-columns:auto 1fr; padding:21px; } .hero__mark { width:47px; height:47px; border-radius:12px; } .total { grid-column:1/-1; width:100%; } .header-rules__list.columns-2,.header-rules__list.columns-3 { grid-template-columns:1fr; } .status-bar { align-items:flex-start; flex-direction:column; margin-bottom:38px; } .server-grid { grid-template-columns:1fr; } .server-card { min-height:0; } }
@media (prefers-reduced-motion:reduce) { .server-card { transition:none; } }