/*
 * 云丹漫剧 · 液态玻璃材质层（Liquid Glass）
 * 2026-08-14 [Claude] 用户要求：1:1 模仿苹果 macOS Tahoe 的 Liquid Glass 质感，
 *   且**必须在 Windows 浏览器里也是这个样子**。画布（/nc/）已经是液态玻璃，本文件不碰它。
 *
 * 设计要点（对着苹果的材质拆的，不是随便加个模糊）：
 *   ① 玻璃不是"半透明灰块"，而是**四层叠加**：
 *      背景折射(backdrop-filter blur+saturate) → 玻璃本体渐变 → 顶部高光描边 → 外部投影
 *   ② 顶部要有一条**亮边**（光从上方打下来，玻璃上缘会亮）——inset 0 1px 0 rgba(255,255,255,..)
 *   ③ 边框不是纯色，是**上亮下暗**的渐变描边，这样才有厚度感（用 border + mask 实现太重，
 *      这里用 border-color + inset shadow 的组合近似，性能好得多）
 *   ④ saturate(1.6~1.8) 很关键：苹果的玻璃会让背后的颜色更"鲜活"，只 blur 会发灰发死
 *   ⑤ hover 时玻璃"变厚"（模糊加深 + 高光变亮），而不是简单变个背景色
 *
 * Windows 兼容（重点，用户明确要求）：
 *   · Chrome/Edge/Firefox 127+ 都支持 backdrop-filter；写 -webkit- 前缀覆盖旧 Edge/Safari。
 *   · **不支持 backdrop-filter 时**（老浏览器/关了硬件加速）走 @supports not 降级：
 *     换成不透明度更高的实色玻璃，保证文字对比度，绝不出现"糊成一片看不清"。
 *   · 不用 Safari 专属特性（如 -apple-system 材质、backdrop-filter: url() 滤镜）。
 *   · Windows 上 Chrome 对大面积 backdrop-filter 有性能成本 → 只用在**卡片/面板**，
 *     不铺整页、不给滚动列表里的每一项都加（那会掉帧）。
 */

:root {
  /* ── 玻璃本体：深色主题 ── */
  --glass-tint: linear-gradient(158deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .015) 100%);
  --glass-tint-hi: linear-gradient(158deg, rgba(255, 255, 255, .125) 0%, rgba(255, 255, 255, .05) 42%, rgba(255, 255, 255, .022) 100%);
  --glass-base: rgba(18, 21, 28, .52);      /* 玻璃底色：偏冷的深灰，别用纯黑（纯黑会"闷"） */
  --glass-base-solid: rgba(20, 23, 30, .94); /* 降级用：不透明度拉高保对比度 */
  --glass-border: rgba(255, 255, 255, .14);
  --glass-border-hi: rgba(255, 255, 255, .26);
  --glass-sheen: rgba(255, 255, 255, .16);   /* 顶部高光线 */
  --glass-sheen-hi: rgba(255, 255, 255, .3);
  --glass-shadow: 0 18px 44px -18px rgba(0, 0, 0, .72), 0 4px 14px -8px rgba(0, 0, 0, .55);
  --glass-shadow-hi: 0 26px 62px -20px rgba(0, 0, 0, .8), 0 6px 18px -8px rgba(0, 0, 0, .6);
  --glass-blur: 22px;
  --glass-blur-hi: 30px;
  --glass-sat: 1.7;
  --glass-radius: 18px;
}

html[data-theme="light"] {
  /* ── 浅色主题：玻璃要"白而通透"，不是灰。高光反过来更细、投影更淡 ── */
  --glass-tint: linear-gradient(158deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .52) 46%, rgba(255, 255, 255, .4) 100%);
  --glass-tint-hi: linear-gradient(158deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .64) 46%, rgba(255, 255, 255, .5) 100%);
  --glass-base: rgba(255, 255, 255, .46);
  --glass-base-solid: rgba(252, 253, 255, .96);
  --glass-border: rgba(23, 31, 43, .1);
  --glass-border-hi: rgba(23, 31, 43, .18);
  --glass-sheen: rgba(255, 255, 255, .9);
  --glass-sheen-hi: rgba(255, 255, 255, 1);
  --glass-shadow: 0 16px 40px -20px rgba(31, 42, 57, .28), 0 3px 10px -6px rgba(31, 42, 57, .18);
  --glass-shadow-hi: 0 24px 56px -22px rgba(31, 42, 57, .34), 0 5px 14px -7px rgba(31, 42, 57, .22);
}

/* ═══ 基础材质：任何想变成液态玻璃的元素加 .zm-glass ═══ */
.zm-glass {
  position: relative;
  background-color: var(--glass-base);
  background-image: var(--glass-tint);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  /* 顶部高光 + 底部内阴影：玻璃的"厚度"就是这两条撑出来的 */
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  transition: background-color .28s cubic-bezier(.32, .72, 0, 1),
              box-shadow .28s cubic-bezier(.32, .72, 0, 1),
              border-color .28s cubic-bezier(.32, .72, 0, 1),
              transform .28s cubic-bezier(.32, .72, 0, 1),
              backdrop-filter .28s ease;
}

/* 交互态：玻璃"变厚变亮"（苹果的做法是材质变化，不是换个背景色） */
.zm-glass-hover:hover,
.zm-glass:hover.zm-glass-hover {
  background-image: var(--glass-tint-hi);
  border-color: var(--glass-border-hi);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi);
  backdrop-filter: blur(var(--glass-blur-hi)) saturate(calc(var(--glass-sat) + .12));
  -webkit-backdrop-filter: blur(var(--glass-blur-hi)) saturate(calc(var(--glass-sat) + .12));
  transform: translateY(-2px);
}

/* 顶部那道"液态"高光弧：苹果玻璃上缘的一条渐隐亮线，靠伪元素画 */
.zm-glass-sheen::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--glass-sheen-hi), transparent);
  opacity: .9;
  pointer-events: none;
}

/* 更薄的玻璃（用于工具条、药丸按钮这类小控件，模糊过重会显脏） */
.zm-glass-thin {
  --glass-blur: 14px;
  --glass-blur-hi: 18px;
  border-radius: 999px;
}

/* 更厚的玻璃（用于弹窗、抽屉这类需要与背景强分离的层） */
.zm-glass-thick {
  --glass-blur: 34px;
  --glass-blur-hi: 40px;
  --glass-radius: 22px;
}

/* ═══ Windows / 老浏览器兼容降级 ═══
   不支持 backdrop-filter 时，玻璃会退化成"半透明灰块"，文字可能看不清。
   这里换成高不透明度实色 + 保留高光和投影，观感接近、可读性不打折。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .zm-glass {
    background-color: var(--glass-base-solid);
    background-image: var(--glass-tint);
  }
  .zm-glass-hover:hover,
  .zm-glass:hover.zm-glass-hover {
    background-color: var(--glass-base-solid);
  }
}

/* 用户开了「减少透明度」（Windows 高对比度模式 / macOS 辅助功能）→ 尊重设置，关掉模糊 */
@media (prefers-reduced-transparency: reduce) {
  .zm-glass {
    background-color: var(--glass-base-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* 用户要求减少动效 → 去掉位移和过渡，但材质保留 */
@media (prefers-reduced-motion: reduce) {
  .zm-glass { transition: none; }
  .zm-glass-hover:hover,
  .zm-glass:hover.zm-glass-hover { transform: none; }
}

/* ═══ 套用到首页现有组件（不改布局代码，只换材质）═══ */

/* 功能入口卡片 */
.zm-feat {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    var(--glass-shadow) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  transition: background-color .28s cubic-bezier(.32, .72, 0, 1),
              box-shadow .28s cubic-bezier(.32, .72, 0, 1),
              border-color .28s cubic-bezier(.32, .72, 0, 1),
              transform .28s cubic-bezier(.32, .72, 0, 1) !important;
}
.zm-feat:hover:not(:disabled) {
  background-image: var(--glass-tint-hi) !important;
  border-color: var(--glass-border-hi) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  transform: translateY(-2px) !important;
}

/* 创作输入区（首页主入口，玻璃要更厚更"实"） */
.zm-agent {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow) !important;
  backdrop-filter: blur(28px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(var(--glass-sat)) !important;
}

/* 作品卡片：图片本身要清楚，所以玻璃只作用在信息条上，不糊住画面 */
.zm-card {
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1), box-shadow .28s cubic-bezier(.32, .72, 0, 1) !important;
}
.zm-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--glass-shadow-hi) !important;
}

/* ═══════════════════════════════════════════════════════════════
   铺开到各功能模块（2026-08-14 [Claude]）
   原则：**只给"浮在内容之上的面板/卡片"上玻璃**——
   · 弹窗面板、套餐卡、项目卡、资产卡、成员卡 → 玻璃
   · 整页背景、长列表的每一行 → 不上（Windows 上大面积 backdrop-filter 会掉帧）
   画布(/nc/)自带液态玻璃，本文件不加载到那里，不受影响。
   ═══════════════════════════════════════════════════════════════ */

/* 公共：弹窗遮罩统一成"背景轻微模糊"，让前景玻璃更有层次（苹果的做法） */
.zm-st-mask, .zm-pj-mask, .zm-al-mask, .zm-tm-mask, .zm-dlg-mask {
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* ── 个人设置弹窗 ── */
.zm-st-modal {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  backdrop-filter: blur(34px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(34px) saturate(var(--glass-sat)) !important;
}

/* ── 充值中心：套餐卡 / 支付卡 / 自定义充值行 ── */
.zm-rc-card, .zm-rc-paycard, .zm-rc-custom-row {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    var(--glass-shadow) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  transition: background-color .28s cubic-bezier(.32,.72,0,1),
              box-shadow .28s cubic-bezier(.32,.72,0,1),
              border-color .28s cubic-bezier(.32,.72,0,1),
              transform .28s cubic-bezier(.32,.72,0,1) !important;
}
.zm-rc-card:hover, .zm-rc-paycard:hover {
  background-image: var(--glass-tint-hi) !important;
  border-color: var(--glass-border-hi) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  transform: translateY(-2px) !important;
}

/* ── 项目库 / 资产库 / 团队：卡片 ── */
.zm-pj-card, .zm-pj-style-card, .zm-al-card-proj, .zm-tm-card {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .16),
    var(--glass-shadow) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  transition: background-color .28s cubic-bezier(.32,.72,0,1),
              box-shadow .28s cubic-bezier(.32,.72,0,1),
              border-color .28s cubic-bezier(.32,.72,0,1),
              transform .28s cubic-bezier(.32,.72,0,1) !important;
}
.zm-pj-card:hover, .zm-pj-style-card:hover, .zm-al-card-proj:hover, .zm-tm-card:hover {
  background-image: var(--glass-tint-hi) !important;
  border-color: var(--glass-border-hi) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen-hi),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  transform: translateY(-2px) !important;
}

/* ── 自绘弹窗（zm-dialog.js：确认/提示/输入）。主体是 .zm-dlg，遮罩 .zm-dlg-mask ── */
.zm-dlg {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: 20px !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  backdrop-filter: blur(32px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(32px) saturate(var(--glass-sat)) !important;
}

/* ── 促销弹窗（zm-promo.js 的主体是 .zm-pm-card）── */
.zm-pm-card {
  background-color: var(--glass-base) !important;
  background-image: var(--glass-tint) !important;
  border-color: var(--glass-border) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    var(--glass-shadow-hi) !important;
  backdrop-filter: blur(32px) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(32px) saturate(var(--glass-sat)) !important;
}