/* ???????? v7 - Pitt Zhang SOC Edition (1:1 Scaling) */
:root {
    --fx-accent: #0071e3;
}

/* ???? 1:1 ???????? */
html, body {
    width: 100%;
    overflow-x: hidden; /* ?????? */
    -webkit-text-size-adjust: 100%; /* ?? iOS ?????? */
}

/* ??? 1:1 ???? */
@media (max-width: 768px) {
    nav {
        width: 100% !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 6px !important;
    }

    nav a, .nav-item {
        flex: 0 1 calc(33% - 10px) !important; /* ???? */
        min-width: 80px !important;
        padding: 8px 2px !important;
        font-size: 11px !important;
        justify-content: center;
        white-space: nowrap;
    }

    /* ???????????????? */
    nav a[data-i18n="nav_security"] {
        flex: 0 1 100% !important;
        margin-top: 5px !important;
    }

    /* Bento ?? 1:1 ???? */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .card {
        width: 100% !important;
        min-height: auto !important;
        padding: 20px !important;
    }
}

/* ??????????? */
@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}