/* 共用视觉层 · 毛玻璃与多彩光晕（用户 11-08 06:4x：开放平台这套设计很好，算力商后台、平台总后台都照这套做；
   方向是颜色更多更绚丽、毛玻璃和半透明效果更多）。
   只在 html.theme-glass 下生效：开放平台、平台总后台、算力商后台加这个类；公司后台和用户端不加，不受影响。
   颜色、圆角只用 tokens.css 的 --r12-* 变量。主色调 = 品牌色 --r12-pink（跟着品牌变），辅色是品牌色的浅暖色调和深色调，其余用中性灰；
   不用紫色（用户 11-08 07:3x：颜色太多、没有主色调，深色有点乱；尽量不要使用紫色）。
   变量挂在 body 上：tokens.css 的 --r12-* 定义在 [data-ui="v2"]（body）上，挂在 html 上会取不到。 */

html.theme-glass body {
  --glass-brand: var(--r12-pink);
  --glass-brand-soft: color-mix(in srgb, var(--r12-pink) 62%, #ffc9b9);
  --glass-brand-deep: color-mix(in srgb, var(--r12-pink) 76%, #000000);
  --glass-slate: #94a3b8;
  --glass-slate-soft: #cbd5e1;
  --glass-accent: var(--glass-brand-soft);
  /* 旧的装饰色名字保留，全部收进主色调（不再有紫、青、琥珀、绿），页面里用到的地方自动跟着变 */
  --glass-violet: var(--glass-brand-soft);
  --glass-indigo: var(--glass-slate);
  --glass-cyan: var(--glass-slate);
  --glass-sky: var(--glass-slate-soft);
  --glass-amber: var(--glass-brand-soft);
  --glass-emerald: var(--glass-slate-soft);
  --glass-blur: 22px;
  --glass-fill: color-mix(in srgb, var(--r12-surface) 46%, transparent);
  --glass-fill-soft: color-mix(in srgb, var(--r12-surface-2) 42%, transparent);
  --glass-fill-strong: color-mix(in srgb, var(--r12-surface) 80%, transparent);
  --glass-edge: rgba(255, 255, 255, .09);
  --glass-edge-strong: rgba(255, 255, 255, .16);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 42%);
  --glass-shadow: 0 18px 44px -24px rgba(0, 0, 0, .75);
  --glass-grad: linear-gradient(135deg, var(--glass-brand), var(--glass-brand-soft));
  /* 图表、图例、标签可以直接用这 6 个系列色 */
  --glass-series-1: var(--glass-brand);
  --glass-series-2: var(--glass-slate);
  --glass-series-3: var(--glass-brand-soft);
  --glass-series-4: #64748b;
  --glass-series-5: var(--glass-brand-deep);
  --glass-series-6: var(--glass-slate-soft);
  background: var(--r12-bg);
}
html.theme-glass[data-mode="light"] body {
  --glass-fill: rgba(255, 255, 255, .55);
  --glass-fill-soft: rgba(255, 255, 255, .38);
  --glass-fill-strong: rgba(255, 255, 255, .82);
  --glass-edge: rgba(255, 255, 255, .72);
  --glass-edge-strong: rgba(255, 255, 255, .92);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .85);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  --glass-shadow: 0 18px 44px -26px rgba(60, 30, 40, .26);
  --glass-series-2: #64748b;
  --glass-series-4: #475569;
  --glass-series-6: #94a3b8;
}

/* 状态色「待处理 / 审核中」在 tokens 里是紫色，玻璃主题下改成琥珀（不用紫色）；选择器要比 tokens 的 :root[data-theme][data-mode] 更具体才压得住 */
html.theme-glass[data-theme][data-mode] body {
  --r12-review: #f2b35b;
  --r12-review-soft: rgba(242, 179, 91, .14);
}
html.theme-glass[data-theme][data-mode="light"] body {
  --r12-review: #a86200;
  --r12-review-soft: rgba(168, 98, 0, .12);
}

/* 背景：品牌色几团深浅不同的光晕缓慢漂移，再叠一层很淡的网格；内容在上面滚动 */
html.theme-glass body::before {
  content: "";
  position: fixed;
  inset: -8vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(36vmax 28vmax at 18% 14%, color-mix(in srgb, var(--glass-brand) 30%, transparent), transparent 70%),
    radial-gradient(32vmax 26vmax at 84% 18%, color-mix(in srgb, var(--glass-brand-soft) 18%, transparent), transparent 70%),
    radial-gradient(30vmax 24vmax at 70% 88%, color-mix(in srgb, var(--glass-brand) 12%, transparent), transparent 70%);
  animation: glass-drift 46s ease-in-out infinite alternate;
}
html.theme-glass[data-mode="light"] body::before { opacity: .8; }
html.theme-glass body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 28%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 28%, #000 25%, transparent 78%);
}
html.theme-glass[data-mode="light"] body::after {
  background-image:
    linear-gradient(rgba(80, 60, 160, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 60, 160, .05) 1px, transparent 1px);
}
@keyframes glass-drift {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 2%, 0) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.theme-glass body::before { animation: none; }
}

/* 外壳透明，光晕从后面透出来 */
html.theme-glass .shell,
html.theme-glass .main,
html.theme-glass .page-wrap { position: relative; z-index: 1; background: transparent; }

/* 玻璃面：侧栏、顶栏、卡片 */
html.theme-glass [data-shell-nav],
html.theme-glass .topbar {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
html.theme-glass .card,
html.theme-glass .stat {
  background: var(--glass-sheen), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
/* 卡片里套卡片：只半透明，不再叠一层模糊（省性能，也不发灰） */
html.theme-glass .card .card,
html.theme-glass .card .stat {
  background: var(--glass-fill-soft);
  box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 弹窗、抽屉：更实一点的玻璃；遮罩带轻微模糊 */
html.theme-glass .dialog,
html.theme-glass .drawer-panel {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-edge-strong);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
}
html.theme-glass .dialog-scrim,
html.theme-glass .drawer-scrim {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 导航当前项：品牌色的柔和渐变，左边一道亮条 */
html.theme-glass [data-shell-nav] .nav-item.is-on,
html.theme-glass [data-shell-nav] .nav-item[aria-current="page"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--glass-brand) 24%, transparent), color-mix(in srgb, var(--glass-brand) 6%, transparent));
  box-shadow: inset 2px 0 0 var(--r12-pink);
}

/* 主按钮：渐变加一点光 */
html.theme-glass .btn.is-primary {
  background: linear-gradient(135deg, var(--glass-brand-deep), var(--glass-brand));
  border-color: transparent;
  color: var(--r12-on-brand, #fff);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--r12-pink) 75%, transparent);
}
html.theme-glass .btn.is-primary:hover { filter: brightness(1.08); }

/* 数据卡：统一用品牌色在左上角一团淡淡的柔光（不再一张一个颜色） */
html.theme-glass .kpi.card,
html.theme-glass .stat { position: relative; overflow: hidden; }
html.theme-glass .kpi.card > *,
html.theme-glass .stat > * { position: relative; }
html.theme-glass .kpi.card::after,
html.theme-glass .stat::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -18%;
  width: 72%;
  height: 150%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glass-tint, var(--r12-pink)) 16%, transparent), transparent);
}
html.theme-glass[data-mode="light"] .kpi.card::after,
html.theme-glass[data-mode="light"] .stat::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--r12-pink) 22%, transparent), transparent);
}

/* 快捷入口：图标用渐变底 */
html.theme-glass .quick .quick-icon { background: var(--glass-grad); color: #fff; }

/* 分段控件、输入框：半透明 */
html.theme-glass .seg-control,
html.theme-glass .input { background: var(--glass-fill-soft); }

/* 不支持毛玻璃的浏览器退回实色，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.theme-glass .card,
  html.theme-glass [data-shell-nav],
  html.theme-glass .topbar,
  html.theme-glass .dialog,
  html.theme-glass .drawer-panel { background: var(--r12-surface); }
}