/* Custom styles alongside Tailwind */

.unit-btn.active {
    background-color: #2563eb; /* brand-600 */
    color: white;
    border-color: #2563eb;
}

.unit-btn:not(.active) {
    background-color: white;
    color: #374151; /* gray-700 */
    border-color: #d1d5db; /* gray-300 */
}

/* Cropper custom styling for modern look */
.cropper-view-box,
.cropper-face {
    border-radius: 4px;
}

.cropper-line {
    background-color: #3b82f6;
}

.cropper-point {
    background-color: #3b82f6;
    width: 8px;
    height: 8px;
}

.cropper-bg {
    background-image: none;
    background-color: #111827; /* Dark background for editor */
}