.mobile-top-shell{
  display:none;
}

:root{
  --mobile-top-shell-header-height:68px;
  --mobile-top-shell-safe-top:env(safe-area-inset-top, 0px);
  --mobile-top-shell-header-safe-height:calc(var(--mobile-top-shell-header-height) + var(--mobile-top-shell-safe-top));
}

@keyframes mobileTopShellHeaderGradientShift{
  0%{background-position:0% 50%, 0% 50%, 0% 50%, 100% 50%;}
  50%{background-position:58% 50%, 54% 50%, 52% 50%, 46% 50%;}
  100%{background-position:0% 50%, 0% 50%, 0% 50%, 100% 50%;}
}

@keyframes mobileTopShellHeaderGlowDrift{
  0%{transform:translate3d(-3%, 0, 0) scale(1);}
  50%{transform:translate3d(3%, -0.5%, 0) scale(1.015);}
  100%{transform:translate3d(-3%, 0, 0) scale(1);}
}

@keyframes mobileTopShellHeaderSheen{
  0%{transform:translate3d(-10%, 0, 0); opacity:.08;}
  50%{transform:translate3d(10%, 0, 0); opacity:.14;}
  100%{transform:translate3d(-10%, 0, 0); opacity:.08;}
}

body.mobile-top-shell-active{
  overflow-x:hidden;
  padding-top:calc(var(--mobile-top-shell-header-safe-height) + 10px);
  overscroll-behavior:none;
  min-height:100svh;
  background:var(--ui-bg);
}

body.mobile-top-shell-active.content-page{
  padding-top:calc(var(--mobile-top-shell-header-safe-height) + 16px) !important;
  padding-left:max(16px, env(safe-area-inset-left)) !important;
  padding-right:max(16px, env(safe-area-inset-right)) !important;
  padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;
}

body.mobile-top-shell-active .mobile-top-shell{
  display:block;
}

.mobile-top-shell__header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:7px;
  height:var(--mobile-top-shell-header-safe-height);
  padding:calc(var(--mobile-top-shell-safe-top) + 5px) 12px 7px;
  background:
    radial-gradient(circle at 16% 24%, rgba(103,112,255,0.14) 0%, rgba(103,112,255,0.04) 24%, rgba(103,112,255,0) 48%),
    linear-gradient(118deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 26%, rgba(255,255,255,0) 44%),
    linear-gradient(90deg, #0b0838 0%, #32145d 54%, #7c244f 100%),
    linear-gradient(145deg, rgba(11,8,56,0.985) 0%, rgba(45,20,86,0.955) 58%, rgba(124,36,79,0.965) 100%);
  background-size:140% 140%, 180% 180%, 150% 150%, 150% 150%;
  background-position:0% 50%, 0% 50%, 0% 50%, 100% 50%;
  animation:mobileTopShellHeaderGradientShift 32s cubic-bezier(.4,0,.2,1) infinite;
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 22px rgba(8,15,34,0.16);
  overflow:hidden;
  contain:paint;
}

.mobile-top-shell__header::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 34%, rgba(108,114,255,0.11) 0%, rgba(108,114,255,0.03) 18%, rgba(108,114,255,0) 38%),
    radial-gradient(circle at 74% 18%, rgba(214,92,164,0.08) 0%, rgba(214,92,164,0.025) 20%, rgba(214,92,164,0) 42%),
    radial-gradient(circle at 88% 76%, rgba(245,129,181,0.07) 0%, rgba(245,129,181,0.02) 20%, rgba(245,129,181,0) 42%);
  opacity:.54;
  pointer-events:none;
  animation:mobileTopShellHeaderGlowDrift 38s cubic-bezier(.4,0,.2,1) infinite;
}

.mobile-top-shell__header::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.012) 18%, rgba(255,255,255,0) 42%),
    linear-gradient(104deg, rgba(255,255,255,0) 18%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.015) 50%, rgba(255,255,255,0) 66%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
  background-size:100% 100%, 150% 100%, 220px 220px;
  background-position:center, center, center;
  mix-blend-mode:screen, screen, soft-light;
  pointer-events:none;
  animation:mobileTopShellHeaderSheen 28s cubic-bezier(.4,0,.2,1) infinite;
  opacity:.72;
}

.mobile-top-shell__header > *{
  position:relative;
  z-index:1;
}

.mobile-top-shell__icon-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:#fff;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,255,255,0.08);
}

.mobile-top-shell__icon-btn svg{
  width:20px;
  height:20px;
  stroke-width:2.1;
}

.mobile-top-shell__brand{
  appearance:none;
  border:none;
  background:none;
  color:#fff;
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  font-family:var(--font-ui);
  font-weight:800;
  letter-spacing:-0.03em;
  text-decoration:none;
  padding:0;
  border-radius:999px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,255,255,0.08);
}

.mobile-top-shell__brand-main{
  font-size:1.48rem;
  line-height:1;
}

.mobile-top-shell__brand-dot{
  font-size:0.72rem;
  color:rgba(255,255,255,0.72);
  line-height:1;
}

.mobile-top-shell__overlay{
  position:fixed;
  inset:0;
  z-index:1180;
  background:rgba(15,23,42,0.34);
}

.mobile-top-shell__sidebar{
  position:fixed;
  top:var(--mobile-top-shell-header-safe-height);
  left:0;
  bottom:0;
  width:var(--mobile-sidebar-width);
  z-index:1190;
  background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,252,0.99) 100%);
  border-right:1px solid rgba(15,23,42,0.08);
  padding:10px 16px 18px;
  overflow:auto;
  overscroll-behavior:contain;
  box-shadow:0 22px 42px rgba(8,15,34,0.14);
}

.mobile-top-shell__nav,
.mobile-top-shell__group,
.mobile-top-shell__submenu{
  display:flex;
  flex-direction:column;
}

.mobile-top-shell__group + .mobile-top-shell__group{
  margin-top:10px;
}

.mobile-top-shell__group-toggle,
.mobile-top-shell__link{
  appearance:none;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  min-height:52px;
  width:100%;
  padding:0 6px;
  color:#090979;
  text-decoration:none;
  border-bottom:1px solid rgba(15,23,42,0.08);
  font-size:1rem;
  font-weight:600;
  text-align:left;
  gap:12px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(18,26,49,0.08);
}

.mobile-top-shell__group-toggle{
  justify-content:space-between;
  gap:8px;
}

.mobile-top-shell__group-toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:rgba(9,9,121,0.62);
  transition:transform .2s ease;
}

.mobile-top-shell__group.is-open .mobile-top-shell__group-toggle-icon{
  transform:rotate(180deg);
}

.mobile-top-shell__submenu{
  display:none;
}

.mobile-top-shell__group.is-open .mobile-top-shell__submenu{
  display:flex;
}

.mobile-top-shell__link svg{
  width:20px;
  height:20px;
  stroke-width:2;
}

.mobile-top-shell__icon-btn:hover,
.mobile-top-shell__icon-btn:active,
.mobile-top-shell__group-toggle:hover,
.mobile-top-shell__group-toggle:active,
.mobile-top-shell__link:hover,
.mobile-top-shell__link:active{
  background:rgba(9,9,121,0.06);
}

.mobile-top-shell__icon-btn:focus-visible,
.mobile-top-shell__brand:focus-visible,
.mobile-top-shell__group-toggle:focus-visible,
.mobile-top-shell__link:focus-visible{
  outline:2px solid rgba(255,255,255,0.78);
  outline-offset:2px;
}

.mobile-top-shell__link[aria-current="page"]{
  color:#090979;
  font-weight:700;
  background:rgba(9,9,121,0.08);
}

.mobile-top-shell__footer{
  margin-top:18px;
  padding:14px 6px calc(14px + env(safe-area-inset-bottom));
  font-size:11px;
  line-height:1.45;
  color:rgba(9,9,121,0.62);
  border-top:1px solid rgba(15,23,42,0.08);
}

.mobile-top-shell__footer-link{
  color:inherit;
  font:inherit;
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(18,26,49,0.08);
}

.mobile-top-shell__footer-link:hover,
.mobile-top-shell__footer-link:focus-visible,
.mobile-top-shell__footer-link[aria-current="page"]{
  color:#090979;
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:720px){
  :root{
    --mobile-top-shell-header-height:68px;
  }
  .mobile-top-shell__header{
    gap:10px;
    padding:calc(var(--mobile-top-shell-safe-top) + 8px) 12px 10px;
  }
  .mobile-top-shell__icon-btn{
    width:44px;
    height:44px;
    border-radius:999px;
    background:transparent;
  }
  .mobile-top-shell__icon-btn svg{
    width:22px;
    height:22px;
  }
  .mobile-top-shell__brand{
    border-radius:999px;
    background:none;
  }
  .mobile-top-shell__brand-main{
    font-size:1.52rem;
  }
  .mobile-top-shell__brand-dot{
    font-size:0.74rem;
  }
  .mobile-top-shell__sidebar{
    box-shadow:none;
    padding:8px 14px 16px;
  }
  .mobile-top-shell__group-toggle,
  .mobile-top-shell__link{
    min-height:48px;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-top-shell__group-toggle:hover,
  .mobile-top-shell__group-toggle:active,
  .mobile-top-shell__link:hover,
  .mobile-top-shell__link:active,
  .mobile-top-shell__icon-btn:hover,
  .mobile-top-shell__icon-btn:active,
  .mobile-top-shell__brand:hover,
  .mobile-top-shell__brand:active{
    background:transparent !important;
  }
  .mobile-top-shell__group-toggle:focus-visible,
  .mobile-top-shell__link:focus-visible,
  .mobile-top-shell__icon-btn:focus-visible,
  .mobile-top-shell__brand:focus-visible{
    outline:none !important;
    box-shadow:none !important;
  }
  .mobile-top-shell__group-toggle-icon{
    transition:none;
  }
}