/* Adapted from the supplied otp-verification.html; brand palette and six-digit API contract. */
.otp-view {
      color-scheme: light;
      --ink: #14231C;
      --muted: #5C6660;
      --blue: #0E5C41;
      --green: #12855E;
      --ease: cubic-bezier(.22, 1, .36, 1);
      --fill-duration: 320ms;
    }
.otp-view * { box-sizing: border-box; }
.otp-view [hidden] { display: none !important; }
.otp-view button, .otp-view input { font: inherit; }
.otp-view button { -webkit-tap-highlight-color: transparent; }
.otp-view .demo { width: min(100%, 352px); }
.otp-view .otp-card {
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 440px;
      padding: 33px 28px 34px;
      border: 1px solid rgba(255, 255, 255, .86);
      border-radius: 23px;
      background: linear-gradient(180deg, rgba(242, 243, 245, .82), #fff 43%);
      box-shadow: 0 18px 48px rgba(29, 43, 67, .045), 0 2px 6px rgba(29, 43, 67, .018);
      text-align: center;
    }
.otp-view .icon-tile {
      position: relative;
      display: grid;
      place-items: center;
      width: 108px;
      height: 108px;
      margin: 0 auto 16px;
      border-radius: 27px;
      background: linear-gradient(145deg, rgba(234, 239, 248, .58), rgba(229, 237, 251, .8));
      box-shadow: 0 5px 30px rgba(66, 111, 185, .075);
    }
.otp-view .icon-tile::before {
      content: "";
      position: absolute;
      inset: -10px;
      z-index: -1;
      border-radius: 34px;
      background: #E3F0E9;
      filter: blur(14px);
    }
.otp-view .lock-icon { width: 57px; height: 65px; animation: float-lock 2.8s ease-in-out infinite; }
.otp-view .header-finish { position: relative; width: 64px; height: 72px; }
.otp-view .unlock-icon { position: absolute; inset: 0; width: 64px; height: 72px; animation: header-unlock 2.8s linear infinite; }
.otp-view .unlock-shackle { transform-origin: 21px 27px; animation: shackle-peel 2.8s linear infinite; }
.otp-view .unlock-body { animation: body-round 2.8s linear infinite; }
.otp-view .header-orb { position: absolute; top: 14px; left: 10px; width: 44px; height: 44px; border-radius: 50%; background: #B98A2E; animation: header-color 2.8s linear infinite; }
.otp-view .header-orb::before { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #455b5c; animation: header-highlight 2.8s linear infinite; }
.otp-view .header-check { position: absolute; inset: 8px; width: 28px; height: 28px; }
.otp-view .header-check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: header-tick 2.8s linear infinite; }
.otp-view .header-spark { position: absolute; left: 30.5px; top: 34.5px; width: 3px; height: 3px; border-radius: 50%; background: #12855E; animation: header-burst 2.8s linear infinite; }
.otp-view h1 { margin: 0 0 9px; font-size: 21px; font-weight: 720; letter-spacing: -.75px; }
.otp-view .subtitle { min-height: 38px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; transition: opacity .16s; }
.otp-view .subtitle.is-changing { opacity: 0; }
.otp-view .code-stage { position: relative; display: grid; place-items: center; height: 112px; margin-top: 20px; }
.otp-view .digits {
      --step: 67px;
      position: relative;
      display: flex;
      gap: 20px;
      width: max-content;
      border: 0;
      padding: 0;
      margin: 0;
      transition: opacity .25s, transform .4s var(--ease);
    }
.otp-view .track { position: absolute; top: 23px; left: 23px; right: 23px; height: 7px; border-radius: 9px; background: #e0e3e9; box-shadow: inset 0 1px 2px #cdd2dc; transition: transform .18s, opacity .18s; }
.otp-view .track-fill { position: relative; overflow: hidden; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(180deg, #8DCCAD, #0E5C41); box-shadow: 0 2px 5px #2d8aeb40; transition: width .3s var(--ease) .04s; }
.otp-view .track-fill::after { content: ""; position: absolute; inset: 0; width: 200%; background: repeating-linear-gradient(100deg, transparent 0 13px, #c4ebff85 17px, transparent 23px 34px); animation: pipe-flow 1.25s linear infinite; }
.otp-view .digit {
      --fill-delay: 0ms;
      position: relative;
      width: 47px;
      height: 52px;
      z-index: 1;
      overflow: hidden;
      border: 1px solid #e1e4e9;
      border-bottom-color: #81bde4;
      border-radius: 13px;
      background: linear-gradient(180deg, #fff, #fff 85%, #f1f8fe);
      box-shadow: 0 1px 3px #17263d0c, 0 2px 1px #369bd51a, inset 0 1px 2px #fff;
      transition: border-color .2s, box-shadow .2s, transform .3s var(--ease);
    }
.otp-view .digit::before {
      content: "";
      position: absolute;
      z-index: 3;
      inset: 2px 3px auto;
      height: 12px;
      border-radius: 50%;
      background: linear-gradient(180deg, #fff, #ffffff55);
      opacity: .65;
      pointer-events: none;
      transition: opacity .25s;
    }
.otp-view .liquid-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 1; }
.otp-view .liquid {
      position: absolute;
      inset: 5px 0 -1px;
      background: linear-gradient(180deg, #6EBE9B 0%, #12855E 34%, #0E5C41 100%);
      box-shadow: inset 3px 0 4px #ffffff45, inset -3px -3px 5px #125cc036;
      transform: translateY(calc(100% - 1px));
      transition: transform .32s ease-in;
      will-change: transform;
    }
.otp-view .liquid::before, .otp-view .liquid::after {
      content: "";
      position: absolute;
      top: -7px;
      left: 0;
      width: 200%;
      height: 14px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7Q15 1 30 7T60 7T90 7T120 7V14H0Z' fill='%236EBE9B'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
      animation: wave-flow 1.4s linear infinite;
      animation-play-state: running;
    }
.otp-view .liquid::before { top: -9px; opacity: .45; animation-direction: reverse; animation-duration: 1.9s; }
.otp-view .bubble {
      position: absolute;
      bottom: -7px;
      width: 5px;
      height: 5px;
      border: 1px solid #c7ebff6e;
      border-radius: 50%;
      background: #b8e1ff70;
      box-shadow: inset 0 1px 2px #eaffff80;
      animation: bubble-rise 1.65s linear infinite;
      animation-play-state: paused;
    }
.otp-view .bubble:nth-child(1) { left: 7px; animation-delay: -.7s; }
.otp-view .bubble:nth-child(2) { right: 7px; width: 7px; height: 7px; animation-delay: -1.2s; animation-duration: 2.1s; }
.otp-view .bubble:nth-child(3) { left: 21px; width: 3px; height: 3px; animation-delay: -.3s; animation-duration: 1.4s; }
.otp-view .bubble:nth-child(4) { left: 13px; width: 4px; height: 4px; animation-delay: -1.8s; animation-duration: 2.4s; }
.otp-view .digit.is-filled {
      border-color: #4B9C78;
      border-bottom-color: #12855E;
      box-shadow: inset 2px 0 3px #ffffff4d, inset -3px 0 5px #125cc036, 0 2px 4px #2878e52b;
    }
.otp-view .digit.is-filled .liquid { transform: translateY(0); transition: transform var(--fill-duration) cubic-bezier(.35, .05, .2, 1) var(--fill-delay); }
.otp-view .digit.is-filled .liquid::before, .otp-view .digit.is-filled .liquid::after, .otp-view .digit.is-filled .bubble { animation-play-state: running; }
.otp-view .digit.is-filled::before { opacity: .95; }
.otp-view .digit:focus-within, .otp-view .digit.is-demo-focus { border-color: #0E5C41; box-shadow: 0 0 0 3px #c3d6e854, 0 2px 2px #498fc647; transform: translateY(-1px); }
.otp-view .digit.is-demo-focus:not(.is-filled)::after { content: ""; position: absolute; z-index: 5; top: 13px; left: 23px; width: 1px; height: 25px; background: #7b8a9b; animation: caret-blink 1.1s step-end infinite; }
.otp-view .digit input {
      position: relative;
      z-index: 4;
      width: 100%;
      height: 100%;
      padding: 0;
      outline: none;
      border: 0;
      border-radius: inherit;
      background: transparent;
      color: #14231C;
      caret-color: #0E5C41;
      text-align: center;
      font-size: 25px;
      font-weight: 700;
      line-height: 1;
      appearance: none;
      transition: color .18s ease, text-shadow .18s ease;
    }
.otp-view .digit.is-filled input { color: #fff; caret-color: #fff; text-shadow: 0 1px 3px #06498d3b; transition-delay: calc(var(--fill-delay) + 70ms); }
.otp-view .digit input:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.otp-view .otp-card.is-error .digit { border-color: #df727c; box-shadow: 0 0 0 2px #f7d9dd70; }
.otp-view .otp-card.is-error .digits { animation: shake .4s ease; }
.otp-view .digit:nth-of-type(1) { --merge-x: calc(var(--step) * 1.5); --tilt: 12deg; }
.otp-view .digit:nth-of-type(2) { --merge-x: calc(var(--step) * .5); --tilt: 12deg; }
.otp-view .digit:nth-of-type(3) { --merge-x: calc(var(--step) * -.5); --tilt: -12deg; }
.otp-view .digit:nth-of-type(4) { --merge-x: calc(var(--step) * -1.5); --tilt: -12deg; }
.otp-view .otp-card[data-phase="tilt"] .digit { transform: rotate(var(--tilt)); transition: transform .25s var(--ease); }
.otp-view .otp-card[data-phase="merge"] .digit { transform: translateX(var(--merge-x)) rotate(var(--tilt)) scale(.35); opacity: 0; transition: transform .18s ease-in, opacity .12s .06s; }
.otp-view .otp-card[data-phase="merge"] .track { transform: scaleX(.15); opacity: 0; }
.otp-view .otp-card[data-phase="blue"] .digits, .otp-view .otp-card[data-phase="bounce"] .digits, .otp-view .otp-card[data-phase="settle"] .digits { visibility: hidden; }
.otp-view .otp-card.is-checking .digits { pointer-events: none; }
.otp-view .outcome { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.otp-view .sphere { position: relative; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; border: 1px solid #97C5AD; background: radial-gradient(circle at 32% 23%, #C6E8D8, #12855E 33%, #0E5C41 76%); box-shadow: inset -4px -5px 5px #2169bb4d, 0 7px 16px #2c9eec29; transform: scale(.35); }
.otp-view .sphere-green { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, #d9fff2 0%, #69ddba 20%, #12855E 54%, #0E5C41 100%); box-shadow: inset 2px 0 4px #ffffff80, inset -3px -3px 5px #00876640; transition: opacity .12s; }
.otp-view .sphere-shine { position: absolute; z-index: 2; top: 3px; left: 5px; right: 5px; height: 13px; border-radius: 50% 50% 35% 35%; background: linear-gradient(#ffffffed, #ffffffba 65%, #ffffff40); }
.otp-view .sphere > .bubble { z-index: 2; animation-play-state: running; background: #baffdf85; border-color: #d4fff34d; }
.otp-view .sphere > .bubble:nth-of-type(3) { left: 10px; right: auto; animation-delay: -.7s; }
.otp-view .sphere > .bubble:nth-of-type(4) { left: auto; right: 9px; animation-delay: -1.2s; }
.otp-view .sphere > .bubble:nth-of-type(5) { left: 24px; right: auto; animation-delay: -.3s; }
.otp-view .sphere > .bubble:nth-of-type(6) { left: 35px; right: auto; animation-delay: -1.8s; }
.otp-view .sphere-check { position: absolute; z-index: 3; inset: 11px; width: 28px; height: 28px; filter: drop-shadow(0 1px 1px #00795240); }
.otp-view .sphere-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .24s ease; }
.otp-view .otp-card.is-green .sphere { border-color: #b0e6d7; box-shadow: inset 1px 0 4px #ffffff80, 0 13px 24px #24c8964d; }
.otp-view .otp-card.is-green .sphere-green { opacity: 1; }
.otp-view .otp-card[data-phase="bounce"] .sphere { animation: sphere-bounce 1s linear both; }
.otp-view .otp-card[data-phase="settle"] .sphere { transform: scale(1); }
.otp-view .otp-card.has-main-check .sphere-check path { stroke-dashoffset: 0; }
.otp-view .footer { min-height: 22px; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 11.5px; transition: opacity .16s; }
.otp-view .footer.is-changing { opacity: 0; }
.otp-view .resend { display: inline; padding: 3px 0; border: 0; background: none; color: #0E5C41; font-size: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.otp-view .resend:disabled { color: #9199a5; cursor: default; text-decoration: none; }
.otp-view .resend:focus-visible, .otp-view .restart:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 3px; }
.otp-view .secure { gap: 5px; color: #0E5C41; font-weight: 600; animation: fade-in .4s ease both; }
.otp-view .secure svg { width: 13px; height: 15px; }
.otp-view .feedback { min-height: 17px; margin: 7px -10px 0; color: #5C6660; font-size: 10.5px; line-height: 1.5; }
.otp-view .otp-card.is-error .feedback { color: #B4322B; }
.otp-view .demo-note { margin: 17px 0 0; text-align: center; color: #959ba5; font-size: 11px; line-height: 1.6; }
.otp-view .demo-note strong { color: #738197; font-weight: 600; letter-spacing: 1px; }
.otp-view .restart { margin-left: 6px; padding: 0; border: 0; background: none; color: #546c91; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.otp-view .demo-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 7px; font-size: 11px; }
.otp-view .demo-play { border: 0; padding: 2px 0; background: transparent; color: #546c91; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.otp-view .demo-play:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.otp-view .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes float-lock { 0%, 100% { transform: translateY(0) rotate(-16deg); } 50% { transform: translateY(-2px) rotate(0deg); } }
@keyframes wave-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes caret-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes pipe-flow { from { transform: translateX(0); } to { transform: translateX(-34px); } }
@keyframes bubble-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 15% { opacity: .8; } 65% { opacity: .65; } 100% { opacity: 0; transform: translate(3px, -47px) scale(1.1); } }
@keyframes sphere-bounce {
      0% { transform: translateY(0) scale(.35); }
      16% { transform: translateY(-65px) scale(.32, .44); }
      28%, 34% { transform: translateY(-84px) scale(.31, .36); }
      46% { transform: translateY(-28px) scale(.72, .34); }
      57% { transform: translateY(3px) scale(1.35, .5); }
      68% { transform: translateY(-5px) scale(.94, 1.11); }
      78% { transform: translateY(1px) scale(1.1, .84); }
      91% { transform: scale(.97, 1.04); }
      100% { transform: scale(1); }
    }
@keyframes header-unlock { 0%, 6% { opacity: 1; transform: rotate(-5deg); } 13% { opacity: 1; transform: rotate(25deg) scale(.9); } 19% { opacity: 0; transform: rotate(80deg) scale(.5); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes shackle-peel { 0%, 6% { opacity: 1; transform: none; } 16% { opacity: 0; transform: translate(-8px, 3px) rotate(-75deg); } 100% { opacity: 0; transform: rotate(-75deg); } }
@keyframes body-round { 0%, 6% { rx: 3px; } 17%, 100% { rx: 17px; } }
@keyframes header-color { 0%, 8% { opacity: 0; transform: scale(.4); background: #B98A2E; } 13% { opacity: 1; transform: scale(.85); background: #B98A2E; } 18% { opacity: 1; transform: scale(1); background: #B98A2E; } 24%, 100% { opacity: 1; transform: scale(1); background: #12855E; } }
@keyframes header-highlight { 0%, 18% { left: 18px; top: 18px; width: 9px; height: 9px; opacity: 1; background: #455b5c; } 25% { left: 9px; top: 12px; width: 11px; height: 11px; background: #f2fff7; opacity: .9; } 38% { left: 8px; top: 19px; width: 7px; height: 7px; background: #f2fff7; opacity: .9; } 46%, 100% { left: 12px; top: 26px; width: 3px; height: 3px; background: #f2fff7; opacity: 0; } }
@keyframes header-tick { 0%, 43% { stroke-dashoffset: 1; opacity: 0; } 45% { opacity: 1; stroke-dashoffset: .8; } 57%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes header-burst { 0%, 58% { opacity: 0; transform: rotate(var(--angle)) translateY(-19px) scale(0); } 61% { opacity: 1; transform: rotate(var(--angle)) translateY(-25px) scale(1); } 74%, 100% { opacity: 0; transform: rotate(var(--angle)) translateY(-36px) scale(.5); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@media (max-width: 380px) {.otp-view .otp-card { padding-inline: 18px; }
.otp-view .digits { --step: 59px; gap: 12px; }
.otp-view h1 { font-size: 20px; }
 }
@media (prefers-reduced-motion: reduce) {.otp-view *, .otp-view *::before, .otp-view *::after { animation: none !important; transition: none !important; }
 }
@media (prefers-reduced-motion: reduce) {.otp-view .header-finish .unlock-icon, .otp-view .header-spark, .otp-view .header-orb::before { display: none; }
.otp-view .header-orb { background: #12855E; }
.otp-view .header-check path { stroke-dashoffset: 0; }
 }

  
.otp-view { width: min(100%, 480px); --fill-duration: 320ms; }
.otp-view .otp-card { padding: 36px 24px; min-height: 460px; border: 1px solid #DCE6DF; border-radius: 28px; background: linear-gradient(160deg, #EDF5EF, #fff 45%); box-shadow: 0 24px 70px #0E5C4110; }
.otp-view h1 { font-size: 28px; letter-spacing: -1px; margin-bottom: 12px; }
.otp-view .subtitle { font-size: 14px; min-height: 44px; }
.otp-view .icon-tile { background: linear-gradient(145deg, #E3F0E9, #D0E7DA); box-shadow: 0 5px 30px #0E5C4110; }
.otp-view .digits { --step: 58px; gap: 10px; }
.otp-view .digit { width: 48px; height: 58px; border-bottom-color: #8ABB9F; }
.otp-view .digit:nth-of-type(1) { --merge-x: calc(var(--step) * 2.5); }
.otp-view .digit:nth-of-type(2) { --merge-x: calc(var(--step) * 1.5); }
.otp-view .digit:nth-of-type(3) { --merge-x: calc(var(--step) * .5); --tilt: 12deg; }
.otp-view .digit:nth-of-type(4) { --merge-x: calc(var(--step) * -.5); }
.otp-view .digit:nth-of-type(5) { --merge-x: calc(var(--step) * -1.5); --tilt: -12deg; }
.otp-view .digit:nth-of-type(6) { --merge-x: calc(var(--step) * -2.5); --tilt: -12deg; }
.otp-view .footer { font-size: 13px; flex-wrap: wrap; gap: 6px; }
.otp-view .feedback { font-size: 13px; min-height: 38px; margin: 14px 0; }
.otp-view .code-stage { margin-top: 10px; height: 120px; }
.otp-view .button { margin-top: 12px; }
.otp-view .resend:disabled { color: #78867D; }
.otp-view .is-checking .icon-tile { animation: otp-pulse 1s ease-in-out infinite alternate; }
@keyframes otp-pulse { to { box-shadow: 0 0 0 8px #0E5C410C; } }
@media(max-width:480px) {
 .otp-view .otp-card { padding: 28px 12px; }
 .otp-view .digits { --step: 45px; gap: 5px; }
 .otp-view .digit { width: 40px; height: 52px; }
 .otp-view h1 { font-size: 24px; }
}