/* ===== Public profile page ===== */
:root {
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body.profile-page {
  margin: 0; min-height: 100vh; font-family: var(--body);
  display: flex; justify-content: center;
  padding: 48px 18px;
  background: var(--bg); color: var(--text);
  background-attachment: fixed;
}

/* ---- Theme tokens ---- */
[data-theme="midnight"] {
  --bg: radial-gradient(1200px 600px at 50% -10%, #3a2a8c, #160f33 60%, #0c0820);
  --text: #f3f1ff; --sub: #b9b2e0;
  --btn-bg: rgba(255,255,255,.10); --btn-text: #fff; --btn-border: rgba(255,255,255,.22);
  --btn-hover: rgba(255,255,255,.20); --accent: #b9a6ff;
}
[data-theme="sunset"] {
  --bg: linear-gradient(160deg, #ff7e5f, #feb47b 70%, #ffd194);
  --text: #3a1d12; --sub: #6e3a25;
  --btn-bg: rgba(255,255,255,.55); --btn-text: #3a1d12; --btn-border: rgba(255,255,255,.7);
  --btn-hover: rgba(255,255,255,.8); --accent: #b8432a;
}
[data-theme="ocean"] {
  --bg: linear-gradient(160deg, #2193b0, #6dd5ed);
  --text: #07303b; --sub: #0b4a5a;
  --btn-bg: rgba(255,255,255,.55); --btn-text: #07303b; --btn-border: rgba(255,255,255,.7);
  --btn-hover: rgba(255,255,255,.85); --accent: #08596b;
}
[data-theme="forest"] {
  --bg: linear-gradient(160deg, #134e3a, #2e7d52 70%, #5bbf85);
  --text: #f0fff6; --sub: #c4ecd4;
  --btn-bg: rgba(255,255,255,.12); --btn-text: #fff; --btn-border: rgba(255,255,255,.28);
  --btn-hover: rgba(255,255,255,.22); --accent: #9be6bb;
}
[data-theme="mono"] {
  --bg: #f4f4f5;
  --text: #18181b; --sub: #6b6b72;
  --btn-bg: #ffffff; --btn-text: #18181b; --btn-border: #18181b;
  --btn-hover: #18181b; --accent: #18181b;
}
[data-theme="mono"] .link-btn:hover { color: #fff; }
[data-theme="bubblegum"] {
  --bg: linear-gradient(160deg, #ff9a9e, #fad0c4 60%, #fbc2eb);
  --text: #5a1f3d; --sub: #8a3a5e;
  --btn-bg: rgba(255,255,255,.6); --btn-text: #5a1f3d; --btn-border: #fff;
  --btn-hover: #fff; --accent: #c43e7a;
}

/* ---- Layout ---- */
.profile { width: 100%; max-width: 520px; text-align: center; }

.avatar {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 18px;
  overflow: hidden; background: var(--btn-bg);
  border: 3px solid var(--btn-border);
  display: flex; align-items: center; justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { font-family: var(--display); font-weight: 700; font-size: 2.4rem; color: var(--text); }

.name { font-family: var(--display); font-weight: 700; font-size: 1.55rem; margin: 0 0 2px; color: var(--text); letter-spacing: -.01em; }
.handle { color: var(--sub); margin: 0 0 12px; font-size: .95rem; }
.bio { color: var(--text); opacity: .92; max-width: 40ch; margin: 0 auto 26px; line-height: 1.5; }

/* ---- Link buttons ---- */
.links { display: flex; flex-direction: column; gap: 13px; margin-top: 8px; }
.link-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--btn-bg); color: var(--btn-text);
  border: 1.5px solid var(--btn-border);
  padding: 15px 18px; text-decoration: none; font-weight: 600; font-size: 1rem;
  transition: transform .12s ease, background .2s, box-shadow .2s;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.link-btn:hover { transform: translateY(-2px); background: var(--btn-hover); box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.link-btn:active { transform: translateY(0); }
.link-ico { font-size: 1.2rem; flex: none; }
.link-text { flex: 1; text-align: center; }
.link-arrow { opacity: .55; font-size: .95rem; flex: none; }
.no-links { color: var(--sub); }

/* ---- Button shape variants ---- */
[data-btn="rounded"] .link-btn { border-radius: 14px; }
[data-btn="pill"] .link-btn { border-radius: 999px; }
[data-btn="sharp"] .link-btn { border-radius: 0; }
[data-btn="outline"] .link-btn { background: transparent; border-radius: 14px; box-shadow: none; }
[data-btn="outline"] .link-btn:hover { background: var(--btn-hover); }

/* ---- Footer ---- */
.profile-foot { margin-top: 34px; }
.made-with { color: var(--sub); font-size: .82rem; text-decoration: none; opacity: .8; }
.made-with:hover { opacity: 1; }
.made-with strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .link-btn { transition: none; }
  .link-btn:hover { transform: none; }
}