/**
 * 拾光主题 · 玻璃拟态系统
 * 5 档毛玻璃，覆盖全站
 *
 * 使用原则：
 * - 同一视口内同时出现的玻璃层不超过 3 种
 * - 所有玻璃共用同一套边框、高光、阴影逻辑
 * - 圆角、阴影引用 Token，不硬编码
 */

/* ============================================================
   第 1 档 · 轻（次级卡片、标签、Chip）
   ============================================================ */

.sg-glass-1{
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--sg-r-sm);
  box-shadow: var(--sg-shadow-xs);
}

/* ============================================================
   第 2 档 · 标准（主卡片、内容区）
   ============================================================ */

.sg-glass-2{
  position: relative;
  background: var(--sg-glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--sg-glass-border);
  border-radius: var(--sg-r-md);
  box-shadow: var(--sg-shadow-sm);
}

.sg-glass-2::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sg-glass-highlight);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}

/* ============================================================
   第 3 档 · 加厚（工具条、按钮组、导航）
   ============================================================ */

.sg-glass-3{
  position: relative;
  background: var(--sg-glass-bg-strong);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--sg-glass-border-2);
  border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow-md);
}

.sg-glass-3::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sg-glass-highlight);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  pointer-events: none;
}

/* ============================================================
   第 4 档 · 浮层（下拉菜单、Popover）
   ============================================================ */

.sg-glass-4{
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow-lg);
}

/* ============================================================
   第 5 档 · 模态（弹窗、抽屉）
   ============================================================ */

.sg-glass-5{
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  backdrop-filter: blur(50px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .98);
  border-radius: var(--sg-r-xl);
  box-shadow: var(--sg-shadow-xl);
}

/* ============================================================
   功能类玻璃 · 用于特定组件
   ============================================================ */

/* 顶部吸附导航 */
.sg-glass-nav{
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--sg-line);
}

/* 移动端底部导航 */
.sg-glass-bottom-nav{
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--sg-line);
}

/* 品牌渐变卡片（Hero / 精选大卡） */
.sg-glass-brand{
  position: relative;
  background: var(--sg-brand);
  border-radius: var(--sg-r-xl);
  box-shadow: var(--sg-shadow-brand);
  overflow: hidden;
}

.sg-glass-brand::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .22), transparent 50%),
    radial-gradient(circle at 85% 90%, rgba(255, 255, 255, .1), transparent 50%);
  pointer-events: none;
}

/* 品牌渐变上的网格纹理 */
.sg-glass-brand-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 25% 30%, black, transparent 75%);
  mask-image: radial-gradient(circle at 25% 30%, black, transparent 75%);
  pointer-events: none;
}

/* ============================================================
   暗色模式 · 占位（第二阶段填充）
   ============================================================ */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sg-glass-1,
  :root:not([data-theme="light"]) .sg-glass-2,
  :root:not([data-theme="light"]) .sg-glass-3{
    /* 第二阶段：暗色玻璃重做 */
  }
}

[data-theme="dark"] .sg-glass-1,
[data-theme="dark"] .sg-glass-2,
[data-theme="dark"] .sg-glass-3{
  /* 第二阶段 */
}