#loginModal.login-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  width: 100vw;
  height: 100vh;
  place-items: center !important;
  margin: 0;
  padding: 24px;
  background: rgba(10, 16, 23, 0.72);
  backdrop-filter: blur(8px);
}

#loginModal.login-modal.hidden { display: none !important; }

#loginModal .login-dialog {
  position: relative;
  width: min(420px, calc(100vw - 48px));
  margin: 0;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #111b25;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  color: #eff5f8;
  text-align: center;
}

#loginModal .login-dialog h2 { margin: 10px 0; font-size: 24px; }
#loginModal .login-dialog > p:not(.eyebrow):not(.login-message) { margin: 0 auto 20px; color: #aebcc8; line-height: 1.65; }
#loginModal .login-close { position: absolute; top: 14px; right: 14px; }
#loginModal .login-message { min-height: 42px; margin: 14px 0; color: #c6d3dc; line-height: 1.55; }
#loginModal .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 16px; }
#loginModal .auth-tabs button { min-height: 40px; border: 1px solid #405063; border-radius: 6px; background: #0b121a; color: #aebcc8; font: 700 14px/1 "Noto Sans SC", sans-serif; cursor: pointer; }
#loginModal .auth-tabs button.selected { border-color: #4b82f1; background: #183358; color: #f5f8fa; }
#loginModal .account-form { text-align: left; }
#loginModal .account-form.hidden { display: none; }
#loginModal .account-form label { display: block; margin: 14px 0 7px; color: #c6d3dc; font-size: 13px; font-weight: 700; }
#loginModal .account-form input { display: block; box-sizing: border-box; width: 100%; height: 48px; border: 1px solid #405063; border-radius: 6px; padding: 0 14px; background: #0b121a; color: #f5f8fa; font: 500 15px/1 "Noto Sans SC", sans-serif; }
#loginModal .account-form input:focus { border-color: #4b82f1; outline: 3px solid rgba(75, 130, 241, .2); }
#loginModal .password-field { position: relative; }
#loginModal .password-field input { padding-right: 48px; }
#loginModal .password-visibility-button { position: absolute; top: 50%; right: 7px; display: grid; width: 34px; height: 34px; place-items: center; transform: translateY(-50%); border: 0; border-radius: 5px; background: transparent; color: #9eb0c3; }
#loginModal .password-visibility-button:hover { background: #1b2b3d; color: #f5f8fa; }
#loginModal .password-visibility-button svg { width: 17px; }
#loginModal .invite-login-button { width: 100%; justify-content: center; margin-top: 2px; }
.member-summary { max-width: min(420px, 42vw); overflow: hidden; color: #c6d3dc; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  #loginModal.login-modal { align-items: end !important; padding: 12px; }
  #loginModal .login-dialog { width: 100%; padding: 28px 22px; }
  .topbar-actions { min-width: 0; gap: 7px; }
  .member-summary { display: block; max-width: 130px; color: #627087; font-size: 10px; }
  #loginButton.login-button { display: inline-flex !important; width: 33px; min-width: 33px; padding: 0; justify-content: center; font-size: 0; }
  #loginButton.login-button svg { width: 16px; }
}