/* 星群 · 克制的液态玻璃层（2026-10-22）
   只用于导航、搜索、按钮和浮动控件；内容卡片/长文本保持实底。
   不支持 backdrop-filter 时自动退回不透明表面。
   说明：暗色星云上强 SVG 位移会把边缘拉成白色碎线，因此最终采用
   干净的 iOS 磨砂玻璃 + 镜面高光，而不是噪点位移。 */

/* ---------- 首页深色导航 ---------- */
.nav{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01)),
    rgba(8,8,12,.44);
  border-bottom:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 28px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.nav.is-scrolled{
  background:rgba(5,5,8,.82);
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 28px rgba(0,0,0,.2);
}
.nav > *{position:relative;z-index:1}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(320px circle at var(--lgx,50%) var(--lgy,20%),
    rgba(255,255,255,.12),transparent 72%);
  mix-blend-mode:screen;opacity:.8;
}
.nav .pill:not(.solid){
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
}
.nav .pill:not(.solid):hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.34)}
.nav .pill.solid{
  background:rgba(255,255,255,.86)!important;
  border-color:rgba(255,255,255,.72)!important;
  color:#0b0b0e!important;-webkit-text-fill-color:#0b0b0e;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 7px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
}
.nav .pill.solid:hover{background:rgba(255,255,255,.96)!important}

/* 白天/夜间：小圆透镜 */
.theme-toggle{
  position:relative;overflow:hidden;
  width:40px;height:40px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.22),
    rgba(255,255,255,.055) 44%,rgba(8,8,12,.16));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -4px 10px rgba(0,0,0,.16),
    0 4px 14px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  backdrop-filter:blur(12px) saturate(1.3);
}
.theme-toggle::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(26px circle at var(--lgx,35%) var(--lgy,30%),
    rgba(255,255,255,.30),transparent 72%);
  mix-blend-mode:screen;
}
.theme-toggle svg{position:relative;z-index:1;width:17px;height:17px;display:block}
.theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.36)}
.theme-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.atlight .theme-toggle,body.atcontent .theme-toggle{
  background:rgba(255,255,255,.72);border-color:var(--line2);color:var(--ink);
}

/* 次要按钮用轻玻璃，主按钮用更亮的磨砂玻璃 */
.hero-btn--secondary{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 20px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}
.hero-btn--secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.38)}
.hero-btn--primary{
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.72))!important;
  border-color:rgba(255,255,255,.8)!important;
  color:#0b0b0e!important;-webkit-text-fill-color:#0b0b0e!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(0,0,0,.06),
    0 3px 16px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
}
.hero-btn--primary:hover{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.82))!important;
  border-color:#fff!important;
}
.hero-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 社区页浅色悬浮控件 ---------- */
.ch-topbar{
  background:var(--bg);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  backdrop-filter:blur(18px) saturate(1.12);
}
.ch-topsearch{
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 72%,transparent);
  border-color:var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
}
.ch-login{
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  backdrop-filter:blur(12px) saturate(1.15);
}
.ch-submit{
  background:color-mix(in srgb,var(--accent,#111113) 88%,transparent);
  border-color:color-mix(in srgb,var(--accent,#111113) 62%,transparent);
  color:var(--on-accent,#fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
}
.ch-userbox{
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 86%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 40px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
}
.chat__btn{
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 32px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
}
.chat__panel{
  background:var(--panel);
  background:color-mix(in srgb,var(--panel) 91%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 24px 64px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
}

/* ---------- 无模糊支持：退回清晰实底 ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:rgba(5,5,8,.94)}
  .nav .pill:not(.solid){background:rgba(255,255,255,.1)}
  .theme-toggle{background:rgba(255,255,255,.1)}
  .hero-btn--secondary{background:rgba(25,25,32,.92)}
  .hero-btn--primary{background:#fff!important}
  .ch-topbar{background:var(--bg)}
  .ch-topsearch,.ch-login,.ch-userbox,.chat__btn,.chat__panel,.ch-submit{background:var(--panel)}
}

@media (prefers-reduced-transparency:reduce){
  .nav,.nav .pill:not(.solid),.nav .pill.solid,.theme-toggle,.hero-btn--secondary,.hero-btn--primary,
  .ch-topbar,.ch-topsearch,.ch-login,.ch-submit,.ch-userbox,.chat__btn,.chat__panel{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav{background:rgba(5,5,8,.94)}
  .ch-topbar{background:var(--bg)}
  .ch-topsearch,.ch-login,.ch-userbox,.chat__btn,.chat__panel,.ch-submit{background:var(--panel)}
}