/**
 * @作者 阿瑞
 * @功能 全局样式定义，提供现代毛玻璃UI效果所需的基础样式
 * @版本 2.3.0
 */

 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 /* 全局变量定义 */
 :root {
   /* 明亮现代主题配色 */
   --bg-primary: #f6f9fc;
   --bg-secondary: #eef4ff;
   --bg-dark: #0a1128;
   --text-primary: #0a1128;
   --text-secondary: rgba(10, 17, 40, 0.85);
   --text-tertiary: rgba(10, 17, 40, 0.65);
   --text-light: #ffffff;
   
   /* 鲜艳现代强调色 */
   --accent-blue: #2d7ff9;
   --accent-purple: #8e6bff;
   --accent-teal: #06d7b2;
   --accent-pink: #ff66c2;
   --accent-orange: #ff9640;
   
   /* 优化的毛玻璃效果参数 */
   --glass-bg-light: rgba(255, 255, 255, 0.25);
   --glass-bg-dark: rgba(16, 22, 58, 0.25);
   --glass-border-light: rgba(255, 255, 255, 0.25);
   --glass-border-dark: rgba(255, 255, 255, 0.08);
   --glass-highlight: rgba(255, 255, 255, 0.3);
   --glass-shadow-light: rgba(31, 38, 135, 0.15);
   --glass-shadow-dark: rgba(0, 0, 10, 0.2);
   
   /* 字体 */
   --font-primary: 'Geist', 'Inter', system-ui, sans-serif;
   --font-mono: 'Geist Mono', ui-monospace, monospace;
   }
 
 /* 基础样式 */
 body {
   font-family: var(--font-primary);
   transition: background-color 0.5s ease, color 0.3s ease;
   min-height: 100vh;
 }
 
 /* 明亮主题 */
 body.light-theme {
   color: var(--text-primary);
   background-color: var(--bg-primary);
   background-image: 
     radial-gradient(circle at 80% 10%, rgba(142, 107, 255, 0.12) 0%, transparent 50%),
     radial-gradient(circle at 20% 30%, rgba(6, 215, 178, 0.12) 0%, transparent 50%),
     radial-gradient(circle at 90% 80%, rgba(45, 127, 249, 0.12) 0%, transparent 50%),
     radial-gradient(circle at 10% 90%, rgba(255, 102, 194, 0.12) 0%, transparent 50%);
 }
 
 /* 深色主题 */
 body.dark-theme {
   color: var(--text-light);
   background-color: var(--bg-dark);
   background-image: 
     radial-gradient(circle at 80% 10%, rgba(142, 107, 255, 0.18) 0%, transparent 45%),
     radial-gradient(circle at 20% 30%, rgba(6, 215, 178, 0.15) 0%, transparent 45%),
     radial-gradient(circle at 90% 80%, rgba(45, 127, 249, 0.18) 0%, transparent 45%),
     radial-gradient(circle at 10% 90%, rgba(255, 102, 194, 0.15) 0%, transparent 45%);
 }
 
 /* ThemeProvider 组件包装的初始主题类 */
 .dark-theme {
   color: var(--text-light);
   background-color: var(--bg-dark);
   --text-primary: #ffffff;
   --text-secondary: rgba(255, 255, 255, 0.85);
   --text-tertiary: rgba(255, 255, 255, 0.65);
 }
 
 .light-theme {
   color: var(--text-primary);
   background-color: var(--bg-primary);
   --text-primary: #0a1128;
   --text-secondary: rgba(10, 17, 40, 0.85);
   --text-tertiary: rgba(10, 17, 40, 0.65);
 }
 
 /* 动画效果定义 */
 @keyframes float {
   0% {
     transform: translate(0, 0) rotate(0);
   }
   50% {
     transform: translate(8px, -8px) rotate(2deg);
   }
   100% {
     transform: translate(0, 0) rotate(0);
   }
 }
 
 @keyframes blob {
   0%, 100% {
     transform: translate(0, 0) scale(1);
     opacity: 0.2;
   }
   33% {
     transform: translate(15px, -15px) scale(1.1);
     opacity: 0.25;
   }
   66% {
     transform: translate(-10px, 10px) scale(0.95);
     opacity: 0.18;
   }
 }
 
 @keyframes pulse {
   0%, 100% {
     opacity: 0.95;
     transform: scale(1);
   }
   50% {
     opacity: 1;
     transform: scale(1.02);
   }
 }
 
 @keyframes gradientFlow {
   0% {
     background-position: 0% 50%;
   }
   50% {
     background-position: 100% 50%;
   }
   100% {
     background-position: 0% 50%;
   }
 }
 
 /* 进度条动画效果 */
 @keyframes progress {
   0% {
     background-position: 1rem 0;
   }
   100% {
     background-position: 0 0;
   }
 }
 
 /* 动画应用类 */
 .animate-float {
   animation: float 8s infinite ease-in-out;
 }
 
 .animate-blob {
   animation: blob 18s infinite ease-in-out alternate;
 }
 
 .animate-pulse-slow {
   animation: pulse 5s infinite ease-in-out;
 }
 
 .animate-gradient {
   animation: gradientFlow 8s ease infinite;
   background-size: 200% auto;
 }
 
 /* 进度条动画 */
 .animate-progress {
   animation: progress 1s linear infinite;
 }
 
 /* 动画延迟类 */
 .animation-delay-2000 {
   animation-delay: 2s;
 }
 
 .animation-delay-4000 {
   animation-delay: 4s;
 }
 
 .animation-delay-6000 {
   animation-delay: 6s;
 }
 
 /* 毛玻璃效果组件 - 明亮主题 */
 .glass-card {
   @apply backdrop-blur-xl;
   background: var(--glass-bg-light);
   border: 1px solid var(--glass-border-light);
   box-shadow: 0 8px 32px 0 var(--glass-shadow-light);
   border-radius: 24px;
   transition: all 0.3s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
 }
 
 .glass-card:hover {
   box-shadow: 0 12px 48px 0 var(--glass-shadow-light);
   border-color: var(--glass-highlight);
   transform: translateY(-2px);
 }
 
 /* 深色毛玻璃卡片 */
 .glass-card-dark {
   @apply backdrop-blur-xl;
   background: var(--glass-bg-dark);
   border: 1px solid var(--glass-border-dark);
   box-shadow: 0 8px 32px 0 var(--glass-shadow-dark);
   border-radius: 24px;
   transition: all 0.3s ease, background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
   color: var(--text-light);
 }
 
 .glass-card-dark:hover {
   box-shadow: 0 12px 48px 0 var(--glass-shadow-dark);
   border-color: rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
 }
 
 /* 进度条条纹效果 */
 .bg-stripes {
   background-image: linear-gradient(
     45deg,
     rgba(255, 255, 255, 0.15) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, 0.15) 50%,
     rgba(255, 255, 255, 0.15) 75%,
     transparent 75%,
     transparent
   );
   background-size: 1rem 1rem;
 }
 
 /* 深色主题下的条纹效果调整 */
 .dark-theme .bg-stripes {
   background-image: linear-gradient(
     45deg,
     rgba(255, 255, 255, 0.2) 25%,
     transparent 25%,
     transparent 50%,
     rgba(255, 255, 255, 0.2) 50%,
     rgba(255, 255, 255, 0.2) 75%,
     transparent 75%,
     transparent
   );
 }
 
 /* 导航栏毛玻璃效果 */
 .glass-nav {
   @apply backdrop-blur-xl z-50 fixed top-0 left-0 right-0;
   background: rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.1);
   transition: all 0.3s ease, background 0.5s ease, border-color 0.5s ease;
 }
 
 .dark-theme .glass-nav {
   background: rgba(10, 17, 40, 0.25);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .light-theme .glass-nav {
   background: rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* 按钮样式 */
 .btn-primary {
   @apply rounded-full font-medium text-white py-3 px-8 transition-all duration-300;
   background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
   box-shadow: 0 4px 12px rgba(45, 127, 249, 0.25);
 }
 
 .btn-primary:hover {
   box-shadow: 0 8px 20px rgba(45, 127, 249, 0.35);
   transform: translateY(-2px);
 }
 
 .btn-primary:active {
   transform: translateY(0);
 }
 
 /* 导航栏紧凑按钮 */
 .nav-btn-primary {
   @apply rounded-full font-medium text-white py-2 px-6 transition-all duration-300;
   background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
   box-shadow: 0 3px 10px rgba(45, 127, 249, 0.2);
 }
 
 .nav-btn-primary:hover {
   box-shadow: 0 6px 15px rgba(45, 127, 249, 0.3);
   transform: translateY(-2px);
 }
 
 .nav-btn-primary:active {
   transform: translateY(0);
 }
 
 .btn-secondary {
   @apply rounded-full font-medium py-3 px-8 transition-all duration-300;
   background: rgba(255, 255, 255, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(8px);
   color: var(--text-primary);
 }
 
 /* 导航栏紧凑次要按钮 */
 .nav-btn-secondary {
   @apply rounded-full font-medium py-2 px-6 transition-all duration-300;
   background: rgba(255, 255, 255, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(8px);
   color: var(--text-primary);
 }
 
 .dark-theme .btn-secondary,
 .dark-theme .nav-btn-secondary {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: var(--text-light);
 }
 
 .light-theme .btn-secondary,
 .light-theme .nav-btn-secondary {
   background: rgba(255, 255, 255, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.5);
   color: var(--text-primary);
 }
 
 .btn-secondary:hover,
 .nav-btn-secondary:hover {
   background: rgba(255, 255, 255, 0.35);
   transform: translateY(-2px);
 }
 
 .dark-theme .btn-secondary:hover,
 .dark-theme .nav-btn-secondary:hover {
   background: rgba(255, 255, 255, 0.15);
 }
 
 /* 导航链接 */
 .nav-link {
   @apply transition-all duration-300;
   color: var(--text-secondary);
   position: relative;
   padding: 0.5rem 0.25rem;
 }
 
 .dark-theme .nav-link {
   color: rgba(255, 255, 255, 0.8);
 }
 
 .light-theme .nav-link {
   color: var(--text-secondary);
 }
 
 .nav-link:hover {
   color: var(--text-primary);
 }
 
 .dark-theme .nav-link:hover {
   color: var(--text-light);
 }
 
 .light-theme .nav-link:hover {
   color: var(--text-primary);
 }
 
 .nav-link::after {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 0;
   left: 0;
   background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue));
   transition: width 0.3s ease;
 }
 
 .nav-link:hover::after {
   width: 100%;
 }
 
 /* 功能卡片样式 */
 .feature-card {
   @apply transition-all duration-300 rounded-3xl p-8;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(12px);
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
   transition: all 0.3s ease, background 0.5s ease, border-color 0.5s ease;
 }
 
 .dark-theme .feature-card {
   background: rgba(22, 34, 73, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .light-theme .feature-card {
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .feature-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 48px rgba(31, 38, 135, 0.15);
 }
 
 /* 图标容器 */
 .icon-container {
   @apply flex items-center justify-center rounded-full mb-6 w-16 h-16;
   background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
   color: white;
   transition: all 0.3s ease;
 }
 
 .feature-card:hover .icon-container {
   transform: scale(1.1);
 }
 
 /* 统计卡片 */
 .stats-card {
   @apply transition-all duration-300 rounded-3xl p-8 flex flex-col;
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(12px);
   box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
   transition: all 0.3s ease, background 0.5s ease, border-color 0.5s ease;
 }
 
 .dark-theme .stats-card {
   background: rgba(22, 34, 73, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .light-theme .stats-card {
   background: rgba(255, 255, 255, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
 .stats-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 48px rgba(31, 38, 135, 0.15);
 }
 
 .stats-number {
   @apply text-5xl font-bold mb-2;
   background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 /* 步骤样式 */
 .step-number {
   @apply flex items-center justify-center text-white font-medium rounded-full w-10 h-10;
   background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
 }
 
 /* 标签样式 */
 .tab-button {
   @apply transition-all duration-300 px-6 py-3 rounded-xl text-base font-medium;
   color: var(--text-tertiary);
 }
 
 .dark-theme .tab-button {
   color: rgba(255, 255, 255, 0.65);
 }
 
 .light-theme .tab-button {
   color: var(--text-tertiary);
 }
 
 .tab-button.active {
   background: rgba(255, 255, 255, 0.5);
   color: var(--text-primary);
   box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
 }
 
 .dark-theme .tab-button.active {
   background: rgba(255, 255, 255, 0.1);
   color: var(--text-light);
   box-shadow: 0 4px 16px rgba(0, 0, 10, 0.15);
 }
 
 .light-theme .tab-button.active {
   background: rgba(255, 255, 255, 0.5);
   color: var(--text-primary);
   box-shadow: 0 4px 16px rgba(31, 38, 135, 0.1);
 }
 
 .tab-button:not(.active):hover {
   color: var(--text-secondary);
   background: rgba(255, 255, 255, 0.3);
 }
 
 .dark-theme .tab-button:not(.active):hover {
   color: rgba(255, 255, 255, 0.85);
   background: rgba(255, 255, 255, 0.05);
 }
 
 .light-theme .tab-button:not(.active):hover {
   color: var(--text-secondary);
   background: rgba(255, 255, 255, 0.3);
 }
 
 /* 主题切换器 */
 .theme-switch {
   @apply relative inline-flex items-center cursor-pointer;
 }
 
 .theme-switch input {
   @apply sr-only;
 }
 
 .theme-slider {
   @apply relative w-14 h-7 bg-gray-200 rounded-full transition-colors duration-300 ease-in-out;
 }
 
 .theme-slider:before {
   @apply absolute content-[''] h-5 w-5 left-1 bottom-1 bg-white rounded-full transition-transform duration-300 ease-in-out;
 }
 
 input:checked + .theme-slider {
   @apply bg-blue-600;
 }
 
 input:checked + .theme-slider:before {
   @apply transform translate-x-7;
 }
 
 /* 修改滚动条样式 */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
 ::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.05);
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: rgba(45, 127, 249, 0.5);
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(45, 127, 249, 0.7);
 }
 
 .dark-theme ::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
 }
 
 .dark-theme ::-webkit-scrollbar-thumb {
   background: rgba(142, 107, 255, 0.5);
 }
 
 .dark-theme ::-webkit-scrollbar-thumb:hover {
   background: rgba(142, 107, 255, 0.7);
 }
 
 /* 动画弹入效果 */
 @keyframes bounce-in {
   0% {
     transform: scale(0.8);
     opacity: 0;
   }
   70% {
     transform: scale(1.05);
     opacity: 1;
   }
   100% {
     transform: scale(1);
   }
 }
 
 .animate-bounce-in {
   animation: bounce-in 0.3s cubic-bezier(0.38, 1.6, 0.55, 0.9) forwards;
 }
 