:root {
     --bg: #0b0b0e;
     --bg-panel: #16161b;
     --accent: #2f8fff;
     --text-inactive: #9a9aa4;
     --text-active: var(--accent);
     box-sizing: border-box;
     padding-bottom: env(safe-area-inset-bottom, 0px);
 }

 * {
     box-sizing: border-box;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: "Helvetica Neue", Arial, sans-serif;
 }

 .home-navbar-mobile {
     height: auto;
     width: 100%;
     display: none;
     align-items: flex-end;
     justify-content: center;
     position: absolute;
     bottom: 0;
     z-index: 99999;
 }

 .home-navbar-mobile .navbar {
     width: 100%;
     background: var(--bg-panel);
     padding: 5px 6px calc(10px + env(safe-area-inset-bottom, 0px));
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
 }

 .nav-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     background: none;
     border: none;
     color: var(--text-inactive);
     font-size: 11px;
     letter-spacing: 0.2px;
     padding: 4px 2px;
     cursor: pointer;
 }

 .nav-item svg {
     width: 24px;
     height: 24px;
     stroke: currentColor;
     fill: none;
     stroke-width: 1.8;
     stroke-linecap: round;
     stroke-linejoin: round;
 }

 .nav-item span {
     line-height: 1;
 }

 .nav-item.active {
     color: var(--text-active);
 }

 .nav-item.active svg {
     fill: currentColor;
     stroke: none;
 }

 .home-indicator {
     width: 110px;
     height: 4px;
     margin: 6px auto 0;
     border-radius: 2px;
     background: #e8e8ec;
     opacity: 0.9;
 }







 @media only screen and (max-width: 780px) {
     .home-navbar-mobile {
         display: flex;
     }
 }