/* Auth page styles */

.auth-page{min-height:100vh;display:flex;flex-direction:column}

.auth{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:120px 20px 60px;
  position:relative;z-index:2;
}

.auth__card{
  width:100%;max-width:440px;
  border:1px solid var(--line-2);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(201,169,97,.06),transparent 60%),
    linear-gradient(180deg,rgba(201,169,97,.02),transparent);
  padding:8px;
}

.auth__tabs{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4px;padding:4px;
  background:rgba(0,0,0,.4);
  border-radius:16px;
  margin-bottom:8px;
}

.auth__tab{
  padding:11px 14px;
  border-radius:12px;
  font-size:.92rem;font-weight:500;
  color:var(--muted);
  transition:.3s var(--ease);
  font-family:var(--font);
}
.auth__tab:hover{color:var(--text)}
.auth__tab.is-active{
  background:linear-gradient(180deg,rgba(201,169,97,.12),rgba(201,169,97,.04));
  color:var(--gold);
  box-shadow:0 1px 0 rgba(201,169,97,.15) inset;
}

.auth__form{
  display:none;
  padding:28px 24px 24px;
}
.auth__form.is-active{display:block;animation:fadeUp .4s var(--ease)}

.auth__title{
  font-size:1.5rem;font-weight:500;
  letter-spacing:-.02em;
  margin-bottom:8px;
}
.auth__sub{
  font-size:.92rem;color:var(--muted);
  margin-bottom:28px;line-height:1.6;
}

.field{margin-bottom:18px}
.field label{
  display:block;
  font-size:.85rem;font-weight:500;
  color:var(--text);
  margin-bottom:8px;
}
.field__wrap{position:relative}
.field input{
  width:100%;
  padding:13px 16px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--text);
  font-size:.95rem;
  font-family:var(--font);
  transition:.3s var(--ease);
}
.field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,169,97,.12);
  background:rgba(0,0,0,.55);
}
.field input::placeholder{color:var(--muted-2)}
.field input:disabled{opacity:.55;cursor:not-allowed}

.field__eye{
  position:absolute;
  inset-inline-end:12px;top:50%;
  transform:translateY(-50%);
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  color:var(--muted);
  font-size:.9rem;
  transition:.25s var(--ease);
}
.field__eye:hover{color:var(--gold);background:rgba(201,169,97,.08)}

.field__hint{
  margin-top:6px;
  font-size:.78rem;
  color:var(--muted-2);
}

.field input[dir="ltr"]{text-align:left}
html[dir="rtl"] .field input[dir="ltr"]{text-align:left}

.checkbox{
  display:flex;align-items:flex-start;
  gap:10px;
  margin:20px 0 22px;
  cursor:pointer;
  font-size:.85rem;
  color:var(--muted);
  line-height:1.6;
}
.checkbox input{
  flex-shrink:0;
  width:18px;height:18px;
  margin-top:2px;
  accent-color:var(--gold);
  cursor:pointer;
}

.btn--full{width:100%;justify-content:center;padding:14px 20px;font-size:.95rem}

.auth__forgot{
  text-align:center;
  margin-top:16px;
}
.auth__link{
  font-size:.85rem;
  color:var(--muted);
  transition:color .25s var(--ease);
  text-decoration:underline;
  text-decoration-color:rgba(201,169,97,.3);
  text-underline-offset:3px;
}
.auth__link:hover{color:var(--gold);text-decoration-color:var(--gold)}

.auth__status{
  margin-top:16px;
  font-size:.86rem;
  min-height:20px;
  line-height:1.5;
  text-align:center;
  transition:.3s var(--ease);
}
.auth__status.is-error{color:#f87171}
.auth__status.is-success{color:var(--green)}
.auth__status.is-info{color:var(--gold)}

.auth__footer{
  margin-top:28px;
  font-size:.85rem;
  color:var(--muted);
  text-align:center;
}
.auth__footer a{
  color:var(--gold);
  margin-inline-start:6px;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (max-width:480px){
  .auth{padding:100px 16px 40px}
  .auth__form{padding:22px 18px 20px}
  .auth__title{font-size:1.3rem}
}