/* ==========================================================================
   爱刷刷 · iOS 26 Liquid Glass 增强层
   --------------------------------------------------------------------------
   叠加在 ios-skin.css 之上，实现苹果 2026 设计语言：
   · 真实光学折射（高透明 + 强模糊 + 饱和度提升）
   · 玻璃厚度感（内描边 + 边缘 specular 高光）
   · 悬浮式胶囊底栏（iOS 26 标志性组件）
   · 液态滑块指示器（spring 物理位移）
   · 按压液态形变 + 涟漪扩散
   原则：只覆盖视觉属性，绝不修改布局骨架
   ========================================================================== */

/* ==========================================================================
   ① Liquid Glass 核心材质
   ========================================================================== */

:root {
  /* ── Glass 透明度层级（iOS 26 四档）────────────────────────── */
  --lg-ultra-thin:  rgba(255, 255, 255, .42);
  --lg-thin:        rgba(255, 255, 255, .56);
  --lg-regular:     rgba(255, 255, 255, .68);
  --lg-thick:       rgba(255, 255, 255, .80);
  --lg-chrome:      rgba(250, 250, 252, .70);

  /* ── Glass 光学参数（模糊 + 饱和 + 亮度）──────────────────── */
  --lg-blur:        blur(14px) saturate(150%) brightness(1.04);
  --lg-blur-sm:     blur(10px) saturate(140%) brightness(1.03);
  --lg-blur-lg:     blur(16px) saturate(155%) brightness(1.05);

  /* ── 玻璃厚度感：四层内描边（顶亮 / 底暗 / 整体环）────────── */
  --lg-edge:
    inset 0 0.5px 0 rgba(255, 255, 255, .95),      /* 顶部 specular 高光 */
    inset 0 -0.5px 0 rgba(255, 255, 255, .38),     /* 底部反射光 */
    inset 0 0 0 0.5px rgba(255, 255, 255, .50),    /* 整体玻璃环 */
    inset 0 1px 1px rgba(255, 255, 255, .30);      /* 内散射 */

  /* ── 悬浮阴影（多层，营造离地感）──────────────────────────── */
  --lg-float:
    0 1px 2px rgba(0, 0, 0, .04),
    0 8px 24px rgba(0, 0, 0, .09),
    0 20px 48px rgba(0, 0, 0, .07);

  --lg-float-sm:
    0 1px 2px rgba(0, 0, 0, .03),
    0 4px 14px rgba(0, 0, 0, .07),
    0 12px 28px rgba(0, 0, 0, .05);

  --lg-float-lg:
    0 2px 4px rgba(0, 0, 0, .04),
    0 12px 32px rgba(0, 0, 0, .11),
    0 32px 64px rgba(0, 0, 0, .09);

  /* ── 玻璃边框 ─────────────────────────────────────────────── */
  --lg-border: 0.5px solid rgba(255, 255, 255, .55);

  /* ── 液态滑块 ─────────────────────────────────────────────── */
  --lg-thumb-bg: rgba(0, 122, 255, .14);
  --lg-thumb-edge:
    inset 0 0.5px 0 rgba(255, 255, 255, .85),
    inset 0 -0.5px 0 rgba(0, 122, 255, .06),
    0 1px 3px rgba(0, 122, 255, .12);

  /* ── 液态动画曲线（比标准 spring 更有"黏性"）──────────────── */
  --lg-flow:   cubic-bezier(.34, 1.56, .64, 1);      /* 弹性流动 */
  --lg-squish: cubic-bezier(.36, .07, .19, .97);     /* 挤压变形 */
  --lg-glide:  cubic-bezier(.22, 1, .36, 1);         /* 顺滑滑行 */
}

/* ── 暗色 Liquid Glass ────────────────────────────────────────── */
[data-theme="dark"] {
  --lg-ultra-thin:  rgba(30, 30, 32, .42);
  --lg-thin:        rgba(30, 30, 32, .56);
  --lg-regular:     rgba(30, 30, 32, .68);
  --lg-thick:       rgba(30, 30, 32, .82);
  --lg-chrome:      rgba(22, 22, 24, .72);

  --lg-blur:        blur(14px) saturate(145%) brightness(.96);
  --lg-blur-sm:     blur(10px) saturate(140%) brightness(.97);
  --lg-blur-lg:     blur(16px) saturate(150%) brightness(.95);

  --lg-edge:
    inset 0 0.5px 0 rgba(255, 255, 255, .16),
    inset 0 -0.5px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 0.5px rgba(255, 255, 255, .10),
    inset 0 1px 1px rgba(255, 255, 255, .06);

  --lg-float:
    0 1px 2px rgba(0, 0, 0, .32),
    0 8px 24px rgba(0, 0, 0, .44),
    0 20px 48px rgba(0, 0, 0, .36);

  --lg-float-sm:
    0 1px 2px rgba(0, 0, 0, .28),
    0 4px 14px rgba(0, 0, 0, .38),
    0 12px 28px rgba(0, 0, 0, .30);

  --lg-float-lg:
    0 2px 4px rgba(0, 0, 0, .36),
    0 12px 32px rgba(0, 0, 0, .50),
    0 32px 64px rgba(0, 0, 0, .42);

  --lg-border: 0.5px solid rgba(255, 255, 255, .10);

  --lg-thumb-bg: rgba(10, 132, 255, .22);
  --lg-thumb-edge:
    inset 0 0.5px 0 rgba(255, 255, 255, .18),
    0 1px 3px rgba(0, 0, 0, .32);
}

/* ==========================================================================
   ② 通用 Glass 工具类
   ========================================================================== */

.lg-glass {
  background: var(--lg-regular);
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float-sm);
}

.lg-glass-thin {
  background: var(--lg-thin);
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float-sm);
}

.lg-glass-thick {
  background: var(--lg-thick);
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float);
}

/* Glass 边缘折射高光（伪元素模拟光学反射）*/
.lg-specular {
  position: relative;
  isolation: isolate;
}
.lg-specular::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .28) 28%,
    rgba(255, 255, 255, .06) 52%,
    rgba(255, 255, 255, .18) 76%,
    rgba(255, 255, 255, .62) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
[data-theme="dark"] .lg-specular::before {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, .30) 0%,
    rgba(255, 255, 255, .08) 28%,
    rgba(255, 255, 255, .02) 52%,
    rgba(255, 255, 255, .05) 76%,
    rgba(255, 255, 255, .20) 100%
  );
}

/* ==========================================================================
   ③ iOS 26 悬浮胶囊底栏（核心）
   ========================================================================== */

.mobile-nav {
  /* ⚠️ 不设 display —— 保持原 style.css 的 display:none（PC 端隐藏）
     仅在下方 @media (max-width:860px) 内启用 flex */

  /* 悬浮定位 */
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  /* ⚠️ 用 calc + !important：
     · calc() 兼容性远好于 max()（部分移动端浏览器不支持 max）
     · !important 强制覆盖 style.css 媒体查询里的 bottom:0 */
  /* 下移一点点：20px → 12px（用户要求再贴近底部一些）*/
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto;
  max-width: 480px;
  margin: 0 auto;
  height: 58px;
  border-radius: 29px;

  /* Liquid Glass 材质 */
  background: var(--lg-regular) !important;
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border) !important;
  box-shadow: var(--lg-edge), var(--lg-float) !important;

  /* 布局 */
  align-items: stretch;
  gap: 2px;
  padding: 5px;

  /* 层级 */
  z-index: 1000;

  /* 液态过渡 */
  transition:
    background-color 280ms var(--lg-glide),
    box-shadow 280ms var(--lg-glide),
    transform 380ms var(--lg-flow);
}

/* ⚠️ 关键修复：仅在移动端显示底栏（对齐原 style.css 的 860px 断点）*/
@media (max-width: 860px) {
  .mobile-nav {
    display: flex;
  }
}

/* 底栏玻璃边缘 specular */
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .30) 25%,
    rgba(255, 255, 255, .05) 50%,
    rgba(255, 255, 255, .16) 74%,
    rgba(255, 255, 255, .70) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}
[data-theme="dark"] .mobile-nav::before {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, .34) 0%,
    rgba(255, 255, 255, .09) 25%,
    rgba(255, 255, 255, .02) 50%,
    rgba(255, 255, 255, .05) 74%,
    rgba(255, 255, 255, .24) 100%
  );
}

/* ── 液态滑块指示器 ───────────────────────────────────────────── */
.mobile-nav .lg-thumb {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  border-radius: 24px;
  background: var(--lg-thumb-bg);
  box-shadow: var(--lg-thumb-edge);
  pointer-events: none;
  z-index: 1;
  /* 液态流动：弹性位移 + 宽度形变 */
  transition:
    transform 520ms var(--lg-flow),
    width 420ms var(--lg-flow),
    opacity 220ms var(--lg-glide);
  will-change: transform, width;
}

/* ── 导航项 ───────────────────────────────────────────────────── */
.mobile-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 24px;

  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.006em;
  color: var(--ink3);
  background: transparent !important;

  position: relative;
  z-index: 2;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;

  transition:
    color 260ms var(--lg-glide),
    transform 380ms var(--lg-flow),
    font-weight 260ms var(--lg-glide);
  /* 液态按压 */
  transform: scale(1);
}

/* ── 选中胶囊：弹性放大出现（苹果式）───────────────────────────── */
.mobile-nav a::before {
  content: '';
  position: absolute;
  inset: 4px 5px;
  border-radius: 20px;
  background: linear-gradient(160deg,
    rgba(0, 122, 255, .16) 0%,
    rgba(90, 200, 250, .11) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .70),
    inset 0 -1px 0 rgba(0, 122, 255, .06),
    0 1px 4px rgba(0, 122, 255, .12);
  opacity: 0;
  transform: scale(.68);
  transition:
    opacity 200ms var(--lg-glide),
    transform 540ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
  z-index: -1;
}
[data-theme="dark"] .mobile-nav a::before {
  background: linear-gradient(160deg,
    rgba(10, 132, 255, .26) 0%,
    rgba(100, 210, 255, .16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 1px 4px rgba(0, 0, 0, .32);
}
.mobile-nav a.on::before {
  opacity: 1;
  transform: scale(1);
}

/* 图标 */
.mobile-nav a .ic,
.mobile-nav a .i {
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 420ms var(--lg-flow);
  transform-origin: center;
}

/* 涟漪层（液态扩散）*/
.mobile-nav a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(0, 122, 255, .22) 0%,
    rgba(0, 122, 255, .10) 42%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(.55);
  transition:
    opacity 320ms var(--lg-glide),
    transform 320ms var(--lg-glide);
  pointer-events: none;
  z-index: -1;
}

/* ── 选中态：苹果式弹性 + 光晕 ──────────────────────────────── */
.mobile-nav a.on {
  color: var(--brand);
  font-weight: 620;
  letter-spacing: 0;
}
/* ⚠️ 清除原 style.css 给图标加的独立胶囊背景 —— 避免与 a::before 双重叠加
   苹果 iOS 26 是「整个 tab 一个胶囊」，不是「图标一个胶囊」*/
.mobile-nav a.on .i,
.mobile-nav a.on .ic {
  background: transparent !important;
  box-shadow: none !important;
}

/* 图标：弹性放大 + 轻微上浮（苹果 Tab Bar 的 bounce）*/
.mobile-nav a.on .ic,
.mobile-nav a.on .i {
  transform: scale(1.16) translateY(-1px);
  transition: transform 540ms cubic-bezier(.34, 1.56, .64, 1);
}
/* 选中态只保留 a::before 一层胶囊，不再叠加光晕 */


/* 悬停（桌面预览）*/
@media (hover: hover) {
  .mobile-nav a:not(.on):hover {
    color: var(--ink2);
  }
  .mobile-nav a:not(.on):hover .ic {
    transform: scale(1.06);
  }
}

/* 按压：液态形变（水平挤压 + 图标下压）*/
.mobile-nav a:active {
  transform: scale(.94);
  transition-duration: 90ms;
  transition-timing-function: var(--lg-squish);
}
.mobile-nav a:active .ic,
.mobile-nav a:active .i {
  transform: scale(.86) scaleY(.94);
  transition-duration: 90ms;
}
.mobile-nav a:active::after {
  opacity: 1;
  transform: scale(1.05);
  transition-duration: 0ms;
}

/* ==========================================================================
   ④ 顶栏液态玻璃化
   ========================================================================== */

.topbar {
  background: var(--lg-chrome) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border-bottom: 0.5px solid rgba(255, 255, 255, .42) !important;
  box-shadow:
    inset 0 -0.5px 0 rgba(255, 255, 255, .30),
    0 1px 2px rgba(0, 0, 0, .03),
    0 6px 20px rgba(0, 0, 0, .05) !important;
}
[data-theme="dark"] .topbar {
  border-bottom-color: rgba(255, 255, 255, .08) !important;
  box-shadow:
    inset 0 -0.5px 0 rgba(255, 255, 255, .05),
    0 1px 2px rgba(0, 0, 0, .30),
    0 6px 20px rgba(0, 0, 0, .28) !important;
}

/* ==========================================================================
   ⑤ 其他悬浮层玻璃化
   ========================================================================== */

/* 通知弹层 */
.notif-pop {
  background: var(--lg-thick) !important;
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float-lg) !important;
  position: relative;
  isolation: isolate;
}
.notif-pop::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: linear-gradient(150deg, rgba(255,255,255,.8), rgba(255,255,255,.10) 45%, rgba(255,255,255,.55));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* 模态 / 对话框 */
.modal, .dlg, .qf-sheet, .cmt-modal, .auth-card {
  background: var(--lg-thick) !important;
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border) !important;
  box-shadow: var(--lg-edge), var(--lg-float-lg) !important;
  position: relative;
  isolation: isolate;
}
.modal::before, .dlg::before, .cmt-modal::before, .auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: .75px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .22) 30%,
    rgba(255, 255, 255, .05) 55%,
    rgba(255, 255, 255, .50) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* Toast */
.toast {
  background: var(--lg-thick) !important;
  backdrop-filter: var(--lg-blur-lg);
  -webkit-backdrop-filter: var(--lg-blur-lg);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float) !important;
}

/* 侧边栏 */
.sidebar, .side-nav {
  background: var(--lg-thin) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border-right: 0.5px solid rgba(255, 255, 255, .40) !important;
}
[data-theme="dark"] .sidebar, [data-theme="dark"] .side-nav {
  border-right-color: rgba(255, 255, 255, .07) !important;
}

/* 管理端头栏 */
.admin-head {
  background: var(--lg-chrome) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  border-bottom: 0.5px solid rgba(255, 255, 255, .40) !important;
}

/* 登录页卡片 */
.auth-card {
  background: var(--lg-thick) !important;
}

/* 悬浮提醒条 */
.notif-bar {
  background: var(--lg-regular) !important;
  backdrop-filter: var(--lg-blur-sm);
  -webkit-backdrop-filter: var(--lg-blur-sm);
  border: var(--lg-border);
  box-shadow: var(--lg-edge), var(--lg-float-sm) !important;
}

/* ==========================================================================
   ⑥ 液态交互反馈（按钮 / 选项 / 卡片）
   ========================================================================== */

/* 按钮：液态按压 + 光晕扩散 */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .32) 0%, transparent 62%);
  opacity: 0;
  transition: opacity 420ms var(--lg-glide);
  pointer-events: none;
}
.btn:active::after { opacity: 1; transition-duration: 0ms; }

/* 选项：选中时的液态高光流动 */
.opt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.opt::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, .22) 48%,
    transparent 66%);
  transform: translateX(-120%);
  transition: transform 620ms var(--lg-glide);
  pointer-events: none;
  z-index: 1;
}
.opt.sel::before,
.opt.correct::before { transform: translateX(120%); }

/* 卡片：悬停时的光泽扫过 —— 已按要求移除（用户反馈"太雷霆了"）
   注意：overflow: hidden 保留，它是卡片右上角那个大装饰圆的裁剪依据。 */
.subj-card, .stat-card, .tool-item, .rec-item, .set-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ==========================================================================
   ⑦ 内容避让（悬浮底栏不遮挡内容）
   ========================================================================== */

@media (max-width: 860px) {
  /* 为悬浮底栏预留空间：
     底栏高 58px + 底部间距 12px + 呼吸留白 30px = 100px */
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  #app { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav ~ * { scroll-margin-bottom: 100px; }
}

/* ==========================================================================
   ⑧ 液态动效关键帧
   ========================================================================== */

/* 玻璃出现：从液态凝聚 */
@keyframes lg-condense {
  /* ⚠️ 原版在 0% 写了 filter: blur(6px)，插值 blur 会强制逐帧离屏重光栅，
     非常贵。这里去掉 blur，只用 opacity + transform（纯合成器属性）。 */
  0%   { opacity: 0; transform: translateY(16px) scale(.94); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 玻璃高光呼吸 */
@keyframes lg-shimmer {
  0%, 100% { opacity: .55; }
  50%      { opacity: .92; }
}

/* 液态涟漪 */
@keyframes lg-ripple {
  0%   { opacity: .55; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* 底栏入场 */
.mobile-nav {
  animation: lg-condense 620ms var(--lg-glide) both;
}

/* 玻璃层光泽呼吸（仅悬停时，避免干扰）*/
.mobile-nav:hover {
  box-shadow: var(--lg-edge), var(--lg-float), 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav .lg-thumb, .mobile-nav a, .mobile-nav a .ic,
  .btn::after, .opt::before, .subj-card::after, .stat-card::after, .tool-item::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   ⑨ 降级方案（不支持 backdrop-filter 的浏览器）
   ========================================================================== */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --lg-ultra-thin: rgba(255, 255, 255, .92);
    --lg-thin:       rgba(255, 255, 255, .94);
    --lg-regular:    rgba(255, 255, 255, .96);
    --lg-thick:      rgba(255, 255, 255, .98);
    --lg-chrome:     rgba(250, 250, 252, .97);
  }
  [data-theme="dark"] {
    --lg-ultra-thin: rgba(30, 30, 32, .92);
    --lg-thin:       rgba(30, 30, 32, .94);
    --lg-regular:    rgba(30, 30, 32, .96);
    --lg-thick:      rgba(30, 30, 32, .98);
    --lg-chrome:     rgba(22, 22, 24, .97);
  }
}

/* ==========================================================================
   ⑨ 底栏内部对齐修正
   --------------------------------------------------------------------------
   问题：原 .i 固定高 26px + gap + 文字 = 41px，超出可用 36px → flex 挤压 → 视觉歪
   修复：压缩 .i 高度、收紧 padding/gap，消除溢出
   ========================================================================== */

/* 图标容器：26px → 22px，宽高更接近正方形（原 34×26 不对称）*/
.mobile-nav a .i,
.mobile-nav a .ic {
  width: 30px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* 导航项：收紧内边距与间距，消除 5px 溢出 */
.mobile-nav a {
  padding: 4px 2px !important;
  gap: 1px !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 选中胶囊：inset 对称化（上下 3px / 左右 2px），与内容居中对齐 */
.mobile-nav a::before {
  inset: 3px 2px !important;
  border-radius: 18px !important;
}

/* 图标只放大、不上移 —— 避免视觉重心偏移 */
.mobile-nav a.on .i,
.mobile-nav a.on .ic {
  transform: scale(1.14) !important;
}

/* 文字：稳定行高，避免挤压 */
.mobile-nav a > span:last-child,
.mobile-nav a {
  line-height: 1.15;
}