body:has(.vx-login-experience){background:#160d29;color:#ede9fe}
.fi-simple-layout:has(.vx-login-experience){min-height:100svh;background:radial-gradient(ellipse at 22% 70%,#50217480,transparent 55%),repeating-radial-gradient(ellipse at 25% 55%,transparent 0 100px,#8b5cf609 102px 104px,transparent 106px 160px),#160d29}
.fi-simple-layout:has(.vx-login-experience) .fi-simple-main-ctn{min-height:100svh;display:flex;align-items:center;justify-content:flex-end;max-width:1280px;width:100%;margin:auto;padding:64px 40px;position:relative}
.fi-simple-layout:has(.vx-login-experience) .fi-simple-main{position:static!important;width:46%;max-width:520px;padding:38px;border-radius:24px;background:#fff;color:#24113f;border:1px solid #ede9fe;box-shadow:0 24px 90px #0004;overflow:visible}
.fi-simple-layout:has(.vx-login-experience) .fi-simple-header-heading{color:#24113f}
.fi-simple-layout:has(.vx-login-experience) .fi-simple-header-subheading{color:#6b607c}
.fi-simple-layout:has(.vx-login-experience) .fi-fo-field-label-content{color:#24113f}
.fi-simple-layout:has(.vx-login-experience) .fi-input-wrp{background:#faf9ff;border:1px solid #d9cdef;box-shadow:none}
.fi-simple-layout:has(.vx-login-experience) input{color:#24113f}
.fi-simple-layout:has(.vx-login-experience) a{color:#6d28d9}
.fi-simple-layout:has(.vx-login-experience) button[type=submit]{background:#6d28d9;color:white;border-radius:12px;min-height:48px}
.fi-simple-layout:has(.vx-login-experience) button[type=submit]:focus-visible{outline:3px solid #a78bfa;outline-offset:3px}
.vx-login-art{position:absolute;left:40px;top:50%;transform:translateY(-50%);width:47%;color:#fff}
.vx-wordmark{font-size:24px;letter-spacing:4px;font-weight:750}.vx-wordmark span{color:#b78aff}
.vx-login-art h2{font-size:clamp(36px,4.5vw,60px);line-height:1.08;letter-spacing:-2px;margin:38px 0 18px;font-weight:800}
.vx-login-art p{font-size:19px;color:#c9bddf;line-height:1.6}.vx-feature-pills{display:flex;gap:12px;margin-top:20px}.vx-feature-pills span{border:1px solid #9c6bdd55;border-radius:24px;padding:8px 18px;font-size:13px;color:#e9d5ff;background:#ffffff06}
.vx-capture-scene{position:relative;height:310px;margin-top:22px}.vx-platform{position:absolute;bottom:10px;left:9%;width:78%;height:65px;border:3px solid #a855f7;border-radius:50%;box-shadow:0 0 26px #a855f7,inset 0 0 25px #a855f7;background:repeating-radial-gradient(ellipse,#8b5cf622 0 12px,#a78bfa88 14px 15px,#0000 17px 25px)}
.vx-capture-ball{position:absolute;width:174px;height:174px;left:50%;top:36px;transform:translateX(-50%);filter:drop-shadow(0 0 24px #a855f766);animation:vx-ball-float 4s ease-in-out infinite;z-index:3}.vx-ball-top,.vx-ball-bottom{position:absolute;width:100%;height:50%;border:3px solid #d6bcfa;box-shadow:inset -20px 0 22px #26103a66}.vx-ball-top{top:0;border-radius:100px 100px 0 0;background:linear-gradient(135deg,#c4b5fd,#792ce4 55%,#3b0764);border-bottom:8px solid #28103f;transform-origin:center bottom;transition:transform .35s}.vx-ball-bottom{bottom:0;border-radius:0 0 100px 100px;background:linear-gradient(140deg,#fff,#c4b5fd);border-top:8px solid #28103f}.vx-ball-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:58px;width:58px;border:7px solid #341452;border-radius:50%;background:#8b35da;color:white;font-size:36px;line-height:42px;text-align:center;box-shadow:0 0 20px #c084fc}
.vx-trading-card{position:absolute;width:74px;height:106px;border:2px solid #d1adff;border-radius:9px;background:repeating-radial-gradient(circle,#562485 0 8px,#6c3995 10px 11px);box-shadow:0 0 24px #9333ea44,inset 0 0 0 5px #251239;color:#dfc6ff;font-size:46px;display:grid;place-items:center;animation:vx-card-float 5s ease-in-out infinite}.vx-card-one{left:6%;top:40px;rotate:-18deg}.vx-card-two{right:7%;top:0;rotate:18deg;animation-delay:-2s}.vx-card-three{right:2%;top:160px;rotate:14deg;animation-delay:-3s}.vx-orbit{position:absolute;left:3%;top:95px;width:92%;height:105px;border:2px solid #b47aff88;border-radius:50%;rotate:-16deg;box-shadow:0 0 18px #9333ea55}
.vx-capture-buddy{position:absolute;left:7%;bottom:25px;object-fit:contain;image-rendering:pixelated;z-index:4;transform-origin:170% -70%;transition:transform .65s,opacity .4s;filter:drop-shadow(0 4px 8px #0006)}
.vx-capture-beam{position:absolute;left:20%;bottom:65px;width:42%;height:90px;background:linear-gradient(100deg,transparent,#d8b4fe99);clip-path:polygon(0 50%,100% 0,100% 100%);opacity:0;filter:blur(4px);transition:opacity .3s}
.vx-login-greeting{display:flex;gap:12px;align-items:center;border-radius:14px;padding:12px;background:#f2ebff;color:#5b21b6;font-size:14px;font-weight:600;margin-bottom:12px}.vx-login-greeting img{object-fit:contain;image-rendering:pixelated}.vx-login-greeting small{display:block;font-size:12px;color:#75618c;font-weight:400;margin-top:3px}.vx-login-footer{text-align:center;font-size:12px;color:#867694;margin-top:20px}.vx-capture-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

body.vx-login-catching .vx-ball-top{transform:translateY(-22px) rotate(-12deg)}body.vx-login-catching .vx-capture-beam{opacity:1}body.vx-login-catching .vx-capture-buddy{transform:translate(110px,-90px) scale(0);opacity:0}
body.vx-login-caught .vx-capture-ball{animation:vx-ball-shake .4s ease-in-out 2}body.vx-login-caught .vx-capture-buddy{opacity:0}
@keyframes vx-ball-float{50%{transform:translate(-50%,-12px)}}@keyframes vx-card-float{50%{translate:0 -12px}}@keyframes vx-ball-shake{25%{transform:translateX(-50%) rotate(-10deg)}75%{transform:translateX(-50%) rotate(10deg)}}
@media(max-width:800px){.fi-simple-layout:has(.vx-login-experience) .fi-simple-main-ctn{padding:24px 16px;display:block}.fi-simple-layout:has(.vx-login-experience) .fi-simple-main{width:100%;max-width:480px;margin:230px auto 0;padding:26px}.vx-login-art{top:22px;left:50%;transform:translateX(-50%);width:min(90%,460px);text-align:center}.vx-wordmark{font-size:18px}.vx-login-art h2,.vx-login-art p,.vx-feature-pills{display:none}.vx-capture-scene{height:180px;margin:10px auto 0;width:280px}.vx-capture-ball{width:100px;height:100px;top:12px}.vx-ball-button{width:40px;height:40px;font-size:24px;border-width:5px;line-height:28px}.vx-trading-card{width:44px;height:62px;font-size:26px}.vx-card-one{top:20px}.vx-card-two{top:5px}.vx-card-three{top:95px}.vx-capture-buddy{width:70px;height:70px;bottom:15px}.vx-platform{height:36px}.vx-orbit{top:60px;height:60px}}
@media(prefers-reduced-motion:reduce){.vx-login-experience *{animation:none!important;transition:none!important}body.vx-login-catching .vx-capture-buddy{transform:none;opacity:1}}
/* The compiled panel theme supplies !important layout defaults. Override only
   this login page so its artwork and form occupy separate columns. */
body:has(.vx-login-experience) .fi-simple-layout{background:radial-gradient(ellipse at 22% 70%,#50217480,transparent 55%),repeating-radial-gradient(ellipse at 25% 55%,transparent 0 100px,#8b5cf609 102px 104px,transparent 106px 160px),#160d29!important;min-height:100svh!important}
body:has(.vx-login-experience) .fi-simple-main-ctn{width:100%!important;max-width:1280px!important;min-height:100svh!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;margin:0 auto!important;padding:56px 40px!important;position:relative!important}
body:has(.vx-login-experience) .fi-simple-main{width:44%!important;max-width:520px!important;min-width:0!important;margin:0 0 0 auto!important;padding:36px!important;background:#fff!important;border:1px solid #e9ddfa!important;border-radius:24px!important;box-shadow:0 24px 90px #0004!important;overflow:visible!important;flex:none!important}
body:has(.vx-login-experience) .vx-login-art{width:45%;max-width:550px;pointer-events:none}
@media(max-width:800px){body:has(.vx-login-experience) .fi-simple-main-ctn{display:block!important;padding:24px 16px!important}body:has(.vx-login-experience) .fi-simple-main{width:100%!important;max-width:480px!important;margin:230px auto 0!important;padding:26px!important}body:has(.vx-login-experience) .vx-login-art{width:min(90%,460px)}}

/* Use the configured brand artwork on the capsule and every card. */
.vx-wordmark{display:flex;align-items:center;gap:9px}.vx-wordmark img{width:42px;height:42px;object-fit:contain;filter:none;background:#fff;padding:3px;border-radius:10px}
.vx-trading-card img{width:72%;height:55%;object-fit:contain;filter:none;background:#fff;padding:5px;border-radius:8px}
.vx-ball-button{display:grid;place-items:center;background:#fff}.vx-ball-button img{width:90%;height:90%;object-fit:contain;filter:none}
/* The float lives on a separate layer so changing catch states never restarts it. */
.vx-ball-float{position:absolute;inset:0;z-index:3;pointer-events:none;animation:vx-float-layer 5.5s ease-in-out infinite;will-change:transform}
.vx-capture-ball{animation:none;will-change:transform}.vx-ball-top{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.vx-capture-buddy{transition:transform .65s cubic-bezier(.4,0,.2,1),opacity .5s ease .12s;will-change:transform,opacity}
.vx-login-art{animation:vx-login-arrive .8s cubic-bezier(.22,.61,.36,1) both}
body:has(.vx-login-experience) .fi-simple-main{animation:vx-form-arrive .7s cubic-bezier(.22,.61,.36,1) .12s both}
.vx-trading-card{animation-duration:6.5s;will-change:translate}
body.vx-login-caught .vx-capture-ball{animation:vx-ball-shake .65s ease-in-out 1}
body.vx-login-caught .vx-ball-button{box-shadow:0 0 35px #d8b4fe}

@keyframes vx-float-layer{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes vx-login-arrive{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes vx-form-arrive{from{opacity:0}to{opacity:1}}
@media(max-width:800px){.vx-wordmark{justify-content:center}.vx-wordmark img{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.vx-login-art,.vx-ball-float,body:has(.vx-login-experience) .fi-simple-main{animation:none!important;will-change:auto}.vx-login-experience *{transition:none!important}}

/* A separate body-level scene survives document navigation without changing
   the login form's containing block. The real page stays visible underneath. */
.vx-workspace-entry[hidden]{display:none!important}
html.vx-workspace-pending .vx-workspace-entry[hidden],.vx-workspace-entry:not([hidden]){display:grid!important}
.vx-workspace-entry{position:fixed;inset:0;z-index:10000;place-items:center;background:rgba(20,12,37,.8);backdrop-filter:blur(7px);color:#fff;opacity:1;transition:opacity .35s ease,background .3s ease,backdrop-filter .3s ease;isolation:isolate}
.vx-entry-content{width:min(92vw,460px);text-align:center;padding:24px;animation:vx-form-arrive .25s ease both}
.vx-entry-scene{position:relative;width:min(100%,350px);height:280px;margin:auto}
.vx-entry-scene .vx-capture-ball{top:58px;width:160px;height:160px}
.vx-entry-scene .vx-ball-button{display:grid;place-items:center;background:white}
.vx-entry-scene .vx-ball-button img{width:90%;height:90%;object-fit:contain}
.vx-entry-scene .vx-card-one{top:90px;left:0}.vx-entry-scene .vx-card-two{right:0;top:30px}.vx-entry-scene .vx-card-three{top:180px;right:12px}
.vx-entry-ring{position:absolute;left:15%;top:195px;width:70%;height:38px;border:2px solid #b47aff99;border-radius:50%;box-shadow:0 0 28px #9333ea66}
.vx-entry-title{font-size:23px;font-weight:700;line-height:1.4;margin:8px 0;color:#fff}.vx-entry-caption{font-size:14px;color:#d8cde9;margin:0 0 20px}
.vx-entry-loader{display:block;width:26px;height:26px;border:2px solid #ffffff33;border-top-color:#ddd6fe;border-radius:50%;animation:vx-entry-spin 1s linear infinite;margin:auto}
.vx-entry-continue{display:inline-block;margin-top:20px;font-size:13px;color:#fff;text-decoration:underline;padding:10px}.vx-entry-continue[hidden]{display:none!important}
.vx-entry-light{position:absolute;inset:10%;z-index:4;background:radial-gradient(ellipse,#fff 0%,#d8b4fe88 20%,#a855f700 65%);opacity:0;pointer-events:none;scale:.5;transition:opacity .45s ease,scale .55s ease}
.vx-workspace-entry.is-ready{background:rgba(20,12,37,.15);backdrop-filter:blur(0)}
.vx-workspace-entry.is-ready .vx-ball-top{transform:translateY(-65px) rotate(-18deg)}
.vx-workspace-entry.is-ready .vx-ball-bottom{translate:0 30px;transition:translate .5s ease}
.vx-workspace-entry.is-ready .vx-ball-button{opacity:0;transition:opacity .25s ease}
.vx-workspace-entry.is-ready .vx-entry-light{opacity:.85;scale:1.7}
.vx-workspace-entry.is-ready .vx-trading-card{translate:-18px -14px;transition:translate .6s ease;animation:none}
.vx-workspace-entry.is-ready .vx-card-two,.vx-workspace-entry.is-ready .vx-card-three{translate:20px -14px}
.vx-workspace-entry.is-leaving{opacity:0;pointer-events:none}
@keyframes vx-entry-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.vx-workspace-entry,.vx-workspace-entry *{animation:none!important;transition:none!important}.vx-entry-light{display:none}.vx-workspace-entry.is-ready .vx-ball-top,.vx-workspace-entry.is-ready .vx-ball-bottom{transform:none;translate:none}}

/* Installed app (iPhone): the page draws under the status bar and the home
   indicator. The brand line sat in the status bar, over the clock and battery,
   and the background stopped short of the bottom edge, leaving a dark band
   under the home indicator. env() is 0 in a browser tab, so nothing moves there. */
html:has(.vx-login-experience){background:#160d29}
body:has(.vx-login-experience) .fi-simple-layout{min-height:100lvh!important}
@media(max-width:800px){
body:has(.vx-login-experience) .vx-login-art{top:calc(22px + env(safe-area-inset-top,0px))}
body:has(.vx-login-experience) .fi-simple-main{margin-top:calc(230px + env(safe-area-inset-top,0px))!important;margin-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
}