/**
 * 毛玻璃效果组件 - 基础实现
 * 支持亮色/暗色模式，包含浏览器兼容性
 */

:root {
  --glass-blur: 20px;
  --glass-opacity: 0.18; /* 默认透明度，可被JavaScript动态更新 */
  --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(148, 163, 184, 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(148, 163, 184, 0.26);
  }
}

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

.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(148, 163, 184, 0.26);
}

/* 服务器卡片毛玻璃效果 - 使用更高优先级 */
.server-card.glass-card {
  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;
  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;
}

.server-card.glass-card:hover {
  background-color: rgba(255, 255, 255, var(--glass-hover-bg-alpha-light)) !important;
  transform: translateY(-2px);
}

/* 暗色模式 - 服务器卡片 */
.dark .server-card.glass-card {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !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;
}

.dark .server-card.glass-card:hover {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-hover-bg-alpha-dark)) !important;
}

/* 管理卡片毛玻璃效果 */
.admin-card.glass-card {
  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;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  position: relative;
}

.dark .admin-card.glass-card {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* 管理页玻璃容器内的表单控件（输入框/下拉等） - 让控件也具备轻度透明与玻璃感 */
.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));
}

.dark .admin-card.glass-card input[type="text"],
.dark .admin-card.glass-card input[type="url"],
.dark .admin-card.glass-card input[type="search"],
.dark .admin-card.glass-card select,
.dark .admin-card.glass-card textarea,
.dark .admin-card.glass-card #wallpaper-url,
.dark .admin-card.glass-card #wallpaper-size {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(148, 163, 184, 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-* 的子块，使用玻璃深色半透明 */
.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 */
}

.dark .admin-card.glass-card .admin-card-header,
.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;
}

/* 统计卡片毛玻璃效果 */
.stat-card.glass-card {
  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;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.dark .stat-card.glass-card {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* 仪表板卡片毛玻璃效果 */
.dashboard-card.glass-card {
  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;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.dark .dashboard-card.glass-card {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* 网络质量卡片毛玻璃效果 */
.network-status-card.glass-card {
  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;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

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

/* 离线状态遮罩专用毛玻璃效果 */
.glass-overlay {
  /* 毛玻璃效果 - 更柔和的模糊 */
  backdrop-filter: blur(12px) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(12px) 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 */
  }
}

.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 {
  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(148, 163, 184, 0.26) !important;
  backdrop-filter: blur(6px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(6px) 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(148, 163, 184, 0.24) !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: 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(148, 163, 184, 0.36) !important;
}

/* 夜间 + 允许玻璃：Dashboard 顶部总计徽章（.total-badge）半透明 */
:root.dark body:not(.no-glassmorphism) .total-badge {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 9999px !important;
  padding: 0.125rem 0.5rem !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important;
}

/* 夜间 + 允许玻璃：地区标签（.region-tag）半透明 */
:root.dark body:not(.no-glassmorphism) .region-tag {
  background-color: rgba(var(--glass-dark-rgb), 0.30) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  border-radius: 0.75rem !important;
  padding: 0.25rem 0.5rem !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  color: #e2e8f0 !important;
}
:root.dark body:not(.no-glassmorphism) .region-tag:hover {
  background-color: rgba(30, 41, 59, 0.40) !important;
  border-color: rgba(148, 163, 184, 0.36) !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(148, 163, 184, 0.24) !important;
  border-radius: 0.5rem !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: 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(148, 163, 184, 0.36) !important;
}

/* 日间或禁用玻璃：上述元素保持不透明白底，避免“伪玻璃” */
html:not(.dark) body.no-glassmorphism .total-badge,
html:not(.dark) body.no-glassmorphism .region-tag,
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;
}

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


/* 顶部导航栏（Appbar）玻璃：对内部背景层应用变量化半透明 */
html:not(.dark) body:not(.no-glassmorphism) #main-navbar .backdrop-blur-sm {
  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) #main-navbar .backdrop-blur-sm {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-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));
}

/* 页脚玻璃：统一与导航栏一致的变量化半透明与模糊 */
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)) !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） */
html:not(.dark) body:not(.no-glassmorphism) .total-badge {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important; /* slate-200 */
  border-radius: 9999px !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：地区标签 */
html:not(.dark) body:not(.no-glassmorphism) .region-tag {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：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.6) !important;
  backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(4px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：网络情况内部容器 */
html:not(.dark) body:not(.no-glassmorphism) .network-stats-inner {
  background-color: rgba(248, 250, 252, 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));
}

/* 日间 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: rgba(255, 255, 255, var(--glass-hover-bg-alpha-light)) !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） */
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-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important; /* slate-200 */
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：到期详情面板 */
html:not(.dark) body:not(.no-glassmorphism) #expiry-details-panel {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  border: 1px solid rgba(226, 232, 240, 0.6) !important; /* slate-200 */
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 日间 + 允许玻璃：Dashboard 顶部状态筛选卡片（.status-filter） */
html:not(.dark) body:not(.no-glassmorphism) .status-filter {
  background-color: rgba(255, 255, 255, var(--glass-opacity)) !important;
  border-color: rgba(226, 232, 240, 0.6) !important; /* slate-200 */
  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 顶部状态筛选卡片（.status-filter） */
:root.dark body:not(.no-glassmorphism) .status-filter {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-opacity)) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 若启用透镜（glass-card 由JS在夜间添加），支持放大/扭曲 */
.status-filter.glass-card { position: relative; }
.status-filter.glass-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background-image: var(--wp-url);
  background-size: var(--wp-size, cover);
  background-repeat: var(--wp-repeat, no-repeat);
  background-attachment: scroll;
  background-position: center;
  transform: scale(var(--glass-lens-scale));
  filter: blur(var(--glass-distortion-blur));
  opacity: var(--glass-lens-opacity);
}
.status-filter.glass-card > * { position: relative; z-index: 1; }

/* 夜间 + 允许玻璃：网络情况内部容器 */
:root.dark body:not(.no-glassmorphism) .network-stats-inner {
  background-color: rgba(var(--glass-dark-rgb), var(--glass-dark-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));
}

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

/* 夜间 + 允许玻璃：各类下拉菜单（dashboard与appbar） */
: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), 0.35) !important;
  border-color: rgba(148, 163, 184, 0.26) !important;
  backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
}

/* 夜间 + 允许玻璃：工具提示（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(148, 163, 184, 0.36) !important;
  backdrop-filter: blur(10px) saturate(var(--glass-saturation)) contrast(var(--glass-contrast));
  -webkit-backdrop-filter: blur(10px) 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 */
  }
}

.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)) and not (-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 */
    }
  }
  
  .dark .glass-effect,
  .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);
  }
  
  .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 */
  }
}
/* 管理侧边栏毛玻璃效果（桌面与移动端一致） */
#admin-sidebar.glass-card {
  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;
  border-right-color: rgba(226, 232, 240, 0.6) !important; /* slate-200 */
}

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

/* 夜间玻璃态：侧边栏菜单项避免实底填充，仅在交互时轻度叠加 */
: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 影响 */
}
.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);
}
.dark .admin-card.glass-card .group {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: rgba(148, 163, 184, 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 */
}
.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 */
}
.dark .admin-card.glass-card .drag-handle i {
  color: rgba(226, 232, 240, 0.85) !important; /* slate-200/85 */
}
.admin-card.glass-card::before,
.server-card.glass-card::before,
.stat-card.glass-card::before,
.dashboard-card.glass-card::before,
#admin-sidebar.glass-card::before,
.card.glass-card::before,
#admin-sidebar.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background-image: var(--wp-url);
  background-size: var(--wp-size, cover);
  background-repeat: var(--wp-repeat, no-repeat);
  /* 重要：为保证 transform/filter 生效，透镜层使用 scroll 附着，不随视口固定 */
  background-attachment: scroll;
  background-position: center center;
  transform: scale(var(--glass-lens-scale));
  filter: blur(var(--glass-distortion-blur));
  opacity: var(--glass-lens-opacity);
}

/* 需要透镜的容器补充定位上下文（防止 ::before 跨容器） */
.server-card.glass-card,
.stat-card.glass-card,
.dashboard-card.glass-card { position: relative; }
/* 保留侧边栏的 position: fixed（来自 .fixed 类），不要覆盖为 relative */
.card.glass-card {
  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;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  position: relative;
}
.dark .card.glass-card {  
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
}

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