/* ==========================================================================
   Liquid Glass v2 — 实体玻璃透镜模型
   --------------------------------------------------------------------------
   核心认知:玻璃由「边缘」定义,不由「填充」定义。

   错误做法:高 alpha 白色填充 + 大模糊 + 1px 均匀细边 → 磨砂塑料贴片
   正确做法:极低填充 + 强对比渐变亮边 + 内部光晕 + 投影 → 玻璃压在表面上

   每个玻璃元素由四层构成,缺一层就不像:
     1. 填充   极低 alpha,只做轻微提亮 + backdrop 模糊/增饱和
     2. 边缘   1.5~2px 渐变亮边,上下亮左右暗(斜切面反光)—— 主角
     3. 内光   紧贴边缘内侧的柔光,模拟光进入玻璃后的散射
     4. 投影   把它从背景上抬起来

   命名空间:所有变量 --lg-,所有类 .lg-,无元素选择器,无 reset。
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* 总控:0 = 磨砂  1 = 全清透。对应 iOS 27 设置里那根连续滑杆 */
  --lg-clarity: 0.55;
  --lg-frost-k: calc(1 - var(--lg-clarity));

  /* 1. 填充 —— 上限很低。超过 0.22 就开始像塑料 */
  --lg-tint: 255 255 255;
  --lg-fill: calc(0.03 + var(--lg-frost-k) * 0.17);
  --lg-blur: calc(6px + var(--lg-frost-k) * 26px);
  --lg-sat: 180%;

  /* 2. 边缘 —— 整套系统的主角。
     渐变让上下边亮、左右边暗,这是斜切玻璃面的光学特征。
     即使 clarity 拉满(填充完全消失),边缘也必须保持强度。 */
  --lg-rim-w: 1.5px;
  --lg-rim-angle: 180deg;
  --lg-rim-hi: rgb(255 255 255 / 0.72);   /* 上下边:强反光 */
  --lg-rim-mid: rgb(255 255 255 / 0.10);  /* 左右边:几乎消失 */
  --lg-rim-lo: rgb(255 255 255 / 0.40);   /* 下边过渡 */

  /* 3. 内部光 */
  --lg-inner-top: rgb(255 255 255 / 0.22);
  --lg-inner-glow: rgb(255 255 255 / 0.14);
  --lg-sheen: rgb(255 255 255 / 0.10);

  /* 4. 投影 */
  --lg-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.45), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --lg-shadow-lg: 0 18px 50px -12px rgb(0 0 0 / 0.60), 0 6px 16px -6px rgb(0 0 0 / 0.40);

  /* 文字 —— 玻璃上的字必须带阴影,否则背景一变就糊 */
  --lg-ink: 255 255 255;
  --lg-ink-dim: 255 255 255 / 0.55;
  --lg-text-shadow: 0 1px 3px rgb(0 0 0 / 0.35);

  --lg-accent: 10 132 255;
  --lg-danger: 255 69 58;
  --lg-success: 48 209 88;
  --lg-warn: 255 159 10;

  /* 输入框的「井」。深色底用黑蒙版做凹陷感；浅色底必须换白，
     否则黑蒙版压在浅背景上会发脏灰（2026-09-06 用户指出）。 */
  --lg-input-fill: rgb(0 0 0 / 0.22);
  --lg-input-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.10),
                     inset 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --lg-input-outline: rgb(255 255 255 / 0.14);

  /* 凹槽底座（.lg-well）。深色底用黑蒙版；浅色底必须换成极淡冷灰，
     否则一块深灰压在浅色页面上非常突兀。 */
  --lg-well-fill: rgb(0 0 0 / calc(0.20 + var(--lg-frost-k) * 0.18));
  --lg-well-rim-hi: rgb(255 255 255 / 0.16);
  --lg-well-rim-mid: rgb(255 255 255 / 0.03);
  --lg-well-rim-lo: rgb(255 255 255 / 0.08);
  --lg-well-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.07),
                    0 10px 34px -10px rgb(0 0 0 / 0.6);

  /* 圆角:控件一律胶囊,卡片用大圆角 */
  --lg-r-sm: 12px;
  --lg-r-md: 20px;
  --lg-r-lg: 28px;
  --lg-r-xl: 36px;
  --lg-r-pill: 999px;

  --lg-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lg-dur: 220ms;

  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             "PingFang SC", "Hiragino Sans GB", sans-serif;
  --lg-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* 浅色底上的玻璃:边缘要引入暗部,否则白边消失在白背景里 */
:root[data-lg-theme="light"] {
  color-scheme: light;
  --lg-ink: 12 15 22;
  --lg-ink-dim: 12 15 22 / 0.55;
  --lg-text-shadow: 0 1px 2px rgb(255 255 255 / 0.5);
  --lg-rim-hi: rgb(255 255 255 / 0.95);
  --lg-rim-mid: rgb(0 0 0 / 0.06);
  --lg-rim-lo: rgb(0 0 0 / 0.10);
  --lg-inner-top: rgb(255 255 255 / 0.70);
  --lg-inner-glow: rgb(255 255 255 / 0.35);
  --lg-fill: calc(0.14 + var(--lg-frost-k) * 0.30);
  --lg-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.10);
  --lg-shadow-lg: 0 18px 50px -12px rgb(0 0 0 / 0.22), 0 6px 16px -6px rgb(0 0 0 / 0.12);
  --lg-input-fill: rgb(255 255 255 / 0.72);   /* 浅色底：白井，不是黑蒙版 */
  --lg-input-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.9),
                     inset 0 2px 6px -2px rgb(20 40 70 / 0.14);
  --lg-input-outline: rgb(20 40 70 / 0.12);
  --lg-well-fill: rgb(30 45 80 / 0.06);
  --lg-well-rim-hi: rgb(255 255 255 / 0.85);
  --lg-well-rim-mid: rgb(30 45 80 / 0.06);
  --lg-well-rim-lo: rgb(255 255 255 / 0.55);
  --lg-well-shadow: inset 0 1px 2px 0 rgb(30 45 80 / 0.10),
                    inset 0 -1px 0 0 rgb(255 255 255 / 0.7);
}


/* --------------------------------------------------------------------------
   背景 —— 玻璃没有背景就是隐形的
   参考图无一例外都是深色 + 强光源。纯色平铺底上做玻璃是白费力气。
   -------------------------------------------------------------------------- */
/* 🔴🔴 2026-09-06 用户定死的两条：
   ① **默认背景不许是近黑/深灰**（原话「绝对不行记住永远」）
   ② 默认用通过验收的「浅紫柔和」这套：淡紫打底 + 紫/粉/蓝三团柔光，
      护眼，玻璃压上去透出的是颜色不是灰。强调色配 --lg-accent: 124 92 255 (#7c5cff)。
   配套：页面根元素写 `data-lg-theme="light"`，`--lg-clarity` 建议 .5。 */
.lg-bg {
  background:
    radial-gradient(120% 90% at 8% 4%,   #cfc4ff 0%, #e4defc 26%, transparent 62%),
    radial-gradient(110% 85% at 96% 12%, #ffd6ec 0%, #f4e2f6 26%, transparent 60%),
    radial-gradient(130% 95% at 88% 98%, #bfe9ff 0%, #ddf3fd 26%, transparent 62%),
    linear-gradient(160deg, #f0edff, #e8f4fb);
  background-attachment: fixed;
  min-height: 100vh;
  color: rgb(var(--lg-ink));
  font-family: var(--lg-font);
  -webkit-font-smoothing: antialiased;
}
/* 备选：绿蓝青（猎鹰小程序首页原样色值，跟那套系统统一视觉时用） */
.lg-bg--mint {
  background:
    radial-gradient(140% 100% at 12% 4%,  #4ED66B 0%, #86E79A 22%, transparent 62%),
    radial-gradient(135% 95%  at 95% 14%, #47B6F5 0%, #86CFFA 22%, transparent 60%),
    radial-gradient(140% 102% at 82% 99%, #22C9A8 0%, #6BDCC5 22%, transparent 64%),
    radial-gradient(140% 102% at 6% 92%,  #9BDD4F 0%, #BFEA88 22%, transparent 62%),
    linear-gradient(160deg, #E4F6E8, #DFF1FB);
}
/* 需要深色氛围时才加 .lg-bg--dark，且**禁止**用近黑/深灰，必须带明显色相 */
.lg-bg--dark {
  background-color: #16274f;
  background-image:
    radial-gradient(50% 46% at 50% 44%, rgb(96 152 255 / .52), transparent 72%),
    radial-gradient(42% 38% at 16% 10%, rgb(84 208 232 / .30), transparent 66%),
    radial-gradient(46% 40% at 88% 92%, rgb(70 130 235 / .30), transparent 66%);
}
/* 🔴 这条以前会把 .lg-bg 盖掉（选择器权重更高），害得项目里改了默认背景不生效、
   背景变回淡蓝粉。默认背景本身已经是浅色那套了，这里不再另设一套，只保留
   深色变体在浅色主题下的处理。 */
:root[data-lg-theme="light"] .lg-bg--dark {
  background-color: #16274f;
}


/* ==========================================================================
   基类 .lg —— 四层结构
   ::before = 顶面高光    ::after = 边缘
   注意:.lg 占用了这两个伪元素,别在同一元素上再用。
   ========================================================================== */
.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-r-md);
  color: rgb(var(--lg-ink));
  text-shadow: var(--lg-text-shadow);

  /* 层 1:填充 */
  background-color: rgb(var(--lg-tint) / var(--lg-fill));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
          backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));

  /* 层 3 + 4:内光 与 投影 */
  box-shadow:
    inset 0 1px 0 0 var(--lg-inner-top),
    inset 0 -18px 32px -24px var(--lg-inner-glow),
    var(--lg-shadow);
}

/* 层 2:边缘。用 mask 挖空中间,只留一圈渐变描边。
   不能用普通 border 代替 —— border 是均匀的,而真实玻璃斜切面上下亮左右暗。 */
.lg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: var(--lg-rim-w);
  pointer-events: none;
  background: linear-gradient(var(--lg-rim-angle),
    var(--lg-rim-hi)  0%,
    var(--lg-rim-mid) 30%,
    var(--lg-rim-mid) 58%,
    var(--lg-rim-lo)  84%,
    var(--lg-rim-hi)  100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* 顶面高光:从上方扫下来的柔光,让表面有弧度感 */
.lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--lg-sheen) 0%, transparent 46%);
}


/* --------------------------------------------------------------------------
   材质变体
   -------------------------------------------------------------------------- */

/* 透镜:高亮边 + 外辉光。用于选中态、需要浮起来的元素。 */
.lg-lens {
  --lg-rim-w: 2px;
  --lg-rim-hi: rgb(255 255 255 / 0.95);
  --lg-rim-mid: rgb(198 220 255 / 0.30);
  --lg-rim-lo: rgb(255 255 255 / 0.78);
  --lg-inner-top: rgb(255 255 255 / 0.45);
  box-shadow:
    inset 0 1px 2px 0 rgb(255 255 255 / 0.45),
    inset 0 0 22px -8px rgb(190 216 255 / 0.55),
    0 0 20px -4px rgb(150 190 255 / 0.30),
    0 8px 22px -8px rgb(0 0 0 / 0.55);
}

/* 清透:几乎无填充无模糊,纯靠边缘定形。内部与背景同色。 */
.lg-clear {
  --lg-fill: 0.02;
  --lg-blur: 1px;
  --lg-sat: 105%;
  --lg-rim-w: 2px;
  --lg-rim-hi: rgb(255 255 255 / 0.92);
  --lg-rim-mid: rgb(255 255 255 / 0.16);
  --lg-rim-lo: rgb(255 255 255 / 0.55);
  --lg-sheen: rgb(255 255 255 / 0.06);
}

/* 磨砂:重模糊高填充。用于 dock、模态、必须保证可读性的容器。 */
.lg-frost {
  --lg-fill: calc(0.14 + var(--lg-frost-k) * 0.26);
  --lg-blur: calc(28px + var(--lg-frost-k) * 24px);
  --lg-sat: 160%;
}

/* 凹槽:承载浮起透镜的深色底座,自己不发光。 */
/* 🔴 2026-09-06 改：原来底座写死黑蒙版 rgb(0 0 0 / .2~.38)，
   在浅色主题下就是一大块深灰，跟浅色配色完全打架（第 5 个坑）。
   改成 token，浅色主题换成极淡的冷灰蓝。 */
.lg-well {
  --lg-rim-hi: var(--lg-well-rim-hi);
  --lg-rim-mid: var(--lg-well-rim-mid);
  --lg-rim-lo: var(--lg-well-rim-lo);
  --lg-sheen: rgb(255 255 255 / 0.03);
  background-color: var(--lg-well-fill);
  box-shadow: var(--lg-well-shadow);
}


/* --------------------------------------------------------------------------
   组件
   -------------------------------------------------------------------------- */

/* 圆形图标按钮 */
.lg-orb {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  cursor: pointer; flex: 0 0 auto; border: 0;
  transition: transform var(--lg-dur) var(--lg-ease),
              background-color var(--lg-dur) var(--lg-ease);
}
.lg-orb:hover  { background-color: rgb(var(--lg-tint) / calc(var(--lg-fill) * 2)); }
.lg-orb:active { transform: scale(0.93); }
.lg-orb--sm { width: 38px; height: 38px; }
.lg-orb--lg { width: 64px; height: 64px; }

/* 分段控件:凹槽底座 + 浮起透镜 */
.lg-segbar {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px; border-radius: var(--lg-r-pill);
}
.lg-seg {
  display: grid; place-items: center; gap: 5px;
  padding: 10px 26px; border-radius: var(--lg-r-pill);
  color: rgb(var(--lg-ink-dim));
  font: 500 13px/1.2 var(--lg-font);
  text-decoration: none; cursor: pointer; border: 0; background: none;
  transition: color var(--lg-dur) var(--lg-ease);
}
.lg-seg:hover { color: rgb(var(--lg-ink) / 0.8); }
.lg-seg.is-active { color: rgb(var(--lg-ink)); }
.lg-seg__icon { width: 26px; height: 26px; display: grid; place-items: center; }

/* 按钮 */
.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border-radius: var(--lg-r-pill); border: 0;
  font: 500 14px/1 var(--lg-font);
  cursor: pointer; user-select: none;
  transition: transform 140ms var(--lg-ease),
              background-color var(--lg-dur) var(--lg-ease);
}
.lg-btn:hover  { background-color: rgb(var(--lg-tint) / calc(var(--lg-fill) * 2.2)); }
.lg-btn:active { transform: scale(0.96); }
.lg-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* 主按钮用纯白实底 —— 玻璃界面里最强的对比就是「不透明」 */
.lg-btn--solid {
  background-color: rgb(var(--lg-ink) / 0.95);
  color: rgb(8 11 18); text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.5);
}

/* 2026-09-06 新增：品牌色不透明主按钮。
   原来只有 --accent（半透明 0.55），在浅色底上会糊成淡蓝，
   而第 7 条硬性约束要求「主按钮用不透明实底」。浅色主题尤其需要这一个。 */
.lg-btn--brand {
  background-color: rgb(var(--lg-accent));
  color: #fff; text-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 6px 18px -8px rgb(var(--lg-accent) / 0.85);
}
.lg-btn--brand::after { display: none; }
.lg-btn--brand:hover { background-color: rgb(var(--lg-accent) / 0.88); }
.lg-btn--solid::after { display: none; }
.lg-btn--solid:hover { background-color: rgb(var(--lg-ink)); }

.lg-btn--accent { background-color: rgb(var(--lg-accent) / 0.55); }
.lg-btn--danger { background-color: rgb(var(--lg-danger) / 0.50); }
.lg-btn--accent:hover { background-color: rgb(var(--lg-accent) / 0.72); }
.lg-btn--danger:hover { background-color: rgb(var(--lg-danger) / 0.68); }

.lg-btn--ghost {
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: rgb(var(--lg-ink-dim));
}
.lg-btn--ghost::after, .lg-btn--ghost::before { display: none; }
.lg-btn--ghost:hover { color: rgb(var(--lg-ink)); background: rgb(var(--lg-tint) / 0.08); }

/* 卡片 / 面板 / 小组件 */
.lg-card  { border-radius: var(--lg-r-md); padding: 18px; }
.lg-panel {
  border-radius: var(--lg-r-lg); padding: 28px;
  box-shadow:
    inset 0 1px 0 0 var(--lg-inner-top),
    inset 0 -18px 32px -24px var(--lg-inner-glow),
    var(--lg-shadow-lg);
}
.lg-widget { border-radius: var(--lg-r-lg); padding: 20px; aspect-ratio: 1; }
.lg-widget--wide { aspect-ratio: 2 / 1; }

/* 彩色标签:玻璃从内部透出色相,而不是整块染色 */
.lg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 22px; border-radius: var(--lg-r-pill);
  font: 500 15px/1.2 var(--lg-font); border: 0; cursor: pointer;
  --lg-rim-hi: rgb(255 255 255 / 0.60);
}
.lg-chip[class*="lg-hue-"] {
  background-image: radial-gradient(130% 150% at 22% 12%,
    rgb(var(--lg-hue) / 0.55), rgb(var(--lg-hue) / 0.12) 55%, transparent 78%);
}
.lg-hue-green  { --lg-hue: 120 220 140; }
.lg-hue-blue   { --lg-hue: 110 150 255; }
.lg-hue-red    { --lg-hue: 255 90 110; }
.lg-hue-silver { --lg-hue: 220 228 240; }
.lg-hue-gold   { --lg-hue: 255 190 80; }
.lg-hue-violet { --lg-hue: 190 120 255; }

/* 顶栏:滚动时切磨砂,保证下方内容穿过时文字可读 */
.lg-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-radius: 0;
  transition: background-color var(--lg-dur) var(--lg-ease);
}
.lg-bar::after {
  padding: 0; background: none;
  box-shadow: inset 0 -1px 0 0 rgb(255 255 255 / 0.10);
  -webkit-mask: none; mask: none;
}
.lg-bar.is-scrolled { --lg-fill: 0.16; --lg-blur: 30px; }

.lg-toolbar {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: var(--lg-r-pill);
}

/* 表单:输入框是「凹」的,和「凸」的按钮相反 */
.lg-input, .lg-textarea, .lg-select {
  /* 2026-09-06 补：这套 css 声明了「无 reset」，所以宿主页面没写
     `*{box-sizing:border-box}` 时，width:100% + padding 会把输入框撑出卡片外。
     输入框自己兜住，不依赖宿主的 reset。 */
  box-sizing: border-box;
  width: 100%; padding: 13px 20px; border: 0;
  border-radius: var(--lg-r-pill);
  font: 400 14px/1.4 var(--lg-font);
  color: rgb(var(--lg-ink));
  /* 2026-09-06 改：原来写死 rgb(0 0 0 / .22)，那是一层黑蒙版，
     压在浅色背景上就是脏灰。改成 token，浅色主题换成白色井。 */
  background-color: var(--lg-input-fill);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--lg-input-shadow);
  outline: 1px solid var(--lg-input-outline); outline-offset: -1px;
  transition: outline-color var(--lg-dur) var(--lg-ease);
}
.lg-textarea {
  border-radius: var(--lg-r-md); font-family: var(--lg-font-mono);
  min-height: 120px; resize: vertical;
}
.lg-input::placeholder, .lg-textarea::placeholder { color: rgb(var(--lg-ink-dim)); }
.lg-input:focus, .lg-textarea:focus, .lg-select:focus { outline-color: rgb(255 255 255 / 0.45); }
.lg-label { display: block; margin-bottom: 8px; font: 500 13px/1.4 var(--lg-font); color: rgb(var(--lg-ink-dim)); }

.lg-btn:focus-visible, .lg-orb:focus-visible, .lg-seg:focus-visible,
.lg-chip:focus-visible, .lg-input:focus-visible, .lg-textarea:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.9); outline-offset: 3px;
}

/* 徽章 */
.lg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--lg-r-pill);
  font: 500 12px/1.5 var(--lg-font);
  --lg-rim-w: 1px;
}
.lg-badge--success { --lg-hue: 48 209 88;  background-image: radial-gradient(130% 150% at 25% 10%, rgb(var(--lg-hue)/.5), transparent 75%); }
.lg-badge--danger  { --lg-hue: 255 69 58;  background-image: radial-gradient(130% 150% at 25% 10%, rgb(var(--lg-hue)/.5), transparent 75%); }
.lg-badge--warn    { --lg-hue: 255 159 10; background-image: radial-gradient(130% 150% at 25% 10%, rgb(var(--lg-hue)/.5), transparent 75%); }

/* 表格:玻璃只包外壳。每行都套 backdrop-filter 会拖垮低端机。 */
.lg-table-wrap { border-radius: var(--lg-r-lg); overflow: hidden; }
.lg-table { width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--lg-font); }
.lg-table th {
  padding: 14px 20px; text-align: left;
  font: 600 12px/1.5 var(--lg-font); color: rgb(var(--lg-ink-dim));
  box-shadow: inset 0 -1px 0 0 rgb(255 255 255 / 0.12);
}
.lg-table td { padding: 14px 20px; box-shadow: inset 0 -1px 0 0 rgb(255 255 255 / 0.06); }
.lg-table tr:last-child td { box-shadow: none; }
.lg-table tbody tr:hover td { background-color: rgb(255 255 255 / 0.05); }

/* 模态。必须挂在 body 直属下:backdrop-filter 会创建层叠上下文,
   放在玻璃容器内部的 fixed 定位会相对该容器而非视口。 */
.lg-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgb(0 0 0 / 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lg-modal {
  position: fixed; z-index: 901;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  border-radius: var(--lg-r-xl); padding: 32px;
}

/* 长文本容器:正文不压在强模糊玻璃上 */
.lg-content {
  border-radius: var(--lg-r-lg); padding: 28px;
  background-color: rgb(0 0 0 / 0.32);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  outline: 1px solid rgb(255 255 255 / 0.10); outline-offset: -1px;
  text-shadow: none;
}

/* 通透度滑杆 */
.lg-slider {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, rgb(255 255 255 / .25), rgb(255 255 255 / .85));
}
.lg-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgb(255 255 255 / .95); box-shadow: 0 2px 8px rgb(0 0 0 / .5);
}
.lg-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / .95); box-shadow: 0 2px 8px rgb(0 0 0 / .5);
}

.lg-title { font: 600 26px/1.25 var(--lg-font); letter-spacing: -0.02em; margin: 0 0 8px; }
.lg-dim   { color: rgb(var(--lg-ink-dim)); }
.lg-mono  { font-family: var(--lg-font-mono); font-size: 13px; }


/* --------------------------------------------------------------------------
   降级与无障碍 —— 必写项
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg { background-color: rgb(28 32 42 / 0.94); }
  :root[data-lg-theme="light"] .lg { background-color: rgb(248 250 253 / 0.96); }
}

/* 系统「降低透明度」:玻璃变实色,但边缘保留 —— 它承担了形状识别 */
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg-input, .lg-content, .lg-scrim {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .lg { background-color: rgb(26 30 40 / 0.98) !important; }
  :root[data-lg-theme="light"] .lg { background-color: rgb(250 251 254 / 0.99) !important; }
  .lg-scrim { background: rgb(0 0 0 / 0.75) !important; }
}

@media (prefers-contrast: more) {
  :root {
    --lg-rim-w: 2px;
    --lg-rim-hi: rgb(255 255 255 / 0.95);
    --lg-rim-mid: rgb(255 255 255 / 0.70);
    --lg-rim-lo: rgb(255 255 255 / 0.90);
    --lg-ink-dim: 255 255 255 / 0.90;
    --lg-text-shadow: 0 1px 4px rgb(0 0 0 / 0.8);
    --lg-clarity: 0.15;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg, .lg-btn, .lg-orb, .lg-seg, .lg-bar, .lg-input { transition: none !important; }
  .lg-btn:active, .lg-orb:active { transform: none !important; }
}

@media print {
  .lg, .lg-content {
    background: #fff !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid #bbb !important;
  }
  .lg::after, .lg::before { display: none !important; }
}