/* Homepage header layout guard. Loaded after the main stylesheet. */
body:has(.wireframe-home) .site-header {
  padding: 0 var(--wf-aligned-edge) !important;
  gap: 18px !important;
}

/* Match the account action to the selected Following state across all home variants. */
body:has(#app) .site-header .topbtn,
body:has(#app):has(.wireframe-home) .site-header .topbtn,
body:has(.creator-landing) .site-header .topbtn{border-color:#efad31!important;background:linear-gradient(105deg,#d77a21 0%,#efad31 100%)!important;color:#fff!important;box-shadow:none!important}

.curator-review-card[hidden]{display:none!important}

body:has(.wireframe-home) .site-logo {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  margin-right: 12px !important;
}

body:has(.wireframe-home) .site-header nav {
  position: static !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: clamp(18px, 2.1vw, 29px) !important;
}

body:has(.wireframe-home) .site-header .search {
  flex: 0 1 244px !important;
  margin-left: auto !important;
}

body:has(.wireframe-home) .site-header .topbtn {
  flex: 0 0 auto !important;
}

@media (max-width: 980px) {
  body:has(.wireframe-home) .site-header { padding: 0 12px !important; }
  body:has(.wireframe-home) .site-logo { margin-right: 2px !important; }
  body:has(.wireframe-home) .site-header nav {
    gap: 18px !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 760px) {
  body:has(.wireframe-home) .wf-hero-logo {
    display: none !important;
  }

  body:has(.wireframe-home) .wf-asset-hero::before {
    display: none !important;
    background-image: none !important;
  }
}

/* About page surround: no photographic page background behind the artwork. */
html:has(body .about-static-image),
body:has(#app):has(.about-static-image),
body:has(#app):has(.about-static-image) main#app,
body:has(#app):has(.about-static-image) main#app > .wrap,
body:has(#app):has(.about-static-image) .about-page {
  background-color:#02040c!important;
  background-image:linear-gradient(100deg,#02040c 0%,#070518 48%,#020712 100%)!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}

/* One authoritative navigation layout for every route and account portal. */
body:has(#app) .site-header {
  display: grid !important;
  grid-template-columns: 44px minmax(480px, 1fr) minmax(180px, 244px) auto !important;
  align-items: center !important;
  column-gap: clamp(18px, 2.1vw, 30px) !important;
  width: 100% !important;
  height: 70px !important;
  padding: 0 clamp(20px, 3.2vw, 52px) !important;
  background: rgba(2, 5, 12, .97) !important;
  border-bottom: 1px solid rgba(97, 103, 139, .2) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}

body:has(#app) .site-header .site-logo {
  grid-column: 1 !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

body:has(#app) .site-header .site-logo img {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: contain !important;
}

body:has(#app) .site-header nav {
  grid-column: 2 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(18px, 2.1vw, 29px) !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

body:has(#app) .site-header nav a {
  position: relative !important;
  flex: 0 0 auto !important;
  padding: 27px 0 24px !important;
  color: #f3f1f6 !important;
  font: 650 12px/1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

body:has(#app) .site-header nav a.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 10px !important;
  height: 2px !important;
  background: #d77a21 !important;
  box-shadow: 0 0 10px rgba(215, 122, 33, .65) !important;
}

body:has(#app) .site-header .search {
  grid-column: 3 !important;
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  border: 1px solid #26354a !important;
  border-radius: 23px !important;
  background: #09121d !important;
  color: #aeb8c6 !important;
}

body:has(#app) .site-header .topbtn {
  grid-column: 4 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  border: 1px solid #9a6b12 !important;
  border-radius: 23px !important;
  background: transparent !important;
  color: #f0bd54 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

body:has(#app) .site-header .notifications-menu {
  position: absolute !important;
  right: clamp(190px, 14vw, 225px) !important;
  top: 50% !important;
  z-index: 2 !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1100px) {
  body:has(#app) .site-header {
    grid-template-columns: 42px minmax(420px, 1fr) auto !important;
    padding: 0 18px !important;
  }
  body:has(#app) .site-header .search { display: none !important; }
  body:has(#app) .site-header .topbtn { grid-column: 3 !important; }
  body:has(#app) .site-header .notifications-menu { right: 150px !important; }
}

@media (max-width: 760px) {
  body:has(#app) .site-header {
    grid-template-columns: 42px minmax(0, 1fr) !important;
    height: 64px !important;
    padding: 0 14px !important;
    column-gap: 14px !important;
  }
  body:has(#app) .site-header nav {
    grid-column: 2 !important;
    gap: 22px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  body:has(#app) .site-header nav::-webkit-scrollbar { display: none !important; }
  body:has(#app) .site-header nav a {
    font-size: 10px !important;
    padding: 24px 0 21px !important;
  }
  body:has(#app) .site-header .topbtn,
  body:has(#app) .site-header .notifications-menu { display: none !important; }
}

/* Local curation desk: intentionally has no public navigation link. */
.curator-access{min-height:calc(100vh - 190px);display:grid;place-items:center;padding:32px 16px}.curator-login-card{width:min(470px,100%);display:grid;gap:16px;padding:34px;border-radius:22px;background:rgba(7,13,29,.88);box-shadow:0 24px 80px rgba(0,0,0,.35)}.curator-login-card label{display:grid;gap:7px;color:#dbe5f5;font-size:.84rem}.curator-login-card input{width:100%;padding:13px 14px;border:1px solid #31445f;border-radius:10px;background:#07111d;color:#fff}.curator-login-status{min-height:20px;margin:0;color:#ff7d9d}
.curator-portal{display:grid;grid-template-columns:255px minmax(0,1fr);min-height:calc(100vh - 150px);overflow:hidden;border:1px solid rgba(215, 122, 33,.45);border-radius:22px;background:rgba(4,10,24,.76);box-shadow:0 24px 80px rgba(0,0,0,.28)}.curator-sidebar{display:flex;flex-direction:column;padding:28px 20px;border-right:1px solid rgba(215, 122, 33,.3);background:linear-gradient(180deg,rgba(17,10,42,.94),rgba(4,13,28,.92))}.curator-sidebar h2{margin:6px 0 8px}.curator-sidebar p{color:#9cabc0;font-size:.85rem;line-height:1.5}.curator-sidebar nav{display:grid;gap:8px;margin-top:24px}.curator-sidebar nav button,.curator-signout{display:flex;justify-content:space-between;padding:12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#cbd7e8;text-align:left;cursor:pointer}.curator-sidebar nav button:hover,.curator-sidebar nav button.active{border-color:#d77a21;background:linear-gradient(90deg,rgba(239, 173, 49,.2),rgba(215, 122, 33,.1));color:#fff}.curator-signout{margin-top:auto;border-color:#33455e}.curator-main{padding:28px;min-width:0}.curator-main>header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}.curator-main h1{margin:5px 0;font-size:clamp(1.6rem,3vw,2.4rem)}.curator-summary{display:flex;gap:9px;flex-wrap:wrap}.curator-summary span{padding:9px 12px;border:1px solid #31445f;border-radius:10px;background:rgba(9,20,37,.8);color:#aebed2}.curator-summary b{color:#fff}.curator-queue{display:grid;gap:12px}.curator-review-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px;border:1px solid rgba(215, 122, 33,.38);border-radius:14px;background:rgba(8,18,34,.78)}.curator-review-art .avatar{width:72px;height:72px;border-radius:11px}.curator-review-copy h3{margin:5px 0}.curator-review-copy p,.curator-review-copy small{color:#aebed2}.curator-kind,.curator-status{display:inline-block;margin-right:8px;padding:4px 8px;border-radius:999px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.curator-kind{color:#efad31;background:rgba(215, 122, 33,.14)}.status-review{color:#ffc44b;background:rgba(255,190,39,.14)}.status-approved{color:#efad31;background:rgba(215, 122, 33,.14)}.status-rejected{color:#ff809b;background:rgba(255,72,110,.14)}.curator-review-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.curator-review-actions button{padding:8px 10px;border-radius:8px;background:#0b1728;color:#fff;cursor:pointer}.curator-review-actions .approve{border:1px solid #d77a21}.curator-review-actions .reject{border:1px solid #ff5278}.curator-review-actions .review{border:1px solid #f2b52b}.curator-review-actions button:hover{transform:translateY(-2px);filter:brightness(1.2)}.curator-empty{text-align:center;color:#9fb0c5;padding:50px}
@media(max-width:850px){.curator-portal{grid-template-columns:1fr}.curator-sidebar{border-right:0;border-bottom:1px solid rgba(215, 122, 33,.3)}.curator-sidebar nav{grid-template-columns:repeat(2,1fr)}.curator-signout{margin-top:16px}.curator-main>header{display:block}.curator-summary{margin-top:16px}.curator-review-card{grid-template-columns:58px minmax(0,1fr)}.curator-review-art .avatar{width:58px;height:58px}.curator-review-actions{grid-column:1/-1;justify-content:stretch}.curator-review-actions button{flex:1}.curator-main{padding:18px}}

/* Desktop homepage header follows the same left/right guides as the hero and Trending panel. */
@media (min-width:1101px) {
  body:has(.wireframe-home) .site-header {
    grid-template-columns:minmax(480px,1fr) minmax(180px,244px) auto!important;
    padding-left:calc(clamp(20px,3.2vw,52px) + 216px)!important;
    padding-right:var(--wf-aligned-edge)!important;
  }
  body:has(.wireframe-home) .site-header .site-logo {
    position:absolute!important;
    left:clamp(20px,3.2vw,52px)!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  body:has(.wireframe-home) .site-header nav {grid-column:1!important}
  body:has(.wireframe-home) .site-header .search {grid-column:2!important}
  body:has(.wireframe-home) .site-header .topbtn {grid-column:3!important}
}
body:has(#app) .site-header nav a {
  text-transform:uppercase!important;
  letter-spacing:.06em!important;
}
body:has(.wireframe-home) .site-header .topbtn {
  min-height:42px!important;
  padding:0 22px!important;
  border:1px solid rgba(239, 173, 49,.72)!important;
  border-radius:6px!important;
  background:linear-gradient(105deg,#d77a21,#d77a21 48%,#d77a21)!important;
  color:#fff!important;
  font:850 12px/1 Inter,"Segoe UI",Arial,sans-serif!important;
  text-transform:uppercase!important;
  letter-spacing:0!important;
  box-shadow:0 10px 25px rgba(215, 122, 33,.24)!important;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease!important;
}
body:has(.wireframe-home) .site-header .topbtn:hover {
  transform:translateY(-2px)!important;
  filter:brightness(1.16) saturate(1.1)!important;
  box-shadow:0 0 24px rgba(215, 122, 33,.48),0 0 16px rgba(215, 122, 33,.34)!important;
}

/* Keep the compact brand mark clear of HOME at every header breakpoint. */
body:has(#app) .site-header .site-logo {
  display:none!important;
}
@media (min-width:1101px) {
  body:has(.wireframe-home) .site-header .site-logo {
    display:none!important;
  }
}

@media (max-width:1100px) {
  body:has(#app) .site-header {
    grid-template-columns:minmax(420px,1fr) auto!important;
  }
  body:has(#app) .site-header nav {grid-column:1!important}
  body:has(#app) .site-header .topbtn {grid-column:2!important}
}

@media (max-width:760px) {
  body:has(#app) .site-header {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:has(#app) .site-header nav {grid-column:1!important}
}

/* Homepage desktop: use the exact same outer guide as the Trending panel. */
@media (min-width:1101px) {
  body:has(#app):has(.wireframe-home) .site-header {
    grid-template-columns:minmax(480px,1fr) minmax(180px,244px) auto!important;
    width:calc(100% - 9px)!important;
    padding-left:var(--wf-aligned-edge)!important;
    padding-right:var(--wf-aligned-edge)!important;
  }
  body:has(#app):has(.wireframe-home) .site-header nav {grid-column:1!important}
  body:has(#app):has(.wireframe-home) .site-header .search {grid-column:2!important}
  body:has(#app):has(.wireframe-home) .site-header .topbtn {
    grid-column:3!important;
    border-color:rgba(239, 173, 49,.72)!important;
    border-radius:6px!important;
    background:linear-gradient(105deg,#d77a21,#d77a21 48%,#d77a21)!important;
    color:#fff!important;
    font:850 12px/1 Inter,"Segoe UI",Arial,sans-serif!important;
  }
}

/* All desktop routes share the homepage navigation guides and column positions. */
@media (min-width:1101px) {
  body:has(#app) {
    --syntera-header-edge:max(22px,calc((100vw - 1420px)/2));
  }
  body:has(#app) .site-header {
    grid-template-columns:minmax(480px,1fr) minmax(180px,244px) auto!important;
    width:calc(100% - 9px)!important;
    padding-left:var(--syntera-header-edge)!important;
    padding-right:var(--syntera-header-edge)!important;
  }
  body:has(#app) .site-header nav {grid-column:1!important}
  body:has(#app) .site-header .search {grid-column:2!important}
  body:has(#app) .site-header .topbtn {grid-column:3!important}

  body:has(#app):has(.wireframe-home) .site-header {
    width:calc(100% - 9px)!important;
    padding-left:var(--wf-aligned-edge)!important;
    padding-right:var(--wf-aligned-edge)!important;
  }
}

/* Desktop page canvas: every route uses the same 1420px guides as Home panels. */
@media (min-width:1101px) {
  body:has(#app):not(:has(.wireframe-home)):not(:has(.component-home)) main#app > .wrap {
    box-sizing:border-box!important;
    width:min(1420px,calc(100% - 44px))!important;
    max-width:1420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  body:has(#app):not(:has(.wireframe-home)):not(:has(.component-home)) main#app > .wrap > section {
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* Responsive, fully interactive homepage media player. */
body:has(.wireframe-home) .wf-home-canvas {
  padding-bottom: 104px !important;
}

body:has(.wireframe-home) .wf-player {
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(230px,.8fr) minmax(330px,1.35fr) minmax(160px,.65fr) !important;
  gap: clamp(10px,2vw,28px) !important;
  padding: 8px clamp(12px,2.3vw,34px) !important;
}

.wf-player button {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid transparent !important;
  border-radius: 50%;
  background: transparent !important;
  color: #e9edf5 !important;
  cursor: pointer;
  touch-action: manipulation;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wf-player button:focus-visible {
  border-color: rgba(239, 173, 49,.62) !important;
  background: rgba(239, 173, 49,.12) !important;
  color: #fff !important;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(239, 173, 49,.25);
}

.wf-player button.active,
.wf-player button[aria-pressed="true"] {
  border-color: #d77a21 !important;
  color: #efad31 !important;
  background: rgba(215, 122, 33,.12) !important;
}

.wf-player .wf-player-play {
  min-width: 46px !important;
  min-height: 46px !important;
}

.wf-player-track,
.wf-player-controls,
.wf-player-volume,
.wf-player-meta {
  min-width: 0 !important;
}

.wf-player-meta b,
.wf-player-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wf-player-timeline input,
.wf-player-volume input {
  width: 100%;
  height: 18px;
  margin: 0;
  accent-color: #efad31;
  cursor: pointer;
}

.wf-player-timeline {
  grid-template-columns: 34px minmax(100px,360px) 34px !important;
}

@media (max-width: 980px) {
  body:has(.wireframe-home) .wf-player {
    grid-template-columns: minmax(210px,.8fr) minmax(300px,1.2fr) !important;
  }
  body:has(.wireframe-home) .wf-player-volume { display: none !important; }
}

@media (max-width: 680px) {
  body:has(.wireframe-home) .wf-home-canvas { padding-bottom: 132px !important; }
  body:has(.wireframe-home) .wf-player {
    min-height: 116px !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-rows: 52px 44px !important;
    gap: 4px 10px !important;
    padding: 8px 10px 7px !important;
  }
  body:has(.wireframe-home) .wf-player-track {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 44px minmax(72px,1fr) 34px 34px !important;
    gap: 6px !important;
  }
  body:has(.wireframe-home) .wf-player-track > button {
    display: inline-grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  body:has(.wireframe-home) .wf-player-art {
    width: 44px !important;
    height: 44px !important;
  }
  body:has(.wireframe-home) .wf-player-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid !important;
    grid-template-columns: minmax(190px,auto) minmax(100px,1fr) !important;
    align-items: center;
    gap: 7px !important;
  }
  body:has(.wireframe-home) .wf-player-controls > div {
    display: flex !important;
    gap: 4px !important;
  }
  body:has(.wireframe-home) .wf-player-controls > div > button {
    display: inline-grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 13px !important;
  }
  body:has(.wireframe-home) .wf-player-controls .wf-player-play {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
  body:has(.wireframe-home) .wf-player-timeline {
    display: grid !important;
    grid-template-columns: 30px minmax(55px,1fr) 30px !important;
    width: 100% !important;
  }
  body:has(.wireframe-home) .wf-player-timeline time { font-size: 7px !important; }
}

@media (max-width: 420px) {
  body:has(.wireframe-home) .wf-player-controls {
    grid-template-columns: 180px minmax(80px,1fr) !important;
  }
  body:has(.wireframe-home) .wf-player-controls > div { justify-content: center !important; }
  body:has(.wireframe-home) .wf-player-meta small { font-size: 7px !important; }
}

/* Local preview: proportional 50%-viewport homepage hero using transparent art. */
body:has(.wireframe-home) .wf-asset-hero {
  height: 50vh !important;
  height: 50dvh !important;
  min-height: 0 !important;
  background-image: linear-gradient(100deg,#02040c 0%,#070518 48%,#020712 100%) !important;
  background-size: cover !important;
}

/* Home must never inherit the internal-page syntera-new-background artwork. */
html:has(body .wireframe-home),
body:has(.wireframe-home),
body:has(.wireframe-home) main#app,
body:has(.wireframe-home) main#app > .wrap,
body:has(.wireframe-home) .wireframe-home,
body:has(.wireframe-home) .wf-home-canvas {
  background-color: #02040c !important;
  background-image: linear-gradient(100deg, #02040c 0%, #070518 48%, #020712 100%) !important;
  background-attachment: scroll !important;
}

body:has(.wireframe-home)::before,
body:has(.wireframe-home)::after,
body:has(.wireframe-home) main#app::before,
body:has(.wireframe-home) main#app::after,
body:has(.wireframe-home) main#app > .wrap::before,
body:has(.wireframe-home) main#app > .wrap::after {
  background-image: none !important;
}

body:has(.wireframe-home) .wf-asset-hero::before {
  background-image: url('assets/top-bakcgrounhd-banner.png') !important;
  background-position: right center !important;
  background-size: auto 100% !important;
}

body:has(.wireframe-home) .wf-hero-logo {
  left: calc(100% - var(--wf-grid-edge) - 29.3dvh) !important;
  top: calc(43.2% + 12px) !important;
  width: auto !important;
  height: 55% !important;
}

/* Login artwork: match the interactive homepage logo treatment. */
body:has(.login-screen) .login-art-logo {
  width: min(62%, 360px) !important;
  height: auto !important;
  opacity: 1 !important;
  cursor: pointer;
  transform: scale(1) rotate(0deg);
  transform-origin: center;
  transition: transform .34s ease, filter .34s ease;
  will-change: transform, filter;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.8)) !important;
}

body:has(.login-screen) .login-art-logo:hover {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 0 22px rgba(239, 173, 49,.65)) drop-shadow(0 0 38px rgba(239, 173, 49,.48)) !important;
}

@media (max-width: 680px) {
  body:has(.login-screen) .login-art-logo {
    width: min(52%, 230px) !important;
  }
}

/* Fan signup: share the artist signup visual system while retaining fan fields. */
body:has(.supporter-signup-polished) .supporter-signup-polished {
  max-width: 1320px !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 18px !important;
  align-items: start;
}

body:has(.supporter-signup-polished) .supporter-form,
body:has(.supporter-signup-polished) .artist-recommendations {
  border: 1px solid #32485d !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(12,23,36,.96), rgba(6,16,26,.96)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.32) !important;
}

body:has(.supporter-signup-polished) .supporter-form {
  padding: clamp(22px, 2.4vw, 34px) !important;
}

body:has(.supporter-signup-polished) .supporter-form .page-title {
  margin: 0 0 8px !important;
  font-size: clamp(30px, 3vw, 38px) !important;
  line-height: 1.05 !important;
}

body:has(.supporter-signup-polished) .supporter-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body:has(.supporter-signup-polished) .supporter-form input,
body:has(.supporter-signup-polished) .supporter-form select {
  min-height: 42px !important;
  border: 1px solid #35536a !important;
  border-radius: 7px !important;
  background: #07111b !important;
}

body:has(.supporter-signup-polished) .supporter-form input:focus,
body:has(.supporter-signup-polished) .supporter-form select:focus {
  border-color: #efad31 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(239, 173, 49,.14) !important;
}

body:has(.supporter-signup-polished) .supporter-languages,
body:has(.supporter-signup-polished) .supporter-genre,
body:has(.supporter-signup-polished) .fan-password-block,
body:has(.supporter-signup-polished) .supporter-notice {
  margin-top: 18px !important;
  padding: 18px !important;
  border: 1px solid #32485d !important;
  border-radius: 9px !important;
  background: rgba(5,13,25,.72) !important;
}

body:has(.supporter-signup-polished) .supporter-languages label:has(input:checked),
body:has(.supporter-signup-polished) .supporter-genre label:has(input:checked),
body:has(.supporter-signup-polished) .supporter-languages button[aria-pressed="true"],
body:has(.supporter-signup-polished) .supporter-genre button[aria-pressed="true"] {
  border-color: #efad31 !important;
  background: linear-gradient(110deg, rgba(141, 73, 39,.76), rgba(13,43,81,.88)) !important;
  box-shadow: inset 3px 0 #d77a21 !important;
}

body:has(.supporter-signup-polished) .supporter-continue {
  margin-top: 18px !important;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: linear-gradient(105deg, #d77a21, #d77a21 48%, #d77a21) !important;
  box-shadow: 0 10px 28px rgba(215, 122, 33,.25) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

body:has(.supporter-signup-polished) .supporter-continue:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.12) !important;
  box-shadow: 0 14px 34px rgba(215, 122, 33,.42) !important;
}

body:has(.supporter-signup-polished) .fanclub-why-link {
  color: #efad31 !important;
}

@media (max-width: 880px) {
  body:has(.supporter-signup-polished) .supporter-signup-polished,
  body:has(.supporter-signup-polished) .supporter-form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Signup frames: match the rounded, translucent blocks used across the site. */
body:has(.artist-signup-page) .artist-signup-page,
body:has(.supporter-signup-polished) .supporter-form,
body:has(.supporter-signup-polished) .artist-recommendations {
  border: 1px solid rgba(215, 122, 33,.25) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(13,12,35,.84), rgba(3,12,29,.84)) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body:has(.artist-signup-page) .artist-signup-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 34px);
}

/* Homepage scrolls inside the area below the 70px navigation bar. */
html:has(body .wireframe-home),
body:has(.wireframe-home) {
  --wf-fixed-player-height: 87px;
  height: 100%;
  overflow: hidden !important;
}

body:has(.wireframe-home) main#app {
  height: calc(100vh - 75px - var(--wf-fixed-player-height)) !important;
  height: calc(100dvh - 75px - var(--wf-fixed-player-height)) !important;
  min-height: 0 !important;
  margin-top: 75px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 680px) {
  body:has(.wireframe-home) {
    --wf-fixed-player-height: 116px;
  }
}

body:has(.wireframe-home) main#app::-webkit-scrollbar-track {
  background: rgba(3,7,17,.88);
}

body:has(.wireframe-home) main#app::-webkit-scrollbar-thumb {
  border: 2px solid rgba(3,7,17,.88);
  border-radius: 10px;
  background: linear-gradient(#efad31, #d77a21);
}

/* About page: restore the original ecosystem artwork and its reusable hotspots. */
body:has(.about-static-image) .about-hero-wrap {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 3200 / 1798 !important;
  display: block !important;
  padding: 0 !important;
}

body:has(.about-static-image) .about-hero-wrap > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top !important;
}

body:has(.about-static-image) .about-hotspot {
  position: absolute !important;
}

body:has(.about-static-image) .about-hero-wrap::before,
body:has(.about-static-image) .about-hero-wrap::after {
  display: block !important;
}

/* Mobile artist profile: scroll the entire frame so all bio content is reachable. */
@media (max-width: 760px) {
  .artist-bio-box {
    display: block !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #efad31 rgba(7,17,28,.72);
  }

  .artist-bio-box::-webkit-scrollbar { width: 8px; }
  .artist-bio-box::-webkit-scrollbar-track {
    background: rgba(7,17,28,.72);
    border-radius: 8px;
  }
  .artist-bio-box::-webkit-scrollbar-thumb {
    border: 2px solid rgba(7,17,28,.72);
    border-radius: 8px;
    background: linear-gradient(#efad31, #d77a21);
  }
  .artist-bio-releases-scroll {
    overflow: visible !important;
    max-height: none !important;
  }
}

@media (max-width: 760px) {
  body:has(.about-static-image) .about-hero-wrap {
    width: 100% !important;
    aspect-ratio: auto !important;
  }
  body:has(.about-static-image) .about-hotspot {
    display: none !important;
  }
  body:has(.about-static-image) .about-hero-wrap > img {
    height: auto !important;
    object-fit: contain !important;
  }
}
/* Artist collaboration/profile controls */
.artist-collab-choice{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;border:1px solid rgba(215, 122, 33,.38);border-radius:12px;background:rgba(7,15,30,.58);cursor:pointer}.artist-collab-choice input{width:19px;height:19px;margin-top:2px;accent-color:#efad31}.artist-collab-choice span{display:grid;gap:3px}.artist-collab-choice small{color:#aebbd0}.portal-artist-roles{margin-top:20px}.portal-profile-section{margin-top:18px}.portal-profile-photo{display:flex;flex-direction:column;gap:8px;align-items:center}.portal-profile-photo small{text-align:center}.portal-photo-preview img,.portal-sidebar-photo-frame img{width:100%;height:100%;object-fit:cover}.artist-role-tags .open-collab{border-color:#d77a21;background:linear-gradient(135deg,rgba(239, 173, 49,.2),rgba(215, 122, 33,.2));color:#efad31}
/* Local collaboration browsing and header refinements. */
.site-header nav .notifications-menu{position:relative!important;right:auto!important;top:auto!important;transform:none!important;align-self:stretch!important;display:flex;align-items:center;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:inherit!important;font:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;text-transform:uppercase!important;white-space:nowrap}.site-header nav .notifications-menu:hover{color:#fff!important}.site-header nav .notifications-menu[hidden]{display:none!important}.wf-track-art>span{display:none!important}.wf-track-cover{width:100%;height:100%;display:block;object-fit:cover}.artist-bio-profile-rail .artist-bio-social-row{display:grid!important;grid-template-columns:repeat(4,38px)!important;gap:8px!important;width:auto!important;justify-content:start!important}.artist-bio-profile-rail .social-icon{width:38px!important;height:36px!important}.artist-bio-profile-rail .social-icon svg{width:19px;height:19px;display:block}.request-collaboration-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 13px;border:1px solid #d77a21;border-radius:6px;background:linear-gradient(100deg,#d77a21,#d77a21);color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 0 18px rgba(239, 173, 49,.25)}.request-collaboration-btn:hover{transform:translateY(-2px);filter:brightness(1.12)}
body:has(#app) .site-header nav .notifications-menu{flex:0 0 auto!important;align-self:auto!important;padding:27px 0 24px!important;color:#f3f1f6!important;font:650 12px/1 Inter,"Segoe UI",Arial,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
.artist-bio-profile-rail .artist-bio-social-row .social-icon{width:38px!important;min-width:38px!important}

/* Logged-in fan navigation: Notifications is the menu item immediately after About. */
body:has(#app) .site-header nav > a[href="#about"] {
  order: 5 !important;
}
body:has(#app) .site-header nav > .notifications-menu {
  position: relative !important;
  inset: auto !important;
  order: 6 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 27px 0 24px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f3f1f6 !important;
  font: 650 12px/1 Inter, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
body:has(#app) .site-header nav > .notifications-menu[hidden] {
  display: none !important;
}
body:has(#app) .site-header nav:has(> .notifications-menu:not([hidden])) {
  gap: clamp(14px, 1.55vw, 24px) !important;
}
@media (max-width: 760px) {
  body:has(#app) .site-header nav > .notifications-menu {
    display: none !important;
  }
}

/* Use the main navigation typography on text buttons throughout the site. */
body:has(#app) button:not(.play):not(.cover-play):not(.fan-play):not(.preview-play):not(.wf-player-icon):not(.tpm-control):not(.social-icon):not([aria-label]) {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Remember-me consent dialog. */
.remember-consent-overlay{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:20px;background:rgba(1,4,13,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.remember-consent-card{width:min(440px,100%);padding:32px;border:1px solid rgba(239, 173, 49,.65);border-radius:18px;background:linear-gradient(145deg,rgba(13,12,35,.98),rgba(3,12,29,.98));box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 36px rgba(215, 122, 33,.18);text-align:center}
.remember-consent-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;border:1px solid rgba(215, 122, 33,.7);border-radius:50%;background:linear-gradient(135deg,rgba(239, 173, 49,.25),rgba(215, 122, 33,.22));font-size:24px;box-shadow:0 0 24px rgba(215, 122, 33,.25)}
.remember-consent-card h2{margin:0 0 12px;color:#fff;font-size:23px}.remember-consent-card p{margin:0 auto 10px;color:#c8d4e5;line-height:1.6}.remember-consent-card .remember-consent-note{color:#8fa1b9;font-size:12px}
.remember-consent-actions{display:flex;justify-content:center;gap:12px;margin-top:24px}.remember-consent-actions .btn{min-width:118px}
@media(max-width:520px){.remember-consent-card{padding:26px 20px}.remember-consent-actions{flex-direction:column}.remember-consent-actions .btn{width:100%}}

/* One consistent Sign in / Join treatment across every route. */
body:has(#app) .site-header .topbtn,
body:has(#app):has(.wireframe-home) .site-header .topbtn,
body:has(.creator-landing) .site-header .topbtn {
  min-height: 42px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(239, 173, 49, .78) !important;
  border-radius: 999px !important;
  background: linear-gradient(105deg, #d77a21 0%, #d77a21 48%, #d77a21 100%) !important;
  color: #fff !important;
  font: 850 12px/1 Inter, "Segoe UI", Arial, sans-serif !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 9px 24px rgba(215, 122, 33, .28) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

body:has(#app) .site-header .topbtn:hover,
body:has(#app) .site-header .topbtn:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.15) saturate(1.08) !important;
  box-shadow: 0 0 25px rgba(215, 122, 33, .48), 0 0 17px rgba(215, 122, 33, .36) !important;
  outline: none !important;
}

/* Flat Syntera scrollbar: light-blue rail with neon-pink position indicator. */
html,
body,
main#app,
.artist-bio-box {
  scrollbar-width: thin !important;
  scrollbar-color: #efad31 #efad31 !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
main#app::-webkit-scrollbar,
.artist-bio-box::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
main#app::-webkit-scrollbar-track,
.artist-bio-box::-webkit-scrollbar-track,
body:has(.wireframe-home) main#app::-webkit-scrollbar-track {
  border: 0 !important;
  border-radius: 0 !important;
  background: #efad31 !important;
  box-shadow: none !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
main#app::-webkit-scrollbar-thumb,
.artist-bio-box::-webkit-scrollbar-thumb,
body:has(.wireframe-home) main#app::-webkit-scrollbar-thumb {
  min-height: 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #efad31 !important;
  box-shadow: 0 0 8px rgba(239, 173, 49, .95), 0 0 15px rgba(239, 173, 49, .58) !important;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
main#app::-webkit-scrollbar-thumb:hover,
.artist-bio-box::-webkit-scrollbar-thumb:hover {
  background: #efad31 !important;
}

/* Pull the homepage Trending panel 20px closer to the hero. */
body:has(.wireframe-home) .wf-trending {
  margin-top: -45px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Shared media timeline: blue rail, grey keyline, neon-pink elapsed fill. */
.wf-player-timeline input[type="range"],
input[type="range"][data-preview-seek] {
  appearance: none !important;
  -webkit-appearance: none !important;
  height: 7px !important;
  padding: 0 !important;
  border: 1px solid #d3d8e0 !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg, #efad31 0 var(--seek-progress, 0%), #efad31 var(--seek-progress, 0%) 100%) !important;
  box-shadow: 0 0 7px rgba(239, 173, 49, .3) !important;
  cursor: pointer !important;
}

.wf-player-timeline input[type="range"]::-webkit-slider-runnable-track,
input[type="range"][data-preview-seek]::-webkit-slider-runnable-track {
  height: 5px !important;
  border: 0 !important;
  background: transparent !important;
}

.wf-player-timeline input[type="range"]::-webkit-slider-thumb,
input[type="range"][data-preview-seek]::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  margin-top: -3px !important;
  border: 1px solid #ffd3fa !important;
  border-radius: 50% !important;
  background: #efad31 !important;
  box-shadow: 0 0 9px rgba(239, 173, 49, .9) !important;
}

.wf-player-timeline input[type="range"]::-moz-range-track,
input[type="range"][data-preview-seek]::-moz-range-track {
  height: 5px !important;
  border: 0 !important;
  background: transparent !important;
}

.wf-player-timeline input[type="range"]::-moz-range-progress,
input[type="range"][data-preview-seek]::-moz-range-progress {
  height: 5px !important;
  background: #efad31 !important;
}

.wf-player-timeline input[type="range"]::-moz-range-thumb,
input[type="range"][data-preview-seek]::-moz-range-thumb {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid #ffd3fa !important;
  border-radius: 50% !important;
  background: #efad31 !important;
  box-shadow: 0 0 9px rgba(239, 173, 49, .9) !important;
}

/* Shared translucent block surface, matched to Trending on Syntera. */
:root {
  --syntera-shared-block: linear-gradient(145deg, rgba(13, 12, 35, .86), rgba(3, 12, 29, .86));
}

body:has(#app) :is(
  .panel,
  .wire-panel,
  .wf-panel,
  .wf-final,
  .wf-track-card,
  .wf-collab-card,
  .explore-filters,
  .artist-browse-card,
  .artist-signup-page,
  .supporter-form,
  .artist-recommendations,
  .artist-portal-sidebar,
  .artist-portal-main,
  .curator-portal,
  .curator-review-card,
  .login-card,
  .tpm-bar,
  .fan-stat-grid > article,
  .creator-value-grid > article,
  .creator-dashboard-preview,
  .creator-trust-grid > article
) {
  background-color: rgba(7, 10, 30, .86) !important;
  background-image: var(--syntera-shared-block) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* End the homepage volume control on the Trending panel's right guide. */
@media (min-width: 981px) {
  body:has(.wireframe-home) .wf-player {
    padding-left: max(22px, calc((100vw - 1376px) / 2)) !important;
    padding-right: max(42px, calc((100vw - 1376px) / 2 - 5px)) !important;
  }
}


/* Lift the hero beneath the transparent ecosystem heading. */
body:has(.wireframe-home) .wf-home-eco-banner {
  position: absolute !important;
  z-index: 8 !important;
  top: 0 !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
}

body:has(.wireframe-home) .wf-asset-hero {
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

body:has(.wireframe-home) .wf-home-canvas {
  position: relative !important;
}
.curator-decline-overlay{z-index:10050}
.curator-decline-box{width:min(620px,calc(100vw - 32px));border:1px solid rgba(239, 173, 49,.45);border-radius:20px;background:rgba(5,8,24,.96);box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 30px rgba(239, 173, 49,.16)}
.curator-decline-box h2{margin:4px 36px 20px 0;color:#fff;font-size:1.25rem;line-height:1.35}
.curator-decline-box textarea{display:block;width:100%;min-height:150px;resize:vertical;padding:14px;border:1px solid rgba(215, 122, 33,.45);border-radius:12px;background:#fff;color:#111;font:inherit;box-sizing:border-box}
.curator-decline-box textarea:focus{outline:2px solid #efad31;outline-offset:2px}
.curator-decline-actions{display:flex;justify-content:center;margin-top:20px}
.curator-decline-actions .btn{min-width:150px}
.curator-decline-error{min-height:1.3em;margin:8px 0 0;color:#efad31;text-align:center}
.portal-status-declined{color:#efad31;border-color:rgba(239, 173, 49,.45)}
.curator-track-play{white-space:nowrap}

/* Artist session expiry prompt. */
.syntera-session-expired-overlay{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;padding:20px;background:rgba(1,3,13,.72);backdrop-filter:blur(7px)}
.syntera-session-expired-card{width:min(430px,100%);padding:28px;border:1px solid rgba(239, 173, 49,.5);border-radius:20px;background:rgba(7,11,29,.98);box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 32px rgba(215, 122, 33,.16);text-align:center}
.syntera-session-expired-card h2{margin:0 0 10px;color:#fff}
.syntera-session-expired-card p{margin:0 0 22px;color:#d4dceb}
.syntera-session-expired-card .btn{min-width:130px}

/* A genre picker opened from the upload dialog must sit above that dialog. */
#modal:has(.genre-modal){z-index:10200}

.portal-track-links-section{margin-top:18px;padding-top:16px;border-top:1px solid rgba(91,122,157,.35)}
.portal-track-links-section h3{margin:0 0 12px}.portal-track-links-section h3 small{color:#9eabba;font-size:.75em;font-weight:500}
.track-video-request{display:flex!important;align-items:center;gap:10px;margin-top:16px!important;color:#e7edf8!important;font-size:.88rem!important;text-transform:none!important;cursor:pointer}
.track-video-request input{width:17px!important;height:17px!important;accent-color:#efad31}
.track-video-notice-overlay{position:fixed;inset:0;z-index:10300;display:grid;place-items:center;padding:20px;background:rgba(1,3,13,.74);backdrop-filter:blur(7px)}
.track-video-notice-card{width:min(520px,100%);padding:28px;border:1px solid rgba(215, 122, 33,.5);border-radius:20px;background:rgba(7,11,29,.98);box-shadow:0 24px 80px rgba(0,0,0,.65),0 0 32px rgba(239, 173, 49,.17);text-align:center}
.track-video-notice-card h2{margin:0 0 12px;color:#fff}.track-video-notice-card p{margin:0 0 22px;color:#d4dceb;line-height:1.55}.track-video-notice-card .btn{min-width:130px}

/* Compact, wider track-upload layout with a true square cover-art well. */
.upload-track-overlay .portal-upload-modal{width:min(1040px,calc(100vw - 32px))!important;max-width:1040px!important;max-height:90vh!important;padding:20px 22px!important}
.portal-upload-modal>h2{margin:0 0 3px!important}.portal-upload-modal>.sub{margin:0 0 14px!important}
.portal-upload-grid{gap:14px!important;margin-top:0!important}
.portal-upload-top{grid-template-columns:minmax(0,1fr) minmax(280px,.62fr)!important;gap:14px!important;align-items:start!important}
.portal-upload-section{padding:15px 18px!important}
.portal-upload-section .form-grid{gap:9px 12px!important}
.portal-upload-section label{margin:6px 0 3px!important}
.portal-upload-genre-row{gap:6px!important;margin-top:9px!important}
.portal-upload-cover-side{gap:8px!important}
.portal-upload-cover-side h3{margin-bottom:2px!important}
.portal-cover-preview{width:min(100%,290px)!important;aspect-ratio:1 / 1!important;height:auto!important;flex:none!important;margin:0 auto!important}
.portal-upload-button{margin-top:4px!important}
.portal-track-links-section{margin-top:12px!important;padding-top:12px!important}
.portal-track-links-section h3{margin-bottom:8px!important}
.track-video-request{margin-top:10px!important}
.portal-upload-audio{padding:14px 18px!important}.portal-upload-audio h3{margin-bottom:8px!important}
.portal-upload-actions{margin-top:14px!important}
@media (max-width:760px){
  .upload-track-overlay .portal-upload-modal{width:calc(100vw - 20px)!important;padding:18px 14px!important}
  .portal-upload-top{grid-template-columns:1fr!important}
  .portal-cover-preview{max-width:260px!important}
}

/* Uploaded music gets its own standard player trigger in every track row. */
body:has([data-artist-portal]) .artist-portal-main .portal-music-head,
body:has([data-artist-portal]) .artist-portal-main .portal-music-row[data-portal-track]{
  grid-template-columns:62px minmax(160px,2fr) 100px 90px 100px 100px 105px 112px 58px!important;
}
.portal-track-cover{width:58px!important;height:58px!important}
.portal-track-cover .avatar{width:58px!important;height:58px!important}
@media (max-width:700px){
  body:has([data-artist-portal]) .artist-portal-main .portal-music-head,
  body:has([data-artist-portal]) .artist-portal-main .portal-music-row[data-portal-track]{grid-template-columns:58px minmax(0,1fr) 1fr!important;column-gap:8px!important}
  body:has([data-artist-portal]) .portal-music-head>span:nth-child(n+4),
  body:has([data-artist-portal]) .portal-music-row[data-portal-track]>.portal-mood-tag,
  body:has([data-artist-portal]) .portal-music-row[data-portal-track]>strong,
  body:has([data-artist-portal]) .portal-music-row[data-portal-track]>.portal-status-tag,
  body:has([data-artist-portal]) .portal-music-row[data-portal-track]>.portal-track-delete{display:none!important}
}

/* Weekly Jukebox controls and contextual entry actions. */
.jukebox-add-round{width:28px;height:28px;border:0;border-radius:50%;background:linear-gradient(135deg,#d77a21,#efad31);color:#fff;font-size:21px;line-height:1;cursor:pointer;box-shadow:0 0 16px rgba(215, 122, 33,.45);transition:transform .16s ease,filter .16s ease}
.jukebox-add-round:focus-visible{transform:scale(1.1);filter:brightness(1.15);outline:none}
.explore-release{grid-template-columns:38px 62px minmax(170px,2fr) 120px 92px 78px 80px 150px!important;column-gap:12px!important}
.explore-release-head span:nth-child(n+4){justify-self:end;text-align:right}.explore-release-head span:last-child{justify-self:end;width:150px;text-align:right}.explore-release .release-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:150px;min-width:150px}
.jukebox-controls{margin-bottom:16px}.jukebox-actions{display:flex;align-items:end;gap:10px}.jukebox-actions label{display:grid;gap:5px;color:#bfc9dc;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}.jukebox-actions select{min-width:190px}
.jukebox-search-label{display:block;position:relative;margin-top:14px!important;color:#f2ca69!important;font-size:.8rem!important;text-transform:uppercase!important;letter-spacing:.06em}.jukebox-search-label input{display:block;margin-top:6px!important;width:min(100%,400px)!important;box-sizing:border-box;border:1px solid #2d4359!important;border-radius:999px!important;background:#0b1724!important;box-shadow:none!important;padding:11px 17px!important;color:#eef3fb!important}.jukebox-search-label input::placeholder{color:#8391a0;opacity:1}.jukebox-search-label input:focus{border-color:#d77a21!important;outline:0;box-shadow:0 0 0 3px rgba(215, 122, 33,.13)!important}.jukebox-window{margin:10px 0 0!important}.jukebox-search-results{position:absolute;z-index:120;width:min(100%,400px);max-height:300px;overflow:auto;border:1px solid rgba(215, 122, 33,.45);border-radius:10px;background:#081221;box-shadow:0 16px 40px rgba(0,0,0,.55)}.jukebox-search-results article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border-bottom:1px solid rgba(89,120,150,.2)}.jukebox-search-results article:last-child{border:0}.jukebox-search-results b,.jukebox-search-results small{display:block}.jukebox-search-results small{margin-top:3px;color:#a6b2c5}.jukebox-row{grid-template-columns:34px 58px minmax(160px,2fr) 100px 80px 75px 70px minmax(70px,1fr) 74px 62px!important}.jukebox-row-head{grid-template-columns:34px 58px minmax(160px,2fr) 100px 80px 75px 70px minmax(70px,1fr) 74px 62px!important}.jukebox-winner{display:flex;align-items:center;gap:20px;margin-bottom:16px}.jukebox-winner .winner-cover{flex:0 0 112px;height:112px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#efad31,#d77a21);font-size:2.3rem;font-weight:800;color:#fff}.jukebox-winner h2{margin:5px 0}.jukebox-winner .lead{margin:0}.jukebox-list-panel .section-head{gap:14px}
@media(max-width:760px){.explore-release{grid-template-columns:34px 58px minmax(0,1fr) 112px!important}.explore-release .release-date,.explore-release .release-mood,.explore-release .release-bpm,.explore-release .release-length{display:none}.explore-release .release-actions{width:112px;min-width:112px;gap:5px}.explore-release-head span:last-child{width:112px}.jukebox-actions{width:100%;justify-content:space-between}.jukebox-actions select{min-width:150px}.jukebox-row,.jukebox-row-head{grid-template-columns:30px 52px minmax(0,1fr) 70px!important}.jukebox-row .chart-mood,.jukebox-row .chart-bpm,.jukebox-row .chart-length,.jukebox-row .vote-bar,.jukebox-row-head span:nth-child(n+5){display:none}.jukebox-winner{align-items:flex-start}.jukebox-winner .winner-cover{flex-basis:76px;height:76px;font-size:1.7rem}}

/* Weekly Jukebox winner uses the selected track's artwork and standard player control. */
.jukebox-winner .jukebox-winner-art{position:relative!important;display:block!important;padding:0!important;overflow:hidden!important;border:2px solid rgba(239, 173, 49,.82)!important;background:#07111d!important}
.jukebox-winner-art>img{width:100%;height:100%;display:block;object-fit:cover}
.jukebox-winner-art>strong{position:absolute;left:8px;top:8px;z-index:2;padding:5px 8px;border-radius:7px;background:rgba(5,8,18,.82);color:#fff;font-size:20px;line-height:1;text-shadow:0 1px 5px #000}
.jukebox-winner-art .jukebox-winner-play{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:46px!important;height:46px!important;transform:translate(-50%,-50%)!important;font-size:18px!important;box-shadow:0 0 24px rgba(239, 173, 49,.62)!important}

/* Curator entry points and artist profile review action. */
.curator-login-link{margin:13px 0 0;text-align:center}.curator-login-link a{color:#efad31;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.curator-login-link a:hover{color:#efad31;text-shadow:0 0 12px rgba(239, 173, 49,.45)}
.curator-review-actions .curator-view-profile{border:1px solid #d77a21;background:linear-gradient(100deg,rgba(215, 122, 33,.18),rgba(239, 173, 49,.16));color:#fff}.curator-review-actions .curator-view-profile:hover{border-color:#efad31}

/* Unified combobox treatment matching the header search control. */
select{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:42px!important;
  padding:0 44px 0 16px!important;
  border:1px solid #26354a!important;
  border-radius:23px!important;
  background-color:#09121d!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 16px center!important;
  background-size:14px 9px!important;
  color:#fff!important;
  cursor:pointer!important;
  scrollbar-width:thin!important;
  scrollbar-color:#efad31 #efad31!important;
}
select:hover,select:focus{
  border-color:#d77a21!important;
  outline:none!important;
  box-shadow:0 0 0 1px rgba(215, 122, 33,.2),0 0 15px rgba(239, 173, 49,.15)!important;
}
select option,select optgroup{background:#09121d!important;color:#fff!important}
select::-webkit-scrollbar{width:9px!important;height:9px!important}
select::-webkit-scrollbar-track{background:#efad31!important}
select::-webkit-scrollbar-thumb{background:#efad31!important;border:2px solid #efad31!important;border-radius:8px!important}
select::-webkit-scrollbar-thumb:hover{background:#efad31!important}

/* Explore table: one shared grid ensures every heading is directly over its value. */
@media(min-width:761px){
  .discover-page .explore-release,
  .discover-page .explore-release-head{
    box-sizing:border-box!important;
    width:100%!important;
    grid-template-columns:38px 62px minmax(170px,2fr) 120px 92px 78px 80px 150px!important;
    column-gap:12px!important;
  }
  .discover-page .explore-release>*:nth-child(n+4),
  .discover-page .explore-release-head>span:nth-child(n+4){justify-self:end!important;text-align:right!important}
  .discover-page .explore-release .release-actions{justify-self:end!important;display:flex!important;width:150px!important;min-width:150px!important;justify-content:flex-end!important}
  .discover-page .explore-release-head>span:last-child{width:150px!important;justify-self:end!important;text-align:right!important}
}
@media(max-width:760px){
  /* Keep the condensed heading on one line: hidden data columns must not create a second grid row. */
  .discover-page .explore-release-head>span:nth-child(4),
  .discover-page .explore-release-head>span:nth-child(5),
  .discover-page .explore-release-head>span:nth-child(6),
  .discover-page .explore-release-head>span:nth-child(7){display:none!important}
  .discover-page .explore-release-head>span:last-child{grid-column:4!important;justify-self:end!important;text-align:right!important}
}

/* This follows all legacy header rules so the account action uses the requested Following-blue treatment. */
body:has(#app) .site-header .topbtn,
body:has(#app):has(.wireframe-home) .site-header .topbtn,
body:has(.creator-landing) .site-header .topbtn{border-color:#efad31!important;background:linear-gradient(105deg,#d77a21 0%,#efad31 100%)!important;color:#fff!important;box-shadow:none!important}

/* Final internal-page canvas override: exclude the Home and About routes. */
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  background-color: #020817 !important;
  background-image: url('assets/syntera-internal-background.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app > .wrap {
  background: transparent !important;
  background-image: none !important;
}

body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app::before,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app::after,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app > .wrap::before,
body:not(:has(.wireframe-home)):not(:has(.about-page)):not(:has(.component-home)) main#app > .wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Explore controls matched to the supplied neon wireframe. */
.discover-page {
  max-width: 1390px !important;
}

.discover-page .explore-filters {
  padding: 26px 28px 22px !important;
  border: 1px solid rgba(215, 122, 33, .48) !important;
  border-radius: 14px !important;
  background: rgba(3, 13, 29, .62) !important;
  box-shadow: inset 0 0 32px rgba(215, 122, 33, .08), 0 14px 40px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

.discover-page .explore-filters > img {
  display: none !important;
}

.discover-page .filter-heading {
  position: relative;
  z-index: 1;
  align-items: flex-start !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(215, 122, 33, .25) !important;
}

.discover-page .filter-primary-controls {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 12px !important;
}

.discover-page .filter-primary-controls > small {
  flex: 0 0 100% !important;
  margin: 2px 0 0 !important;
  color: #b7c5d7 !important;
}

.discover-page .genre-open-btn,
.discover-page .explore-mode-toggle button,
.discover-page .filter-clear,
.discover-page .release-window-filters button {
  min-height: 42px !important;
  border-radius: 7px !important;
  background: rgba(5, 17, 34, .74) !important;
  color: #dce8f6 !important;
  border: 1px solid rgba(215, 122, 33, .62) !important;
  box-shadow: inset 0 0 14px rgba(215, 122, 33, .08) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important;
}

.discover-page .genre-open-btn:hover,
.discover-page .explore-mode-toggle button:hover,
.discover-page .filter-clear:hover,
.discover-page .release-window-filters button:hover {
  transform: translateY(-1px) !important;
  border-color: #efad31 !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(215, 122, 33, .2), inset 0 0 16px rgba(215, 122, 33, .08) !important;
}

.discover-page .genre-open-btn {
  padding: 8px 16px 8px 13px !important;
  border-color: rgba(219, 166, 50, .6) !important;
  color: #f0c35b !important;
}

.discover-page .genre-open-btn::before,
.discover-page [data-explore-mode]::before,
.discover-page [data-clear-filters]::after,
.discover-page [data-liked-filter]::before,
.discover-page .explore-view-toggle button::before,
.discover-page .explore-results h2::before,
.discover-page .release-mood::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.discover-page .genre-open-btn::before {
  width: 24px;
  height: 24px;
  background-image: url('assets/neon-icons/controls-equalizer.png');
}

.discover-page .explore-mode-toggle {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.discover-page .explore-mode-toggle button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 132px !important;
  padding: 8px 17px !important;
}

.discover-page [data-explore-mode="tracks"]::before {
  width: 23px;
  height: 23px;
  background-image: url('assets/neon-icons/music-preview.png');
}

.discover-page [data-explore-mode="artists"]::before {
  width: 22px;
  height: 22px;
  background-image: url('assets/neon-icons/profile-user.png');
}

.discover-page .explore-mode-toggle button.active {
  border-color: #d77a21 !important;
  background: linear-gradient(110deg, rgba(141, 73, 39, .78), rgba(5, 28, 56, .8)) !important;
  color: #ecfbff !important;
  box-shadow: 0 0 18px rgba(215, 122, 33, .28), inset 0 0 20px rgba(215, 122, 33, .12) !important;
}

.discover-page [data-clear-filters] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 13px !important;
  border-color: rgba(215, 122, 33, .55) !important;
  color: #efad31 !important;
}

.discover-page [data-clear-filters]::after {
  width: 16px;
  height: 16px;
  background-image: url('assets/neon-icons/close-x.png');
}

.discover-page .artist-filter {
  position: relative;
  z-index: 1;
  gap: 12px !important;
  padding-top: 16px !important;
  border-top: 0 !important;
}

.discover-page .artist-filter label {
  margin-right: 4px !important;
  color: #f0c35b !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
}

.discover-page .artist-filter select {
  min-width: 260px !important;
  min-height: 42px !important;
  border-radius: 9px !important;
  background-color: rgba(5, 16, 31, .76) !important;
  border-color: rgba(215, 122, 33, .64) !important;
}

.discover-page [data-liked-filter] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 15px !important;
  border-color: rgba(215, 122, 33, .62) !important;
  color: #efad31 !important;
  font-size: 11px !important;
}

.discover-page [data-liked-filter]::before {
  width: 18px;
  height: 18px;
  background-image: url('assets/neon-icons/heart-outline-glow.png');
}

.discover-page [data-liked-filter].selected {
  border-color: #efad31 !important;
  background: rgba(141, 73, 39, .42) !important;
  color: #fff !important;
  box-shadow: 0 0 17px rgba(239, 173, 49, .22) !important;
}

.discover-page .release-window-filters {
  gap: 10px !important;
}

.discover-page .release-window-filters button {
  min-width: 112px !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
}

.discover-page .release-window-filters button.active {
  border-color: rgba(239, 182, 62, .84) !important;
  background: rgba(93, 62, 10, .42) !important;
  color: #ffd66f !important;
  box-shadow: 0 0 18px rgba(239, 174, 45, .24), inset 0 0 16px rgba(239, 174, 45, .08) !important;
}

.discover-page .explore-results {
  padding: 20px 18px 12px !important;
  border: 1px solid rgba(215, 122, 33, .58) !important;
  border-radius: 14px !important;
  background: rgba(2, 12, 27, .76) !important;
  box-shadow: 0 0 20px rgba(215, 122, 33, .12), inset 0 0 26px rgba(141, 73, 39, .06) !important;
  backdrop-filter: blur(8px) !important;
}

.discover-page .explore-results .section-head {
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 2px 14px 14px !important;
}

.discover-page .explore-results h2 {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #f0c35b !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
}

.discover-page .explore-results h2::before {
  width: 23px;
  height: 23px;
  background-image: url('assets/neon-icons/controls-equalizer.png');
}

.discover-page .explore-view-tools {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

.discover-page .explore-view-toggle {
  padding: 3px !important;
  border: 1px solid rgba(215, 122, 33, .48) !important;
  border-radius: 12px !important;
  background: rgba(3, 14, 29, .72) !important;
}

.discover-page .explore-view-toggle button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 92px !important;
  padding: 8px 13px !important;
  border-radius: 9px !important;
  color: #dce8f4 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.discover-page .explore-view-toggle [data-explore-view="list"]::before {
  width: 20px;
  height: 18px;
  background-image: url('assets/neon-icons/view-list.png');
}

.discover-page .explore-view-toggle [data-explore-view="grid"]::before {
  width: 20px;
  height: 18px;
  background-image: url('assets/neon-icons/view-grid.png');
}

.discover-page .explore-view-toggle button.active {
  border: 1px solid #d77a21 !important;
  background: linear-gradient(110deg, rgba(215, 122, 33, .82), rgba(141, 73, 39, .78)) !important;
  box-shadow: 0 0 16px rgba(215, 122, 33, .28) !important;
}

.discover-page [data-page-label] {
  color: #c7d3e2 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.discover-page .explore-top-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.discover-page .explore-top-pagination button {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  transition: transform .16s ease, filter .16s ease !important;
}


.discover-page .explore-top-pagination [data-page="prev"] {
  background-image: url('assets/neon-icons/arrow-previous.png') !important;
}

.discover-page .explore-top-pagination [data-page="next"] {
  background-image: url('assets/neon-icons/arrow-next.png') !important;
}

.discover-page .explore-page-index {
  display: none !important;
}

.discover-page .explore-release-head {
  min-height: 38px !important;
  padding: 7px 14px !important;
  border-top: 1px solid rgba(215, 122, 33, .25) !important;
  border-bottom: 1px solid rgba(215, 122, 33, .38) !important;
  color: #b8c5d5 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
}

.discover-page .explore-release-head > span:first-child::before { content: "#" !important; }

.discover-page .release-list {
  gap: 0 !important;
}

.discover-page .explore-release {
  min-height: 61px !important;
  padding: 6px 14px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(215, 122, 33, .3) !important;
  background: rgba(1, 10, 23, .18) !important;
  transition: background .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.discover-page .explore-release:hover {
  z-index: 1;
  border-color: rgba(215, 122, 33, .56) !important;
  background: rgba(7, 37, 61, .52) !important;
  box-shadow: inset 3px 0 #d77a21, 0 0 15px rgba(215, 122, 33, .12) !important;
}

.discover-page .release-rank {
  color: #f1c45e !important;
  font-size: 18px !important;
}

.discover-page .release-mood {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.discover-page .release-mood::before {
  width: 19px;
  height: 19px;
}

.discover-page .mood-romantic::before { background-image: url('assets/neon-icons/heart-gradient.png'); }
.discover-page .mood-dreamy::before { background-image: url('assets/neon-icons/cloud-gradient.png'); }
.discover-page .mood-melancholic::before { background-image: url('assets/neon-icons/water-drop-gradient.png'); }
.discover-page .mood-chill::before { background-image: url('assets/neon-icons/wave-gradient.png'); }
.discover-page .mood-party::before,
.discover-page .mood-confident::before { background-image: url('assets/neon-icons/lightning-gradient.png'); }
.discover-page .mood-groovy::before { background-image: url('assets/neon-icons/target-gradient.png'); }
.discover-page .mood-energetic::before,
.discover-page .mood-uplifting::before { background-image: url('assets/neon-icons/sun-gradient.png'); }

.discover-page .release-actions {
  gap: 7px !important;
}

.discover-page .release-actions .release-cart,
.discover-page .release-actions .jukebox-add-round {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
  transition: transform .16s ease, filter .16s ease !important;
}


.discover-page .release-actions .jukebox-add-round {
  background-image: none !important;
}

.discover-page .explore-like-button,
.discover-page .explore-like-button.loved,
.discover-page .explore-cart-button {
  background-image: none !important;
}

@media (max-width: 980px) {
  .discover-page .artist-filter { flex-wrap: wrap !important; }
  .discover-page .release-window-filters { flex: 1 1 100% !important; }
  .discover-page .explore-view-tools { gap: 10px !important; }
}

@media (max-width: 700px) {
  .discover-page .explore-filters { padding: 18px 15px !important; }
  .discover-page .filter-heading { align-items: stretch !important; }
  .discover-page [data-clear-filters] { align-self: flex-start !important; }
  .discover-page .explore-mode-toggle { width: 100% !important; }
  .discover-page .explore-mode-toggle button { flex: 1 !important; min-width: 0 !important; }
  .discover-page .artist-filter select { min-width: 0 !important; width: 100% !important; }
  .discover-page .release-window-filters button { flex: 1 1 calc(50% - 6px) !important; min-width: 0 !important; }
  .discover-page .explore-view-tools { align-items: flex-end !important; }
  .discover-page .explore-top-pagination { order: 3 !important; }
}

/* Shared neon asset icons for buttons and headings across site pages. */
.syntera-asset-icon-button{display:inline-flex!important;align-items:center!important;justify-content:center;gap:8px!important}
.syntera-asset-icon-button:before{content:"";display:inline-block;flex:0 0 20px;width:20px;height:20px;background-image:var(--syntera-asset-icon);background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 5px rgba(239, 173, 49,.42));transition:transform .16s ease,filter .16s ease}
.syntera-asset-icon-button:focus-visible:before{transform:scale(1.08);filter:drop-shadow(0 0 9px rgba(239, 173, 49,.75)) brightness(1.12)}
.syntera-asset-icon-heading{display:flex!important;align-items:center;gap:10px}
.syntera-asset-icon-heading:before{content:"";display:inline-block;flex:0 0 27px;width:27px;height:27px;background-image:var(--syntera-asset-icon);background-position:center;background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 0 7px rgba(239, 173, 49,.5))}
.syntera-asset-icon-heading>[aria-hidden="true"]:first-child{display:none!important}
.artist-portal-sidebar .syntera-asset-icon-heading:before,.curator-sidebar .syntera-asset-icon-heading:before{width:22px;height:22px;flex-basis:22px}
@media(max-width:620px){.syntera-asset-icon-button:before{width:18px;height:18px;flex-basis:18px}.syntera-asset-icon-heading:before{width:23px;height:23px;flex-basis:23px}}

/* Explore alignment and balanced grid-card spacing. */
.discover-page .explore-release:not(.explore-release-head)>.release-mood{width:100%!important;justify-self:stretch!important;justify-content:flex-start!important;text-align:left!important}
.discover-page .explore-release-head>span:nth-child(5){width:100%!important;justify-self:stretch!important;text-align:center!important}
.discover-page .explore-release-head[hidden]{display:none!important}
.discover-page .explore-track-grid{grid-template-columns:repeat(auto-fit,248px)!important;justify-content:space-between!important;column-gap:clamp(14px,2vw,28px)!important;row-gap:24px!important;padding-top:12px!important;overflow:visible!important}
@media(max-width:640px){.discover-page .explore-track-grid{justify-content:center!important;row-gap:20px!important}}

/* One shared, centred play asset for artwork overlays; the Home media bar is excluded. */
.cover-play-btn,.wf-track-art>button[data-cover-play],.creator-release-play,.search-play-btn,.universal-play{padding:0!important;border:0!important;background-color:transparent!important;background-image:url('assets/neon-icons/play-circle.png')!important;background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;color:transparent!important;font-size:0!important;line-height:0!important;text-indent:-9999px!important;overflow:hidden!important}
.cover-play-btn:before,.wf-track-art>button[data-cover-play]:before,.creator-release-play:before,.search-play-btn:before,.universal-play:before{display:none!important;content:none!important}
.cover-play-btn:focus-visible,.creator-release-play:focus-visible,.search-play-btn:focus-visible,.universal-play:focus-visible{background-image:url('assets/neon-icons/play-circle.png')!important;filter:brightness(1.14) drop-shadow(0 0 8px rgba(239, 173, 49,.72))!important}
.wf-track-art>button[data-cover-play]:focus-visible{background-image:url('assets/neon-icons/play-circle.png')!important;filter:brightness(1.14) drop-shadow(0 0 8px rgba(239, 173, 49,.72))!important}

/* Klankstal rebrand: shift baked-in neon blue/purple icon PNGs toward gold via hue-rotate (icons are raster assets, not CSS-colorable). */
.cover-play-btn,
.wf-track-art>button[data-cover-play],
.creator-release-play,
.search-play-btn,
.universal-play,
.discover-page .explore-like-button,
.discover-page [data-liked-filter]::before,
.discover-page .mood-romantic::before,
.discover-page .explore-like-button.loved,
.discover-page .mood-dreamy::before,
.discover-page .mood-melancholic::before,
.discover-page .mood-chill::before,
.discover-page [data-explore-mode="artists"]::before,
.discover-page .explore-view-toggle [data-explore-view="grid"]::before,
.discover-page .explore-view-toggle [data-explore-view="list"]::before,
.discover-page [data-explore-mode="tracks"]::before,
.discover-page .explore-top-pagination [data-page="next"],
.discover-page .explore-top-pagination [data-page="prev"],
.discover-page [data-clear-filters]::after,
.discover-page .mood-party::before,
.discover-page .mood-confident::before {
  filter: hue-rotate(-160deg) saturate(1.3) !important;
}

/* Klankstal main home: restore the _target-reference header and canvas.
   header-fix.css is Syntera-oriented (44px round mark + internal photo background)
   and was overriding the database-connected homepage. */
body:has(#app):has(.component-logo) .site-header {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 28px !important;
  height: 102px !important;
  width: 100% !important;
  padding: 0 max(26px, calc((100% - 1510px) / 2)) !important;
  background: rgba(3, 8, 14, .94) !important;
  border-bottom: 1px solid rgba(83, 111, 136, .36) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) !important;
}
body:has(#app):has(.component-logo) .site-header .component-logo,
body:has(#app):has(.component-home) .site-header .component-logo {
  display: flex !important;
  align-items: center !important;
  width: 390px !important;
  min-width: 390px !important;
  height: 92px !important;
  margin: 0 !important;
  background: none !important;
}
body:has(#app):has(.component-logo) .site-header .component-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}
body:has(#app):has(.component-logo) .site-header nav {
  display: flex !important;
  position: static !important;
  left: auto !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 24px !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
body:has(#app):has(.component-logo) .site-header nav a {
  padding: 0 !important;
  font-size: 12px !important;
  letter-spacing: .2px !important;
}
body:has(#app):has(.component-logo) .site-header .search {
  display: block !important;
  flex: 0 1 250px !important;
  width: 250px !important;
  margin-left: auto !important;
}
body:has(#app):has(.component-logo) .site-header .topbtn {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid #6e5d3d !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #f2d395 !important;
  font: 800 12px/1 Inter, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
}
body:has(#app):has(.component-home) {
  padding-top: 102px !important;
  background-color: rgb(3, 8, 14) !important;
  background-image: linear-gradient(90deg, rgba(1, 5, 10, .88) 0%, rgba(1, 5, 10, .78) 34%, rgba(1, 5, 10, .42) 55%, rgba(1, 5, 10, .12) 78%, rgba(1, 5, 10, .08) 100%), linear-gradient(180deg, rgba(1, 5, 10, .32), rgba(1, 5, 10, .05) 44%, rgba(1, 5, 10, .55) 100%), url('assets/home-page-background.jpg') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body:has(#app):has(.component-home) main#app,
body:has(#app):has(.component-home) main#app > .wrap {
  width: auto !important;
  max-width: none !important;
  min-height: calc(100vh - 86px) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 0 96px !important;
  background: transparent !important;
  background-image: none !important;
}
body:has(#app):has(.component-home) main#app > .wrap > .component-home,
body:has(#app):has(.component-home) .component-home {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 100px !important;
  background: transparent !important;
}
body:has(#app):has(.component-home) .home-hero-component {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  height: 40vh !important;
  min-height: 400px !important;
  max-height: 460px !important;
  background: none !important;
  background-image: none !important;
}
body:has(#app):has(.component-home) .component-owner {
  display: block !important;
  position: absolute !important;
  top: 111px !important;
  right: max(32px, calc((100vw - 1372px) / 2)) !important;
  bottom: auto !important;
  width: 249px !important;
  height: 249px !important;
  min-height: 0 !important;
  background: none !important;
  opacity: .9 !important;
  z-index: 2 !important;
  filter: drop-shadow(0 12px 28px #0008) !important;
}
body:has(#app):has(.component-home) .component-owner:before,
body:has(#app):has(.component-home) .component-owner:after {
  display: none !important;
  content: none !important;
}
body:has(#app):has(.component-home) .component-owner > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: .9 !important;
}
body:has(#app):has(.component-home) .home-artist-card button {
  font: 700 10px "Trebuchet MS", Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body:has(#app):has(.component-home) .universal-play {
  width: 34px !important;
  height: 34px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
  color: transparent !important;
  filter: none !important;
  background-color: transparent !important;
  background-image: url('assets/play-control.svg') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 4px 12px #0008 !important;
}
@media (max-width: 1100px) {
  body:has(#app):has(.component-home) .component-owner { right: 24px !important; width: 230px !important; height: 230px !important; }
}
@media (max-width: 900px) {
  body:has(#app):has(.component-home) .component-owner { top: 102px !important; width: 215px !important; height: 215px !important; }
  body:has(#app):has(.component-home) .home-hero-component { min-height: 390px !important; }
}
@media (max-width: 820px) {
  body:has(#app):has(.component-logo) .site-header,
  body:has(#app):has(.component-home) .site-header { height: 76px !important; }
  body:has(#app):has(.component-logo) .site-header .component-logo { width: 220px !important; min-width: 220px !important; height: 66px !important; }
  body:has(#app):has(.component-home) { padding-top: 76px !important; }
}
@media (max-width: 620px) {
  body:has(#app):has(.component-home) .component-owner { display: none !important; }
  body:has(#app):has(.component-home) .home-hero-component { height: auto !important; min-height: 420px !important; max-height: none !important; }
  body:has(#app):has(.component-home) { background-attachment: scroll !important; }
}
/* Keep the discovery panels close to the hero actions; shrink the round hero artwork by 15%. */
@media (min-width: 901px) {
  body:has(#app):has(.component-home) .home-hero-component { height: auto !important; min-height: 0 !important; max-height: none !important; align-items: start !important; }
  body:has(#app):has(.component-home) .home-hero-copy { margin-top: 55px !important; padding-bottom: 0 !important; }
  body:has(#app):has(.component-home) .home-actions { margin-bottom: 0 !important; }
  body:has(#app):has(.component-home) .home-content-grid { margin-top: 20px !important; }
  body:has(#app):has(.component-home) .component-owner { top: 78px !important; width: 212px !important; height: 212px !important; }
}
@media (min-width: 621px) and (max-width: 900px) {
  body:has(#app):has(.component-home) .home-hero-component { height: auto !important; min-height: 0 !important; max-height: none !important; align-items: start !important; }
  body:has(#app):has(.component-home) .home-hero-copy { margin-top: 28px !important; padding-bottom: 0 !important; }
  body:has(#app):has(.component-home) .home-actions { margin-bottom: 0 !important; }
  body:has(#app):has(.component-home) .home-content-grid { margin-top: 20px !important; }
  body:has(#app):has(.component-home) .component-owner { top: 72px !important; width: 183px !important; height: 183px !important; }
}