/* =========================
   Auth Form Fields (FIXED)
========================= */

.form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

@media (min-width:640px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0; /* prevents overflow on mobile */
}

.field > span{
  font-size:.85rem;
  font-weight:900;
  color:var(--white-70);
}

.field input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.12);
  color:var(--white-90);
  font-weight:700;
  outline:none;
}

html[data-theme="light"] .field input{
  background:rgba(0,0,0,.04);
}

.field input:focus{
  border-color:rgba(106,169,255,.65);
  box-shadow:0 0 0 2px rgba(106,169,255,.15);
}

/* =========================
   Auth Header / Footer
========================= */

.auth-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.auth-head .pill{
  flex:0 0 auto;
}

.auth-footer{
  margin-top:14px;
  font-size:.85rem;
  text-align:center;
}

/* =========================
   Muted / Helpers
========================= */

.muted{
  color:var(--muted);
  font-size:.9rem;
  line-height:1.35;
}

/* =========================
   Ghost Button Variant
========================= */

.btn.ghost{
  background:transparent;
  border:1px dashed var(--border);
  color:var(--white-70);
}

.btn.ghost:hover{
  border-color:rgba(106,169,255,.55);
  color:var(--white-90);
}

/* =========================
   Auth Card Tweaks
========================= */

.auth-card{
  padding:18px;
}

.auth-card .h1{
  font-size:20px;
}

/* =========================
   Auth Actions Row (MOBILE SAFE)
========================= */

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
}

.actions .btn{
  flex:1 1 180px;  /* prevents tiny squeezed buttons */
  min-width:140px;
  justify-content:center;
}

@media (max-width:420px){
  .actions .btn{
    flex:1 1 100%;
    min-width:0;
  }
}