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

body {
  background: #06060f;
  background-image: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(147, 51, 234, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(6, 214, 214, 0.05) 0%, transparent 50%);
  min-height: 100vh;
}

.checker-bg {
  background-image:
    linear-gradient(45deg, #1a1a35 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a35 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a35 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a35 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #12122a;
}

.checker-bg-sm {
  background-image:
    linear-gradient(45deg, #1e1e3a 25%, transparent 25%),
    linear-gradient(-45deg, #1e1e3a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e1e3a 75%),
    linear-gradient(-45deg, transparent 75%, #1e1e3a 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
  background-color: #151530;
}

.drop-zone {
  border: 2px dashed #3a3a5c;
  transition: all 0.3s ease;
}

.drop-zone:hover, .drop-zone.drag-over {
  border-color: #06d6d6;
  box-shadow: 0 0 30px rgba(6, 214, 214, 0.15), inset 0 0 30px rgba(6, 214, 214, 0.03);
}

.glow-btn {
  background: linear-gradient(135deg, #9333ea 0%, #06d6d6 100%);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.glow-btn:hover {
  box-shadow: 0 0 25px rgba(6, 214, 214, 0.3), 0 0 50px rgba(147, 51, 234, 0.2);
  transform: translateY(-1px);
}

.glow-btn:active {
  transform: translateY(0);
}

.glow-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.layer-card {
  background: #12122a;
  border: 1px solid #252545;
  transition: all 0.25s ease;
}

.layer-card:hover {
  border-color: #3a3a6c;
  box-shadow: 0 0 20px rgba(6, 214, 214, 0.08);
}

.slider-track {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #252545, #3a3a6c);
  outline: none;
}

.slider-track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333ea, #06d6d6);
  cursor: pointer;
  box-shadow: 0 0 10px rgba(6, 214, 214, 0.3);
}

.slider-track::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333ea, #06d6d6);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 10px rgba(6, 214, 214, 0.3);
}

.toggle-switch {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #252545;
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease;
}

.toggle-switch.active {
  background: linear-gradient(135deg, #9333ea, #06d6d6);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.25s ease;
}

.toggle-switch.active::after {
  transform: translateX(20px);
}

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

.fade-in-up {
  animation: fadeInUp 0.4s ease forwards;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(6, 214, 214, 0.2); }
  50% { box-shadow: 0 0 20px rgba(6, 214, 214, 0.4); }
}

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

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

.skeleton {
  background: linear-gradient(90deg, #12122a 25%, #1e1e3a 50%, #12122a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.progress-bar-inner {
  background: linear-gradient(90deg, #9333ea, #06d6d6, #9333ea);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #9333ea, #06d6d6, transparent);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #06060f;
}
::-webkit-scrollbar-thumb {
  background: #252545;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a6c;
}