/* AUTH */

.auth-section {
  background:var(--steel-dark);
  min-height:calc(100vh - 300px);
  padding:72px 40px;
  position:relative;
  overflow:hidden
}

.auth-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:
  repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(0, 154, 157, .08) 60px, rgba(0, 154, 157, .08) 61px),
  repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0, 154, 157, .08) 60px, rgba(0, 154, 157, .08) 61px)
}

.auth-inner {
  max-width:760px;
  margin:0 auto;
  position:relative
}

.auth-card {
  background:var(--steel-light);
  border:1px solid var(--border);
  border-radius:4px;
  padding:36px;
  box-shadow:0 20px 60px rgba(0, 0, 0, .28)
}

.auth-card.narrow {
  max-width:520px;
  margin:0 auto
}

.auth-card h1 {
  font-size:28px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:8px
}

.auth-intro {
  color:var(--text-muted);
  font-size:14px;
  line-height:1.65;
  margin-bottom:28px
}

.auth-form {
  display:flex;
  flex-direction:column;
  gap:16px
}

.auth-form .btn-primary {
  text-align:center;
  width:100%
}

.auth-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.auth-group label,
.auth-check label {
  color:var(--text-muted);
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:6px;
  text-transform:uppercase
}

.auth-group input,
.auth-group select {
  background:var(--steel-dark);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-primary);
  font-family:inherit;
  font-size:14px;
  padding:11px 14px;
  transition:.15s;
  width:100%
}

.auth-group input:focus,
.auth-group select:focus {
  border-color:var(--orange);
  outline:none
}

.auth-group select option {
  background:var(--steel-dark)
}

.auth-check-row {
  align-items:center;
  display:flex;
  justify-content:space-between;
  gap:14px
}

.auth-check {
  align-items:center;
  display:flex;
  gap:8px
}

.auth-check input {
  accent-color:var(--orange)
}

.auth-check label {
  margin:0;
  text-transform:none;
  letter-spacing:0
}

.auth-link {
  color:var(--orange-light);
  font-size:13px;
  text-decoration:none
}

.auth-link:hover {
  color:var(--text-primary)
}

.auth-actions {
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:8px;
  padding-top:20px;
  text-align:center
}

.auth-actions p {
  color:var(--text-muted);
  margin:0;
  width:100%
}

.auth-error {
  color:#006d70;
  display:none;
  font-size:12px;
  margin-top:6px
}

.auth-success {
  background:rgba(0, 154, 157, .10);
  border:1px solid rgba(0, 154, 157, .30);
  border-radius:3px;
  color:var(--orange-light);
  display:none;
  font-size:13px;
  margin-top:8px;
  padding:14px 18px
}

.is-invalid {
  border-color:rgb(0, 114, 116) !important
}

@media(max-width:700px) {
  .auth-section {
    padding:52px 20px
  }

  .auth-card {
    padding:28px 22px
  }

  .auth-row {
    grid-template-columns:1fr
  }

  .auth-check-row {
    align-items:flex-start;
    flex-direction:column
  }
}