:root {
  --bg: #061019;
  --panel: rgba(8, 17, 26, .91);
  --line: rgba(143, 166, 185, .18);
  --text: #f4f7f9;
  --muted: #8796a5;
  --blue: #2fafff;
  --sand: #ef942f;
  --green: #20d98d;
  --max: 1250px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: radial-gradient(circle at 50% 10%, #132331 0, #07121c 42%, #050c12 100%); font-family: Inter, Arial, sans-serif; min-width: 320px; }
button, a { font: inherit; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.page-shell { min-height: 100vh; overflow: hidden; background: linear-gradient(90deg, rgba(0,20,35,.1), rgba(34,19,7,.08)); }

.topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.brand { color: #f8fafc; text-decoration: none; font-weight: 800; font-size: 16px; letter-spacing: .07em; }
.brand b { color: #f39a32; }
.network-status { display: flex; align-items: center; gap: 8px; color: #c4cdd5; font-size: 11px; }
.network-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(32,217,141,.9); }

.hero { height: 550px; position: relative; border-top: 1px solid rgba(255,255,255,.03); }
.hero-art { position: absolute; inset: 0; background: url('assets/hero-art.png') center top / cover no-repeat; }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,9,15,.12), transparent 29%, rgba(2,7,11,.04) 50%, transparent 72%, rgba(10,6,3,.1)), linear-gradient(180deg, transparent 55%, #07111a 99%); }
.hero-copy { position: absolute; z-index: 2; top: 125px; left: 50%; width: 390px; transform: translateX(-50%); text-align: center; filter: drop-shadow(0 3px 16px rgba(0,0,0,.7)); }
.hero-copy h1 { margin: 0; font-family: "Barlow Condensed", Impact, sans-serif; font-size: clamp(56px, 4.3vw, 72px); font-weight: 600; line-height: .96; letter-spacing: .005em; }
.hero-copy h1 span { color: var(--sand); white-space: nowrap; }
.hero-copy p { margin: 15px 0 0; color: #d2dae0; font-size: 12px; line-height: 1.5; }
.duo-rule { width: 76px; display: flex; gap: 10px; margin: 20px auto 0; }
.duo-rule i { display: block; height: 2px; flex: 1; }
.duo-rule i:first-child { background: var(--blue); }
.duo-rule i:last-child { background: var(--sand); }

.servers { position: relative; z-index: 3; margin-top: -26px; }
.servers h2 { margin: 0 0 13px 12px; display: flex; gap: 15px; align-items: center; font: 600 27px/1 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.servers h2 span { width: 29px; height: 2px; background: #82909c; transform: skewX(-28deg); }
.server-list { display: grid; gap: 8px; }
.server-card { --accent: var(--blue); min-height: 134px; position: relative; display: grid; grid-template-columns: 220px minmax(250px, 1fr) repeat(3, 122px) 165px 195px; align-items: center; padding: 18px 24px; background: linear-gradient(90deg, rgba(14,27,39,.96), rgba(7,15,23,.94)); border: 1px solid var(--line); box-shadow: inset 3px 0 var(--accent), 0 10px 30px rgba(0,0,0,.11); }
.server-card.sand { --accent: var(--sand); }
.map-shot { width: 210px; height: 94px; object-fit: cover; border: 1px solid color-mix(in srgb, var(--accent), transparent 55%); filter: saturate(.8) contrast(1.04); }
.server-main { padding-left: 18px; }
.server-name { margin: 0 0 8px; font: 700 26px/1 "Barlow Condensed", sans-serif; letter-spacing: .01em; }
.online { display: flex; align-items: center; gap: 7px; color: var(--green); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.online::before { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 8px rgba(32,217,141,.7); }
.server-card.offline .online { color: #e88272; }
.server-card.offline .online::before { background: #e88272; box-shadow: none; }
.address { margin-top: 14px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.metric { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; border-left: 1px solid var(--line); min-width: 0; }
.metric small { color: #7f8d99; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.metric strong { margin-top: 8px; font: 600 20px/1 "Barlow Condensed", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric em { margin-top: 8px; color: #6f7f8c; font-size: 9px; font-style: normal; white-space: nowrap; }
.metric.score strong { color: var(--accent); letter-spacing: .1em; }
.actions { display: grid; gap: 8px; padding-left: 16px; border-left: 1px solid var(--line); }
.btn { height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; color: #dce6ee; background: rgba(8,17,25,.42); border: 1px solid rgba(150,168,182,.25); cursor: pointer; font-size: 10px; font-weight: 600; letter-spacing: .035em; transition: .18s ease; }
.btn.primary { color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 42%); }
.btn:hover { color: #fff; border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 91%); transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.telemetry-note { min-height: 54px; margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: #9aa7b3; background: rgba(7,15,23,.67); border: 1px solid rgba(143,166,185,.13); font-size: 10px; line-height: 1.45; }
.info-icon { width: 21px; height: 21px; flex: 0 0 21px; display: grid; place-items: center; border: 1px solid #91a0ac; border-radius: 50%; font-weight: 700; }
.telemetry-note p { margin: 0; }
.footer { height: 73px; display: flex; align-items: center; justify-content: space-between; color: #657481; font-size: 10px; border-top: 1px solid rgba(143,166,185,.13); margin-top: 15px; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 20; padding: 10px 16px; color: #eaf5fb; background: #132331; border: 1px solid #31526a; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .2s ease; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1220px) {
  .server-card { grid-template-columns: 180px minmax(220px, 1fr) repeat(2, 110px) 160px; }
  .map-shot { width: 170px; }
  .metric.leader { display: none; }
}
@media (max-width: 900px) {
  .hero { height: 530px; }
  .hero-art { background-position: center top; }
  .hero-copy { top: 162px; width: 320px; }
  .hero-copy h1 { font-size: 52px; }
  .server-card { grid-template-columns: 155px 1fr 108px 180px; gap: 0; }
  .map-shot { width: 145px; height: 82px; }
  .metric.map, .metric.score { display: none; }
}
@media (max-width: 680px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .topbar { height: 54px; }
  .hero { height: 570px; }
  .hero-art { background-size: auto 570px; background-position: center top; }
  .hero-vignette { background: linear-gradient(180deg, transparent 37%, rgba(6,16,25,.5) 58%, #07111a 98%); }
  .hero-copy { top: 345px; width: calc(100% - 30px); }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy p { font-size: 11px; }
  .servers { margin-top: -20px; }
  .server-card { grid-template-columns: 90px 1fr; padding: 15px; min-height: 0; }
  .map-shot { width: 78px; height: 72px; }
  .server-main { padding-left: 8px; }
  .server-name { font-size: 23px; }
  .address { white-space: normal; margin-top: 8px; line-height: 1.45; }
  .metric { display: none; }
  .actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border: 0; padding: 13px 0 0; }
  .footer { height: 65px; gap: 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }