@import url("typography.css");
@import url("animations.css");

:root { --ink:#e7f9ff; --muted:#8eaab9; --acid:#45e9ff; --night:#040a12; --line:rgba(105,221,255,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(circle at 85% 0,#0d3445 0,transparent 25%),var(--night); color:var(--ink); font-size:15px; }
.page-header { height:84px; padding:0 5.5vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:0; color:var(--ink); font-size:20px; letter-spacing:-1.5px; text-decoration:none; }
.brand::after { content:" SMP"; color:var(--acid); margin-left:6px; }
.brand span { color:var(--acid); }.brand img { width:32px; height:32px; margin-right:10px; object-fit:contain; filter:drop-shadow(0 0 10px #45e9ff80); }
.brand span { color:var(--acid); }
.page-header nav { display:flex; gap:27px; font-size:13px; }
.page-header nav a, .back { color:var(--muted); text-decoration:none; }
.page-header nav a:hover, .page-header nav a.active { color:var(--acid); }
.discord { color:var(--acid); text-decoration:none; }
.page { max-width:1200px; padding:105px 5.5vw; margin:auto; }
.tag { color:var(--acid); font-size:11px; letter-spacing:1.5px; margin:0 0 20px; }
.page h1 { font-size:clamp(43px,7vw,80px); line-height:.96; margin:0; max-width:850px; }
.lede { max-width:620px; color:#c3c0b5; font-size:17px; line-height:1.65; margin:28px 0 66px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.card { border:1px solid var(--line); padding:25px; min-height:215px; background:linear-gradient(145deg,#0a1e2c,#06101a); }
.number { color:var(--acid); font-size:11px; letter-spacing:1px; }
.card h2 { font-size:18px; margin:34px 0 12px; }
.card p { color:var(--muted); line-height:1.65; margin:0; }
.card .status { display:inline-block; border:1px solid var(--line); padding:6px 8px; margin-top:19px; color:#b6b2a9; font-size:10px; }
.system { display:grid; grid-template-columns:1fr 1fr; margin-top:66px; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.system div { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:23px; }
.system b { color:var(--acid); display:block; margin-bottom:10px; font:700 16px "Chakra Petch",Arial,sans-serif; }
.system span { color:var(--muted); font-size:12px; line-height:1.5; }
.notice { border-left:2px solid var(--acid); padding:17px 20px; background:#082332; color:#c4e1e9; line-height:1.65; max-width:780px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.stat { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:28px; }
.stat b { font-size:32px; letter-spacing:-2px; display:block; }
.stat span { display:block; color:var(--muted); font-size:11px; margin-top:12px; }
.online-list { margin-top:55px; border-top:1px solid var(--line); }
.online-row { display:flex; padding:18px 0; border-bottom:1px solid var(--line); gap:20px; }
.online-row b { min-width:190px; }.online-row span { color:var(--muted); }
footer { border-top:1px solid var(--line); padding:31px 5.5vw; color:var(--muted); font-size:11px; }
@media (max-width:780px) { .page-header{height:68px}.page-header nav{display:none}.page{padding:75px 7vw}.cards,.stat-grid{grid-template-columns:1fr}.system{grid-template-columns:1fr}.lede{margin-bottom:40px} }