/* Auth / account forms — same language as layout popups */

.auth-screen {
  padding: 48rem 0 96rem;
}

.auth-panel {
  width: 100%;
  max-width: 480rem;
  margin: 0 auto;
  background: #fff;
  padding: 48rem;
  box-shadow: 0 12rem 48rem hsla(0, 0%, 0%, 0.06);
  border: 1px solid hsla(0, 0%, 0%, 0.06);
}

.auth-panel .auth-title {
  font-size: 28rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 12rem;
  color: var(--dark, #222);
}

.auth-panel .auth-lead {
  font-size: 16rem;
  line-height: 1.45;
  color: hsla(0, 0%, 20%, 0.72);
  margin: 0 0 32rem;
}

.auth-panel .form-box {
  display: flex;
  flex-direction: column;
  gap: 20rem;
}

.auth-panel .form-item .label {
  margin-bottom: 8rem;
  font-size: 16rem;
}

.auth-panel .form-item input[type="text"],
.auth-panel .form-item input[type="email"],
.auth-panel .form-item input[type="password"],
.auth-panel .form-item input[type="tel"] {
  width: 100%;
  min-height: 52rem;
  padding: 0 16rem;
  border: 1px solid var(--border, #cfcfcf);
  background: #fff;
  font-size: 18rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-panel .form-item input:focus {
  outline: none;
  border-color: var(--graphite, #555);
  box-shadow: 0 0 0 1rem var(--graphite, #555);
}

.auth-panel .form-item.button {
  margin-top: 8rem;
}

.auth-panel .form-item.button .btn {
  width: 100%;
  min-width: 0;
}

.auth-panel .form-item.links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16rem;
  flex-wrap: wrap;
  font-size: 16rem;
  margin-top: 4rem;
}

.auth-panel .form-item.links a {
  text-decoration: underline;
  text-underline-offset: 3rem;
}

.auth-panel .form-error,
.auth-panel .field-error {
  color: #8a2f2f;
  font-size: 15rem;
  margin-top: 8rem;
}

.auth-panel .form-error {
  margin-bottom: 4rem;
  padding: 12rem 14rem;
  background: hsla(0, 55%, 94%, 1);
}

.auth-panel .form-item.desc .word p {
  font-size: 14rem;
  line-height: 1.45;
  color: hsla(0, 0%, 20%, 0.7);
}

.auth-panel-wide {
  max-width: 900rem;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12rem;
  margin-bottom: 40rem;
}

.auth-actions .btn {
  min-width: 0;
  flex: 1 1 180rem;
}

.auth-section-title {
  font-size: 22rem;
  margin: 0 0 20rem;
  font-weight: 400;
}


@media (width < 640px) {
  .auth-screen {
    padding: 24rem 0 64rem;
  }

  .auth-panel {
    padding: 32rem 24rem;
    box-shadow: none;
    border-left: none;
    border-right: none;
  }
}