body[data-socketjack-shell]{margin:0;background:#080d13;color:#edf5ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden}
body[data-socketjack-shell] #sj-navigation-pages{position:fixed;inset:0}
.sj-navigation-frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity 220ms ease,transform 240ms cubic-bezier(.22,.8,.25,1),border-radius 240ms ease;background:#080d13;transform-origin:50% 46%;backface-visibility:hidden}
.sj-navigation-frame.sj-navigation-active{pointer-events:auto;z-index:1}
.sj-navigation-frame.sj-navigation-visible{opacity:1}
.sj-navigation-frame.sj-navigation-out{opacity:.48;transform:translate3d(0,6px,0) scale(.986);border-radius:18px;pointer-events:none}
#sj-navigation-overlay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 46%,#172b3b24,#080d1359 72%);backdrop-filter:blur(4px);color:#edf5ff}
#sj-navigation-overlay[hidden],.sj-navigation-actions[hidden]{display:none!important}
.sj-navigation-progress{position:absolute;inset:0 0 auto;height:4px;overflow:hidden;background:#163d62}
.sj-navigation-progress:after{content:"";display:block;width:35%;height:100%;background:#56b8ff;animation:sj-navigation-bar 1.1s ease-in-out infinite}
.sj-navigation-notice{box-sizing:border-box;max-width:min(470px,calc(100vw - 32px));padding:28px 32px;border:1px solid #526b7e80;border-radius:21px;background:linear-gradient(145deg,#182a3bf5,#0e1926f5);box-shadow:0 24px 90px #0008,inset 0 1px #ffffff0b;text-align:center;animation:sj-navigation-notice-in 220ms cubic-bezier(.22,.8,.25,1) both}
.sj-navigation-notice h1{font:600 20px/1.35 system-ui,sans-serif;letter-spacing:0;margin:16px 0 10px;color:#f1f7ff}
.sj-navigation-notice p{font:14px/1.65 system-ui,sans-serif;letter-spacing:0;margin:0;color:#bacbdf;overflow-wrap:anywhere}
.sj-navigation-spinner{display:inline-block;width:28px;height:28px;border:3px solid #47708f;border-right-color:#77caff;border-radius:50%;animation:sj-navigation-spin .8s linear infinite}
.sj-navigation-logo{display:none;width:72px;height:72px;object-fit:contain;border-radius:18px;margin:0 auto 20px;filter:drop-shadow(0 8px 22px #5b7cfa30) drop-shadow(0 0 14px #34d5eb18)}
#sj-navigation-overlay.sj-navigation-initial .sj-navigation-logo{display:block}
.sj-navigation-initial .sj-navigation-notice{min-width:min(350px,calc(100vw - 32px));padding-top:31px;padding-bottom:31px}
.sj-navigation-initial .sj-navigation-spinner{width:23px;height:23px;border-width:2px}
.sj-navigation-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.sj-navigation-actions button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:120px;min-height:46px;padding:8px 16px;border:1px solid;border-radius:10px;font:600 14px/1.4 system-ui,sans-serif;cursor:pointer}
.sj-navigation-actions button span{font:28px/1 system-ui,sans-serif}
.sj-navigation-actions [data-sj-retry]{color:#8bd2ff;background:#10334f;border-color:#319ddd}
.sj-navigation-actions [data-sj-back]{color:#ffb2bb;background:#421f2a;border-color:#de6578}
.sj-navigation-actions button:hover{filter:brightness(1.2)}
.sj-navigation-actions button:focus-visible{outline:3px solid #fff;outline-offset:4px}
.sj-navigation-failed .sj-navigation-spinner,.sj-navigation-failed .sj-navigation-progress{display:none}
.sj-native-enter body{animation:sj-navigation-enter 160ms ease-out}
.sj-native-leaving body{opacity:.4;transition:opacity 150ms ease}
@keyframes sj-navigation-bar{from{transform:translateX(-110%)}to{transform:translateX(400%)}}
@keyframes sj-navigation-spin{to{transform:rotate(360deg)}}
@keyframes sj-navigation-enter{from{opacity:.25}to{opacity:1}}
@keyframes sj-navigation-notice-in{from{opacity:0;transform:translateY(10px) scale(.975)}to{opacity:1;transform:none}}

/* Morph the browser's transient page snapshots. Application DOM stays in its
   original frame, so editors, uploads and sockets retain normal lifecycles. */
html[data-sj-direction]{--sj-page-enter-x:34px;--sj-page-exit-x:-22px}
html[data-sj-direction=back]{--sj-page-enter-x:-34px;--sj-page-exit-x:22px}
.sj-navigation-morphing .sj-navigation-frame{transition:none;border-radius:0}
html[data-sj-direction]::view-transition-group(root){animation-duration:340ms;animation-timing-function:cubic-bezier(.22,.8,.25,1)}
html[data-sj-direction]::view-transition-image-pair(root){isolation:isolate}
html[data-sj-direction]::view-transition-old(root){animation:sj-page-surface-out 300ms cubic-bezier(.22,.8,.25,1) both;mix-blend-mode:normal;transform-origin:50% 46%}
html[data-sj-direction]::view-transition-new(root){animation:sj-page-surface-in 340ms cubic-bezier(.22,.8,.25,1) both;mix-blend-mode:normal;transform-origin:50% 46%}
.sj-navigation-surface-enter{animation:sj-page-surface-in 340ms cubic-bezier(.22,.8,.25,1) both}
.sj-navigation-surface-exit{animation:sj-page-surface-out 300ms cubic-bezier(.22,.8,.25,1) both}
@keyframes sj-page-surface-in{from{opacity:.18;transform:translate3d(var(--sj-page-enter-x,34px),5px,0) scale(.976);clip-path:inset(12px round 24px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);clip-path:inset(0 round 0px)}}
@keyframes sj-page-surface-out{from{opacity:1;transform:translate3d(0,0,0) scale(1);clip-path:inset(0 round 0px)}to{opacity:0;transform:translate3d(var(--sj-page-exit-x,-22px),0,0) scale(.966);clip-path:inset(15px round 26px)}}
@media(prefers-reduced-motion:reduce){.sj-navigation-frame,.sj-native-leaving body{transition:none}.sj-navigation-frame.sj-navigation-out{transform:none;border-radius:0;opacity:.8}.sj-native-enter body,.sj-navigation-notice,.sj-navigation-surface-enter,.sj-navigation-surface-exit{animation:none}.sj-navigation-progress:after{animation:none;width:100%}.sj-navigation-spinner{animation:none}html[data-sj-direction]::view-transition-group(root),html[data-sj-direction]::view-transition-old(root),html[data-sj-direction]::view-transition-new(root){animation:none}}
