/* Signup-specific additions — loaded after login.css for shared vars/base */
.card{ max-width:440px; }
.card .brand{ margin-bottom:20px; }

.steps{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:26px;}
.step-dot{ width:8px; height:8px; border-radius:50%; background:var(--lg-border-hi); transition:background .2s ease, transform .2s ease;}
.step-dot.active{ background:var(--lg-accent); transform:scale(1.3);}
.step-dot.done{ background:var(--lg-accent);}

.card h1{ font-size:21px; }
.sub b{ color:var(--lg-text); font-weight:700;}
.optional{ font-weight:500; color:var(--lg-text-faint);}

.card input[type="text"], .card input[type="tel"]{
  width:100%; padding:13px 14px; border:1.5px solid var(--lg-border-hi); border-radius:var(--lg-r-md);
  font-size:15px; font-family:inherit; color:var(--lg-text); background:var(--lg-bg-card);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card input[type="text"]:focus, .card input[type="tel"]:focus{ outline:none; border-color:var(--lg-accent); box-shadow:0 0 0 3px var(--lg-accent-soft); background:var(--lg-bg);}

#otpInput{ text-align:center; font-size:24px; letter-spacing:10px; font-family:'JetBrains Mono',monospace; padding:13px 8px 13px 22px;}

.resend-btn{
  background:none; border:1px solid var(--lg-border-hi); color:var(--lg-text-dim); font-weight:600; font-size:13.5px;
  padding:10px 16px;
}
.resend-btn:hover:not(:disabled){ background:var(--lg-bg-card); color:var(--lg-text);}

.back-link{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--lg-text-dim); margin-bottom:2px; cursor:pointer;}
.back-link:hover{ color:var(--lg-text);}

.step-panel{ display:none; flex-direction:column; gap:14px;}
.step-panel.active{ display:flex;}