/* Mobile bottom navigation bar */
@media (max-width: 768px) {
    .sta-mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9998;
        background: rgba(255,255,255,.97);
        backdrop-filter: blur(20px);
        border-top: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-around;
        padding: 8px 0 env(safe-area-inset-bottom, 8px);
        box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    }
    .sta-mobile-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: .68rem;
        color: #6b7280;
        text-decoration: none;
        padding: 4px 12px;
        border-radius: 8px;
        transition: .2s;
    }
    .sta-mobile-nav a:hover,
    .sta-mobile-nav a.active {
        color: #2563eb;
        background: #eff6ff;
    }
    .sta-mobile-nav a span {
        font-size: 1.3rem;
        line-height: 1;
    }
    /* Add bottom padding to body so content isn't hidden */
    body {
        padding-bottom: 72px;
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
        .sta-mobile-nav {
            background: rgba(15,23,42,.97);
            border-top-color: #334155;
        }
        .sta-mobile-nav a { color: #94a3b8; }
        .sta-mobile-nav a:hover,
        .sta-mobile-nav a.active { color: #93c5fd; background: rgba(37,99,235,.15); }
    }
}

@media (min-width: 769px) {
    .sta-mobile-nav { display: none; }
}