body:has(.owner-login) { min-block-size: 100svh; }

.owner-login {
  width: min(440px, calc(100% - 36px));
  padding-block: clamp(36px, 9vh, 88px);
}

.owner-login-panel {
  margin: 0;
  padding: clamp(20px, 6vw, 32px);
  border-radius: 18px;
  box-shadow: 0 9px 24px #7448390a;
}

.owner-login-panel h1 {
  margin-bottom: 24px;
  font: 600 clamp(27px, 6vw, 36px) / 1.3 var(--menu-display, var(--serif));
}

.owner-login-panel .notice {
  margin-bottom: 18px;
  padding: 10px 12px;
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.owner-login-panel form { display: grid; gap: 16px; }
.owner-login-panel .form-field label { font-size: 14px; }
.owner-login-panel .form-field input { border-radius: 10px; font-size: 16px; }
.owner-login-panel .form-field input:focus-visible { outline-width: 2px; outline-offset: 2px; }
.owner-login-panel .button { margin-top: 4px; border-radius: 999px; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .owner-login-arrival { animation: owner-login-arrive var(--motion-standard, 220ms) var(--motion-ease, ease-out); }

  @keyframes owner-login-arrive {
    from { opacity: .78; transform: translateY(5px); }
  }
}