#config-builder{--cb-accent: var(--sl-color-accent);--cb-accent-hi: var(--sl-color-accent-high);--cb-accent-lo: color-mix(in srgb, var(--sl-color-accent) 10%, transparent);--cb-accent-md: color-mix(in srgb, var(--sl-color-accent) 22%, transparent);--cb-accent-15: color-mix(in srgb, var(--sl-color-accent) 15%, transparent);--cb-bg: var(--sl-color-bg);--cb-surface: var(--sl-color-bg-sidebar);--cb-border: var(--sl-color-gray-5);--cb-text: var(--sl-color-text);--cb-muted: var(--sl-color-gray-3);--cb-mono: var(--sl-font-mono, monospace);--cb-radius: 10px;--cb-radius-sm: 8px;font-family:var(--sl-font-system, system-ui, sans-serif);font-size:var(--sl-text-sm);margin:1.5rem 0}#config-builder :is(.cb-main,.cb-presets-row,.cb-use-case-list,.cb-picker-columns,.cb-column,.cb-column-header,.cb-picker-grid,.cb-output-section,.cb-output-header,.cb-output-actions,.cb-transform-body,.cb-transform-summary,.cb-arrow-col,.cb-arrow-wrap)>*{margin-top:0!important}.cb-status{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:2.5rem;color:var(--cb-muted);font-size:var(--sl-text-sm)}.cb-spinner{display:inline-block;width:1.1em;height:1.1em;border:2px solid var(--cb-border);border-top-color:var(--cb-accent);border-radius:50%;animation:cb-spin .7s linear infinite;flex-shrink:0}@keyframes cb-spin{to{transform:rotate(360deg)}}.cb-main{display:flex;flex-direction:column;gap:1.25rem}.cb-section-label{font-size:var(--sl-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cb-muted);white-space:nowrap}.cb-presets-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.cb-use-case-list{display:flex;flex-wrap:wrap;gap:.5rem}.cb-preset-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:999px;border:1.5px solid var(--cb-border);background:transparent;color:var(--cb-text);cursor:pointer;font-size:var(--sl-text-xs);font-family:inherit;font-weight:500;transition:border-color .15s,background .15s,color .15s;line-height:1.4}.cb-preset-btn:hover{border-color:var(--cb-accent);background:var(--cb-accent-lo);color:var(--cb-accent-hi)}.cb-preset-btn.cb-active{border-color:var(--cb-accent);background:var(--cb-accent-15);color:var(--cb-accent-hi);font-weight:600}.cb-preset-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.6;flex-shrink:0}.cb-picker-columns{display:grid;grid-template-columns:1fr 80px 1fr;gap:0;align-items:start}.cb-column{border:1px solid var(--cb-border);border-radius:var(--cb-radius);overflow:hidden;background:var(--cb-surface)}.cb-column-header{display:flex;flex-direction:column;gap:.2rem;padding:.75rem 1rem .6rem;border-bottom:1px solid var(--cb-border)}.cb-column-role{font-size:var(--sl-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cb-muted);line-height:1}.cb-column-sub{font-size:var(--sl-text-xs);color:var(--cb-muted);line-height:1.3}.cb-arrow-col{display:flex;align-items:center;justify-content:center;padding-top:3.5rem}.cb-arrow-wrap{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--cb-accent-md)}.cb-arrow-svg{width:22px;height:22px;color:var(--cb-accent);flex-shrink:0}.cb-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.35rem;padding:.5rem}.cb-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;padding:.5rem .35rem;border-radius:var(--cb-radius-sm);border:1px solid var(--cb-border);background:var(--cb-bg);color:var(--cb-text);cursor:pointer;font-family:inherit;font-size:.68rem;font-weight:500;line-height:1.25;text-align:center;transition:border-color .15s,background .15s,color .15s,transform .15s,box-shadow .15s}.cb-tile:hover{border-color:var(--cb-accent);background:var(--cb-accent-lo);color:var(--cb-accent);transform:translateY(-2px)}.cb-tile.cb-selected{border-color:var(--cb-accent);background:var(--cb-accent-md);color:var(--cb-accent);font-weight:700;box-shadow:0 0 0 2px var(--cb-accent);transform:translateY(-1px)}.cb-tile-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--cb-accent);flex-shrink:0}.cb-tile-icon svg{width:26px;height:26px}.cb-config-panel{border-top:1px solid var(--cb-border);padding:.6rem .6rem .5rem;display:flex;flex-direction:column;gap:.4rem}.cb-config-panel:empty{display:none}.cb-config-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cb-muted);margin-bottom:.1rem}.cb-config-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.4rem .5rem}.cb-config-label{font-size:.68rem;font-weight:600;color:var(--cb-text);white-space:nowrap}.cb-config-input{font-size:.68rem;font-family:var(--cb-mono);padding:.2rem .4rem;border:1px solid var(--cb-border);border-radius:4px;background:var(--cb-bg);color:var(--cb-text);width:100%;box-sizing:border-box;min-width:0}.cb-config-input:focus{outline:none;border-color:var(--cb-accent);box-shadow:0 0 0 1px var(--cb-accent)}select.cb-config-input{cursor:pointer}.cb-transform-details{border:1px solid var(--cb-border);border-radius:var(--cb-radius);overflow:hidden;background:var(--cb-surface)}.cb-transform-summary{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;cursor:pointer;list-style:none;user-select:none;font-weight:600;font-size:var(--sl-text-sm);transition:background .15s}.cb-transform-summary::-webkit-details-marker{display:none}.cb-transform-summary::marker{display:none}.cb-transform-summary:hover{background:var(--cb-accent-lo);color:var(--cb-accent-hi)}.cb-transform-icon{width:16px;height:16px;color:var(--cb-accent);flex-shrink:0}.cb-optional{font-weight:400;color:var(--cb-muted);font-size:var(--sl-text-xs)}.cb-summary-chevron{width:14px;height:14px;color:var(--cb-muted);margin-left:auto;transition:transform .2s ease;flex-shrink:0}.cb-transform-details[open] .cb-summary-chevron{transform:rotate(180deg)}.cb-transform-body{border-top:1px solid var(--cb-border)}.cb-sql-editor{display:block;width:100%;box-sizing:border-box;padding:.75rem 1rem;font-family:var(--cb-mono);font-size:var(--sl-text-sm);background:var(--cb-bg);color:var(--cb-text);border:none;resize:vertical;min-height:90px;line-height:1.55}.cb-sql-editor:focus{outline:none;box-shadow:inset 0 0 0 2px var(--cb-accent)}.cb-sql-hint{padding:.4rem 1rem .6rem;font-size:var(--sl-text-xs);color:var(--cb-muted);background:var(--cb-surface);border-top:1px solid var(--cb-border);margin:0}.cb-output-section{border:1px solid var(--cb-border);border-radius:var(--cb-radius);overflow:hidden}.cb-output-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem .875rem;background:var(--cb-surface);border-bottom:1px solid var(--cb-border);gap:.5rem;flex-wrap:wrap}.cb-output-title{font-weight:600;font-size:var(--sl-text-sm)}.cb-output-actions{display:flex;align-items:center;gap:.5rem}.cb-yaml-pre{margin:0;padding:.875rem;background:var(--cb-bg);overflow-x:auto;font-size:var(--sl-text-xs);line-height:1.65}.cb-yaml-pre code{font-family:var(--cb-mono);color:var(--cb-text);white-space:pre}.cb-validation-msg{padding:.5rem .875rem;font-size:var(--sl-text-xs);font-family:var(--cb-mono);background:color-mix(in srgb,var(--sl-color-red) 8%,transparent);color:var(--sl-color-red);border-top:1px solid color-mix(in srgb,var(--sl-color-red) 30%,transparent)}.cb-btn{padding:.3rem .7rem;border-radius:var(--cb-radius-sm);border:1.5px solid transparent;cursor:pointer;font-size:var(--sl-text-xs);font-family:inherit;font-weight:500;transition:opacity .15s,transform .1s}.cb-btn:hover{opacity:.85}.cb-btn:active{transform:scale(.97)}.cb-btn-primary{background:var(--cb-accent);color:var(--sl-color-white)}.cb-btn-secondary{background:var(--cb-surface);color:var(--cb-text);border-color:var(--cb-border)}.cb-badge{font-size:var(--sl-text-xs);padding:.15rem .5rem;border-radius:999px;font-weight:600;display:none}.cb-badge.cb-valid{display:inline;background:color-mix(in srgb,var(--sl-color-green) 12%,transparent);color:var(--sl-color-green)}.cb-badge.cb-invalid{display:inline;background:color-mix(in srgb,var(--sl-color-red) 12%,transparent);color:var(--sl-color-red)}@media(max-width:700px){.cb-picker-columns{grid-template-columns:1fr;gap:.75rem}.cb-arrow-col{padding-top:0}.cb-arrow-wrap{transform:rotate(90deg)}.cb-picker-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}@media(prefers-reduced-motion:reduce){.cb-tile,.cb-tile:hover,.cb-tile.cb-selected{transform:none!important}}