:root {
  color-scheme: light;
  --login-ink: #252525;
  --login-muted: #686873;
  --login-border: #dddde3;
  --login-accent: #222222;
  --login-focus: #5464db;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--login-ink);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
[hidden] { display: none !important; }

.login-layout {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 100vh;
  min-height: 100svh;
}

.login-photo {
  position: relative;
  min-height: 620px;
  background: #263748;
  overflow: hidden;
}

.login-photo-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

.login-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 17, 29, .3) 64%, rgba(10, 17, 29, .92));
}

.login-photo-copy {
  position: absolute;
  z-index: 1;
  left: clamp(36px, 5vw, 76px);
  right: 36px;
  bottom: clamp(34px, 5vh, 64px);
  color: #ffffff;
}

.login-photo-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 2.8vw, 42px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.8px;
}

.login-photo-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #e2e5eb;
}

.login-photo-signature {
  display: block;
  margin-top: 32px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #d5d9e0;
}

.login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 36px 36px;
  background: #ffffff;
}

.login-content { width: 100%; max-width: 340px; }
.login-logo { display: block; width: 290px; max-width: 100%; height: auto; margin: 0 auto; }
.login-welcome { margin: 44px 0 32px; }
.login-welcome h1 { margin: 0 0 9px; font-size: 26px; font-weight: 650; letter-spacing: -.8px; line-height: 1.25; }
.login-welcome p { margin: 0; color: var(--login-muted); font-size: 13px; line-height: 1.5; }
.login-field + .login-field { margin-top: 21px; }
.login-field label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; }

.login-field input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 12px 13px;
  border: 1px solid var(--login-border);
  border-radius: 7px;
  background: #ffffff;
  color: var(--login-ink);
  font-size: 16px;
}

.login-field input::placeholder { color: #797983; }
.login-field input:focus { outline: 2px solid var(--login-focus); outline-offset: 2px; }
.login-password { position: relative; }
.login-password input { padding-right: 80px; }

.login-reveal {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 70px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--login-muted);
  font-size: 12px;
  cursor: pointer;
}

.login-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 44px;
  padding: 12px 20px;
  border: 0;
  border-radius: 7px;
  background: var(--login-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.login-submit:hover { background: #383838; }
.login-submit:disabled { opacity: .65; cursor: wait; }
button:focus-visible { outline: 2px solid var(--login-focus); outline-offset: 3px; }
.login-error { margin-bottom: 18px; padding: 12px; border-radius: 7px; background: #fff0f0; color: #a61b1b; font-size: 13px; line-height: 1.5; }
.login-status { margin: 10px 0 0; min-height: 18px; color: var(--login-muted); font-size: 12px; line-height: 1.5; }
.login-footer { margin: 26px 0 0; text-align: center; color: var(--login-muted); font-size: 11px; line-height: 1.5; }
.login-footer strong { font-weight: 600; }
.login-footer span { color: #75757e; }

@media (max-width: 700px) {
  .login-layout { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .login-photo { min-height: 0; height: 230px; }
  .login-photo-image { object-position: 50% 22%; }
  .login-photo::after { background: linear-gradient(180deg, rgba(11, 19, 32, 0) 25%, rgba(11, 19, 32, .45) 56%, rgba(11, 19, 32, .92)); }
  .login-photo-copy { left: 24px; right: 20px; bottom: 21px; }
  .login-photo-copy h2 { margin: 0 0 9px; font-size: 22px; line-height: 1.25; letter-spacing: -.5px; }
  .login-photo-copy p { font-size: 12px; line-height: 1.5; }
  .login-photo-signature { display: none; }
  .login-form-side { align-items: flex-start; padding: 28px 26px 24px; }
  .login-logo { width: 270px; }
  .login-welcome { margin: 28px 0 25px; }
  .login-welcome h1 { font-size: 24px; letter-spacing: -.7px; }
  .login-field + .login-field { margin-top: 19px; }
  .login-submit { margin-top: 28px; }
  .login-status:empty { display: none; }
}

@media (max-width: 360px) {
  .login-form-side { padding-left: 22px; padding-right: 22px; }
  .login-photo-copy { left: 22px; right: 18px; }
  .login-photo-copy h2 { font-size: 20px; }
}