/* /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动态更新 */
  --glass-light-opacity: 0.18; /* 亮色模式默认透明度（fallback） */
  --glass-dark-opacity: 0.28;  /* 暗色模式默认透明度（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);
}

/* 服务器卡片毛玻璃效果 - 使用合成 Token + 根元素模糊，避免伪元素兼容性问题 */
/* 背景色与透明度统一由 --card-surface-bg / --glass-* Token 管理 */
.server-card.glass-card {
  position: relative !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));
  /* 玻璃态边框：使用主题变量，保持与非玻璃态一致 */
  border-color: var(--border-color);
  box-shadow: var(--server-card-glass-shadow) !important;
}

/* 内容层 - 确保在背景之上，但低于遮罩层 */
/* 排除 .absolute 元素，避免覆盖离线遮罩等绝对定位元素的 z-index */
.server-card.glass-card > *:not(.absolute) {
  position: relative;
  z-index: 10;
}

/* 禁用玻璃时的样式 */
body.no-glassmorphism .server-card.glass-card {
  /* 继承基础边框，使用主题变量 */
  border-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.no-glassmorphism .server-card.glass-card::before {
  display: none;
}

/* 管理卡片：玻璃基座统一复用 `.glass-card`，这里只保留边框颜色差异 */
.admin-card.glass-card {
  border-color: var(--admin-card-glass-border-color);
}

/* ========================================
   玻璃 Range 滑块语义类系统
   目的：统一 Range 轨道和拇指的样式，避免复杂选择器
   ======================================== */

/* 日间模式 - Range 轨道（WebKit） */
.glass-range-track::-webkit-slider-runnable-track {
  background: var(--glass-range-track-bg);
  border: 1px solid var(--glass-range-track-border-color);
  height: 8px;
  border-radius: 4px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 日间模式 - Range 轨道（Firefox） */
.glass-range-track::-moz-range-track {
  background: var(--glass-range-track-bg);
  border: 1px solid var(--glass-range-track-border-color);
  height: 8px;
  border-radius: 4px;
}

/* 日间模式 - Range 拇指（WebKit） */
.glass-range-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--glass-range-thumb-bg);
  border: 1.5px solid var(--glass-range-thumb-border-color);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glass-range-thumb-shadow);
  margin-top: -4px;
}

/* 日间模式 - Range 拇指（Firefox） */
.glass-range-track::-moz-range-thumb {
  border: 1.5px solid var(--glass-range-thumb-border-color);
  width: 16px;
  height: 16px;
  background: var(--glass-range-thumb-bg);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--glass-range-thumb-shadow);
}

/* 日间模式 - Range 焦点态 */
.glass-range-track:focus::-webkit-slider-thumb {
  outline: 2px solid var(--glass-range-focus-outline-color);
  outline-offset: 2px;
}

.glass-range-track:focus::-moz-range-thumb {
  outline: 2px solid var(--glass-range-focus-outline-color);
  outline-offset: 2px;
}

/* 禁用玻璃时的 Range 样式 */
body.no-glassmorphism .glass-range-track::-webkit-slider-runnable-track {
  background: var(--no-glass-range-track-bg) !important;
  border-color: var(--no-glass-range-track-border-color) !important;
}

body.no-glassmorphism .glass-range-track::-moz-range-track {
  background: var(--no-glass-range-track-bg) !important;
  border-color: var(--no-glass-range-track-border-color) !important;
}

/* 统计卡片毛玻璃效果 - 使用伪元素分离背景层 */
/* 使用合成 Token 控制背景色，简化组合选择器 */
.stat-card.glass-card {
  position: relative;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* 玻璃态边框：继承基础边框，仅调整颜色 */
  border-color: var(--stat-card-glass-border-color);
}

.stat-card.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--inner-surface-bg);
  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;
}

/* 禁用玻璃时的样式 */
body.no-glassmorphism .stat-card.glass-card {
  /* 继承基础边框，使用主题变量 */
  border-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.no-glassmorphism .stat-card.glass-card::before {
  display: none;
}

/* 嵌套容器透明度优化 - 避免二次模糊与透明度叠加 */
/* 日间模式：嵌套在 glass-card 内的子卡片 */
.glass-card .glass-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-color: var(--nested-glass-card-bg) !important; /* 仅轻微层次区分 */
  border: 1px solid var(--nested-glass-card-border-color) !important; /* 降低边框对比度 */
}

/* 注意：卡片内部 div 的背景色应由模板中的语义类控制，而不是依赖 `> div` 结构选择器兜底 */

/* 注意：dashboard/region/network-status 这些“表面容器”的玻璃基座统一由 `.glass-card` 负责，避免重复实现 */

/* 离线状态遮罩专用毛玻璃效果 */
.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: var(--glass-overlay-bg);
  border: 1px solid var(--glass-overlay-border-color);
  box-shadow: var(--glass-overlay-shadow);
  background-clip: padding-box;
  
  /* 平滑过渡 */
  transition: all 0.3s ease;
  
  /* 亮色模式文字颜色 */
  color: var(--glass-overlay-text-color);
}

/* 禁用毛玻璃时的离线遮罩样式 */
.no-glassmorphism .glass-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--no-glass-overlay-bg);
  border: 1px solid var(--no-glass-overlay-border-color);
  box-shadow: var(--no-glass-overlay-shadow);
  color: var(--no-glass-overlay-text-color);
}

/* 禁用其他玻璃效果元素 */
.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;
}

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

/* 常见浅色半透明类在禁用态转为不透明（只在日间） */
/* 注意：应在模板中使用具体的类名而不是 Tailwind 半透明工具类，由语义类控制背景色 */
/* 此规则仅作为兜底，不应依赖 wildcard 匹配 */

/* 夜间 + 允许玻璃：Stat 页面 Tab 与区间按钮的半透明玻璃适配（JS 会切换类，但此处用 !important 覆盖背景） */
html.dark body:not(.no-glassmorphism) .tab-btn:not(.active) {
  background-color: rgba(var(--glass-dark-rgb), 0.35) !important;
  border-color: transparent !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 */
}

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

/* 历史区间与带宽区间按钮（含弹出菜单项） */
html.dark body:not(.no-glassmorphism) .load-range-btn,
html.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;
}

/* 悬停略加深 */
html.dark body:not(.no-glassmorphism) .tab-btn:not(.active):hover,
html.dark body:not(.no-glassmorphism) .load-range-btn:hover,
html.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）：样式已收敛到 dashboard.css（只消费 Token），此处不再保留重复规则 */

/* Dashboard 操作按钮：样式已收敛到 dashboard.css（只消费 Token），此处不再保留重复规则 */

/* ========================================
   列表/标签/按钮域 - 禁用玻璃时的规则
   ======================================== */

/* Dashboard 操作按钮：禁用玻璃态同样由 dashboard.css + Token 处理 */

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


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

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

/* 导航按钮（.nav-link）玻璃态优化 - 避免实色背景遮挡玻璃效果 */
/* 统一：颜色差异由 theme.css token 提供，避免主题分支选择器膨胀 */
body:not(.no-glassmorphism) .nav-link {
  background-color: var(--nav-link-glass-bg) !important;
}

body:not(.no-glassmorphism) .nav-link:hover {
  background-color: var(--nav-link-glass-hover-bg) !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 4px)));
}

body:not(.no-glassmorphism) .nav-link-active {
  background-color: var(--nav-link-glass-active-bg) !important;
  border: 1px solid var(--nav-link-glass-active-border) !important;
  backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
  -webkit-backdrop-filter: blur(max(0px, calc(var(--glass-blur) - 2px)));
}

body:not(.no-glassmorphism) .nav-link-active:hover {
  background-color: var(--nav-link-glass-active-hover-bg) !important;
  border-color: var(--nav-link-glass-active-hover-border) !important;
}

/* 统一主题过渡工具类与收敛（不依赖构建，直接可用） */
/* 仅颜色相关属性参与主题切换，时长与曲线统一 */
.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);
}

/* 页脚玻璃：统一与导航栏一致的变量化半透明与模糊 */
/* 排除卡片内的 footer（.admin-card-footer），避免影响卡片组件 */
body:not(.no-glassmorphism) footer:not(.admin-card-footer) {
  background-color: var(--page-footer-glass-bg) !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 页面（status-filter / network-stats-inner）相关样式已收敛到 dashboard.css；此处不再保留页面特例 */

/* 已移除：.btn-text 是文本元素，不应该有背景样式 */
/* 示例：body:not(.no-glassmorphism) .btn-text:hover { ... }（已移除） */

/* ========================================
   Overlay/Tooltip/Panel 域 - 浮层元素语义类系统
   目的：通过语义类替代 ID 级选择器，使用 Token 统一控制背景色
   ======================================== */

/* 玻璃下拉菜单语义类 - 日间模式 */
.glass-dropdown {
  background-color: var(--overlay-surface-bg) !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;
}

/* 禁用玻璃时的下拉菜单样式 */
body.no-glassmorphism .glass-dropdown {
  background-color: var(--overlay-surface-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 玻璃面板语义类 - 日间模式 */
.glass-panel {
  background-color: var(--overlay-surface-bg) !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;
}

/* 禁用玻璃时的面板样式 */
body.no-glassmorphism .glass-panel {
  background-color: var(--overlay-surface-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 玻璃 Tooltip 语义类 - 日间模式 */
.glass-tooltip {
  background: var(--tooltip-surface-bg) !important;
  border: 1px solid var(--tooltip-border-color) !important;
  backdrop-filter: var(--tooltip-backdrop-filter) !important;
  -webkit-backdrop-filter: var(--tooltip-backdrop-filter) !important;
  box-shadow: var(--tooltip-shadow) !important;
  color: var(--tooltip-text-color) !important;
}

/* ========================================
   下拉菜单（语义类优先）
   ======================================== */

/* 说明：下拉菜单毛玻璃效果优先用 `.glass-dropdown`；旧的 network-quality 下拉兼容块已移除 */

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

/* 进度条背景已迁移到 theme.css 中使用 Token 驱动 */
/* .progress-bar-bg 类现在由 --progress-bg-color Token 控制 */

/* 禁用玻璃：统计卡片内层（颜色差异由 theme.css token 提供，避免 light/dark 双份规则） */
body.no-glassmorphism .stat-card-inner {
  background-color: var(--stat-card-inner-no-glass-bg) !important;
}

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

/* 已移除：.btn-text 是文本元素，不应该有背景和边框样式 */
/* 示例：body.no-glassmorphism .btn-text { ... }（已移除） */

/* 降级方案 - 不支持backdrop-filter的浏览器 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: var(--glass-fallback-surface-bg);
    border: 1px solid var(--glass-fallback-border-color);
    box-shadow: var(--glass-fallback-shadow);
  }
  
  .glass-overlay {
    background: var(--glass-fallback-surface-bg);
    border: 1px solid var(--glass-fallback-border-color);
    box-shadow: var(--glass-fallback-shadow);
    color: var(--glass-fallback-overlay-text-color);
  }
}
/* 分组页（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 影响 */
}
.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: var(--admin-group-glass-bg) !important;
  border-color: var(--admin-group-glass-border-color) !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);
}
/* 拖拽手柄在玻璃态下的对比优化（不过度刺眼） */
.admin-card.glass-card .drag-handle {
  background-color: var(--admin-drag-handle-bg) !important;
  border-color: var(--admin-drag-handle-border) !important;
}
.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: var(--admin-drag-handle-icon-color) !important;
}

/* personalization 配置卡片 hover 效果 - 使用统一主题变量 */
body:not(.no-glassmorphism) .admin-card label.cursor-pointer:hover,
body:not(.no-glassmorphism) .admin-card summary.cursor-pointer:hover {
  background-color: var(--admin-card-interactive-hover-bg-glass) !important;
}

body.no-glassmorphism .admin-card label.cursor-pointer:hover,
body.no-glassmorphism .admin-card summary.cursor-pointer:hover {
  background-color: var(--admin-card-interactive-hover-bg-no-glass) !important;
}

/* 透镜/放大/扭曲层已移除（此前通过 ::before 绘制壁纸并叠加变换） */

/* 通用毛玻璃表面容器 - 使用伪元素分离背景层 */
/* 注意：仅在支持 backdrop-filter 的浏览器启用；不支持时由上方 @supports not(...) 的降级规则负责 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* 使用合成 Token 控制背景色，简化组合选择器 */
	  .glass-card {
	    position: relative;
	    isolation: isolate;
	    background-color: transparent !important;
	    backdrop-filter: none !important;
	    -webkit-backdrop-filter: none !important;
	    /* 玻璃态边框：继承基础边框，仅调整颜色增加高光感 */
	    border-color: var(--glass-card-border-color);
	  }

  /* 避免 `.glass-card` 覆盖布局定位：当元素本身使用 Tailwind 的定位工具类时，保持原定位 */
  .glass-card.fixed {
    position: fixed;
  }

  .glass-card.absolute {
    position: absolute;
  }

  .glass-card.sticky {
    position: sticky;
  }

  /* admin 侧边栏：属于“表面容器”，吃玻璃；只做最小差异（边框高光与暗色 hover 叠加） */
  body:not(.no-glassmorphism) .admin-sidebar.glass-card {
    border-right-color: rgba(var(--light-border-color-rgb), 0.6) !important;
  }

  html.dark body:not(.no-glassmorphism) .admin-sidebar.glass-card {
    border-right-color: rgba(var(--dark-border-color-rgb), 0.6) !important;
  }

  html.dark body:not(.no-glassmorphism) .admin-sidebar.glass-card .sidebar-item {
    background-color: transparent !important;
  }

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

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

  .glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--card-surface-bg);
    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: -1;
    pointer-events: none;
  }

	  /* 禁用玻璃时的样式 */
	  body.no-glassmorphism .glass-card {
	    background-color: var(--card-surface-bg) !important;
	    /* 继承基础边框，使用主题变量 */
	    border-color: var(--border-color);
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
	  }

  body.no-glassmorphism .glass-card::before {
    display: none;
  }
}

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

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

/* 指标悬浮提示（统一：.tooltip-bubble） */
.tooltip-bubble {
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease;
}

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

/* 指标悬浮提示箭头（统一：.tooltip-arrow） */
.tooltip-arrow {
  border-top-color: var(--tooltip-surface-bg) !important;
  border-bottom-color: var(--tooltip-surface-bg) !important;
}

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

/* 允许玻璃：搜索框输入框 */
body:not(.no-glassmorphism) #nq-search-container .nq-search-input {
  background-color: var(--nq-search-input-glass-bg) !important;
  border-color: var(--nq-search-input-glass-border-color) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

/* 允许玻璃：搜索下拉菜单 */
body:not(.no-glassmorphism) .nq-search-suggestions {
  background-color: var(--nq-search-suggestions-glass-bg) !important;
  border-color: var(--nq-search-suggestions-glass-border-color) !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: var(--nq-search-suggestions-no-glass-bg) !important;
}

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

/* Hover/高亮统一：使用同一个 token，避免多套主题分支选择器 */
body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item:hover,
body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-hover,
body:not(.no-glassmorphism) .nq-search-suggestions [data-index]:hover,
body:not(.no-glassmorphism) .nq-search-suggestions [data-value]:hover,
body:not(.no-glassmorphism) .nq-search-suggestions [data-index].nq-search-item-hover,
body:not(.no-glassmorphism) .nq-search-suggestions [data-value].nq-search-item-hover,
body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.bg-blue-50,
body:not(.no-glassmorphism) .nq-search-suggestions [data-index].bg-blue-50,
body:not(.no-glassmorphism) .nq-search-suggestions .nq-search-item.nq-search-item-highlight,
body:not(.no-glassmorphism) .nq-search-suggestions [data-index].nq-search-item-highlight {
  background-color: var(--nq-search-suggestions-glass-bg) !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:not(.no-glassmorphism) .nq-filter-btn,
body:not(.no-glassmorphism) .nq-status-btn {
  background-color: var(--navbar-glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)) !important;
}

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

/* 允许玻璃：节点计数指示器 */
body:not(.no-glassmorphism) .nq-node-counter {
  background-color: var(--navbar-glass-bg) !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 var(--nq-node-counter-border-color) !important;
}

/* 禁用玻璃时保留默认背景 */
body.no-glassmorphism .nq-node-counter {
  background-color: var(--nq-node-counter-no-glass-bg) !important;
}



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

/* 0. Body 背景 - 最高优先级：确保关闭毛玻璃后背景不消失 */
/* 注意：必须使用不透明背景色（而非 rgba），因为 theme.css 中的 body 使用了 rgba(var(--bg-color-rgb), var(--bg-opacity)) */
body.no-glassmorphism {
  background-color: var(--no-glass-body-bg) !important;
}

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

/* 1. 页脚 - 高优先级：大面积半透明背景 */
/* 排除卡片内的 footer（.admin-card-footer） */
body.no-glassmorphism footer:not(.admin-card-footer) {
  background-color: var(--no-glass-footer-bg) !important;
}

/* 2. 导航栏背景层 - 中优先级：95% 透明度 */
/* 主题切换时立即应用实色，避免先过渡到半透明再过渡到实色的双重过渡 */
/* 注意：应在模板中为导航栏背景层添加具体的 ID 或类名，而不是依赖 wildcard 匹配 */
/* 建议在模板中添加 id="navbar-bg" 或 class="navbar-bg"，然后使用具体选择器 */
#navbar-bg.no-glassmorphism,
body.no-glassmorphism #main-navbar .absolute.inset-0 {
  background-color: var(--no-glass-navbar-bg) !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:not(.no-glassmorphism) #main-navbar .absolute.inset-0 {
  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: var(--navbar-glass-bg) !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 * {
  transition: none !important;
}

/* 主题切换期间：禁用导航栏和导航链接过渡，避免双重过渡 */
html.theme-switching #main-navbar .absolute.inset-0,
html.theme-switching .nav-link,
html.theme-switching .nav-link-active {
  transition: none !important;
}