.auth{
  max-width: 520px;
  margin: 48px auto;
  padding: 0 16px;
}

.card{
  background: var(--color-secondary);
  border:none;
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--shadow-sm);
}

.title{
  font-family: "Intro Rust","Inter Local",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 6px;
  color: var(--color-text);
}
.subtitle{ margin: 0 0 18px; color: var(--color-muted); }

.field{ margin-bottom: 18px; }
.field label{ display:block; margin:0 0 6px; color: var(--color-text); font-weight: 600; }
.field input{
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 12px 14px;
  background: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid rgba(38, 59, 70, 0.25);
  border-radius: var(--radius-interactive);
  outline: none;
  transition: border-color .2s;
}
.field input:focus{ border-color: var(--color-primary); }
.error{ display:block; min-height:16px; color:var(--color-accent); font-size:12px; margin-top:6px; }
.link:hover{text-decoration: underline;color:var(--color-primary);}
.password{ position: relative; }
.password input{ padding-right: 64px; }
.password .toggle{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display:grid; place-items:center;
  background: transparent; border: 0; padding: 0; cursor: pointer; line-height: 0;
}
.password .toggle img{ width: 26px; height: 26px; opacity: .9; display: block; pointer-events: none; }
.password .toggle:hover img{ opacity: 1; }
input::-ms-reveal, input::-ms-clear { display:none; }

.form-error{ min-height:18px; color:var(--color-accent); text-align:center; margin:10px 0 0; }
.form-ok{ min-height:18px; color: var(--color-text); text-align:center; margin:10px 0 0; }
.swap{ margin:14px 0 0; color: var(--color-muted); text-align:center; }

.link2{ color: var(--color-primary); text-decoration: none; }
.link2:hover{ text-decoration: underline;color: var(--color-text); }