* { box-sizing: border-box; }

body {
  background-color: #0a0e17;
  background-image: 
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-line {
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #a855f7, #f43f5e, #00d4ff);
  background-size: 200% auto;
  animation: gradient-flow 4s linear infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,212,255,0.3); }
  50% { box-shadow: 0 0 20px rgba(0,212,255,0.6); }
}

.glow-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes neon-text-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(0,212,255,0.5), 0 0 30px rgba(0,212,255,0.2); }
  50% { text-shadow: 0 0 20px rgba(0,212,255,0.8), 0 0 50px rgba(0,212,255,0.4); }
}

.neon-text {
  animation: neon-text-pulse 3s ease-in-out infinite;
}

.glass {
  background: rgba(13,20,34,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(30,42,66,0.8);
}

.glass-hover:hover {
  border-color: rgba(0,212,255,0.4);
  box-shadow: 0 0 15px rgba(0,212,255,0.1);
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content {
  animation: slide-in 0.3s ease-out;
}

.drop-zone {
  border: 2px dashed rgba(0,212,255,0.3);
  transition: all 0.3s ease;
}

.drop-zone:hover, .drop-zone.dragover {
  border-color: rgba(0,212,255,0.8);
  box-shadow: 0 0 30px rgba(0,212,255,0.15);
  background: rgba(0,212,255,0.03);
}

.progress-bar-fill {
  background: linear-gradient(90deg, #00d4ff, #a855f7);
  background-size: 200% auto;
  animation: gradient-flow 2s linear infinite;
  transition: width 0.3s ease;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0e17; }
::-webkit-scrollbar-thumb { background: #1e2a42; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a3a5c; }

.canvas-glow {
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,212,255,0.2), inset 0 0 15px rgba(0,0,0,0.5);
}

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.toast-enter {
  animation: toast-in 0.3s ease-out;
}

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

.spin-slow {
  animation: spin-slow 3s linear infinite;
}

.status-idle { background: rgba(52,211,153,0.2); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.status-extracting { background: rgba(250,204,21,0.2); color: #facc15; border: 1px solid rgba(250,204,21,0.3); }
.status-training { background: rgba(0,212,255,0.2); color: #00d4ff; border: 1px solid rgba(0,212,255,0.3); }
.status-generating { background: rgba(168,85,247,0.2); color: #a855f7; border: 1px solid rgba(168,85,247,0.3); }
.status-error { background: rgba(244,63,94,0.2); color: #f43f5e; border: 1px solid rgba(244,63,94,0.3); }