:root {
  --musicstar-blue: #1a517a;
  --musicstar-blue-dark: #10364f;
  --musicstar-gold: #f2c94c;
  --musicstar-ink: #18212f;
  --musicstar-purple: #6128c8;
  --musicstar-bg: #f6f8fb;
}

/* Scope every visual override to the anonymous landing/login layout.
   The authenticated vault UI must stay untouched. */
html.musicstar-login body {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(242, 201, 76, 0.26), transparent 25rem),
    linear-gradient(135deg, #0f2d43 0%, #1a517a 48%, #f6f8fb 48.2%, #f6f8fb 100%) !important;
  color: var(--musicstar-ink) !important;
}

html.musicstar-login body bit-landing-header,
html.musicstar-login body bit-landing-footer {
  display: none !important;
}

html.musicstar-login body bit-landing-layout > div,
html.musicstar-login body bit-landing-layout main,
html.musicstar-login body bit-landing-content,
html.musicstar-login body bit-landing-content > div {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(242, 201, 76, 0.26), transparent 25rem),
    linear-gradient(135deg, #0f2d43 0%, #1a517a 48%, #f6f8fb 48.2%, #f6f8fb 100%) !important;
}

html.musicstar-login body bit-landing-content > div {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 448px) minmax(260px, 420px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(2rem, 7vw, 7rem) !important;
  padding: clamp(2rem, 5vw, 5rem) !important;
}

html.musicstar-login body bit-landing-content > div::after {
  content: "" !important;
  display: block !important;
  width: min(34vw, 390px) !important;
  aspect-ratio: 1 / 1 !important;
  background: url("/musicstar/logo.png") center / contain no-repeat !important;
  filter: drop-shadow(0 26px 42px rgba(16, 54, 79, 0.28)) !important;
}

html.musicstar-login body bit-landing-content .tw-flex.tw-flex-col.tw-max-w-md.tw-w-full {
  width: min(448px, calc(100vw - 2rem)) !important;
  max-width: 448px !important;
  margin: 0 !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 28px 70px rgba(16, 54, 79, 0.22) !important;
  border: 1px solid rgba(26, 81, 122, 0.08) !important;
}

html.musicstar-login body bit-landing-hero div.tw-text-center,
html.musicstar-login body bit-landing-hero .tw-size-20,
html.musicstar-login body bit-landing-hero .sm\:tw-size-24,
html.musicstar-login body bit-landing-hero bit-icon {
  display: none !important;
}

html.musicstar-login body bit-landing-hero::before {
  content: "MUSICSTAR" !important;
  display: block !important;
  margin-bottom: 0.35rem !important;
  color: var(--musicstar-blue) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

html.musicstar-login body bit-landing-hero::after {
  content: "Area privada" !important;
  display: block !important;
  margin-bottom: 1.35rem !important;
  color: var(--musicstar-ink) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}


@media (max-width: 860px) {
  html.musicstar-login body bit-landing-content > div {
    display: flex !important;
    min-height: 100vh !important;
    padding: 1.25rem !important;
    background:
      radial-gradient(circle at 18% 14%, rgba(242, 201, 76, 0.22), transparent 20rem),
      linear-gradient(160deg, #0f2d43 0%, #1a517a 42%, #f6f8fb 42.2%, #f6f8fb 100%) !important;
  }

  html.musicstar-login body bit-landing-content > div::after {
    display: none !important;
  }

  html.musicstar-login body bit-landing-content .tw-flex.tw-flex-col.tw-max-w-md.tw-w-full {
    padding: 1.5rem !important;
  }

  html.musicstar-login body bit-landing-hero::after {
    font-size: 1.55rem !important;
  }
}

html.musicstar-login body bit-landing-header,
html.musicstar-login body bit-landing-footer,
html.musicstar-login body bit-landing-header *,
html.musicstar-login body bit-landing-footer * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}