/* ============ 液态玻璃 ============
 * CSS 负责：磨砂、边缘高光、内部光泽、阴影。
 * Chromium 下 js/liquid-glass.js 会把 backdrop-filter 换成 SVG 位移滤镜，带来边缘折射。
 * 使用 .glass 的元素需要自身已定位（relative / absolute / fixed）。
 */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--gb, 14px)) saturate(185%);
  backdrop-filter: blur(var(--gb, 14px)) saturate(185%);
  box-shadow:
    inset 0 1px 0.5px var(--glass-hi),
    inset 0 -1px 1px var(--glass-lo),
    inset 0 0 0 0.5px var(--glass-lo),
    var(--glass-shadow);
  isolation: isolate;
}

/* 边缘高光：沿着圆角描一圈渐变光 */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .85) 0%,
    rgba(255, 255, 255, .18) 22%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, .22) 80%,
    rgba(255, 255, 255, .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75;
  z-index: -1;
}
[data-theme="dark"] .glass::before { opacity: .45; }

/* 顶部柔光 */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 70% at 30% -20%, rgba(255, 255, 255, .28), transparent 55%);
  z-index: -1;
}
[data-theme="dark"] .glass::after { background: radial-gradient(130% 70% at 30% -20%, rgba(255, 255, 255, .12), transparent 55%); }

.glass.strong { background: var(--glass-bg-strong); }

/* 可按压的玻璃 */
.glass-press { transition: transform .35s var(--ease-spring), background .2s; }
.glass-press:active { transform: scale(.96); }