/**
 * 模板12 - iOS 26 Liquid Aurora
 * 特点：液态玻璃 + 极光氛围 + 柔和动态
 */

:root {
  --primary-color: #5e5ce6;
  --primary-hover: #4d4bdd;
  --primary-light: rgba(94, 92, 230, 0.16);
  --primary-dark: #3a39c6;
  --accent-color: #ff9f0a;
  --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 115%);
  --gradient-dark: linear-gradient(180deg, #05060a 0%, #070818 45%, #040509 100%);
  --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 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-card: rgba(255, 255, 255, 0.09);
  --border-color: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.42);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 68px rgba(191, 90, 242, 0.2);
}

html { color-scheme: dark; }

body {
  background: var(--gradient-dark);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(closest-side at 18% 28%, rgba(10, 132, 255, 0.3), 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.15);
  opacity: 0.84;
  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.2%, 1.4%, 0) scale(1.03); }
  66% { transform: translate3d(2.1%, -1.6%, 0) scale(1.02); }
}

.header {
  background: rgba(10, 10, 18, 0.68);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(1.35) blur(22px);
  -webkit-backdrop-filter: saturate(1.35) blur(22px);
}

.logo-icon {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
}

.hero,
.hero-section {
  background: transparent !important;
}

.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.3) !important;
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn,
.package-buy-btn,
.preview-btn {
  border-radius: 16px !important;
}

.btn-primary,
.package-buy-btn,
.preview-btn {
  background: var(--gradient-primary) !important;
  box-shadow: var(--shadow-glow);
}

.form-input,
.chat-input-area input,
.preview-input {
  background: rgba(0, 0, 0, 0.27) !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.56) !important;
  box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.16) !important;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
  }
}