/* ========================================
   GLITCHER DEFAULT MODE - MODERN REDESIGN
   Applying Studio Mode's sleek aesthetic to Default Mode
   ======================================== */

/* Import modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   GLASSMORPHISM & ENHANCED PANELS
   ======================================== */

.control-panel {
  background: linear-gradient(
    145deg,
    rgba(37, 37, 64, 0.8),
    rgba(42, 42, 64, 0.6)
  ) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.canvas-area {
  background: linear-gradient(
    145deg,
    rgba(37, 37, 64, 0.8),
    rgba(42, 42, 64, 0.6)
  ) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.37),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   CONTROL GROUPS WITH GLASS EFFECT
   ======================================== */

.control-group {
  background: linear-gradient(
    145deg,
    rgba(42, 42, 64, 0.7),
    rgba(31, 31, 53, 0.7)
  ) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Animated gradient border on hover */
.control-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px;
  border-radius: 15px;
  background: linear-gradient(
    45deg,
    #4ecdc4,
    #45b7d1,
    #7b68ee,
    #ff6b6b,
    #4ecdc4
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
  z-index: 0;
}

.control-group:hover::before {
  opacity: 0.6;
}

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

.control-group:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Ensure content is above the gradient border */
.control-group > * {
  position: relative;
  z-index: 1;
}

/* ========================================
   GROUP TITLES WITH MODERN TYPOGRAPHY
   ======================================== */

.group-title {
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  font-size: 14px !important;
  background: linear-gradient(135deg, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(78, 205, 196, 0.3));
}

/* ========================================
   ENHANCED BUTTONS WITH NEON GLOW
   ======================================== */

.control-button {
  background: linear-gradient(
    135deg,
    rgba(78, 205, 196, 0.9),
    rgba(69, 183, 209, 0.9)
  ) !important;
  border: 1px solid rgba(78, 205, 196, 0.3) !important;
  box-shadow: 
    0 0 20px rgba(78, 205, 196, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  position: relative;
  overflow: hidden;
}

/* Ripple effect on click */
.control-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.control-button:active::after {
  width: 300px;
  height: 300px;
}

.control-button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 0 30px rgba(78, 205, 196, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.control-button:active {
  transform: translateY(-1px) scale(1.0) !important;
}

/* Success Button */
.success-button {
  background: linear-gradient(145deg, #84fab0, #8fd3f4) !important;
  box-shadow: 
    0 0 20px rgba(132, 250, 176, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.success-button:hover {
  box-shadow: 
    0 0 30px rgba(132, 250, 176, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Danger Button */
.danger-button {
  background: linear-gradient(145deg, #fa709a, #fee140) !important;
  box-shadow: 
    0 0 20px rgba(250, 112, 154, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.danger-button:hover {
  box-shadow: 
    0 0 30px rgba(250, 112, 154, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Toggle Button */
.toggle-button {
  background: linear-gradient(145deg, #667eea, #764ba2) !important;
  box-shadow: 
    0 0 20px rgba(102, 126, 234, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.toggle-button:hover {
  box-shadow: 
    0 0 30px rgba(102, 126, 234, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.toggle-button.active {
  background: linear-gradient(145deg, #fa709a, #fee140) !important;
  box-shadow: 
    0 0 25px rgba(250, 112, 154, 0.7),
    inset 0 2px 5px rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   ENHANCED DROPDOWNS
   ======================================== */

.control-select {
  background: linear-gradient(
    145deg,
    rgba(42, 42, 64, 0.9),
    rgba(31, 31, 53, 0.9)
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.control-select:focus {
  border-color: #4ecdc4 !important;
  box-shadow: 
    0 0 15px rgba(78, 205, 196, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
}

.control-select:hover {
  background: linear-gradient(
    145deg,
    rgba(52, 52, 74, 0.9),
    rgba(41, 41, 63, 0.9)
  ) !important;
  border-color: rgba(78, 205, 196, 0.4) !important;
}

/* ========================================
   MODERN SLIDERS
   ======================================== */

.control-slider {
  background: linear-gradient(
    to right,
    rgba(31, 31, 53, 0.8),
    rgba(42, 42, 64, 0.8)
  ) !important;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.control-slider::-webkit-slider-thumb {
  background: linear-gradient(145deg, #4ecdc4, #45b7d1) !important;
  box-shadow: 
    0 0 15px rgba(78, 205, 196, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease;
  cursor: grab;
}

.control-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 
    0 0 25px rgba(78, 205, 196, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.control-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.control-slider::-moz-range-thumb {
  background: linear-gradient(145deg, #4ecdc4, #45b7d1) !important;
  box-shadow: 
    0 0 15px rgba(78, 205, 196, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease;
  cursor: grab;
}

.control-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 
    0 0 25px rgba(78, 205, 196, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

.control-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

/* Slider Value Display */
.slider-value {
  font-weight: 700 !important;
  background: linear-gradient(135deg, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 4px rgba(78, 205, 196, 0.4));
  font-size: 18px !important;
}

/* ========================================
   ENHANCED CHECKBOX
   ======================================== */

.control-checkbox {
  background: linear-gradient(
    145deg,
    rgba(42, 42, 64, 0.9),
    rgba(31, 31, 53, 0.9)
  ) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.control-checkbox:checked {
  background: linear-gradient(145deg, #4ecdc4, #45b7d1) !important;
  border-color: #4ecdc4 !important;
  box-shadow: 
    0 0 15px rgba(78, 205, 196, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.control-checkbox:hover {
  border-color: rgba(78, 205, 196, 0.5) !important;
  transform: scale(1.05);
}

/* ========================================
   PANEL HEADER REDESIGN
   ======================================== */

.panel-header {
  background: linear-gradient(
    180deg,
    rgba(78, 205, 196, 0.05) 0%,
    transparent 100%
  ) !important;
  border-bottom: 1px solid rgba(78, 205, 196, 0.2) !important;
  position: relative;
  backdrop-filter: blur(10px);
}

.panel-title {
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 50%, #7b68ee 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 10px rgba(78, 205, 196, 0.4));
  font-size: 36px !important;
}

.panel-subtitle {
  font-weight: 500 !important;
  letter-spacing: 4px !important;
  opacity: 0.8 !important;
}

/* Decorative accent line with glow */
.panel-header::before {
  background: linear-gradient(90deg, transparent, #4ecdc4, transparent) !important;
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.6);
  height: 4px !important;
}

/* ========================================
   HEADER STUDIO TOGGLE
   ======================================== */

.header-studio-toggle {
  background: linear-gradient(
    135deg,
    rgba(78, 205, 196, 0.9),
    rgba(69, 183, 209, 0.9)
  ) !important;
  border: 2px solid rgba(78, 205, 196, 0.4) !important;
  box-shadow: 
    0 8px 25px rgba(78, 205, 196, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  backdrop-filter: blur(10px);
}

.header-studio-toggle::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
}

.header-studio-toggle:hover {
  background: linear-gradient(
    135deg,
    rgba(69, 183, 209, 1),
    rgba(78, 205, 196, 1)
  ) !important;
  box-shadow: 
    0 12px 35px rgba(78, 205, 196, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* ========================================
   FILE UPLOAD AREA
   ======================================== */

.file-upload-area {
  background: linear-gradient(
    145deg,
    rgba(26, 26, 48, 0.8),
    rgba(37, 37, 64, 0.6)
  ) !important;
  backdrop-filter: blur(15px) !important;
  border: 2px dashed rgba(78, 205, 196, 0.4) !important;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.file-upload-area::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(78, 205, 196, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.file-upload-area:hover::before {
  opacity: 1;
}

.file-upload-area:hover {
  border-color: #4ecdc4 !important;
  background: linear-gradient(
    145deg,
    rgba(26, 26, 48, 0.9),
    rgba(37, 37, 64, 0.8)
  ) !important;
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 
    0 15px 40px rgba(78, 205, 196, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.upload-icon {
  color: #4ecdc4 !important;
  filter: drop-shadow(0 0 10px rgba(78, 205, 196, 0.5));
  transition: all 0.3s ease;
}

.file-upload-area:hover .upload-icon {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 0 20px rgba(78, 205, 196, 0.8));
}

.upload-text {
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* ========================================
   CANVAS DROP ZONE
   ======================================== */

.canvas-drop-zone {
  background: linear-gradient(
    145deg,
    rgba(26, 26, 48, 0.8),
    rgba(37, 37, 64, 0.6)
  ) !important;
  backdrop-filter: blur(15px) saturate(150%) !important;
  border: 2px dashed rgba(78, 205, 196, 0.4) !important;
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.canvas-drop-zone:hover {
  border-color: #4ecdc4 !important;
  background: linear-gradient(
    145deg,
    rgba(26, 26, 48, 0.9),
    rgba(37, 37, 64, 0.8)
  ) !important;
  box-shadow: 
    0 20px 50px rgba(78, 205, 196, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.canvas-drop-zone.drag-over {
  border-color: #4ecdc4 !important;
  background: linear-gradient(
    145deg,
    rgba(78, 205, 196, 0.25),
    rgba(69, 183, 209, 0.15)
  ) !important;
  box-shadow: 
    0 25px 60px rgba(78, 205, 196, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}

.drop-zone-title {
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

.feature-tag {
  background: linear-gradient(
    135deg,
    rgba(78, 205, 196, 0.25),
    rgba(69, 183, 209, 0.15)
  ) !important;
  border: 1px solid rgba(78, 205, 196, 0.4) !important;
  backdrop-filter: blur(10px);
  font-weight: 600 !important;
  transition: all 0.3s ease;
}

.feature-tag:hover {
  background: linear-gradient(
    135deg,
    rgba(78, 205, 196, 0.4),
    rgba(69, 183, 209, 0.3)
  ) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

/* ========================================
   CLOSE BUTTON ENHANCEMENT
   ======================================== */

.close-button {
  background: linear-gradient(145deg, #ff6b6b, #ff5252) !important;
  box-shadow: 
    0 0 20px rgba(255, 107, 107, 0.5),
    inset 1px 1px 2px rgba(255,255,255,0.3),
    inset -1px -1px 2px rgba(0,0,0,0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
}

.close-button:hover {
  background: linear-gradient(145deg, #ff8b8b, #ff7272) !important;
  box-shadow: 
    0 0 30px rgba(255, 107, 107, 0.7),
    inset 1px 1px 2px rgba(255,255,255,0.4),
    inset -1px -1px 2px rgba(0,0,0,0.4) !important;
}

/* ========================================
   PRESET BUTTONS
   ======================================== */

.preset-button {
  background: linear-gradient(
    145deg,
    rgba(58, 58, 80, 0.9),
    rgba(47, 47, 69, 0.9)
  ) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
}

.preset-button:hover {
  background: linear-gradient(
    145deg,
    rgba(74, 74, 96, 0.9),
    rgba(63, 63, 85, 0.9)
  ) !important;
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.25) !important;
}

.preset-button.active {
  background: linear-gradient(145deg, #ffd700, #ffed4e) !important;
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   STATUS INDICATOR WITH PULSE
   ======================================== */

.status-indicator {
  box-shadow: 0 0 15px rgba(102, 187, 106, 0.6) !important;
  animation: enhancedPulse 2s ease-in-out infinite;
}

@keyframes enhancedPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(102, 187, 106, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 25px rgba(102, 187, 106, 0.9);
  }
}

.status-indicator.paused {
  box-shadow: 0 0 15px rgba(255, 167, 38, 0.6) !important;
  animation: pausedPulse 2s ease-in-out infinite;
}

@keyframes pausedPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 15px rgba(255, 167, 38, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 25px rgba(255, 167, 38, 0.9);
  }
}

/* ========================================
   SMOOTH SCROLLBARS
   ======================================== */

.control-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(78, 205, 196, 0.4) transparent;
}

.control-panel::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

.control-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin: 8px 0;
}

.control-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(78, 205, 196, 0.6),
    rgba(69, 183, 209, 0.6)
  );
  border-radius: 4px;
  transition: all 0.3s ease;
}

.control-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(78, 205, 196, 0.9),
    rgba(69, 183, 209, 0.9)
  );
}

/* ========================================
   CANVAS STYLING
   ======================================== */

#canvas {
  border: 2px solid rgba(78, 205, 196, 0.3) !important;
  box-shadow: 
    0 20px 50px rgba(0,0,0,0.4),
    0 0 40px rgba(78, 205, 196, 0.2) !important;
  transition: all 0.3s ease;
}

#canvas:hover {
  box-shadow: 
    0 25px 60px rgba(0,0,0,0.5),
    0 0 50px rgba(78, 205, 196, 0.3) !important;
}

/* ========================================
   COLOR PICKER ENHANCEMENT
   ======================================== */

.control-color-picker {
  background: linear-gradient(
    145deg,
    rgba(42, 42, 64, 0.9),
    rgba(31, 31, 53, 0.9)
  ) !important;
  border: 2px solid rgba(255,255,255,0.25) !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;
}

.control-color-picker:hover {
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 15px rgba(78, 205, 196, 0.4) !important;
  transform: scale(1.05);
}

.control-color-picker:focus {
  border-color: #4ecdc4 !important;
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.6) !important;
}

/* ========================================
   NOTIFICATION ENHANCEMENT
   ======================================== */

.notification {
  backdrop-filter: blur(20px) !important;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
}

/* ========================================
   CONTEXT MENU ENHANCEMENT
   ======================================== */

.context-menu {
  background: rgba(42, 42, 64, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.context-menu-item {
  transition: all 0.2s ease !important;
  font-weight: 500;
}

.context-menu-item:hover {
  background: linear-gradient(
    90deg,
    rgba(78, 205, 196, 0.25) 0%,
    rgba(78, 205, 196, 0.15) 100%
  ) !important;
  padding-left: 20px !important;
}

/* ========================================
   MEDIA INFO ENHANCEMENT
   ======================================== */

.media-info {
  background: rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(78, 205, 196, 0.15);
  font-weight: 500;
}

/* ========================================
   FILTER CONTROLS ENHANCEMENT
   ======================================== */

.filter-controls {
  background: rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(78, 205, 196, 0.15) !important;
}

/* ========================================
   SPECIAL CONTROL GROUPS
   ======================================== */

.filter-group {
  background: linear-gradient(
    145deg,
    rgba(42, 64, 40, 0.7),
    rgba(31, 53, 29, 0.7)
  ) !important;
  border: 1px solid rgba(78, 205, 196, 0.25) !important;
}

.selection-group {
  background: linear-gradient(
    145deg,
    rgba(64, 48, 40, 0.7),
    rgba(53, 31, 29, 0.7)
  ) !important;
  border: 1px solid rgba(255, 196, 78, 0.25) !important;
}

.preset-group {
  background: linear-gradient(
    145deg,
    rgba(42, 54, 64, 0.7),
    rgba(31, 43, 53, 0.7)
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for smooth animations */
.control-group,
.control-button,
.control-slider::-webkit-slider-thumb,
.control-slider::-moz-range-thumb,
.file-upload-area,
.canvas-drop-zone {
  will-change: transform, opacity;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

*:focus-visible {
  outline: 2px solid #4ecdc4 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

button:focus-visible {
  outline-offset: 4px !important;
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 900px) {
  .control-group {
    padding: 15px;
  }
  
  .control-button {
    padding: 10px 16px;
    font-size: 11px;
  }
  
  .panel-title {
    font-size: 28px !important;
  }
}

/* ========================================
   FINAL POLISH
   ======================================== */

/* Subtle texture overlay for depth */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 35px,
      rgba(255, 255, 255, 0.008) 35px,
      rgba(255, 255, 255, 0.008) 70px
    );
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Ensure interactive elements are above texture */
.studio-container {
  position: relative;
  z-index: 2;
}