.tab-bar { display: none; }

@media (max-width: 767px) {
    .tab-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 20;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 8px 0 env(safe-area-inset-bottom);
        background: var(--surface-bar);
        border-top: 1px solid var(--border);
    }

    .tab-bar__item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
    .tab-bar__item svg { width: 20px; height: 20px; }
    .tab-bar__item--active { color: var(--text); }
    .tab-bar__item--disabled { opacity: .45; }
}