/* ============================================================
   V3.32  液态玻璃 · 第四版底层重做（最终覆盖层，替代 v329 玻璃方案）
   位于 v331 之后加载；与 v328/v329 冲突处：同特异性 + !important
   + 后加载 三重取胜。版本信息以本文件头为准（v3.32）。

   调研纲领（前三版"假"的根因）：
   ① 缺真正的折射/透镜畸变（只有均匀模糊）；
   ② 边缘高光均匀一圈 = 贴纸感；
   ③ 玻璃背后无可折射内容；
   ④ 玻璃滥用（内容卡片也被玻璃化，整页糊成一片）。
   iOS 27 风向：克制、偏静态、高光锚定上下缘。

   五层架构：
   L1 基底   —— blur(14px)+saturate(165%)、168deg 半透明着色、
                蓝灰悬浮投影 + 下缘厚度内暗；
   L2 边缘环 —— ::after 非均匀亮度环（上缘最亮 → 两侧衰减 →
                下缘冷色），1px mask 裁环，替代 v329 的 135deg 均匀环；
   L3 折射档 —— Chromium 专属：SVG feTurbulence+feDisplacementMap
                真实透镜畸变（body[data-glass="full"]，由 index.html
                检测脚本挂档，滤镜 #lg-refract 由 index.html 注入）；
   L4 镜面高光 —— .lg-spec 元素（app.js 注入），椭圆高光随指针/
                滚动在 ±15% 内锚定漂移，mix-blend:screen；
   L5 弹窗实底锐利层 —— 弹窗 .97 高不透明实底 + 单层弱模糊，
                遮罩不再模糊，弹窗内文字与背后内容彻底解耦。
   配套策略：内容卡片去玻璃化（消除"整页糊成一片"）、多级降级。

   红线：零全局 * / 元素级 transition/animation 覆盖；
   选择器全部来自线上真实类名（index.html / app.js 已核实）。
   ============================================================ */

/* ---------- 设计变量（日/夜双套） ---------- */
body[data-theme="light"]{ /* v3.32 */
  --lg-bg:linear-gradient(168deg,rgba(255,255,255,.55),rgba(255,255,255,.32));
  --lg-shadow:0 10px 30px rgba(31,41,80,.14),inset 0 -2px 6px rgba(31,41,80,.05);
  --lg-ring-top:rgba(255,255,255,.85);
  --lg-ring-mid:rgba(255,255,255,.28);
  --lg-ring-low:rgba(255,255,255,.10);
  --lg-ring-cool:rgba(174,198,255,.22);
  --lg-toplight:rgba(255,255,255,.30);
  --lg-card:rgba(255,255,255,.82);
  --lg-card-edge:inset 0 1px 0 rgba(255,255,255,.92);
  --lg-card-shadow:0 6px 18px rgba(31,41,80,.08);
  --lg-sheet-a:rgba(255,255,255,.97);
  --lg-sheet-b:rgba(247,248,252,.95);
  --lg-sheet-shadow:0 24px 70px rgba(31,41,80,.24),0 6px 18px rgba(31,41,80,.10),inset 0 -2px 6px rgba(31,41,80,.05);
  --lg-sheet-top:rgba(255,255,255,.55);
  --lg-head-scroll:rgba(255,255,255,.72);
  --lg-head-line:rgba(15,23,42,.08);
}
body[data-theme="dark"]{ /* v3.32 */
  --lg-bg:linear-gradient(168deg,rgba(48,52,64,.42),rgba(28,30,38,.30));
  --lg-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 -2px 6px rgba(0,0,0,.28);
  --lg-ring-top:rgba(255,255,255,.52);
  --lg-ring-mid:rgba(255,255,255,.16);
  --lg-ring-low:rgba(255,255,255,.07);
  --lg-ring-cool:rgba(150,172,230,.14);
  --lg-toplight:rgba(255,255,255,.12);
  --lg-card:rgba(30,32,40,.82);
  --lg-card-edge:inset 0 1px 0 rgba(255,255,255,.10);
  --lg-card-shadow:0 6px 18px rgba(0,0,0,.4);
  --lg-sheet-a:rgba(30,31,36,.95);
  --lg-sheet-b:rgba(24,25,30,.93);
  --lg-sheet-shadow:0 24px 74px rgba(0,0,0,.72),0 6px 20px rgba(0,0,0,.5),inset 0 -2px 6px rgba(0,0,0,.3);
  --lg-sheet-top:rgba(255,255,255,.10);
  --lg-head-scroll:rgba(30,31,36,.72);
  --lg-head-line:rgba(255,255,255,.08);
}

/* ---------- L1 基底：克制模糊 + 半透明着色 + 蓝灰厚度投影 ---------- */
.glass{ /* v3.32 */
  background:var(--lg-bg);
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  box-shadow:var(--lg-shadow);
}

/* ---------- L2 边缘环（核心）：非均匀亮度环，替代 v329 的 135deg 均匀环
   上缘最亮 .85 → 18% 处 .28 → 55% 处 .10 → 下缘一线冷色 .22；
   padding:1px + mask content-box/全盒 exclude 裁出 1px 环
   （-webkit-mask-composite:xor 为 Safari/旧 Chromium 双套）。 ---------- */
.glass::after{ /* v3.32 */
  content:''; position:absolute; inset:0; border-radius:inherit;
  z-index:2; pointer-events:none;
  padding:1px;
  background:linear-gradient(180deg,
      var(--lg-ring-top) 0%,
      var(--lg-ring-mid) 18%,
      var(--lg-ring-low) 55%,
      var(--lg-ring-cool) 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;
}
/* 区域视口：v328 已夺回网格背景并去掉模糊，不回加光环与折射 */
.zone-viewport.glass::after{ display:none; } /* v3.32 */

/* ---------- ::before 静态顶光（高光锚定上缘，iOS 27 风向）
   顶光为常量、不随鼠标（随动高光交给 L4 的 .lg-spec）；
   full 折射档下此层追加 SVG 透镜滤镜（见下）。 ---------- */
.glass::before{ /* v3.32 */
  content:''; position:absolute; inset:0; border-radius:inherit;
  z-index:0; pointer-events:none;
  background:linear-gradient(180deg,var(--lg-toplight),rgba(255,255,255,0) 34%);
}

/* ---------- L3 折射档：Chromium 专属真实透镜畸变
   检测脚本（index.html 内联）判定支持 backdrop-filter:url()
   且为 Chromium 且非 reduced-motion 时，在 body 挂 data-glass="full"：
   元素自身模糊让位给 ::before 的 SVG 位移滤镜（模糊+噪声折射
   +饱和增强，滤镜参数由 index.html 注入的 #lg-refract 定义）。 ---------- */
body[data-glass="full"] .glass{ /* v3.32 */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body[data-glass="full"] .glass::before{ /* v3.32 */
  -webkit-backdrop-filter:url(#lg-refract);
  backdrop-filter:url(#lg-refract);
}
/* 弹窗/区域视口豁免折射：弹窗文字锐利优先，视口网格不可被糊 */
body[data-glass="full"] .modal.glass::before,
body[data-glass="full"] .pop-sheet.glass::before,
body[data-glass="full"] .urgent-box.glass::before,
body[data-glass="full"] .gl-box.glass::before,
body[data-glass="full"] .zone-viewport.glass::before{ /* v3.32 */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ---------- L4 镜面高光：.lg-spec（由 app.js 注入到每个 .glass 首位）
   椭圆高光锚定在 --lx/--ly（JS 按指针±15%、滚动 -20%~ -8% 驱动），
   screen 混合只在玻璃上加亮、不改变内容色。 ---------- */
.lg-spec{ /* v3.32 */
  display:block; position:absolute; inset:0; border-radius:inherit;
  z-index:1; pointer-events:none;
  background:radial-gradient(140px 60px at var(--lx,50%) var(--ly,-20%),
      rgba(255,255,255,.22),transparent 70%);
  mix-blend-mode:screen;
}

/* ---------- 玻璃分级使用策略：内容卡片去玻璃化
   卡片/统计卡/表格容器改近实色底 + 顶缘 1px 高光 + 软阴影，
   backdrop-filter 归零——消除"整页糊成一片"；
   悬停抬升等既有动画（.stat-card:hover 等）一律不触碰。
   玻璃只保留在导航层（.sidebar/.topbar）与悬浮层（弹窗/浮层/
   toast/.glass-btn 控件）。 ---------- */
.card,.stat-card,.table-wrap{ /* v3.32 */
  background:var(--lg-card);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:var(--lg-card-shadow),var(--lg-card-edge);
}
/* 去玻璃化卡片不再需要折射/光环伪元素（顶缘高光已并入 box-shadow） */
.card::before,.stat-card::before,.table-wrap::before,
.card::after,.stat-card::after,.table-wrap::after,
.card .lg-spec,.stat-card .lg-spec,.table-wrap .lg-spec{ display:none; } /* v3.32 */

/* ---------- 内容区留白（仪表盘呼吸感；≤860px 的移动覆盖见下方降级三） ---------- */
.content{ /* v3.32 */
  padding:20px 20px 24px;
}
.dash-grid{ margin-top:20px; } /* v3.32 */
.stat-grid,.dash-grid{ gap:18px; } /* v3.32 */

/* ---------- 到货工具条圆角对齐 .table-wrap ---------- */
.arr-filter.glass{ border-radius:18px; } /* v3.32 */

/* ---------- L5 弹窗文字清晰度修复（用户明确投诉项）
   弹窗对自身背后不再"半透明取样"：.97 高不透明实底 +
   blur(8px) 单层弱模糊（背景已近实底，无需强模糊）；
   遮罩层完全移除 backdrop-filter，消除"侧栏折射 → 遮罩模糊 →
   弹窗模糊"三层叠加栈；表情面板同入实底名单（通知面板走主弹窗，
   天然继承）。弹窗内文字渲染在实底之上，天然锐利；边缘沿用
   L2 非均匀环（自带 .glass 类，::after 自动继承），顶缘高光重写。
   逐项 !important 压过 v328（backdrop-filter:none / --sheet-*）
   与 v329（blur(12px) / --sheet-tint-*）。 ---------- */
.modal.glass,
.pop-sheet.glass,
.urgent-box.glass,
.gl-box.glass,
.emoji-panel.glass,
#globalLoading .gl-box.glass,
.global-loader .gl-box.glass{ /* v3.32 */
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
  background:linear-gradient(168deg,var(--lg-sheet-a),var(--lg-sheet-b)) !important;
  border-color:transparent !important;
  box-shadow:var(--lg-sheet-shadow) !important;
}
/* 弹窗顶缘高光（覆盖 v329 的鼠标点+顶弧、v328 的 --sheet-sheen） */
.modal.glass::before,
.pop-sheet.glass::before,
.urgent-box.glass::before,
.gl-box.glass::before,
.emoji-panel.glass::before,
#globalLoading .gl-box.glass::before{ /* v3.32 */
  opacity:1 !important;
  mix-blend-mode:normal !important;
  background:linear-gradient(180deg,var(--lg-sheet-top),rgba(255,255,255,0) 26%) !important;
}
/* 文字锐利兜底 */
.modal,.pop-sheet,.urgent-box,.gl-box,.emoji-panel{ /* v3.32 */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 遮罩层：移除全部 backdrop-filter（断掉三层模糊叠加栈），
   只留半透明压暗底色；模糊由弹窗自身单层承担 */
.modal-mask{ /* v3.32 */
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:rgba(10,12,20,.24) !important;
}

/* ---------- 弹窗 Scroll Edge：滚动时头部渐显（类由 app.js 加卸）
   默认透明；.modal-body/.pop-body scrollTop>8 时加 .scrolled，
   头部渐变到 .72 白 + blur(8px) + 底分隔线（iOS 弹窗滚动手感）。 ---------- */
.modal-head,.pop-head{ /* v3.32 */
  transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}
.modal-head.scrolled,.pop-head.scrolled{ /* v3.32 */
  background:linear-gradient(180deg,var(--lg-head-scroll),var(--lg-head-scroll));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--lg-head-line);
}

/* ---------- 降级一：lite 档（非 Chromium / Safari / Firefox）
   走 L1 基底 blur(14px)，关闭 L4 随动高光，保留 ::before 静态顶光
   与 L2 边缘环（静态部分全部保留）。 ---------- */
body[data-glass="lite"] .lg-spec{ display:none; } /* v3.32 */

/* ---------- 降级二：性能模式
   v325 已 !important 关闭全部 backdrop-filter 与伪元素动画，
   此处只需关掉本层新增的伪元素与高光节点。 ---------- */
body[data-perf="1"] .glass::before,
body[data-perf="1"] .glass::after{ display:none !important; } /* v3.32 */
body[data-perf="1"] .lg-spec{ display:none !important; } /* v3.32 */

/* ---------- 降级三：移动端强制 lite 视觉（不依赖 data-glass）
   ≤860px 一律收回 SVG 折射与随动高光，只留静态基底+边缘环，
   小屏 GPU 预算优先给滚动流畅度。 ---------- */
@media (max-width:860px){ /* v3.32 */
  body[data-glass="full"] .glass{
    -webkit-backdrop-filter:blur(14px) saturate(165%);
    backdrop-filter:blur(14px) saturate(165%);
  }
  body[data-glass="full"] .glass::before{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .lg-spec{ display:none; }
  /* 移动端 .content 恢复 v323/v330 紧凑留白，不继承桌面 20px 内边距 */
  .content{ padding:0 0 calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- 降级四：减弱动态偏好——只关装饰性随动高光
   弹窗出入场/卡片入场等交互动画由各自样式层负责，本层不干预。 ---------- */
@media (prefers-reduced-motion:reduce){ /* v3.32 */
  .lg-spec{ display:none; }
}

/* ============================================================
   V3.32 收尾自查：
   · 全文件零全局 * / 元素级 transition/animation 覆盖；
     唯一 transition 声明在 .modal-head/.pop-head（Scroll Edge
     专用，无既有过渡可被压）；
   · 弹窗四件套（.modal/.pop-sheet/.urgent-box/.gl-box）与线上
     DOM（app.js L15/L259/L2873、index.html）逐一核对，
     逐项 !important 压过 v328/v329；
   · mask / mask-composite / backdrop-filter 均带 -webkit- 双套；
   · .zone-viewport 豁免光环与折射，网格显示不受影响；
   · body 渐变底/光斑沿用 v329，不重复声明；.content 无背景渐变；
   · 注释全部单层，无嵌套，逐对配对。
   ============================================================ */
