/* 留学文书助手 - 太空未来主题样式 */

:root {
  /* 深蓝色主题色调 */
  --primary-deep-blue: #0a1628;
  --secondary-blue: #1e3a8a;
  --accent-cyan: #00d4ff;
  --accent-purple: #8b5cf6;
  --accent-gold: #fbbf24;
  --space-gray: #374151;
  --light-blue: #60a5fa;
  --dark-blue: #1e40af;
  --hologram-blue: rgba(0, 212, 255, 0.3);
  --neon-glow: rgba(139, 92, 246, 0.5);

  /* 字体设置 */
  --font-futuristic: 'Orbitron', 'SF Pro Display', sans-serif;
  --font-content: 'Inter', sans-serif;

  /* 动画变量 */
  --particle-speed: 20s;
  --pulse-speed: 2s;
  --float-speed: 3s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-content);
  background: var(--primary-deep-blue);
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
}

/* 太空背景动画 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(30, 58, 138, 0.2) 0%, transparent 50%);
  z-index: -2;
  animation: nebula 30s ease-in-out infinite alternate;
}

/* 星空粒子背景 */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite alternate;
}

.star:nth-child(odd) {
  animation-delay: 1s;
}

.star:nth-child(even) {
  animation-delay: 2s;
}

/* 全息投影容器 */
.hologram-container {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid var(--accent-cyan);
  border-radius: 15px;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 30px rgba(0, 212, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: hologram-float var(--float-speed) ease-in-out infinite alternate;
}

.hologram-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
  border-radius: 15px;
  z-index: -1;
  animation: border-glow 3s ease-in-out infinite;
}

/* 量子按钮 */
.quantum-btn {
  position: relative;
  padding: 12px 30px;
  background: linear-gradient(45deg, var(--secondary-blue), var(--dark-blue));
  border: 2px solid var(--accent-cyan);
  border-radius: 25px;
  color: white;
  font-family: var(--font-futuristic);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.quantum-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.quantum-btn:hover::before {
  left: 100%;
}

.quantum-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
  border-color: var(--accent-purple);
}

/* 3D卡片效果 */
.space-card {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.2), rgba(10, 22, 40, 0.8));
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  margin: 1rem;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  overflow: hidden;
}

.space-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(139, 92, 246, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.space-card:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 212, 255, 0.3);
}

.space-card:hover::before {
  opacity: 1;
}

/* 导航栏 */
.cosmic-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(10, 22, 40, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--accent-cyan);
  padding: 1rem 2rem;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-family: var(--font-futuristic);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-cyan);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover {
  color: var(--accent-cyan);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 输入框样式 */
.quantum-input {
  background: rgba(30, 58, 138, 0.2);
  border: 2px solid rgba(96, 165, 250, 0.3);
  border-radius: 10px;
  padding: 12px 16px;
  color: white;
  font-size: 16px;
  width: 100%;
  transition: all 0.3s ease;
}

.quantum-input:focus {
  outline: none;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
  background: rgba(30, 58, 138, 0.3);
}

.quantum-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* 进度条 */
.cosmic-progress {
  width: 100%;
  height: 8px;
  background: rgba(55, 65, 81, 0.5);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shine 2s ease-in-out infinite;
}

/* 文字发光效果 */
.glow-text {
  text-shadow: 0 0 10px currentColor;
  animation: text-pulse var(--pulse-speed) ease-in-out infinite alternate;
}

/* 脉冲动画 */
.pulse-element {
  animation: pulse var(--pulse-speed) ease-in-out infinite;
}

/* 浮动动画 */
.float-element {
  animation: float var(--float-speed) ease-in-out infinite alternate;
}

/* 关键帧动画 */
@keyframes nebula {
  0% { opacity: 0.5; transform: scale(1) rotate(0deg); }
  100% { opacity: 0.8; transform: scale(1.1) rotate(180deg); }
}

@keyframes twinkle {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

@keyframes hologram-float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

@keyframes border-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes text-pulse {
  0% { text-shadow: 0 0 5px currentColor; }
  100% { text-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 环形轨道控制中心动画 */
@keyframes core-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.8);
  }
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes logo-float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

@keyframes energy-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes orbit-rotation {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes module-hover {
  0% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 0 20px currentColor;
  }
  100% {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 35px currentColor;
  }
}

@keyframes particle-drift {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg);
    opacity: 0.3;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50px) translateX(20px) rotate(180deg);
    opacity: 0.8;
  }
  75% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100px) translateX(-10px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes counter-orbit-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes panel-float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-3px); }
}

@keyframes core-activation {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes modules-reveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes module-activate {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 轨道模块样式 */
.orbital-module {
  transform-origin: center center;
  animation: counter-orbit-rotation 60s linear infinite reverse;
}

.orbital-module:hover .module-pod {
  transform: scale(1.2);
  box-shadow: 0 0 40px currentColor !important;
}

.orbital-module:hover .module-label {
  text-shadow: 0 0 15px currentColor;
}

/* 状态面板动画 */
.status-panel, .stats-panel {
  animation: panel-float 4s ease-in-out infinite alternate;
}

/* 快捷操作栏动画 */
.action-icon:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* 环形轨道系统激活状态 */
.system-activated .command-core {
  animation: core-activation 2s ease-in-out;
}

.system-activated .orbital-modules {
  opacity: 1;
  animation: modules-reveal 3s ease-out;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .hologram-container {
    margin: 1rem;
    padding: 1rem;
  }
}

/* 工具类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.hidden { display: none; }
.block { display: block; }