body {
    background-color: #f0f2f5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.card {
    border: none;
    border-radius: 12px;
}

.accordion-button:not(.collapsed) {
    color: #0d6efd;
    background-color: #e7f1ff;
}

.accordion-item {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.form-control-color {
    width: 100%;
    height: 40px;
    padding: .375rem;
}

#canvas {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-bottom: 1rem;
}

#canvas canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px;
}

.sticky-top {
    top: 2rem; /* Add some space from the top */
}

.btn.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}