.wpd-button-generator{max-width:800px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}.wpd-tabs{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:2rem}.wpd-tab{padding:1rem 1.5rem;border:none;background:none;cursor:pointer;color:#6b7280;font-weight:500;font-size:.875rem;border-bottom:2px solid #fff0;transition:all 0.2s;text-transform:uppercase;letter-spacing:.5px}.wpd-tab:hover{color:#3b82f6}.wpd-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.wpd-controls{background:#f8fafc;padding:2rem;border-radius:.75rem;margin-bottom:2rem}.wpd-control-group{margin-bottom:1.5rem}.wpd-control-group:last-child{margin-bottom:0}.wpd-control-label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:#374151}.wpd-control-input{width:100%;padding:.5rem;border:1px solid #e5e7eb;border-radius:.375rem;background:#fff}.wpd-color-input-wrapper{display:flex;gap:8px;align-items:center}input[type="color"].wpd-control-input{width:50px;height:40px;padding:0;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer}.wpd-color-text{flex:1;height:40px;padding:8px;border:1px solid #e5e7eb;border-radius:4px;font-family:monospace}input[type="range"].wpd-control-input{width:100%;height:6px;background:#e5e7eb;border-radius:3px;appearance:none;-webkit-appearance:none;margin:10px 0;padding:0}input[type="range"].wpd-control-input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;background:#3b82f6;border-radius:50%;cursor:pointer;transition:background 0.2s}input[type="range"].wpd-control-input::-webkit-slider-thumb:hover{background:#2563eb}input[type="range"].wpd-control-input::-moz-range-thumb{width:18px;height:18px;background:#3b82f6;border:none;border-radius:50%;cursor:pointer;transition:background 0.2s}input[type="range"].wpd-control-input::-moz-range-thumb:hover{background:#2563eb}.wpd-presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.wpd-preset{background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;cursor:pointer;transition:all 0.2s}.wpd-preset:hover{border-color:#3b82f6;box-shadow:0 4px 6px -1px rgb(0 0 0 / .1)}.wpd-preset h3{margin:0 0 .75rem 0;font-size:.875rem;color:#374151}.wpd-preset button{width:60%;min-height:15px;border:none;cursor:pointer;transition:all 0.2s}.wpd-preview{background:#f8fafc;padding:3rem;border-radius:.75rem;margin-bottom:2rem;display:flex;justify-content:center;align-items:center}.wpd-preview button{min-width:200px;border:none;cursor:pointer;transition:all 0.2s}.wpd-code-display{background:#1e293b;color:#e2e8f0;padding:1.5rem;border-radius:.75rem;position:relative}.wpd-code-display pre,.wpd-code-display code{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;overflow-x:auto;background:#1e293b}.wpd-copy-button{position:absolute;top:1rem;right:1rem;background:#334155;color:#e2e8f0;border:none;padding:.5rem 1rem;border-radius:.375rem;font-size:.75rem;cursor:pointer;transition:all 0.2s}.wpd-copy-button:hover{background:#475569}