.gradient-generator[data-v-2ae0451a]{min-height:100vh;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);padding:12rem 2rem 6rem}.gradient-generator .header-gradient[data-v-2ae0451a]{text-align:center;margin-bottom:37.5px}.gradient-generator .header-gradient h1[data-v-2ae0451a]{color:#161b40;font-size:3.125rem;margin-bottom:12.5px;font-weight:700}.gradient-generator .header-gradient p[data-v-2ae0451a]{color:#666;font-size:1.5rem;margin:0}.gradient-generator .container[data-v-2ae0451a]{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:350px 1fr;gap:37.5px;align-items:start}.gradient-generator .control-panel[data-v-2ae0451a]{background:white;padding:31.25px;border-radius:8px;box-shadow:0 2px 10px #0000001a;height:fit-content}.gradient-generator .control-panel .section[data-v-2ae0451a]{margin-bottom:31.25px}.gradient-generator .control-panel .section h3[data-v-2ae0451a]{color:#161b40;font-size:1.5rem;margin:0 0 18.75px;font-weight:600}.gradient-generator .control-panel .section[data-v-2ae0451a]:last-child{margin-bottom:0}.gradient-generator .control-panel .gradient-types[data-v-2ae0451a]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gradient-generator .control-panel .gradient-types .type-btn[data-v-2ae0451a]{padding:.75rem;border:2px solid #E0E5F2;background:white;border-radius:4px;cursor:pointer;transition:all .3s ease;font-size:1.3rem;font-weight:500}.gradient-generator .control-panel .gradient-types .type-btn[data-v-2ae0451a]:hover{border-color:#43bee5;transform:translateY(-1px)}.gradient-generator .control-panel .gradient-types .type-btn.active[data-v-2ae0451a]{background:#43BEE5;color:#fff;border-color:#43bee5}.gradient-generator .control-panel .direction-controls[data-v-2ae0451a]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gradient-generator .control-panel .direction-controls .direction-btn[data-v-2ae0451a]{padding:.5rem .75rem;border:2px solid #E0E5F2;background:white;border-radius:4px;cursor:pointer;transition:all .3s ease;font-size:1.3rem}.gradient-generator .control-panel .direction-controls .direction-btn small[data-v-2ae0451a]{font-size:.8em}.gradient-generator .control-panel .direction-controls .direction-btn[data-v-2ae0451a]:hover{border-color:#43bee5;transform:translateY(-1px)}.gradient-generator .control-panel .direction-controls .direction-btn.active[data-v-2ae0451a]{background:#43BEE5;color:#fff;border-color:#43bee5}.gradient-generator .control-panel .color-inputs .color-item[data-v-2ae0451a]{margin-bottom:18.75px}.gradient-generator .control-panel .color-inputs .color-item label[data-v-2ae0451a]{display:block;font-size:1.3rem;color:#161b40;font-weight:500;margin-bottom:6.25px}.gradient-generator .control-panel .color-inputs .color-item .color-input-group[data-v-2ae0451a]{display:flex;gap:10px;align-items:center}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .color-picker[data-v-2ae0451a]{width:50px;height:50px;border:none;border-radius:4px;cursor:pointer;transition:transform .3s ease}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .color-picker[data-v-2ae0451a]:hover{transform:scale(1.05)}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .color-text[data-v-2ae0451a]{flex:1;padding:12.5px;border:2px solid #E0E5F2;border-radius:4px;font-family:monospace;font-size:1.3rem;transition:border-color .3s ease}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .color-text[data-v-2ae0451a]:focus{outline:none;border-color:#43bee5}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .remove-btn[data-v-2ae0451a]{padding:12.5px 15px;background:#F40058;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:all .3s ease}.gradient-generator .control-panel .color-inputs .color-item .color-input-group .remove-btn[data-v-2ae0451a]:hover{background:#e0004a;transform:translateY(-1px)}.gradient-generator .control-panel .color-inputs .add-color-btn[data-v-2ae0451a]{width:100%;padding:15px;background:#EFA500;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1.3rem;font-weight:500;transition:all .3s ease}.gradient-generator .control-panel .color-inputs .add-color-btn[data-v-2ae0451a]:hover{background:#d99b00;transform:translateY(-1px)}.gradient-generator .control-panel .preset-gradients[data-v-2ae0451a]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.gradient-generator .control-panel .preset-gradients .preset-btn[data-v-2ae0451a]{padding:.65rem .75rem;background:#E0E5F2;color:#161b40;border:none;border-radius:4px;cursor:pointer;font-size:1.3rem;transition:all .3s ease}.gradient-generator .control-panel .preset-gradients .preset-btn[data-v-2ae0451a]:hover{background:#43BEE5;color:#fff;transform:translateY(-1px)}.gradient-generator .preview-panel[data-v-2ae0451a]{background:white;padding:31.25px;border-radius:8px;box-shadow:0 2px 10px #0000001a}.gradient-generator .preview-panel .preview-section[data-v-2ae0451a]{margin-bottom:37.5px}.gradient-generator .preview-panel .preview-section h3[data-v-2ae0451a]{color:#161b40;font-size:1.5rem;margin:0 0 18.75px;font-weight:600}.gradient-generator .preview-panel .preview-section .gradient-preview[data-v-2ae0451a]{width:100%;height:250px;border-radius:8px;border:2px solid #E0E5F2;transition:all .3s ease}.gradient-generator .preview-panel .preview-section .gradient-preview.gradient-linear[data-v-2ae0451a],.gradient-generator .preview-panel .preview-section .gradient-preview.gradient-radial[data-v-2ae0451a],.gradient-generator .preview-panel .preview-section .gradient-preview.gradient-conic[data-v-2ae0451a],.gradient-generator .preview-panel .preview-section .gradient-preview.gradient-repeating-linear[data-v-2ae0451a],.gradient-generator .preview-panel .preview-section .gradient-preview.gradient-repeating-radial[data-v-2ae0451a]{background-clip:padding-box}.gradient-generator .preview-panel .code-section h3[data-v-2ae0451a]{color:#161b40;font-size:1.5rem;margin:0 0 18.75px;font-weight:600}.gradient-generator .preview-panel .code-section .code-container[data-v-2ae0451a]{position:relative;border:2px solid #E0E5F2;border-radius:4px;overflow:hidden}.gradient-generator .preview-panel .code-section .code-container pre[data-v-2ae0451a]{margin:0;padding:25px;background:#1a1a1a;color:#f8f8f2;font-family:Courier New,monospace;font-size:1.3rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap}.gradient-generator .preview-panel .code-section .code-container pre code[data-v-2ae0451a]{margin:0;padding:0}.gradient-generator .preview-panel .code-section .code-container .copy-btn[data-v-2ae0451a]{position:absolute;top:12.5px;right:12.5px;width:6rem;padding:10px 15px;box-sizing:border-box;background:#43BEE5;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1.2rem;font-weight:500;transition:all .3s ease;z-index:1}.gradient-generator .preview-panel .code-section .code-container .copy-btn[data-v-2ae0451a]:hover{background:#3182ce;transform:translateY(-1px)}.gradient-generator .preview-panel .code-section .code-container .copy-btn[data-v-2ae0451a]:active{transform:translateY(0)}@media (max-width: 768px){.gradient-generator[data-v-2ae0451a]{padding:12.5px}.gradient-generator .container[data-v-2ae0451a]{grid-template-columns:1fr;gap:25px}.gradient-generator .header-gradient h1[data-v-2ae0451a]{font-size:2.5rem}.gradient-generator .control-panel[data-v-2ae0451a],.gradient-generator .preview-panel[data-v-2ae0451a]{padding:25px}.gradient-generator .gradient-types[data-v-2ae0451a],.gradient-generator .direction-controls[data-v-2ae0451a],.gradient-generator .preset-gradients[data-v-2ae0451a]{grid-template-columns:1fr}.gradient-generator .gradient-preview[data-v-2ae0451a]{height:187.5px!important}}.fouc-fix{display:block}