:root {
  --auth-canvas: #f6efe5;
  --auth-surface: #fffaf4;
  --auth-ink: #241a14;
  --auth-muted: #77685d;
  --auth-brown: #7d4628;
  --auth-brown-deep: #3a2116;
  --auth-tan: #dfc5ab;
  --auth-line: rgba(58, 33, 22, 0.14);
  --auth-danger: #a54c43;
  --auth-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  min-width: 320px;
  background: var(--auth-surface);
  color: var(--auth-ink);
  font-family: "DM Sans", "Inter", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: auto;
  padding: 28px clamp(28px, 5vw, 72px);
}

.logo {
  gap: 10px;
  color: #fffaf4;
}

.logo-icon {
  width: 34px;
  height: 34px;
}

.logo-text {
  color: inherit;
  background: none;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.045em;
  -webkit-text-fill-color: currentColor;
}

.main {
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(390px, 0.9fr) minmax(500px, 1.1fr);
  align-items: stretch;
  padding: 0;
}

.auth-aside {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 100svh;
  padding: 110px clamp(32px, 5vw, 72px) 56px;
  overflow: hidden;
  color: #fffaf4;
  background:
    radial-gradient(circle at 92% 20%, rgba(230, 191, 158, 0.26), transparent 24%),
    linear-gradient(145deg, #331c12, #6f3b23 64%, #9a6847);
}

.auth-aside::before,
.auth-aside::after {
  position: absolute;
  border: 1px solid rgba(255, 250, 244, 0.12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.auth-aside::before {
  top: 17%;
  right: -42%;
  width: 580px;
  height: 580px;
}

.auth-aside::after {
  right: 12%;
  bottom: -18%;
  width: 330px;
  height: 330px;
}

.auth-aside > * {
  position: relative;
  z-index: 1;
}

.auth-eyebrow {
  margin: 0 0 18px;
  color: rgba(255, 250, 244, 0.5);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-aside h2 {
  max-width: 640px;
  margin: 0;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(3.2rem, 5.7vw, 6.7rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.075em;
}

.auth-aside-copy {
  max-width: 500px;
  margin: 30px 0 0;
  color: rgba(255, 250, 244, 0.67);
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  line-height: 1.65;
}

.auth-device-note {
  position: absolute;
  right: clamp(32px, 5vw, 72px);
  bottom: 36px;
  left: clamp(32px, 5vw, 72px);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 250, 244, 0.17);
  color: rgba(255, 250, 244, 0.48);
  font-size: 0.72rem;
}

.login-container,
.signup-container {
  align-self: center;
  width: min(100%, 620px);
  max-width: none;
  margin-inline: auto;
  padding: 90px clamp(34px, 7vw, 110px) 64px;
}

.login-header,
.signup-header {
  margin-bottom: 34px;
  text-align: left;
}

.login-title,
.signup-title {
  margin: 0;
  color: var(--auth-ink);
  font-family: "Manrope", "Inter", sans-serif;
  font-size: clamp(2.65rem, 4vw, 4.4rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.07em;
}

.login-subtitle,
.signup-subtitle {
  margin-top: 18px;
  color: var(--auth-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.social-buttons {
  gap: 10px;
  margin-bottom: 22px;
}

.btn-social,
.btn-submit {
  min-height: 52px;
  border-radius: 3px;
  font-size: 0.9rem;
  font-weight: 700;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 140ms var(--auth-ease);
}

.btn-social {
  border-color: var(--auth-line);
  color: var(--auth-ink);
  background: var(--auth-surface);
}

.btn-submit {
  color: #fffaf4;
  background: var(--auth-brown);
}

.btn-social:active,
.btn-submit:active,
.password-toggle:active {
  transform: scale(0.97);
}

/* In flight: a popup is open or the browser is off to the provider. Muted
 * rather than hidden so the row doesn't shift while people wait. */
.btn-social:disabled,
.btn-submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-social:hover {
    border-color: rgba(125, 70, 40, 0.28);
    background: #ffffff;
  }

  .btn-submit:hover {
    background: #6d3d24;
  }
}

.divider {
  margin: 22px 0;
}

.divider-line {
  background: var(--auth-line);
}

.divider-text {
  color: var(--auth-muted);
}

.login-form,
.signup-form {
  gap: 17px;
}

.form-group {
  display: grid;
  gap: 8px;
}

.field-label {
  color: var(--auth-ink);
  font-size: 0.77rem;
  font-weight: 700;
}

.form-input {
  min-height: 54px;
  padding: 0 15px;
  border-color: var(--auth-line);
  border-radius: 3px;
  color: var(--auth-ink);
  background: #ffffff;
  font-size: 1rem;
  transition: border-color 170ms ease, box-shadow 170ms ease;
}

.form-input:focus {
  border-color: var(--auth-brown);
  box-shadow: 0 0 0 4px rgba(125, 70, 40, 0.09);
}

.password-toggle {
  top: auto;
  right: 5px;
  bottom: 5px;
  width: 44px;
  height: 44px;
  transition: transform 140ms var(--auth-ease);
}

.forgot-password {
  margin-top: -6px;
}

.forgot-password a,
.signup-link a,
.login-link a,
.terms a {
  color: var(--auth-brown);
}

.form-message.error {
  border-radius: 0;
  color: var(--auth-danger);
  background: rgba(165, 76, 67, 0.07);
}

.signup-link,
.login-link,
.terms {
  color: var(--auth-muted);
}

:focus-visible {
  outline: 3px solid rgba(125, 70, 40, 0.32);
  outline-offset: 3px;
}

@media (max-width: 850px) {
  .header {
    padding: 20px 22px;
  }

  .logo {
    color: var(--auth-brown-deep);
  }

  .main {
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: 84px 0 28px;
  }

  .auth-aside {
    display: none;
  }

  .login-container,
  .signup-container {
    width: 100%;
    padding: 32px 22px 40px;
  }

  .login-title,
  .signup-title {
    font-size: clamp(2.55rem, 12vw, 3.7rem);
  }
}

@media (max-width: 390px) {
  .login-container,
  .signup-container {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-social,
  .btn-submit,
  .password-toggle {
    transition-duration: 0.01ms;
  }
}