.mobile-shortcuts {
    display: none;
}

@media (max-width: 600px) {
    body {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-shortcuts {
        position: fixed;
        z-index: 50;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: calc(74px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-top: 1px solid #e4e4e4;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .09);
        backdrop-filter: blur(14px);
    }

    .mobile-shortcut {
        min-width: 0;
        min-height: 74px;
        padding: 9px 2px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: #333;
        font-size: 13px;
        font-weight: 650;
        line-height: 1;
        text-align: center;
        -webkit-tap-highlight-color: rgba(200, 16, 46, .12);
    }

    .mobile-shortcut img {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        opacity: .92;
    }

    .mobile-shortcut span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-shortcut:hover,
    .mobile-shortcut:active,
    .mobile-shortcut.is-active {
        color: var(--brand);
    }

    .mobile-shortcut.is-active img {
        filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4500%) hue-rotate(343deg) brightness(88%) contrast(98%);
    }

    .mobile-shortcut:focus-visible {
        outline-offset: -4px;
    }
}

@media print {
    .mobile-shortcuts { display: none !important; }
    body { padding-bottom: 0 !important; }
}