body {
    font-family: 'Poppins', sans-serif;
}
input[type="color"] {
    -webkit-appearance: none; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 0.5rem; }
.icon-btn { border: 2px solid transparent; transition: all 0.2s ease-in-out; }
.control-label { display: block; text-align: center; font-size: 0.875rem; color: #d1d5db; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.file-input-btn {
    background-color: #374151; border: 1px solid #4b5563; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer;
}
.layer-item {
    background-color: #374151; border: 2px solid #4b5563; transition: all 0.2s;
}
.layer-item.selected {
    border-color: #22d3ee; background-color: #4b5563;
}
.layer-item.dragging {
    opacity: 0.5;
}
.layer-item.drag-over {
    border-top: 2px solid #38bdf8;
}
.layer-preview-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.layer-preview-icon svg {
    width: 100%;
    height: 100%;
    fill: #9ca3af;
}
.radio-label {
     padding: 0.25rem 0.75rem; border: 1px solid #4b5563; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease-in-out; font-size: 0.875rem;
}
.radio-label:has(input:checked) { background-color: #22d3ee; color: #111827; border-color: #22d3ee; }
/* Custom Scrollbar for Controls Column */
.controls-column::-webkit-scrollbar {
    width: 8px;
}
.controls-column::-webkit-scrollbar-track {
    background: transparent;
}
.controls-column::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-radius: 20px;
    border: 2px solid #1f2937;
}
/* SEO: Add styles for new content sections */
.content-section h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #22d3ee;
    margin-bottom: 1rem;
    border-bottom: 2px solid #374151;
    padding-bottom: 0.5rem;
}
.content-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #9ca3af;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.content-section p, .content-section ul {
    color: #d1d5db;
    line-height: 1.75;
}
.content-section ul {
    list-style-position: inside;
    list-style-type: disc;
}

