:root{--gap:14px;}
*,*::before,*::after{box-sizing:border-box}
.swap{
  justify-content: center;
  display:flex;
}
.auth{display:flex;justify-content:center;padding:40px 16px 80px;}
.card{
  width:min(640px,92vw);
  margin:0 auto;
  background:var(--color-tertiary);
  border:none;
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow-sm);
}
.card > form{
  width:100%;
  max-width:560px;
  margin:0 auto;
}

.title{margin:0 0 8px;font-size:36px;font-weight:900;color:var(--color-text);font-family: "Intro Rust";}
.subtitle{margin:0 0 18px;opacity:.8;color:var(--color-text);}

.field{display:flex;flex-direction:column;gap:8px;margin:0 0 var(--gap);}
.field label{font-weight:700;color:var(--color-text);}
.field input{
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-interactive);
  border: 1px solid rgba(38, 59, 70, 0.25);
  background:var(--color-secondary);
  color:var(--color-text);
  outline:none;
}

.password{position:relative;}
.password input{padding-right:44px;}
.password .toggle{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;line-height:0;
}
.password .toggle img{width:24px;height:24px;display:block;}

.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 0;}
.auth .link2{color:var(--color-primary);text-decoration:none;}
.auth .link2:hover{color:var(--color-primary-strong);text-decoration:underline;}

.error,.form-error{color:var(--color-accent);font-size:14px;margin-top:8px;}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--color-text);}

@media (max-width:480px){ .card{padding:16px} }


.oauth-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0;
  color:var(--color-text);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.08em;
  opacity:.7;
}
.oauth-divider::before,
.oauth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:color-mix(in srgb, var(--color-text) 20%, transparent);
}
.oauth-buttons{
  display:flex;
  gap:12px;
  margin-bottom:8px;
}
.oauth-buttons .oauth-btn{
  flex:1;
}
.oauth-btn{
  border:none;
  background:var(--color-border-soft);
  color:var(--color-btn);
}
.oauth-btn:hover{
border: none;
box-shadow: inset 0 0 0 1px var(--color-btn);
color:var(--color-btn);
}
.oauth-btn--icon{padding:12px 0;}
.oauth-btn img{width:18px;height:18px;}