:root {
  font-family: Inter, Arial, sans-serif;
  color: #1b2030;
  background: #f6f7fb;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font-family: inherit; }
.auth-layout { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-brand {
  background: #11141f; color: #fff; padding: 9vh 7vw;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; isolation: isolate; overflow: hidden;
}
.auth-brand::after {
  content: ''; position: absolute; z-index: -1; width: 350px; height: 350px;
  border: 1px solid #2c3c52; border-radius: 50%; bottom: -80px; right: -90px;
  box-shadow: 0 0 0 60px #172133, 0 0 0 120px #121925; pointer-events: none;
}
.auth-logo { display: block; width: 146px; height: auto; }
.auth-wordmark { font-size: 12px; letter-spacing: .2em; font-weight: 800; color: #40c9ef; margin-top: 25px; }
.auth-brand h1 { font-size: clamp(34px, 4vw, 62px); line-height: 1.06; letter-spacing: -2px; max-width: 540px; margin: 45px 0 25px; font-weight: 750; }
.auth-brand h1 span { color: #ef1689; }
.auth-brand p { color: #b9c1d4; line-height: 1.8; max-width: 410px; }
.auth-brand footer { font-size: 12px; color: #a1adc4; margin-top: 55px; }
.auth-main { min-width: 0; display: flex; align-items: center; justify-content: center; padding: 45px; }
.auth-card { width: 100%; max-width: 410px; min-width: 0; }
.auth-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .2em; color: #d40b74; }
.auth-card h2 { font-size: 33px; line-height: 1.2; letter-spacing: -1px; margin: 16px 0 12px; }
.auth-card > p { color: #737d91; font-size: 14px; line-height: 1.6; margin: 0 0 26px; }
label { display: block; font-size: 13px; font-weight: 700; color: #505d73; margin: 18px 0 8px; }
/* Keep actual computed font size at 16px: smaller inputs trigger iOS focus zoom. */
input {
  display: block; width: 100%; min-width: 0; max-width: 100%; height: 50px;
  background: #fff; border: 1px solid #cbd3e1; border-radius: 10px;
  padding: 12px 14px; font-family: inherit; font-size: 16px; line-height: 1.5;
  color: #171e31; scroll-margin-block: 24px;
}
input::placeholder { color: #8b95a7; opacity: 1; }
input:focus { outline: 2px solid #dd2586; outline-offset: 2px; border-color: #dd2586; }
.auth-password { position: relative; }
.auth-password input { padding-right: 76px; }
.auth-password-toggle {
  position: absolute; top: 1px; right: 1px; min-width: 68px; height: 48px;
  border: 0; border-radius: 0 9px 9px 0; background: transparent;
  color: #9e1763; font-size: 13px; font-weight: 700; padding: 0 12px; cursor: pointer;
}
.auth-password-toggle:hover { background: #fcf0f7; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid #dd2586; outline-offset: 3px; }
.auth-submit {
  width: 100%; border: 0; background: #e0007a; color: white; min-height: 50px;
  padding: 12px 16px; border-radius: 10px; font-weight: 700; font-size: 16px;
  cursor: pointer; margin-top: 22px;
}
.auth-submit:hover { background: #bd0a6d; }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-link { display: block; min-height: 44px; border: 0; background: transparent; color: #805177; padding: 12px 0; cursor: pointer; font-size: 14px; }
.auth-bottom { border-top: 1px solid #e2e5ed; margin-top: 18px; padding-top: 16px; color: #6f798e; font-size: 12px; line-height: 1.6; }
.auth-help summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: #59667a; }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.auth-help[open] summary::after { content: '−'; }
.auth-help p { margin: 0 0 8px; }
.auth-message { padding: 12px 14px; border-radius: 9px; margin: 14px 0; font-size: 13px; background: #fff0f4; color: #a41d50; border: 1px solid #f5c1d3; line-height: 1.6; overflow-wrap: anywhere; }
.auth-message[hidden] { display: none; }
.auth-message.good { background: #ecfaf5; border-color: #a2dbcc; color: #117458; }
.small-note { font-size: 13px !important; line-height: 1.6; color: #6f798e; }
.auth-footnote { font-size: 11px; letter-spacing: .04em; color: #858d9f; margin-top: 18px; }
a { color: #ac155f; }
.change-only .auth-layout { grid-template-columns: 1fr; }
.change-only .auth-brand { display: none; }
.change-only .auth-main { min-height: 100vh; min-height: 100svh; }
.change-only .auth-card { max-width: 480px; background: white; border: 1px solid #e4e7ed; border-radius: 18px; padding: 35px; }
@media (max-width: 780px) {
  /* A naturally scrolling page stays usable as the keyboard reduces the viewport. */
  .auth-layout { display: block; }
  .auth-brand { padding: max(18px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
  .auth-brand::after { display: none; }
  .auth-brand > div { width: 100%; max-width: 410px; margin-inline: auto; }
  .auth-identity { display: flex; align-items: center; gap: 14px; }
  .auth-logo { flex: 0 0 auto; width: 85px; }
  .auth-wordmark { display: block; margin: 0; color: #fff; font-size: 16px; letter-spacing: -.2px; font-weight: 700; }
  .auth-brand h1 { font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; margin: 12px 0 0; color: #c0c8d9; max-width: none; }
  .auth-brand h1 span { color: #f474b7; }
  .auth-brand p, .auth-brand footer { display: none; }
  .auth-main { padding: 24px max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); align-items: flex-start; }
  .auth-eyebrow { font-size: 10px; letter-spacing: .15em; }
  .auth-card h2 { font-size: 28px; letter-spacing: -.7px; margin: 9px 0 10px; }
  .auth-card > p { font-size: 14px; line-height: 1.5; margin-bottom: 22px; }
  form > label:first-child { margin-top: 0; }
  .auth-submit { margin-top: 20px; }
  .auth-link { margin-top: 4px; }
  .auth-bottom { margin-top: 8px; padding-top: 4px; }
  .auth-footnote { display: none; }
  .change-only .auth-main { padding: 24px 20px; }
  .change-only .auth-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
}
@media (max-width: 359px) {
  .auth-card h2 { font-size: 25px; }
  .auth-identity { gap: 12px; }
}