/* ==========================================================================
   移动端底部标签导航(全局配置 mobileNav)
   --------------------------------------------------------------------------
   默认隐藏, 仅移动端(≤767px)显示; 背景/高度/颜色/字号由 page.html 注入的
   :root CSS 变量控制(--mn-*)。内置类型图标是线性 SVG(currentColor 双态变色),
   custom 类型用上传的 img(正常/选中两态, 由 mobile-nav.js 切换显隐)。
   ========================================================================== */
#deco-mobile-nav {
    display: none;
}

@media (max-width: 767px) {
    /* 内容底部留白, 防止被固定导航遮挡 */
    body {
        padding-bottom: calc(var(--mn-height, 50) * 1px + env(safe-area-inset-bottom));
    }

    #deco-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: flex;
        box-sizing: border-box;
        height: calc(var(--mn-height, 50) * 1px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background-color: var(--mn-bg, #ffffff);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    }

    .deco-mn-item {
        position: relative;
        display: flex;
        flex: 1;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--mn-name, #333333);
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    /* 内置 SVG 图标 */
    .deco-mn-icon {
        display: block;
        width: 22px;
        height: 22px;
        color: var(--mn-icon, #4a4a4a);
    }

    /* custom 上传图标 */
    .deco-mn-icon-img {
        display: block;
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .deco-mn-icon-active {
        display: none;
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .deco-mn-name {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--mn-name-size, 12px);
        line-height: 1.2;
        color: var(--mn-name, #333333);
    }

    /* 选中态: 内置 SVG 变色 */
    .deco-mn-item.is-active .deco-mn-icon {
        color: var(--mn-icon-active, #ec6608);
    }
    .deco-mn-item.is-active .deco-mn-name {
        color: var(--mn-name-active, #ec6608);
    }
}