.auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 20px;
}
.auth-modal[hidden] { display: none; }
.auth-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(7px);
}
.auth-dialog {
  position: relative;
  width: min(430px, 100%);
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(15,23,42,.28);
}
.auth-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border: 0; border-radius: 9px;
  background: transparent; color: #64748b;
  font-size: 23px;
  touch-action: manipulation;
}
.auth-brand {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 18px;
  border-radius: 13px;
  background: linear-gradient(135deg,#07c160,#06ad56);
  color: #fff; font-size: 22px; font-weight: 900;
}
.auth-title { margin: 0; color: #0f172a; font-size: 24px; }
.auth-subtitle { margin: 7px 0 22px; color: #64748b; font-size: 13px; line-height: 1.6; }
.auth-field { display: block; margin-bottom: 15px; }
.auth-field > span { display: block; margin-bottom: 7px; color: #334155; font-size: 12px; font-weight: 700; }
.auth-input-row { display: flex; gap: 8px; }
.auth-input {
  width: 100%; height: 44px;
  padding: 0 12px;
  border: 1px solid #dbe3df;
  border-radius: 10px;
  outline: none; color: #0f172a; font: inherit;
}
.auth-input:focus { border-color: #07c160; box-shadow: 0 0 0 3px rgba(7,193,96,.12); }
.auth-input.is-error,
.auth-input.is-error:focus {
  border-color: #ef4444;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.auth-captcha-image {
  width: 132px; height: 44px;
  flex: none; object-fit: cover;
  border: 1px solid #dbe3df; border-radius: 10px;
  cursor: pointer;
}
.auth-send {
  min-width: 112px; height: 44px;
  border: 1px solid #07c160; border-radius: 10px;
  background: #effcf5; color: #057a3c;
  font-size: 12px; font-weight: 700;
}
.auth-send:disabled { opacity: .55; cursor: not-allowed; }
.auth-submit {
  width: 100%; height: 46px;
  margin-top: 4px;
  border: 0; border-radius: 11px;
  background: linear-gradient(135deg,#07c160,#06ad56);
  color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 10px 25px rgba(7,193,96,.22);
}
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-error { min-height: 20px; margin: 2px 0 8px; color: #dc2626; font-size: 12px; }
.auth-notice { margin: 14px 0 0; color: #94a3b8; font-size: 11px; text-align: center; }
[data-check-in].is-checked-in {
  opacity: .72;
  cursor: default;
  filter: saturate(.7);
}
@media (max-width: 480px) {
  .auth-modal {
    place-items: end center;
    padding: 0;
  }
  .auth-dialog {
    width: 100%;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 25px 18px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
  .auth-close {
    position: sticky;
    top: 0;
    z-index: 2;
    float: right;
    width: 44px;
    height: 44px;
    margin: -13px -7px -31px 0;
    background: rgba(255,255,255,.94);
  }
  .auth-brand {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }
  .auth-title { padding-right: 44px; font-size: 22px; }
  .auth-subtitle { margin-bottom: 18px; }
  .auth-field { margin-bottom: 13px; }
  .auth-input { height: 48px; font-size: 16px; }
  .auth-captcha-image { width: 120px; height: 48px; }
  .auth-send { min-width: 108px; height: 48px; }
  .auth-submit { height: 50px; }
  .auth-notice { line-height: 1.6; }
}
@media (max-width: 360px) {
  .auth-dialog { padding-inline: 14px; }
  .auth-input-row { gap: 6px; }
  .auth-captcha-image { width: 108px; }
  .auth-send { min-width: 102px; padding-inline: 8px; }
}