/* MyroPay rev19 — login screen, restyled to match the immersive sign-up view (css/signup.css).
   Pure CSS on top of the existing markup: every id / handler used by auth.js (2FA row, biometric button, reset link, error + success banners)
   is untouched. Themed from each app's own tokens, so the personal app is purple and the business app is green, in light and dark.
   Motion only uses opacity + transform (compositor), is staggered on entry, and switches off for prefers-reduced-motion. */
#auth-container{--lg-line:var(--border,rgba(255,255,255,.1));--lg-card:var(--bg-card,rgba(255,255,255,.05));--lg-card2:var(--bg-card-hover,rgba(255,255,255,.08));
  --lg-ac:var(--accent,var(--brand));--lg-ac2:var(--accent-ink,var(--brand-ink,var(--brand)));--lg-glow:var(--accent-glow,rgba(124,92,252,.2));--lg-dark:var(--accent-dark,var(--lg-ac));
  --lg-btn-bg:#fff;--lg-btn-tx:#0b0b12;--lg-sab:env(safe-area-inset-bottom,0px);position:relative}
[data-theme="light"] #auth-container{--lg-btn-bg:#14122b;--lg-btn-tx:#fff}

/* ── background: three drifting colour blobs + floating currency coins (same as sign-up, tinted by the app colour) ── */
#auth-container .auth-wrap{background:var(--bg-primary);isolation:isolate}
#auth-container .auth-bg-glow{display:none}
#auth-container .lg-bg{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
#auth-container .lg-bg i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
#auth-container .lg-bg i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-24vmax;background:radial-gradient(circle,var(--lg-glow),transparent 65%);opacity:1;animation:lg-d1 18s ease-in-out infinite alternate}
#auth-container .lg-bg i:nth-child(2){width:52vmax;height:52vmax;right:-18vmax;top:14vh;background:radial-gradient(circle,rgba(79,140,255,.30),transparent 65%);animation:lg-d2 22s ease-in-out infinite alternate}
#auth-container .lg-bg i:nth-child(3){width:48vmax;height:48vmax;left:8vw;bottom:-26vmax;background:radial-gradient(circle,rgba(0,212,170,.26),transparent 65%);animation:lg-d3 26s ease-in-out infinite alternate}
[data-theme="light"] #auth-container .lg-bg i{opacity:.55}
@keyframes lg-d1{to{transform:translate(8vmax,6vmax) scale(1.1)}}
@keyframes lg-d2{to{transform:translate(-9vmax,-5vmax) scale(1.15)}}
@keyframes lg-d3{to{transform:translate(7vmax,-8vmax) scale(1.08)}}
#auth-container .lg-coins{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#auth-container .lg-coins b{position:absolute;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-weight:800;font-size:1rem;color:#fff;
  background:linear-gradient(145deg,var(--lg-ac2),var(--lg-ac));box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35);opacity:.2;animation:lg-float 9s ease-in-out infinite;will-change:transform}
#auth-container .lg-coins b:nth-child(1){left:7%;top:18%}
#auth-container .lg-coins b:nth-child(2){right:9%;top:30%;animation-delay:-3s;width:34px;height:34px}
#auth-container .lg-coins b:nth-child(3){left:12%;bottom:16%;animation-delay:-5s;width:38px;height:38px}
#auth-container .lg-coins b:nth-child(4){right:14%;bottom:9%;animation-delay:-7s}
@keyframes lg-float{50%{transform:translateY(-18px) rotate(8deg)}}

/* ── logo block: springs in, then breathes ── */
#auth-container .auth-logo-wrap{padding-top:calc(env(safe-area-inset-top,0px) + 44px);padding-bottom:4px;gap:8px}
#auth-container .auth-logo-mark{position:relative;animation:lg-pop .7s cubic-bezier(.2,1.2,.3,1) both;box-shadow:0 10px 34px var(--lg-glow),inset 0 1px 0 rgba(255,255,255,.3)}
#auth-container .auth-logo-mark::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:1.5px solid var(--lg-ac);opacity:0;animation:lg-ring 3.2s ease-out 1s infinite;pointer-events:none}
@keyframes lg-pop{from{opacity:0;transform:scale(.5) rotate(-12deg)}}
@keyframes lg-ring{0%{opacity:.5;transform:scale(.92)}70%,100%{opacity:0;transform:scale(1.35)}}
#auth-container .auth-logo-sub{color:var(--lg-ac2)!important}
#auth-container .auth-logo-name,#auth-container .auth-logo-sub{animation:lg-in .55s cubic-bezier(.2,.9,.25,1) .12s both}
#auth-container .auth-logo-sub{animation-delay:.18s}

/* ── the sheet becomes a borderless full-bleed layout like sign-up ── */
#auth-container .auth-card{background:transparent;box-shadow:none;border-radius:0;padding:10px 20px calc(var(--lg-sab) + 34px);width:100%;max-width:520px;margin:0 auto}
[data-theme="light"] #auth-container .auth-card{box-shadow:none}
#auth-container .auth-tabs{background:var(--lg-card);border:1px solid var(--lg-line);padding:4px;border-radius:18px;gap:4px;margin-bottom:22px;animation:lg-in .5s cubic-bezier(.2,.9,.25,1) .22s both}
#auth-container .auth-tab{padding:12px 10px;border-radius:14px;font-weight:700;font-size:.9rem;transition:background .25s,color .25s,box-shadow .25s,transform .15s}
#auth-container .auth-tab:active{transform:scale(.97)}
#auth-container .auth-tab.active{background:linear-gradient(135deg,var(--lg-ac),var(--lg-dark));color:var(--on-brand,#fff);box-shadow:0 6px 18px var(--lg-glow)}

/* welcome heading (added markup); hidden while the old inline sign-up fallback tab is showing */
#auth-container .auth-card:has(#auth-signup:not([style*="none"])) .lg-h,#auth-container .auth-card:has(#auth-signup:not([style*="none"])) .lg-lead{display:none}
#auth-container .lg-h{font-family:var(--font-display,inherit);font-size:clamp(1.65rem,6.4vw,2.05rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;margin:4px 0 8px;color:var(--text-primary);animation:lg-in .55s cubic-bezier(.2,.9,.25,1) .28s both}
#auth-container .lg-h em{font-style:normal;background:linear-gradient(90deg,var(--lg-ac2),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
#auth-container .lg-lead{color:var(--text-secondary);font-size:.95rem;line-height:1.55;margin:0 0 22px;animation:lg-in .55s cubic-bezier(.2,.9,.25,1) .33s both}

/* ── fields ── */
#auth-container #auth-login>.input-group,#auth-container #auth-login>#totp-row,#auth-container #auth-login>#totp-field{margin-bottom:16px;animation:lg-in .5s cubic-bezier(.2,.9,.25,1) both}
#auth-container #auth-login>.input-group:nth-of-type(1){animation-delay:.38s}
#auth-container #auth-login>.input-group:nth-of-type(2){animation-delay:.44s}
#auth-container .input-label{font-size:.78rem;font-weight:700;color:var(--text-secondary);margin:0 0 7px 2px;letter-spacing:.01em}
#auth-container .input-f{height:56px;border-radius:16px;border:1.5px solid var(--lg-line);background:var(--lg-card);padding:0 16px;font-size:1.05rem;transition:border-color .2s,box-shadow .2s,background .2s}
#auth-container .input-f:focus{border-color:var(--lg-ac);box-shadow:0 0 0 4px var(--lg-glow);background:var(--lg-card2);outline:none}
#auth-container .pw-wrap .input-f{padding-right:54px}
#auth-container .pw-wrap>i{transform:none;position:absolute;right:0;top:0;width:54px;height:56px;display:grid;place-items:center;color:var(--text-tertiary);cursor:pointer;transition:color .2s}
#auth-container .pw-wrap>i:hover{color:var(--lg-ac2)}
#auth-container .otp-box{border-radius:14px;border:1.5px solid var(--lg-line);background:var(--lg-card);transition:border-color .2s,box-shadow .2s,transform .15s}
#auth-container .otp-box:focus{border-color:var(--lg-ac);box-shadow:0 0 0 4px var(--lg-glow);transform:translateY(-2px)}
/* the 2FA row appears when the e-mail has 2FA on: slide/fade it in instead of snapping, so nothing below jumps abruptly */
#auth-container #totp-row,#auth-container #totp-field{animation:lg-reveal .45s cubic-bezier(.2,.9,.25,1) both}
@keyframes lg-reveal{from{opacity:0;transform:translateY(-10px)}}

/* ── buttons ── */
#auth-container #login-btn{height:56px;border-radius:18px;border:0;background:var(--lg-btn-bg);color:var(--lg-btn-tx);font-weight:800;font-size:1.02rem;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:transform .15s,opacity .2s,box-shadow .2s;animation:lg-in .5s cubic-bezier(.2,.9,.25,1) .5s both;position:relative;overflow:hidden}
#auth-container #login-btn:active{transform:scale(.98)}
#auth-container #login-btn:disabled{opacity:.55}
#auth-container #login-btn::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:lg-shine 4.5s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes lg-shine{0%,60%{left:-80%}100%{left:140%}}
#auth-container #auth-login>p{animation:lg-in .5s cubic-bezier(.2,.9,.25,1) .56s both}
#auth-container #bio-login-btn{height:54px;border-radius:18px;border:1.5px solid var(--lg-line);background:var(--lg-card);font-weight:700;transition:background .2s,transform .15s}
#auth-container #bio-login-btn:hover{background:var(--lg-card2)}
#auth-container #bio-login-btn:active{transform:scale(.98)}
#auth-container #bio-login-btn[style*="display: flex"],#auth-container #bio-login-btn[style*="display:flex"],#auth-container #bio-login-btn[style*="display: block"],#auth-container #bio-login-btn[style*="display: inline"]{animation:lg-in .45s cubic-bezier(.2,.9,.25,1) .6s both}

/* ── banners ── */
#auth-container .auth-err,#auth-container .auth-ok{border-radius:16px;font-weight:600;line-height:1.45}
/* banners grow open instead of snapping in, so the fields below slide down rather than jump */
#auth-container .auth-err[style*="block"],#auth-container .auth-ok[style*="block"]{overflow:hidden;animation:lg-grow .4s cubic-bezier(.2,.9,.25,1) both}
#auth-container .auth-err[style*="block"]{animation:lg-grow .4s cubic-bezier(.2,.9,.25,1) both,lg-shake .4s .15s both}
@keyframes lg-grow{from{opacity:0;max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0}to{max-height:160px}}
@keyframes lg-shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

@keyframes lg-in{from{opacity:0;transform:translateY(16px)}}
/* fill-mode `both` keeps elements invisible until their delay ends; guarantee they end fully visible */

/* Log in / Create account: no tab bar any more. A pill at the top-right and a line under the form (same idea as the sign-up screens' "Log in" / "I already have an account"). */
#auth-container .auth-tabs{display:none}
#auth-container .auth-card:has(#auth-signup:not([style*="none"])) .auth-tabs{display:flex}   /* old inline sign-up (only if the immersive sign-up is unavailable) keeps a way back */
#auth-container:has(#auth-signup:not([style*="none"])) .lg-top{display:none}
#auth-container .lg-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--lg-line);background:var(--lg-card);color:var(--text-primary);font:inherit;font-weight:700;font-size:.82rem;padding:9px 14px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:lg-in .5s cubic-bezier(.2,.9,.25,1) .3s both;transition:background .2s,border-color .2s,transform .15s}
#auth-container .lg-top i{font-size:.7rem;color:var(--lg-ac2);transition:transform .2s}
#auth-container .lg-top:hover{border-color:var(--lg-ac)}#auth-container .lg-top:hover i{transform:translateX(3px)}
#auth-container .lg-top:active{transform:scale(.96)}
#auth-container .lg-alt{text-align:center;margin:22px 0 0;color:var(--text-secondary);font-size:.92rem;animation:lg-in .5s cubic-bezier(.2,.9,.25,1) .55s both}
#auth-container .lg-alt button{display:inline;width:auto;margin:0;background:none;border:0;color:var(--lg-ac2);font:inherit;font-weight:800;cursor:pointer;padding:8px 4px;border-radius:8px}
#auth-container .lg-alt button:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){
  #auth-container *,#auth-container *::before,#auth-container *::after{animation:none!important;transition-duration:.01ms!important}
}
@media (max-height:640px){#auth-container .auth-logo-wrap{padding-top:calc(env(safe-area-inset-top,0px) + 22px)}#auth-container .lg-lead{margin-bottom:14px}}
@media (min-width:700px){#auth-container .auth-card{padding-top:18px}}