.card {
  position: relative; width: 100%;
  background: var(--card-bg); backdrop-filter: blur(40px) saturate(1.2);
  border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--card-border);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.03), 0 40px 100px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.35);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, border-radius 0.2s, backdrop-filter 0.2s;
}

.card::before,
.sp-card::before,
.lfm-card::before,
.song-card::before,
.nsfw-guard-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

body[data-card-style='glass'] .card,
body[data-card-style='glass'] .sp-card,
body[data-card-style='glass'] .lfm-card,
body[data-card-style='glass'] .song-card,
body[data-card-style='glass'] .nsfw-guard-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.015) 28%, rgba(255,255,255,0.03) 100%),
    rgba(12,12,18,0.48);
  border-color: var(--glass-border);
  backdrop-filter: blur(34px) saturate(1.5);
  -webkit-backdrop-filter: blur(34px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 32px 80px rgba(0,0,0,0.52), 0 10px 28px rgba(0,0,0,0.28);
  border-radius: 24px;
}

body[data-card-style='glass'] .card::before,
body[data-card-style='glass'] .sp-card::before,
body[data-card-style='glass'] .lfm-card::before,
body[data-card-style='glass'] .song-card::before,
body[data-card-style='glass'] .nsfw-guard-card::before {
  opacity: 1;
  background: linear-gradient(180deg, var(--glass-highlight), rgba(255,255,255,0.03) 24%, transparent 50%);
}

body[data-card-style='boxy'] .card,
body[data-card-style='boxy'] .sp-card,
body[data-card-style='boxy'] .lfm-card,
body[data-card-style='boxy'] .song-card,
body[data-card-style='boxy'] .nsfw-guard-card {
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 42px rgba(0,0,0,0.3);
  border-radius: 12px;
}

body[data-card-style='boxy'] .link-btn,
body[data-card-style='boxy'] .support-btn,
body[data-card-style='boxy'] .social-btn,
body[data-card-style='boxy'] .profile-pill,
body[data-card-style='boxy'] .view-pill,
body[data-card-style='boxy'] .badge-strip,
body[data-card-style='boxy'] .link-icon,
body[data-card-style='boxy'] .support-icon,
body[data-card-style='boxy'] .sp-art,
body[data-card-style='boxy'] .song-art,
body[data-card-style='boxy'] .lfm-art,
body[data-card-style='boxy'] .song-ctrl {
  border-radius: 10px !important;
}

body[data-card-style='solid'] .card,
body[data-card-style='solid'] .sp-card,
body[data-card-style='solid'] .lfm-card,
body[data-card-style='solid'] .song-card,
body[data-card-style='solid'] .nsfw-guard-card {
  background: var(--solid-bg);
  border-color: var(--solid-border);
  backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 56px rgba(0,0,0,0.36);
}

body[data-card-style='solid'] .card::before,
body[data-card-style='solid'] .sp-card::before,
body[data-card-style='solid'] .lfm-card::before,
body[data-card-style='solid'] .song-card::before,
body[data-card-style='solid'] .nsfw-guard-card::before {
  opacity: 0.55;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), transparent 32%);
}

body[data-card-style='outline'] .card,
body[data-card-style='outline'] .sp-card,
body[data-card-style='outline'] .lfm-card,
body[data-card-style='outline'] .song-card,
body[data-card-style='outline'] .nsfw-guard-card {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--user-accent) 58%, rgba(255,255,255,0.14));
  backdrop-filter: none;
  box-shadow: none;
}

body[data-card-style='ghost'] .card,
body[data-card-style='ghost'] .sp-card,
body[data-card-style='ghost'] .lfm-card,
body[data-card-style='ghost'] .song-card,
body[data-card-style='ghost'] .nsfw-guard-card {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

body[data-card-style='glow'] .card,
body[data-card-style='glow'] .sp-card,
body[data-card-style='glow'] .lfm-card,
body[data-card-style='glow'] .song-card,
body[data-card-style='glow'] .nsfw-guard-card {
  background: rgba(6,6,10,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(28px) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 22px 70px rgba(0,0,0,0.5), 0 0 28px color-mix(in srgb, var(--user-accent) 22%, transparent);
}

@keyframes entranceFadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes entranceBlur  { from{opacity:0;filter:blur(12px);transform:scale(0.98)} to{opacity:1;filter:blur(0);transform:scale(1)} }
@keyframes entranceSlide { from{opacity:0;transform:translateY(36px)} to{opacity:1;transform:translateY(0)} }
@keyframes entranceSmooth { from{opacity:0;transform:translateY(24px) scale(0.985)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes entranceDrift { from{opacity:0;transform:translate3d(-10px,18px,0) scale(0.99)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} }

.entrance-fade  { animation: entranceFadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.entrance-blur  { animation: entranceBlur  0.8s cubic-bezier(0.16,1,0.3,1) both; }
.entrance-slide { animation: entranceSlide 0.65s cubic-bezier(0.34,1.56,0.64,1) both; }
.entrance-smooth { animation: entranceSmooth 0.82s cubic-bezier(0.16,1,0.3,1) both; }
.entrance-drift { animation: entranceDrift 0.78s cubic-bezier(0.16,1,0.3,1) both; }
.entrance-stagger .stagger-item { opacity:0; animation: entranceFadeUp 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }