/* /static/css/components/glassmorphism.css */
/* 功能：毛玻璃效果样式（统一 BODY 门控，首帧稳定） */
/* 原因：消除 HTML/BODY 双门控竞态，降低首帧闪烁 */
/* 相关文件：views/base.html, static/js/glassmorphism-toggle.js, static/css/components/theme.css */

:root {
  --glass-blur: 8px; /* 默认值，应与持久化设置的默认值一致 */
  --glass-opacity: 0.18; /* 默认透明度，可被JavaScript动态更新 */
  /* Tooltip 专用透明度（更薄、更通透；与卡片玻璃分开调参） */
  --tooltip-light-alpha: 0.75; /* 亮色下 tooltip 背景透明度（提升至 75%） */
  --tooltip-dark-alpha: 0.30;  /* 暗色下 tooltip 背景透明度（统一 30%） */
  --glass-light-opacity: 0.18; /* 亮色模式默认透明度（fallback） */
  --glass-dark-opacity: 0.35;  /* 暗色模式默认透明度（fallback） */
  --glass-border-opacity: 0.22; /* 降低高光边框强度 */
  --glass-contrast: 1; /* 可读性增强用 */
  /* 暗色模式玻璃底色参数 */
  --glass-dark-rgb: 15, 23, 42; /* slate-900 */
  --glass-bg-alpha-dark: 0.32; /* 暗色下更自然的深色蒙层 */
  /* 控制饱和度，默认不改变色彩（100%） */
  --glass-saturation: 100%;
  /* Hover 背景透明度（轻微变化，保持可读性） */
  --glass-hover-bg-alpha-light: 0.24;
  --glass-hover-bg-alpha-dark: 0.40;
  --glass-shadow-light: rgba(255, 255, 255, 0.4);
  --glass-shadow-dark: rgba(0, 0, 0, 0.15);
}

/* 基础毛玻璃效果类 */
.glass-effect {
  /* 毛玻璃核心效果 - 增强模糊和饱和度 */
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  
  /* 半透明背景 - 亮色模式，增强透明度 */
  background: rgba(255, 255, 255, var(--glass-opacity));
  
  /* 增强边框效果 */
  border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));
  
  /* 增强阴影效果 */
  box-shadow: 0 8px 15px var(--glass-shadow-dark), 
              0 2px 4px rgba(0, 0, 0, 0.05);
  
  /* 降级方案 - 不支持backdrop-filter时 */
  background-clip: padding-box;
  
  /* 平滑过渡 */
  transition: all 0.3s ease;
}

.glass-effect:hover {
  background: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.1));
  box-shadow: 0 12px 25px var(--glass-shadow-dark), 
              0 4px 8px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, calc(var(--glass-border-opacity) + 0.1));
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
  .glass-effect {
    background: rgba(var(--glass-dark-rgb), var(--glass-bg-alpha-dark));
    border-color: rgba(var(--dark-border-color-rgb), 0.18); /* slate-400/18 */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4), 
                0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .glass-effect:hover {
    background: rgba(var(--glass-dark-rgb), calc(var(--glass-bg-alpha-dark) + 0.04));
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 
                0 4px 8px rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--dark-border-color-rgb), 0.26);
  }
}

/* 手动暗色模式类 */
:root.dark .glass-effect {
  background: rgba(var(--glass-dark-rgb), var(--glass-bg-alpha-dark));
  border-color: rgba(var(--dark-border-color-rgb), 0.18);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4), 
              0 2px 4px rgba(0, 0, 0, 0.2);
}

:root.dark .glass-effect:hover {
  background: rgba(var(--glass-dark-rgb), calc(var(--glass-bg-alpha-dark) + 0.04));
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5), 
              0 4px 8px rgba(0, 0, 0, 0.3);
  border-color: rgba(var(--dark-border-color-rgb), 0.26);
}

/* 服务器卡片毛玻璃效果 - 使用伪元素分离背景层，避免模糊内容 */
/* 日间模式 */
:root:not(.dark) body:not(.no-glassmorphism) .server-card.glass-card {
  position: relative !important;
  background-color: transparent !important; /* 容器必须透明，让伪元素的毛玻璃效果显示 */
  backdrop-filter: none !important; /* 关键：容器不能有模糊，只让伪元素模糊 */
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1),
              0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

/* 背景层 - 承载毛玻璃效果 */
:root:not(.dark) body:not(.no-glassmorphism) .server-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* 内容层 - 确保在背景之上 */
:root:not(.dark) body:not(.no-glassmorphism) .server-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 例外：保持 absolute 定位的子元素（离线遮罩、拖拽手柄等）不受影响 */
:root:not(.dark) body:not(.no-glassmorphism) .server-card.glass-card > .absolute {
  position: absolute !important;
}

/* Hover 状态 - 增加背景透明度 */
:root:not(.dark) body:not(.no-glassmorphism) .server-card.glass-card:hover::before {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.06));
}

/* 夜间模式 */
:root.dark body:not(.no-glassmorphism) .server-card.glass-card {
  position: relative !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 
              0 3px 6px rgba(0, 0, 0, 0.3) !important;
}

:root.dark body:not(.no-glassmorphism) .server-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:root.dark body:not(.no-glassmorphism) .server-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 例外：保持 absolute 定位的子元素（离线遮罩、拖拽手柄等）不受影响 */
:root.dark body:not(.no-glassmorphism) .server-card.glass-card > .absolute {
  position: absolute !important;
}

:root.dark body:not(.no-glassmorphism) .server-card.glass-card:hover::before {
  background-color: rgba(var(--glass-dark-rgb), calc(var(--glass-dark-opacity, 0.35) + 0.04));
}

/* 管理卡片毛玻璃效果 - 使用伪元素分离背景层 */
/* 日间模式 */
:root:not(.dark) body:not(.no-glassmorphism) .admin-card.glass-card {
  position: relative !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

:root:not(.dark) body:not(.no-glassmorphism) .admin-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:root:not(.dark) body:not(.no-glassmorphism) .admin-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 夜间模式 */
:root.dark body:not(.no-glassmorphism) .admin-card.glass-card {
  position: relative !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.18) !important;
}

:root.dark body:not(.no-glassmorphism) .admin-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:root.dark body:not(.no-glassmorphism) .admin-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 管理页玻璃容器内的表单控件（输入框/下拉等） - 让控件也具备轻度透明与玻璃感 */
.admin-card.glass-card input[type="text"],
.admin-card.glass-card input[type="url"],
.admin-card.glass-card input[type="search"],
.admin-card.glass-card select,
.admin-card.glass-card textarea,
/* 精准覆盖当前页面控件 */
.admin-card.glass-card #wallpaper-url,
.admin-card.glass-card #wallpaper-size {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.06)) !important;
  border-color: rgba(255, 255, 255, calc(var(--glass-border-opacity) + 0.04)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

:root.dark .admin-card.glass-card input[type="text"],
:root.dark .admin-card.glass-card input[type="url"],
:root.dark .admin-card.glass-card input[type="search"],
:root.dark .admin-card.glass-card select,
:root.dark .admin-card.glass-card textarea,
:root.dark .admin-card.glass-card #wallpaper-url,
:root.dark .admin-card.glass-card #wallpaper-size {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.26) !important;
}

/* 轻度统一：玻璃容器内的浅色子块在日间模式改为半透明，避免“实色块”挡住玻璃背景 */
.admin-card.glass-card .bg-white,
.admin-card.glass-card .bg-slate-50,
.admin-card.glass-card .bg-slate-100 {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.06)) !important;
  border-color: rgba(226, 232, 240, 0.6) !important; /* slate-200 */
}

/* 统一 admin 标题与列表标题在玻璃态的底色与边框（轻透明） */
.admin-card.glass-card .admin-card-header,
.admin-card.glass-card .admin-list-header {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.04)) !important;
  border-color: rgba(226, 232, 240, 0.5) !important;
}

/* 暗色模式：凡是带 dark:bg-* 的子块，使用玻璃深色半透明 */
:root.dark .admin-card.glass-card [class*="dark:bg-"] {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(71, 85, 105, 0.6) !important; /* slate-600 */
}

:root.dark .admin-card.glass-card .admin-card-header,
:root.dark .admin-card.glass-card .admin-list-header {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border-color: rgba(71, 85, 105, 0.5) !important;
}

/* 开关轨道可见性修复（夜间 + 玻璃容器）
   说明：dark 模式下，玻璃容器内对 [class*="dark:bg-"] 的统一覆盖会让开关轨道过于透明，
   导致看不到椭圆轨道。这里为常见容器内的 switch 轨道提供更高优先级的兜底样式，
   同时关闭该元素自身的 backdrop 以避免进一步“融化”进背景。 */

/* 夜间：glass-card 容器内 */
:root.dark .admin-card.glass-card input[type="checkbox"].peer + div,
:root.dark .dashboard-card.glass-card input[type="checkbox"].peer + div,
:root.dark .server-card.glass-card input[type="checkbox"].peer + div {
  background-color: rgba(71, 85, 105, 0.85) !important; /* slate-600/85% */
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.35) !important; /* slate-400/35% */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 夜间：首帧玻璃（未加 glass-card 但启用全局玻璃） */
:root.dark body:not(.no-glassmorphism) .dashboard-card input[type="checkbox"].peer + div,
:root.dark body:not(.no-glassmorphism) .server-card input[type="checkbox"].peer + div {
  background-color: rgba(71, 85, 105, 0.85) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 日间：glass-card 容器内 */
html:not(.dark) .admin-card.glass-card input[type="checkbox"].peer + div,
html:not(.dark) .dashboard-card.glass-card input[type="checkbox"].peer + div,
html:not(.dark) .server-card.glass-card input[type="checkbox"].peer + div {
  background-color: rgba(248, 250, 252, 0.9) !important; /* slate-50/90% */
  border: 1px solid rgba(226, 232, 240, 0.9) !important; /* slate-200/90% */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 日间：首帧玻璃（未加 glass-card 但启用全局玻璃） */
html:not(.dark) body:not(.no-glassmorphism) .dashboard-card input[type="checkbox"].peer + div,
html:not(.dark) body:not(.no-glassmorphism) .server-card input[type="checkbox"].peer + div {
  background-color: rgba(248, 250, 252, 0.9) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ========================================
   Range 滑动条可见性修复
   作用域：玻璃容器内的个性化设置页面
   目的：避免轨道与拇指在玻璃背景下融合
   兼容：WebKit (Safari/Chrome) + Firefox
   ======================================== */

/* 日间模式 - 轨道（WebKit） */
.admin-card.glass-card input[type="range"]::-webkit-slider-runnable-track,
body:not(.no-glassmorphism) .admin-card input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(241, 245, 249, 0.65); /* slate-100/65 - 降低对比度 */
  border: 1px solid rgba(226, 232, 240, 0.50); /* slate-200/50 - 更柔和 */
  height: 8px;
  border-radius: 4px;
  backdrop-filter: none !important; /* 关键：避免被背景模糊吞没 */
  -webkit-backdrop-filter: none !important;
}

/* 日间模式 - 轨道（Firefox） */
.admin-card.glass-card input[type="range"]::-moz-range-track,
body:not(.no-glassmorphism) .admin-card input[type="range"]::-moz-range-track {
  background: rgba(241, 245, 249, 0.65);
  border: 1px solid rgba(226, 232, 240, 0.50);
  height: 8px;
  border-radius: 4px;
}

/* 日间模式 - 拇指（WebKit） */
.admin-card.glass-card input[type="range"]::-webkit-slider-thumb,
body:not(.no-glassmorphism) .admin-card input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.88); /* 降低不透明度 */
  border: 1.5px solid rgba(226, 232, 240, 0.70); /* 更细更柔和的边框 */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); /* 轻柔阴影 */
  margin-top: -4px; /* 垂直居中微调 */
}

/* 日间模式 - 拇指（Firefox） */
.admin-card.glass-card input[type="range"]::-moz-range-thumb,
body:not(.no-glassmorphism) .admin-card input[type="range"]::-moz-range-thumb {
  border: 1.5px solid rgba(226, 232, 240, 0.70);
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* 暗色模式 - 轨道（WebKit） */
:root.dark .admin-card.glass-card input[type="range"]::-webkit-slider-runnable-track,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(71, 85, 105, 0.60); /* slate-600/60 - 降低对比度 */
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.30); /* slate-400/30 - 更柔和 */
}

/* 暗色模式 - 轨道（Firefox） */
:root.dark .admin-card.glass-card input[type="range"]::-moz-range-track,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]::-moz-range-track {
  background: rgba(71, 85, 105, 0.60);
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.30);
}

/* 暗色模式 - 拇指（WebKit） */
:root.dark .admin-card.glass-card input[type="range"]::-webkit-slider-thumb,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]::-webkit-slider-thumb {
  background: rgba(226, 232, 240, 0.75); /* slate-200/75 - 降低对比度 */
  border-color: rgba(var(--dark-border-color-rgb), 0.65); /* slate-400/65 - 更柔和 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15); /* 轻柔阴影 */
}

/* 暗色模式 - 拇指（Firefox） */
:root.dark .admin-card.glass-card input[type="range"]::-moz-range-thumb,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]::-moz-range-thumb {
  background: rgba(226, 232, 240, 0.75);
  border-color: rgba(var(--dark-border-color-rgb), 0.65);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* 焦点态增强（日间） */
.admin-card.glass-card input[type="range"]:focus::-webkit-slider-thumb,
body:not(.no-glassmorphism) .admin-card input[type="range"]:focus::-webkit-slider-thumb {
  outline: 2px solid rgba(168, 85, 247, 0.5); /* purple-500/50 */
  outline-offset: 2px;
}

.admin-card.glass-card input[type="range"]:focus::-moz-range-thumb,
body:not(.no-glassmorphism) .admin-card input[type="range"]:focus::-moz-range-thumb {
  outline: 2px solid rgba(168, 85, 247, 0.5);
  outline-offset: 2px;
}

/* 焦点态增强（暗色） */
:root.dark .admin-card.glass-card input[type="range"]:focus::-webkit-slider-thumb,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]:focus::-webkit-slider-thumb {
  outline-color: rgba(192, 132, 252, 0.6); /* purple-400/60 */
}

:root.dark .admin-card.glass-card input[type="range"]:focus::-moz-range-thumb,
:root.dark body:not(.no-glassmorphism) .admin-card input[type="range"]:focus::-moz-range-thumb {
  outline-color: rgba(192, 132, 252, 0.6);
}

/* 统计卡片毛玻璃效果 - 使用伪元素分离背景层 */
.stat-card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(226, 232, 240, 0.40) !important;
}

.stat-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.stat-card.glass-card > * {
  position: relative;
  z-index: 1;
}

:root.dark .stat-card.glass-card {
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.50) !important;
}

:root.dark .stat-card.glass-card::before {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
}

/* 嵌套容器透明度优化 - 避免二次模糊与透明度叠加 */
/* 日间模式：嵌套在 glass-card 内的子卡片 */
.glass-card .stat-card.glass-card,
.glass-card .dashboard-card.glass-card,
.glass-card .admin-card.glass-card,
.glass-card .server-card.glass-card,
.dashboard-card.glass-card .stat-card,
.admin-card.glass-card > div > .stat-card,
.admin-card.glass-card > div > div > .stat-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(255, 255, 255, 0.03) !important; /* 仅轻微层次区分 */
  border: 1px solid rgba(226, 232, 240, 0.30) !important; /* 降低边框对比度 */
}

/* 暗色模式：嵌套容器 */
:root.dark .glass-card .stat-card.glass-card,
:root.dark .glass-card .dashboard-card.glass-card,
:root.dark .glass-card .admin-card.glass-card,
:root.dark .glass-card .server-card.glass-card,
:root.dark .dashboard-card.glass-card .stat-card,
:root.dark .admin-card.glass-card > div > .stat-card,
:root.dark .admin-card.glass-card > div > div > .stat-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: rgba(var(--glass-dark-rgb), 0.15) !important; /* 暗色下轻微深色层次 */
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.25) !important;
}

/* Dashboard内部div容器 - 避免半透明背景叠加 */
html:not(.dark) .dashboard-card.glass-card > div,
html:not(.dark) .dashboard-card.glass-card > div > div,
html:not(.dark) .stat-card.glass-card > div,
html:not(.dark) .stat-card.glass-card > div > div {
  background-color: transparent !important;
}

/* 仅保留需要轻微层次感的容器（如有特定class标识的） */
html:not(.dark) .dashboard-card.glass-card > div[class*="bg-"],
html:not(.dark) .stat-card.glass-card > div[class*="bg-"] {
  background-color: rgba(248, 250, 252, 0.02) !important; /* slate-50, 极低透明度 */
}

/* 暗色模式：Dashboard内部div透明化 */
:root.dark .dashboard-card.glass-card > div,
:root.dark .dashboard-card.glass-card > div > div,
:root.dark .stat-card.glass-card > div,
:root.dark .stat-card.glass-card > div > div {
  background-color: transparent !important;
}

:root.dark .dashboard-card.glass-card > div[class*="bg-"],
:root.dark .stat-card.glass-card > div[class*="bg-"] {
  background-color: rgba(30, 41, 59, 0.05) !important; /* slate-800, 极低透明度 */
}

/* 仪表板卡片毛玻璃效果 - 使用伪元素分离背景层 */
/* 日间模式 */
:root:not(.dark) body:not(.no-glassmorphism) .dashboard-card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important; /* 关键：容器不能有模糊，只让伪元素模糊 */
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

:root:not(.dark) body:not(.no-glassmorphism) .dashboard-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:root:not(.dark) body:not(.no-glassmorphism) .dashboard-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 夜间模式 */
:root.dark body:not(.no-glassmorphism) .dashboard-card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-color) !important;
}

:root.dark body:not(.no-glassmorphism) .dashboard-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

:root.dark body:not(.no-glassmorphism) .dashboard-card.glass-card > * {
  position: relative;
  z-index: 1;
}

/* 地区容器毛玻璃效果 - 使用伪元素分离背景层 */
.region-container.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.region-container.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.region-container.glass-card > * {
  position: relative;
  z-index: 1;
}

:root.dark .region-container.glass-card {
  border: 1px solid var(--border-color) !important;
}

:root.dark .region-container.glass-card::before {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
}

/* 网络质量卡片毛玻璃效果 - 使用伪元素分离背景层 */
.network-status-card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.network-status-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.network-status-card.glass-card > * {
  position: relative;
  z-index: 1;
}

:root.dark .network-status-card.glass-card {
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.18) !important;
}

:root.dark .network-status-card.glass-card::before {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
}

/* 离线状态遮罩专用毛玻璃效果 */
.glass-overlay {
  /* 毛玻璃效果 - 更柔和的模糊（基于基准值增加 4px） */
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation));
  /* 增强背景不透明度，提高文本对比度 */
  background: rgba(255, 255, 255, 0.8); /* 更白的背景 */
  border: 1px solid rgba(226, 232, 240, 0.9); /* slate-200 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 
              0 2px 4px rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  
  /* 平滑过渡 */
  transition: all 0.3s ease;
  
  /* 亮色模式文字颜色 */
  color: rgb(51 65 85); /* slate-700 */
}

/* 离线遮罩暗色模式 */
@media (prefers-color-scheme: dark) {
  .glass-overlay {
    background: rgba(30, 41, 59, 0.8); /* slate-800 色值，更深的背景 */
    border-color: rgba(71, 85, 105, 0.6); /* slate-600 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    /* 暗色模式文字颜色 - 浅色 */
    color: rgb(226 232 240); /* slate-200 */
  }
}

:root.dark .glass-overlay {
  background: rgba(30, 41, 59, 0.8); /* slate-800 色值，更深的背景 */
  border-color: rgba(71, 85, 105, 0.6); /* slate-600 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  /* 暗色模式文字颜色 - 浅色 */
  color: rgb(226 232 240); /* slate-200 */
}

/* 禁用毛玻璃时的离线遮罩样式 */
.no-glassmorphism .glass-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.95); /* 纯白色背景 */
  border: 1px solid rgba(226, 232, 240, 0.9); /* slate-200 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  color: rgb(51 65 85); /* slate-700 */
}

/* 禁用其他玻璃效果元素 */
.no-glass-effect {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 禁用态全局兜底：在开启 no-glassmorphism 时，统一关闭类名与内联样式中的 backdrop 过滤 */
.no-glassmorphism [class*="backdrop-blur-"],
.no-glassmorphism .backdrop-filter {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.no-glassmorphism [style*="backdrop-filter"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 日间模式禁用玻璃时，强制将半透明浅色背景改为不透明，以彻底移除“玻璃感” */
html:not(.dark) body.no-glassmorphism .server-card,
html:not(.dark) body.no-glassmorphism .dashboard-card,
html:not(.dark) body.no-glassmorphism .stat-card,
html:not(.dark) body.no-glassmorphism .region-container {
  background-color: #ffffff !important;
}

/* 常见浅色半透明类在禁用态转为不透明（只在日间） */
html:not(.dark) body.no-glassmorphism [class*="bg-white/"],
html:not(.dark) body.no-glassmorphism [class*="bg-slate-50/"],
html:not(.dark) body.no-glassmorphism [class*="bg-slate-100/"] {
  background-color: #ffffff !important;
}

/* 夜间 + 允许玻璃：Stat 页面 Tab 与区间按钮的半透明玻璃适配（JS 会切换类，但此处用 !important 覆盖背景） */
:root.dark body:not(.no-glassmorphism) .tab-btn:not(.active) {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.26) !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important; /* slate-200 */
}

/* 激活态保持品牌色，避免透明影响可读性 */
:root.dark body:not(.no-glassmorphism) .tab-btn.active {
  background-color: #4f46e5 !important; /* indigo-600 */
  border-color: #4f46e5 !important;
  color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 历史区间与带宽区间按钮（含弹出菜单项） */
:root.dark body:not(.no-glassmorphism) .load-range-btn,
:root.dark body:not(.no-glassmorphism) .bandwidth-range-btn {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.24) !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important;
}

/* 悬停略加深 */
:root.dark body:not(.no-glassmorphism) .tab-btn:not(.active):hover,
:root.dark body:not(.no-glassmorphism) .load-range-btn:hover,
:root.dark body:not(.no-glassmorphism) .bandwidth-range-btn:hover {
  background-color: rgba(30, 41, 59, 0.40) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.36) !important;
}

/* 夜间 + 允许玻璃：Dashboard 顶部总计徽章（.total-badge）半透明 */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .total-badge {
  background-color: var(--total-badge-bg-dark-glass) !important; /* 使用统一变量 */
  border-color: var(--total-badge-border-dark) !important; /* 使用统一变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 夜间 + 允许玻璃：地区标签（.region-tag）半透明 */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .region-tag {
  background-color: var(--small-element-bg-dark-glass) !important; /* 使用通用变量 */
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
  color: #e2e8f0 !important;
}
:root.dark body:not(.no-glassmorphism) .region-tag:hover {
  background-color: var(--small-element-hover-bg-dark-glass) !important; /* 使用通用变量 */
}

/* 日间 + 允许玻璃：地区操作按钮 */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .region-action-btn {
  background-color: var(--small-element-bg-light-glass) !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
}

html:not(.dark) body:not(.no-glassmorphism) .region-action-btn:hover {
  background-color: var(--small-element-hover-bg-light-glass) !important;
}

/* 夜间 + 允许玻璃：地区操作按钮 */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .region-action-btn {
  background-color: var(--small-element-bg-dark-glass) !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
}

:root.dark body:not(.no-glassmorphism) .region-action-btn:hover {
  background-color: var(--small-element-hover-bg-dark-glass) !important;
}

/* 日间 + 允许玻璃：Dashboard 操作按钮（排序、分组、列表、设置） */
/* 注意：外层容器已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .dashboard-action-btn {
  background-color: var(--small-element-bg-light-glass) !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  /* 不设置 backdrop-filter，由外层容器提供，避免覆盖背景色 */
}

html:not(.dark) body:not(.no-glassmorphism) .dashboard-action-btn:hover {
  background-color: var(--small-element-hover-bg-light-glass) !important;
}

/* 夜间 + 允许玻璃：Dashboard 操作按钮（排序、分组、列表、设置） */
/* 注意：外层容器已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .dashboard-action-btn {
  background-color: var(--small-element-bg-dark-glass) !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  /* 不设置 backdrop-filter，由外层容器提供，避免覆盖背景色 */
}

:root.dark body:not(.no-glassmorphism) .dashboard-action-btn:hover {
  background-color: var(--small-element-hover-bg-dark-glass) !important;
}

/* 夜间 + 允许玻璃：3D 地球控制条按钮 */
:root.dark body:not(.no-glassmorphism) .globe-controls button {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.40) !important;
  border-radius: 0.5rem !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important;
}
:root.dark body:not(.no-glassmorphism) .globe-controls button:hover {
  background-color: rgba(30, 41, 59, 0.40) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.50) !important;
}

/* 日间或禁用玻璃：上述元素保持不透明背景，region-tag 使用稍深背景色与卡片区分 */
/* total-badge 的毛玻璃关闭规则已移至 layout.css，使用统一变量系统 */
html:not(.dark) body.no-glassmorphism .globe-controls button {
  background-color: #ffffff !important;
  border-color: rgba(226, 232, 240, 1) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: inherit !important;
}

html:not(.dark) body.no-glassmorphism .region-tag {
  background-color: var(--small-element-bg-light-no-glass) !important; /* 使用通用变量 */
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: inherit !important;
}

/* ===== 日间模式 + 允许玻璃：Dashboard 元素 ===== */


/* 顶部导航栏（Appbar）背景：保持与主题色一致，不引用玻璃透明度变量
   说明：导航条仍可使用 backdrop-blur-* 提供模糊，但背景色固定为主题色，
   以确保跨页与切换时的视觉一致性（与 .theme-transition 的 150ms 对齐）。 */

/* 注意：backdrop-blur-sm 等 Tailwind 类现在通过 tailwind.config.js 配置使用 CSS 变量
   不再需要 !important 强制覆盖，保持代码可维护性 */

/* 导航按钮（.nav-link）玻璃态优化 - 避免实色背景遮挡玻璃效果 */
/* 日间模式：导航按钮基础状态 - 确保透明背景，让毛玻璃效果可见 */
html:not(.dark) body:not(.no-glassmorphism) .nav-link {
  background-color: transparent !important;
}

/* 日间模式：导航按钮 hover 半透明 */
html:not(.dark) body:not(.no-glassmorphism) .nav-link:hover {
  background-color: rgba(248, 250, 252, 0.60) !important; /* slate-50, 60% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 日间模式：导航按钮激活态半透明 */
html:not(.dark) body:not(.no-glassmorphism) .nav-link-active {
  background-color: rgba(238, 242, 255, 0.50) !important; /* indigo-50, 50% */
  border: 1px solid rgba(199, 210, 254, 0.60) !important; /* indigo-200, 60% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
}

/* 日间模式：激活态 hover 增强 */
html:not(.dark) body:not(.no-glassmorphism) .nav-link-active:hover {
  background-color: rgba(238, 242, 255, 0.70) !important;
  border-color: rgba(199, 210, 254, 0.80) !important;
}

/* 夜间模式：导航按钮基础状态 - 确保透明背景，让毛玻璃效果可见 */
:root.dark body:not(.no-glassmorphism) .nav-link {
  background-color: transparent !important;
}

/* 夜间模式：导航按钮 hover 半透明 */
:root.dark body:not(.no-glassmorphism) .nav-link:hover {
  background-color: rgba(30, 41, 59, 0.40) !important; /* slate-800, 40% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 夜间模式：导航按钮激活态半透明 */
:root.dark body:not(.no-glassmorphism) .nav-link-active {
  background-color: rgba(49, 46, 129, 0.35) !important; /* indigo-900, 35% */
  border: 1px solid rgba(67, 56, 202, 0.50) !important; /* indigo-700, 50% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
}

/* 夜间模式：激活态 hover 增强 */
:root.dark body:not(.no-glassmorphism) .nav-link-active:hover {
  background-color: rgba(49, 46, 129, 0.50) !important;
  border-color: rgba(67, 56, 202, 0.70) !important;
}

/* 图标装饰背景玻璃态优化 - 通用规则 */
/* 匹配所有带有实色背景的小元素（图标、徽章、按钮等） */
/* 日间模式：indigo 系列 */
html:not(.dark) body:not(.no-glassmorphism) .bg-indigo-50 {
  background-color: rgba(238, 242, 255, 0.40) !important; /* indigo-50, 40% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 统一主题过渡工具类与收敛（不依赖构建，直接可用） */
/* 仅颜色相关属性参与主题切换，时长与曲线统一 */
.transition-theme { transition-property: background-color, color, border-color; }
.duration-theme { transition-duration: var(--theme-transition-duration, 150ms); }
.ease-theme { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.theme-transition {
  transition-property: background-color, color, border-color;
  transition-duration: var(--theme-transition-duration, 150ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 主题切换期：body 与关键卡片仅做颜色过渡，避免 all 导致闪烁 */
html.theme-transition body {
  transition-property: background-color, color, border-color;
  transition-duration: var(--theme-transition-duration, 150ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html.theme-transition .dashboard-card,
html.theme-transition .server-card,
html.theme-transition .card {
  transition-property: background-color, color, border-color;
  transition-duration: var(--theme-transition-duration, 150ms);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) body:not(.no-glassmorphism) .bg-indigo-100 {
  background-color: rgba(224, 231, 255, 0.50) !important; /* indigo-100, 50% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 日间模式：slate 系列 */
html:not(.dark) body:not(.no-glassmorphism) .bg-slate-50 {
  background-color: rgba(248, 250, 252, 0.40) !important; /* slate-50, 40% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

html:not(.dark) body:not(.no-glassmorphism) .bg-slate-100 {
  background-color: rgba(241, 245, 249, 0.50) !important; /* slate-100, 50% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 日间模式：red 系列（清除按钮等） */
html:not(.dark) body:not(.no-glassmorphism) .bg-red-100 {
  background-color: rgba(254, 226, 226, 0.50) !important; /* red-100, 50% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 日间模式：hover 状态增强 */
html:not(.dark) body:not(.no-glassmorphism) .bg-indigo-50:hover,
html:not(.dark) body:not(.no-glassmorphism) .hover\:bg-indigo-100:hover {
  background-color: rgba(224, 231, 255, 0.65) !important;
}

html:not(.dark) body:not(.no-glassmorphism) .hover\:bg-slate-100:hover {
  background-color: rgba(241, 245, 249, 0.65) !important;
}

html:not(.dark) body:not(.no-glassmorphism) .bg-red-100:hover,
html:not(.dark) body:not(.no-glassmorphism) .hover\:bg-red-200:hover {
  background-color: rgba(254, 202, 202, 0.65) !important;
}

/* 夜间模式：保持原有半透明设计（dark:bg-xxx/30 已经是半透明） */
/* 如果有夜间实色背景，也需要转换 */
:root.dark body:not(.no-glassmorphism) .bg-indigo-900 {
  background-color: rgba(49, 46, 129, 0.35) !important; /* indigo-900, 35% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

:root.dark body:not(.no-glassmorphism) .bg-slate-700 {
  background-color: rgba(51, 65, 85, 0.40) !important; /* slate-700, 40% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

:root.dark body:not(.no-glassmorphism) .bg-slate-800 {
  background-color: rgba(30, 41, 59, 0.40) !important; /* slate-800, 40% */
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

/* 使用CSS变量的元素玻璃态优化 */
/* 地区标签计数徽章 */
/* 日间 + 允许玻璃：地区标签计数（.region-tag-count） */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .region-tag-count {
  background-color: var(--region-tag-count-bg-light-glass) !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
}

html:not(.dark) body:not(.no-glassmorphism) .region-tag.active .region-tag-count {
  background-color: var(--region-tag-count-active-bg-light-glass) !important;
  color: #ffffff !important;
}

/* 夜间 + 允许玻璃：地区标签计数（.region-tag-count） */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .region-tag-count {
  background-color: var(--region-tag-count-bg-dark-glass) !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
}

:root.dark body:not(.no-glassmorphism) .region-tag.active .region-tag-count {
  background-color: var(--region-tag-count-active-bg-dark-glass) !important;
  color: #ffffff !important;
}

/* 页脚玻璃：统一与导航栏一致的变量化半透明与模糊 */
html:not(.dark) body:not(.no-glassmorphism) footer {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

:root.dark body:not(.no-glassmorphism) footer {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：Dashboard 顶部总计徽章（.total-badge） */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .total-badge {
  background-color: var(--total-badge-bg-light-glass) !important; /* 使用统一变量 */
  border-color: var(--total-badge-border-light) !important; /* 使用统一变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 日间 + 允许玻璃：地区标签 */
/* 日间 + 允许玻璃：地区标签（.region-tag）半透明 */
/* 注意：外层 .region-container 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .region-tag {
  background-color: var(--small-element-bg-light-glass) !important; /* 使用通用变量 */
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  /* 不设置 backdrop-filter，由外层 .region-container 提供，避免覆盖背景色 */
}

/* 日间 + 允许玻璃：3D 地球控制按钮 */
html:not(.dark) body:not(.no-glassmorphism) .globe-controls button {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.40) !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px))) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：网络情况内部容器（移除多余背景，保持透明） */
html:not(.dark) body:not(.no-glassmorphism) .network-stats-inner {
  background-color: transparent !important; /* 移除多余的 5% 背景 */
  /* backdrop-filter 由外层 dashboard-card 提供，此处无需重复 */
}

/* 日间 hover：增加 5% 透明度 */
html:not(.dark) body:not(.no-glassmorphism) .status-filter:hover {
  background-color: rgba(255, 255, 255, var(--glass-hover-bg-alpha-light)) !important;
}

html:not(.dark) body:not(.no-glassmorphism) .region-tag:hover {
  background-color: var(--small-element-hover-bg-light-glass) !important; /* 使用通用变量 */
}

html:not(.dark) body:not(.no-glassmorphism) .globe-controls button:hover {
  background-color: rgba(255, 255, 255, var(--glass-hover-bg-alpha-light)) !important;
}

html:not(.dark) body:not(.no-glassmorphism) .btn-text:hover {
  background-color: rgba(248, 250, 252, var(--glass-hover-bg-alpha-light)) !important;
}

/* 日间 + 允许玻璃：各类下拉菜单（dashboard与appbar） */
/* 注意：.dropdown-menu 已改为实色背景，不再应用毛玻璃效果 */
html:not(.dark) body:not(.no-glassmorphism) #sort-dropdown-menu,
html:not(.dark) body:not(.no-glassmorphism) #group-dropdown-menu,
html:not(.dark) body:not(.no-glassmorphism) #dashboard-settings-dropdown-menu,
html:not(.dark) body:not(.no-glassmorphism) #settings-dropdown-menu,
html:not(.dark) body:not(.no-glassmorphism) .nq-dropdown-menu {
  background-color: rgba(255, 255, 255, var(--glass-light-opacity)) !important;
  /* 移除边框，使用阴影替代 */
  border: none !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 日间 + 允许玻璃：到期详情面板 */
html:not(.dark) body:not(.no-glassmorphism) #expiry-details-panel {
  background-color: var(--expiry-panel-bg-light-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用阴影替代 */
  border: none !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 夜间 + 允许玻璃：到期详情面板 */
:root.dark body:not(.no-glassmorphism) #expiry-details-panel {
  background-color: var(--expiry-panel-bg-dark-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用阴影替代 */
  border: none !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 日间 + 允许玻璃：Dashboard 顶部状态筛选卡片（.status-filter）- 无边框版本 */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .status-filter {
  background-color: var(--inner-container-bg-light-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用背景色和阴影替代 */
  border-color: transparent !important;
  box-shadow: var(--inner-container-shadow-light) !important; /* 使用增强阴影变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 夜间 + 允许玻璃：Dashboard 顶部状态筛选卡片（.status-filter）- 无边框版本 */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .status-filter {
  background-color: var(--inner-container-bg-dark-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用背景色和阴影替代 */
  border-color: transparent !important;
  box-shadow: var(--inner-container-shadow-dark) !important; /* 使用增强阴影变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 日间 + 允许玻璃：网络指标区块（.network-stats-inner .grid.grid-cols-2 > div）- 确保背景色一致性 */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
html:not(.dark) body:not(.no-glassmorphism) .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-light-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用背景色和阴影替代 */
  border-color: transparent !important;
  box-shadow: var(--inner-container-shadow-light) !important; /* 使用增强阴影变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 夜间 + 允许玻璃：网络指标区块（.network-stats-inner .grid.grid-cols-2 > div）- 确保背景色一致性 */
/* 注意：外层 .dashboard-card 已有 backdrop-filter，此处不需要重复，避免覆盖背景色 */
:root.dark body:not(.no-glassmorphism) .network-stats-inner .grid.grid-cols-2 > div {
  background-color: var(--inner-container-bg-dark-glass) !important; /* 使用统一变量 */
  /* 移除边框，使用背景色和阴影替代 */
  border-color: transparent !important;
  box-shadow: var(--inner-container-shadow-dark) !important; /* 使用增强阴影变量 */
  /* 不设置 backdrop-filter，由外层 .dashboard-card 提供，避免覆盖背景色 */
}

/* 透镜/放大/扭曲层已移除：减少容器内壁纸绘制的干扰，保留基础玻璃效果 */

/* 夜间 + 允许玻璃：网络情况内部容器（移除多余背景，保持透明） */
:root.dark body:not(.no-glassmorphism) .network-stats-inner {
  background-color: transparent !important; /* 移除多余的 5% 背景 */
  /* backdrop-filter 由外层 dashboard-card 提供，此处无需重复 */
}

/* 日间 + 允许玻璃：进度条容器背景增强（提升对比度） */
html:not(.dark) body:not(.no-glassmorphism) .network-stats-inner .progress-track-no-glass {
  background-color: rgba(229, 231, 235, 0.8) !important; /* gray-200, 80% 透明度 */
  /* 确保进度条容器与指标区块背景有足够的对比度 */
}

/* 夜间 + 允许玻璃：进度条容器背景增强 */
:root.dark body:not(.no-glassmorphism) .network-stats-inner .progress-track-no-glass {
  background-color: rgba(75, 85, 99, 0.6) !important; /* gray-600, 60% 透明度 */
  /* 确保进度条容器与指标区块背景有足够的对比度 */
}

/* 日间 + 禁用玻璃：统计卡片内层（轻微背景色差异） */
html:not(.dark) body.no-glassmorphism .stat-card > div {
  background-color: rgba(248, 250, 252, 0.60) !important; /* slate-50, 60% */
}

/* 夜间 + 禁用玻璃：统计卡片内层（轻微背景色差异） */
:root.dark body.no-glassmorphism .stat-card > div {
  background-color: rgba(51, 65, 85, 0.40) !important; /* slate-700, 40% */
}

/* 夜间 + 允许玻璃：网络质量（admin）页面动态卡片（撤回） */

/* 夜间 + 允许玻璃：各类下拉菜单（dashboard与appbar） */
/* 注意：.dropdown-menu 已改为实色背景，不再应用毛玻璃效果 */
:root.dark body:not(.no-glassmorphism) #sort-dropdown-menu,
:root.dark body:not(.no-glassmorphism) #group-dropdown-menu,
:root.dark body:not(.no-glassmorphism) #dashboard-settings-dropdown-menu,
:root.dark body:not(.no-glassmorphism) #settings-dropdown-menu,
:root.dark body:not(.no-glassmorphism) .nq-dropdown-menu,
:root.dark body:not(.no-glassmorphism) [role="menu"].bg-white,
:root.dark body:not(.no-glassmorphism) [role="menu"].dark\:bg-slate-800 {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !important;
  /* 移除边框，使用阴影替代 */
  border: none !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 夜间 + 允许玻璃：工具提示（globe与延迟tooltip，及通用role=tooltip） */
:root.dark body:not(.no-glassmorphism) #globe-tooltip,
:root.dark body:not(.no-glassmorphism) #latency-tooltip,
:root.dark body:not(.no-glassmorphism) [role="tooltip"] {
  background-color: rgba(var(--glass-dark-rgb), 0.50) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.36) !important;
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important; /* slate-200 */
}

/* 日间禁用玻璃：兼容使用自定义半透明的按钮（如 stats 的 .btn-text） */
html:not(.dark) body.no-glassmorphism .btn-text {
  background-color: #ffffff !important;
  border-color: rgba(226, 232, 240, 1) !important; /* slate-200 */
}

@media (prefers-color-scheme: dark) {
  .no-glassmorphism .glass-overlay {
    background: rgba(30, 41, 59, 0.95); /* slate-800 */
    border-color: rgba(71, 85, 105, 0.6); /* slate-600 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: rgb(226 232 240); /* slate-200 */
  }
}

:root.dark .no-glassmorphism .glass-overlay {
  background: rgba(30, 41, 59, 0.95); /* slate-800 */
  border-color: rgba(71, 85, 105, 0.6); /* slate-600 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: rgb(226 232 240); /* slate-200 */
}

/* 降级方案 - 不支持backdrop-filter的浏览器 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-effect,
  .glass-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  }
  
  .glass-overlay {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
    color: rgb(51 65 85); /* slate-700 for light mode */
  }
  
  @media (prefers-color-scheme: dark) {
    .glass-effect,
    .glass-card {
      background: rgba(0, 0, 0, 0.85);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    }
    
    .glass-overlay {
      background: rgba(0, 0, 0, 0.85);
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
      color: rgb(226 232 240); /* slate-200 for dark mode */
    }
  }
  
  :root.dark .glass-effect,
  :root.dark .glass-card {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
  }
  
  :root.dark .glass-overlay {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
    color: rgb(226 232 240); /* slate-200 for dark mode */
  }
}
/* 管理侧边栏毛玻璃效果 - 使用伪元素分离背景层 */
/* 注意：侧边栏保持 position: fixed，伪元素使用绝对定位 */
#admin-sidebar.glass-card {
  background-color: transparent !important;
  border-right-color: rgba(226, 232, 240, 0.6) !important; /* slate-200 */
}

#admin-sidebar.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

#admin-sidebar.glass-card > * {
  position: relative;
  z-index: 1;
}

:root.dark #admin-sidebar.glass-card {
  border-right-color: rgba(71, 85, 105, 0.6) !important; /* slate-600 */
}

:root.dark #admin-sidebar.glass-card::before {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35));
}

/* 夜间玻璃态：侧边栏菜单项避免实底填充，仅在交互时轻度叠加 */
:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card a,
:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card .sidebar-item {
  background-color: transparent !important;
}

:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card a:hover,
:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card .sidebar-item:hover {
  background-color: rgba(var(--glass-dark-rgb), 0.18) !important;
}

:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card a.active,
:root.dark body:not(.no-glassmorphism) #admin-sidebar.glass-card .sidebar-item.active {
  background-color: rgba(var(--glass-dark-rgb), 0.24) !important;
}

/* 分组页（views/admin/groups.html）玻璃态优化 —— 避免双层叠底与过度模糊 */
/* 隐去列表卡片内的浅色叠底（绝对层），让外层玻璃背景透出 */
.admin-card.glass-card .bg-gradient-to-br.from-slate-50\/80.via-white\/60.to-slate-100\/40 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important; /* 去除 shadow-inner 影响 */
}
:root.dark .admin-card.glass-card .dark\:from-slate-800\/40.dark\:via-slate-800\/20.dark\:to-slate-900\/30 {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 分组条目统一到玻璃变量，避免与外层叠加过度模糊 */
.admin-card.glass-card .group {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.06)) !important;
  border-color: rgba(255, 255, 255, calc(var(--glass-border-opacity) + 0.04)) !important;
  backdrop-filter: none !important; /* 避免嵌套模糊叠加 */
  -webkit-backdrop-filter: none !important;
}
.admin-card.glass-card .group:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}
:root.dark .admin-card.glass-card .group {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.22) !important; /* slate-400/22 */
}

/* 拖拽手柄在玻璃态下的对比优化（不过度刺眼） */
.admin-card.glass-card .drag-handle {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.04)) !important;
  border-color: rgba(226, 232, 240, 0.7) !important; /* slate-200 更轻 */
}
.admin-card.glass-card .drag-handle:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.25)) !important; /* 蓝→靛低透明 */
  border-color: rgba(59, 130, 246, 0.5) !important;
}
.admin-card.glass-card .drag-handle i {
  color: rgba(30, 41, 59, 0.75) !important; /* slate-800/75 */
}
:root.dark .admin-card.glass-card .drag-handle {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border-color: rgba(71, 85, 105, 0.6) !important; /* slate-600 */
}
:root.dark .admin-card.glass-card .drag-handle i {
  color: rgba(226, 232, 240, 0.85) !important; /* slate-200/85 */
}
/* 透镜/放大/扭曲层已移除（此前通过 ::before 绘制壁纸并叠加变换） */

/* 通用卡片毛玻璃效果 - 使用伪元素分离背景层 */
.card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.card.glass-card > * {
  position: relative;
  z-index: 1;
}

:root.dark .card.glass-card {  
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.18) !important;
}

:root.dark .card.glass-card::before {
  background-color: rgba(var(--glass-dark-rgb), 0.35);
}

/* 夜间 + 允许玻璃：通用 chart-card 容器与 ECharts tooltip（撤回） */

/* ========================================
 * Metric Tooltip 毛玻璃效果
 * 用于卡片指标悬浮提示
 * ======================================== */

/* 日间模式 + 启用毛玻璃 */
/* 指标悬浮提示（统一：.tooltip-bubble） */
html:not(.dark) body:not(.no-glassmorphism) .tooltip-bubble {
  --glass-contrast: 1.10;
  --glass-saturation: 100%;
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  background: rgba(255, 255, 255, var(--tooltip-light-alpha)) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  color: rgb(51, 65, 85) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

/* 夜间模式 + 启用毛玻璃 */
:root.dark body:not(.no-glassmorphism) .tooltip-bubble {
  --glass-contrast: 1.06;
  --glass-saturation: 100%;
  backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 4px)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  background: rgba(var(--glass-dark-rgb), var(--tooltip-dark-alpha)) !important;
  border-color: rgba(71, 85, 105, 0.6) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  color: rgb(226, 232, 240) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

/* 日间模式 + 禁用毛玻璃 */
html:not(.dark) body.no-glassmorphism .tooltip-bubble {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  color: rgb(51, 65, 85) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

/* 夜间模式 + 禁用毛玻璃 */
:root.dark body.no-glassmorphism .tooltip-bubble {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(30, 41, 59, 0.88) !important;
  border-color: rgba(71, 85, 105, 0.8) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  color: rgb(226, 232, 240) !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

/* 显示状态：通过 data-open 开关控制，统一 JS 事件委托 */
.tooltip-bubble[data-open="true"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tooltip箭头 - 日间 + 启用毛玻璃 */
/* 指标悬浮提示箭头（统一：.tooltip-arrow） */
html:not(.dark) body:not(.no-glassmorphism) .tooltip-arrow {
  border-top-color: rgba(255, 255, 255, var(--tooltip-light-alpha)) !important;
}

/* Tooltip箭头 - 夜间 + 启用毛玻璃 */
:root.dark body:not(.no-glassmorphism) .tooltip-arrow {
  border-top-color: rgba(var(--glass-dark-rgb), var(--tooltip-dark-alpha)) !important;
}

/* Tooltip箭头 - 日间 + 禁用毛玻璃 */
html:not(.dark) body.no-glassmorphism .tooltip-arrow {
  border-top-color: rgba(255, 255, 255, 0.90) !important;
}

/* Tooltip箭头 - 夜间 + 禁用毛玻璃 */
:root.dark body.no-glassmorphism .tooltip-arrow {
  border-top-color: rgba(30, 41, 59, 0.88) !important;
}

/* ========================================
   网络质量页面搜索框毛玻璃适配
   ======================================== */

/* 日间 + 允许玻璃：搜索框输入框 */
html:not(.dark) body:not(.no-glassmorphism) #nq-search-container .nq-search-input {
  background-color: rgba(255, 255, 255, calc(var(--glass-opacity) + 0.06)) !important;
  border-color: rgba(255, 255, 255, calc(var(--glass-border-opacity) + 0.04)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

/* 夜间 + 允许玻璃：搜索框输入框 */
:root.dark body:not(.no-glassmorphism) #nq-search-container .nq-search-input {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.26) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

/* 日间 + 允许玻璃：搜索下拉菜单 */
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions,
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(226, 232, 240, 0.40) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 夜间 + 允许玻璃：搜索下拉菜单 */
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions {
  background-color: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(var(--dark-border-color-rgb), 0.40) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 禁用玻璃时保留默认背景 */
body.no-glassmorphism .nq-search-suggestions {
  background-color: #ffffff !important;
}

:root.dark body.no-glassmorphism .nq-search-suggestions,
html.dark body.no-glassmorphism .nq-search-suggestions {
  background-color: #1e293b !important; /* slate-800 */
}

/* 菜单项基础样式 - 确保默认透明，hover 时显示毛玻璃（排除 hover 状态） */
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:not(:hover):not(.nq-search-item-hover),
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:not(:hover):not(.nq-search-item-hover) {
  background-color: transparent !important;
}

:root.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:not(:hover):not(.nq-search-item-hover),
html.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:not(:hover):not(.nq-search-item-hover) {
  background-color: transparent !important;
}

/* 强制覆盖：使用更高优先级选择器确保 hover 样式生效（正确的 DOM 层级顺序） */
html.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-index].nq-search-item-hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-value].nq-search-item-hover {
  background-color: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions [data-index].nq-search-item-hover,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions [data-value].nq-search-item-hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 日间 + 允许玻璃：搜索下拉菜单项 hover 效果（使用类和 hover 伪类双重选择器） */
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:hover,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:hover,
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions [data-index]:hover,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions [data-value]:hover {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 夜间 + 允许玻璃：搜索下拉菜单项 hover 效果（使用类和 hover 伪类双重选择器） */
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:hover,
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-index]:hover,
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-value]:hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-index]:hover,
html.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-value]:hover {
  background-color: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 日间 + 允许玻璃：搜索下拉菜单项高亮状态（键盘导航） */
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.bg-blue-50,
:root:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.bg-blue-50,
html:not(.dark) body:not(.no-glassmorphism) .nq-search-suggestions [data-index].bg-blue-50 {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* 夜间 + 允许玻璃：搜索下拉菜单项高亮状态（键盘导航高亮） */
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item[class*="bg-blue-900"],
html.dark body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item[class*="bg-blue-900"],
:root.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-index][class*="bg-blue-900"],
html.dark body:not(.no-glassmorphism) .nq-search-suggestions [data-index][class*="bg-blue-900"] {
  background-color: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
}

/* ========================================
   网络质量页面筛选按钮毛玻璃适配
   ======================================== */

/* 日间 + 允许玻璃：筛选按钮（分组、地区、状态） */
html:not(.dark) body:not(.no-glassmorphism) .nq-filter-btn,
html:not(.dark) body:not(.no-glassmorphism) .nq-status-btn {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
}

/* 夜间 + 允许玻璃：筛选按钮（分组、地区、状态） */
:root.dark body:not(.no-glassmorphism) .nq-filter-btn,
:root.dark body:not(.no-glassmorphism) .nq-status-btn {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
}

/* 日间 + 允许玻璃：时间范围按钮、全宽视图按钮、刷新按钮（非激活状态） */
html:not(.dark) body:not(.no-glassmorphism) .time-range-btn:not(.active),
html:not(.dark) body:not(.no-glassmorphism) .width-toggle-btn:not(.active),
html:not(.dark) body:not(.no-glassmorphism) .refresh-btn:not(.active):not(:disabled) {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
}

/* 夜间 + 允许玻璃：时间范围按钮、全宽视图按钮、刷新按钮（非激活状态） */
:root.dark body:not(.no-glassmorphism) .time-range-btn:not(.active),
:root.dark body:not(.no-glassmorphism) .width-toggle-btn:not(.active),
:root.dark body:not(.no-glassmorphism) .refresh-btn:not(.active):not(:disabled) {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
}

/* 日间 + 允许玻璃：节点计数指示器 */
html:not(.dark) body:not(.no-glassmorphism) .nq-node-counter {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  border: 1px solid rgba(226, 232, 240, 0.40) !important;
}

/* 夜间 + 允许玻璃：节点计数指示器 */
:root.dark body:not(.no-glassmorphism) .nq-node-counter {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.40) !important;
}

/* 禁用玻璃时保留默认背景 */
html:not(.dark) body.no-glassmorphism .nq-node-counter {
  background-color: rgb(241, 245, 249) !important; /* slate-100 */
}

:root.dark body.no-glassmorphism .nq-node-counter {
  background-color: rgb(51, 65, 85) !important; /* slate-700 */
}

/* 日间 + 允许玻璃：节点网络质量监控标题容器 */
html:not(.dark) body:not(.no-glassmorphism) .nq-header-container {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  border: 1px solid rgba(226, 232, 240, 0.40) !important;
}

/* 夜间 + 允许玻璃：节点网络质量监控标题容器 */
:root.dark body:not(.no-glassmorphism) .nq-header-container {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  border: 1px solid rgba(var(--dark-border-color-rgb), 0.40) !important;
}

/* 禁用玻璃时保留默认背景 */
html:not(.dark) body.no-glassmorphism .nq-header-container {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.60) !important;
}

:root.dark body.no-glassmorphism .nq-header-container {
  background-color: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid rgba(51, 65, 85, 0.60) !important;
}

/* ===== 禁用玻璃时：半透明背景改为实色（高优先级修复） ===== */

/* 0. Body 背景 - 最高优先级：确保关闭毛玻璃后背景不消失 */
/* 注意：必须同时支持 :root.dark 和 html.dark 选择器，因为 Tailwind 的 dark: 前缀需要 html.dark */
/* 注意：必须使用不透明背景色（而非 rgba），因为 theme.css 中的 body 使用了 rgba(var(--bg-color-rgb), var(--bg-opacity)) */
html:not(.dark) body.no-glassmorphism {
  background-color: var(--light-bg-color, #f8fafc) !important;
}

:root.dark body.no-glassmorphism,
html.dark body.no-glassmorphism {
  background-color: var(--dark-bg-color, #0f172a) !important;
}

/* 0.1. Container 背景 - 确保容器背景透明（继承 body 背景） */
html:not(.dark) body.no-glassmorphism #container {
  background-color: transparent !important;
}

:root.dark body.no-glassmorphism #container,
html.dark body.no-glassmorphism #container {
  background-color: transparent !important;
}

/* 1. 页脚 - 高优先级：大面积半透明背景 */
html:not(.dark) body.no-glassmorphism footer {
  background-color: var(--light-card-bg-color, #ffffff) !important;
}

:root.dark body.no-glassmorphism footer {
  background-color: var(--dark-card-bg-color, #1e293b) !important;
}

/* 2. 导航栏背景层 - 中优先级：95% 透明度 */
/* 主题切换时立即应用实色，避免先过渡到半透明再过渡到实色的双重过渡 */
html:not(.dark) body.no-glassmorphism .absolute.inset-0[class*="bg-white/95"],
html:not(.dark) body.no-glassmorphism .absolute.inset-0[class*="bg-slate-900/95"] {
  background-color: var(--light-card-bg-color, #ffffff) !important;
  transition-property: background-color, color, border-color !important;
  transition-duration: var(--theme-transition-duration, 150ms) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

:root.dark body.no-glassmorphism .absolute.inset-0[class*="bg-white/95"],
:root.dark body.no-glassmorphism .absolute.inset-0[class*="bg-slate-900/95"] {
  background-color: var(--dark-card-bg-color, #1e293b) !important;
  transition-property: background-color, color, border-color !important;
  transition-duration: var(--theme-transition-duration, 150ms) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 禁用 Tailwind 半透明类的过渡，防止双重过渡 */
/* Tailwind 的 bg-white/95 和 dark:bg-slate-900/95 会生成半透明背景，需要禁用它们的过渡 */
/* 使用属性选择器匹配包含这些类的元素 */
body.no-glassmorphism .absolute.inset-0[class*="bg-white/95"],
body.no-glassmorphism .absolute.inset-0[class*="dark:bg-slate-900/95"] {
  transition-property: background-color, color, border-color !important;
  transition-duration: var(--theme-transition-duration, 150ms) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 启用玻璃时：导航栏背景也应该统一过渡，避免双重过渡 */
/* 确保启用玻璃时也使用统一的过渡属性，并应用完整的毛玻璃效果 */
html:not(.dark) body:not(.no-glassmorphism) #main-navbar .absolute.inset-0[class*="bg-white/95"],
html:not(.dark) body:not(.no-glassmorphism) #main-navbar .absolute.inset-0[class*="bg-slate-900/95"] {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  transition-property: background-color, color, border-color !important;
  transition-duration: var(--theme-transition-duration, 150ms) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

:root.dark body:not(.no-glassmorphism) #main-navbar .absolute.inset-0[class*="bg-white/95"],
:root.dark body:not(.no-glassmorphism) #main-navbar .absolute.inset-0[class*="bg-slate-900/95"] {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) contrast(var(--glass-contrast)) !important;
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity, 0.35)) !important;
  transition-property: background-color, color, border-color !important;
  transition-duration: var(--theme-transition-duration, 150ms) !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 主题切换期间：禁用 body 和容器背景过渡，防止闪烁 */
html.theme-switching body,
html.theme-switching body *,
html.theme-switching #container,
html.theme-switching #container *,
html.theme-switching [class*="bg-gradient"],
html.theme-switching [class*="bg-gradient"] *,
html.theme-switching [class*="bg-slate-50"],
html.theme-switching [class*="bg-slate-900"],
html.theme-switching [class*="bg-white"],
html.theme-switching [class*="bg-black"] {
  transition: none !important;
}

/* 主题切换期间：禁用玻璃时也禁用过渡，避免双重过渡 */
html.theme-switching body.no-glassmorphism .absolute.inset-0[class*="bg-white/95"],
html.theme-switching body.no-glassmorphism .absolute.inset-0[class*="bg-slate-900/95"],
html.theme-switching #main-navbar .absolute.inset-0[class*="bg-white/95"],
html.theme-switching #main-navbar .absolute.inset-0[class*="bg-slate-900/95"],
html.theme-switching .nav-link,
html.theme-switching .nav-link-active {
  transition: none !important;
}

/* 主题切换期间：启用玻璃时也禁用过渡，避免双重过渡 */
html.theme-switching body:not(.no-glassmorphism) .absolute.inset-0[class*="bg-white/95"],
html.theme-switching body:not(.no-glassmorphism) .absolute.inset-0[class*="bg-slate-900/95"],
html.theme-switching #main-navbar .absolute.inset-0[class*="bg-white/95"],
html.theme-switching #main-navbar .absolute.inset-0[class*="bg-slate-900/95"],
html.theme-switching .nav-link,
html.theme-switching .nav-link-active {
  transition: none !important;
}

/* 3. Dashboard 到期按钮容器 - 已移除，由 HTML 类直接控制背景色 */

/* 4. Dashboard 高亮条目 - 高优先级：半透明 + transition-colors */
body.no-glassmorphism [class*="bg-indigo-50"]:not([class*="dark:"]) {
  background-color: rgb(238, 242, 255) !important; /* indigo-50 实色 */
}

:root.dark body.no-glassmorphism [class*="bg-indigo-900/20"] {
  background-color: rgb(30, 27, 75) !important; /* indigo-900 实色 */
}

/* 5. 性能设置卡片 - 中优先级：70% / 60% 透明度 */
/* 排除按钮元素，由 HTML 类直接控制 */
html:not(.dark) body.no-glassmorphism [class*="bg-white/70"]:not(button):not([id*="btn"]),
html:not(.dark) body.no-glassmorphism [class*="bg-white/60"]:not(button):not([id*="btn"]),
html:not(.dark) body.no-glassmorphism [class*="bg-slate-800/60"]:not(button):not([id*="btn"]) {
  background-color: var(--light-card-bg-color, #ffffff) !important;
}

:root.dark body.no-glassmorphism [class*="bg-white/70"]:not(button):not([id*="btn"]),
:root.dark body.no-glassmorphism [class*="bg-white/60"]:not(button):not([id*="btn"]),
:root.dark body.no-glassmorphism [class*="bg-slate-800/60"]:not(button):not([id*="btn"]) {
  background-color: var(--dark-card-bg-color, #1e293b) !important;
}

/* 6. Dashboard 徽章 - 低优先级：小元素 */
body.no-glassmorphism [class*="bg-slate-400/80"] {
  background-color: rgb(148, 163, 184) !important; /* slate-400 实色 */
}

/* 7. Dashboard Hover 状态 - 中优先级：限制 transition-all */
body.no-glassmorphism [class*="hover:bg-indigo-500/10"],
body.no-glassmorphism [class*="hover:bg-indigo-500/20"] {
  transition: color var(--transition-normal) ease, background-color var(--transition-normal) ease !important;
}