/* ===========================================================
   glass.css — 液态玻璃核心构造（4 层叠加）
   - 外阴影
   - 半透白底
   - backdrop-filter blur(40px) saturate(180%)
   - 双层 background 渐变描边（亮边 + 暗边）
   - ::before 顶部高光
   - 可选角部反光
   =========================================================== */

.glass {
  position: relative;
  background:
    /* 渐变描边暗边（padding-box） */
    linear-gradient(180deg, var(--ink-soft), var(--ink-softer)) padding-box,
    /* 渐变描边亮边（border-box） */
    linear-gradient(135deg,
      var(--glass-tint-1) 0%,
      var(--glass-tint-3) 40%,
      var(--layer-glow, rgba(108, 92, 231, 0.2)) 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-glass-md);
  overflow: hidden;
  isolation: isolate;
}

/* 顶部高光：1px 白色 linear-gradient，opacity 0.7 */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    var(--glass-highlight) 0%,
    var(--glass-highlight-fade) 30%);
  pointer-events: none;
  z-index: 1;
}

/* 角部反光（右上 + 左下两个小径向高光），可选 .glass--shine */
.glass--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(40% 60% at 100% 0%, var(--glass-tint-2) 0%, transparent 60%),
    radial-gradient(30% 50% at 0% 100%, var(--glass-tint-3) 0%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

/* ---------- 玻璃层级变体 ---------- */

/* 主玻璃面板（layer 容器，28px 圆角） */
.glass--layer {
  border-radius: var(--r-layer);
  background:
    linear-gradient(180deg, var(--ink-soft), var(--ink-softer)) padding-box,
    linear-gradient(135deg,
      var(--glass-tint-1) 0%,
      var(--glass-tint-2) 35%,
      var(--layer-glow, rgba(108, 92, 231, 0.2)) 100%) border-box;
  box-shadow:
    var(--shadow-glass-md),
    inset 0 0 0 1px var(--glass-inner-line);
}

/* 卡片玻璃（sub_category / theme 卡片，18-20px 圆角） */
.glass--card {
  border-radius: var(--r-card-lg);
  background:
    linear-gradient(180deg, var(--ink-softer), var(--ink-softer)) padding-box,
    linear-gradient(135deg,
      var(--glass-tint-2) 0%,
      var(--glass-tint-3) 50%,
      var(--glass-tint-4) 100%) border-box;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-glass-sm);
}

/* 浮层玻璃（弹窗、Header、抽屉，0.72-0.85 白底） */
.glass--float {
  background:
    linear-gradient(180deg, var(--ink-soft), var(--ink-softer)) padding-box,
    linear-gradient(135deg,
      var(--glass-tint-1) 0%,
      var(--glass-tint-2) 50%,
      var(--glass-tint-3) 100%) border-box;
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  box-shadow: var(--shadow-glass-lg);
}

/* ---------- 玻璃球（主题色球） ---------- */
.glass-orb {
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%,
      var(--orb-tint) 0%,
      var(--orb-tint-soft) 25%,
      var(--orb-color, var(--accent)) 70%,
      color-mix(in srgb, var(--orb-color, var(--accent)) 70%, #000 30%) 100%);
  box-shadow:
    inset -3px -4px 8px rgba(0, 0, 0, 0.18),
    inset 3px 4px 8px var(--glass-inner-line),
    0 6px 20px -4px color-mix(in srgb, var(--orb-color, var(--accent)) 60%, transparent 40%);
  overflow: hidden;
  isolation: isolate;
}
.glass-orb::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 38%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--orb-tint) 0%, transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* ---------- 退化：不支持 backdrop-filter 的浏览器 ---------- */
@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass--layer,
  .glass--card,
  .glass--float {
    background: var(--bg-elev-4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- 玻璃内容层（确保内容位于 ::before 高光之上） ---------- */
.glass > * {
  position: relative;
  z-index: 2;
}
.glass--layer > *,
.glass--card > *,
.glass--float > * {
  position: relative;
  z-index: 2;
}