@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Fira+Code:wght@300;400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a202c;color:#fff;overflow-x:hidden}#root{min-height:100vh;width:100%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}input,button,textarea,select{font:inherit}button{border:none;background:none;cursor:pointer}::selection{background:#667eea4d;color:#fff}::-moz-selection{background:#667eea4d;color:#fff}:focus-visible{outline:2px solid rgba(102,126,234,.8);outline-offset:2px}.app *{will-change:auto}.app *:hover,.app *:focus,.app *:active{will-change:transform,opacity,background,border-color,box-shadow}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #6366f1;--secondary-color: #8b5cf6;--accent-color: #f093fb;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--bounce: all .3s cubic-bezier(.68, -.55, .265, 1.55);--elastic: cubic-bezier(.68, -.55, .265, 1.55)}:root,[data-theme=dark]{--bg-dark: #0f0f23;--bg-light: rgba(255, 255, 255, .1);--text-light: #e2e8f0;--text-muted: #94a3b8;--text-color: #e2e8f0;--text-secondary: #94a3b8;--label-color: rgba(255, 255, 255, .9);--border-color: rgba(255, 255, 255, .1);--shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-medium: 0 4px 15px rgba(0, 0, 0, .2);--menu-bg: rgba(15, 15, 35, .95);--control-bg: rgba(255, 255, 255, .1);--control-border: rgba(255, 255, 255, .2);--control-hover: rgba(255, 255, 255, .15)}[data-theme=light]{--bg-dark: #f8fafc;--bg-light: rgba(0, 0, 0, .08);--text-light: #0f172a;--text-muted: #475569;--text-color: #0f172a;--text-secondary: #475569;--label-color: #1e293b;--border-color: rgba(0, 0, 0, .15);--shadow: 0 25px 50px -12px rgba(0, 0, 0, .2);--shadow-medium: 0 4px 15px rgba(0, 0, 0, .15);--menu-bg: rgba(255, 255, 255, .95);--control-bg: rgba(0, 0, 0, .08);--control-border: rgba(0, 0, 0, .15);--control-hover: rgba(0, 0, 0, .12)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateY(0)}40%,43%{transform:translateY(-8px)}70%{transform:translateY(-4px)}90%{transform:translateY(-2px)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes glow{0%,to{box-shadow:0 0 5px #f093fb4d}50%{box-shadow:0 0 20px #f093fb99,0 0 30px #667eea66}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-100px)}to{opacity:1;transform:translate(0)}}@keyframes wiggle{0%,7%{transform:rotate(0)}15%{transform:rotate(-15deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}40%,to{transform:rotate(0)}}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;position:relative;overflow:hidden}.fullscreen-gradient{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;transition:all .5s ease}.floating-menu{position:fixed;top:20px;right:20px;width:420px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);background:var(--menu-bg);border:1px solid var(--control-border);border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(20px);z-index:1000;overflow-y:auto;transition:all .3s ease;scrollbar-width:thin;scrollbar-color:var(--control-border) transparent}.floating-menu::-webkit-scrollbar{width:6px}.floating-menu::-webkit-scrollbar-track{background:transparent}.floating-menu::-webkit-scrollbar-thumb{background:var(--control-border);border-radius:3px}.floating-menu::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.floating-menu:hover{transform:translateY(-2px);box-shadow:0 25px 50px #00000040}.menu-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;cursor:pointer;transition:var(--transition);border-bottom:1px solid var(--border-color);animation:fadeInUp .5s ease-out .2s both}.header-controls{display:flex;align-items:center;gap:.5rem}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:8px;color:var(--text-light);cursor:pointer;transition:var(--bounce);position:relative;overflow:hidden}.theme-toggle:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,147,251,.2),transparent);transition:left .4s ease}.theme-toggle:hover{background:var(--control-hover);border-color:var(--accent-color);transform:scale(1.1) rotate(10deg);box-shadow:0 4px 15px #f093fb4d}.theme-toggle:hover:before{left:100%}.theme-toggle:active{transform:scale(.95)}.menu-header:hover{background:#ffffff0d;transform:scale(1.02)}.menu-header:active{transform:scale(.98)}.menu-title{display:flex;align-items:center;gap:.75rem}.menu-icon{color:var(--accent-color);transition:var(--transition);animation:pulse 2s infinite}.menu-icon:hover{animation:wiggle .8s ease-in-out;transform-origin:center}.menu-logo{width:32px;height:32px;object-fit:contain;transition:var(--transition);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:pulse 2s infinite}.menu-logo:hover{animation:wiggle .8s ease-in-out;transform-origin:center;transform:scale(1.1);filter:drop-shadow(0 4px 8px rgba(240,147,251,.3))}.menu-header h2{color:var(--text-light);font-size:1.5rem;font-weight:700;margin:0;text-shadow:0 2px 4px var(--shadow-medium);transition:var(--transition)}.menu-header:hover h2{text-shadow:0 4px 8px var(--shadow-medium)}.menu-toggle{color:var(--text-light);opacity:.7;transition:var(--transition);transform-origin:center}.menu-header:hover .menu-toggle{opacity:1;animation:rotate .3s ease-in-out}.menu-content{padding:1.5rem;max-height:calc(100vh - 8rem);overflow-y:auto;animation:fadeInUp .6s ease-out .4s both}.control-group{margin-bottom:24px;opacity:1;animation:slideInUp .3s ease forwards;transition:all .3s ease}.control-group:hover{transform:translateY(-1px)}.menu-section{padding:24px;border-bottom:1px solid var(--control-border);position:relative}.menu-section:last-child{border-bottom:none}.menu-section:not(:first-child){margin-top:8px}.menu-section:before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,var(--control-border),transparent);opacity:.5}.menu-section:first-child:before{display:none}.control-group:nth-child(1){animation-delay:0s}.control-group:nth-child(2){animation-delay:0s}.control-group:nth-child(3){animation-delay:0s}.control-group:nth-child(4){animation-delay:0s}.control-group:nth-child(5){animation-delay:0s}.control-group:last-child{margin-bottom:0}.control-group:hover{transform:translate(5px)}.control-group h3{color:var(--text-light);font-size:1.1rem;font-weight:600;margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,.2);transition:var(--transition)}.control-group:hover h3{color:var(--accent-color);text-shadow:0 0 10px rgba(240,147,251,.5)}.colors-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.add-color-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;color:var(--text-light);cursor:pointer;transition:var(--bounce);position:relative;overflow:hidden}.add-color-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#f093fb4d;border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease}.add-color-btn:hover{background:var(--control-hover);border-color:var(--control-border);transform:scale(1.1) rotate(90deg);animation:bounce .6s ease}.add-color-btn:hover:before{width:100%;height:100%}.add-color-btn:active{transform:scale(.95)}.color-controls{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--control-bg);border:1px solid var(--control-border);border-radius:8px;margin-bottom:.75rem;position:relative;transition:var(--transition);animation:fadeInUp .4s ease-out both}.color-controls:hover{background:var(--control-hover);border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.position-control{display:flex;align-items:center;gap:.75rem}.position-slider{flex:1;height:6px;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer;transition:var(--transition)}.position-slider:hover{background:#ffffff26;transform:scaleY(1.2)}.position-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0003;transition:var(--transition)}.position-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #f093fb66;animation:pulse 1s infinite}.position-slider::-moz-range-thumb{width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0003;transition:var(--transition)}.position-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 12px #f093fb66}.position-value{color:var(--text-light);font-size:.9rem;font-weight:600;min-width:40px;text-align:center}.remove-color-btn{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;background:#f003;border:1px solid rgba(255,0,0,.3);border-radius:50%;color:#ff6b6b;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--bounce);overflow:hidden;position:relative}.remove-color-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ff6b6b4d;border-radius:50%;transform:translate(-50%,-50%);transition:all .3s ease}.remove-color-btn:hover{background:#ff00004d;border-color:#ff000080;transform:scale(1.2) rotate(90deg);animation:wiggle .5s ease}.remove-color-btn:hover:before{width:100%;height:100%}.remove-color-btn:active{transform:scale(.9);animation:bounce .3s ease}.action-buttons{display:flex;gap:16px;margin-top:24px;padding:0;flex-wrap:wrap}.action-buttons button{flex:0 1 auto;min-width:120px;padding:16px 20px;background:var(--control-bg);border:1px solid var(--control-border);border-radius:12px;color:var(--text-color);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:500;position:relative;overflow:hidden;white-space:nowrap;min-height:52px}.action-buttons button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.action-buttons button:hover{background:var(--control-hover);border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.action-buttons button:hover:before{left:100%}.action-buttons button:active{transform:translateY(-1px);box-shadow:0 4px 15px #0000001a}.action-buttons button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:0 6px 20px #8b5cf64d}.action-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text-light);font-weight:600;cursor:pointer;transition:var(--bounce);backdrop-filter:blur(10px);font-size:.9rem;width:100%;position:relative;overflow:hidden}.action-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.action-btn:hover{background:#fff3;border-color:#ffffff4d;box-shadow:var(--shadow-medium);transform:translateY(-2px) scale(1.05);animation:glow 1.5s ease-in-out infinite alternate}.action-btn:hover:before{left:100%}.action-btn:active{transform:translateY(0) scale(.98)}.action-btn.copied{background:#22c55e33;border-color:#22c55e66;color:#22c55e}.random-btn{background:linear-gradient(135deg,var(--accent-color),#ff6b9d);border-color:var(--accent-color);animation:heartbeat 2s ease-in-out infinite}.random-btn:hover{background:linear-gradient(135deg,#ff6b9d,var(--accent-color));transform:translateY(-2px) scale(1.05);animation:pulse .8s ease-in-out infinite}.random-btn:active{animation:bounce .3s ease}.color-inputs{display:flex;flex-direction:column;gap:1rem}.color-input-group{display:flex;flex-direction:column;gap:.5rem}.color-input-group label{color:var(--label-color);font-weight:500;font-size:.9rem}.color-input-wrapper{display:flex;gap:.75rem;align-items:center}.color-input{width:40px;height:40px;border:2px solid var(--control-border);border-radius:8px;cursor:pointer;transition:var(--bounce);background:transparent;position:relative;overflow:hidden}.color-input:before{content:"";position:absolute;inset:0;border-radius:6px;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);opacity:0;transition:opacity .3s ease}.color-input:hover{border-color:var(--control-hover);transform:scale(1.1) rotate(5deg);animation:glow 1s ease-in-out infinite alternate}.color-input:hover:before{opacity:1}.color-input:active{transform:scale(.95);animation:bounce .3s ease}.color-text{flex:1;padding:.5rem;background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;color:var(--text-light);font-size:.85rem;transition:var(--bounce);position:relative}.color-text:focus{outline:none;border-color:var(--accent-color);background:var(--control-hover);transform:scale(1.02);box-shadow:0 0 15px #f093fb4d}.color-text:hover{background:var(--control-hover);border-color:var(--accent-color)}.direction-select{width:100%;padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text-light);font-size:.95rem;cursor:pointer;transition:var(--transition)}.direction-select:focus{outline:none;background:#ffffff26;border-color:#fff6;box-shadow:0 0 0 3px #ffffff1a}.direction-select option{background:var(--bg-dark);color:var(--text-light)}.direction-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.5rem}.direction-option{padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text-light);cursor:pointer;text-align:center;font-size:.85rem;transition:var(--bounce);position:relative;overflow:hidden}.direction-option:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,147,251,.2),transparent);transition:left .4s ease}.direction-option:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px) scale(1.05);animation:glow 1s ease-in-out infinite alternate}.direction-option:hover:before{left:100%}.direction-option:active{transform:scale(.95);animation:bounce .2s ease}.direction-option.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;animation:pulse 1.5s ease-in-out infinite;box-shadow:0 0 20px #f093fb66}.direction-option.active:hover{animation:heartbeat .8s ease-in-out infinite}.category-selector{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.category-btn{padding:6px 12px;border:1px solid var(--control-border);background:var(--control-bg);color:var(--text-color);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;text-transform:capitalize}.category-btn:hover{background:var(--control-hover);border-color:var(--accent-color)}.category-btn.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-top:.75rem}.preset-item{height:60px;border-radius:8px;cursor:pointer;transition:var(--bounce);border:2px solid rgba(255,255,255,.1);position:relative;overflow:hidden;animation:slideInLeft .5s ease-out both}.preset-item:nth-child(1){animation-delay:.1s}.preset-item:nth-child(2){animation-delay:.2s}.preset-item:nth-child(3){animation-delay:.3s}.preset-item:nth-child(4){animation-delay:.4s}.preset-item:nth-child(5){animation-delay:.5s}.preset-item:nth-child(6){animation-delay:.6s}.preset-item:active{transform:scale(.95);animation:bounce .3s ease}.preset-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s ease}.preset-item:after{content:"";position:absolute;inset:0;background:#0000001a;opacity:0;transition:var(--transition)}.css-output{background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;margin-top:2rem;transition:var(--transition);animation:fadeInUp .6s ease-out both;position:relative;overflow:hidden}.css-output:before{margin-top:2rem;content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(240,147,251,.1),transparent);transition:left .8s ease}.css-output:hover{margin-top:2rem;background:#0006;border-color:#fff3;transform:translateY(-2px);box-shadow:0 8px 25px #0003}.css-output:hover:before{margin-top:2rem;left:100%}.css-output h3{margin-top:2rem;color:var(--text-light);font-size:1rem;margin-bottom:.75rem;font-weight:600;transition:var(--transition)}.css-output:hover h3{margin-top:2rem;color:var(--accent-color);text-shadow:0 0 10px rgba(240,147,251,.5)}.css-code{background:#00000080;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:1.25rem;font-family:Fira Code,monospace;font-size:.85rem;color:#e2e8f0;white-space:pre-wrap;word-break:break-all;line-height:1.4;transition:var(--transition);position:relative}.css-code:hover{background:#0009;border-color:#fff3;color:#f1f5f9;transform:scale(1.01)}.gradient-type-select,.shape-select,.size-select,.position-select{width:100%;padding:.75rem;background:var(--control-bg);border:1px solid var(--control-border);border-radius:8px;color:var(--text-light);font-size:.95rem;cursor:pointer;transition:var(--transition)}.gradient-type-select:focus,.shape-select:focus,.size-select:focus,.position-select:focus{outline:none;background:var(--control-hover);border-color:var(--accent-color);box-shadow:0 0 0 3px #f093fb1a}.gradient-type-select option,.shape-select option,.size-select option,.position-select option{background:var(--menu-bg);color:var(--text-light)}.angle-control,.center-control{display:flex;align-items:center;gap:1rem;margin-top:.5rem}.angle-slider,.center-slider{flex:1;height:6px;background:var(--control-border);border-radius:3px;outline:none;cursor:pointer;transition:var(--transition);-webkit-appearance:none;appearance:none}.angle-slider:hover,.center-slider:hover{background:var(--control-hover);transform:scaleY(1.2)}.angle-slider::-webkit-slider-thumb,.center-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;cursor:pointer;transition:var(--bounce);box-shadow:0 2px 8px #0003}.angle-slider::-webkit-slider-thumb:hover,.center-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #f093fb66;animation:glow 1s ease-in-out infinite alternate}.angle-slider::-moz-range-thumb,.center-slider::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;cursor:pointer;border:none;transition:var(--bounce);box-shadow:0 2px 8px #0003}.angle-slider::-moz-range-thumb:hover,.center-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 4px 15px #f093fb66}.angle-value,.center-value{min-width:45px;padding:.25rem .5rem;background:var(--control-bg);border:1px solid var(--control-border);border-radius:6px;color:var(--text-light);font-size:.85rem;text-align:center;transition:var(--transition)}.angle-value:hover,.center-value:hover{background:var(--control-hover);border-color:var(--accent-color);transform:scale(1.05)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.clear-history-btn{padding:4px 8px;background:var(--control-bg);border:1px solid var(--control-border);color:var(--text-color);border-radius:4px;cursor:pointer;font-size:11px;transition:all .2s ease}.clear-history-btn:hover{background:var(--control-hover);border-color:#f44;color:#f44}.empty-history{text-align:center;padding:20px;color:var(--text-secondary);font-size:14px}.empty-history p{margin:4px 0}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:200px;overflow-y:auto}.history-item{position:relative;background:var(--control-bg);border:1px solid var(--control-border);border-radius:8px;overflow:hidden;transition:all .2s ease}.history-item:hover{border-color:var(--accent-color);transform:translateY(-1px)}.history-preview{width:100%;height:60px;cursor:pointer;transition:all .2s ease}.history-preview:hover{transform:scale(1.02)}.history-info{padding:6px 8px;background:var(--control-bg)}.history-name{display:block;font-size:11px;font-weight:500;color:var(--text-color);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-date{display:block;font-size:10px;color:var(--text-secondary)}.delete-history-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#0009;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s ease}.history-item:hover .delete-history-btn{opacity:1}.delete-history-btn:hover{background:#f44;transform:scale(1.1)}.action-btn.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff}@media (max-width: 1024px){.floating-menu{width:380px}}@media (max-width: 768px){.floating-menu{width:calc(100vw - 20px);left:10px;right:10px;top:10px;max-height:calc(100vh - 20px);border-radius:12px}.menu-section{padding:20px}.menu-section:before{left:20px;right:20px}.control-group{flex-direction:column;gap:12px}.gradient-type-selector{grid-template-columns:1fr 1fr 1fr;gap:8px}.preset-grid{grid-template-columns:repeat(2,1fr);gap:8px}.category-selector{gap:6px;flex-wrap:wrap}.category-btn{padding:8px 12px;font-size:12px;min-width:auto;flex:1}.history-grid{grid-template-columns:1fr;gap:12px}.palette-colors{grid-template-columns:repeat(4,1fr);gap:8px}.color-targets{grid-template-columns:repeat(2,1fr)}.animation-controls{gap:12px}.animation-type-buttons,.animation-direction-buttons{grid-template-columns:1fr 1fr;gap:8px}.action-buttons{flex-direction:column;gap:8px}.action-buttons button{width:100%}.color-input-wrapper{flex-direction:column;align-items:stretch}.angle-control,.center-control{flex-direction:column;gap:.5rem;align-items:stretch}.angle-value,.center-value{align-self:center}}@media (max-width: 480px){.floating-menu{width:calc(100vw - 10px);left:5px;right:5px;top:5px;max-height:calc(100vh - 10px);border-radius:8px}.menu-section{padding:16px}.menu-section:before{left:16px;right:16px}.gradient-type-selector{grid-template-columns:1fr 1fr}.category-selector{gap:4px}.category-btn{padding:6px 8px;font-size:11px}.palette-colors{grid-template-columns:repeat(3,1fr)}.color-targets,.animation-type-buttons,.animation-direction-buttons{grid-template-columns:1fr}.menu-header,.menu-content{padding:1rem}.menu-header h2{font-size:1.25rem}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--control-hover);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.palettes-section{margin:20px 0;padding:20px;background:var(--menu-bg);border:1px solid var(--control-border);border-radius:12px;overflow:hidden}.palettes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.palettes-header h3{margin:0;color:var(--text-color);font-size:18px;font-weight:600}.generate-palette-btn{padding:8px 16px;background:var(--accent-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.generate-palette-btn:hover{background:var(--accent-hover);transform:translateY(-1px)}.palette-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.palette-btn{padding:8px 16px;background:var(--control-bg);color:var(--text-color);border:1px solid var(--control-border);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;text-transform:capitalize;transition:all .2s ease}.palette-btn:hover{background:var(--control-hover);border-color:var(--accent-color)}.palette-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.palette-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px;margin-bottom:20px}.palette-color{aspect-ratio:1;border-radius:8px;cursor:pointer;position:relative;overflow:hidden;border:2px solid transparent;transition:all .2s ease;display:flex;align-items:flex-end;justify-content:center;padding:4px}.palette-color:hover{border-color:var(--accent-color);box-shadow:0 4px 12px #0003}.color-code{background:#000000b3;color:#fff;font-size:10px;padding:2px 4px;border-radius:4px;font-family:monospace;opacity:0;transition:opacity .2s ease}.palette-color:hover .color-code{opacity:1}.color-targets{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.color-targets span{color:var(--text-color);font-size:14px;font-weight:500}.color-target-btn{padding:6px 12px;background:var(--control-bg);color:var(--text-color);border:1px solid var(--control-border);border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease}.color-target-btn:hover{background:var(--control-hover);border-color:var(--accent-color)}@media (max-width: 768px){.palette-colors{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px}.palettes-header{flex-direction:column;gap:12px;align-items:stretch}.palette-selector,.color-targets{justify-content:center}}.animations-section{margin:20px 0;padding:20px;background:var(--menu-bg);border:1px solid var(--control-border);border-radius:12px;overflow:hidden}.animations-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.animations-header h3{margin:0;color:var(--text-color);font-size:18px;font-weight:600}.toggle-animation-btn{padding:8px 16px;background:var(--control-bg);color:var(--text-color);border:1px solid var(--control-border);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.toggle-animation-btn:hover{background:var(--control-hover);border-color:var(--accent-color)}.toggle-animation-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.animation-types,.animation-directions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.animation-type-btn,.direction-btn{padding:8px 16px;background:var(--control-bg);color:var(--text-color);border:1px solid var(--control-border);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.animation-type-btn:hover,.direction-btn:hover{background:var(--control-hover);border-color:var(--accent-color)}.animation-type-btn.active,.direction-btn.active{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.duration-slider{width:100%;margin-top:8px;-webkit-appearance:none;appearance:none;height:6px;background:var(--control-bg);border-radius:3px;outline:none;cursor:pointer}.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;transition:all .2s ease}.duration-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px #6366f133}.duration-slider::-moz-range-thumb{width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:none;transition:all .2s ease}.duration-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px #6366f133}@keyframes gradient-rotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes gradient-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}@keyframes gradient-wave{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}to{background-position:0% 0%}}@media (max-width: 768px){.animations-header{flex-direction:column;gap:12px;align-items:stretch}.animation-types,.animation-directions{justify-content:center}}