#navigation {
  transition: width var(--transition-fast);
}

@media (max-width: 480px) {
  #navigation {
    position: relative;
    height: var(--height-nav);
  }

  #navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--width-stroke);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-border) 40%, transparent) 15%, var(--color-border) 50%, color-mix(in srgb, var(--color-border) 40%, transparent) 85%, transparent 100%);
  }
}

@media (min-width: 481px) {
  #navigation {
    display: grid;
    overflow: hidden;
    grid-template-rows: var(--height-header) minmax(0, 1fr) max-content;
  }
}

@media (min-width: 769px) {
  #navigation:not(.isHidden) {
    width: var(--width-nav);
  }
}



/* === navigation__header === */
#navigation #navigation__header {
  padding: 0 calc(var(--gap-lg) / 2);
  margin: 0 calc(var(--gap-lg) / 2) calc(var(--gap-lg) / 2);
  border-bottom: var(--width-stroke) solid var(--color-border);
  transition: padding var(--transition-fast);
  height: var(--height-header);
}

@media (max-width: 480px) {
  #navigation #navigation__header {
    display: none;
  }
}

#navigation.isHidden #navigation__header,
#navigation.isHidden #navigation__header .toggleNav {
  justify-content: center;
}

@media (max-width: 768px) {

  #navigation #navigation__header,
  #navigation #navigation__header .toggleNav {
    justify-content: center !important;
  }
}

#navigation.isHidden #navigation__logo {
  display: none;
}

@media (max-width: 768px) {
  #navigation #navigation__logo {
    display: none;
  }
}

#navigation #navigation__header .toggleNav {
  display: flex;
  align-items: center;
  justify-content: right;
}

#navigation #navigation__header .toggleNav svg {
  width: calc(var(--size-icon-sm) / 1.2);
  height: calc(var(--size-icon-sm) / 1.2);
  transform: rotate(180deg);
  transition: transform var(--transition-fast);
}

#navigation.isHidden #navigation__header .toggleNav svg {
  transform: rotate(0);
}

@media (max-width: 768px) {
  #navigation #navigation__header .toggleNav svg {
    display: none;
  }
}

#navigation #navigation__header .toggleNav img {
  width: calc(var(--size-icon-sm) / 1.2);
  height: calc(var(--size-icon-sm) / 1.2);
}

@media (min-width: 769px) {
  #navigation #navigation__header .toggleNav img {
    display: none;
  }
}



/* === navigation__logo === */
#navigation__logo {
  display: flex;
  align-items: center;
}

#navigation__logo img {
  width: calc(var(--size-icon-sm) / 1.2);
  margin-right: var(--gap-xs);
}

#navigation__logo span {
  font-weight: var(--font-weight-black);
}



/* === navigation__body === */
@media (max-width: 480px) {
  #navigation #navigation__body {
    height: 100%;
  }
}

@media (min-width: 481px) {
  #navigation #navigation__body {
    overflow-y: scroll;
    padding: calc(var(--gap-lg) / 2);
  }
}

#navigation #navigation__body .part_nav:not(:first-of-type) {
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: var(--width-stroke) solid var(--color-border);
}

@media (max-width: 480px) {
  #navigation #navigation__body #menu.part_nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
  }
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav:not(#menu) {
    display: none !important;
  }
}

#navigation #navigation__body .part_nav .title {
  text-transform: uppercase;
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  padding-left: calc(var(--gap-lg) / 2);
  margin-bottom: var(--gap-xs);
}

@media (max-width: 480px) {
  #navigation #navigation__body #menu.part_nav .title {
    display: none !important;
  }
}

#navigation.isHidden #navigation__body .part_nav .title {
  padding-left: 0;
  text-align: center;
}

@media (max-width: 768px) {
  #navigation #navigation__body .part_nav .title {
    padding-left: 0;
    text-align: center;
  }
}

#navigation #navigation__body .part_nav .item {
  color: var(--text-muted);
  border-radius: var(--radius-xs);
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item {
    margin: 0;
  }
}

@media (min-width: 481px) {
  #navigation #navigation__body #menu.part_nav [routeName="settings"] {
    display: none;
  }
}

#navigation #navigation__body .part_nav .item.active {
  color: var(--text-primary);
}

#navigation #navigation__body .part_nav .item.active,
#navigation #navigation__body .part_nav .item.isDisplay {
  pointer-events: none;
}

#navigation #navigation__body .part_nav .item .main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-xs);
  transition: all var(--transition-fast);
}

#navigation #navigation__body .part_nav .item.active .main {
  background: var(--bg-secondary);
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item .main {
    padding: 0;
    width: 100%;
    height: 100%;
  }

  #navigation #navigation__body .part_nav .item.active .main {
    background: var(--bg-transparent);
  }
}

#navigation.isHidden #navigation__body .part_nav .item .main {
  justify-content: center;
}

@media (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .main {
    justify-content: center;
  }
}

#navigation #navigation__body .part_nav .item .main svg {
  width: calc(var(--size-icon-sm) / 1.2);
  height: calc(var(--size-icon-sm) / 1.2);
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item .main svg {
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }
}

#navigation #navigation__body .part_nav .item .main .left,
#navigation #navigation__body .part_nav .item .main .right {
  display: flex;
  align-items: center;
  text-transform: capitalize;
}

#navigation #navigation__body .part_nav .item .main .left {
  padding: calc(var(--gap-lg) / 2.5) calc(var(--gap-lg) / 2);
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item .main .left {
    display: grid;
    place-content: center;
    width: 100%;
    height: 100%;
  }
}

#navigation #navigation__body .part_nav .item .main .left svg {
  margin-right: var(--gap-xs);
  stroke: var(--text-muted);
}

#navigation.isHidden #navigation__body .part_nav .item .main .left svg {
  margin-right: 0;
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item .main .left svg {
    margin: 0 auto;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .main .left svg {
    margin-right: 0;
  }
}

#navigation #navigation__body .part_nav .item.item.active .main .left svg .stroke {
  display: none;
}

#navigation #navigation__body .part_nav .item .main .left svg .fill {
  fill: var(--text-primary);
  stroke: none;
}

#navigation #navigation__body .part_nav .item:not(.active) .main .left svg .fill {
  display: none;
}

#navigation #navigation__body .part_nav .item.active[routeName="download"] .main .left svg .fill {
  stroke: var(--text-primary);
  fill: none !important;
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item.active .main .left svg .fill {
    fill: var(--color-accent);
  }

  #navigation #navigation__body .part_nav .item.active[routeName="download"] .main .left svg .fill {
    stroke: var(--color-accent);
  }
}

#navigation.isHidden #navigation__body .part_nav .item .main .left span {
  display: none;
}

@media (min-width: 481px) and (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .main .left span {
    display: none;
  }
}

#navigation #navigation__body .part_nav .item .main .right {
  display: none;
  justify-content: center;
  padding: calc(var(--gap-lg) / 2.5) calc(var(--gap-lg) / 2);
}

#navigation #navigation__body .part_nav .item.active .main .right,
#navigation #navigation__body .part_nav .item.isDisplay .main .right {
  pointer-events: auto;
}

#navigation #navigation__body .part_nav .item.active .main .right {
  display: flex;
}

#navigation.isHidden #navigation__body .part_nav .item .main .right {
  display: none;
}

#navigation #navigation__body .part_nav .item[others="0"] .main .right {
  display: none;
}

@media (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .main .right {
    display: none !important;
  }
}

#navigation #navigation__body .part_nav .item .main .right svg {
  transform: rotate(-90deg);
  transition: transform var(--transition-slow);
}

#navigation #navigation__body .part_nav .item.isDisplay .main .right svg {
  transform: rotate(90deg);
}



/* === others === */
#navigation #navigation__body .part_nav .item .others {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow), margin var(--transition-slow), height var(--transition-fast);
  margin-left: calc((var(--size-icon-sm) / 1.2) + (var(--gap-md) + var(--gap-xs)));
  height: 0;
  pointer-events: none;
}

#navigation #navigation__body .part_nav .item.isDisplay .others {
  height: 100%;
}

#navigation.isHidden #navigation__body .part_nav .item .others,
#navigation #navigation__body .part_nav .item:not(.isDisplay) .others {
  overflow: hidden;
}

@media (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .others {
    overflow: hidden;
  }
}

#navigation #navigation__body .part_nav .item.isDisplay .others {
  grid-template-rows: 1fr;
  margin-top: var(--gap-md);
  margin-bottom: var(--gap-md);
}

#navigation.isHidden #navigation__body .part_nav .item .others::before {
  background: var(--bg-transparent);
}

#navigation.isHidden #navigation__body .part_nav .item.isDisplay .others {
  margin-left: 0;
}

#navigation #navigation__body .part_nav .item .others .other {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

#navigation #navigation__body .part_nav .item .others .other.active {
  opacity: 1;
}

#navigation #navigation__body .part_nav .item .others .other:not(:last-of-type) {
  margin-bottom: var(--gap-xs);
}

#navigation.isHidden #navigation__body .part_nav .item.isDisplay .others .other {
  justify-content: center;
}

#navigation #navigation__body .part_nav .item .others .other .point {
  width: 5px;
  height: 5px;
  background: var(--color-accent-light);
  border-radius: var(--radius-full);
  margin-left: -2px;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

#navigation #navigation__body .part_nav .item .others .other .other_title {
  font-size: var(--font-size-tiny);
  color: var(--text-primary);
  margin-left: 10px;
  white-space: nowrap;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
  line-height: 1;
}

#navigation.isHidden #navigation__body .part_nav .item .others .other .other_title {
  display: none;
}

@media (max-width: 768px) {
  #navigation #navigation__body .part_nav .item .others::before {
    background: var(--bg-transparent);
  }

  #navigation #navigation__body .part_nav .item.isDisplay .others {
    margin-left: 0;
  }

  #navigation #navigation__body .part_nav .item.isDisplay .others .other {
    justify-content: center;
  }

  #navigation #navigation__body .part_nav .item .others .other .other_title {
    display: none;
  }
}

@media (max-width: 480px) {
  #navigation #navigation__body .part_nav .item .others {
    display: none;
  }
}



/* === navigation__footer === */
#navigation #navigation__footer {
  margin: 0 calc(var(--gap-lg) / 2) calc(var(--gap-lg) / 2);
  padding-top: calc(var(--gap-lg) / 2);
  border-top: var(--width-stroke) solid var(--color-border);
}



/* === profile === */
#navigation #navigation__footer .profile {
  padding: var(--gap-2xs) var(--gap-xs);
  background: var(--bg-elevated-95);
  border-radius: var(--radius-xs);
}

#navigation.isHidden #navigation__footer .profile {
  background: var(--bg-transparent);
  width: max-content;
  margin: auto;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile {
    background: var(--bg-transparent);
    width: max-content;
    margin: auto;
  }
}

#navigation.isHidden #navigation__footer .profile {
  padding: 0;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile {
    padding: 0;
  }
}

#navigation #navigation__footer .profile .left {
  font-size: var(--font-size-xs);
  text-transform: capitalize;
}

#navigation.isHidden #navigation__footer .profile .left {
  width: max-content;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile .left {
    width: max-content;
  }
}

#navigation #navigation__footer .profile .left .part_img {
  display: grid;
  place-items: center;
  width: calc((var(--size-icon-sm) / 1.2) * 2.5);
  height: calc((var(--size-icon-sm) / 1.2) * 2.5);
  margin-right: var(--gap-xs);
  background: var(--bg-secondary);
  border: var(--width-stroke) solid var(--color-border);
  border-radius: var(--radius-full);
}

#navigation.isHidden #navigation__footer .profile .left .part_img {
  margin: 0;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile .left .part_img {
    margin: 0;
  }
}

#navigation #navigation__footer .profile .left .part_img img,
#navigation #navigation__footer .profile .left .part_img svg {
  margin: auto;
}

#navigation #navigation__footer .profile .left .part_img svg,
#navigation #navigation__footer .profile .right svg {
  width: calc(var(--size-icon-sm) / 1.2);
}

#navigation.isHidden #navigation__footer .profile .left .part_pseudo {
  display: none;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile .left .part_pseudo {
    display: none;
  }
}

#navigation #navigation__footer .profile .right {
  display: none;
  place-items: center;
  width: calc((var(--size-icon-sm) / 1.2) * 2);
  height: calc((var(--size-icon-sm) / 1.2) * 2);
}

#navigation.isHidden #navigation__footer .profile .right {
  display: none !important;
}

@media (max-width: 768px) {
  #navigation #navigation__footer .profile .right {
    display: none !important;
  }
}

#navigation #navigation__footer .profile .right svg {
  margin: auto;
}



/*[ui-type="navigation"] {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin: 0 auto;
  transition: all var(--transition-fast);
  position: relative;
  background: var(--bg-primary);
}

html[nav="0"] [ui-type="navigation"],
html[selecting="download"] [ui-type="navigation"] {
  display: none !important;
}

@media screen and (max-width: 480px) {
  [ui-type="navigation"] {
    width: 100%;
  }

  [ui-type="navigation"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--width-stroke);
    background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--color-border) 40%, transparent) 15%, var(--color-border) 50%, color-mix(in srgb, var(--color-border) 40%, transparent) 85%, transparent 100%);
  }
}

@media screen and (min-width: 481px) {
  [ui-type="navigation"] {
    order: 1;
    padding: env(safe-area-inset-top) 0 0;
  }

  html[device="ua-mo"] [ui-type="navigation"],
  html[device="tp-mo"] [ui-type="navigation"] {
    width: max-content;
  }
}

@media screen and (min-width: 769px) {
  [ui-type="navigation"] {
    width: calc(var(--container-xs) / 2);
  }

  html[device="ua-tv"] [ui-type="navigation"],
  [ui-type="navigation"].hidden {
    width: max-content;
  }
}



/* === section === * /
[ui-type="navigation"] section {
  display: none;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  height: 100%;
}



/* === home section === * /
html[nav="1"] [ui-type="navigation"] section[section="home"] {
  display: grid;
  position: relative;
}

@media screen and (max-width: 480px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] {
    padding-top: var(--gap-xs);
  }
}

@media screen and (min-width: 481px) and (max-width: 728px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] {
    padding: var(--gap-lg);
  }

  html[nav="1"][device="ua-mo"] [ui-type="navigation"] section[section="home"],
  html[nav="1"][device="tp-mo"] [ui-type="navigation"] section[section="home"] {
    padding: var(--gap-md);
  }
}

@media screen and (min-width: 729px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] {
    padding: var(--gap-lg);
  }
}




/* === toggle_nav === * /
html[nav="1"] [ui-type="navigation"] section[section="home"] .toggle_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: 0;
  opacity: .6;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  background: var(--bg-primary);
  border-radius: var(--radius-xs);
}

@media screen and (max-width: 728px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] .toggle_nav {
    display: none;
  }
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] .toggle_nav {
  display: none;
}

html[nav="1"] [ui-type="navigation"] section[section="home"] .toggle_nav span {
  position: absolute;
  left: auto;
  right: 3px;
  margin: 6px auto;
  width: calc(var(--width-stroke) * 2);
  height: calc(100% - 12px);
  display: block;
  background: var(--color-accent);
  transition: all var(--transition-fast);
}

html[nav="1"] [ui-type="navigation"] section[section="home"] .toggle_nav:hover span {
  width: calc(var(--font-size-xl) * 0.6);
  height: calc(var(--font-size-xl) * 0.6);
  background: transparent;
  border-top: calc(var(--width-stroke) * 2) solid var(--color-accent);
  border-right: calc(var(--width-stroke) * 2) solid var(--color-accent);
  transform: rotate(-135deg);
  opacity: 1;
}

html[nav="1"][device="ua-tv"] [ui-type="navigation"] section[section="home"] .toggle_nav:hover span,
html[nav="1"] [ui-type="navigation"].hidden section[section="home"] .toggle_nav:hover span {
  transform: rotate(45deg);
}



/* === nav-header === * /
html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  height: max-content;
  margin-bottom: auto;
}

@media screen and (max-width: 480px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header {
    display: none;
  }
}

html[nav="1"][device="ua-tv"] [ui-type="navigation"] section[section="home"] .nav-header,
html[nav="1"] [ui-type="navigation"].hidden section[section="home"] .nav-header {
  width: calc(var(--size-icon-lg) * 1.5);
  height: calc(var(--size-icon-lg) * 1.5);
  justify-content: center;
}

@media screen and (min-width: 481px) and (max-width: 728px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header {
    width: calc(var(--size-icon-lg) * 1.5);
    height: calc(var(--size-icon-lg) * 1.5);
    justify-content: center;
  }
}

html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header #logo_of {
  width: var(--size-icon-md);
}

html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header #name_of {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

@media screen and (max-width: 728px) {
  html[nav="1"] [ui-type="navigation"] section[section="home"] .nav-header #name_of {
    display: none;
  }
}

html[nav="1"][device="ua-tv"] [ui-type="navigation"] section[section="home"] .nav-header #name_of,
html[nav="1"] [ui-type="navigation"].hidden section[section="home"] .nav-header #name_of {
  display: none;
}



/* === focusBar === * /
[ui-type="navigation"] section[section="home"] #focusBar {
  position: absolute;
  left: 0;
  width: var(--width-stroke);
  background: var(--color-accent);
  clip-path: path('M 0,0 L 4,0 C 80,25% 80,75% 4,100% L 0,100% Z');
}

html:not([device="ua-tv"]) [ui-type="navigation"] section[section="home"] #focusBar {
  display: none;
}



/* === nav === * /
[ui-type="navigation"] section[section="home"] nav {
  display: grid;
  position: relative;
}

@media screen and (max-height: 499px) {
  [ui-type="navigation"] section[section="home"] nav {
    height: max-content;
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media screen and (min-width: 481px) and (max-width: 728px) {
  [ui-type="navigation"] section[section="home"] nav {
    height: max-content;
    margin: auto;
  }
}

@media screen and (min-width: 729px) {
  [ui-type="navigation"] section[section="home"] nav {
    gap: var(--gap-lg);
  }
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav,
[ui-type="navigation"].hidden section[section="home"] nav {
  justify-content: center;
}



/* === nav-section === * /
[ui-type="navigation"] section[section="home"] nav .nav-section {
  display: grid;
}

@media screen and (max-height: 499px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section {
    display: flex;
    flex-direction: column;
    height: max-content;
  }
}

@media screen and (max-width: 480px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section {
    grid-template-columns: repeat(5, 1fr);
    height: var(--height-nav);
  }
}

@media screen and (min-width: 481px) and (max-width: 728px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section {
    gap: var(--gap-md);
  }
}

@media screen and (min-width: 729px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section>button {
    margin-top: var(--gap-xs);
  }

  [ui-type="navigation"] section[section="home"] nav .nav-section>button:first-of-type {
    margin-top: 0;
  }
}

@media screen and (max-height: 500px),
screen and (max-width: 728px) {

  [ui-type="navigation"] section[section="home"] nav #library-nav.nav-section,
  [ui-type="navigation"] section[section="home"] nav #general-nav.nav-section {
    display: none;
  }
}



/* === nav-label === * /
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-label {
  color: var(--text-secondary);
  font-size: calc(var(--font-size-xxs) / 1.1);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav .nav-section .nav-label,
[ui-type="navigation"].hidden section[section="home"] nav .nav-section .nav-label {
  display: none;
}

@media screen and (max-height: 500px),
screen and (max-width: 728px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-label {
    display: none;
  }
}



/* === nav-item === * /
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item {
  background: transparent;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

@media screen and (max-width: 480px) {

  html[swipemode="0"] [ui-type="navigation"] section[section="home"] nav .nav-section #live.nav-item,
  html[swipemode="1"] [ui-type="navigation"] section[section="home"] nav .nav-section #live.nav-item {
    order: 2;
  }

  html[swipemode="0"] [ui-type="navigation"] section[section="home"] nav .nav-section #download.nav-item,
  html[swipemode="1"] [ui-type="navigation"] section[section="home"] nav .nav-section #download.nav-item {
    order: 3;
  }

  html[swipemode="0"] [ui-type="navigation"] section[section="home"] nav .nav-section #market.nav-item,
  html[swipemode="1"] [ui-type="navigation"] section[section="home"] nav .nav-section #market.nav-item {
    order: 4;
  }

  html[swipemode="0"] [ui-type="navigation"] section[section="home"] nav .nav-section #settings.nav-item,
  html[swipemode="1"] [ui-type="navigation"] section[section="home"] nav .nav-section #settings.nav-item {
    order: 5;
  }

  html[swipemode="2"] [ui-type="navigation"] section[section="home"] nav .nav-section #download.nav-item {
    order: 2;
  }

  html[swipemode="2"] [ui-type="navigation"] section[section="home"] nav .nav-section #market.nav-item {
    order: 3;
  }

  html[swipemode="2"] [ui-type="navigation"] section[section="home"] nav .nav-section #live.nav-item {
    order: 4;
  }

  html[swipemode="2"] [ui-type="navigation"] section[section="home"] nav .nav-section #settings.nav-item {
    order: 5;
  }
}

@media screen and (max-height: 499px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item {
    height: max-content;
  }
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item:focus {
  transform: scale(1.05);
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item.active {
  pointer-events: none;
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item,
[ui-type="navigation"].hidden section[section="home"] nav .nav-section .nav-item {
  width: max-content;
}

@media screen and (max-width: 728px) {

  [ui-type="navigation"] section[section="home"] nav .nav-section #search.nav-item,
  [ui-type="navigation"] section[section="home"] nav .nav-section #logout.nav-item {
    display: none;
  }
}

@media screen and (min-width: 729px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item:hover:not(.active) {
    opacity: 0.8;
  }
}

@media screen and (max-height: 499px) and (max-width: 728px),
screen and (min-height: 501px) and (min-width: 730px) {
  [ui-type="navigation"] section[section="home"] nav #menu-nav.nav-section #settings.nav-item {
    display: none;
  }
}

html[expired="1"] [ui-type="navigation"] section[section="home"] nav #menu-nav.nav-section #market.nav-item:not(.active) svg {
  animation: svg-bounce 0.8s ease-in-out infinite;
  transition: stroke .1s;
}



/* === default === * /
@media screen and (max-width: 480px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .default {
    display: grid;
    place-content: center;
  }
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .default,
[ui-type="navigation"].hidden section[section="home"] nav .nav-section .nav-item .default {
  display: grid;
  place-content: center;
}

@media screen and (min-width: 481px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .default {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: var(--gap-xs);
  }
}



/* === nav-item svg === * /
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item svg {
  transition: all var(--transition-fast);
  stroke: var(--text-muted);
  stroke-width: var(--width-stroke);
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item:focus svg {
  stroke: var(--text-primary);
}

@media screen and (max-width: 728px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item svg {
    width: var(--size-icon-lg);
    margin: auto;
  }
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item svg,
[ui-type="navigation"].hidden section[section="home"] nav .nav-section .nav-item svg {
  width: var(--size-icon-lg);
  margin: auto;
}

@media screen and (min-width: 729px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item svg {
    width: var(--size-icon-sm);
  }
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item.active:not(#download) svg {
  stroke: none;
  fill: var(--color-accent);
}

[ui-type="navigation"] section[section="home"] nav .nav-section #download.nav-item.active svg {
  stroke: var(--color-accent);
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item.active svg.stroke,
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item:not(.active) svg.fill {
  display: none;
}



/* === nav-text === * /
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .nav-text {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item.active .nav-text {
  color: var(--text-primary);
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .nav-text,
[ui-type="navigation"].hidden section[section="home"] nav .nav-section .nav-item .nav-text {
  display: none;
}

@media screen and (min-width: 481px) and (max-width: 728px) {

  html:not([device="tp-mo"]) [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .nav-text,
  html:not([device="ua-mo"]) [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .nav-text {
    display: none;
  }
}



/* === sub === * /
[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .sub {
  width: max-content;
  position: relative;
  padding-left: calc(var(--gap-md) + 15px);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
  display: none;
}

@media screen and (max-width: 480px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .sub {
    display: none;
  }
}

@media screen and (min-width: 481px) {
  [ui-type="navigation"] section[section="home"] nav .nav-section .nav-item.hasSub .sub {
    display: block;
  }
}


[ui-type="navigation"] section[section="home"] nav .nav-section .nav-item .sub::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gap-md);
  width: 10px;
  height: 7px;
  border-left: var(--width-stroke) solid var(--color-text-secondary, #888);
  border-bottom: var(--width-stroke) solid var(--color-text-secondary, #888);
  transform: skewX(20deg);
}




/* === user === * /
[ui-type="navigation"] section[section="home"] .user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  transition: all var(--transition-fast);
}

@media screen and (max-width: 480px) {
  [ui-type="navigation"] section[section="home"] .user {
    display: none;
  }
}

[ui-type="navigation"] section[section="home"] .user:hover {
  opacity: 0.8;
}

[ui-type="navigation"] section[section="home"] .user .avatar {
  width: calc(var(--size-icon-lg) * 1.5);
  height: calc(var(--size-icon-lg) * 1.5);
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

[ui-type="navigation"] section[section="home"] .user .user-info {
  transition: opacity var(--transition-fast);
  overflow: hidden;
}

[ui-type="navigation"] section[section="home"] .user .nav.collapsed .user-info {
  opacity: 0;
  width: 0;
}

html[device="ua-tv"] [ui-type="navigation"] section[section="home"] .user .user-info,
[ui-type="navigation"].hidden section[section="home"] .user .user-info {
  display: none;
}

@media screen and (min-width: 481px) and (max-width: 728px) {

  html:not([device="tp-mo"]) [ui-type="navigation"] section[section="home"] .user .user-info,
  html:not([device="ua-mo"]) [ui-type="navigation"] section[section="home"] .user .user-info {
    display: none;
  }
}

[ui-type="navigation"] section[section="home"] .user .user-info .username {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[device="tp-mo"] [ui-type="navigation"] section[section="home"] .user .user-info .username,
html[device="ua-mo"] [ui-type="navigation"] section[section="home"] .user .user-info .username {
  max-width: calc(var(--size-icon-lg) * 4);
}

[ui-type="navigation"] section[section="home"] .user .user-info .user-status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
}



/* === mediaGridModify section === * /
[ui-type="navigation"] section[section="mediaGridModify"] {
  align-items: center;
  grid-template-columns: max-content 1fr;
  gap: var(--gap-md);
  padding: 0 var(--gap-md);
}

html[nav="2"] [ui-type="navigation"] section[section="mediaGridModify"] {
  display: grid;
}

[ui-type="navigation"] section[section="mediaGridModify"] button .child {
  padding: 0 var(--gap-lg);
}

[ui-type="navigation"] section[section="mediaGridModify"] button#selectAll .child svg {
  fill: var(--text-muted);
}

[ui-type="navigation"] section[section="mediaGridModify"] div {
  gap: var(--gap-md);
  justify-content: flex-end;
}*/