/* Per-user Linkshub customization layer.
   It is intentionally loaded after linkshub.css so the rich platform defaults remain authoritative
   until a user explicitly overrides one of their colors. */
.linkshub-view .link-btn--twitch { --sh-link-brand: #9146ff; }
.linkshub-view .link-btn--kick { --sh-link-brand: #00e701; }
.linkshub-view .link-btn--youtube { --sh-link-brand: #ff0000; }
.linkshub-view .link-btn--tiktok { --sh-link-brand: #111111; }
.linkshub-view .link-btn--instagram { --sh-link-brand: #e1306c; }
.linkshub-view .link-btn--x { --sh-link-brand: #111111; }

.linkshub-view .link-btn--twitch,
.linkshub-view .link-btn--kick,
.linkshub-view .link-btn--youtube,
.linkshub-view .link-btn--tiktok,
.linkshub-view .link-btn--instagram,
.linkshub-view .link-btn--x {
  border-color: color-mix(in srgb, var(--sh-link-brand) 24%, var(--border-soft));
}

.linkshub-view .link-btn--user-bg {
  background: var(--sh-user-link-bg) !important;
  border-color: color-mix(in srgb, var(--sh-user-link-bg) 72%, #ffffff 28%) !important;
}

.linkshub-view .link-btn--user-bg .link-icon {
  background-color: color-mix(in srgb, var(--sh-user-link-bg) 78%, #ffffff 22%) !important;
  border-color: color-mix(in srgb, var(--sh-user-link-bg) 68%, #ffffff 32%) !important;
}

.linkshub-view .link-btn--user-fg {
  color: var(--sh-user-link-fg) !important;
}

.linkshub-view .link-btn--user-fg .link-copy small {
  color: color-mix(in srgb, var(--sh-user-link-fg) 70%, transparent) !important;
}

.linkshub-view .link-icon--custom-color {
  display: grid;
  place-items: center;
  background-image: none !important;
}

.linkshub-view .link-icon__glyph {
  width: 26px;
  height: 26px;
  display: block;
  background: var(--link-icon-color, #ffffff);
  -webkit-mask: var(--link-icon-mask) center / contain no-repeat;
  mask: var(--link-icon-mask) center / contain no-repeat;
}

.linkshub-view .profile-card.profile-card--floating {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (max-width: 640px) {
  .linkshub-view .link-icon__glyph {
    width: 23px;
    height: 23px;
  }
}


/* Official default brand colors keep the original SVG shapes while preserving Premium overrides. */
.linkshub-view .link-icon--brand-default .link-icon__glyph {
  background: var(--link-icon-color, #ffffff);
}
.linkshub-view .link-icon--brand-x {
  background-color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.24) !important;
}

/* Keep LinksHub visually isolated from the full-profile light/dark theme variables. */
.linkshub-view {
  --bg-page: #141619;
  --bg-card: rgba(22, 24, 29, 0.78);
  --bg-card-strong: rgba(28, 31, 37, 0.9);
  --bg-btn: rgba(255, 255, 255, 0.07);
  --bg-btn-hover: rgba(255, 255, 255, 0.11);
  --border-soft: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text-main: #f5f7fb;
  --text-soft: rgba(245, 247, 251, 0.78);
  --text-faint: rgba(245, 247, 251, 0.56);
  --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.34);
  --shadow-btn: 0 10px 26px rgba(0, 0, 0, 0.18);
  --font-heading: "PPNeueMontreal", "Inter", sans-serif;
  --font-body: "InterVariable", "Inter", sans-serif;
  --radius-card: 28px;
  --radius-btn: 18px;
  --radius-pill: 999px;
  color: var(--text-main);
  font-family: var(--font-body);
}

.linkshub-view .creator-name,
.linkshub-view .link-btn,
.linkshub-view .link-copy strong {
  color: var(--text-main);
}

.linkshub-view .link-copy small,
.linkshub-view .eyebrow {
  color: var(--text-faint);
}

.linkshub-view .SHlogosvg {
  display: block;
  width: auto;
  height: 60px;
  margin: 15px auto 0;
  filter: brightness(0) invert(1);
}

html[data-streamhub-preview="true"] #fullProfileView {
  display: none !important;
}

html[data-streamhub-preview="true"] #linkshubView a,
html[data-streamhub-preview="true"] #linkshubView button {
  pointer-events: none !important;
  cursor: default !important;
}

/* Per-user background layer: presets fill the whole viewport; .bg-noise is repurposed as the configurable vignette overlay. */
.bg-layer {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.bg-layer .bg-noise {
  opacity: 1;
  background-image: none;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  transition: background-image 120ms ease, opacity 120ms ease;
}