/* ============================================================
   清清童创 v3.0 毛玻璃组件系统
   版本：v3.0 (2026-07-06)

   组件清单：
   ─ .glass-panel  → 半透明面板（模态/浮层）
   ─ .glass-card   → 毛玻璃卡片（悬浮预览用）
   ─ .glass-tabbar → 毛玻璃底部导航（安全区适配）
   ─ .glass-input  → 毛玻璃输入框（聚焦发光）
   ─ .glass-btn    → 毛玻璃按钮

   降级策略：@supports (backdrop-filter) { ... }
   不支持 backdrop-filter 的设备降级为 solid bg + shadow
   ============================================================ */

/* ==================== 1. 基础降级 ==================== */

/* 不支持 backdrop-filter 的设备用 solid 背景 */
.glass-panel,
.glass-card,
.glass-tabbar,
.glass-input,
.glass-btn {
  background: var(--glass-bg-strong);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

@supports (backdrop-filter: blur(8px)) {
  .glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
  
  .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  }
  
  .glass-tabbar {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  }
  
  .glass-input {
    background: var(--glass-bg-light);
    backdrop-filter: blur(8px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturate));
  }
  
  .glass-btn {
    background: var(--glass-bg);
    backdrop-filter: blur(6px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturate));
  }
}

/* ==================== 2. 面板 .glass-panel ==================== */
.glass-panel {
  border: var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  transition:
    background var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    transform var(--duration-fast) var(--ease-spring);
}

/* 面板变体 */
.glass-panel--thick {
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-blur: 20px;
  border: var(--glass-border-strong);
}

.glass-panel--thin {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-blur: 10px;
  border: var(--glass-border-subtle);
}

/* 彩色面板 */
.glass-panel--purple { box-shadow: 0 8px 32px rgba(180, 167, 246, 0.12), var(--surface-glow-purple); }
.glass-panel--orange { box-shadow: 0 8px 32px rgba(255, 169, 77, 0.12),  var(--surface-glow-orange); }
.glass-panel--pink   { box-shadow: 0 8px 32px rgba(255, 143, 163, 0.12), var(--surface-glow-pink); }

/* ==================== 3. 卡片 .glass-card ==================== */
.glass-card {
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
}

.glass-card:active {
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ==================== 4. 底部导航 .glass-tabbar ==================== */
.glass-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-v3-sticky, 50);
  border: none;
  border-top: var(--glass-border-subtle);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04);
}

/* TabBar 内部透明项 */
.glass-tabbar .tab-item {
  background: transparent;
  transition: transform var(--duration-fast) var(--ease-spring);
}

.glass-tabbar .tab-item:active {
  transform: scale(0.9);
}

/* ==================== 5. 输入框 .glass-input ==================== */
.glass-input {
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-size: var(--font-body);
  color: var(--text-primary);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast) var(--ease-smooth);
}

.glass-input::placeholder {
  color: var(--text-hint);
  opacity: 0.7;
}

.glass-input:focus {
  border-color: rgba(180, 167, 246, 0.6);
  box-shadow:
    0 0 0 3px rgba(180, 167, 246, 0.12),
    var(--surface-glow-purple);
  background: var(--glass-bg);
}

.glass-input:focus-visible {
  outline: none;
}

/* ==================== 6. 按钮 .glass-btn ==================== */
.glass-btn {
  border: var(--glass-border);
  border-radius: var(--radius-md);
  padding: 8px 20px;
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
  transition:
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-smooth),
    background var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.glass-btn:hover {
  border-color: var(--glass-border-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.glass-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ==================== 7. 暗色模式 ==================== */
body.dark-mode .glass-panel,
body.dark-mode .glass-card,
body.dark-mode .glass-input,
body.dark-mode .glass-btn {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

@supports (backdrop-filter: blur(8px)) {
  body.dark-mode .glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
  
  body.dark-mode .glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-saturate));
  }
  
  body.dark-mode .glass-tabbar {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate));
  }
  
  body.dark-mode .glass-input {
    background: var(--glass-bg-light);
    backdrop-filter: blur(8px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(8px) saturate(var(--glass-saturate));
  }
  
  body.dark-mode .glass-btn {
    background: var(--glass-bg);
    backdrop-filter: blur(6px) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(6px) saturate(var(--glass-saturate));
  }
}

body.dark-mode .glass-panel {
  border-color: var(--glass-border);
}

body.dark-mode .glass-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .glass-input:focus {
  border-color: rgba(102, 126, 234, 0.5);
  box-shadow:
    0 0 0 3px rgba(102, 126, 234, 0.1),
    var(--surface-glow-purple);
}

body.dark-mode .glass-card:active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==================== 8. 使用场景示例（可选） ==================== */
/* 
  <!-- 模态面板 -->
  <div class="glass-panel glass-panel--thick">...</div>
  
  <!-- 悬浮预览卡片 -->
  <div class="glass-card">...</div>
  
  <!-- 毛玻璃 TabBar -->
  <nav class="glass-tabbar">
    <div class="tab-item active">🏠</div>
    ...
  </nav>
  
  <!-- 毛玻璃输入框 -->
  <input class="glass-input" placeholder="输入你想画的..." />
  
  <!-- 毛玻璃按钮 -->
  <button class="glass-btn">了解更多</button>
*/