/* === Base Variables === */
:root {
  --primary: #4C8DFF;
  --primary-hover: #6AA8FF;
  --success: #3FDA87;
  --error: #FF6B6B;
  --warning: #F0B23E;
}

body {
  --bg: #ffffff;
  --fg: #1f2937;
  --card: #f9fafb;
  --border: #e5e7eb;
  --secondary: #f3f4f6;
  --card-rgb: 249, 250, 251;
  --border-rgb: 229, 231, 235;
  --bg-rgb: 255, 255, 255;
  --fg-rgb: 31, 41, 55;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: var(--fg);
  overflow-x: hidden;
  position: relative;
}

.dark body {
  --bg: #0B1220;
  --fg: #E6EDF6;
  --card: #0E1726;
  --border: #253044;
  --secondary: #111827;
  --card-rgb: 14, 23, 38;
  --border-rgb: 37, 48, 68;
  --bg-rgb: 11, 18, 32;
  --fg-rgb: 230, 237, 246;
  background: linear-gradient(135deg, #0B1220 0%, #1a2332 100%);
  color: var(--fg);
}

/* === Typography === */
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* === Particles Background === */
#particles-js {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.4;
}

/* === Glass Card Effects === */
.glass-card {
  background: rgba(var(--card-rgb), 0.75);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(var(--border-rgb), 0.25);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #4C8DFF, #6AA8FF, #3FDA87, #F0B23E);
  background-size: 400% 400%;
  border-radius: 18px;
  z-index: -1;
  animation: gradientAnimation 8s ease infinite;
}

.glass-card:hover {
  border-color: rgba(76, 141, 255, 0.5);
  box-shadow: 0 12px 40px rgba(76, 141, 255, 0.18);
}

/* === Buttons === */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  border-radius: 12px;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(76, 141, 255, 0.5);
}

.btn-primary:active {
  transform: translateY(0) scale(1);
}

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

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

/* === Animations === */
.floating-animation {
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-24px) rotate(2deg); }
}

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

@keyframes pulse-glow {
  from { box-shadow: 0 0 20px rgba(76, 141, 255, 0.3); }
  to { box-shadow: 0 0 40px rgba(76, 141, 255, 0.7); }
}

/* === File Drop Zone === */
.file-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(var(--secondary), 0.3);
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.file-drop-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(76, 141, 255, 0.1), transparent);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.file-drop-zone.dragover {
  border-color: var(--primary);
  background: rgba(76, 141, 255, 0.12);
  transform: scale(1.01);
}

.file-drop-zone.dragover::before {
  opacity: 1;
}

/* === Progress Bar === */
.progress-bar {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
  height: 4px;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.4, 1);
  background-size: 200% 100%;
}

@keyframes progressAnimation {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.upload-progress {
  background: linear-gradient(90deg, #4C8DFF 0%, #6AA8FF 25%, #4C8DFF 50%, #6AA8FF 75%, #4C8DFF 100%);
  background-size: 200% 100%;
  animation: progressAnimation 2s linear infinite;
}

/* === Toast Notifications === */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  transform: translateX(400px);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
  transform: translateX(0);
}

/* === Stats Cards === */
.stats-card {
  background: rgba(var(--card-rgb), 0.6);
  border: 1px solid rgba(var(--border-rgb), 0.2);
  border-radius: 12px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, #3FDA87, #F0B23E, #4C8DFF);
  background-size: 400% 400%;
  border-radius: 13px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.stats-card:hover {
  border-color: rgba(76, 141, 255, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

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

/* === Method Cards === */
.method-card {
  background: rgba(var(--card-rgb), 0.8);
  border: 1px solid rgba(var(--border-rgb), 0.3);
  border-radius: 16px;
  transition: all 0.35s ease;
  cursor: pointer;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

.method-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #4C8DFF, #6AA8FF, #3FDA87);
  background-size: 400% 400%;
  border-radius: 18px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
  animation: gradientAnimation 8s ease infinite;
}

.method-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(76, 141, 255, 0.25);
  transform: translateY(-6px) scale(1.01);
}

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

.method-card.selected {
  border-color: var(--primary);
  background: rgba(76, 141, 255, 0.12);
}

/* === Utility Classes === */
.hidden { display: none; }

.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Floating Orbs === */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.15;
}

.orb-1 { top: 10%; left: 5%; width: 300px; height: 300px; background: var(--primary); animation: drift 25s infinite ease-in-out; }
.orb-2 { top: 60%; right: 10%; width: 200px; height: 200px; background: var(--success); animation: drift 30s infinite ease-in-out reverse; }
.orb-3 { bottom: 10%; left: 15%; width: 150px; height: 150px; background: var(--warning); animation: drift 35s infinite ease-in-out; }
.orb-4 { bottom: 40%; left: 20%; width: 100px; height: 100px; background: var(--warning); animation: drift 15s infinite ease-in-out reverse; }
.orb-5 { bottom: 15%; left: 25%; width: 250px; height: 250px; background: var(--success); animation: drift 20s infinite ease-in-out; }
.orb-6 { bottom: 20%; left: 45%; width: 150px; height: 150px; background: var(--primary); animation: drift 5s infinite ease-in-out reverse; }
.orb-7 { bottom: 4%; left: 65%; width: 125px; height: 125px; background: var(--success); animation: drift 10s infinite ease-in-out; }
.orb-8 { top: 10%; right: 5%; width: 350px; height: 350px; background: var(--warning); animation: drift 15s infinite ease-in-out reverse; }
.orb-9 { top: 25%; right: 40%; width: 220px; height: 110px; background: var(--primary); animation: drift 10s infinite ease-in-out reverse; }

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(23px, -34.5px) rotate(5.75deg); }
  50%  { transform: translate(-23px, 23px) rotate(-5.75deg); }
  75%  { transform: translate(11.5px, 34.5px) rotate(3.45deg); }
}

/* === Icons === */
.icon-hover {
  transition: transform 0.3s ease, color 0.3s ease;
}

.icon-hover:hover {
  transform: scale(1.15);
  color: var(--primary) !important;
}

.help-icon {
  color: #4C8DFF;
  text-shadow: 0 0 8px rgba(76, 141, 255, 0.5);
  transition: all 0.3s ease;
}

.help-icon:hover {
  color: #6AA8FF !important;
  transform: scale(1.25) rotate(15deg);
  text-shadow: 0 0 12px rgba(76, 141, 255, 0.8);
}

/* === Achievement System === */
.achievement-badge {
  background: linear-gradient(135deg, var(--success) 0%, #22c55e 100%);
  color: white;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(63, 218, 135, 0.3);
}

.level-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
}

.achievement-card {
  background: rgba(var(--card-rgb), 0.6);
  border: 1px solid rgba(var(--border-rgb), 0.2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.achievement-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.achievement-locked {
  opacity: 0.5;
}

.achievement-locked .achievement-icon {
  background: rgba(107, 114, 128, 0.2);
  color: #9CA3AF;
}

.achievement-unlocked .achievement-icon {
  background: linear-gradient(135deg, #3FDA87, #22c55e);
  color: white;
}

/* === Miscellaneous === */
.bg-card-solid {
  background: var(--card) !important;
}

.no-backdrop-filter {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cancelling {
  background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%) !important;
  border-color: #FF6B6B !important;
}

.file-preview {
  transition: all 0.3s ease;
}

.file-preview img {
  transition: transform 0.3s ease;
}

.file-preview:hover img {
  transform: scale(1.05);
}

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

@keyframes pageLoad {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

main {
  animation: pageLoad 1s ease-out;
}