/* 液态玻璃顶栏
   设计取舍：
   1. 仅顶栏使用玻璃材质，页面其余部分仍保持纯扁平；
   2. 玻璃层由三部分叠加而成 —— 半透明底色 + 背景模糊构成磨砂基底，
      顶部镜面高光模拟玻璃边缘反射，底部细描边负责与内容分隔；
   3. 模糊效果需要有「可被模糊的东西」才看得出来，因此页面底层铺了一层
      极淡的环境色，强度控制在几乎不影响整体扁平观感的程度。 */

:root {
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-border: rgba(27, 30, 35, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.9);
  --glass-blur: 20px;
  --glass-saturate: 170%;
}

/* 环境色层：为玻璃提供可被模糊的底色。
   色晕高度由 --glass-tint-h 控制，默认与顶栏高度对齐（顶栏内层 56px + 1px 描边），
   后台顶栏更高（60px），在 admin.css 中覆盖该变量。
   渐变在边界处已完全透明，因此顶栏下方不会残留色带。 */
body {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(44% 100% at 11% 0%, rgba(200, 85, 61, 0.30), transparent 100%),
    radial-gradient(44% 100% at 89% 0%, rgba(72, 104, 158, 0.32), transparent 100%),
    radial-gradient(36% 100% at 50% 0%, rgba(124, 96, 158, 0.18), transparent 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% var(--glass-tint-h, 57px);
}

/* 玻璃主体 */
.glass-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 建立独立层叠上下文，使负层级的伪元素只压在本元素背景之上 */
  isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-border);
  /* 内阴影作为顶边反光，用于表现玻璃的厚度，不是投影 */
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

/* 镜面高光：自顶部向下快速衰减，只在边缘形成反光带 */
.glass-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.30) 38%,
    rgba(255, 255, 255, 0.06) 72%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 顶边一道横向光带，强化玻璃的边界感 */
.glass-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* 不支持 backdrop-filter 时退化为接近实色，优先保证文字可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-bar {
    background: rgba(255, 255, 255, 0.97);
  }
}

/* 系统开启「降低透明度」时同样退化为实色 */
@media (prefers-reduced-transparency: reduce) {
  .glass-bar {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}