html,body,#root{min-height:var(--app-height,100dvh);height:var(--app-height,100dvh)}
body{background:#000}
.splash-screen,.splash-cinematic,.splash-ghost-shell{min-height:var(--app-height,100dvh)!important;height:var(--app-height,100dvh)!important}
.splash-screen-ghost{
  background:
    radial-gradient(circle at 50% 14%, rgba(90,110,180,.20), transparent 24%),
    radial-gradient(circle at 50% 82%, rgba(24,78,132,.18), transparent 30%),
    linear-gradient(180deg,#03050a 0%,#000 42%,#010203 100%) !important;
}
.splash-noise,.splash-halo,.splash-vignette,.splash-ghost-ring,.splash-ghost-reveal,.splash-scan-line,.splash-glitch-overlay,.splash-subtitle,.splash-loading-panel{display:none!important}
.splash-cinematic{position:relative;overflow:hidden}
.splash-screen-ghost::before,
.splash-screen-ghost::after{
  content:"";
  position:absolute;
  top:7.5%;
  bottom:7.5%;
  width:min(26vw,146px);
  z-index:1;
  opacity:0;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
  animation:ngRaysIn .92s cubic-bezier(.22,1,.36,1) .08s forwards;
}
.splash-screen-ghost::before{
  left:max(-2vw,-12px);
  background:repeating-linear-gradient(-12deg, rgba(255,255,255,.94) 0 3px, transparent 3px 17px);
  clip-path:polygon(0 0,100% 8%,100% 92%,0 100%);
}
.splash-screen-ghost::after{
  right:max(-2vw,-12px);
  background:repeating-linear-gradient(12deg, rgba(255,255,255,.94) 0 3px, transparent 3px 17px);
  clip-path:polygon(0 8%,100% 0,100% 100%,0 92%);
}
.splash-ghost-shell{position:relative;max-width:none!important;width:100%!important;margin:0!important}
.splash-ghost-shell::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(78vw,420px);
  height:min(126vw,760px);
  transform:translate3d(-50%,-50%,0) scale(.84);
  border-radius:44px;
  z-index:1;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.05), transparent 22%),
    linear-gradient(180deg, rgba(10,13,20,.96) 0%, rgba(1,2,4,.985) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.035),
    0 26px 90px rgba(0,0,0,.62);
  animation:ngPanelExpand 1.05s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-ghost-shell::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(96vw,540px);
  height:min(144vw,900px);
  transform:translate3d(-50%,-50%,0);
  border-radius:56px;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 16%) top/100% 2px no-repeat,
    linear-gradient(0deg, rgba(255,255,255,.10), transparent 18%) bottom/100% 2px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.86), rgba(255,255,255,.70)) left center/2px 66% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.70), rgba(255,255,255,.86)) right center/2px 66% no-repeat;
  opacity:0;
  animation:ngFrameGlow 1.18s cubic-bezier(.22,1,.36,1) .06s forwards;
}
.splash-cinematic::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(99,160,255,.11), transparent 20%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 14%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%, rgba(255,255,255,.01) 70%, transparent 100%);
  opacity:0;
  animation:ngAtmosphere 1.3s ease-out forwards;
}
.splash-ghost-art-wrap{
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:21.5%!important;
  width:min(60vw,280px)!important;
  height:min(74vw,330px)!important;
  aspect-ratio:auto!important;
  transform:translate3d(-50%,0,0)!important;
  transform-origin:center center!important;
  overflow:visible!important;
  background:url('/assets/netghost-shield-logo-v4.webp') center center / contain no-repeat!important;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.12)) drop-shadow(0 18px 48px rgba(0,0,0,.6))!important;
  animation:ngLogoRise 1.15s cubic-bezier(.22,1,.36,1) forwards, ngLogoFloat 3.8s ease-in-out 1.15s infinite;
}
.splash-ghost-art-wrap::before{
  content:"";
  position:absolute;
  inset:-16% -18%;
  border-radius:999px;
  background:radial-gradient(circle at 50% 48%, rgba(255,255,255,.15), rgba(127,177,255,.10) 24%, transparent 62%);
  filter:blur(18px);
  opacity:.95;
  z-index:-1;
}
.splash-ghost-art{opacity:0!important;pointer-events:none!important}
.splash-copy{
  position:absolute!important;
  z-index:4!important;
  left:24px!important;
  right:24px!important;
  top:58.5%!important;
  bottom:auto!important;
  text-align:center!important;
  opacity:0;
  animation:ngCopyIn .78s cubic-bezier(.22,1,.36,1) .22s forwards;
}
.splash-brand{
  font-size:clamp(2.6rem,9vw,4rem)!important;
  line-height:.95!important;
  font-weight:900!important;
  letter-spacing:-.07em!important;
  color:#fff!important;
  text-shadow:0 0 30px rgba(255,255,255,.10),0 0 46px rgba(133,178,255,.18)!important;
}
@media (max-width:420px){
  .splash-ghost-shell::before{width:min(82vw,390px);height:min(136vw,760px);border-radius:38px}
  .splash-ghost-shell::after{width:min(100vw,500px);height:min(152vw,860px)}
  .splash-ghost-art-wrap{top:19.5%!important;width:min(67vw,260px)!important;height:min(84vw,330px)!important}
  .splash-copy{top:55.8%!important}
}
@media (max-height:760px){
  .splash-ghost-art-wrap{top:18%!important;width:min(54vw,240px)!important;height:min(68vw,290px)!important}
  .splash-copy{top:53.8%!important}
}
@keyframes ngPanelExpand{
  0%{opacity:.45;transform:translate3d(-50%,-50%,0) scale(.72,.82);border-radius:64px}
  62%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1.02,1.01);border-radius:40px}
  100%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1);border-radius:44px}
}
@keyframes ngFrameGlow{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.86)}
  70%{opacity:.95;transform:translate3d(-50%,-50%,0) scale(1.02)}
  100%{opacity:.88;transform:translate3d(-50%,-50%,0) scale(1)}
}
@keyframes ngRaysIn{
  0%{opacity:0;transform:scaleX(.5)}
  100%{opacity:.88;transform:scaleX(1)}
}
@keyframes ngLogoRise{
  0%{opacity:0;transform:translate3d(-50%,38px,0) scale(.88)!important}
  58%{opacity:1;transform:translate3d(-50%,-8px,0) scale(1.025)!important}
  100%{opacity:1;transform:translate3d(-50%,-2px,0) scale(1)!important}
}
@keyframes ngLogoFloat{
  0%,100%{transform:translate3d(-50%,-2px,0) scale(1)!important}
  50%{transform:translate3d(-50%,-10px,0) scale(1.012)!important}
}
@keyframes ngCopyIn{
  0%{opacity:0;transform:translateY(18px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes ngAtmosphere{
  0%{opacity:0}
  100%{opacity:1}
}

/* v5 devices fixes */
.device-delete-wide{
  width:auto !important;
  min-width:108px;
  height:40px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  white-space:nowrap;
  line-height:1;
}

.device-delete-wide svg{
  flex:0 0 auto;
}

@media (max-width:420px){
  .device-delete-wide{
    width:100% !important;
    min-width:0;
  }
}