/* ============================================================
   全站统一底部导航 tabbar（唯一样式来源）
   ------------------------------------------------------------
   接入方式（任意页面，三步）：
     ① <link rel="stylesheet" href="/css/tabbar.css">
     ② <nav class="tabbar" id="xqnTabbar" data-tabbar data-tabbar-active="test"></nav>
     ③ <script src="/js/shared/tabbar.js"></script>
   组件会自动挂载、拉取后台 DIY 配置、矢量图标渲染、点击跳转。

   设计要点：
     ① 磨砂玻璃底 + 上沿圆角收口，轻浮于内容之上；
     ② 图标统一矢量描边（stroke: currentColor），激活时随文字转主色；
     ③ 激活态给图标一块「药丸底」代替顶部小横条，识别更清晰；
     ④ 按压回弹（:active 缩放），触感接近原生 App；
     ⑤ 所有色彩变量都带兜底值 —— 只引 tokens.css 的轻页面也不会掉色。
   ============================================================ */

.tabbar {
    /* 兜底令牌：页面没定义 --purple-2 / --gray-3 时用品牌默认值 */
    --tb-brand: var(--purple-2, var(--v-600));
    --tb-brand-2: var(--purple-1, var(--brand-3));
    --tb-gray: var(--gray-3, var(--n-400));
    --tb-gray-hover: var(--gray-1, var(--n-500));

    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    max-width: 480px; margin: 0 auto;
    display: flex; align-items: stretch;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .9);
    /* 性能：blur 半径 18px → 12px。
       该元素 position:fixed 常驻，滚动时每帧重新合成；
       高斯模糊成本随半径超线性增长，12px 与 18px 视觉几乎无差，
       但低端机掉帧风险大幅下降。 */
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid rgba(226, 232, 240, .85);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(30, 41, 59, .08);
    /* 提升为独立合成层，避免滚动时反复提升图层 */
    will-change: backdrop-filter;
    transform: translateZ(0);
}
/* 不支持 backdrop-filter 时回退为更实的底色，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .tabbar { background: rgba(255, 255, 255, .97); }
}
.tabbar[hidden] { display: none; }

.tab {
    flex: 1; min-width: 0; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 0 2px;
    color: var(--tb-gray); font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    background: none; border: 0; font-family: inherit; cursor: pointer;
    transition: color .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.tab > span:last-child {
    max-width: 100%; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 图标容器：固定成小药丸，激活时填淡紫渐变底 */
.tab .tab-ico {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 27px; border-radius: 11px;
    font-size: 20px; line-height: 1;
    transition: background .24s ease, transform .24s cubic-bezier(.34, 1.56, .64, 1);
}
.tab-svg { width: 22px; height: 22px; display: block; transition: transform .26s cubic-bezier(.34, 1.56, .64, 1); }
.tab-img { width: 22px; height: 22px; object-fit: cover; object-position: center; border-radius: 7px; display: block;
    /* 位图图标统一视觉：未选中灰度弱化，激活恢复彩色上浮（App 级状态语言） */
    filter: grayscale(1) opacity(.55);
    transition: filter .24s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1); }
.tab:active .tab-ico { transform: scale(.88); }
.tab.active { color: var(--tb-brand); font-weight: 800; }
/* 激活态：品牌绿药丸实底 + 白色图标（App 级选中语言，一眼可辨） */
.tab.active .tab-ico {
    background: linear-gradient(140deg, var(--brand-3), var(--v-700));
    box-shadow: 0 6px 16px rgba(4, 120, 87, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
    color: var(--c-surface);
}
.tab.active .tab-svg { transform: translateY(-1px) scale(1.06); }
.tab.active .tab-img { filter: none; transform: translateY(-1px) scale(1.06); }
/* 状态语言：非激活一律灰度（容器级，svg/img/emoji 全覆盖）；激活恢复 */
.tab:not(.active) .tab-ico { filter: grayscale(1); opacity: .72; }
.tab.active .tab-ico { filter: none; }

@media (hover: hover) {
    .tab:hover { color: var(--tb-gray-hover); }
    .tab.active:hover { color: var(--tb-brand); }
}

/* 挂载了底部导航的页面自动留出安全高度，避免内容被压住 */
body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* 窄屏微调：图标药丸略收，给文字更多空间 */
@media (max-width: 360px) {
    .tab { font-size: 10px; }
    .tab .tab-ico { width: 34px; height: 25px; }
    .tab-svg { width: 20px; height: 20px; }
}