.builder-design { margin: 32px 0; padding: 24px; border: 1px solid #dedbd5; border-radius: 12px; scroll-margin-top: 24px; }
.builder-design-intro { max-width: 720px; margin: 12px 0 24px; font-size: 14px; line-height: 1.7; color: #57534e; }
.builder-design-form { display: grid; gap: 24px; }
.builder-design-form fieldset { min-width: 0; }
.builder-design-form legend { font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.builder-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); gap: 12px; max-height: 600px; overflow-y: auto; padding: 3px; }
.builder-theme-option { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #d6d3d1; border-radius: 8px; cursor: pointer; min-width: 0; background: white; color: #292524; }
.builder-theme-option:has(input:checked) { border-color: #9a3412; outline: 2px solid #9a3412; outline-offset: 0; }
.builder-theme-option input { align-self: start; accent-color: #9a3412; }
.builder-theme-option:focus-within { outline: 3px solid #244cdd; outline-offset: 2px; }
.builder-theme-name { font-size: 14px; font-weight: 650; }.builder-theme-name > span { font-size: 11px; margin-right: 5px; color: #57534e; }
.builder-theme-option small { font-size: 12px; line-height: 1.5; color: #57534e; }
.builder-theme-sample { display: grid; align-content: start; gap: 7px; padding: 12px; min-height: 128px; background: var(--sample-background); color: var(--sample-ink); overflow: hidden; }
.builder-sample-nav { height: 5px; width: 65%; background: var(--sample-ink); opacity: .6; }
.builder-sample-title { font-family: var(--sample-heading-font, inherit); font-size: 19px; line-height: 1.1; font-weight: 750; margin-top: 5px; }
.builder-sample-button { height: 9px; width: 46%; background: var(--sample-accent); }.builder-sample-lines { height: 16px; margin-top: 5px; border-top: 2px solid var(--sample-ink); background: var(--sample-surface); }
.builder-sample-editorial .builder-sample-title { font-weight: 400; }
.builder-sample-centered, .builder-sample-arched { text-align: center; justify-items: center; }.builder-sample-playful { border-radius: 18px; }.builder-sample-signage .builder-sample-title { text-transform: uppercase; }.builder-sample-sidebar { padding-left: 36px; border-left: 24px solid var(--sample-accent); }
.builder-design-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; margin-top: 16px; }.builder-design-fields label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }.builder-design-fields select { width: 100%; }
.builder-color-field { display: flex; gap: 8px; }.builder-color-field input[type=color] { width: 42px; height: 38px; padding: 3px; border: 1px solid #a8a29e; border-radius: 5px; flex-shrink: 0; }.builder-color-field input[type=text] { min-width: 0; width: 100%; }
.builder-design-preview { margin-top: 24px; border: 1px solid #dedbd5; border-radius: 8px; overflow: hidden; }.builder-design-preview > summary { padding: 16px; cursor: pointer; font-size: 14px; font-weight: 600; }.builder-design-preview .builder-preview-shell { background: #e9e8e3; min-height: 650px; }.builder-design-preview .builder-canvas-bar { height: auto; min-height: 52px; flex-wrap: wrap; font-size: 12px; }.builder-design-preview .builder-canvas-bar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media(max-width: 600px) { .builder-design { padding: 16px; }.builder-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.builder-theme-option { padding: 10px; }.builder-theme-sample { padding: 8px; }.builder-sample-title { font-size: 16px; } }