.bg-canvas-tool[data-v-2afd207b]{gap:1.5rem}.bg-canvas-tool[data-v-2afd207b],.controls-panel[data-v-2afd207b]{display:flex;flex-direction:column}.controls-panel[data-v-2afd207b]{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);gap:1.25rem;padding:1.25rem}.control-group[data-v-2afd207b]{display:flex;flex-direction:column;gap:.5rem}.control-label[data-v-2afd207b]{color:var(--text-secondary);font-size:.875rem;font-weight:500}.control-row[data-v-2afd207b]{display:flex;flex-wrap:wrap;gap:1.5rem}.control-row .control-group[data-v-2afd207b]{flex:1;min-width:180px}.pattern-grid[data-v-2afd207b]{display:flex;flex-wrap:wrap;gap:.5rem}.pattern-btn[data-v-2afd207b]{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;font-size:.8125rem;padding:.375rem .75rem;transition:all .15s}.pattern-btn[data-v-2afd207b]:hover{border-color:var(--accent);color:var(--accent-text)}.pattern-btn.active[data-v-2afd207b]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.color-row[data-v-2afd207b]{align-items:center;display:flex;gap:.625rem}.color-input[data-v-2afd207b]{cursor:pointer;height:2.5rem;padding:2px;width:2.5rem}.color-input[data-v-2afd207b],.text-input[data-v-2afd207b]{background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-md)}.text-input[data-v-2afd207b]{color:var(--text-primary);flex:1;font-family:monospace;font-size:.875rem;padding:.375rem .625rem}.text-input[data-v-2afd207b]:focus{border-color:var(--accent);outline:none}.range-input[data-v-2afd207b]{accent-color:var(--accent);cursor:pointer;width:100%}.preview-section[data-v-2afd207b]{display:flex;flex-direction:column;gap:.5rem}.preview-label[data-v-2afd207b]{color:var(--text-secondary);font-size:.875rem;font-weight:500}.preview-box[data-v-2afd207b]{align-items:center;border:1px solid var(--border);border-radius:var(--radius-md);display:flex;height:300px;justify-content:center}.preview-text[data-v-2afd207b]{background:#00000059;border-radius:4px;color:#fff;font-size:.875rem;padding:.25rem .75rem;pointer-events:none}.output-section[data-v-2afd207b]{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.output-header[data-v-2afd207b]{align-items:center;background:var(--bg-subtle);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:.625rem 1rem}.output-label[data-v-2afd207b]{color:var(--text-primary);font-size:.875rem;font-weight:600}.copy-btn[data-v-2afd207b]{background:var(--accent);border:none;border-radius:var(--radius-md);color:var(--on-accent);cursor:pointer;font-size:.8125rem;font-weight:500;padding:.3rem .875rem;transition:opacity .15s}.copy-btn[data-v-2afd207b]:hover{opacity:.85}.css-output[data-v-2afd207b]{background:var(--bg-base);color:var(--text-primary);font-family:monospace;font-size:.875rem;line-height:1.6;margin:0;padding:1rem;white-space:pre-wrap;word-break:break-all}