:root {
  --login-art-url: url("https://res.cloudinary.com/o8o3sy5w/image/upload/f_auto,q_auto/IMG_8325");
}

/* Give the access screen a full-bleed, editorial backdrop while keeping the form calm and readable. */
.view-container[data-view="login"] {
  position: relative;
  isolation: isolate;
  max-width: none;
  min-height: calc(100vh - 77px);
  padding: 0;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(115deg, rgba(5, 5, 14, 0.9) 0%, rgba(5, 5, 14, 0.58) 48%, rgba(5, 5, 14, 0.78) 100%),
    var(--login-art-url);
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover;
}

.view-container[data-view="login"] > * {
  position: relative;
  z-index: 1;
}

.boot-fallback--login {
  min-height: calc(100vh - 77px);
  padding: 30px 16px 96px;
  background: transparent;
}

.boot-login-box {
  min-height: calc(100vh - 150px);
  max-width: 500px;
}

.boot-login-box .login-header {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}

.boot-login-box .login-header__crown {
  color: var(--color-gold);
}

.boot-login-box .login-card {
  background: rgba(14, 14, 36, 0.86);
  border-color: rgba(251, 191, 36, 0.2);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.48), 0 0 36px rgba(192, 132, 252, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 640px) {
  .view-container[data-view="login"] {
    min-height: calc(100vh - 72px);
    background-position: 61% center, 61% center;
  }

  .boot-fallback--login {
    padding: 18px 12px 82px;
  }

  .boot-login-box {
    min-height: calc(100vh - 112px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-login-box .login-header__crown {
    filter: none;
  }
}