/* Mobile Nav — Component CSS */
.sh-mnav {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: var(--z-mobile-nav, 9990);
    display: flex; justify-content: space-around; align-items: center;
    background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--sh-border, #e5e7eb);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px var(--sh-shadow, rgba(0,0,0,0.06));
}
.dark .sh-mnav { background: rgba(15,23,42,0.97); border-top-color: var(--pi-border, #e2e8f0); }
.sh-mnav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--pi-text-3, #6b7280);
    padding: 6px 10px; border-radius: 8px; transition: color 0.2s;
    -webkit-tap-highlight-color: transparent; min-width: 56px;
}
.sh-mnav-item.sh-mnav-active { color: var(--pi-primary, #007d3d); }
.dark .sh-mnav-item { color: var(--pi-text-muted, #94a3b8); }
.dark .sh-mnav-item.sh-mnav-active { color: #00a84d; }
.sh-mnav-icon { width: 22px; height: 22px; }
.sh-mnav-label { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.2px; }
.sh-mnav-item.sh-mnav-active .sh-mnav-icon { stroke-width: 2.2; }
@media (max-width: 767px) {
    footer[role="contentinfo"] { padding-bottom: 80px !important; }
}