/* LIQUID GLASS STYLES — Apple Liquid Glass / 液态玻璃质感
   核心：半透明玻璃材质 + 折射高光 + 厚边框 + 多层阴影 + 背景透显
*/

:root {
  --lg-bg-image: url("/static/images/bg-liquid.webp");

  /* 文字色系 — 深色高对比，不纯黑 */
  --lg-text: #172033;
  --lg-text-2: #1d2a44;
  --lg-text-3: #53637a;
  --lg-text-4: #7a8ba3;

  /* 主色调 */
  --lg-blue: #2d63c8;
  --lg-blue-deep: #143b86;
  --lg-blue-light: #5a9cf7;

  /* 玻璃表面变量 */
  --lg-surface: rgba(255, 255, 255, 0.18);
  --lg-surface-strong: rgba(255, 255, 255, 0.28);
  --lg-surface-chart: rgba(255, 255, 255, 0.14);

  /* 边框 — 高光半透明 */
  --lg-border: rgba(255, 255, 255, 0.65);
  --lg-border-blue: rgba(120, 180, 230, 0.22);
  --lg-border-2: rgba(140, 170, 200, 0.12);

  /* 阴影系统 — 多层柔和 */
  --lg-shadow-float: 0 24px 60px rgba(31, 78, 121, 0.14),
    0 8px 20px rgba(31, 78, 121, 0.08);
  --lg-shadow-hover: 0 32px 72px rgba(31, 78, 121, 0.18),
    0 10px 28px rgba(31, 78, 121, 0.10);
  --lg-shadow-soft: 0 8px 24px rgba(20, 40, 70, 0.07),
    0 2px 6px rgba(20, 40, 70, 0.04);

  /* 内阴影 — 高光+暗边模拟厚度 */
  --lg-inner-highlight: inset 0 1px 1px rgba(255, 255, 255, 0.85);
  --lg-inner-dark: inset 0 -1px 2px rgba(120, 160, 200, 0.16);
  --lg-inner-full: var(--lg-inner-highlight), var(--lg-inner-dark);

  /* 圆角 — 更大更柔和 */
  --lg-radius: 38px;
  --lg-radius-sm: 26px;
  --lg-radius-xs: 16px;
  --lg-radius-pill: 999px;

  --lg-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Mouse-tracking light position (updated by JS on hover) */
  --lg-mx: 50%;
  --lg-my: 50%;
  /* Background parallax shift (updated by JS on mousemove) */
  --bg-shift-x: 0px;
  --bg-shift-y: 0px;

  /* 涨跌色 — 红色代表涨，绿色代表跌 */
  --rise: #c74a4a;
  --rise-light: #e57373;
  --fall: #2d9468;
  --fall-light: #81c784;
  /* 兼容旧变量（成功/正面、失败/负面） */
  --lg-up: #2d9468;
  --lg-down: #c74a4a;

  /* 兼容旧变量 */
  --bg: #e8f4fc;
  --surface-glass: var(--lg-surface);
  --surface-glass-hover: var(--lg-surface-strong);
  --card-bg: var(--lg-surface);
  --card-bg-hover: var(--lg-surface-strong);
  --card-bg-solid: var(--lg-surface-chart);
  --text: var(--lg-text);
  --text2: var(--lg-text-2);
  --text3: var(--lg-text-3);
  --text-secondary: var(--lg-text-3);
  --text-tertiary: var(--lg-text-4);
  --primary: var(--lg-blue);
  --primary-dark: var(--lg-blue-deep);
  --accent: var(--lg-blue);
  --accent-deep: var(--lg-blue-deep);
  --border: var(--lg-border-2);
  --border-light: rgba(255, 255, 255, 0.40);
  --border-focus: rgba(45, 99, 200, 0.30);
  --ring: rgba(45, 99, 200, 0.10);
  --ring-focus: rgba(45, 99, 200, 0.18);
  --radius: var(--lg-radius);
  --radius-sm: var(--lg-radius-sm);
  --radius-xs: var(--lg-radius-xs);
  --shadow: var(--lg-shadow-soft);
  --shadow-md: var(--lg-shadow-soft);
  --shadow-lg: var(--lg-shadow-float);
  --shadow-xl: var(--lg-shadow-float);
  --transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  letter-spacing: 0 !important;
}

html {
  overflow-x: hidden;
}

/* ============================================================
   整体背景 — 浅蓝科技感 + 径向渐变 + 光斑 + 流动感
   背景图固定在视口，卡片滑动时通过 backdrop-filter 反衬背景
   ============================================================ */
body,
.liquid-glass-shell {
  background:
    /* 底层图片 — 视口固定 */
    var(--lg-bg-image) center center / cover fixed no-repeat,
    /* 大范围浅蓝渐变基底 */
    linear-gradient(165deg,
      rgba(232, 245, 254, 0.85) 0%,
      rgba(240, 249, 255, 0.70) 35%,
      rgba(228, 242, 255, 0.75) 65%,
      rgba(235, 246, 253, 0.80) 100%
    ),
    /* 左上暖光斑 */
    radial-gradient(ellipse 80% 55% at 15% 10%,
      rgba(180, 215, 255, 0.20) 0%,
      rgba(160, 205, 255, 0.08) 40%,
      transparent 70%
    ),
    /* 右下冷光斑 */
    radial-gradient(ellipse 65% 50% at 85% 85%,
      rgba(140, 200, 255, 0.15) 0%,
      rgba(130, 190, 250, 0.06) 40%,
      transparent 68%
    ),
    /* 中央微光晕 */
    radial-gradient(ellipse 50% 40% at 50% 50%,
      rgba(200, 225, 255, 0.08) 0%,
      transparent 60%
    ),
    /* 左侧蓝色氛围光 */
    radial-gradient(ellipse 40% 60% at 5% 50%,
      rgba(100, 170, 240, 0.06) 0%,
      transparent 55%
    ),
    /* 右侧淡青光 */
    radial-gradient(ellipse 35% 50% at 95% 40%,
      rgba(120, 200, 235, 0.05) 0%,
      transparent 55%
    );
  color: var(--lg-text);
  isolation: isolate;
  overflow-x: hidden;
  min-height: 100vh;
}

/* 背景顶层柔光覆盖 — 让整体更柔和 */
body::before,
.liquid-glass-shell::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 60% 45% at 20% 15%, rgba(255, 255, 255, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 80% 80%, rgba(200, 230, 255, 0.12) 0%, transparent 55%),
    linear-gradient(175deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, rgba(255, 255, 255, 0.03) 100%);
}

/* ============================================================
   SVG 滤镜定义区（隐藏）
   ============================================================ */
.liquid-glass-defs {
  position: fixed;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* ============================================================
   Glass wrapper 基础层 — JS 注入的三层结构
   ============================================================ */
.liquidGlass-wrapper {
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: black;
  cursor: pointer;
  box-shadow: var(--lg-shadow-float), var(--lg-inner-full);
  transition: transform 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease);
  isolation: isolate;
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  overflow: hidden;
  border-radius: inherit;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  /* 半透明白到淡蓝渐变 — 核心玻璃质感（降低透明度避免嵌套感） */
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.12) 40%,
      rgba(210, 235, 255, 0.08) 70%,
      rgba(230, 243, 255, 0.10) 100%
    ),
    /* 顶部左侧高光点 */
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.32), transparent 36%),
    /* 右下折射光 */
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.08), transparent 42%);
  border-radius: inherit;
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  /* 顶部弧形白色高光 */
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58) 0%, transparent 32%),
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.42), transparent 30%);
  box-shadow: var(--lg-inner-full);
  border-radius: inherit;
}

.liquidGlass-text {
  z-index: 3;
  font-size: 2rem;
  color: black;
}

/* hover 时增强模糊和亮度 */
.liquidGlass-wrapper:hover > .liquidGlass-effect {
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

/* ============================================================
   Type class assignments
   ============================================================ */
.liquid-glass-auto,
.liquid-glass-card,
.liquid-glass-panel,
.liquid-glass-modal,
.liquid-glass-chart,
.liquid-glass-table,
.liquid-glass-sidebar,
.liquid-glass-kpi,
.liquid-glass-filter,
.liquid-glass-toast,
.liquid-glass-toolbar {
  cursor: default;
  color: var(--lg-text);
}

.topbar.liquid-glass-auto,
.date-selector.liquid-glass-auto,
.status-compact.liquid-glass-auto,
.chart-box.liquid-glass-auto,
.modal-bg.liquid-glass-auto {
  display: flex;
}

.card.liquid-glass-auto,
.kpi-card.liquid-glass-auto,
.drop-zone.liquid-glass-auto,
.progress-timeline.liquid-glass-auto,
.stat-cell.liquid-glass-auto,
.table-shell.liquid-glass-auto,
.table-wrap.liquid-glass-auto,
.modal-box.liquid-glass-auto,
#changePwdModal.liquid-glass-auto,
.sidebar.liquid-glass-auto,
.broadcast-detail-panel.liquid-glass-auto,
.offline-detail-panel.liquid-glass-auto,
.broadcast-streamer-detail-panel.liquid-glass-auto,
.offline-streamer-detail-panel.liquid-glass-auto,
.yinlang-detail-panel.liquid-glass-auto {
  display: block;
}

.multi-select-panel.liquid-glass-auto:not(.open),
.date-picker-panel.liquid-glass-auto:not(.open),
.kpi-hover-panel.liquid-glass-auto {
  display: none !important;
}

.broadcast-detail-panel.liquid-glass-auto,
.offline-detail-panel.liquid-glass-auto,
.broadcast-streamer-detail-panel.liquid-glass-auto,
.offline-streamer-detail-panel.liquid-glass-auto,
.yinlang-detail-panel.liquid-glass-auto {
  position: fixed !important;
  z-index: 9999 !important;
}

.multi-select-panel.open.liquid-glass-auto,
.date-picker-panel.open.liquid-glass-auto {
  display: flex;
}

.kpi-card.has-streamer-tooltip:hover .kpi-hover-panel.liquid-glass-auto {
  display: none !important;
}

/* ============================================================
   Enhanced element layers — 增强版各类型层级
   ============================================================ */
.liquid-glass-auto > .liquidGlass-effect,
.liquid-glass-card > .liquidGlass-effect,
.liquid-glass-panel > .liquidGlass-effect,
.liquid-glass-modal > .liquidGlass-effect,
.liquid-glass-chart > .liquidGlass-effect,
.liquid-glass-table > .liquidGlass-effect,
.liquid-glass-sidebar > .liquidGlass-effect,
.liquid-glass-kpi > .liquidGlass-effect,
.liquid-glass-filter > .liquidGlass-effect,
.liquid-glass-toast > .liquidGlass-effect,
.liquid-glass-toolbar > .liquidGlass-effect {
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.liquid-glass-auto > .liquidGlass-tint,
.liquid-glass-card > .liquidGlass-tint,
.liquid-glass-panel > .liquidGlass-tint,
.liquid-glass-modal > .liquidGlass-tint,
.liquid-glass-chart > .liquidGlass-tint,
.liquid-glass-table > .liquidGlass-tint,
.liquid-glass-sidebar > .liquidGlass-tint,
.liquid-glass-kpi > .liquidGlass-tint,
.liquid-glass-filter > .liquidGlass-tint,
.liquid-glass-toast > .liquidGlass-tint,
.liquid-glass-toolbar > .liquidGlass-tint {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.10) 42%,
      rgba(210, 235, 255, 0.07) 72%,
      rgba(230, 243, 255, 0.09) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.28), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.07), transparent 42%);
}

.liquid-glass-auto > .liquidGlass-shine,
.liquid-glass-card > .liquidGlass-shine,
.liquid-glass-panel > .liquidGlass-shine,
.liquid-glass-modal > .liquidGlass-shine,
.liquid-glass-chart > .liquidGlass-shine,
.liquid-glass-table > .liquidGlass-shine,
.liquid-glass-sidebar > .liquidGlass-shine,
.liquid-glass-kpi > .liquidGlass-shine,
.liquid-glass-filter > .liquidGlass-shine,
.liquid-glass-toast > .liquidGlass-shine,
.liquid-glass-toolbar > .liquidGlass-shine {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.52) 0%, transparent 34%),
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.38), transparent 30%);
  box-shadow: var(--lg-inner-full);
}

.liquid-glass-auto > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-card > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-panel > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-modal > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-chart > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-table > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-sidebar > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-kpi > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-filter > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-toast > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine),
.liquid-glass-toolbar > :not(.liquidGlass-effect):not(.liquidGlass-tint):not(.liquidGlass-shine) {
  position: relative;
  z-index: 3;
}

/* ============================================================
   Base glass elements — 统一基础玻璃元素样式
   核心液态玻璃材质：半透明 + 多层渐变 + 厚边框 + 多层阴影
   ============================================================ */
.card,
.kpi-card,
.chart-box,
.topbar,
.sidebar,
.date-selector,
.drop-zone,
.progress-timeline,
.status-compact,
.stat-cell,
.table-shell,
.table-wrap,
.modal-box,
#changePwdModal,
.toast,
.multi-select-panel,
.kpi-hover-panel,
.broadcast-detail-panel,
.offline-detail-panel,
.broadcast-streamer-detail-panel,
.offline-streamer-detail-panel,
.yinlang-detail-panel,
.logout-btn,
.liquid-glass-card,
.liquid-glass-panel,
.liquid-glass-modal,
.liquid-glass-chart,
.liquid-glass-table,
.liquid-glass-sidebar,
.liquid-glass-kpi,
.liquid-glass-filter,
.liquid-glass-toast,
.liquid-glass-toolbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 透明背景 — 由 ::before/::after 或 JS 层提供视觉效果 */
  background: transparent !important;
  border-color: var(--lg-border) !important;
  /* 多层阴影：外浮 + 内高光 + 内暗边 */
  box-shadow: var(--lg-shadow-float), var(--lg-inner-full) !important;
  color: var(--lg-text);
}

/* toast 需要保持 fixed 定位在视口右上角 */
.liquid-glass-toast {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
}

/* 卡片/面板类 — 大圆角 */
.card,
.kpi-card,
.chart-box,
.drop-zone,
.progress-timeline,
.status-compact,
.stat-cell,
.table-shell,
.table-wrap,
.modal-box,
#changePwdModal,
.multi-select-panel,
.kpi-hover-panel,
.broadcast-detail-panel,
.offline-detail-panel,
.broadcast-streamer-detail-panel,
.offline-streamer-detail-panel,
.yinlang-detail-panel,
.liquid-glass-card,
.liquid-glass-panel,
.liquid-glass-modal,
.liquid-glass-chart,
.liquid-glass-table,
.liquid-glass-kpi,
.liquid-glass-filter,
.liquid-glass-toast {
  border-radius: var(--lg-radius) !important;
}

/* 顶部栏/侧边栏 — 无圆角 */
.topbar,
.sidebar,
.liquid-glass-sidebar,
.liquid-glass-toolbar {
  border-radius: 0 !important;
}

/* 日期选择器/过滤器 — 胶囊圆角 */
.date-selector,
.liquid-glass-filter {
  border-radius: 30px !important;
}

/* sidebar-toggle — 保持 position: fixed，不参与文档流 */
.sidebar-toggle {
  position: fixed !important;
  z-index: 1000;
  border-radius: var(--lg-radius-xs) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.16)) !important;
  box-shadow:
    0 4px 14px rgba(20, 40, 70, 0.07),
    var(--lg-inner-full) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* ============================================================
   按钮 — 玻璃按钮风格
   ============================================================ */
.liquid-glass-button,
.btn,
.btn-main,
.btn-soft,
.btn-bad,
.task-action,
.date-selector .btn-refresh,
.date-selector .btn-mode,
.month-toggle-btn,
.overall-tab-btn,
.ms-actions button,
.toggle-pwd,
.modal-close,
.dp-nav,
.broadcast-detail-close,
.offline-detail-close,
.broadcast-streamer-detail-close,
.offline-streamer-detail-close,
.yinlang-detail-close,
.logout-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--lg-radius-xs) !important;
  border: 1px solid rgba(255, 255, 255, 0.58) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.16)) !important;
  color: var(--lg-text-3) !important;
  box-shadow:
    0 4px 14px rgba(20, 40, 70, 0.07),
    var(--lg-inner-full) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  touch-action: manipulation;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

/* 按钮顶部高光层 */
.liquid-glass-button::after,
.btn::after,
.task-action::after,
.date-selector .btn-refresh::after,
.date-selector .btn-mode::after,
.month-toggle-btn::after,
.overall-tab-btn::after,
.ms-actions button::after,
.toggle-pwd::after,
.modal-close::after,
.dp-nav::after,
.logout-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.40), transparent 52%);
  box-shadow: var(--lg-inner-highlight);
}

.liquid-glass-button > *,
.btn > *,
.task-action > *,
.date-selector .btn-refresh > *,
.date-selector .btn-mode > *,
.month-toggle-btn > *,
.overall-tab-btn > *,
.ms-actions button > *,
.toggle-pwd > *,
.modal-close > *,
.dp-nav > *,
.logout-btn > * {
  position: relative;
  z-index: 2;
}

/* 主要按钮 — 蓝色实心 */
.btn,
.btn-main,
.task-action,
.date-selector .btn-refresh,
.date-selector .btn-mode.active,
.month-toggle-btn.active,
.overall-tab-btn.active,
.ms-actions button:hover,
.liquid-glass-button.is-primary {
  background: linear-gradient(135deg, rgba(45, 99, 200, 0.85), rgba(35, 80, 165, 0.85)) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}

/* 次要按钮 — 更透明 */
.btn-soft,
.month-toggle-btn,
.overall-tab-btn,
.ms-actions button,
.date-selector .btn-mode {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.12)) !important;
  color: var(--lg-text-3) !important;
}

/* 危险按钮 */
.btn-bad,
.topbar-nav a.danger {
  background:
    linear-gradient(160deg, rgba(255, 245, 247, 0.28), rgba(255, 240, 243, 0.14)) !important;
  color: #a32031 !important;
  border-color: rgba(200, 90, 110, 0.20) !important;
}

/* 按钮 hover — 上浮 + 光效增强 */
.btn:hover,
.btn-main:hover,
.btn-soft:hover,
.btn-bad:hover,
.task-action:hover,
.date-selector .btn-refresh:hover,
.date-selector .btn-mode:hover,
.month-toggle-btn:hover,
.overall-tab-btn:hover,
.ms-actions button:hover,
.logout-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 22px rgba(20, 40, 70, 0.11),
    0 2px 8px rgba(20, 40, 70, 0.05),
    var(--lg-inner-full) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

.btn:active,
.btn-main:active,
.btn-soft:active,
.btn-bad:active,
.task-action:active,
.month-toggle-btn:active,
.overall-tab-btn:active,
.logout-btn:active {
  transform: translateY(0) scale(0.97);
}

/* ============================================================
   Fallback layered material — 非 JS 增强时的回退样式
   使用 ::before / ::after 实现完整液态玻璃效果
   ============================================================ */

/* ::before — backdrop-filter 模糊层（底层） */
.card:not(.liquidGlass-wrapper)::before,
.kpi-card:not(.liquidGlass-wrapper)::before,
.chart-box:not(.liquidGlass-wrapper)::before,
.topbar:not(.liquidGlass-wrapper)::before,
.sidebar:not(.liquidGlass-wrapper)::before,
.date-selector:not(.liquidGlass-wrapper)::before,
.drop-zone:not(.liquidGlass-wrapper)::before,
.progress-timeline:not(.liquidGlass-wrapper)::before,
.status-compact:not(.liquidGlass-wrapper)::before,
.stat-cell:not(.liquidGlass-wrapper)::before,
.table-shell:not(.liquidGlass-wrapper)::before,
.table-wrap:not(.liquidGlass-wrapper)::before,
.modal-box:not(.liquidGlass-wrapper)::before,
#changePwdModal:not(.liquidGlass-wrapper)::before,
.toast:not(.liquidGlass-wrapper)::before,
.multi-select-panel:not(.liquidGlass-wrapper)::before,
.kpi-hover-panel:not(.liquidGlass-wrapper)::before,
.broadcast-detail-panel:not(.liquidGlass-wrapper)::before,
.offline-detail-panel:not(.liquidGlass-wrapper)::before,
.broadcast-streamer-detail-panel:not(.liquidGlass-wrapper)::before,
.offline-streamer-detail-panel:not(.liquidGlass-wrapper)::before,
.yinlang-detail-panel:not(.liquidGlass-wrapper)::before,
.liquid-glass-card:not(.liquidGlass-wrapper)::before,
.liquid-glass-panel:not(.liquidGlass-wrapper)::before,
.liquid-glass-modal:not(.liquidGlass-wrapper)::before,
.liquid-glass-chart:not(.liquidGlass-wrapper)::before,
.liquid-glass-table:not(.liquidGlass-wrapper)::before,
.liquid-glass-sidebar:not(.liquidGlass-wrapper)::before,
.liquid-glass-kpi:not(.liquidGlass-wrapper)::before,
.liquid-glass-filter:not(.liquidGlass-wrapper)::before,
.liquid-glass-toast:not(.liquidGlass-wrapper)::before,
.liquid-glass-toolbar:not(.liquidGlass-wrapper)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  pointer-events: none;
}

/* ::after — 玻璃着色 + 高光层（上层） */
.card:not(.liquidGlass-wrapper)::after,
.kpi-card:not(.liquidGlass-wrapper)::after,
.chart-box:not(.liquidGlass-wrapper)::after,
.topbar:not(.liquidGlass-wrapper)::after,
.sidebar:not(.liquidGlass-wrapper)::after,
.date-selector:not(.liquidGlass-wrapper)::after,
.drop-zone:not(.liquidGlass-wrapper)::after,
.progress-timeline:not(.liquidGlass-wrapper)::after,
.status-compact:not(.liquidGlass-wrapper)::after,
.stat-cell:not(.liquidGlass-wrapper)::after,
.table-shell:not(.liquidGlass-wrapper)::after,
.table-wrap:not(.liquidGlass-wrapper)::after,
.modal-box:not(.liquidGlass-wrapper)::after,
#changePwdModal:not(.liquidGlass-wrapper)::after,
.toast:not(.liquidGlass-wrapper)::after,
.multi-select-panel:not(.liquidGlass-wrapper)::after,
.kpi-hover-panel:not(.liquidGlass-wrapper)::after,
.broadcast-detail-panel:not(.liquidGlass-wrapper)::after,
.offline-detail-panel:not(.liquidGlass-wrapper)::after,
.broadcast-streamer-detail-panel:not(.liquidGlass-wrapper)::after,
.offline-streamer-detail-panel:not(.liquidGlass-wrapper)::after,
.yinlang-detail-panel:not(.liquidGlass-wrapper)::after,
.liquid-glass-card:not(.liquidGlass-wrapper)::after,
.liquid-glass-panel:not(.liquidGlass-wrapper)::after,
.liquid-glass-modal:not(.liquidGlass-wrapper)::after,
.liquid-glass-chart:not(.liquidGlass-wrapper)::after,
.liquid-glass-table:not(.liquidGlass-wrapper)::after,
.liquid-glass-sidebar:not(.liquidGlass-wrapper)::after,
.liquid-glass-kpi:not(.liquidGlass-wrapper)::after,
.liquid-glass-filter:not(.liquidGlass-wrapper)::after,
.liquid-glass-toast:not(.liquidGlass-wrapper)::after,
.liquid-glass-toolbar:not(.liquidGlass-wrapper)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  /* 核心液态玻璃多层渐变（降低透明度避免嵌套感） */
  background:
    /* 基底半透明渐变 */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.10) 42%,
      rgba(210, 235, 255, 0.07) 72%,
      rgba(230, 243, 255, 0.09) 100%
    ),
    /* 顶部左侧弧形高光 */
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.30), transparent 36%),
    /* 右下角蓝色折射光 */
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.07), transparent 42%);
  box-shadow: var(--lg-inner-full);
}

/* 子元素提升到玻璃层之上 */
.card:not(.liquidGlass-wrapper) > *,
.kpi-card:not(.liquidGlass-wrapper) > *,
.chart-box:not(.liquidGlass-wrapper) > *,
.topbar:not(.liquidGlass-wrapper) > *,
.sidebar:not(.liquidGlass-wrapper) > *,
.date-selector:not(.liquidGlass-wrapper) > *,
.drop-zone:not(.liquidGlass-wrapper) > *,
.progress-timeline:not(.liquidGlass-wrapper) > *,
.status-compact:not(.liquidGlass-wrapper) > *,
.stat-cell:not(.liquidGlass-wrapper) > *,
.table-shell:not(.liquidGlass-wrapper) > *,
.table-wrap:not(.liquidGlass-wrapper) > *,
.modal-box:not(.liquidGlass-wrapper) > *,
#changePwdModal:not(.liquidGlass-wrapper) > *,
.toast:not(.liquidGlass-wrapper) > *,
.multi-select-panel:not(.liquidGlass-wrapper) > *,
.kpi-hover-panel:not(.liquidGlass-wrapper) > *,
.broadcast-detail-panel:not(.liquidGlass-wrapper) > *,
.offline-detail-panel:not(.liquidGlass-wrapper) > *,
.broadcast-streamer-detail-panel:not(.liquidGlass-wrapper) > *,
.offline-streamer-detail-panel:not(.liquidGlass-wrapper) > *,
.yinlang-detail-panel:not(.liquidGlass-wrapper) > * {
  position: relative;
  z-index: 2;
}

/* ============================================================
   Hover 效果 — 上浮4px + 阴影扩散 + 高光增强 + 边框提亮
   ============================================================ */
.card:hover,
.kpi-card:hover,
.chart-box:hover,
.drop-zone:hover,
.stat-cell:hover,
.table-shell:hover,
.liquid-glass-card:hover,
.liquid-glass-panel:hover,
.liquid-glass-chart:hover,
.liquid-glass-kpi:hover {
  border-color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: var(--lg-shadow-hover), var(--lg-inner-full) !important;
  transform: translateY(-4px);
  transition: transform 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease), border-color 0.3s ease;
}

/* hover 时 ::after 高光略微变化 — 模拟光线移动 */
.card:hover::after,
.kpi-card:hover::after,
.chart-box:hover::after,
.drop-zone:hover::after,
.stat-cell:hover::after,
.table-shell:hover::after,
.liquid-glass-card:hover::after,
.liquid-glass-panel:hover::after,
.liquid-glass-chart:hover::after,
.liquid-glass-kpi:hover::after {
  background:
    linear-gradient(138deg,
      rgba(255, 255, 255, 0.44) 0%,
      rgba(255, 255, 255, 0.20) 42%,
      rgba(210, 235, 255, 0.15) 72%,
      rgba(230, 243, 255, 0.18) 100%
    ),
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.68), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(120, 190, 255, 0.17), transparent 40%);
}

/* ============================================================
   品牌 Logo & 标题文字
   ============================================================ */
.brand-logo {
  filter: drop-shadow(0 14px 24px rgba(11, 21, 38, 0.10));
}

.brand-name,
.page-head h1,
.header h1,
.card-head h2,
.ct,
.kl,
.modal-header h3,
.modal-box h3,
.dp-title,
.task-title {
  color: var(--lg-text) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.50);
}

/* 次级文字 — 蓝灰色调 */
.card-header p,
.page-head p,
.header .sub,
.ks,
.form-group label,
.stat-label,
.dz-hint,
.empty-hint,
.task-eyebrow,
.task-meta span,
.cell-time,
.cell-size {
  color: var(--lg-text-3) !important;
}

/* ============================================================
   输入框 — 玻璃输入框
   ============================================================ */
.liquid-glass-input,
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.input-wrap input,
.multi-select-trigger,
.date-selector select,
.date-selector .mode-select {
  min-height: 44px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.18)) !important;
  color: var(--lg-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  border-radius: var(--lg-radius-xs) !important;
  box-shadow: var(--lg-inner-full), 0 2px 8px rgba(20, 40, 70, 0.04);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.input-wrap input:focus,
.multi-select-trigger.open,
.date-selector .mode-select:focus {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.24)) !important;
  border-color: rgba(45, 99, 200, 0.38) !important;
  box-shadow: 0 0 0 3px rgba(45, 99, 200, 0.10), var(--lg-inner-full) !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: rgba(83, 99, 122, 0.65) !important;
}

/* ============================================================
   导航链接
   ============================================================ */
.topbar-nav a,
.sidebar-nav li a,
.footer-link a {
  border-radius: var(--lg-radius-xs) !important;
}

.topbar-nav a:hover,
.topbar-nav a.current,
.sidebar-nav li a:hover,
.sidebar-nav li a.active,
.footer-link a:hover {
  background: rgba(235, 245, 255, 0.98) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sidebar {
  background: transparent !important;
}

.sidebar-nav li a.active::before,
.sidebar-nav li a:hover::before {
  background: linear-gradient(180deg, var(--lg-blue), var(--lg-blue)) !important;
  box-shadow: none !important;
}

/* ============================================================
   Chips & Badges — 玻璃小胶囊
   ============================================================ */
.chip,
.badge,
.tbadge,
.mtag,
.date-badge,
.date-identity-badge,
.task-meta span,
.month-tip,
.missing-chip,
.pwd-code,
[id$="-tags"] .ms-tag,
.rank-num {
  /* 玻璃胶囊核心 */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.14)) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 999px !important;
  box-shadow:
    0 2px 8px rgba(20, 40, 70, 0.05),
    var(--lg-inner-highlight) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}

.badge.primary,
.date-identity-badge,
[id$="-tags"] .ms-tag {
  color: var(--lg-blue-deep) !important;
}

/* 涨 — 降低饱和度的绿色 */
.badge.success,
.chip.ok,
.tbadge.tup {
  color: var(--lg-up) !important;
}

/* 跌 — 降低饱和度的红色 */
.badge.warning,
.mtag.d2 {
  color: #92400e !important;
}

.badge.info,
.mtag.d1 {
  color: #0e7490 !important;
}

/* ============================================================
   图表区域
   ============================================================ */
.chart-box {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

.chart-wrap {
  width: 100%;
  border-radius: var(--lg-radius-sm);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)) !important;
  box-shadow: var(--lg-inner-highlight);
}

.accent-bar {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(45, 99, 200, 0.60), rgba(45, 99, 200, 0.30)) !important;
  box-shadow: none !important;
}

.kpi-card {
  min-height: 150px;
}

.kpi-card.has-streamer-tooltip {
  overflow: hidden !important;
}

.kpi-hover-panel,
.multi-select-panel,
.date-picker-panel {
  overflow: hidden !important;
}

/* ============================================================
   Overlay panels — stronger tint to compensate for floating
   over other glass elements (glass-on-glass visibility fix)
   ============================================================ */

/* Non-JS fallback ::after — more opaque tint */
.multi-select-panel:not(.liquidGlass-wrapper)::after,
.date-picker-panel:not(.liquidGlass-wrapper)::after,
.kpi-hover-panel:not(.liquidGlass-wrapper)::after {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.40) 0%,
      rgba(255, 255, 255, 0.26) 42%,
      rgba(210, 235, 255, 0.14) 72%,
      rgba(230, 243, 255, 0.18) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.42), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.12), transparent 42%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.72),
    inset 0 -1px 2px rgba(120, 160, 200, 0.18) !important;
}

/* Non-JS fallback ::before — stronger blur for overlay panels */
.multi-select-panel:not(.liquidGlass-wrapper)::before,
.date-picker-panel:not(.liquidGlass-wrapper)::before,
.kpi-hover-panel:not(.liquidGlass-wrapper)::before {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* JS-enhanced overlay panels — stronger tint layer */
.multi-select-panel > .liquidGlass-tint,
.date-picker-panel > .liquidGlass-tint,
.kpi-hover-panel > .liquidGlass-tint {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.36) 0%,
      rgba(255, 255, 255, 0.22) 42%,
      rgba(210, 235, 255, 0.12) 72%,
      rgba(230, 243, 255, 0.16) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.38), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.10), transparent 42%) !important;
}

/* JS-enhanced overlay panels — stronger shine layer */
.multi-select-panel > .liquidGlass-shine,
.date-picker-panel > .liquidGlass-shine,
.kpi-hover-panel > .liquidGlass-shine {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.56) 0%, transparent 34%),
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.42), transparent 30%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.70),
    inset 0 -1px 2px rgba(120, 160, 200, 0.16) !important;
}

/* JS-enhanced overlay panels — stronger blur effect */
.multi-select-panel > .liquidGlass-effect,
.date-picker-panel > .liquidGlass-effect,
.kpi-hover-panel > .liquidGlass-effect {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.table-shell,
.table-wrap,
.liquid-glass-table {
  background: transparent !important;
}

table th,
.table-shell th,
.broadcast-detail-table th,
.offline-detail-table th,
.broadcast-streamer-detail-table th,
.offline-streamer-detail-table th,
.yinlang-detail-table th {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.16)) !important;
  color: var(--lg-text-3) !important;
  border-bottom-color: rgba(45, 99, 200, 0.10) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
}

/* 弹窗详情表格表头：使用极淡的统一半透明背景，避免首列出现不透明的白色矩形 */
.broadcast-detail-table th,
.offline-detail-table th,
.broadcast-streamer-detail-table th,
.offline-streamer-detail-table th,
.yinlang-detail-table th,
.broadcast-detail-table th:first-child,
.broadcast-detail-table th:last-child,
.offline-detail-table th:first-child,
.offline-detail-table th:last-child,
.broadcast-streamer-detail-table th:first-child,
.broadcast-streamer-detail-table th:last-child,
.offline-streamer-detail-table th:first-child,
.offline-streamer-detail-table th:last-child,
.yinlang-detail-table th:first-child,
.yinlang-detail-table th:last-child {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 0 !important;
}

table td,
.table-shell td {
  border-bottom-color: rgba(140, 170, 200, 0.08) !important;
}

table tbody tr:hover,
.table-shell tbody tr:hover,
.multi-select-panel .ms-list label:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

.month-group-row {
  background: rgba(255, 255, 255, 0.14) !important;
}

.drop-zone {
  border-style: dashed !important;
  border-width: 2px !important;
}

.drop-zone:hover,
.drop-zone.over {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
}

.progress-track .pt-step,
.status-compact,
.task-meta span {
  background: rgba(255, 255, 255, 0.14) !important;
}

.pt-step.active,
.pt-step.done {
  background: rgba(255, 255, 255, 0.26) !important;
}

.task-state-icon,
.pt-step.active .pt-step-dot,
.pt-step.done .pt-step-dot,
.sc-dot.ok,
.rank-num {
  box-shadow: 0 4px 12px rgba(45, 99, 200, 0.12), var(--lg-inner-highlight) !important;
}

/* ============================================================
   Modal / overlay
   ============================================================ */
.modal-bg,
.sidebar-overlay {
  background: rgba(11, 21, 38, 0.25) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

#changePwdOverlay {
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* 修改密码弹窗使用更浅的玻璃色，与数据卡片保持一致 */
#changePwdModal.liquidGlass-wrapper > .liquidGlass-tint,
#changePwdModal:not(.liquidGlass-wrapper)::after {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.42) 40%,
      rgba(245, 250, 255, 0.38) 70%,
      rgba(250, 252, 255, 0.45) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.70), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(180, 215, 255, 0.14), transparent 42%) !important;
}

#changePwdModal.liquidGlass-wrapper > .liquidGlass-shine {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.70) 0%, transparent 34%),
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.55), transparent 30%) !important;
}

.error-msg,
.msg-success,
.toast-ok,
.toast-err,
.toast-warn {
  border-radius: var(--lg-radius-xs) !important;
  box-shadow: var(--lg-shadow-soft), var(--lg-inner-full) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
}

.error-msg,
.toast-err {
  background:
    linear-gradient(160deg, rgba(255, 238, 244, 0.42), rgba(255, 235, 242, 0.22)) !important;
  border-color: rgba(200, 90, 110, 0.20) !important;
}

.msg-success,
.toast-ok {
  background:
    linear-gradient(160deg, rgba(232, 253, 248, 0.42), rgba(225, 250, 245, 0.22)) !important;
  border-color: rgba(13, 148, 136, 0.20) !important;
}

.toast-warn {
  background:
    linear-gradient(160deg, rgba(255, 247, 224, 0.44), rgba(255, 243, 212, 0.24)) !important;
  border-color: rgba(166, 107, 18, 0.18) !important;
}

.icon,
.spinner {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10)) !important;
  border-color: rgba(255, 255, 255, 0.48) !important;
  color: var(--lg-blue) !important;
  box-shadow: var(--lg-shadow-soft), var(--lg-inner-full) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.spinner {
  border-color: rgba(255, 255, 255, 0.45) !important;
  border-top-color: var(--lg-blue) !important;
}

a {
  color: var(--lg-blue-deep);
}

a:hover {
  color: var(--lg-blue);
}

/* ============================================================
   自定义滚动条 — 玻璃风格
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(140, 170, 200, 0.18) !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ============================================================
   Dashboard layout refinements — 仪表板布局优化
   注意：保留 sidebar 的 toggle 展开/收起功能，
   不对非 .open 状态的 sidebar 强制 translateX(0)
   ============================================================ */

/* 强制 main 全宽，消除左侧空白 */
body > main.main,
.main {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 0% !important;
  margin: 0 !important;
  padding: clamp(16px, 1.4vw, 24px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

/* sidebar 展开状态时的玻璃增强 */
.sidebar.open {
  border-right-color: var(--lg-border) !important;
  box-shadow: var(--lg-shadow-float), var(--lg-inner-full) !important;
}

.main .header-row {
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.main .header h1 {
  max-width: 100%;
  font-size: clamp(2rem, 2.6vw, 3.4rem) !important;
  line-height: 1.10 !important;
  overflow-wrap: anywhere;
}

/* ============================================================
   Date selector — 玻璃胶囊条
   ============================================================ */
.main .date-selector {
  width: 100%;
  min-height: 72px !important;
  margin: 18px 0 22px !important;
  padding: 14px 16px !important;
  gap: 12px !important;
  flex-wrap: wrap;
  align-items: center;
}

.main .mode-panel {
  flex-wrap: wrap;
}

.main .date-selector .mode-btns {
  gap: 3px !important;
  padding: 4px !important;
  border-radius: 26px !important;
  overflow: visible !important;
}

.main .date-selector .btn-mode {
  min-width: 76px;
  min-height: 44px;
  border-radius: 22px !important;
}

.main .multi-select-trigger,
.main .date-selector .mode-select,
.main .date-selector select {
  min-width: 178px;
}

.main .date-badge {
  margin-left: 0 !important;
}

/* ============================================================
   KPI 卡片网格 — 紧凑排列，充分利用空间
   ============================================================ */
.main .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 28px !important;
}

.main .kpi-card {
  min-height: 170px;
  padding: 24px 26px !important;
}

/* KPI 数字 — 深色高对比 */
.main .kpi-card .kv {
  color: var(--lg-text) !important;
}

/* KPI 次级文字 — 蓝灰感 */
.main .kpi-card .ks,
.main .kpi-card .kl {
  color: var(--lg-text-3) !important;
}

/* 涨跌颜色 — 红色代表涨，绿色代表跌 */
.main .kpi-card .kt.up {
  color: var(--rise) !important;
}
.main .kpi-card .kt.down {
  color: var(--fall) !important;
}

/* ============================================================
   Chart 区域
   ============================================================ */
.main .chart-grid,
.main .chart-row-2col {
  gap: 20px !important;
  margin-bottom: 28px !important;
}

.main .chart-box {
  padding: 24px !important;
}

.main .chart-box .ct {
  font-size: 1rem !important;
}

.main .chart-wrap {
  border-radius: 22px;
}

/* ============================================================
   Fallback: 不支持 backdrop-filter 的浏览器
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card,
  .kpi-card,
  .chart-box,
  .topbar,
  .sidebar,
  .date-selector,
  .drop-zone,
  .progress-timeline,
  .status-compact,
  .stat-cell,
  .table-shell,
  .table-wrap,
  .modal-box,
  #changePwdModal,
  .toast,
  .multi-select-panel,
  .multi-select-trigger,
  .date-selector select,
  .date-selector .mode-select,
  .kpi-hover-panel,
  .broadcast-detail-panel,
  .offline-detail-panel,
  .broadcast-streamer-detail-panel,
  .offline-streamer-detail-panel,
  .yinlang-detail-panel {
    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(245, 250, 255, 0.82) 100%
      ) !important;
  }
}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width: 768px) {
  body,
  .liquid-glass-shell {
    background-attachment: scroll !important;
    background-position: center center !important;
  }

  .main {
    --lg-dashboard-main-width: calc(100vw - 28px);
    width: var(--lg-dashboard-main-width) !important;
    left: 0 !important;
    padding: 16px 0 52px !important;
  }

  .main .header-row {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .main .header h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
  }

  .main .date-selector {
    min-height: 0 !important;
    margin: 16px 0 20px !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 24px !important;
  }

  .main .date-selector .mode-btns,
  .main .multi-select-wrap,
  .main .mode-panel {
    width: 100%;
  }

  .main .date-selector .btn-mode {
    flex: 1;
    min-width: 0;
  }

  .main .multi-select-trigger,
  .main .date-selector .mode-select,
  .main .date-selector select {
    width: 100%;
    min-width: 0;
  }

  .main .kpi-grid {
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  .main .kpi-card {
    min-height: 0;
    padding: 20px 20px !important;
  }

  .main .chart-grid,
  .main .chart-row-2col {
    gap: 18px !important;
    margin-bottom: 24px !important;
  }

  .main .chart-box {
    padding: 18px !important;
  }

  /* 移动端取消 hover 上浮 */
  .card:hover,
  .kpi-card:hover,
  .chart-box:hover,
  .drop-zone:hover,
  .stat-cell:hover,
  .table-shell:hover {
    transform: none;
  }

  .broadcast-detail-panel,
  .offline-detail-panel,
  .broadcast-streamer-detail-panel,
  .offline-streamer-detail-panel,
  .yinlang-detail-panel {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 480px) {
  .wrapper {
    max-width: calc(100vw - 24px) !important;
  }

  .card,
  #changePwdModal,
  .modal-box {
    border-radius: 26px !important;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .kpi-card:hover,
  .chart-box:hover,
  .drop-zone:hover,
  .stat-cell:hover,
  .table-shell:hover,
  .btn:hover,
  .btn-main:hover,
  .btn-soft:hover,
  .btn-bad:hover,
  .task-action:hover,
  .date-selector .btn-refresh:hover,
  .date-selector .btn-mode:hover,
  .month-toggle-btn:hover,
  .overall-tab-btn:hover,
  .logout-btn:hover {
    transform: none !important;
  }
}

/* ============================================================
   Dashboard feedback fixes
   ============================================================ */
body > main.main,
.main {
  width: 100vw !important;
  max-width: none !important;
}

@media (min-width: 769px) {
  .main .header-row {
    padding-left: 56px !important;
  }
}

.sidebar.liquidGlass-wrapper,
.sidebar.liquid-glass-auto {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  width: 250px !important;
  min-width: 250px !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 950 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.kpi-card::before,
.kpi-card:hover::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

.accent-bar {
  display: none !important;
}

.chart-header {
  margin-bottom: 12px !important;
}

.chart-wrap,
.main .chart-wrap {
  background: transparent !important;
  box-shadow: none !important;
}

.liquidGlass-tint,
.liquid-glass-auto > .liquidGlass-tint,
.liquid-glass-card > .liquidGlass-tint,
.liquid-glass-panel > .liquidGlass-tint,
.liquid-glass-modal > .liquidGlass-tint,
.liquid-glass-chart > .liquidGlass-tint,
.liquid-glass-table > .liquidGlass-tint,
.liquid-glass-sidebar > .liquidGlass-tint,
.liquid-glass-kpi > .liquidGlass-tint,
.liquid-glass-filter > .liquidGlass-tint,
.liquid-glass-toast > .liquidGlass-tint,
.liquid-glass-toolbar > .liquidGlass-tint {
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.07) 46%,
      rgba(205, 232, 255, 0.08) 100%
    ),
    radial-gradient(circle at 86% 86%, rgba(120, 190, 255, 0.08), transparent 44%) !important;
}

.liquidGlass-shine,
.liquid-glass-auto > .liquidGlass-shine,
.liquid-glass-card > .liquidGlass-shine,
.liquid-glass-panel > .liquidGlass-shine,
.liquid-glass-modal > .liquidGlass-shine,
.liquid-glass-chart > .liquidGlass-shine,
.liquid-glass-table > .liquidGlass-shine,
.liquid-glass-sidebar > .liquidGlass-shine,
.liquid-glass-kpi > .liquidGlass-shine,
.liquid-glass-filter > .liquidGlass-shine,
.liquid-glass-toast > .liquidGlass-shine,
.liquid-glass-toolbar > .liquidGlass-shine {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 30%,
      transparent 68%
    ) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(120, 160, 200, 0.12) !important;
}

/* ============================================================
   Mouse-tracking dynamic glass reflection
   鼠标悬停时高光跟随鼠标位置，模拟真实玻璃光线反射
   ============================================================ */
.liquidGlass-wrapper:hover > .liquidGlass-shine {
  background:
    radial-gradient(circle at var(--lg-mx, 50%) var(--lg-my, 50%),
      rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      transparent 68%
    ) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(120, 160, 200, 0.14) !important;
  transition: box-shadow 0.3s ease;
}

/* ============================================================
   Overlay panels — final high-priority tint fix
   弹层需要在全局弱透明度规则之后重新声明，确保与卡片一致
   大幅提高不透明度，并给元素自身加兜底背景
   ============================================================ */

/* 元素自身兜底背景 — 确保即使JS层失效也不至于完全透明 */
.date-picker-panel,
.multi-select-panel.date-picker-panel {
  background: rgba(245, 249, 254, 0.92) !important;
}

.date-picker-panel > .liquidGlass-effect,
.multi-select-panel.date-picker-panel > .liquidGlass-effect,
.kpi-hover-panel > .liquidGlass-effect {
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
}

.date-picker-panel > .liquidGlass-tint,
.multi-select-panel.date-picker-panel > .liquidGlass-tint,
.kpi-hover-panel > .liquidGlass-tint {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.78) 42%,
      rgba(225, 240, 255, 0.70) 72%,
      rgba(240, 248, 255, 0.76) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.84), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.30), transparent 42%) !important;
}

.date-picker-panel > .liquidGlass-shine,
.multi-select-panel.date-picker-panel > .liquidGlass-shine,
.kpi-hover-panel > .liquidGlass-shine {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86) 0%, transparent 34%),
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.74), transparent 30%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.78),
    inset 0 -1px 2px rgba(120, 160, 200, 0.18) !important;
}

/* 非 JS 增强时的 ::after 兜底 — 更强的着色 */
.date-picker-panel:not(.liquidGlass-wrapper)::after,
.multi-select-panel.date-picker-panel:not(.liquidGlass-wrapper)::after {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.78) 42%,
      rgba(225, 240, 255, 0.72) 72%,
      rgba(240, 248, 255, 0.78) 100%
    ),
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.85), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(120, 190, 255, 0.30), transparent 42%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.78),
    inset 0 -1px 2px rgba(120, 160, 200, 0.18) !important;
}

/* 非JS增强元素的鼠标追踪回退 */
.card:not(.liquidGlass-wrapper):hover::after,
.kpi-card:not(.liquidGlass-wrapper):hover::after,
.chart-box:not(.liquidGlass-wrapper):hover::after,
.drop-zone:not(.liquidGlass-wrapper):hover::after,
.stat-cell:not(.liquidGlass-wrapper):hover::after,
.table-shell:not(.liquidGlass-wrapper):hover::after,
.liquid-glass-card:not(.liquidGlass-wrapper):hover::after,
.liquid-glass-panel:not(.liquidGlass-wrapper):hover::after,
.liquid-glass-chart:not(.liquidGlass-wrapper):hover::after,
.liquid-glass-kpi:not(.liquidGlass-wrapper):hover::after {
  background:
    radial-gradient(circle at var(--lg-mx, 50%) var(--lg-my, 50%),
      rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.08) 46%,
      rgba(205, 232, 255, 0.10) 100%
    ),
    radial-gradient(circle at 86% 86%, rgba(120, 190, 255, 0.10), transparent 44%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(120, 160, 200, 0.14) !important;
}

.card:not(.liquidGlass-wrapper)::after,
.kpi-card:not(.liquidGlass-wrapper)::after,
.chart-box:not(.liquidGlass-wrapper)::after,
.topbar:not(.liquidGlass-wrapper)::after,
.sidebar:not(.liquidGlass-wrapper)::after,
.date-selector:not(.liquidGlass-wrapper)::after,
.drop-zone:not(.liquidGlass-wrapper)::after,
.progress-timeline:not(.liquidGlass-wrapper)::after,
.status-compact:not(.liquidGlass-wrapper)::after,
.stat-cell:not(.liquidGlass-wrapper)::after,
.table-shell:not(.liquidGlass-wrapper)::after,
.table-wrap:not(.liquidGlass-wrapper)::after,
.modal-box:not(.liquidGlass-wrapper)::after,
#changePwdModal:not(.liquidGlass-wrapper)::after,
.toast:not(.liquidGlass-wrapper)::after,
.multi-select-panel:not(.liquidGlass-wrapper)::after,
.kpi-hover-panel:not(.liquidGlass-wrapper)::after,
.broadcast-detail-panel:not(.liquidGlass-wrapper)::after,
.offline-detail-panel:not(.liquidGlass-wrapper)::after,
.broadcast-streamer-detail-panel:not(.liquidGlass-wrapper)::after,
.offline-streamer-detail-panel:not(.liquidGlass-wrapper)::after,
.yinlang-detail-panel:not(.liquidGlass-wrapper)::after,
.liquid-glass-card:not(.liquidGlass-wrapper)::after,
.liquid-glass-panel:not(.liquidGlass-wrapper)::after,
.liquid-glass-modal:not(.liquidGlass-wrapper)::after,
.liquid-glass-chart:not(.liquidGlass-wrapper)::after,
.liquid-glass-table:not(.liquidGlass-wrapper)::after,
.liquid-glass-sidebar:not(.liquidGlass-wrapper)::after,
.liquid-glass-kpi:not(.liquidGlass-wrapper)::after,
.liquid-glass-filter:not(.liquidGlass-wrapper)::after,
.liquid-glass-toast:not(.liquidGlass-wrapper)::after,
.liquid-glass-toolbar:not(.liquidGlass-wrapper)::after {
  background:
    linear-gradient(140deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.07) 46%,
      rgba(205, 232, 255, 0.08) 100%
    ),
    radial-gradient(circle at 86% 86%, rgba(120, 190, 255, 0.08), transparent 44%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(120, 160, 200, 0.12) !important;
}

@media (min-width: 1280px) {
  .main .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .main .kpi-card {
    min-height: 190px !important;
    padding: 28px 32px !important;
  }

  .main .chart-box {
    padding: 28px !important;
  }

  .main .chart-box .chart-wrap {
    min-height: 430px;
  }
}

/* ============================================================
   修复：日期选择器下拉弹层不应撑大父容器
   ============================================================ */

/* 面板必须绝对定位，作为浮层脱离文档流 */
.multi-select-panel {
  position: absolute !important;
}

/* 日期筛选栏保持粘性定位 + 溢出可见，让面板浮层可超出筛选栏边界 */
.date-selector {
  position: sticky !important;
  overflow: visible !important;
}

/* ============================================================
   Nested glass cleanup + scroll performance
   核心：背景固定在视口，卡片滑动时 backdrop-filter 动态反衬底层背景
   ============================================================ */
body,
.liquid-glass-shell {
  background-attachment: fixed !important;
}

.card .drop-zone,
.card .progress-timeline,
.card .status-compact,
.card .stat-cell,
.card .table-shell,
.card .table-wrap,
.chart-box .table-wrap,
.overall-board-card .overall-tab-switch,
.overall-board-card .overall-table-wrap {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card .drop-zone,
.card .progress-timeline,
.card .status-compact,
.card .stat-cell,
.card .table-shell,
.card .table-wrap,
.chart-box .table-wrap {
  border-color: rgba(90, 130, 180, 0.12) !important;
}

.card .drop-zone > .liquidGlass-effect,
.card .drop-zone > .liquidGlass-tint,
.card .drop-zone > .liquidGlass-shine,
.card .progress-timeline > .liquidGlass-effect,
.card .progress-timeline > .liquidGlass-tint,
.card .progress-timeline > .liquidGlass-shine,
.card .status-compact > .liquidGlass-effect,
.card .status-compact > .liquidGlass-tint,
.card .status-compact > .liquidGlass-shine,
.card .stat-cell > .liquidGlass-effect,
.card .stat-cell > .liquidGlass-tint,
.card .stat-cell > .liquidGlass-shine,
.card .table-shell > .liquidGlass-effect,
.card .table-shell > .liquidGlass-tint,
.card .table-shell > .liquidGlass-shine,
.card .table-wrap > .liquidGlass-effect,
.card .table-wrap > .liquidGlass-tint,
.card .table-wrap > .liquidGlass-shine,
.chart-box .table-wrap > .liquidGlass-effect,
.chart-box .table-wrap > .liquidGlass-tint,
.chart-box .table-wrap > .liquidGlass-shine,
.overall-board-card .overall-tab-switch::before,
.overall-board-card .overall-tab-switch::after,
.overall-board-card .overall-table-wrap::before,
.overall-board-card .overall-table-wrap::after {
  content: none !important;
  display: none !important;
}

.card .drop-zone:not(.liquidGlass-wrapper)::before,
.card .drop-zone:not(.liquidGlass-wrapper)::after,
.card .progress-timeline:not(.liquidGlass-wrapper)::before,
.card .progress-timeline:not(.liquidGlass-wrapper)::after,
.card .status-compact:not(.liquidGlass-wrapper)::before,
.card .status-compact:not(.liquidGlass-wrapper)::after,
.card .stat-cell:not(.liquidGlass-wrapper)::before,
.card .stat-cell:not(.liquidGlass-wrapper)::after,
.card .table-shell:not(.liquidGlass-wrapper)::before,
.card .table-shell:not(.liquidGlass-wrapper)::after,
.card .table-wrap:not(.liquidGlass-wrapper)::before,
.card .table-wrap:not(.liquidGlass-wrapper)::after,
.chart-box .table-wrap:not(.liquidGlass-wrapper)::before,
.chart-box .table-wrap:not(.liquidGlass-wrapper)::after {
  content: none !important;
  display: none !important;
}

.overall-board-card .overall-tab-switch {
  border: 0 !important;
  padding: 0 !important;
}

.overall-board-card .overall-table-wrap {
  border: 0 !important;
}

.overall-board-card .overall-tab-btn,
.overall-board-card .month-toggle-btn {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.overall-board-card .overall-tab-btn::after,
.overall-board-card .month-toggle-btn::after {
  content: none !important;
  display: none !important;
}

.overall-board-card .overall-tab-btn.active,
.overall-board-card .month-toggle-btn.active {
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.18) !important;
}

.card:hover,
.kpi-card:hover,
.chart-box:hover,
.drop-zone:hover,
.stat-cell:hover,
.table-shell:hover,
.liquid-glass-card:hover,
.liquid-glass-panel:hover,
.liquid-glass-chart:hover,
.liquid-glass-kpi:hover {
  transform: none !important;
}

.wrap .card .stats-grid {
  gap: 0 !important;
  border-top: 1px solid rgba(90, 130, 180, 0.12);
}

.wrap .card .stat-cell {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
}

.wrap .card .stat-cell:nth-child(odd) {
  padding-right: 18px !important;
  border-right: 1px solid rgba(90, 130, 180, 0.12) !important;
}

.wrap .card .stat-cell:nth-child(even) {
  padding-left: 18px !important;
}

.wrap .card .stat-cell:nth-child(n + 3) {
  border-top: 1px solid rgba(90, 130, 180, 0.12) !important;
}

.wrap .card .stat-cell:hover {
  border-color: rgba(90, 130, 180, 0.12) !important;
  box-shadow: none !important;
}

.wrap .card .status-compact {
  border: 0 !important;
  border-top: 1px solid rgba(90, 130, 180, 0.12) !important;
  border-radius: 0 !important;
  margin-top: 14px !important;
  padding: 12px 0 0 !important;
}

.wrap .card .progress-timeline {
  border: 0 !important;
  border-top: 1px solid rgba(90, 130, 180, 0.12) !important;
  border-radius: 0 !important;
  margin-top: 16px !important;
  padding: 16px 0 0 !important;
}

.wrap .card .task-meta span,
.wrap .card .pt-step {
  background: transparent !important;
  box-shadow: none !important;
}