.theme-preview-tool {
    font-family: var(--bs-font-sans-serif);
}

.form-control-color {
    width: 3rem;
    height: 3rem;
    padding: 0.25rem;
}

.theme-preview {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.typography-preview h1,
.typography-preview h2,
.typography-preview h3,
.typography-preview h4,
.typography-preview h5,
.typography-preview h6 {
    margin: 0.5rem 0;
}

.buttons-preview {
    margin-bottom: 1rem;
}

.alerts-preview .alert {
    margin-bottom: 0.5rem;
}

.card-preview .card {
    margin-bottom: 1rem;
}

.form-preview .form-control,
.form-preview .form-select {
    margin-bottom: 0.5rem;
}

.theme-export-code {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    max-height: 300px;
    overflow-y: auto;
}

.color-swatch {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .theme-preview-tool .col-md-4,
    .theme-preview-tool .col-md-8 {
        margin-bottom: 1rem;
    }
}