.section-kicker {
  color: #d4af37;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 12px;
  margin: 8px 0 14px;
}

.liked-page .page-title,
.stats-page .page-title {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.95;
  margin-bottom: 14px;
}

.page-subtitle {
  max-width: 760px;
  margin: 0 auto 30px;
  color: rgba(245,245,245,0.72);
  font-size: 18px;
  line-height: 1.6;
}

.playlist-card {
  width: min(100%, 1120px);
  margin: 26px auto 0;
  border-radius: 28px;
  border: 1px solid rgba(212,175,55,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(18,18,18,0.9), rgba(8,8,8,0.96));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 30px 60px rgba(0,0,0,0.28);
  overflow: hidden;
  text-align: left;
}

.playlist-header,
.playlist-row {
  display: grid;
  grid-template-columns: 54px 1.2fr 1fr 1fr 180px;
  gap: 14px;
  align-items: center;
}

.playlist-header {
  padding: 18px 24px;
  color: rgba(245,245,245,0.56);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.playlist-row {
  padding: 18px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.playlist-row:first-child {
  border-top: 0;
}

.playlist-index {
  color: rgba(245,245,245,0.46);
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

.playlist-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.playlist-sub {
  margin-top: 4px;
  color: rgba(245,245,245,0.58);
  font-size: 14px;
}

.playlist-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(245,245,245,0.78);
  font-size: 13px;
}

.playlist-actions {
  display: flex;
  justify-content: flex-start;
  padding-left: 6px;
}

.playlist-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6cb 0%, #e9c75f 24%, #d4af37 52%, #b98714 76%, #826113 100%);
  color: #111;
  text-decoration: none;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 26px rgba(0,0,0,0.22);
}

.empty-card {
  width: min(100%, 760px);
  margin: 28px auto 0;
}

.gold-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff6cb 0%, #e9c75f 24%, #d4af37 52%, #b98714 76%, #826113 100%);
  color: #111;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 12px 26px rgba(0,0,0,0.22);
}

@media (max-width: 900px) {
  .playlist-header {
    display: none;
  }

  .playlist-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .playlist-index {
    display: none;
  }

  .playlist-actions {
    justify-content: flex-start;
  }
}


@media (min-width: 901px) {
  .playlist-actions {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .playlist-open {
    margin-left: -8px;
  }
}

/* PREMIUM UI V3 - shared visual polish */
:root{--premium-bg:#050507;--premium-surface:rgba(18,18,22,.74);--premium-border:rgba(255,255,255,.105);--premium-gold:#f5c84b;--premium-muted:rgba(255,255,255,.68)}
body{background:radial-gradient(circle at 50% -10%,rgba(245,200,75,.12),transparent 34%),radial-gradient(circle at 88% 20%,rgba(146,74,255,.09),transparent 28%),#050507!important;color:#fff!important}
.logo-slogan,.site-slogan,.slogan,[class*="slogan"]{color:#fff!important;text-shadow:0 0 18px rgba(255,255,255,.16)!important}
.auth-card,.auth-panel-wrap,.hero-card,.panel-card,.dashboard-card,.metrics-card,.priority-card,.store-hero-card,.store-balance-card,.store-card,.empty-card,.state-card,.check-card,.playlist-card,main section:not(.desktop-side-nav-panel){background:rgba(18,18,22,.74)!important;border-color:rgba(255,255,255,.105)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 70px rgba(0,0,0,.50),0 0 42px rgba(245,200,75,.08)!important;backdrop-filter:blur(20px) saturate(1.18)!important;-webkit-backdrop-filter:blur(20px) saturate(1.18)!important}
.auth-card:hover,.hero-card:hover,.panel-card:hover,.dashboard-card:hover,.store-card:hover,.playlist-card:hover{border-color:rgba(245,200,75,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 78px rgba(0,0,0,.54),0 0 48px rgba(245,200,75,.15)!important}
.gold-btn,.ghost-btn,.store-card-btn,.start-btn,.submit-btn,.save-btn,.primary-btn,.secondary-btn,.auth-btn,.action-btn,.clip-play-btn,.header-icon-btn{background:rgba(255,255,255,.055)!important;background-image:none!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 12px 30px rgba(0,0,0,.36),0 0 0 rgba(245,200,75,0)!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important}
.gold-btn:hover,.ghost-btn:hover,.store-card-btn:hover,.start-btn:hover,.submit-btn:hover,.save-btn:hover,.primary-btn:hover,.secondary-btn:hover,.auth-btn:hover,.action-btn:hover,.clip-play-btn:hover,.header-icon-btn:hover{transform:translateY(-2px)!important;background:rgba(255,255,255,.075)!important;border-color:rgba(245,200,75,.50)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 38px rgba(0,0,0,.42),0 0 26px rgba(245,200,75,.25)!important}
input,select,textarea{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 rgba(245,200,75,0)!important}
input:focus,select:focus,textarea:focus{border-color:rgba(245,200,75,.55)!important;box-shadow:0 0 0 3px rgba(245,200,75,.12),0 0 24px rgba(245,200,75,.16)!important;outline:none!important}
img[class*="avatar"],.avatar,.profile-photo,.artist-photo{box-shadow:0 0 0 1px rgba(245,200,75,.64),0 0 28px rgba(245,200,75,.24),0 14px 34px rgba(0,0,0,.40)!important}

/* ============================================================
   v24 premium button system — matched to index page
   Scope: page action buttons only. Sidebar/menu navigation excluded.
   ============================================================ */

:root {
  --btn-premium-bg: rgba(255,255,255,.055);
  --btn-premium-bg-hover: rgba(255,255,255,.078);
  --btn-premium-border: rgba(255,255,255,.14);
  --btn-premium-border-hover: rgba(245,200,75,.55);
  --btn-premium-gold: #f5c84b;
}

.main-content button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link),
.main-content .gold-btn,
.main-content .ghost-btn,
.main-content .metal-btn,
.main-content .primary-btn,
.main-content .secondary-btn,
.main-content .submit-btn,
.main-content .save-btn,
.main-content .auth-btn,
.main-content .action-btn,
.main-content .clip-play-btn,
.main-content .store-card-btn,
.main-content .cta-empty-state a,
.main-content .cta-empty-state button,
.artist-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link),
.artist-main .gold-btn,
.artist-main .ghost-btn,
.artist-main .metal-btn,
.artist-main .player-btn,
.artist-main .action-btn,
.artist-main .primary-btn,
.artist-main .secondary-btn,
.liked-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link),
.liked-main .gold-btn,
.liked-main .ghost-btn,
.liked-main .metal-btn,
.liked-main .action-btn,
.submit-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link),
.submit-main .gold-btn,
.submit-main .ghost-btn,
.submit-main .metal-btn,
.submit-main .submit-link,
.submit-main .ghost-link,
.submit-main .clip-play-btn,
.header-icon-btn,
.account-menu-link,
.account-menu button {
  background: var(--btn-premium-bg) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1px solid var(--btn-premium-border) !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.36),
    0 0 0 rgba(245,200,75,0) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease !important;
}

.main-content button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover,
.main-content .gold-btn:hover,
.main-content .ghost-btn:hover,
.main-content .metal-btn:hover,
.main-content .primary-btn:hover,
.main-content .secondary-btn:hover,
.main-content .submit-btn:hover,
.main-content .save-btn:hover,
.main-content .auth-btn:hover,
.main-content .action-btn:hover,
.main-content .clip-play-btn:hover,
.main-content .store-card-btn:hover,
.main-content .cta-empty-state a:hover,
.main-content .cta-empty-state button:hover,
.artist-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover,
.artist-main .gold-btn:hover,
.artist-main .ghost-btn:hover,
.artist-main .metal-btn:hover,
.artist-main .player-btn:hover,
.artist-main .action-btn:hover,
.artist-main .primary-btn:hover,
.artist-main .secondary-btn:hover,
.liked-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover,
.liked-main .gold-btn:hover,
.liked-main .ghost-btn:hover,
.liked-main .metal-btn:hover,
.liked-main .action-btn:hover,
.submit-main button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover,
.submit-main .gold-btn:hover,
.submit-main .ghost-btn:hover,
.submit-main .metal-btn:hover,
.submit-main .submit-link:hover,
.submit-main .ghost-link:hover,
.submit-main .clip-play-btn:hover,
.header-icon-btn:hover,
.account-menu-link:hover,
.account-menu button:hover {
  transform: translateY(-2px) !important;
  background: var(--btn-premium-bg-hover) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: var(--btn-premium-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 38px rgba(0,0,0,.42),
    0 0 26px rgba(245,200,75,.25) !important;
}

.main-content button svg,
.main-content button svg *,
.artist-main button svg,
.artist-main button svg *,
.liked-main button svg,
.liked-main button svg *,
.submit-main button svg,
.submit-main button svg *,
.header-icon-btn svg,
.header-icon-btn svg *,
.account-menu button svg,
.account-menu button svg * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.main-content button .icon,
.artist-main button .icon,
.liked-main button .icon,
.submit-main button .icon,
.header-icon-btn .icon {
  color: #ffffff !important;
  opacity: 1 !important;
}

.main-content a.gold-btn,
.artist-main a.gold-btn,
.liked-main a.gold-btn,
.submit-main a.gold-btn,
.submit-main .submit-link {
  color: var(--btn-premium-gold) !important;
}

.main-content a.gold-btn:hover,
.artist-main a.gold-btn:hover,
.liked-main a.gold-btn:hover,
.submit-main a.gold-btn:hover,
.submit-main .submit-link:hover {
  color: #ffffff !important;
}

/* ── tune-action-btn stijl ──────────────────────────────────── */
.tune-action-btn {
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(15,15,15,0.95), rgba(10,10,10,0.98));
  color: #f5f5f5;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 22px rgba(0,0,0,0.24);
  transition: transform 0.14s ease, filter 0.14s ease, border-color 0.14s ease;
}

.tune-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(245,200,75,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 28px rgba(0,0,0,0.30),
    0 0 16px rgba(245,200,75,0.15);
}

/* ============================================================
   v25 liked page button normalization
   Goal: Go To Artist matches the premium index/edit-track button.
   Sidebar/menu navigation untouched.
   ============================================================ */
.liked-page .playlist-open,
.liked-page .tune-action-btn,
.liked-page .back-link,
.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link) {
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.055) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.36),
    0 0 0 rgba(245,200,75,0) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease !important;
}

.liked-page .playlist-open:hover,
.liked-page .tune-action-btn:hover,
.liked-page .back-link:hover,
.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,.078) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(245,200,75,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 38px rgba(0,0,0,.42),
    0 0 26px rgba(245,200,75,.25) !important;
}

/* ============================================================
   Liked page buttons — match artist page action button style
   Scope: liked page buttons/links only. No HTML/layout changes.
   ============================================================ */
.page-wrap.liked-page .playlist-open,
.page-wrap.liked-page .tune-action-btn,
.page-wrap.liked-page .back-link,
.page-wrap.liked-page .gold-btn,
.page-wrap.liked-page .ghost-btn,
.page-wrap.liked-page .metal-btn,
.page-wrap.liked-page .action-btn,
.page-wrap.liked-page .primary-btn,
.page-wrap.liked-page .secondary-btn,
.page-wrap.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link) {
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.055) !important;
  background-image: none !important;
  color: #ffffff !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.36),
    0 0 0 rgba(245,200,75,0) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease !important;
}

.page-wrap.liked-page .playlist-open:hover,
.page-wrap.liked-page .tune-action-btn:hover,
.page-wrap.liked-page .back-link:hover,
.page-wrap.liked-page .gold-btn:hover,
.page-wrap.liked-page .ghost-btn:hover,
.page-wrap.liked-page .metal-btn:hover,
.page-wrap.liked-page .action-btn:hover,
.page-wrap.liked-page .primary-btn:hover,
.page-wrap.liked-page .secondary-btn:hover,
.page-wrap.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,.078) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(245,200,75,.55) !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 38px rgba(0,0,0,.42),
    0 0 26px rgba(245,200,75,.25) !important;
}

.page-wrap.liked-page .playlist-open *,
.page-wrap.liked-page .tune-action-btn *,
.page-wrap.liked-page .back-link *,
.page-wrap.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link) * {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

/* ============================================================
   Liked page glass reset — match notifications glass surface
   Scope: liked page playlist only. No HTML/layout changes.
   ============================================================ */
.liked-page .playlist-card {
  background: transparent !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-top-color: rgba(255,255,255,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 18px 42px rgba(0,0,0,.26),
    0 0 34px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

.liked-page .playlist-card:hover {
  border-color: rgba(255,255,255,.20) !important;
  border-top-color: rgba(255,255,255,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 18px 42px rgba(0,0,0,.26),
    0 0 34px rgba(255,255,255,.035) !important;
}

.liked-page .playlist-header,
.liked-page .playlist-row {
  background: transparent !important;
}

.liked-page .playlist-header {
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.liked-page .playlist-row {
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.liked-page .playlist-pill,
.liked-page .playlist-open,
.liked-page .gold-btn,
.liked-page .tune-action-btn,
.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link) {
  background: rgba(255,255,255,.06) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-top-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 24px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

.liked-page .playlist-open:hover,
.liked-page .gold-btn:hover,
.liked-page .tune-action-btn:hover,
.liked-page button:not(.desktop-nav-button):not(.mobile-nav-link):not(.desktop-nav-link):hover {
  background: rgba(255,255,255,.075) !important;
  background-image: none !important;
  border-color: rgba(212,175,55,.45) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 26px rgba(0,0,0,.26),
    0 0 16px rgba(212,175,55,.15) !important;
}