/* Mobile OTP Login — extends Login Studio */
.ml-steps{display:flex;gap:8px;margin:0 0 18px;justify-content:center}
.ml-step{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.78rem;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:inherit;opacity:.55
}
.ml-step.is-on{opacity:1;background:linear-gradient(135deg,rgba(20,184,166,.9),rgba(15,118,110,.95));border:0;color:#fff;box-shadow:0 8px 20px rgba(15,118,110,.35)}
.ml-step.is-done{opacity:.9;background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.4)}
.ml-pane[hidden]{display:none!important}
.ml-channels{display:grid;gap:8px;margin:4px 0 14px}
.ml-ch{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);cursor:pointer;
  font:inherit;font-weight:800;font-size:.82rem;color:inherit;text-align:right;width:100%
}
.ml-ch:hover{background:rgba(255,255,255,.09)}
.ml-ch.is-on{border-color:rgba(20,184,166,.55);background:rgba(20,184,166,.14);box-shadow:inset 0 0 0 1px rgba(20,184,166,.25)}
.ml-ch .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:0 0 auto}
.ml-ch .meta{flex:1;min-width:0}
.ml-ch .meta small{display:block;font-size:.68rem;font-weight:700;opacity:.7;margin-top:2px}
.ml-ch .radio{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);flex:0 0 auto}
.ml-ch.is-on .radio{border-color:#14b8a6;box-shadow:inset 0 0 0 4px #14b8a6}
.ml-otp{
  display:flex;gap:8px;justify-content:center;direction:ltr;margin:8px 0 16px
}
.ml-otp input{
  width:44px;height:52px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);color:inherit;text-align:center;font-size:1.25rem;font-weight:800;
  font-variant-numeric:tabular-nums
}
.ml-otp input:focus{outline:2px solid rgba(20,184,166,.55);border-color:transparent}
.ml-hint{font-size:.75rem;font-weight:700;opacity:.78;line-height:1.6;margin:0 0 12px;text-align:center}
.ml-timer{font-size:.72rem;font-weight:800;opacity:.8;text-align:center;margin:0 0 10px}
.ml-actions{display:grid;gap:8px}
.ml-ghost{
  min-height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:transparent;color:inherit;font:inherit;font-weight:800;font-size:.78rem;cursor:pointer
}
.ml-ghost:disabled{opacity:.45;cursor:not-allowed}
.ml-back{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;opacity:.85;margin-bottom:8px;cursor:pointer;background:none;border:0;color:inherit;padding:0}
@media(max-width:480px){
  .ml-otp input{width:40px;height:48px}
}
