/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; 
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3); 
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5); 
}

/* Range Sliders */
.range-slider {
    -webkit-appearance: none;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    outline: none;
}
.dark .range-slider {
    background: #4b5563;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #8B6914; /* Sogan */
    cursor: pointer;
    transition: transform 0.1s;
}
.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.dark .range-slider::-webkit-slider-thumb {
    background: #F1C40F; /* Gold */
}

/* Base Styles */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Checkerboard background for transparent canvas visualization */
.checkerboard-bg {
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.05) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.05) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.dark .checkerboard-bg {
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%), 
        linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%), 
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Color inputs native wrapper hide */
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
    border-radius: 3px;
}