/* =============================================================
   智链导航 v3.0.0 · 移动端专属组件
   - 底部导航栏（fixed，仅 ≤640px 显示）
   - 安全区（viewport-fit=cover 刘海屏）
   不改动顶部品牌栏 / 推荐位业务逻辑，仅补移动端快速导航。
   ============================================================= */

/* 底部导航：仅小屏显示 */
.sl-bnav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
  height: calc(var(--sl-bnav-h) + var(--sl-safe-b));
  padding-bottom: var(--sl-safe-b);
  background: var(--sl-card);
  border-top: 1px solid var(--sl-border);
  box-shadow: 0 -4px 16px rgba(20, 40, 80, .06);
}
.sl-bnav-inner {
  display: flex; height: var(--sl-bnav-h); align-items: stretch;
  max-width: 1440px; margin: 0 auto;
}
.sl-bnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 11px; color: var(--sl-muted);
}
.sl-bnav a .sl-bnav-ico { font-size: 19px; line-height: 1; }
.sl-bnav a.active { color: var(--sl-primary); }
/* 中间「提交网址」凸起主按钮 */
.sl-bnav a.sl-bnav-cta { color: var(--sl-primary); font-weight: 700; }
.sl-bnav a.sl-bnav-cta .sl-bnav-ico {
  width: 42px; height: 42px; margin-top: -18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-primary), var(--sl-primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
}

@media (max-width: 640px) {
  .sl-bnav { display: block; }
  /* 给主体/页脚让位，避免内容被固定底栏挡住 */
  .site-footer { padding-bottom: calc(var(--sl-bnav-h) + var(--sl-safe-b) + 12px) !important; }
  main.container.main { padding-bottom: calc(var(--sl-bnav-h) + var(--sl-safe-b)); }
  /* 底栏显示后，原悬浮「提交网址」FAB 与之重复，隐藏避免两个提交入口叠在一起 */
  .fab-apply { display: none !important; }
}

/* 移动排行卡：窄屏下热门排行用更紧凑的横排编号卡（首页上半热门位不动，
   这里只提供一个可复用的 .sl-rank-card 基底，供移动端降级使用） */
.sl-rank-card {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--sl-card); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-m);
}
.sl-rank-card .sl-rank-no {
  flex: none; width: 22px; height: 22px; border-radius: 6px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: var(--sl-info-soft); color: var(--sl-muted);
}
.sl-rank-card:nth-child(1) .sl-rank-no,
.sl-rank-card:nth-child(2) .sl-rank-no,
.sl-rank-card:nth-child(3) .sl-rank-no { background: var(--sl-warning-soft); color: var(--sl-warning); }

html[data-theme="dark"] .sl-bnav { background: #1e2230; border-color: #2c3140; }