:root {
  --accent:          var(--user-accent, #c8a96e);

  --bg:              #07070d;
  --card-bg:         rgba(10,10,16,0.84);
  --card-border:     rgba(255,255,255,0.09);
  --glass-bg:        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  --glass-border:    rgba(255,255,255,0.16);
  --glass-highlight: rgba(255,255,255,0.18);
  --solid-bg:        rgba(18,18,26,0.98);
  --solid-surface:   rgba(255,255,255,0.045);
  --solid-border:    rgba(255,255,255,0.08);
  --cover-from:      #0e0d14;
  --text:            #f0ede8;
  --text-muted:      rgba(240,237,232,0.38);
  --text-faint:      rgba(240,237,232,0.18);
  --bio-color:       rgba(240,237,232,0.38);
  --surface:         rgba(255,255,255,0.028);
  --surface-hover:   rgba(255,255,255,0.048);
  --border:          rgba(255,255,255,0.07);
  --border-hover:    rgba(255,255,255,0.14);
  --btn-text:        #f0ede8;
  --icon-bg:         rgba(255,255,255,0.04);
  --icon-color:      rgba(240,237,232,0.38);
  --arrow-color:     rgba(240,237,232,0.18);
  --glow-top:        rgba(200,169,110,0.06);
  --glow-bottom:     rgba(200,169,110,0.04);
  --toast-bg:        rgba(14,14,20,0.92);
  --toast-text:      rgba(240,237,232,0.45);
  --toast-lovely:    rgba(200,169,110,0.6);
  --display:         'Cormorant Garamond', serif;
  --body:            'Outfit', sans-serif;
  --name-font:       var(--display);
  --bio-font:        var(--body);
  --radius-card:     24px;
  --radius-btn:      14px;
  --radius-icon:     10px;
}

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

body {
  min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: var(--body); font-weight: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 20px; overflow-x: hidden;
}

body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--glow-top) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, var(--glow-bottom) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

.bg-media { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.bg-overlay { position: fixed; inset: 0; z-index: -1; background: var(--bg-overlay, transparent); }

.wrap { position: relative; z-index: 2; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
#dc-wrap:empty, #sp-wrap:empty, #lfm-wrap:empty, #song-wrap:empty { display:none; }

.skeleton { background:linear-gradient(90deg,#0c0c12 25%,#101018 50%,#0c0c12 75%); background-size:200% 100%; animation:shimmer 1.8s infinite; border-radius:8px; }
@keyframes shimmer { to{background-position:-200% 0} }
.sk-avatar { width:80px; height:80px; border-radius:50%; }
.sk-name   { height:24px; width:150px; margin-bottom:7px; border-radius:6px; }
.sk-handle { height:12px; width:100px; margin-bottom:16px; border-radius:5px; }
.sk-bio    { height:12px; width:100%; margin-bottom:6px; border-radius:5px; }
.sk-bio-2  { height:12px; width:55%; margin-bottom:20px; border-radius:5px; }
.sk-link   { height:52px; width:100%; border-radius:14px; margin-bottom:6px; }

.sparkle-particle {
  position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%;
  animation: sparkle-fly var(--dur, 0.7s) ease-out forwards;
}
@keyframes sparkle-fly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}

@media (max-width: 480px) {
  body { padding:36px 14px; min-height:100dvh; }
  .profile { padding:0 18px 20px; }
  .sep { margin:0 -18px 16px; }
}