/*
 * ============================================================
 *  液态玻璃设计系统 · Liquid Glass（仿 iOS 26）
 * ============================================================
 *  这是**唯一真相源**：所有页面的玻璃质感都从这里来。
 *
 *  三处接入（各自方式不同，别改成本地副本）：
 *    ① 前台 Astro  ——  `blog/src/styles/main.css` 里
 *                      `@import "../../public/assets/lg.css" layer(components);`
 *                      （进 components 层 ⇒ Tailwind utilities 仍能覆盖它）
 *    ② 后台页面    ——  `_admin/*.html` 里 `<link rel="stylesheet" href="/assets/lg.css">`
 *    ③ 网盘页      ——  worker 的 `repoPageCss()`（`blog/public/_worker.js`）里**内联**一份
 *                      ★ 那一份不能引外部 CSS：同一个页面会同时出现在
 *                        博客域和网盘域，网盘域没有 /assets/ 这些静态资源。
 *                        改这里的令牌必须同步那边 —— `verify-liquid-glass.cjs` 第 ④ 组
 *                        会把每个令牌**逐值**比对，改一边不改另一边 = 自检当场红。
 *
 *  ★ 玻璃要「看得出来」，前提是**背后有东西可透**。
 *    所以本文件自带一层彩色光斑（`body::before` / `body::after`），
 *    不需要页面改任何 HTML。只加玻璃不加光斑 = 看起来跟原来一样。
 *
 *  ★ 命名：令牌 `--lg-*`，类 `lg-*`（都带前缀，避免和项目既有类撞名）。
 *
 *  ────────────────────────────────────────────────────────────
 *  第 56 轮：从「磨砂玻璃」改成「液态玻璃」
 *  ────────────────────────────────────────────────────────────
 *  第 49 轮那版的问题不是「不够透」，而是**模糊太狠**：
 *  旧版主档模糊 22px，会把背后的照片形状整个抹平，卡片看起来
 *  就是一块**不透明的板**（实测截图：照片上叠卡片 → 只剩一团紫灰）。
 *
 *  真正的液态玻璃靠四样东西立起来，缺一样就退化成毛玻璃：
 *    ① 模糊**克制**（13px），保住背后的明暗分布与色块边界；
 *       靠 saturate/brightness/contrast 把颜色**提鲜**，而不是靠糊掉细节。
 *    ② 边缘的**折射环**：最外 1px 亮线 + 紧贴内侧的柔辉光
 *       （光在玻璃断口处被折射、聚到边上）。
 *    ③ **厚度**：上缘内一条**暗**线 —— 玻璃有厚度才会挡光。
 *    ④ **景深**：远影（大而柔）+ 中影 + 接触影（小而紧）三层；
 *       只给两层会「浮在空中」，落不到纸上。
 *
 *  ★ 这些配方被收进两个复合令牌 `--lg-surface` / `--lg-surface-hi`，
 *    所有控件共用一份 —— 改材质只要改这一处，不必满文件找 box-shadow。
 *
 *  ────────────────────────────────────────────────────────────
 *  令牌档位顺序（★ 同步网盘页内联副本时必须照这个顺序写）
 *  ────────────────────────────────────────────────────────────
 *  ① :root                                        —— 亮色主档
 *  ② html.dark                                    —— 暗色档
 *  ③ @supports not(…backdrop-filter…) 的 :root    —— 降级亮档
 *  ④ @supports not(…backdrop-filter…) 的 html.dark —— 降级暗档
 *
 *  按此顺序：
 *    · 只有三档填充（fill / fill-thin / fill-thick）有**四档**；
 *    · 其余令牌是 1~2 档（多数只有 :root 一档）。
 *  `verify-liquid-glass.cjs` 第 ④ 组就是按这个顺序逐值比对的。
 *
 *  ★★ 本文件的注释里**不许**出现「令牌名 + 冒号 + 值」的写法
 *     （比如写成 `--lg-xxx: 12px` 这样引旧值）。校验器抠令牌的正则
 *     不认注释，会把注释里的那行当成真声明吃掉 ⇒ 抠到一坨跨行垃圾，
 *     而两边「刚好一致」时校验器照样绿 = **静默损坏**。
 *     要引旧值直接写中文（「旧版主档模糊 22px」），别带冒号。
 */

/* ============================================================
 * ① 令牌
 * ============================================================ */
:root {
  /* 材质：模糊强度 / 饱和度提升 / 亮度对比（iOS 玻璃会「提鲜」背后的颜色） */
  --lg-blur: 13px;
  --lg-blur-sm: 9px;
  --lg-sat: 195%;
  --lg-bright: 1.08;
  --lg-contrast: 1.04;

  /* 玻璃底色：三档厚度。thick 挡文字、thin 只做氛围 */
  /* ★ 填充是「玻璃感」的关键旋钮：透太多文字会糊，太实就是一块白板。
     0.34 / 0.62 是实测能同时看清背景色和正文的值。
     ★ 注意：决定「像不像玻璃」的**不是**这个数（它主要管可读性），
       而是 `--lg-blur`。第 49 轮把填充压到 0.40 却留着 22px 模糊，
       结果是「半透明的不透明板」—— 这个坑别再踩。 */
  --lg-fill-thick: rgba(255, 255, 255, 0.62);
  --lg-fill: rgba(255, 255, 255, 0.34);
  --lg-fill-thin: rgba(255, 255, 255, 0.18);

  /* 描边与高光：玻璃的「边缘」全靠这两样立起来 */
  --lg-stroke: rgba(255, 255, 255, 0.58);
  --lg-stroke-soft: rgba(9, 22, 56, 0.08);
  --lg-hi-top: rgba(255, 255, 255, 0.92);
  --lg-hi-bot: rgba(255, 255, 255, 0.24);
  --lg-sheen: rgba(255, 255, 255, 0.5);

  /* 折射环 + 厚度（第 56 轮新增）：
     ring  = 最外那圈亮线，玻璃的「断口」
     edge  = 紧贴内侧的柔辉光，光被透镜聚到边上
     shade = 上缘内侧的暗线，厚度挡光
     cool / warm = 断口两端的色散（光穿过厚玻璃会在两边偏冷/偏暖）。
                   这一条是「液态玻璃」最好认的特征：真实玻璃的边不是灰的，
                   而是从冷到暖的一条渐变。值必须压得很低，否则像贴了彩边。 */
  --lg-ring: rgba(255, 255, 255, 0.58);
  --lg-edge-glow: rgba(255, 255, 255, 0.4);
  --lg-inner-shade: rgba(9, 22, 56, 0.1);
  --lg-ring-cool: rgba(198, 222, 255, 0.5);
  --lg-ring-warm: rgba(255, 226, 206, 0.5);

  /* 投影：大而柔、低透明度 —— 硬阴影会立刻「塑料化」 */
  --lg-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.3),
    0 7px 16px -9px rgba(15, 23, 42, 0.18),
    0 1px 2px -1px rgba(15, 23, 42, 0.12);
  --lg-shadow-lift: 0 26px 54px -20px rgba(15, 23, 42, 0.36),
    0 12px 22px -11px rgba(15, 23, 42, 0.2),
    0 2px 4px -1px rgba(15, 23, 42, 0.12);

  /* ★★ 材质配方（复合令牌）：所有控件的 box-shadow 都取这两条。
       顺序 = 远影 → 中影 → 接触影 → 顶边亮线 → 底边亮线 → 1px 折射环
              → 上缘内侧辉光 → 下缘内侧辉光 → 上缘厚度暗线。
       改材质只改这里，别去控件里各写一份。 */
  --lg-surface: var(--lg-shadow), inset 0 1px 0 var(--lg-hi-top),
    inset 0 -1px 0 var(--lg-hi-bot), inset 0 0 0 1px var(--lg-ring),
    inset 0 10px 20px -15px var(--lg-edge-glow),
    inset 0 -12px 22px -17px var(--lg-edge-glow),
    inset 0 2px 6px -3px var(--lg-inner-shade);
  --lg-surface-hi: var(--lg-shadow-lift), inset 0 1px 0 var(--lg-hi-top),
    inset 0 -1px 0 var(--lg-hi-bot), inset 0 0 0 1px var(--lg-ring),
    inset 0 12px 24px -15px var(--lg-edge-glow),
    inset 0 -14px 26px -17px var(--lg-edge-glow),
    inset 0 2px 6px -3px var(--lg-inner-shade);

  /* 圆角：iOS 26 是连续曲率，CSS 用偏大的圆角近似 */
  --lg-r: 24px;
  --lg-r-sm: 16px;
  --lg-r-xs: 12px;
  --lg-r-pill: 999px;

  /* 文字（玻璃上的字要够黑，否则被背景吃掉） */
  --lg-text: #14181f;
  --lg-text-2: rgba(20, 24, 31, 0.62);

  /* 主色（与项目其它地方一致） */
  --lg-accent: #4a6cf7;
  --lg-accent-ink: #ffffff;

  /* 光斑配色：**点缀**，不负责基调 —— 基调交给 --lg-canvas。
     这四个值调高会把整页染成一块彩色雾，玻璃反而糊掉。 */
  --lg-orb-1: rgba(93, 131, 255, 0.34);
  --lg-orb-2: rgba(168, 118, 255, 0.28);
  --lg-orb-3: rgba(64, 214, 214, 0.22);
  --lg-orb-4: rgba(255, 138, 190, 0.2);
  --lg-orb-blur: 88px;
  --lg-orb-alpha: 0.8;

  /* ★ 画布底色：整页一层极淡的斜向彩渐变。
     为什么光靠「四角光斑」不够：光斑是 radial，衰减很快，页面中部基本无色，
     而卡片正好在中间 —— 玻璃透出来还是白的，看起来就是「一块白板」。
     有了这层底，卡片透出的始终是带色倾向的浅调，玻璃才立得住。
     ★ 第 56 轮把色度稍微加浓了一档：原来那版太接近纯白，玻璃没有可透的东西。 */
  --lg-canvas: linear-gradient(
    165deg,
    #e6ecff 0%,
    #f0e7ff 30%,
    #e5f5fa 62%,
    #ffecf3 100%
  );
}

html.dark {
  --lg-fill-thick: rgba(30, 34, 46, 0.72);
  --lg-fill: rgba(28, 32, 44, 0.46);
  --lg-fill-thin: rgba(28, 32, 44, 0.26);

  --lg-stroke: rgba(255, 255, 255, 0.16);
  --lg-stroke-soft: rgba(255, 255, 255, 0.07);
  --lg-hi-top: rgba(255, 255, 255, 0.28);
  --lg-hi-bot: rgba(255, 255, 255, 0.07);
  --lg-sheen: rgba(255, 255, 255, 0.14);

  --lg-ring: rgba(255, 255, 255, 0.18);
  --lg-edge-glow: rgba(255, 255, 255, 0.13);
  --lg-inner-shade: rgba(0, 0, 0, 0.34);
  /* 深色下色散要更弱：暗底上的彩边会被眼睛放大成「脏」 */
  --lg-ring-cool: rgba(150, 196, 255, 0.26);
  --lg-ring-warm: rgba(255, 198, 168, 0.22);

  --lg-shadow: 0 20px 46px -20px rgba(0, 0, 0, 0.72),
    0 8px 18px -10px rgba(0, 0, 0, 0.5),
    0 1px 3px -1px rgba(0, 0, 0, 0.45);
  --lg-shadow-lift: 0 28px 60px -22px rgba(0, 0, 0, 0.8),
    0 14px 26px -12px rgba(0, 0, 0, 0.55),
    0 2px 5px -1px rgba(0, 0, 0, 0.5);

  --lg-text: #eef1f6;
  --lg-text-2: rgba(238, 241, 246, 0.6);

  --lg-accent: #7d9bff;

  --lg-orb-1: rgba(70, 104, 220, 0.42);
  --lg-orb-2: rgba(126, 88, 206, 0.36);
  --lg-orb-3: rgba(40, 156, 158, 0.3);
  --lg-orb-4: rgba(190, 92, 140, 0.28);
  --lg-orb-alpha: 0.75;
  --lg-canvas: linear-gradient(
    165deg,
    #101425 0%,
    #16112a 30%,
    #0e1a22 62%,
    #1a1220 100%
  );
}

/* ============================================================
 * ② 背景光斑 —— 玻璃的「底」
 *    不给页面加任何节点，直接挂在 body 的两个伪元素上。
 *    z-index:-1 的伪元素绘制在**父元素背景之上、内容之下**，
 *    所以它能被上层玻璃模糊，又不会挡住正文。
 * ============================================================ */
body {
  background-color: var(--page-bg, #f5f6fa);
  /* 画布彩底（见 --lg-canvas 的说明）+ 下面两层光斑 = 玻璃的背景层 */
  background-image: var(--lg-canvas);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  opacity: var(--lg-orb-alpha);
  filter: blur(var(--lg-orb-blur));
  /* 关掉「玻璃模糊」时这一层也不该抢戏 */
  transition: opacity 0.3s ease;
}

body::before {
  background: radial-gradient(
      42vw 42vw at 12% 8%,
      var(--lg-orb-1),
      transparent 62%
    ),
    radial-gradient(38vw 38vw at 88% 18%, var(--lg-orb-2), transparent 64%),
    radial-gradient(40vw 40vw at 78% 88%, var(--lg-orb-3), transparent 66%);
}

body::after {
  background: radial-gradient(
      36vw 36vw at 22% 82%,
      var(--lg-orb-4),
      transparent 64%
    ),
    radial-gradient(34vw 34vw at 52% 46%, var(--lg-orb-2), transparent 68%);
  /* 第二层错开一点，避免两层光斑完全重合显得假 */
  transform: translate3d(4vw, -3vw, 0) scale(1.05);
}

/* ============================================================
 * ③ 玻璃基类
 * ============================================================ */

/* 基底：任何玻璃元素都套这一套（材质取自 --lg-surface） */
.lg-glass {
  position: relative;
  background: var(--lg-fill);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
    brightness(var(--lg-bright)) contrast(var(--lg-contrast));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
    brightness(var(--lg-bright)) contrast(var(--lg-contrast));
  color: var(--lg-text);
}

/* ── 边缘折射环（第 56 轮新增）──
 *  一条**按角度变化**的亮线：左上最亮、中间最暗、右下余晖。
 *  为什么必须单独画：`border` 只能是单一颜色，做不出「光从一侧来」的感觉，
 *  而真实玻璃的边上永远有一道方向性的反光 —— 缺了它，圆角就只是一条灰线。
 *
 *  ★ 用 mask 把渐变裁成「只留边框那一圈」：padding + content-box 打洞。
 *    标准写法是 `mask-composite: exclude`，WebKit 老写法是 `-webkit-mask-composite: xor`，
 *    两个都写（Chrome/Edge/Safari 都能吃到）。
 *  ★ 只给**非替换元素**用；input/select/textarea 上伪元素不渲染，
 *    它们的折射环靠 --lg-surface 里的 `inset 0 0 0 1px var(--lg-ring)`。
 *  ★★ 选择器表里**同时列了前台自己的类**（`.card-base` / `.btn-regular` /
 *    `.tag-pill` / `.astro-code`）：这几处是全站 32 张卡片、约 50 个按钮的真正落点，
 *    漏掉它们 = 改了设计系统但页面纹丝不动。放在这里是为了**只留一份配方**，
 *    不往 main.css 里再抄一遍（同一份内容存两份，改一份另一份必然过期）。 */
.lg-glass::before,
.lg-card::before,
.lg-list::before,
.lg-msg::before,
.lg-toast::before,
.lg-thumb::before,
.lg-tabs::before,
.lg-btn::before,
.card-base::before,
.btn-regular::before,
.tag-pill::before,
.astro-code::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  /* 冷 → 亮 → 暗 → 暖：模拟光穿过厚玻璃时两端的色散 */
  background: linear-gradient(
    155deg,
    var(--lg-ring-cool) 0%,
    var(--lg-hi-top) 14%,
    var(--lg-edge-glow) 28%,
    transparent 46%,
    transparent 56%,
    var(--lg-edge-glow) 84%,
    var(--lg-ring-warm) 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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* 顶部斜向高光（镜面反光）。★ 用 ::before 会占掉折射环，
   所以做成独立类 .lg-sheen 由需要的元素自己加，避免和内容伪元素打架。 */
.lg-sheen {
  position: relative;
  overflow: hidden;
}
.lg-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* 两层：斜向的镜面（左上到右下）+ 顶部一道横向的「天光」。
     只有斜向那层时，玻璃看起来像斜着贴上去的；加横向天光才「平」得下来。 */
  background: linear-gradient(
      158deg,
      var(--lg-hi-top) 0%,
      transparent 24%,
      transparent 74%,
      var(--lg-sheen) 100%
    ),
    linear-gradient(180deg, var(--lg-sheen) 0%, transparent 32%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* 三档厚度 */
.lg-thick {
  background: var(--lg-fill-thick);
}
.lg-thin {
  background: var(--lg-fill-thin);
  box-shadow: inset 0 1px 0 var(--lg-hi-top), inset 0 -1px 0 var(--lg-hi-bot),
    inset 0 0 0 1px var(--lg-ring);
}
/* 只做描边、几乎不填充 —— 用于分隔线密集的容器 */
.lg-ghost {
  background: transparent;
  box-shadow: none;
}

/* 圆角档位 */
.lg-r-sm {
  border-radius: var(--lg-r-sm);
}
.lg-r-xs {
  border-radius: var(--lg-r-xs);
}
.lg-r-pill {
  border-radius: var(--lg-r-pill);
}

/* 可点击玻璃：悬停抬起、按下回弹 */
.lg-press {
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.24s ease, background-color 0.24s ease;
  cursor: pointer;
}
.lg-press:hover {
  transform: translateY(-1px);
  box-shadow: var(--lg-surface-hi);
}
.lg-press:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.08s;
}

/* ============================================================
 * ④ 控件
 * ============================================================ */

/* ── 按钮 ── */
.lg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--lg-text);
  background: var(--lg-fill);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r-pill);
  box-shadow: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.24s ease, background-color 0.24s ease, filter 0.24s ease;
}
/* 悬停时一道高光斜扫过去 —— 液态玻璃最容易被认出来的那一下。
   ★ 只在悬停时跑（不悬停就不存在），所以不会一直动、不抢注意力。 */
.lg-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 32%,
    var(--lg-hi-top) 50%,
    transparent 68%
  );
  opacity: 0;
  transform: translateX(-120%);
  transition: opacity 0.2s ease, transform 0.55s ease;
}
.lg-btn:hover::after {
  opacity: 0.34;
  transform: translateX(120%);
}
.lg-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--lg-surface-hi);
  filter: brightness(1.05);
}
.lg-btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}
.lg-btn:disabled,
.lg-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

/* 主按钮：实心强调色 + 玻璃高光 */
.lg-btn--primary {
  color: var(--lg-accent-ink);
  background: var(--lg-accent);
  border-color: transparent;
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    inset 0 12px 24px -16px rgba(255, 255, 255, 0.5);
}
.lg-btn--primary:hover {
  filter: brightness(1.08);
}
html.dark .lg-btn--primary {
  color: #0f1424;
}

/* 危险按钮 */
.lg-btn--danger {
  color: #fff;
  background: #e5484d;
  border-color: transparent;
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    inset 0 12px 24px -16px rgba(255, 255, 255, 0.45);
}
html.dark .lg-btn--danger {
  background: #d93f45;
}

/* 无框按钮（只有悬停时才浮起一层薄玻璃） */
.lg-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--lg-text-2);
}
.lg-btn--ghost::before {
  display: none;
}
.lg-btn--ghost:hover {
  background: var(--lg-fill-thin);
  border-color: var(--lg-stroke);
  box-shadow: var(--lg-surface);
  color: var(--lg-text);
}
.lg-btn--ghost:hover::before {
  display: block;
}

/* 尺寸 */
.lg-btn--sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
}
.lg-btn--block {
  width: 100%;
}

/* ── 输入控件 ──
 *  ★ input/select/textarea 是**替换元素**，::before 不渲染 ⇒
 *    它们的折射环只能靠 --lg-surface 里的 1px inset 环。 */
.lg-field {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-size: 0.925rem;
  color: var(--lg-text);
  background: var(--lg-fill-thin);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r-sm);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring),
    inset 0 8px 16px -13px var(--lg-edge-glow),
    inset 0 2px 5px -3px var(--lg-inner-shade);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  transition: box-shadow 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease;
  outline: none;
}
.lg-field::placeholder {
  color: var(--lg-text-2);
  opacity: 0.75;
}
.lg-field:hover {
  border-color: color-mix(in srgb, var(--lg-stroke) 70%, var(--lg-accent));
}
.lg-field:focus,
.lg-field:focus-visible {
  background: var(--lg-fill);
  border-color: var(--lg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 26%, transparent),
    inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring);
}
textarea.lg-field {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.6;
}
select.lg-field {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
  background-repeat: no-repeat;
}
/* 勾选框／单选框也玻璃化 */
.lg-check {
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border: 1px solid var(--lg-stroke);
  border-radius: 6px;
  background: var(--lg-fill-thin);
  box-shadow: inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lg-check::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  transform: scale(0);
  transition: transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
  background: var(--lg-accent-ink);
  clip-path: polygon(
    14% 46%,
    0 60%,
    38% 100%,
    100% 24%,
    86% 10%,
    36% 72%
  );
}
.lg-check:checked {
  background: var(--lg-accent);
  border-color: transparent;
}
.lg-check:checked::after {
  transform: scale(1);
}
.lg-check[type="radio"] {
  border-radius: 50%;
}
.lg-check[type="radio"]::after {
  clip-path: none;
  border-radius: 50%;
}

/* ── 卡片 / 面板 ── */
.lg-card {
  position: relative;
  background: var(--lg-fill);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
    brightness(var(--lg-bright)) contrast(var(--lg-contrast));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat))
    brightness(var(--lg-bright)) contrast(var(--lg-contrast));
  color: var(--lg-text);
}
.lg-card--pad {
  padding: 1.15rem 1.3rem;
}

/* ── 胶囊 / 标签 ── */
.lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.22rem 0.7rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--lg-text-2);
  background: var(--lg-fill-thin);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r-pill);
  box-shadow: inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
a.lg-chip:hover {
  color: var(--lg-text);
  transform: translateY(-1px);
  background: var(--lg-fill);
}
.lg-chip--accent {
  color: var(--lg-accent);
  background: color-mix(in srgb, var(--lg-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--lg-accent) 30%, transparent);
}

/* 状态徽章 */
.lg-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: var(--lg-r-pill);
  border: 1px solid var(--lg-stroke);
  background: var(--lg-fill-thin);
  box-shadow: inset 0 1px 0 var(--lg-hi-top);
  color: var(--lg-text-2);
  white-space: nowrap;
}
.lg-badge--ok {
  color: #1c7a4d;
  background: color-mix(in srgb, #2f9e63 16%, transparent);
  border-color: color-mix(in srgb, #2f9e63 32%, transparent);
}
.lg-badge--warn {
  color: #8a5410;
  background: color-mix(in srgb, #d9822b 18%, transparent);
  border-color: color-mix(in srgb, #d9822b 34%, transparent);
}
.lg-badge--danger {
  color: #a52a2e;
  background: color-mix(in srgb, #e5484d 16%, transparent);
  border-color: color-mix(in srgb, #e5484d 32%, transparent);
}
html.dark .lg-badge--ok {
  color: #7fe0ac;
}
html.dark .lg-badge--warn {
  color: #f2c078;
}
html.dark .lg-badge--danger {
  color: #f7a3a6;
}

/* ── 分段控件 / 标签页（iOS 的 UISegmentedControl） ── */
.lg-tabs {
  position: relative;
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--lg-fill-thin);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r-pill);
  box-shadow: inset 0 1px 0 var(--lg-hi-top), inset 0 -1px 0 var(--lg-hi-bot),
    inset 0 0 0 1px var(--lg-ring),
    inset 0 10px 20px -16px var(--lg-edge-glow);
  -webkit-backdrop-filter: blur(16px) saturate(var(--lg-sat));
  backdrop-filter: blur(16px) saturate(var(--lg-sat));
}
.lg-tabs > button,
.lg-tabs > a {
  border: 0;
  background: transparent;
  color: var(--lg-text-2);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.32rem 0.95rem;
  border-radius: var(--lg-r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}
.lg-tabs > button:hover,
.lg-tabs > a:hover {
  color: var(--lg-text);
}
.lg-tabs > .on,
.lg-tabs > [aria-selected="true"] {
  color: var(--lg-text);
  background: var(--lg-fill-thick);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14),
    inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring);
}

/* ── 列表 / 行 ── */
.lg-list {
  position: relative;
  background: var(--lg-fill);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r);
  box-shadow: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  overflow: hidden;
}
.lg-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  color: var(--lg-text);
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.lg-row + .lg-row {
  border-top: 1px solid var(--lg-stroke-soft);
}
.lg-row:hover {
  background: var(--lg-fill-thin);
}

/* ── 图片框（缩略图 / 预览）── */
.lg-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--lg-r-sm);
  border: 1px solid var(--lg-stroke);
  background: var(--lg-fill-thin);
  box-shadow: var(--lg-surface);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-sat));
}
.lg-thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 图片上压一层玻璃条（叠字用） */
.lg-thumb__bar {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  color: var(--lg-text);
  background: var(--lg-fill-thick);
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-r-xs);
  box-shadow: inset 0 1px 0 var(--lg-hi-top), inset 0 0 0 1px var(--lg-ring);
  -webkit-backdrop-filter: blur(14px) saturate(var(--lg-sat));
  backdrop-filter: blur(14px) saturate(var(--lg-sat));
}

/* ── 提示条 / 吐司 ── */
.lg-msg,
.lg-toast {
  position: relative;
  display: block;
  padding: 0.7rem 1rem;
  border-radius: var(--lg-r-sm);
  border: 1px solid var(--lg-stroke);
  background: var(--lg-fill);
  box-shadow: var(--lg-surface);
  color: var(--lg-text);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
}
.lg-toast {
  border-radius: var(--lg-r-pill);
  padding: 0.55rem 1.2rem;
}
.lg-msg--ok {
  border-color: color-mix(in srgb, #2f9e63 40%, var(--lg-stroke));
}
.lg-msg--err {
  border-color: color-mix(in srgb, #e5484d 45%, var(--lg-stroke));
}

/* ── 分隔线（玻璃环境里比实线更合适）── */
.lg-hr {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lg-stroke-soft) 12%,
    var(--lg-stroke-soft) 88%,
    transparent
  );
}

/* ============================================================
 * ⑤ 降级：不支持 backdrop-filter 的浏览器
 *    直接把填充调厚，至少保证「不是透明板」+ 文字可读。
 * ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --lg-fill: rgba(255, 255, 255, 0.92);
    --lg-fill-thin: rgba(255, 255, 255, 0.86);
    --lg-fill-thick: rgba(255, 255, 255, 0.96);
  }
  html.dark {
    --lg-fill: rgba(28, 32, 44, 0.94);
    --lg-fill-thin: rgba(28, 32, 44, 0.9);
    --lg-fill-thick: rgba(30, 34, 46, 0.97);
  }
  body::before,
  body::after {
    opacity: calc(var(--lg-orb-alpha) * 0.5);
  }
}

/* ============================================================
 * ⑥ 无障碍：尊重「减少动态效果」
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lg-btn,
  .lg-press,
  .lg-chip,
  .lg-check::after {
    transition-duration: 0.01ms !important;
  }
  .lg-btn:hover,
  .lg-press:hover,
  a.lg-chip:hover {
    transform: none;
  }
  /* 扫光也不许跑（它是动效，不是静态材质） */
  .lg-btn::after,
  .lg-btn:hover::after {
    opacity: 0;
    transform: none;
    transition: none;
  }
}