:root { --bg:#070a08; --surface:#101512; --surface-2:#151c17; --line:#263029; --green:#b8f5c5; --green-strong:#7eea96; --text:#f5f7f5; --muted:#98a29b; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -10%,rgba(96,200,120,.15),transparent 35rem),var(--bg); color:var(--text); font-family:"Outfit",Arial,sans-serif; }
button { font:inherit; }
.xtream-hero { max-width:1120px; margin:auto; min-height:330px; padding:68px 28px 56px; display:flex; align-items:center; justify-content:center; gap:30px; }
.xtream-hero img { width:112px; height:112px; padding:13px; object-fit:contain; border:1px solid rgba(184,245,197,.25); border-radius:29px; background:rgba(184,245,197,.08); box-shadow:0 20px 70px rgba(62,185,89,.18); }
.kicker { margin:0 0 12px!important; color:var(--green)!important; font-size:12px!important; font-weight:700; letter-spacing:.16em; }
.xtream-hero h1 { margin:0; font-size:clamp(40px,5.5vw,70px); line-height:1; letter-spacing:-.05em; }
.xtream-hero h1 span { color:var(--green); }
.xtream-hero p { max-width:810px; margin:20px 0 0; color:#aab3ac; font-size:18px; line-height:1.6; }
.container { max-width:1120px; margin:auto; padding:0 28px 80px; border-top:1px solid var(--line); }
.list-heading { min-height:84px; display:flex; align-items:center; justify-content:space-between; color:#7f8a82; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.list-heading a { color:var(--green); text-decoration:none; }
.status-dot { width:7px; height:7px; margin-right:9px; display:inline-block; border-radius:50%; background:var(--green-strong); box-shadow:0 0 12px var(--green-strong); }
.server-list { display:flex; flex-direction:column; gap:22px; }
.server-card { padding:28px; border:1px solid #222c25; border-radius:24px; background:linear-gradient(145deg,#121814,#0d120f); box-shadow:0 18px 55px rgba(0,0,0,.22); animation:fadeIn .45s ease backwards; }
.card-header { margin-bottom:22px; display:flex; align-items:center; justify-content:space-between; }
.server-badge { padding:8px 13px; border:1px solid #395340; border-radius:9px; background:#17231a; color:var(--green); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.views { display:flex; align-items:center; gap:7px; color:#6f7972; font-size:13px; }
.eye { width:18px; height:11px; display:inline-block; border:1.7px solid currentColor; border-radius:70% 30% 70% 30%; transform:rotate(45deg); position:relative; }
.eye::after { content:""; width:4px; height:4px; position:absolute; left:5px; top:2px; border:1.5px solid currentColor; border-radius:50%; }
.fields { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:13px; }
.field { min-width:0; min-height:82px; padding:14px 12px 14px 17px; display:flex; align-items:center; gap:10px; border:1px solid #29332c; border-radius:14px; background:#090d0a; }
.field-content { min-width:0; flex:1; }
.field-label { display:block; margin-bottom:7px; color:#606b63; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.field-value { display:block; overflow:hidden; color:#c3cbc5; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.copy-btn { width:38px; height:38px; flex:0 0 38px; border:1px solid #334039; border-radius:10px; background:#151c17; color:#9da7a0; cursor:pointer; position:relative; transition:.2s; }
.copy-btn:not(.copied)::before,.copy-btn:not(.copied)::after { content:""; width:11px; height:11px; position:absolute; border:1.7px solid currentColor; border-radius:2px; }
.copy-btn:not(.copied)::before { left:11px; top:10px; }.copy-btn:not(.copied)::after { left:15px; top:14px; background:#151c17; }
.copy-btn:hover,.copy-btn.copied { border-color:var(--green); background:var(--green); color:#071009; }
.loading-card { min-height:250px; border-radius:24px; background:linear-gradient(100deg,#101512 20%,#19211b 40%,#101512 60%); background-size:200% 100%; animation:shimmer 1.2s infinite linear; }
.message { padding:70px 20px; border:1px dashed #324037; border-radius:22px; color:#99a39c; text-align:center; }
footer { min-height:130px; padding:25px; display:flex; align-items:center; justify-content:center; gap:12px; border-top:1px solid #1f2822; color:#59625c; }
footer img { width:34px; height:34px; border-radius:8px; } footer strong { color:white; }
.xtream-toast { position:fixed; right:24px; bottom:24px; padding:14px 19px; border:1px solid #5d8667; border-radius:12px; background:#17231a; color:var(--green); font-weight:700; opacity:0; transform:translateY(70px); transition:.3s; pointer-events:none; }
.xtream-toast.show { opacity:1; transform:translateY(0); }
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } } @keyframes shimmer { to { background-position:-200% 0; } }
@media (max-width:760px) { .fields { grid-template-columns:1fr; }.xtream-hero { flex-direction:column; text-align:center; }.xtream-hero img { width:84px; height:84px; }.xtream-hero p { font-size:16px; }.container { padding:0 16px 55px; }.server-card { padding:19px; }.list-heading { gap:14px; }.list-heading a { text-align:right; } }
@media (max-width:480px) { .xtream-hero { padding:48px 18px 40px; }.server-card { border-radius:19px; }.field-value { font-size:12px; } footer { flex-wrap:wrap; } footer span { width:100%; text-align:center; }.xtream-toast { left:16px; right:16px; text-align:center; } }