.tabbar {
    margin-top: -1px;
    --active: white;
    --icon: #c2d2bd;
    --icon-b-active: white;
    --hover: #d1adcc;
    --dot: #d1adcc;
    --text: #c2d2bd;
    --background: #5f2c3e;  
    width: 100%;
    height: 40px;
    background: var(--background);
    padding: 0 4px;
    margin-top: 0px; 
     position: relative;
  }
  .tabbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    position: relative;
    z-index: 1; 
  }
  .tabbar ul li {
    position: relative;
    flex-grow: 1;
  }
  .tabbar ul li a {
    --d: 1;
    cursor: pointer;
    display: table;
    position: relative;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    height: 40px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  }
  .tabbar ul li a div,
  .tabbar ul li a span,
  .tabbar ul li a svg {
    width: 20px;
    height: 20px;
    display: block;
    -webkit-backface-visibility: hidden;
  }
  .tabbar ul li a div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -84%);
  }
  .tabbar ul li a div span {
    width: 20px;
    bottom: 0;
    left: 0;
    transform-origin: 50% 50%;
    position: absolute;
    overflow: hidden;
    z-index: 1;
    background: var(--background);
    transform: scale(0.94);
    transform-origin: 50% 100%;
    -webkit-animation: down 0.3s linear forwards;
            animation: down 0.3s linear forwards;
  }
  .tabbar ul li a div span svg {
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .tabbar ul li a div span:first-child {
    height: 20px;
  }
  .tabbar ul li a div span:first-child svg {
    transition: fill 0.3s ease, stroke 0.3s ease;
    fill: var(--icon);
    stroke: var(--icon);
  }
  .tabbar ul li a div span:last-child {
    height: 0;
    z-index: 5;
    transition: height 0.25s ease;
  }
  .tabbar ul li a div span:last-child svg {
    fill: var(--active);
    stroke: var(--active);
  }
  .tabbar ul li a strong {
    font-size: 12px;
    font-weight: 600;
    margin-top: 20px;
    color: var(--text);
    transition: all 0.6s ease; 
  }
  .tabbar ul li a:hover div span:first-child svg {
    fill: var(--hover);
    stroke: var(--hover);
  }
  .tabbar ul li.active a {
    z-index: 5;
  }
  .tabbar ul li.active a div span {
    -webkit-animation: high 0.35s linear forwards 0.05s;
            animation: high 0.35s linear forwards 0.05s;
  }
  .tabbar ul li.active a div span:first-child svg {
    fill: var(--icon-b-active);
    stroke: var(--icon-b-active);
  }
  .tabbar ul li.active a div span:last-child {
    height: 20px;
    transition: height 0.3s ease 0.25s;
  }
  .tabbar ul li.active a strong { 
    transform: scale(1.1);
    color:white;
  }
  .tabbar em {
    display: none;
    --offset: 0;
    border-radius: 50%;
    display: block;
    width: 3px;
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: -20px;
    margin: 0 0 45 3px;
    z-index: 4;
    transition: transform 0.4s ease;
    background: var(--dot);
    transform: translateX(var(--offset));
  }
  
  @-webkit-keyframes high {
    0% {
      transform: rotate(0deg) scale(0.94);
    }
    33% {
      transform: rotate(calc(var(--d) * 10deg));
    }
    66% {
      transform: rotate(calc(var(--d) * 10deg)) translateY(-1px);
    }
    100% {
      transform: rotate(0deg) scale(1) translateY(-1px);
    }
  }
  
  @keyframes high {
    0% {
      transform: rotate(0deg) scale(0.94);
    }
    33% {
      transform: rotate(calc(var(--d) * 10deg));
    }
    66% {
      transform: rotate(calc(var(--d) * 10deg)) translateY(-1px);
    }
    100% {
      transform: rotate(0deg) scale(1) translateY(-1px);
    }
  }
  @-webkit-keyframes down {
    0% {
      transform: rotate(0deg) scale(1) translateY(-1px);
    }
    33% {
      transform: rotate(calc(var(--d) * 10deg));
    }
    66% {
      transform: rotate(calc(var(--d) * 10deg)) translateY(0);
    }
    100% {
      transform: rotate(0deg) scale(0.94) translateY(0);
    }
  }
  @keyframes down {
    0% {
      transform: rotate(0deg) scale(1) translateY(-1px);
    }
    33% {
      transform: rotate(calc(var(--d) * 10deg));
    }
    66% {
      transform: rotate(calc(var(--d) * 10deg)) translateY(0);
    }
    100% {
      transform: rotate(0deg) scale(0.94) translateY(0);
    }
  }
  html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }
  
  * {
    box-sizing: inherit;
  }
  *:before, *:after {
    box-sizing: inherit;
  }