.back { color: var(--muted); font-size: 14px; text-decoration: none }
.back:hover { color: var(--teal); text-decoration: underline }
.auth-shell { width: min(950px, calc(100% - 40px)); margin: clamp(42px, 10vh, 96px) auto; display: grid; grid-template-columns: 1.04fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: 0 15px 40px -35px #354b54 }
.auth-card { padding: clamp(30px, 5.4vw, 65px) clamp(24px, 4.2vw, 54px) }
.auth-card h1 { font-size: clamp(30px, 3.7vw, 39px) }
.auth-card .lead { font-size: 15px; margin: 12px 0 25px }
form { display: grid; gap: 17px }
form .button { min-height: 45px; margin-top: 3px }
.password { display: flex; align-items: center; position: relative }
.password input { padding-right: 85px }
.password button { border: 0; background: transparent; color: var(--teal); position: absolute; right: 4px; padding: 8px; font-size: 12px; font-weight: 650 }
.switch { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px }
.switch a { font-weight: 650 }
.auth-visual { display: grid; align-items: center; background: #172c36; color: white }
.auth-visual img { display: block; width: 100%; height: auto }
.auth-visual h2 { font-size: 22px; margin: 12px 32px 0 }
.auth-visual p { color: #bdcfce; font-size: 14px; margin: 10px 32px 34px; max-width: 38ch }
@media (max-width: 700px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 470px; margin-block: 35px }
  .auth-visual { display: none }
}