/* 1.1.183 Log in / Sign up / Reset password animations and code pop-ups (js/auth-anim.js). */
.ga-btn{position:relative;overflow:hidden}
.ga-in{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.ga-sp{width:17px;height:17px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ga-rot .7s linear infinite;flex:none}
.btn-light .ga-sp{border-color:color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor}
@keyframes ga-rot{to{transform:rotate(360deg)}}
.ga-bar{position:absolute;left:0;bottom:0;height:3px;width:40%;background:rgba(255,255,255,.75);border-radius:3px;animation:ga-slide 1.1s ease-in-out infinite}
@keyframes ga-slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.ga-tk{width:21px;height:21px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.ga-tk svg{width:13px;height:13px;fill:none;stroke:#16a34a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.btn.ga-ok,.btn.ga-ok:disabled{background:linear-gradient(90deg,#15803d,#16a34a 60%,#22c55e)!important;border-color:#16a34a!important;color:#fff!important;opacity:1!important}
.btn.ga-btn:disabled{opacity:1;cursor:progress}

/* character: eyes scan while checking, small jump when found */
.ga-scan .lc .pup{animation:ga-eyes 1.1s ease-in-out infinite alternate}
@keyframes ga-eyes{from{transform:translate(-6px,3px)}to{transform:translate(6px,3px)}}
.ga-happy .lc svg{animation:ga-jump .55s ease-out}
@keyframes ga-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
.lc{position:relative}
.ga-mag{position:absolute;left:50%;top:44%;width:30%;opacity:0;transform:translate(-50%,0) scale(.6);transition:opacity .25s,transform .25s;pointer-events:none}
.ga-mag svg{display:block;width:100%;height:auto}
.ga-search .ga-mag{opacity:1;animation:ga-magm 1.4s ease-in-out infinite alternate}
@keyframes ga-magm{from{transform:translate(-110%,-4%) rotate(-8deg)}to{transform:translate(10%,4%) rotate(8deg)}}
.ga-badge{position:absolute;right:8%;top:6%;width:26px;height:26px;border-radius:50%;background:#16a34a;border:3px solid var(--card,#fff);display:grid;place-items:center;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.ga-badge .ga-tk{background:none;width:auto;height:auto}.ga-badge .ga-tk svg{stroke:#fff;width:14px;height:14px}
.ga-got .ga-badge{transform:scale(1)}

/* fold the form away (buddy and steps looks) */
.ga-fold > :not(.lc):not(.lg-badge-row):not(.ga-ov){transition:opacity .25s,transform .25s;opacity:0;transform:translateY(8px);pointer-events:none}
.ga-folded > :not(.lc):not(.lg-badge-row):not(.ga-ov){display:none!important}
.ga-folded.ga-fold{display:flex;flex-direction:column}
.ga-folded > .lc{transition:transform .4s cubic-bezier(.3,1.3,.5,1);transform:scale(1.3);margin-top:24px;margin-bottom:30px}
.ga-ov{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;margin:6px auto 0;width:100%;max-width:400px}
.ga-ov.on{opacity:1;transform:none}
.ga-ov .ga-t{font-size:21px;color:var(--ink)}
.ga-ov .ga-s{color:var(--muted);font-size:14.5px}
.ga-ov.ok .ga-t{color:#16a34a}
.ga-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.ga-dots i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .3s}
.ga-dots i.on{background:var(--brand)}
.ga-dots.go i{animation:ga-dot 1.2s infinite}.ga-dots.go i:nth-child(2){animation-delay:.2s}.ga-dots.go i:nth-child(3){animation-delay:.4s}
@keyframes ga-dot{0%,100%{background:var(--line)}40%{background:var(--brand)}}
.ga-pb{display:block;width:100%;height:6px;border-radius:6px;background:color-mix(in srgb,var(--brand) 12%,transparent);overflow:hidden;margin:14px 0 8px}
.ga-pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-d,var(--brand)),var(--brand));transition:width .6s ease}
.ga-row{display:flex;align-items:center;gap:12px;width:100%;height:54px;border:1px solid var(--line);border-radius:14px;padding:0 14px;font-weight:600;font-size:15px;color:var(--muted);background:var(--card);transition:border-color .25s,box-shadow .25s,color .25s;text-align:left}
.ga-row .ga-ic{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--line);display:grid;place-items:center;flex:none}
.ga-row.act{border-color:var(--brand);color:var(--ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.ga-row.act .ga-ic{border-color:color-mix(in srgb,var(--brand) 25%,transparent);border-top-color:var(--brand);animation:ga-rot .7s linear infinite}
.ga-row.done{color:var(--ink)}
.ga-row.done .ga-ic{background:#16a34a;border-color:#16a34a}
.ga-row.done .ga-tk{background:none;width:auto;height:auto}.ga-row.done .ga-tk svg{stroke:#fff;width:13px;height:13px}

/* leaving the page */
.ga-fly{transition:transform .6s cubic-bezier(.6,0,.3,1),opacity .6s,border-radius .6s!important;opacity:0;border-radius:200px!important;pointer-events:none}
html.ga-soft body > *:not(.ga-pop){transition:opacity .5s;opacity:.85}
html.ga-leave body{transition:opacity .4s,filter .4s,transform .4s;opacity:0;filter:blur(6px);transform:scale(1.02)}
.ga-circle{position:fixed;z-index:200;border-radius:50%;background:var(--bg,#fff);transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.6,0,.3,1);pointer-events:none}
.ga-circle.on{transform:translate(-50%,-50%) scale(1)}

/* pop-up */
.ga-pop{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .25s}
.ga-pop.on{opacity:1}
.ga-pbk{position:absolute;inset:0;background:rgba(10,24,30,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.ga-box{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:var(--card,#fff);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:24px 28px 22px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.28);transform:scale(.92) translateY(10px);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.ga-pop.on .ga-box{transform:none}
.ga-box h3{font-size:21px;margin:4px 0 0}
.ga-box p{color:var(--muted);font-size:14.5px;line-height:1.45;margin:8px 0 0}
.ga-box p b{color:var(--ink);word-break:break-all}
.ga-green{color:#16a34a}
.ga-art{height:140px;display:grid;place-items:center}
.ga-env{width:210px;height:140px;overflow:visible}
.ga-env .sh{fill:color-mix(in srgb,var(--brand) 14%,transparent)}
.ga-env .glow{fill:color-mix(in srgb,var(--brand) 8%,transparent)}
.ga-env .bd{fill:color-mix(in srgb,var(--brand) 12%,var(--card,#fff));stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round}
.ga-env .fo{fill:color-mix(in srgb,var(--brand) 22%,var(--card,#fff));stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;transition:opacity .2s}
.ga-env .fc{fill:color-mix(in srgb,var(--brand) 22%,var(--card,#fff));stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.ga-env .lt rect{fill:#fff;stroke:color-mix(in srgb,var(--brand) 40%,#fff);stroke-width:2}
.ga-env .lt path{stroke:color-mix(in srgb,var(--brand) 40%,#fff);stroke-width:4;stroke-linecap:round}
.ga-env .lt{transition:opacity .2s}
.ga-env .ln{stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;fill:none}
.ga-env .pl{fill:var(--brand);offset-path:path("M-40 70 Q30 10 100 72");animation:ga-plane 1.3s cubic-bezier(.5,0,.6,1) .15s both}
.ga-env .pl2{fill:var(--brand-d,var(--brand))}
@keyframes ga-plane{0%{offset-distance:0%;opacity:1;transform:scale(1)}85%{opacity:1}100%{offset-distance:100%;opacity:0;transform:scale(.5)}}
.ga-env .tk{transform:translate(150px,52px) scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.ga-env .tk circle{fill:#16a34a;stroke:var(--card,#fff);stroke-width:3}
.ga-env .tk path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ga-art.sent .fo,.ga-art.sent .lt{opacity:0}
.ga-art.sent .fc{opacity:1}
.ga-art.sent .tk{transform:translate(150px,52px) scale(1)}
.ga-ph .sc{fill:var(--card,#fff)}
.ga-ph .msg rect,.ga-ph .pl rect{fill:var(--brand)}
.ga-ph .msg path,.ga-ph .pl path{stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.ga-ph .msg{opacity:0;transition:opacity .2s}
.ga-ph .pl{offset-path:path("M-40 64 Q30 16 100 56");animation:ga-plane 1.3s cubic-bezier(.5,0,.6,1) .15s both}
.ga-art.sent .ga-ph .msg{opacity:1}
.ga-ph .tk2{transform:translate(130px,24px) scale(0)}
.ga-art.sent .ga-ph .tk2{transform:translate(130px,24px) scale(1)}
.ga-codes{display:flex;gap:8px;justify-content:center;margin:18px 0 6px}
.ga-d{width:44px;height:54px;border:1.5px solid var(--line);border-radius:12px;text-align:center;font-size:23px;font-weight:700;color:var(--ink);background:var(--card,#fff);padding:0;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.ga-d:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 16%,transparent)}
.ga-d.ok{border-color:#16a34a;color:#16a34a;background:color-mix(in srgb,#16a34a 6%,var(--card,#fff))}
@media (max-width:400px){.ga-d{width:38px;height:48px;font-size:20px}.ga-codes{gap:6px}.ga-box{padding:20px 16px 18px}}
.ga-err{color:#dc2626!important;font-size:13.5px!important;min-height:18px;margin:2px 0 10px!important}
.ga-shake .ga-codes{animation:ga-shk .4s}
@keyframes ga-shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.ga-link{background:none;border:0;color:var(--brand);font-weight:600;font-size:14px;margin-top:12px;cursor:pointer;padding:6px}
html.dark .ga-link{color:var(--ok-ink,var(--brand))}

/* "Can't find it?" box */
.ga-spam{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:10px 10px 10px 12px;border:1px solid #fcd34d;background:#fffbeb;border-radius:12px;text-align:left;font-size:14px;color:#78350f}
html.dark .ga-spam{background:#2a2108;border-color:#854d0e;color:#fde68a}
.ga-spam-i{width:22px;height:22px;border-radius:50%;background:#f59e0b;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;flex:none}
.ga-spam-t{flex:1;font-weight:600}
.ga-spam-b{flex:none;border:0;border-radius:999px;background:#f59e0b;color:#fff;font-weight:700;font-size:13px;padding:7px 14px;cursor:pointer}
.ga-spam-b:hover{background:#d97706}
.ga-spop{z-index:160}
.ga-spop .ga-box{max-width:420px}
.ga-x{position:absolute;right:12px;top:10px;width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.ga-x:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.ga-sdw{display:flex;justify-content:center;margin:12px 0 4px}
.ga-sd{width:190px;height:auto}
.ga-steps{text-align:left;margin:10px 0 16px;padding-left:22px;font-size:14px;color:var(--ink);line-height:1.5}
.ga-steps li{padding:3px 6px;border-radius:8px;animation:ga-step 7.5s infinite}
.ga-steps li:nth-child(2){animation-delay:2.5s}.ga-steps li:nth-child(3){animation-delay:5s}
@keyframes ga-step{0%,33%{background:color-mix(in srgb,var(--brand) 12%,transparent)}34%,100%{background:transparent}}
/* the phone drawing: three scenes, 7.5 s loop */
.ga-sd .ph{fill:#1e293b}.ga-sd .scr{fill:#fff}
.ga-sd .bar{fill:#f1f5f9}.ga-sd .ham{stroke:#334155;stroke-width:2.5;stroke-linecap:round}
.ga-sd .tt{font:700 13px Inter,system-ui,sans-serif;fill:#0f172a}
.ga-sd .rows rect,.ga-sd .row2{fill:#f1f5f9}
.ga-sd .dim{fill:rgba(15,23,42,.35)}.ga-sd .menu{fill:#fff}
.ga-sd .mi{font:500 12px Inter,system-ui,sans-serif;fill:#334155}.ga-sd .mi.b{font-weight:800;fill:#b45309}
.ga-sd .hl{fill:#fef3c7}
.ga-sd .mail{fill:#fffbeb;stroke:#f59e0b;stroke-width:1.5}.ga-sd .av{fill:#14897a}
.ga-sd .mt{font:700 10px Inter,system-ui,sans-serif;fill:#0f172a}.ga-sd .ms{font:500 9px Inter,system-ui,sans-serif;fill:#64748b}
.ga-sd .ns{fill:#16a34a}.ga-sd .nst{font:700 11px Inter,system-ui,sans-serif;fill:#fff;text-anchor:middle}
.ga-sd .tap{fill:rgba(245,158,11,.45);stroke:#f59e0b;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.ga-sd .s1{animation:ga-sc1 7.5s infinite}.ga-sd .s2{animation:ga-sc2 7.5s infinite}.ga-sd .s3{animation:ga-sc3 7.5s infinite}
.ga-sd .menu,.ga-sd .s2 text,.ga-sd .hl,.ga-sd .t2{animation:ga-menu 7.5s infinite}
.ga-sd .t1{animation:ga-tap1 7.5s infinite}.ga-sd .t2{animation:ga-tap2 7.5s infinite}.ga-sd .t3{animation:ga-tap3 7.5s infinite}
.ga-sd .ns{animation:ga-ns 7.5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ga-sc1{0%,33%{opacity:1}34%,100%{opacity:0}}
@keyframes ga-sc2{0%,30%{opacity:0}33%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes ga-sc3{0%,64%{opacity:0}67%,100%{opacity:1}}
@keyframes ga-menu{0%,33%{transform:translateX(-40px)}38%,100%{transform:translateX(0)}}
@keyframes ga-tap1{0%,14%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1)}28%,100%{opacity:0;transform:scale(1.4)}}
@keyframes ga-tap2{0%,46%{opacity:0;scale:.4}52%{opacity:1;scale:1}60%,100%{opacity:0;scale:1.4}}
@keyframes ga-tap3{0%,82%{opacity:0;transform:scale(.4)}88%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1.4)}}
@keyframes ga-ns{0%,84%{transform:scale(1)}88%{transform:scale(1.08)}92%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ga-sd *,.ga-steps li{animation:none!important}.ga-sd .s1,.ga-sd .s2{opacity:0}.ga-sd .s3{opacity:1}}
/* Settings > Appearance sample */
.ga-adm-in{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.ga-adm-in .opts{flex:1 1 380px;min-width:0}
.ga-stage{flex:0 0 300px;max-width:100%;--brand:#14897a;--brand-d:#0f6b5f;--bg:#f3f8f6;--card:#fff;--ink:#0f172a;--muted:#5b6b6a;--line:#d9e7e4;background:#eef6f3;border:1px solid var(--line);border-radius:16px;padding:14px;color:var(--ink)}
.ga-demo{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px;text-align:center;min-height:300px}
.ga-demo .lc{width:120px;height:90px;margin:0 auto}
.ga-demo h1{font-size:18px;margin:2px 0 0}.ga-demo .sub{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
.ga-fake{height:36px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;text-align:left;padding:0 12px;line-height:34px;font-size:13px;color:var(--ink)}
.ga-demo .btn-main{background:linear-gradient(90deg,var(--brand-d),var(--brand));color:#fff;border:0;height:40px;font-size:14px;width:100%;border-radius:10px}
.ga-demo .ga-row{height:40px;font-size:13px;border-radius:10px}
.ga-demo .ga-ov .ga-t{font-size:16px}.ga-demo .ga-ov{gap:4px}
.ga-demo.ga-folded > .lc{transform:scale(1.15);margin:12px auto 18px}
@media (max-width:700px){.ga-stage{flex-basis:auto;width:100%}}