/* ============================================================
   移动端导航（底部标签栏 + 全屏「更多」宫格）
   作用域：@media(max-width:767px) 内，仅移动端生效；桌面端完全隐藏。
   设计：替换原左抽屉 / V2 顶部横条，统一 V1/V2/V3 三版移动端。
   ============================================================ */

/* 桌面端：彻底隐藏移动端导航，不影响任何桌面布局 */
@media(min-width:768px){
  #mbTabbar, #mbGrid{ display:none !important; }
}

@media(max-width:767px){
  /* ---------- 隐藏原侧栏抽屉 / 顶部横条 / 汉堡 / 遮罩 ---------- */
  .hamburger{ display:none !important; }
  #overlay{ display:none !important; }
  .sidebar{ display:none !important; }

  /* 主内容区：取消侧栏占位，底部给标签栏留出空间 */
  .main{
    margin-left:0 !important;
    margin-top:0 !important;
    padding-bottom:74px !important;
  }
  .app{ display:block; }

  /* ===================== 底部标签栏 ===================== */
  #mbTabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    height:58px;
    display:flex;
    background:var(--panel);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(0,0,0,.10);
    z-index:9000;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mb-tab{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border:none;
    background:transparent;
    color:#8a93a0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    position:relative;
    padding:0;
    min-width:0;
  }
  .mb-tab .ico{
    width:23px; height:23px;
    display:flex; align-items:center; justify-content:center;
  }
  .mb-tab .ico svg{ width:22px; height:22px; }
  .mb-tab .mb-label{
    font-size:11px; line-height:1; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%;
  }
  /* 当前页高亮：主题色 + 顶部指示条 */
  .mb-tab.active{
    color:var(--primary);
  }
  .mb-tab.active::before{
    content:"";
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:26px; height:3px; border-radius:0 0 3px 3px;
    background:var(--primary);
  }
  .mb-tab:active{ background:rgba(0,0,0,.04); }

  /* ===================== 全屏「更多」宫格 ===================== */
  #mbGrid{
    position:fixed; inset:0;
    background:rgba(20,24,28,.46);
    z-index:9100;
    display:none;
    align-items:flex-end;       /* bottom sheet 形式 */
    justify-content:center;
  }
  #mbGrid.open{ display:flex; }

  .mb-grid-panel{
    width:100%;
    max-height:88vh;
    background:var(--panel);
    border-radius:18px 18px 0 0;
    box-shadow:0 -10px 36px rgba(0,0,0,.24);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:mbSheetUp .24s cubic-bezier(.22,.8,.3,1);
  }
  @keyframes mbSheetUp{
    from{ transform:translateY(100%); }
    to{ transform:translateY(0); }
  }

  .mb-grid-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px 10px;
    border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .mb-grid-title{ font-size:16px; font-weight:800; color:var(--text); }
  .mb-grid-close{
    border:none; background:transparent; color:var(--muted);
    width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .mb-grid-close:active{ background:rgba(0,0,0,.06); }

  .mb-grid-body{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:14px 16px calc(20px + env(safe-area-inset-bottom,0));
  }

  /* 主题切换行（复用 .theme-dots / .theme-dot 现有样式） */
  .mb-theme-row{
    display:flex; align-items:center; gap:10px;
    padding:4px 2px 14px;
    border-bottom:1px solid var(--line);
    margin-bottom:14px;
    overflow-x:auto;
  }
  .mb-theme-row .mb-theme-label{ font-size:12px; color:var(--muted); white-space:nowrap; }
  .mb-theme-row .theme-dots{ flex:1 1 auto; display:flex; gap:8px; flex-wrap:nowrap; }
  .mb-theme-row .theme-dot{
    width:22px; height:22px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; flex:0 0 auto;
  }
  .mb-theme-row .theme-dot.active{ border-color:var(--text); }

  /* 分组 */
  .mb-sec-title{
    font-size:12px; font-weight:700; color:var(--muted);
    letter-spacing:.04em; margin:6px 2px 10px;
  }
  .mb-grid-items{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px 8px;
    margin-bottom:18px;
  }
  .mb-grid-item{
    display:flex; flex-direction:column; align-items:center; gap:7px;
    padding:12px 4px;
    border-radius:14px;
    background:var(--bg);
    border:1px solid var(--line);
    cursor:pointer;
    color:var(--text);
    -webkit-tap-highlight-color:transparent;
  }
  .mb-grid-item:active{ background:var(--primary-soft); border-color:var(--primary); }
  .mb-grid-item .ico{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--primary); }
  .mb-grid-item .ico svg{ width:25px; height:25px; }
  .mb-grid-item .mb-label{ font-size:12px; font-weight:600; text-align:center; line-height:1.25; }

  /* 临时锁定项（系统分组末尾的强调按钮） */
  .mb-grid-item.mb-lock{
    background:var(--primary-soft);
    border-color:transparent;
    color:var(--primary);
  }

  /* ---------- 返回顶部火箭：紧贴底部标签栏上方，版本切换按钮在其上 ----------
     右下角垂直顺序（自下而上）：#mbTabbar(0~58px) → .to-top 火箭
     (bottom:72px, 高44) → .ui-ver-fab 版本切换(main.css 移动端 bottom:126px)。
     层级：火箭 9051(fly)/9050(toTop,spark) > tabbar 9000 > 版本钮 8999。 */
  .to-top{
    bottom: calc(72px + env(safe-area-inset-bottom,0)) !important;
    right:14px !important;
    z-index:9050 !important;
  }
  .rocket-fly{ z-index:9051 !important; }
  .spark{ z-index:9050 !important; }
}