.badge-builder{display:flex;flex-direction:column;gap:1.5rem}.badge-builder-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;padding:1.5rem;border-radius:.75rem;background:var(--color-surface);border:1px solid var(--color-border)}.badge-builder-field{display:flex;flex-direction:column;gap:.375rem}.badge-builder-field--checkbox{flex-direction:row;align-items:center;gap:.5rem}.badge-builder-label{font-size:.8125rem;font-weight:600;color:var(--color-text-secondary)}.badge-builder-input,.badge-builder-select{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.5rem;background:var(--color-bg);color:var(--color-text);font-size:.875rem;transition:border-color .15s}.badge-builder-input:focus,.badge-builder-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-alpha)}.badge-builder-preview{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border-radius:.75rem;background:var(--color-surface);border:1px solid var(--color-border)}.badge-builder-section-title{font-size:.8125rem;font-weight:600;color:var(--color-text-secondary);margin:0}.badge-builder-badge-display{display:flex;align-items:center;min-height:2rem}.badge-builder-code-block{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.5rem;background:var(--color-bg);border:1px solid var(--color-border)}.badge-builder-code-block pre{flex:1;margin:0;overflow-x:auto}.badge-builder-code-block code{font-size:.8125rem;color:var(--color-text);word-break:break-all;white-space:pre-wrap}.badge-builder-copy-btn{flex-shrink:0;padding:.375rem .75rem;border-radius:.375rem;border:1px solid var(--color-border);background:var(--color-surface-elevated);color:var(--color-text);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s}.badge-builder-copy-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}