style.css

/* Base styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Box type button styles */
.box-type-btn {
    @apply flex items-center justify-center p-3 border border-gray-300 rounded-lg text-gray-700 transition;
}

.box-type-btn:hover {
    @apply bg-gray-100;
}

.box-type-btn.active {
    @apply bg-blue-500 text-white border-blue-500;
}

.box-type-btn.active:hover {
    @apply bg-blue-600;
}

/* Template card styles */
.template-card {
    @apply p-2 rounded-lg cursor-pointer transition hover:bg-gray-50;
}

.template-card:hover {
    @apply shadow-md;
}

/* Input range customization */
input[type="range"] {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-blue-500 rounded-full cursor-pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .box-type-btn {
        @apply p-2 text-sm;
    }
}