.musicoo-auth-modal {
  padding: 18px;
}

.musicoo-auth-backdrop {
  background:
    radial-gradient(circle at 18% 18%, rgba(8, 105, 181, .28), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .94)) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

.musicoo-auth-card {
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 460px) !important;
  border-radius: 10px !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(10, 10, 10, .86) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .03) inset !important;
}

.musicoo-auth-card::before {
  content: "";
  position: absolute;
  inset: -18% -10% auto;
  height: 210px;
  z-index: -2;
  opacity: .58;
  background-image:
    url("/ALBUM%20ART/ALL%20AROUND%20THE%20WORLD.jpg"),
    url("/ALBUM%20ART/BELLA.jpg"),
    url("/ALBUM%20ART/Dengiz.jpg"),
    url("/ALBUM%20ART/Ghost%20Girl.jpg"),
    url("/ALBUM%20ART/HABIBI.jpg"),
    url("/ALBUM%20ART/FUNK%20DO%20BRUTAL.jpg");
  background-size: 118px 118px;
  background-position: 0 28px, 112px 0, 224px 28px, 336px 0, 448px 28px, 560px 0;
  background-repeat: repeat-x;
  filter: saturate(1.08) contrast(1.04);
  transform: rotate(-7deg);
  animation: musicoo-auth-albums 38s linear infinite;
}

.musicoo-auth-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .22), #0a0a0a 34%, #0a0a0a 100%),
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .23) 50%, rgba(255, 255, 255, .08) 55%, transparent 66%);
  background-size: auto, 260% 100%;
  animation: musicoo-auth-sweep 7s ease-in-out infinite;
}

.musicoo-auth-body {
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.musicoo-auth-brand {
  justify-content: center;
  min-height: 86px;
  padding-top: 10px;
  margin-bottom: 22px !important;
  color: #fff;
  letter-spacing: .04em !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .65);
}

.musicoo-auth-brand svg {
  color: #58b9ff !important;
  fill: #58b9ff !important;
  filter: drop-shadow(0 0 18px rgba(88, 185, 255, .38));
}

.musicoo-auth-card form h3 {
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.musicoo-auth-card form > p {
  color: rgba(255, 255, 255, .68) !important;
}

.musicoo-auth-card label {
  letter-spacing: .16em !important;
}

.musicoo-auth-input,
.musicoo-auth-card input {
  border-radius: 8px !important;
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}

.musicoo-auth-input:focus,
.musicoo-auth-card input:focus {
  border-color: rgba(88, 185, 255, .72) !important;
  box-shadow: 0 0 0 3px rgba(88, 185, 255, .18), 0 1px 0 rgba(255, 255, 255, .05) inset !important;
}

.musicoo-auth-card button[type="submit"] {
  border-radius: 8px !important;
  background: #0869b5 !important;
  color: #fff !important;
  box-shadow: 0 16px 34px rgba(8, 105, 181, .24);
}

.musicoo-auth-card button[type="submit"]:hover {
  background: #0a7fd1 !important;
}

.musicoo-auth-card button[type="button"] {
  border-radius: 8px;
}

.musicoo-auth-card .text-emerald-400,
.musicoo-auth-card .hover\:text-emerald-400:hover {
  color: #58b9ff !important;
}

.musicoo-auth-card .bg-emerald-500 {
  background-color: #0869b5 !important;
  color: #fff !important;
}

@keyframes musicoo-auth-albums {
  from { background-position: 0 28px, 112px 0, 224px 28px, 336px 0, 448px 28px, 560px 0; }
  to { background-position: -560px 28px, -448px 0, -336px 28px, -224px 0, -112px 28px, 0 0; }
}

@keyframes musicoo-auth-sweep {
  0%, 48% { background-position: 0 0, 180% 0; }
  78%, 100% { background-position: 0 0, -80% 0; }
}

@media (max-width: 640px) {
  .musicoo-auth-modal {
    padding: 0;
  }

  .musicoo-auth-card {
    width: 100% !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .musicoo-auth-card::before {
    height: 180px;
    background-size: 96px 96px;
  }
}
