:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* Scrollbar minimale stile TypeShot */
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c-track); border-radius: 2px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(32 7% 36%); }

/* Focus per l'accessibilità (navigazione da tastiera) */
:focus-visible { outline: 2px solid #a3a3a3; outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) { outline: none; }

/* Rimuovi la freccetta nativa bruttina per le select */
select { -webkit-appearance: none; appearance: none; }

/* Custom Range Sliders */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 12px; width: 12px; border-radius: 50%;
  background: #ffffff; cursor: pointer; margin-top: -5px;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--c-track);
}
input[type="range"]::-moz-range-track {
  width: 100%; height: 2px; cursor: pointer; background: var(--c-track); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ffffff; border: 0; cursor: pointer;
}
input[type="range"]:disabled { opacity: 0.3; cursor: not-allowed; }

/* Custom Color Inputs (Nel caso ti servissero in futuro) */
.color-input {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border: 1px solid var(--c-track);
  border-radius: 4px; padding: 0; cursor: pointer;
  background: none; flex-shrink: 0;
}
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.color-input::-moz-color-swatch { border: none; border-radius: 2px; }

/* ========================================
Aggiunte specifiche per Retro Image Processor 
========================================
*/

/* Gestione dei cursori per il pan/zoom nel canvas */
#canvasWrap { cursor: default; }
#canvasWrap.can-pan { cursor: grab; }
#canvasWrap.can-pan.dragging { cursor: grabbing; }

/* Stile per i link di download (video/gif) */
#vidDownload, #recDownload { 
  text-decoration: underline; 
  cursor: pointer; 
  color: var(--c-sec); 
  transition: color 0.2s ease;
}
#vidDownload:hover, #recDownload:hover { 
  color: var(--c-white); 
}

#canvasWrap canvas { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }