@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #080c18;
  --surface: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text: #fff;
  --text-sec: rgba(255,255,255,0.5);
  --text-ter: rgba(255,255,255,0.3);
  --accent: #6C63FF;
  --green: #10b981;
  --amber: #f59e0b;
  --rose: #f43f5e;
  --card-rad: 16px;
}

* { margin:0; padding:0; box-sizing:border-box }
body {
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

.sub-bg {
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(108,99,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 100%, rgba(16,185,129,0.06) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

.sub-wrap {
  position:relative;z-index:1;
  max-width:600px;margin:0 auto;padding:40px 20px;
}

.sub-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--card-rad); padding:28px 24px;
  margin-bottom:16px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  animation:fadeUp .5s ease-out var(--d,0s) both;
}

.sub-top { text-align:center; --d:0s }
.sub-top h1 {
  font-size:24px; font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,.6));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:12px 0 8px;
}

.logo-img { width:72px; height:72px; border-radius:14px }
.logo-emoji { font-size:48px }

.tier-badge {
  display:inline-block;
  padding:4px 14px; border-radius:20px;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase;
}

.announcement {
  background:rgba(108,99,255,0.08);
  border:1px solid rgba(108,99,255,0.15);
  border-left:3px solid var(--accent);
  border-radius:12px; padding:14px 16px;
  margin-bottom:16px; font-size:14px;
  animation:fadeUp .5s .05s ease-out both;
}

.info-block { font-size:14px; line-height:1.8; margin-bottom:16px }
.info-block p { display:flex; align-items:center; gap:8px; color:var(--text-sec) }
.traffic-server { font-size:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--border) }
.traffic-server .server-name { color:var(--text-ter); font-weight:500 }
.traffic-server .traffic-values { color:var(--green); font-family:'JetBrains Mono',monospace }

.srv-tags { display:flex; flex-wrap:wrap; gap:8px }
.srv-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:20px; padding:5px 12px;
  font-size:12px; font-weight:500; color:var(--text-sec);
}

.sub-qr { text-align:center }
.qr-box {
  display:inline-block;
  background:rgba(255,255,255,0.04);
  border-radius:14px; padding:8px; margin-bottom:14px;
}
.qr-box img {
  display:block;
  border-radius:10px; width:200px; height:200px;
}
.qr-url {
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:10px; padding:10px 14px;
  word-break:break-all; font-size:11px; color:var(--text-ter);
  font-family:'JetBrains Mono',monospace; margin-bottom:16px;
}
.qr-actions { display:flex; flex-direction:column; gap:10px; align-items:center }

.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 28px; border:none; border-radius:12px;
  font-size:14px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
  cursor:pointer; text-decoration:none;
  transition:transform .3s, box-shadow .3s;
}
.btn:hover { transform:translateY(-2px) }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { box-shadow:0 8px 32px rgba(108,99,255,0.25) }
.btn-support { background:var(--rose); color:#fff }
.btn-support:hover { box-shadow:0 8px 32px rgba(244,63,94,0.25) }

.sub-footer { text-align:center; padding:20px; color:var(--text-ter); font-size:12px; --d:0.25s }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px) }
  to { opacity:1; transform:translateY(0) }
}

@media(max-width:520px) {
  .sub-wrap { padding:20px 12px }
  .sub-card { padding:20px 16px }
  .sub-top h1 { font-size:20px }
  .qr-box img { width:160px; height:160px }
}