.gradient-generator{max-width:1200px;margin:0 auto;padding:2rem;font-family:Inter,system-ui,-apple-system,sans-serif;color:#333}.gradient-generator .app-header{text-align:center;margin-bottom:2rem}.gradient-generator .app-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(45deg,#ff5f6d,#ffc371);-webkit-background-clip:text;background-clip:text;color:rgba(0,0,0,0);display:inline-block}.gradient-generator .app-header p{color:#666;font-size:1.1rem}.gradient-generator .main-content{display:flex;flex-direction:column;gap:2rem}@media(min-width:768px){.gradient-generator .main-content{flex-direction:row}}.gradient-generator .preview-section{flex:1}.gradient-generator .preview-section h2{margin-top:0;margin-bottom:1rem;font-size:1.25rem;color:#444}.gradient-generator .preview-section .gradient-preview{width:100%;height:300px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.1);transition:all .3s ease}@media(min-width:768px){.gradient-generator .preview-section .gradient-preview{height:400px}}.gradient-generator .preview-section .preview-options{display:flex;gap:.5rem;margin-top:1rem}.gradient-generator .preview-section .preview-options .preview-btn{flex:1;padding:.75rem;border:1px solid #ddd;background:#fff;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease}.gradient-generator .preview-section .preview-options .preview-btn:hover{background:#f5f5f5}.gradient-generator .preview-section .preview-options .preview-btn.active{background:#333;color:#fff;border-color:#333}.gradient-generator .controls-section{flex:1;display:flex;flex-direction:column;gap:1.5rem}.gradient-generator .controls-section .control-group{background:#f9f9f9;padding:1.5rem;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.gradient-generator .controls-section .control-group h2{margin-top:0;margin-bottom:1rem;font-size:1.25rem;color:#444}.gradient-generator .controls-section .gradient-type-selector{display:flex;gap:.5rem}.gradient-generator .controls-section .gradient-type-selector button{flex:1;padding:.75rem;border:none;background:#eee;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s ease}.gradient-generator .controls-section .gradient-type-selector button:hover{background:#e0e0e0}.gradient-generator .controls-section .gradient-type-selector button.active{background:#333;color:#fff}.gradient-generator .controls-section label{display:block;margin-bottom:.5rem;font-weight:500}.gradient-generator .controls-section input[type=range]{width:100%;height:6px;background:#ddd;border-radius:3px;appearance:none}.gradient-generator .controls-section input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#333;border-radius:50%;cursor:pointer}.gradient-generator .controls-section .angle-visualizer{width:60px;height:60px;background:#f0f0f0;border-radius:50%;position:relative;margin:1rem auto}.gradient-generator .controls-section .angle-visualizer .angle-indicator{position:absolute;width:2px;height:30px;background:#333;top:0;left:50%;transform-origin:bottom center;border-radius:1px}.gradient-generator .controls-section .position-visualizer{width:80px;height:80px;background:#f0f0f0;border-radius:6px;position:relative;margin:1rem auto}.gradient-generator .controls-section .position-visualizer .position-indicator{position:absolute;width:12px;height:12px;background:#333;border-radius:50%;transform:translate(-50%,-50%)}.gradient-generator .controls-section select{width:100%;padding:.75rem;border-radius:6px;border:1px solid #ddd;background:#fff;margin-bottom:.5rem}.gradient-generator .controls-section .add-stop-btn{background:#4caf50;color:#fff;border:none;padding:.75rem 1rem;border-radius:6px;cursor:pointer;font-weight:500;margin-bottom:1rem;transition:background .2s ease}.gradient-generator .controls-section .add-stop-btn:hover{background:#45a049}.gradient-generator .controls-section .color-stops-container{display:flex;flex-direction:column;gap:1rem;max-height:300px;overflow-y:auto;padding-right:.5rem}.gradient-generator .controls-section .color-stops-container .color-stop{display:flex;align-items:center;gap:1rem;background:#fff;padding:.75rem;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,.05)}.gradient-generator .controls-section .color-stops-container .color-stop .color-picker{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer;padding:0;appearance:none;overflow:hidden}.gradient-generator .controls-section .color-stops-container .color-stop .color-picker::-webkit-color-swatch-wrapper{padding:0}.gradient-generator .controls-section .color-stops-container .color-stop .color-picker::-webkit-color-swatch{border:none;border-radius:4px}.gradient-generator .controls-section .color-stops-container .color-stop .position-control{flex:1}.gradient-generator .controls-section .color-stops-container .color-stop .position-control label{font-size:.85rem;color:#666;display:flex;flex-direction:column;gap:.5rem}.gradient-generator .controls-section .color-stops-container .color-stop .remove-stop-btn{background:#f44336;color:#fff;border:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;line-height:1;transition:background .2s ease}.gradient-generator .controls-section .color-stops-container .color-stop .remove-stop-btn:hover{background:#d32f2f}.gradient-generator .controls-section .code-output .code-display{position:relative;background:#282c34;border-radius:6px;overflow:hidden}.gradient-generator .controls-section .code-output .code-display pre{padding:1rem;margin:0;color:#e6e6e6;font-family:Fira Code,monospace;font-size:.9rem;white-space:pre-wrap;word-break:break-all}.gradient-generator .controls-section .code-output .code-display .copy-btn{position:absolute;top:.5rem;right:.5rem;background:hsla(0,0%,100%,.1);color:#e6e6e6;border:none;padding:.3rem .6rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease}.gradient-generator .controls-section .code-output .code-display .copy-btn:hover{background:hsla(0,0%,100%,.2)}.gradient-generator .controls-section .code-output .code-display .copy-btn.copied{background:#4caf50}