:root{
  --viha-bbar-height: 68px;
  --viha-bbar-bg: #ffffff;
  --viha-bbar-text: #1f2937;
  --viha-bbar-accent: #1993cc;
  --viha-bbar-badge: #f79856;
  --viha-bbar-shadow: 0 -8px 24px rgba(0,0,0,.08);
}

@media (max-width: 768px){
  body{ padding-bottom: var(--viha-bbar-height); }

  .viha-mbbar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--viha-bbar-height);
    background: var(--viha-bbar-bg);
    color: var(--viha-bbar-text);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    box-shadow: var(--viha-bbar-shadow);
    z-index: 9999;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }

  .viha-mbbar__item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:inherit;
    font-size:12px;
    position:relative;
    gap:4px;
  }
  .viha-mbbar__icon{ line-height:1; }
  .viha-mbbar__label{ font-weight:600; }

  .viha-mbbar__badge{
    position:absolute;
    top:6px;
    right: 26%;
    min-width:18px;
    height:18px;
    border-radius:18px;
    background:var(--viha-bbar-badge);
    color:#fff;
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    transform: translate(50%, -50%);
  }
}