/* ============================================================
   QB · 毛玻璃视觉层（Frosted Glass v2）
   ------------------------------------------------------------
   独立文件：刻意避开 cc-ui.css（另一个会话正在同时编辑它），
   在 index.html 里最后引入 → 同特异性下优先级最高。
   原则：只做视觉，不动结构 / 不改 JS / 不做位移动效（防抖动）。
   参考：macOS Creative Cloud 主面板（毛玻璃 + 渐变环境光 + 每卡独立色）
   ============================================================ */

/* ---------- §1 毛玻璃令牌（亮 / 暗双套） ---------- */
:root {
  --glass-bg:        rgba(255, 255, 255, .70);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-line:      rgba(255, 255, 255, .70);
  --glass-blur:      20px;
  --glass-sat:       180%;
  --glass-shadow:    0 8px 32px -12px rgba(31, 41, 61, .18), 0 2px 8px -4px rgba(31, 41, 61, .10);

  /* 6 色渐变色板（Adobe 应用色系，按位置/id 循环分配） */
  --hue-1: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); /* 蓝 */
  --hue-2: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); /* 紫 */
  --hue-3: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); /* 粉 */
  --hue-4: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); /* 橙 */
  --hue-5: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); /* 绿 */
  --hue-6: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%); /* 青 */
}

[data-theme="dark"] {
  --glass-bg:        rgba(24, 33, 56, .66);
  --glass-bg-strong: rgba(28, 38, 64, .80);
  --glass-line:      rgba(255, 255, 255, .10);
  --glass-shadow:    0 8px 32px -12px rgba(0, 0, 0, .55), 0 2px 8px -4px rgba(0, 0, 0, .40);
}

/* ---------- §2 毛玻璃面板：所有卡片 / 面板半透明 + 背景模糊 ---------- */
.card,
.stat,
.dash-panel,
.cc-card,
.pv-main,
.exam-toc,
.book-reader {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* 顶栏 / 侧栏也玻璃化（营造整块玻璃的观感） */
.topbar,
.sidebar {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* 弹层更实一点，避免文字发虚 */
.modal, .drawer, .sheet, .menu-pop {
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ---------- §3 每卡独立色：左侧渐变色条（6 色循环） ---------- */
.grid-2 > .card,
.cc-grid > .cc-card,
.dash-stats > .stat {
  position: relative;
  overflow: hidden;
}
.grid-2 > .card::before,
.cc-grid > .cc-card::before,
.dash-stats > .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hue-1);
  opacity: .9;
  pointer-events: none;
}
.grid-2 > .card:nth-child(6n+2)::before,
.cc-grid > .cc-card:nth-child(6n+2)::before,
.dash-stats > .stat:nth-child(6n+2)::before { background: var(--hue-2); }
.grid-2 > .card:nth-child(6n+3)::before,
.cc-grid > .cc-card:nth-child(6n+3)::before,
.dash-stats > .stat:nth-child(6n+3)::before { background: var(--hue-3); }
.grid-2 > .card:nth-child(6n+4)::before,
.cc-grid > .cc-card:nth-child(6n+4)::before,
.dash-stats > .stat:nth-child(6n+4)::before { background: var(--hue-4); }
.grid-2 > .card:nth-child(6n+5)::before,
.cc-grid > .cc-card:nth-child(6n+5)::before,
.dash-stats > .stat:nth-child(6n+5)::before { background: var(--hue-5); }
.grid-2 > .card:nth-child(6n)::before,
.cc-grid > .cc-card:nth-child(6n)::before,
.dash-stats > .stat:nth-child(6n)::before { background: var(--hue-6); }

/* ---------- §4 图标块取同色系渐变（若有 .cc-logo / .stat-ico） ---------- */
.cc-grid > .cc-card:nth-child(6n+1) .cc-logo,
.grid-2 > .card:nth-child(6n+1) .cc-logo { background: var(--hue-1) !important; }
.cc-grid > .cc-card:nth-child(6n+2) .cc-logo,
.grid-2 > .card:nth-child(6n+2) .cc-logo { background: var(--hue-2) !important; }
.cc-grid > .cc-card:nth-child(6n+3) .cc-logo,
.grid-2 > .card:nth-child(6n+3) .cc-logo { background: var(--hue-3) !important; }
.cc-grid > .cc-card:nth-child(6n+4) .cc-logo,
.grid-2 > .card:nth-child(6n+4) .cc-logo { background: var(--hue-4) !important; }
.cc-grid > .cc-card:nth-child(6n+5) .cc-logo,
.grid-2 > .card:nth-child(6n+5) .cc-logo { background: var(--hue-5) !important; }
.cc-grid > .cc-card:nth-child(6n) .cc-logo,
.grid-2 > .card:nth-child(6n) .cc-logo { background: var(--hue-6) !important; }

/* 统计卡图标：淡色底 + 同色系文字，保持轻量 */
.dash-stats > .stat:nth-child(6n+1) .stat-ico { color: #2563eb; }
.dash-stats > .stat:nth-child(6n+2) .stat-ico { color: #7c3aed; }
.dash-stats > .stat:nth-child(6n+3) .stat-ico { color: #db2777; }
.dash-stats > .stat:nth-child(6n+4) .stat-ico { color: #c77408; }
.dash-stats > .stat:nth-child(6n+5) .stat-ico { color: #0d9d6c; }
.dash-stats > .stat:nth-child(6n)   .stat-ico { color: #0284c7; }

/* ---------- §5 焦点 banner：渐变 + 漂浮几何（SVG 替代 3D） ---------- */
.cc-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg,
      rgba(59, 130, 246, .16) 0%,
      rgba(139, 92, 246, .13) 45%,
      rgba(236, 72, 153, .10) 100%) !important;
  border: 1px solid var(--glass-line) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
/* 右上大圆：柔光球 */
.cc-hero::before {
  content: "";
  position: absolute;
  right: -70px; top: -90px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99, 102, 241, .38), rgba(168, 85, 247, .20));
  filter: blur(12px);
  pointer-events: none;
}
/* 右下旋转方块：几何体 */
.cc-hero::after {
  content: "";
  position: absolute;
  right: 96px; bottom: -78px;
  width: 170px; height: 170px;
  border-radius: 42px;
  transform: rotate(28deg);
  background: linear-gradient(135deg, rgba(236, 72, 153, .30), rgba(56, 189, 248, .20));
  filter: blur(8px);
  pointer-events: none;
}
.cc-hero-title,
.cc-hero-sub,
.cc-hero-actions { position: relative; z-index: 1; }

/* ---------- §6 hover：只加深阴影 / 高亮色条，不做位移 ---------- */
.grid-2 > .card:hover,
.cc-grid > .cc-card:hover,
.dash-stats > .stat:hover {
  box-shadow: 0 14px 40px -14px rgba(31, 41, 61, .24), 0 3px 10px -4px rgba(31, 41, 61, .12) !important;
}
.grid-2 > .card:hover::before,
.cc-grid > .cc-card:hover::before,
.dash-stats > .stat:hover::before { opacity: 1; width: 5px; }

/* 焦点态：沿用品牌环，不做位移 */
.grid-2 > .card:focus-visible,
.cc-grid > .cc-card:focus-visible {
  outline: none;
  box-shadow: var(--ring) !important;
}

/* ---------- §7 暗色主题：色条略收，避免刺眼 ---------- */
[data-theme="dark"] .grid-2 > .card::before,
[data-theme="dark"] .cc-grid > .cc-card::before,
[data-theme="dark"] .dash-stats > .stat::before { opacity: .75; }

/* ---------- §8 尊重「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-hero::before,
  .cc-hero::after { filter: none; opacity: .6; }
}