#loginModal.modal-overlay {
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
}

#loginModal:not(#tagDeleteConfirmModal):not(#pageDeleteConfirmModal) .boooook-login-panel {
  box-sizing: border-box;
  width: min(360px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  margin: auto;
  padding: 26px 22px 22px !important;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.92) !important;
  color-scheme: dark;
  border: 1px solid rgba(255, 255, 255, 0.23) !important;
  border-radius: 26px !important;
  background: rgba(74, 74, 74, 0.56) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%) !important;
}

#loginModal .boooook-login-signup,
#loginModal [hidden] {
  display: none !important;
}

#loginModal .boooook-login-panel h2,
#loginModal .boooook-login-panel h3,
#loginModal .auth-brand-lockup,
#loginModal .auth-field label,
#loginModal .auth-brand-lockup__spark,
#loginModal .auth-brand-lockup__book {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  background: none !important;
  text-shadow: none !important;
}

#loginModal .boooook-login-panel h3 {
  font-size: 22px;
  line-height: 1.35;
}

#loginModal .boooook-login-panel p,
#loginModal .boooook-login-panel span[onclick],
#loginModal .boooook-login-panel a {
  color: rgba(255, 255, 255, 0.72) !important;
}

#loginModal .boooook-login-panel input:not([type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 14px !important;
  background: rgba(34, 34, 34, 0.3) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  font-size: 16px !important;
  line-height: 1.4;
  caret-color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#loginModal .boooook-login-panel input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

#loginModal .boooook-login-panel button {
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.23) !important;
  border-radius: 14px !important;
  color: rgba(255, 255, 255, 0.96) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  font-size: 15px;
  cursor: pointer;
}

#loginModal .boooook-login-panel button[type="submit"] {
  background: rgba(34, 34, 34, 0.72) !important;
  font-weight: 700;
}

#loginModal .boooook-login-panel .modal-close {
  width: 44px;
  min-height: 44px;
  border-radius: 50% !important;
}

#loginModal .boooook-login-panel input:focus,
#loginModal .boooook-login-panel button:focus-visible,
#loginModal .boooook-login-panel a:focus-visible {
  border-color: rgba(255, 255, 255, 0.68) !important;
  outline: 2px solid rgba(255, 255, 255, 0.72) !important;
  outline-offset: 3px;
}

#loginModal .boooook-login-panel button:disabled {
  opacity: 0.55;
  cursor: wait;
}

#loginModal #login-error,
#loginModal #loginError {
  color: #ffd5d5 !important;
}

@media (max-height: 560px) {
  #loginModal.modal-overlay {
    align-items: flex-start;
  }
  #loginModal:not(#tagDeleteConfirmModal):not(#pageDeleteConfirmModal) .boooook-login-panel {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}