.roi-canvas-wrap {
    position: relative;
    background: repeating-conic-gradient(#e9ecef 0% 25%, #f8f9fa 0% 50%) 50% / 20px 20px;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 60vh;
    border: 1px solid #e2e8f0;
}

.roi-canvas-wrap canvas {
    max-width: 100% !important;
    max-height: 55vh !important;
    width: auto !important;
    height: auto !important;
    display: block;
    touch-action: none;
    user-select: none;
}

.roi-toolbar .btn {
    flex-shrink: 0;
}

.roi-aspect-badge {
    font-size: 0.72rem;
    color: var(--secondary-color, #6c757d);
    background: var(--primary-light, #e0f2f1);
    border-radius: 2rem;
    padding: 0.25rem 0.75rem;
}

.roi-mask-switch .form-check-input {
    cursor: pointer;
}
.roi-mask-switch .form-check-input:checked {
    background-color: var(--primary-color, #01696f);
    border-color: var(--primary-color, #01696f);
}

.roi-file-badge {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}
.roi-file-badge.done {
    background: var(--primary-light, #e0f2f1);
    color: var(--primary-color, #01696f);
}
.roi-file-badge.pending {
    background: #fff3cd;
    color: #997404;
}

.roi-thumb {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    object-fit: cover !important;
    border-radius: 0.375rem !important;
    border: 1px solid #dee2e6 !important;
    background: #ffffff !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.roi-thumb-empty {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 0.375rem !important;
    border: 2px dashed #ced4da !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #adb5bd !important;
    background: #f8f9fa !important;
    flex-shrink: 0 !important;
}