/* pay100-motion v3: centered glass portal, constellation + grid pattern (Day & Night), MFA 6-digit fix, 3D tilt & vault motion */
#login.auth-shell{
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:relative;min-height:100svh;padding:32px 16px;isolation:isolate;overflow:hidden;
  perspective:1200px;
  background:radial-gradient(120% 90% at 50% 0%,#092233 0%,#030911 58%,#020509 100%)!important;
}
#login.auth-shell[hidden]{display:none!important}
:root:not([data-appearance=night]) #login.auth-shell{
  background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#e5eff6 60%,#d8e6f0 100%)!important;
}
#login.auth-shell>.auth-story{display:none!important}

/* Background Architectural Grid & Constellation Canvas */
.auth-grid100{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;
  background-image:linear-gradient(to right,rgba(110,235,225,.18) 1px,transparent 1px),linear-gradient(to bottom,rgba(110,235,225,.18) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 35%,transparent 85%);
  mask-image:radial-gradient(circle at 50% 50%,#000 35%,transparent 85%);
}
:root:not([data-appearance=night]) .auth-grid100{
  opacity:.72;
  background-image:linear-gradient(to right,rgba(8,118,130,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(8,118,130,.22) 1px,transparent 1px);
}
#auth-mesh100{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}

/* Centered 3D Tilt Glass Card */
#login.auth-shell>.auth-card-wrap{
  position:relative;z-index:2;flex:none;width:min(450px,100%);margin:0 auto!important;
  padding:30px 30px 28px;border-radius:30px;
  border:1px solid rgba(110,235,225,.22)!important;
  background:rgba(8,19,30,.78)!important;
  backdrop-filter:blur(26px) saturate(155%);
  box-shadow:0 44px 110px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.12)!important;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx100,0deg)) rotateY(var(--ry100,0deg));
  transition:transform .16s ease-out,box-shadow .28s ease;
}
:root:not([data-appearance=night]) #login.auth-shell>.auth-card-wrap{
  border-color:rgba(12,112,126,.2)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 34px 86px rgba(15,52,74,.14),inset 0 1px #fff!important;
}
#login.auth-shell>.auth-card-wrap.motion100-settled{
  transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .28s ease;
}
#login.auth-shell>.auth-card-wrap::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:2;
  background:radial-gradient(300px circle at var(--mx100,50%) var(--my100,0%),rgba(120,255,240,.62),transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:var(--spot100,0);transition:opacity .25s ease;
}
:root:not([data-appearance=night]) #login.auth-shell>.auth-card-wrap::before{
  background:radial-gradient(300px circle at var(--mx100,50%) var(--my100,0%),rgba(8,136,146,.54),transparent 70%);
}

/* Fix MFA 6-digit input overlapping placeholder / text */
#login.auth-shell .premium-code93:not(.recovery93) input{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  text-shadow:none!important;
  caret-color:transparent!important;
}
#login.auth-shell .premium-code93:not(.recovery93) input::placeholder{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  opacity:0!important;
}

/* Brand Header + Dynamic Island Pill */
.auth-island-bar100{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.auth-brand100{display:flex;align-items:center;gap:10px}
.auth-s-badge100{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:rgba(12,56,68,.55);border:1px solid rgba(110,235,225,.24);
  box-shadow:0 8px 20px rgba(21,204,154,.22);overflow:hidden;
}
:root:not([data-appearance=night]) .auth-s-badge100{background:rgba(255,255,255,.92);border-color:rgba(12,112,126,.22)}
.auth-s-badge100 img{width:28px;height:28px;object-fit:contain;display:block}
.auth-s-badge100 .s-light{display:none}
:root:not([data-appearance=night]) .auth-s-badge100 .s-dark{display:none}
:root:not([data-appearance=night]) .auth-s-badge100 .s-light{display:block}
.auth-brand100-txt{display:flex;flex-direction:column;gap:2px}
.auth-brand100-txt strong{font:800 12px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--premium-ink93)}
.auth-brand100-txt small{font:600 9.5px/1 system-ui,sans-serif;letter-spacing:.12em;color:var(--premium-muted93);text-transform:uppercase}
.premium-auth-brand93{display:none!important}

.auth-island100{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:99px;
  border:1px solid rgba(110,235,225,.24);background:rgba(56,240,224,.08);
  font:700 10.5px/1 system-ui,sans-serif;color:#38f0e0;
  transition:all .32s cubic-bezier(.34,1.4,.64,1);
}
:root:not([data-appearance=night]) .auth-island100{border-color:rgba(12,112,126,.24);color:#078c96;background:rgba(7,140,150,.08)}
.auth-island100 i{width:6px;height:6px;border-radius:50%;background:#26f7a7;box-shadow:0 0 8px #26f7a7;animation:pulse100 1.8s infinite}
.auth-island100.sealed{border-color:#ff5f82;color:#ff5f82;background:rgba(255,95,130,.12)}
.auth-island100.sealed i{background:#ff5f82;box-shadow:0 0 8px #ff5f82}

/* Sleek Submit CTA */
#login.auth-shell .auth-submit{
  border:1px solid rgba(56,240,224,.55)!important;border-radius:13px!important;
  background:linear-gradient(105deg,#077f85,#099c80 52%,#0cb084)!important;color:#fff!important;
  box-shadow:0 12px 30px rgba(12,176,132,.3),inset 0 1px rgba(255,255,255,.35)!important;
}
#login.auth-shell .auth-submit:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(12,176,132,.44)!important}

.prism-sweep100{
  position:absolute;inset:-45%;pointer-events:none;z-index:12;opacity:0;
  background:linear-gradient(115deg,transparent 34%,rgba(56,240,224,.2) 47%,rgba(255,255,255,.32) 50%,rgba(38,247,167,.18) 53%,transparent 66%);
  transform:translateX(-100%) rotate(12deg);
}
.auth-card-wrap.prism-active100 .prism-sweep100{animation:prism100 .88s cubic-bezier(.22,1,.36,1) forwards}
.auth-card-wrap.haptic100{animation:haptic100 .38s cubic-bezier(.36,.07,.19,.97)}

/* Login Success Overlay */
#login.auth-shell .auth-login-success{
  backdrop-filter:blur(18px) saturate(150%);
  animation:overlay-in100 .32s cubic-bezier(.22,1,.36,1) both;
}

/* Gyroscopic Vault & Particle Layer */
.vault-stage100{position:relative;width:162px;height:162px;display:grid;place-items:center;margin:0 auto 14px}
.vault-sparks100{position:absolute;inset:-46px;width:254px;height:254px;pointer-events:none}
.vault-aura100{
  position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(circle,rgba(54,234,220,.2),transparent 68%);
  transition:transform .42s ease,background .42s ease;
}
.vault-stage100[data-vstate="unlocked"] .vault-aura100{background:radial-gradient(circle,rgba(34,242,160,.28),transparent 68%);transform:scale(1.18)}
.vault-stage100[data-vstate="closing"] .vault-aura100,.vault-stage100[data-vstate="locked"] .vault-aura100{background:radial-gradient(circle,rgba(255,95,130,.22),transparent 68%)}
.vault-wave100{position:absolute;inset:14px;border-radius:50%;border:2px solid #26f7a7;opacity:0;pointer-events:none}
.vault-wave100.out{animation:wave-out100 .8s cubic-bezier(.16,1,.3,1) forwards}
.vault-wave100.in{border-color:#ff5f82;animation:wave-in100 .68s cubic-bezier(.16,1,.3,1) forwards}
.vault-stage100 .digital-lock95{margin:0!important;width:142px;height:142px}
.vault-stage100 .lock-bezel100{fill:none;stroke:var(--lock-ink95);stroke-width:1.1;stroke-opacity:.42;stroke-dasharray:2 5;transform-origin:72px 72px;animation:lock-orbit95 22s linear infinite}
.vault-stage100 .lock-arc100{fill:none;stroke:var(--lock-ink95);stroke-width:1.4;stroke-opacity:.58;stroke-dasharray:26 14;transform-origin:72px 72px;animation:spin-rev100 5.5s linear infinite}
.vault-stage100[data-vstate="closing"] .lock-arc100{stroke:#ff5f82;animation-duration:2s}

.auth-steps100{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:8px 0 6px}
.auth-step100{
  padding:5px 11px;border-radius:99px;font:600 10.5px/1 system-ui,sans-serif;
  border:1px solid rgba(76,224,214,.25);color:#8eb2c4;background:rgba(255,255,255,.03);
  transition:all .26s cubic-bezier(.22,1,.36,1);
}
:root:not([data-appearance=night]) .auth-step100{border-color:rgba(12,118,130,.22);color:#527083;background:rgba(8,140,150,.05)}
.auth-step100.on{border-color:#36eadc;color:#36eadc;background:rgba(54,234,220,.12)}
.auth-step100.ok{border-color:#22f2a0;color:#22f2a0;background:rgba(34,242,160,.14);transform:scale(1.04)}
.auth-step100.off{border-color:#ff5f82;color:#ff5f82;background:rgba(255,95,130,.14)}
:root:not([data-appearance=night]) .auth-step100.on{border-color:#088892;color:#088892}
:root:not([data-appearance=night]) .auth-step100.ok{border-color:#09a876;color:#09a876}
:root:not([data-appearance=night]) .auth-step100.off{border-color:#c73859;color:#c73859}

#app.iris-enter100{animation:iris-open100 .56s cubic-bezier(.22,1,.36,1) both}
#signout-dialog[open]{animation:modal-pop100 .34s cubic-bezier(.34,1.35,.64,1) both}
.signout-meter100{width:min(78%,240px);height:5px;border-radius:99px;background:rgba(130,165,185,.2);overflow:hidden;margin:12px auto 0}
.signout-meter100 i{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#ff5f82,#f6d38b);box-shadow:0 0 12px #ff5f82;transition:width .38s cubic-bezier(.22,1,.36,1)}

@keyframes pulse100{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes overlay-in100{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes prism100{from{transform:translateX(-100%) rotate(12deg);opacity:0}35%{opacity:1}to{transform:translateX(140%) rotate(12deg);opacity:0}}
@keyframes haptic100{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes spin-rev100{to{transform:rotate(-360deg)}}
@keyframes wave-out100{0%{transform:scale(.75);opacity:.92}100%{transform:scale(1.68);opacity:0}}
@keyframes wave-in100{0%{transform:scale(1.55);opacity:0}40%{opacity:.85}100%{transform:scale(.82);opacity:0}}
@keyframes iris-open100{from{clip-path:circle(10% at 50% 45%);opacity:.35}to{clip-path:circle(125% at 50% 45%);opacity:1}}
@keyframes modal-pop100{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

@media(prefers-reduced-motion:reduce){
  #login.auth-shell .auth-card-wrap,#login.auth-shell .auth-login-success,.prism-sweep100,
  .vault-wave100,.vault-stage100 *,#app.iris-enter100,#signout-dialog[open]{animation:none!important;transition:none!important}
}

/* Ensure MFA account username has crisp contrast in both themes */
#login.auth-shell .auth-mfa-account strong{color:#eaf8ff!important}
:root:not([data-appearance=night]) #login.auth-shell .auth-mfa-account strong{color:#163b50!important}
@media(max-width:760px){
  #login.auth-shell{padding:18px 12px!important}
  #login.auth-shell>.auth-card-wrap{width:min(450px,100%)!important;padding:24px 20px!important;border-radius:24px!important}
}

/* pay100-motion v4: MFA 6-digit entry pop, active slot glow, ready sweep & wrong-code shake */
#login.auth-shell .premium-code-digits93 span{
  position:relative;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
#login.auth-shell .premium-code-digits93 span.active100{
  border-color:rgba(56,240,224,.75)!important;
  box-shadow:0 0 0 3px rgba(56,240,224,.15),inset 0 0 14px rgba(56,240,224,.12)!important;
}
#login.auth-shell .premium-code-digits93 span.active100::after{
  content:"";position:absolute;bottom:10px;width:14px;height:2px;border-radius:2px;
  background:#38f0e0;animation:caret100 1s ease-in-out infinite;
}
:root:not([data-appearance=night]) #login.auth-shell .premium-code-digits93 span.active100{
  border-color:#088892!important;
  box-shadow:0 0 0 3px rgba(8,136,146,.14),inset 0 0 12px rgba(8,136,146,.08)!important;
}
:root:not([data-appearance=night]) #login.auth-shell .premium-code-digits93 span.active100::after{background:#088892}
#login.auth-shell .premium-code-digits93 span.pop100{animation:digit-pop100 .26s cubic-bezier(.34,1.56,.64,1)}
#login.auth-shell .premium-code-digits93.ready100 span.filled93{
  border-color:#26f7a7!important;
  box-shadow:0 0 16px rgba(38,247,167,.22),inset 0 0 12px rgba(38,247,167,.12)!important;
}
#login.auth-shell .premium-code-digits93.error100{animation:code-shake100 .44s cubic-bezier(.36,.07,.19,.97)}
#login.auth-shell .premium-code-digits93.error100 span{
  border-color:#ff5f82!important;color:#ff8da7!important;
  box-shadow:0 0 0 2px rgba(255,95,130,.18),inset 0 0 14px rgba(255,95,130,.14)!important;
}
.auth-card-wrap.error-shake100{animation:code-shake100 .42s cubic-bezier(.36,.07,.19,.97)}

@keyframes caret100{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes digit-pop100{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes code-shake100{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}36%{transform:translateX(6px)}54%{transform:translateX(-5px)}72%{transform:translateX(4px)}90%{transform:translateX(-2px)}}

/* Fix username & password input left/right padding so text never overlaps icons */
#login.auth-shell .auth-input input,
#login.auth-shell .auth-form .auth-input input{
  padding-left:44px!important;
  padding-right:48px!important;
}
#login.auth-shell .auth-input>svg{
  left:14px!important;
  z-index:2;
}