/* Transparent frosting belongs to the panel, not to the text or controls. */
.login-panel {
  background: linear-gradient(135deg, rgba(255, 252, 248, .24), rgba(255, 239, 245, .12));
  border: 1px solid rgba(255, 255, 255, .60);
  -webkit-backdrop-filter: blur(4px) saturate(1.08);
  backdrop-filter: blur(4px) saturate(1.08);
  box-shadow: 0 20px 65px rgba(65, 37, 51, .12), inset 0 1px 0 rgba(255, 255, 255, .48);
}
.login-panel h1, .login-panel .brand { color: #402d39; text-shadow: 0 1px 8px rgba(255, 249, 244, .55); }
.login-kicker { color: #855064; }
.login-intro, .login-form label, .login-footnote { color: #614451; text-shadow: 0 1px 5px rgba(255, 249, 244, .65); }
.login-form input { background: rgba(255, 253, 249, .56); border-color: rgba(255, 255, 255, .72); color: #412e3c; box-shadow: inset 0 1px 4px rgba(69, 38, 50, .03); }
.login-form input::placeholder { color: #826c76; }
.login-form input:focus { background: rgba(255, 253, 249, .78); border-color: #ae6a86; }
.login-form .create-button { background: rgba(147, 70, 102, .91); box-shadow: 0 6px 18px rgba(110, 48, 75, .15); }
.login-form .create-button:hover { background: #8b3f5e; }
.login-copyright { color: #644351; text-shadow: 0 1px 5px rgba(255, 249, 244, .65); }
@media (max-width: 580px) {
  .login-panel { background: linear-gradient(135deg, rgba(255, 252, 248, .30), rgba(255, 239, 245, .18)); -webkit-backdrop-filter: blur(3px) saturate(1.08); backdrop-filter: blur(3px) saturate(1.08); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-panel { background: rgba(255, 249, 244, .56); }
}