.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:360px;
  padding:32px 30px 26px;
  text-align:center;
}

.login-card h1{
  font-size:16.5px;
  font-weight:700;
  margin-bottom:6px;
}
.login-card .sub{
  font-size:12.5px;
  color:var(--ink-muted);
  margin-bottom:22px;
}

.phone-field{ text-align:right; }
.phone-field label{
  display:block;
  font-size:12.5px;
  color:var(--ink-muted);
  margin-bottom:7px;
}
.phone-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:11px 14px;
  font-size:15px;
  color:var(--ink);
  text-align:center;
  letter-spacing:1px;
  direction:ltr;
  transition:border-color .15s ease;
}
.phone-input::placeholder{color:var(--ink-faint);letter-spacing:1px;}
.phone-input:hover{border-color:var(--border-hover);}
.phone-input:focus{
  outline:none;
  border-color:var(--accent);
}
.phone-input.shake{animation:shake .3s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

/* پنل راهنما — کاملاً CSS، بدون جاواسکریپت، بدون باگ فوکوس/بلور */
.phone-hint{
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
  font-size:12px;
  line-height:1.9;
  color:var(--ink-muted);
  text-align:right;
}
.phone-input:focus + .phone-hint,
.phone-field:focus-within .phone-hint{
  max-height:70px;
  opacity:1;
  margin-top:10px;
}
.phone-hint b{color:var(--accent);font-weight:600;}

.confirm-wrap{
  margin-top:26px;
  display:flex;
  justify-content:center;
}
.btn-confirm{
  padding:9px 30px;
  font-size:13.5px;
}

.login-footnote{
  margin-top:20px;
  font-size:11px;
  color:var(--ink-faint);
  line-height:1.8;
}