:root{
  --bg:#0a0d12;--bg2:#0e1521;--card:#111826cc;--border:#1f2a38;
  --text:#e8eef7;--muted:#a8b3c7;--accent:#7dd3fc;--radius:16px;
  --shadow:0 18px 60px rgba(0,0,0,.45)
}
*{box-sizing:border-box}html,body{height:100%}
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}
body{
  margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%,rgba(59,130,246,.12) 0,transparent 60%) no-repeat,
    radial-gradient(900px 600px at 100% 10%,rgba(34,197,94,.10) 0,transparent 55%) no-repeat,
    linear-gradient(180deg,var(--bg),var(--bg2)) no-repeat;
  background-attachment:fixed;line-height:1.55
}
.wrap{min-height:100svh;width:min(1100px,94%);margin:0 auto;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;align-content:start;padding:10px 0 18px}
.layout{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:880px){.layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.brand{text-align:center}
.brand h1{margin:0;font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:.6px;font-weight:900;text-shadow:0 2px 24px hsla(220 100% 60%/.25)}
.tag{margin:4px 0 0;color:var(--muted)}
.card{backdrop-filter:blur(10px);background:var(--card);border:1px solid color-mix(in oklab,var(--border) 85%,transparent);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card-title{display:block;text-align:center;margin:0 0 8px;font-size:1.1rem;letter-spacing:.3px}
.btn{appearance:none;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,#16202c,#0f1722);color:var(--text);font-weight:800;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;line-height:1;font-size:.92rem;text-decoration:none}
.btn:hover{transform:translateY(-1px);border-color:#2b3a4f;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}.btn.success{background:linear-gradient(180deg,#163225,#10231b);border-color:#214c3a}
.btn-block{display:inline-flex;width:100%;justify-content:center}
.icon{width:14px;height:14px;fill:currentColor;opacity:.85}
.input-group{display:inline-flex;align-items:stretch;border:1px solid var(--border);background:#0b111a;border-radius:10px;overflow:hidden}
.input-group .btn-primary{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}
.ip-text{display:inline-flex;align-items:center;padding:7px 9px;font:400 .9rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0a0f16;border-right:1px dashed var(--border)}
.btn-discord{background:#5865F2;border-color:#4752C4;color:#fff}
.btn-discord:hover{background:#4752C4}
.join-card{text-align:center}.join-card .actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.sidebar{position:sticky;top:10px;height:fit-content}
.modpack .tiny{font-size:.85rem;opacity:.9}
.mod-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.mod-list.compact li{display:flex;align-items:baseline;justify-content:space-between;padding:8px 10px;border:1px solid var(--border);background:#0c131d;border-radius:10px}
.mod-list a{color:var(--accent);font-weight:700;text-decoration:none}
.mod-list a:hover{text-decoration:underline}.mod-list .by{color:var(--muted);font-size:.85rem}
.faq{padding:14px}
.qa{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#0c131d;margin:10px 0;transition:border-color .2s ease,background .2s ease;text-align:left}
.qa[open]{background:#0d1622;border-color:#304055}
.qa>summary{list-style:none;cursor:pointer;font-weight:800;position:relative;padding-right:28px;display:flex;justify-content:center;text-align:center}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:"▸";position:absolute;right:6px;top:0;line-height:1.2;transition:transform .2s ease;opacity:.8}
.qa[open]>summary::after{transform:rotate(90deg)}
.qa p{color:var(--muted);margin:8px 0 0}
.foot{display:flex;gap:8px;align-items:center;justify-content:center;color:var(--muted);font-size:.95rem;padding:8px 0 0;opacity:.9}
.dot{opacity:.6}
@media(max-width:520px){.input-group,.btn-discord{width:100%}.input-group{justify-content:space-between}}