/* 家里三个页面共用的底子：壁纸层 + 玻璃。
   做法参考 aibqoq-cmyk/liquid-glass-design 的 CSS 玻璃（磨砂 + 内高光 + 色散边 + 渐变描边），没有 WebGL 折射。
   规矩：玻璃里面别再套玻璃（Safari 嵌套 backdrop-filter 会发灰），卡片里的小块用 .fill。
   以后换壁纸：改 --wallpaper 就行，玻璃会透出它。 */
:root {
  --bg: #F5F2F4; --ink: #1f1b1e; --soft: #8d8489; --line: rgba(31,27,30,.08);
  --wallpaper: var(--bg);
  --sakura: #FBD2D2; --vine: #CAE691; --salt: #B6D4E9; --snowblue: #D0E7F5; --ivory: #FFFEF8; --moon: #F9F6E5;
  --her: #DE8BA0; --me: #5E7F2E; --sky: #4A7BA3;
  --glass-tint: 255, 255, 255; --glass-alpha: .55; --glass-blur: 22px;
  --ambient: 222, 139, 160;  /* 描边中段染的颜色，跟着壁纸换 */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

.wallpaper { position: fixed; inset: 0; z-index: -1; background: var(--wallpaper); background-size: cover; background-position: center; pointer-events: none; }

.glass {
  position: relative; isolation: isolate;
  background: rgba(var(--glass-tint), var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),        /* 顶上一道内高光，光从上面打下来 */
    inset 0 -1px 0 rgba(255,255,255,.18),       /* 底下很淡的反光 */
    inset 1px 0 0 rgba(255,140,180,.14),        /* 左边一丝粉 */
    inset -1px 0 0 rgba(130,190,255,.18),       /* 右边一丝蓝 */
    0 8px 28px rgba(31,27,30,.08), 0 1px 3px rgba(31,27,30,.06);
}
.glass::before {  /* 渐变描边，中段染上环境色 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(140deg, rgba(255,255,255,.9), rgba(var(--ambient),.32) 28%, rgba(255,255,255,.08) 52%,
    rgba(130,190,255,.26) 78%, rgba(255,255,255,.6));
  -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, linear-gradient(#000 0 0); mask-composite: exclude;
}
.glass--thin { --glass-alpha: .38; --glass-blur: 16px; }
.glass--thick { --glass-alpha: .78; --glass-blur: 30px; }

.fill { background: rgba(31,27,30,.04); }

.pressable { transition: transform .32s var(--spring), filter .12s ease-out; }
.pressable:active { transform: scale(.955); filter: brightness(1.06); transition-duration: .12s; transition-timing-function: ease-out; }

@media (prefers-reduced-transparency: reduce) { .glass { --glass-alpha: .92; } }