/* ═══════════════════════════════════════════════════════════════════════
   ui-glass-x.css · 液态玻璃 2.0「会流动」定稿版  v1.0（2026-11-12）
   ───────────────────────────────────────────────────────────────────────
   田总 2026-11-12 拍板：在 ui-liquid-glass.css（1.0 晚霞换肤）之上叠加本层，
   全站升级为苹果 Liquid Glass 质感。本文件由实验稿 Temp/uip/glassx/
   ui-glass-x.css 的「会流动(gxl)」档正式化而来，规则与实测截图一一对应。

   【内容】
     §0 整页壁纸（白光斑+蓝团，blur 72px）+ 全屏磨砂噪点
     §1~7 卡片三层玻璃 / 侧栏顶栏 / 指标带 / 表格行 / 浮层 / 视图切换
     §8 侧栏：从「贴上去的平板」改成「浮起来的玻璃砖」（四边留缝+圆角26px）
     §9 一级菜单拆成一块一块独立玻璃胶囊
     §10「会流动」三要素：边缘折射 url(#gxRefract)（ui-glass-refract.js）
         + 表面流光 gxFlowSweep（13~17s 错峰）+ 指针高光（ui-glass-flow.js）

   【架构】html.gxl 单开关层。37 页 <html class="gxl"> + 本文件 <link>。
   【回滚】删掉 37 页里的 <link ui-glass-x.css> 与 <html> 上的 gxl class
           即 100% 回到 ui-liquid-glass.css 1.0，其余文件零依赖。
   【红线】
     ① 动画只走 background-position —— 不动 transform / scale / filter。
     ② 折射 url(#gxRefract) 仅 Chromium 支持，其余浏览器整条 filter 链
       退化为无折射（实验已验证安全）；IE/老 Edge 无 backdrop-filter 不受影响。
     ③ §12 的 .ui-glass-f 降级补强必须放最末 —— 特异性与本文件卡片规则
       平局，靠「更靠后」取胜（三点菜单 fixed 定位事故防线，见 ui-glass.js）。
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 0. 噪点素材（只给背景用） ──────────────────────────────────────── */
html.gxl {
  /* 大颗粒糯感（磨砂玻璃的橘皮纹理） */
  --gx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  /* 细砂（真正毛玻璃的致密砂面，颗粒更小更密） */
  --gx-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n2)' opacity='0.75'/%3E%3C/svg%3E");
}

/* ── 1. 背景：白→浅蓝「壁纸」+ 整屏磨砂 ──────────────────────────────── */
html.gxl,
html.gxl body {
  background: #F3F9FF !important;
  background-image: none !important;
  background-color: #F3F9FF !important;
}

/* 壁纸层：白光斑 + 蓝色团 + 深蓝暗部 —— 有明暗，玻璃才折得出光 */
html.gxl body::before {
  content: '';
  position: fixed;
  inset: -160px;
  z-index: -1;
  pointer-events: none;
  background:
    /* 白光斑（亮部） */
    /* 白光斑（亮部）——第一团避开侧栏区（x<15%），不然侧栏背后全是白 */
    radial-gradient(38% 30% at 36% 8%,  rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(30% 26% at 84% 20%,  rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(44% 36% at 62% 92%,  rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 68%),
    /* 蓝色团（中饱和） */
    radial-gradient(58% 48% at 6% 80%,   rgba(130, 176, 227, .85) 0%, rgba(130, 176, 227, 0) 70%),
    /* 侧栏背后的蓝团：玻璃里必须有东西可折，否则侧栏永远是一块白板 */
    radial-gradient(38% 40% at 8% 36%,   rgba(104, 152, 212, .92) 0%, rgba(104, 152, 212, 0) 74%),
    radial-gradient(50% 42% at 94% 74%,  rgba(106, 156, 217, .92) 0%, rgba(106, 156, 217, 0) 70%),
    radial-gradient(34% 30% at 46% 38%,  rgba(160, 202, 244, .78) 0%, rgba(160, 202, 244, 0) 72%),
    /* 深蓝暗部（压层次） */
    radial-gradient(42% 36% at 32% 50%,  rgba(90, 132, 182, .55) 0%, rgba(90, 132, 182, 0) 70%),
    /* 基底 */
    linear-gradient(168deg, #FBFDFF 0%, #EAF3FC 45%, #D5E7F8 100%);
  filter: blur(72px) saturate(112%);
}

/* 磨砂砂面：整屏大颗粒（默认中档强度） */
html.gxl body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
  background-image: var(--gx-noise);
  background-size: 320px 320px;
  mix-blend-mode: overlay;
}

/* ── 2. 液态玻璃本体 ────────────────────────────────────────────────── */
html.gxl {
  --lg-glass-1: rgba(255, 255, 255, .09);
  --lg-glass-2: rgba(255, 255, 255, .05);
  --lg-glass-3: rgba(255, 255, 255, .16);
  --lg-edge:    rgba(255, 255, 255, .78);
  --lg-edge-2:  rgba(255, 255, 255, .95);
  --lg-hi:      inset 0 1.5px 1px rgba(255, 255, 255, 1);
}

/* 液态玻璃光学的标准件（复用同一组 box-shadow） */
html.gxl {
  /* 整圈边缘亮环 + 底部透镜暗晕 + 冷色外投影 */
  --gx-ring:
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 1px rgba(255, 255, 255, .55),
    inset 1.5px 0 1px rgba(255, 255, 255, .50),
    inset -1.5px 0 1px rgba(255, 255, 255, .50),
    inset 0 -34px 44px -40px rgba(44, 82, 128, .30);
  --gx-drop:
    0 30px 70px -28px rgba(32, 62, 104, .38),
    0 8px 22px -14px rgba(32, 62, 104, .20);
  /* 镜面高光三件：大斜光带 + 顶部聚光 + 底部回光 */
  --gx-spec:
    linear-gradient(118deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .10) 22%, rgba(255, 255, 255, 0) 38%),
    radial-gradient(130% 70% at 28% -8%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 60% at 76% 108%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 56%);
}

/* 层一：主面板 */
html.gxl .ui-glass-t,
html.gxl .table-section,
html.gxl .content-panel {
  background-color: var(--lg-glass-1) !important;
  background-image: var(--gx-spec) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(80px) saturate(220%) brightness(1.04) !important;
  backdrop-filter: blur(80px) saturate(220%) brightness(1.04) !important;
  border: 1px solid var(--lg-edge) !important;
  border-radius: var(--lg-r-card) !important;
  box-shadow: var(--gx-ring), var(--gx-drop) !important;
}

/* 层二：内部模块 */
html.gxl .ui-glass,
html.gxl .card,
html.gxl .panel,
html.gxl .stat-card,
html.gxl .chart-card {
  background-color: var(--lg-glass-2) !important;
  background-image: var(--gx-spec) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(64px) saturate(210%) brightness(1.03) !important;
  backdrop-filter: blur(64px) saturate(210%) brightness(1.03) !important;
  border: 1px solid rgba(255, 255, 255, .62) !important;
  border-radius: var(--lg-r-card) !important;
  box-shadow: var(--gx-ring) !important;
}

/* 层三：内嵌小卡（叠在玻璃上，不叠模糊省 GPU） */
html.gxl .side-card,
html.gxl .ranking-card,
html.gxl .list-card {
  background-color: var(--lg-glass-3) !important;
  background-image:
    radial-gradient(130% 70% at 28% -10%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(170deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, .13)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, .66) !important;
  border-radius: var(--lg-r-card) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .95),
    inset 0 -1.5px 1px rgba(255, 255, 255, .5) !important;
}

/* 悬停：只改底色与边（不能动 background 简写，否则清掉镜面高光） */
html.gxl .ui-glass:hover,
html.gxl .card:hover,
html.gxl .panel:hover,
html.gxl .stat-card:hover,
html.gxl .chart-card:hover {
  background-color: rgba(255, 255, 255, .11) !important;
  border-color: rgba(255, 255, 255, .85) !important;
}
html.gxl .ui-glass-t:hover,
html.gxl .table-section:hover,
html.gxl .content-panel:hover {
  background-color: rgba(255, 255, 255, .14) !important;
  border-color: rgba(255, 255, 255, .92) !important;
}

/* ── 3. 菜单栏 / 顶栏 ───────────────────────────────────────────────── */
html.gxl .sidebar {
  background-color: rgba(255, 255, 255, .07) !important;
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .02) 55%, rgba(255, 255, 255, .10) 100%),
    radial-gradient(120% 40% at 20% -10%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 60%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(72px) saturate(210%) !important;
  backdrop-filter: blur(72px) saturate(210%) !important;
  border-right: 1px solid rgba(255, 255, 255, .62) !important;
  box-shadow:
    inset -1.5px 0 1px rgba(255, 255, 255, .48),
    inset 0 1.5px 1px rgba(255, 255, 255, .70) !important;
}

html.gxl .top-header {
  background-color: rgba(255, 255, 255, .06) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .02) 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  -webkit-backdrop-filter: blur(72px) saturate(210%) !important;
  backdrop-filter: blur(72px) saturate(210%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .58) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .75),
    0 1px 0 rgba(255, 255, 255, .34) !important;
}

/* 菜单玻璃胶囊：小水滴 */
html.gxl .ui-navcapsule,
html.gxl .ui-navcapsule.lv2,
html.gxl .ui-navcapsule.lv3 {
  background: linear-gradient(180deg, rgba(255, 255, 255, .60), rgba(255, 255, 255, .20)) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(255, 255, 255, .5),
    inset 0 -10px 12px -12px rgba(44, 82, 128, .35),
    0 8px 22px -12px rgba(32, 62, 104, .40) !important;
}

html.gxl .sidebar .menu-header,
html.gxl .sidebar .sidebar-user,
html.gxl .sidebar .user-dock {
  border-color: rgba(255, 255, 255, .50) !important;
  background: transparent !important;
}

html.gxl .submenu a.active,
html.gxl .sub-submenu a.active {
  background: rgba(255, 255, 255, .24) !important;
}

/* ── 4. 指标带（首页统计条）─────────────────────────────────────────── */
html.gxl body.home-page .dashboard-top-stats,
html.gxl .dashboard-top-stats {
  background-color: rgba(255, 255, 255, .09) !important;
  background-image: var(--gx-spec) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100% !important;
  -webkit-backdrop-filter: blur(72px) saturate(200%) brightness(1.03) !important;
  backdrop-filter: blur(72px) saturate(200%) brightness(1.03) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: var(--gx-ring), var(--gx-drop) !important;
}
html.gxl .dashboard-top-stats > .top-stat-card:hover {
  background-color: rgba(255, 255, 255, .13) !important;
}

/* ── 5. 表格行悬停 ──────────────────────────────────────────────────── */
html.gxl .table-container table tbody tr:hover,
html.gxl #serviceView .bottom-section table tbody tr:hover {
  background: rgba(255, 255, 255, .20) !important;
}

/* ── 6. 浮层 ────────────────────────────────────────────────────────── */
html.gxl .modal-dialog,
html.gxl .modal-content {
  background-color: rgba(255, 255, 255, .60) !important;
  background-image:
    radial-gradient(130% 70% at 28% -8%, rgba(255, 255, 255, .40) 0%, rgba(255, 255, 255, 0) 58%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  -webkit-backdrop-filter: blur(72px) saturate(190%) !important;
  backdrop-filter: blur(72px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
}
html.gxl .user-dropdown,
html.gxl .dropdown-menu,
html.gxl .more-actions-menu {
  background: rgba(255, 253, 251, .94) !important;
}
html.gxl .modal-overlay {
  background: rgba(40, 60, 86, .22) !important;
}

/* ── 7. 视图切换胶囊 ────────────────────────────────────────────────── */
html.gxl .view-toggle-btn-group {
  background: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .66) !important;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, .95) !important;
}

/* ═══ 11. 侧栏：从「贴上去的平板」改成「浮起来的玻璃砖」══════════════════
   病根三条（田总原话：「始终就是块平板贴在上面」）：
     ① 满高矩形、贴死屏幕左边/上/下三边 —— 人眼直接读成「一块板」
     ② blur 72px 把背景糊成均匀色 —— 玻璃里没东西可看，等于实色板
     ③ 只有 inset 亮线、没有外投影 —— 缺「离开背景多少毫米」的深度信号
   处方：四边留缝 10px + 圆角 26px（脱离屏幕边缘）／blur 降到 26px（透出
        背景明暗）／四棱亮环 + 内壁暗折射线（做出厚度切面）／双层外投影
        （悬浮）／左右柱面受光 + 顶部斜切镜面（玻璃本体有曲率）。
   ⚠️ 只锁 html.gxl；gxw/gxr 的白染色在本节末尾同特异性覆盖。
   ⚠️ 侧栏是 flex 容器，伪元素必须 absolute，否则会变成 flex item 撑开布局。 */

@media (min-width: 1101px) {

  html.gxl .sidebar {
    left: 10px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: calc(var(--sidebar-width) - 20px) !important;
    border: 0 !important;
    border-radius: 26px !important;
    /* 侧栏本体完全透明：它只是一块「空中区域」，不再是一块板 ——
       玻璃感全部由一颗颗菜单胶囊自己承担 */
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  /* 左右柱面受光：玻璃砖两侧厚、中间通透，模拟弧面折射 */
  html.gxl .sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    display: none;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, .28) 0%,
      rgba(255, 255, 255, .10) 7%,
      rgba(255, 255, 255, 0) 46%,
      rgba(255, 255, 255, .06) 90%,
      rgba(255, 255, 255, .22) 100%);
  }

  /* 顶部斜切镜面高光：112° 斜光，只在上半部渐隐（模仿光源在左上） */
  html.gxl .sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    display: none;
    background: linear-gradient(112deg,
      rgba(255, 255, 255, .46) 0%,
      rgba(255, 255, 255, .16) 20%,
      rgba(255, 255, 255, 0) 38%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 28%, transparent 52%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 28%, transparent 52%);
  }

  /* 伪元素压到内容之下 */
  html.gxl .sidebar > * { position: relative; z-index: 1; }

  /* 圆角面板内的分隔线：直线在圆角玻璃里太割裂，改成渐隐细线 */
  html.gxl .sidebar .menu-header {
    border-bottom: 0 !important;
    padding: 0 18px !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  html.gxl .sidebar .menu { padding: 12px 10px 16px !important; }
  html.gxl .sidebar .menu-header .title { font-size: 1.02rem !important; }

  /* 菜单项：在玻璃上再叠半透明白会发灰 → 用内嵌玻璃（薄亮边，不加白底） */
  html.gxl .sidebar .menu-link {
    border-radius: 12px !important;
    background: transparent !important;
    transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  html.gxl .sidebar .menu-link:hover,
  html.gxl .sidebar .submenu a:hover,
  html.gxl .sidebar .sub-submenu a:hover {
    background-color: rgba(255, 255, 255, .30) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .90),
      inset 0 0 0 1px rgba(255, 255, 255, .34) !important;
  }
  /* 当前项：一层更亮的玻璃 + 铜橙竖标 */
  html.gxl .sidebar .menu-item.active > .menu-link,
  html.gxl .sidebar .menu-link.active {
    background-color: rgba(255, 255, 255, .40) !important;
    box-shadow:
      inset 2.5px 0 0 var(--lg-copper),
      inset 0 1px 0 rgba(255, 255, 255, .95),
      inset 0 -1px 0 rgba(255, 255, 255, .45) !important;
  }
  html.gxl .sidebar .submenu a,
  html.gxl .sidebar .sub-submenu a { border-radius: 10px !important; }
  html.gxl .sidebar .sub-submenu a.active,
  html.gxl .sidebar .submenu a.active {
    background: rgba(255, 255, 255, .42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  }

  /* 底部用户坞：融进玻璃，只用一条渐隐细线分隔 */
  html.gxl .sidebar .user-dock,
  html.gxl .sidebar .sidebar-user {
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}

/* ═══ 12. 一级菜单：拆成一块一块独立玻璃胶囊 ═════════════════════════
   田总要求「一级菜单也做成一个一个的」。
   做法：每个 .menu > .menu-item 是一块独立薄玻璃（淡底 + 一圈亮边 + 极轻投影），
        项间留 5px 缝，缝里透出侧栏玻璃 → 药丸之间有空气，不再连成一片。
   注意：只作用于 .menu 的直接子项（一级），二三级子菜单保持透明，避免整栏碎成渣。
   分组标题（.ui-menu-group）不套胶囊，仍是小号灰字。 */
html.gxl .sidebar .menu > .menu-item {
  margin-bottom: 5px !important;
}
html.gxl .sidebar .menu > .menu-item:last-child { margin-bottom: 0 !important; }

html.gxl .sidebar .menu > .menu-item > .menu-link {
  border-radius: 13px !important;
  background-color: rgba(255, 255, 255, .30) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 0 0 1px rgba(255, 255, 255, .26),
    0 1px 2px rgba(40, 66, 100, .05) !important;
}

html.gxl .sidebar .menu > .menu-item > .menu-link:hover {
  background-color: rgba(255, 255, 255, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 1px rgba(255, 255, 255, .55),
    0 2px 8px -4px rgba(40, 66, 100, .16) !important;
}

/* 当前项：最亮的一块 + 铜橙竖标 */
html.gxl .sidebar .menu > .menu-item.active > .menu-link,
html.gxl .sidebar .menu > .menu-item > .menu-link.active {
  background-color: rgba(255, 255, 255, .52) !important;
  box-shadow:
    inset 2.5px 0 0 var(--lg-copper),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .50),
    0 3px 10px -6px rgba(40, 66, 100, .22) !important;
}

/* 展开的子菜单：与上方的胶囊留一口气，整体略退后（不加底，只缩进） */
html.gxl .sidebar .menu > .menu-item > .submenu {
  margin: 4px 0 2px !important;
}


/* ═══ 16. gxl「液态流动」：苹果 Liquid Glass 三要素 ══════════════════
   田总：「还是不行，要想苹果那种会流动的玻璃质感」。
   🔴 之前 5 版全是【静止】玻璃 —— 无论怎么调透明度/投影，都不可能「流动」。
      Apple Liquid Glass 的活，来自三件会动的事：
        ① 边缘折射（lensing）—— 背后的内容在玻璃边缘被真实弯折、拉伸
        ② 表面流光（specular sweep）—— 一层光泽沿玻璃表面缓慢游走
        ③ 指针高光（pointer sheen）—— 光点跟随鼠标在玻璃上滑动
   本档 = 第 15 节「透亮」底座 + 上述三件。折射由 ui-glass-refract.js 生成的
   SVG feDisplacementMap(#gxRefract) 提供（Chromium 专属，其余浏览器自动退化 blur）。
   ⚠️ 动画只走 background-position（不动 transform/filter —— 玻璃三铁律）。
   ⚠️ 只给 6 类主卡片挂折射（侧栏 13 颗胶囊只挂 blur，省 GPU）。 */

html.gxl {
  /* 流动光带：一条斜向的窄高光，靠 background-size 拉宽 + position 扫过 */
  --gx-flow: linear-gradient(102deg,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, .30) 40%,
    rgba(255, 255, 255, .78) 48%,
    rgba(255, 255, 255, .30) 56%,
    rgba(255, 255, 255, 0) 70%);

  /* 玻璃更透：只留 20% 白，主要靠边缘与折射 */
  --lg-glass-1: rgba(255, 255, 255, .40);
  --lg-glass-2: rgba(255, 255, 255, .28);
  --lg-glass-3: rgba(255, 255, 255, .50);
}

/* ── 主卡片：折射 + 流动 + 指针高光 ── */
html.gxl .card,
html.gxl .panel,
html.gxl .stat-card,
html.gxl .chart-card,
html.gxl .side-card,
html.gxl .ranking-card,
html.gxl .list-card,
html.gxl .ui-glass,
html.gxl .ui-glass-t,
html.gxl .content-panel,
html.gxl .dashboard-top-stats,
html.gxl .modal-dialog,
html.gxl .modal-content {
  background-color: rgba(255, 255, 255, .20) !important;
  background-image:
    /* ① 顶部水光 */
    linear-gradient(180deg, rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 58%),
    /* ② 顶部镜面团 */
    radial-gradient(62% 34% at 50% -8%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 72%),
    /* ③ 左上反光斑 */
    radial-gradient(24% 16% at 8% 3%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 72%),
    /* ④ 流动光带（position 动画扫过） */
    var(--gx-flow),
    /* ⑤ 指针高光（--gxm/--gxn 由 ui-glass-flow.js 实时写入） */
    radial-gradient(44% 56% at var(--gxm, 50%) var(--gxn, -10%), rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .30) 44%, rgba(255, 255, 255, 0) 70%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 260% 100%, 100% 100% !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  box-shadow:
    /* 壁厚亮环 + 边缘内侧聚光晕（caustic） */
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1.5px 1px rgba(255, 255, 255, .95),
    inset 1.5px 0 1px rgba(255, 255, 255, .82),
    inset -1.5px 0 1px rgba(255, 255, 255, .82),
    inset 0 0 24px -2px rgba(255, 255, 255, .78),
    inset 0 0 0 1px rgba(255, 255, 255, .52),
    /* 落在桌面的柔影 */
    0 1px 2px rgba(24, 24, 24, .035),
    0 10px 26px -16px rgba(24, 24, 24, .12),
    0 26px 56px -34px rgba(24, 24, 24, .10) !important;
  /* 折射：边缘把背后内容弯折，中心清晰透过 */
  -webkit-backdrop-filter: url(#gxRefract) blur(4px) saturate(112%) brightness(1.07) !important;
  backdrop-filter: url(#gxRefract) blur(4px) saturate(112%) brightness(1.07) !important;
  animation: gxFlowSweep 13s cubic-bezier(.42, 0, .58, 1) infinite;
  will-change: background-position;
}

@keyframes gxFlowSweep {
  0%   { background-position: 0 0, 0 0, 0 0, -80% 0, 0 0; }
  58%  { background-position: 0 0, 0 0, 0 0, 180% 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, -80% 0, 0 0; }
}

/* 错峰：让几张卡的流光不同步，才有「整页在呼吸」的感觉 */
html.gxl .card:nth-child(2n),
html.gxl .chart-card:nth-child(2n),
html.gxl .stat-card:nth-child(2n) { animation-delay: -3.4s; }
html.gxl .card:nth-child(3n),
html.gxl .chart-card:nth-child(3n) { animation-delay: -6.8s; }
html.gxl .card:nth-child(5n),
html.gxl .panel:nth-child(5n) { animation-delay: -10.2s; }

/* 表格卡：折射 + 流光，但表格行不加动画（重绘面积太大） */
html.gxl .table-section,
html.gxl .bottom-data-card {
  background-color: rgba(255, 255, 255, .20) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .46) 0%, rgba(255, 255, 255, .10) 32%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(62% 30% at 50% -8%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 72%),
    var(--gx-flow) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100%, 260% 100% !important;
  border: 1px solid rgba(255, 255, 255, .76) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1.5px 1px rgba(255, 255, 255, .92),
    inset 0 0 24px -2px rgba(255, 255, 255, .74),
    inset 0 0 0 1px rgba(255, 255, 255, .50),
    0 1px 2px rgba(24, 24, 24, .03),
    0 12px 30px -18px rgba(24, 24, 24, .12) !important;
  -webkit-backdrop-filter: url(#gxRefract) blur(5px) saturate(110%) brightness(1.06) !important;
  backdrop-filter: url(#gxRefract) blur(5px) saturate(110%) brightness(1.06) !important;
  animation: gxFlowSweep3 15s cubic-bezier(.42, 0, .58, 1) infinite;
  will-change: background-position;
}
@keyframes gxFlowSweep3 {
  0%   { background-position: 0 0, 0 0, -80% 0; }
  58%  { background-position: 0 0, 0 0, 180% 0; }
  100% { background-position: 0 0, 0 0, -80% 0; }
}

/* ── 顶栏：折射（滚动内容在上方被弯折，这是 Apple 最典型的一幕） ── */
html.gxl .top-header {
  background-color: rgba(255, 255, 255, .34) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .08) 100%),
    var(--gx-flow) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 260% 100% !important;
  border-bottom: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .60),
    0 1px 0 rgba(24, 24, 24, .02),
    0 12px 30px -26px rgba(24, 24, 24, .18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) brightness(1.06) !important;
  backdrop-filter: blur(18px) saturate(112%) brightness(1.06) !important;
  animation: gxFlowSweep2 17s cubic-bezier(.42, 0, .58, 1) infinite;
}
@keyframes gxFlowSweep2 {
  0%   { background-position: 0 0, -80% 0; }
  58%  { background-position: 0 0, 180% 0; }
  100% { background-position: 0 0, -80% 0; }
}

/* ── 菜单胶囊：小水滴 + 指针高光（不挂折射，省 GPU） ── */
html.gxl .sidebar .menu > .menu-item > .menu-link {
  background-color: rgba(255, 255, 255, .26) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .14) 52%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(54% 64% at var(--gxm, 50%) var(--gxn, -20%), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .25) 46%, rgba(255, 255, 255, 0) 74%) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1.5px 0.5px rgba(255, 255, 255, .88),
    inset 1px 0 0.5px rgba(255, 255, 255, .70),
    inset -1px 0 0.5px rgba(255, 255, 255, .70),
    inset 0 0 13px -3px rgba(255, 255, 255, .88),
    inset 0 0 0 1px rgba(255, 255, 255, .48),
    0 1px 2px rgba(24, 24, 24, .03),
    0 6px 16px -11px rgba(24, 24, 24, .15) !important;
  -webkit-backdrop-filter: blur(11px) saturate(112%) brightness(1.06) !important;
  backdrop-filter: blur(11px) saturate(112%) brightness(1.06) !important;
}
html.gxl .sidebar .menu > .menu-item > .menu-link:hover {
  background-color: rgba(255, 255, 255, .40) !important;
}
html.gxl .sidebar .menu > .menu-item.active > .menu-link,
html.gxl .sidebar .menu > .menu-item > .menu-link.active {
  background-color: rgba(255, 255, 255, .62) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .38) 55%, rgba(255, 255, 255, .16) 100%),
    radial-gradient(54% 64% at var(--gxm, 50%) var(--gxn, -20%), rgba(255, 255, 255, .90) 0%, rgba(255, 255, 255, .30) 46%, rgba(255, 255, 255, 0) 74%) !important;
  box-shadow:
    inset 2.5px 0 0 var(--lg-copper),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    inset 0 -1.5px 0.5px rgba(255, 255, 255, .92),
    inset 0 0 16px -3px rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .80),
    0 2px 4px rgba(24, 24, 24, .04),
    0 12px 24px -13px rgba(24, 24, 24, .18) !important;
}

/* 无障碍：尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  html.gxl .card,
  html.gxl .panel,
  html.gxl .stat-card,
  html.gxl .chart-card,
  html.gxl .table-section,
  html.gxl .bottom-data-card,
  html.gxl .top-header { animation: none !important; }
}

/* ═══ 12. 🔴 fixed 浮层降级补强（必须压在本文件全部玻璃规则之后，放最末）═══
   本文件卡片规则带 html.gxl 前缀，特异性 (0,2,1) 高于 ui-liquid-glass.css
   末尾的 .ui-glass-f (0,1,0) 通用降级 —— 那条管不住本文件，这里同特异性
   平局 + 更靠后，保证降级永远赢（客户列表⋯菜单 fixed 定位事故防线）。 */
html.gxl .ui-glass-f,
html.gxl .ui-glass-f:hover,
html.gxl .ui-glass-f * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}