/* Login surface v0.2.3 — one balanced, unified panel. */
body:has(.login-screen:not(.hidden)) {
  background:
    radial-gradient(circle at 12% 14%, rgba(181, 42, 48, .06), transparent 27%),
    #f3f0eb;
}

.login-screen {
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}

.login-shell {
  width: min(920px, 100%);
  min-height: 540px;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  border: 1px solid #dcd6cd;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(37, 31, 25, .12);
}

.login-art {
  min-height: 540px;
  padding: 38px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, #b32c32 0 72px, transparent 73px),
    linear-gradient(155deg, transparent 58%, rgba(179, 44, 50, .13) 58.2%, transparent 80%),
    #181818;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.login-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  color: #171717;
}

.login-message .eyebrow {
  color: #d86b6f;
  font-size: 11px;
}

.login-message h1 {
  margin: 15px 0 20px;
  color: #fff;
  font-size: 39px;
  line-height: 1.18;
  letter-spacing: -.055em;
}

.login-message h1 em {
  color: #f0d7d5;
  font-style: normal;
  font-weight: inherit;
}

.login-message p {
  max-width: 280px;
  margin: 0;
  color: #aaa6a1;
  font-size: 14px;
  line-height: 1.75;
}

.login-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 9px;
  align-items: center;
  width: max-content;
  color: #d4d0cb;
  font-size: 12px;
}

.login-status b {
  grid-column: 2;
  color: #77726d;
  font-size: 11px;
  font-weight: 550;
}

.login-card {
  width: min(380px, calc(100% - 64px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.login-card .brand-mark {
  display: none;
}

.login-card .eyebrow {
  color: #ae2b31;
  font-size: 11px;
  letter-spacing: .13em;
}

.login-card h2 {
  margin: 12px 0 8px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -.045em;
}

.login-card > p.muted {
  margin: 0;
  color: #827b73;
  font-size: 14px;
  line-height: 1.65;
}

.login-card form {
  display: grid;
  gap: 17px;
  margin-top: 30px;
}

.login-card label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #393530;
  font-size: 13px;
  font-weight: 700;
}

.login-card label > span {
  display: block;
}

.login-card input {
  width: 100%;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 15px;
  border: 1px solid #d9d2c9;
  border-radius: 10px;
  background: #fbfaf8;
  color: #171717;
  font-size: 15px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.login-card input:hover {
  border-color: #bdb4aa;
}

.login-card input:focus {
  border-color: #a52a2f;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(179, 44, 50, .09);
}

.login-card .wide {
  height: 48px;
  margin: 4px 0 0;
  border-radius: 10px;
  background: #1c1b1a;
  font-size: 14px;
}

.login-card .wide:hover {
  background: #a8292f;
}

.login-card .wide span {
  float: right;
  margin: 0;
  color: #e46a6f;
  font-size: 14px;
}

.login-card .wide:hover span {
  color: #fff;
}

.login-card .form-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: #a4282d;
  font-size: 13px;
}

.login-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  color: #aaa39b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
}

.login-foot i {
  width: 22px;
  height: 1px;
  background: #cfc8c0;
}

@media (max-width: 720px) {
  .login-screen {
    padding: 0;
    place-items: stretch;
    background: #fff;
  }

  .login-shell {
    width: 100%;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    grid-template-rows: 190px 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .login-art {
    min-height: 190px;
    padding: 24px 26px 27px;
  }

  .login-message h1 {
    margin: 13px 0 0;
    font-size: 30px;
    line-height: 1.13;
  }

  .login-message h1 br,
  .login-message p,
  .login-status {
    display: none;
  }

  .login-card {
    width: min(390px, calc(100% - 48px));
    padding: 38px 0 34px;
  }
}

@media (max-width: 390px) {
  .login-shell {
    grid-template-rows: 166px 1fr;
  }

  .login-art {
    min-height: 166px;
    padding: 20px 22px 22px;
  }

  .login-message h1 {
    font-size: 27px;
  }

  .login-card {
    width: calc(100% - 40px);
    padding-top: 31px;
  }

  .login-card h2 {
    font-size: 29px;
  }
}