/* ═══════════════════════════════════════════════════════════════════════
   v4c.css — 霜玻璃壳层(2026-09-06 · Steven 看三档样机拍板:「底部做成有点透明的非常好看,全部改成这个样子」)
   叠在 v4b 之后、最后加载。只动壳层四样:①页面底光(极光两团,落雪保留)②顶栏 Regular 档霜玻璃 + 滚动离顶后加厚
   ③手机底栏脱边成悬浮玻璃胶囊(按压回弹)④页脚手机端降为一行、「钉桌面」提示从浮条改成页内一行(避免玻璃叠玻璃)。
   内容层零改动;不支持 backdrop-filter 的内核与系统「减少透明度」自动退回 v4b 实底。回滚 = base.html 删这一行 <link>。
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* 玻璃壳层色(--gl-tint / --gl-tint-edge / --gl-tab / --gl-line / --gl-spec)0908 起由 theme.css 按深浅两档给,这里只剩模糊半径 */
  --gl-blur: 18px;
}

/* ── ① 页面底光(极光两团 + 中央微光)与 ①b 星光:0908 起与小程序同参数,统一在 theme.css 里定义(深浅两档各一套),这里不再重复 ── */

/* ── ② 顶栏:霜玻璃(手机与桌面同款;v4b 的实底/backdrop-filter:none 在此被覆盖) ── */
.topbar {
  background: linear-gradient(180deg, var(--glass-top), rgba(255, 255, 255, 0) 55%), var(--gl-tint);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(170%);
  backdrop-filter: blur(var(--gl-blur)) saturate(170%);
  border-bottom: 1px solid var(--gl-line);
  box-shadow: inset 0 1px 0 var(--gl-spec);
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.topbar.is-scrolled {
  background: linear-gradient(180deg, var(--glass-top), rgba(255, 255, 255, 0) 55%), var(--gl-tint-edge);
  border-bottom-color: var(--hair);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--gl-spec);
}

@media (max-width: 860px) {
  /* ── ③ 底栏:悬浮玻璃胶囊 ── */
  .tabbar {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 8px 4px 8px; border-radius: 28px;
    background: linear-gradient(180deg, var(--glass-top), rgba(255, 255, 255, 0) 60%), var(--gl-tab);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border: 1px solid var(--gl-line);
    box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-top);
  }
  /* 玻璃边缘一圈高光(mask 抠环,只画边不盖内容) */
  .tabbar::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, var(--glass-ring), var(--ice-bg) 38%, rgba(255, 255, 255, 0) 60%, var(--glass-ring-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .tabbar a { position: relative; transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), color .15s; }
  .tabbar a:active { transform: scale(.88); }
  .tabbar .tabbar-share { margin-top: -16px; }
  .tabbar .tb-plus { width: 46px; height: 46px; border: 0; box-shadow: 0 8px 18px -6px rgba(240, 127, 45, .7); }
  .tabbar .tabbar-share:active .tb-plus { transform: scale(.94); }
  body.has-tabbar main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

  /* ── ④ 页脚:手机端一行,不再是一整张卡;链接一个不少 ── */
  body.has-tabbar .site-footer { margin: 28px auto 0; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .site-footer-inner { background: transparent; border: 0; box-shadow: none; padding: 0 6px; gap: 10px 16px; }
  .site-footer-brand { gap: 8px; }
  .site-footer-brand .brand-logo { width: 22px; height: 22px; filter: none; }
  .site-footer-brand strong { font-size: 13px; }
  .site-footer-brand small { font-size: 11px; color: var(--fz-dim-lo); }
  .site-footer-links { gap: 2px 14px; }
  .site-footer-links a { padding: 2px 0; font-size: 12px; font-weight: 600; color: var(--fz-dim); background: none; border: 0; }
  .site-footer-icp { font-size: 11px; }

  /* 「钉桌面」提示:从压在底栏上的浮条,改成 main 与页脚之间的一行(body 是 column flex,用 order 调位置) */
  .a2hs-tip { order: 1; }
  .site-footer { order: 2; }
  .a2hs-tip {
    position: static; width: min(1180px, calc(100% - 24px)); margin: 18px auto 0; bottom: auto;
    background: var(--well-soft); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none; border-color: var(--gold-line);
  }
}

/* ── 退回:不支持 backdrop-filter 的内核 / 系统「减少透明度」→ v4b 实底 ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .topbar.is-scrolled { background: var(--fz-ink); }
  .tabbar { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .topbar, .topbar.is-scrolled { background: var(--fz-ink); }
  .tabbar { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar, .tabbar a { transition: none; }
  .snowfall { opacity: .3; }   /* 与 styles.css 的减少动态口径一致:雪停且更淡 */
}