/* Keep the sign-in panel itself clean; compact it on shorter displays. */
.signin-page-modal { overflow-x: clip; overflow-y: visible; place-items: safe center; }
.signin-page-modal .signin-card { max-height: none; overflow: clip; }
.signin-page-modal .signin-card {
  border-color: rgba(166, 225, 216, .72);
  box-shadow: 0 28px 80px rgba(4, 38, 48, .24), 0 4px 18px rgba(11, 95, 105, .08);
}
.signin-page-modal .signin-card::before {
  position: absolute;
  z-index: 2;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #e8ad36, #19a6a5 42%, #75d8c4);
  content: "";
}
.signin-page-modal .signin-field input[type="email"],
.signin-page-modal .signin-password input {
  border-radius: 10px;
  background: rgba(255, 255, 255, .88);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.signin-page-modal .signin-field input[type="email"]:hover,
.signin-page-modal .signin-password input:hover { border-color: #b9d7d2; }
.signin-page-modal .signin-field input[type="email"]:focus,
.signin-page-modal .signin-password input:focus {
  border-color: #159da4;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(21, 157, 164, .12), 0 4px 12px rgba(21, 157, 164, .06);
}
.signin-page-modal .signin-submit {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(17, 124, 132, .24);
  border-radius: 10px;
  background: linear-gradient(110deg, #0b5360, #0d747d 58%, #119a99);
  box-shadow: 0 8px 18px rgba(11, 103, 112, .2);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.signin-page-modal .signin-submit::after {
  position: absolute;
  top: -70%;
  left: -45%;
  width: 30%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  content: "";
  transform: rotate(22deg);
  transition: left .55s ease;
}
.signin-page-modal .signin-submit:hover {
  filter: saturate(1.12);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11, 103, 112, .28);
}
.signin-page-modal .signin-submit:hover::after { left: 120%; }
.signin-page-modal .signin-submit:active { transform: translateY(0); }
.signin-page-modal .signin-submit:focus-visible,
.signin-page-modal .signin-socials button:focus-visible,
.signin-page-modal .signin-close:focus-visible {
  outline: 3px solid rgba(22, 157, 164, .34);
  outline-offset: 3px;
}
.signin-page-modal .signin-socials button { border-radius: 10px; }
.signin-page-modal .signin-trust { background: linear-gradient(100deg, #effaf7, #f4fbfa); }
.signin-page-modal .signin-close {
  top: 18px;
  right: 18px;
  min-height: 38px;
  padding: 0 13px 0 10px;
  border-color: rgba(202, 219, 217, .9);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 5px 16px rgba(18, 66, 73, .08);
  backdrop-filter: blur(10px);
}
.signin-page-modal .signin-close-label { color: #536d73; transition: color .18s ease; }
.signin-page-modal .signin-close-icon {
  width: 21px;
  height: 21px;
  color: #3b626b;
  background: #eaf4f2;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.signin-page-modal .signin-close:hover,
.signin-page-modal .signin-close:focus-visible {
  color: #fff;
  border-color: #d94848;
  background: linear-gradient(135deg, #f16b61, #d83e48);
  box-shadow: 0 8px 22px rgba(216, 62, 72, .28);
  transform: translateY(-2px);
}
.signin-page-modal .signin-close:hover .signin-close-label,
.signin-page-modal .signin-close:focus-visible .signin-close-label { color: #fff; }
.signin-page-modal .signin-close:hover .signin-close-icon,
.signin-page-modal .signin-close:focus-visible .signin-close-icon {
  color: #c93440;
  background: #fff;
  transform: translateX(-2px);
}

@media (max-height: 700px) {
  .signin-page-modal { padding: 10px; }
  .signin-page-modal .signin-card-content { padding-top: 22px; }
  .signin-page-modal .signin-card h2 { font-size: 34px; }
  .signin-page-modal .signin-intro { margin-bottom: 13px; }
  .signin-page-modal .signin-field input[type="email"],
  .signin-page-modal .signin-password input { height: 42px; }
  .signin-page-modal .signin-socials button { height: 36px; }
}

@media (max-height: 650px) {
  .signin-page-modal { padding: 8px 12px; overflow-x: clip; overflow-y: visible; }
  .signin-page-modal .signin-card-content { padding: 18px 28px 10px; }
  .signin-page-modal .signin-kicker { margin-bottom: 8px; }
  .signin-page-modal .signin-card h2 { font-size: 30px; line-height: .98; }
  .signin-page-modal .signin-intro { margin: 8px 0 10px; font-size: 12px; }
  .signin-page-modal .signin-form { gap: 8px; }
  .signin-page-modal .signin-field { gap: 5px; }
  .signin-page-modal .signin-field input[type="email"],
  .signin-page-modal .signin-password input { height: 38px; }
  .signin-page-modal .signin-status { min-height: 10px; }
  .signin-page-modal .signin-divider { margin: 9px 0 7px; }
  .signin-page-modal .signin-socials button { height: 32px; }
  .signin-page-modal .signin-switch { margin-top: 9px; }
  .signin-page-modal .signin-trust { padding: 7px 28px 8px; }
}

@media (max-height: 560px) {
  .signin-page-modal { overflow-y: auto; }
}

@media (max-width: 520px) {
  .signin-page-modal .signin-card-content { padding-left: 22px; padding-right: 22px; }
  .signin-page-modal .signin-trust { padding-left: 22px; padding-right: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .signin-page-modal .signin-card { animation: none; }
}