/* auth.css — login modal */

#auth-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0); z-index:600;
  pointer-events:none; transition:background 0.3s;
}
#auth-overlay.active { background:rgba(0,0,0,0.6); pointer-events:all; }

#auth-modal {
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--white);
  border-radius:20px 20px 0 0;
  z-index:610;
  padding:28px 24px 40px;
  transform:translateY(100%);
  transition:transform 0.38s var(--ease-slide);
  max-width:480px; margin:0 auto;
}
#auth-modal.open { transform:translateY(0); }

#auth-close {
  position:absolute; top:16px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:var(--light); display:flex; align-items:center; justify-content:center;
}

#auth-logo {
  font-family:var(--font-ui); font-size:0.8rem;
  font-weight:800; letter-spacing:0.2em;
  color:var(--mid); margin-bottom:16px;
}

#auth-title {
  font-family:var(--font-display);
  font-size:1.7rem; font-weight:900;
  color:var(--ink); margin-bottom:4px;
}

#auth-sub { font-size:0.82rem; color:var(--mid); margin-bottom:22px; }

.auth-field { margin-bottom:14px; }
.auth-field label {
  display:block; font-size:0.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--mid); margin-bottom:5px;
}
.auth-field input {
  width:100%; padding:11px 14px;
  border:1.5px solid var(--border); border-radius:10px;
  font-size:0.95rem; color:var(--ink);
  background:var(--bg); transition:border-color 0.15s;
}
.auth-field input:focus { border-color:var(--active); }

#auth-submit {
  width:100%; padding:13px;
  background:var(--ink); color:#fff;
  font-family:var(--font-ui); font-size:0.85rem;
  font-weight:700; letter-spacing:0.06em;
  border-radius:10px; margin-top:6px;
  transition:opacity 0.15s;
}
#auth-submit:active { opacity:0.8; }

#auth-note {
  font-size:0.65rem; color:#bbb; text-align:center;
  margin-top:10px;
}
#auth-note code { background:var(--light); padding:2px 5px; border-radius:4px; color:var(--mid); }

#auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:18px 0 14px;
}
#auth-divider::before, #auth-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}
#auth-divider span { font-size:0.65rem; color:var(--mid); white-space:nowrap; }

#auth-socials { display:flex; gap:10px; }
.social-btn {
  flex:1; padding:10px; border:1.5px solid var(--border);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:0.8rem; font-weight:600;
  transition:background 0.15s;
}
.social-btn:active { background:var(--light); }