/* Spyvoo sign up / log in (landing page popup and the /login, /signup, /forgot, /reset, /verify, /invite pages). */
[hidden]{display:none!important}
:root{--ink:#0A1638;--ink-2:#26355C;--mut:#56637F;--line:#DFE6F5;--bg:#FFFFFF;--bg-2:#F4F7FF;--sky:#E8EFFF;--blue:#1F5BFF;--blue-d:#0B2FA8;--glow:#6FA0FF;
--pink:#FF3D8B;--violet:#7B5CFF;--sun:#FFC21A;--mint:#14D3A0;--orange:#FF9F1C;--coral:#FF5A5F;--grad:linear-gradient(100deg,#1F5BFF 0%,#7B5CFF 30%,#FF3D8B 62%,#FF9F1C 100%); --grad-loop: linear-gradient(100deg,#1F5BFF 0%,#7B5CFF 15%,#FF3D8B 31%,#FF9F1C 50%,#FF3D8B 69%,#7B5CFF 85%,#1F5BFF 100%);
--display:'Bricolage Grotesque','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;color-scheme:light}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes shine{to{background-position:200% center}}
@keyframes drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(8%,10%) scale(1.15)}66%{transform:translate(-6%,4%) scale(.9)}100%{transform:translate(0,0) scale(1)}}
@keyframes bob{50%{transform:translateY(-10px)}}
@keyframes orbit{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-16px) rotate(calc(var(--r) * -.6))}}
@keyframes draw{to{stroke-dashoffset:0}}
.auth-page{margin:0;min-height:100vh;background:#EEF3FF;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
.auth-page *{box-sizing:border-box}
.auth h2{font-family:var(--display);letter-spacing:-.035em;line-height:1.05;margin:0}
.auth .btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;font-weight:800;font-size:15.5px;padding:13px 20px;text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.auth .btn-blue{background:var(--blue);color:#fff}
.auth .btn-blue .arr{width:28px;height:28px;border-radius:50%;background:#fff;color:var(--pink);display:grid;place-items:center;margin-right:-8px}
.auth .mark{display:inline-grid;place-items:center;border-radius:30%;flex:0 0 auto;overflow:hidden}
.auth .mark svg{width:100%;height:100%;display:block}
.auth .word{font-family:var(--display);font-weight:800;letter-spacing:-.05em;display:inline-flex}
.auth input,.auth select,.auth button{font-family:inherit}
.auth[data-page]{position:relative;min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 20% 10%,#DCE6FF,transparent 50%),radial-gradient(circle at 90% 90%,#FFE3EC,transparent 45%),#EEF3FF}
.auth[data-page] .auth-back{display:none}
.auth[data-page] .auth-card{animation:popin .6s cubic-bezier(.2,.9,.25,1.15) both}
.fld select{width:100%;height:56px;border:1.5px solid var(--line);border-radius:16px;padding:20px 40px 6px 14px;font:600 16px var(--body);color:var(--ink);background:#fff;outline:0;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2356637F' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.fld select:focus{border-color:var(--violet);box-shadow:0 0 0 5px rgba(123,92,255,.15)}
.fld select+label{top:8px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--violet)}
.auth.mode-forgot [data-only],.auth.mode-reset [data-only="in"],.auth.mode-reset [data-only="up"]:not(.meter),.auth.mode-verify [data-only],.auth.mode-invite [data-only="up"]{display:none}
.aa-tip{position:relative;margin:auto 0 0;font:700 18px/1.35 var(--display);letter-spacing:-.02em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:16px 18px;backdrop-filter:blur(8px)}
.aa-tip small{display:block;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.auth-x[hidden]{display:none}
/* ================= AUTH MODAL ================= */
.auth{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.auth-back{position:absolute;inset:0;background:rgba(10,22,56,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadein .3s ease both}
@keyframes fadein{from{opacity:0}}
.auth-card{position:relative;width:min(980px,100%);max-height:calc(100% - 8px);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:#fff;border-radius:34px;box-shadow:0 60px 120px -40px rgba(7,28,102,.8);animation:popin .55s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes popin{from{opacity:0;transform:translateY(40px) scale(.94)}}
.auth-art{position:relative;overflow:hidden;background:linear-gradient(150deg,#1F5BFF,#4B45FF 45%,#8E44E6 75%,#FF3D8B);color:#fff;padding:28px;display:flex;flex-direction:column;min-height:600px}
.aa-blobs{position:absolute;inset:0;filter:blur(50px);opacity:.75}
.aa-blobs i{position:absolute;border-radius:50%;animation:drift 12s ease-in-out infinite}
.aa-blobs i:nth-child(1){width:260px;height:260px;left:-60px;bottom:-40px;background:#14D3A0}
.aa-blobs i:nth-child(2){width:220px;height:220px;right:-40px;top:20%;background:#FFC21A;animation-delay:-4s;opacity:.7}
.aa-blobs i:nth-child(3){width:200px;height:200px;left:30%;top:-60px;background:#FF3D8B;animation-delay:-8s}
.aa-blobs i:nth-child(4){width:160px;height:160px;left:40%;top:50%;background:#7BD3FF;animation-delay:-2s;opacity:.6}
.aa-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 75%)}
.aa-top{position:relative;display:flex;align-items:center;gap:10px}
.aa-top .mark{color:#fff}
.aa-top .mark svg circle[fill="#fff"]{fill:#1F5BFF}
.spy{position:relative;width:170px;height:170px;margin:26px auto 0;border-radius:30%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);display:grid;place-items:center;backdrop-filter:blur(6px);animation:bob 4s ease-in-out infinite}
.spy svg{width:140px;height:140px}
#spyPup{transition:transform .2s ease-out}
.spy-lids rect{transform-box:fill-box;transform-origin:center top;transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.spy.shy .spy-lids rect{transform:scaleY(1)}
.spy.blink .spy-lids rect{transform:scaleY(1);transition-duration:.08s}
.aa-cards{position:relative;height:190px;margin-top:22px}
.ac{position:absolute;margin:0;width:140px;background:#fff;border-radius:16px;padding:6px;color:#0A1638;box-shadow:0 30px 50px -26px rgba(7,28,102,.9);left:50%;top:10px;animation:orbit 6s ease-in-out infinite}
.ac img{display:block;width:100%;height:110px;object-fit:cover;border-radius:11px}
.ac figcaption{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:6px 4px 2px}
.ac figcaption span{font:800 11px/1 var(--mono);color:#fff;background:linear-gradient(90deg,#FF3D8B,#FF9F1C);border-radius:999px;padding:4px 7px}
.ac.c1{margin-left:-200px;--r:-10deg}.ac.c2{margin-left:-70px;top:0;--r:2deg;z-index:2;animation-delay:-2s}.ac.c3{margin-left:60px;--r:11deg;animation-delay:-4s}
.aa-quote{position:relative;margin:auto 0 0;font:700 20px/1.3 var(--display);letter-spacing:-.02em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:16px 18px;backdrop-filter:blur(8px)}
.aa-quote cite{display:block;font:600 13px/1.3 var(--body);font-style:normal;opacity:.85;margin-top:8px}
.auth-side{position:relative;padding:30px 34px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.auth-x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--bg-2);display:grid;place-items:center;cursor:pointer;transition:transform .3s,background .2s}
.auth-x:hover{transform:rotate(90deg);background:#FFE3EC;color:var(--pink)}
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--bg-2);border-radius:999px;padding:5px;width:240px}
.seg button{position:relative;z-index:1;border:0;background:none;font-weight:800;font-size:14.5px;padding:10px;border-radius:999px;cursor:pointer;color:var(--ink-2);transition:color .3s}
.seg button[aria-selected="true"]{color:#fff}
.seg-pill{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--grad-loop);background-size:200% auto;animation:shine 4s linear infinite;transition:transform .45s cubic-bezier(.2,.9,.25,1.2)}
.seg.in .seg-pill{transform:translateX(100%)}
.auth-main{display:flex;flex-direction:column;gap:14px}
.auth-main h2{font-size:clamp(32px,3.6vw,42px);font-weight:800}
.auth-main h2 .g{background:var(--grad-loop);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
.auth-sub{margin:0;color:var(--mut);font-weight:600}
.vsq-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:16px;padding:15px;font-weight:800;font-size:15.5px;color:#fff;background:var(--ink);cursor:pointer;overflow:hidden;transition:transform .2s}
.vsq-btn:hover{transform:translateY(-2px)}
.vsq-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3s ease-in-out infinite}
@keyframes sheen{60%,100%{transform:translateX(100%)}}
.vb-ico{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center}
.or{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12.5px;font-weight:700}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
#authForm{display:flex;flex-direction:column;gap:12px}
.fld{position:relative}
.fld input{width:100%;height:56px;border:1.5px solid var(--line);border-radius:16px;padding:20px 48px 6px 16px;font:600 16px var(--body);color:var(--ink);background:#fff;outline:0;transition:border-color .2s,box-shadow .2s}
.fld label{position:absolute;left:17px;top:18px;font-weight:600;color:var(--mut);pointer-events:none;transition:all .2s cubic-bezier(.2,.8,.2,1)}
.fld input:focus{border-color:var(--violet);box-shadow:0 0 0 5px rgba(123,92,255,.15)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label{top:8px;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--violet)}
.peek{position:absolute;right:8px;top:8px;width:40px;height:40px;border:0;background:none;border-radius:12px;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.peek:hover{background:var(--bg-2);color:var(--ink)}
.meter{display:flex;gap:6px;align-items:center}
.meter i{flex:1;max-width:46px;height:6px;border-radius:4px;background:var(--line);transition:background .3s}
.meter span{font-size:12.5px;font-weight:700;color:var(--mut);margin-left:6px}
.meter[data-l="1"] i:nth-child(1){background:var(--coral)}
.meter[data-l="2"] i:nth-child(-n+2){background:var(--orange)}
.meter[data-l="3"] i:nth-child(-n+3){background:var(--sun)}
.meter[data-l="4"] i{background:var(--mint)}
.row-in{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;gap:10px;flex-wrap:wrap}
.row-in a{color:var(--violet);text-decoration:none}
.chk{display:flex;gap:8px;align-items:center;color:var(--ink-2)}
.chk input{accent-color:var(--violet);width:16px;height:16px}
.auth-err{margin:0;min-height:0;color:var(--coral);font-weight:700;font-size:13.5px}
.auth-err:empty{display:none}
.auth-go{justify-content:center;height:54px;border-radius:16px;background:var(--grad-loop);background-size:200% auto;animation:shine 4s linear infinite;box-shadow:0 18px 36px -16px rgba(255,61,139,.6)}
.auth-go .arr{color:var(--pink)}
.auth-fine{margin:0;font-size:12px;color:var(--mut);font-weight:600}
.auth.mode-in [data-only="up"],.auth.mode-up [data-only="in"]{display:none}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.auth-done{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin:auto 0}
.auth-done h2{font-size:42px;font-weight:800}
.auth-done p{margin:0;color:var(--mut);font-weight:600}
.badge-ok{width:96px;height:96px;border-radius:30%;background:var(--grad);display:grid;place-items:center;animation:popin .6s cubic-bezier(.2,.9,.25,1.5) both;box-shadow:0 26px 50px -20px rgba(255,61,139,.7)}
.badge-ok path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .3s ease forwards}


@media (max-width:820px){.auth-card{grid-template-columns:minmax(0,1fr)}.auth-art{min-height:0;padding:20px}.spy,.aa-cards,.aa-quote,.aa-tip{display:none}.auth-art .aa-top{justify-content:center}}
@media (max-width:640px){.auth-side{padding:24px 18px 22px}.auth-card{border-radius:26px}.seg{width:100%}}

.auth:not(.mode-forgot) [data-only="forgot"]{display:none!important}.auth.mode-forgot [data-only="forgot"]{display:flex!important;justify-content:center}.mut-s{color:var(--mut,#56637F);font-size:13px;font-weight:600}

/* phone: the close button sits beside the Sign up / Log in switch, not on top of it */
@media (max-width:820px){.auth-side:has(.auth-x:not([hidden])) .seg{width:calc(100% - 50px)!important}.auth-x{top:14px;right:12px}}