:root {
  --asa-otp-ink: var(--asa-ink, var(--ink, var(--wp--preset--color--ink, #1b1f3b)));
  --asa-otp-primary: var(--asa-primary, var(--primary, var(--wp--preset--color--primary, #5b85b3)));
  --asa-otp-sky: var(--asa-accent, var(--sky, var(--wp--preset--color--sky, #5ba8f5)));
  --asa-otp-violet: var(--asa-growth, var(--violet, #9b6cf6));
  --asa-otp-accent: var(--asa-warm, var(--amber, var(--wp--preset--color--amber, #f7b955)));
  --asa-otp-surface: var(--asa-surface, var(--bg, var(--wp--preset--color--white, #fff)));
}

html.asa-otp-open,
html.asa-otp-open body { overflow: hidden !important; }

.asa-otp[hidden], .asa-otp [hidden] { display: none !important; }
.asa-otp {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 36px);
  direction: rtl;
  font-family: inherit;
  color: var(--asa-otp-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.asa-otp.is-open { opacity: 1; visibility: visible; }
.asa-otp__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(169,216,236,.34), transparent 35%),
    radial-gradient(circle at 82% 78%, rgba(169,153,214,.3), transparent 37%),
    rgba(13,23,43,.72);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.asa-otp__dialog {
  position: relative;
  isolation: isolate;
  width: min(960px, 100%);
  max-height: min(760px, calc(100dvh - 28px));
  display: grid;
  grid-template-columns: minmax(330px, .92fr) minmax(390px, 1.08fr);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: clamp(25px, 4vw, 42px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 35px 100px rgba(7,21,46,.32), 0 8px 30px rgba(61,92,132,.16), inset 0 1px 0 #fff;
  transform: translateY(24px) scale(.965) rotateX(3deg);
  transform-origin: 50% 20%;
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.82,.2,1), opacity .28s ease;
  outline: none;
}
.asa-otp__dialog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.58), transparent 30% 70%, rgba(169,216,236,.18));
}
.asa-otp.is-open .asa-otp__dialog { transform: none; opacity: 1; }
.asa-otp__close {
  position: absolute;
  inset: 18px 18px auto auto;
  z-index: 8;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #334361;
  border: 1px solid rgba(83,110,145,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 8px 25px rgba(49,76,112,.12);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.asa-otp__close:hover { transform: rotate(5deg) scale(1.06); background: #fff; box-shadow: 0 12px 28px rgba(49,76,112,.2); }
.asa-otp__close:focus-visible, .asa-otp button:focus-visible, .asa-otp input:focus-visible { outline: 3px solid rgba(95,134,180,.28); outline-offset: 3px; }
.asa-otp__close svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.asa-otp__visual {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(95,134,180,.98), rgba(109,107,168,.96)),
    var(--asa-otp-primary);
  perspective: 1100px;
}
.asa-otp__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: perspective(500px) rotateX(64deg) scale(1.6) translateY(24%);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, #000, transparent 78%);
}
.asa-otp__visual::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  top: -170px;
  border: 80px solid rgba(255,255,255,.07);
  border-radius: 50%;
}
.asa-otp__visual-brand { position:absolute; z-index:7; inset:24px 25px auto 25px; display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.78); font-size:9px; font-weight:900; letter-spacing:.16em; }
.asa-otp__visual-brand i { width:8px; height:8px; border:2px solid rgba(255,255,255,.85); border-radius:50%; background:#65dcb3; box-shadow:0 0 0 5px rgba(101,220,179,.15),0 0 18px rgba(101,220,179,.75); animation:asaOtpOnline 2s ease-in-out infinite; }
.asa-otp__visual-copy { position:absolute; z-index:7; right:28px; left:28px; bottom:27px; padding:16px 18px; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(18,37,73,.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.asa-otp__visual-copy strong,.asa-otp__visual-copy span { display:block; }
.asa-otp__visual-copy strong { margin-bottom:3px; font-size:14px; font-weight:900; }
.asa-otp__visual-copy span { color:rgba(255,255,255,.76); font-size:10.5px; line-height:1.8; }
.asa-otp-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: asaOtpScene 6s ease-in-out infinite;
}
.asa-otp-glow {
  position: absolute;
  width: 280px;
  height: 90px;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%) rotateX(72deg);
  border-radius: 50%;
  background: rgba(183,234,255,.5);
  filter: blur(28px);
  animation: asaOtpGlow 3s ease-in-out infinite;
}
.asa-otp-phone {
  position: absolute;
  z-index: 4;
  width: 176px;
  height: 340px;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform: translate3d(-50%,-50%,60px) rotateY(-17deg) rotateX(7deg) rotateZ(3deg);
  border: 7px solid #17213c;
  border-radius: 32px;
  background: #18243d;
  box-shadow: 28px 34px 48px rgba(7,16,38,.35), inset 0 0 0 2px rgba(255,255,255,.12);
  animation: asaOtpPhone 4.8s ease-in-out infinite;
}
.asa-otp-phone__edge {
  position: absolute;
  inset: 7px -14px -10px 9px;
  z-index: -1;
  border-radius: 31px;
  background: linear-gradient(90deg, #111a2e, #334560);
  transform: translateZ(-16px);
}
.asa-otp-phone__screen {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 12%, rgba(255,255,255,.58), transparent 25%),
    linear-gradient(160deg, #e9fbff 0%, #c8e5f2 42%, #c7c0e5 100%);
  box-shadow: inset 0 0 35px rgba(65,100,135,.2);
}
.asa-otp-phone__screen::after {
  content: "";
  position: absolute;
  inset: -40% 45% -40% -40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(12deg);
  animation: asaOtpShine 4s ease-in-out infinite;
}
.asa-otp-phone__speaker { position: absolute; top: 10px; width: 46px; height: 5px; border-radius: 10px; background: #1b2741; }
.asa-otp-shield { position: relative; width: 92px; height: 104px; filter: drop-shadow(0 15px 20px rgba(56,83,119,.25)); animation: asaOtpShield 2.5s ease-in-out infinite; }
.asa-otp-shield svg { width: 100%; overflow: visible; }
.asa-otp-shield path:first-child { fill: rgba(255,255,255,.86); stroke: var(--asa-otp-primary); stroke-width: 3; }
.asa-otp-shield path:last-child { fill: none; stroke: var(--asa-otp-accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; animation: asaOtpCheck 2.5s ease-in-out infinite; }
.asa-otp-phone__digits { display: flex; gap: 7px; direction: ltr; }
.asa-otp-phone__digits b { width: 15px; height: 20px; display: grid; place-items: center; color: #fff; border-radius: 5px; background: rgba(69,94,134,.88); font-size: 16px; line-height: 1; box-shadow: 0 4px 8px rgba(36,53,87,.15); animation: asaOtpDigit 1.8s ease-in-out infinite; }
.asa-otp-phone__digits b:nth-child(2) { animation-delay: .1s; }.asa-otp-phone__digits b:nth-child(3) { animation-delay: .2s; }.asa-otp-phone__digits b:nth-child(4) { animation-delay: .3s; }.asa-otp-phone__digits b:nth-child(5) { animation-delay: .4s; }.asa-otp-phone__digits b:nth-child(6) { animation-delay: .5s; }
.asa-otp-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; transform-style: preserve-3d; }
.asa-otp-orbit--one { width: 315px; height: 315px; transform: translate(-50%,-50%) rotateX(67deg) rotateZ(18deg); animation: asaOtpOrbitOne 10s linear infinite; }
.asa-otp-orbit--two { width: 245px; height: 245px; transform: translate(-50%,-50%) rotateY(70deg) rotateZ(-15deg); animation: asaOtpOrbitTwo 8s linear infinite reverse; }
.asa-otp-orbit i { position: absolute; width: 13px; height: 13px; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; background: var(--asa-otp-accent); box-shadow: 0 0 18px rgba(255,255,255,.6); }
.asa-otp-orbit i:nth-child(1) { left: 12%; top: 12%; }.asa-otp-orbit i:nth-child(2) { right: 8%; top: 45%; background: #bde9f8; }.asa-otp-orbit i:nth-child(3) { left: 33%; bottom: -5px; background: #d7cff3; }
.asa-otp-packet { position: absolute; z-index: 6; display: grid; place-items: center; width: 66px; height: 54px; border: 1px solid rgba(255,255,255,.68); border-radius: 17px; color: #526f9b; background: rgba(255,255,255,.88); box-shadow: 0 18px 30px rgba(12,31,67,.22); transform-style: preserve-3d; }
.asa-otp-packet--one { left: 35px; top: 92px; transform: translateZ(90px) rotate(-9deg); animation: asaOtpPacketOne 4s ease-in-out infinite; }
.asa-otp-packet--two { right: 32px; bottom: 90px; transform: translateZ(110px) rotate(8deg); animation: asaOtpPacketTwo 4.4s ease-in-out infinite; }
.asa-otp-packet span { font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.asa-otp-packet svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.asa-otp__content { min-width: 0; padding: clamp(42px, 5vw, 62px) clamp(28px, 5vw, 62px) 34px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,250,254,.96)); }
.asa-otp__topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.asa-otp__eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #5d78a1; font-size: 13px; font-weight: 800; }
.asa-otp__topline .asa-otp__eyebrow { margin:0; }
.asa-otp__eyebrow span { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--asa-otp-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--asa-otp-accent) 18%, transparent); }
.asa-otp__context { max-width:190px; padding:6px 9px; display:flex; align-items:center; gap:5px; color:#607798; border:1px solid rgba(95,134,180,.12); border-radius:999px; background:rgba(238,246,252,.78); font-size:9.5px; font-weight:800; white-space:nowrap; overflow:hidden; }
.asa-otp__context svg { flex:0 0 15px; width:15px; fill:none; stroke:#5a83b1; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.asa-otp__context span { overflow:hidden; text-overflow:ellipsis; }
.asa-otp__steps { position:relative; margin:0 0 19px; padding:0; display:flex; justify-content:space-between; list-style:none; }
.asa-otp__steps::before { content:""; position:absolute; z-index:0; top:13px; right:11%; left:11%; height:2px; background:#e4eaf1; }
.asa-otp__steps::after { content:""; position:absolute; z-index:0; top:13px; right:11%; width:39%; height:2px; background:linear-gradient(90deg,#7d74ae,#5f88b5); transition:width .5s ease; }
.asa-otp[data-asa-otp-phase="success"] .asa-otp__steps::after { width:78%; }
.asa-otp__steps li { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:5px; color:#8d98aa; font-size:9px; }
.asa-otp__steps li span { width:27px; height:27px; display:grid; place-items:center; border:2px solid #e3e9f0; border-radius:50%; background:#f9fbfd; font-size:10px; font-weight:900; transition:.3s ease; }
.asa-otp__steps li b { font-weight:800; }
.asa-otp__steps li.is-active { color:#506f99; }
.asa-otp__steps li.is-active span { color:#fff; border-color:#fff; background:linear-gradient(145deg,#5f88b5,#7c73ad); box-shadow:0 0 0 5px rgba(95,134,180,.11),0 7px 16px rgba(76,104,151,.2); transform:translateY(-1px); }
.asa-otp__steps li.is-complete { color:#248366; }
.asa-otp__steps li.is-complete span { color:#fff; border-color:#fff; background:#39a47f; box-shadow:0 0 0 4px rgba(57,164,127,.1); }
.asa-otp__content h2 { margin: 0; color: var(--asa-otp-ink); font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.45; letter-spacing: -.03em; }
.asa-otp__content > p { margin: 12px 0 0; color: #61708b; font-size: 14px; line-height: 2; }
.asa-otp__phone { width:100%; margin-top:14px; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid rgba(95,134,180,.14); border-radius:13px; color:#48658e !important; background:rgba(169,216,236,.16); font-size:11.5px; font-weight:750; }
.asa-otp__phone bdi { display: inline-block; direction: ltr; unicode-bidi: isolate; letter-spacing: .03em; }
.asa-otp__phone button { flex:0 0 auto; padding:5px 8px; color:#4f719e; border:1px solid rgba(95,134,180,.16); border-radius:8px; background:rgba(255,255,255,.74); font:800 10px/1.5 inherit; cursor:pointer; transition:.2s ease; }
.asa-otp__phone button:hover { color:#fff; border-color:transparent; background:#5f86b4; transform:translateY(-1px); }
.asa-otp__loader { min-height:142px; margin-top:17px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; color:#61708b; }
.asa-otp__loader-radar { position:relative; width:72px; height:72px; display:grid; place-items:center; }
.asa-otp__loader-radar i { position:absolute; inset:0; border:1px solid rgba(95,134,180,.32); border-radius:50%; animation:asaOtpRadar 1.8s ease-out infinite; }
.asa-otp__loader-radar i:nth-child(2) { animation-delay:.55s; }.asa-otp__loader-radar i:nth-child(3) { animation-delay:1.1s; }
.asa-otp__loader-radar svg { position:relative; z-index:2; width:28px; padding:10px; box-sizing:content-box; color:#fff; border-radius:16px; background:linear-gradient(145deg,#5f89b7,#7c72ad); box-shadow:0 12px 25px rgba(78,105,153,.28); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.asa-otp__loader b { margin-top:5px; text-align:center; font-size:12.5px; font-weight:800; }
.asa-otp__loader small { color:#8a96a9; font-size:9.5px; font-weight:650; }
.asa-otp__entry { margin-top: 24px; }
.asa-otp__entry-head { margin-bottom:11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.asa-otp__entry-head strong { color:#384862; font-size:11.5px; font-weight:850; }
.asa-otp__entry-head span { padding:4px 8px; color:#7b699d; border-radius:8px; background:rgba(155,108,246,.08); font-size:9.5px; font-weight:800; }
.asa-otp__digits { display: flex; justify-content: center; gap: clamp(5px, 1vw, 9px); }
.asa-otp__digits input { box-sizing: border-box; width: clamp(38px, 5.3vw, 49px); height: clamp(50px, 6.7vw, 62px); padding: 0; text-align: center; color: #243554; caret-color: var(--asa-otp-accent); border: 1.5px solid rgba(89,119,158,.22); border-radius: 15px; background: #fff; box-shadow: 0 8px 22px rgba(64,91,128,.08), inset 0 1px 0 #fff; font: 900 clamp(20px, 3vw, 27px)/1 inherit; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.asa-otp__digits input:hover { border-color: rgba(95,134,180,.42); }
.asa-otp__digits input:focus { transform: translateY(-3px); border-color: var(--asa-otp-primary); background: #fafdff; box-shadow: 0 13px 25px rgba(66,103,150,.14), 0 0 0 4px rgba(95,134,180,.1); outline: 0; }
.asa-otp__digits input.has-value { color: #fff; border-color: transparent; background: linear-gradient(145deg, #628ab7, #7b72ae); box-shadow: 0 11px 24px rgba(83,105,156,.24); }
.asa-otp__feedback { min-height: 26px; margin: 10px 0 2px; color: #66758d; text-align: center; font-size: 12.5px; font-weight: 700; line-height: 1.8; }
.asa-otp__feedback.is-error { color: #b53c3c; }.asa-otp__feedback.is-success { color: #16805c; }
.asa-otp__verify { width:100%; min-height:52px; padding:11px 20px; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; border:0; border-radius:16px; background:linear-gradient(105deg,var(--asa-otp-primary),#7770ac 72%,#8c78bb); box-shadow:0 14px 30px rgba(84,105,158,.25),inset 0 1px 0 rgba(255,255,255,.26); font:850 15px/1.6 inherit; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.asa-otp__verify svg { width:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.asa-otp__verify:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(84,105,158,.33); filter: saturate(1.08); }.asa-otp__verify:disabled { cursor: wait; opacity: .68; }
.asa-otp__resend { min-height:48px; margin-top:11px; padding:6px 10px; display:flex; align-items:center; justify-content:center; gap:10px; color:#7a879c; border:1px solid rgba(95,134,180,.1); border-radius:13px; background:rgba(247,250,253,.75); font-size:10px; }
.asa-otp__resend>div:last-child { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.asa-otp__countdown-ring { --asa-otp-progress:1; flex:0 0 35px; width:35px; height:35px; padding:3px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--asa-otp-primary) calc(var(--asa-otp-progress) * 1turn),#e3e9ef 0); }
.asa-otp__countdown-ring::before { content:""; grid-area:1/1; width:27px; height:27px; border-radius:50%; background:#fff; }
.asa-otp__countdown-ring span { position:relative; z-index:1; grid-area:1/1; color:#526e94; font-size:9px; font-weight:900; }
.asa-otp__resend button { padding: 5px 7px; color: #526f9b; border: 0; border-radius: 8px; background: transparent; font: 800 12px/1.5 inherit; cursor: pointer; }.asa-otp__resend button:hover:not(:disabled) { background: rgba(95,134,180,.1); }.asa-otp__resend button:disabled { color: #9ba5b5; cursor: default; }
.asa-otp__success { min-height:220px; margin-top:17px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.asa-otp__success>div { width:76px; height:76px; display:grid; place-items:center; border-radius:26px; background:linear-gradient(145deg,rgba(83,192,150,.13),rgba(169,216,236,.2)); box-shadow:0 14px 35px rgba(47,137,104,.13); transform:rotate(-4deg); animation:asaOtpSuccessCard .6s cubic-bezier(.2,.9,.2,1) both; }
.asa-otp__success svg { width:55px; overflow:visible; fill:none; stroke:#2da378; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.asa-otp__success svg circle { stroke-dasharray:150; animation:asaOtpSuccessCircle .7s ease both; }.asa-otp__success svg path { stroke-dasharray:34; animation:asaOtpSuccessCheck .45s .35s ease both; }
.asa-otp__success strong { margin-top:16px; color:#247c60; font-size:19px; font-weight:900; }.asa-otp__success span { margin-top:5px; color:#748299; font-size:11.5px; font-weight:700; }
.asa-otp__trust { margin-top:18px; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; }
.asa-otp__trust span { padding:5px 8px; display:flex; align-items:center; gap:6px; color:#6c7890; border:1px solid rgba(95,134,180,.12); border-radius:999px; background:rgba(240,246,251,.7); font-size:9.5px; font-weight:700; }
.asa-otp__trust i { width:6px; height:6px; border-radius:50%; background:#55b99a; box-shadow:0 0 0 3px rgba(85,185,154,.12); }
.asa-otp.is-verified .asa-otp-shield path:last-child { stroke: #2eb78b; }.asa-otp.is-verified .asa-otp__dialog { box-shadow: 0 35px 100px rgba(7,21,46,.32), 0 0 0 4px rgba(46,183,139,.11); }
.asa-otp[data-asa-otp-phase="error"] .asa-otp__dialog { box-shadow:0 35px 100px rgba(7,21,46,.32),0 0 0 4px rgba(190,65,65,.08); }
.asa-otp-noscript { padding: 12px; color: #7a2020; border: 1px solid #e8b5b5; background: #fff3f3; text-align: center; }

@keyframes asaOtpScene { 0%,100% { transform: rotateY(-1.5deg) translateY(0); } 50% { transform: rotateY(1.5deg) translateY(-5px); } }
@keyframes asaOtpPhone { 0%,100% { transform: translate3d(-50%,-50%,60px) rotateY(-17deg) rotateX(7deg) rotateZ(3deg); } 50% { transform: translate3d(-50%,calc(-50% - 11px),78px) rotateY(-11deg) rotateX(4deg) rotateZ(1deg); } }
@keyframes asaOtpGlow { 0%,100% { opacity: .55; transform: translateX(-50%) rotateX(72deg) scale(.88); } 50% { opacity: .9; transform: translateX(-50%) rotateX(72deg) scale(1.08); } }
@keyframes asaOtpOrbitOne { to { transform: translate(-50%,-50%) rotateX(67deg) rotateZ(378deg); } }
@keyframes asaOtpOrbitTwo { to { transform: translate(-50%,-50%) rotateY(70deg) rotateZ(345deg); } }
@keyframes asaOtpShield { 0%,100% { transform: translateZ(12px) scale(1); } 50% { transform: translateZ(24px) scale(1.04); } }
@keyframes asaOtpCheck { 0%,25% { stroke-dashoffset: 40; } 45%,100% { stroke-dashoffset: 0; } }
@keyframes asaOtpDigit { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-3px); } }
@keyframes asaOtpShine { 0%,30% { transform: translateX(-100%) rotate(12deg); } 70%,100% { transform: translateX(330%) rotate(12deg); } }
@keyframes asaOtpPacketOne { 0%,100% { transform: translate3d(0,0,90px) rotate(-9deg); } 50% { transform: translate3d(13px,-14px,120px) rotate(-3deg); } }
@keyframes asaOtpPacketTwo { 0%,100% { transform: translate3d(0,0,110px) rotate(8deg); } 50% { transform: translate3d(-11px,-16px,140px) rotate(2deg); } }
@keyframes asaOtpLoader { 0%,100% { transform: translateY(0) scale(.82); opacity: .55; } 50% { transform: translateY(-7px) scale(1); opacity: 1; } }
@keyframes asaOtpOnline { 0%,100% { opacity:.6; transform:scale(.85); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes asaOtpRadar { 0% { transform:scale(.4); opacity:0; } 25% { opacity:.75; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes asaOtpSuccessCard { from { opacity:0; transform:translateY(12px) rotate(-10deg) scale(.75); } to { opacity:1; transform:rotate(-4deg) scale(1); } }
@keyframes asaOtpSuccessCircle { from { stroke-dashoffset:150; } to { stroke-dashoffset:0; } }
@keyframes asaOtpSuccessCheck { from { stroke-dashoffset:34; } to { stroke-dashoffset:0; } }

@media (max-width: 760px) {
  .asa-otp { padding: 10px; align-items: center; }
  .asa-otp__dialog { grid-template-columns: 1fr; width: min(520px, 100%); overflow-y: auto; border-radius: 28px; }
  .asa-otp__visual { min-height: 190px; }
  .asa-otp-scene { transform: scale(.62); transform-origin: center center; }
  .asa-otp-phone { width: 145px; height: 275px; }
  .asa-otp-orbit--one { width: 330px; height: 330px; }
  .asa-otp__visual-brand { inset:14px 17px auto; }
  .asa-otp__visual-copy { right:15px; left:15px; bottom:12px; padding:9px 12px; text-align:right; border-radius:13px; }
  .asa-otp__visual-copy strong { font-size:11px; }.asa-otp__visual-copy span { display:none; }
  .asa-otp__content { padding: 25px 20px 22px; text-align: center; }
  .asa-otp__topline { margin-top:4px; justify-content:center; flex-wrap:wrap; }
  .asa-otp__eyebrow { justify-content: center; }
  .asa-otp__steps { margin-bottom:15px; }
  .asa-otp__content > p { margin-inline: auto; }
  .asa-otp__close { inset: 12px 12px auto auto; color: #fff; border-color: rgba(255,255,255,.3); background: rgba(20,37,68,.32); }
  .asa-otp__entry { margin-top: 18px; }
  .asa-otp__digits { gap: 5px; }
  .asa-otp__digits input { width: clamp(31px, 10vw, 43px); height: clamp(46px, 13vw, 56px); border-radius: 12px; }
  .asa-otp__trust { margin-top: 15px; }
}

@media (max-width: 390px) {
  .asa-otp__content { padding-inline: 14px; }
  .asa-otp__digits { gap: 3px; }
  .asa-otp__digits input { width: min(10.1vw, 38px); height: 48px; border-radius: 10px; font-size: 20px; }
  .asa-otp__trust span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .asa-otp *, .asa-otp *::before, .asa-otp *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

@media (prefers-contrast: more) {
  .asa-otp__dialog, .asa-otp__digits input { border-color: #243554; }
  .asa-otp__content > p, .asa-otp__feedback, .asa-otp__resend { color: #35435c; }
}