/* Reset base richiesto */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* Scrollbar personalizzata */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--c-track); /* neutral-700 */
    border-radius: 10px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--c-muted); /* neutral-600 */
  }
  
  /* Stili degli Slider (<input type="range">) */
  input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 4px;
    border-radius: 2px;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--c-track); /* neutral-700 */
    border-radius: 2px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--c-white); /* white */
    cursor: pointer;
    margin-top: -4px;
    transition: transform 0.1s;
  }
  input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
  }
  input[type="range"]:focus {
    outline: none;
  }
  input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px var(--c-sec); /* focus ring - neutral-400 */
  }
  
  /* Toast logic */
  #toast {
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #toast.show {
    opacity: 1;
  }
  
  /* Formato pulsanti */
  .btn-format.active {
    background-color: var(--c-border); /* neutral-800 */
    border-color: var(--c-muted); /* neutral-600 */
    color: var(--c-white);
  }

  /* Canvas responsiveness */
  canvas {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 4px;
  }