:root {
  --accent: #4d9fff;
  --accent-soft: #8fd0ff;
  --accent-glow: rgba(77, 159, 255, 0.45);
  --tg-yellow: #ffcf40;
  --bg-deep: #04070f;
  --bg-mid: #060d1c;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-hi: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.12);
  --text: #eaf1ff;
  --text-dim: #8ea1c7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(77,159,255,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 90% 90%, rgba(88,101,242,0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-mid) 60%, var(--bg-deep));
  z-index: 0;
  pointer-events: none;
}

a { text-decoration: none; color: inherit; }

::selection { background: var(--accent); color: #04070f; }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  z-index: 2;
}

/* ---------- glass card ---------- */
.card {
  width: 100%;
  max-width: 380px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-hi);
  border-radius: 30px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 46px 28px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- avatar ---------- */
.avatar-ring {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.avatar-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), transparent 55%, var(--accent-soft));
  animation: spin 5s linear infinite;
  filter: blur(0.5px);
}

.avatar-ring::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), transparent 55%, var(--accent-soft));
  filter: blur(16px);
  opacity: 0.55;
  animation: spin 5s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg-deep);
  position: relative;
  z-index: 2;
}

.handle {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.3px;
  color: var(--accent-soft);
  text-shadow: 0 0 18px var(--accent-glow);
  margin-bottom: 6px;
}

.tagline {
  color: var(--text-dim);
  font-size: 0.98rem;
  margin-bottom: 32px;
}

/* ---------- link buttons ---------- */
.links { display: flex; flex-direction: column; gap: 14px; width: 100%; }

.link-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 9px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.16);
  border-radius: 20px;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.35s;
}

.link-btn:hover { transform: translateY(-4px); background: rgba(255,255,255,0.065); }

.link-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
  color: var(--accent-soft);
}

.link-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  flex: 1;
  text-align: left;
  padding-left: 16px;
  letter-spacing: 0.2px;
}

.go { padding-right: 10px; color: rgba(255,255,255,0.3); transition: transform 0.35s; }
.link-btn:hover .go { transform: translateX(5px); color: #fff; }

.link-btn.tg:hover { border-color: rgba(0,136,204,0.55); box-shadow: 0 14px 30px rgba(0,136,204,0.2); }
.link-btn.tg .link-icon { color: #47b6ff; }

.link-btn.library { background: linear-gradient(135deg, rgba(77,159,255,0.16), rgba(88,101,242,0.10)); border-color: rgba(77,159,255,0.35); }
.link-btn.library .link-icon { background: linear-gradient(135deg, var(--accent), #5865f2); color: #fff; }

.link-btn.youtube:hover { border-color: rgba(255,0,0,0.5); }
.link-btn.youtube .link-icon { color: #ff5c5c; }

.link-btn.tiktok:hover { border-color: rgba(0,242,254,0.5); }
.link-btn.tiktok .link-icon { color: #4be6ff; }

.link-btn.facebook:hover { border-color: rgba(24,119,242,0.55); }
.link-btn.facebook .link-icon { color: #5b9bff; }

.link-btn.instagram:hover { border-color: rgba(225,48,108,0.5); }
.link-btn.instagram .link-icon { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }

.link-btn.whatsapp:hover { border-color: rgba(37,211,102,0.5); }
.link-btn.whatsapp .link-icon { color: #4ee08a; }

.link-btn.discord:hover { border-color: rgba(88,101,242,0.55); }
.link-btn.discord .link-icon { color: #8f9aff; }

.link-btn.twitter:hover { border-color: rgba(255,255,255,0.35); }
.link-btn.twitter .link-icon { color: #fff; }

.link-btn.threads:hover { border-color: rgba(255,255,255,0.35); }
.link-btn.threads .link-icon { color: #fff; }

/* ---------- inline library ---------- */
.library-card {
  margin-top: 22px;
  padding: 30px 24px 26px;
  text-align: left;
  align-items: stretch;
  scroll-margin-top: 20px;
}

.library-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-soft);
  margin-bottom: 4px;
}

.library-sub { color: var(--text-dim); font-size: 0.86rem; margin-bottom: 20px; }

.library-list { display: flex; flex-direction: column; gap: 12px; }

.library-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.15);
  border-radius: 18px;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.3s;
}
.library-item:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); }

.li-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 3px; color: var(--accent-soft); }
.li-desc { font-size: 0.83rem; color: var(--text-dim); }

.library-list .view-btn {
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 8px 15px;
  border: 1px solid rgba(77,159,255,0.5);
  border-radius: 12px;
  color: var(--accent-soft);
}
.library-item:hover .view-btn { background: rgba(77,159,255,0.15); }

.library-list .empty { text-align: center; padding: 20px 10px; color: var(--text-dim); font-size: 0.88rem; }

/* ---------- footer ---------- */
.footer {
  text-align: center;
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 34px;
  letter-spacing: 1.5px;
  opacity: 0.6;
}
.footer .brand { color: var(--accent-soft); }

/* ---------- entrance ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.anim-fade-up { opacity: 0; animation: fadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .5s; }

/* ================= Telegram gate ================= */
.tg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 12, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  transition: opacity 0.35s ease;
}
.tg-overlay.hidden { opacity: 0; pointer-events: none; }

.tg-card {
  width: 100%;
  max-width: 340px;
  background: rgba(15, 22, 40, 0.75);
  border: 1px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.22);
  border-radius: 26px;
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  padding: 34px 26px 26px;
  text-align: center;
  position: relative;
  animation: fadeUp 0.5s cubic-bezier(.16,1,.3,1) forwards;
}

.tg-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.tg-icon {
  width: 58px; height: 58px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: rgba(0,136,204,0.18);
  color: #47b6ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}

.tg-card h2 { font-family: 'Sora', sans-serif; font-size: 1.25rem; margin-bottom: 8px; }
.tg-card p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; margin-bottom: 22px; }

.tg-join {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--tg-yellow);
  color: #1a1400;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(255,207,64,0.3);
  transition: transform 0.3s;
}
.tg-join:hover { transform: translateY(-2px); }

.tg-dont-show {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
}
.tg-dont-show input { accent-color: var(--accent); width: 15px; height: 15px; }