/* ===== 桌面/平板：悬浮导航与顶栏的间距修正 =====
   问题：.tabs 的 sticky top 写成 54px（手机值），桌面顶栏高 66px
        ⇒ 滚动后标签栏吸在 54px，压进顶栏底部 12px，看起来上下挨着 ✗
   修正：按顶栏真实高度分档设置，并加大标签栏自身的上下留白
*/

/* ---------- 桌面（>1024）：顶栏 66px ---------- */
.tabs {
  top: 66px !important;
  padding: 13px 14px 11px !important;
  margin-bottom: 18px !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 6px 16px -10px rgba(30, 50, 90, .40) !important;
}

/* 吸顶时补一条极淡的分隔线，视觉上"贴住"而不是"挤住" */
.tabs::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 1px;
  background: rgba(30, 50, 90, .07);
  pointer-events: none;
}

/* ---------- 平板（681~1024）：顶栏 58px ---------- */
@media (max-width: 1024px) {
  .tabs {
    top: 58px !important;
    padding: 12px 12px 10px !important;
    margin-bottom: 16px !important;
  }
}

/* ---------- 手机（≤680）：顶栏 54px ---------- */
@media (max-width: 680px) {
  .tabs {
    top: 54px !important;
    padding: 9px 11px 8px !important;
    margin-bottom: 12px !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* ---------- 吸顶栏与内容之间再留一点呼吸（滚动时不贴脸） ---------- */
#app .wrap { padding-top: 14px !important; }
@media (max-width: 680px) {
  #app .wrap { padding-top: 10px !important; }
}