/* ============================================================================
   岳总个人指挥中心（workbench）· 毛玻璃组件层
   ----------------------------------------------------------------------------
   引入位置：styles.css + v2.css + glass-tokens.css 之后（最后一份）
   所有选择器加 body 前缀提升特异性，防止引入顺序被调整后压不住原样式。

   ⛔ 只改视觉：background / border-color / border-radius / box-shadow /
      backdrop-filter / transition / color。
   ⛔ 严禁出现：width height min-* max-* display flex-* gap grid-*
      position top right bottom left inset z-index overflow
      margin padding（.card:hover 的 translateY 除外，它不参与布局）
   ============================================================================ */

/* ============================================================================
   1. 玻璃面统一入场券：只挂 backdrop-filter，背景交给令牌
   （.card / .stat-card / .hero 等用的是 var(--bg-1)，已在 tokens 层半透明化）
   ============================================================================ */
body .card,
body .stat-card,
body .hero,
body .app-card,
body .sidebar,
body .topbar,
body .tabbar,
body .login-card,
body .modal,
body .cap-box,
body .cmdk,
body .cal-pop,
body .imp-catpop,
body .toast,
body .level-up-card {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ============================================================================
   2. 主卡片 / 统计卡 / Hero
   原样式：实心白 + 1px 灰发丝 + 无阴影
   新样式：半透明玻璃 + 1px 亮边 + 冷色大扩散投影 + 左上反光
   ============================================================================ */
body .card,
body .stat-card,
body .hero {
  position: relative;
  /* isolation 建立独立绘制上下文：反光层用 z-index:-1 就能压在背景之上、
     文字之下，不需要给每个子元素加 position/z-index
     （那会把卡片里绝对定位的元素全改成 relative，是方案原文的隐患） */
  isolation: isolate;
  background-color: var(--glass-bg);
  background-image:
    radial-gradient(420px 300px at 8% -6%, var(--glass-sheen-a), transparent 68%),
    radial-gradient(340px 260px at 104% 108%, var(--glass-sheen-b), transparent 70%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  /* 三层：外投影 + 顶部内高光 + 底部内高光 = 玻璃厚度 */
  box-shadow: var(--shadow-glass),
              inset 0 1px 0 var(--edge-hi),
              inset 0 -1px 0 var(--edge-lo);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 500ms,
              background-color 500ms,
              border-color 500ms;
}

/* 左上反光：让玻璃像玻璃，而不是一块半透明色板 */
body .card::before,
body .stat-card::before,
body .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;              /* 背景之上、内容之下（靠 isolation 兜住） */
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(148deg,
    var(--glass-hi) 0%, rgba(255, 255, 255, 0.08) 26%, rgba(255, 255, 255, 0) 52%);
  opacity: 0.85;
  transition: opacity 500ms;
}
[data-theme="dark"] body .card::before,
[data-theme="dark"] body .stat-card::before,
[data-theme="dark"] body .hero::before { opacity: 0.30; }

/* hover 轻轻浮起 */
body .card:hover,
body .stat-card:hover,
body .hero:hover {
  transform: translateY(-3px);
  border-color: var(--glass-line);
  box-shadow: var(--shadow-glass-hover),
              inset 0 1px 0 var(--edge-hi);
}

/* ============================================================================
   3. 侧栏 / 顶栏 / 底部 tab
   ============================================================================ */
body .sidebar {
  background: var(--glass-bg-soft);
  border-right: 1px solid var(--glass-line);
  transition: background 500ms ease, border-color 500ms ease, transform 0.3s var(--ease-out-expo);
}
body .topbar {
  background: var(--glass-bg-soft);
  border-bottom: 1px solid var(--glass-line);
  transition: background 500ms ease, border-color 500ms ease;
}
body .tabbar {
  background: var(--glass-bg-soft);
  border-top: 1px solid var(--glass-line);
  transition: background 500ms ease, border-color 500ms ease;
}

/* 侧栏导航项 */
body .nav-item {
  border-radius: var(--r-sm);
  transition: background 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms;
}
body .nav-item:hover { background: var(--glass-hi); }
body .nav-item.active {
  background: var(--glass-solid);
  box-shadow: var(--shadow-glass-sm), inset 0 1px 0 var(--edge-hi);
}

/* ============================================================================
   4. 列表项 / 应用卡
   ============================================================================ */
body .list-item {
  border-radius: var(--r-sm);
  border-bottom-color: var(--glass-line);
  transition: background 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
body .list-item:hover { background: var(--glass-hi); }
body .list-item:last-child { border-bottom-color: transparent; }

body .app-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-glass-sm), inset 0 1px 0 var(--edge-hi);
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 400ms, background-color 400ms, border-color 400ms;
}
body .app-card:hover {
  background-color: var(--glass-solid);
  transform: translateY(-3px);
  border-color: var(--glass-line);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}

/* ============================================================================
   5. 徽章 / 标签 / 按钮 / 进度条
   ============================================================================ */
body .badge,
body .tag {
  border: 1px solid var(--glass-line);
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--edge-hi);
}
body .badge-level { color: var(--accent); }
body .tag { color: var(--text-secondary); }

body .btn-primary {
  background: linear-gradient(135deg, var(--glass-accent-a), var(--glass-accent-b));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 28px -14px rgba(59, 110, 245, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms, background 280ms;
}
body .btn-primary:hover {
  background: linear-gradient(135deg, var(--glass-accent-b), var(--glass-accent-a));
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -14px rgba(59, 110, 245, 0.72),
              inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
body .btn-primary:active { transform: scale(0.96); }

body .btn-secondary {
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  color: var(--text-secondary);
  box-shadow: var(--shadow-glass-sm), inset 0 1px 0 var(--edge-hi);
  transition: all 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .btn-secondary:hover {
  background: var(--glass-hi);
  color: var(--text-primary);
  border-color: var(--glass-line);
}

body .progress {
  background: var(--track-bg);
  box-shadow: var(--track-inset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
body .progress-fill {
  background: linear-gradient(90deg, var(--glass-accent-a), var(--glass-accent-b));
  box-shadow: 0 0 14px rgba(91, 135, 248, 0.40);
  border-radius: var(--radius-full);
}
[data-theme="dark"] body .progress-fill {
  box-shadow: 0 0 14px rgba(59, 111, 224, 0.45);
}

/* ============================================================================
   6. 登录页
   只改视觉：不动 .login-view 的 display/flex/min-height，
   也不动 .login-card 的 width / max-width（手机不溢出的保障）
   ============================================================================ */
body .login-view { background: transparent; }
body .login-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}

/* ============================================================================
   7. 浮层：弹窗 / 命令面板 / 捕捉条 / 月历 / Toast / 升级弹窗
   ⚠️ 一律不碰 position / z-index（月历 1700、类目浮层 1800、toast 999
      这套顺序是踩过坑定下来的）
   ============================================================================ */
body .modal,
body .cap-box,
body .cmdk,
body .cal-pop,
body .imp-catpop {
  border: 1px solid var(--glass-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}

body .dy-mask,
body .cmdk-mask,
body .cap-mask,
body .modal-bg {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body .toast {
  border: 1px solid var(--glass-line);
  background: var(--glass-solid);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}

body .level-up-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body .level-up-card {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass), inset 0 1px 0 var(--edge-hi);
}

/* ============================================================================
   8. 鼠标跟随高光（由 glass-theme.js 的 bindSheen() 挂 .sheen-on）
   只更新 CSS 变量，不写内联 background —— 写了会把主题渐变锁死
   ============================================================================ */
body .card.sheen-on::after,
body .stat-card.sheen-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 66%);
  z-index: 1;
}
[data-theme="dark"] body .card.sheen-on::after,
[data-theme="dark"] body .stat-card.sheen-on::after {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
    rgba(190, 215, 255, 0.10), rgba(190, 215, 255, 0) 66%);
}
body .card.sheen-on:hover::after,
body .stat-card.sheen-on:hover::after { opacity: 1; }

/* ============================================================================
   9. 滚动条
   ============================================================================ */
body .main-scroll::-webkit-scrollbar,
body .sidebar::-webkit-scrollbar { width: 6px; }
body .main-scroll::-webkit-scrollbar-thumb,
body .sidebar::-webkit-scrollbar-thumb {
  background: rgba(150, 170, 195, 0.30);
  border-radius: 4px;
}
[data-theme="dark"] body .main-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] body .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
}

/* ============================================================================
   10. 性能降级
   玻璃的开销全在 backdrop-filter，低端机大面积同时存在会掉帧。
   两级：
     · body.perf-lite（deviceMemory ≤ 4GB 自动 / 手动开）→ 全部关掉
     · ≤640px 手机 → 模糊半径降到 14px（视觉几乎无差，帧率明显回升）
   ============================================================================ */
body.perf-lite .card,
body.perf-lite .stat-card,
body.perf-lite .hero,
body.perf-lite .sidebar,
body.perf-lite .topbar,
body.perf-lite .tabbar,
body.perf-lite .app-card,
body.perf-lite .login-card,
body.perf-lite .modal,
body.perf-lite .toast {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-image: none;
  background-color: var(--bg-1);
}
body.perf-lite {
  background-image: none;
  background-color: var(--canvas-base-1);
}
body.perf-lite .aurora-layer { display: none; }

@media (max-width: 640px) {
  /* 手机端直接退实色（20261022M1）：iOS Safari 对 backdrop-filter 有采样错位
   * 的已知问题——下层卡的内容会「透」进上层卡，观感就是卡片重叠
   * （手机抽屉此前已因同一问题改实色，见 v2.css 的 .sidebar 注释）。
   * 桌面端不受影响，保留完整玻璃。 */
  body:not(.perf-lite) .card,
  body:not(.perf-lite) .stat-card,
  body:not(.perf-lite) .hero,
  body:not(.perf-lite) .app-card,
  body:not(.perf-lite) .login-card,
  body:not(.perf-lite) .modal,
  body:not(.perf-lite) .cap-box,
  body:not(.perf-lite) .cmdk,
  body:not(.perf-lite) .cal-pop,
  body:not(.perf-lite) .imp-catpop,
  body:not(.perf-lite) .toast {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-image: none;
    background-color: var(--bg-1);
  }
  /* 顶栏/底栏保留轻模糊：它们贴边、背后只有画布，没有卡片可错位 */
  body:not(.perf-lite) .topbar,
  body:not(.perf-lite) .tabbar {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
  }
}