/* Custom styles for QR Studio */
@layer utilities {
  .checkerboard-bg {
    background-color: #0f172a;
    background-image:
      linear-gradient(45deg, #1e293b 25%, transparent 25%),
      linear-gradient(-45deg, #1e293b 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #1e293b 75%),
      linear-gradient(-45deg, transparent 75%, #1e293b 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Smooth active states */
.tab-btn.active {
  color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.12) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

.pos-btn.active {
  border-color: #3b82f6 !important;
  color: #60a5fa !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

.preset-card:active {
  transform: scale(0.98);
}

/* Range input styling */
input[type="range"] {
  accent-color: #3b82f6;
}

/* Modal transitions */
.animate-in {
  animation: modalFadeIn 0.15s ease-out forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}