/* Shared by dedicated mobile views and the responsive desktop/management shell. */
:root { --bottomnav-h: 60px; }
.m-bottomnav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(0deg, #0f172a 0%, #1e293b 100%);
    border-top: 1px solid var(--border);
    align-items: stretch; justify-content: space-around;
    z-index: 50;
}
.m-bottomnav .m-tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    color: var(--text-dim); font-size: .68rem; font-weight: 500;
    padding: .35rem .25rem; text-decoration: none;
}
.m-bottomnav .m-tab i { font-size: 1.15rem; }
.m-bottomnav .m-tab.active { color: var(--primary); }
.m-bottomnav .m-tab:active { opacity: .6; }
.m-bottomnav .m-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -4px; }
.mobile-layout .m-bottomnav { display: flex; }
@media (max-width: 900px) {
    .shared-layout .m-bottomnav { display: flex; }
    .shared-layout .app-main {
        padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    }
}