/* ── Login Drawer ── */
#login-drawer {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: var(--feed-w); max-width: 100%;
  background: #1a1a1a; border-radius: 20px 20px 0 0;
  z-index: 200; transition: transform .35s cubic-bezier(0.32,0.72,0,1);
  overflow: hidden;
}
#login-drawer.open { transform: translateX(-50%) translateY(0); }

#login-drawer .drawer-header {
  padding: 16px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
#login-drawer .drawer-header h3 { font-size: 15px; font-weight: 700; }

.login-drawer-body { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }

.ld-step { display: none; }
.ld-step.active { display: block; }

.ld-desc { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 20px; }

.ld-field { margin-bottom: 16px; }
.ld-field input {
  width: 100%; box-sizing: border-box;
  background: var(--s2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-size: 16px; padding: 14px 16px; outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s;
}
.ld-field input:focus { border-color: var(--red); }
.ld-field input.error { border-color: #ff453a; }

.ld-btn-primary {
  width: 100%; padding: 15px; border: none; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: opacity .2s;
}
.ld-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.ld-otp-grid {
  display: flex; gap: 10px; justify-content: center; margin-bottom: 20px;
}
.ld-otp-grid input {
  width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
  background: var(--s2); border: 1.5px solid var(--border); border-radius: 10px;
  color: var(--text); outline: none; transition: border-color .2s;
  font-family: 'DM Sans', sans-serif;
}
.ld-otp-grid input:focus { border-color: var(--red); }
.ld-otp-grid input.error { border-color: #ff453a; }

.ld-erro { color: #ff453a; font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

.ld-reenviar { text-align: center; margin-top: 16px; color: var(--muted); font-size: 13px; }
.ld-reenviar button {
  background: none; border: none; color: var(--red); cursor: pointer;
  font-size: 13px; text-decoration: underline; font-family: 'DM Sans', sans-serif;
}

.ld-voltar {
  display: flex; align-items: center; gap: 6px; color: var(--muted);
  font-size: 13px; cursor: pointer; margin-bottom: 16px;
  background: none; border: none; padding: 0; font-family: 'DM Sans', sans-serif;
}
.ld-voltar:hover { color: var(--text); }

.ld-or { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; }
.ld-or a { color: var(--red); text-decoration: none; }

@media (max-width: 767px) {
  #login-drawer { width: 100vw; left: 0; transform: translateY(100%); }
  #login-drawer.open { transform: translateY(0); }
}