/* ===== Profile-only overrides (keeps base style.css intact) ===== */

/* One width for everything on the profile */
.profile-shell{
  width:min(760px,calc(100vw - 32px));
  margin:0 auto;
}

/* Card height/spacing tuned down + more breathing room below hero */
.profile-card{
  --banner-h:160px;
  --avatar-size:110px;
  --avatar-offset:8px;

  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)), var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  margin:0 auto 18px;          /* was 14px → adds space before links */
  overflow:hidden;
}
.profile-card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none; padding:1px;
  background:linear-gradient(135deg,#8b5cf6 0%,#22d3ee 35%,#34d399 70%,#f472b6 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.18;
}

/* Banner is inside the card */
.profile-banner{
  height:var(--banner-h);
  border-radius:16px 16px 0 0;
  background:
    radial-gradient(90% 120% at 10% 20%, rgba(139,92,246,.55), transparent 60%),
    radial-gradient(80% 120% at 90% 10%, rgba(34,211,238,.45), transparent 55%),
    radial-gradient(100% 130% at 50% 100%, rgba(52,211,153,.35), transparent 60%),
    linear-gradient(135deg,#121a2f,#0e1426);
  background-size:cover; background-position:center;
}
.profile-banner.has-img{ background-blend-mode:normal }

/* Avatar overlap */
.avatar-overlap{
  position:absolute; left:50%;
  top:calc(var(--banner-h) - (var(--avatar-size)/2) + var(--avatar-offset));
  transform:translateX(-50%);
}
.avatar-ring{
  --r:var(--avatar-size);
  width:var(--r); height:var(--r); border-radius:9999px; padding:4px;
  background:conic-gradient(from 220deg,#a78bfa,#22d3ee 35%,#34d399 70%,#f472b6);
  box-shadow:var(--glow);
}
.avatar-ring img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; background:#0e1426;
  border:1px solid var(--border);
}

/* Card content: reduce top padding so name sits closer to the avatar */
.profile-content{
  padding:calc(var(--avatar-size)/2 + 12px) 16px 16px;
}

/* Name block sits closer to the avatar */
.hero-name{
  margin:2px 0 6px;
  font-size:22px;
  line-height:1.2;
  display:inline-flex; align-items:center; gap:.4em;
}

/* Links block uses the same width and a bit of spacing */
.profile-links{
  gap:10px;
  margin:0 auto 10px;          /* tiny bump to separate from hero */
}

/* Footer centered and same width (works even if template uses .footer) */
.profile-footer{
  width:100%;
  margin:12px auto 28px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  color:var(--muted);
}
.profile-footer a{ border-bottom:1px dashed rgba(255,255,255,.18) }
.profile-footer .sep{ color:#64748b }

/* Also center the global footer when used inside the profile page */
.profile-shell .footer{
  width:100%;
  margin:16px auto 28px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-align:center;
}

/* Tweak link rows to look a tad slimmer on profile */
.profile-links .link-row{
  padding:12px 14px;
  border-radius:14px;
}

/* Mobile adjustments */
@media (max-width:520px){
  .profile-card{ --banner-h:150px; --avatar-size:96px; margin-bottom:20px } /* more gap on phones */
  .profile-content{ padding:calc(var(--avatar-size)/2 + 10px) 12px 12px }
  .hero-name{ font-size:20px }

  /* link rows get a hair more vertical space for thumbs + text */
  .profile-links .link-row{ padding:12px 14px }
  .profile-links .link-row .host{ word-break: break-all; }
  .profile-shell .footer{ margin:14px auto 24px }
}

/* ---------- Examples / Profiles ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.profrow{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
.profrow .ava{width:44px;height:44px;border-radius:9999px;object-fit:cover;border:1px solid var(--border);background:#0e1426}
.profrow .nm{font-weight:800}
.profrow .handle{font-size:12px;color:var(--muted)}
.profrow:hover .ava{box-shadow:0 0 0 2px var(--accent)}
.badge-verified{width:14px;height:14px;vertical-align:baseline;filter:drop-shadow(0 0 6px rgba(37,99,235,.45))}
.badge-verified .ring{stroke:#bfe2ff;stroke-opacity:.85;stroke-width:.8}
.badge-verified .tick{stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}