/**
 * 模板9 - iOS Aurora Glass（iOS 14-26 炫彩极光）
 * 特点：系统紫/蓝/橙多彩极光背景、玻璃卡片、饱和但克制
 * 兼容：只覆写变量与现有类名
 */
 
:root {
  --primary-color: #5e5ce6; /* iOS systemIndigo */
  --primary-hover: #4d4bdd;
  --primary-light: rgba(94, 92, 230, 0.16);
  --primary-dark: #3a39c6;
 
  --accent-color: #ff9f0a; /* iOS systemOrange */
  --accent-hover: #ff8a00;
  --success-color: #30d158;
  --warning-color: #ffd60a;
  --danger-color: #ff453a;
  --info-color: #0a84ff;
 
  --gradient-primary: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 45%, #bf5af2 75%, #ff9f0a 120%);
  --gradient-dark: linear-gradient(180deg, #06070b 0%, #070818 45%, #05060a 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.06) 100%);
 
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.56);
 
  --bg-body: #05060a;
  --bg-white: rgba(255, 255, 255, 0.06);
  --bg-light: rgba(255, 255, 255, 0.08);
  --bg-dark: rgba(0, 0, 0, 0.36);
  --bg-card: rgba(255, 255, 255, 0.09);
 
  --border-color: rgba(255, 255, 255, 0.14);
  --border-light: rgba(255, 255, 255, 0.20);
 
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;
 
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.50);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 22px 70px rgba(94, 92, 230, 0.20);
  --shadow-neon: 0 26px 90px rgba(255, 159, 10, 0.14);
}
 
html {
  color-scheme: dark;
}
 
body {
  background: var(--gradient-dark);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
 
/* 极光层（轻量、可降级） */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(10, 132, 255, 0.30), transparent 70%),
    radial-gradient(closest-side at 78% 22%, rgba(191, 90, 242, 0.24), transparent 72%),
    radial-gradient(closest-side at 70% 80%, rgba(255, 159, 10, 0.18), transparent 72%),
    radial-gradient(closest-side at 30% 78%, rgba(94, 92, 230, 0.22), transparent 74%);
  filter: blur(18px) saturate(1.2);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  animation: auroraShift 18s ease-in-out infinite;
}
 
@keyframes auroraShift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-2.5%, 1.5%, 0) scale(1.03); }
  66% { transform: translate3d(2.0%, -1.5%, 0) scale(1.02); }
}
 
/* ========== 头部：彩色磨砂 ========== */
.header {
  background: rgba(10, 10, 18, 0.68);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: saturate(1.35) blur(22px);
  -webkit-backdrop-filter: saturate(1.35) blur(22px);
}
 
.logo-icon {
  background: var(--gradient-primary);
  box-shadow: 0 14px 44px rgba(94, 92, 230, 0.22);
  border-radius: 14px;
}
 
.nav-menu a:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(94, 92, 230, 0.14);
}
 
/* ========== Hero（兼容 .hero / .hero-section） ========== */
.hero,
.hero-section {
  background: transparent !important;
}
 
.hero::before {
  opacity: 0.60;
}
 
.hero-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
 
.hero-title .gradient-text,
.hero-title span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
 
/* ========== 卡片体系：极光玻璃 ========== */
.feature-card,
.package-item,
.download-card,
.compliance-card,
.user-panel,
.modal,
.toast,
.chat-box,
.hero-preview-card,
.floating-card {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: saturate(1.35) blur(20px);
  -webkit-backdrop-filter: saturate(1.35) blur(20px);
  box-shadow: var(--shadow-sm);
}
 
.feature-card:hover,
.package-item:hover,
.download-card:hover,
.compliance-card:hover {
  border-color: rgba(255, 159, 10, 0.30) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow), var(--shadow-neon);
}
 
.package-item.featured {
  border-color: rgba(255, 159, 10, 0.42) !important;
  box-shadow: var(--shadow-md), var(--shadow-neon);
}
 
/* ========== 按钮：彩色填充 ========== */
.btn {
  border-radius: 16px !important;
}
 
.btn-primary,
.package-buy-btn,
.preview-btn {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-glow);
}
 
.btn-primary:hover,
.package-buy-btn:hover,
.preview-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}
 
.btn-secondary {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}
 
.btn-outline {
  border-color: rgba(255, 159, 10, 0.90) !important;
  color: rgba(255, 159, 10, 0.95) !important;
}
 
.btn-outline:hover {
  background: rgba(255, 159, 10, 0.12) !important;
  box-shadow: 0 22px 70px rgba(255, 159, 10, 0.14);
}
 
/* ========== 输入框 ========== */
.form-input,
.chat-input-area input,
.preview-input {
  background: rgba(0, 0, 0, 0.26) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
 
.form-input:focus,
.chat-input-area input:focus {
  border-color: rgba(255, 159, 10, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.16) !important;
}
 
/* ========== 动效偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
  }
}
 
/* 触摸设备：减少悬停位移 */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .package-buy-btn:hover,
  .preview-btn:hover,
  .feature-card:hover,
  .package-item:hover,
  .download-card:hover,
  .compliance-card:hover {
    transform: none;
  }
}