.aci-builder { padding: 20px 0; }
.aci-builder-head { max-width: 760px; margin-bottom: 24px; }
.aci-builder-head h1 { margin: 0 0 8px; color: var(--color-cta); font-family: var(--font-heading); }
.aci-builder-head p { margin: 0; }
.aci-builder-grid { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 24px; }
.aci-builder-controls, .aci-builder-preview { padding: 18px; border: 1px solid var(--border-color); border-radius: 10px; background: rgba(0,0,0,.14); }
.aci-builder-controls { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.aci-builder-controls label, .aci-code-label { display: grid; gap: 6px; font-size: .82rem; font-weight: 700; }
.aci-builder-controls select, .aci-builder-controls input[type=color], #widget-code { width: 100%; border: 1px solid var(--border-color); border-radius: 6px; background: #121218; color: var(--color-text); padding: 9px; }
.aci-builder-controls input[type=color] { height: 42px; padding: 4px; cursor: pointer; }
.aci-builder-controls output { color: var(--color-neutral); font-size: .75rem; }
.aci-builder-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.aci-builder-preview h2 { margin-top: 0; font-size: 1rem; }
.aci-preview-frame-wrap { max-width: 560px; margin: 0 auto 20px; }
#widget-preview { display: block; width: 100%; border: 0; border-radius: 8px; background: #121212; }
#widget-code { resize: vertical; margin: 7px 0 10px; font-family: monospace; font-size: .75rem; }
.aci-copy-status { min-height: 1.4em; margin-top: 6px; color: var(--color-up); font-size: .8rem; }
.aci-widget-share-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--color-cta); font-weight: 700; text-decoration: none; }
.aci-widget-share-link:hover { text-decoration: underline; }
@media (max-width: 768px) { .aci-builder-grid { grid-template-columns: 1fr; } .aci-builder { padding-top: 8px; } }