/**
 * Glass Components - 玻璃态设计系统
 * 基于 UI 样式统一规范
 * 创建于: 2026-01-16
 */

/* ===== 基础玻璃态卡片 ===== */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 带左侧强调边框的玻璃卡片 */
.glass-card-accent {
  border-left: 4px solid rgba(255, 255, 255, 0.2);
}

.glass-card-accent:hover {
  border-left-color: rgba(255, 255, 255, 0.4);
}

/* ===== 玻璃态容器变体 ===== */

/* 深色玻璃容器 */
.glass-dark {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 浅色玻璃容器 */
.glass-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 模糊遮罩 */
.glass-overlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ===== 玻璃态导航栏 ===== */
.glass-navbar {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== 玻璃态模态框 ===== */
.glass-modal {
  background: rgba(23, 23, 23, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
}

/* ===== 玻璃态输入框 ===== */
.glass-input {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  transition: all 0.2s ease;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ===== 代码块样式 ===== */
.glass-code {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ===== 渐变文字效果 ===== */
.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #a3a3a3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 渐变文字变体 */
.gradient-text-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== 状态标签 - 玻璃态 ===== */
.glass-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-badge-success {
  background: var(--success-bg, rgba(34, 197, 94, 0.2));
  color: var(--success-text, hsl(142 76% 60%));
  border: 1px solid var(--success-border, rgba(34, 197, 94, 0.3));
}

.glass-badge-error {
  background: var(--error-bg, rgba(239, 68, 68, 0.2));
  color: var(--error-text, hsl(0 84% 70%));
  border: 1px solid var(--error-border, rgba(239, 68, 68, 0.3));
}

.glass-badge-warning {
  background: var(--warning-bg, rgba(245, 158, 11, 0.2));
  color: var(--warning-text, hsl(38 92% 70%));
  border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.3));
}

.glass-badge-info {
  background: var(--info-bg, rgba(255, 255, 255, 0.1));
  color: var(--info-text, hsl(0 0% 85%));
  border: 1px solid var(--info-border, rgba(255, 255, 255, 0.15));
}

/* ===== 悬停发光效果 ===== */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.hover-glow-primary:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* ===== 缩放悬停效果 ===== */
.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-scale-sm:hover {
  transform: scale(1.01);
}

.hover-lift {
  transition: transform 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* ===== 浅色主题样式 - 颜色反转 ===== */
body:not(.dark) .glass-card {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body:not(.dark) .glass-card:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.2);
}

body:not(.dark) .glass-card-accent {
  border-left: 4px solid rgba(0, 0, 0, 0.2);
}

body:not(.dark) .glass-card-accent:hover {
  border-left-color: rgba(0, 0, 0, 0.4);
}

/* 浅色玻璃容器 - 浅色主题 */
body:not(.dark) .glass-dark {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body:not(.dark) .glass-light {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* 模糊遮罩 - 浅色主题 */
body:not(.dark) .glass-overlay {
  background: rgba(255, 255, 255, 0.6);
}

/* 玻璃态导航栏 - 浅色主题 */
body:not(.dark) .glass-navbar {
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 玻璃态模态框 - 浅色主题 */
body:not(.dark) .glass-modal {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.15);
}

/* 玻璃态输入框 - 浅色主题 */
body:not(.dark) .glass-input {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: black;
}

body:not(.dark) .glass-input:focus {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.3);
}

body:not(.dark) .glass-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* 代码块 - 浅色主题 */
body:not(.dark) .glass-code {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* 渐变文字 - 浅色主题（黑到灰） */
body:not(.dark) .gradient-text {
  background: linear-gradient(135deg, #000000 0%, #5c5c5c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 悬停发光效果 - 浅色主题 */
body:not(.dark) .hover-glow:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}