/* profile_r6.css
   Styling für templates/pages/profile.php
   Fokus: Mobile-first, clean, futuristischer Card-Look
*/

/* === SHELL & CARD ==================================================== */

.sn-pv-shell {
  position: relative;
  min-height: calc(100vh - 90px);
  padding: 2.5rem 1.25rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,0.12), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(244,114,182,0.16), transparent 55%),
    linear-gradient(135deg, #020617, #020617 60%, #020617);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: #e5e7ff;
}

.sn-pv-card {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 auto;
  border-radius: 1.8rem;
  padding: 2.1rem 2.3rem 2.5rem; /* mehr Abstand links/rechts/oben/unten */
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,0.16), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(244,114,182,0.18), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.99));
  border: 1px solid rgba(129,140,248,0.7);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.9),
    0 0 0 1px rgba(15,23,42,0.9);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

/* Glow-Rand mit leichter „Snake“-Animation */
.sn-pv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(56,189,248,1),
      rgba(168,85,247,1),
      rgba(236,72,153,1),
      rgba(251,191,36,1),
      rgba(56,189,248,1)
    );
  background-size: 300% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .9;
  animation: snCardSnake 12s linear infinite;
  pointer-events: none;
}

@keyframes snCardSnake {
  0%   { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

.sn-pv-card > * {
  position: relative;
}

/* spezielle Rollenglows */
.sn-pv-card.sn-role-artist {
  border-color: rgba(168,85,247,0.9);
  box-shadow: 0 0 34px rgba(168,85,247,0.6);
}
.sn-pv-card.sn-role-party {
  border-color: rgba(244,114,182,0.9);
  box-shadow: 0 0 34px rgba(236,72,153,0.55);
}
.sn-pv-card.sn-role-organizer {
  border-color: rgba(59,130,246,0.95);
  box-shadow: 0 0 34px rgba(56,189,248,0.6);
}
.sn-pv-card.sn-role-service {
  border-color: rgba(56,189,248,0.92);
  box-shadow: 0 0 34px rgba(45,212,191,0.55);
}
.sn-pv-card.sn-role-club {
  border-color: rgba(251,191,36,0.95);
  box-shadow: 0 0 34px rgba(251,191,36,0.55);
}

/* === HEADER – NEUES, ZENTRIERTES LAYOUT ============================== */

/* Wrapper für den ganzen Kopfbereich */
.sn-pv-header {
  margin-bottom: 1.6rem;
}

.sn-pv-header.sn-pv-header-centered {
  display: flex;
  justify-content: center;
}

/* Hauptblock im Header */
.sn-pv-header-main.sn-pv-header-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  gap: 0.9rem;
}

/* Avatar-Bereich mittig */
.sn-pv-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Avatar-Ring + Bubble – EINMAL definiert, konsistent */
.sn-pv-avatar-ring {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(
    from 220deg,
    rgba(56,189,248,1),
    rgba(168,85,247,0.9),
    rgba(236,72,153,0.9),
    rgba(251,191,36,0.9),
    rgba(56,189,248,1)
  );
  box-shadow: 0 0 18px rgba(59,130,246,0.6);
}

.sn-pv-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 20% 0, rgba(129,140,248,0.4), rgba(15,23,42,1));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sn-pv-avatar-inner img,
.sn-pv-avatar-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sn-pv-avatar-placeholder {
  font-size: 2rem;
  font-weight: 600;
  color: rgba(226,232,240,0.96);
}

/* LV-Bubble – runde Blase, die halb aus dem Avatar rausguckt */
.sn-pv-level-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.96), rgba(15,23,42,0.96));
  color: #020617;
  font-weight: 600;
}

.sn-pv-level-label {
  font-size: 0.55rem;
  line-height: 1;
  opacity: 0.7;
  text-transform: uppercase;
}

.sn-pv-level-value {
  font-size: 0.9rem;
  line-height: 1.1;
}

/* Identity / Name / Unterzeile */

.sn-pv-id-meta,
.sn-pv-id-meta-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
}

.sn-pv-subline {
  font-size: .78rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(148,163,184,0.98);
}

.sn-pv-name {
  font-size: 1.7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e5e7ff;
}

/* Rollen / Wave-Tags */

.sn-pv-role-row,
.sn-pv-role-row-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin-top: .2rem;
}

.sn-pv-group-tag {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .26rem .75rem;
  border-radius: 999px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  border: 1px solid rgba(148,163,184,0.9);
  background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(15,23,42,1));
  color: rgba(209,213,219,0.97);
}

.sn-pv-group-tag.role {
  border-color: rgba(96,165,250,0.9);
  color: rgba(191,219,254,0.98);
}
.sn-pv-group-tag.reg {
  border-color: rgba(190,24,93,0.9);
  color: rgba(251,207,232,0.98);
}
.sn-pv-group-tag.tariff {
  border-color: rgba(234,179,8,0.9);
  color: rgba(252,211,77,0.98);
}
.sn-pv-group-tag.wave {
  border-color: rgba(168,85,247,0.9);
  color: rgba(233,213,255,0.98);
}

/* META-LINE: Follower, Mitglieder, Rating, Mitglied seit ------------- */

.sn-pv-meta-line,
.sn-pv-meta-line-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
}

/* generische Meta-Chips */
.sn-pv-meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .8rem;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.7);
  color: rgba(226,232,240,0.96);
  backdrop-filter: blur(6px);
}

/* Pill-Look für Follower / Folgt / Mitglieder */
.sn-pv-meta-pill {
  gap: .25rem;
}

.sn-pv-pill-count {
  font-weight: 600;
  font-size: .85rem;
}

.sn-pv-pill-label {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  opacity: .9;
}

.sn-pv-pill-icon {
  font-size: .8rem;
  opacity: .7;
}

/* Follower / Following klickbar (Buttons) */
.sn-pv-follow-pill {
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.sn-pv-follow-pill:hover {
  background: radial-gradient(circle at 0 0,rgba(30,64,175,0.96),rgba(15,23,42,1));
  border-color: rgba(191,219,254,1);
  box-shadow: 0 0 16px rgba(129,140,248,0.7);
  transform: translateY(-1px);
}

/* Mitglieder-Pill (für Veranstalter) */
.sn-pv-members-pill {
  border-color: rgba(56,189,248,0.9);
}

/* Rating in Meta-Line */
.sn-pv-meta-rating {
  gap: .3rem;
}

.sn-pv-stars {
  display: inline-flex;
  gap: .08rem;
}

.sn-pv-stars span {
  font-size: 1rem;
}

.sn-pv-stars span.full {
  color: #facc15;
  text-shadow: 0 0 8px rgba(250,204,21,0.8);
}

.sn-pv-stars span.empty {
  color: rgba(51,65,85,0.9);
}

.sn-pv-rating-text {
  font-size: .8rem;
  color: rgba(226,232,240,0.96);
}

.sn-pv-rating-none {
  font-size: .8rem;
  color: rgba(148,163,184,0.96);
}

/* Mitglied seit */
.sn-pv-meta-chip strong {
  margin-left: 0.2rem;
}

/* Google-Rating & Verify unter der Meta-Line */
.sn-pv-google-rating {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 999px;
  padding: .3rem .7rem;
  background: linear-gradient(135deg,#1d4ed8,#0ea5e9);
  color: #f9fafb;
  font-size: .8rem;
  margin-top: .45rem;
  box-shadow: 0 0 16px rgba(37,99,235,0.7);
}

.sn-pv-google-rating span:first-child {
  font-size: 1rem;
}
.sn-pv-google-rating strong {
  font-size: .9rem;
}

/* internes Verify-Label */
.sn-pv-verify-label {
  margin-top: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(135deg,#ea580c,#f59e0b);
  color: #fffbeb;
  box-shadow: 0 0 18px rgba(234,88,12,0.7);
  border: 1px solid rgba(253,224,71,0.8);
}

/* Textzeile "Verifiziert" / Warnung */
.sn-pv-verify-line {
  margin-top: .2rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.sn-pv-verify-ok {
  color: #bbf7d0;
  text-shadow: 0 0 10px rgba(16,185,129,0.9);
}

.sn-pv-verify-warn {
  color: #fed7aa;
}

/* === ACTIONS-ROW – Profil-Link, Bearbeiten, Folgen, VA-Buttons ======= */

.sn-pv-actions-row {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

/* Profil-Link Chip */
.sn-pv-link-chip {
  border-radius: 999px;
  padding: .35rem 1rem;
  border: 1px dashed rgba(129,140,248,0.85);
  background: radial-gradient(circle at top,rgba(15,23,42,0.98),rgba(15,23,42,1));
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #c7d2fe;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}

.sn-pv-link-chip:hover {
  border-color: rgba(191,219,254,1);
  background: radial-gradient(circle at top,rgba(23,37,84,0.98),rgba(15,23,42,1));
  transform: translateY(-1px);
}

/* Buttons (Bearbeiten / Follow / VA-Join etc.) */

.sn-pv-btn-ghost,
.sn-pv-btn-primary,
.sn-pv-btn-danger,
.sn-pv-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border-radius: 999px;
  padding: .45rem 1.4rem;
  border: 1px solid rgba(129,140,248,0.9);
  background:
    radial-gradient(circle at 0 0,rgba(15,23,42,0.96),rgba(15,23,42,1));
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #eef2ff;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease, opacity .12s ease;
}

.sn-pv-btn-ghost:hover,
.sn-pv-follow-btn:hover,
.sn-pv-btn-primary:hover,
.sn-pv-btn-danger:hover {
  background:
    radial-gradient(circle at 0 0,rgba(30,64,175,0.96),rgba(15,23,42,1));
  border-color: rgba(191,219,254,1);
  box-shadow: 0 0 18px rgba(129,140,248,0.7);
  transform: translateY(-1px);
}

/* Primary-Variante (Join, Bewerbung etc.) */
.sn-pv-btn-primary {
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  border-color: rgba(129,140,248,0.95);
  box-shadow: 0 0 16px rgba(56,189,248,0.6);
}

.sn-pv-btn-primary:hover {
  box-shadow: 0 0 20px rgba(56,189,248,0.8);
}

/* Danger-Variante (Veranstalter verlassen) */
.sn-pv-btn-danger {
  background: linear-gradient(135deg,#b91c1c,#f97316);
  border-color: rgba(248,113,113,0.9);
  box-shadow: 0 0 16px rgba(248,113,113,0.7);
}

.sn-pv-btn-danger:hover {
  box-shadow: 0 0 20px rgba(248,113,113,0.9);
}

/* Follow-Button States */
.sn-pv-follow-form {
  margin: 0;
}

.sn-pv-follow-btn.is-following {
  border-color: rgba(34,197,94,0.9);
  background:
    radial-gradient(circle at 0 0,rgba(22,101,52,0.96),rgba(15,23,42,1));
  box-shadow: 0 0 16px rgba(34,197,94,0.55);
}

.sn-pv-follow-btn.is-following:hover {
  border-color: rgba(22,163,74,1);
}

/* View-As Pill */
.sn-pv-control-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.75);
  background:
    radial-gradient(circle at top,rgba(15,23,42,0.96),rgba(15,23,42,1));
  font-size: .74rem;
  color: rgba(226,232,240,0.96);
}

.sn-pv-control-pill select {
  background: transparent;
  border: none;
  color: inherit;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  outline: none;
}

/* VA-Join Infos */
.sn-pv-va-message {
  margin-top: .8rem;
  text-align: center;
  font-size: .8rem;
}

.sn-pv-va-error {
  color: #fecaca;
  margin-bottom: .2rem;
}

.sn-pv-va-info {
  color: #bbf7d0;
}

/* Inline-Forms für Approval/Passwort */
.sn-pv-va-inline {
  margin-top: .7rem;
}

.sn-pv-va-form textarea,
.sn-pv-va-form input[type="password"] {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid rgba(51,65,85,0.9);
  background: rgba(15,23,42,0.96);
  color: #e5e7eb;
  font-size: .86rem;
  padding: .45rem .6rem;
  resize: vertical;
}

.sn-pv-va-label {
  display: block;
  font-size: .8rem;
  color: rgba(148,163,184,0.96);
  margin-bottom: .2rem;
}

.sn-pv-va-inline-actions {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.sn-pv-va-hint {
  margin-top: .35rem;
  font-size: .76rem;
  color: rgba(148,163,184,0.96);
}

/* === FOLLOW-BUTTON-BEREICH UNTER DEN PILL-COUNTS ===================== */

.sn-pv-follow-row-under {
  margin-top: .85rem;
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.sn-pv-follow-state-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

/* großer, auffälliger Follow-Button */
.sn-pv-follow-btn-main {
  min-width: 170px;
  justify-content: center;
  font-weight: 600;
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  border-color: rgba(129,140,248,0.95);
  box-shadow: 0 0 18px rgba(56,189,248,0.7);
}

.sn-pv-follow-btn-main:hover {
  box-shadow: 0 0 22px rgba(56,189,248,0.9);
  transform: translateY(-1px);
}

/* Status: Du folgst (grün/blau) */
.sn-pv-follow-btn-main.is-following {
  background: linear-gradient(135deg,#22c55e,#0ea5e9);
  border-color: rgba(34,197,94,0.9);
  box-shadow: 0 0 20px rgba(34,197,94,0.8);
}

.sn-pv-follow-btn-main.is-following[disabled] {
  opacity: 0.95;
  cursor: default;
}

/* kleiner roter Entfolgen-Button */
.sn-pv-unfollow-mini {
  border-radius: 999px;
  padding: .3rem .9rem;
  border: 1px solid rgba(248,113,113,0.9);
  background: linear-gradient(135deg,#b91c1c,#f97316);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fef2f2;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(248,113,113,0.7);
  transition: transform .12s ease, box-shadow .18s ease, opacity .12s ease;
}

.sn-pv-unfollow-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(248,113,113,0.9);
}

/* === PANEL-GRUNDELEMENTE ============================================ */

.sn-pv-panel {
  border-radius: 1.2rem;
  padding: 1rem .9rem 1.1rem;
  border: 1px solid rgba(129,140,248,0.45);
  background:
    radial-gradient(circle at top,rgba(15,23,42,0.98),rgba(2,6,23,0.99));
}

.sn-pv-panel + .sn-pv-panel {
  margin-top: 1rem;
}

.sn-pv-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: .75rem;
}

.sn-pv-panel-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(199,210,254,0.98);
}

.sn-pv-panel-sub {
  font-size: .78rem;
  color: rgba(148,163,184,0.98);
}

/* === STATS PANEL ===================================================== */

.sn-pv-stats-panel {
  margin-bottom: 1.3rem;
}

.sn-pv-stats-row-main {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
}

.sn-pv-stat-chip {
  min-width: 120px;
  border-radius: 1rem;
  padding: .55rem .8rem .6rem;
  border: 1px solid rgba(129,140,248,0.8);
  background:
    radial-gradient(circle at 0 0,rgba(79,70,229,0.6),rgba(15,23,42,0.98));
  box-shadow:
    0 0 14px rgba(79,70,229,0.45),
    0 0 0 1px rgba(15,23,42,0.9);
}

.sn-pv-stat-chip.stat-tracks {
  border-color: rgba(168,85,247,0.9);
  box-shadow: 0 0 14px rgba(168,85,247,0.55);
}
.sn-pv-stat-chip.stat-events {
  border-color: rgba(244,114,182,0.9);
  box-shadow: 0 0 14px rgba(236,72,153,0.55);
}
.sn-pv-stat-chip.stat-shop {
  border-color: rgba(34,197,94,0.9);
  box-shadow: 0 0 14px rgba(34,197,94,0.55);
}
.sn-pv-stat-chip.stat-members {
  border-color: rgba(56,189,248,0.9);
  box-shadow: 0 0 14px rgba(56,189,248,0.55);
}

.sn-pv-stat-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(219,234,254,0.98);
}

.sn-pv-stat-value {
  margin-top: .15rem;
  font-size: 1.1rem;
  font-weight: 600;
}

/* === ÜBER MICH ======================================================= */

.sn-pv-about-card {
  margin-bottom: .2rem;
}

.sn-pv-about-short {
  font-size: .92rem;
  font-weight: 500;
  margin-bottom: .35rem;
  color: #c7d2fe;
}

.sn-pv-about-text {
  font-size: .9rem;
  line-height: 1.6;
  color: #e5e7ff;
}

/* Venue Block (Veranstalter / Club) */

.sn-pv-venue-block {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed rgba(51,65,85,0.9);
  font-size: .86rem;
  color: rgba(226,232,240,0.96);
}

.sn-pv-venue-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(148,163,184,0.96);
  margin-bottom: .2rem;
}

.sn-pv-venue-line {
  margin-top: .15rem;
}

.sn-pv-empty {
  font-size: .8rem;
  color: rgba(148,163,184,0.98);
}

/* === FEED-GENERISCH ================================================== */

.sn-pv-feed-card { }

.sn-pv-feed-list {
  display: grid;
  gap: .65rem;
}

.sn-pv-feed-item {
  border-radius: .9rem;
  padding: .65rem .8rem .8rem;
  border: 1px solid rgba(129,140,248,0.55);
  background:
    radial-gradient(circle at top,rgba(15,23,42,0.99),rgba(15,23,42,1));
}

.sn-pv-feed-header {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .3rem;
}

.sn-pv-feed-title {
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e0f2fe;
}

.sn-pv-feed-time {
  font-size: .78rem;
  color: rgba(148,163,184,0.98);
}

.sn-pv-feed-body {
  font-size: .86rem;
  color: #e5e7ff;
}

.sn-pv-feed-footer {
  margin-top: .4rem;
  display: flex;
  justify-content: flex-end;
}

.sn-pv-feed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .25rem .9rem;
  border: 1px solid rgba(129,140,248,0.9);
  background:
    radial-gradient(circle at 0 0,rgba(79,70,229,0.8),rgba(15,23,42,0.98));
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #e5e7ff;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

.sn-pv-feed-btn:hover {
  border-color: rgba(191,219,254,1);
  background:
    radial-gradient(circle at 0 0,rgba(30,64,175,0.96),rgba(15,23,42,1));
  box-shadow: 0 0 16px rgba(129,140,248,0.7);
  transform: translateY(-1px);
}

/* === TRACKS CARD (Wrapper) ========================================== */

.sn-pv-tracks-card .nt-shell {
  padding: 0;
}

/* auf Profilseite lieber volle Breite nutzen */
.sn-pv-tracks-card .nt-track-list {
  margin-top: .1rem;
}

/* === EVENTS CARD auf Profil ========================================= */

.sn-pv-events-card .sn-pv-feed-list {
  display: grid;
  gap: .75rem;
}

/* Scoped Event-Card Styling (nur im Profil) */

.sn-pv-card .ev-card {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr); /* Bild schmaler, mehr Platz für Text */
  gap: .75rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(129,140,248,0.6);
  background:
    radial-gradient(circle at top,rgba(15,23,42,0.99),rgba(15,23,42,1));
}

@media (max-width: 640px) {
  .sn-pv-card .ev-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sn-pv-card .ev-cover {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 90px; /* kompakt, damit Text + Button gut sichtbar bleiben */
}

.sn-pv-card .ev-date-badge {
  position: absolute;
  left: .6rem;
  top: .6rem;
  border-radius: .75rem;
  padding: .15rem .5rem;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(248,250,252,0.2);
  text-align: center;
}

.sn-pv-card .ev-date-day {
  font-size: .9rem;
  font-weight: 600;
  color: #e5e7eb;
}
.sn-pv-card .ev-date-month {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(191,219,254,0.95);
}

.sn-pv-card .ev-body {
  padding: .6rem .7rem .75rem .1rem;
}

@media (max-width: 640px) {
  .sn-pv-card .ev-body {
    padding: .7rem .75rem .8rem;
  }
}

.sn-pv-card .ev-title {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e5e7ff;
  margin-bottom: .15rem;
}

.sn-pv-card .ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .6rem;
  font-size: .78rem;
  color: rgba(148,163,184,0.98);
}

.sn-pv-card .ev-meta span {
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(30,64,175,0.55);
}

.sn-pv-card .ev-actions {
  margin-top: .45rem;
  display: flex;
  justify-content: flex-end;
}

/* Button in der Event-Card */
.sn-pv-card .ev-actions .btn {
  border-radius: 999px;
  padding: .3rem .85rem;
  border: none;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: pointer;
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  color: #f9fafb;
  box-shadow: 0 0 14px rgba(56,189,248,0.5);
  transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}

.sn-pv-card .ev-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(56,189,248,0.7);
}

/* Modal für Event-Details (nur im Profil) */

.sn-pv-card .ev-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.78);
  display: none;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  z-index: 9999;
}

.sn-pv-card .ev-modal.open {
  display: flex;
}

.sn-pv-card .ev-modal-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #020617;
  border: 1px solid rgba(129,140,248,0.6);
  box-shadow: 0 25px 60px rgba(0,0,0,0.9);
}

.sn-pv-card .ev-view-card .p-2 {
  padding: .9rem .9rem 1rem;
}

.sn-pv-card .ev-view-hero {
  height: 180px;
  background-size: cover;
  background-position: center;
}

@media (max-width: 480px) {
  .sn-pv-card .ev-view-hero {
    height: 150px;
  }
}

.sn-pv-card .ev-close {
  position: absolute;
  right: .6rem;
  top: .5rem;
  border: none;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: .9rem;
  cursor: pointer;
  background: rgba(15,23,42,0.85);
  color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .12s ease;
}

.sn-pv-card .ev-close:hover {
  background: rgba(30,64,175,0.95);
  transform: translateY(-1px);
}

/* === RATINGS ========================================================= */

.sn-pv-rating-summary {
  border-radius: 1rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(251,191,36,0.8);
  background:
    radial-gradient(circle at 0 0,rgba(250,204,21,0.4),rgba(15,23,42,0.98));
  font-size: .86rem;
  margin-bottom: .55rem;
}

.sn-pv-rating-main {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: 1.1rem;
  color: #facc15;
}

.sn-pv-rating-main span:last-child {
  font-size: .8rem;
  color: #111827;
}

.sn-pv-rating-meta {
  margin-top: .15rem;
  font-size: .78rem;
  color: rgba(17,24,39,0.95);
}

/* einzelne Rating-Cards */

.sn-pv-rating-list {
  display: grid;
  gap: .55rem;
}

.sn-pv-rating-item {
  border-radius: .9rem;
  padding: .6rem .8rem .7rem;
  border: 1px solid rgba(148,163,184,0.6);
  background:
    radial-gradient(circle at top,rgba(15,23,42,0.98),rgba(15,23,42,1));
  font-size: .85rem;
}

.sn-pv-rating-stars {
  margin-bottom: .15rem;
  color: #facc15;
}

.sn-pv-rating-comment {
  color: #e5e7ff;
}

.sn-pv-rating-time {
  margin-top: .15rem;
  font-size: .75rem;
  color: rgba(148,163,184,0.95);
}

/* === FOLLOW HEADER LINKS (alt, falls irgendwo noch genutzt) ========= */

.sn-pv-follow-link {
  border: none;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(226,232,240,0.96);
  cursor: pointer;
  position: relative;
}

.sn-pv-follow-link strong {
  font-weight: 600;
  color: #c7d2fe;
}

.sn-pv-follow-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.15rem;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg,#38bdf8,#a855f7,#ec4899);
  opacity: .9;
  transition: width .18s ease;
}

.sn-pv-follow-link:hover::after {
  width: 100%;
}

/* === FOLLOW MODAL ===================================================== */

#followModal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 1rem 1rem;
  background: rgba(15,23,42,0.85);
  z-index: 10000;
}

#followModal.open {
  display: flex;
}

/* Card im Follow-Modal */
.sn-follow-modal {
  position: relative;
  max-width: 520px;
  width: 100%;
  border-radius: 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(129,140,248,0.7);
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,0.2), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(244,114,182,0.26), transparent 55%),
    linear-gradient(135deg, rgba(15,23,42,0.98), rgba(17,24,39,0.99));
  box-shadow:
    0 20px 60px rgba(0,0,0,0.95),
    0 0 0 1px rgba(15,23,42,0.9);
}

/* rotes X */
#followModal .ev-close {
  position: absolute;
  right: .6rem;
  top: .55rem;
  border: none;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: .9rem;
  cursor: pointer;
  background: radial-gradient(circle at 30% 0,#fecaca,#7f1d1d);
  color: #fef2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(248,113,113,0.7);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

#followModal .ev-close:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(248,113,113,0.9);
  background: radial-gradient(circle at 30% 0,#fee2e2,#b91c1c);
}

/* Header mit Tabs (Follower / Folgt) */

.sn-follow-modal-header {
  display: flex;
  gap: .4rem;
  padding: .7rem .85rem .5rem;
  border-bottom: 1px solid rgba(148,163,184,0.5);
  background:
    radial-gradient(circle at 0 0,rgba(56,189,248,0.18),transparent 55%),
    linear-gradient(135deg,rgba(15,23,42,0.98),rgba(15,23,42,1));
}

.sn-follow-tab {
  flex: 1 1 0;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  padding: .4rem .8rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  background: radial-gradient(circle at top,rgba(15,23,42,0.98),rgba(15,23,42,1));
  color: rgba(226,232,240,0.96);
  cursor: pointer;
  text-align: center;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.sn-follow-tab.sn-follow-tab-active {
  border-color: rgba(168,85,247,0.95);
  background: linear-gradient(135deg,#4f46e5,#a855f7);
  box-shadow: 0 0 18px rgba(129,140,248,0.8);
}

.sn-follow-tab:hover {
  transform: translateY(-1px);
}

/* Body + Liste */

.sn-follow-modal-body {
  padding: .55rem .85rem .85rem;
  max-height: min(460px, 80vh);
  overflow-y: auto;
}

/* Scrollbar dezent */

.sn-follow-modal-body::-webkit-scrollbar {
  width: 6px;
}
.sn-follow-modal-body::-webkit-scrollbar-track {
  background: rgba(15,23,42,0.9);
}
.sn-follow-modal-body::-webkit-scrollbar-thumb {
  background: rgba(129,140,248,0.8);
  border-radius: 999px;
}

/* Follower / Following Listen-Wrapper */

.sn-follow-modal-list {
  display: grid;
  gap: .45rem;
}

/* einzelne Zeile */

.sn-follow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border-radius: .9rem;
  padding: .5rem .55rem;
  border: 1px solid rgba(129,140,248,0.6);
  background:
    radial-gradient(circle at 0 0,rgba(30,64,175,0.7),rgba(15,23,42,0.98));
}

.sn-follow-row-left {
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* Avatar */

.sn-follow-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 10px rgba(129,140,248,0.7);
  border: 1px solid rgba(191,219,254,0.9);
}

/* Textbereich */

.sn-follow-text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.sn-follow-name {
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e5e7ff;
}

.sn-follow-username {
  font-size: .76rem;
  color: rgba(148,163,184,0.96);
}

/* Profil-Button rechts */

.sn-follow-profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .3rem .9rem;
  border: 1px solid rgba(129,140,248,0.9);
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #f9fafb;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(56,189,248,0.55);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

.sn-follow-profile-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(56,189,248,0.8);
  border-color: rgba(191,219,254,1);
}

/* Leerer Zustand */

.sn-follow-empty {
  font-size: .8rem;
  color: rgba(148,163,184,0.98);
  padding: .6rem .2rem;
  text-align: center;
}

/* MAIN-Bereich: Cards untereinander mit Abstand */
.sn-pv-main {
  display: flex;
  flex-direction: column;
  gap: 1.6rem; /* Abstand zwischen "Über mich", "Letzte Events", "Bewertungen" */
}

/* Optional: auf Handy etwas kleinerer Abstand */
@media (max-width: 768px) {
  .sn-pv-main {
    gap: 1.2rem;
  }

  .sn-pv-shell {
    padding: 1.8rem 1rem 2.4rem;
  }

  .sn-pv-card {
    padding: 1.6rem 1.4rem 2rem;
    border-radius: 1.4rem;
  }
}