.tabs-list {
  display: flex;
  gap: 8px;
}

.tab-current,
.nav-dropdown-toggle {
  display: none;
}

@media (max-width: 900px) {
  .page:not(.page-auth) .tabs,
  .page:not(.page-auth) .tabs-list {
    --nav-dropdown-bg: #00011b;
    --nav-dropdown-item-bg: #101126;
    --nav-dropdown-item-hover-bg: #1b1c31;
  }

  .page:not(.page-auth) .tabs {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    justify-self: end !important;
    width: min(190px, 50vw) !important;
    min-height: 42px !important;
    min-width: 0 !important;
    overflow: visible !important;
    gap: 0 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0 !important;
    background: var(--nav-dropdown-bg) !important;
    transition: border-color 140ms ease, background 140ms ease !important;
  }

  .page:not(.page-auth) .tabs:hover,
  .page:not(.page-auth) .tabs:focus-within,
  .page:not(.page-auth) .tabs.is-open {
    border-color: var(--border-strong) !important;
    background: var(--nav-dropdown-bg) !important;
  }

  .page:not(.page-auth) .tab-current {
    display: flex !important;
    grid-column: 1 !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
    padding: 8px 10px 8px 14px !important;
    color: var(--text) !important;
    background: var(--nav-dropdown-bg) !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 750 !important;
  }

  .page:not(.page-auth) .nav-dropdown-toggle {
    display: grid !important;
    place-items: center !important;
    grid-column: 2 !important;
    width: 40px !important;
    min-width: 40px !important;
    min-height: 42px !important;
    border: 0 !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
  }

  .page:not(.page-auth) .nav-dropdown-toggle:hover,
  .page:not(.page-auth) .nav-dropdown-toggle:focus-visible {
    color: var(--text) !important;
    background: transparent !important;
  }

  .page:not(.page-auth) .nav-dropdown-chevron {
    width: 30px !important;
    height: 30px !important;
    border-color: var(--border-strong) !important;
    background: var(--surface-2) !important;
    pointer-events: none !important;
  }

  .page:not(.page-auth) .nav-dropdown-toggle:hover .nav-dropdown-chevron,
  .page:not(.page-auth) .tabs.is-open .nav-dropdown-chevron {
    border-color: rgba(255, 255, 255, 0.36) !important;
    background: var(--surface-3) !important;
    color: var(--text) !important;
  }

  .page:not(.page-auth) .tabs-list {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    z-index: 80 !important;
    display: none !important;
    width: 100% !important;
    min-width: 190px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px !important;
    background: var(--nav-dropdown-bg) !important;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34) !important;
  }

  .page:not(.page-auth) .tabs.is-open .tabs-list {
    display: grid !important;
    gap: 6px !important;
  }

  .page:not(.page-auth) .tabs-list .tab {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 12px !important;
    color: var(--muted) !important;
    background: var(--nav-dropdown-item-bg) !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  .page:not(.page-auth) .tabs-list .tab.is-active,
  .page:not(.page-auth) .tabs-list .tab:hover,
  .page:not(.page-auth) .tabs-list .tab:focus-visible {
    color: var(--text) !important;
    background: var(--nav-dropdown-item-hover-bg) !important;
  }
}

@media (max-width: 520px) {
  .page:not(.page-auth) .tabs {
    width: min(160px, 46vw) !important;
  }

  .page:not(.page-auth) .tabs-list {
    min-width: 160px !important;
  }
}