/*
 * Shared native navigation (Home / Build / Nuvio / Updates).
 * Desktop/TV: left D-pad rail.
 * Phone/tablet: premium bottom navigation.
 */
#umSidebarNav {
  display:none;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:99990;
  width:76px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 6px;
  background:rgba(12,10,25,.94);
  border:1px solid rgba(155,95,255,.28);
  border-radius:0 20px 20px 0;
  box-shadow:14px 0 45px rgba(0,0,0,.48),0 0 30px rgba(123,47,255,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transform:translateX(-64px);
  transition:transform .18s ease;
}

html.native-app #umSidebarNav {
  display:flex;
}

#umSidebarNav:focus-within,
#umSidebarNav:hover {
  transform:translateX(0);
}

#umSidebarNav a {
  min-width:64px;
  min-height:48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#8888aa;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  border-radius:14px;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}

#umSidebarNav a:active {
  color:#fff;
  background:rgba(123,47,255,.16);
}

#umSidebarNav a.active {
  color:#9B5FFF;
}

#umSidebarNav svg {
  width:21px;
  height:21px;
}

@media (max-width:820px) {
  html.native-app #umSidebarNav {
    top:auto;
    left:14px;
    right:14px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;
    height:82px;
    padding:7px;
    flex-direction:row;
    justify-content:stretch;
    gap:4px;
    border:1px solid rgba(177,71,255,.62);
    border-radius:25px;
    background:
      radial-gradient(circle at 50% 110%,rgba(139,41,255,.16),transparent 45%),
      linear-gradient(180deg,rgba(21,12,52,.95),rgba(7,8,27,.97));
    box-shadow:
      0 20px 46px rgba(0,0,0,.52),
      0 0 26px rgba(139,45,255,.20),
      inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter:blur(20px) saturate(125%);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    transform:none;
  }

  html.native-app #umSidebarNav:focus-within,
  html.native-app #umSidebarNav:hover {
    transform:none;
  }

  html.native-app #umSidebarNav a {
    flex:1 1 25%;
    min-width:0;
    min-height:64px;
    gap:5px;
    padding:6px 2px 5px;
    border:1px solid transparent;
    border-radius:18px;
    color:#afa8cf;
    font-size:10px;
    font-weight:700;
  }

  html.native-app #umSidebarNav a svg {
    width:25px;
    height:25px;
    stroke-width:1.9;
  }

  html.native-app #umSidebarNav a.active {
    color:#d88bff;
    border-color:rgba(174,80,255,.18);
    background:
      radial-gradient(circle at 50% 15%,rgba(198,70,255,.22),transparent 52%),
      linear-gradient(180deg,rgba(113,31,215,.36),rgba(68,25,140,.30));
    box-shadow:
      0 0 24px rgba(154,45,255,.20),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  html.native-app #umSidebarNav a.active svg {
    color:#d958ff;
    filter:drop-shadow(0 0 7px rgba(214,65,255,.48));
  }

  html.native-app #umSidebarNav a:active {
    transform:scale(.97);
  }
}

@media (max-width:390px) {
  html.native-app #umSidebarNav {
    left:9px;
    right:9px;
    bottom:calc(7px + env(safe-area-inset-bottom));
    height:78px;
    border-radius:23px;
  }

  html.native-app #umSidebarNav a {
    min-height:60px;
    font-size:9px;
  }

  html.native-app #umSidebarNav a svg {
    width:23px;
    height:23px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #umSidebarNav,
  #umSidebarNav a {
    transition:none;
  }
}