/* ==========================================================================
   OTP MODAL
   ========================================================================== */
.otm-scrim{
  position:fixed;inset:0;z-index:2000;
  background:rgba(10,12,17,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease, cubic-bezier(.4,0,.2,1));
}
.otm-scrim.on{ opacity:1;pointer-events:auto; }

.otm{
  position:fixed;left:50%;top:50%;z-index:2010;
  width:min(400px, calc(100vw - 32px));
  transform:translate(-50%, -44%) scale(.96);
  opacity:0;pointer-events:none;
  background:#fff;border-radius:26px;
  padding:34px 28px 26px;text-align:center;
  box-shadow:0 32px 80px -20px rgba(0,0,0,.45);
  transition:transform .34s cubic-bezier(.05,.7,.1,1), opacity .24s ease;
}
.otm.on{ transform:translate(-50%, -50%) scale(1);opacity:1;pointer-events:auto; }

.otm-x{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;border-radius:50%;
  border:none;background:var(--bg-600, #EFF1F5);
  color:var(--text-muted, #64748B);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.otm-x:active{ background:var(--bg-500, #E2E6EC); }

.otm-ico{
  width:66px;height:66px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  background:var(--accent-container, #E4EBFF);
  color:var(--accent, #264AB2);
}

.otm h2{
  font-family:var(--font-display, 'Syne'), sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:var(--text-primary, #111318);margin:0;
}
.otm-sub{
  font-size:14px;color:var(--text-muted, #64748B);
  line-height:1.6;margin:10px 0 0;
}
.otm-sub b{ color:var(--text-primary, #111318);font-weight:700;word-break:break-all; }

.otm-dev{
  margin-top:14px;padding:9px 14px;border-radius:12px;
  background:var(--yellow-container, #FFF3D6);color:#4A3000;
  font-size:12.5px;font-weight:600;
}
.otm-dev b{ font-family:monospace;font-size:15px;letter-spacing:.15em; }

/* ---------- boxes ---------- */
.otm-boxes{
  display:flex;justify-content:center;gap:12px;margin:26px 0 6px;
}
.otm-box{
  width:58px;height:66px;padding:0;
  border:2px solid var(--border-light, #D8DDE6);border-radius:16px;
  background:var(--bg-700, #F6F7FB);
  font-family:var(--font-display, 'Syne'), sans-serif;
  font-size:26px !important;font-weight:800;text-align:center;
  color:var(--text-primary, #111318);
  outline:none;
  transition:border-color .18s ease, background .18s ease,
             transform .18s ease, box-shadow .18s ease;
  -moz-appearance:textfield;
}
.otm-box::-webkit-outer-spin-button,
.otm-box::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }

.otm-box:focus{
  border-color:var(--accent, #264AB2);
  background:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(38,74,178,.16);
}
.otm-box.filled{
  border-color:var(--accent, #264AB2);
  background:var(--accent-container, #E4EBFF);
}

.otm-boxes.good .otm-box{
  border-color:var(--green, #0A6E3E);
  background:var(--green-container, #D6F5E3);
  color:var(--green, #0A6E3E);
}
.otm-boxes.shake{ animation:otmShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes otmShake{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX(4px) }
  30%,50%,70%{ transform:translateX(-7px) }
  40%,60%{ transform:translateX(7px) }
}

.otm-err{
  min-height:20px;font-size:12.5px;font-weight:700;
  color:var(--red, #B3261E);opacity:0;
  transition:opacity .2s ease;
}
.otm-err.on{ opacity:1; }

.otm-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:52px;margin-top:12px;
  border:none;border-radius:999px;
  background:var(--accent, #264AB2);color:#fff;cursor:pointer;
  font-family:var(--font-display, 'Syne'), sans-serif;
  font-size:16px;font-weight:800;
  transition:background .2s ease, transform .15s ease, opacity .2s ease;
}
.otm-btn:active{ transform:scale(.98); }
.otm-btn:disabled{
  background:var(--bg-600, #EFF1F5);
  color:var(--text-muted, #94A3B8);cursor:default;
}
.otm-btn.done{ background:var(--green, #0A6E3E); }

.otm-foot{ margin-top:18px;min-height:22px; }
.otm-foot span{ font-size:12.5px;color:var(--text-muted, #64748B);font-weight:600; }
.otm-foot span b{ color:var(--text-primary, #111318);font-variant-numeric:tabular-nums; }
.otm-foot button{
  border:none;background:none;cursor:pointer;padding:4px 8px;
  font-size:13px;font-weight:800;color:var(--accent, #264AB2);
}
.otm-foot button:active{ opacity:.6; }

@media (max-width:400px){
  .otm{ padding:30px 20px 22px; }
  .otm-boxes{ gap:9px; }
  .otm-box{ width:52px;height:60px;font-size:23px !important; }
}

.otm-hint{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:2px 0 0;padding:9px 12px;border-radius:10px;
  background:var(--bg-700, #F6F7FB);
  font-size:11.5px;font-weight:600;color:var(--text-muted, #64748B);
}
.otm-hint b{ color:var(--text-secondary, #475569); }