.gradient-preview-container{width:100%}.gradient-preview{width:100%;height:350px;box-shadow:0 1px 2px #0000000d;transition:all .3s ease}.gradient-preview:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.export-code-display{position:relative;background:#111827;padding:1.5rem;overflow-x:auto}.export-code-display pre{margin:40px 0 0}.export-code-display pre code{font-family:Consolas,Monaco,monospace;font-size:.8125rem;line-height:1.6;color:#111827}.code-actions{position:absolute;top:1rem;right:1rem;display:flex;gap:.5rem}.btn-copy-code{padding:.5rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.btn-copy-code:hover{background:#fff3}.btn-copy-code i{margin-right:.375rem}.gradient-controls{display:none}.gradient-controls.active{display:block}.color-stops-container{display:flex;flex-direction:column;gap:1rem}.color-stop{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#f3f4f6;border:1px solid #D1D5DB;transition:all .2s ease}.color-stop:hover{border-color:#6366f1;box-shadow:0 1px 2px #0000000d}.color-stop .color-stop-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.color-stop .color-input-group{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.color-stop .color-input-group .color-picker{width:38px;height:38px;border:0;cursor:pointer;padding:0;background:none}.color-stop .color-input-group .color-picker::-webkit-color-swatch-wrapper{padding:0}.color-stop .color-input-group .color-picker::-webkit-color-swatch{border:none;border-radius:2px}.color-stop .color-input-group .color-picker::-moz-color-swatch{border:none;border-radius:2px}.color-stop .color-input-group .color-picker:hover{border-color:#6366f1}.color-stop .color-input-group .color-hex{width:90px;text-align:center;font-family:JetBrains Mono,Fira Code,Menlo,Monaco,monospace;font-size:.875rem}.color-stop .btn-remove-stop{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0;color:#111827;cursor:pointer;transition:all .2s ease;flex-shrink:0;padding:0}.color-stop .btn-remove-stop:hover{background:#111827;color:#fff}.color-stop .btn-remove-stop i{font-size:.875rem}.color-stop .position-control{width:100%}.color-stop .position-control .position-slider{width:100%;margin-bottom:.25rem}.color-stop .position-control .position-labels{display:flex;justify-content:space-between;align-items:center;font-size:.75rem}.color-stop .position-control .position-labels .position-value{font-weight:600}.color-stop .position-control .position-labels .position-min,.color-stop .position-control .position-labels .position-max{color:#6b7280}.controls-actions{display:flex;gap:.75rem;margin-top:1.5rem}.controls-actions .btn-v2{flex:1}.toggle-buttons{display:flex;gap:.5rem;padding:.25rem}.toggle-buttons .toggle-btn{flex:1;padding:.5rem 1rem;background:transparent;border:none;color:#374151;font-weight:400;font-size:.9rem;cursor:pointer;transition:all .2s ease}.toggle-buttons .toggle-btn:hover{background:#6366f11a;color:#6366f1}.toggle-buttons .toggle-btn.active{background:#6366f1;color:#fff}.form-control-v2,.form-select,.form-range-v2{border-radius:0!important}#linearDirection,#radialShape,#radialPosition,#conicPosition{font-size:.9rem!important;font-weight:400!important}@media(max-width:768px){.gradient-preview{height:250px}.color-stop{flex-wrap:wrap}.color-stop .color-input-group,.color-stop .position-control{width:100%}.color-stop .btn-remove-stop{margin-left:auto}.controls-actions{flex-direction:column}.controls-actions .btn-v2{width:100%}}@media(max-width:576px){.gradient-preview{height:200px}.code-preview-section .code-actions{flex-direction:column}}@keyframes gradientFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.results-section{animation:gradientFadeIn .3s ease}.color-stop{animation:gradientFadeIn .2s ease}#infoModal .info-steps{font-size:.9rem;font-weight:100}#infoModal .info-steps li{margin-bottom:.5rem}#infoModal .info-description{font-size:.9rem;font-weight:100}