@property --holo-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
dialog.holo-login{border:0;background:transparent;box-shadow:none!important;overflow:visible;padding:0;animation:none!important;border-radius:22px}
dialog.holo-login::backdrop{background:radial-gradient(ellipse at 50% 52%,#03142540,#010a15c8 78%);backdrop-filter:blur(6px) saturate(.85)}
#holoCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
#oceanAuthDialog.holo-login .login-panel{position:relative;z-index:2;border:0;border-radius:22px;background:linear-gradient(162deg,#1a4c6699,#0b2c43c9 42%,#06192bea);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);box-shadow:0 34px 100px #00081599,0 0 0 1px #9fd8ee12,inset 0 1px 0 #dff6ff30;clip-path:inset(0 0 calc((1 - var(--holo-reveal,0)) * 100%) 0 round 22px);overflow-x:hidden;overflow-y:auto;isolation:isolate;opacity:1;transform:none;transition:none}
#oceanAuthDialog.holo-login .login-panel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#93ddff1c 1px,transparent 1px),linear-gradient(90deg,#93ddff1c 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:linear-gradient(transparent calc(var(--scan-y,0px) - 150px),#000 var(--scan-y,0px),transparent calc(var(--scan-y,0px) + 1px));mask-image:linear-gradient(transparent calc(var(--scan-y,0px) - 150px),#000 var(--scan-y,0px),transparent calc(var(--scan-y,0px) + 1px));opacity:var(--scan-o,0);animation:none;transform:none;filter:none}
#oceanAuthDialog.holo-login .login-panel:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--water-x,50%) var(--water-y,0%),#8edcff17,transparent 60%),linear-gradient(180deg,#d7f3ff0f,transparent 22%);opacity:1}
.holo-frame{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:22px}
.holo-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.holo-trace{fill:none;stroke:url(#holoStroke);stroke-width:1.15;stroke-linecap:round;transition:opacity .8s}
.holo-head{fill:#f2fcff;opacity:0}
.holo-halo{fill:#8fe0ff;opacity:0;filter:blur(4px)}
.holo-idle .holo-trace{opacity:.42}
.holo-corner{position:absolute;width:15px;height:15px;opacity:0;transform:scale(.4);transition:opacity .35s,transform .55s cubic-bezier(.2,1.5,.4,1);border-color:#efd29b}
.holo-corner.tl{left:-8px;top:-8px;border-left:1.5px solid;border-top:1.5px solid;border-top-left-radius:4px;transform-origin:100% 100%}
.holo-corner.tr{right:-8px;top:-8px;border-right:1.5px solid;border-top:1.5px solid;border-top-right-radius:4px;transform-origin:0 100%}
.holo-corner.bl{left:-8px;bottom:-8px;border-left:1.5px solid;border-bottom:1.5px solid;border-bottom-left-radius:4px;transform-origin:100% 0}
.holo-corner.br{right:-8px;bottom:-8px;border-right:1.5px solid;border-bottom:1.5px solid;border-bottom-right-radius:4px;transform-origin:0 0}
.holo-cornered .holo-corner{opacity:.85;transform:none}
.holo-idle .holo-corner{opacity:.5}
.holo-scan{position:absolute;left:-14px;right:-14px;top:var(--scan-y,0px);height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,#8fe2ff 18%,#f4fdff 50%,#8fe2ff 82%,transparent);box-shadow:0 0 16px 2px #74d6ffaa,0 0 54px 10px #3fb4e640;opacity:var(--scan-o,0)}
.holo-orbit{position:absolute;inset:0;border-radius:22px;padding:1px;opacity:0;transition:opacity 1s;background:conic-gradient(from var(--holo-angle),transparent 0 62%,#7fdcff00 66%,#9fe7ff 76%,#f1d49c 81%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.holo-idle .holo-orbit{opacity:.9;animation:holoOrbit 7s linear infinite}
@keyframes holoOrbit{to{--holo-angle:360deg}}
.holo-eyebrow{display:flex;align-items:center;gap:10px;margin-right:46px!important;font:500 10px/1 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.32em;color:#9fdcf2;min-height:12px;margin:-4px 0 4px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s}
.holo-eyebrow b{width:7px;height:7px;border:1px solid #efd29b;transform:rotate(45deg);flex:none}
.holo-eyebrow em{flex:1;height:1px;background:linear-gradient(90deg,#8fdcff55,transparent);transform:scaleX(0);transform-origin:left;transition:transform .9s .25s cubic-bezier(.2,.8,.2,1)}
.content-ready .holo-eyebrow{opacity:1;transform:none}.content-ready .holo-eyebrow em{transform:none}
#oceanAuthDialog.holo-login .gate-title,#oceanAuthDialog.holo-login .gate-sub,#oceanAuthDialog.holo-login #oceanAuthFields>*,#oceanAuthDialog.holo-login .gate-beian{opacity:0;transform:translateY(12px);filter:blur(5px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s}
#oceanAuthFields{opacity:1!important;transition:none!important}
#oceanAuthDialog.holo-login.content-ready .gate-title,#oceanAuthDialog.holo-login.content-ready .gate-sub,#oceanAuthDialog.holo-login.content-ready #oceanAuthFields>*,#oceanAuthDialog.holo-login.content-ready .gate-beian{opacity:1;transform:none;filter:none}
#oceanAuthDialog.holo-login.content-ready .gate-title{transition-delay:.04s}
#oceanAuthDialog.holo-login.content-ready .gate-sub{transition-delay:.1s}
#oceanAuthDialog.holo-login.content-ready #oceanAuthFields>:nth-child(1){transition-delay:.16s}
#oceanAuthDialog.holo-login.content-ready #oceanAuthFields>:nth-child(2){transition-delay:.22s}
#oceanAuthDialog.holo-login.content-ready #oceanAuthFields>:nth-child(3){transition-delay:.26s}
#oceanAuthDialog.holo-login.content-ready #oceanAuthFields>:nth-child(n+4){transition-delay:.3s}
#oceanAuthDialog.holo-login.content-ready .gate-beian{transition-delay:.4s}
#oceanAuthDialog.holo-login .gate-title{font-size:30px;font-weight:500;letter-spacing:.06em;background:linear-gradient(100deg,#f4faff 30%,#bfe9f7 60%,#efd6a6);-webkit-background-clip:text;background-clip:text;color:transparent}
#oceanAuthDialog.holo-login .field{position:relative}
#oceanAuthDialog.holo-login .field label{letter-spacing:.08em}
#oceanAuthDialog.holo-login .field input{background:#03152699;border:1px solid #9fd4ea33;box-shadow:inset 0 1px 10px #0008184d;transition:border-color .3s,box-shadow .3s,background .3s;color:#e6f4fa}
#oceanAuthDialog.holo-login .field input:hover{border-color:#a9dcef55}
#oceanAuthDialog.holo-login .field input:focus{outline:none;border-color:#9fe3fa;background:#05203699;box-shadow:0 0 0 3px #74d4ff1f,0 0 26px #64ccf622,inset 0 1px 10px #0008184d}
#oceanAuthDialog.holo-login .field:after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#c9f3ff,transparent);transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#oceanAuthDialog.holo-login .field:focus-within:after{transform:scaleX(1)}
#oceanAuthDialog.holo-login #gate-go{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(115deg,#22708c,#103a57 55%,#1a5675);border:1px solid #a6e2f566;color:#f6e6c4;letter-spacing:.3em;font-weight:500;box-shadow:0 12px 30px #0010218c,inset 0 1px 0 #d9f6ff40,0 0 0 0 #7fdcff00;transition:transform .25s,box-shadow .3s,border-color .3s}
#oceanAuthDialog.holo-login #gate-go:after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(90deg,transparent,#e9fbff40,transparent);transform:translateX(-140%) skewX(-22deg);z-index:-1}
#oceanAuthDialog.holo-login.holo-idle #gate-go:after{animation:holoSweep 4.6s 1s ease-in-out infinite}
#oceanAuthDialog.holo-login #gate-go:hover{transform:translateY(-2px);border-color:#c9f1ff;box-shadow:0 16px 36px #001021a6,inset 0 1px 0 #d9f6ff55,0 0 28px #6fd2ff33}
#oceanAuthDialog.holo-login #gate-go:active{transform:translateY(0) scale(.985)}
@keyframes holoSweep{0%{transform:translateX(-140%) skewX(-22deg)}45%,100%{transform:translateX(420%) skewX(-22deg)}}
#oceanAuthDialog.holo-login .close{z-index:6;width:40px;height:40px;right:10px;top:10px;border-radius:50%;display:grid;place-items:center;background:#0a2a3fb3;border:1px solid #a9d8ea3d;color:#d3ecf5;font-size:19px;transition:transform .35s cubic-bezier(.2,1.4,.4,1),background .25s,border-color .25s;opacity:0}
#oceanAuthDialog.holo-login.content-ready .close{opacity:1;transition:opacity .4s,transform .35s cubic-bezier(.2,1.4,.4,1),background .25s}
#oceanAuthDialog.holo-login .close:hover{transform:rotate(90deg);background:#14506ccc;border-color:#bfeaf8}
.holo-skip{position:absolute;z-index:6;left:50%;bottom:-46px;transform:translateX(-50%);background:#06213599;border:1px solid #a9d6e83a;color:#b7d7e4;font-size:11px;letter-spacing:.1em;padding:7px 16px;border-radius:100px;min-height:32px;backdrop-filter:blur(8px)}
.holo-skip[hidden]{display:none}
@media(max-width:550px){dialog.holo-login{width:calc(100vw - 32px)}#oceanAuthDialog.holo-login .login-panel{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}#oceanAuthDialog.holo-login .gate-title{font-size:26px}.holo-eyebrow{font-size:9px;letter-spacing:.26em}#oceanAuthDialog.holo-login .close{width:44px;height:44px;right:6px;top:6px}}
@media(max-height:560px){.holo-skip{bottom:10px;left:auto;right:64px;transform:none}}
@media(prefers-reduced-motion:reduce){.holo-orbit,.holo-idle .holo-orbit,#oceanAuthDialog.holo-login.holo-idle #gate-go:after{animation:none}#oceanAuthDialog.holo-login .gate-title,#oceanAuthDialog.holo-login .gate-sub,#oceanAuthDialog.holo-login #oceanAuthFields>*,#oceanAuthDialog.holo-login .gate-beian,.holo-eyebrow,.holo-corner{transition:none!important;filter:none!important}}